@tscircuit/pcb-viewer 1.3.0 → 1.3.2

package/dist/index.js

@@ -333,6 +333,26 @@ function _templateObject() {
     };
     return data;
 }
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n                  position: absolute;\n                  z-index: 1000;\n                  left: ",
+        "px;\n                  top: ",
+        "px;\n                  color: red;\n                  text-align: center;\n                  font-family: sans-serif;\n                  font-size: 12px;\n                  display: flex;\n                  flex-direction: column;\n                  align-items: center;\n                  cursor: pointer;\n                  transform: translate(-50%, -100%);\n\n                  & .error-message {\n                    opacity: 0;\n                    pointer-events: none;\n\n                    width: 200px;\n                    transition: opacity 0.2s;\n                    margin-bottom: 10px;\n                  }\n\n                  &:hover .error-message {\n                    opacity: 1;\n                    display: flex;\n                  }\n                "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n                    width: 10px;\n                    height: 10px;\n                    transform: translate(0, 5px) rotate(45deg);\n                    background-color: red;\n                  "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -458,7 +478,7 @@ var require_dist = __commonJS({
             }
         });
         module2.exports = __toCommonJS2(src_exports2);
-        var import_transformation_matrix5 = require("transformation-matrix");
+        var import_transformation_matrix6 = require("transformation-matrix");
         var import_react15 = require("react");
         var useMouseMatrixTransform2 = function() {
             var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -466,7 +486,7 @@ var require_dist = __commonJS({
             var _props_canvasElm;
             var outerCanvasElm = (_props_canvasElm = props.canvasElm) !== null && _props_canvasElm !== void 0 ? _props_canvasElm : extRef.current;
             var _props_initialTransform;
-            var _ref = _sliced_to_array((0, import_react15.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix5.identity)()), 2), internalTransform = _ref[0], setInternalTransform = _ref[1];
+            var _ref = _sliced_to_array((0, import_react15.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix6.identity)()), 2), internalTransform = _ref[0], setInternalTransform = _ref[1];
             var _ref1 = _sliced_to_array((0, import_react15.useState)(0), 2), waitCounter = _ref1[0], setWaitCounter = _ref1[1];
             var _ref2 = _sliced_to_array((0, import_react15.useReducer)(function(s) {
                 return s + 1;
@@ -498,7 +518,7 @@ var require_dist = __commonJS({
                 };
                 var handleMouseUp = function handleMouseUp(e) {
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     md = false;
@@ -507,11 +527,11 @@ var require_dist = __commonJS({
                     mlastrel = getMousePos(e);
                     if (!md) return;
                     m1 = getMousePos(e);
-                    setTransform((0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(m1.x - m0.x, m1.y - m0.y), init_tf));
+                    setTransform((0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(m1.x - m0.x, m1.y - m0.y), init_tf));
                 };
                 var handleMouseWheel = function handleMouseWheel(e) {
                     var center = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(center.x, center.y), (0, import_transformation_matrix5.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix5.translate)(-center.x, -center.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(center.x, center.y), (0, import_transformation_matrix6.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix6.translate)(-center.x, -center.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     e.preventDefault();
@@ -520,7 +540,7 @@ var require_dist = __commonJS({
                     if (!md) return;
                     md = false;
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                 };
@@ -574,7 +594,7 @@ var require_dist = __commonJS({
                 extChangeCounter
             ]);
             var applyTransformToPoint = (0, import_react15.useCallback)(function(obj) {
-                return (0, import_transformation_matrix5.applyToPoint)(transform, obj);
+                return (0, import_transformation_matrix6.applyToPoint)(transform, obj);
             }, [
                 transform
             ]);
@@ -600,14 +620,12 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 // src/PCBViewer.tsx
-var import_react14 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_react_fiber = require("@tscircuit/react-fiber");
 var import_builder3 = require("@tscircuit/builder");
-// src/components/CanvasElementsRenderer.tsx
-var import_react10 = __toESM(require("react"));
 // src/components/CanvasPrimitiveRenderer.tsx
 var import_react_supergrid = require("react-supergrid");
-var import_react4 = __toESM(require("react"));
+var import_react4 = require("react");
 // src/assets/alphabet.ts
 var svgAlphabet = {
     "0": "M0.4544564813877358 0L0.2723441540828736 0.03592830447352719L0.1086847233315459 0.14528754990019965L0.020630545837255005 0.3040632652221331L0 0.5395277421960205L0.049259221760993496 0.7369487828466779L0.18080513776237842 0.9005494166306564L0.37036887043974215 0.9872116270037247L0.5864663759301132 1L0.8148695622827444 0.9332890276148733L0.9326583645506394 0.8113052246023419L1 0.4031281830668562L0.833288960385582 0.09886798567812842L0.6801767918233781 0.02483708485091681L0.4544564813877358 0",
@@ -1270,15 +1288,17 @@ var import_zustand = require("zustand");
 // src/components/ContextProviders.tsx
 var import_react = require("react");
 var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 var StoreContext = (0, import_react2.createContext)(null);
 var ContextProviders = function(param) {
     var children = param.children;
     var store = (0, import_react.useMemo)(function() {
         return createStore();
     }, []);
-    return /* @__PURE__ */ React.createElement(StoreContext.Provider, {
-        value: store
-    }, children);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreContext.Provider, {
+        value: store,
+        children: children
+    });
 };
 // src/global-store.ts
 var import_react3 = require("react");
@@ -1300,6 +1320,7 @@ var useStore = function(s) {
 };
 // src/components/CanvasPrimitiveRenderer.tsx
 var import_builder = require("@tscircuit/builder");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var CanvasPrimitiveRenderer = function(param) {
     var primitives = param.primitives, transform = param.transform, grid = param.grid, _param_width = param.width, width = _param_width === void 0 ? 500 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 500 : _param_height;
     var canvasRefs = (0, import_react4.useRef)();
@@ -1320,47 +1341,50 @@ var CanvasPrimitiveRenderer = function(param) {
         transform,
         selectedLayer
     ]);
-    return /* @__PURE__ */ import_react4.default.createElement("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
         style: {
             backgroundColor: "black",
             width: width,
             height: height,
             position: "relative"
-        }
-    }, /* @__PURE__ */ import_react4.default.createElement(import_react_supergrid.SuperGrid, {
-        textColor: "rgba(0,255,0,0.8)",
-        majorColor: "rgba(0,255,0,0.4)",
-        minorColor: "rgba(0,255,0,0.2)",
-        screenSpaceCellSize: 200,
-        width: width,
-        height: height,
-        transform: transform,
-        stringifyCoord: function(x, y, z) {
-            return "".concat((0, import_react_supergrid.toMMSI)(x, z), ", ").concat((0, import_react_supergrid.toMMSI)(y, z));
-        }
-    }), import_builder.all_layers.map(function(l) {
-        return l.replace(/-/g, "");
-    }).concat([
-        "drill",
-        "other"
-    ]).map(function(layer, i) {
-        return /* @__PURE__ */ import_react4.default.createElement("canvas", {
-            key: layer,
-            ref: function(el) {
-                var _canvasRefs_current;
-                (_canvasRefs_current = canvasRefs.current) !== null && _canvasRefs_current !== void 0 ? _canvasRefs_current : canvasRefs.current = {};
-                canvasRefs.current[layer] = el;
-            },
-            style: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                pointerEvents: "none"
-            },
-            width: width,
-            height: height
-        });
-    }));
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_supergrid.SuperGrid, {
+                textColor: "rgba(0,255,0,0.8)",
+                majorColor: "rgba(0,255,0,0.4)",
+                minorColor: "rgba(0,255,0,0.2)",
+                screenSpaceCellSize: 200,
+                width: width,
+                height: height,
+                transform: transform,
+                stringifyCoord: function(x, y, z) {
+                    return "".concat((0, import_react_supergrid.toMMSI)(x, z), ", ").concat((0, import_react_supergrid.toMMSI)(y, z));
+                }
+            }),
+            import_builder.all_layers.map(function(l) {
+                return l.replace(/-/g, "");
+            }).concat([
+                "drill",
+                "other"
+            ]).map(function(layer, i) {
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("canvas", {
+                    ref: function(el) {
+                        var _canvasRefs_current;
+                        (_canvasRefs_current = canvasRefs.current) !== null && _canvasRefs_current !== void 0 ? _canvasRefs_current : canvasRefs.current = {};
+                        canvasRefs.current[layer] = el;
+                    },
+                    style: {
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        pointerEvents: "none"
+                    },
+                    width: width,
+                    height: height
+                }, layer);
+            })
+        ]
+    });
 };
 // src/components/CanvasElementsRenderer.tsx
 var import_react11 = require("react");
@@ -1589,11 +1613,12 @@ var convertElementToPrimitives = function(element, allElements) {
     return [];
 };
 // src/components/MouseElementTracker.tsx
-var import_react6 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_react7 = require("react");
 var import_transformation_matrix2 = require("transformation-matrix");
 // src/components/ElementOverlayBox.tsx
-var import_react5 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var containerStyle = {
     position: "absolute",
     left: 0,
@@ -1651,7 +1676,7 @@ var HighlightedPrimitiveBoxWithText = function(param) {
     var sip = 26;
     var _layerColorHightlightMap_primitive__element_layer;
     var color = (_layerColorHightlightMap_primitive__element_layer = layerColorHightlightMap[primitive === null || primitive === void 0 ? void 0 : (_primitive__element = primitive._element) === null || _primitive__element === void 0 ? void 0 : _primitive__element.layer]) !== null && _layerColorHightlightMap_primitive__element_layer !== void 0 ? _layerColorHightlightMap_primitive__element_layer : "red";
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
         style: {
             position: "absolute",
             left: x - w / 2 - 8,
@@ -1659,45 +1684,49 @@ var HighlightedPrimitiveBoxWithText = function(param) {
             width: w + 16,
             height: h + 16,
             color: color
-        }
-    }, /* @__PURE__ */ import_react5.default.createElement("div", {
-        style: {
-            // width: finalState ? `${100 + 20 * si}%` : "100%",
-            // height: finalState ? `${100 + 20 * si}%` : "100%",
-            // marginLeft: finalState ? `${-10 * si}%` : 0,
-            // marginTop: finalState ? `${-10 * si}%` : 0,
-            width: finalState ? "calc(100% + ".concat(sip * 2 * si, "px)") : "100%",
-            height: finalState ? "calc(100% + ".concat(sip * 2 * si, "px)") : "100%",
-            marginLeft: finalState ? "".concat(-sip * si, "px") : 0,
-            marginTop: finalState ? "".concat(-sip * si, "px") : 0,
-            border: "1px solid ".concat(color),
-            opacity: finalState ? 1 : si === 0 ? 1 : 0,
-            transition: "width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s, opacity 0.2s"
-        }
-    }, /* @__PURE__ */ import_react5.default.createElement("div", {
-        style: {
-            position: "absolute",
-            left: 0,
-            bottom: h + 20 + sip * si,
-            marginLeft: finalState ? "".concat(-sip * si, "px") : 0,
-            marginBottom: finalState ? 0 : -sip * si,
-            transition: "margin-left 0.2s, margin-bottom 0.2s",
-            lineHeight: "0.8em"
-        }
-    }, getTextForHighlightedPrimitive(primitive))));
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+            style: {
+                // width: finalState ? `${100 + 20 * si}%` : "100%",
+                // height: finalState ? `${100 + 20 * si}%` : "100%",
+                // marginLeft: finalState ? `${-10 * si}%` : 0,
+                // marginTop: finalState ? `${-10 * si}%` : 0,
+                width: finalState ? "calc(100% + ".concat(sip * 2 * si, "px)") : "100%",
+                height: finalState ? "calc(100% + ".concat(sip * 2 * si, "px)") : "100%",
+                marginLeft: finalState ? "".concat(-sip * si, "px") : 0,
+                marginTop: finalState ? "".concat(-sip * si, "px") : 0,
+                border: "1px solid ".concat(color),
+                opacity: finalState ? 1 : si === 0 ? 1 : 0,
+                transition: "width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s, opacity 0.2s"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+                style: {
+                    position: "absolute",
+                    left: 0,
+                    bottom: h + 20 + sip * si,
+                    marginLeft: finalState ? "".concat(-sip * si, "px") : 0,
+                    marginBottom: finalState ? 0 : -sip * si,
+                    transition: "margin-left 0.2s, margin-bottom 0.2s",
+                    lineHeight: "0.8em"
+                },
+                children: getTextForHighlightedPrimitive(primitive)
+            })
+        })
+    });
 };
 var ElementOverlayBox = function(param) {
     var highlightedPrimitives = param.highlightedPrimitives;
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
-        style: containerStyle
-    }, highlightedPrimitives.map(function(primitive, i) {
-        return /* @__PURE__ */ import_react5.default.createElement(HighlightedPrimitiveBoxWithText, {
-            key: i,
-            primitive: primitive
-        });
-    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+        style: containerStyle,
+        children: highlightedPrimitives.map(function(primitive, i) {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HighlightedPrimitiveBoxWithText, {
+                primitive: primitive
+            }, i);
+        })
+    });
 };
 // src/components/MouseElementTracker.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var MouseElementTracker = function(param) {
     var children = param.children, transform = param.transform, primitives = param.primitives;
     var _ref = _sliced_to_array((0, import_react6.useState)([]), 2), mousedPrimitives = _ref[0], setMousedPrimitives = _ref[1];
