diff --git a/backend/__pycache__/database.cpython-39.pyc b/backend/__pycache__/database.cpython-39.pyc
index 2745305..9b21f2c 100644
Binary files a/backend/__pycache__/database.cpython-39.pyc and b/backend/__pycache__/database.cpython-39.pyc differ
diff --git a/backend/server.py b/backend/server.py
index 17e39c0..5b1c49d 100644
--- a/backend/server.py
+++ b/backend/server.py
@@ -6,7 +6,7 @@ import json
 import yaml
 from collections import OrderedDict
 from functools import wraps
-from flask import Flask, jsonify, send_from_directory, request, redirect, url_for, session, render_template
+from flask import Flask, jsonify, send_from_directory, request, redirect, url_for, session, render_template, make_response
 from werkzeug.security import check_password_hash
 import database  
 from flask import Response
@@ -36,6 +36,14 @@ app.json.sort_keys = False
 database.init_db()
 
 
+def no_cache_response(response):
+    """Prevent stale editor assets while canvas features are being revised."""
+    response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, max-age=0'
+    response.headers['Pragma'] = 'no-cache'
+    response.headers['Expires'] = '0'
+    return response
+
+
 def login_required_json(view_func):
     @wraps(view_func)
     def wrapper(*args, **kwargs):
@@ -237,7 +245,13 @@ def canvas():
         return redirect(url_for('home'))
         
     # Note: Ensure your old index.html is renamed to canvas.html in the frontend folder
-    return render_template('canvas.html')
+    return no_cache_response(make_response(render_template('canvas.html')))
+
+
+@app.route('/canvas-helpers.js')
+def canvas_helpers():
+    """Serve the shared canvas helper script used by canvas.html."""
+    return no_cache_response(send_from_directory(FRONTEND_DIR, 'canvas-helpers.js'))
 
 @app.route('/logout')
 def logout():
