@tscircuit/pcb-viewer 1.2.26 → 1.3.1

package/dist/index.js

@@ -7,6 +7,9 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -68,6 +71,9 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -95,6 +101,9 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -134,9 +143,49 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
 function _unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array(o, minLen);
@@ -275,6 +324,35 @@ var _loop = function(letter) {
         }
     }
 };
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n        margin-top: 2px;\n        padding: 4px;\n        padding-left: 8px;\n        padding-right: 18px;\n        cursor: pointer;\n\n        &:hover {\n          background-color: rgba(255, 255, 255, 0.1);\n        }\n      "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    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;
@@ -400,20 +478,20 @@ var require_dist = __commonJS({
             }
         });
         module2.exports = __toCommonJS2(src_exports2);
-        var import_transformation_matrix4 = require("transformation-matrix");
-        var import_react10 = require("react");
+        var import_transformation_matrix6 = require("transformation-matrix");
+        var import_react16 = require("react");
         var useMouseMatrixTransform2 = function() {
             var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-            var extRef = (0, import_react10.useRef)(null);
+            var extRef = (0, import_react16.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_react10.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix4.identity)()), 2), internalTransform = _ref[0], setInternalTransform = _ref[1];
-            var _ref1 = _sliced_to_array((0, import_react10.useState)(0), 2), waitCounter = _ref1[0], setWaitCounter = _ref1[1];
-            var _ref2 = _sliced_to_array((0, import_react10.useReducer)(function(s) {
+            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) {
                 return s + 1;
             }, 0), 2), extChangeCounter = _ref2[0], incExtChangeCounter = _ref2[1];
