@tscircuit/pcb-viewer 1.11.108 → 1.11.110

package/dist/index.js

@@ -35,7 +35,7 @@ __export(dist_exports, {
   pcb_hole_circle_or_square_shape: () => pcb_hole_circle_or_square_shape,
   pcb_hole_oval_shape: () => pcb_hole_oval_shape,
   pcb_keepout: () => pcb_keepout,
-  pcb_manual_edit_conflict_error: () => pcb_manual_edit_conflict_error,
+  pcb_manual_edit_conflict_warning: () => pcb_manual_edit_conflict_warning,
   pcb_missing_footprint_error: () => pcb_missing_footprint_error,
   pcb_placement_error: () => pcb_placement_error,
   pcb_plated_hole: () => pcb_plated_hole,
@@ -79,6 +79,7 @@ __export(dist_exports, {
   schematic_debug_rect: () => schematic_debug_rect,
   schematic_error: () => schematic_error,
   schematic_line: () => schematic_line,
+  schematic_manual_edit_conflict_warning: () => schematic_manual_edit_conflict_warning,
   schematic_net_label: () => schematic_net_label,
   schematic_path: () => schematic_path,
   schematic_pin_styles: () => schematic_pin_styles,
@@ -92,6 +93,7 @@ __export(dist_exports, {
   source_led: () => source_led,
   source_net: () => source_net,
   source_port: () => source_port,
+  source_project_metadata: () => source_project_metadata,
   source_simple_battery: () => source_simple_battery,
   source_simple_bug: () => source_simple_bug,
   source_simple_capacitor: () => source_simple_capacitor,
@@ -4447,6 +4449,18 @@ expectTypesMatch("extra props b");
 expectTypesMatch("missing props b");
 expectTypesMatch(true);
 expectTypesMatch("mismatched prop types: a");
+var expectStringUnionsMatch = (shouldBe) => {
+};
+expectStringUnionsMatch(true);
+expectStringUnionsMatch(
+  'T1 has extra: "c", T2 has extra: "d"'
+);
+expectStringUnionsMatch('T1 has extra: "c"');
+expectStringUnionsMatch('T2 has extra: "c"');
+expectStringUnionsMatch(
+  'T1 has extra: "d", T2 has extra: "c"'
+);
+expectStringUnionsMatch(true);
 var source_component_base = z.object({
   type: z.literal("source_component"),
   ftype: z.string().optional(),
@@ -4546,6 +4560,13 @@ var source_simple_switch = source_component_base.extend({
   ftype: z.literal("simple_switch")
 });
 expectTypesMatch(true);
+var source_project_metadata = z.object({
+  type: z.literal("source_project_metadata"),
+  name: z.string().optional(),
+  software_used_string: z.string().optional(),
+  created_at: z.string().datetime().optional()
+});
+expectTypesMatch(true);
 var any_source_component = z.union([
   source_simple_resistor,
   source_simple_capacitor,
@@ -4564,7 +4585,8 @@ var any_source_component = z.union([
   source_simple_resonator,
   source_simple_switch,
   source_simple_transistor,
-  source_simple_mosfet
+  source_simple_mosfet,
+  source_project_metadata
 ]);
 var source_port = z.object({
   type: z.literal("source_port"),
@@ -4584,6 +4606,7 @@ var source_trace = z.object({
   subcircuit_id: z.string().optional(),
   subcircuit_connectivity_map_key: z.string().optional(),
   max_length: z.number().optional(),
+  min_trace_thickness: z.number().optional(),
   display_name: z.string().optional()
 });
 expectTypesMatch(true);
@@ -4794,6 +4817,20 @@ var schematic_voltage_probe = z.object({
   voltage: voltage.optional()
 }).describe("Defines a voltage probe measurement point on a schematic trace");
 expectTypesMatch(true);
+var schematic_manual_edit_conflict_warning = z.object({
+  type: z.literal("schematic_manual_edit_conflict_warning"),
+  schematic_manual_edit_conflict_warning_id: getZodPrefixedIdWithDefault(
+    "schematic_manual_edit_conflict_warning"
+  ),
+  message: z.string(),
+  schematic_component_id: z.string(),
+  schematic_group_id: z.string().optional(),
+  subcircuit_id: z.string().optional(),
+  source_component_id: z.string()
+}).describe(
+  "Warning emitted when a component has both manual placement and explicit schX/schY coordinates"
+);
+expectTypesMatch(true);
 var all_layers = [
   "top",
   "bottom",
@@ -4922,6 +4959,25 @@ var pcb_circular_hole_with_rect_pad = z.object({
   pcb_port_id: z.string().optional(),
   pcb_plated_hole_id: getZodPrefixedIdWithDefault("pcb_plated_hole")
 });
+var pcb_pill_hole_with_rect_pad = z.object({
+  type: z.literal("pcb_plated_hole"),
+  shape: z.literal("pill_hole_with_rect_pad"),
+  pcb_group_id: z.string().optional(),
+  subcircuit_id: z.string().optional(),
+  hole_shape: z.literal("pill"),
+  pad_shape: z.literal("rect"),
+  hole_width: z.number(),
+  hole_height: z.number(),
+  rect_pad_width: z.number(),
+  rect_pad_height: z.number(),
+  x: distance,
+  y: distance,
+  layers: z.array(layer_ref),
+  port_hints: z.array(z.string()).optional(),
+  pcb_component_id: z.string().optional(),
+  pcb_port_id: z.string().optional(),
+  pcb_plated_hole_id: getZodPrefixedIdWithDefault("pcb_plated_hole")
+});
 var pcb_plated_hole = z.union([
   pcb_plated_hole_circle,
   pcb_plated_hole_oval,
@@ -5160,7 +5216,8 @@ var pcb_board = z.object({
   center: point,
   thickness: length.optional().default(1.4),
   num_layers: z.number().optional().default(4),
-  outline: z.array(point).optional()
+  outline: z.array(point).optional(),
+  material: z.enum(["fr4", "fr1"]).default("fr4")
 }).describe("Defines the board outline of the PCB");
 expectTypesMatch(true);
 var pcb_placement_error = z.object({
@@ -5209,7 +5266,6 @@ var pcb_silkscreen_text = z.object({
   subcircuit_id: z.string().optional(),
   font: z.literal("tscircuit2024").default("tscircuit2024"),
   font_size: distance.default("0.2mm"),
-  stroke_width: length.optional().default("1mm"),
   pcb_component_id: z.string(),
   text: z.string(),
   ccw_rotation: z.number().optional(),
@@ -5334,18 +5390,6 @@ var pcb_missing_footprint_error = z.object({
 expectTypesMatch(
   true
 );
-var pcb_manual_edit_conflict_error = z.object({
-  type: z.literal("pcb_manual_edit_conflict_error"),
-  pcb_error_id: getZodPrefixedIdWithDefault("pcb_manual_edit_conflict_error"),
-  message: z.string(),
-  pcb_component_id: z.string(),
-  pcb_group_id: z.string().optional(),
-  subcircuit_id: z.string().optional(),
-  source_component_id: z.string()
-}).describe(
-  "Error emitted when a component has both manual placement and explicit pcbX/pcbY coordinates"
-);
-expectTypesMatch(true);
 var pcb_group = z.object({
   type: z.literal("pcb_group"),
   pcb_group_id: getZodPrefixedIdWithDefault("pcb_group"),
@@ -5366,6 +5410,20 @@ var pcb_autorouting_error = z.object({
   message: z.string()
 }).describe("The autorouting has failed to route a portion of the board");
 expectTypesMatch(true);
+var pcb_manual_edit_conflict_warning = z.object({
+  type: z.literal("pcb_manual_edit_conflict_warning"),
+  pcb_manual_edit_conflict_warning_id: getZodPrefixedIdWithDefault(
+    "pcb_manual_edit_conflict_warning"
+  ),
+  message: z.string(),
+  pcb_component_id: z.string(),
+  pcb_group_id: z.string().optional(),
+  subcircuit_id: z.string().optional(),
+  source_component_id: z.string()
+}).describe(
+  "Warning emitted when a component has both manual placement and explicit pcbX/pcbY coordinates"
+);
+expectTypesMatch(true);
 var cad_component = z.object({
   type: z.literal("cad_component"),
   cad_component_id: z.string(),
@@ -5404,10 +5462,11 @@ var any_circuit_element = z.union([
   source_simple_mosfet,
   source_simple_potentiometer,
   source_simple_push_button,
+  source_project_metadata,
   pcb_component,
   pcb_hole,
   pcb_missing_footprint_error,
-  pcb_manual_edit_conflict_error,
+  pcb_manual_edit_conflict_warning,
   pcb_plated_hole,
   pcb_keepout,
   pcb_port,
@@ -5442,9 +5501,12 @@ var any_circuit_element = z.union([
   schematic_net_label,
   schematic_debug_object,
   schematic_voltage_probe,
+  schematic_manual_edit_conflict_warning,
   cad_component
 ]);
 var any_soup_element = any_circuit_element;
+expectTypesMatch(true);
+expectStringUnionsMatch(true);
 
 // node_modules/@tscircuit/soup-util/dist/index.js
 import { applyToPoint, decomposeTSR } from "transformation-matrix";
@@ -5845,7 +5907,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect13, useMemo as useMemo6, useRef as useRef8, useState as useState10 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo6, useRef as useRef9, useState as useState10 } from "react";
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
@@ -7072,6 +7134,7 @@ var zIndexMap = {
   errorOverlay: 30,
   ratsNestOverlay: 20,
   toolbarOverlay: 20,
+  warnings: 20,
   topLayer: 10
   // each layer after this is 1 less than the previous
 };
@@ -7106,6 +7169,7 @@ var LAYER_NAME_TO_COLOR = {
   ...colors_default.board
 };
 var DEFAULT_DRAW_ORDER = [
+  "board",
   "top",
   "top_silkscreen",
   "bottom_silkscreen",
@@ -7655,6 +7719,7 @@ var drawPrimitives = (drawer, primitives) => {
 // src/components/CanvasPrimitiveRenderer.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var orderedLayers = [
+  "board",
   "bottom_silkscreen",
   "bottom",
   "top",
@@ -7787,25 +7852,113 @@ var DebugGraphicsOverlay = ({
   );
 };
 
+// src/components/WarningGraphicsOverlay.tsx
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { applyToPoint as applyToPoint5, identity as identity3 } from "transformation-matrix";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var WarningGraphicsOverlay = ({
+  children,
+  transform = identity3(),
+  elements = []
+}) => {
+  const [containerRef, { width, height }] = useMeasure_default();
+  const canvasRef = useRef4(null);
+  useEffect6(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !width || !height) return;
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, width, height);
+    const pcbComponents = elements.filter(
+      (el) => el.type === "pcb_component"
+    );
+    const warnings = elements.filter(
+      (el) => el.type === "pcb_manual_edit_conflict_warning"
+    );
+    ctx.strokeStyle = colors_default.board.drc_warning;
+    ctx.lineWidth = 2;
+    warnings.forEach((warning) => {
+      const component = pcbComponents.find(
+        (comp) => comp.pcb_component_id === warning.pcb_component_id
+      );
+      if (!component) return;
+      const { width: width2, height: height2, center } = component;
+      const transformedCenter = applyToPoint5(transform, center);
+      const scaledWidth = width2 * Math.abs(transform.a);
+      const scaledHeight = height2 * Math.abs(transform.d);
+      const boxPadding = 0.1 * Math.abs(transform.a);
+      const boxWidth = scaledWidth + boxPadding * 2;
+      const boxHeight = scaledHeight + boxPadding * 2;
+      const x = transformedCenter.x - boxWidth / 2;
+      const y = transformedCenter.y - boxHeight / 2;
+      ctx.beginPath();
+      ctx.rect(x, y, boxWidth, boxHeight);
+      ctx.stroke();
+      const labelText = "Manual Edit Conflict";
+      const labelPadding = 4;
+      const fontSize = Math.max(8, Math.min(12, 10 * Math.abs(transform.a)));
+      ctx.font = `${fontSize}px sans-serif`;
+      const labelMetrics = ctx.measureText(labelText);
+      const labelWidth = labelMetrics.width + labelPadding * 2;
+      const labelHeight = fontSize + labelPadding * 2;
+      const labelX = x + (boxWidth - labelWidth) / 2;
+      const labelY = y + boxHeight + 5;
+      ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
+      ctx.beginPath();
+      ctx.roundRect(labelX, labelY, labelWidth, labelHeight, 3);
+      ctx.fill();
+      ctx.fillStyle = colors_default.board.drc_warning;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(labelText, labelX + labelWidth / 2, labelY + labelHeight / 2);
+    });
+  }, [elements, transform, width, height]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: containerRef,
+      style: { position: "relative", width: "100%", height: "100%" },
+      children: [
+        children,
+        /* @__PURE__ */ jsx5(
+          "canvas",
+          {
+            ref: canvasRef,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              zIndex: zIndexMap.warnings
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/components/DimensionOverlay.tsx
-import { useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
-import { applyToPoint as applyToPoint5, identity as identity3, inverse as inverse2 } from "transformation-matrix";
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState3 } from "react";
+import { applyToPoint as applyToPoint6, identity as identity4, inverse as inverse2 } from "transformation-matrix";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var DimensionOverlay = ({
   children,
   transform,
   focusOnHover = false
 }) => {
-  if (!transform) transform = identity3();
+  if (!transform) transform = identity4();
   const [dimensionToolVisible, setDimensionToolVisible] = useState3(false);
   const [dimensionToolStretching, setDimensionToolStretching] = useState3(false);
   const [dStart, setDStart] = useState3({ x: 0, y: 0 });
   const [dEnd, setDEnd] = useState3({ x: 0, y: 0 });
-  const mousePosRef = useRef4({ x: 0, y: 0 });
-  const containerRef = useRef4(null);
+  const mousePosRef = useRef5({ x: 0, y: 0 });
+  const containerRef = useRef5(null);
   const container = containerRef.current;
   const containerBounds = container?.getBoundingClientRect();
-  useEffect6(() => {
+  useEffect7(() => {
     const container2 = containerRef.current;
     const down = (e) => {
       if (e.key === "d") {
@@ -7844,8 +7997,8 @@ var DimensionOverlay = ({
       }
     };
   }, [containerRef]);
-  const screenDStart = applyToPoint5(transform, dStart);
-  const screenDEnd = applyToPoint5(transform, dEnd);
+  const screenDStart = applyToPoint6(transform, dStart);
+  const screenDEnd = applyToPoint6(transform, dEnd);
   const arrowScreenBounds = {
     left: Math.min(screenDStart.x, screenDEnd.x),
     right: Math.max(screenDStart.x, screenDEnd.x),
@@ -7858,7 +8011,7 @@ var DimensionOverlay = ({
   };
   arrowScreenBounds.width = arrowScreenBounds.right - arrowScreenBounds.left;
   arrowScreenBounds.height = arrowScreenBounds.bottom - arrowScreenBounds.top;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: containerRef,
@@ -7878,7 +8031,7 @@ var DimensionOverlay = ({
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const rwPoint = applyToPoint5(inverse2(transform), { x, y });
+        const rwPoint = applyToPoint6(inverse2(transform), { x, y });
         mousePosRef.current.x = rwPoint.x;
         mousePosRef.current.y = rwPoint.y;
         if (dimensionToolStretching) {
@@ -7894,8 +8047,8 @@ var DimensionOverlay = ({
       },
       children: [
         children,
-        dimensionToolVisible && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx5(
+        dimensionToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -7915,7 +8068,7 @@ var DimensionOverlay = ({
               children: Math.abs(dStart.x - dEnd.x).toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -7933,7 +8086,7 @@ var DimensionOverlay = ({
                 fontFamily: "sans-serif",
                 zIndex: zIndexMap.dimensionOverlay
               },
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "div",
                 {
                   style: {
@@ -7945,7 +8098,7 @@ var DimensionOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "svg",
             {
               style: {
@@ -7959,7 +8112,7 @@ var DimensionOverlay = ({
               width: containerBounds.width,
               height: containerBounds.height,
               children: [
-                /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6(
                   "marker",
                   {
                     id: "head",
@@ -7968,10 +8121,10 @@ var DimensionOverlay = ({
                     markerHeight: "4",
                     refX: "2",
                     refY: "2",
-                    children: /* @__PURE__ */ jsx5("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
+                    children: /* @__PURE__ */ jsx6("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -7984,7 +8137,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -7997,7 +8150,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDEnd.x,
@@ -8013,7 +8166,7 @@ var DimensionOverlay = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               style: {
@@ -8031,13 +8184,13 @@ var DimensionOverlay = ({
                 ",",
                 dStart.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "(",
                 dEnd.x.toFixed(2),
                 ",",
                 dEnd.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "dist:",
                 " ",
                 Math.sqrt(
@@ -8053,9 +8206,9 @@ var DimensionOverlay = ({
 };
 
 // src/components/EditPlacementOverlay.tsx
-import { useRef as useRef5, useState as useState4 } from "react";
-import { applyToPoint as applyToPoint6, identity as identity4, inverse as inverse3 } from "transformation-matrix";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useRef as useRef6, useState as useState4 } from "react";
+import { applyToPoint as applyToPoint7, identity as identity5, inverse as inverse3 } from "transformation-matrix";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isInsideOf = (pcb_component2, point2, padding = 0) => {
   const halfWidth = pcb_component2.width / 2;
   const halfHeight = pcb_component2.height / 2;
@@ -8074,8 +8227,8 @@ var EditPlacementOverlay = ({
   onCreateEditEvent,
   onModifyEditEvent
 }) => {
-  if (!transform) transform = identity4();
-  const containerRef = useRef5(null);
+  if (!transform) transform = identity5();
+  const containerRef = useRef6(null);
   const [activePcbComponentId, setActivePcbComponent] = useState4(
     null
   );
@@ -8085,7 +8238,7 @@ var EditPlacementOverlay = ({
   const in_move_footprint_mode = useGlobalStore((s) => s.in_move_footprint_mode);
   const setIsMovingComponent = useGlobalStore((s) => s.setIsMovingComponent);
   const disabled = disabledProp || !in_move_footprint_mode;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: containerRef,
@@ -8099,7 +8252,7 @@ var EditPlacementOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (Number.isNaN(x) || Number.isNaN(y)) return;
-        const rwMousePoint = applyToPoint6(inverse3(transform), { x, y });
+        const rwMousePoint = applyToPoint7(inverse3(transform), { x, y });
         let foundActiveComponent = false;
         for (const e2 of soup) {
           if (e2.type === "pcb_component" && isInsideOf(e2, rwMousePoint, 10 / transform.a)) {
@@ -8141,7 +8294,7 @@ var EditPlacementOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (Number.isNaN(x) || Number.isNaN(y)) return;
-        const rwMousePoint = applyToPoint6(inverse3(transform), { x, y });
+        const rwMousePoint = applyToPoint7(inverse3(transform), { x, y });
         setDragState({
           ...dragState,
           dragEnd: rwMousePoint
@@ -8170,8 +8323,8 @@ var EditPlacementOverlay = ({
         children,
         !disabled && soup.filter((e) => e.type === "pcb_component").map((e) => {
           if (!e?.center) return null;
-          const projectedCenter = applyToPoint6(transform, e.center);
-          return /* @__PURE__ */ jsx6(
+          const projectedCenter = applyToPoint7(transform, e.center);
+          return /* @__PURE__ */ jsx7(
             "div",
             {
               style: {
@@ -8195,21 +8348,21 @@ var EditPlacementOverlay = ({
 };
 
 // src/components/EditTraceHintOverlay.tsx
-import { Fragment as Fragment2, useEffect as useEffect9, useRef as useRef6, useState as useState5 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect10, useRef as useRef7, useState as useState5 } from "react";
 import {
-  applyToPoint as applyToPoint7,
-  identity as identity5,
+  applyToPoint as applyToPoint8,
+  identity as identity6,
   inverse as inverse4
 } from "transformation-matrix";
 
 // src/components/HotkeyActionMenu.tsx
 import { css } from "@emotion/css";
-import { useEffect as useEffect8 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect9 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var HotkeyActionMenu = ({
   hotkeys
 }) => {
-  useEffect8(() => {
+  useEffect9(() => {
     const handleKeyDown = (event) => {
       hotkeys.forEach((hotkey) => {
         if (event.key === hotkey.key) {
@@ -8222,7 +8375,7 @@ var HotkeyActionMenu = ({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [hotkeys]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: css`
@@ -8233,7 +8386,7 @@ var HotkeyActionMenu = ({
         margin: 8px;
       `,
       children: hotkeys.map((hotkey) => {
-        return /* @__PURE__ */ jsxs5(
+        return /* @__PURE__ */ jsxs6(
           "div",
           {
             className: css`
@@ -8258,9 +8411,9 @@ var HotkeyActionMenu = ({
               }
             `,
             children: [
-              /* @__PURE__ */ jsx7("div", { className: "key", children: hotkey.key }),
+              /* @__PURE__ */ jsx8("div", { className: "key", children: hotkey.key }),
               " ",
-              /* @__PURE__ */ jsx7("div", { className: "name", children: hotkey.name })
+              /* @__PURE__ */ jsx8("div", { className: "name", children: hotkey.name })
             ]
           },
           hotkey.name
@@ -8271,7 +8424,7 @@ var HotkeyActionMenu = ({
 };
 
 // src/components/EditTraceHintOverlay.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var isInsideOfSmtpad = (elm, point2, padding = 0) => {
   if (elm.shape === "circle") {
     return false;
@@ -8316,8 +8469,8 @@ var EditTraceHintOverlay = ({
   onCreateEditEvent,
   onModifyEditEvent
 }) => {
-  if (!transform) transform = identity5();
-  const containerRef = useRef6(null);
+  if (!transform) transform = identity6();
+  const containerRef = useRef7(null);
   const containerBounds = containerRef.current?.getBoundingClientRect();
   const [selectedElement, setSelectedElement] = useState5(null);
   const toast = useToast();
@@ -8328,10 +8481,10 @@ var EditTraceHintOverlay = ({
   const disabled = disabledProp || !in_edit_trace_mode;
   let ogCenterScreen, dragEndScreen;
   if (dragState?.originalCenter && dragState?.dragEnd) {
-    ogCenterScreen = applyToPoint7(transform, dragState?.originalCenter);
-    dragEndScreen = applyToPoint7(transform, dragState?.dragEnd);
+    ogCenterScreen = applyToPoint8(transform, dragState?.originalCenter);
+    dragEndScreen = applyToPoint8(transform, dragState?.dragEnd);
   }
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isElementSelected) return;
     function keyDown(e) {
       if (e.key === "Escape") {
@@ -8342,7 +8495,7 @@ var EditTraceHintOverlay = ({
     window.addEventListener("keydown", keyDown);
     return () => window.removeEventListener("keydown", keyDown);
   }, [isElementSelected]);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: containerRef,
@@ -8356,7 +8509,7 @@ var EditTraceHintOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint7(inverse4(transform), { x, y });
+        const rwMousePoint = applyToPoint8(inverse4(transform), { x, y });
         if (!isElementSelected) {
           for (const e2 of soup) {
             if (e2.type === "pcb_smtpad" && isInsideOfSmtpad(e2, rwMousePoint, 10 / transform.a) || e2.type === "pcb_plated_hole" && isInsideOfPlatedHole(e2, rwMousePoint, 10 / transform.a)) {
@@ -8399,7 +8552,7 @@ var EditTraceHintOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint7(inverse4(transform), { x, y });
+        const rwMousePoint = applyToPoint8(inverse4(transform), { x, y });
         setDragState({
           ...dragState,
           dragEnd: rwMousePoint
@@ -8418,10 +8571,10 @@ var EditTraceHintOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint7(inverse4(transform), { x, y });
+        const rwMousePoint = applyToPoint8(inverse4(transform), { x, y });
         if (dragState) {
           cancelPanDrag();
-          const lastPointScreen = applyToPoint7(
+          const lastPointScreen = applyToPoint8(
             transform,
             dragState.editEvent.route.slice(-1)[0] ?? dragState.originalCenter
           );
@@ -8451,7 +8604,7 @@ var EditTraceHintOverlay = ({
       },
       children: [
         children,
-        in_edit_trace_mode && dragState?.editEvent && ogCenterScreen && dragEndScreen && /* @__PURE__ */ jsxs6(
+        in_edit_trace_mode && dragState?.editEvent && ogCenterScreen && dragEndScreen && /* @__PURE__ */ jsxs7(
           "svg",
           {
             style: {
@@ -8465,21 +8618,21 @@ var EditTraceHintOverlay = ({
             width: containerBounds?.width,
             height: containerBounds?.height,
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "path",
                 {
                   stroke: "red",
-                  d: `M ${ogCenterScreen.x} ${ogCenterScreen.y} ${dragState?.editEvent.route.map((p) => applyToPoint7(transform, p)).map((p) => `L ${p.x} ${p.y}`).join(" ")} L ${dragEndScreen.x} ${dragEndScreen.y}`
+                  d: `M ${ogCenterScreen.x} ${ogCenterScreen.y} ${dragState?.editEvent.route.map((p) => applyToPoint8(transform, p)).map((p) => `L ${p.x} ${p.y}`).join(" ")} L ${dragEndScreen.x} ${dragEndScreen.y}`
                 }
               ),
               dragState?.editEvent.route.map((r, i) => {
-                const rScreen = applyToPoint7(transform, r);
-                return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-                  r.via && /* @__PURE__ */ jsx8("circle", { cx: rScreen.x, cy: rScreen.y, r: 16, stroke: "red" }),
-                  /* @__PURE__ */ jsx8("circle", { cx: rScreen.x, cy: rScreen.y, r: 8, stroke: "red" })
+                const rScreen = applyToPoint8(transform, r);
+                return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                  r.via && /* @__PURE__ */ jsx9("circle", { cx: rScreen.x, cy: rScreen.y, r: 16, stroke: "red" }),
+                  /* @__PURE__ */ jsx9("circle", { cx: rScreen.x, cy: rScreen.y, r: 8, stroke: "red" })
                 ] }, `r-${i}`);
               }),
-              shouldCreateAsVia && /* @__PURE__ */ jsx8(
+              shouldCreateAsVia && /* @__PURE__ */ jsx9(
                 "circle",
                 {
                   cx: dragEndScreen.x,
@@ -8489,7 +8642,7 @@ var EditTraceHintOverlay = ({
                 },
                 "via-outer-circle"
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "circle",
                 {
                   cx: dragEndScreen.x,
@@ -8501,7 +8654,7 @@ var EditTraceHintOverlay = ({
             ]
           }
         ),
-        !disabled && /* @__PURE__ */ jsx8(
+        !disabled && /* @__PURE__ */ jsx9(
           "svg",
           {
             style: {
@@ -8517,9 +8670,9 @@ var EditTraceHintOverlay = ({
             children: soup.filter((e) => e.type === "pcb_trace_hint").map((e) => {
               const { route } = e;
               const pcb_port2 = su_default(soup).pcb_port.get(e.pcb_port_id);
-              const pcb_port_screen = applyToPoint7(transform, pcb_port2);
-              return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-                /* @__PURE__ */ jsx8(
+              const pcb_port_screen = applyToPoint8(transform, pcb_port2);
+              return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                /* @__PURE__ */ jsx9(
                   "rect",
                   {
                     x: pcb_port_screen.x - 10,
@@ -8530,17 +8683,17 @@ var EditTraceHintOverlay = ({
                   },
                   `rect-${e.pcb_port_id}`
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "path",
                   {
                     stroke: "red",
-                    d: `M ${pcb_port_screen.x} ${pcb_port_screen.y} ${route.map((r) => applyToPoint7(transform, r)).map((r) => `L ${r.x} ${r.y}`).join(" ")}`
+                    d: `M ${pcb_port_screen.x} ${pcb_port_screen.y} ${route.map((r) => applyToPoint8(transform, r)).map((r) => `L ${r.x} ${r.y}`).join(" ")}`
                   },
                   `path-${e.pcb_port_id}`
                 ),
-                route.map((r) => ({ ...r, ...applyToPoint7(transform, r) })).map((r, i) => /* @__PURE__ */ jsxs6(Fragment2, { children: [
-                  /* @__PURE__ */ jsx8("circle", { cx: r.x, cy: r.y, r: 8, stroke: "red" }),
-                  r.via && /* @__PURE__ */ jsx8(
+                route.map((r) => ({ ...r, ...applyToPoint8(transform, r) })).map((r, i) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                  /* @__PURE__ */ jsx9("circle", { cx: r.x, cy: r.y, r: 8, stroke: "red" }),
+                  r.via && /* @__PURE__ */ jsx9(
                     "circle",
                     {
                       cx: r.x,
@@ -8556,7 +8709,7 @@ var EditTraceHintOverlay = ({
           },
           "pcb-trace-hints"
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -8564,7 +8717,7 @@ var EditTraceHintOverlay = ({
               right: 0,
               bottom: 0
             },
-            children: isElementSelected && /* @__PURE__ */ jsx8(
+            children: isElementSelected && /* @__PURE__ */ jsx9(
               HotkeyActionMenu,
               {
                 hotkeys: [
@@ -8597,15 +8750,15 @@ var EditTraceHintOverlay = ({
 
 // src/components/ErrorOverlay.tsx
 import { css as css2 } from "@emotion/css";
-import { useRef as useRef7 } from "react";
-import { applyToPoint as applyToPoint8, identity as identity6 } from "transformation-matrix";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useRef as useRef8 } from "react";
+import { applyToPoint as applyToPoint9, identity as identity7 } from "transformation-matrix";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var ErrorSVG = ({
   screenPort1,
   screenPort2,
   errorCenter,
   canLineBeDrawn
-}) => /* @__PURE__ */ jsx9(
+}) => /* @__PURE__ */ jsx10(
   "svg",
   {
     style: {
@@ -8618,8 +8771,8 @@ var ErrorSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: canLineBeDrawn && /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
+    children: canLineBeDrawn && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10(
         "line",
         {
           x1: screenPort1.x,
@@ -8631,7 +8784,7 @@ var ErrorSVG = ({
           stroke: "red"
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "line",
         {
           x1: errorCenter.x,
@@ -8643,7 +8796,7 @@ var ErrorSVG = ({
           stroke: "red"
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "rect",
         {
           x: errorCenter.x - 5,
@@ -8658,9 +8811,9 @@ var ErrorSVG = ({
   }
 );
 var ErrorOverlay = ({ children, transform, elements }) => {
-  if (!transform) transform = identity6();
-  const containerRef = useRef7(null);
-  return /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, ref: containerRef, children: [
+  if (!transform) transform = identity7();
+  const containerRef = useRef8(null);
+  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, ref: containerRef, children: [
     children,
     elements?.filter((el) => el.type === "pcb_trace_error").map((el) => {
       const { pcb_port_ids } = el;
@@ -8671,11 +8824,11 @@ var ErrorOverlay = ({ children, transform, elements }) => {
         (el2) => el2.type === "pcb_port" && el2.pcb_port_id === pcb_port_ids?.[1]
       );
       if (!port1 || !port2) return null;
-      const screenPort1 = applyToPoint8(transform, {
+      const screenPort1 = applyToPoint9(transform, {
         x: port1.x,
         y: port1.y
       });
-      const screenPort2 = applyToPoint8(transform, {
+      const screenPort2 = applyToPoint9(transform, {
         x: port2.x,
         y: port2.y
       });
@@ -8687,8 +8840,8 @@ var ErrorOverlay = ({ children, transform, elements }) => {
       if (isNaN(errorCenter.x) || isNaN(errorCenter.y)) {
         return null;
       }
-      return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-        /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        /* @__PURE__ */ jsx10(
           ErrorSVG,
           {
             screenPort1,
@@ -8697,7 +8850,7 @@ var ErrorOverlay = ({ children, transform, elements }) => {
             canLineBeDrawn
           }
         ),
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             className: css2`
@@ -8730,8 +8883,8 @@ var ErrorOverlay = ({ children, transform, elements }) => {
                   }
                 `,
             children: [
-              /* @__PURE__ */ jsx9("div", { className: "error-message", children: el.message }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "error-message", children: el.message }),
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: css2`
@@ -8752,10 +8905,10 @@ var ErrorOverlay = ({ children, transform, elements }) => {
 
 // src/components/MouseElementTracker.tsx
 import { useState as useState7, useMemo as useMemo3 } from "react";
-import { applyToPoint as applyToPoint9, inverse as inverse5 } from "transformation-matrix";
+import { applyToPoint as applyToPoint10, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/ElementOverlayBox.tsx
-import { useEffect as useEffect10, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState6 } from "react";
 
 // src/lib/get-trace-overlay-text.ts
 function getTraceOverlayInfo({
@@ -8810,7 +8963,7 @@ function filterTracesIfMultiple(filterTraces) {
 }
 
 // src/components/ElementOverlayBox.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var containerStyle = {
   position: "absolute",
   left: 0,
@@ -8867,7 +9020,7 @@ var HighlightedPrimitiveBoxWithText = ({
 }) => {
   const [finalState, setFinalState] = useState6(false);
   const primitiveElement = primitive._element;
-  useEffect10(() => {
+  useEffect11(() => {
     setTimeout(() => {
       setFinalState(true);
     }, 100);
@@ -8890,7 +9043,7 @@ var HighlightedPrimitiveBoxWithText = ({
     const overlayInfo = getTraceOverlayInfo(traceTextContext);
     if (!overlayInfo) return null;
     const yOffset = mousePos.y - 35;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
@@ -8902,7 +9055,7 @@ var HighlightedPrimitiveBoxWithText = ({
           pointerEvents: "none",
           transform: "translateX(-50%)"
         },
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           "div",
           {
             style: {
@@ -8924,7 +9077,7 @@ var HighlightedPrimitiveBoxWithText = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       style: {
@@ -8938,7 +9091,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation2}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -8954,7 +9107,7 @@ var HighlightedPrimitiveBoxWithText = ({
             opacity: finalState ? 1 : si === 0 ? 1 : 0,
             transition: "width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s, opacity 0.2s"
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -9002,7 +9155,7 @@ var ElementOverlayBox = ({
     is_showing_multiple_traces_length,
     elements
   });
-  return /* @__PURE__ */ jsx10("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive, i) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive, i) => /* @__PURE__ */ jsx11(
     HighlightedPrimitiveBoxWithText,
     {
       primitive,
@@ -9021,7 +9174,7 @@ function ifSetsMatchExactly(set1, set2) {
 
 // src/components/MouseElementTracker.tsx
 import { pointToSegmentDistance } from "@tscircuit/math-utils";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var getPrimitivesUnderPoint = (primitives, rwPoint, transform) => {
   const newMousedPrimitives = [];
   for (const primitive of primitives) {
@@ -9072,7 +9225,7 @@ var MouseElementTracker = ({
       if (primitive._element?.type === "pcb_via") continue;
       if (primitive._element?.type === "pcb_component") continue;
       if (primitive?.layer === "drill") continue;
-      const screenPos = applyToPoint9(
+      const screenPos = applyToPoint10(
         transform,
         primitive
       );
@@ -9098,7 +9251,7 @@ var MouseElementTracker = ({
   }, [mousedPrimitives, transform]);
   const handleInteraction = (x, y, transform2, primitives2) => {
     setMousePos({ x, y });
-    const rwPoint = applyToPoint9(inverse5(transform2), { x, y });
+    const rwPoint = applyToPoint10(inverse5(transform2), { x, y });
     const newMousedPrimitives = getPrimitivesUnderPoint(
       primitives2,
       rwPoint,
@@ -9113,7 +9266,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       style: { position: "relative" },
@@ -9136,7 +9289,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           ElementOverlayBox,
           {
             elements,
@@ -9150,10 +9303,10 @@ var MouseElementTracker = ({
 };
 
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint10, identity as identity7 } from "transformation-matrix";
+import { applyToPoint as applyToPoint11, identity as identity8 } from "transformation-matrix";
 import { getFullConnectivityMapFromCircuitJson } from "circuit-json-to-connectivity-map";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var RatsNestOverlay = ({ transform, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
   const { netMap, idToNetMap } = useMemo4(
@@ -9215,10 +9368,10 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
     return lines;
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
-  if (!transform) transform = identity7();
-  return /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
+  if (!transform) transform = identity8();
+  return /* @__PURE__ */ jsxs10("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "svg",
       {
         style: {
@@ -9232,9 +9385,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint10(transform, startPoint);
-          const transformedEnd = applyToPoint10(transform, endPoint);
-          return /* @__PURE__ */ jsx12(
+          const transformedStart = applyToPoint11(transform, startPoint);
+          const transformedEnd = applyToPoint11(transform, endPoint);
+          return /* @__PURE__ */ jsx13(
             "line",
             {
               x1: transformedStart.x,
@@ -9260,7 +9413,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.107",
+  version: "1.11.109",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -9286,14 +9439,13 @@ var package_default = {
     "@storybook/nextjs": "^8.0.6",
     "@storybook/react": "^8.0.6",
     "@swc/core": "^1.4.12",
-    "@tscircuit/core": "0.0.372",
     "@tscircuit/eagle-xml-converter": "^1.0.0",
     "@tscircuit/props": "^0.0.172",
     "@tscircuit/soup-util": "^0.0.41",
     "@types/color": "^3.0.6",
     "@types/node": "18.7.23",
     "@types/react": "^18.3.3",
-    "circuit-json": "^0.0.148",
+    "circuit-json": "^0.0.158",
     next: "^14.1.4",
     "pixi.js": "^8.6.6",
     react: "^18.2.0",
@@ -9307,11 +9459,11 @@ var package_default = {
     zod: "^3.23.5"
   },
   peerDependencies: {
-    react: "*",
-    "@tscircuit/core": "*"
+    react: "*"
   },
   dependencies: {
     "@emotion/css": "^11.11.2",
+    "@tscircuit/core": "^0.0.380",
     "@tscircuit/math-utils": "^0.0.16",
     "circuit-json-to-connectivity-map": "^0.0.20",
     "circuit-to-svg": "^0.0.36",
@@ -9325,12 +9477,12 @@ var package_default = {
 };
 
 // src/hooks/useHotKey.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 var useHotKey = (key, onUse) => {
   const isMouseOverContainer = useGlobalStore(
     (s) => s.is_mouse_over_container
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (!key || typeof onUse !== "function") return;
     const handleKeyDown = (event) => {
       const keyParts = key.split("+");
@@ -9352,13 +9504,13 @@ var useHotKey = (key, onUse) => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var LayerButton = ({
   name,
   selected,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: css3`
@@ -9374,8 +9526,8 @@ var LayerButton = ({
       `,
       onClick,
       children: [
-        /* @__PURE__ */ jsx13("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx14(
           "span",
           {
             style: {
@@ -9390,7 +9542,7 @@ var LayerButton = ({
     }
   );
 };
-var ToolbarButton = ({ children, ...props }) => /* @__PURE__ */ jsx13(
+var ToolbarButton = ({ children, ...props }) => /* @__PURE__ */ jsx14(
   "div",
   {
     ...props,
@@ -9415,7 +9567,7 @@ var CheckboxMenuItem = ({
   checked,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: css3`
@@ -9437,8 +9589,8 @@ var CheckboxMenuItem = ({
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx13("input", { type: "checkbox", checked }),
-        /* @__PURE__ */ jsx13("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx14("input", { type: "checkbox", checked }),
+        /* @__PURE__ */ jsx14("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -9483,7 +9635,7 @@ var ToolbarOverlay = ({ children, elements }) => {
   useHotKey("7", () => selectLayer("inner5"));
   useHotKey("8", () => selectLayer("inner6"));
   const errorCount = elements?.filter((e) => e.type.includes("error")).length ?? 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       style: { position: "relative" },
@@ -9496,7 +9648,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             style: {
@@ -9517,7 +9669,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             style: {
@@ -9534,7 +9686,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsxs11(
                 ToolbarButton,
                 {
                   onClick: () => {
@@ -9546,10 +9698,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs10("div", { children: [
+                    /* @__PURE__ */ jsxs11("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx14(
                         "span",
                         {
                           style: {
@@ -9561,7 +9713,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx13("div", { style: { marginTop: 4, minWidth: 120 }, children: all_layers.map((l) => l.replace(/-/g, "")).map((layer) => /* @__PURE__ */ jsx13(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx14("div", { style: { marginTop: 4, minWidth: 120 }, children: all_layers.map((l) => l.replace(/-/g, "")).map((layer) => /* @__PURE__ */ jsx14(
                       LayerButton,
                       {
                         name: layer,
@@ -9575,77 +9727,77 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsxs11(
                 ToolbarButton,
                 {
                   style: errorCount > 0 ? { color: "red" } : {},
                   onClick: () => setErrorsOpen(!isErrorsOpen),
                   onMouseLeave: () => setErrorsOpen(false),
                   children: [
-                    /* @__PURE__ */ jsxs10("div", { children: [
+                    /* @__PURE__ */ jsxs11("div", { children: [
                       errorCount,
                       " errors"
                     ] }),
-                    isErrorsOpen && /* @__PURE__ */ jsx13(
+                    isErrorsOpen && /* @__PURE__ */ jsx14(
                       "div",
                       {
                         style: { display: "grid", gridTemplateColumns: "100px 300px" },
-                        children: elements?.filter((e) => e.type.includes("error")).map((e, i) => /* @__PURE__ */ jsxs10(Fragment4, { children: [
-                          /* @__PURE__ */ jsx13("div", { children: e.error_type }),
-                          /* @__PURE__ */ jsx13("div", { children: e.message })
+                        children: elements?.filter((e) => e.type.includes("error")).map((e, i) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
+                          /* @__PURE__ */ jsx14("div", { children: e.error_type }),
+                          /* @__PURE__ */ jsx14("div", { children: e.message })
                         ] }, i))
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 ToolbarButton,
                 {
                   style: {},
                   onClick: () => {
                     setEditMode(in_draw_trace_mode ? "off" : "draw_trace");
                   },
-                  children: /* @__PURE__ */ jsxs10("div", { children: [
+                  children: /* @__PURE__ */ jsxs11("div", { children: [
                     in_draw_trace_mode ? "\u2716 " : "",
                     "Edit Traces"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 ToolbarButton,
                 {
                   style: {},
                   onClick: () => {
                     setEditMode(in_move_footprint_mode ? "off" : "move_footprint");
                   },
-                  children: /* @__PURE__ */ jsxs10("div", { children: [
+                  children: /* @__PURE__ */ jsxs11("div", { children: [
                     in_move_footprint_mode ? "\u2716 " : "",
                     "Move Components"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 ToolbarButton,
                 {
                   style: {},
                   onClick: () => {
                     setIsShowingRatsNest(!is_showing_rats_nest);
                   },
-                  children: /* @__PURE__ */ jsxs10("div", { children: [
+                  children: /* @__PURE__ */ jsxs11("div", { children: [
                     is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 ToolbarButton,
                 {
                   onClick: () => {
                     setViewMenuOpen(!isViewMenuOpen);
                   },
-                  children: /* @__PURE__ */ jsxs10("div", { children: [
-                    /* @__PURE__ */ jsxs10(
+                  children: /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsxs11(
                       "div",
                       {
                         style: {
@@ -9656,7 +9808,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         children: [
                           "View",
                           " ",
-                          /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx14(
                             "span",
                             {
                               style: {
@@ -9671,8 +9823,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs10("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx13(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs11("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx14(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -9684,7 +9836,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx13(
+                      /* @__PURE__ */ jsx14(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -9707,7 +9859,7 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo5(() => {
@@ -9730,34 +9882,37 @@ var CanvasElementsRenderer = (props) => {
       primitiveIdsInMousedOverNet: hoverState.primitiveIdsInMousedOverNet
     });
   }, [primitivesWithoutInteractionMetadata, hoverState]);
-  const onMouseOverPrimitives = useCallback2((primitivesHoveredOver) => {
-    const primitiveIdsInMousedOverNet = [];
-    for (const primitive of primitivesHoveredOver) {
-      if (primitive._element) {
-        const connectedPrimitivesList = connectivityMap.getNetConnectedToId(
-          "pcb_port_id" in primitive._element ? primitive._element?.pcb_port_id : "pcb_trace_id" in primitive._element ? primitive._element?.pcb_trace_id : ""
-        );
-        primitiveIdsInMousedOverNet.push(
-          ...connectivityMap.getIdsConnectedToNet(connectedPrimitivesList)
-        );
+  const onMouseOverPrimitives = useCallback2(
+    (primitivesHoveredOver) => {
+      const primitiveIdsInMousedOverNet = [];
+      for (const primitive of primitivesHoveredOver) {
+        if (primitive._element) {
+          const connectedPrimitivesList = connectivityMap.getNetConnectedToId(
+            "pcb_port_id" in primitive._element ? primitive._element?.pcb_port_id : "pcb_trace_id" in primitive._element ? primitive._element?.pcb_trace_id : ""
+          );
+          primitiveIdsInMousedOverNet.push(
+            ...connectivityMap.getIdsConnectedToNet(connectedPrimitivesList)
+          );
+        }
       }
-    }
-    const drawingObjectIdsWithMouseOver = new Set(
-      primitivesHoveredOver.map((p) => p._pcb_drawing_object_id)
-    );
-    setHoverState({
-      drawingObjectIdsWithMouseOver,
-      primitiveIdsInMousedOverNet
-    });
-  }, [connectivityMap]);
-  return /* @__PURE__ */ jsx14(
+      const drawingObjectIdsWithMouseOver = new Set(
+        primitivesHoveredOver.map((p) => p._pcb_drawing_object_id)
+      );
+      setHoverState({
+        drawingObjectIdsWithMouseOver,
+        primitiveIdsInMousedOverNet
+      });
+    },
+    [connectivityMap]
+  );
+  return /* @__PURE__ */ jsx15(
     MouseElementTracker,
     {
       elements,
       transform,
       primitives: primitivesWithoutInteractionMetadata,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -9766,7 +9921,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx15(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -9775,24 +9930,31 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx14(
+              children: /* @__PURE__ */ jsx15(
                 DimensionOverlay,
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
-                  children: /* @__PURE__ */ jsx14(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx14(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx14(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx14(
+                  children: /* @__PURE__ */ jsx15(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx15(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx15(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx15(
                     DebugGraphicsOverlay,
                     {
                       transform,
                       debugGraphics: props.debugGraphics,
-                      children: /* @__PURE__ */ jsx14(
-                        CanvasPrimitiveRenderer,
+                      children: /* @__PURE__ */ jsx15(
+                        WarningGraphicsOverlay,
                         {
                           transform,
-                          primitives,
-                          width: props.width,
-                          height: props.height,
-                          grid: props.grid
+                          elements,
+                          children: /* @__PURE__ */ jsx15(
+                            CanvasPrimitiveRenderer,
+                            {
+                              transform,
+                              primitives,
+                              width: props.width,
+                              height: props.height,
+                              grid: props.grid
+                            }
+                          )
                         }
                       )
                     }
@@ -9808,7 +9970,7 @@ var CanvasElementsRenderer = (props) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultTransform = compose5(translate5(400, 300), scale3(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -9837,7 +9999,7 @@ var PCBViewer = ({
   });
   let [editEvents, setEditEvents] = useState10([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef8(false);
+  const initialRenderCompleted = useRef9(false);
   const circuitJsonKey = `${circuitJson?.length || 0}_${circuitJson?.editCount || 0}`;
   const resetTransform = () => {
     const elmBounds = refDimensions?.width > 0 ? refDimensions : { width: 500, height: 500 };
@@ -9859,7 +10021,7 @@ var PCBViewer = ({
     setTransform(targetTransform);
     return;
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -9890,9 +10052,9 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  return /* @__PURE__ */ jsxs11("div", { ref: transformRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx15("div", { ref, children: /* @__PURE__ */ jsxs11(ContextProviders, { initialState, children: [
-      /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs12("div", { ref: transformRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx16("div", { ref, children: /* @__PURE__ */ jsxs12(ContextProviders, { initialState, children: [
+      /* @__PURE__ */ jsx16(
         CanvasElementsRenderer,
         {
           transform,
@@ -9917,9 +10079,9 @@ var PCBViewer = ({
         },
         refDimensions.width
       ),
-      /* @__PURE__ */ jsx15(ToastContainer, {})
+      /* @__PURE__ */ jsx16(ToastContainer, {})
     ] }) }),
-    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx15(
+    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx16(
       "div",
       {
         onClick: () => {
@@ -9935,7 +10097,7 @@ var PCBViewer = ({
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx16(
           "div",
           {
             style: {