Implement global axis system and advanced motion logic

App.tsx

@@ -6,12 +6,13 @@ import { OrbitControls, Grid, GizmoHelper, GizmoViewcube } from '@react-three/dr
 import { Sidebar } from './components/Sidebar';
 import { IOPanel } from './components/IOPanel';
 import { LadderEditor } from './components/LadderEditor';
+import { SystemSetupDialog } from './components/SystemSetupDialog';
 import {
   SimObject, ObjectType, AxisObject, CylinderObject, SwitchObject, LedObject,
-  IOLogicRule, LogicCondition, LogicAction, ProjectData
+  IOLogicRule, LogicCondition, LogicAction, ProjectData, AxisData, LogicTriggerType, LogicActionType
 } from './types';
 import { EditableObject } from './components/SceneObjects';
-import { Layout as LayoutIcon, Cpu, Play, Pause, Square, Download, Upload, Magnet } from 'lucide-react';
+import { Layout as LayoutIcon, Cpu, Play, Pause, Square, Download, Upload, Magnet, Settings } from 'lucide-react';
 
 // --- Simulation Manager (PLC Scan Cycle) ---
 const SimulationLoop = ({
@@ -22,7 +23,9 @@ const SimulationLoop = ({
   manualInputs,
   manualOutputs,
   setInputs,
-  setOutputs
+  setOutputs,
+  axes,
+  setAxes
 }: {
   isPlaying: boolean,
   objects: SimObject[],
@@ -31,25 +34,30 @@ const SimulationLoop = ({
   manualInputs: boolean[],
   manualOutputs: boolean[],
   setInputs: (inputs: boolean[]) => void,
-  setOutputs: (outputs: boolean[]) => void
+  setOutputs: (outputs: boolean[]) => void,
+  axes: AxisData[],
+  setAxes: React.Dispatch<React.SetStateAction<AxisData[]>>
 }) => {
 
   useFrame((state, delta) => {
     if (!isPlaying) return;
 
     // --- 1. PLC Input Scan (Physical + Manual Force) ---
-    const sensorInputs = new Array(16).fill(false);
+    const sensorInputs = new Array(32).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 (port >= 0 && port < 32) sensorInputs[port] = true;
       }
       if ((obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) && (obj as AxisObject).triggers) {
-        const axis = obj as AxisObject;
+        const axisObj = obj as AxisObject;
-        axis.triggers.forEach(trig => {
+        const globalAxis = axes[axisObj.axisIndex];
-          const met = trig.condition === '>' ? axis.currentValue > trig.position : axis.currentValue < trig.position;
+        if (globalAxis) {
-          if (met && trig.targetInputPort >= 0 && trig.targetInputPort < 16) sensorInputs[trig.targetInputPort] = true;
+          axisObj.triggers.forEach(trig => {
-        });
+            const met = trig.condition === '>' ? globalAxis.value > trig.position : globalAxis.value < trig.position;
+            if (met && trig.targetInputPort >= 0 && trig.targetInputPort < 32) sensorInputs[trig.targetInputPort] = true;
+          });
+        }
       }
     });
 
@@ -57,20 +65,57 @@ const SimulationLoop = ({
     setInputs(effectiveInputs);
 
     // --- 2. PLC Logic Execution ---
-    const logicOutputs = new Array(16).fill(false);
+    const logicOutputs = new Array(32).fill(false);
+
+    // Axis updates from Logic (collected to avoid multiple setState calls)
+    const axisUpdates = new Map<number, number>();
+
     logicRules.forEach(rule => {
       if (!rule.enabled) return;
-      const inputState = effectiveInputs[rule.inputPort];
+
-      const conditionMet = rule.condition === LogicCondition.IS_ON ? inputState : !inputState;
+      // 1. Evaluate Trigger
-      if (conditionMet && rule.action === LogicAction.SET_ON) {
+      let conditionMet = false;
-        logicOutputs[rule.outputPort] = true;
+      if (rule.triggerType === LogicTriggerType.INPUT_BIT) {
+        const inputState = effectiveInputs[rule.inputPort];
+        conditionMet = inputState; // Default IS_ON behavior for now
+      } else if (rule.triggerType === LogicTriggerType.AXIS_COMPARE) {
+        const axis = axes[rule.triggerAxisIndex];
+        if (axis) {
+          switch (rule.triggerCompareOp) {
+            case LogicCondition.GREATER: conditionMet = axis.value > rule.triggerValue; break;
+            case LogicCondition.LESS: conditionMet = axis.value < rule.triggerValue; break;
+            case LogicCondition.EQUAL: conditionMet = Math.abs(axis.value - rule.triggerValue) < 0.1; break;
+          }
+        }
+      }
+
+      // 2. Execute Action if Trigger Met
+      if (conditionMet) {
+        if (rule.actionType === LogicActionType.OUTPUT_COIL) {
+          if (rule.action === LogicAction.SET_ON) {
+            logicOutputs[rule.outputPort] = true;
+          }
+        } else if (rule.actionType === LogicActionType.AXIS_MOVE) {
+          axisUpdates.set(rule.targetAxisIndex, rule.targetAxisValue);
+        }
       }
     });
 
-    // Effective Outputs = Logic OR Manual Force
+    // Apply Logical Outputs
     const effectiveOutputs = logicOutputs.map((bit, i) => bit || manualOutputs[i]);
     setOutputs(effectiveOutputs);
 
+    // Apply Axis Logic Updates (Only if changed to prevent thrashing)
+    if (axisUpdates.size > 0) {
+      setAxes(prev => prev.map(a => {
+        if (axisUpdates.has(a.id)) {
+          const target = axisUpdates.get(a.id)!;
+          if (a.target !== target) return { ...a, target };
+        }
+        return a;
+      }));
+    }
+
     // --- 3. Physical Update Scan ---
     setObjects(prevObjects => {
       let hasChanges = false;
@@ -101,17 +146,8 @@ const SimulationLoop = ({
           }
         }
         else if (obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) {
-          const axis = obj as AxisObject;
+          // Axis objects are now just visualizers, no internal state update needed here
-          if (axis.currentValue !== axis.targetValue) {
+          // Their position is derived from global 'axes' state in render
-            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;
@@ -119,6 +155,23 @@ const SimulationLoop = ({
       });
       return hasChanges ? newObjects : prevObjects;
     });
+
+    // --- 4. Axis Update Scan ---
+    setAxes(prevAxes => {
+      return prevAxes.map(axis => {
+        if (axis.value !== axis.target) {
+          const diff = axis.target - axis.value;
+          const step = axis.speed * delta * 10;
+          if (Math.abs(diff) < step) {
+            return { ...axis, value: axis.target };
+          } else {
+            return { ...axis, value: axis.value + Math.sign(diff) * step };
+          }
+        }
+        return axis;
+      });
+    });
+
   });
 
   return null;
@@ -129,18 +182,31 @@ export default function App() {
   const [objects, setObjects] = useState<SimObject[]>([]);
   const [logicRules, setLogicRules] = useState<IOLogicRule[]>([]);
 
-  const [inputs, setInputs] = useState<boolean[]>(new Array(16).fill(false));
+  const [inputs, setInputs] = useState<boolean[]>(new Array(32).fill(false));
-  const [outputs, setOutputs] = useState<boolean[]>(new Array(16).fill(false));
+  const [outputs, setOutputs] = useState<boolean[]>(new Array(32).fill(false));
-  const [manualInputs, setManualInputs] = useState<boolean[]>(new Array(16).fill(false));
+  const [manualInputs, setManualInputs] = useState<boolean[]>(new Array(32).fill(false));
-  const [manualOutputs, setManualOutputs] = useState<boolean[]>(new Array(16).fill(false));
+  const [manualOutputs, setManualOutputs] = useState<boolean[]>(new Array(32).fill(false));
 
-  const [inputNames, setInputNames] = useState<string[]>(new Array(16).fill(''));
+  const [inputNames, setInputNames] = useState<string[]>(new Array(32).fill(''));
-  const [outputNames, setOutputNames] = useState<string[]>(new Array(16).fill(''));
+  const [outputNames, setOutputNames] = useState<string[]>(new Array(32).fill(''));
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isSnapEnabled, setIsSnapEnabled] = useState(false);
+  const [isSetupOpen, setIsSetupOpen] = useState(false);
   const controlsRef = useRef<any>(null);
 
+  // Initialize 8 Global Axes
+  const [axes, setAxes] = useState<AxisData[]>(() =>
+    Array.from({ length: 8 }, (_, i) => ({
+      id: i,
+      name: `Axis ${i + 1}`,
+      value: 0,
+      target: 0,
+      speed: 5,
+      type: 'linear'
+    }))
+  );
+
   const handleSetView = (view: 'TOP' | 'BOTTOM' | 'FRONT' | 'BACK' | 'LEFT' | 'RIGHT') => {
     const ctrl = controlsRef.current;
     if (!ctrl) return;
@@ -194,19 +260,20 @@ export default function App() {
 
   const handleReset = () => {
     setIsPlaying(false);
-    setManualInputs(new Array(16).fill(false));
+    setManualInputs(new Array(32).fill(false));
-    setManualOutputs(new Array(16).fill(false));
+    setManualOutputs(new Array(32).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 };
+      // Reset logic handles axes reset separately, but visualizers don't hold state anymore
       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;
     }));
+    setAxes(prev => prev.map(a => ({ ...a, value: 0, target: 0 })));
   };
 
   const handleExport = () => {
-    const project: ProjectData = { version: "1.0", objects, logicRules, inputNames, outputNames };
+    const project: ProjectData = { version: "1.1", objects, logicRules, inputNames, outputNames, axes };
     const blob = new Blob([JSON.stringify(project, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -225,6 +292,7 @@ export default function App() {
         if (data.logicRules) setLogicRules(data.logicRules);
         if (data.inputNames) setInputNames(data.inputNames);
         if (data.outputNames) setOutputNames(data.outputNames);
+        if (data.axes) setAxes(data.axes);
       } catch (err) { alert("Invalid JSON"); }
     };
     reader.readAsText(file);
@@ -237,10 +305,10 @@ export default function App() {
     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;
+        newObj = { id, type, name: 'Linear Axis', position, rotation: { x: 0, y: 0, z: 0 }, min: 0, max: 100, axisIndex: 0, 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;
+        newObj = { id, type, name: 'Rotary Axis', position, rotation: { x: 0, y: 0, z: 0 }, min: 0, max: 360, axisIndex: 0, 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;
@@ -274,18 +342,27 @@ export default function App() {
               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
+              <LayoutIcon size={32} /> 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
+              <Cpu size={32} /> Logic
             </button>
           </div>
 
           <div className="h-8 w-[1px] bg-gray-800 mx-2" />
 
+          {/* 4. Top Navigation에 Setup 버튼 추가 */}
+          <button
+            onClick={() => setIsSetupOpen(true)}
+            className="p-2 rounded-lg bg-gray-950 text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-800 transition-all"
+            title="System Setup"
+          >
+            <Settings size={18} />
+          </button>
+
           <button
             onClick={() => setIsSnapEnabled(!isSnapEnabled)}
             className={`p-2 rounded-lg transition-all ${isSnapEnabled ? 'bg-blue-600 text-white shadow shadow-blue-500/50' : 'bg-gray-950 text-gray-500 hover:text-gray-300 border border-gray-800'}`}
@@ -332,7 +409,7 @@ export default function App() {
               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" />
+              <Square size={32} fill="currentColor" />
             </button>
           </div>
         </div>
@@ -349,6 +426,8 @@ export default function App() {
           outputNames={outputNames}
           onToggleInput={handleToggleManualInput}
           onToggleOutput={handleToggleManualOutput}
+          axes={axes}
+          setAxes={setAxes}
         />
 
         {/* Center/Right: Dynamic Content based on tab */}
@@ -399,6 +478,7 @@ export default function App() {
                     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))}
+                    axes={axes}
                   />
                 ))}
 
@@ -411,6 +491,8 @@ export default function App() {
                   manualOutputs={manualOutputs}
                   setInputs={setInputs}
                   setOutputs={setOutputs}
+                  axes={axes}
+                  setAxes={setAxes}
                 />
               </Canvas>
             </div>
@@ -421,9 +503,11 @@ export default function App() {
               isPlaying={isPlaying}
               inputNames={inputNames}
               outputNames={outputNames}
+              axes={axes}
               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))}
+              onUpdateAxis={(index, updates) => setAxes(prev => prev.map((a, i) => i === index ? { ...a, ...updates } : a))}
               onSelect={setSelectedId}
               onUpdatePortName={handleUpdatePortName}
             />
@@ -438,9 +522,20 @@ export default function App() {
             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))}
+            axes={axes}
           />
         )}
       </div>
+
+      <SystemSetupDialog
+        isOpen={isSetupOpen}
+        onClose={() => setIsSetupOpen(false)}
+        inputNames={inputNames}
+        outputNames={outputNames}
+        axes={axes}
+        onUpdatePortName={handleUpdatePortName}
+        onUpdateAxis={(index, updates) => setAxes(prev => prev.map((a, i) => i === index ? { ...a, ...updates } : a))}
+      />
     </div>
   );
 }

components/IOPanel.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AxisData } from '../types';
 
 interface IOPanelProps {
   inputs: boolean[];
@@ -7,21 +8,25 @@ interface IOPanelProps {
   outputNames: string[];
   onToggleInput: (index: number) => void;
   onToggleOutput: (index: number) => void;
+  axes: AxisData[];
+  setAxes: React.Dispatch<React.SetStateAction<AxisData[]>>;
 }
 
-export const IOPanel: React.FC<IOPanelProps> = ({ 
+export const IOPanel: React.FC<IOPanelProps> = ({
-  inputs, 
+  inputs,
-  outputs, 
+  outputs,
-  inputNames, 
+  inputNames,
   outputNames,
   onToggleInput,
-  onToggleOutput
+  onToggleOutput,
+  axes,
+  setAxes
 }) => {
   const renderBits = (
-    bits: boolean[], 
+    bits: boolean[],
-    names: string[], 
+    names: string[],
-    colorClass: string, 
+    colorClass: string,
-    label: string, 
+    label: string,
     onToggle: (i: number) => void
   ) => (
     <div className="mb-6">
@@ -29,14 +34,13 @@ export const IOPanel: React.FC<IOPanelProps> = ({
       <div className="grid grid-cols-4 gap-2">
         {bits.map((isActive, i) => (
           <div key={i} className="flex flex-col items-center group relative">
-            <button 
+            <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 ${
+              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
-                isActive 
+                ? `${colorClass} shadow-[0_0_10px_rgba(255,255,255,0.3)] border-transparent text-black font-bold`
-                  ? `${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'
-                  : 'bg-gray-850 text-gray-500 hover:bg-gray-700'
+                }`}
-              }`}
             >
               {i}
             </button>
@@ -56,7 +60,7 @@ export const IOPanel: React.FC<IOPanelProps> = ({
         <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)}
@@ -66,6 +70,33 @@ export const IOPanel: React.FC<IOPanelProps> = ({
         <p>• Click bits to toggle state</p>
         <p>• Hover to see port names</p>
       </div>
+
+      <div className="flex-1 overflow-auto p-2" style={{ maxHeight: '20vh' }}>
+        <h4 className="text-[10px] uppercase text-blue-500 font-bold mb-2 sticky top-0 bg-gray-900/90 backdrop-blur pb-1 z-10">Axis Channels</h4>
+        <div className="space-y-2">
+          {axes.map((axis, i) => (
+            <div key={i} className="flex flex-col gap-1 p-2 bg-gray-800/50 rounded border border-gray-700">
+              <div className="flex justify-between items-center">
+                <span className="text-[10px] text-gray-400 font-mono">CH{i}</span>
+                <span className="text-[10px] text-white font-bold truncate max-w-[80px]" title={axis.name}>{axis.name}</span>
+                <span className="text-[10px] text-blue-400 font-mono">{axis.value.toFixed(1)}</span>
+              </div>
+              {/* Miniature Slider for quick view/control */}
+              <input
+                type="range"
+                min={0}
+                max={axis.type === 'rotary' ? 360 : 100}
+                value={axis.value}
+                onChange={(e) => {
+                  const val = parseFloat(e.target.value);
+                  setAxes(prev => prev.map((a, idx) => idx === i ? { ...a, value: val, target: val } : a));
+                }}
+                className="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };

components/LadderEditor.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
-import { Trash2, PlusCircle, Power } from 'lucide-react';
+import { Trash2, PlusCircle, Power, Zap, Gauge, Move } from 'lucide-react';
-import { IOLogicRule, LogicCondition, LogicAction } from '../types';
+import { IOLogicRule, LogicCondition, LogicAction, LogicTriggerType, LogicActionType, AxisData } from '../types';
 
 interface LadderEditorProps {
   logicRules: IOLogicRule[];
@@ -12,6 +12,7 @@ interface LadderEditorProps {
   onAddRule: (rule: IOLogicRule) => void;
   onDeleteRule: (id: string) => void;
   onUpdateRule: (id: string, updates: Partial<IOLogicRule>) => void;
+  axes: AxisData[];
 }
 
 export const LadderEditor: React.FC<LadderEditorProps> = ({
@@ -22,29 +23,36 @@ export const LadderEditor: React.FC<LadderEditorProps> = ({
   currentOutputs,
   onAddRule,
   onDeleteRule,
-  onUpdateRule
+  onUpdateRule,
+  axes
 }) => {
   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" 
+      <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 
+        <button
           onClick={() => onAddRule({
             id: crypto.randomUUID(),
+            enabled: true,
+            triggerType: LogicTriggerType.INPUT_BIT,
             inputPort: 0,
-            condition: LogicCondition.IS_ON,
+            triggerAxisIndex: 0,
+            triggerCompareOp: LogicCondition.GREATER,
+            triggerValue: 0,
+            actionType: LogicActionType.OUTPUT_COIL,
             outputPort: 0,
             action: LogicAction.SET_ON,
-            enabled: true
+            targetAxisIndex: 0,
+            targetAxisValue: 0
           })}
           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
+          <PlusCircle size={14} /> Add New Rung
         </button>
       </div>
 
@@ -57,69 +65,146 @@ export const LadderEditor: React.FC<LadderEditorProps> = ({
 
         <div className="w-full max-w-4xl space-y-12">
           {logicRules.map((rule, index) => {
-            const inputActive = currentInputs[rule.inputPort];
+            const isInputTrigger = rule.triggerType === LogicTriggerType.INPUT_BIT;
-            const outputActive = currentOutputs[rule.outputPort];
+            const isAxisTrigger = rule.triggerType === LogicTriggerType.AXIS_COMPARE;
-            
+            const isOutputAction = rule.actionType === LogicActionType.OUTPUT_COIL;
+            const isAxisAction = rule.actionType === LogicActionType.AXIS_MOVE;
+
+            const inputActive = isInputTrigger && currentInputs[rule.inputPort];
+            const outputActive = isOutputAction && currentOutputs[rule.outputPort];
+
             return (
-              <div key={rule.id} className="relative flex items-center group">
+              <div key={rule.id} className="relative flex items-center group mb-4 p-4 rounded-xl border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition-colors">
                 {/* Rung Number */}
-                <div className="absolute -left-12 text-[10px] font-mono text-gray-700">{(index + 1).toString().padStart(3, '0')}</div>
+                <div className="absolute -left-8 text-[10px] font-mono text-gray-600">{(index + 1).toString().padStart(3, '0')}</div>
-                
+
                 {/* Delete Button */}
-                <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"
+                  className="absolute -right-8 p-2 text-gray-700 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
                 >
-                  <Trash2 size={16}/>
+                  <Trash2 size={16} />
                 </button>
 
-                {/* The Rung Wire */}
+                <div className="flex-1 flex items-center gap-6">
-                <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) */}
+                  {/* LEFT: TRIGGER */}
-                  <div className="absolute left-[20%] -translate-x-1/2 flex flex-col items-center">
+                  <div className="flex-1 flex flex-col gap-2">
-                    <div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
+                    <div className="flex items-center gap-2 mb-1">
-                      {inputNames[rule.inputPort] || `Input ${rule.inputPort}`}
+                      <button
+                        onClick={() => onUpdateRule(rule.id, { triggerType: LogicTriggerType.INPUT_BIT })}
+                        className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isInputTrigger ? 'bg-green-500/10 border-green-500 text-green-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
+                      >
+                        <Zap size={10} /> IO Input
+                      </button>
+                      <button
+                        onClick={() => onUpdateRule(rule.id, { triggerType: LogicTriggerType.AXIS_COMPARE })}
+                        className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isAxisTrigger ? 'bg-blue-500/10 border-blue-500 text-blue-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
+                      >
+                        <Gauge size={10} /> Axis Logic
+                      </button>
                     </div>
-                    <div className="relative h-12 w-12 flex items-center justify-center">
+
-                       {/* Terminal Brackets */}
+                    <div className="h-16 bg-gray-950 border border-gray-800 rounded-lg flex items-center justify-center relative p-2">
-                       <div className="absolute left-0 w-2 h-8 border-l-4 border-gray-600 rounded-sm" />
+                      {isInputTrigger ? (
-                       <div className="absolute right-0 w-2 h-8 border-r-4 border-gray-600 rounded-sm" />
+                        <div className="flex flex-col items-center">
-                       
+                          <span className="text-[10px] text-gray-500 mb-1">{inputNames[rule.inputPort] || `Input ${rule.inputPort}`}</span>
-                       {/* Selector Area */}
+                          <div className={`relative w-8 h-8 flex items-center justify-center border-2 rounded ${inputActive ? 'border-green-500 bg-green-500/20' : 'border-gray-700'}`}>
-                       <select 
+                            <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'}`}
+                              className="bg-transparent text-xs font-bold text-center w-full h-full outline-none appearance-none cursor-pointer text-white"
-                        value={rule.inputPort}
+                              value={rule.inputPort}
-                        onChange={(e) => onUpdateRule(rule.id, { inputPort: parseInt(e.target.value) })}
+                              onChange={(e) => onUpdateRule(rule.id, { inputPort: parseInt(e.target.value) })}
-                       >
+                            >
-                         {Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
+                              {Array.from({ length: 32 }).map((_, i) => <option key={i} value={i} className="bg-gray-900 border-none">X{i}</option>)}
-                       </select>
+                            </select>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2 w-full">
+                          <select
+                            className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-20 outline-none"
+                            value={rule.triggerAxisIndex}
+                            onChange={(e) => onUpdateRule(rule.id, { triggerAxisIndex: parseInt(e.target.value) })}
+                          >
+                            {axes.map(a => <option key={a.id} value={a.id}>CH{a.id}</option>)}
+                          </select>
+                          <select
+                            className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-1 py-1 w-12 text-center outline-none"
+                            value={rule.triggerCompareOp}
+                            onChange={(e) => onUpdateRule(rule.id, { triggerCompareOp: e.target.value as LogicCondition })}
+                          >
+                            <option value={LogicCondition.GREATER}>&gt;</option>
+                            <option value={LogicCondition.LESS}>&lt;</option>
+                            <option value={LogicCondition.EQUAL}>=</option>
+                          </select>
+                          <input
+                            type="number"
+                            className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-16 outline-none"
+                            value={rule.triggerValue}
+                            onChange={(e) => onUpdateRule(rule.id, { triggerValue: parseFloat(e.target.value) })}
+                          />
+                        </div>
+                      )}
                     </div>
                   </div>
 
-                  {/* Coil (Output) */}
+                  {/* ARROW */}
-                  <div className="absolute right-[20%] translate-x-1/2 flex flex-col items-center">
+                  <div className="text-gray-700">➡</div>
-                    <div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
+
-                      {outputNames[rule.outputPort] || `Output ${rule.outputPort}`}
+                  {/* RIGHT: ACTION */}
+                  <div className="flex-1 flex flex-col gap-2">
+                    <div className="flex items-center gap-2 mb-1 justify-end">
+                      <button
+                        onClick={() => onUpdateRule(rule.id, { actionType: LogicActionType.OUTPUT_COIL })}
+                        className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isOutputAction ? 'bg-red-500/10 border-red-500 text-red-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
+                      >
+                        <Zap size={10} /> Output
+                      </button>
+                      <button
+                        onClick={() => onUpdateRule(rule.id, { actionType: LogicActionType.AXIS_MOVE })}
+                        className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isAxisAction ? 'bg-blue-500/10 border-blue-500 text-blue-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
+                      >
+                        <Move size={10} /> Move Axis
+                      </button>
                     </div>
-                    <div className="relative h-12 w-12 flex items-center justify-center">
+
-                       {/* Coil Brackets (Parens style) */}
+                    <div className="h-16 bg-gray-950 border border-gray-800 rounded-lg flex items-center justify-center relative p-2">
-                       <div className="absolute inset-0 flex items-center justify-center">
+                      {isOutputAction ? (
-                          <div className={`w-8 h-8 rounded-full border-4 ${outputActive ? 'border-green-500 shadow-[0_0_15px_#22c55e]' : 'border-gray-700'}`} />
+                        <div className="flex flex-col items-center">
-                       </div>
+                          <span className="text-[10px] text-gray-500 mb-1">{outputNames[rule.outputPort] || `Output ${rule.outputPort}`}</span>
-                       
+                          <div className={`relative w-8 h-8 flex items-center justify-center rounded-full border-2 ${outputActive ? 'border-red-500 bg-red-500/20 shadow-[0_0_10px_#ef4444]' : 'border-gray-700'}`}>
-                       <select 
+                            <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'}`}
+                              className="bg-transparent text-xs font-bold text-center w-full h-full outline-none appearance-none cursor-pointer text-white"
-                        value={rule.outputPort}
+                              value={rule.outputPort}
-                        onChange={(e) => onUpdateRule(rule.id, { outputPort: parseInt(e.target.value) })}
+                              onChange={(e) => onUpdateRule(rule.id, { outputPort: parseInt(e.target.value) })}
-                       >
+                            >
-                         {Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
+                              {Array.from({ length: 32 }).map((_, i) => <option key={i} value={i} className="bg-gray-900 border-none">Y{i}</option>)}
-                       </select>
+                            </select>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2 w-full">
+                          <span className="text-[9px] text-gray-500 font-bold">MOVE</span>
+                          <select
+                            className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-20 outline-none"
+                            value={rule.targetAxisIndex}
+                            onChange={(e) => onUpdateRule(rule.id, { targetAxisIndex: parseInt(e.target.value) })}
+                          >
+                            {axes.map(a => <option key={a.id} value={a.id}>CH{a.id}</option>)}
+                          </select>
+                          <span className="text-[9px] text-gray-500 font-bold">TO</span>
+                          <input
+                            type="number"
+                            className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-16 outline-none"
+                            placeholder="Pos"
+                            value={rule.targetAxisValue}
+                            onChange={(e) => onUpdateRule(rule.id, { targetAxisValue: parseFloat(e.target.value) })}
+                          />
+                        </div>
+                      )}
                     </div>
                   </div>
+
                 </div>
               </div>
             );

components/SceneObjects.tsx

@@ -2,119 +2,129 @@
 import React, { useRef } from 'react';
 import { TransformControls, Text } from '@react-three/drei';
 import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
 import {
   SimObject,
   ObjectType,
   AxisObject,
   CylinderObject,
   LedObject,
-  SwitchObject
+  SwitchObject,
+  AxisData
 } from '../types';
 
 interface ObjectProps {
   data: SimObject;
-  isSelected: boolean;
+  isSelected?: boolean;
   isPlaying?: boolean;
-  onSelect: (id: string) => void;
+  onSelect?: (id: string) => void;
-  onUpdate: (id: string, updates: Partial<SimObject>) => void;
+  onUpdate?: (id: string, updates: Partial<SimObject>) => void;
   onInteract?: (id: string) => void;
+  axes?: AxisData[];
 }
 
 // -- Helper Material --
 const selectedMaterial = new THREE.MeshBasicMaterial({ color: '#4ade80', wireframe: true, transparent: true, opacity: 0.5 });
 
-// -- Linear Axis Component --
+// -- Axis Visualizer Component --
-export const LinearAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
+const AxisVisualizer = ({ object, isPlaying, axes, isSelected }: { object: AxisObject, isPlaying: boolean, axes?: AxisData[], isSelected?: boolean }) => {
-  const axis = data as AxisObject;
+  const carriageRef = useRef<THREE.Mesh>(null);
-  const railLength = 5;
+  const groupRef = useRef<THREE.Group>(null);
-  const normalizedPos = ((axis.currentValue - axis.min) / (axis.max - axis.min)) * railLength;
-  const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
 
-  return (
+  // Resolve current value from Global Axis Channel
-    <group
+  const axisValue = axes && object.axisIndex !== undefined && axes[object.axisIndex] ? axes[object.axisIndex].value : 0; // Fallback to 0 if axes not provided or index invalid
-      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]}>
+  useFrame(() => {
-        <boxGeometry args={[railLength + 0.5, 0.2, 0.5]} />
+    if (object.type === ObjectType.AXIS_LINEAR && carriageRef.current) {
-        <meshStandardMaterial color="#475569" />
+      const railLength = 5;
-      </mesh>
+      const normalizedPos = ((axisValue - object.min) / (object.max - object.min)) * railLength;
+      const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
+      carriageRef.current.position.x = safePos;
+    } else if (object.type === ObjectType.AXIS_ROTARY && groupRef.current) {
+      const rotationAngle = (axisValue % 360) * (Math.PI / 180);
+      // The inner group for rotary axis is rotated, not the carriage directly
+      const innerRotaryGroup = groupRef.current.children.find(child => child.name === 'rotary-inner-group');
+      if (innerRotaryGroup) {
+        innerRotaryGroup.rotation.y = -rotationAngle;
+      }
+    }
+  });
 
-      <mesh position={[safePos, 0.25, 0]}>
+  if (object.type === ObjectType.AXIS_LINEAR) {
-        <boxGeometry args={[0.8, 0.3, 0.6]} />
+    const railLength = 5;
-        <meshStandardMaterial color={(isSelected && !isPlaying) ? '#facc15' : '#3b82f6'} />
+    const normalizedPos = ((axisValue - object.min) / (object.max - object.min)) * railLength;
-      </mesh>
+    const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
+
+    return (
+      <group ref={groupRef}>
+        <Text position={[railLength / 2, 0.8, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
+          {object.name} ({axisValue.toFixed(1)})
+        </Text>
 
-      {isSelected && !isPlaying && (
         <mesh position={[railLength / 2, 0, 0]}>
-          <boxGeometry args={[railLength + 0.6, 0.3, 0.6]} />
+          <boxGeometry args={[railLength + 0.5, 0.2, 0.5]} />
-          <primitive object={selectedMaterial} attach="material" />
+          <meshStandardMaterial color="#475569" />
         </mesh>
-      )}
-    </group>
-  );
-};
 
-// -- Rotary Axis Component --
+        <mesh ref={carriageRef} position={[safePos, 0.25, 0]}>
-export const RotaryAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
+          <boxGeometry args={[0.8, 0.3, 0.6]} />
-  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 && (
+        {isSelected && !isPlaying && (
-        <mesh position={[0, 0.4, 0]}>
+          <mesh position={[railLength / 2, 0, 0]}>
-          <cylinderGeometry args={[0.9, 0.9, 1, 16]} />
+            <boxGeometry args={[railLength + 0.6, 0.3, 0.6]} />
-          <primitive object={selectedMaterial} attach="material" />
+            <primitive object={selectedMaterial} attach="material" />
+          </mesh>
+        )}
+      </group>
+    );
+  } else if (object.type === ObjectType.AXIS_ROTARY) {
+    const rotationAngle = (axisValue % 360) * (Math.PI / 180);
+
+    return (
+      <group ref={groupRef}>
+        <Text position={[0, 1.5, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
+          {object.name} ({axisValue.toFixed(0)}°)
+        </Text>
+
+        <mesh position={[0, 0.25, 0]}>
+          <cylinderGeometry args={[0.8, 0.8, 0.5, 32]} />
+          <meshStandardMaterial color="#475569" />
         </mesh>
-      )}
+
-    </group>
+        <group name="rotary-inner-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>
+    );
+  }
+  return null;
 };
 
-// -- Cylinder Component --
+// -- Cylinder Visualizer Component --
-export const Cylinder: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
+const CylinderVisualizer = ({ object, isPlaying, isSelected }: { object: CylinderObject, isPlaying: boolean, isSelected?: boolean }) => {
-  const cyl = data as CylinderObject;
   const housingLen = 2;
-  const extension = Math.min(cyl.stroke, Math.max(0, cyl.currentPosition));
+  const extension = Math.min(object.stroke, Math.max(0, object.currentPosition));
 
   return (
-    <group
+    <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}
+        {object.name}
       </Text>
 
       <mesh rotation={[0, 0, -Math.PI / 2]} position={[housingLen / 2, 0, 0]}>
@@ -154,7 +164,7 @@ export const Switch: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onS
       rotation={[sw.rotation.x, sw.rotation.y, sw.rotation.z]}
       onClick={(e) => {
         e.stopPropagation();
-        if (!isPlaying) onSelect(sw.id);
+        if (!isPlaying) onSelect?.(sw.id);
         if (onInteract) onInteract(sw.id);
       }}
     >
@@ -190,7 +200,7 @@ export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSele
     <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); }}
+      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}
@@ -220,34 +230,50 @@ export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSele
   );
 };
 
-export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean, snap?: number | null }> = (props) => {
+export const EditableObject: React.FC<ObjectProps & { enableTransform?: boolean, snap?: number | null }> = (props) => {
-  const { data, enableTransform, isPlaying, onUpdate, snap } = props;
+  const { data, enableTransform, isPlaying, onUpdate, snap, axes } = props;
 
   const handleTransformChange = (e: any) => {
     if (e.target.object) {
       const o = e.target.object;
-      onUpdate(data.id, {
+      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 =
+  let ComponentToRender;
-    data.type === ObjectType.AXIS_LINEAR ? LinearAxis :
+  switch (data.type) {
-      data.type === ObjectType.AXIS_ROTARY ? RotaryAxis :
+    case ObjectType.AXIS_LINEAR:
-        data.type === ObjectType.CYLINDER ? Cylinder :
+    case ObjectType.AXIS_ROTARY:
-          data.type === ObjectType.SWITCH ? Switch :
+      ComponentToRender = <AxisVisualizer object={data as AxisObject} isPlaying={isPlaying!} axes={axes} isSelected={props.isSelected} />;
-            Led;
+      break;
+    case ObjectType.CYLINDER:
+      ComponentToRender = <CylinderVisualizer object={data as CylinderObject} isPlaying={isPlaying!} isSelected={props.isSelected} />;
+      break;
+    case ObjectType.SWITCH:
+      ComponentToRender = <Switch {...props} />;
+      break;
+    case ObjectType.LED:
+      ComponentToRender = <Led {...props} />;
+      break;
+    default:
+      ComponentToRender = null;
+  }
 
   return (
-    <>
+    <group
-      <Component {...props} />
+      position={[data.position.x, data.position.y, data.position.z]}
+      rotation={[data.rotation.x, data.rotation.y, data.rotation.z]}
+      onClick={(e) => { e.stopPropagation(); if (!isPlaying) props.onSelect?.(data.id); }}
+    >
+      {ComponentToRender}
       {props.isSelected && enableTransform && !isPlaying && (
         <TransformControls
-          object={undefined}
+          object={undefined} // TransformControls will apply to its children, not a specific object prop
-          position={[data.position.x, data.position.y, data.position.z]}
+          position={[0, 0, 0]} // Position relative to the group
-          rotation={[data.rotation.x, data.rotation.y, data.rotation.z]}
+          rotation={[0, 0, 0]} // Rotation relative to the group
           onMouseUp={handleTransformChange}
           size={0.6}
           mode="translate"
@@ -255,6 +281,6 @@ export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean,
           rotationSnap={snap ? Math.PI / 12 : undefined}
         />
       )}
-    </>
+    </group>
   );
 };

components/Sidebar.tsx

@@ -7,7 +7,7 @@ import {
 } from 'lucide-react';
 import {
   SimObject, ObjectType, AxisObject,
-  CylinderObject, LedObject, SwitchObject
+  CylinderObject, LedObject, SwitchObject, AxisData
 } from '../types';
 
 interface SidebarProps {
@@ -16,10 +16,12 @@ interface SidebarProps {
   isPlaying: boolean;
   inputNames: string[];
   outputNames: string[];
+  axes: AxisData[];
   onAddObject: (type: ObjectType) => void;
   onDeleteObject: (id: string) => void;
   onUpdateObject: (id: string, updates: Partial<SimObject>) => void;
-  onSelect: (id: string | null) => void;
+  onUpdateAxis: (index: number, updates: Partial<AxisData>) => void;
+  onSelect: React.Dispatch<React.SetStateAction<string | null>>;
   onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void;
 }
 
@@ -29,12 +31,14 @@ export const Sidebar: React.FC<SidebarProps> = ({
   isPlaying,
   inputNames,
   outputNames,
+  axes,
   onAddObject,
   onDeleteObject,
   onUpdateObject,
-  onUpdatePortName
+  onUpdateAxis,
+  onSelect,
+  onUpdatePortName,
 }) => {
-  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) => (
@@ -56,156 +60,123 @@ export const Sidebar: React.FC<SidebarProps> = ({
   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 */}
+      {/* Header */}
       <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">
-          {/* Tool Box */}
+        <ToolBtn icon={<Move size={16} />} label="Lin Axis" onClick={() => onAddObject(ObjectType.AXIS_LINEAR)} />
-          <div className="p-4 grid grid-cols-3 gap-2 border-b border-gray-800 bg-gray-950/20">
+        <ToolBtn icon={<RotateCw size={16} />} label="Rot Axis" onClick={() => onAddObject(ObjectType.AXIS_ROTARY)} />
-            <ToolBtn icon={<Move size={16} />} label="Lin Axis" onClick={() => onAddObject(ObjectType.AXIS_LINEAR)} />
+        <ToolBtn icon={<LinkIcon size={16} />} label="Cylinder" onClick={() => onAddObject(ObjectType.CYLINDER)} />
-            <ToolBtn icon={<RotateCw size={16} />} label="Rot Axis" onClick={() => onAddObject(ObjectType.AXIS_ROTARY)} />
+        <ToolBtn icon={<Power size={16} />} label="Switch" onClick={() => onAddObject(ObjectType.SWITCH)} />
-            <ToolBtn icon={<LinkIcon size={16} />} label="Cylinder" onClick={() => onAddObject(ObjectType.CYLINDER)} />
+        <ToolBtn icon={<div className="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e]" />} label="LED" onClick={() => onAddObject(ObjectType.LED)} />
-            <ToolBtn icon={<Power size={16} />} label="Switch" onClick={() => onAddObject(ObjectType.SWITCH)} />
+      </div>
-            <ToolBtn icon={<div className="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e]" />} label="LED" onClick={() => onAddObject(ObjectType.LED)} />
+
+      {/* 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>
 
-          {/* Properties Form */}
+            <div className="bg-gray-950/50 p-4 rounded-xl border border-gray-800/50 space-y-4">
-          <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
+              {renderInput("Object Name", selectedObject.name, (val) => onUpdateObject(selectedObject.id, { name: val }))}
-            {!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">
+              {selectedObject.type === ObjectType.SWITCH && (
-                  {renderInput("Object Name", selectedObject.name, (val) => onUpdateObject(selectedObject.id, { name: val }))}
+                <>
+                  <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.SWITCH && (
+              {selectedObject.type === ObjectType.LED && (
-                    <>
+                <>
-                      <div>
+                  <div>
-                        <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Assigned Input Port</label>
+                    <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Drive Output Port</label>
-                        <select
+                    <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"
+                      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}
+                      value={(selectedObject as LedObject).outputPort}
-                          onChange={(e) => onUpdateObject(selectedObject.id, { inputPort: parseInt(e.target.value) })}
+                      onChange={(e) => onUpdateObject(selectedObject.id, { outputPort: parseInt(e.target.value) })}
-                        >
+                    >
-                          {inputNames.map((name, i) => (
+                      {outputNames.map((name, i) => (
-                            <option key={i} value={i}>X{i}: {name || '---'}</option>
+                        <option key={i} value={i}>Y{i}: {name || '---'}</option>
-                          ))}
+                      ))}
-                        </select>
+                    </select>
-                      </div>
+                  </div>
-                      <div className="flex items-center gap-2 pt-2">
+                  {renderInput("Light Color", (selectedObject as LedObject).color, (v) => onUpdateObject(selectedObject.id, { color: v }), "color")}
-                        <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 && (
+              {(selectedObject.type === ObjectType.AXIS_LINEAR || selectedObject.type === ObjectType.AXIS_ROTARY) && (
-                    <>
+                <div>
-                      <div>
+                  <label className="block text-[10px] text-gray-500 mb-2 font-bold uppercase tracking-wider">Bind to Global Axis</label>
-                        <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Drive Output Port</label>
+                  <select
-                        <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"
-                          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 AxisObject).axisIndex}
-                          value={(selectedObject as LedObject).outputPort}
+                    onChange={(e) => onUpdateObject(selectedObject.id, { axisIndex: parseInt(e.target.value) })}
-                          onChange={(e) => onUpdateObject(selectedObject.id, { outputPort: parseInt(e.target.value) })}
+                  >
-                        >
+                    {axes.map((axis) => (
-                          {outputNames.map((name, i) => (
+                      <option key={axis.id} value={axis.id}>
-                            <option key={i} value={i}>Y{i}: {name || '---'}</option>
+                        Channel {axis.id}: {axis.name} ({axis.type})
-                          ))}
+                      </option>
-                        </select>
+                    ))}
-                      </div>
+                  </select>
-                      {renderInput("Light Color", (selectedObject as LedObject).color, (v) => onUpdateObject(selectedObject.id, { color: v }), "color")}
-                    </>
-                  )}
 
-                  {(selectedObject.type === ObjectType.AXIS_LINEAR || selectedObject.type === ObjectType.AXIS_ROTARY) && (
+                  {/* Axis Control Slider in Sidebar */}
-                    <div>
+                  <div className="mt-4 p-3 bg-gray-900 rounded border border-gray-800">
-                      <label className="block text-[10px] text-gray-500 mb-2 font-bold uppercase tracking-wider">Manual Position ({(selectedObject as AxisObject).currentValue.toFixed(1)})</label>
+                    <div className="flex justify-between items-end mb-2">
-                      <input type="range" min={(selectedObject as AxisObject).min} max={(selectedObject as AxisObject).max} value={(selectedObject as AxisObject).currentValue} step={0.1}
+                      <span className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Manual Jog</span>
-                        onChange={(e) => onUpdateObject(selectedObject.id, { currentValue: parseFloat(e.target.value), targetValue: parseFloat(e.target.value) })}
+                      <span className="text-xs font-mono text-blue-400">
-                        className="w-full h-1.5 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-500" />
+                        {axes[(selectedObject as AxisObject).axisIndex]?.value.toFixed(1) || '0.0'}
+                      </span>
                     </div>
-                  )}
+                    <input
+                      type="range"
+                      min={0}
+                      max={axes[(selectedObject as AxisObject).axisIndex]?.type === 'rotary' ? 360 : 100}
+                      step={0.1}
+                      value={axes[(selectedObject as AxisObject).axisIndex]?.value || 0}
+                      onChange={(e) => {
+                        const val = parseFloat(e.target.value);
+                        const idx = (selectedObject as AxisObject).axisIndex;
+                        if (axes[idx]) {
+                          onUpdateAxis(idx, { value: val, target: val });
+                        }
+                      }}
+                      className="w-full h-2 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="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>
     </div>
   );
 };

components/SystemSetupDialog.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+import { AxisData } from '../types';
+
+interface SystemSetupDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    inputNames: string[];
+    outputNames: string[];
+    axes: AxisData[];
+    onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void;
+    onUpdateAxis: (index: number, updates: Partial<AxisData>) => void;
+}
+
+export const SystemSetupDialog: React.FC<SystemSetupDialogProps> = ({
+    isOpen,
+    onClose,
+    inputNames,
+    outputNames,
+    onUpdatePortName,
+    axes,
+    onUpdateAxis
+}) => {
+    const [activeTab, setActiveTab] = React.useState<'io' | 'axes'>('io');
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
+            <div className="bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-4xl h-[85vh] flex flex-col shadow-2xl animate-in zoom-in-95 duration-200 cursor-default">
+
+                {/* Header */}
+                <div className="flex items-center justify-between p-6 border-b border-gray-800 bg-gray-950/50 rounded-t-2xl">
+                    <div className="flex items-center gap-8">
+                        <div>
+                            <h2 className="text-xl font-bold text-white tracking-tight">System Setup</h2>
+                            <p className="text-gray-400 text-sm mt-1">Configure Hardware & Drives</p>
+                        </div>
+
+                        <div className="flex bg-gray-800 p-1 rounded-lg">
+                            <button
+                                onClick={() => setActiveTab('io')}
+                                className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'io' ? 'bg-blue-600 text-white shadow' : 'text-gray-400 hover:text-white'}`}
+                            >
+                                I/O Mapping
+                            </button>
+                            <button
+                                onClick={() => setActiveTab('axes')}
+                                className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'axes' ? 'bg-blue-600 text-white shadow' : 'text-gray-400 hover:text-white'}`}
+                            >
+                                Axis Drives
+                            </button>
+                        </div>
+                    </div>
+
+                    <button
+                        onClick={onClose}
+                        className="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
+                    >
+                        <X size={24} />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-8 custom-scrollbar">
+
+                    {activeTab === 'io' && (
+                        <div className="grid grid-cols-2 gap-12">
+
+                            {/* Input Configuration */}
+                            <div>
+                                <h3 className="flex items-center gap-3 text-sm font-bold text-green-400 uppercase tracking-widest mb-6 border-b border-green-500/20 pb-3">
+                                    <div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_#22c55e]" />
+                                    Input Mapping (X00 - X31)
+                                </h3>
+
+                                <div className="grid grid-cols-1 gap-2">
+                                    {inputNames.map((name, i) => (
+                                        <div key={i} className="flex items-center gap-3 group">
+                                            <span className="w-8 text-xs font-mono text-gray-500 group-hover:text-green-400 transition-colors">
+                                                X{i.toString().padStart(2, '0')}
+                                            </span>
+                                            <input
+                                                className="flex-1 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm text-gray-300 focus:text-white focus:border-green-500 focus:ring-1 focus:ring-green-500/50 outline-none transition-all placeholder:text-gray-700"
+                                                placeholder={`Input ${i} Tag Name...`}
+                                                value={name}
+                                                onChange={(e) => onUpdatePortName('input', i, e.target.value)}
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* Output Configuration */}
+                            <div>
+                                <h3 className="flex items-center gap-3 text-sm font-bold text-red-500 uppercase tracking-widest mb-6 border-b border-red-500/20 pb-3">
+                                    <div className="w-2 h-2 rounded-full bg-red-500 shadow-[0_0_10px_#ef4444]" />
+                                    Output Mapping (Y00 - Y31)
+                                </h3>
+
+                                <div className="grid grid-cols-1 gap-2">
+                                    {outputNames.map((name, i) => (
+                                        <div key={i} className="flex items-center gap-3 group">
+                                            <span className="w-8 text-xs font-mono text-gray-500 group-hover:text-red-400 transition-colors">
+                                                Y{i.toString().padStart(2, '0')}
+                                            </span>
+                                            <input
+                                                className="flex-1 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm text-gray-300 focus:text-white focus:border-red-500 focus:ring-1 focus:ring-red-500/50 outline-none transition-all placeholder:text-gray-700"
+                                                placeholder={`Output ${i} Tag Name...`}
+                                                value={name}
+                                                onChange={(e) => onUpdatePortName('output', i, e.target.value)}
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    {activeTab === 'axes' && (
+                        <div className="space-y-6">
+                            <h3 className="flex items-center gap-3 text-sm font-bold text-blue-400 uppercase tracking-widest mb-2 border-b border-blue-500/20 pb-3">
+                                <div className="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_10px_#3b82f6]" />
+                                Global Axis Configuration (8 Channels)
+                            </h3>
+
+                            <div className="grid gap-4">
+                                {axes.map((axis, i) => (
+                                    <div key={i} className="bg-gray-950/50 border border-gray-800 rounded-xl p-4 flex items-center gap-6 hover:border-gray-700 transition-colors">
+                                        <div className="flex flex-col gap-1 w-48 shrink-0">
+                                            <label className="text-[10px] items-center text-gray-500 font-black uppercase tracking-widest flex gap-2">
+                                                <span className="w-4 h-4 rounded bg-gray-800 flex items-center justify-center text-white">{i}</span> Axis Name
+                                            </label>
+                                            <input
+                                                value={axis.name}
+                                                onChange={(e) => onUpdateAxis(i, { name: e.target.value })}
+                                                className="bg-gray-900 border border-gray-800 rounded px-2 py-1 text-sm text-white focus:border-blue-500 outline-none"
+                                            />
+                                        </div>
+
+                                        <div className="flex-1 flex flex-col gap-2">
+                                            <div className="flex justify-between items-end">
+                                                <label className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Jog Control</label>
+                                                <span className="text-xs font-mono text-blue-400">
+                                                    {axis.value.toFixed(1)} <span className="text-gray-600">{axis.type === 'rotary' ? 'deg' : 'mm'}</span>
+                                                </span>
+                                            </div>
+                                            <input
+                                                type="range"
+                                                min={0}
+                                                max={axis.type === 'rotary' ? 360 : 100}
+                                                step={0.1}
+                                                value={axis.value}
+                                                onChange={(e) => {
+                                                    const val = parseFloat(e.target.value);
+                                                    onUpdateAxis(i, { value: val, target: val });
+                                                }}
+                                                className="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-600 hover:accent-blue-500"
+                                            />
+                                        </div>
+
+                                        <div className="w-32 flex flex-col gap-1">
+                                            <label className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Type</label>
+                                            <select
+                                                value={axis.type}
+                                                onChange={(e) => onUpdateAxis(i, { type: e.target.value as any })}
+                                                className="bg-gray-900 border border-gray-800 rounded px-2 py-1 text-xs text-gray-300 outline-none focus:border-blue-500"
+                                            >
+                                                <option value="linear">Linear (mm)</option>
+                                                <option value="rotary">Rotary (deg)</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                </div>
+
+                {/* Footer */}
+                <div className="p-4 border-t border-gray-800 bg-gray-950/30 rounded-b-2xl flex justify-end">
+                    <button
+                        onClick={onClose}
+                        className="px-6 py-2 bg-gray-800 hover:bg-gray-700 text-white text-sm font-bold rounded-lg transition-colors"
+                    >
+                        Done
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    );
+};

types.ts

@@ -27,22 +27,28 @@ export interface AxisPositionTrigger {
   targetInputPort: number; // Sets this Input bit when condition met
 }
 
+export interface AxisData {
+  id: number; // 0-7
+  name: string;
+  value: number;
+  target: number;
+  speed: number;
+  type: 'linear' | 'rotary';
+}
+
 export interface AxisObject extends BaseObject {
   type: ObjectType.AXIS_LINEAR | ObjectType.AXIS_ROTARY;
+  axisIndex: number; // 0-7, Binds to Global Axis
   min: number;
   max: number;
-  currentValue: number;
+  triggers: AxisPositionTrigger[]; // Triggers still belong to the physical object placement
-  targetValue: number;
-  speed: number;
-  isOscillating: boolean;
-  triggers: AxisPositionTrigger[]; // Axis drives Inputs
 }
 
 export interface CylinderObject extends BaseObject {
   type: ObjectType.CYLINDER;
   stroke: number;
-  extended: boolean; 
+  extended: boolean;
-  currentPosition: number; 
+  currentPosition: number;
   speed: number;
   outputPort: number; // Reads this Output bit to extend
 }
@@ -64,24 +70,51 @@ export interface LedObject extends BaseObject {
 export type SimObject = AxisObject | CylinderObject | SwitchObject | LedObject;
 
 // Logic Types
+export enum LogicTriggerType {
+  INPUT_BIT = 'INPUT_BIT',
+  AXIS_COMPARE = 'AXIS_COMPARE',
+}
+
+export enum LogicActionType {
+  OUTPUT_COIL = 'OUTPUT_COIL',
+  AXIS_MOVE = 'AXIS_MOVE',
+}
+
 export enum LogicCondition {
   IS_ON = 'IS_ON',
   IS_OFF = 'IS_OFF',
+  GREATER = '>',
+  LESS = '<',
+  EQUAL = '==',
+  GREATER_EQUAL = '>=',
+  LESS_EQUAL = '<=',
 }
 
 export enum LogicAction {
-  SET_ON = 'ON',     
+  SET_ON = 'ON',
-  SET_OFF = 'OFF',   
+  SET_OFF = 'OFF',
-  TOGGLE = 'TOGGLE', 
+  TOGGLE = 'TOGGLE',
+  MOVE_ABS = 'MOVE_ABS',
+  MOVE_REL = 'MOVE_REL',
 }
 
 export interface IOLogicRule {
   id: string;
-  inputPort: number;   
-  condition: LogicCondition; 
-  outputPort: number;  
-  action: LogicAction; 
   enabled: boolean;
+
+  // Trigger
+  triggerType: LogicTriggerType;
+  inputPort: number; // For INPUT_BIT
+  triggerAxisIndex: number; // For AXIS_COMPARE
+  triggerCompareOp: LogicCondition; // For AXIS_COMPARE (>, <, ==)
+  triggerValue: number; // For AXIS_COMPARE
+
+  // Action
+  actionType: LogicActionType;
+  outputPort: number; // For OUTPUT_COIL
+  action: LogicAction; // For OUTPUT_COIL (ON/OFF)
+  targetAxisIndex: number; // For AXIS_MOVE
+  targetAxisValue: number; // For AXIS_MOVE
 }
 
 // Full Project Export Type
@@ -91,4 +124,5 @@ export interface ProjectData {
   logicRules: IOLogicRule[];
   inputNames: string[];
   outputNames: string[];
+  axes: AxisData[];
 }