-            var setTransform = (0, import_react10.useCallback)(function(newTransform) {
+            var setTransform = (0, import_react16.useCallback)(function(newTransform) {
                 if (props.onSetTransform) {
                     props.onSetTransform(newTransform);
                 }
@@ -424,7 +502,7 @@ var require_dist = __commonJS({
                 props.onSetTransform,
                 setInternalTransform
             ]);
-            var setTransformExt = (0, import_react10.useCallback)(function(newTransform) {
+            var setTransformExt = (0, import_react16.useCallback)(function(newTransform) {
                 setTransform(newTransform);
                 incExtChangeCounter();
             }, [
@@ -432,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_react10.useEffect)(function() {
+            (0, import_react16.useEffect)(function() {
                 var handleMouseDown = function handleMouseDown(e) {
                     m0 = getMousePos(e);
                     md = true;
@@ -440,7 +518,7 @@ var require_dist = __commonJS({
                 };
                 var handleMouseUp = function handleMouseUp(e) {
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix4.compose)((0, import_transformation_matrix4.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;
@@ -449,11 +527,11 @@ var require_dist = __commonJS({
                     mlastrel = getMousePos(e);
                     if (!md) return;
                     m1 = getMousePos(e);
-                    setTransform((0, import_transformation_matrix4.compose)((0, import_transformation_matrix4.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_matrix4.compose)((0, import_transformation_matrix4.translate)(center.x, center.y), (0, import_transformation_matrix4.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix4.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();
@@ -462,7 +540,7 @@ var require_dist = __commonJS({
                     if (!md) return;
                     md = false;
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix4.compose)((0, import_transformation_matrix4.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;
                 };
@@ -515,8 +593,8 @@ var require_dist = __commonJS({
                 waitCounter,
                 extChangeCounter
             ]);
-            var applyTransformToPoint = (0, import_react10.useCallback)(function(obj) {
-                return (0, import_transformation_matrix4.applyToPoint)(transform, obj);
+            var applyTransformToPoint = (0, import_react16.useCallback)(function(obj) {
+                return (0, import_transformation_matrix6.applyToPoint)(transform, obj);
             }, [
                 transform
             ]);
@@ -542,14 +620,14 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 // src/PCBViewer.tsx
-var import_react9 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_react_fiber = require("@tscircuit/react-fiber");
-var import_builder = require("@tscircuit/builder");
+var import_builder3 = require("@tscircuit/builder");
 // src/components/CanvasElementsRenderer.tsx
-var import_react5 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 // src/components/CanvasPrimitiveRenderer.tsx
 var import_react_supergrid = require("react-supergrid");
-var import_react = __toESM(require("react"));
+var import_react4 = __toESM(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",
@@ -961,6 +1039,7 @@ var LAYER_NAME_TO_COLOR = _object_spread({
     black: "black",
     green: "green",
     board: "white",
+    other: "#eee",
     // TODO more builtin html colors
     // Common eagle names
     top: colors_default.board.copper.f,
@@ -978,13 +1057,29 @@ var LAYER_NAME_TO_COLOR = _object_spread({
     tkeepout: colors_default.board.b_crtyd,
     tplace: colors_default.board.b_silks
 }, colors_default.board);
+var DEFAULT_DRAW_ORDER = [
+    "top",
+    "inner1",
+    "inner2",
+    "inner3",
+    "inner4",
+    "inner5",
+    "inner6",
+    "bottom"
+];
 var Drawer = /*#__PURE__*/ function() {
     "use strict";
-    function Drawer(canvas) {
+    function Drawer(canvasLayerMap) {
         _class_call_check(this, Drawer);
-        this.canvas = canvas;
-        this.canvas = canvas;
-        this.ctx = canvas.getContext("2d");
+        this.foregroundLayer = "top";
+        this.canvasLayerMap = canvasLayerMap;
+        this.ctxLayerMap = Object.fromEntries(Object.entries(canvasLayerMap).map(function(param) {
+            var _param = _sliced_to_array(param, 2), name = _param[0], canvas = _param[1];
+            return [
+                name,
+                canvas.getContext("2d")
+            ];
+        }));
         this.transform = (0, import_transformation_matrix.identity)();
         this.transform.d *= -1;
         this.transform = (0, import_transformation_matrix.compose)(this.transform, (0, import_transformation_matrix.translate)(0, -500));
@@ -998,20 +1093,40 @@ var Drawer = /*#__PURE__*/ function() {
         {
             key: "clear",
             value: function clear() {
-                var _this = this, ctx = _this.ctx, canvas = _this.canvas;
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = Object.values(this.ctxLayerMap)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var ctx = _step.value;
+                        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
             }
         },
         {
             key: "equip",
-            value: function equip(aperature) {
+            value: function equip(aperture) {
                 this.aperture = _object_spread({
                     fontSize: 0,
                     shape: "circle",
                     mode: "add",
                     size: 0,
-                    color: "red"
-                }, aperature);
+                    color: "red",
+                    layer: "top",
+                    opacity: this.foregroundLayer === aperture.color ? 1 : 0.5
+                }, aperture);
             }
         },
         {
@@ -1026,7 +1141,8 @@ var Drawer = /*#__PURE__*/ function() {
                     y + h / 2
                 ]), 2), x2$ = _ref1[0], y2$ = _ref1[1];
                 this.applyAperture();
-                this.ctx.fillRect(x1$, y1$, x2$ - x1$, y2$ - y1$);
+                var ctx = this.getLayerCtx();
+                ctx.fillRect(x1$, y1$, x2$ - x1$, y2$ - y1$);
             }
         },
         {
@@ -1038,10 +1154,11 @@ var Drawer = /*#__PURE__*/ function() {
                     y
                 ]), 2), x$ = _ref[0], y$ = _ref[1];
                 this.applyAperture();
-                this.ctx.beginPath();
-                this.ctx.arc(x$, y$, r$, 0, 2 * Math.PI);
-                this.ctx.fill();
-                this.ctx.closePath();
+                var ctx = this.getLayerCtx();
+                ctx.beginPath();
+                ctx.arc(x$, y$, r$, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.closePath();
             }
         },
         {
@@ -1052,15 +1169,65 @@ var Drawer = /*#__PURE__*/ function() {
                     y
                 ]), 2), x$ = _ref[0], y$ = _ref[1];
                 this.applyAperture();
-                this.ctx.font = "10px sans-serif";
-                this.ctx.fillText(text, x$, y$);
+                var ctx = this.getLayerCtx();
+                ctx.font = "10px sans-serif";
+                ctx.fillText(text, x$, y$);
+            }
+        },
+        {
+            key: "getLayerCtx",
+            value: function getLayerCtx() {
+                var ctx = this.ctxLayerMap[this.aperture.layer];
+                if (!ctx) {
+                    throw new Error('No context for layer "'.concat(this.aperture.layer, '"'));
+                }
+                return ctx;
+            }
+        },
+        {
+            /**
+   * Iterate over each canvas and set the z index based on the layer order, but
+   * always render the foreground layer on top.
+   *
+   * Also: Set the opacity of every non-foreground layer to 0.5
+   */ key: "orderAndFadeLayers",
+            value: function orderAndFadeLayers() {
+                var _this = this, canvasLayerMap = _this.canvasLayerMap, foregroundLayer = _this.foregroundLayer;
+                var opaqueLayers = /* @__PURE__ */ new Set([
+                    foregroundLayer,
+                    "drill",
+                    "other",
+                    "board"
+                ]);
+                var order = [
+                    "drill",
+                    "board",
+                    foregroundLayer
+                ].concat(_to_consumable_array(DEFAULT_DRAW_ORDER.filter(function(l) {
+                    return l !== foregroundLayer;
+                })));
+                order.forEach(function(layer, i) {
+                    var canvas = canvasLayerMap[layer];
+                    if (!canvas) return;
+                    canvas.style.zIndex = "".concat(100 - i);
+                    canvas.style.opacity = opaqueLayers.has(layer) ? "1" : "0.5";
+                });
             }
         },
         {
             key: "applyAperture",
             value: function applyAperture() {
-                var _this = this, ctx = _this.ctx, transform = _this.transform, aperture = _this.aperture;
+                var _this = this, transform = _this.transform, aperture = _this.aperture;
                 var size = aperture.size, mode = aperture.mode, color = aperture.color, fontSize = aperture.fontSize;
+                if (color in this.ctxLayerMap) {
+                    this.aperture.layer = color;
+                } else {
+                    this.aperture.layer = "other";
+                }
+                var ctx = this.getLayerCtx();
+                if (!ctx) {
+                    throw new Error('No context for layer "'.concat(this.foregroundLayer, '"'));
+                }
                 if (!color) color = "undefined";
                 ctx.lineWidth = scaleOnly(transform, size);
                 ctx.lineCap = "round";
@@ -1098,9 +1265,10 @@ var Drawer = /*#__PURE__*/ function() {
                 ]), 2), x$ = _ref[0], y$ = _ref[1];
                 var _this_aperture = this.aperture, size = _this_aperture.size, shape = _this_aperture.shape, mode = _this_aperture.mode;
                 var size$ = scaleOnly(this.transform, size);
-                var _this = this, lastPoint = _this.lastPoint, ctx = _this.ctx;
+                var lastPoint = this.lastPoint;
                 var lastPoint$ = (0, import_transformation_matrix.applyToPoint)(this.transform, lastPoint);
                 this.applyAperture();
+                var ctx = this.getLayerCtx();
                 if (shape === "square") ctx.fillRect(lastPoint$.x - size$ / 2, lastPoint$.y - size$ / 2, size$, size$);
                 ctx.beginPath();
                 ctx.moveTo(lastPoint$.x, lastPoint$.y);
@@ -1117,28 +1285,69 @@ var Drawer = /*#__PURE__*/ function() {
     ]);
     return Drawer;
 }();
+// src/global-store.ts
+var import_zustand = require("zustand");
+// src/components/ContextProviders.tsx
+var import_react = require("react");
+var import_react2 = require("react");
+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);
+};
+// src/global-store.ts
+var import_react3 = require("react");
+var createStore = function() {
+    return (0, import_zustand.createStore)(function(set) {
+        return {
+            selected_layer: "top",
+            selectLayer: function(layer) {
+                return set({
+                    selected_layer: layer
+                });
+            }
+        };
+    });
+};
+var useStore = function(s) {
+    var store = (0, import_react3.useContext)(StoreContext);
+    return (0, import_zustand.useStore)(store, s);
+};
 // src/components/CanvasPrimitiveRenderer.tsx
+var import_builder = require("@tscircuit/builder");
 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 ref = (0, import_react.useRef)();
-    (0, import_react.useEffect)(function() {
-        if (!ref.current) return;
-        var drawer = new Drawer(ref.current);
+    var canvasRefs = (0, import_react4.useRef)();
+    var selectedLayer = useStore(function(s) {
+        return s.selected_layer;
+    });
+    (0, import_react4.useEffect)(function() {
+        if (!canvasRefs.current) return;
+        if (Object.keys(canvasRefs.current).length === 0) return;
+        var drawer = new Drawer(canvasRefs.current);
         if (transform) drawer.transform = transform;
         drawer.clear();
+        drawer.foregroundLayer = selectedLayer;
         drawPrimitives(drawer, primitives);
+        drawer.orderAndFadeLayers();
     }, [
         primitives,
-        transform
+        transform,
+        selectedLayer
     ]);
-    return /* @__PURE__ */ import_react.default.createElement("div", {
+    return /* @__PURE__ */ import_react4.default.createElement("div", {
         style: {
             backgroundColor: "black",
             width: width,
             height: height,
             position: "relative"
         }
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_supergrid.SuperGrid, {
+    }, /* @__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)",
@@ -1149,20 +1358,32 @@ var CanvasPrimitiveRenderer = function(param) {
         stringifyCoord: function(x, y, z) {
             return "".concat((0, import_react_supergrid.toMMSI)(x, z), ", ").concat((0, import_react_supergrid.toMMSI)(y, z));
         }
-    }), /* @__PURE__ */ import_react.default.createElement("canvas", {
-        ref: ref,
-        style: {
-            position: "absolute",
-            left: 0,
-            top: 0,
-            pointerEvents: "none"
-        },
-        width: width,
-        height: height
+    }), 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
+        });
     }));
 };
 // src/components/CanvasElementsRenderer.tsx
-var import_react6 = require("react");
+var import_react12 = 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) {
@@ -1388,11 +1609,11 @@ var convertElementToPrimitives = function(element, allElements) {
     return [];
 };
 // src/components/MouseElementTracker.tsx
-var import_react3 = __toESM(require("react"));
-var import_react4 = require("react");
+var import_react6 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_transformation_matrix2 = require("transformation-matrix");
 // src/components/ElementOverlayBox.tsx
-var import_react2 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var containerStyle = {
     position: "absolute",
     left: 0,
@@ -1433,8 +1654,8 @@ var layerColorHightlightMap = {
 var HighlightedPrimitiveBoxWithText = function(param) {
     var primitive = param.primitive;
     var _primitive__element;
-    var _ref = _sliced_to_array((0, import_react2.useState)(false), 2), finalState = _ref[0], setFinalState = _ref[1];
-    (0, import_react2.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react5.useState)(false), 2), finalState = _ref[0], setFinalState = _ref[1];
+    (0, import_react5.useEffect)(function() {
         setTimeout(function() {
             setFinalState(true);
         }, 100);
@@ -1450,7 +1671,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_react2.default.createElement("div", {
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
         style: {
             position: "absolute",
             left: x - w / 2 - 8,
@@ -1459,7 +1680,7 @@ var HighlightedPrimitiveBoxWithText = function(param) {
             height: h + 16,
             color: color
         }
-    }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    }, /* @__PURE__ */ import_react5.default.createElement("div", {
         style: {
             // width: finalState ? `${100 + 20 * si}%` : "100%",
             // height: finalState ? `${100 + 20 * si}%` : "100%",
@@ -1473,7 +1694,7 @@ var HighlightedPrimitiveBoxWithText = function(param) {
             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_react2.default.createElement("div", {
+    }, /* @__PURE__ */ import_react5.default.createElement("div", {
         style: {
             position: "absolute",
             left: 0,
@@ -1487,10 +1708,10 @@ var HighlightedPrimitiveBoxWithText = function(param) {
 };
 var ElementOverlayBox = function(param) {
     var highlightedPrimitives = param.highlightedPrimitives;
-    return /* @__PURE__ */ import_react2.default.createElement("div", {
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
         style: containerStyle
     }, highlightedPrimitives.map(function(primitive, i) {
-        return /* @__PURE__ */ import_react2.default.createElement(HighlightedPrimitiveBoxWithText, {
+        return /* @__PURE__ */ import_react5.default.createElement(HighlightedPrimitiveBoxWithText, {
             key: i,
             primitive: primitive
         });
@@ -1499,8 +1720,8 @@ var ElementOverlayBox = function(param) {
 // src/components/MouseElementTracker.tsx
 var MouseElementTracker = function(param) {
     var children = param.children, transform = param.transform, primitives = param.primitives;
-    var _ref = _sliced_to_array((0, import_react3.useState)([]), 2), mousedPrimitives = _ref[0], setMousedPrimitives = _ref[1];
-    var highlightedPrimitives = (0, import_react4.useMemo)(function() {
+    var _ref = _sliced_to_array((0, import_react6.useState)([]), 2), mousedPrimitives = _ref[0], setMousedPrimitives = _ref[1];
+    var highlightedPrimitives = (0, import_react7.useMemo)(function() {
         var highlightedPrimitives2 = [];
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
@@ -1513,8 +1734,8 @@ var MouseElementTracker = function(param) {
                 var w = "w" in primitive ? primitive.w : "r" in primitive ? primitive.r * 2 : 0;
                 var h = "h" in primitive ? primitive.h : "r" in primitive ? primitive.r * 2 : 0;
                 var screenSize = {
-                    w: w * transform.d,
-                    h: h * transform.d
+                    w: w * transform.a,
+                    h: h * transform.a
                 };
                 var same_space_index = highlightedPrimitives2.filter(function(hp) {
                     return screenPos.x === hp.screen_x && screenPos.y === hp.screen_y && screenSize.w === hp.screen_w && screenSize.h === hp.screen_h;
@@ -1547,7 +1768,7 @@ var MouseElementTracker = function(param) {
         mousedPrimitives,
         transform
     ]);
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
         style: {
             position: "relative"
         },
@@ -1590,13 +1811,403 @@ var MouseElementTracker = function(param) {
                 setMousedPrimitives(mousedPrimitives2);
             }
         }
-    }, children, /* @__PURE__ */ import_react3.default.createElement(ElementOverlayBox, {
+    }, children, /* @__PURE__ */ import_react6.default.createElement(ElementOverlayBox, {
         highlightedPrimitives: highlightedPrimitives
     }));
 };
+// src/components/DimensionOverlay.tsx
+var import_react8 = require("react");
+var import_transformation_matrix3 = require("transformation-matrix");
+var DimensionOverlay = function(param) {
+    var children = param.children, transform = param.transform;
+    if (!transform) transform = (0, import_transformation_matrix3.identity)();
+    var _ref = _sliced_to_array((0, import_react8.useState)(false), 2), dimensionToolVisible = _ref[0], setDimensionToolVisible = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react8.useState)(false), 2), dimensionToolStretching = _ref1[0], setDimensionToolStretching = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react8.useState)({
+        x: 0,
+        y: 0
+    }), 2), dStart = _ref2[0], setDStart = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react8.useState)({
+        x: 0,
+        y: 0
+    }), 2), dEnd = _ref3[0], setDEnd = _ref3[1];
+    var mousePosRef = (0, import_react8.useRef)({
+        x: 0,
+        y: 0
+    });
+    var containerRef = (0, import_react8.useRef)(null);
+    var container = containerRef.current;
+    var containerBounds = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
+    (0, import_react8.useEffect)(function() {
+        var down = function(e) {
+            if (e.key === "d") {
+                setDStart({
+                    x: mousePosRef.current.x,
+                    y: mousePosRef.current.y
+                });
+                setDEnd({
+                    x: mousePosRef.current.x,
+                    y: mousePosRef.current.y
+                });
+                setDimensionToolVisible(function(visible) {
+                    return !visible;
+                });
+                setDimensionToolStretching(true);
+                e.preventDefault();
+            }
+            if (e.key === "Escape") {
+                setDimensionToolVisible(false);
+                setDimensionToolStretching(false);
+            }
+        };
+        window.addEventListener("keydown", down);
+        return function() {
+            return window.removeEventListener("keydown", down);
+        };
+    }, [
+        containerRef
+    ]);
+    var screenDStart = (0, import_transformation_matrix3.applyToPoint)(transform, dStart);
+    var screenDEnd = (0, import_transformation_matrix3.applyToPoint)(transform, dEnd);
+    var arrowScreenBounds = {
+        left: Math.min(screenDStart.x, screenDEnd.x),
+        right: Math.max(screenDStart.x, screenDEnd.x),
+        top: Math.min(screenDStart.y, screenDEnd.y),
+        bottom: Math.max(screenDStart.y, screenDEnd.y),
+        flipX: screenDStart.x > screenDEnd.x,
+        flipY: screenDStart.y > screenDEnd.y,
+        width: 0,
+        height: 0
+    };
+    arrowScreenBounds.width = arrowScreenBounds.right - arrowScreenBounds.left;
+    arrowScreenBounds.height = arrowScreenBounds.bottom - arrowScreenBounds.top;
+    return /* @__PURE__ */ React.createElement("div", {
+        ref: containerRef,
+        style: {
+            position: "relative"
+        },
+        onMouseMove: function(e) {
+            var rect = e.currentTarget.getBoundingClientRect();
+            var x = e.clientX - rect.left;
+            var y = e.clientY - rect.top;
+            var rwPoint = (0, import_transformation_matrix3.applyToPoint)((0, import_transformation_matrix3.inverse)(transform), {
+                x: x,
+                y: y
+            });
+            mousePosRef.current.x = rwPoint.x;
+            mousePosRef.current.y = rwPoint.y;
+            if (dimensionToolStretching) {
+                setDEnd({
+                    x: rwPoint.x,
+                    y: rwPoint.y
+                });
+            }
+        },
+        onMouseDown: function() {
+            if (dimensionToolStretching) {
+                setDimensionToolStretching(false);
+            } 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))));
+};
+// src/components/ToolbarOverlay.tsx
+var import_react9 = require("react");
+var import_css = require("@emotion/css");
+var import_builder2 = require("@tscircuit/builder");
+var LayerButton = function(param) {
+    var name = param.name, selected = param.selected, onClick = param.onClick;
+    return /* @__PURE__ */ React.createElement("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));
+};
+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: _object_spread({
+            backgroundColor: "#1F1F1F",
+            border: "1px solid #666",
+            margin: 4,
+            padding: 4,
+            paddingLeft: 6,
+            paddingRight: 6,
+            borderRadius: 2,
+            alignSelf: "start",
+            color: "#eee",
+            cursor: "pointer"
+        }, props.style)
+    }), 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,
+            s.selectLayer
+        ];
+    }), 2), selectedLayer = _useStore[0], selectLayer = _useStore[1];
+    var _elements_filter_length;
+    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", {
+        style: {
+            position: "relative"
+        },
+        onMouseEnter: function() {
+            setIsMouseOverContainer(true);
+        },
+        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));
+    })))));
+};
+// src/components/ErrorOverlay.tsx
+var import_css2 = require("@emotion/css");
+var import_react10 = require("react");
+var import_transformation_matrix4 = require("transformation-matrix");
+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", {
+        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())
+        })));
+    }));
+};
 // src/components/CanvasElementsRenderer.tsx
 var CanvasElementsRenderer = function(props) {
-    var primitives = (0, import_react6.useMemo)(function() {
+    var primitives = (0, import_react12.useMemo)(function() {
         var primitives2 = props.elements.flatMap(function(elm) {
             return convertElementToPrimitives(elm, props.elements);
         });
@@ -1604,16 +2215,23 @@ var CanvasElementsRenderer = function(props) {
     }, [
         props.elements
     ]);
-    return /* @__PURE__ */ import_react5.default.createElement(MouseElementTracker, {
+    return /* @__PURE__ */ import_react11.default.createElement(MouseElementTracker, {
         transform: props.transform,
         primitives: primitives
-    }, /* @__PURE__ */ import_react5.default.createElement(CanvasPrimitiveRenderer, {
+    }, /* @__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, {
         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());
@@ -1621,11 +2239,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_react7 = require("react");
-var useIsomorphicLayoutEffect = isBrowser ? import_react7.useLayoutEffect : import_react7.useEffect;
+var import_react13 = require("react");
+var useIsomorphicLayoutEffect = isBrowser ? import_react13.useLayoutEffect : import_react13.useEffect;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 // node_modules/react-use/esm/useMeasure.js
-var import_react8 = require("react");
+var import_react14 = require("react");
 var defaultState = {
     x: 0,
     y: 0,
@@ -1637,9 +2255,9 @@ var defaultState = {
     right: 0
 };
 function useMeasure() {
-    var _a = (0, import_react8.useState)(null), element = _a[0], ref = _a[1];
-    var _b = (0, import_react8.useState)(defaultState), rect = _b[0], setRect = _b[1];
-    var observer = (0, import_react8.useMemo)(function() {
+    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() {
         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;
@@ -1677,19 +2295,19 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
     ];
 };
 // src/PCBViewer.tsx
-var import_transformation_matrix3 = require("transformation-matrix");
-var import_builder2 = require("@tscircuit/builder");
-var defaultTransform = (0, import_transformation_matrix3.compose)((0, import_transformation_matrix3.translate)(400, 300), (0, import_transformation_matrix3.scale)(40, 40));
+var import_transformation_matrix5 = require("transformation-matrix");
+var import_builder4 = require("@tscircuit/builder");
+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_react9.useState)([]), 2), stateElements = _ref[0], setStateElements = _ref[1];
+    var _ref = _sliced_to_array((0, import_react15.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_react9.useState)(defaultTransform), 2), transform = _ref1[0], setTransformInternal = _ref1[1];
+    var _ref1 = _sliced_to_array((0, import_react15.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_react9.useState)(null), 2), error = _ref3[0], setError = _ref3[1];
+    var _ref3 = _sliced_to_array((0, import_react15.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,
@@ -1697,7 +2315,7 @@ var PCBViewer = function(param) {
         };
         var _ref = elements.some(function(e) {
             return e.type.startsWith("pcb_");
-        }) ? (0, import_builder2.findBoundsAndCenter)(elements.filter(function(e) {
+        }) ? (0, import_builder4.findBoundsAndCenter)(elements.filter(function(e) {
             return e.type.startsWith("pcb_");
         })) : {
             center: {
@@ -1710,10 +2328,10 @@ 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_matrix3.compose)((0, import_transformation_matrix3.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_matrix3.scale)(scaleFactor, scaleFactor, 0, 0), (0, import_transformation_matrix3.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_react9.useEffect)(function() {
+    (0, import_react15.useEffect)(function() {
         var doRender = function doRender() {
             return _doRender.apply(this, arguments);
         };
@@ -1724,7 +2342,7 @@ var PCBViewer = function(param) {
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
-                            projectBuilder = (0, import_builder.createProjectBuilder)();
+                            projectBuilder = (0, import_builder3.createProjectBuilder)();
                             return [
                                 4,
                                 (0, import_react_fiber.createRoot)().render(children, projectBuilder).then(function(elements2) {
@@ -1749,26 +2367,25 @@ var PCBViewer = function(param) {
     }, [
         children
     ]);
-    (0, import_react9.useEffect)(function() {
-        if (refDimensions && refDimensions.width !== 0 && children) {
+    (0, import_react15.useEffect)(function() {
+        if (refDimensions && refDimensions.width !== 0 && (children || soup)) {
             resetTransform();
         }
     }, [
         children,
         refDimensions
     ]);
-    if (error) return /* @__PURE__ */ import_react9.default.createElement("div", {
+    if (error) return /* @__PURE__ */ import_react15.default.createElement("div", {
         style: {
             color: "red"
         }
     }, " ", error, " ");
     var elements = soup !== null && soup !== void 0 ? soup : stateElements;
-    if (elements.length === 0) return null;
-    return /* @__PURE__ */ import_react9.default.createElement("div", {
+    return /* @__PURE__ */ import_react15.default.createElement("div", {
         ref: transformRef
-    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+    }, /* @__PURE__ */ import_react15.default.createElement("div", {
         ref: ref
-    }, /* @__PURE__ */ import_react9.default.createElement(CanvasElementsRenderer, {
+    }, /* @__PURE__ */ import_react15.default.createElement(ContextProviders, null, /* @__PURE__ */ import_react15.default.createElement(CanvasElementsRenderer, {
         key: refDimensions.width,
         transform: transform,
         height: height,
@@ -1785,7 +2402,7 @@ var PCBViewer = function(param) {
         elements: elements.filter(function(elm) {
             return elm.type.startsWith("pcb_") || elm.type.startsWith("source_");
         })
-    })));
+    }))));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {