@tscircuit/core 0.0.2300 → 0.0.2301

package/dist/index.js

@@ -11356,6 +11356,42 @@ var underscorifyPortArrangement = (portArrangement, pinLabels) => {
   return void 0;
 };
 
+// lib/utils/join-imported-courtyard-outlines.ts
+function joinImportedCourtyardOutlines(courtyards, componentName) {
+  const polygons = /* @__PURE__ */ new Map();
+  const pending = courtyards.filter(
+    (courtyard) => courtyard.outline.length === 2
+  );
+  const samePoint2 = (a2, b2) => Math.hypot(a2.x - b2.x, a2.y - b2.y) < 1e-6;
+  while (pending.length) {
+    const first = pending.shift();
+    const outline = [...first.outline];
+    while (!samePoint2(outline[0], outline.at(-1))) {
+      const end = outline.at(-1);
+      const nextIndex = pending.findIndex(
+        (candidate) => candidate.pcb_component_id === first.pcb_component_id && candidate.layer === first.layer && candidate.outline.some((point8) => samePoint2(point8, end))
+      );
+      if (nextIndex === -1) {
+        throw new Error(
+          `Imported courtyard for "${componentName}" has disconnected line segments; provide a complete closed polygon.`
+        );
+      }
+      const [next] = pending.splice(nextIndex, 1);
+      outline.push(
+        samePoint2(next.outline[0], end) ? next.outline[1] : next.outline[0]
+      );
+    }
+    outline.pop();
+    if (outline.length < 3) {
+      throw new Error(
+        `Imported courtyard for "${componentName}" needs at least three polygon vertices.`
+      );
+    }
+    polygons.set(first, outline);
+  }
+  return polygons;
+}
+
 // lib/utils/createComponentsFromCircuitJson.ts
 import { getUnitVectorFromDirection as getUnitVectorFromDirection2 } from "@tscircuit/math-utils";
 import {
@@ -15829,6 +15865,10 @@ var createComponentsFromCircuitJson = ({
   pcbPinLabels,
   preserveSolderPaste = false
 }, circuitJson) => {
+  const joinedCourtyards = joinImportedCourtyardOutlines(
+    circuitJson.filter((elm) => elm.type === "pcb_courtyard_outline"),
+    componentName
+  );
   const importedSourcePorts = circuitJson.filter(
     (elm) => elm.type === "source_port"
   );
@@ -16540,9 +16580,11 @@ var createComponentsFromCircuitJson = ({
         })
       );
     } else if (elm.type === "pcb_courtyard_outline") {
+      const outline = elm.outline.length === 2 ? joinedCourtyards.get(elm) : elm.outline;
+      if (!outline) continue;
       components.push(
         new CourtyardOutline({
-          outline: elm.outline,
+          outline,
           layer: elm.layer
         })
       );
@@ -22331,7 +22373,7 @@ function intersectsObstacle(points, obstacle, depth = 0) {
 // lib/utils/system-blocks/round-system-block-route.ts
 import { applyToPoint as applyToPoint33, compose as compose9, rotate as rotate4, translate as translate7 } from "transformation-matrix";
 var EPSILON = 1e-8;
-function roundSystemBlockRoute(route, obstacles) {
+function roundSystemBlockRoute(route, obstacles, wireObstacles = []) {
   const points = [];
   for (const point8 of route) {
     if (points.length && distance9(points.at(-1), point8) < EPSILON) continue;
@@ -22356,6 +22398,27 @@ function roundSystemBlockRoute(route, obstacles) {
     const previous = points[index2 - 1];
     const corner = points[index2];
     const next = points[index2 + 1];
+    const cornerObstacles = [
+      ...obstacles,
+      ...wireObstacles.map((wire) => {
+        const clearance = Math.min(
+          3,
+          Math.max(
+            0,
+            wire.minX - corner.x,
+            corner.x - wire.maxX,
+            wire.minY - corner.y,
+            corner.y - wire.maxY
+          )
+        );
+        return {
+          minX: wire.minX - clearance,
+          maxX: wire.maxX + clearance,
+          minY: wire.minY - clearance,
+          maxY: wire.maxY + clearance
+        };
+      })
+    ];
     const incoming = unitDirection(previous, corner);
     const outgoing = unitDirection(corner, next);
     const turn = Math.atan2(
@@ -22384,7 +22447,7 @@ function roundSystemBlockRoute(route, obstacles) {
       const maxX = Math.max(start.x, corner.x, end.x);
       const minY = Math.min(start.y, corner.y, end.y);
       const maxY = Math.max(start.y, corner.y, end.y);
-      const blocked = obstacles.some(
+      const blocked = cornerObstacles.some(
         (obstacle) => minX < obstacle.maxX && maxX > obstacle.minX && minY < obstacle.maxY && maxY > obstacle.minY
       );
       if (!blocked || trim < 1e-3) break;
@@ -22439,103 +22502,744 @@ function unitDirection(a2, b2) {
   return { x: (b2.x - a2.x) / length9, y: (b2.y - a2.y) / length9 };
 }
 
-// lib/utils/system-blocks/layout-system-blocks.ts
-function layoutSystemBlocks(tree, direction) {
-  const graph = new dagre.graphlib.Graph({
-    compound: true,
-    multigraph: true
-  });
-  graph.setGraph({
-    rankdir: { right: "LR", left: "RL", down: "TB", up: "BT" }[direction ?? "right"],
-    // Compound borders need room for the renderer's 12 mm heading area.
-    nodesep: 24,
-    ranksep: 28,
-    edgesep: 12,
-    marginx: 6,
-    marginy: 6
-  });
-  const blocks = [...tree.groups, ...tree.components];
-  for (const block of blocks) {
-    const { name, displayName, description } = block._parsedProps;
-    const width2 = Math.max(
-      48,
-      Math.min(76, (displayName ?? name).length * 1.7 + 8)
-    );
-    const descriptionLines = description ? Math.ceil(description.length / ((width2 - 8) / 1.3)) : 0;
-    graph.setNode(name, {
-      width: width2,
-      height: Math.max(24, 12 + descriptionLines * 3.5)
-    });
+// lib/utils/system-blocks/measure-system-route-quality.ts
+function measureSystemRouteQuality(routes) {
+  let crossings = 0;
+  let sharedLength = 0;
+  let closeParallelLength = 0;
+  let length9 = 0;
+  let bends = 0;
+  const segments = routes.map(
+    (route) => route.slice(1).map((end, index2) => {
+      const start = route[index2];
+      length9 += Math.abs(end.x - start.x) + Math.abs(end.y - start.y);
+      return { start, end, horizontal: start.y === end.y };
+    })
+  );
+  for (const route of routes) bends += Math.max(0, route.length - 2);
+  for (let i2 = 0; i2 < segments.length; i2++) {
+    for (let j2 = i2 + 1; j2 < segments.length; j2++) {
+      const intersections2 = /* @__PURE__ */ new Set();
+      for (const a2 of segments[i2])
+        for (const b2 of segments[j2]) {
+          if (a2.horizontal === b2.horizontal) {
+            const along2 = a2.horizontal ? "x" : "y";
+            const across = a2.horizontal ? "y" : "x";
+            const overlap = Math.min(
+              Math.max(a2.start[along2], a2.end[along2]),
+              Math.max(b2.start[along2], b2.end[along2])
+            ) - Math.max(
+              Math.min(a2.start[along2], a2.end[along2]),
+              Math.min(b2.start[along2], b2.end[along2])
+            );
+            if (overlap <= 1e-6) continue;
+            const separation = Math.abs(a2.start[across] - b2.start[across]);
+            if (separation < 1e-6) sharedLength += overlap;
+            if (separation < 3 - 1e-6)
+              closeParallelLength += overlap * (3 - separation) / 3;
+          } else {
+            const h2 = a2.horizontal ? a2 : b2, v2 = a2.horizontal ? b2 : a2;
+            const x2 = v2.start.x, y2 = h2.start.y;
+            if (x2 >= Math.min(h2.start.x, h2.end.x) - 1e-6 && x2 <= Math.max(h2.start.x, h2.end.x) + 1e-6 && y2 >= Math.min(v2.start.y, v2.end.y) - 1e-6 && y2 <= Math.max(v2.start.y, v2.end.y) + 1e-6) {
+              intersections2.add(`${x2.toFixed(6)},${y2.toFixed(6)}`);
+            }
+          }
+        }
+      crossings += intersections2.size;
+    }
   }
-  for (const [block, parent] of tree.parents)
-    graph.setParent(block.name, parent.name);
-  const edges = tree.connections.map((connection, index2) => {
-    const { from, to, label } = connection._parsedProps;
-    const edge = { v: from, w: to, name: `connection_${index2}` };
-    graph.setEdge(edge, {
-      width: label === void 0 ? 0 : Math.max(1, label.length * 1.5),
-      height: label === void 0 ? 0 : 4,
-      labelpos: "l",
-      labeloffset: 3
-    });
-    return edge;
-  });
-  if (blocks.length) dagre.layout(graph);
-  const width = Math.max(32, graph.graph().width ?? 0);
-  const height = Math.max(24, graph.graph().height ?? 0);
-  const toPage = compose10(translate8(-width / 2, height / 2), scale3(1, -1));
-  const bounds = new Map(
-    blocks.map((block) => {
-      const node = graph.node(block.name);
-      return [
-        block,
-        {
-          center: applyToPoint34(toPage, { x: node.x, y: node.y }),
-          width: node.width,
-          height: node.height
+  return {
+    crossings,
+    sharedLength,
+    closeParallelLength,
+    bends,
+    length: length9,
+    score: crossings * 200 + sharedLength * 100 + closeParallelLength * 10 + bends * 3 + length9 * 0.05
+  };
+}
+
+// lib/utils/system-blocks/find-system-orthogonal-path.ts
+function findSystemOrthogonalPath(start, end, obstacles, routedSegments) {
+  const xs = [
+    .../* @__PURE__ */ new Set([
+      start.x,
+      end.x,
+      ...obstacles.flatMap((r2) => [r2.left, r2.right]),
+      ...routedSegments.filter(([a2, b2]) => a2.x === b2.x).flatMap(([a2]) => [a2.x - 3, a2.x + 3])
+    ])
+  ].sort((a2, b2) => a2 - b2);
+  const ys = [
+    .../* @__PURE__ */ new Set([
+      start.y,
+      end.y,
+      ...obstacles.flatMap((r2) => [r2.bottom, r2.top]),
+      ...routedSegments.filter(([a2, b2]) => a2.y === b2.y).flatMap(([a2]) => [a2.y - 3, a2.y + 3])
+    ])
+  ].sort((a2, b2) => a2 - b2);
+  xs.unshift(xs[0] - 5);
+  xs.push(xs.at(-1) + 5);
+  ys.unshift(ys[0] - 5);
+  ys.push(ys.at(-1) + 5);
+  const columns = xs.length;
+  const pointAt2 = (node) => ({
+    x: xs[node % columns],
+    y: ys[Math.floor(node / columns)]
+  });
+  const startNode = ys.indexOf(start.y) * columns + xs.indexOf(start.x);
+  const endNode = ys.indexOf(end.y) * columns + xs.indexOf(end.x);
+  const costs = new Float64Array(xs.length * ys.length * 3).fill(Infinity);
+  const previous = new Int32Array(costs.length).fill(-1);
+  const horizontalCosts = new Float64Array(xs.length * ys.length).fill(NaN);
+  const verticalCosts = new Float64Array(horizontalCosts.length).fill(NaN);
+  const queue = [];
+  const enqueue = (state, cost2, priority) => {
+    const entry = { state, cost: cost2, priority };
+    queue.push(entry);
+    let i2 = queue.length - 1;
+    while (i2 > 0) {
+      const parent = i2 - 1 >> 1;
+      if (queue[parent].priority <= priority) break;
+      queue[i2] = queue[parent];
+      i2 = parent;
+    }
+    queue[i2] = entry;
+  };
+  costs[startNode * 3 + 2] = 0;
+  enqueue(startNode * 3 + 2, 0, 0);
+  while (queue.length) {
+    const current2 = queue[0];
+    const last = queue.pop();
+    if (queue.length) {
+      let i2 = 0;
+      while (2 * i2 + 1 < queue.length) {
+        let child = 2 * i2 + 1;
+        if (child + 1 < queue.length && queue[child + 1].priority < queue[child].priority)
+          child++;
+        if (last.priority <= queue[child].priority) break;
+        queue[i2] = queue[child];
+        i2 = child;
+      }
+      queue[i2] = last;
+    }
+    if (current2.cost !== costs[current2.state]) continue;
+    const node = Math.floor(current2.state / 3);
+    if (node === endNode) {
+      const path = [];
+      for (let state = current2.state; state !== -1; state = previous[state])
+        path.push(pointAt2(Math.floor(state / 3)));
+      return path.reverse();
+    }
+    const from = pointAt2(node);
+    const col = node % columns;
+    const row = Math.floor(node / columns);
+    const neighbors = [
+      ...col > 0 ? [node - 1] : [],
+      ...col + 1 < columns ? [node + 1] : [],
+      ...row > 0 ? [node - columns] : [],
+      ...row + 1 < ys.length ? [node + columns] : []
+    ];
+    for (const neighbor of neighbors) {
+      const to = pointAt2(neighbor);
+      const horizontal = from.y === to.y;
+      const left = Math.min(from.x, to.x), right = Math.max(from.x, to.x);
+      const bottom = Math.min(from.y, to.y), top = Math.max(from.y, to.y);
+      const edgeCosts = horizontal ? horizontalCosts : verticalCosts;
+      const edgeIndex = Math.min(node, neighbor);
+      let travelCost = edgeCosts[edgeIndex];
+      if (Number.isNaN(travelCost)) {
+        if (obstacles.some(
+          (r2) => horizontal ? from.y > r2.bottom + 1e-6 && from.y < r2.top - 1e-6 && right > r2.left + 1e-6 && left < r2.right - 1e-6 : from.x > r2.left + 1e-6 && from.x < r2.right - 1e-6 && top > r2.bottom + 1e-6 && bottom < r2.top - 1e-6
+        )) {
+          edgeCosts[edgeIndex] = Infinity;
+          continue;
         }
-      ];
+        let congestion = 0;
+        for (const [a2, b2] of routedSegments) {
+          const sameAxis = a2.y === b2.y === horizontal;
+          if (sameAxis) {
+            const separation = horizontal ? Math.abs(a2.y - from.y) : Math.abs(a2.x - from.x);
+            if (horizontal && separation < 3)
+              congestion += Math.max(
+                0,
+                Math.min(right, Math.max(a2.x, b2.x)) - Math.max(left, Math.min(a2.x, b2.x))
+              ) * (separation < 1e-6 ? 40 : (3 - separation) * 8);
+            if (!horizontal && separation < 3)
+              congestion += Math.max(
+                0,
+                Math.min(top, Math.max(a2.y, b2.y)) - Math.max(bottom, Math.min(a2.y, b2.y))
+              ) * (separation < 1e-6 ? 40 : (3 - separation) * 8);
+          } else if (horizontal ? a2.x >= left && a2.x <= right && from.y >= Math.min(a2.y, b2.y) && from.y <= Math.max(a2.y, b2.y) : a2.y >= bottom && a2.y <= top && from.x >= Math.min(a2.x, b2.x) && from.x <= Math.max(a2.x, b2.x))
+            congestion += 80;
+        }
+        travelCost = right - left + top - bottom + congestion;
+        edgeCosts[edgeIndex] = travelCost;
+      }
+      if (travelCost === Infinity) continue;
+      const axis = horizontal ? 0 : 1;
+      const state = neighbor * 3 + axis;
+      const bend = current2.state % 3 === 2 || current2.state % 3 === axis ? 0 : 6;
+      const cost2 = current2.cost + travelCost + bend;
+      if (cost2 >= costs[state]) continue;
+      costs[state] = cost2;
+      previous[state] = current2.state;
+      enqueue(
+        state,
+        cost2,
+        cost2 + Math.abs(to.x - end.x) + Math.abs(to.y - end.y)
+      );
+    }
+  }
+}
+
+// lib/utils/system-blocks/route-system-blocks.ts
+var SYSTEM_CONNECTION_LABEL_HORIZONTAL_PADDING = 3;
+function getSystemConnectionLabelWidth(label) {
+  let width = SYSTEM_CONNECTION_LABEL_HORIZONTAL_PADDING;
+  for (const character of label) {
+    width += /[MW@%#&]|[^\x00-\x7f]/.test(character) ? 2.5 : /[A-Z0-9]/.test(character) ? 1.85 : /[il.,:;!| ']/.test(character) ? 0.85 : 1.5;
+  }
+  return width;
+}
+function routeSystemBlocks(tree, bounds, initialRoutes) {
+  const obstacles = [...bounds].map(
+    ([block, box3]) => ({
+      left: box3.center.x - box3.width / 2 - 2,
+      right: tree.groups.includes(block) ? box3.center.x - box3.width / 2 + Math.min(
+        box3.width,
+        block._parsedProps.description ? box3.width : (block._parsedProps.displayName ?? block.name).length * 1.8 + 6
+      ) : box3.center.x + box3.width / 2 + 2,
+      bottom: tree.groups.includes(block) ? box3.center.y + box3.height / 2 - (block._parsedProps.description ? 12 : 7) : box3.center.y - box3.height / 2 - 2,
+      top: box3.center.y + box3.height / 2 + 2
     })
   );
-  const obstacles = blocks.map((block) => {
-    const { center, width: width2, height: height2 } = bounds.get(block);
-    const top = center.y + height2 / 2;
+  const portsByBlock = /* @__PURE__ */ new Map();
+  const portsByConnection = /* @__PURE__ */ new Map();
+  for (const connection of tree.connections) {
+    const endpoints = tree.endpoints.get(connection);
+    const route = initialRoutes.get(connection).route;
+    const ports = [endpoints.from, endpoints.to].map((block, end) => {
+      const box3 = bounds.get(block);
+      const target = bounds.get(
+        end === 0 ? endpoints.to : endpoints.from
+      ).center;
+      const guide = initialRoutes.get(connection).label_anchor_center ?? target;
+      const point8 = endpoints.from === endpoints.to ? end === 0 ? route[0] : route.at(-1) : guide;
+      const dx2 = (point8.x - box3.center.x) / box3.width;
+      const dy2 = (point8.y - box3.center.y) / box3.height;
+      const side = Math.abs(dx2) >= Math.abs(dy2) ? dx2 >= 0 ? 0 : 2 : dy2 >= 0 ? 1 : 3;
+      const port = {
+        point: { ...point8 },
+        escape: { ...point8 },
+        side,
+        target: guide,
+        connection
+      };
+      const ports2 = portsByBlock.get(block) ?? [];
+      ports2.push(port);
+      portsByBlock.set(block, ports2);
+      return port;
+    });
+    portsByConnection.set(connection, ports);
+  }
+  for (const [block, ports] of portsByBlock) {
+    const box3 = bounds.get(block);
+    for (const side of [0, 1, 2, 3]) {
+      const horizontal = side % 2 === 0;
+      const facePorts = ports.filter((p2) => p2.side === side).sort(
+        (a2, b2) => horizontal ? (a2.target.y - box3.center.y) / Math.max(1, Math.abs(a2.target.x - box3.center.x)) - (b2.target.y - box3.center.y) / Math.max(1, Math.abs(b2.target.x - box3.center.x)) : (a2.target.x - box3.center.x) / Math.max(1, Math.abs(a2.target.y - box3.center.y)) - (b2.target.x - box3.center.x) / Math.max(1, Math.abs(b2.target.y - box3.center.y))
+      );
+      const span = horizontal ? box3.height : box3.width;
+      const spacing = Math.min(
+        4,
+        (span - 4) / Math.max(1, facePorts.length - 1)
+      );
+      facePorts.forEach((port, index2) => {
+        const offset = (index2 - (facePorts.length - 1) / 2) * spacing;
+        const sign = side < 2 ? 1 : -1;
+        port.point = horizontal ? {
+          x: box3.center.x + sign * box3.width / 2,
+          y: box3.center.y + offset
+        } : {
+          x: box3.center.x + offset,
+          y: box3.center.y + sign * box3.height / 2
+        };
+        port.escape = horizontal ? { x: port.point.x + sign * 4, y: port.point.y } : { x: port.point.x, y: port.point.y + sign * 4 };
+      });
+    }
+  }
+  const labels = /* @__PURE__ */ new Map();
+  const labelCenters = /* @__PURE__ */ new Map();
+  const labelAttachments = /* @__PURE__ */ new Map();
+  const portObstacles = [...portsByConnection.values()].flat().map(({ escape }) => ({
+    left: escape.x - 1,
+    right: escape.x + 1,
+    bottom: escape.y - 1,
+    top: escape.y + 1
+  }));
+  for (const connection of tree.connections) {
+    const label = connection._parsedProps.label;
+    const center = initialRoutes.get(connection).label_anchor_center;
+    if (label !== void 0 && center) {
+      const halfWidth = getSystemConnectionLabelWidth(label) / 2;
+      const occupied = [...obstacles, ...labels.values(), ...portObstacles];
+      const fits = (rectangle) => !occupied.some(
+        (r2) => rectangle.left < r2.right + 1 && rectangle.right > r2.left - 1 && rectangle.bottom < r2.top + 1 && rectangle.top > r2.bottom - 1
+      );
+      const [start, end] = portsByConnection.get(connection);
+      const endpoints = tree.endpoints.get(connection);
+      const selfLoop = endpoints.from === endpoints.to;
+      const vertical = start.escape.x === end.escape.x;
+      const horizontal = start.escape.y === end.escape.y;
+      const oppositeFaces = (start.side + 2) % 4 === end.side;
+      const straightAxis = vertical && start.side % 2 === 1 ? "y" : horizontal && start.side % 2 === 0 ? "x" : void 0;
+      const straight = !selfLoop && oppositeFaces && straightAxis !== void 0 && (end.escape[straightAxis] - start.escape[straightAxis]) * (start.escape[straightAxis] - start.point[straightAxis]) >= 0;
+      const sameFaceReturn = selfLoop && start.side === end.side;
+      const textFitsHorizontalSpan = horizontal && !selfLoop && Math.abs(start.escape.x - end.escape.x) >= halfWidth * 2;
+      if ((straight || sameFaceReturn) && !textFitsHorizontalSpan && !obstacles.some(
+        (r2) => vertical ? start.escape.x > r2.left && start.escape.x < r2.right && Math.max(start.escape.y, end.escape.y) > r2.bottom && Math.min(start.escape.y, end.escape.y) < r2.top : start.escape.y > r2.bottom && start.escape.y < r2.top && Math.max(start.escape.x, end.escape.x) > r2.left && Math.min(start.escape.x, end.escape.x) < r2.right
+      )) {
+        const attachment = {
+          x: (start.escape.x + end.escape.x) / 2,
+          y: (start.escape.y + end.escape.y) / 2
+        };
+        const signs = selfLoop ? [start.side < 2 ? 1 : -1] : [1, -1];
+        for (const sign of signs) {
+          const candidate = vertical ? { x: attachment.x + sign * (halfWidth + 2), y: attachment.y } : { x: attachment.x, y: attachment.y + sign * 4.5 };
+          const rectangle = {
+            left: candidate.x - halfWidth,
+            right: candidate.x + halfWidth,
+            bottom: candidate.y - 2.5,
+            top: candidate.y + 2.5
+          };
+          if (!fits(rectangle)) continue;
+          labels.set(connection, rectangle);
+          labelCenters.set(connection, candidate);
+          labelAttachments.set(connection, attachment);
+          break;
+        }
+        if (labelAttachments.has(connection)) continue;
+      }
+      let placed = false;
+      for (let radius = 0; !placed; radius++) {
+        const offsets = radius === 0 ? [[0, 0]] : [
+          [0, radius * 6],
+          [0, -radius * 6],
+          [radius * 6, 0],
+          [-radius * 6, 0]
+        ];
+        for (const [dx2, dy2] of offsets) {
+          const candidate = { x: center.x + dx2, y: center.y + dy2 };
+          const rectangle = {
+            left: candidate.x - halfWidth,
+            right: candidate.x + halfWidth,
+            bottom: candidate.y - 2.5,
+            top: candidate.y + 2.5
+          };
+          if (!fits(rectangle)) continue;
+          labels.set(connection, rectangle);
+          labelCenters.set(connection, candidate);
+          placed = true;
+          break;
+        }
+      }
+    }
+  }
+  const routeConnection = (connection, routedSegments) => {
+    const [start, end] = portsByConnection.get(connection);
+    const label = labels.get(connection);
+    const attachment = labelAttachments.get(connection);
+    const blocked = [
+      ...obstacles,
+      ...[...labels].filter(([c2]) => c2 !== connection).map(([, r2]) => r2)
+    ];
+    const waypoints = [start.escape];
+    if (attachment) {
+      waypoints.push(attachment);
+    } else if (label) {
+      const y2 = labelCenters.get(connection).y;
+      const labelPorts = [
+        { x: label.left, y: y2 },
+        { x: label.right, y: y2 }
+      ];
+      if (start.escape.x > end.escape.x) labelPorts.reverse();
+      waypoints.push(...labelPorts);
+    }
+    waypoints.push(end.escape);
+    const route = [start.point];
+    for (let i2 = 1; i2 < waypoints.length; i2++) {
+      const legObstacles = label && (attachment || i2 !== 2) ? [...blocked, label] : blocked;
+      const leg = findSystemOrthogonalPath(
+        waypoints[i2 - 1],
+        waypoints[i2],
+        legObstacles,
+        routedSegments
+      );
+      if (!leg) {
+        throw new Error(
+          `Cannot route system connection from "${connection._parsedProps.from}" to "${connection._parsedProps.to}" around blocks and labels`
+        );
+      }
+      route.push(...leg);
+    }
+    route.push(end.point);
+    const simplified = [];
+    for (const point8 of route) {
+      const previous = simplified.at(-1);
+      if (previous?.x === point8.x && previous.y === point8.y) continue;
+      const before = simplified.at(-2);
+      if (before && previous && (before.x === previous.x && previous.x === point8.x || before.y === previous.y && previous.y === point8.y))
+        simplified.pop();
+      simplified.push(point8);
+    }
     return {
-      minX: center.x - width2 / 2,
-      maxX: center.x + width2 / 2,
-      minY: tree.groups.some((group) => group === block) ? top - 12 : center.y - height2 / 2,
-      maxY: top
+      route: simplified,
+      label_anchor_center: labelCenters.get(connection)
+    };
+  };
+  const connections = [...tree.connections].sort((a2, b2) => {
+    const distance29 = (connection) => {
+      const [from, to] = portsByConnection.get(connection);
+      return Math.abs(from.point.x - to.point.x) + Math.abs(from.point.y - to.point.y);
     };
+    return distance29(a2) - distance29(b2) || a2._parsedProps.from.localeCompare(b2._parsedProps.from) || a2._parsedProps.to.localeCompare(b2._parsedProps.to) || (a2._parsedProps.label ?? "").localeCompare(b2._parsedProps.label ?? "");
   });
-  for (const [index2, connection] of tree.connections.entries()) {
-    if (connection._parsedProps.label === void 0) continue;
-    const edge = graph.edge(edges[index2]);
-    const label = applyToPoint34(toPage, { x: edge.x, y: edge.y });
+  const segmentsOf = (resolvedRoutes) => [...resolvedRoutes].flatMap(
+    ({ route }) => route.slice(1).map((point8, index2) => [route[index2], point8])
+  );
+  let routes = /* @__PURE__ */ new Map();
+  for (const connection of connections)
+    routes.set(
+      connection,
+      routeConnection(connection, segmentsOf(routes.values()))
+    );
+  let score = measureSystemRouteQuality(
+    [...routes.values()].map((r2) => r2.route)
+  ).score;
+  const reroute = (affected) => {
+    const candidate = new Map(
+      [...routes].filter(([connection]) => !affected.has(connection))
+    );
+    for (const connection of connections.filter((c2) => affected.has(c2)))
+      candidate.set(
+        connection,
+        routeConnection(connection, segmentsOf(candidate.values()))
+      );
+    const candidateScore = measureSystemRouteQuality(
+      [...candidate.values()].map((r2) => r2.route)
+    ).score;
+    if (candidateScore >= score - 1e-6) return false;
+    routes = candidate;
+    score = candidateScore;
+    return true;
+  };
+  let proposals = 0;
+  const proposalLimit = Math.min(64, connections.length * 4);
+  for (let pass = 0; pass < 4 && proposals < proposalLimit; pass++) {
+    let improved = false;
+    for (const [block, ports] of portsByBlock) {
+      if (ports.length < 2) continue;
+      const center = bounds.get(block).center;
+      const perimeter = [...ports].sort(
+        (a2, b2) => Math.atan2(a2.point.y - center.y, a2.point.x - center.x) - Math.atan2(b2.point.y - center.y, b2.point.x - center.x)
+      );
+      for (let i2 = 0; i2 < perimeter.length && proposals < proposalLimit; i2++) {
+        proposals++;
+        const a2 = perimeter[i2], b2 = perimeter[(i2 + 1) % perimeter.length];
+        const swap2 = () => {
+          ;
+          [a2.point, b2.point] = [b2.point, a2.point];
+          [a2.escape, b2.escape] = [b2.escape, a2.escape];
+          [a2.side, b2.side] = [b2.side, a2.side];
+        };
+        swap2();
+        if (reroute(/* @__PURE__ */ new Set([a2.connection, b2.connection]))) {
+          improved = true;
+          perimeter[i2] = b2;
+          perimeter[(i2 + 1) % perimeter.length] = a2;
+        } else swap2();
+      }
+    }
+    if (!improved) break;
+    const quality = measureSystemRouteQuality(
+      [...routes.values()].map((r2) => r2.route)
+    );
+    if (quality.crossings === 0 && quality.sharedLength === 0 && quality.closeParallelLength === 0)
+      break;
+  }
+  for (const connection of connections) reroute(/* @__PURE__ */ new Set([connection]));
+  return routes;
+}
+
+// lib/utils/system-blocks/round-system-block-connections.ts
+function roundSystemBlockConnections(tree, bounds, routes) {
+  const obstacles = [...bounds].map(
+    ([block, box3]) => ({
+      minX: box3.center.x - box3.width / 2,
+      maxX: box3.center.x + box3.width / 2,
+      minY: tree.groups.includes(block) ? box3.center.y + box3.height / 2 - (block._parsedProps.description ? 12 : 7) : box3.center.y - box3.height / 2,
+      maxY: box3.center.y + box3.height / 2
+    })
+  );
+  for (const [connection, resolved] of routes) {
+    const label = resolved.label_anchor_center;
+    if (!label) continue;
+    const halfWidth = (getSystemConnectionLabelWidth(connection._parsedProps.label) - SYSTEM_CONNECTION_LABEL_HORIZONTAL_PADDING) / 2;
     obstacles.push({
-      minX: label.x - edge.width / 2 - 0.5,
-      maxX: label.x + edge.width / 2 + 0.5,
-      minY: label.y - edge.height / 2 - 0.5,
-      maxY: label.y + edge.height / 2 + 0.5
+      minX: label.x - halfWidth,
+      maxX: label.x + halfWidth,
+      minY: label.y - 2.5,
+      maxY: label.y + 2.5
+    });
+  }
+  const rounded = new Map(routes);
+  for (const [connection, resolved] of routes) {
+    const wireObstacles = [];
+    for (const [other, { route }] of rounded) {
+      if (other === connection) continue;
+      for (let index2 = 1; index2 < route.length; index2++) {
+        const end = route[index2];
+        const points = [
+          route[index2 - 1],
+          ...end.cubic_bezier_control_points ?? [],
+          end
+        ];
+        wireObstacles.push({
+          minX: Math.min(...points.map((p2) => p2.x)),
+          maxX: Math.max(...points.map((p2) => p2.x)),
+          minY: Math.min(...points.map((p2) => p2.y)),
+          maxY: Math.max(...points.map((p2) => p2.y))
+        });
+      }
+    }
+    const blocked = [
+      ...obstacles,
+      ...wireObstacles.map((wire) => ({
+        minX: wire.minX - 3,
+        maxX: wire.maxX + 3,
+        minY: wire.minY - 3,
+        maxY: wire.maxY + 3
+      }))
+    ];
+    const { from, to } = tree.endpoints.get(connection);
+    const selfLoop = from === to ? createSystemBlockSelfLoop(resolved.route, bounds.get(from), blocked) : void 0;
+    rounded.set(connection, {
+      ...resolved,
+      route: selfLoop ?? roundSystemBlockRoute(resolved.route, obstacles, wireObstacles)
     });
   }
-  const routes = new Map(
-    tree.connections.map((connection, index2) => {
-      const edge = graph.edge(edges[index2]);
-      const route = edge.points.map((point8) => applyToPoint34(toPage, point8)).filter(
-        (point8, index3, points) => index3 === 0 || point8.x !== points[index3 - 1].x || point8.y !== points[index3 - 1].y
+  return rounded;
+}
+
+// lib/utils/system-blocks/layout-system-blocks.ts
+function layoutSystemBlocks(tree, direction) {
+  const degrees2 = /* @__PURE__ */ new Map();
+  for (const {
+    _parsedProps: { from, to }
+  } of tree.connections) {
+    degrees2.set(from, (degrees2.get(from) ?? 0) + 1);
+    degrees2.set(to, (degrees2.get(to) ?? 0) + 1);
+  }
+  const layout = layoutContainer(tree, void 0, direction ?? "right", degrees2);
+  const toPage = compose10(
+    translate8(-layout.width / 2, layout.height / 2),
+    scale3(1, -1)
+  );
+  for (const box3 of layout.bounds.values())
+    box3.center = applyToPoint34(toPage, box3.center);
+  for (const [connection, resolved] of layout.routes) {
+    resolved.route = resolved.route.map((point8) => applyToPoint34(toPage, point8));
+    if (resolved.label_anchor_center)
+      resolved.label_anchor_center = applyToPoint34(
+        toPage,
+        resolved.label_anchor_center
+      );
+    const endpoints = tree.endpoints.get(connection);
+    for (const [block, index2] of [
+      [endpoints.from, 0],
+      [endpoints.to, resolved.route.length - 1]
+    ]) {
+      const box3 = layout.bounds.get(block);
+      const point8 = resolved.route[index2];
+      let dx2 = point8.x - box3.center.x, dy2 = point8.y - box3.center.y;
+      if (dx2 === 0 && dy2 === 0) {
+        const neighbor = resolved.route[index2 === 0 ? 1 : index2 - 1];
+        dx2 = neighbor.x - point8.x;
+        dy2 = neighbor.y - point8.y;
+      }
+      const factor = Math.max(
+        Math.abs(dx2) / (box3.width / 2),
+        Math.abs(dy2) / (box3.height / 2)
       );
-      const label_anchor_center = connection._parsedProps.label === void 0 ? void 0 : applyToPoint34(toPage, { x: edge.x, y: edge.y });
-      const { from, to } = tree.endpoints.get(connection);
-      const selfLoop = from === to ? createSystemBlockSelfLoop(route, bounds.get(from), obstacles) : void 0;
-      return [
-        connection,
-        {
-          route: selfLoop ?? roundSystemBlockRoute(route, obstacles),
-          label_anchor_center
-        }
-      ];
-    })
+      resolved.route[index2] = {
+        x: box3.center.x + dx2 / factor,
+        y: box3.center.y + dy2 / factor
+      };
+    }
+  }
+  const routes = roundSystemBlockConnections(
+    tree,
+    layout.bounds,
+    routeSystemBlocks(tree, layout.bounds, layout.routes)
   );
+  let width = layout.width, height = layout.height;
+  for (const [connection, resolved] of routes) {
+    for (const point8 of resolved.route) {
+      width = Math.max(width, 2 * (Math.abs(point8.x) + 6));
+      height = Math.max(height, 2 * (Math.abs(point8.y) + 6));
+    }
+    if (resolved.label_anchor_center) {
+      width = Math.max(
+        width,
+        2 * (Math.abs(resolved.label_anchor_center.x) + getSystemConnectionLabelWidth(connection._parsedProps.label) / 2 + 6)
+      );
+      height = Math.max(
+        height,
+        2 * (Math.abs(resolved.label_anchor_center.y) + 8)
+      );
+    }
+  }
+  return { width, height, bounds: layout.bounds, routes };
+}
+function layoutContainer(tree, parent, direction, degrees2) {
+  const children = [
+    ...tree.groups,
+    ...tree.components
+  ].filter((block) => tree.parents.get(block) === parent);
+  const groupLayouts = /* @__PURE__ */ new Map();
+  const graph = new dagre.graphlib.Graph({ multigraph: true });
+  graph.setGraph({
+    rankdir: { right: "LR", left: "RL", down: "TB", up: "BT" }[direction],
+    nodesep: parent ? 12 : 18,
+    ranksep: 18,
+    edgesep: 8,
+    marginx: 8,
+    marginy: 8
+  });
+  for (const block of children) {
+    if (tree.groups.includes(block)) {
+      const child = layoutContainer(
+        tree,
+        block,
+        direction,
+        degrees2
+      );
+      groupLayouts.set(block, child);
+      graph.setNode(block.name, { width: child.width, height: child.height });
+    } else {
+      const { name, displayName, description } = block._parsedProps;
+      const width2 = Math.max(
+        32,
+        Math.min(62, (displayName ?? name).length * 1.5 + 8)
+      );
+      const descriptionLines = description ? Math.ceil(description.length / ((width2 - 8) / 1.3)) : 0;
+      graph.setNode(name, {
+        width: width2,
+        height: Math.max(18, 12 + descriptionLines * 3.5)
+      });
+    }
+  }
+  const childFor = (block) => {
+    let current2 = block;
+    while (current2 && tree.parents.get(current2) !== parent)
+      current2 = tree.parents.get(current2);
+    return current2;
+  };
+  const edges = /* @__PURE__ */ new Map();
+  for (const [index2, connection] of tree.connections.entries()) {
+    const endpoints = tree.endpoints.get(connection);
+    const from = childFor(endpoints.from), to = childFor(endpoints.to);
+    if (!from || !to || from === to && (from !== endpoints.from || to !== endpoints.to))
+      continue;
+    const props = connection._parsedProps;
+    const reverse4 = props.direction === "both" && degrees2.get(props.to) > degrees2.get(props.from);
+    const edge = {
+      v: (reverse4 ? to : from).name,
+      w: (reverse4 ? from : to).name,
+      name: `connection_${index2}`
+    };
+    graph.setEdge(edge, {
+      width: props.label === void 0 ? 0 : getSystemConnectionLabelWidth(props.label),
+      height: props.label === void 0 ? 0 : 5,
+      labelpos: "c",
+      labeloffset: 0
+    });
+    edges.set(connection, edge);
+  }
+  if (children.length) dagre.layout(graph);
+  const heading = parent ? parent._parsedProps.description ? 14 : 8 : 0;
+  const minimumWidth = parent ? Math.min(
+    90,
+    (parent._parsedProps.displayName ?? parent.name).length * 1.8 + 8
+  ) : 32;
+  const width = Math.max(minimumWidth, graph.graph().width ?? 0);
+  const height = Math.max(24, (graph.graph().height ?? 0) + heading);
+  const bounds = /* @__PURE__ */ new Map();
+  const routes = /* @__PURE__ */ new Map();
+  for (const block of children) {
+    const node = graph.node(block.name);
+    bounds.set(block, {
+      center: { x: node.x, y: node.y + heading },
+      width: node.width,
+      height: node.height
+    });
+    const child = groupLayouts.get(block);
+    if (!child) continue;
+    const offset = {
+      x: node.x - child.width / 2,
+      y: node.y + heading - child.height / 2
+    };
+    const shift = (point8) => ({
+      x: point8.x + offset.x,
+      y: point8.y + offset.y
+    });
+    for (const [descendant, box3] of child.bounds)
+      bounds.set(descendant, { ...box3, center: shift(box3.center) });
+    for (const [connection, resolved] of child.routes)
+      routes.set(connection, {
+        route: resolved.route.map(shift),
+        label_anchor_center: resolved.label_anchor_center ? shift(resolved.label_anchor_center) : void 0
+      });
+  }
+  for (const [connection, edgeKey] of edges) {
+    const edge = graph.edge(edgeKey);
+    const route = edge.points.map((point8) => ({
+      x: point8.x,
+      y: point8.y + heading
+    }));
+    const from = childFor(tree.endpoints.get(connection).from);
+    if (edgeKey.v !== from.name) route.reverse();
+    routes.set(connection, {
+      route,
+      label_anchor_center: connection._parsedProps.label === void 0 ? void 0 : { x: edge.x, y: edge.y + heading }
+    });
+  }
+  const bundles = /* @__PURE__ */ new Map();
+  for (const [connection, edge] of edges) {
+    if (connection._parsedProps.label === void 0) continue;
+    const targets = bundles.get(edge.v) ?? /* @__PURE__ */ new Map();
+    const connections = targets.get(edge.w) ?? [];
+    connections.push(connection);
+    targets.set(edge.w, connections);
+    bundles.set(edge.v, targets);
+  }
+  const crossAxis = direction === "right" || direction === "left" ? "y" : "x";
+  for (const targets of bundles.values()) {
+    for (const connections of targets.values()) {
+      const slots = connections.map((c2) => routes.get(c2).label_anchor_center).sort((a2, b2) => a2[crossAxis] - b2[crossAxis]);
+      const destinationPosition = (connection) => {
+        const endpoints = tree.endpoints.get(connection);
+        const targetChild = edges.get(connection).w;
+        const endpoint = childFor(endpoints.to).name === targetChild ? endpoints.to : endpoints.from;
+        return bounds.get(endpoint).center[crossAxis];
+      };
+      connections.sort(
+        (a2, b2) => destinationPosition(a2) - destinationPosition(b2)
+      );
+      connections.forEach((connection, index2) => {
+        routes.get(connection).label_anchor_center = slots[index2];
+      });
+    }
+  }
   return { width, height, bounds, routes };
 }
 
@@ -22634,7 +23338,7 @@ function SystemBlockPage_doInitialSystemBlockRender(page) {
   }
   for (const connection of tree.connections) {
     const { from, to } = tree.endpoints.get(connection);
-    const { name: name2, kind, direction: direction2, label } = connection._parsedProps;
+    const { name: name2, kind, direction: direction2, label, color: color3, lineStyle } = connection._parsedProps;
     db2.system_block_connection.insert({
       system_block_page_id: page.system_block_page_id,
       from_system_block_component_id: componentIds.get(from),
@@ -22642,6 +23346,8 @@ function SystemBlockPage_doInitialSystemBlockRender(page) {
       name: name2,
       label,
       direction: direction2,
+      color: color3,
+      line_style: lineStyle,
       is_signal: kind === "signal",
       is_power: kind === "power",
       ...layout.routes.get(connection)
@@ -158599,7 +159305,7 @@ var RoutingPhasePreparationError = class extends Error {
 var package_default = {
   name: "@tscircuit/core",
   type: "module",
-  version: "0.0.2299",
+  version: "0.0.2300",
   types: "dist/index.d.ts",
   main: "dist/index.js",
   module: "dist/index.js",
@@ -158677,12 +159383,12 @@ var package_default = {
     "bun-match-svg": "0.0.12",
     "calculate-elbow": "^0.0.12",
     "chokidar-cli": "^3.0.0",
-    "circuit-json": "^0.0.547",
+    "circuit-json": "^0.0.548",
     "circuit-json-to-bom-csv": "^0.0.28",
     "circuit-json-to-bpc": "^0.0.13",
     "circuit-json-to-connectivity-map": "^0.0.33",
     "circuit-json-to-spice": "^0.0.45",
-    "circuit-to-svg": "^0.0.456",
+    "circuit-to-svg": "^0.0.457",
     concurrently: "^9.1.2",
     "connectivity-map": "^1.0.1",
     debug: "^4.3.6",
@@ -158769,7 +159475,7 @@ var package_default = {
   overrides: {
     "@tscircuit/graphics-debug-3d": "https://jscdn.tscircuit.com/@tscircuit/graphics-debug-3d/0.0.1.tgz",
     "@tscircuit/props": "^0.0.721",
-    "circuit-json": "^0.0.547",
+    "circuit-json": "^0.0.548",
     "@tscircuit/cableprinter": "^0.0.6"
   },
   browser: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tscircuit/core",
   "type": "module",
-  "version": "0.0.2300",
+  "version": "0.0.2301",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -79,12 +79,12 @@
     "bun-match-svg": "0.0.12",
     "calculate-elbow": "^0.0.12",
     "chokidar-cli": "^3.0.0",
-    "circuit-json": "^0.0.547",
+    "circuit-json": "^0.0.548",
     "circuit-json-to-bom-csv": "^0.0.28",
     "circuit-json-to-bpc": "^0.0.13",
     "circuit-json-to-connectivity-map": "^0.0.33",
     "circuit-json-to-spice": "^0.0.45",
-    "circuit-to-svg": "^0.0.456",
+    "circuit-to-svg": "^0.0.457",
     "concurrently": "^9.1.2",
     "connectivity-map": "^1.0.1",
     "debug": "^4.3.6",
@@ -171,7 +171,7 @@
   "overrides": {
     "@tscircuit/graphics-debug-3d": "https://jscdn.tscircuit.com/@tscircuit/graphics-debug-3d/0.0.1.tgz",
     "@tscircuit/props": "^0.0.721",
-    "circuit-json": "^0.0.547",
+    "circuit-json": "^0.0.548",
     "@tscircuit/cableprinter": "^0.0.6"
   },
   "browser": {