Merge pull request 'Merge pull request 'requriesments of .yml for bridge written' (#2) from qinyue_main into develope' (#7) from qinyue_main into develope

Reviewed-on: #7

.gitignore

@@ -0,0 +1,3 @@
+*/__pycache__/
+__pycache__/
+*.pyc

backend/server.py

@@ -1,6 +1,6 @@
 # -----------------------------------------------------------------------------
 # Description: Flask backend API server for authentication, project management, PDK library access, layout preview, and GDS build endpoints.
-# Inside functions: no_cache_response, login_required_json, wrapper, request_ip, record_action, safe_name, user_layout_root, project_root, cell_file_path, cell_svg_path, cell_routes_path, write_route_points_sidecar, project_gds_path, technology_manifest_path_for_project, current_pdk_root, scoped_pdk_root_for_project, pdk_root_for_request_project, project_meta_path, read_project_meta
+# Inside functions: no_cache_response, login_required_json, wrapper, request_ip, record_action, safe_name, user_layout_root, project_root, cell_file_path, cell_svg_path, file_version, cell_routes_path, write_route_points_sidecar, project_gds_path, technology_manifest_path_for_project, current_pdk_root, scoped_pdk_root_for_project, pdk_root_for_request_project, project_meta_path, read_project_meta
 # Developer : Qin Yue @ 2026
 # Organization : OptiHK Limited
 # -----------------------------------------------------------------------------
@@ -9,6 +9,7 @@ import os
 import re
 import shutil
 import json
+import uuid
 import yaml
 from collections import OrderedDict
 from functools import wraps
@@ -135,6 +136,12 @@ def cell_svg_path(project_name, cell_name):
     return os.path.join(project_root(project_name), f"{safe_name(cell_name, 'canvas_1')}.svg")
 
 
+def file_version(path):
+    """Return a cache-busting version token for a completed file."""
+    stat = os.stat(path)
+    return f"{stat.st_mtime_ns}-{stat.st_size}"
+
+
 def cell_routes_path(project_name, cell_name):
     """Return the route sidecar JSON path for a project cell."""
     return os.path.join(project_root(project_name), f"{safe_name(cell_name, 'canvas_1')}.routes.yml")
@@ -739,24 +746,31 @@ def save_layout():
         write_route_points_sidecar(content, cell_routes_path(project, cell))
 
         svg_path = None
+        svg_version = None
         preview_status = "not_requested"
         preview_error = None
         if create_preview:
             svg_path = cell_svg_path(project, cell)
+            temp_svg_path = f"{svg_path}.building-{os.getpid()}-{uuid.uuid4().hex}.svg"
             try:
                 create_routed_layout_svg(
                     content,
-                    svg_path,
+                    temp_svg_path,
                     pdk_root=current_pdk_root(),
                     project_dir=project_root(project),
                     technology_manifest_path=technology_manifest_path_for_project(project),
                     prefer_full_gds=prefer_full_gds_for_session(session),
                 )
+                os.replace(temp_svg_path, svg_path)
+                svg_version = file_version(svg_path)
                 preview_status = "generated"
             except RouterStackUnavailable as e:
                 preview_status = "skipped"
                 preview_error = str(e)
                 svg_path = None
+            finally:
+                if os.path.exists(temp_svg_path):
+                    os.remove(temp_svg_path)
 
         record_action('layout.save', project=project, cell=cell, detail={"bytes": len(content), "svg": svg_path})
         return jsonify({
@@ -765,7 +779,9 @@ def save_layout():
             "cell": cell,
             "path": save_path,
             "svg_path": svg_path,
-            "svg_url": url_for('get_layout_svg', project_name=project, cell_name=cell) if svg_path else None,
+            "svg_url": url_for('get_layout_svg', project_name=project, cell_name=cell, v=svg_version) if svg_path else None,
+            "svg_ready": bool(svg_path and svg_version),
+            "svg_version": svg_version,
             "preview_status": preview_status,
             "preview_error": preview_error
         }), 200

database/admin/layout/mxpic_project_1/canvas_1.yml

@@ -0,0 +1,211 @@
+# =============================================
+# mxPIC Cell/Project Definition File
+# =============================================
+schema_version: "2.0.0"
+kind: cell
+coordinate_system: gds_y_up
+canvas_size:
+  width: 500
+  height: 600
+project: mxpic_project_1
+name: canvas_1
+type: composite
+version: "1.0.0"
+
+# 1. External Ports (How this cell connects to the outside world)
+pins:
+- name: port_io1
+  layer: WG_CORE
+  element: port
+  pin: io1
+  x: 40.0
+  y: -90.0
+  angle: 180.0
+  width: 0.5
+- name: port_1_io1
+  layer: WG_CORE
+  element: port_1
+  pin: io1
+  x: 410.0
+  y: -35.0
+  angle: 0.0
+  width: 0.5
+- name: port_1_io2
+  layer: WG_CORE
+  element: port_1
+  pin: io2
+  x: 410.0
+  y: -25.0
+  angle: 0.0
+  width: 0.5
+- name: port_2_io1
+  layer: WG_CORE
+  element: port_2
+  pin: io1
+  x: 390.0
+  y: -215.0
+  angle: 0.0
+  width: 0.5
+- name: port_2_io2
+  layer: WG_CORE
+  element: port_2
+  pin: io2
+  x: 390.0
+  y: -205.0
+  angle: 0.0
+  width: 0.5
+
+# 2. Instances (The sub-components dropped onto this canvas)
+instances:
+  MMI_1:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/multimode_interferometers/1x2MMI_1310nm_TE_Silterra_202603_ZKY_v2
+    x: 130.0
+    y: -90.0
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+  MMI_2:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/multimode_interferometers/1x2MMI_1310nm_TE_Silterra_202603_ZKY_v2
+    x: 280.0
+    y: -30.0
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+  MMI_3:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/multimode_interferometers/1x2MMI_1310nm_TE_Silterra_202603_ZKY_v2
+    x: 320.1
+    y: -144.7
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+elements:
+  port:
+    type: port
+    x: 40.0
+    y: -90.0
+    angle: 180.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_io1
+        role: io1
+  port:
+    type: port
+    x: 40.0
+    y: -90.0
+    angle: 0.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_io1
+        role: io1
+  port_1:
+    type: port
+    x: 410.0
+    y: -30.0
+    angle: 180.0
+    pin_number: 2
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_1_io1
+        role: io1
+      - name: port_1_io2
+        role: io2
+  port_2:
+    type: port
+    x: 390.0
+    y: -210.0
+    angle: 180.0
+    pin_number: 2
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_2_io1
+        role: io1
+      - name: port_2_io2
+        role: io2
+
+# 3. Bundles (Grouped links for multi-bus/parallel routing)
+bundles:
+  output_bus:
+    routing_type: euler_bend
+    links:
+      - from: MMI_1:a1
+        to: port:port_io1
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend
+      - from: MMI_2:a1
+        to: MMI_1:b1
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend
+      - from: MMI_3:a1
+        to: MMI_1:b2
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend
+      - from: MMI_2:b1
+        to: port_1:port_1_io1
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend
+      - from: MMI_2:b1
+        to: port_1:port_1_io2
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend
+      - from: MMI_2:b2
+        to: port_1:port_1_io1
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend
+      - from: MMI_3:b1
+        to: port_2:port_2_io2
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend
+      - from: MMI_3:b2
+        to: port_2:port_2_io1
+        xsection: strip
+        family: optical
+        width: 0.45
+        radius: 10
+        routing_type: euler_bend

database/engineer/layout/mxpic_project_1/canvas_1.yml

@@ -0,0 +1,100 @@
+# =============================================
+# mxPIC Cell/Project Definition File
+# =============================================
+schema_version: "2.0.0"
+kind: cell
+coordinate_system: gds_y_up
+canvas_size:
+  width: 5000
+  height: 5000
+project: mxpic_project_1
+name: canvas_1
+type: composite
+version: "1.0.0"
+
+# 1. External Ports (How this cell connects to the outside world)
+pins:
+- name: port_io1
+  layer: WG_CORE
+  element: port
+  pin: io1
+  x: 50.0
+  y: -150.0
+  angle: 180.0
+  width: 0.5
+
+# 2. Instances (The sub-components dropped onto this canvas)
+instances:
+  waveguide_1:
+    component: waveguide
+    x: 686.5
+    y: -1027.9
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+      length: 100
+      width: 0.5
+      xsection: "strip"
+
+  circle_1:
+    component: circle
+    x: 877.2
+    y: -1093.7
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+      radius: 10
+      width: 0.5
+      xsection: "strip"
+
+  waveguide_2:
+    component: waveguide
+    x: 858.0
+    y: -1029.6
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+      length: 100
+      width: 0.5
+      xsection: "strip"
+
+elements:
+  port:
+    type: port
+    x: 50.0
+    y: -150.0
+    angle: 0.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_io1
+        role: io1
+
+# 3. Bundles (Grouped links for multi-bus/parallel routing)
+bundles:
+  output_bus:
+    routing_type: euler_bend
+    links:
+      - from: waveguide_1:b1
+        to: waveguide_2:a1
+        xsection: strip
+        family: optical
+        width: 0.5
+        radius: 10
+        routing_type: euler_bend
+      - from: waveguide_2:b1
+        to: circle_1:a1
+        xsection: strip
+        family: optical
+        width: 0.5
+        radius: 10
+        routing_type: euler_bend

database/engineer/layout/mxpic_project_1/canvas_2.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6516.95" height="2377.45" viewBox="14124.775 14328.775 6516.95 2377.45">
+<defs>
+<style type="text/css">
+.l1111d0 {stroke: #B3446C; fill: #B3446C; fill-opacity: 0.5;}
+</style>
+</defs>
+<rect x="14124.775" y="14328.775" width="6516.95" height="2377.45" fill="#222222" stroke="none"/>
+<g id="canvas_2" transform="scale(1 -1)">
+<polygon id="00000215A6721690" class="l1111d0" points="20243,-14702.5 14421,-14702.5 14421,-14697.5 20243,-14697.5"/>
+<polygon id="00000215A67222D0" class="l1111d0" points="20340.5,-14800 20345.5,-14800 20345.5,-14798.61 20345.42,-14795.84 20345.27,-14793.06 20345.05,-14790.3 20344.75,-14787.54 20344.37,-14784.79 20343.92,-14782.05 20343.4,-14779.32 20342.8,-14776.61 20342.13,-14773.92 20341.39,-14771.24 20340.57,-14768.59 20339.69,-14765.96 20338.73,-14763.35 20337.7,-14760.77 20336.61,-14758.22 20335.44,-14755.7 20334.21,-14753.22 20332.91,-14750.76 20331.54,-14748.35 20330.11,-14745.97 20328.61,-14743.63 20327.06,-14741.33 20325.44,-14739.08 20323.76,-14736.87 20322.02,-14734.7 20320.22,-14732.59 20318.37,-14730.52 20316.46,-14728.51 20314.49,-14726.54 20312.48,-14724.63 20310.41,-14722.78 20308.3,-14720.98 20306.13,-14719.24 20303.92,-14717.56 20301.67,-14715.94 20299.37,-14714.39 20297.03,-14712.89 20294.65,-14711.46 20292.24,-14710.09 20289.78,-14708.79 20287.3,-14707.56 20284.78,-14706.39 20282.23,-14705.3 20279.65,-14704.27 20277.04,-14703.31 20274.41,-14702.43 20271.76,-14701.61 20269.08,-14700.87 20266.39,-14700.2 20263.68,-14699.6 20260.95,-14699.08 20258.21,-14698.63 20255.46,-14698.25 20252.7,-14697.95 20249.94,-14697.73 20247.16,-14697.58 20244.39,-14697.5 20243,-14697.5 20243,-14702.5 20244.37,-14702.5 20247.1,-14702.58 20249.83,-14702.73 20252.56,-14702.96 20255.28,-14703.27 20257.98,-14703.65 20260.68,-14704.11 20263.36,-14704.64 20266.03,-14705.25 20268.68,-14705.94 20271.3,-14706.69 20273.91,-14707.52 20276.49,-14708.43 20279.05,-14709.4 20281.57,-14710.45 20284.07,-14711.57 20286.53,-14712.75 20288.96,-14714.01 20291.36,-14715.33 20293.71,-14716.72 20296.03,-14718.17 20298.3,-14719.69 20300.53,-14721.28 20302.72,-14722.92 20304.86,-14724.63 20306.95,-14726.39 20308.99,-14728.21 20310.97,-14730.09 20312.91,-14732.03 20314.79,-14734.01 20316.61,-14736.05 20318.37,-14738.14 20320.08,-14740.28 20321.72,-14742.47 20323.31,-14744.7 20324.83,-14746.97 20326.28,-14749.29 20327.67,-14751.64 20328.99,-14754.04 20330.25,-14756.47 20331.43,-14758.93 20332.55,-14761.43 20333.6,-14763.95 20334.57,-14766.51 20335.48,-14769.09 20336.31,-14771.7 20337.06,-14774.32 20337.75,-14776.97 20338.36,-14779.64 20338.89,-14782.32 20339.35,-14785.02 20339.73,-14787.72 20340.04,-14790.44 20340.27,-14793.17 20340.42,-14795.9 20340.5,-14798.63"/>
+<polygon id="00000215A67218C0" class="l1111d0" points="20340.5,-15990 20340.5,-14800 20345.5,-14800 20345.5,-15990"/>
+<polygon id="00000215A6722030" class="l1111d0" points="20243,-16087.5 20243,-16092.5 20244.39,-16092.5 20247.16,-16092.42 20249.94,-16092.27 20252.7,-16092.05 20255.46,-16091.75 20258.21,-16091.37 20260.95,-16090.92 20263.68,-16090.4 20266.39,-16089.8 20269.08,-16089.13 20271.76,-16088.39 20274.41,-16087.57 20277.04,-16086.69 20279.65,-16085.73 20282.23,-16084.7 20284.78,-16083.61 20287.3,-16082.44 20289.78,-16081.21 20292.24,-16079.91 20294.65,-16078.54 20297.03,-16077.11 20299.37,-16075.61 20301.67,-16074.06 20303.92,-16072.44 20306.13,-16070.76 20308.3,-16069.02 20310.41,-16067.22 20312.48,-16065.37 20314.49,-16063.46 20316.46,-16061.49 20318.37,-16059.48 20320.22,-16057.41 20322.02,-16055.3 20323.76,-16053.13 20325.44,-16050.92 20327.06,-16048.67 20328.61,-16046.37 20330.11,-16044.03 20331.54,-16041.65 20332.91,-16039.24 20334.21,-16036.78 20335.44,-16034.3 20336.61,-16031.78 20337.7,-16029.23 20338.73,-16026.65 20339.69,-16024.04 20340.57,-16021.41 20341.39,-16018.76 20342.13,-16016.08 20342.8,-16013.39 20343.4,-16010.68 20343.92,-16007.95 20344.37,-16005.21 20344.75,-16002.46 20345.05,-15999.7 20345.27,-15996.94 20345.42,-15994.16 20345.5,-15991.39 20345.5,-15990 20340.5,-15990 20340.5,-15991.37 20340.42,-15994.1 20340.27,-15996.83 20340.04,-15999.56 20339.73,-16002.28 20339.35,-16004.98 20338.89,-16007.68 20338.36,-16010.36 20337.75,-16013.03 20337.06,-16015.68 20336.31,-16018.3 20335.48,-16020.91 20334.57,-16023.49 20333.6,-16026.05 20332.55,-16028.57 20331.43,-16031.07 20330.25,-16033.53 20328.99,-16035.96 20327.67,-16038.36 20326.28,-16040.71 20324.83,-16043.03 20323.31,-16045.3 20321.72,-16047.53 20320.08,-16049.72 20318.37,-16051.86 20316.61,-16053.95 20314.79,-16055.99 20312.91,-16057.97 20310.97,-16059.91 20308.99,-16061.79 20306.95,-16063.61 20304.86,-16065.37 20302.72,-16067.08 20300.53,-16068.72 20298.3,-16070.31 20296.03,-16071.83 20293.71,-16073.28 20291.36,-16074.67 20288.96,-16075.99 20286.53,-16077.25 20284.07,-16078.43 20281.57,-16079.55 20279.05,-16080.6 20276.49,-16081.57 20273.91,-16082.48 20271.3,-16083.31 20268.68,-16084.06 20266.03,-16084.75 20263.36,-16085.36 20260.68,-16085.89 20257.98,-16086.35 20255.28,-16086.73 20252.56,-16087.04 20249.83,-16087.27 20247.1,-16087.42 20244.37,-16087.5"/>
+<polygon id="00000215A6721A80" class="l1111d0" points="16810,-14775 14421,-14775 14421,-14625 16810,-14625"/>
+<polygon id="00000215A6720F90" class="l1111d0" points="16835,-14800 16985,-14800 16985,-14798.17 16984.92,-14794.5 16984.77,-14790.84 16984.54,-14787.18 16984.23,-14783.53 16983.85,-14779.89 16983.39,-14776.25 16982.85,-14772.62 16982.24,-14769.01 16981.55,-14765.41 16980.79,-14761.82 16979.95,-14758.26 16979.04,-14754.71 16978.06,-14751.17 16977,-14747.67 16975.87,-14744.18 16974.66,-14740.72 16973.38,-14737.28 16972.03,-14733.88 16970.61,-14730.5 16969.12,-14727.15 16967.56,-14723.83 16965.93,-14720.55 16964.23,-14717.3 16962.47,-14714.09 16960.64,-14710.91 16958.74,-14707.78 16956.77,-14704.68 16954.74,-14701.63 16952.65,-14698.62 16950.5,-14695.66 16948.28,-14692.74 16946.01,-14689.86 16943.67,-14687.04 16941.27,-14684.27 16938.82,-14681.54 16936.31,-14678.87 16933.75,-14676.25 16931.13,-14673.69 16928.46,-14671.18 16925.73,-14668.73 16922.96,-14666.33 16920.14,-14663.99 16917.26,-14661.72 16914.34,-14659.5 16911.38,-14657.35 16908.37,-14655.26 16905.32,-14653.23 16902.22,-14651.26 16899.09,-14649.36 16895.91,-14647.53 16892.7,-14645.77 16889.45,-14644.07 16886.17,-14642.44 16882.85,-14640.88 16879.5,-14639.39 16876.12,-14637.97 16872.72,-14636.62 16869.28,-14635.34 16865.82,-14634.13 16862.33,-14633 16858.83,-14631.94 16855.29,-14630.96 16851.74,-14630.05 16848.18,-14629.21 16844.59,-14628.45 16840.99,-14627.76 16837.38,-14627.15 16833.75,-14626.61 16830.11,-14626.15 16826.47,-14625.77 16822.82,-14625.46 16819.16,-14625.23 16815.5,-14625.08 16811.83,-14625 16810,-14625 16810,-14775 16810.68,-14775 16812.03,-14775.08 16813.38,-14775.22 16814.71,-14775.44 16816.03,-14775.73 16817.34,-14776.1 16818.62,-14776.53 16819.88,-14777.03 16821.11,-14777.6 16822.31,-14778.23 16823.47,-14778.93 16824.59,-14779.69 16825.67,-14780.51 16826.7,-14781.39 16827.68,-14782.32 16828.61,-14783.3 16829.49,-14784.33 16830.31,-14785.41 16831.07,-14786.53 16831.77,-14787.69 16832.4,-14788.89 16832.97,-14790.12 16833.47,-14791.38 16833.9,-14792.66 16834.27,-14793.97 16834.56,-14795.29 16834.78,-14796.62 16834.92,-14797.97 16835,-14799.32"/>
+<polygon id="00000215A6721930" class="l1111d0" points="16835,-16235 16835,-14800 16985,-14800 16985,-16235"/>
+<polygon id="00000215A67214D0" class="l1111d0" points="16810,-16260 16810,-16410 16811.83,-16410 16815.5,-16409.92 16819.16,-16409.77 16822.82,-16409.54 16826.47,-16409.23 16830.11,-16408.85 16833.75,-16408.39 16837.38,-16407.85 16840.99,-16407.24 16844.59,-16406.55 16848.18,-16405.79 16851.74,-16404.95 16855.29,-16404.04 16858.83,-16403.06 16862.33,-16402 16865.82,-16400.87 16869.28,-16399.66 16872.72,-16398.38 16876.12,-16397.03 16879.5,-16395.61 16882.85,-16394.12 16886.17,-16392.56 16889.45,-16390.93 16892.7,-16389.23 16895.91,-16387.47 16899.09,-16385.64 16902.22,-16383.74 16905.32,-16381.77 16908.37,-16379.74 16911.38,-16377.65 16914.34,-16375.5 16917.26,-16373.28 16920.14,-16371.01 16922.96,-16368.67 16925.73,-16366.27 16928.46,-16363.82 16931.13,-16361.31 16933.75,-16358.75 16936.31,-16356.13 16938.82,-16353.46 16941.27,-16350.73 16943.67,-16347.96 16946.01,-16345.14 16948.28,-16342.26 16950.5,-16339.34 16952.65,-16336.38 16954.74,-16333.37 16956.77,-16330.32 16958.74,-16327.22 16960.64,-16324.09 16962.47,-16320.91 16964.23,-16317.7 16965.93,-16314.45 16967.56,-16311.17 16969.12,-16307.85 16970.61,-16304.5 16972.03,-16301.12 16973.38,-16297.72 16974.66,-16294.28 16975.87,-16290.82 16977,-16287.33 16978.06,-16283.83 16979.04,-16280.29 16979.95,-16276.74 16980.79,-16273.18 16981.55,-16269.59 16982.24,-16265.99 16982.85,-16262.38 16983.39,-16258.75 16983.85,-16255.11 16984.23,-16251.47 16984.54,-16247.82 16984.77,-16244.16 16984.92,-16240.5 16985,-16236.83 16985,-16235 16835,-16235 16835,-16235.68 16834.92,-16237.03 16834.78,-16238.38 16834.56,-16239.71 16834.27,-16241.03 16833.9,-16242.34 16833.47,-16243.62 16832.97,-16244.88 16832.4,-16246.11 16831.77,-16247.31 16831.07,-16248.47 16830.31,-16249.59 16829.49,-16250.67 16828.61,-16251.7 16827.68,-16252.68 16826.7,-16253.61 16825.67,-16254.49 16824.59,-16255.31 16823.47,-16256.07 16822.31,-16256.77 16821.11,-16257.4 16819.88,-16257.97 16818.62,-16258.47 16817.34,-16258.9 16816.03,-16259.27 16814.71,-16259.56 16813.38,-16259.78 16812.03,-16259.92 16810.68,-16260"/>
+<polygon id="00000215A67220A0" class="l1111d0" points="15610,-14775 14421,-14775 14421,-14625 15610,-14625"/>
+<polygon id="00000215A6722650" class="l1111d0" points="15635,-14800 15785,-14800 15785,-14798.17 15784.92,-14794.5 15784.77,-14790.84 15784.54,-14787.18 15784.23,-14783.53 15783.85,-14779.89 15783.39,-14776.25 15782.85,-14772.62 15782.24,-14769.01 15781.55,-14765.41 15780.79,-14761.82 15779.95,-14758.26 15779.04,-14754.71 15778.06,-14751.17 15777,-14747.67 15775.87,-14744.18 15774.66,-14740.72 15773.38,-14737.28 15772.03,-14733.88 15770.61,-14730.5 15769.12,-14727.15 15767.56,-14723.83 15765.93,-14720.55 15764.23,-14717.3 15762.47,-14714.09 15760.64,-14710.91 15758.74,-14707.78 15756.77,-14704.68 15754.74,-14701.63 15752.65,-14698.62 15750.5,-14695.66 15748.28,-14692.74 15746.01,-14689.86 15743.67,-14687.04 15741.27,-14684.27 15738.82,-14681.54 15736.31,-14678.87 15733.75,-14676.25 15731.13,-14673.69 15728.46,-14671.18 15725.73,-14668.73 15722.96,-14666.33 15720.14,-14663.99 15717.26,-14661.72 15714.34,-14659.5 15711.38,-14657.35 15708.37,-14655.26 15705.32,-14653.23 15702.22,-14651.26 15699.09,-14649.36 15695.91,-14647.53 15692.7,-14645.77 15689.45,-14644.07 15686.17,-14642.44 15682.85,-14640.88 15679.5,-14639.39 15676.12,-14637.97 15672.72,-14636.62 15669.28,-14635.34 15665.82,-14634.13 15662.33,-14633 15658.83,-14631.94 15655.29,-14630.96 15651.74,-14630.05 15648.18,-14629.21 15644.59,-14628.45 15640.99,-14627.76 15637.38,-14627.15 15633.75,-14626.61 15630.11,-14626.15 15626.47,-14625.77 15622.82,-14625.46 15619.16,-14625.23 15615.5,-14625.08 15611.83,-14625 15610,-14625 15610,-14775 15610.68,-14775 15612.03,-14775.08 15613.38,-14775.22 15614.71,-14775.44 15616.03,-14775.73 15617.34,-14776.1 15618.62,-14776.53 15619.88,-14777.03 15621.11,-14777.6 15622.31,-14778.23 15623.47,-14778.93 15624.59,-14779.69 15625.67,-14780.51 15626.7,-14781.39 15627.68,-14782.32 15628.61,-14783.3 15629.49,-14784.33 15630.31,-14785.41 15631.07,-14786.53 15631.77,-14787.69 15632.4,-14788.89 15632.97,-14790.12 15633.47,-14791.38 15633.9,-14792.66 15634.27,-14793.97 15634.56,-14795.29 15634.78,-14796.62 15634.92,-14797.97 15635,-14799.32"/>
+<polygon id="00000215A67226C0" class="l1111d0" points="15635,-16235 15635,-14800 15785,-14800 15785,-16235"/>
+<polygon id="00000215A6721FC0" class="l1111d0" points="15810,-16260 15810,-16410 15808.17,-16410 15804.5,-16409.92 15800.84,-16409.77 15797.18,-16409.54 15793.53,-16409.23 15789.89,-16408.85 15786.25,-16408.39 15782.62,-16407.85 15779.01,-16407.24 15775.41,-16406.55 15771.82,-16405.79 15768.26,-16404.95 15764.71,-16404.04 15761.17,-16403.06 15757.67,-16402 15754.18,-16400.87 15750.72,-16399.66 15747.28,-16398.38 15743.88,-16397.03 15740.5,-16395.61 15737.15,-16394.12 15733.83,-16392.56 15730.55,-16390.93 15727.3,-16389.23 15724.09,-16387.47 15720.91,-16385.64 15717.78,-16383.74 15714.68,-16381.77 15711.63,-16379.74 15708.62,-16377.65 15705.66,-16375.5 15702.74,-16373.28 15699.86,-16371.01 15697.04,-16368.67 15694.27,-16366.27 15691.54,-16363.82 15688.87,-16361.31 15686.25,-16358.75 15683.69,-16356.13 15681.18,-16353.46 15678.73,-16350.73 15676.33,-16347.96 15673.99,-16345.14 15671.72,-16342.26 15669.5,-16339.34 15667.35,-16336.38 15665.26,-16333.37 15663.23,-16330.32 15661.26,-16327.22 15659.36,-16324.09 15657.53,-16320.91 15655.77,-16317.7 15654.07,-16314.45 15652.44,-16311.17 15650.88,-16307.85 15649.39,-16304.5 15647.97,-16301.12 15646.62,-16297.72 15645.34,-16294.28 15644.13,-16290.82 15643,-16287.33 15641.94,-16283.83 15640.96,-16280.29 15640.05,-16276.74 15639.21,-16273.18 15638.45,-16269.59 15637.76,-16265.99 15637.15,-16262.38 15636.61,-16258.75 15636.15,-16255.11 15635.77,-16251.47 15635.46,-16247.82 15635.23,-16244.16 15635.08,-16240.5 15635,-16236.83 15635,-16235 15785,-16235 15785,-16235.68 15785.08,-16237.03 15785.22,-16238.38 15785.44,-16239.71 15785.73,-16241.03 15786.1,-16242.34 15786.53,-16243.62 15787.03,-16244.88 15787.6,-16246.11 15788.23,-16247.31 15788.93,-16248.47 15789.69,-16249.59 15790.51,-16250.67 15791.39,-16251.7 15792.32,-16252.68 15793.3,-16253.61 15794.33,-16254.49 15795.41,-16255.31 15796.53,-16256.07 15797.69,-16256.77 15798.89,-16257.4 15800.12,-16257.97 15801.38,-16258.47 15802.66,-16258.9 15803.97,-16259.27 15805.29,-16259.56 15806.62,-16259.78 15807.97,-16259.92 15809.32,-16260"/>
+<polygon id="00000215A6722110" class="l1111d0" points="15810,-16260 16810,-16260 16810,-16410 15810,-16410"/>
+</g>
+</svg>

database/engineer/layout/mxpic_project_1/canvas_2.yml

@@ -0,0 +1,136 @@
+# =============================================
+# mxPIC Cell/Project Definition File
+# =============================================
+schema_version: "2.0.0"
+kind: cell
+coordinate_system: gds_y_up
+canvas_size:
+  width: 5000
+  height: 5000
+project: mxpic_project_1
+name: canvas_2
+type: composite
+version: "1.0.0"
+
+# 1. External Ports (How this cell connects to the outside world)
+pins:
+- name: port_io1
+  layer: WG_CORE
+  element: port
+  pin: io1
+  x: 50.0
+  y: -150.0
+  angle: 0.0
+  width: 0.5
+- name: port_2_io1
+  layer: WG_CORE
+  element: port_2
+  pin: io1
+  x: 1442.1
+  y: -1470.0
+  angle: 180.0
+  width: 10
+- name: port_3_io1
+  layer: WG_CORE
+  element: port_3
+  pin: io1
+  x: 2024.3
+  y: -1609.0
+  angle: 180.0
+  width: 0.5
+
+# 2. Instances (The sub-components dropped onto this canvas)
+instances:
+  waveguide_3:
+    component: waveguide
+    x: 1581.0
+    y: -1633.5
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+      length: 100
+      width: 15
+      xsection: "strip"
+
+elements:
+  port:
+    type: port
+    x: 50.0
+    y: -150.0
+    angle: 0.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_io1
+        role: io1
+  port:
+    type: port
+    x: 50.0
+    y: -150.0
+    angle: 180.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_io1
+        role: io1
+  port_2:
+    type: port
+    x: 1442.1
+    y: -1470.0
+    angle: 0.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 10
+    description: ""
+    pins:
+      - name: port_2_io1
+        role: io1
+  port_3:
+    type: port
+    x: 2024.3
+    y: -1609.0
+    angle: 0.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_3_io1
+        role: io1
+
+# 3. Bundles (Grouped links for multi-bus/parallel routing)
+bundles:
+  output_bus:
+    routing_type: euler_bend
+    links:
+      - from: waveguide_3:a1
+        to: port_2:port_2_io1
+        xsection: strip
+        family: optical
+        width: 15
+        radius: 10
+        routing_type: euler_bend
+      - from: waveguide_3:b1
+        to: port_2:port_2_io1
+        xsection: strip
+        family: optical
+        width: 15
+        radius: 10
+        routing_type: euler_bend
+      - from: port_3:port_3_io1
+        to: port_2:port_2_io1
+        xsection: strip
+        family: optical
+        width: 0.5
+        radius: 10
+        routing_type: euler_bend

database/engineer/layout/mxpic_project_1/mxpic_project_1.yml

@@ -13,6 +13,7 @@ type: project
 version: "1.0.0"
 
 # 1. External Ports (How this cell connects to the outside world)
+<<<<<<< HEAD
 ports: []
 
 # 2. Instances (The sub-components dropped onto this canvas)
@@ -21,6 +22,47 @@ instances:
     component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/multimode_interferometers/1x2MMI_1310nm_TE_Silterra_202603_ZKY_v2
     x: 1511.5
     y: -2531.5
+=======
+pins:
+- name: port_1_io1
+  layer: WG_CORE
+  element: port_1
+  pin: io1
+  x: 1699.6
+  y: -1844.2
+  angle: 180.0
+  width: 0.5
+
+# 2. Instances (The sub-components dropped onto this canvas)
+instances:
+  circle_1:
+    component: circle
+    x: 1877.6
+    y: -1816.7
+    rotation: 90.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+      radius: 10
+      width: 0.5
+      xsection: "strip"
+
+  BD_1:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/bendings/SiN_EUB_1310_H400_w2500_L45_QY_202604
+    x: 1926.2
+    y: -1813.9
+    rotation: 90.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+  DC_1:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/directional_couplers/DC_SiN400_99_1_1310_jyh_quantex_202603
+    x: 1766.5
+    y: -1945.3
     rotation: 0.0
     flip: 0
     flop: 0
@@ -28,10 +70,51 @@ instances:
     settings:
     length:
 
+  MZM_1:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/composites/Mach_Zender_modulators/MZI_SiN400_Si220_PIN_mod_1310_L1300_QY_202603
+    x: 1341.6
+    y: -2103.8
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+  phase_shifter_1:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/phase_shifters/HT_150R_SiPPP_L500_100OHM_DUMMY_QY_202604
+    x: 2695.0
+    y: -2275.0
+    rotation: 90.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+  MMI_1:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/multimode_interferometers/1x2MMI_1310nm_TE_Silterra_202603_ZKY_v2
+    x: 2849.0
+    y: -1988.6
+>>>>>>> jingwen_main
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+<<<<<<< HEAD
   MMI_2:
     component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/multimode_interferometers/1x2MMI_1310nm_TE_Silterra_202603_ZKY_v2
     x: 1716.4
     y: -2293.8
+=======
+  DC_2:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/directional_couplers/DC_SiN400_99_1_1310_jyh_quantex_202603
+    x: 2656.9
+    y: -1992.8
+>>>>>>> jingwen_main
     rotation: 0.0
     flip: 0
     flop: 0
@@ -39,13 +122,42 @@ instances:
     settings:
     length:
 
+<<<<<<< HEAD
 elements: {}
+=======
+  PD_1:
+    component: Silterra/EMO1_2ML_CU_Al_RDL/primitives/photodetectors/PD_1310_Monitor_Si220_Ge500_NPN_XHN_202604
+    x: 3151.7
+    y: -2032.1
+    rotation: 0.0
+    flip: 0
+    flop: 0
+    mirror: false
+    settings:
+    length:
+
+elements:
+  port_1:
+    type: port
+    x: 1699.6
+    y: -1844.2
+    angle: 0.0
+    pin_number: 1
+    pitch: 10
+    layer: WG_CORE
+    width: 0.5
+    description: ""
+    pins:
+      - name: port_1_io1
+        role: io1
+>>>>>>> jingwen_main
 
 # 3. Bundles (Grouped links for multi-bus/parallel routing)
 bundles:
   output_bus:
     routing_type: euler_bend
     links:
+<<<<<<< HEAD
       - from: MMI_2:a1
         to: MMI_1:b2
         xsection: strip
@@ -53,3 +165,5 @@ bundles:
         width: 0.45
         radius: 10
         routing_type: euler_bend
+=======
+>>>>>>> jingwen_main

frontend/canvas-helpers.js

@@ -42,11 +42,14 @@
       name: 'Anchor',
       elementType: 'anchor',
       ports: {
-        a1: { x: 0, y: -PORT_NODE_SIZE / 2, a: 180, width: 0.5 },
+        a1: { x: 0, y: 0, a: 180, width: 0.5 },
-        b1: { x: 0, y: -PORT_NODE_SIZE / 2, a: 0, width: 0.5 }
+        b1: { x: 0, y: 0, a: 0, width: 0.5 }
       }
     }
   };