@@ -1748,7 +1777,7 @@ var MouseElementTracker = function(param) {
         mousedPrimitives,
         transform
     ]);
-    return /* @__PURE__ */ import_react6.default.createElement("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", {
         style: {
             position: "relative"
         },
@@ -1790,14 +1819,19 @@ var MouseElementTracker = function(param) {
                 }
                 setMousedPrimitives(mousedPrimitives2);
             }
-        }
-    }, children, /* @__PURE__ */ import_react6.default.createElement(ElementOverlayBox, {
-        highlightedPrimitives: highlightedPrimitives
-    }));
+        },
+        children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ElementOverlayBox, {
+                highlightedPrimitives: highlightedPrimitives
+            })
+        ]
+    });
 };
 // src/components/DimensionOverlay.tsx
 var import_react8 = require("react");
 var import_transformation_matrix3 = require("transformation-matrix");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DimensionOverlay = function(param) {
     var children = param.children, transform = param.transform;
     if (!transform) transform = (0, import_transformation_matrix3.identity)();
@@ -1861,7 +1895,7 @@ var DimensionOverlay = function(param) {
     };
     arrowScreenBounds.width = arrowScreenBounds.right - arrowScreenBounds.left;
     arrowScreenBounds.height = arrowScreenBounds.bottom - arrowScreenBounds.top;
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
         ref: containerRef,
         style: {
             position: "relative"
@@ -1889,131 +1923,178 @@ var DimensionOverlay = function(param) {
             } else if (dimensionToolVisible) {
                 setDimensionToolVisible(false);
             }
-        }
-    }, children, dimensionToolVisible && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-        style: {
-            position: "absolute",
-            left: arrowScreenBounds.left,
-            width: arrowScreenBounds.width,
-            textAlign: "center",
-            top: screenDStart.y + 2,
-            color: "red",
-            mixBlendMode: "difference",
-            pointerEvents: "none",
-            marginTop: arrowScreenBounds.flipY ? 0 : -20,
-            fontSize: 12,
-            fontFamily: "sans-serif",
-            zIndex: 1e3
-        }
-    }, Math.abs(dStart.x - dEnd.x).toFixed(2)), /* @__PURE__ */ React.createElement("div", {
-        style: {
-            position: "absolute",
-            left: screenDEnd.x,
-            height: arrowScreenBounds.height,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            top: arrowScreenBounds.top,
-            color: "red",
-            pointerEvents: "none",
-            mixBlendMode: "difference",
-            fontSize: 12,
-            fontFamily: "sans-serif",
-            zIndex: 1e3
-        }
-    }, /* @__PURE__ */ React.createElement("div", {
-        style: {
-            marginLeft: arrowScreenBounds.flipX ? "-100%" : 4,
-            paddingRight: 4
-        }
-    }, Math.abs(dStart.y - dEnd.y).toFixed(2))), /* @__PURE__ */ React.createElement("svg", {
-        style: {
-            position: "absolute",
-            left: 0,
-            top: 0,
-            pointerEvents: "none",
-            mixBlendMode: "difference",
-            zIndex: 1e3
         },
-        width: containerBounds.width,
-        height: containerBounds.height
-    }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("marker", {
-        id: "head",
-        orient: "auto",
-        markerWidth: "3",
-        markerHeight: "4",
-        refX: "2",
-        refY: "2"
-    }, /* @__PURE__ */ React.createElement("path", {
-        d: "M0,0 V4 L2,2 Z",
-        fill: "red"
-    }))), /* @__PURE__ */ React.createElement("line", {
-        x1: screenDStart.x,
-        y1: screenDStart.y,
-        x2: screenDEnd.x,
-        y2: screenDEnd.y,
-        markerEnd: "url(#head)",
-        strokeWidth: 1.5,
-        fill: "none",
-        stroke: "red"
-    }), /* @__PURE__ */ React.createElement("line", {
-        x1: screenDStart.x,
-        y1: screenDStart.y,
-        x2: screenDEnd.x,
-        y2: screenDStart.y,
-        strokeWidth: 1.5,
-        fill: "none",
-        strokeDasharray: "2,2",
-        stroke: "red"
-    }), /* @__PURE__ */ React.createElement("line", {
-        x1: screenDEnd.x,
-        y1: screenDStart.y,
-        x2: screenDEnd.x,
-        y2: screenDEnd.y,
-        strokeWidth: 1.5,
-        fill: "none",
-        strokeDasharray: "2,2",
-        stroke: "red"
-    })), /* @__PURE__ */ React.createElement("div", {
-        style: {
-            right: 0,
-            bottom: 0,
-            position: "absolute",
-            color: "red",
-            fontFamily: "sans-serif",
-            fontSize: 12,
-            margin: 4
-        }
-    }, "(", dStart.x.toFixed(2), ",", dStart.y.toFixed(2), ")", /* @__PURE__ */ React.createElement("br", null), "(", dEnd.x.toFixed(2), ",", dEnd.y.toFixed(2), ")", /* @__PURE__ */ React.createElement("br", null), "dist:", " ", Math.sqrt(Math.pow(dEnd.x - dStart.x, 2) + Math.pow(dEnd.y - dStart.y, 2)).toFixed(2))));
+        children: [
+            children,
+            dimensionToolVisible && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, {
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+                        style: {
+                            position: "absolute",
+                            left: arrowScreenBounds.left,
+                            width: arrowScreenBounds.width,
+                            textAlign: "center",
+                            top: screenDStart.y + 2,
+                            color: "red",
+                            mixBlendMode: "difference",
+                            pointerEvents: "none",
+                            marginTop: arrowScreenBounds.flipY ? 0 : -20,
+                            fontSize: 12,
+                            fontFamily: "sans-serif",
+                            zIndex: 1e3
+                        },
+                        children: Math.abs(dStart.x - dEnd.x).toFixed(2)
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+                        style: {
+                            position: "absolute",
+                            left: screenDEnd.x,
+                            height: arrowScreenBounds.height,
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "center",
+                            top: arrowScreenBounds.top,
+                            color: "red",
+                            pointerEvents: "none",
+                            mixBlendMode: "difference",
+                            fontSize: 12,
+                            fontFamily: "sans-serif",
+                            zIndex: 1e3
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+                            style: {
+                                marginLeft: arrowScreenBounds.flipX ? "-100%" : 4,
+                                paddingRight: 4
+                            },
+                            children: Math.abs(dStart.y - dEnd.y).toFixed(2)
+                        })
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", {
+                        style: {
+                            position: "absolute",
+                            left: 0,
+                            top: 0,
+                            pointerEvents: "none",
+                            mixBlendMode: "difference",
+                            zIndex: 1e3
+                        },
+                        width: containerBounds.width,
+                        height: containerBounds.height,
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", {
+                                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("marker", {
+                                    id: "head",
+                                    orient: "auto",
+                                    markerWidth: "3",
+                                    markerHeight: "4",
+                                    refX: "2",
+                                    refY: "2",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", {
+                                        d: "M0,0 V4 L2,2 Z",
+                                        fill: "red"
+                                    })
+                                })
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", {
+                                x1: screenDStart.x,
+                                y1: screenDStart.y,
+                                x2: screenDEnd.x,
+                                y2: screenDEnd.y,
+                                markerEnd: "url(#head)",
+                                strokeWidth: 1.5,
+                                fill: "none",
+                                stroke: "red"
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", {
+                                x1: screenDStart.x,
+                                y1: screenDStart.y,
+                                x2: screenDEnd.x,
+                                y2: screenDStart.y,
+                                strokeWidth: 1.5,
+                                fill: "none",
+                                strokeDasharray: "2,2",
+                                stroke: "red"
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", {
+                                x1: screenDEnd.x,
+                                y1: screenDStart.y,
+                                x2: screenDEnd.x,
+                                y2: screenDEnd.y,
+                                strokeWidth: 1.5,
+                                fill: "none",
+                                strokeDasharray: "2,2",
+                                stroke: "red"
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
+                        style: {
+                            right: 0,
+                            bottom: 0,
+                            position: "absolute",
+                            color: "red",
+                            fontFamily: "sans-serif",
+                            fontSize: 12,
+                            margin: 4
+                        },
+                        children: [
+                            "(",
+                            dStart.x.toFixed(2),
+                            ",",
+                            dStart.y.toFixed(2),
+                            ")",
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                            "(",
+                            dEnd.x.toFixed(2),
+                            ",",
+                            dEnd.y.toFixed(2),
+                            ")",
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                            "dist:",
+                            " ",
+                            Math.sqrt(Math.pow(dEnd.x - dStart.x, 2) + Math.pow(dEnd.y - dStart.y, 2)).toFixed(2)
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 };
 // src/components/ToolbarOverlay.tsx
 var import_react9 = require("react");
 var import_css = require("@emotion/css");
 var import_builder2 = require("@tscircuit/builder");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var LayerButton = function(param) {
     var name = param.name, selected = param.selected, onClick = param.onClick;
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
         className: import_css.css(_templateObject()),
-        onClick: onClick
-    }, /* @__PURE__ */ React.createElement("span", {
-        style: {
-            marginRight: 2,
-            opacity: selected ? 1 : 0
-        }
-    }, "•"), /* @__PURE__ */ React.createElement("span", {
-        style: {
-            marginLeft: 2,
-            fontWeight: 500,
-            color: LAYER_NAME_TO_COLOR[name.replace(/-/, "")]
-        }
-    }, name));
+        onClick: onClick,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {
+                style: {
+                    marginRight: 2,
+                    opacity: selected ? 1 : 0
+                },
+                children: "•"
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {
+                style: {
+                    marginLeft: 2,
+                    fontWeight: 500,
+                    color: LAYER_NAME_TO_COLOR[name.replace(/-/, "")]
+                },
+                children: name
+            })
+        ]
+    });
 };
 var ToolbarButton = function(_param) {
     var children = _param.children, props = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({}, props), {
-        style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", _object_spread_props(_object_spread({}, props), {
+        style: _object_spread({
             backgroundColor: "#1F1F1F",
             border: "1px solid #666",
             margin: 4,
@@ -2024,13 +2105,15 @@ var ToolbarButton = function(_param) {
             alignSelf: "start",
             color: "#eee",
             cursor: "pointer"
-        }
-    }), children);
+        }, props.style),
+        children: children
+    }));
 };
 var ToolbarOverlay = function(param) {
     var children = param.children, elements = param.elements;
     var _ref = _sliced_to_array((0, import_react9.useState)(false), 2), isMouseOverContainer = _ref[0], setIsMouseOverContainer = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react9.useState)(false), 2), isLayerMenuOpen = _ref1[0], setLayerMenuOpen = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react9.useState)(false), 2), isErrorsOpen = _ref2[0], setErrorsOpen = _ref2[1];
     var _useStore = _sliced_to_array(useStore(function(s) {
         return [
             s.selected_layer,
@@ -2041,7 +2124,7 @@ var ToolbarOverlay = function(param) {
     var errorCount = (_elements_filter_length = elements === null || elements === void 0 ? void 0 : elements.filter(function(e) {
         return e.type.includes("error");
     }).length) !== null && _elements_filter_length !== void 0 ? _elements_filter_length : 0;
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
         style: {
             position: "relative"
         },
@@ -2051,55 +2134,193 @@ var ToolbarOverlay = function(param) {
         onMouseLeave: function() {
             setIsMouseOverContainer(false);
             setLayerMenuOpen(false);
-        }
-    }, children, /* @__PURE__ */ React.createElement("div", {
-        style: {
-            position: "absolute",
-            opacity: isMouseOverContainer ? 1 : 0,
-            top: 16,
-            left: 16,
-            transition: isMouseOverContainer ? "opacity 100ms linear" : "opacity 1s linear",
-            zIndex: 100,
-            color: "red",
-            display: "flex",
-            fontSize: 12,
-            height: 100,
-            fontFamily: "sans-serif"
-        }
-    }, /* @__PURE__ */ React.createElement(ToolbarButton, {
-        onClick: function() {
-            setLayerMenuOpen(!isLayerMenuOpen);
         },
-        onMouseLeave: function() {
-            if (isLayerMenuOpen) {
-                setLayerMenuOpen(false);
-            }
-        }
-    }, /* @__PURE__ */ React.createElement("div", null, "layer:", " ", /* @__PURE__ */ React.createElement("span", {
-        style: {
-            marginLeft: 2,
-            fontWeight: 500,
-            color: LAYER_NAME_TO_COLOR[selectedLayer]
-        }
-    }, selectedLayer)), isLayerMenuOpen && /* @__PURE__ */ React.createElement("div", {
+        children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+                style: {
+                    position: "absolute",
+                    opacity: isMouseOverContainer ? 1 : 0,
+                    top: 16,
+                    left: 16,
+                    transition: isMouseOverContainer ? "opacity 100ms linear" : "opacity 1s linear",
+                    zIndex: 100,
+                    color: "red",
+                    display: "flex",
+                    fontSize: 12,
+                    height: 100,
+                    fontFamily: "sans-serif"
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ToolbarButton, {
+                        onClick: function() {
+                            setLayerMenuOpen(!isLayerMenuOpen);
+                        },
+                        onMouseLeave: function() {
+                            if (isLayerMenuOpen) {
+                                setLayerMenuOpen(false);
+                            }
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+                                children: [
+                                    "layer:",
+                                    " ",
+                                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {
+                                        style: {
+                                            marginLeft: 2,
+                                            fontWeight: 500,
+                                            color: LAYER_NAME_TO_COLOR[selectedLayer]
+                                        },
+                                        children: selectedLayer
+                                    })
+                                ]
+                            }),
+                            isLayerMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                                style: {
+                                    marginTop: 4,
+                                    minWidth: 120
+                                },
+                                children: import_builder2.all_layers.map(function(l) {
+                                    return l.replace(/-/g, "");
+                                }).map(function(layer) {
+                                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayerButton, {
+                                        name: layer,
+                                        selected: layer === selectedLayer,
+                                        onClick: function() {
+                                            selectLayer(layer.replace(/-/, ""));
+                                        }
+                                    }, layer);
+                                })
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ToolbarButton, {
+                        style: errorCount > 0 ? {
+                            color: "red"
+                        } : {},
+                        onClick: function() {
+                            return setErrorsOpen(!isErrorsOpen);
+                        },
+                        onMouseLeave: function() {
+                            return setErrorsOpen(false);
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+                                children: [
+                                    errorCount,
+                                    " errors"
+                                ]
+                            }),
+                            isErrorsOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                                style: {
+                                    display: "grid",
+                                    gridTemplateColumns: "100px 300px"
+                                },
+                                children: elements === null || elements === void 0 ? void 0 : elements.filter(function(e) {
+                                    return e.type.includes("error");
+                                }).map(function(e, i) {
+                                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react9.Fragment, {
+                                        children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                                                children: e.error_type
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                                                children: e.message
+                                            })
+                                        ]
+                                    }, i);
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+// src/components/ErrorOverlay.tsx
+var import_css2 = require("@emotion/css");
+var import_react10 = require("react");
+var import_transformation_matrix4 = require("transformation-matrix");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ErrorOverlay = function(param) {
+    var children = param.children, transform = param.transform, elements = param.elements;
+    var _containerRef_current;
+    if (!transform) transform = (0, import_transformation_matrix4.identity)();
+    var containerRef = (0, import_react10.useRef)(null);
+    var containerBounds = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
         style: {
-            marginTop: 4,
-            minWidth: 120
-        }
-    }, import_builder2.all_layers.map(function(l) {
-        return l.replace(/-/g, "");
-    }).map(function(layer) {
-        return /* @__PURE__ */ React.createElement(LayerButton, {
-            key: layer,
-            name: layer,
-            selected: layer === selectedLayer,
-            onClick: function() {
-                selectLayer(layer.replace(/-/, ""));
-            }
-        });
-    }))), /* @__PURE__ */ React.createElement(ToolbarButton, null, errorCount, " errors")));
+            position: "relative"
+        },
+        ref: containerRef,
+        children: [
+            children,
+            elements === null || elements === void 0 ? void 0 : elements.filter(function(el) {
+                return el.type === "pcb_error";
+            }).map(function(el) {
+                var pcb_port_ids = el.pcb_port_ids;
+                var port1 = elements.find(function(el2) {
+                    return el2.type === "pcb_port" && el2.pcb_port_id === pcb_port_ids[0];
+                });
+                var port2 = elements.find(function(el2) {
+                    return el2.type === "pcb_port" && el2.pcb_port_id === pcb_port_ids[1];
+                });
+                if (!port1 || !port2) return null;
+                var screenPort1 = (0, import_transformation_matrix4.applyToPoint)(transform, {
+                    x: port1.x,
+                    y: port1.y
+                });
+                var screenPort2 = (0, import_transformation_matrix4.applyToPoint)(transform, {
+                    x: port2.x,
+                    y: port2.y
+                });
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", {
+                            style: {
+                                position: "absolute",
+                                left: 0,
+                                top: 0,
+                                pointerEvents: "none",
+                                mixBlendMode: "difference",
+                                zIndex: 1e3
+                            },
+                            width: containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.width,
+                            height: containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.height,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", {
+                                x1: screenPort1.x,
+                                y1: screenPort1.y,
+                                x2: screenPort2.x,
+                                y2: screenPort2.y,
+                                markerEnd: "url(#head)",
+                                strokeWidth: 1.5,
+                                strokeDasharray: "2,2",
+                                fill: "none",
+                                stroke: "red"
+                            })
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
+                            className: import_css2.css(_templateObject1(), (screenPort1.x + screenPort2.x) / 2, (screenPort1.y + screenPort2.y) / 2),
+                            children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+                                    className: "error-message",
+                                    children: el.message
+                                }),
+                                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+                                    className: import_css2.css(_templateObject2())
+                                })
+                            ]
+                        })
+                    ]
+                });
+            })
+        ]
+    });
 };
 // src/components/CanvasElementsRenderer.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CanvasElementsRenderer = function(props) {
     var primitives = (0, import_react11.useMemo)(function() {
         var primitives2 = props.elements.flatMap(function(elm) {
@@ -2109,20 +2330,27 @@ var CanvasElementsRenderer = function(props) {
     }, [
         props.elements
     ]);
-    return /* @__PURE__ */ import_react10.default.createElement(MouseElementTracker, {
-        transform: props.transform,
-        primitives: primitives
-    }, /* @__PURE__ */ import_react10.default.createElement(DimensionOverlay, {
-        transform: props.transform
-    }, /* @__PURE__ */ import_react10.default.createElement(ToolbarOverlay, {
-        elements: props.elements
-    }, /* @__PURE__ */ import_react10.default.createElement(CanvasPrimitiveRenderer, {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MouseElementTracker, {
         transform: props.transform,
         primitives: primitives,
-        width: props.width,
-        height: props.height,
-        grid: props.grid
-    }))));
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DimensionOverlay, {
+            transform: props.transform,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolbarOverlay, {
+                elements: props.elements,
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorOverlay, {
+                    transform: props.transform,
+                    elements: props.elements,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPrimitiveRenderer, {
+                        transform: props.transform,
+                        primitives: primitives,
+                        width: props.width,
+                        height: props.height,
+                        grid: props.grid
+                    })
+                })
+            })
+        })
+    });
 };
 // src/PCBViewer.tsx
 var import_use_mouse_matrix_transform = __toESM(require_dist());
