Initial commit: Industrial HMI system with component architecture

- Implement WebView2-based HMI frontend with React + TypeScript + Vite
- Add C# .NET backend with WebSocket communication layer
- Separate UI components into modular structure:
  * RecipePanel: Recipe selection and management
  * IOPanel: I/O monitoring and control (32 inputs/outputs)
  * MotionPanel: Servo control for X/Y/Z axes
  * CameraPanel: Vision system feed with HUD overlay
  * SettingsModal: System configuration management
- Create reusable UI components (CyberPanel, TechButton, PanelHeader)
- Implement dual-mode communication (WebView2 native + WebSocket fallback)
- Add 3D visualization with Three.js/React Three Fiber
- Fix JSON parsing bug in configuration save handler
- Include comprehensive .gitignore for .NET and Node.js projects

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/components/CameraPanel.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Camera, Crosshair } from 'lucide-react';
+import { PanelHeader } from './common/PanelHeader';
+
+interface CameraPanelProps {
+    videoRef: React.RefObject<HTMLVideoElement>;
+}
+
+export const CameraPanel: React.FC<CameraPanelProps> = ({ videoRef }) => (
+    <div className="h-full flex flex-col">
+        <PanelHeader title="Vision Feed" icon={Camera} />
+        <div className="flex-1 bg-black relative overflow-hidden border border-slate-800 group">
+            <video ref={videoRef} autoPlay playsInline className="w-full h-full object-cover opacity-80" />
+
+            {/* HUD OVERLAY */}
+            <div className="absolute inset-0 pointer-events-none">
+                <div className="absolute top-0 left-0 w-full h-full border-[20px] border-neon-blue/10 clip-tech-inv"></div>
+                <Crosshair className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 text-neon-blue opacity-50" />
+
+                <div className="absolute top-4 right-4 flex flex-col items-end gap-1">
+                    <span className="text-[10px] font-mono text-neon-red animate-pulse">● REC</span>
+                    <span className="text-xs font-mono text-neon-blue">1920x1080 @ 60FPS</span>
+                </div>
+
+                <div className="absolute bottom-4 left-4 text-neon-blue/80 font-mono text-xs">
+                    EXPOSURE: AUTO<br />
+                    GAIN: 12dB<br />
+                    FOCUS: 150mm
+                </div>
+            </div>
+        </div>
+        <div className="grid grid-cols-4 gap-2 mt-3">
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM +</button>
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM -</button>
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SNAP</button>
+            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SETTINGS</button>
+        </div>
+    </div>
+);