@tscircuit/pcb-viewer 1.11.412 → 1.11.414

package/dist/index.js

@@ -948,9 +948,6 @@ import { createContext, useContext } from "react";
 var RenderingEngineContext = createContext(null);
 var useRenderingEngine = () => useContext(RenderingEngineContext);
 
-// src/PCBViewer.tsx
-import { applyEditEvents } from "@tscircuit/core";
-
 // node_modules/@tscircuit/circuit-json-util/dist/index.js
 import * as Soup from "circuit-json";
 import * as Soup2 from "circuit-json";
@@ -8993,6 +8990,158 @@ var cjuIndexed = (soup, options = {}) => {
   return suIndexed;
 };
 cjuIndexed.unparsed = cjuIndexed;
+var getQuarterTurns = (angleRadians) => Math.round(angleRadians / (Math.PI / 2));
+var insertionDirectionToVec = (direction) => {
+  switch (direction) {
+    case "from_left":
+      return { x: -1, y: 0 };
+    case "from_right":
+      return { x: 1, y: 0 };
+    case "from_top":
+      return { x: 0, y: 1 };
+    case "from_bottom":
+      return { x: 0, y: -1 };
+  }
+};
+var vecToInsertionDirection = ({
+  x,
+  y
+}) => {
+  if (x > 0) return "from_right";
+  if (x < 0) return "from_left";
+  if (y > 0) return "from_top";
+  return "from_bottom";
+};
+var transformInsertionDirection = (direction, opts) => {
+  if (!direction) return direction;
+  if (direction === "from_above" || direction === "from_below") {
+    if (!opts.isFlipped) return direction;
+    return direction === "from_above" ? "from_below" : "from_above";
+  }
+  let { x, y } = insertionDirectionToVec(direction);
+  let quarterTurns = Math.round(opts.rotationDegrees / 90);
+  while (quarterTurns > 0) {
+    ;
+    [x, y] = [-y, x];
+    quarterTurns--;
+  }
+  while (quarterTurns < 0) {
+    ;
+    [x, y] = [y, -x];
+    quarterTurns++;
+  }
+  if (opts.isFlipped) {
+    y = -y;
+  }
+  return vecToInsertionDirection({ x, y });
+};
+var transformPCBElement = (elm, matrix2) => {
+  const tsr = decomposeTSR(matrix2);
+  const flipPadWidthHeight = Math.abs(getQuarterTurns(tsr.rotation.angle)) % 2 === 1;
+  const rotationDegrees = tsr.rotation.angle / Math.PI * 180;
+  const isFlipped = tsr.scale.sy < 0;
+  if (elm.type === "pcb_plated_hole" || elm.type === "pcb_hole" || elm.type === "pcb_via" || elm.type === "pcb_smtpad" || elm.type === "pcb_solder_paste" || elm.type === "pcb_port") {
+    const { x, y } = applyToPoint(matrix2, {
+      x: Number(elm.x),
+      y: Number(elm.y)
+    });
+    elm.x = x;
+    elm.y = y;
+    if (elm.type === "pcb_smtpad" && elm.shape === "polygon" && Array.isArray(elm.points)) {
+      elm.points = elm.points.map((point2) => {
+        const tp = applyToPoint(matrix2, { x: point2.x, y: point2.y });
+        return {
+          x: tp.x,
+          y: tp.y
+        };
+      });
+    }
+  } else if (elm.type === "pcb_keepout" || elm.type === "pcb_board") {
+    elm.center = applyToPoint(matrix2, elm.center);
+  } else if (elm.type === "pcb_silkscreen_text" || elm.type === "pcb_fabrication_note_text" || elm.type === "pcb_note_text") {
+    elm.anchor_position = applyToPoint(matrix2, elm.anchor_position);
+  } else if (elm.type === "pcb_copper_text") {
+    if (elm.anchor_position) {
+      elm.anchor_position = applyToPoint(matrix2, elm.anchor_position);
+    }
+  } else if (elm.type === "pcb_courtyard_rect") {
+    elm.center = applyToPoint(matrix2, elm.center);
+    elm.ccw_rotation = ((elm.ccw_rotation ?? 0) + rotationDegrees) % 360;
+  } else if (elm.type === "pcb_silkscreen_circle" || elm.type === "pcb_silkscreen_rect" || elm.type === "pcb_silkscreen_pill" || elm.type === "pcb_silkscreen_oval" || elm.type === "pcb_note_rect" || elm.type === "pcb_courtyard_circle") {
+    elm.center = applyToPoint(matrix2, elm.center);
+  } else if (elm.type === "pcb_component") {
+    elm.center = applyToPoint(matrix2, elm.center);
+    elm.rotation = elm.rotation + rotationDegrees;
+    elm.rotation = elm.rotation % 360;
+    if (elm.cable_insertion_center) {
+      elm.cable_insertion_center = applyToPoint(
+        matrix2,
+        elm.cable_insertion_center
+      );
+    }
+    elm.insertion_direction = transformInsertionDirection(
+      elm.insertion_direction,
+      {
+        rotationDegrees,
+        isFlipped
+      }
+    );
+    if (flipPadWidthHeight) {
+      ;
+      [elm.width, elm.height] = [elm.height, elm.width];
+    }
+  } else if (elm.type === "pcb_courtyard_outline") {
+    elm.outline = elm.outline.map((p) => {
+      const tp = applyToPoint(matrix2, p);
+      p.x = tp.x;
+      p.y = tp.y;
+      return p;
+    });
+  } else if (elm.type === "pcb_courtyard_polygon") {
+    elm.points = elm.points.map((p) => {
+      const tp = applyToPoint(matrix2, p);
+      p.x = tp.x;
+      p.y = tp.y;
+      return p;
+    });
+  } else if (elm.type === "pcb_trace") {
+    elm.route = elm.route.map((rp) => {
+      if (!("x" in rp)) {
+        rp.start = applyToPoint(matrix2, rp.start);
+        rp.end = applyToPoint(matrix2, rp.end);
+        return rp;
+      }
+      const tp = applyToPoint(matrix2, rp);
+      rp.x = tp.x;
+      rp.y = tp.y;
+      return rp;
+    });
+  } else if (elm.type === "pcb_silkscreen_path" || elm.type === "pcb_trace_hint" || elm.type === "pcb_fabrication_note_path" || elm.type === "pcb_note_path") {
+    elm.route = elm.route.map((rp) => {
+      const tp = applyToPoint(matrix2, rp);
+      rp.x = tp.x;
+      rp.y = tp.y;
+      return rp;
+    });
+  } else if (elm.type === "pcb_silkscreen_line" || elm.type === "pcb_note_line") {
+    const p1 = { x: elm.x1, y: elm.y1 };
+    const p2 = { x: elm.x2, y: elm.y2 };
+    const p1t = applyToPoint(matrix2, p1);
+    const p2t = applyToPoint(matrix2, p2);
+    elm.x1 = p1t.x;
+    elm.y1 = p1t.y;
+    elm.x2 = p2t.x;
+    elm.y2 = p2t.y;
+  } else if (elm.type === "cad_component") {
+    const newPos = applyToPoint(matrix2, {
+      x: elm.position.x,
+      y: elm.position.y
+    });
+    elm.position.x = newPos.x;
+    elm.position.y = newPos.y;
+  }
+  return elm;
+};
 var getElementId = (elm) => {
   const type = elm.type;
   const id = elm[`${type}_id`];
@@ -9806,7 +9955,7 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
 };
 
 // src/PCBViewer.tsx
-import { compose as compose9, scale as scale6, translate as translate13 } from "transformation-matrix";
+import { compose as compose9, scale as scale6, translate as translate14 } from "transformation-matrix";
 
 // node_modules/use-mouse-matrix-transform/dist/chunk-TGYMZPTI.js
 import { compose as compose2, translate as translate6, scale } from "transformation-matrix";
@@ -11633,8 +11782,229 @@ var createWebGpuWorker = async () => {
 };
 
 // src/components/WebGpuElementsRenderer.tsx
-import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
-import { SuperGrid as SuperGrid2, toMMSI as toMMSI2 } from "react-supergrid";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { SuperGrid, toMMSI } from "react-supergrid";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function WebGpuElementsRenderer(props) {
+  const { elements, primitives, transform, width = 500, height = 500 } = props;
+  const holder = useRef3(null);
+  const workerRef = useRef3(void 0);
+  const ready = useRef3(false);
+  const [supportsXRayNet, setSupportsXRayNet] = useState4(null);
+  const [failure, setFailure] = useState4();
+  const selectedLayer = useGlobalStore((s) => s.selected_layer);
+  const hiddenLayerOpacity = useGlobalStore((s) => s.hidden_layer_opacity);
+  const showCopperPours = useGlobalStore((s) => s.is_showing_copper_pours);
+  const showSolderMask = useGlobalStore((s) => s.is_showing_solder_mask);
+  const showSilkscreen = useGlobalStore((s) => s.is_showing_silkscreen);
+  const showFabricationNotes = useGlobalStore(
+    (s) => s.is_showing_fabrication_notes
+  );
+  const showPcbNotes = useGlobalStore((s) => s.is_showing_pcb_notes);
+  const showCourtyards = useGlobalStore((s) => s.is_showing_courtyards);
+  const highlightedElementIds = useMemo3(
+    () => [
+      ...new Set(
+        primitives.flatMap((p) => {
+          if (!p.is_mouse_over && !p.is_in_highlighted_net) return [];
+          const element = p._element;
+          const id = element?.[`${element.type}_id`];
+          return id ? [id] : [];
+        })
+      )
+    ],
+    [primitives]
+  );
+  const xRayElementIds = useMemo3(
+    () => (props.xRayElements ?? []).map(
+      (element) => element[`${element.type}_id`]
+    ),
+    [props.xRayElements]
+  );
+  const options = useMemo3(
+    () => ({
+      selectedLayer,
+      hiddenLayerOpacity,
+      showCopperPours,
+      showSolderMask,
+      showSilkscreen,
+      showFabricationNotes,
+      showPcbNotes,
+      showCourtyards,
+      highlightedElementIds,
+      xRayElementIds
+    }),
+    [
+      selectedLayer,
+      hiddenLayerOpacity,
+      showCopperPours,
+      showSolderMask,
+      showSilkscreen,
+      showFabricationNotes,
+      showPcbNotes,
+      showCourtyards,
+      highlightedElementIds,
+      xRayElementIds
+    ]
+  );
+  const sceneRef = useRef3(elements);
+  const viewRef = useRef3(void 0);
+  sceneRef.current = elements;
+  if (transform) {
+    const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+    viewRef.current = {
+      type: "view",
+      width: Math.max(1, Math.round(width * ratio)),
+      height: Math.max(1, Math.round(height * ratio)),
+      transform: {
+        a: transform.a * ratio,
+        b: transform.b * ratio,
+        c: transform.c * ratio,
+        d: transform.d * ratio,
+        e: transform.e * ratio,
+        f: transform.f * ratio
+      },
+      options
+    };
+  }
+  useEffect5(() => {
+    let disposed = false, failed = false, worker;
+    const canvas = document.createElement("canvas");
+    canvas.className = "pcb-webgpu-canvas";
+    canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none";
+    holder.current?.append(canvas);
+    const fail = (message) => {
+      if (disposed || failed) return;
+      failed = true;
+      clearTimeout(timeout);
+      canvas.remove();
+      ready.current = false;
+      worker?.terminate();
+      worker = void 0;
+      workerRef.current = void 0;
+      if (holder.current) holder.current.dataset.xRayNetActive = "false";
+      setFailure(message);
+    };
+    const timeout = setTimeout(
+      () => fail("WebGPU worker startup timed out"),
+      15e3
+    );
+    void (async () => {
+      try {
+        if (!navigator.gpu || typeof Worker === "undefined" || !canvas.transferControlToOffscreen)
+          throw new Error("WebGPU workers are unavailable");
+        worker = await createWebGpuWorker();
+        if (disposed || failed) {
+          worker.terminate();
+          return;
+        }
+        workerRef.current = worker;
+        worker.onmessage = ({ data }) => {
+          if (disposed || failed) return;
+          if (data.type === "rendered") {
+            if (holder.current)
+              holder.current.dataset.xRayNetActive = String(data.xRayActive);
+          } else if (data.type === "error") {
+            fail(data.message);
+          } else if (data.type === "ready") {
+            clearTimeout(timeout);
+            setSupportsXRayNet(data.supportsXRayNet);
+            ready.current = true;
+            worker.postMessage({
+              type: "scene",
+              elements: sceneRef.current
+            });
+            if (viewRef.current) worker.postMessage(viewRef.current);
+          }
+        };
+        worker.onerror = (event) => {
+          event.preventDefault();
+          fail(event.message || "WebGPU worker failed");
+        };
+        worker.addEventListener("messageerror", () => {
+          fail("WebGPU worker communication failed");
+        });
+        const offscreen = canvas.transferControlToOffscreen();
+        worker.postMessage(
+          { type: "init", canvas: offscreen },
+          [offscreen]
+        );
+      } catch (error) {
+        fail(String(error));
+      }
+    })();
+    return () => {
+      disposed = true;
+      clearTimeout(timeout);
+      ready.current = false;
+      workerRef.current = void 0;
+      worker?.terminate();
+      canvas.remove();
+    };
+  }, []);
+  useEffect5(() => {
+    if (ready.current)
+      workerRef.current?.postMessage({
+        type: "scene",
+        elements
+      });
+  }, [elements]);
+  useEffect5(() => {
+    if (ready.current && viewRef.current)
+      workerRef.current?.postMessage(viewRef.current);
+  }, [transform, width, height, options]);
+  const xRayUnavailable = Boolean(
+    props.xRayElements && supportsXRayNet === false
+  );
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: holder,
+      "data-pcb-renderer": "webgpu",
+      "data-webgpu-error": failure,
+      style: {
+        width,
+        height,
+        background: "black",
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: failure ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          style: { padding: 16, color: "white", position: "relative" },
+          children: [
+            /* @__PURE__ */ jsx3("strong", { children: "WebGPU rendering failed" }),
+            /* @__PURE__ */ jsx3("div", { children: failure })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx3(
+          SuperGrid,
+          {
+            textColor: "rgba(0,255,0,0.8)",
+            majorColor: "rgba(0,255,0,0.4)",
+            minorColor: "rgba(0,255,0,0.2)",
+            screenSpaceCellSize: 200,
+            width,
+            height,
+            transform,
+            stringifyCoord: (x, y, z) => `${toMMSI(x, z)}, ${toMMSI(y, z)}`
+          }
+        ),
+        xRayUnavailable && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            role: "status",
+            style: { padding: 16, color: "white", position: "relative" },
+            children: "X-Ray is unavailable in this WebGPU renderer."
+          }
+        )
+      ] })
+    }
+  );
+}
 
 // src/components/CanvasPrimitiveRenderer.tsx
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer17 } from "circuit-to-canvas";
@@ -13577,9 +13947,9 @@ var getPrimitivesForDrawer = ({
 ).filter((primitive) => primitive._element?.type !== "pcb_via").filter((primitive) => primitive._element?.type !== "pcb_trace").filter((primitive) => primitive._element?.type !== "pcb_copper_text");
 
 // src/components/CanvasPrimitiveRenderer.tsx
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
-import { SuperGrid, toMMSI } from "react-supergrid";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { SuperGrid as SuperGrid2, toMMSI as toMMSI2 } from "react-supergrid";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var CanvasPrimitiveRenderer = ({
   primitives,
   elements,
@@ -13589,8 +13959,8 @@ var CanvasPrimitiveRenderer = ({
   width = 500,
   height = 500
 }) => {
-  const xRayCanvasRef = useRef3(null);
-  const canvasRefs = useRef3({});
+  const xRayCanvasRef = useRef4(null);
+  const canvasRefs = useRef4({});
   const hiddenLayerOpacity = useGlobalStore((s) => s.hidden_layer_opacity);
   const selectedLayer = useGlobalStore((s) => s.selected_layer);
   const isShowingCopperPours = useGlobalStore((s) => s.is_showing_copper_pours);
@@ -13601,7 +13971,7 @@ var CanvasPrimitiveRenderer = ({
   const isShowingPcbNotes = useGlobalStore((s) => s.is_showing_pcb_notes);
   const isShowingCourtyards = useGlobalStore((s) => s.is_showing_courtyards);
   const isShowingSilkscreen = useGlobalStore((s) => s.is_showing_silkscreen);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!canvasRefs.current) return;
     if (Object.keys(canvasRefs.current).length === 0) return;
     const availableCanvasRefs = Object.fromEntries(
@@ -13898,7 +14268,7 @@ var CanvasPrimitiveRenderer = ({
     isShowingCourtyards,
     isShowingSilkscreen
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
@@ -13908,8 +14278,8 @@ var CanvasPrimitiveRenderer = ({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsx3(
-          SuperGrid,
+        /* @__PURE__ */ jsx4(
+          SuperGrid2,
           {
             textColor: "rgba(0,255,0,0.8)",
             majorColor: "rgba(0,255,0,0.4)",
@@ -13918,10 +14288,10 @@ var CanvasPrimitiveRenderer = ({
             width,
             height,
             transform,
-            stringifyCoord: (x, y, z) => `${toMMSI(x, z)}, ${toMMSI(y, z)}`
+            stringifyCoord: (x, y, z) => `${toMMSI2(x, z)}, ${toMMSI2(y, z)}`
           }
         ),
-        xRayElements && /* @__PURE__ */ jsx3(
+        xRayElements && /* @__PURE__ */ jsx4(
           "canvas",
           {
             ref: xRayCanvasRef,
@@ -13941,7 +14311,7 @@ var CanvasPrimitiveRenderer = ({
           if (!isShowingSolderMask && layer.includes("soldermask")) return false;
           if (!isShowingSilkscreen && layer.includes("silkscreen")) return false;
           return true;
-        }).map((l) => l.replace(/-/g, "")).map((layer, i) => /* @__PURE__ */ jsx3(
+        }).map((l) => l.replace(/-/g, "")).map((layer, i) => /* @__PURE__ */ jsx4(
           "canvas",
           {
             className: `pcb-layer-${layer}`,
@@ -13970,217 +14340,6 @@ var CanvasPrimitiveRenderer = ({
   );
 };
 
-// src/components/WebGpuElementsRenderer.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function WebGpuElementsRenderer(props) {
-  const { elements, primitives, transform, width = 500, height = 500 } = props;
-  const holder = useRef4(null);
-  const workerRef = useRef4(void 0);
-  const ready = useRef4(false);
-  const [supportsXRayNet, setSupportsXRayNet] = useState4(false);
-  const [failure, setFailure] = useState4();
-  const selectedLayer = useGlobalStore((s) => s.selected_layer);
-  const hiddenLayerOpacity = useGlobalStore((s) => s.hidden_layer_opacity);
-  const showCopperPours = useGlobalStore((s) => s.is_showing_copper_pours);
-  const showSolderMask = useGlobalStore((s) => s.is_showing_solder_mask);
-  const showSilkscreen = useGlobalStore((s) => s.is_showing_silkscreen);
-  const showFabricationNotes = useGlobalStore(
-    (s) => s.is_showing_fabrication_notes
-  );
-  const showPcbNotes = useGlobalStore((s) => s.is_showing_pcb_notes);
-  const showCourtyards = useGlobalStore((s) => s.is_showing_courtyards);
-  const highlightedElementIds = useMemo3(
-    () => [
-      ...new Set(
-        primitives.flatMap((p) => {
-          if (!p.is_mouse_over && !p.is_in_highlighted_net) return [];
-          const element = p._element;
-          const id = element?.[`${element.type}_id`];
-          return id ? [id] : [];
-        })
-      )
-    ],
-    [primitives]
-  );
-  const xRayElementIds = useMemo3(
-    () => (props.xRayElements ?? []).map(
-      (element) => element[`${element.type}_id`]
-    ),
-    [props.xRayElements]
-  );
-  const options = useMemo3(
-    () => ({
-      selectedLayer,
-      hiddenLayerOpacity,
-      showCopperPours,
-      showSolderMask,
-      showSilkscreen,
-      showFabricationNotes,
-      showPcbNotes,
-      showCourtyards,
-      highlightedElementIds,
-      xRayElementIds
-    }),
-    [
-      selectedLayer,
-      hiddenLayerOpacity,
-      showCopperPours,
-      showSolderMask,
-      showSilkscreen,
-      showFabricationNotes,
-      showPcbNotes,
-      showCourtyards,
-      highlightedElementIds,
-      xRayElementIds
-    ]
-  );
-  const sceneRef = useRef4(elements);
-  const viewRef = useRef4(void 0);
-  sceneRef.current = elements;
-  if (transform) {
-    const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
-    viewRef.current = {
-      type: "view",
-      width: Math.max(1, Math.round(width * ratio)),
-      height: Math.max(1, Math.round(height * ratio)),
-      transform: {
-        a: transform.a * ratio,
-        b: transform.b * ratio,
-        c: transform.c * ratio,
-        d: transform.d * ratio,
-        e: transform.e * ratio,
-        f: transform.f * ratio
-      },
-      options
-    };
-  }
-  useEffect6(() => {
-    let disposed = false, failed = false, worker;
-    const canvas = document.createElement("canvas");
-    canvas.className = "pcb-webgpu-canvas";
-    canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none";
-    holder.current?.append(canvas);
-    const fallback = (message) => {
-      if (disposed || failed) return;
-      failed = true;
-      canvas.remove();
-      ready.current = false;
-      worker?.terminate();
-      workerRef.current = void 0;
-      setFailure(message);
-    };
-    const timeout = setTimeout(
-      () => fallback("WebGPU worker startup timed out"),
-      15e3
-    );
-    void (async () => {
-      try {
-        if (!navigator.gpu || typeof Worker === "undefined" || !canvas.transferControlToOffscreen)
-          throw new Error("WebGPU workers are unavailable");
-        worker = await createWebGpuWorker();
-        if (disposed || failed) {
-          worker.terminate();
-          return;
-        }
-        workerRef.current = worker;
-        worker.onmessage = ({ data }) => {
-          if (disposed || failed) return;
-          if (data.type === "rendered") {
-            if (holder.current)
-              holder.current.dataset.xRayNetActive = String(data.xRayActive);
-          } else if (data.type === "error") {
-            clearTimeout(timeout);
-            fallback(data.message);
-          } else if (data.type === "ready") {
-            clearTimeout(timeout);
-            setSupportsXRayNet(data.supportsXRayNet);
-            ready.current = true;
-            worker.postMessage({
-              type: "scene",
-              elements: sceneRef.current
-            });
-            if (viewRef.current) worker.postMessage(viewRef.current);
-          }
-        };
-        worker.onerror = (event) => {
-          event.preventDefault();
-          clearTimeout(timeout);
-          fallback(event.message || "WebGPU worker failed");
-        };
-        worker.onmessageerror = () => {
-          clearTimeout(timeout);
-          fallback("WebGPU worker communication failed");
-        };
-        const offscreen = canvas.transferControlToOffscreen();
-        worker.postMessage(
-          { type: "init", canvas: offscreen },
-          [offscreen]
-        );
-      } catch (error) {
-        clearTimeout(timeout);
-        fallback(String(error));
-      }
-    })();
-    return () => {
-      disposed = true;
-      clearTimeout(timeout);
-      ready.current = false;
-      workerRef.current = void 0;
-      worker?.terminate();
-      canvas.remove();
-    };
-  }, []);
-  useEffect6(() => {
-    if (ready.current)
-      workerRef.current?.postMessage({
-        type: "scene",
-        elements
-      });
-  }, [elements]);
-  useEffect6(() => {
-    if (ready.current && viewRef.current)
-      workerRef.current?.postMessage(viewRef.current);
-  }, [transform, width, height, options]);
-  const fallbackElements = useMemo3(
-    () => showCopperPours ? elements : elements.filter((e) => e.type !== "pcb_copper_pour"),
-    [elements, showCopperPours]
-  );
-  if (failure)
-    return /* @__PURE__ */ jsx4("div", { "data-pcb-renderer": "canvas", "data-webgpu-fallback": failure, children: /* @__PURE__ */ jsx4(CanvasPrimitiveRenderer, { ...props, elements: fallbackElements }) });
-  const useXRayFallback = Boolean(props.xRayElements && !supportsXRayNet);
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    useXRayFallback && /* @__PURE__ */ jsx4("div", { "data-x-ray-fallback": "unsupported-webgpu-version", children: /* @__PURE__ */ jsx4(CanvasPrimitiveRenderer, { ...props, elements: fallbackElements }) }),
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        ref: holder,
-        "data-pcb-renderer": "webgpu",
-        style: {
-          width,
-          height,
-          background: "black",
-          position: "relative",
-          overflow: "hidden",
-          display: useXRayFallback ? "none" : void 0
-        },
-        children: /* @__PURE__ */ jsx4(
-          SuperGrid2,
-          {
-            textColor: "rgba(0,255,0,0.8)",
-            majorColor: "rgba(0,255,0,0.4)",
-            minorColor: "rgba(0,255,0,0.2)",
-            screenSpaceCellSize: 200,
-            width,
-            height,
-            transform,
-            stringifyCoord: (x, y, z) => `${toMMSI2(x, z)}, ${toMMSI2(y, z)}`
-          }
-        )
-      }
-    )
-  ] });
-}
-
 // node_modules/graphics-debug/dist/chunk-OHVOYMJ4.js
 import {
   glyphAdvanceRatio,
@@ -18359,7 +18518,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.411",
+  version: "1.11.413",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -18391,6 +18550,7 @@ var package_default = {
     "@swc/core": "^1.4.12",
     "@tscircuit/circuit-json-util": "^0.0.116",
     "@tscircuit/circuit-json-webgpu": "github:tscircuit/circuit-json-webgpu#6c1414c7464a743190747c99bb8ec504f2ecf646",
+    "@tscircuit/core": "^0.0.1701",
     "@tscircuit/eagle-xml-converter": "^1.0.0",
     "@types/bun": "latest",
     "@types/color": "^3.0.6",
@@ -18417,8 +18577,7 @@ var package_default = {
   },
   peerDependencies: {
     react: "*",
-    "react-dom": "*",
-    tscircuit: "*"
+    "react-dom": "*"
   },
   dependencies: {
     "@emotion/css": "^11.11.2",
@@ -20637,9 +20796,65 @@ var calculateBoardSizeKey = (circuitJson) => {
   return `${round(board.width)}_${round(board.height)}`;
 };
 
+// src/lib/apply-edit-events.ts
+import { translate as translate13 } from "transformation-matrix";
+function applyEditEvents({
+  circuitJson,
+  editEvents
+}) {
+  let editedCircuitJson = structuredClone(circuitJson);
+  for (const editEvent of editEvents) {
+    if (editEvent.edit_event_type === "edit_pcb_component_location") {
+      const pcbComponent = su(editedCircuitJson).pcb_component.get(
+        editEvent.pcb_component_id
+      );
+      const isAlreadyAtEditedCenter = pcbComponent?.center.x === editEvent.new_center.x && pcbComponent.center.y === editEvent.new_center.y;
+      if (isAlreadyAtEditedCenter) continue;
+      const pcbToEditedPcbTransform = translate13(
+        editEvent.new_center.x - editEvent.original_center.x,
+        editEvent.new_center.y - editEvent.original_center.y
+      );
+      editedCircuitJson = editedCircuitJson.map(
+        (element) => "pcb_component_id" in element && element.pcb_component_id === editEvent.pcb_component_id ? transformPCBElement(element, pcbToEditedPcbTransform) : element
+      );
+      continue;
+    }
+    if (editEvent.edit_event_type === "edit_schematic_component_location") {
+      editedCircuitJson = editedCircuitJson.map(
+        (element) => element.type === "schematic_component" && element.schematic_component_id === editEvent.schematic_component_id ? { ...element, center: editEvent.new_center } : element
+      );
+      continue;
+    }
+    if (editEvent.edit_event_type !== "edit_pcb_trace_hint") continue;
+    if (!editEvent.pcb_trace_hint_id) continue;
+    const pcbTraceHint = su(editedCircuitJson).pcb_trace_hint.get(
+      editEvent.pcb_trace_hint_id
+    );
+    if (pcbTraceHint) {
+      editedCircuitJson = editedCircuitJson.map(
+        (element) => element.type === "pcb_trace_hint" && element.pcb_trace_hint_id === editEvent.pcb_trace_hint_id ? { ...element, route: editEvent.route } : element
+      );
+      continue;
+    }
+    const pcbPort = su(editedCircuitJson).pcb_port.get(editEvent.pcb_port_id);
+    if (!pcbPort?.pcb_component_id) continue;
+    const newPcbTraceHint = {
+      type: "pcb_trace_hint",
+      pcb_trace_hint_id: editEvent.pcb_trace_hint_id,
+      route: editEvent.route,
+      pcb_port_id: editEvent.pcb_port_id,
+      pcb_component_id: pcbPort.pcb_component_id
+    };
+    editedCircuitJson = editedCircuitJson.filter(
+      (element) => element.type !== "pcb_trace_hint" || element.pcb_port_id !== editEvent.pcb_port_id
+    ).concat(newPcbTraceHint);
+  }
+  return editedCircuitJson;
+}
+
 // src/PCBViewer.tsx
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var defaultTransform = compose9(translate13(400, 300), scale6(40, -40));
+var defaultTransform = compose9(translate14(400, 300), scale6(40, -40));
 var PCBViewer = ({
   circuitJson,
   debugGraphics,
@@ -20719,9 +20934,9 @@ var PCBViewer = ({
       100
     ) * 0.75;
     const targetTransform = compose9(
-      translate13((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+      translate14((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
       scale6(scaleFactor, -scaleFactor, 0, 0),
-      translate13(-center.x, -center.y)
+      translate14(-center.x, -center.y)
     );
     setTransform(targetTransform);
     return;