diff --git a/database/admin/layout/mxpic_project_1/mxpic_project_1.yml b/database/admin/layout/mxpic_project_1/mxpic_project_1.yml
new file mode 100644
index 0000000..94576c5
--- /dev/null
+++ b/database/admin/layout/mxpic_project_1/mxpic_project_1.yml
@@ -0,0 +1,75 @@
+# =============================================
+# mxPIC Cell/Project Definition File
+# =============================================
+schema_version: "2.0.0"
+kind: cell
+project: mxpic_project_1
+name: mxpic_project_1
+type: project
+version: "1.0.0"
+
+# 1. External Ports (How this cell connects to the outside world)
+ports:
+- name: port_3
+  layer: WG_CORE
+  x: 359.0
+  y: 447.0
+  angle: 0.0
+  width: 0.5
+- name: component_4
+  layer: WG_CORE
+  x: 366.0
+  y: 615.0
+  angle: 0.0
+  width: 0.5
+
+# 2. Instances (The sub-components dropped onto this canvas)
+instances:
+  component_2:
+    component: EMO1_2ML_CU_Al_RDL/composite/Mach_Zender_modulators/MZM_1600G_L3000_GSSG_TRAIL_TypeA2_QY_v1_20260303
+    x: 799.0
+    y: 420.0
+    rotation: 0.0
+    mirror: false
+    settings:
+    length:
+
+elements:
+  anchor_1:
+    type: anchor
+    x: 479.0
+    y: 503.0
+    angle: 0.0
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+  port_3:
+    type: port
+    x: 359.0
+    y: 447.0
+    angle: 0.0
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+  component_4:
+    type: port
+    x: 366.0
+    y: 615.0
+    angle: 0.0
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+
+# 3. Bundles (Grouped links for multi-bus/parallel routing)
+bundles:
+  output_bus:
+    routing_type: euler_bend
+    links:
+      - from: anchor_1:right
+        to: component_2:s1b
+      - from: anchor_1:left
+        to: port_3:port_3
+      - from: component_2:s1b
+        to: component_2:s1b
+      - from: component_2:g2b
+        to: component_4:component_4
\ No newline at end of file
diff --git a/database/engineer/layout/mxpic_project_1/.project.json b/database/engineer/layout/mxpic_project_1/.project.json
deleted file mode 100644
index 4f868b9..0000000
--- a/database/engineer/layout/mxpic_project_1/.project.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "mxpic_project_1",
-  "technology": "Silterra/EMO1_2ML_CU_Al_RDL"
-}
\ No newline at end of file
diff --git a/database/engineer/layout/test_proj/.project.json b/database/engineer/layout/test_proj/.project.json
deleted file mode 100644
index 1a02b5f..0000000
--- a/database/engineer/layout/test_proj/.project.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "test_proj",
-  "technology": "Silterra/EMO1_2ML_CU_Al_RDL"
-}
\ No newline at end of file
diff --git a/database/mxpic_data.db b/database/mxpic_data.db
index e270b38..b4eb8c0 100644
Binary files a/database/mxpic_data.db and b/database/mxpic_data.db differ
diff --git a/frontend/canvas-helpers.js b/frontend/canvas-helpers.js
new file mode 100644
index 0000000..18e2694
--- /dev/null
+++ b/frontend/canvas-helpers.js
@@ -0,0 +1,295 @@
+(function (root, factory) {
+  const helpers = factory();
+  if (typeof module === 'object' && module.exports) {
+    module.exports = helpers;
+  }
+  root.MxpicCanvasHelpers = helpers;
+})(typeof window !== 'undefined' ? window : globalThis, function () {
+  const FORGE_COMPONENT_LABEL = 'generate with mxpic_forge';
+  const FORGE_COMPONENT_TYPE = 'generate_with_forge';
+  const ELEMENT_COMPONENTS = {
+    Port: {
+      name: 'Port',
+      elementType: 'port',
+      ports: {
+        port: { x: 0, y: 0, a: 0, width: 0.5 }
+      }
+    },
+    Anchor: {
+      name: 'Anchor',
+      elementType: 'anchor',
+      ports: {
+        left: { x: -20, y: 0, a: 180, width: 0.5 },
+        right: { x: 20, y: 0, a: 0, width: 0.5 }
+      }
+    }
+  };
+
+  const DEFAULT_FORGE_ARGUMENTS = {
+    function_name: 'straight',
+    component_name: '',
+    pdk: 'Silterra/EMO1_2ML_CU_Al_RDL',
+    layer: 'WG_CORE',
+    length: 100,
+    width: 0.5,
+    radius: 10,
+    gap: 0.2,
+    spacing: 10,
+    angle: 0,
+    wavelength: 1310,
+    port_count: 2,
+    include_heater: false,
+    include_electrical_ports: false,
+    notes: ''
+  };
+
+  const createForgeArguments = (overrides) => ({
+    ...DEFAULT_FORGE_ARGUMENTS,
+    ...(overrides || {})
+  });
+
+  const isForgeComponent = (componentName) => componentName === FORGE_COMPONENT_LABEL || componentName === FORGE_COMPONENT_TYPE;
+
+  const normalizeAngle = (angle) => {
+    const value = Number(angle);
+    if (!Number.isFinite(value)) return 0;
+    let normalized = ((value % 360) + 360) % 360;
+    if (normalized > 180) normalized -= 360;
+    return Object.is(normalized, -0) ? 0 : normalized;
+  };
+
+  const portSideFromAngle = (angle) => {
+    const normalized = normalizeAngle(angle);
+    if (normalized === 0) return 'right';
+    if (normalized === 180 || normalized === -180) return 'left';
+    if (normalized === 90) return 'top';
+    if (normalized === -90) return 'bottom';
+    return Math.abs(normalized) < 90 ? 'right' : 'left';
+  };
+
+  const roundPercent = (value) => Number(value.toFixed(3));
+
+  const scaledPercent = (value, min, max, invert) => {
+    if (!Number.isFinite(value) || !Number.isFinite(min) || !Number.isFinite(max) || min === max) return null;
+    const ratio = (value - min) / (max - min);
+    const visualRatio = invert ? 1 - ratio : ratio;
+    return roundPercent(15 + visualRatio * 70);
+  };
+
+  const fallbackPercent = (index, count) => {
+    if (count <= 1) return 50;
+    return roundPercent(15 + (index / (count - 1)) * 70);
+  };
+
+  const buildSideHandles = (ports, side) => {
+    const vertical = side === 'left' || side === 'right';
+    const coordinate = vertical ? 'y' : 'x';
+    const values = ports.map(port => Number(port.info[coordinate])).filter(Number.isFinite);
+    const min = values.length ? Math.min(...values) : null;
+    const max = values.length ? Math.max(...values) : null;
+
+    return ports.map((port, index) => {
+      const physicalPercent = scaledPercent(Number(port.info[coordinate]), min, max, vertical);
+      const percent = physicalPercent == null ? fallbackPercent(index, ports.length) : physicalPercent;
+      const percentValue = `${percent}%`;
+      const style = vertical
+        ? { top: percentValue, transform: side === 'left' ? 'translate(-50%, -50%)' : 'translate(50%, -50%)' }
+        : { left: percentValue, transform: side === 'top' ? 'translate(-50%, -50%)' : 'translate(-50%, 50%)' };
+
+      return {
+        name: port.name,
+        position: side,
+        style,
+        port: port.info
+      };
+    });
+  };
+
+  const buildPortHandles = (ports) => {
+    const grouped = { left: [], right: [], top: [], bottom: [] };
+    Object.entries(ports || {}).forEach(([name, info]) => {
+      if (name === 'a0' || name === 'b0') return;
+      const side = portSideFromAngle(info && info.a);
+      grouped[side].push({ name, info: info || {} });
+    });
+
+    Object.values(grouped).forEach(sidePorts => {
+      sidePorts.sort((a, b) => {
+        const sideA = portSideFromAngle(a.info.a);
+        const vertical = sideA === 'left' || sideA === 'right';
+        const primary = vertical ? Number(b.info.y || 0) - Number(a.info.y || 0) : Number(a.info.x || 0) - Number(b.info.x || 0);
+        return primary || a.name.localeCompare(b.name);
+      });
+    });
+
+    return [
+      ...buildSideHandles(grouped.left, 'left'),
+      ...buildSideHandles(grouped.right, 'right'),
+      ...buildSideHandles(grouped.top, 'top'),
+      ...buildSideHandles(grouped.bottom, 'bottom')
+    ];
+  };
+
+  const toYamlScalar = (value) => {
+    if (value === null || value === undefined) return '""';
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value);
+    if (typeof value === 'boolean') return value ? 'true' : 'false';
+    const numericValue = Number(value);
+    if (typeof value === 'string' && value.trim() !== '' && Number.isFinite(numericValue) && String(numericValue) === value.trim()) {
+      return value.trim();
+    }
+    return JSON.stringify(String(value));
+  };
+
+  const buildSettingsYaml = (settings, indent) => {
+    const pad = ' '.repeat(indent);
+    const entries = Object.entries(settings || {});
+    if (entries.length === 0) return `${pad}{}`;
+    return entries.map(([key, value]) => `${pad}${key}: ${toYamlScalar(value)}`).join('\n');
+  };
+
+  const buildInstanceYaml = ({ instanceName, componentName, componentPath, position, rotation, forgeArguments }) => {
+    const forge = isForgeComponent(componentName);
+    const componentValue = forge ? FORGE_COMPONENT_TYPE : componentPath;
+    const settings = forge ? createForgeArguments(forgeArguments) : null;
+    const settingsYaml = forge ? `\n    settings:\n${buildSettingsYaml(settings, 6)}` : '\n    settings:\n    length:';
+
+    return `  ${instanceName}:
+    component: ${componentValue}
+    x: ${Number(position.x || 0).toFixed(1)}
+    y: ${Number(position.y || 0).toFixed(1)}
+    rotation: ${Number(rotation || 0).toFixed(1)}
+    mirror: false${settingsYaml}`;
+  };
+
+  const buildInstancesYaml = ({ nodes, resolveComponentPath }) => {
+    return (nodes || [])
+      .filter(node => node.data && node.data.componentName && !node.data.elementType)
+      .map(node => {
+        const data = node.data;
+        const componentName = data.componentName || '';
+        const componentPath = isForgeComponent(componentName)
+          ? FORGE_COMPONENT_TYPE
+          : (resolveComponentPath ? resolveComponentPath(componentName) : componentName);
+
+        return buildInstanceYaml({
+          instanceName: data.componentDisplayName || node.id,
+          componentName,
+          componentPath,
+          position: node.position || { x: 0, y: 0 },
+          rotation: data.rotation || 0,
+          forgeArguments: data.forgeArguments
+        });
+      })
+      .join('\n\n');
+  };
+
+  const getNodePortName = (node) => {
+    const name = node && node.data && (node.data.portName || node.data.componentDisplayName || node.data.label);
+    return name || (node && node.id) || 'port';
+  };
+
+  const isPortElementNode = (node) => node && (node.data && node.data.elementType === 'port' || node.id === 'page-port' || node.type === 'portNode');
+  const isElementNode = (node) => node && node.data && (node.data.elementType === 'port' || node.data.elementType === 'anchor');
+
+  const buildElementPorts = (elementType, data) => {
+    const element = ELEMENT_COMPONENTS[elementType === 'anchor' ? 'Anchor' : 'Port'];
+    if (!element) return {};
+    if (element.elementType === 'port') {
+      return {
+        port: {
+          x: 0,
+          y: 0,
+          a: Number((data && (data.angle ?? data.a)) ?? 0),
+          width: Number((data && data.width) || 0.5)
+        }
+      };
+    }
+    return JSON.parse(JSON.stringify(element.ports));
+  };
+
+  const buildPageComponentPorts = (port, nodes) => {
+    const portNodes = (nodes || []).filter(isPortElementNode);
+    if (portNodes.length > 0) {
+      return portNodes.reduce((ports, node) => {
+        const data = node.data || {};
+        ports[getNodePortName(node)] = {
+          x: Number((node.position && node.position.x) || 0),
+          y: Number((node.position && node.position.y) || 0),
+          a: Number(data.angle ?? data.a ?? 0),
+          width: Number(data.width || 0.5)
+        };
+        return ports;
+      }, {});
+    }
+    if (!port) return {};
+    return {
+      port: {
+        x: Number(port.x || 0),
+        y: Number(port.y || 0),
+        a: Number(port.a || 0),
+        width: Number(port.width || 0.5)
+      }
+    };
+  };
+
+  const buildCanvasPortsYaml = (nodes, fallbackPort) => {
+    const ports = buildPageComponentPorts(fallbackPort, nodes);
+    const entries = Object.entries(ports);
+    if (entries.length === 0) return 'ports: []';
+    const sourceNodes = new Map((nodes || []).filter(isPortElementNode).map(node => [getNodePortName(node), node]));
+    const lines = entries.map(([name, info]) => {
+      const data = (sourceNodes.get(name) && sourceNodes.get(name).data) || {};
+      const description = data.description ? `\n  description: ${toYamlScalar(data.description)}` : '';
+      return `- name: ${name}
+  ${data.layer ? `layer: ${data.layer}` : 'layer: WG_CORE'}
+  x: ${Number(info.x || 0).toFixed(1)}
+  y: ${Number(info.y || 0).toFixed(1)}
+  angle: ${Number(info.a || 0).toFixed(1)}
+  width: ${Number(info.width || 0.5)}${description}`;
+    });
+    return `ports:\n${lines.join('\n')}`;
+  };
+
+  const buildPortsYaml = (port) => buildCanvasPortsYaml([], port);
+
+  const buildElementsYaml = (nodes) => {
+    const elementNodes = (nodes || []).filter(isElementNode);
+    if (elementNodes.length === 0) return 'elements: {}';
+    const lines = elementNodes.map(node => {
+      const data = node.data || {};
+      const name = data.componentDisplayName || data.portName || node.id;
+      const angle = data.elementType === 'port' ? data.angle : data.rotation;
+      return `  ${name}:
+    type: ${data.elementType}
+    x: ${Number((node.position && node.position.x) || 0).toFixed(1)}
+    y: ${Number((node.position && node.position.y) || 0).toFixed(1)}
+    angle: ${Number(angle || 0).toFixed(1)}
+    layer: ${data.layer || 'WG_CORE'}
+    width: ${Number(data.width || 0.5)}
+    description: ${toYamlScalar(data.description || '')}`;
+    });
+    return `elements:\n${lines.join('\n')}`;
+  };
+
+  return {
+    FORGE_COMPONENT_LABEL,
+    FORGE_COMPONENT_TYPE,
+    ELEMENT_COMPONENTS,
+    DEFAULT_FORGE_ARGUMENTS,
+    createForgeArguments,
+    isForgeComponent,
+    normalizeAngle,
+    portSideFromAngle,
+    buildPortHandles,
+    buildElementPorts,
+    buildInstanceYaml,
+    buildInstancesYaml,
+    buildPageComponentPorts,
+    buildCanvasPortsYaml,
+    buildPortsYaml,
+    buildElementsYaml,
+    buildSettingsYaml,
+    toYamlScalar
+  };
+});
diff --git a/frontend/canvas.html b/frontend/canvas.html
index 96845f3..d40586d 100644
--- a/frontend/canvas.html
+++ b/frontend/canvas.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="https://unpkg.com/reactflow@11/dist/style.css" />
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js"></script>
+  <script src="/canvas-helpers.js"></script>
   <style>
     :root {
       --bg-main: #060b16;
@@ -548,6 +549,88 @@
       white-space: nowrap;
     }
 
+    .component-card.compact-tree-card {
+      min-height: 18px;
+      padding: 2px 6px;
+      margin: 1px 0 1px 18px;
+      border-radius: 4px;
+      align-items: center;
+      background: transparent;
+      border-color: transparent;
+      box-shadow: none;
+      gap: 6px;
+    }
+
+    .component-card.compact-tree-card:hover {
+      background: rgba(110, 231, 255, 0.08);
+      border-color: var(--border);
+      box-shadow: none;
+    }
+
+    .component-card.compact-tree-card .component-card-name {
+      text-align: left;
+      line-height: 18px;
+      color: var(--text-muted);
+    }
+
+    .element-card-icon {
+      width: 16px;
+      height: 16px;
+      flex: 0 0 16px;
+      position: relative;
+      border: 1px solid var(--border);
+      background: rgba(6, 14, 24, 0.86);
+    }
+
+    .element-card-icon.port-icon {
+      border-radius: 50%;
+    }
+
+    .element-card-icon.port-icon::before {
+      content: '';
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--accent-green);
+      top: 4px;
+      left: 4px;
+      box-shadow: 0 0 0 2px rgba(110, 231, 255, 0.18);
+    }
+
+    .element-card-icon.port-icon::after {
+      content: '';
+      position: absolute;
+      width: 5px;
+      height: 1px;
+      background: var(--accent-green);
+      top: 7px;
+      right: 1px;
+    }
+
+    .element-card-icon.anchor-icon {
+      border-radius: 4px;
+    }
+
+    .element-card-icon.anchor-icon::before,
+    .element-card-icon.anchor-icon::after {
+      content: '';
+      position: absolute;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--accent-warm);
+      top: 5px;
+    }
+
+    .element-card-icon.anchor-icon::before {
+      left: 1px;
+    }
+
+    .element-card-icon.anchor-icon::after {
+      right: 1px;
+    }
+
     .category-card {
       min-height: 94px;
     }
@@ -679,6 +762,19 @@
       applyNodeChanges,
       applyEdgeChanges,
     } = window.ReactFlow;
+    const {
+      FORGE_COMPONENT_LABEL,
+      FORGE_COMPONENT_TYPE,
+      ELEMENT_COMPONENTS,
+      createForgeArguments,
+      isForgeComponent,
+      buildPortHandles,
+      buildElementPorts,
+      buildInstancesYaml,
+      buildPageComponentPorts,
+      buildCanvasPortsYaml,
+      buildElementsYaml
+    } = window.MxpicCanvasHelpers;
 
 
     const iconPromiseCache = {};
@@ -790,16 +886,23 @@
         }
       }, [data.rotation, id]);
 
+      useEffect(() => {
+        updateNodeInternalsRef.current(id);
+      }, [id, data.ports, data.componentName]);
+
       const baseHandleStyle = {
         width: 10, height: 10,
         background: 'var(--bg-main)',
         border: '2px solid var(--accent)',
         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%)' };
+      const handlePositionMap = {
+        left: Position.Left,
+        right: Position.Right,
+        top: Position.Top,
+        bottom: Position.Bottom
+      };
+      const portHandles = useMemo(() => buildPortHandles(data.ports), [data.ports]);
 
       return (
         <div style={{
@@ -850,14 +953,24 @@
             )}
           </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 }} />
+          {portHandles.map((portHandle) => (
+            <React.Fragment key={portHandle.name}>
+              <Handle
+                type="source"
+                position={handlePositionMap[portHandle.position]}
+                id={portHandle.name}
+                title={portHandle.name}
+                style={{ ...baseHandleStyle, ...portHandle.style, zIndex: 10 }}
+              />
+              <Handle
+                type="target"
+                position={handlePositionMap[portHandle.position]}
+                id={portHandle.name}
+                title={portHandle.name}
+                style={{ ...baseHandleStyle, ...portHandle.style, zIndex: 5 }}
+              />
+            </React.Fragment>
+          ))}
         </div>
       );
     }, (prevProps, nextProps) => {
@@ -868,7 +981,8 @@
         prevProps.data.componentName === nextProps.data.componentName &&
         prevProps.data.category === nextProps.data.category &&
         prevProps.data.rotation === nextProps.data.rotation &&
-        prevProps.data.hideIcon === nextProps.data.hideIcon
+        prevProps.data.hideIcon === nextProps.data.hideIcon &&
+        prevProps.data.ports === nextProps.data.ports
       );
     });
 
@@ -877,6 +991,7 @@
 
     const PortNode = ({ id, data, selected }) => {
       const angle = data.angle ?? 0;
+      const handleId = data.portName || data.componentDisplayName || 'port';
       return (
         <div style={{
           width: 30, height: 30, borderRadius: '50%',
@@ -888,8 +1003,9 @@
           boxShadow: selected ? '0 0 10px rgba(56,189,248,0.4)' : 'none',
           transform: `rotate(${angle}deg)`,
         }}>
-          <span>C</span>
-          <Handle type="source" position={Position.Right} id="port-source" style={{ background: 'var(--accent)', width: 8, height: 8 }} />
+          <span>P</span>
+          <Handle type="source" position={Position.Right} id={handleId} style={{ background: 'var(--accent)', width: 8, height: 8 }} />
+          <Handle type="target" position={Position.Right} id={handleId} style={{ background: 'var(--accent)', width: 8, height: 8 }} />
         </div>
       );
     };
@@ -987,14 +1103,14 @@
 
     const CategoryCard = ({ name, components = [] }) => {
       const componentNames = components.map(component => component.name).filter(Boolean);
-      const firstComponent = componentNames[0] || name;
+      const selectableComponents = Array.from(new Set([FORGE_COMPONENT_LABEL, ...componentNames]));
 
       const handleDragStart = (event) => {
         const dragData = JSON.stringify({
           type: 'category',
           category: name,
-          name: firstComponent,
-          components: componentNames
+          name: FORGE_COMPONENT_LABEL,
+          components: selectableComponents
         });
         event.dataTransfer.setData('application/reactflow', dragData);
         event.dataTransfer.setData('text/plain', dragData);
@@ -1019,6 +1135,10 @@
         const componentName = children.__name__;
         const componentCategory = children.__category__ || 'default';
         const isUserCell = children.__cell__ === true;
+        const isVirtualElement = children.__element__ === true;
+        const elementIconClass = children.__elementType__ === 'anchor'
+          ? 'element-card-icon anchor-icon'
+          : 'element-card-icon port-icon';
         const dragStartPos = useRef(null);
         const dragReady = useRef(false);
 
@@ -1037,9 +1157,21 @@
         };
 
         const handleDragStart = (event) => {
+          if (isVirtualElement) {
+            const dragData = JSON.stringify({
+              name: componentName,
+              type: 'element',
+              elementType: children.__elementType__,
+              ports: children.__ports__ || {}
+            });
+            event.dataTransfer.setData('application/reactflow', dragData);
+            event.dataTransfer.setData('text/plain', dragData);
+            event.dataTransfer.effectAllowed = 'move';
+            return;
+          }
           const dragData = JSON.stringify(
             isUserCell
-              ? { name: componentName, type: 'composite' }
+              ? { name: componentName, type: 'composite', ports: children.__ports__ || {} }
               : { name: componentName, category: componentCategory }
           );
           console.log("DRAG START: Sending data ->", dragData);
@@ -1057,16 +1189,24 @@
 
         return (
           <div
-            className="component-card"
+            className={`component-card ${isUserCell || isVirtualElement ? 'compact-tree-card' : ''}`}
             draggable
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
             onMouseUp={handleMouseUp}
             onDragStart={handleDragStart}
           >
-            <div className="component-card-icon">
-              <IconImg category={componentCategory} />
-            </div>
+            {isVirtualElement && (
+              <div
+                className={elementIconClass}
+                aria-hidden="true"
+              ></div>
+            )}
+            {!isUserCell && !isVirtualElement && (
+              <div className="component-card-icon">
+                <IconImg category={componentCategory} />
+              </div>
+            )}
             <div className="component-card-name" title={name}>
               {name}
             </div>
@@ -1077,6 +1217,7 @@
       const entries = children ? Object.entries(children) : [];
       const hasChildren = entries.length > 0;
       const isComponentGrid = hasChildren && entries.every(([, childData]) => isLibraryComponentLeaf(childData));
+      const isElementComponentGrid = isComponentGrid && entries.every(([, childData]) => childData.__element__ === true);
       const isCategoryGrid = hasChildren && entries.every(([, childData]) => {
         const childEntries = Object.entries(childData || {});
         return childEntries.length > 0 && childEntries.every(([, grandChild]) => isLibraryComponentLeaf(grandChild));
@@ -1091,13 +1232,13 @@
             </span>
           </summary>
           {hasChildren && (
-            isCategoryGrid ? (
+            isCategoryGrid && !isElementComponentGrid ? (
               <div className="category-grid">
                 {entries.map(([childName, childData]) => (
                   <CategoryCard key={childName} name={childName} components={getCategoryComponents(childData)} />
                 ))}
               </div>
-            ) : isComponentGrid ? (
+            ) : isComponentGrid && !isElementComponentGrid ? (
               <div className="category-grid">
                 <CategoryCard name={name} components={getCategoryComponents(children)} />
               </div>
@@ -1154,7 +1295,7 @@
         const cellName = children.__cellName__ || compositeName;
         const tree = children.tree || {};
         const handleDragStart = (event) => {
-          const dragData = JSON.stringify({ name: cellName, type: 'composite' });
+          const dragData = JSON.stringify({ name: cellName, type: 'composite', ports: children.__ports__ || {} });
           event.dataTransfer.setData('application/reactflow', dragData);
           event.dataTransfer.effectAllowed = 'move';
         };
@@ -1324,7 +1465,7 @@
                       );
                     } else {
                       return (
-                        <ProjectTreeNode key={item.name} name={item.name} children={{ __type__: 'composite', __name__: item.name, tree: item.tree || {}, pageId: item.pageId }} onOpenComposite={onOpenComposite} onOpenProject={onOpenProject} onSelectInstance={onSelectInstance} onRenameCanvas={onRenameCanvas} onDeleteCanvas={onDeleteCanvas} />
+                        <ProjectTreeNode key={item.name} name={item.name} children={{ __type__: 'composite', __name__: item.name, tree: item.tree || {}, pageId: item.pageId, __ports__: item.__ports__ || {} }} onOpenComposite={onOpenComposite} onOpenProject={onOpenProject} onSelectInstance={onSelectInstance} onRenameCanvas={onRenameCanvas} onDeleteCanvas={onDeleteCanvas} />
                       );
                     }
                   })
@@ -1377,11 +1518,21 @@
           return;
         }
         const compName = selectedNode?.data?.componentName;
+        if (selectedNode?.data?.elementType) {
+          setComponentData(null);
+          setLoading(false);
+          return;
+        }
         if (!compName) {
           setComponentData(null);
           setLoading(false);
           return;
         }
+        if (isForgeComponent(compName)) {
+          setComponentData(null);
+          setLoading(false);
+          return;
+        }
         if (componentData && componentData.name === compName && componentData.nodeId === nodeId) return;
 
         setLoading(true);
@@ -1389,10 +1540,17 @@
           .then(r => r.json())
           .then(data => {
             setComponentData({ ...data, nodeId: nodeId, componentDisplayName: selectedNode.data.componentDisplayName || data.name });
+            onUpdateNode(nodeId, {
+              data: {
+                ports: data.ports || {},
+                foundry: data.foundry || '',
+                process: data.process || ''
+              }
+            });
             setLoading(false);
           })
           .catch(() => setLoading(false));
-      }, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName]);
+      }, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName, onUpdateNode]);
 
       useEffect(() => {
         if (selectedNode) {
@@ -1411,11 +1569,11 @@
         onUpdateNode(id, { position: { [axis]: val } });
       }, [onUpdateNode]);
 
-      const updateRotation = useCallback((id, value) => {
+      const updateRotation = useCallback((id, value, isPortNode = false) => {
         const val = parseFloat(value);
         if (isNaN(val)) return;
         const clamped = Math.min(180, Math.max(-180, val));
-        const dataField = id === 'page-port' ? { angle: clamped } : { rotation: clamped };
+        const dataField = isPortNode || id === 'page-port' ? { angle: clamped } : { rotation: clamped };
         onUpdateNode(id, { data: dataField });
       }, [onUpdateNode]);
 
@@ -1430,7 +1588,41 @@
         ? selectedNode.data.availableComponents.filter(Boolean)
         : [];
       const availableComponents = Array.from(new Set([...availableComponentsFromNode, selectedComponentName].filter(Boolean)));
-      const canChooseComponent = availableComponentsFromNode.length > 0;
+      const selectedIsVirtualElement = selectedNode?.data?.elementType === 'port' || selectedNode?.data?.elementType === 'anchor';
+      const canChooseComponent = !selectedIsVirtualElement && availableComponentsFromNode.length > 0;
+      const forgeSelected = isForgeComponent(selectedComponentName);
+      const forgeArguments = createForgeArguments(selectedNode?.data?.forgeArguments);
+      const selectedIsPort = selectedNode && (selectedNode.type === 'portNode' || selectedNode.data?.elementType === 'port');
+      const selectedIsAnchor = selectedNode?.data?.elementType === 'anchor';
+
+      const updateForgeArgument = (key, value, type) => {
+        if (!selectedNode) return;
+        let nextValue = value;
+        if (type === 'number') {
+          nextValue = value === '' ? '' : Number(value);
+        } else if (type === 'boolean') {
+          nextValue = Boolean(value);
+        }
+        onUpdateNode(selectedNode.id, {
+          data: {
+            forgeArguments: {
+              ...forgeArguments,
+              [key]: nextValue
+            }
+          }
+        });
+      };
+
+      const updatePortField = (key, value, type = 'text') => {
+        if (!selectedNode) return;
+        const nextValue = type === 'number' ? Number(value || 0) : value;
+        const dataUpdate = { [key]: nextValue };
+        if (key === 'portName') {
+          dataUpdate.componentDisplayName = value || selectedNode.data?.componentDisplayName;
+          dataUpdate.label = value || selectedNode.data?.label;
+        }
+        onUpdateNode(selectedNode.id, { data: dataUpdate });
+      };
 
       const handleStartEditName = () => {
         setTempComponentName(currentComponentDisplayName);
@@ -1513,7 +1705,7 @@
                     onBlur={() => {
                       const val = parseFloat(localRotation);
                       if (!isNaN(val) && selectedNode) {
-                        updateRotation(selectedNode.id, val);
+                        updateRotation(selectedNode.id, val, selectedNode.type === 'portNode' || selectedNode.data?.elementType === 'port');
                         setLocalRotation(val.toFixed(3));
                       } else if (selectedNode) {
                         const rot = selectedNode.id === 'page-port'
@@ -1533,7 +1725,64 @@
             </div>
           </div>
 
-          {selectedNode?.data?.componentName && (
+          {selectedIsPort && (
+            <div className="right-block" style={{ flexShrink: 0 }}>
+              <div className="right-block-header">Port</div>
+              <div className="right-block-body">
+                <label>Name</label>
+                <input
+                  type="text"
+                  value={selectedNode.data?.portName || selectedNode.data?.componentDisplayName || ''}
+                  onChange={(event) => updatePortField('portName', event.target.value)}
+                />
+                <br /><br />
+                <label>Description</label>
+                <input
+                  type="text"
+                  value={selectedNode.data?.description || ''}
+                  onChange={(event) => updatePortField('description', event.target.value)}
+                />
+                <br /><br />
+                <label>Layer</label>
+                <input
+                  type="text"
+                  value={selectedNode.data?.layer || 'WG_CORE'}
+                  onChange={(event) => updatePortField('layer', event.target.value)}
+                />
+                <br /><br />
+                <label>Width</label>
+                <input
+                  type="number"
+                  step="0.1"
+                  value={selectedNode.data?.width ?? 0.5}
+                  onChange={(event) => updatePortField('width', event.target.value, 'number')}
+                />
+              </div>
+            </div>
+          )}
+
+          {selectedIsAnchor && (
+            <div className="right-block" style={{ flexShrink: 0 }}>
+              <div className="right-block-header">Anchor</div>
+              <div className="right-block-body">
+                <label>Name</label>
+                <input
+                  type="text"
+                  value={selectedNode.data?.componentDisplayName || ''}
+                  onChange={(event) => onUpdateNode(selectedNode.id, { data: { componentDisplayName: event.target.value, label: event.target.value } })}
+                />
+                <br /><br />
+                <label>Description</label>
+                <input
+                  type="text"
+                  value={selectedNode.data?.description || ''}
+                  onChange={(event) => onUpdateNode(selectedNode.id, { data: { description: event.target.value } })}
+                />
+              </div>
+            </div>
+          )}
+
+          {selectedNode?.data?.componentName && !selectedNode?.data?.elementType && (
             <div className="right-block" style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
               <div className="right-block-header">Parameters</div>
               <div className="right-block-body" style={{ flex: 1, overflowY: 'auto' }}>
@@ -1544,10 +1793,13 @@
                       value={selectedNode.data.componentName || availableComponents[0]}
                       onChange={(event) => {
                         const componentName = event.target.value;
+                        const forge = isForgeComponent(componentName);
                         onUpdateNode(selectedNode.id, {
                           data: {
                             componentName,
-                            label: componentName
+                            label: componentName,
+                            ports: forge ? {} : selectedNode.data.ports,
+                            forgeArguments: forge ? createForgeArguments(selectedNode.data.forgeArguments) : selectedNode.data.forgeArguments
                           }
                         });
                       }}
@@ -1558,7 +1810,79 @@
                     </select>
                   </div>
                 )}
-                {loading ? (
+                {forgeSelected ? (
+                  <>
+                    <div style={{ marginBottom: '15px' }}>
+                      <label>Instance Name</label>
+                      {editingComponentName ? (
+                        <input
+                          type="text"
+                          value={tempComponentName}
+                          onChange={(e) => setTempComponentName(e.target.value)}
+                          onBlur={handleSaveName}
+                          onKeyDown={handleKeyDown}
+                          autoFocus
+                        />
+                      ) : (
+                        <div
+                          style={{
+                            cursor: 'pointer',
+                            padding: '6px 8px',
+                            backgroundColor: 'var(--input-bg)',
+                            border: '1px solid var(--border)',
+                            borderRadius: '4px',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            wordBreak: 'break-all',
+                            color: 'var(--accent)'
+                          }}
+                          onClick={handleStartEditName}
+                          title="Click to edit"
+                        >
+                          <span>{currentComponentDisplayName || selectedComponentName}</span>
+                          <span style={{ fontSize: '12px', color: 'var(--text-muted)' }}>Edit</span>
+                        </div>
+                      )}
+                    </div>
+
+                    <div style={{ color: 'var(--text-muted)', lineHeight: '1.6', marginBottom: '12px' }}>
+                      <p style={{ margin: '0 0 8px 0', wordBreak: 'break-all' }}>
+                        <strong style={{ color: 'var(--text-main)' }}>Cell:</strong> {FORGE_COMPONENT_TYPE}
+                      </p>
+                      <p style={{ margin: 0 }}>
+                        <strong style={{ color: 'var(--text-main)' }}>Generator:</strong> mxpic_forge
+                      </p>
+                    </div>
+
+                    <p style={{ color: 'var(--text-main)', fontWeight: '500', marginBottom: '8px' }}>Forge Arguments:</p>
+                    <div style={{ display: 'grid', gap: 10 }}>
+                      {Object.entries(forgeArguments).map(([key, value]) => {
+                        const isBoolean = typeof value === 'boolean';
+                        const isNumber = typeof value === 'number';
+                        return (
+                          <label key={key} style={{ display: 'grid', gap: 4 }}>
+                            <span style={{ color: 'var(--text-muted)' }}>{key}</span>
+                            {isBoolean ? (
+                              <input
+                                type="checkbox"
+                                checked={Boolean(value)}
+                                onChange={(event) => updateForgeArgument(key, event.target.checked, 'boolean')}
+                              />
+                            ) : (
+                              <input
+                                type={isNumber ? 'number' : 'text'}
+                                step={isNumber ? 'any' : undefined}
+                                value={value ?? ''}
+                                onChange={(event) => updateForgeArgument(key, event.target.value, isNumber ? 'number' : 'text')}
+                              />
+                            )}
+                          </label>
+                        );
+                      })}
+                    </div>
+                  </>
+                ) : loading ? (
                   <p style={{ color: 'var(--text-muted)' }}>Loading data...</p>
                 ) : componentData ? (
                   <>
@@ -1784,6 +2108,20 @@
         setLogs(prev => [...prev.slice(-80), { time: new Date().toLocaleTimeString(), message }]);
       }, []);
 
+      const componentDataCacheRef = useRef(new Map());
+
+      const loadComponentMetadata = useCallback(async (componentName) => {
+        if (!componentName || isForgeComponent(componentName)) return null;
+        if (componentDataCacheRef.current.has(componentName)) {
+          return componentDataCacheRef.current.get(componentName);
+        }
+        const response = await fetch(`/api/component/${encodeURIComponent(componentName)}`);
+        if (!response.ok) return null;
+        const data = await response.json();
+        componentDataCacheRef.current.set(componentName, data);
+        return data;
+      }, []);
+
       const recordUserAction = useCallback((action, payload = {}) => {
         fetch('/api/logs', {
           method: 'POST',
@@ -1844,8 +2182,9 @@
           if (portNode) {
             const { x, y } = portNode.position;
             const angle = portNode.data?.angle ?? 0;
-            if (x !== p.port.x || y !== p.port.y || angle !== p.port.a) {
-              newPort = { x, y, a: angle };
+            const width = portNode.data?.width ?? p.port.width ?? 0.5;
+            if (x !== p.port.x || y !== p.port.y || angle !== p.port.a || width !== p.port.width) {
+              newPort = { x, y, a: angle, width };
             }
           }
           return { ...p, nodes: newNodes, port: newPort };
@@ -1878,7 +2217,7 @@
           if (nodeId === 'page-port') {
             const portNode = newNodes.find(n => n.id === 'page-port');
             if (portNode) {
-              newPort = { x: portNode.position.x, y: portNode.position.y, a: portNode.data?.angle ?? 0 };
+              newPort = { x: portNode.position.x, y: portNode.position.y, a: portNode.data?.angle ?? 0, width: portNode.data?.width ?? 0.5 };
             }
           }
           return { ...p, nodes: newNodes, port: newPort };
@@ -1887,7 +2226,7 @@
 
       const handleCopy = useCallback(() => {
         if (!activePage) return;
-        const selectedNodes = activePage.nodes.filter(n => n.selected && n.id !== 'page-port');
+        const selectedNodes = activePage.nodes.filter(n => n.selected);
         if (selectedNodes.length > 0) {
           setClipboard({ nodes: JSON.parse(JSON.stringify(selectedNodes)) });
         }
@@ -1895,7 +2234,7 @@
 
       const handleCut = useCallback(() => {
         if (!activePage) return;
-        const selectedNodes = activePage.nodes.filter(n => n.selected && n.id !== 'page-port');
+        const selectedNodes = activePage.nodes.filter(n => n.selected);
         if (selectedNodes.length > 0) {
           setClipboard({ nodes: JSON.parse(JSON.stringify(selectedNodes)) });
           const selectedNodeIds = new Set(selectedNodes.map(n => n.id));
@@ -1907,13 +2246,25 @@
 
       const handlePaste = useCallback(() => {
         if (!activePage || clipboard.nodes.length === 0) return;
-        const newNodes = clipboard.nodes.map(node => ({
-          ...node,
-          id: Date.now().toString() + Math.random().toString(36).substr(2, 5),
-          position: { x: node.position.x + 20, y: node.position.y + 20 },
-          selected: true,
-          data: { ...node.data, componentDisplayName: generateComponentDisplayName() }
-        }));
+        const newNodes = clipboard.nodes.map(node => {
+          const copiedName = generateComponentDisplayName();
+          const copiedData = {
+            ...node.data,
+            componentDisplayName: copiedName
+          };
+          if (node.type === 'portNode' || node.data?.elementType === 'port') {
+            copiedData.portName = copiedName;
+            copiedData.label = copiedName;
+            copiedData.elementType = 'port';
+          }
+          return {
+            ...node,
+            id: Date.now().toString() + Math.random().toString(36).substr(2, 5),
+            position: { x: node.position.x + 20, y: node.position.y + 20 },
+            selected: true,
+            data: copiedData
+          };
+        });
         setPages(prev => prev.map(p => {
           if (p.id !== activePage.id) return p;
           return { ...p, nodes: p.nodes.map(n => ({ ...n, selected: false })).concat(newNodes) };
@@ -1923,7 +2274,7 @@
 
       const handleDelete = useCallback(() => {
         if (!activePage) return;
-        const selectedNodes = activePage.nodes.filter(n => n.selected && n.id !== 'page-port');
+        const selectedNodes = activePage.nodes.filter(n => n.selected);
         const selectedNodeIds = new Set(selectedNodes.map(n => n.id));
         if (selectedNodeIds.size > 0) {
           const newNodes = activePage.nodes.filter(n => !selectedNodeIds.has(n.id));
@@ -2032,11 +2383,13 @@
             for (const [instName, inst] of Object.entries(doc.instances)) {
               const compPath = inst.component || '';
               const compName = compPath.split('/').pop();
+              const instIsForge = isForgeComponent(compPath) || isForgeComponent(compName);
+              const displayCompName = instIsForge ? FORGE_COMPONENT_LABEL : compName;
               let category = '';
 
-              if (!isProject && compName && library) {
+              if (!isProject && displayCompName && library && !instIsForge) {
                 const walk = (obj) => {
-                  if (obj?.__type__ === 'component' && obj.__name__ === compName) {
+                  if (obj?.__type__ === 'component' && obj.__name__ === displayCompName) {
                     category = obj.__category__ || '';
                     return true;
                   }
@@ -2059,12 +2412,15 @@
                   y: parseFloat(inst.y) || 0,
                 },
                 data: {
-                  label: isProject ? instName : compName,
-                  componentName: isProject ? instName : compName,
+                  label: isProject ? instName : displayCompName,
+                  componentName: isProject ? instName : displayCompName,
                   category: isProject ? '' : category,
                   rotation: parseFloat(inst.rotation) || 0,
                   componentDisplayName: instName,
                   type: isProject ? 'composite' : undefined,
+                  availableComponents: instIsForge ? [FORGE_COMPONENT_LABEL] : undefined,
+                  ports: instIsForge ? {} : undefined,
+                  forgeArguments: instIsForge ? createForgeArguments(inst.settings) : undefined,
                 },
               });
             }
@@ -2097,6 +2453,9 @@
 
             const newPageId = Date.now().toString() + Math.random().toString(36).substr(2, 5);
             const newPageName = file.name.replace(/\.(yaml|yml)$/i, '');
+            const importedPort = Array.isArray(doc.ports) && doc.ports[0]
+              ? { x: Number(doc.ports[0].x || 0), y: Number(doc.ports[0].y || 0), a: Number(doc.ports[0].angle ?? doc.ports[0].a ?? 0), width: Number(doc.ports[0].width || 0.5) }
+              : { x: 50, y: 150, a: 0, width: 0.5 };
             const newPage = {
               id: newPageId,
               name: newPageName,
@@ -2105,8 +2464,8 @@
                 {
                   id: 'page-port',
                   type: 'portNode',
-                  position: { x: 50, y: 150 },
-                  data: { label: 'Port', angle: 0 },
+                  position: { x: importedPort.x, y: importedPort.y },
+                  data: { label: 'port', componentDisplayName: 'port', portName: 'port', elementType: 'port', angle: importedPort.a, width: importedPort.width || 0.5, layer: 'WG_CORE', description: '' },
                   draggable: true,
                   selectable: true,
                   deletable: false,
@@ -2114,7 +2473,7 @@
                 ...newNodes,
               ],
               edges: newEdges,
-              port: { x: 50, y: 150, a: 0 },
+              port: importedPort,
             };
 
             setPages(prev => [...prev, newPage]);
@@ -2136,6 +2495,7 @@
                 for (const inst of Object.values(doc.instances)) {
                   const compPath = inst.component || '';
                   const compName = compPath.split('/').pop();
+                  if (isForgeComponent(compPath) || isForgeComponent(compName)) continue;
                   if (!compName) continue;
                   const fullPath = findComponentPath(library, compName);
                   if (fullPath.length === 0) continue;
@@ -2212,13 +2572,17 @@
 
         const pageFromYaml = (cellName, content) => {
           const doc = jsyaml.load(content) || {};
+          const firstPort = Array.isArray(doc.ports) ? doc.ports[0] : null;
+          const pagePort = firstPort
+            ? { x: Number(firstPort.x || 0), y: Number(firstPort.y || 0), a: Number(firstPort.angle ?? firstPort.a ?? 0), width: Number(firstPort.width || 0.5) }
+            : { x: 50, y: 150, a: 0, width: 0.5 };
           const nodeNameMap = {};
           const nodes = [
             {
               id: 'page-port',
               type: 'portNode',
-              position: { x: 50, y: 150 },
-              data: { label: 'Port', angle: 0 },
+              position: { x: pagePort.x, y: pagePort.y },
+              data: { label: 'port', componentDisplayName: 'port', portName: 'port', elementType: 'port', angle: pagePort.a, width: pagePort.width || 0.5, layer: 'WG_CORE', description: '' },
               draggable: true,
               selectable: true,
               deletable: false,
@@ -2229,6 +2593,8 @@
           Object.entries(doc.instances || {}).forEach(([instName, inst]) => {
             const compPath = inst.component || '';
             const compName = compPath.split('/').pop();
+            const instIsForge = isForgeComponent(compPath) || isForgeComponent(compName);
+            const displayCompName = instIsForge ? FORGE_COMPONENT_LABEL : compName;
             const nodeId = `node-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
             nodeNameMap[instName] = nodeId;
             nodes.push({
@@ -2239,11 +2605,14 @@
                 y: parseFloat(inst.y) || 0,
               },
               data: {
-                label: compName,
-                componentName: compName,
-                category: findCategory(compName),
+                label: displayCompName,
+                componentName: displayCompName,
+                category: instIsForge ? '' : findCategory(displayCompName),
                 rotation: parseFloat(inst.rotation) || 0,
                 componentDisplayName: instName,
+                availableComponents: instIsForge ? [FORGE_COMPONENT_LABEL] : undefined,
+                ports: instIsForge ? {} : undefined,
+                forgeArguments: instIsForge ? createForgeArguments(inst.settings) : undefined,
               },
             });
           });
@@ -2276,7 +2645,7 @@
             type: doc.type === 'project' ? 'project' : 'composite',
             nodes,
             edges,
-            port: { x: 50, y: 150, a: 0 }
+            port: pagePort
           };
         };
 
@@ -2323,6 +2692,72 @@
         syncAllCompositeTrees(pages, library);
       }, [pages, library, syncAllCompositeTrees]);
 
+      useEffect(() => {
+        const compositePages = new Map(pages.filter(page => page.type === 'composite').map(page => [page.name, page]));
+        const portUpdates = new Map();
+        pages.forEach(page => {
+          page.nodes.forEach(node => {
+            const compPage = compositePages.get(node.data?.componentName);
+            if (!compPage) return;
+            const nextPorts = buildPageComponentPorts(compPage.port, compPage.nodes);
+            if (JSON.stringify(node.data?.ports || {}) !== JSON.stringify(nextPorts)) {
+              portUpdates.set(node.id, nextPorts);
+            }
+          });
+        });
+        if (portUpdates.size === 0) return;
+        setPages(prev => prev.map(page => ({
+          ...page,
+          nodes: page.nodes.map(node => (
+            portUpdates.has(node.id)
+              ? { ...node, data: { ...node.data, ports: portUpdates.get(node.id) } }
+              : node
+          ))
+        })));
+      }, [pages]);
+
+      useEffect(() => {
+        const missingPortNodes = [];
+        pages.forEach(page => {
+          page.nodes.forEach(node => {
+            const componentName = node.data?.componentName;
+            if (node.data?.elementType || !componentName || isForgeComponent(componentName) || node.data?.type === 'composite' || node.data?.ports) return;
+            missingPortNodes.push({ pageId: page.id, nodeId: node.id, componentName });
+          });
+        });
+        if (missingPortNodes.length === 0) return;
+
+        let cancelled = false;
+        Promise.all(missingPortNodes.map(async item => ({
+          ...item,
+          metadata: await loadComponentMetadata(item.componentName)
+        }))).then(results => {
+          if (cancelled) return;
+          const metadataByNode = new Map(results.filter(item => item.metadata).map(item => [item.nodeId, item.metadata]));
+          if (metadataByNode.size === 0) return;
+          setPages(prev => prev.map(page => ({
+            ...page,
+            nodes: page.nodes.map(node => {
+              const metadata = metadataByNode.get(node.id);
+              if (!metadata) return node;
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  ports: metadata.ports || {},
+                  foundry: metadata.foundry || '',
+                  process: metadata.process || ''
+                }
+              };
+            })
+          })));
+        });
+
+        return () => {
+          cancelled = true;
+        };
+      }, [pages, loadComponentMetadata]);
+
       const selectedNode = useMemo(() => currentNodes.find(n => n.selected), [currentNodes]);
       const openTabs = useMemo(() => pages.filter(page => !page.isClosed), [pages]);
 
@@ -2390,7 +2825,7 @@
                 id: 'page-port',
                 type: 'portNode',
                 position: { x: 50, y: 150 },
-                data: { label: 'Port', angle: 0 },
+                data: { label: 'port', componentDisplayName: 'port', portName: 'port', elementType: 'port', angle: 0, width: 0.5, layer: 'WG_CORE', description: '' },
                 draggable: true,
                 selectable: true,
                 deletable: false,
@@ -2479,7 +2914,7 @@
               id: 'page-port',
               type: 'portNode',
               position: { x: 50, y: 150 },
-              data: { label: 'Port', angle: 0 },
+              data: { label: 'port', componentDisplayName: 'port', portName: 'port', elementType: 'port', angle: 0, width: 0.5, layer: 'WG_CORE', description: '' },
               draggable: true,
               selectable: true,
               deletable: false,
@@ -2575,7 +3010,7 @@
               id: portNodeId,
               type: 'portNode',
               position: { x: newPort.x, y: newPort.y },
-              data: { label: 'Port', angle: newPort.a },
+              data: { label: 'port', componentDisplayName: 'port', portName: 'port', elementType: 'port', angle: newPort.a, width: newPort.width || 0.5, layer: 'WG_CORE', description: '' },
               draggable: true,
               selectable: true,
               deletable: false,
@@ -2613,7 +3048,8 @@
               componentDisplayName: parsedData.name,
               type: 'composite',
               category: null,
-              rotation: 0
+              rotation: 0,
+              ports: parsedData.ports || {}
             }
           };
           setPages(prev => prev.map(p => {
@@ -2657,7 +3093,8 @@
               componentDisplayName: parsedData.name,
               type: 'composite',
               category: null,
-              rotation: 0
+              rotation: 0,
+              ports: parsedData.ports || {}
             }
           };
           setPages(prev => prev.map(p => {
@@ -2687,6 +3124,55 @@
           return;
         }
         const position = reactFlowInstance.screenToFlowPosition({ x: event.clientX, y: event.clientY });
+        if (parsedData.type === 'element') {
+          const elementName = parsedData.elementType === 'anchor' ? `anchor_${componentCounterRef.current}` : `port_${componentCounterRef.current}`;
+          componentCounterRef.current += 1;
+          const isPort = parsedData.elementType === 'port';
+          const newNode = isPort
+            ? {
+                id: Date.now().toString(),
+                type: 'portNode',
+                position,
+                data: {
+                  label: elementName,
+                  componentDisplayName: elementName,
+                  portName: elementName,
+                  elementType: 'port',
+                  angle: 0,
+                  width: 0.5,
+                  layer: 'WG_CORE',
+                  description: ''
+                },
+              }
+            : {
+                id: Date.now().toString(),
+                type: 'rotatableNode',
+                position,
+                data: {
+                  label: elementName,
+                  componentName: 'Anchor',
+                  componentDisplayName: elementName,
+                  elementType: 'anchor',
+                  category: null,
+                  rotation: 0,
+                  width: 0.5,
+                  layer: 'WG_CORE',
+                  description: '',
+                  hideIcon: true,
+                  ports: buildElementPorts('anchor')
+                },
+              };
+          setPages(prev => prev.map(p => {
+            if (p.id !== activePageId) return p;
+            return { ...p, nodes: p.nodes.concat(newNode) };
+          }));
+          recordUserAction('element.create', {
+            project: currentProjectName,
+            cell: activePage?.name,
+            detail: { element: parsedData.elementType, name: elementName }
+          });
+          return;
+        }
         if (parsedData.type === 'category') {
           const availableComponents = Array.isArray(parsedData.components)
             ? parsedData.components
@@ -2698,6 +3184,7 @@
             addLog('Skipped category placement: no components were found in this library category.');
             return;
           }
+          const selectedIsForge = isForgeComponent(selectedComponent);
           const componentDisplayName = generateComponentDisplayName();
           const newNode = {
             id: Date.now().toString(),
@@ -2710,7 +3197,9 @@
               libraryCategory: parsedData.category || 'default',
               category: parsedData.category || 'default',
               rotation: 0,
-              componentDisplayName: componentDisplayName
+              componentDisplayName: componentDisplayName,
+              ports: selectedIsForge ? {} : undefined,
+              forgeArguments: selectedIsForge ? createForgeArguments() : undefined
             },
           };
           setPages(prev => prev.map(p => {
@@ -2829,7 +3318,8 @@
                   __name__: instanceName,
                   __cellName__: componentName,
                   tree: compositeTrees[componentName] || {},
-                  pageId: compPage.id
+                  pageId: compPage.id,
+                  __ports__: buildPageComponentPorts(compPage.port, compPage.nodes)
                 };
               }
               return {
@@ -2849,7 +3339,8 @@
                 __name__: name,
                 __cellName__: name,
                 tree: compositeTrees[name] || {},
-                pageId: compPage ? compPage.id : name
+                pageId: compPage ? compPage.id : name,
+                __ports__: compPage ? buildPageComponentPorts(compPage.port, compPage.nodes) : {}
               };
             });
           items.push({
@@ -2859,11 +3350,13 @@
           });
         });
         standaloneComposites.forEach(name => {
+          const compPage = pages.find(p => p.name === name && p.type === 'composite');
           items.push({
             type: 'standaloneComposite',
             name: name,
             tree: compositeTrees[name] || {},
-            pageId: pages.find(p => p.name === name && p.type === 'composite')?.id || name
+            pageId: compPage?.id || name,
+            __ports__: buildPageComponentPorts(compPage?.port, compPage?.nodes)
           });
         });
         return items;
@@ -2878,11 +3371,30 @@
               __type__: 'component',
               __name__: page.name,
               __category__: 'composite',
-              __cell__: true
+              __cell__: true,
+              __ports__: buildPageComponentPorts(page.port, page.nodes)
             };
           });
         return {
           ...cellEntries,
+          Elements: {
+            Port: {
+              __type__: 'component',
+              __name__: 'Port',
+              __category__: 'element',
+              __element__: true,
+              __elementType__: 'port',
+              __ports__: ELEMENT_COMPONENTS.Port.ports
+            },
+            Anchor: {
+              __type__: 'component',
+              __name__: 'Anchor',
+              __category__: 'element',
+              __element__: true,
+              __elementType__: 'anchor',
+              __ports__: ELEMENT_COMPONENTS.Anchor.ports
+            }
+          },
           ...(library || {})
         };
       }, [pages, library]);
@@ -2927,75 +3439,28 @@ type: ${activePage.type === 'project' ? 'project' : 'composite'}
 version: "1.0.0"
 
 # 1. External Ports (How this cell connects to the outside world)
-ports:
-- name: in0
-  layer: WG_CORE
-  x: 0.0
-  y: 0.0
-  angle: 180.0
-  width: 0.5
-- name: out0
-  layer: WG_CORE
-  x: 100.0
-  y: 10.0
-  angle: 0.0
-  width: 0.5
-- name: out1
-  layer: WG_CORE
-  x: 100.0
-  y: -10.0
-  angle: 0.0
-  width: 0.5
+${buildCanvasPortsYaml(activePage.nodes)}
 
 # 2. Instances (The sub-components dropped onto this canvas)
 instances:`;
 
-        let instancesBlock = '';
-        if (activePage.type === 'project') {
-          const compositeNodes = activePage.nodes.filter(n => n.type === 'rotatableNode' && n.data?.type === 'composite');
-          instancesBlock = compositeNodes.map(n => {
-            const instanceName = n.data.componentDisplayName || n.data.componentName;
-            const compName = n.data.componentName || '';
-            return `  ${instanceName}:
-    component: ${compName}
-    x: ${n.position.x.toFixed(1)}
-    y: ${n.position.y.toFixed(1)}
-    rotation: ${(n.data.rotation || 0).toFixed(1)}
-    mirror: false
-    settings:
-    length:`;
-          }).join('\n\n');
-        } else {
-          const nodes = activePage.nodes.filter(n => n.id !== 'page-port');
-          instancesBlock = nodes.map(n => {
-            const data = n.data;
-            const instanceName = data.componentDisplayName || n.id;
-            const compName = data.componentName || '';
-            let componentPath = compName;
-            if (library && compName) {
-              const pathArr = findComponentPath(library, compName);
-              if (pathArr.length > 0) {
-                componentPath = pathArr.join('/');
-              }
-            }
-            const x = n.position.x.toFixed(1);
-            const y = n.position.y.toFixed(1);
-            const rotation = (data.rotation || 0).toFixed(1);
-            return `  ${instanceName}:
-    component: ${componentPath}
-    x: ${x}
-    y: ${y}
-    rotation: ${rotation}
-    mirror: false
-    settings:
-    length: ${compName.includes('MMI') ? '25.5' : ''}`;
-          }).join('\n\n');
-        }
+        const resolveComponentPath = (compName) => {
+          if (!library || !compName || isForgeComponent(compName)) return compName;
+          const pathArr = findComponentPath(library, compName);
+          return pathArr.length > 0 ? pathArr.join('/') : compName;
+        };
+        const instancesBlock = buildInstancesYaml({
+          nodes: activePage.nodes,
+          resolveComponentPath
+        });
 
         const bundlesBlock = buildBundlesYaml(activePage);
+        const elementsBlock = buildElementsYaml(activePage.nodes);
         const yamlContent = `${header}
 ${instancesBlock}
 
+${elementsBlock}
+
 ${bundlesBlock}`;
 
         // send to backend      
diff --git a/tests/canvas-generation-wiring.test.js b/tests/canvas-generation-wiring.test.js
new file mode 100644
index 0000000..6dac04b
--- /dev/null
+++ b/tests/canvas-generation-wiring.test.js
@@ -0,0 +1,55 @@
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+const canvasHtml = fs.readFileSync(path.join(root, 'frontend', 'canvas.html'), 'utf8');
+
+assert(
+  canvasHtml.includes('buildInstancesYaml'),
+  'canvas.html should use buildInstancesYaml for layout instance export'
+);
+assert(
+  canvasHtml.includes('buildCanvasPortsYaml(activePage.nodes)'),
+  'canvas.html should export ports from active canvas port nodes'
+);
+assert(
+  canvasHtml.includes('buildPageComponentPorts(page.port, page.nodes)'),
+  'canvas library entries should expose ports from their page-port data'
+);
+assert(
+  !canvasHtml.includes("activePage.nodes.filter(n => n.type === 'rotatableNode' && n.data?.type === 'composite')"),
+  'project layout export should not filter out regular PDK instances'
+);
+assert(
+  canvasHtml.includes('Elements: {'),
+  'library tree should add an Elements folder'
+);
+assert(
+  canvasHtml.includes("__name__: 'Port'") && canvasHtml.includes("__name__: 'Anchor'"),
+  'Elements folder should expose Port and Anchor as separate virtual components'
+);
+assert(
+  canvasHtml.includes('const isElementComponentGrid = isComponentGrid && entries.every(([, childData]) => childData.__element__ === true);'),
+  'Elements folder should bypass category-card grouping and render separate virtual component leaves'
+);
+assert(
+  canvasHtml.includes('element-card-icon port-icon') && canvasHtml.includes('element-card-icon anchor-icon'),
+  'virtual element cards should render distinct generated icons for Port and Anchor'
+);
+assert(
+  canvasHtml.includes('const selectedIsVirtualElement = selectedNode?.data?.elementType ==='),
+  'right inspector should classify virtual elements separately from PDK/forge components'
+);
+assert(
+  canvasHtml.includes('const canChooseComponent = !selectedIsVirtualElement && availableComponentsFromNode.length > 0;'),
+  'virtual elements should not show PDK or generate_with_forge component selection'
+);
+assert(
+  canvasHtml.includes('buildElementsYaml(activePage.nodes)'),
+  'canvas layout export should include an elements section'
+);
+assert(
+  !canvasHtml.includes("activePage.nodes.filter(n => n.selected && n.id !== 'page-port')"),
+  'copy/delete should not exclude port nodes'
+);
diff --git a/tests/canvas-helpers.test.js b/tests/canvas-helpers.test.js
new file mode 100644
index 0000000..fd735d0
--- /dev/null
+++ b/tests/canvas-helpers.test.js
@@ -0,0 +1,147 @@
+const assert = require('assert');
+const helpers = require('../frontend/canvas-helpers.js');
+
+const handles = helpers.buildPortHandles({
+  a0: { x: 0, y: 0, a: 180 },
+  b0: { x: 0, y: 0, a: 0 },
+  a1: { x: -91.7, y: 4.475, a: 180 },
+  a2: { x: -91.7, y: -4.475, a: 180 },
+  b1: { x: 91.7, y: 4.475, a: 0 },
+  b2: { x: 91.7, y: -4.475, a: 0 },
+  ep2a: { x: -37.8, y: -20, a: 270 },
+  ep2b: { x: -37.8, y: 20, a: 90 },
+});
+
+assert.deepStrictEqual(handles.map(handle => handle.name), ['a1', 'a2', 'b1', 'b2', 'ep2b', 'ep2a']);
+assert.deepStrictEqual(handles.filter(handle => handle.position === 'left').map(handle => handle.name), ['a1', 'a2']);
+assert.deepStrictEqual(handles.filter(handle => handle.position === 'right').map(handle => handle.name), ['b1', 'b2']);
+assert.deepStrictEqual(handles.find(handle => handle.name === 'ep2b').position, 'top');
+assert.deepStrictEqual(handles.find(handle => handle.name === 'ep2a').position, 'bottom');
+assert.strictEqual(handles.find(handle => handle.name === 'a1').style.top, '15%');
+assert.strictEqual(handles.find(handle => handle.name === 'a2').style.top, '85%');
+assert.strictEqual(handles.find(handle => handle.name === 'ep2b').style.left, '50%');
+
+const args = helpers.createForgeArguments();
+assert(Object.keys(args).length >= 10);
+assert.strictEqual(helpers.isForgeComponent('generate with mxpic_forge'), true);
+
+const yaml = helpers.buildInstanceYaml({
+  instanceName: 'component_1',
+  componentName: 'generate with mxpic_forge',
+  componentPath: 'ignored/path',
+  position: { x: 12.34, y: -5 },
+  rotation: 90,
+  forgeArguments: { function_name: 'mmi1x2', length: 25.5, include_heater: true }
+});
+
+assert(yaml.includes('component: generate_with_forge'));
+assert(yaml.includes('function_name: "mmi1x2"'));
+assert(yaml.includes('length: 25.5'));
+assert(yaml.includes('include_heater: true'));
+
+const projectInstancesYaml = helpers.buildInstancesYaml({
+  nodes: [
+    {
+      id: 'node-1',
+      type: 'rotatableNode',
+      position: { x: 10, y: 20 },
+      data: {
+        componentDisplayName: 'component_1',
+        componentName: 'PDK_A',
+        rotation: 0
+      }
+    },
+    {
+      id: 'node-2',
+      type: 'rotatableNode',
+      position: { x: 30, y: 40 },
+      data: {
+        componentDisplayName: 'cell_1',
+        componentName: 'canvas_1',
+        type: 'composite',
+        rotation: 90
+      }
+    }
+  ],
+  resolveComponentPath: name => name === 'PDK_A' ? 'foundry/path/PDK_A' : name
+});
+
+assert(projectInstancesYaml.includes('component_1:'));
+assert(projectInstancesYaml.includes('component: foundry/path/PDK_A'));
+assert(projectInstancesYaml.includes('cell_1:'));
+assert(projectInstancesYaml.includes('component: canvas_1'));
+
+const pagePortsYaml = helpers.buildPortsYaml({ x: 50, y: 150, a: 90 });
+assert(pagePortsYaml.includes('- name: port'));
+assert(pagePortsYaml.includes('x: 50.0'));
+assert(pagePortsYaml.includes('y: 150.0'));
+assert(pagePortsYaml.includes('angle: 90.0'));
+
+const componentPorts = helpers.buildPageComponentPorts({ x: 12, y: -6, a: 180 });
+assert.deepStrictEqual(componentPorts, {
+  port: { x: 12, y: -6, a: 180, width: 0.5 }
+});
+
+const elementNodes = [
+  {
+    id: 'port-1',
+    type: 'portNode',
+    position: { x: 10, y: 20 },
+    data: {
+      componentDisplayName: 'in0',
+      elementType: 'port',
+      angle: 180,
+      width: 0.7,
+      layer: 'WG_CORE',
+      description: 'input port'
+    }
+  },
+  {
+    id: 'anchor-1',
+    type: 'rotatableNode',
+    position: { x: 30, y: 40 },
+    data: {
+      componentDisplayName: 'anchor_1',
+      componentName: 'Anchor',
+      elementType: 'anchor',
+      rotation: 0
+    }
+  },
+  {
+    id: 'mmi-1',
+    type: 'rotatableNode',
+    position: { x: 50, y: 60 },
+    data: {
+      componentDisplayName: 'component_1',
+      componentName: 'MMI',
+      rotation: 0
+    }
+  }
+];
+
+assert.deepStrictEqual(helpers.buildElementPorts('port', { angle: 90, width: 0.8 }), {
+  port: { x: 0, y: 0, a: 90, width: 0.8 }
+});
+assert.deepStrictEqual(Object.keys(helpers.buildElementPorts('anchor')), ['left', 'right']);
+
+const canvasPortsYaml = helpers.buildCanvasPortsYaml(elementNodes);
+assert(canvasPortsYaml.includes('name: in0'));
+assert(canvasPortsYaml.includes('description: "input port"'));
+assert(canvasPortsYaml.includes('width: 0.7'));
+
+const elementsYaml = helpers.buildElementsYaml(elementNodes);
+assert(elementsYaml.includes('in0:'));
+assert(elementsYaml.includes('type: port'));
+assert(elementsYaml.includes('anchor_1:'));
+assert(elementsYaml.includes('type: anchor'));
+
+const instancesWithoutElements = helpers.buildInstancesYaml({
+  nodes: elementNodes,
+  resolveComponentPath: name => name
+});
+assert(!instancesWithoutElements.includes('anchor_1:'));
+assert(!instancesWithoutElements.includes('in0:'));
+assert(instancesWithoutElements.includes('component_1:'));
+
+const multiPortComponentPorts = helpers.buildPageComponentPorts(null, elementNodes);
+assert.deepStrictEqual(multiPortComponentPorts.in0, { x: 10, y: 20, a: 180, width: 0.7 });
diff --git a/tests/canvas-static-route.test.js b/tests/canvas-static-route.test.js
new file mode 100644
index 0000000..3d01122
--- /dev/null
+++ b/tests/canvas-static-route.test.js
@@ -0,0 +1,29 @@
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+const canvasHtml = fs.readFileSync(path.join(root, 'frontend', 'canvas.html'), 'utf8');
+const serverPy = fs.readFileSync(path.join(root, 'backend', 'server.py'), 'utf8');
+
+assert(
+  canvasHtml.includes('src="/canvas-helpers.js"'),
+  'canvas.html should request the canvas helper script from /canvas-helpers.js'
+);
+assert(
+  serverPy.includes("@app.route('/canvas-helpers.js')"),
+  'backend/server.py should serve /canvas-helpers.js'
+);
+assert(
+  serverPy.includes("send_from_directory(FRONTEND_DIR, 'canvas-helpers.js')") ||
+    serverPy.includes('send_from_directory(FRONTEND_DIR, "canvas-helpers.js")'),
+  'the /canvas-helpers.js route should serve frontend/canvas-helpers.js'
+);
+assert(
+  serverPy.includes('def no_cache_response(response):'),
+  'canvas assets should use an explicit no-cache response helper'
+);
+assert(
+  serverPy.includes('Cache-Control') && serverPy.includes('no-store'),
+  'canvas routes should prevent stale browser caches while the editor is changing'
+);