@tscircuit/pcb-viewer 1.11.412 → 1.11.413

package/README.md

@@ -98,27 +98,30 @@ continuously. The main thread handles React, interaction, and view messages.
 There is no bitmap zoom-settle delay or pool of raster workers.
 
 Pass `renderer="canvas"` to explicitly use the existing Canvas renderer. WebGPU
-also falls back to Canvas when WebGPU/OffscreenCanvas is unavailable, initialization
-fails, the GPU device is lost, or the scene includes unsupported geometry (such
-as dimension annotations or interpolated trace routes). The initial GPU geometry compile
+stays selected when WebGPU/OffscreenCanvas is unavailable, initialization fails,
+the GPU device is lost, or the scene includes unsupported geometry (such as
+dimension annotations or interpolated trace routes). These failures display an
+error in the viewer and release the worker; they never start the Canvas renderer.
+If the installed WebGPU renderer does not support X-Ray, the viewer displays a
+notice and keeps the GPU view visible. The initial GPU geometry compile
 still takes time on large boards, but runs in the worker. Curves use fixed
 triangle tessellation and can show facets at extreme zoom.
 
 Right-click the board and choose **Rendering Engine → Canvas** or
 **WebGPU (experimental)** to switch without resetting pan, zoom, or layer visibility.
 The `renderer` prop sets the initial selection; changing that prop updates the selection.
-Selecting WebGPU still permits automatic Canvas fallback on unsupported devices or scenes.
+Switching to Canvas always requires an explicit engine selection.
 
 Run `bun run test:webgpu` after `bunx playwright install chromium` to test the built
 viewer bundle, AM3352 wheel zoom, resize, StrictMode cleanup, context-menu switching,
-and fallbacks. The Cosmos `WebGpuAm3352` fixture also switches between backends.
+and failure handling. The Cosmos `WebGpuAm3352` fixture also switches between backends.
 
 The WebGPU integration is still experimental. The complete imported Canvas suite
 currently exposes substantial non-text parity gaps, including soldermask, trace
 clipping, and keepouts. See the renderer's
 [full parity report](https://github.com/tscircuit/circuit-json-webgpu/blob/main/tests/parity/latest-report.json).
 The integration PR remains draft until these are resolved; existing diagnostics
-and Canvas fallback do not yet detect every visual mismatch.
+do not yet detect every visual mismatch.
 
 The WebGPU renderer is installed as a bundled devDependency from
 `https://jscdn.tscircuit.com/@tscircuit/circuit-json-webgpu/0.0.3.tgz`.

package/dist/index.d.ts

@@ -82,7 +82,7 @@ type Props = {
     circuitJson?: AnyCircuitElement[];
     height?: number;
     /** Initial engine; users can switch via the context menu. Prop changes reset it.
-     * WebGPU runs in a worker and falls back to Canvas when unavailable. */
+     * WebGPU runs in a worker and reports failures without changing engines. */
     renderer?: "webgpu" | "canvas";
     allowEditing?: boolean;
     editEvents?: ManualEditEvent[];

package/dist/index.js

@@ -11633,8 +11633,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 +13798,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 +13810,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 +13822,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 +14119,7 @@ var CanvasPrimitiveRenderer = ({
     isShowingCourtyards,
     isShowingSilkscreen
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
@@ -13908,8 +14129,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 +14139,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 +14162,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 +14191,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 +18369,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.411",
+  version: "1.11.412",
   main: "dist/index.js",
   type: "module",
   repository: {