Web page style added

PDK_libs/primitives/edge_couplers/EC_SiN400_1310_1p0dB_L635_A0_QY_202604/EC_SiN400_1310_1p0dB_L635_A0_QY_202604.yml

@@ -1,35 +0,0 @@
-name: EC_SiN400_1310_1p0dB_L635_A0_QY_202604
-foundry: Silterra
-process: EMO1_2ML_Cu_RDL
-year: '2026'
-type: primitive
-dependency: None
-maturity: development
-tapeout_history:
-- run: Silterra_EMO1_2ML_Cu_RDL_2026_Q2
-  status: Pending testing
-center_wavelength: 1310
-version: 1.0
-designer: Qin Yue
-update_notes: New SiN edge couplers with high efficiency
-ports:
-  a1:
-    x: -642.6
-    y: 0.0
-    a: 180.0
-    width: 0.7
-  b0:
-    x: 0.0
-    y: 0.0
-    a: 0.0
-    width: None
-  a0:
-    x: 0.0
-    y: 0.0
-    a: 180.0
-    width: 0.0
-time: 20260505-170136
-box_size:
-- 646.0
-- 75.0
-file_size: 1.36 KB

backend/database.py

@@ -4,7 +4,7 @@ import os
 from werkzeug.security import generate_password_hash
 
 # Save the database in the backend folder
-DB_FILE = os.path.join(os.path.dirname(__file__), "mxpic_data.db")
+DB_FILE = os.path.join(os.path.dirname(__file__), "..\\database\\mxpic_data.db")
 
 def init_db():
     conn = sqlite3.connect(DB_FILE)

backend/dir_test.py

@@ -1,110 +0,0 @@
-import os
-import yaml
-from collections import OrderedDict
-from flask import Flask, jsonify, send_from_directory, request, redirect, url_for, session, render_template
-from werkzeug.security import check_password_hash
-import database  # Imports the database.py you created earlier
-
-# --- Path Configurations ---
-BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-FRONTEND_DIR = os.path.join(BASE_DIR, '..', 'frontend')
-YML_PATH = os.path.join(BASE_DIR, '..\\mxpic\\PDKs\\Silterra\\directories.yaml')
-COMPS_ROOT = os.path.join(BASE_DIR, '..\\mxpic\\PDKs\\Silterra')
-
-# --- YAML & PDK Parsing Helper Functions (Unchanged) ---
-def countSpaces(line):
-    """Count leading spaces (tab=4)."""
-    expanded = line.expandtabs(4)
-    return len(expanded) - len(expanded.lstrip(' '))
-
-def buildTree(filepath):
-    """Build nested tree from indented yaml."""
-    if not os.path.exists(filepath):
-        return OrderedDict()
-        
-    with open(filepath, 'r', encoding='utf-8') as f:
-        lines = f.readlines()
-
-    rootIdx = None
-    for i, line in enumerate(lines):
-        if line.strip().startswith('root') and ':' in line.strip():
-            rootIdx = i
-            break
-    if rootIdx is None:
-        return OrderedDict()
-
-    entries = []
-    for line in lines[rootIdx + 1:]:
-        stripped = line.strip()
-        if not stripped or stripped.startswith('#'):
-            continue
-        if stripped.startswith('- '):
-            spaceNum = countSpaces(line)
-            name = stripped[2:].strip()
-            if name.strip():
-                entries.append((spaceNum, name))
-
-    if not entries:
-        return OrderedDict()
-
-    minIndent = min(indent for indent, _ in entries)
-    nest = OrderedDict()
-    levelStack = [(minIndent - 1, nest)]
-
-    for spaceNum, name in entries:
-        while levelStack and levelStack[-1][0] >= spaceNum:
-            levelStack.pop()
-        parent = levelStack[-1][1]
-        child = OrderedDict()
-        parent[name] = child
-        levelStack.append((spaceNum, child))
-
-    return nest
-
-def findComps(baseDir):
-    """Scan component folders, return map of paths -> component info."""
-    compMap = {}
-    refDir = os.path.dirname(baseDir)
-    for root, dirs, files in os.walk(baseDir):
-        ymlFiles = [f for f in files if f.endswith('.yml')]
-        if ymlFiles:
-            parentDir = os.path.dirname(root)
-            relPath = os.path.relpath(parentDir, refDir)
-            parts = () if relPath == '.' else tuple(relPath.split(os.sep))
-            compName = os.path.basename(root)
-            compMap[parts] = {
-                'folder': compName,
-                'yml': ymlFiles[0]
-            }
-            dirs.clear()
-    return compMap
-
-def addCompsToTree(tree, compMap):
-    """Insert component nodes into the tree."""
-    for pathSeg, compItem in compMap.items():
-        compName = compItem['folder']
-        curNode = tree
-        try:
-            for seg in pathSeg:
-                curNode = curNode[seg]
-        except KeyError:
-            continue
-        curNode[compName] = OrderedDict({
-            "__type__": "component",
-            "__name__": compName,
-            "__yml__": compItem['yml']
-        })
-    return tree
-
-def readCompYaml(compName):
-    """Load YAML from component folder."""
-    for root, dirs, files in os.walk(COMPS_ROOT):
-        if os.path.basename(root) == compName:
-            dirs.clear()
-            ymlFiles = [f for f in files if f.endswith('.yml')]
-            if ymlFiles:
-                ymlPath = os.path.join(root, ymlFiles[0])
-                with open(ymlPath, 'r', encoding='utf-8') as f:
-                    return yaml.safe_load(f)
-    return None
-

backend/server.py

@@ -27,50 +27,6 @@ def countSpaces(line):
     expanded = line.expandtabs(4)
     return len(expanded) - len(expanded.lstrip(' '))
 
-# def buildTree(filepath):
-#     """Build nested tree from indented yaml."""
-#     if not os.path.exists(filepath):
-#         return OrderedDict()
-        
-#     with open(filepath, 'r', encoding='utf-8') as f:
-#         lines = f.readlines()
-
-#     rootIdx = None
-#     for i, line in enumerate(lines):
-#         if line.strip().startswith('root') and ':' in line.strip():
-#             rootIdx = i
-#             break
-#     if rootIdx is None:
-#         return OrderedDict()
-
-#     entries = []
-#     for line in lines[rootIdx + 1:]:
-#         stripped = line.strip()
-#         if not stripped or stripped.startswith('#'):
-#             continue
-#         if stripped.startswith('- '):
-#             spaceNum = countSpaces(line)
-#             name = stripped[2:].strip()
-#             if name.strip():
-#                 entries.append((spaceNum, name))
-
-#     if not entries:
-#         return OrderedDict()
-
-#     minIndent = min(indent for indent, _ in entries)
-#     nest = OrderedDict()
-#     levelStack = [(minIndent - 1, nest)]
-
-#     for spaceNum, name in entries:
-#         while levelStack and levelStack[-1][0] >= spaceNum:
-#             levelStack.pop()
-#         parent = levelStack[-1][1]
-#         child = OrderedDict()
-#         parent[name] = child
-#         levelStack.append((spaceNum, child))
-
-#     return nest
-
 def buildTree(filepath):
     """Build nested tree from indented yaml."""
     if not os.path.exists(filepath):
@@ -116,25 +72,52 @@ def buildTree(filepath):
 
     return nest
 
