@tscircuit/pcb-viewer 1.4.3 → 1.4.5

package/README.md

@@ -4,7 +4,9 @@
 
 [Examples](https://pcb-viewer.vercel.app/) · [TSCircuit](https://tscircuit.com) · [Open in CodeSandbox](https://codesandbox.io/p/github/tscircuit/pcb-viewer)
 
-Render PCBs w/ React
+Render Printed Circuit Boards w/ React
+
+If you want to render to an image, check out [circuit-to-png](https://github.com/tscircuit/circuit-to-png)
 
 ![image](https://github.com/tscircuit/pcb-viewer/assets/1910070/e010f44e-b8c0-4e1d-9d59-1ea66716427f)
 

package/dist/index.d.ts

@@ -33,15 +33,34 @@ type EditTraceHintEvent = {
 };
 type EditEvent = EditComponentLocationEvent | EditTraceHintEvent;
 
+interface State {
+    selected_layer: LayerRef;
+    in_edit_mode: boolean;
+    in_move_footprint_mode: boolean;
+    in_draw_trace_mode: boolean;
+    is_moving_component: boolean;
+    is_drawing_trace: boolean;
+    is_showing_rats_nest: boolean;
+    selectLayer: (layer: LayerRef) => void;
+    setEditMode: (mode: "off" | "move_footprint" | "draw_trace") => void;
+    setIsMovingComponent: (is_moving: boolean) => void;
+    setIsDrawingTrace: (is_drawing: boolean) => void;
+    setIsShowingRatsNest: (is_showing: boolean) => void;
+}
+type StateProps = {
+    [key in keyof State]: State[key] extends boolean ? boolean : never;
+};
+
 type Props = {
     children?: any;
     soup?: any;
     height?: number;
     allowEditing?: boolean;
     editEvents?: EditEvent[];
+    initialState?: Partial<StateProps>;
     onEditEventsChanged?: (editEvents: EditEvent[]) => void;
 };
-declare const PCBViewer: ({ children, soup, height, allowEditing, editEvents: editEventsProp, onEditEventsChanged, }: Props) => react_jsx_runtime.JSX.Element;
+declare const PCBViewer: ({ children, soup, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, }: Props) => react_jsx_runtime.JSX.Element;
 
 declare const applyEditEvents: (soup: AnySoupElement[], edit_events: EditEvent[]) => AnySoupElement[];
 

package/dist/index.js

@@ -870,10 +870,10 @@ var require_lodash14 = __commonJS({
 // node_modules/lodash.identity/index.js
 var require_lodash15 = __commonJS({
     "node_modules/lodash.identity/index.js": function(exports2, module2) {
-        function identity6(value) {
+        function identity7(value) {
             return value;
         }
-        module2.exports = identity6;
+        module2.exports = identity7;
     }
 });
 // node_modules/lodash.support/index.js
@@ -893,7 +893,7 @@ var require_lodash16 = __commonJS({
 var require_lodash17 = __commonJS({
     "node_modules/lodash._basecreatecallback/index.js": function(exports2, module2) {
         var bind = require_lodash14();
-        var identity6 = require_lodash15();
+        var identity7 = require_lodash15();
         var setBindData = require_lodash8();
         var support = require_lodash16();
         var reFuncName = /^\s*function[ \n\r\t]+\w/;
@@ -901,7 +901,7 @@ var require_lodash17 = __commonJS({
         var fnToString = Function.prototype.toString;
         function baseCreateCallback(func, thisArg, argCount) {
             if (typeof func != "function") {
-                return identity6;
+                return identity7;
             }
             if (typeof thisArg == "undefined" || !("prototype" in func)) {
                 return func;
@@ -10918,7 +10918,7 @@ var require_dist2 = __commonJS({
             }
         });
         module2.exports = __toCommonJS2(soup_util_exports);
-        var su4 = function(soup) {
+        var su5 = function(soup) {
             var su22 = new Proxy({}, {
                 get: function(proxy_target, component_type) {
                     return {
@@ -10991,8 +10991,8 @@ var require_dist2 = __commonJS({
             });
             return su22;
         };
-        su4.unparsed = su4;
-        var su_default = su4;
+        su5.unparsed = su5;
+        var su_default = su5;
         var directionToVec = function(direction) {
             if (direction === "up") return {
                 x: 0,
@@ -11061,30 +11061,30 @@ var require_dist2 = __commonJS({
             else if (sideOrDir === "right") return "left";
             throw new Error("Invalid sideOrDir: ".concat(sideOrDir));
         };
-        var import_transformation_matrix9 = require("transformation-matrix");
+        var import_transformation_matrix10 = require("transformation-matrix");
         var transformSchematicElement = function(elm, matrix) {
             if (elm.type === "schematic_component") {
-                elm.center = (0, import_transformation_matrix9.applyToPoint)(matrix, elm.center);
+                elm.center = (0, import_transformation_matrix10.applyToPoint)(matrix, elm.center);
             } else if (elm.type === "schematic_port") {
-                elm.center = (0, import_transformation_matrix9.applyToPoint)(matrix, elm.center);
+                elm.center = (0, import_transformation_matrix10.applyToPoint)(matrix, elm.center);
                 if (elm.facing_direction) {
                     elm.facing_direction = rotateDirection(elm.facing_direction, -(Math.atan2(matrix.b, matrix.a) / Math.PI) * 2);
                 }
             } else if (elm.type === "schematic_text") {
-                elm.position = (0, import_transformation_matrix9.applyToPoint)(matrix, elm.position);
+                elm.position = (0, import_transformation_matrix10.applyToPoint)(matrix, elm.position);
             } else if (elm.type === "schematic_trace") {} else if (elm.type === "schematic_box") {
-                var _ref = (0, import_transformation_matrix9.applyToPoint)(matrix, {
+                var _ref = (0, import_transformation_matrix10.applyToPoint)(matrix, {
                     x: elm.x,
                     y: elm.y
                 }), x = _ref.x, y = _ref.y;
                 elm.x = x;
                 elm.y = y;
             } else if (elm.type === "schematic_line") {
-                var _ref1 = (0, import_transformation_matrix9.applyToPoint)(matrix, {
+                var _ref1 = (0, import_transformation_matrix10.applyToPoint)(matrix, {
                     x: elm.x1,
                     y: elm.y1
                 }), x1 = _ref1.x, y1 = _ref1.y;
-                var _ref2 = (0, import_transformation_matrix9.applyToPoint)(matrix, {
+                var _ref2 = (0, import_transformation_matrix10.applyToPoint)(matrix, {
                     x: elm.x2,
                     y: elm.y2
                 }), x2 = _ref2.x, y2 = _ref2.y;
@@ -11102,19 +11102,19 @@ var require_dist2 = __commonJS({
         };
         var transformPCBElement2 = function(elm, matrix) {
             if (elm.type === "pcb_plated_hole" || elm.type === "pcb_hole" || elm.type === "pcb_via" || elm.type === "pcb_smtpad" || elm.type === "pcb_port") {
-                var _ref = (0, import_transformation_matrix9.applyToPoint)(matrix, {
+                var _ref = (0, import_transformation_matrix10.applyToPoint)(matrix, {
                     x: elm.x,
                     y: elm.y
                 }), x = _ref.x, y = _ref.y;
                 elm.x = x;
                 elm.y = y;
             } else if (elm.type === "pcb_silkscreen_text" || elm.type === "pcb_fabrication_note_text") {
-                elm.anchor_position = (0, import_transformation_matrix9.applyToPoint)(matrix, elm.anchor_position);
+                elm.anchor_position = (0, import_transformation_matrix10.applyToPoint)(matrix, elm.anchor_position);
             } else if (elm.type === "pcb_silkscreen_circle" || elm.type === "pcb_silkscreen_rect" || elm.type === "pcb_component") {
-                elm.center = (0, import_transformation_matrix9.applyToPoint)(matrix, elm.center);
+                elm.center = (0, import_transformation_matrix10.applyToPoint)(matrix, elm.center);
             } else if (elm.type === "pcb_silkscreen_path" || elm.type === "pcb_trace" || elm.type === "pcb_fabrication_note_path") {
                 elm.route = elm.route.map(function(rp) {
-                    var tp = (0, import_transformation_matrix9.applyToPoint)(matrix, rp);
+                    var tp = (0, import_transformation_matrix10.applyToPoint)(matrix, rp);
                     rp.x = tp.x;
                     rp.y = tp.y;
                     return rp;
@@ -11128,14 +11128,14 @@ var require_dist2 = __commonJS({
                     x: elm.x2,
                     y: elm.y2
                 };
-                var p1t = (0, import_transformation_matrix9.applyToPoint)(matrix, p1);
-                var p2t = (0, import_transformation_matrix9.applyToPoint)(matrix, p2);
+                var p1t = (0, import_transformation_matrix10.applyToPoint)(matrix, p1);
+                var p2t = (0, import_transformation_matrix10.applyToPoint)(matrix, p2);
                 elm.x1 = p1t.x;
                 elm.y1 = p1t.y;
                 elm.x2 = p2t.x;
                 elm.y2 = p2t.y;
             } else if (elm.type === "cad_component") {
-                var newPos = (0, import_transformation_matrix9.applyToPoint)(matrix, {
+                var newPos = (0, import_transformation_matrix10.applyToPoint)(matrix, {
                     x: elm.position.x,
                     y: elm.position.y
                 });
@@ -11145,7 +11145,7 @@ var require_dist2 = __commonJS({
             return elm;
         };
         var transformPCBElements2 = function(elms, matrix) {
-            var tsr = (0, import_transformation_matrix9.decomposeTSR)(matrix);
+            var tsr = (0, import_transformation_matrix10.decomposeTSR)(matrix);
             var flipPadWidthHeight = Math.round(tsr.rotation.angle / (Math.PI / 2)) % 2 === 1;
             var transformedElms = elms.map(function(elm) {
                 return transformPCBElement2(elm, matrix);
@@ -11331,7 +11331,7 @@ var require_dist3 = __commonJS({
             }
         });
         module2.exports = __toCommonJS2(src_exports2);
-        var import_transformation_matrix9 = require("transformation-matrix");
+        var import_transformation_matrix10 = require("transformation-matrix");
         var import_react18 = require("react");
         var useMouseMatrixTransform2 = function() {
             var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -11340,7 +11340,7 @@ var require_dist3 = __commonJS({
             var _props_canvasElm;
             var outerCanvasElm = (_props_canvasElm = props.canvasElm) !== null && _props_canvasElm !== void 0 ? _props_canvasElm : extRef.current;
             var _props_initialTransform;
-            var _ref1 = _sliced_to_array((0, import_react18.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix9.identity)()), 2), internalTransform = _ref1[0], setInternalTransform = _ref1[1];
+            var _ref1 = _sliced_to_array((0, import_react18.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix10.identity)()), 2), internalTransform = _ref1[0], setInternalTransform = _ref1[1];
             var _ref2 = _sliced_to_array((0, import_react18.useState)(0), 2), waitCounter = _ref2[0], setWaitCounter = _ref2[1];
             var _ref3 = _sliced_to_array((0, import_react18.useReducer)(function(s) {
                 return s + 1;
@@ -11377,7 +11377,7 @@ var require_dist3 = __commonJS({
                 var handleMouseUp = function handleMouseUp(e) {
                     if (!md) return;
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix9.compose)((0, import_transformation_matrix9.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix10.compose)((0, import_transformation_matrix10.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     md = false;
@@ -11386,11 +11386,11 @@ var require_dist3 = __commonJS({
                     mlastrel = getMousePos(e);
                     if (!md) return;
                     m1 = getMousePos(e);
-                    setTransform((0, import_transformation_matrix9.compose)((0, import_transformation_matrix9.translate)(m1.x - m0.x, m1.y - m0.y), init_tf));
+                    setTransform((0, import_transformation_matrix10.compose)((0, import_transformation_matrix10.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_matrix9.compose)((0, import_transformation_matrix9.translate)(center.x, center.y), (0, import_transformation_matrix9.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix9.translate)(-center.x, -center.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix10.compose)((0, import_transformation_matrix10.translate)(center.x, center.y), (0, import_transformation_matrix10.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix10.translate)(-center.x, -center.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     e.preventDefault();
@@ -11405,7 +11405,7 @@ var require_dist3 = __commonJS({
                     }
                     md = false;
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix9.compose)((0, import_transformation_matrix9.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix10.compose)((0, import_transformation_matrix10.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                 };
@@ -11460,7 +11460,7 @@ var require_dist3 = __commonJS({
                 lastDragCancelTime
             ]);
             var applyTransformToPoint = (0, import_react18.useCallback)(function(obj) {
-                return (0, import_transformation_matrix9.applyToPoint)(transform, obj);
+                return (0, import_transformation_matrix10.applyToPoint)(transform, obj);
             }, [
                 transform
             ]);
@@ -11979,7 +11979,9 @@ var LAYER_NAME_TO_COLOR = _object_spread({
     tkeepout: colors_default.board.b_crtyd,
     tplace: colors_default.board.b_silks,
     top_silkscreen: colors_default.board.f_silks,
-    bottom_silkscreen: colors_default.board.b_silks
+    bottom_silkscreen: colors_default.board.b_silks,
+    top_fabrication: colors_default.board.f_fab,
+    bottom_fabrication: colors_default.board.b_fab
 }, colors_default.board);
 var DEFAULT_DRAW_ORDER = [
     "top",
@@ -12255,9 +12257,9 @@ var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var StoreContext = (0, import_react2.createContext)(null);
 var ContextProviders = function(param) {
-    var children = param.children;
+    var children = param.children, initialState = param.initialState;
     var store = (0, import_react.useMemo)(function() {
-        return createStore();
+        return createStore(initialState);
     }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreContext.Provider, {
         value: store,
@@ -12267,14 +12269,17 @@ var ContextProviders = function(param) {
 // src/global-store.ts
 var import_react3 = require("react");
 var createStore = function() {
+    var initialState = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return (0, import_zustand.createStore)(function(set) {
-        return {
+        return _object_spread_props(_object_spread({
             selected_layer: "top",
             in_edit_mode: false,
             in_move_footprint_mode: false,
             in_draw_trace_mode: false,
             is_moving_component: false,
             is_drawing_trace: false,
+            is_showing_rats_nest: false
+        }, initialState), {
             selectLayer: function(layer) {
                 return set({
                     selected_layer: layer
@@ -12289,6 +12294,11 @@ var createStore = function() {
                     is_drawing_trace: false
                 });
             },
+            setIsShowingRatsNest: function(is_showing) {
+                return set({
+                    is_showing_rats_nest: is_showing
+                });
+            },
             setIsMovingComponent: function(is_moving) {
                 return set({
                     is_moving_component: is_moving
@@ -12299,7 +12309,7 @@ var createStore = function() {
                     is_drawing_trace: is_drawing
                 });
             }
-        };
+        });
     });
 };
 var useGlobalStore = function(s) {
@@ -12738,14 +12748,14 @@ var convertElementToPrimitives = function(element, allElements) {
                 }
                 return route1.slice(0, -1).map(function(point, index) {
                     var nextPoint = route1[index + 1];
+                    var _element_stroke_width;
                     return {
                         pcb_drawing_type: "line",
                         x1: point.x,
                         y1: point.y,
                         x2: nextPoint.x,
                         y2: nextPoint.y,
-                        width: 0.1,
-                        // TODO add strokewidth
+                        width: (_element_stroke_width = element.stroke_width) !== null && _element_stroke_width !== void 0 ? _element_stroke_width : 0.1,
                         squareCap: false,
                         layer: layer2,
                         _element: element,
@@ -13280,7 +13290,7 @@ var import_soup2 = __toESM(require_dist());
 // package.json
 var package_default = {
     name: "@tscircuit/pcb-viewer",
-    version: "1.4.2",
+    version: "1.4.4",
     main: "dist/index.js",
     repository: "tscircuit/pcb-viewer",
     license: "MIT",
@@ -13395,12 +13405,16 @@ var ToolbarOverlay = function(param) {
     var _useGlobalStore1 = _sliced_to_array(useGlobalStore(function(s) {
         return [
             s.in_move_footprint_mode,
-            s.in_draw_trace_mode
+            s.in_draw_trace_mode,
+            s.is_showing_rats_nest
         ];
-    }), 2), in_move_footprint_mode = _useGlobalStore1[0], in_draw_trace_mode = _useGlobalStore1[1];
+    }), 3), in_move_footprint_mode = _useGlobalStore1[0], in_draw_trace_mode = _useGlobalStore1[1], is_showing_rats_nest = _useGlobalStore1[2];
     var setEditMode = useGlobalStore(function(s) {
         return s.setEditMode;
     });
+    var setIsShowingRatsNest = useGlobalStore(function(s) {
+        return s.setIsShowingRatsNest;
+    });
     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");
@@ -13556,6 +13570,18 @@ var ToolbarOverlay = function(param) {
                                 "Move Components"
                             ]
                         })
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolbarButton, {
+                        style: {},
+                        onClick: function() {
+                            setIsShowingRatsNest(!is_showing_rats_nest);
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+                            children: [
+                                is_showing_rats_nest ? "✖ " : "",
+                                "Rats Nest"
+                            ]
+                        })
                     })
                 ]
             })
@@ -14183,9 +14209,84 @@ var EditTraceHintOverlay = function(param) {
         ]
     });
 };
-// src/components/CanvasElementsRenderer.tsx
+// src/components/RatsNestOverlay.tsx
+var import_transformation_matrix7 = require("transformation-matrix");
+var import_soup_util3 = __toESM(require_dist2());
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var RatsNestOverlay = function(param) {
+    var transform = param.transform, soup = param.soup, children = param.children;
+    var isShowingRatsNest = useGlobalStore(function(s) {
+        return s.is_showing_rats_nest;
+    });
+    if (!soup || !isShowingRatsNest) return children;
+    if (!transform) transform = (0, import_transformation_matrix7.identity)();
+    var sourceTraces = (0, import_soup_util3.su)(soup).source_trace.list();
+    var groups = [];
+    sourceTraces.forEach(function(sourceTrace) {
+        if (sourceTrace.connected_source_port_ids) {
+            var group = [];
+            sourceTrace.connected_source_port_ids.forEach(function(source_port_id) {
+                var pcbPort = (0, import_soup_util3.su)(soup).pcb_port.getWhere({
+                    source_port_id: source_port_id
+                });
+                if (pcbPort) group.push(pcbPort);
+            });
+            groups.push(group);
+        }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", {
+        style: {
+            position: "relative"
+        },
+        children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", {
+                style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "100%",
+                    height: "100%",
+                    pointerEvents: "none",
+                    opacity: 0.5,
+                    zIndex: 100
+                },
+                children: groups.map(function(group, index) {
+                    var points = group.map(function(port) {
+                        return (0, import_transformation_matrix7.applyToPoint)(transform, {
+                            x: port.x,
+                            y: port.y
+                        });
+                    });
+                    var lines = [];
+                    for(var i = 0; i < points.length; i++){
+                        for(var j = i + 1; j < points.length; j++){
+                            lines.push([
+                                points[i],
+                                points[j]
+                            ]);
+                        }
+                    }
+                    return lines.map(function(param, index2) {
+                        var _param = _sliced_to_array(param, 2), start = _param[0], end = _param[1];
+                        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", {
+                            x1: start.x,
+                            y1: start.y,
+                            x2: end.x,
+                            y2: end.y,
+                            stroke: "white",
+                            strokeWidth: "1"
+                        }, index2);
+                    });
+                })
+            })
+        ]
+    });
+};
+// src/components/CanvasElementsRenderer.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var CanvasElementsRenderer = function(props) {
+    var transform = props.transform, elements = props.elements;
     var primitives = (0, import_react14.useMemo)(function() {
         var primitives2 = props.elements.flatMap(function(elm) {
             return convertElementToPrimitives(elm, props.elements);
@@ -14194,36 +14295,40 @@ var CanvasElementsRenderer = function(props) {
     }, [
         props.elements
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MouseElementTracker, {
-        transform: props.transform,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MouseElementTracker, {
+        transform: transform,
         primitives: primitives,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EditPlacementOverlay, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EditPlacementOverlay, {
             disabled: !props.allowEditing,
-            transform: props.transform,
-            soup: props.elements,
+            transform: transform,
+            soup: elements,
             cancelPanDrag: props.cancelPanDrag,
             onCreateEditEvent: props.onCreateEditEvent,
             onModifyEditEvent: props.onModifyEditEvent,
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EditTraceHintOverlay, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EditTraceHintOverlay, {
                 disabled: !props.allowEditing,
-                transform: props.transform,
-                soup: props.elements,
+                transform: transform,
+                soup: elements,
                 cancelPanDrag: props.cancelPanDrag,
                 onCreateEditEvent: props.onCreateEditEvent,
                 onModifyEditEvent: props.onModifyEditEvent,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DimensionOverlay, {
-                    transform: props.transform,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolbarOverlay, {
-                        elements: props.elements,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ErrorOverlay, {
-                            transform: props.transform,
-                            elements: props.elements,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CanvasPrimitiveRenderer, {
-                                transform: props.transform,
-                                primitives: primitives,
-                                width: props.width,
-                                height: props.height,
-                                grid: props.grid
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DimensionOverlay, {
+                    transform: transform,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolbarOverlay, {
+                        elements: elements,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ErrorOverlay, {
+                            transform: transform,
+                            elements: elements,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RatsNestOverlay, {
+                                transform: transform,
+                                soup: elements,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CanvasPrimitiveRenderer, {
+                                    transform: transform,
+                                    primitives: primitives,
+                                    width: props.width,
+                                    height: props.height,
+                                    grid: props.grid
+                                })
                             })
                         })
                     })
@@ -14294,13 +14399,13 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
     ];
 };
 // src/PCBViewer.tsx
-var import_transformation_matrix8 = require("transformation-matrix");
+var import_transformation_matrix9 = require("transformation-matrix");
 var import_builder3 = require("@tscircuit/builder");
 // src/lib/apply-edit-events.ts
 var import_builder = require("@tscircuit/builder");
-var import_transformation_matrix7 = require("transformation-matrix");
+var import_transformation_matrix8 = require("transformation-matrix");
 // src/lib/apply-edit-events/apply-edit-trace-hint-event.ts
-var import_soup_util3 = __toESM(require_dist2());
+var import_soup_util4 = __toESM(require_dist2());
 var applyTraceHintEditEvent = function(soup, edit_event) {
     var existing_trace_hint = soup.find(function(th) {
         return th.type === "pcb_trace_hint" && th.pcb_trace_hint_id === edit_event.pcb_trace_hint_id;
@@ -14312,7 +14417,7 @@ var applyTraceHintEditEvent = function(soup, edit_event) {
             }) : e;
         });
     } else {
-        var pcb_port = (0, import_soup_util3.su)(soup).pcb_port.get(edit_event.pcb_port_id);
+        var pcb_port = (0, import_soup_util4.su)(soup).pcb_port.get(edit_event.pcb_port_id);
         soup = soup.filter(function(e) {
             return !(e.type === "pcb_trace_hint" && e.pcb_port_id === edit_event.pcb_port_id);
         }).concat([
@@ -14335,7 +14440,7 @@ var applyEditEvents = function(soup, edit_events) {
         var _loop = function() {
             var edit_event = _step.value;
             if (edit_event.pcb_edit_event_type === "edit_component_location") {
-                var mat = (0, import_transformation_matrix7.translate)(edit_event.new_center.x - edit_event.original_center.x, edit_event.new_center.y - edit_event.original_center.y);
+                var mat = (0, import_transformation_matrix8.translate)(edit_event.new_center.x - edit_event.original_center.x, edit_event.new_center.y - edit_event.original_center.y);
                 soup = soup.map(function(e) {
                     return e.pcb_component_id !== edit_event.pcb_component_id ? e : (0, import_builder.transformPCBElement)(e, mat);
                 });
@@ -14361,10 +14466,10 @@ var applyEditEvents = function(soup, edit_events) {
     return soup;
 };
 // src/PCBViewer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var defaultTransform = (0, import_transformation_matrix8.compose)((0, import_transformation_matrix8.translate)(400, 300), (0, import_transformation_matrix8.scale)(40, -40));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var defaultTransform = (0, import_transformation_matrix9.compose)((0, import_transformation_matrix9.translate)(400, 300), (0, import_transformation_matrix9.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, _param_allowEditing = param.allowEditing, allowEditing = _param_allowEditing === void 0 ? true : _param_allowEditing, editEventsProp = param.editEvents, onEditEventsChanged = param.onEditEventsChanged;
+    var children = param.children, soup = param.soup, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, initialState = param.initialState, _param_allowEditing = param.allowEditing, allowEditing = _param_allowEditing === void 0 ? true : _param_allowEditing, editEventsProp = param.editEvents, onEditEventsChanged = param.onEditEventsChanged;
     var _ref = _sliced_to_array((0, import_react17.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_react17.useState)(defaultTransform), 2), transform = _ref1[0], setTransformInternal = _ref1[1];
@@ -14395,8 +14500,8 @@ var PCBViewer = function(param) {
         var _elmBounds_width, _elmBounds_height;
         var scaleFactor = Math.min(((_elmBounds_width = elmBounds.width) !== null && _elmBounds_width !== void 0 ? _elmBounds_width : 0) / width, ((_elmBounds_height = elmBounds.height) !== null && _elmBounds_height !== void 0 ? _elmBounds_height : 0) / height2, 100) * 0.75;
         var _elmBounds_width1, _elmBounds_height1;
-        setTransform((0, import_transformation_matrix8.compose)((0, import_transformation_matrix8.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_matrix8.scale)(scaleFactor, -scaleFactor, 0, 0), (0, import_transformation_matrix8.translate)(-center.x, -center.y)));
+        setTransform((0, import_transformation_matrix9.compose)((0, import_transformation_matrix9.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_matrix9.scale)(scaleFactor, -scaleFactor, 0, 0), (0, import_transformation_matrix9.translate)(-center.x, -center.y)));
     };
     (0, import_react17.useEffect)(function() {
         var doRender = function doRender() {
@@ -14442,7 +14547,7 @@ var PCBViewer = function(param) {
         children,
         refDimensions
     ]);
-    if (error) return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", {
+    if (error) return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", {
         style: {
             color: "red"
         },
@@ -14476,12 +14581,13 @@ var PCBViewer = function(param) {
         setEditEvents(newEditEvents);
         onEditEventsChanged === null || onEditEventsChanged === void 0 ? void 0 : onEditEventsChanged(newEditEvents);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {
         ref: transformRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {
             ref: ref,
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContextProviders, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CanvasElementsRenderer, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ContextProviders, {
+                initialState: initialState,
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CanvasElementsRenderer, {
                     transform: transform,
                     height: height,
                     width: refDimensions.width,