feat(canvas): Replace emoji icons with professional Lucide React icons

Phase 1 of Canvas Professional Upgrade:
- Replace all emoji icons in nodes with Lucide components
- Update BaseNode to use iconColor prop instead of color/colorBg
- Update NodePalette with matching Lucide icons
- Update templates.ts with Lucide icon names (Box, Scale, BarChart3, etc.)

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

atomizer-dashboard/frontend/src/components/canvas/palette/NodePalette.tsx

@@ -1,22 +1,33 @@
 import { DragEvent } from 'react';
 import { NodeType } from '../../../lib/canvas/schema';
+import {
+  Box,
+  Cpu,
+  SlidersHorizontal,
+  FlaskConical,
+  Target,
+  ShieldAlert,
+  BrainCircuit,
+  Rocket,
+} from 'lucide-react';
 
 interface PaletteItem {
   type: NodeType;
   label: string;
-  icon: string;
+  icon: React.ReactNode;
   description: string;
+  color: string;
 }
 
 const PALETTE_ITEMS: PaletteItem[] = [
-  { type: 'model', label: 'Model', icon: '📦', description: 'NX model file' },
-  { type: 'solver', label: 'Solver', icon: '⚙️', description: 'Nastran solution' },
-  { type: 'designVar', label: 'Design Variable', icon: '📐', description: 'Parameter to vary' },
-  { type: 'extractor', label: 'Extractor', icon: '🔬', description: 'Physics extraction' },
-  { type: 'objective', label: 'Objective', icon: '🎯', description: 'Optimization goal' },
-  { type: 'constraint', label: 'Constraint', icon: '🚧', description: 'Limit condition' },
-  { type: 'algorithm', label: 'Algorithm', icon: '🧠', description: 'Optimization method' },
-  { type: 'surrogate', label: 'Surrogate', icon: '🚀', description: 'Neural acceleration' },
+  { type: 'model', label: 'Model', icon: <Box size={18} />, description: 'NX model file (.prt, .sim)', color: 'text-blue-400' },
+  { type: 'solver', label: 'Solver', icon: <Cpu size={18} />, description: 'Nastran solution type', color: 'text-violet-400' },
+  { type: 'designVar', label: 'Design Variable', icon: <SlidersHorizontal size={18} />, description: 'Parameter to optimize', color: 'text-emerald-400' },
+  { type: 'extractor', label: 'Extractor', icon: <FlaskConical size={18} />, description: 'Physics result extraction', color: 'text-cyan-400' },
+  { type: 'objective', label: 'Objective', icon: <Target size={18} />, description: 'Optimization goal', color: 'text-rose-400' },
+  { type: 'constraint', label: 'Constraint', icon: <ShieldAlert size={18} />, description: 'Design constraint', color: 'text-amber-400' },
+  { type: 'algorithm', label: 'Algorithm', icon: <BrainCircuit size={18} />, description: 'Optimization method', color: 'text-indigo-400' },
+  { type: 'surrogate', label: 'Surrogate', icon: <Rocket size={18} />, description: 'Neural acceleration', color: 'text-pink-400' },
 ];
 
 export function NodePalette() {
@@ -26,24 +37,31 @@ export function NodePalette() {
   };
 
   return (
-    <div className="w-64 bg-dark-850 border-r border-dark-700 p-4 overflow-y-auto">
-      <h3 className="text-sm font-semibold text-dark-400 uppercase mb-4 tracking-wide">
-        Components
-      </h3>
-      <div className="space-y-2">
+    <div className="w-56 bg-dark-850 border-r border-dark-700 flex flex-col">
+      <div className="p-4 border-b border-dark-700">
+        <h3 className="text-xs font-semibold text-dark-400 uppercase tracking-wider">
+          Components
+        </h3>
+        <p className="text-xs text-dark-500 mt-1">
+          Drag to canvas
+        </p>
+      </div>
+      <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
         {PALETTE_ITEMS.map((item) => (
           <div
             key={item.type}
             draggable
             onDragStart={(e) => onDragStart(e, item.type)}
-            className="flex items-center gap-3 p-3 bg-dark-800 rounded-lg border border-dark-600
-                       cursor-grab hover:border-primary-500/50 hover:bg-dark-750 transition-all
-                       active:cursor-grabbing"
+            className="flex items-center gap-2.5 px-3 py-2.5 bg-dark-800/50 rounded-lg border border-dark-700/50
+                       cursor-grab hover:border-primary-500/50 hover:bg-dark-800
+                       active:cursor-grabbing transition-all group"
           >
-            <span className="text-xl">{item.icon}</span>
-            <div>
-              <div className="font-medium text-white">{item.label}</div>
-              <div className="text-xs text-dark-400">{item.description}</div>
+            <div className={`${item.color} opacity-80 group-hover:opacity-100 transition-opacity`}>
+              {item.icon}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-dark-200 text-sm leading-tight">{item.label}</div>
+              <div className="text-[10px] text-dark-500 truncate">{item.description}</div>
             </div>
           </div>
         ))}