-def addCompsToTree(tree, compMap):
+# def addCompsToTree(tree, compMap):
-    """Insert component nodes into the tree."""
+#     """Insert component nodes into the tree."""
+#     for pathSeg, compItem in compMap.items():
+#         compName = compItem['folder']
+#         curNode = tree
+        
+#         # FIX 2: Automatically build missing folder paths
+#         for seg in pathSeg:
+#             if seg not in curNode:
+#                 # If a folder like MZM_1600G isn't in the YAML, gracefully auto-create it
+#                 curNode[seg] = OrderedDict() 
+#             curNode = curNode[seg]
+            
+#         curNode[compName] = OrderedDict({
+#             "__type__": "component",
+#             "__name__": compName,
+#             "__yml__": compItem['yml']
+#         })
+#     return tree
+
+def addCompsToTree(compMap):
+    """
+    Build a completely fresh tree from scratch and insert component nodes.
+    No previous tree object or inspection required.
+    """
+    # Initialize a clean, empty root tree
+    fresh_tree = OrderedDict()
+    
     for pathSeg, compItem in compMap.items():
         compName = compItem['folder']
-        curNode = tree
+        curNode = fresh_tree
         
-        # FIX 2: Automatically build missing folder paths
+        # Sequentially build the nested path segments dynamically
         for seg in pathSeg:
             if seg not in curNode:
-                # If a folder like MZM_1600G isn't in the YAML, gracefully auto-create it
                 curNode[seg] = OrderedDict() 
             curNode = curNode[seg]
             
+        # Place the component metadata dictionary into its leaf node
         curNode[compName] = OrderedDict({
             "__type__": "component",
             "__name__": compName,
             "__yml__": compItem['yml']
         })
-    return tree
+        
+    return fresh_tree
 
 def findComps(baseDir):
     """Scan component folders, return map of paths -> component info."""
@@ -238,8 +221,10 @@ def getLib():
     tree = buildTree(YML_PATH)
     if os.path.isdir(COMPS_ROOT):
         compMap = findComps(COMPS_ROOT)
-        addCompsToTree(tree, compMap)
+        fresh_tree = addCompsToTree(compMap)
-    return jsonify(tree)
+    return jsonify(fresh_tree)
+
+
 
 @app.route('/api/component/<component_name>')
 def getComp(component_name):

frontend/canvas.html

@@ -5,13 +5,26 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Canvas with PDK Library – Component Name & Rotation</title>
+  <title>mxPIC Core - Canvas</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
   <script src="https://unpkg.com/reactflow@11/dist/umd/index.js" crossorigin></script>
   <link rel="stylesheet" href="https://unpkg.com/reactflow@11/dist/style.css" />
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <style>
+    /* optihk Shared Dark Theme Variables */
+    :root {
+      --bg-main: #0f172a;
+      --bg-card: #1e293b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --accent: #38bdf8;
+      --accent-hover: #0284c7;
+      --border: #334155;
+      --input-bg: #0b1120;
+    }
+
     body,
     html,
     #root {
@@ -19,93 +32,148 @@
       height: 100%;
       margin: 0;
       padding: 0;
+      font-family: 'Inter', sans-serif;
+      background-color: var(--bg-main);
+      color: var(--text-main);
+      overflow: hidden;
     }
 
+    /* Custom Dark Scrollbars */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--bg-main);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+
+    /* Tree View Styling */
     details {
       margin-left: 8px;
     }
 
     summary {
       cursor: pointer;
-    }
+      padding: 4px 0;
-
+      color: var(--text-main);
-    .left-block {
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      margin-bottom: 8px;
-    }
-
-    .left-block-header {
-      background: #e0e0e0;
-      padding: 6px 10px;
-      font-weight: bold;
-      font-size: 0.9em;
-      border-bottom: 1px solid #ccc;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .left-block-body {
-      padding: 8px 10px;
-      font-size: 0.85em;
     }
 
     .tree-folder summary {
-      font-weight: bold;
+      font-weight: 500;
+      color: var(--accent);
     }
 
-    .right-block {
+    .component-leaf {
-      border: 1px solid #ccc;
+      cursor: grab;
+      padding: 4px 6px;
+      margin-left: 15px;
+      margin-top: 2px;
+      word-break: break-all;
+      white-space: normal;
       border-radius: 4px;
-      margin-bottom: 8px;
+      color: var(--text-muted);
+      transition: background 0.2s ease, color 0.2s ease;
     }
 
-    .right-block-header {
+    .component-leaf:hover {
-      background: #e0e0e0;
+      background: var(--border);
-      padding: 6px 10px;
+      color: var(--text-main);
-      font-weight: bold;
-      font-size: 0.9em;
-      border-bottom: 1px solid #ccc;
     }
 
-    .right-block-body {
+    /* Side Panel Blocks */
-      padding: 8px 10px;
+    .left-block, .right-block {
+      background: var(--bg-main);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      margin-bottom: 12px;
+      overflow: hidden;
+    }
+
+    .left-block-header, .right-block-header {
+      background: var(--bg-card);
+      padding: 8px 12px;
+      font-weight: 600;
+      font-size: 0.85em;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .left-block-body, .right-block-body {
+      padding: 12px;
       font-size: 0.85em;
     }
 
     .placeholder-block {
-      border: 1px dashed #bbb;
+      border: 1px dashed var(--border);
-      padding: 8px;
+      padding: 12px;
-      color: #888;
+      color: var(--text-muted);
-      font-size: 0.85em;
+      text-align: center;
-      background: #f9f9f9;
+      background: var(--bg-main);
     }
 
     .toggle-btn {
       background: none;
       border: none;
-      font-size: 1.8em;
+      font-size: 1.2em;
+      color: var(--text-muted);
       cursor: pointer;
-      padding: 2px 4px;
+      padding: 2px 6px;
-      line-height: 1;
+      border-radius: 4px;
-      border-radius: 3px;
+      transition: background 0.2s ease, color 0.2s ease;
     }
 
     .toggle-btn:hover {
-      background: #d0d0d0;
+      background: var(--border);
+      color: var(--text-main);
     }
 
-    .component-leaf {
+    /* Standard Form Inputs inside panels */
-      cursor: grab;
+    input[type="number"], input[type="text"] {
-      padding: 2px 4px;
+      background-color: var(--input-bg);
-      margin-left: 20px;
+      border: 1px solid var(--border);
-      word-break: break-all;
+      color: var(--text-main);
-      white-space: normal;
+      font-family: inherit;
+      font-size: 0.9em;
+      padding: 6px 10px;
+      border-radius: 4px;
+      outline: none;
+      width: 100%;
+      box-sizing: border-box;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
-    .component-leaf:hover {
+    input[type="number"]:focus, input[type="text"]:focus {
-      background: #e6f7ff;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
+    }
+
+    label {
+      font-weight: 500;
+      color: var(--text-muted);
+      margin-bottom: 4px;
+      display: block;
+    }
+
+    /* ReactFlow Dark Mode Overrides */
+    .react-flow__controls button {
+      background-color: var(--bg-card) !important;
+      border-bottom: 1px solid var(--border) !important;
+      fill: var(--text-main) !important;
+    }
+    .react-flow__controls button:hover {
+      background-color: var(--border) !important;
     }
   </style>
 </head>
@@ -128,6 +196,7 @@
       useUpdateNodeInternals,
     } = window.ReactFlow;
 
+    // --- NODE DESIGN (Dark CAD Style) ---
     const RotatableNode = ({ id, data, selected }) => {
       const updateNodeInternals = useUpdateNodeInternals();
       useEffect(() => {
@@ -135,9 +204,9 @@
       }, [data.rotation, updateNodeInternals, id]);
 
       const baseHandleStyle = {
-        width: 14, height: 14,
+        width: 10, height: 10,
-        background: '#555',
+        background: 'var(--bg-main)',
-        border: 'none',
+        border: '2px solid var(--accent)',
         borderRadius: '50%',
       };
       const leftTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(-50%, -50%)' };
@@ -147,11 +216,18 @@
 
       return (
         <div style={{
-          padding: '10px 20px', border: '1px solid #333', borderRadius: 6,
+          padding: '10px 20px', 
-          background: '#fff', minWidth: 100, textAlign: 'center',
+          border: selected ? '2px solid var(--accent)' : '1px solid var(--border)', 
+          borderRadius: 6,
+          background: 'var(--bg-card)', 
+          color: 'var(--text-main)',
+          minWidth: 100, textAlign: 'center',
           position: 'relative', transform: `rotate(${data.rotation || 0}deg)`,
           transition: selected ? 'none' : 'transform 0.1s ease',
           boxSizing: 'border-box',
+          boxShadow: selected ? '0 0 15px rgba(56, 189, 248, 0.2)' : '0 4px 6px rgba(0,0,0,0.3)',
+          fontFamily: "'Inter', sans-serif",
+          fontSize: '0.85rem'
         }}>
           <div>{data.componentDisplayName}</div>
           <Handle type="source" position={Position.Left} id="port-lt-source" style={{ ...leftTopPort, zIndex: 10 }} />
@@ -175,7 +251,7 @@
         };
         return (
           <div className="component-leaf" draggable onDragStart={handleDragStart}>
-            🔷 {name}
+            <span style={{color: 'var(--accent)', marginRight: '4px'}}>❖</span> {name}
           </div>
         );
       }
@@ -197,8 +273,8 @@
 
     const LeftPanel = ({ library, treeKey, expanded, onToggle, treeRef, width }) => (
     <aside style={{
-        width: width, background: '#f4f4f4', borderRight: '1px solid #ccc',
+        width: width, background: 'var(--bg-card)', borderRight: '1px solid var(--border)',
-        padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
+        padding: 12, display: 'flex', flexDirection: 'column', height: '100%',
         boxSizing: 'border-box', overflowY: 'auto'
       }}>
         <div className="left-block">
@@ -214,15 +290,15 @@
                 <TreeNode key={key} name={key} children={value} />
               ))
             ) : (
-              <p style={{ color: '#999' }}>Loading library...</p>
+              <p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Loading library...</p>
             )}
           </div>
         </div>
 
         <div className="left-block">
-          <div className="left-block-header">Routing selections</div>
+          <div className="left-block-header">Routing modes</div>
           <div className="left-block-body">
-            <ul style={{ paddingLeft: 20, margin: 0 }}>
+            <ul style={{ paddingLeft: 20, margin: 0, color: 'var(--text-muted)', lineHeight: '1.8' }}>
               <li>Single mode wires</li>
               <li>Multi-mode wires</li>
               <li>DC electrical wires</li>
@@ -232,11 +308,14 @@
         </div>
 
         <div className="left-block" style={{ marginTop: 'auto' }}>
-          <div className="left-block-header">User info</div>
+          <div className="left-block-header">Session</div>
-          <div className="left-block-body">
+          <div className="left-block-body" style={{color: 'var(--text-muted)'}}>
-            <div>Name: XXXXXX</div>
+            <div style={{marginBottom: '4px'}}>Name: XXXXXX</div>
-            <div>ID: 12345678</div>
+            <div style={{marginBottom: '10px'}}>ID: 12345678</div>
-            <button disabled>Log out</button>
+            <button disabled style={{
+                background: 'var(--border)', color: 'var(--text-muted)', 
+                border: 'none', padding: '6px 12px', borderRadius: '4px', width: '100%'
+            }}>Log out</button>
           </div>
         </div>
       </aside>
@@ -330,16 +409,16 @@
 
       return (
         <aside style={{
-          width: width, background: '#fafafa', borderLeft: '1px solid #ccc',
+          width: width, background: 'var(--bg-card)', borderLeft: '1px solid var(--border)',
-          padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
+          padding: 12, display: 'flex', flexDirection: 'column', height: '100%',
           boxSizing: 'border-box', overflowY: 'auto'
         }}>
           <div className="right-block">
-            <div className="right-block-header">Properties</div>
+            <div className="right-block-header">Transforms</div>
             <div className="right-block-body">
               {selectedNode ? (
                 <div>
-                  <label>X:</label>
+                  <label>X Coordinate</label>
                   <input
                     type="number"
                     step="1"
@@ -355,14 +434,11 @@
                       }
                     }}
                     onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
+                      if (e.key === 'Enter') e.currentTarget.blur();
-                        e.currentTarget.blur();
-                      }
                     }}
-                    style={{ width: '100%' }}
                   />
                   <br /><br />
-                  <label>Y:</label>
+                  <label>Y Coordinate</label>
                   <input
                     type="number"
                     step="1"
@@ -378,16 +454,11 @@
                       }
                     }}
                     onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
+                      if (e.key === 'Enter') e.currentTarget.blur();
-                        e.currentTarget.blur();
-                      }
                     }}
-                    style={{ width: '100%' }}
                   />
                   <br /><br />
-                  <label>A (deg):</label>
+                  <label>Angle (deg)</label>
-                  <div style={{ marginTop: 4 }}>
-                  
                   <input
                     type="number"
                     step="1"
@@ -403,30 +474,26 @@
                       }
                     }}
                     onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
+                      if (e.key === 'Enter') e.currentTarget.blur();
-                          e.currentTarget.blur();
-                        }
                     }}
-                      style={{ width: '100%', marginTop: 4 }}
                   />
                 </div>
