@tscircuit/pcb-viewer 1.3.1 → 1.3.3

package/dist/index.js

@@ -479,19 +479,19 @@ var require_dist = __commonJS({
         });
         module2.exports = __toCommonJS2(src_exports2);
         var import_transformation_matrix6 = require("transformation-matrix");
-        var import_react16 = require("react");
+        var import_react15 = require("react");
         var useMouseMatrixTransform2 = function() {
             var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-            var extRef = (0, import_react16.useRef)(null);
+            var extRef = (0, import_react15.useRef)(null);
             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_react16.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_react16.useState)(0), 2), waitCounter = _ref1[0], setWaitCounter = _ref1[1];
-            var _ref2 = _sliced_to_array((0, import_react16.useReducer)(function(s) {
+            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;
             }, 0), 2), extChangeCounter = _ref2[0], incExtChangeCounter = _ref2[1];
-            var setTransform = (0, import_react16.useCallback)(function(newTransform) {
+            var setTransform = (0, import_react15.useCallback)(function(newTransform) {
                 if (props.onSetTransform) {
                     props.onSetTransform(newTransform);
                 }
@@ -502,7 +502,7 @@ var require_dist = __commonJS({
                 props.onSetTransform,
                 setInternalTransform
             ]);
-            var setTransformExt = (0, import_react16.useCallback)(function(newTransform) {
+            var setTransformExt = (0, import_react15.useCallback)(function(newTransform) {
                 setTransform(newTransform);
                 incExtChangeCounter();
             }, [
@@ -510,7 +510,7 @@ var require_dist = __commonJS({
             ]);
             var _props_transform;
             var transform = (_props_transform = props.transform) !== null && _props_transform !== void 0 ? _props_transform : internalTransform;
-            (0, import_react16.useEffect)(function() {
+            (0, import_react15.useEffect)(function() {
                 var handleMouseDown = function handleMouseDown(e) {
                     m0 = getMousePos(e);
                     md = true;
@@ -593,7 +593,7 @@ var require_dist = __commonJS({
                 waitCounter,
                 extChangeCounter
             ]);
-            var applyTransformToPoint = (0, import_react16.useCallback)(function(obj) {
+            var applyTransformToPoint = (0, import_react15.useCallback)(function(obj) {
                 return (0, import_transformation_matrix6.applyToPoint)(transform, obj);
             }, [
                 transform
@@ -620,14 +620,12 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 // src/PCBViewer.tsx
-var import_react15 = __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_react11 = __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",
@@ -1290,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");
@@ -1320,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)();
@@ -1340,50 +1341,53 @@ 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_react12 = require("react");
+var import_react11 = require("react");
 // src/lib/convert-element-to-primitive.ts
 var convertElementToPrimitives = function(element, allElements) {
     var _parent_pcb_component = "pcb_component_id" in element ? allElements.find(function(elm) {
@@ -1609,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,
@@ -1671,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,
@@ -1679,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];
@@ -1768,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"
         },
@@ -1810,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)();
@@ -1881,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"
@@ -1909,130 +1923,177 @@ 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), {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", _object_spread_props(_object_spread({}, props), {
         style: _object_spread({
             backgroundColor: "#1F1F1F",
             border: "1px solid #666",
@@ -2044,8 +2105,9 @@ var ToolbarButton = function(_param) {
             alignSelf: "start",
             color: "#eee",
             cursor: "pointer"
-        }, props.style)
-    }), children);
+        }, props.style),
+        children: children
+    }));
 };
 var ToolbarOverlay = function(param) {
     var children = param.children, elements = param.elements;
@@ -2062,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"
         },
@@ -2072,142 +2134,207 @@ 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", {
-        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, {
-        style: errorCount > 0 ? {
-            color: "red"
-        } : {},
-        onClick: function() {
-            return setErrorsOpen(!isErrorsOpen);
         },
-        onMouseLeave: function() {
-            return setErrorsOpen(false);
-        }
-    }, /* @__PURE__ */ React.createElement("div", null, errorCount, " errors"), isErrorsOpen && /* @__PURE__ */ React.createElement("div", {
-        style: {
-            display: "grid",
-            gridTemplateColumns: "100px 300px"
-        }
-    }, elements === null || elements === void 0 ? void 0 : elements.filter(function(e) {
-        return e.type.includes("error");
-    }).map(function(e, i) {
-        return /* @__PURE__ */ React.createElement(import_react9.Fragment, {
-            key: i
-        }, /* @__PURE__ */ React.createElement("div", null, e.error_type), /* @__PURE__ */ React.createElement("div", null, e.message));
-    })))));
+        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__ */ React.createElement("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
         style: {
             position: "relative"
         },
-        ref: containerRef
-    }, 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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("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
-        }, /* @__PURE__ */ React.createElement("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__ */ React.createElement("div", {
-            className: import_css2.css(_templateObject1(), (screenPort1.x + screenPort2.x) / 2, (screenPort1.y + screenPort2.y) / 2)
-        }, /* @__PURE__ */ React.createElement("div", {
-            className: "error-message"
-        }, el.message), /* @__PURE__ */ React.createElement("div", {
-            className: import_css2.css(_templateObject2())
-        })));
-    }));
+        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
+                });
+                var canLineBeDrawn = !(isNaN(screenPort1.x) || isNaN(screenPort1.y) || isNaN(screenPort2.x) || isNaN(screenPort2.y));
+                var midPoint = {
+                    x: (screenPort1.x + screenPort2.x) / 2,
+                    y: (screenPort1.y + screenPort2.y) / 2
+                };
+                if (isNaN(midPoint.x) || isNaN(midPoint.y)) {
+                    midPoint.x = isNaN(screenPort1.x) ? screenPort2.x : screenPort1.x;
+                    midPoint.y = isNaN(screenPort1.y) ? screenPort2.y : screenPort1.y;
+                }
+                if (isNaN(midPoint.x) || isNaN(midPoint.y)) {
+                    return null;
+                }
+                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: canLineBeDrawn && /* @__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(), midPoint.x, midPoint.y),
+                            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_react12.useMemo)(function() {
+    var primitives = (0, import_react11.useMemo)(function() {
         var primitives2 = props.elements.flatMap(function(elm) {
             return convertElementToPrimitives(elm, props.elements);
         });
@@ -2215,23 +2342,27 @@ var CanvasElementsRenderer = function(props) {
     }, [
         props.elements
     ]);
-    return /* @__PURE__ */ import_react11.default.createElement(MouseElementTracker, {
-        transform: props.transform,
-        primitives: primitives
-    }, /* @__PURE__ */ import_react11.default.createElement(DimensionOverlay, {
-        transform: props.transform
-    }, /* @__PURE__ */ import_react11.default.createElement(ToolbarOverlay, {
-        elements: props.elements
-    }, /* @__PURE__ */ import_react11.default.createElement(ErrorOverlay, {
-        transform: props.transform,
-        elements: props.elements
-    }, /* @__PURE__ */ import_react11.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());
@@ -2239,11 +2370,11 @@ var import_use_mouse_matrix_transform = __toESM(require_dist());
 var noop = function noop() {};
 var isBrowser = typeof window !== "undefined";
 // node_modules/react-use/esm/useIsomorphicLayoutEffect.js
-var import_react13 = require("react");
-var useIsomorphicLayoutEffect = isBrowser ? import_react13.useLayoutEffect : import_react13.useEffect;
+var import_react12 = require("react");
+var useIsomorphicLayoutEffect = isBrowser ? import_react12.useLayoutEffect : import_react12.useEffect;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 // node_modules/react-use/esm/useMeasure.js
-var import_react14 = require("react");
+var import_react13 = require("react");
 var defaultState = {
     x: 0,
     y: 0,
@@ -2255,9 +2386,9 @@ var defaultState = {
     right: 0
 };
 function useMeasure() {
-    var _a = (0, import_react14.useState)(null), element = _a[0], ref = _a[1];
-    var _b = (0, import_react14.useState)(defaultState), rect = _b[0], setRect = _b[1];
-    var observer = (0, import_react14.useMemo)(function() {
+    var _a = (0, import_react13.useState)(null), element = _a[0], ref = _a[1];
+    var _b = (0, import_react13.useState)(defaultState), rect = _b[0], setRect = _b[1];
+    var observer = (0, import_react13.useMemo)(function() {
         return new window.ResizeObserver(function(entries) {
             if (entries[0]) {
                 var _a2 = entries[0].contentRect, x = _a2.x, y = _a2.y, width = _a2.width, height = _a2.height, top_1 = _a2.top, left = _a2.left, bottom = _a2.bottom, right = _a2.right;
@@ -2297,17 +2428,18 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
 // src/PCBViewer.tsx
 var import_transformation_matrix5 = require("transformation-matrix");
 var import_builder4 = require("@tscircuit/builder");
+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_react15.useState)([]), 2), stateElements = _ref[0], setStateElements = _ref[1];
+    var _ref = _sliced_to_array((0, import_react14.useState)([]), 2), stateElements = _ref[0], setStateElements = _ref[1];
     var _useMeasure_default = _sliced_to_array(useMeasure_default(), 2), ref = _useMeasure_default[0], refDimensions = _useMeasure_default[1];
-    var _ref1 = _sliced_to_array((0, import_react15.useState)(defaultTransform), 2), transform = _ref1[0], setTransformInternal = _ref1[1];
+    var _ref1 = _sliced_to_array((0, import_react14.useState)(defaultTransform), 2), transform = _ref1[0], setTransformInternal = _ref1[1];
     var _ref2 = (0, import_use_mouse_matrix_transform.default)({
         transform: transform,
         onSetTransform: setTransformInternal
     }), transformRef = _ref2.ref, setTransform = _ref2.setTransform;
-    var _ref3 = _sliced_to_array((0, import_react15.useState)(null), 2), error = _ref3[0], setError = _ref3[1];
+    var _ref3 = _sliced_to_array((0, import_react14.useState)(null), 2), error = _ref3[0], setError = _ref3[1];
     var resetTransform = function() {
         var elmBounds = (refDimensions === null || refDimensions === void 0 ? void 0 : refDimensions.width) > 0 ? refDimensions : {
             width: 500,
@@ -2331,7 +2463,7 @@ var PCBViewer = function(param) {
         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_react15.useEffect)(function() {
+    (0, import_react14.useEffect)(function() {
         var doRender = function doRender() {
             return _doRender.apply(this, arguments);
         };
@@ -2367,7 +2499,7 @@ var PCBViewer = function(param) {
     }, [
         children
     ]);
-    (0, import_react15.useEffect)(function() {
+    (0, import_react14.useEffect)(function() {
         if (refDimensions && refDimensions.width !== 0 && (children || soup)) {
             resetTransform();
         }
@@ -2375,34 +2507,42 @@ var PCBViewer = function(param) {
         children,
         refDimensions
     ]);
-    if (error) return /* @__PURE__ */ import_react15.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;
-    return /* @__PURE__ */ import_react15.default.createElement("div", {
-        ref: transformRef
-    }, /* @__PURE__ */ import_react15.default.createElement("div", {
-        ref: ref
-    }, /* @__PURE__ */ import_react15.default.createElement(ContextProviders, null, /* @__PURE__ */ import_react15.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 = {