Updated with more bug revise. The login page and dashboard is also changedd

frontend/canvas-helpers.js

@@ -360,6 +360,53 @@
     };
   };
 
+  // Calculate the visual footprint of a user canvas when placed as a component.
+  const calculateCompositeBoxSize = (pageOrNodes, fallback) => {
+    const page = Array.isArray(pageOrNodes) ? { nodes: pageOrNodes } : (pageOrNodes || {});
+    const nodes = Array.isArray(page.nodes) ? page.nodes : [];
+    const fallbackSize = normalizeBoxSize({ box_size: fallback }, DEFAULT_COMPONENT_BOX_SIZE);
+    const points = [];
+    const addPoint = (x, y) => {
+      const px = Number(x);
+      const py = Number(y);
+      if (Number.isFinite(px) && Number.isFinite(py)) {
+        points.push({ x: px, y: py });
+      }
+    };
+
+    Object.values(buildPageComponentPorts(page.port, nodes)).forEach(port => {
+      addPoint(port.x, port.y);
+    });
+
+    nodes.forEach(node => {
+      if (!node || node.type !== 'rotatableNode' || node.data?.elementType || !node.position) return;
+      const box = normalizeBoxSize({ box_size: node.data?.boxSize }, fallbackSize);
+      const origin = {
+        x: Number(node.position.x) || 0,
+        y: Number(node.position.y) || 0
+      };
+      [
+        { x: 0, y: 0 },
+        { x: box.width, y: 0 },
+        { x: box.width, y: box.height },
+        { x: 0, y: box.height }
+      ].forEach(corner => {
+        const transformed = transformBoxCorner(corner, node.data);
+        addPoint(origin.x + transformed.x, origin.y + transformed.y);
+      });
+    });
+
+    if (points.length < 2) return fallbackSize;
+    const minX = Math.min(...points.map(point => point.x));
+    const maxX = Math.max(...points.map(point => point.x));
+    const minY = Math.min(...points.map(point => point.y));
+    const maxY = Math.max(...points.map(point => point.y));
+    return {
+      width: Math.max(1, roundMeasureValue(maxX - minX)),
+      height: Math.max(1, roundMeasureValue(maxY - minY))
+    };
+  };
+
   // Round ruler measurements for compact display.
   const roundMeasureValue = (value) => Number(value.toFixed(3));
 
@@ -1073,6 +1120,7 @@ ${linksYaml}`;
     normalizeCanvasSize,
     clampPositionToCanvas,
     calculateLayoutBounds,
+    calculateCompositeBoxSize,
     createRulerMeasurement,
     createComponentSymbolMetrics,
     transformPortInfo,