routing for canvase level object is finished.

tests/canvas-helpers.test.js

@@ -172,18 +172,46 @@ assert.deepStrictEqual(
 );
 assert.deepStrictEqual(
   helpers.getBasicComponentMetadata('waveguide', { length: 120, width: 0.5 }).box_size,
-  [120, 4],
-  'basic waveguide symbol should use a narrow default height'
+  [120, 20],
+  'basic waveguide symbol should use a height that is two port-circle diameters'
 );
 assert.deepStrictEqual(
   helpers.getBasicComponentMetadata('90 bend', { radius: 15 }).box_size,
-  [15, 15],
-  '90 bend symbol should be square with side length equal to radius'
+  [25, 25],
+  '90 bend symbol should not shrink below the radius-25 canvas size'
 );
+assert.deepStrictEqual(
+  helpers.getBasicComponentMetadata('90 bend', { radius: 30 }).box_size,
+  [30, 30],
+  '90 bend symbol should still scale above radius 25'
+);
+assert.deepStrictEqual(
+  helpers.buildBasicComponentPorts('90 bend', { radius: 15, width: 0.6 }),
+  {
+    a1: { x: 0, y: 12.5, a: 180, width: 0.6, xsection: 'strip', description: 'Optical power input' },
+    b1: { x: 12.5, y: 0, a: 90, width: 0.6, xsection: 'strip', description: 'Optical power output' }
+  },
+  '90 bend ports should sit at the middle of the left and top sides of the square'
+);
+const ninetyBendHandles = helpers.buildPortHandles(helpers.buildBasicComponentPorts('90 bend', { radius: 15 }));
+assert.strictEqual(ninetyBendHandles.find(handle => handle.name === 'a1').position, 'left');
+assert.strictEqual(ninetyBendHandles.find(handle => handle.name === 'a1').style.top, '50%');
+assert.strictEqual(ninetyBendHandles.find(handle => handle.name === 'b1').position, 'top');
+assert.strictEqual(ninetyBendHandles.find(handle => handle.name === 'b1').style.left, '50%');
 assert.deepStrictEqual(
   helpers.getBasicComponentMetadata('180 bend', { radius: 15 }).box_size,
-  [15, 30],
-  '180 bend symbol should be one radius wide and two radii tall'
+  [25, 50],
+  '180 bend symbol should not shrink below the radius-25 canvas size'
+);
+assert.deepStrictEqual(
+  helpers.getBasicComponentMetadata('180 bend', { radius: 30 }).box_size,
+  [30, 60],
+  '180 bend symbol should still scale above radius 25'
+);
+assert.deepStrictEqual(
+  helpers.getBasicComponentMetadata('taper', { length: 80, width1: 0.4, width2: 1.2 }).box_size,
+  [80, 20],
+  'basic taper symbol should use a height that is two port-circle diameters'
 );
 assert.deepStrictEqual(
   helpers.getBasicComponentMetadata('taper', { length: 80, width1: 0.4, width2: 1.2 }).ports.a1.description,
@@ -259,11 +287,11 @@ 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'));
+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 }
+  port: { x: 12, y: -6, a: 0, width: 0.5 }
 });
 
 const elementNodes = [
@@ -341,9 +369,9 @@ assert.deepStrictEqual(
     data: { componentDisplayName: 'array', elementType: 'port', portNumber: 3, pitch: 10, width: 0.6 }
   }]),
   {
-    array_1: { x: 100, y: 190, a: 0, width: 0.6 },
-    array_2: { x: 100, y: 200, a: 0, width: 0.6 },
-    array_3: { x: 100, y: 210, a: 0, width: 0.6 }
+    array_1: { x: 100, y: 190, a: 180, width: 0.6 },
+    array_2: { x: 100, y: 200, a: 180, width: 0.6 },
+    array_3: { x: 100, y: 210, a: 180, width: 0.6 }
   }
 );
 
@@ -352,6 +380,7 @@ assert(canvasPortsYaml.includes('name: in0'));
 assert(canvasPortsYaml.includes('description: "input port"'));
 assert(canvasPortsYaml.includes('width: 0.7'));
 assert(canvasPortsYaml.includes('y: -20.0'));
+assert(canvasPortsYaml.includes('angle: 0.0'));
 
 const elementsYaml = helpers.buildElementsYaml(elementNodes);
 assert(elementsYaml.includes('in0:'));
@@ -372,7 +401,7 @@ assert(instancesWithoutElements.includes('component_1:'));
 assert(instancesWithoutElements.includes('y: -60.0'));
 
 const multiPortComponentPorts = helpers.buildPageComponentPorts(null, elementNodes);
-assert.deepStrictEqual(multiPortComponentPorts.in0, { x: 10, y: 20, a: 180, width: 0.7 });
+assert.deepStrictEqual(multiPortComponentPorts.in0, { x: 10, y: 20, a: 0, width: 0.7 });
 
 const technologyManifest = {
   defaults: { xsection: 'strip', width: 0.45, radius: 10, routing_type: 'euler_bend' },

tests/layout-ui-wiring.test.js

@@ -282,6 +282,15 @@ assert(
   canvasHtml.includes('component-floating-label') && canvasHtml.includes('component-visual-body'),
   'component labels should float outside the rotated body'
 );
+assert(
+  canvasHtml.includes('canvasTextVisible') &&
+    canvasHtml.includes('toggleCanvasText') &&
+    canvasHtml.includes('Text On') &&
+    canvasHtml.includes('Text Off') &&
+    canvasHtml.includes('canvas-text-hidden') &&
+    canvasHtml.includes('.canvas-text-hidden .component-floating-label'),
+  'canvas toolbar should toggle instance name and PDK text above components'
+);
 assert(
   canvasHtml.includes('--floating-label-bg') && canvasHtml.includes('--port-label-bg') && canvasHtml.includes('--mini-button-bg'),
   'theme variables should keep labels, port chips, and header buttons readable in light and dark modes'
@@ -400,6 +409,34 @@ assert(
     canvasHtml.includes("isUserCell ? 'compact-tree-card' : ''"),
   'Basic, Port, and Anchor entries should render as consistent 2D cards instead of compact list rows'
 );
+assert(
+  canvasHtml.includes("key === 'xsection'") &&
+    canvasHtml.includes('<select') &&
+    canvasHtml.includes('xsections.map(xsection =>') &&
+    canvasHtml.includes('updateBasicArgument(key, event.target.value)'),
+  'Basic component xsection should be selected from technology manifest xsections instead of free text'
+);
+assert(
+  canvasHtml.indexOf('const xsections = Object.keys') <
+    canvasHtml.indexOf('if (selectedRouteEdges.length > 0)'),
+  'Basic and route property panels should share the same xsection list from RightPanel scope'
+);
+assert(
+  canvasHtml.includes("['waveguide', 'taper', '90 bend'].includes(data.componentName)") &&
+    canvasHtml.includes('minHeight: visualSize.height') &&
+    canvasHtml.includes('isBasicCompactComponent ?'),
+  'waveguide, taper, and 90 bend nodes should override the default component min-height and padding on the canvas'
+);
+assert(
+  canvasHtml.includes('font-size: 0.3rem;') &&
+    canvasHtml.includes('font-size: 0.4rem;') &&
+    canvasHtml.includes('font-size: 0.32rem;') &&
+    canvasHtml.includes("font: 600 0.5rem/1.35") &&
+    canvasHtml.includes('width: 8, height: 8') &&
+    canvasHtml.includes('width: 6,') &&
+    canvasHtml.includes('fontSize: 8'),
+  'canvas labels and port circles should render smaller than the previous sizing'
+);
 assert(
   canvasHtml.includes('ParallelRouteEdge') &&
     canvasHtml.includes('parallelOffset') &&