-                </div>
               ) : (
-                <p style={{ color: '#999' }}>Click a node to edit</p>
+                <p style={{ color: 'var(--text-muted)', fontStyle: 'italic', textAlign: 'center' }}>Select a node to inspect</p>
               )}
             </div>
           </div>
 
           {selectedNode?.data?.componentName && (
             <div className="right-block">
-              <div className="right-block-header">Item details</div>
+              <div className="right-block-header">Parameters</div>
               <div className="right-block-body">
                 {loading ? (
-                  <p>Loading...</p>
+                  <p style={{color: 'var(--text-muted)'}}>Loading data...</p>
                 ) : componentData ? (
                   <>
-                    <div style={{ marginBottom: '10px' }}>
+                    <div style={{ marginBottom: '15px' }}>
-                      <strong style={{ display: 'block', marginBottom: '4px' }}>Component name:</strong>
+                      <label>Instance Name</label>
                       {editingComponentName ? (
                         <input
                           type="text"
@@ -435,47 +502,54 @@
                           onBlur={handleSaveName}
                           onKeyDown={handleKeyDown}
                           autoFocus
-                          style={{ width: '100%', padding: '4px', fontSize: '0.85em', boxSizing: 'border-box' }}
                         />
                       ) : (
                         <div
                           style={{
                             cursor: 'pointer',
-                            padding: '4px 6px',
+                            padding: '6px 8px',
-                            backgroundColor: '#f0f0f0',
+                            backgroundColor: 'var(--input-bg)',
-                            borderRadius: '3px',
+                            border: '1px solid var(--border)',
-                            display: 'inline-block',
+                            borderRadius: '4px',
-                            wordBreak: 'break-all'
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            wordBreak: 'break-all',
+                            color: 'var(--accent)'
                           }}
                           onClick={handleStartEditName}
                           title="Click to edit"
                         >
-                          {currentComponentDisplayName || componentData.name} ✎
+                          <span>{currentComponentDisplayName || componentData.name}</span>
+                          <span style={{fontSize: '12px', color: 'var(--text-muted)'}}>✎</span>
                         </div>
                       )}
                     </div>
 
-                    <p style={{ wordBreak: 'break-all', whiteSpace: 'normal', overflowWrap: 'break-word', marginTop: '8px' }}>
+                    <div style={{color: 'var(--text-muted)', lineHeight: '1.6'}}>
-                      <strong>PDK name:</strong><br />{componentData.name}
+                        <p style={{ margin: '0 0 8px 0', wordBreak: 'break-all' }}>
+                        <strong style={{color: 'var(--text-main)'}}>Cell:</strong> {componentData.name}
                         </p>
-                    <p><strong>Description:</strong><br />
+                        <p style={{ margin: '0 0 8px 0' }}>
-                      Foundry: {componentData.foundry}<br />
+                        <strong style={{color: 'var(--text-main)'}}>Foundry:</strong> {componentData.foundry}<br/>
-                      Process: {componentData.process}<br />
+                        <strong style={{color: 'var(--text-main)'}}>Process:</strong> {componentData.process}
-                      Year: {componentData.year}<br />
-                      Designer: {componentData.designer}
                         </p>
-                    <p><strong>PDK:</strong> (string)</p>
+                    </div>
-                    <p><strong>Ports:</strong></p>
+
-                    <ul style={{ paddingLeft: 20, margin: 0 }}>
+                    <p style={{color: 'var(--text-main)', fontWeight: '500', marginBottom: '4px'}}>Ports:</p>
+                    <ul style={{ paddingLeft: 15, margin: '0 0 15px 0', color: 'var(--text-muted)' }}>
                       {componentData.ports && Object.entries(componentData.ports).map(([portName, portInfo]) => (
-                        <li key={portName} style={{ letterSpacing: '0.5px' }}>{portName}: {formatPort(portInfo)}</li>
+                        <li key={portName} style={{ letterSpacing: '0.5px' }}>
+                            <span style={{color: 'var(--accent)'}}>{portName}</span>: {formatPort(portInfo)}
+                        </li>
                       ))}
                     </ul>
-                    <p><strong>Image:</strong></p>
+
+                    <p style={{color: 'var(--text-main)', fontWeight: '500', marginBottom: '4px'}}>Preview:</p>
                     <div style={{
-                      border: '1px dashed #ccc', width: '100%', height: 80,
+                      border: '1px solid var(--border)', width: '100%', height: 100,
                       display: 'flex', alignItems: 'center', justifyContent: 'center',
-                      color: '#999', background: '#fcfcfc', marginTop: 4,
+                      background: 'var(--input-bg)', borderRadius: '4px',
                       overflow: 'hidden',
                     }}>
                       <img
@@ -485,37 +559,38 @@
                         onClick={() => setEnlarged(`/api/component/${encodeURIComponent(componentData.name)}/image`)}
                         onError={(e) => {
                           e.currentTarget.style.display = 'none';
-                          e.currentTarget.parentElement.innerHTML = 'No image available';
+                          e.currentTarget.parentElement.innerHTML = '<span style="color:var(--text-muted)">No preview</span>';
                         }}
                       />
                     </div>
                   </>
                 ) : (
-                  <p style={{ color: '#999' }}>No data</p>
+                  <p style={{ color: 'var(--text-muted)' }}>No data available</p>
                 )}
               </div>
             </div>
           )}
 
           <div className="right-block" style={{ marginTop: 'auto' }}>
-            <div className="right-block-header">Function block to be explored</div>
+            <div className="right-block-header">Inverse Design</div>
-            <div className="right-block-body placeholder-block">Reserved for future functionality</div>
+            <div className="right-block-body placeholder-block">Requires AI Upgrade</div>
           </div>
 
           {enlarged && (
             <div
               style={{
                 position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
-                backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 1000,
+                backgroundColor: 'rgba(15, 23, 42, 0.9)', zIndex: 1000,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
                 cursor: 'zoom-out',
+                backdropFilter: 'blur(4px)'
               }}
               onClick={() => setEnlarged(null)}
             >
               <img
                 src={enlarged}
                 alt="Enlarged layout"
-                style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain' }}
+                style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain', border: '1px solid var(--border)', background: 'var(--bg-main)' }}
               />
             </div>
           )}
@@ -541,7 +616,7 @@
           width: 6, cursor: 'col-resize', background: 'transparent',
           transition: 'background 0.2s', zIndex: 5, flexShrink: 0,
         }}
-        onMouseEnter={(e) => e.currentTarget.style.background = '#ccc'}
+        onMouseEnter={(e) => e.currentTarget.style.background = 'var(--accent)'}
         onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
       />
     );
@@ -556,8 +631,8 @@
       const [expanded, setExpanded] = useState(false);
       const treeContainerRef = useRef(null);
 
-      const [leftWidth, setLeftWidth] = useState(240);
+      const [leftWidth, setLeftWidth] = useState(260);
-      const [rightWidth, setRightWidth] = useState(220);
+      const [rightWidth, setRightWidth] = useState(260);
       const [dragging, setDragging] = useState(null);
 
       const [gridSnap, setGridSnap] = useState(false);
@@ -627,7 +702,7 @@
       }, [setNodes, reactFlowInstance, generateComponentDisplayName]);
 
       const onConnect = useCallback((connection) => {
-        setEdges((eds) => addEdge({ ...connection, type: 'straight' }, eds));
+        setEdges((eds) => addEdge({ ...connection, type: 'smoothstep', style: { stroke: 'var(--accent)', strokeWidth: 2 } }, eds));
       }, [setEdges]);
 
       const expandAll = useCallback(() => {
@@ -677,28 +752,31 @@
           <ResizeHandle onMouseDown={handleResizeStart('left')} />
 
           <div style={{ flex: 1, position: 'relative' }}>
+            
+            {/* Grid Snap Toggle Switch */}
             <div style={{
-              position: 'absolute', top: 10, right: 10, zIndex: 10,
+              position: 'absolute', top: 15, right: 15, zIndex: 10,
-              display: 'flex', alignItems: 'center', gap: 8,
+              display: 'flex', alignItems: 'center', gap: 10,
+              background: 'var(--bg-card)', padding: '6px 12px', borderRadius: '8px',
+              border: '1px solid var(--border)', boxShadow: '0 4px 6px rgba(0,0,0,0.3)'
             }}>
               <span style={{
-                fontSize: '0.85em', fontWeight: 'bold', fontFamily: "'Sofia Pro', sans-serif",
+                fontSize: '0.85em', fontWeight: '500', color: 'var(--text-main)', userSelect: 'none'
-                color: '#333', userSelect: 'none'
+              }}>Snap to Grid</span>
-              }}>Grid lock</span>
               <div
                 onClick={toggleGridSnap}
                 style={{
-                  width: 48, height: 24, borderRadius: 12,
+                  width: 40, height: 20, borderRadius: 10,
-                  background: gridSnap ? '#28a745' : '#ccc',
+                  background: gridSnap ? 'var(--accent)' : 'var(--input-bg)',
+                  border: '1px solid ' + (gridSnap ? 'var(--accent)' : 'var(--border)'),
                   cursor: 'pointer', display: 'flex', alignItems: 'center',
-                  padding: '0 2px', transition: 'background 0.3s',
+                  padding: '0 2px', transition: 'background 0.3s, border-color 0.3s',
-                  boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
                 }}
               >
                 <div style={{
-                  width: 20, height: 20, borderRadius: '50%',
+                  width: 16, height: 16, borderRadius: '50%',
-                  background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+                  background: '#fff', 
-                  transform: gridSnap ? 'translateX(24px)' : 'translateX(0)',
+                  transform: gridSnap ? 'translateX(20px)' : 'translateX(0)',
                   transition: 'transform 0.2s',
                 }} />
               </div>
@@ -721,8 +799,9 @@
               elementsSelectable={true}
               connectionRadius={50}
             >
-              <Controls />
+              <Controls style={{ bottom: 15, left: 15 }} />
-              <Background />
+              {/* Dark mode background for the canvas */}
+              <Background color="#334155" gap={20} size={1} />
             </ReactFlow>
           </div>
 

frontend/canvas_legacy.html

