@tscircuit/pcb-viewer 1.2.25 → 1.3.0

package/dist/index.js

@@ -7,6 +7,38 @@ 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);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
 function _class_call_check(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
         throw new TypeError("Cannot call a class as a function");
@@ -39,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;
@@ -66,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] : {};
@@ -105,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);
@@ -116,6 +194,101 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
 var _loop = function(letter) {
     lineAlphabet[letter] = [];
     var segs = svgAlphabet[letter].split("M").slice(1).map(function(seg) {
@@ -151,6 +324,15 @@ 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;
+}
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -276,20 +458,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_matrix5 = require("transformation-matrix");
+        var import_react15 = 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_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_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_react15.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix5.identity)()), 2), internalTransform = _ref[0], setInternalTransform = _ref[1];
+            var _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_react10.useCallback)(function(newTransform) {
+            var setTransform = (0, import_react15.useCallback)(function(newTransform) {
                 if (props.onSetTransform) {
                     props.onSetTransform(newTransform);
                 }
@@ -300,7 +482,7 @@ var require_dist = __commonJS({
                 props.onSetTransform,
                 setInternalTransform
             ]);
-            var setTransformExt = (0, import_react10.useCallback)(function(newTransform) {
+            var setTransformExt = (0, import_react15.useCallback)(function(newTransform) {
                 setTransform(newTransform);
                 incExtChangeCounter();
             }, [
@@ -308,7 +490,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_react15.useEffect)(function() {
                 var handleMouseDown = function handleMouseDown(e) {
                     m0 = getMousePos(e);
                     md = true;
@@ -316,7 +498,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_matrix5.compose)((0, import_transformation_matrix5.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     md = false;
@@ -325,11 +507,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_matrix5.compose)((0, import_transformation_matrix5.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_matrix5.compose)((0, import_transformation_matrix5.translate)(center.x, center.y), (0, import_transformation_matrix5.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix5.translate)(-center.x, -center.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     e.preventDefault();
@@ -338,7 +520,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_matrix5.compose)((0, import_transformation_matrix5.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                 };
@@ -391,8 +573,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_react15.useCallback)(function(obj) {
+                return (0, import_transformation_matrix5.applyToPoint)(transform, obj);
             }, [
                 transform
             ]);
@@ -418,14 +600,14 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 // src/PCBViewer.tsx
-var import_react9 = __toESM(require("react"));
+var import_react14 = __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_react10 = __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",
@@ -837,22 +1019,47 @@ 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,
+    inner1: colors_default.board.copper.in1,
+    inner2: colors_default.board.copper.in2,
+    inner3: colors_default.board.copper.in3,
+    inner4: colors_default.board.copper.in4,
+    inner5: colors_default.board.copper.in5,
+    inner6: colors_default.board.copper.in6,
+    inner7: colors_default.board.copper.in7,
+    inner8: colors_default.board.copper.in8,
     bottom: colors_default.board.copper.b,
     drill: colors_default.board.anchor,
     keepout: colors_default.board.background,
     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));
@@ -866,20 +1073,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);
             }
         },
         {
@@ -894,7 +1121,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$);
             }
         },
         {
@@ -906,10 +1134,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();
             }
         },
         {
@@ -920,15 +1149,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";
@@ -966,9 +1245,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);
@@ -985,28 +1265,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)",
@@ -1017,20 +1338,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_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) {
@@ -1256,11 +1589,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,
@@ -1301,8 +1634,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);
@@ -1318,7 +1651,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,
@@ -1327,7 +1660,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%",
@@ -1341,7 +1674,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,
@@ -1355,10 +1688,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
         });
@@ -1367,8 +1700,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 {
@@ -1381,8 +1714,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;
@@ -1415,7 +1748,7 @@ var MouseElementTracker = function(param) {
         mousedPrimitives,
         transform
     ]);
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
         style: {
             position: "relative"
         },
@@ -1458,13 +1791,317 @@ 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: {
+            backgroundColor: "#1F1F1F",
+            border: "1px solid #666",
+            margin: 4,
+            padding: 4,
+            paddingLeft: 6,
+            paddingRight: 6,
+            borderRadius: 2,
+            alignSelf: "start",
+            color: "#eee",
+            cursor: "pointer"
+        }
+    }), 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 _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, null, errorCount, " errors")));
+};
 // src/components/CanvasElementsRenderer.tsx
 var CanvasElementsRenderer = function(props) {
-    var primitives = (0, import_react6.useMemo)(function() {
+    var primitives = (0, import_react11.useMemo)(function() {
         var primitives2 = props.elements.flatMap(function(elm) {
             return convertElementToPrimitives(elm, props.elements);
         });
@@ -1472,16 +2109,20 @@ var CanvasElementsRenderer = function(props) {
     }, [
         props.elements
     ]);
-    return /* @__PURE__ */ import_react5.default.createElement(MouseElementTracker, {
+    return /* @__PURE__ */ import_react10.default.createElement(MouseElementTracker, {
         transform: props.transform,
         primitives: primitives
-    }, /* @__PURE__ */ import_react5.default.createElement(CanvasPrimitiveRenderer, {
+    }, /* @__PURE__ */ import_react10.default.createElement(DimensionOverlay, {
+        transform: props.transform
+    }, /* @__PURE__ */ import_react10.default.createElement(ToolbarOverlay, {
+        elements: props.elements
+    }, /* @__PURE__ */ import_react10.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());
@@ -1489,11 +2130,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_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_react8 = require("react");
+var import_react13 = require("react");
 var defaultState = {
     x: 0,
     y: 0,
@@ -1505,9 +2146,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_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;
@@ -1545,19 +2186,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_matrix4 = require("transformation-matrix");
+var import_builder4 = require("@tscircuit/builder");
+var defaultTransform = (0, import_transformation_matrix4.compose)((0, import_transformation_matrix4.translate)(400, 300), (0, import_transformation_matrix4.scale)(40, -40));
 var 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_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_react9.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_react9.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,
@@ -1565,7 +2206,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: {
@@ -1578,26 +2219,46 @@ 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_matrix4.compose)((0, import_transformation_matrix4.translate)(((_elmBounds_width1 = elmBounds.width) !== null && _elmBounds_width1 !== void 0 ? _elmBounds_width1 : 0) / 2, ((_elmBounds_height1 = elmBounds.height) !== null && _elmBounds_height1 !== void 0 ? _elmBounds_height1 : 0) / 2), // translate(100, 0),
+        (0, import_transformation_matrix4.scale)(scaleFactor, -scaleFactor, 0, 0), (0, import_transformation_matrix4.translate)(-center.x, -center.y)));
     };
-    (0, import_react9.useEffect)(function() {
+    (0, import_react14.useEffect)(function() {
+        var doRender = function doRender() {
+            return _doRender.apply(this, arguments);
+        };
         if (!children || (children === null || children === void 0 ? void 0 : children.length) === 0) return;
-        var projectBuilder = (0, import_builder.createProjectBuilder)();
-        (0, import_react_fiber.createRoot)().render(children, projectBuilder).then(function(elements2) {
-            console.log({
-                elements: elements2
+        function _doRender() {
+            _doRender = _async_to_generator(function() {
+                var projectBuilder;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            projectBuilder = (0, import_builder3.createProjectBuilder)();
+                            return [
+                                4,
+                                (0, import_react_fiber.createRoot)().render(children, projectBuilder).then(function(elements2) {
+                                    setStateElements(elements2);
+                                    setError(null);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
+                });
             });
-            setStateElements(elements2);
-            setError(null);
-        }).catch(function(e) {
+            return _doRender.apply(this, arguments);
+        }
+        doRender().catch(function(e) {
             setError(e.toString());
             console.log(e.toString());
         });
     }, [
         children
     ]);
-    (0, import_react9.useEffect)(function() {
+    (0, import_react14.useEffect)(function() {
         if (refDimensions && refDimensions.width !== 0 && children) {
             resetTransform();
         }
@@ -1605,18 +2266,18 @@ var PCBViewer = function(param) {
         children,
         refDimensions
     ]);
-    if (error) return /* @__PURE__ */ import_react9.default.createElement("div", {
+    if (error) return /* @__PURE__ */ import_react14.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_react14.default.createElement("div", {
         ref: transformRef
-    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+    }, /* @__PURE__ */ import_react14.default.createElement("div", {
         ref: ref
-    }, /* @__PURE__ */ import_react9.default.createElement(CanvasElementsRenderer, {
+    }, /* @__PURE__ */ import_react14.default.createElement(ContextProviders, null, /* @__PURE__ */ import_react14.default.createElement(CanvasElementsRenderer, {
         key: refDimensions.width,
         transform: transform,
         height: height,
@@ -1633,7 +2294,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 = {