+  
+
+  
   // Defines local primitive components that do not require PDK lookup.
   const BASIC_COMPONENTS = {
     waveguide: {
@@ -804,7 +807,6 @@
         }
       };
     }
-    if (portNumber > 1) {
     const entries = [];
     Array.from({ length: portNumber }, (_, index) => {
       const y = elementPortOffset(index, portNumber, pitch);
@@ -812,8 +814,6 @@
       entries.push([`b${index + 1}`, { x: 0, y, a: 0, width }]);
     });
     return Object.fromEntries(entries);
-    }
-    return JSON.parse(JSON.stringify(element.ports));
   };
 
   // Generate port metadata for built-in primitive components.
@@ -984,6 +984,20 @@ ${pinLines}`;
     return `elements:\n${lines.join('\n')}`;
   };
 
+  const finiteNumberOrNull = (value) => {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : null;
+  };
+
+  const getRouteEndpointWidth = (node, handleId) => {
+    if (!node || !node.data) return null;
+    const dataWidth = finiteNumberOrNull(node.data.width);
+    if (dataWidth !== null) return dataWidth;
+    const ports = node.data.ports || {};
+    const portWidth = ports[handleId] ? finiteNumberOrNull(ports[handleId].width) : null;
+    return portWidth;
+  };
+
   // Serialize canvas links into routed bundle YAML including route settings and bend points.
   const buildBundlesYaml = (page, manifest) => {
     const { nodes = [], edges = [] } = page || {};
@@ -1004,6 +1018,9 @@ ${pinLines}`;
           ? getElementPinName(targetNode, edge.targetHandle)
           : edge.targetHandle || 'unknown';
         const route = createRouteSettings(manifest, edge.data && edge.data.route);
+        const routeWidth = getRouteEndpointWidth(sourceNode, edge.sourceHandle)
+          ?? getRouteEndpointWidth(targetNode, edge.targetHandle)
+          ?? route.width;
         const storedPoints = Array.isArray(edge.data && edge.data.points) ? edge.data.points : [];
         const points = storedPoints.length >= 2 ? getEdgeRoutePoints(edge, nodeMap) : [];
         const pointsYaml = points.length > 0
@@ -1014,7 +1031,7 @@ ${pinLines}`;
           return `      - id: ${toYamlScalar(edge.id)}
         xsection: ${route.xsection}
         family: ${route.family}
-        width: ${Number(route.width)}
+        width: ${Number(routeWidth)}
         radius: ${Number(route.radius)}
         routing_type: ${route.routing_type}${pointsYaml}`;
         }
@@ -1022,7 +1039,7 @@ ${pinLines}`;
         to: ${targetName}:${toPort}
         xsection: ${route.xsection}
         family: ${route.family}
-        width: ${Number(route.width)}
+        width: ${Number(routeWidth)}
         radius: ${Number(route.radius)}
         routing_type: ${route.routing_type}${pointsYaml}`;
       });

frontend/canvas.html

@@ -1622,7 +1622,7 @@ Organization : OptiHK Limited
 
 
     // Displays a category icon with cached loading and graceful failure behavior.
-    const IconImg = memo(({ category, containerStyle }) => {
+    const IconImg = memo(({ category, containerStyle, objectFit: imgObjectFit }) => {
       const [src, setSrc] = useState(() => {
         if (!category) return undefined;
         const cache = fetchIcon(category);
@@ -1671,7 +1671,7 @@ Organization : OptiHK Limited
               style={{
                 width: '100%',
                 height: '100%',
-                objectFit: 'fill',
+                objectFit: imgObjectFit || 'fill',
                 pointerEvents: 'none',
               }}
               onError={(e) => {
@@ -1764,9 +1764,12 @@ Organization : OptiHK Limited
               width: componentSize.width,
               height: visualSize.height,
               minHeight: visualSize.height,
+              overflow: 'hidden',
+              ...(visualSize.height < 50 && !isAnchorElement ? { padding: '2px 4px' } : {}),
               border: selected ? '2px solid var(--accent)' : '1px solid var(--border)',
-              transform: componentVisualTransform,
               boxShadow: selected ? '0 0 15px rgba(56, 189, 248, 0.2)' : '0 4px 6px rgba(0,0,0,0.3)',
+              transform: componentVisualTransform,
+              transformOrigin: 'center center',
                 ...(isBasicCompactComponent ? {
                   padding: 0,
                   display: 'flex',
@@ -1789,8 +1792,8 @@ Organization : OptiHK Limited
               ) : (
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '8px', minHeight: '100%' }}>
                 {!data.hideIcon && data.category && (
-                <div style={{ width: iconSize.width, height: iconSize.height }}>
+                  <div style={{ maxWidth: iconSize.width, maxHeight: iconSize.height, width: '100%', aspectRatio: `${iconSize.width}/${iconSize.height}`, overflow: 'hidden' }}>
-                  <IconImg category={data.category} />
+                    <IconImg category={data.category} objectFit="contain" />
                   </div>
                 )}
                 {!data.category && <div style={{ width: iconSize.width, height: iconSize.height, borderRadius: 4, border: '1px solid var(--border-strong)', background: 'rgba(148, 163, 184, 0.08)' }} />}
@@ -1799,7 +1802,8 @@ Organization : OptiHK Limited
             </div>
 
           <div style={{
-            position: 'absolute', inset: 0,
+            position: 'absolute',
+            top: 0, left: 0,
             width: componentSize.width,
             height: visualSize.height,
             pointerEvents: 'none'
@@ -1985,29 +1989,22 @@ Organization : OptiHK Limited
         const name = String(portName || '');
         return name.startsWith('a') || name.startsWith('left') ? 'left' : 'right';
       };
-      const anchorHandleVisualStyle = (portHandle, zIndex) => {
+      const anchorHandleVisualStyle = (portHandle, zIndex) => ({
-        const visualSide = anchorPortVisualSide(portHandle.name);
-        const localLeft = visualSide === 'left' ? 0 : elementSize.width;
-        const localTop = portHandle.style?.top || '50%';
-        return {
         ...baseHandleStyle,
         zIndex,
-          left: localLeft,
+        left: portHandle.style?.left,
-          top: localTop,
+        top: portHandle.style?.top || '50%',
-          right: 'auto',
+        right: portHandle.style?.right || 'auto',
-          bottom: 'auto',
+        bottom: portHandle.style?.bottom || 'auto',
-          transform: 'translate(-50%, -50%)'
+        transform: portHandle.style?.transform || 'translate(-50%, -50%)'
-        };
+      });
-      };
       const pinLabelStyle = (portHandle) => {
         const visualSide = anchorPortVisualSide(portHandle.name);
-        const localLeft = visualSide === 'left' ? 0 : elementSize.width;
-        const localTop = portHandle.style?.top || '50%';
         return {
-          left: localLeft,
+          left: portHandle.style?.left,
-          top: localTop,
+          top: portHandle.style?.top || '50%',
-          right: 'auto',
+          right: portHandle.style?.right || 'auto',
-          bottom: 'auto',
+          bottom: portHandle.style?.bottom || 'auto',
           transform: visualSide === 'left' ? 'translate(calc(-100% - 5px), -50%)' : 'translate(5px, -50%)'
         };
       };
@@ -3359,6 +3356,7 @@ Organization : OptiHK Limited
                         const forge = isForgeComponent(componentName);
                         onUpdateNode(selectedNode.id, {
                           data: {
+                            ...selectedNode.data,
                             componentName,
                             label: componentName,
                             ports: forge ? {} : undefined,
@@ -3805,6 +3803,14 @@ Organization : OptiHK Limited
           }
           : null
       ), [mouseCanvasPoint, canvasOrigin]);
+      const handleCanvasViewportMoveEnd = useCallback((event, viewport) => {
+        if (!activePageId || !viewport) return;
+        setPages(prev => prev.map(page => (
+          page.id === activePageId
+            ? { ...page, viewport: { x: viewport.x, y: viewport.y, zoom: viewport.zoom } }
+            : page
+        )));
+      }, [activePageId]);
       // Normalizes free-route control points and removes adjacent duplicates before storage.
       const compactRoutePoints = useCallback((points) => {
         return (points || [])
@@ -5056,6 +5062,35 @@ Organization : OptiHK Limited
                 return boxSize ? { ...node, data: { ...node.data, boxSize } } : node;
               })
             }));
+
+            // Pre-fetch PDK component metadata so nodes render with correct boxSize immediately.
+            const allNodes = cellPages.flatMap(page => page.nodes);
+            const pdkNames = [...new Set(allNodes
+              .filter(n => n.data?.componentName && !n.data?.elementType
+                && !isForgeComponent(n.data.componentName)
+                && !isBasicComponent(n.data.componentName))
+              .map(n => n.data.componentName))];
+            if (pdkNames.length > 0) {
+              const metaResults = await Promise.all(
+                pdkNames.map(name => loadComponentMetadata(name).catch(() => null))
+              );
+              const metaMap = new Map(
+                pdkNames.filter((_, i) => metaResults[i]).map((name, i) => [name, metaResults[i]])
+              );
+              for (const page of cellPages) {
+                page.nodes = page.nodes.map(node => {
+                  const metadata = metaMap.get(node.data?.componentName);
+                  if (!metadata) return node;
+                  const sz = normalizeBoxSize(metadata);
+                  return {
+                    ...node,
+                    position: clampPositionToCanvas(node.position, page.canvasSize || DEFAULT_CANVAS_SIZE, sz),
+                    data: { ...node.data, boxSize: sz, ports: metadata.pins || metadata.ports || {}, foundry: metadata.foundry || '', process: metadata.process || '' }
+                  };
+                });
+              }
+            }
+
             const loadedProjectPage = cellPages.find(page => page.type === 'project' && page.name === currentProjectName);
             const nonProjectPages = cellPages.filter(page => page !== loadedProjectPage);
             const resolvedProjectPage = loadedProjectPage || projectPage;
@@ -5082,12 +5117,18 @@ Organization : OptiHK Limited
 
       useEffect(() => {
         if (activePage && activePage.type !== 'layoutPreview' && reactFlowInstance) {
+          if (activePage.viewport) {
+            window.requestAnimationFrame(() => {
+              reactFlowInstance.setViewport(activePage.viewport, { duration: 0 });
+            });
+          } else {
             reactFlowInstance.fitBounds(
               { x: 0, y: 0, width: activeCanvasSize.width, height: activeCanvasSize.height },
               { padding: 0.12, duration: 0 }
             );
           }
-      }, [activePage?.id, activeCanvasSize.width, activeCanvasSize.height, reactFlowInstance]);
+        }
+      }, [activePage?.id, activePage?.viewport, activeCanvasSize.width, activeCanvasSize.height, reactFlowInstance]);
 
       useEffect(() => {
         setRulerStartPoint(null);
@@ -5174,12 +5215,20 @@ Organization : OptiHK Limited
               };
             })
           })));
+
+          // Force React Flow to re-measure nodes whose boxSize / ports have changed.
+          requestAnimationFrame(() => {
+            const updatedIds = results.filter(r => r.metadata).map(r => r.nodeId);
+            if (updatedIds.length > 0 && reactFlowInstance.updateNodeInternals) {
+              reactFlowInstance.updateNodeInternals(updatedIds);
+            }
+          });
         });
 
         return () => {
           cancelled = true;
         };
-      }, [pages, loadComponentMetadata]);
+      }, [pages, loadComponentMetadata, reactFlowInstance]);
 
       const openTabs = useMemo(() => pages.filter(page => !page.isClosed), [pages]);
 
@@ -6534,6 +6583,7 @@ ${bundlesBlock}`;
                   minZoom={0.02}
                   maxZoom={4}
                   defaultViewport={{ x: 80, y: 80, zoom: 0.12 }}
+                  onMoveEnd={handleCanvasViewportMoveEnd}
                   panOnDrag={false}
                   selectionOnDrag={true}
                   selectionMode={FULL_SELECTION_MODE}

tests/layout-backend-static.test.js

@@ -61,6 +61,21 @@ assert(
   'save-layout response should include an svg_url for the new layout tab'
 );
 assert(
+<<<<<<< HEAD
+  serverPy.includes('svg_ready') &&
+    serverPy.includes('svg_version') &&
+    serverPy.includes('file_version(svg_path)') &&
+    serverPy.includes("url_for('get_layout_svg', project_name=project, cell_name=cell, v=svg_version)"),
+  'save-layout response should only expose a versioned SVG URL after the preview file is ready'
+);
+assert(
+  serverPy.includes('temp_svg_path') &&
+    serverPy.includes('os.replace(temp_svg_path, svg_path)'),
+  'save-layout should publish generated SVG previews atomically instead of serving partially written files'
+);
+assert(
+=======
+>>>>>>> jingwen_main
   serverPy.includes('RouterStackUnavailable') &&
     serverPy.includes('except RouterStackUnavailable as e') &&
     serverPy.includes('"preview_status": preview_status') &&

tests/layout-ui-wiring.test.js

@@ -33,6 +33,16 @@ assert(
   'Build Layout should use the backend svg_url response'
 );
 assert(
+<<<<<<< HEAD
+  canvasHtml.includes('result.svg_ready && result.svg_url') &&
+    canvasHtml.includes('buildLayoutRequestRef') &&
+    canvasHtml.includes('buildLayoutBusyRef') &&
+    canvasHtml.includes("cache: 'no-store'"),
+  'Build Layout should wait for a ready, versioned SVG response and prevent stale duplicate preview updates'
+);
+assert(
+=======
+>>>>>>> jingwen_main
   canvasHtml.includes('result.preview_error') &&
     canvasHtml.includes('Preview skipped: '),
   'Build Layout should log when the backend saves YAML but skips SVG preview because the router stack is unavailable'

work _log.md

@@ -0,0 +1,11 @@
+# work log
+
+1.Fixed an issue where switching between different tabs would automatically reset the zoom level.
+
+2.Fixed an port width mismatch in YAML bundles.
+
+3.Fixed the issue where SVG were displaying in incorrect positions.
+
+4.Fixed the abnormal port shift after rotation.
+
+5.Fixed the abnormal position of individual ports.