@@ -0,0 +1,750 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{% raw %}
+
+<head>
+  <meta charset="UTF-8">
+  <title>Canvas with PDK Library – Component Name & Rotation</title>
+  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+  <script src="https://unpkg.com/reactflow@11/dist/umd/index.js" crossorigin></script>
+  <link rel="stylesheet" href="https://unpkg.com/reactflow@11/dist/style.css" />
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <style>
+    body,
+    html,
+    #root {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    details {
+      margin-left: 8px;
+    }
+
+    summary {
+      cursor: pointer;
+    }
+
+    .left-block {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+
+    .left-block-header {
+      background: #e0e0e0;
+      padding: 6px 10px;
+      font-weight: bold;
+      font-size: 0.9em;
+      border-bottom: 1px solid #ccc;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .left-block-body {
+      padding: 8px 10px;
+      font-size: 0.85em;
+    }
+
+    .tree-folder summary {
+      font-weight: bold;
+    }
+
+    .right-block {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+
+    .right-block-header {
+      background: #e0e0e0;
+      padding: 6px 10px;
+      font-weight: bold;
+      font-size: 0.9em;
+      border-bottom: 1px solid #ccc;
+    }
+
+    .right-block-body {
+      padding: 8px 10px;
+      font-size: 0.85em;
+    }
+
+    .placeholder-block {
+      border: 1px dashed #bbb;
+      padding: 8px;
+      color: #888;
+      font-size: 0.85em;
+      background: #f9f9f9;
+    }
+
+    .toggle-btn {
+      background: none;
+      border: none;
+      font-size: 1.8em;
+      cursor: pointer;
+      padding: 2px 4px;
+      line-height: 1;
+      border-radius: 3px;
+    }
+
+    .toggle-btn:hover {
+      background: #d0d0d0;
+    }
+
+    .component-leaf {
+      cursor: grab;
+      padding: 2px 4px;
+      margin-left: 20px;
+      word-break: break-all;
+      white-space: normal;
+    }
+
+    .component-leaf:hover {
+      background: #e6f7ff;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useEffect, useRef, useCallback, useMemo, memo } = React;
+    const {
+      ReactFlow,
+      ReactFlowProvider,
+      useNodesState,
+      useEdgesState,
+      Controls,
+      Background,
+      useReactFlow,
+      addEdge,
+      Handle,
+      Position,
+      useUpdateNodeInternals,
+    } = window.ReactFlow;
+
+    const RotatableNode = ({ id, data, selected }) => {
+      const updateNodeInternals = useUpdateNodeInternals();
+      useEffect(() => {
+        updateNodeInternals(id);
+      }, [data.rotation, updateNodeInternals, id]);
+
+      const baseHandleStyle = {
+        width: 14, height: 14,
+        background: '#555',
+        border: 'none',
+        borderRadius: '50%',
+      };
+      const leftTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(-50%, -50%)' };
+      const leftBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(-50%, -50%)' };
+      const rightTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(50%, -50%)' };
+      const rightBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(50%, -50%)' };
+
+      return (
+        <div style={{
+          padding: '10px 20px', border: '1px solid #333', borderRadius: 6,
+          background: '#fff', minWidth: 100, textAlign: 'center',
+          position: 'relative', transform: `rotate(${data.rotation || 0}deg)`,
+          transition: selected ? 'none' : 'transform 0.1s ease',
+          boxSizing: 'border-box',
+        }}>
+          <div>{data.componentDisplayName}</div>
+          <Handle type="source" position={Position.Left} id="port-lt-source" style={{ ...leftTopPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Left} id="port-lt-target" style={{ ...leftTopPort, zIndex: 5 }} />
+          <Handle type="source" position={Position.Left} id="port-lb-source" style={{ ...leftBottomPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Left} id="port-lb-target" style={{ ...leftBottomPort, zIndex: 5 }} />
+          <Handle type="source" position={Position.Right} id="port-rt-source" style={{ ...rightTopPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Right} id="port-rt-target" style={{ ...rightTopPort, zIndex: 5 }} />
+          <Handle type="source" position={Position.Right} id="port-rb-source" style={{ ...rightBottomPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Right} id="port-rb-target" style={{ ...rightBottomPort, zIndex: 5 }} />
+        </div>
+      );
+    };
+
+    const TreeNode = ({ name, children }) => {
+      if (children && children.__type__ === 'component') {
+        const componentName = children.__name__;
+        const handleDragStart = (event) => {
+          event.dataTransfer.setData('application/reactflow', componentName);
+          event.dataTransfer.effectAllowed = 'move';
+        };
+        return (
+          <div className="component-leaf" draggable onDragStart={handleDragStart}>
+            🔷 {name}
+          </div>
+        );
+      }
+
+      const hasChildren = children && Object.keys(children).length > 0;
+      return (
+        <details>
+          <summary className="tree-folder">
+            <span style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>📂 {name}</span>
+            </summary>
+          {hasChildren &&
+            Object.entries(children).map(([childName, childData]) => (
+              <TreeNode key={childName} name={childName} children={childData} />
+            ))
+          }
+        </details>
+      );
+    };
+
+    const LeftPanel = ({ library, treeKey, expanded, onToggle, treeRef, width }) => (
+    <aside style={{
+        width: width, background: '#f4f4f4', borderRight: '1px solid #ccc',
+        padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
+        boxSizing: 'border-box', overflowY: 'auto'
+      }}>
+        <div className="left-block">
+          <div className="left-block-header">
+            <span>PDK Libraries</span>
+            <button className="toggle-btn" onClick={onToggle} title={expanded ? 'Collapse all' : 'Expand all'}>
+              {expanded ? '▾' : '▸'}
+            </button>
+          </div>
+          <div className="left-block-body" style={{ maxHeight: '45vh', overflowY: 'auto' }} key={treeKey} ref={treeRef}>
+            {library && Object.keys(library).length > 0 ? (
+              Object.entries(library).map(([key, value]) => (
+                <TreeNode key={key} name={key} children={value} />
+              ))
+            ) : (
+              <p style={{ color: '#999' }}>Loading library...</p>
+            )}
+          </div>
+        </div>
+
+        <div className="left-block">
+          <div className="left-block-header">Routing selections</div>
+          <div className="left-block-body">
+            <ul style={{ paddingLeft: 20, margin: 0 }}>
+              <li>Single mode wires</li>
+              <li>Multi-mode wires</li>
+              <li>DC electrical wires</li>
+              <li>RF electrical wires</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="left-block" style={{ marginTop: 'auto' }}>
+          <div className="left-block-header">User info</div>
+          <div className="left-block-body">
+            <div>Name: XXXXXX</div>
+            <div>ID: 12345678</div>
+            <button disabled>Log out</button>
+          </div>
+        </div>
+      </aside>
+    );
+
+    const RightPanel = memo(({ selectedNode, width, onRenameComponent }) => {
+      const [componentData, setComponentData] = useState(null);
+      const [loading, setLoading] = useState(false);
+      const [enlarged, setEnlarged] = useState(null);
+      const { setNodes } = useReactFlow();
+      const [editingComponentName, setEditingComponentName] = useState(false);
+      const [tempComponentName, setTempComponentName] = useState('');
+      const [localX, setLocalX] = useState('');
+      const [localY, setLocalY] = useState('');
+      const [localRotation, setLocalRotation] = useState('');
+
+      useEffect(() => {
+        const nodeId = selectedNode?.id;
+        if (!nodeId) {
+          setComponentData(null);
+          setLoading(false);
+          return;
+        }
+        const compName = selectedNode?.data?.componentName;
+        if (!compName) {
+          setComponentData(null);
+          setLoading(false);
+          return;
+        }
+        if (componentData && componentData.name === compName && componentData.nodeId === nodeId) return;
+
+        setLoading(true);
+        fetch(`/api/component/${encodeURIComponent(compName)}`)
+          .then(r => r.json())
+          .then(data => {
+            setComponentData({ ...data, nodeId: nodeId, componentDisplayName: selectedNode.data.componentDisplayName || data.name });
+            setLoading(false);
+          })
+          .catch(() => setLoading(false));
+      }, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName]);
+
+      useEffect(() => {
+        if (selectedNode) {
+          setLocalX(selectedNode.position.x.toFixed(3));
+          setLocalY(selectedNode.position.y.toFixed(3));
+          setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
+        }
+      }, [selectedNode?.position.x, selectedNode?.position.y, selectedNode?.data?.rotation, selectedNode?.id]);
+
+      const updatePosition = useCallback((id, axis, value) => {
+        const val = parseFloat(value);
+        if (isNaN(val)) return;
+        setNodes(nds => nds.map(n => n.id === id ? { ...n, position: { ...n.position, [axis]: val } } : n));
+      }, [setNodes]);
+
+      const updateRotation = useCallback((id, value) => {
+        const val = parseFloat(value);
+        if (isNaN(val)) return;
+        const clamped = Math.min(180, Math.max(-180, val));
+        setNodes(nds => nds.map(n => n.id === id ? { ...n, data: { ...n.data, rotation: clamped } } : n));
+      }, [setNodes]);
+
+      const formatPort = (port) => {
+        if (!port) return '—';
+        return `x:${port.x ?? '?'}, y:${port.y ?? '?'}, a:${port.a ?? '?'}, w:${port.width ?? '?'}`;
+      };
+
+      const currentRotation = selectedNode?.data?.rotation ?? 0;
+      const currentComponentDisplayName = selectedNode?.data?.componentDisplayName || '';
+
+      const handleStartEditName = () => {
+        setTempComponentName(currentComponentDisplayName);
+        setEditingComponentName(true);
+      };
+
+      const handleSaveName = () => {
+        const newName = tempComponentName.trim();
+        if (newName && selectedNode) {
+          onRenameComponent(selectedNode.id, newName);
+        }
+        setEditingComponentName(false);
+      };
+
+      const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+          handleSaveName();
+        } else if (e.key === 'Escape') {
+          setEditingComponentName(false);
+        }
+      };
+
+      return (
+        <aside style={{
+          width: width, background: '#fafafa', borderLeft: '1px solid #ccc',
+          padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
+          boxSizing: 'border-box', overflowY: 'auto'
+        }}>
+          <div className="right-block">
+            <div className="right-block-header">Properties</div>
+            <div className="right-block-body">
+              {selectedNode ? (
+                <div>
+                  <label>X:</label>
+                  <input
+                    type="number"
+                    step="1"
+                    value={localX}
+                    onChange={(e) => setLocalX(e.target.value)}
+                    onBlur={() => {
+                      const val = parseFloat(localX);
+                      if (!isNaN(val) && selectedNode) {
+                        updatePosition(selectedNode.id, 'x', val);
+                        setLocalX(val.toFixed(3));
+                      } else if (selectedNode) {
+                        setLocalX(selectedNode.position.x.toFixed(3));
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.currentTarget.blur();
+                      }
+                    }}
+                    style={{ width: '100%' }}
+                  />
+                  <br /><br />
+                  <label>Y:</label>
+                  <input
+                    type="number"
+                    step="1"
+                    value={localY}
+                    onChange={(e) => setLocalY(e.target.value)}
+                    onBlur={() => {
+                      const val = parseFloat(localY);
+                      if (!isNaN(val) && selectedNode) {
+                        updatePosition(selectedNode.id, 'y', val);
+                        setLocalY(val.toFixed(3));
+                      } else if (selectedNode) {
+                        setLocalY(selectedNode.position.y.toFixed(3));
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.currentTarget.blur();
+                      }
+                    }}
+                    style={{ width: '100%' }}
+                  />
+                  <br /><br />
+                  <label>A (deg):</label>
+                  <div style={{ marginTop: 4 }}>
+                  
+                    <input
+                      type="number"
+                      step="1"
+                      value={localRotation}
+                      onChange={(e) => setLocalRotation(e.target.value)}
+                      onBlur={() => {
+                        const val = parseFloat(localRotation);
+                        if (!isNaN(val) && selectedNode) {
+                          updateRotation(selectedNode.id, val);
+                          setLocalRotation(val.toFixed(3));
+                        } else if (selectedNode) {
+                          setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
+                        }
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.currentTarget.blur();
+                        }
+                      }}
+                      style={{ width: '100%', marginTop: 4 }}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <p style={{ color: '#999' }}>Click a node to edit</p>
+              )}
+            </div>
+          </div>
+
+          {selectedNode?.data?.componentName && (
+            <div className="right-block">
+              <div className="right-block-header">Item details</div>
+              <div className="right-block-body">
+                {loading ? (
+                  <p>Loading...</p>
+                ) : componentData ? (
+                  <>
+                    <div style={{ marginBottom: '10px' }}>
+                      <strong style={{ display: 'block', marginBottom: '4px' }}>Component name:</strong>
+                      {editingComponentName ? (
+                        <input
+                          type="text"
+                          value={tempComponentName} 
+                          onChange={(e) => setTempComponentName(e.target.value)}
+                          onBlur={handleSaveName}
+                          onKeyDown={handleKeyDown}
+                          autoFocus
+                          style={{ width: '100%', padding: '4px', fontSize: '0.85em', boxSizing: 'border-box' }}
+                        />
+                      ) : (
+                        <div
+                          style={{
+                            cursor: 'pointer',
+                            padding: '4px 6px',
+                            backgroundColor: '#f0f0f0',
+                            borderRadius: '3px',
+                            display: 'inline-block',
+                            wordBreak: 'break-all'
+                          }}
+                          onClick={handleStartEditName}
+                          title="Click to edit"
+                        >
+                          {currentComponentDisplayName || componentData.name} ✎
+                        </div>
+                      )}
+                    </div>
+
+                    <p style={{ wordBreak: 'break-all', whiteSpace: 'normal', overflowWrap: 'break-word', marginTop: '8px' }}>
+                      <strong>PDK name:</strong><br />{componentData.name}
+                    </p>
+                    <p><strong>Description:</strong><br />
+                      Foundry: {componentData.foundry}<br />
+                      Process: {componentData.process}<br />
+                      Year: {componentData.year}<br />
+                      Designer: {componentData.designer}
+                    </p>
+                    <p><strong>PDK:</strong> (string)</p>
+                    <p><strong>Ports:</strong></p>
+                    <ul style={{ paddingLeft: 20, margin: 0 }}>
+                      {componentData.ports && Object.entries(componentData.ports).map(([portName, portInfo]) => (
+                        <li key={portName} style={{ letterSpacing: '0.5px' }}>{portName}: {formatPort(portInfo)}</li>
+                      ))}
+                    </ul>
+                    <p><strong>Image:</strong></p>
+                    <div style={{
+                      border: '1px dashed #ccc', width: '100%', height: 80,
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      color: '#999', background: '#fcfcfc', marginTop: 4,
+                      overflow: 'hidden',
+                    }}>
+                      <img
+                        src={`/api/component/${encodeURIComponent(componentData.name)}/image`}
+                        alt="Component layout"
+                        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', cursor: 'pointer' }}
+                        onClick={() => setEnlarged(`/api/component/${encodeURIComponent(componentData.name)}/image`)}
+                        onError={(e) => {
+                          e.currentTarget.style.display = 'none';
+                          e.currentTarget.parentElement.innerHTML = 'No image available';
+                        }}
+                      />
+                    </div>
+                  </>
+                ) : (
+                  <p style={{ color: '#999' }}>No data</p>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="right-block" style={{ marginTop: 'auto' }}>
+            <div className="right-block-header">Function block to be explored</div>
+            <div className="right-block-body placeholder-block">Reserved for future functionality</div>
+          </div>
+
+          {enlarged && (
+            <div
+              style={{
+                position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+                backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 1000,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                cursor: 'zoom-out',
+              }}
+              onClick={() => setEnlarged(null)}
+            >
+              <img
+                src={enlarged}
+                alt="Enlarged layout"
+                style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain' }}
+              />
+            </div>
+          )}
+        </aside>
+      );
+    }, (prevProps, nextProps) => {
+      const prev = prevProps.selectedNode;
+      const next = nextProps.selectedNode;
+      if (prev?.id !== next?.id) return false;
+      if (prev?.position?.x !== next?.position?.x) return false;
+      if (prev?.position?.y !== next?.position?.y) return false;
+      if (prev?.data?.rotation !== next?.data?.rotation) return false;
+      if (prev?.data?.componentName !== next?.data?.componentName) return false;
+      if (prev?.data?.componentDisplayName !== next?.data?.componentDisplayName) return false;
+      if (prevProps.width !== nextProps.width) return false;
+      return true;
+    });
+
+    const ResizeHandle = ({ onMouseDown }) => (
+      <div
+        onMouseDown={onMouseDown}
+        style={{
+          width: 6, cursor: 'col-resize', background: 'transparent',
+          transition: 'background 0.2s', zIndex: 5, flexShrink: 0,
+        }}
+        onMouseEnter={(e) => e.currentTarget.style.background = '#ccc'}
+        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+      />
+    );
+
+    function App() {
+      const [nodes, setNodes, onNodesChange] = useNodesState([]);
+      const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+      const reactFlowInstance = useReactFlow();
+
+      const [library, setLibrary] = useState(null);
+      const [treeKey, setTreeKey] = useState(0);
+      const [expanded, setExpanded] = useState(false);
+      const treeContainerRef = useRef(null);
+
+      const [leftWidth, setLeftWidth] = useState(240);
+      const [rightWidth, setRightWidth] = useState(220);
+      const [dragging, setDragging] = useState(null);
+
+      const [gridSnap, setGridSnap] = useState(false);
+
+      const componentCounterRef = useRef(1);
+
+      const generateComponentDisplayName = useCallback(() => {
+        const name = `component_${componentCounterRef.current}`;
+        componentCounterRef.current += 1;
+        return name;
+      }, []);
+
+      const renameComponent = useCallback((nodeId, newComponentDisplayName) => {
+        setNodes(nds => nds.map(n => {
+          if (n.id === nodeId) {
+            return {
+              ...n,
+              data: {
+                ...n.data,
+                componentDisplayName: newComponentDisplayName
+              }
+            };
+          }
+          return n;
+        }));
+      }, [setNodes]);
+
+      const fetchLibrary = useCallback(async () => {
+        try {
+          const res = await fetch('/api/library');
+          const data = await res.json();
+          setLibrary(data);
+        } catch (err) {
+          console.error('Failed to fetch library', err);
+        }
+      }, []);
+      useEffect(() => { fetchLibrary(); }, [fetchLibrary]);
+
+      const selectedNode = useMemo(() => nodes.find(n => n.selected), [nodes]);
+
+      const onDragOver = useCallback((event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+      }, []);
+
+      const onDrop = useCallback((event) => {
+        event.preventDefault();
+        const type = event.dataTransfer.getData('application/reactflow');
+        if (!type) return;
+        const position = reactFlowInstance.screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY,
+        });
+        const componentDisplayName = generateComponentDisplayName();
+        const newNode = {
+          id: Date.now().toString(),
+          type: 'rotatableNode',
+          position,
+          data: {
+            label: type,
+            componentName: type,
+            rotation: 0,
+            componentDisplayName: componentDisplayName
+          },
+        };
+        setNodes((nds) => nds.concat(newNode));
+      }, [setNodes, reactFlowInstance, generateComponentDisplayName]);
+
+      const onConnect = useCallback((connection) => {
+        setEdges((eds) => addEdge({ ...connection, type: 'straight' }, eds));
+      }, [setEdges]);
+
+      const expandAll = useCallback(() => {
+        if (treeContainerRef.current) {
+          treeContainerRef.current.querySelectorAll('details').forEach(d => d.open = true);
+        }
+      }, []);
+      const collapseAll = useCallback(() => setTreeKey(k => k + 1), []);
+      const handleToggle = useCallback(() => {
+        if (expanded) { collapseAll(); setExpanded(false); }
+        else { expandAll(); setExpanded(true); }
+      }, [expanded, expandAll, collapseAll]);
+
+      const handleResizeStart = useCallback((side) => (e) => {
+        e.preventDefault();
+        setDragging(side);
+      }, []);
+      useEffect(() => {
+        if (!dragging) return;
+        const onMouseMove = (e) => {
+          if (dragging === 'left') {
+            setLeftWidth(Math.min(500, Math.max(150, e.clientX)));
+          } else if (dragging === 'right') {
+            const newWidth = window.innerWidth - e.clientX;
+            setRightWidth(Math.min(500, Math.max(150, newWidth)));
+          }
+        };
+        const onMouseUp = () => setDragging(null);
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+          window.removeEventListener('mousemove', onMouseMove);
+          window.removeEventListener('mouseup', onMouseUp);
+        };
+      }, [dragging]);
+
+      const toggleGridSnap = useCallback(() => {
+        setGridSnap(prev => !prev);
+      }, []);
+
+      return (
+        <div style={{ display: 'flex', width: '100%', height: '100%', userSelect: dragging ? 'none' : 'auto' }}>
+          <LeftPanel
+            library={library} treeKey={treeKey} expanded={expanded}
+            onToggle={handleToggle} treeRef={treeContainerRef} width={leftWidth}
+          />
+          <ResizeHandle onMouseDown={handleResizeStart('left')} />
+
+          <div style={{ flex: 1, position: 'relative' }}>
+            <div style={{
+              position: 'absolute', top: 10, right: 10, zIndex: 10,
+              display: 'flex', alignItems: 'center', gap: 8,
+            }}>
+              <span style={{
+                fontSize: '0.85em', fontWeight: 'bold', fontFamily: "'Sofia Pro', sans-serif",
+                color: '#333', userSelect: 'none'
+              }}>Grid lock</span>
+              <div
+                onClick={toggleGridSnap}
+                style={{
+                  width: 48, height: 24, borderRadius: 12,
+                  background: gridSnap ? '#28a745' : '#ccc',
+                  cursor: 'pointer', display: 'flex', alignItems: 'center',
+                  padding: '0 2px', transition: 'background 0.3s',
+                  boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
+                }}
+              >
+                <div style={{
+                  width: 20, height: 20, borderRadius: '50%',
+                  background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+                  transform: gridSnap ? 'translateX(24px)' : 'translateX(0)',
+                  transition: 'transform 0.2s',
+                }} />
+              </div>
+            </div>
+
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+              onConnect={onConnect}
+              nodeTypes={{ rotatableNode: RotatableNode }}
+              fitView
+              snapToGrid={gridSnap}
+              snapGrid={[10, 10]}
+              nodesDraggable={true}
+              nodesConnectable={true}
+              elementsSelectable={true}
+              connectionRadius={50}
+            >
+              <Controls />
+              <Background />
+            </ReactFlow>
+          </div>
+
+          <ResizeHandle onMouseDown={handleResizeStart('right')} />
+          <RightPanel
+            selectedNode={selectedNode}
+            width={rightWidth}
+            onRenameComponent={renameComponent}
+          />
+        </div>
+      );
+    }
+
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(
+      <ReactFlowProvider>
+        <App />
+      </ReactFlowProvider>
+    );
+  </script>
+</body>
+
+</html>
+
+{% endraw %}

frontend/dashboard.html

@@ -1,22 +1,204 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard</title>
+    <!-- Importing a clean, modern font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
+    
+    <style>
+        /* Base Dark Theme for EDA */
+        :root {
+            --bg-main: #0f172a;
+            --bg-card: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --accent: #38bdf8;
+            --accent-hover: #0284c7;
+            --border: #334155;
+        }
+
+        body {
+            margin: 0;
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-main);
+            color: var(--text-main);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        /* Top Navigation Bar */
+        header {
+            width: 100%;
+            background-color: var(--bg-card);
+            padding: 15px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border);
+            box-sizing: border-box;
+        }
+
+        .brand {
+            font-size: 1.25rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+        }
+
+        .brand span {
+            color: var(--accent);
+        }
+
+        .logout-btn {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.2s ease;
+        }
+
+        .logout-btn:hover {
+            color: #ef4444; /* Red hover for logout */
+        }
+
+        /* Main Content Container */
+        .container {
+            width: 100%;
+            max-width: 800px;
+            padding: 40px 20px;
+            flex-grow: 1;
+        }
+
+        h2 {
+            font-weight: 400;
+            margin-bottom: 30px;
+        }
+
+        h2 strong {
+            color: var(--accent);
+        }
+
+        /* Projects Section */
+        .section-title {
+            font-size: 1.1rem;
+            color: var(--text-muted);
+            margin-bottom: 15px;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 10px;
+        }
+
+        /* File Cards */
+        .project-list {
+            list-style: none;
+            padding: 0;
+            display: grid;
+            gap: 15px;
+            margin-bottom: 40px;
+        }
+
+        .project-card {
+            background-color: var(--bg-card);
+            border: 1px solid var(--border);
+            padding: 15px 20px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            transition: transform 0.2s ease, border-color 0.2s ease;
+            cursor: pointer;
+            font-size: 0.95rem;
+        }
+
+        .project-card:hover {
+            transform: translateY(-2px);
+            border-color: var(--accent);
+        }
+
+        .file-icon {
+            margin-right: 15px;
+            color: var(--accent);
+            font-size: 1.2rem;
+        }
+
+        /* Action Button */
+        .new-project-form {
+            display: flex;
+            justify-content: flex-start;
+        }
+
+        .new-project-btn {
+            background-color: var(--accent);
+            color: #0f172a;
+            font-family: inherit;
+            font-size: 15px;
+            font-weight: 600;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            transition: background-color 0.2s ease, transform 0.1s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .new-project-btn:hover {
+            background-color: var(--accent-hover);
+            color: white;
+        }
+
+        .new-project-btn:active {
+            transform: scale(0.98);
+        }
+
+        /* Footer */
+        footer {
+            padding: 20px;
+            color: var(--border);
+            font-size: 0.75rem;
+            text-align: center;
+            width: 100%;
+        }
+    </style>
 </head>
 <body>
-    <h2>Welcome, {{ username }}!</h2>
+
-    <p>Your Recent Designs:</p>
+    <!-- Top Navigation -->
-    <ul>
+    <header>
-        <li>400G_Transceiver_v1.gds</li>
+        <div class="brand">opti<span>hk</span></div>
-        <li>Ring_Modulator_Test.gds</li>
+        <a href="/logout" class="logout-btn">Logout</a>
+    </header>
+
+    <!-- Main Dashboard -->
+    <div class="container">
+        <h2>Welcome back, <strong>{{ username }}</strong>!</h2>
+        
+        <div class="section-title">Your Recent Layouts</div>
+        <ul class="project-list">
+            <li class="project-card">
+                <span class="file-icon">📄</span>
+                400G_Transceiver_v1.gds
+            </li>
+            <li class="project-card">
+                <span class="file-icon">📄</span>
+                Ring_Modulator_Test.gds
+            </li>
         </ul>
         
-    <!-- The "+" button that links to your GUI -->
+        <!-- Canvas Link -->
-    <form action="/canvas" method="GET">
+        <form action="/canvas" method="GET" class="new-project-form">
-        <button type="submit" style="font-size: 20px; padding: 10px;">+ New Project</button>
+            <button type="submit" class="new-project-btn">
+                <span>+</span> New PIC Layout
+            </button>
         </form>
+    </div>
+
+    <!-- System Footer -->
+    <footer>
+        Powered by mxpic core
+    </footer>
 
-    <br>
-    <a href="/logout">Logout</a>
 </body>
 </html>

frontend/login.html

@@ -1,23 +1,179 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>mxPIC EDA - Login</title>
+    <!-- Importing the same clean font used in the dashboard -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    
+    <style>
+        /* Shared Dark Theme Variables */
+        :root {
+            --bg-main: #0f172a;
+            --bg-card: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --accent: #38bdf8;
+            --accent-hover: #0284c7;
+            --border: #334155;
+            --input-bg: #0b1120;
+            --error-text: #ef4444;
+            --error-bg: rgba(239, 68, 68, 0.1);
+        }
+
+        body {
+            margin: 0;
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-main);
+            color: var(--text-main);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        /* Centered Login Card */
+        .login-card {
+            background-color: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 40px;
+            width: 100%;
+            max-width: 380px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+        }
+
+        /* Branding */
+        .brand-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .brand-logo {
+            font-size: 1.75rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            margin-bottom: 5px;
+        }
+
+        .brand-logo span {
+            color: var(--accent);
+        }
+
+        .system-title {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            font-weight: 400;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+        }
+
+        /* Form Layout */
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        label {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            font-weight: 500;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+            background-color: var(--input-bg);
+            border: 1px solid var(--border);
+            color: var(--text-main);
+            font-family: inherit;
+            font-size: 1rem;
+            padding: 12px 15px;
+            border-radius: 6px;
+            outline: none;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        input[type="text"]:focus,
+        input[type="password"]:focus {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
+        }
+
+        /* Submit Button */
+        button[type="submit"] {
+            background-color: var(--accent);
+            color: #0f172a;
+            font-family: inherit;
+            font-size: 1rem;
+            font-weight: 600;
+            padding: 12px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+            margin-top: 10px;
+        }
+
+        button[type="submit"]:hover {
+            background-color: var(--accent-hover);
+            color: white;
+        }
+
+        button[type="submit"]:active {
+            transform: scale(0.98);
+        }
+
+        /* Error Message Styling */
+        .error-message {
+            background-color: var(--error-bg);
+            color: var(--error-text);
+            border: 1px solid var(--error-text);
+            padding: 12px;
+            border-radius: 6px;
+            font-size: 0.85rem;
+            text-align: center;
+            margin-top: 20px;
+        }
+    </style>
 </head>
 <body>
-    <h2>Login to mxPIC System</h2>
+
+    <div class="login-card">
+        <div class="brand-header">
+            <div class="brand-logo">opti<span>hk</span></div>
+            <div class="system-title">mxPIC Core Access</div>
+        </div>
+
         <!-- The form sends data to the /login route in server.py -->
         <form action="/login" method="POST">
-        <label>Username:</label><br>
+            <div class="input-group">
-        <input type="text" name="username" required><br><br>
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" required autocomplete="username">
+            </div>
             
-        <label>Password:</label><br>
+            <div class="input-group">
-        <input type="password" name="password" required><br><br>
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" required autocomplete="current-password">
+            </div>
             
-        <button type="submit">Login</button>
+            <button type="submit">Log In</button>
         </form>
-    <!-- Display error messages if login fails -->
+
+        <!-- Elegantly styled error message block -->
         {% if error %}
-        <p style="color:red;">{{ error }}</p>
+            <div class="error-message">
+                {{ error }}
+            </div>
         {% endif %}
+    </div>
+
 </body>
 </html>