@@ -2186,9 +2414,10 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
     ];
 };
 // src/PCBViewer.tsx
-var import_transformation_matrix4 = require("transformation-matrix");
+var import_transformation_matrix5 = require("transformation-matrix");
 var import_builder4 = require("@tscircuit/builder");
-var defaultTransform = (0, import_transformation_matrix4.compose)((0, import_transformation_matrix4.translate)(400, 300), (0, import_transformation_matrix4.scale)(40, -40));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var defaultTransform = (0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(400, 300), (0, import_transformation_matrix5.scale)(40, -40));
 var PCBViewer = function(param) {
     var children = param.children, soup = param.soup, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height;
     var _ref = _sliced_to_array((0, import_react14.useState)([]), 2), stateElements = _ref[0], setStateElements = _ref[1];
@@ -2219,8 +2448,8 @@ var PCBViewer = function(param) {
         var _elmBounds_width, _elmBounds_height;
         var scaleFactor = Math.min(((_elmBounds_width = elmBounds.width) !== null && _elmBounds_width !== void 0 ? _elmBounds_width : 0) / width, ((_elmBounds_height = elmBounds.height) !== null && _elmBounds_height !== void 0 ? _elmBounds_height : 0) / height2, 100);
         var _elmBounds_width1, _elmBounds_height1;
-        setTransform((0, import_transformation_matrix4.compose)((0, import_transformation_matrix4.translate)(((_elmBounds_width1 = elmBounds.width) !== null && _elmBounds_width1 !== void 0 ? _elmBounds_width1 : 0) / 2, ((_elmBounds_height1 = elmBounds.height) !== null && _elmBounds_height1 !== void 0 ? _elmBounds_height1 : 0) / 2), // translate(100, 0),
-        (0, import_transformation_matrix4.scale)(scaleFactor, -scaleFactor, 0, 0), (0, import_transformation_matrix4.translate)(-center.x, -center.y)));
+        setTransform((0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(((_elmBounds_width1 = elmBounds.width) !== null && _elmBounds_width1 !== void 0 ? _elmBounds_width1 : 0) / 2, ((_elmBounds_height1 = elmBounds.height) !== null && _elmBounds_height1 !== void 0 ? _elmBounds_height1 : 0) / 2), // translate(100, 0),
+        (0, import_transformation_matrix5.scale)(scaleFactor, -scaleFactor, 0, 0), (0, import_transformation_matrix5.translate)(-center.x, -center.y)));
     };
     (0, import_react14.useEffect)(function() {
         var doRender = function doRender() {
@@ -2259,42 +2488,49 @@ var PCBViewer = function(param) {
         children
     ]);
     (0, import_react14.useEffect)(function() {
-        if (refDimensions && refDimensions.width !== 0 && children) {
+        if (refDimensions && refDimensions.width !== 0 && (children || soup)) {
             resetTransform();
         }
     }, [
         children,
         refDimensions
     ]);
-    if (error) return /* @__PURE__ */ import_react14.default.createElement("div", {
+    if (error) return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
         style: {
             color: "red"
-        }
-    }, " ", error, " ");
-    var elements = soup !== null && soup !== void 0 ? soup : stateElements;
-    if (elements.length === 0) return null;
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
-        ref: transformRef
-    }, /* @__PURE__ */ import_react14.default.createElement("div", {
-        ref: ref
-    }, /* @__PURE__ */ import_react14.default.createElement(ContextProviders, null, /* @__PURE__ */ import_react14.default.createElement(CanvasElementsRenderer, {
-        key: refDimensions.width,
-        transform: transform,
-        height: height,
-        width: refDimensions.width,
-        grid: {
-            spacing: 1,
-            view_window: {
-                left: 0,
-                right: refDimensions.width || 500,
-                top: height,
-                bottom: 0
-            }
         },
-        elements: elements.filter(function(elm) {
-            return elm.type.startsWith("pcb_") || elm.type.startsWith("source_");
+        children: [
+            " ",
+            error,
+            " "
+        ]
+    });
+    var elements = soup !== null && soup !== void 0 ? soup : stateElements;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+        ref: transformRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+            ref: ref,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ContextProviders, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CanvasElementsRenderer, {
+                    transform: transform,
+                    height: height,
+                    width: refDimensions.width,
+                    grid: {
+                        spacing: 1,
+                        view_window: {
+                            left: 0,
+                            right: refDimensions.width || 500,
+                            top: height,
+                            bottom: 0
+                        }
+                    },
+                    elements: elements.filter(function(elm) {
+                        return elm.type.startsWith("pcb_") || elm.type.startsWith("source_");
+                    })
+                }, refDimensions.width)
+            })
         })
-    }))));
+    });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {