Initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,379 @@
+
+import React, { useState, useEffect } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, Grid } from '@react-three/drei';
+import { Sidebar } from './components/Sidebar';
+import { IOPanel } from './components/IOPanel';
+import { LadderEditor } from './components/LadderEditor';
+import { 
+  SimObject, ObjectType, AxisObject, CylinderObject, SwitchObject, LedObject, 
+  IOLogicRule, LogicCondition, LogicAction, ProjectData
+} from './types';
+import { EditableObject } from './components/SceneObjects';
+import { Layout as LayoutIcon, Cpu, Play, Pause, Square } from 'lucide-react';
+
+// --- Simulation Manager (PLC Scan Cycle) ---
+const SimulationLoop = ({ 
+  isPlaying, 
+  objects, 
+  setObjects, 
+  logicRules,
+  manualInputs,
+  manualOutputs,
+  setInputs,
+  setOutputs
+}: { 
+  isPlaying: boolean, 
+  objects: SimObject[], 
+  setObjects: React.Dispatch<React.SetStateAction<SimObject[]>>,
+  logicRules: IOLogicRule[],
+  manualInputs: boolean[],
+  manualOutputs: boolean[],
+  setInputs: (inputs: boolean[]) => void,
+  setOutputs: (outputs: boolean[]) => void
+}) => {
+  
+  useFrame((state, delta) => {
+    if (!isPlaying) return;
+
+    // --- 1. PLC Input Scan (Physical + Manual Force) ---
+    const sensorInputs = new Array(16).fill(false);
+    objects.forEach(obj => {
+      if (obj.type === ObjectType.SWITCH && (obj as SwitchObject).isOn) {
+        const port = (obj as SwitchObject).inputPort;
+        if (port >= 0 && port < 16) sensorInputs[port] = true;
+      }
+      if ((obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) && (obj as AxisObject).triggers) {
+        const axis = obj as AxisObject;
+        axis.triggers.forEach(trig => {
+          const met = trig.condition === '>' ? axis.currentValue > trig.position : axis.currentValue < trig.position;
+          if (met && trig.targetInputPort >= 0 && trig.targetInputPort < 16) sensorInputs[trig.targetInputPort] = true;
+        });
+      }
+    });
+
+    const effectiveInputs = sensorInputs.map((bit, i) => bit || manualInputs[i]);
+    setInputs(effectiveInputs);
+
+    // --- 2. PLC Logic Execution ---
+    const logicOutputs = new Array(16).fill(false);
+    logicRules.forEach(rule => {
+      if (!rule.enabled) return;
+      const inputState = effectiveInputs[rule.inputPort];
+      const conditionMet = rule.condition === LogicCondition.IS_ON ? inputState : !inputState;
+      if (conditionMet && rule.action === LogicAction.SET_ON) {
+        logicOutputs[rule.outputPort] = true;
+      }
+    });
+
+    // Effective Outputs = Logic OR Manual Force
+    const effectiveOutputs = logicOutputs.map((bit, i) => bit || manualOutputs[i]);
+    setOutputs(effectiveOutputs);
+
+    // --- 3. Physical Update Scan ---
+    setObjects(prevObjects => {
+      let hasChanges = false;
+      const newObjects = prevObjects.map(obj => {
+        let newObj = { ...obj };
+        let changed = false;
+
+        if (obj.type === ObjectType.LED) {
+           const led = obj as LedObject;
+           const shouldBeOn = effectiveOutputs[led.outputPort];
+           if (led.isOn !== shouldBeOn) {
+             newObj = { ...led, isOn: shouldBeOn };
+             changed = true;
+           }
+        }
+        else if (obj.type === ObjectType.CYLINDER) {
+           const cyl = obj as CylinderObject;
+           const shouldExtend = effectiveOutputs[cyl.outputPort];
+           const targetPos = shouldExtend ? cyl.stroke : 0;
+           if (Math.abs(cyl.currentPosition - targetPos) > 0.01) {
+                const step = cyl.speed * delta * 5;
+                if (cyl.currentPosition < targetPos) {
+                    newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.min(targetPos, cyl.currentPosition + step) };
+                } else {
+                    newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.max(targetPos, cyl.currentPosition - step) };
+                }
+                changed = true;
+           }
+        }
+        else if (obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) {
+            const axis = obj as AxisObject;
+            if (axis.currentValue !== axis.targetValue) {
+               const diff = axis.targetValue - axis.currentValue;
+               const step = axis.speed * delta * 10;
+               if (Math.abs(diff) < step) {
+                   newObj = { ...axis, currentValue: axis.targetValue };
+               } else {
+                   newObj = { ...axis, currentValue: axis.currentValue + Math.sign(diff) * step };
+               }
+               changed = true;
+            }
+        }
+
+        if (changed) hasChanges = true;
+        return newObj;
+      });
+      return hasChanges ? newObjects : prevObjects;
+    });
+  });
+
+  return null;
+};
+
+export default function App() {
+  const [activeView, setActiveView] = useState<'layout' | 'logic'>('layout');
+  const [objects, setObjects] = useState<SimObject[]>([]);
+  const [logicRules, setLogicRules] = useState<IOLogicRule[]>([]);
+  
+  const [inputs, setInputs] = useState<boolean[]>(new Array(16).fill(false));
+  const [outputs, setOutputs] = useState<boolean[]>(new Array(16).fill(false));
+  const [manualInputs, setManualInputs] = useState<boolean[]>(new Array(16).fill(false));
+  const [manualOutputs, setManualOutputs] = useState<boolean[]>(new Array(16).fill(false));
+
+  const [inputNames, setInputNames] = useState<string[]>(new Array(16).fill(''));
+  const [outputNames, setOutputNames] = useState<string[]>(new Array(16).fill(''));
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    if (!isPlaying) {
+      setObjects(prev => prev.map(obj => {
+        if (obj.type === ObjectType.LED) {
+          const led = obj as LedObject;
+          return { ...led, isOn: manualOutputs[led.outputPort] };
+        }
+        if (obj.type === ObjectType.CYLINDER) {
+          const cyl = obj as CylinderObject;
+          const extended = manualOutputs[cyl.outputPort];
+          return { ...cyl, extended, currentPosition: extended ? cyl.stroke : 0 };
+        }
+        return obj;
+      }));
+      setInputs([...manualInputs]);
+      setOutputs([...manualOutputs]);
+    }
+  }, [manualInputs, manualOutputs, isPlaying]);
+
+  const handleUpdatePortName = (type: 'input' | 'output', index: number, name: string) => {
+    if (type === 'input') {
+      const next = [...inputNames]; next[index] = name; setInputNames(next);
+    } else {
+      const next = [...outputNames]; next[index] = name; setOutputNames(next);
+    }
+  };
+
+  const handleToggleManualInput = (index: number) => {
+    const next = [...manualInputs]; next[index] = !next[index]; setManualInputs(next);
+  };
+
+  const handleToggleManualOutput = (index: number) => {
+    const next = [...manualOutputs]; next[index] = !next[index]; setManualOutputs(next);
+  };
+
+  const handleReset = () => {
+    setIsPlaying(false);
+    setManualInputs(new Array(16).fill(false));
+    setManualOutputs(new Array(16).fill(false));
+    setObjects(prev => prev.map(o => {
+        if(o.type === ObjectType.AXIS_LINEAR || o.type === ObjectType.AXIS_ROTARY) return {...o, currentValue: (o as AxisObject).min, targetValue: (o as AxisObject).min};
+        if(o.type === ObjectType.CYLINDER) return {...o, currentPosition: 0, extended: false};
+        if(o.type === ObjectType.LED) return {...o, isOn: false};
+        if(o.type === ObjectType.SWITCH) return {...o, isOn: false};
+        return o;
+    }));
+  };
+
+  const handleExport = () => {
+    const project: ProjectData = { version: "1.0", objects, logicRules, inputNames, outputNames };
+    const blob = new Blob([JSON.stringify(project, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = `motion-sim-project.json`; a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const data = JSON.parse(event.target?.result as string) as ProjectData;
+        if (data.objects) setObjects(data.objects);
+        if (data.logicRules) setLogicRules(data.logicRules);
+        if (data.inputNames) setInputNames(data.inputNames);
+        if (data.outputNames) setOutputNames(data.outputNames);
+      } catch (err) { alert("Invalid JSON"); }
+    };
+    reader.readAsText(file);
+    e.target.value = '';
+  };
+
+  const handleAddObject = (type: ObjectType) => {
+    const id = crypto.randomUUID();
+    const position = { x: 0, y: 0.1, z: 0 };
+    let newObj: SimObject;
+    switch (type) {
+      case ObjectType.AXIS_LINEAR:
+        newObj = { id, type, name: 'Linear Axis', position, rotation: {x:0,y:0,z:0}, min: 0, max: 100, currentValue: 0, targetValue: 0, speed: 1, isOscillating: false, triggers: [] } as AxisObject;
+        break;
+      case ObjectType.AXIS_ROTARY:
+        newObj = { id, type, name: 'Rotary Axis', position, rotation: {x:0,y:0,z:0}, min: 0, max: 360, currentValue: 0, targetValue: 0, speed: 1, isOscillating: false, triggers: [] } as AxisObject;
+        break;
+      case ObjectType.CYLINDER:
+        newObj = { id, type, name: 'Cylinder', position, rotation: {x:0,y:0,z:0}, stroke: 2, extended: false, currentPosition: 0, speed: 2, outputPort: 0 } as CylinderObject;
+        break;
+      case ObjectType.SWITCH:
+        newObj = { id, type, name: 'Switch', position, rotation: {x:0,y:0,z:0}, isOn: false, isMomentary: true, inputPort: 0 } as SwitchObject;
+        break;
+      case ObjectType.LED:
+        newObj = { id, type, name: 'LED', position, rotation: {x:0,y:0,z:0}, isOn: false, color: '#00ff00', outputPort: 0 } as LedObject;
+        break;
+      default: return;
+    }
+    setObjects(prev => [...prev, newObj]);
+    setSelectedId(id);
+    setActiveView('layout');
+  };
+
+  return (
+    <div className="flex flex-col w-screen h-screen bg-black text-white overflow-hidden font-sans">
+      
+      {/* Top Navigation */}
+      <div className="h-16 bg-gray-900 border-b border-gray-800 flex items-center px-6 justify-between shrink-0 z-20 shadow-lg">
+        <div className="flex items-center gap-8">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(37,99,235,0.4)]">M</div>
+            <span className="font-bold tracking-tight text-lg">MotionSim</span>
+          </div>
+          
+          <div className="flex bg-gray-950 p-1 rounded-xl border border-gray-800 shadow-inner">
+            <button 
+              onClick={() => setActiveView('layout')}
+              className={`flex items-center gap-2 px-6 py-2 rounded-lg text-sm font-bold transition-all ${activeView === 'layout' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:text-gray-300'}`}
+            >
+              <LayoutIcon size={16}/> Layout
+            </button>
+            <button 
+              onClick={() => setActiveView('logic')}
+              className={`flex items-center gap-2 px-6 py-2 rounded-lg text-sm font-bold transition-all ${activeView === 'logic' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:text-gray-300'}`}
+            >
+              <Cpu size={16}/> Logic
+            </button>
+          </div>
+        </div>
+
+        {/* Global Controls */}
+        <div className="flex items-center gap-4">
+           {isPlaying && (
+             <div className="bg-green-900/20 border border-green-500/30 px-4 py-1.5 rounded-full flex items-center gap-2">
+                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_#22c55e]" />
+                <span className="text-[10px] font-black text-green-400 tracking-[0.2em] uppercase">PLC ACTIVE</span>
+             </div>
+           )}
+
+           <div className="h-8 w-[1px] bg-gray-800 mx-2" />
+
+           <div className="flex items-center gap-2 bg-gray-950 p-1 rounded-xl border border-gray-800">
+              <button 
+                onClick={() => setIsPlaying(!isPlaying)}
+                title={isPlaying ? "Stop PLC" : "Start PLC"}
+                className={`flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-black transition-all ${isPlaying ? 'bg-red-600/20 text-red-500 hover:bg-red-600/30' : 'bg-green-600 text-white hover:bg-green-500 shadow-lg shadow-green-900/20'}`}
+              >
+                {isPlaying ? <><Pause size={14}/> STOP</> : <><Play size={14}/> RUN</>}
+              </button>
+              <button 
+                onClick={handleReset}
+                title="Reset System"
+                className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-all"
+              >
+                <Square size={16} fill="currentColor" />
+              </button>
+           </div>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex overflow-hidden">
+        
+        {/* Left Side: Permanent IO Panel */}
+        <IOPanel 
+          inputs={inputs} 
+          outputs={outputs} 
+          inputNames={inputNames} 
+          outputNames={outputNames}
+          onToggleInput={handleToggleManualInput}
+          onToggleOutput={handleToggleManualOutput}
+        />
+
+        {/* Center/Right: Dynamic Content based on tab */}
+        {activeView === 'layout' ? (
+          <div className="flex-1 flex overflow-hidden relative">
+            <div className="flex-1 relative cursor-crosshair">
+              <Canvas shadows camera={{ position: [5, 5, 5], fov: 50 }}>
+                <color attach="background" args={['#0f172a']} />
+                <ambientLight intensity={0.5} />
+                <directionalLight position={[10, 10, 5]} intensity={1} castShadow />
+                <Grid position={[0, -0.01, 0]} args={[20, 20]} cellSize={1} cellThickness={0.5} cellColor="#1e293b" sectionSize={5} sectionThickness={1} sectionColor="#334155" fadeDistance={30} infiniteGrid />
+                <OrbitControls makeDefault enabled={!isPlaying || !selectedId} />
+
+                {objects.map(obj => (
+                  <EditableObject 
+                    key={obj.id} 
+                    data={obj} 
+                    isSelected={obj.id === selectedId} 
+                    isPlaying={isPlaying}
+                    enableTransform={true}
+                    onSelect={setSelectedId}
+                    onUpdate={(id, updates) => setObjects(prev => prev.map(o => o.id === id ? {...o, ...updates} as SimObject : o))}
+                    onInteract={(id) => setObjects(prev => prev.map(o => (o.id === id && o.type === ObjectType.SWITCH) ? { ...o, isOn: !o.isOn } as SwitchObject : o))}
+                  />
+                ))}
+
+                <SimulationLoop 
+                   isPlaying={isPlaying} 
+                   objects={objects} 
+                   setObjects={setObjects} 
+                   logicRules={logicRules}
+                   manualInputs={manualInputs}
+                   manualOutputs={manualOutputs}
+                   setInputs={setInputs}
+                   setOutputs={setOutputs}
+                />
+              </Canvas>
+            </div>
+
+            <Sidebar 
+              objects={objects}
+              selectedId={selectedId}
+              isPlaying={isPlaying}
+              inputNames={inputNames}
+              outputNames={outputNames}
+              onAddObject={handleAddObject}
+              onDeleteObject={(id) => { setObjects(prev => prev.filter(o => o.id !== id)); setSelectedId(null); }}
+              onUpdateObject={(id, updates) => setObjects(prev => prev.map(o => o.id === id ? { ...o, ...updates } as SimObject : o))}
+              onSelect={setSelectedId}
+              onUpdatePortName={handleUpdatePortName}
+              onExport={handleExport}
+              onImport={handleImport}
+            />
+          </div>
+        ) : (
+          <LadderEditor 
+            logicRules={logicRules}
+            inputNames={inputNames}
+            outputNames={outputNames}
+            currentInputs={inputs}
+            currentOutputs={outputs}
+            onAddRule={(r) => setLogicRules(prev => [...prev, r])}
+            onDeleteRule={(id) => setLogicRules(prev => prev.filter(r => r.id !== id))}
+            onUpdateRule={(id, updates) => setLogicRules(prev => prev.map(r => r.id === id ? {...r, ...updates} : r))}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

README.md

@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1pht2a_cvsIdyouTxBd9bbVqku_ctG0y4
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

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>
+);

index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MotionSimulator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              gray: {
+                750: '#2d3748',
+                850: '#1a202c',
+                950: '#0d1117',
+              }
+            }
+          }
+        }
+      }
+    </script>
+    <style>
+      body { margin: 0; overflow: hidden; background-color: #0f172a; color: white; }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react/": "https://esm.sh/react@^19.2.3/",
+    "react": "https://esm.sh/react@^19.2.3",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
+    "@react-three/fiber": "https://esm.sh/@react-three/fiber@^9.4.2",
+    "lucide-react": "https://esm.sh/lucide-react@^0.562.0",
+    "three": "https://esm.sh/three@^0.182.0",
+    "@react-three/drei": "https://esm.sh/@react-three/drei@^10.7.7"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "MotionSimulator",
+  "description": "A web-based 3D motion control simulator. configure axes, cylinders, and IO devices, link them with triggers, and simulate automation logic.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "motionsimulator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@react-three/fiber": "^9.4.2",
+    "lucide-react": "^0.562.0",
+    "three": "^0.182.0",
+    "@react-three/drei": "^10.7.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,94 @@
+export enum ObjectType {
+  AXIS_LINEAR = 'AXIS_LINEAR',
+  AXIS_ROTARY = 'AXIS_ROTARY',
+  CYLINDER = 'CYLINDER',
+  SWITCH = 'SWITCH',
+  LED = 'LED',
+}
+
+export interface Vec3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface BaseObject {
+  id: string;
+  name: string;
+  type: ObjectType;
+  position: Vec3;
+  rotation: Vec3; // Euler angles in radians
+}
+
+export interface AxisPositionTrigger {
+  id: string;
+  position: number;
+  condition: '>' | '<';
+  targetInputPort: number; // Sets this Input bit when condition met
+}
+
+export interface AxisObject extends BaseObject {
+  type: ObjectType.AXIS_LINEAR | ObjectType.AXIS_ROTARY;
+  min: number;
+  max: number;
+  currentValue: number;
+  targetValue: number;
+  speed: number;
+  isOscillating: boolean;
+  triggers: AxisPositionTrigger[]; // Axis drives Inputs
+}
+
+export interface CylinderObject extends BaseObject {
+  type: ObjectType.CYLINDER;
+  stroke: number;
+  extended: boolean; 
+  currentPosition: number; 
+  speed: number;
+  outputPort: number; // Reads this Output bit to extend
+}
+
+export interface SwitchObject extends BaseObject {
+  type: ObjectType.SWITCH;
+  isOn: boolean;
+  isMomentary: boolean;
+  inputPort: number; // Sets this Input bit when pressed
+}
+
+export interface LedObject extends BaseObject {
+  type: ObjectType.LED;
+  isOn: boolean;
+  color: string;
+  outputPort: number; // Reads this Output bit to turn on
+}
+
+export type SimObject = AxisObject | CylinderObject | SwitchObject | LedObject;
+
+// Logic Types
+export enum LogicCondition {
+  IS_ON = 'IS_ON',
+  IS_OFF = 'IS_OFF',
+}
+
+export enum LogicAction {
+  SET_ON = 'ON',     
+  SET_OFF = 'OFF',   
+  TOGGLE = 'TOGGLE', 
+}
+
+export interface IOLogicRule {
+  id: string;
+  inputPort: number;   
+  condition: LogicCondition; 
+  outputPort: number;  
+  action: LogicAction; 
+  enabled: boolean;
+}
+
+// Full Project Export Type
+export interface ProjectData {
+  version: string;
+  objects: SimObject[];
+  logicRules: IOLogicRule[];
+  inputNames: string[];
+  outputNames: string[];
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});