@tscircuit/pcb-viewer 1.11.407 → 1.11.409

package/README.md

@@ -76,6 +76,7 @@ The PCBViewer component accepts these props:
 - `editEvents`: Array of edit events to apply
 - `onEditEventsChanged`: Callback when edit events change
 - `onBoundsSelected`: Callback when the Bounds tool completes a rectangle selection. Receives `{ minX, minY, maxX, maxY }`.
+- `onViewSchematicComponent`: Optional callback for the pad context menu action `↗︎ U1 on Schematic`. Receives `{ source_component_id, pcb_component_id, refdes }`. Omit it when the host schematic tab is disabled.
 - `initialState`: Initial state for the viewer
 
 ### Features
@@ -123,3 +124,25 @@ The WebGPU renderer is installed as a bundled devDependency from
 `https://jscdn.tscircuit.com/@tscircuit/circuit-json-webgpu/0.0.3.tgz`.
 The renderer repository includes a TypeScript local render command and 597
 SVG-left/WebGPU-right feature snapshot tests.
+
+### Navigate from a pad to a schematic
+
+Click or right-click an SMT pad or plated hole to see its component's manufacturer
+part number in a disabled row at the bottom of the context menu, when available.
+Passing `onViewSchematicComponent` also enables the schematic action:
+
+```tsx
+<PCBViewer
+  circuitJson={circuitJson}
+  onViewSchematicComponent={schematicTabEnabled ? ({ source_component_id }) => {
+    // The host switches tabs and focuses the matching schematic component.
+    showSchematicComponent(source_component_id)
+  } : undefined}
+/>
+```
+
+The callback uses the source component ID so hosts can resolve the corresponding
+schematic component even when reference designators repeat across subcircuits.
+RunFrame and CircuitJsonViewer can forward this callback from their shared PCB
+preview when the schematic tab is enabled. Tab switching and schematic zooming
+are implemented by the host; PCBViewer does not require schematic elements.

package/dist/index.d.ts

@@ -4,6 +4,13 @@ import { GraphicsObject } from 'graphics-debug';
 import { ManualEditEvent } from '@tscircuit/props';
 import { Matrix } from 'transformation-matrix';
 
+/** Stable identity for hosts to locate the component in their schematic. */
+interface ViewSchematicComponentEvent {
+    source_component_id: string;
+    pcb_component_id: string;
+    refdes: string;
+}
+
 interface State {
     hidden_layer_opacity: number;
     setHiddenLayerOpacity: (opacity: number) => void;
@@ -81,13 +88,15 @@ type Props = {
     editEvents?: ManualEditEvent[];
     initialState?: Partial<StateProps>;
     onEditEventsChanged?: (editEvents: ManualEditEvent[]) => void;
+    /** Omit when the host has no enabled schematic tab. */
+    onViewSchematicComponent?: (event: ViewSchematicComponentEvent) => void;
     onBoundsSelected?: (bounds: BoundsSelection) => void;
     focusOnHover?: boolean;
     clickToInteractEnabled?: boolean;
     debugGraphics?: GraphicsObject | null;
     disablePcbGroups?: boolean;
 };
-declare const PCBViewer: ({ circuitJson, debugGraphics, height, renderer, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, onBoundsSelected, focusOnHover, clickToInteractEnabled, disablePcbGroups, }: Props) => react_jsx_runtime.JSX.Element;
+declare const PCBViewer: ({ circuitJson, debugGraphics, height, renderer, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, onBoundsSelected, onViewSchematicComponent, focusOnHover, clickToInteractEnabled, disablePcbGroups, }: Props) => react_jsx_runtime.JSX.Element;
 
 interface CanvasElementsRendererProps {
     elements: AnyCircuitElement[];
@@ -100,6 +109,7 @@ interface CanvasElementsRendererProps {
     grid?: GridConfig;
     allowEditing: boolean;
     focusOnHover?: boolean;
+    onViewSchematicComponent?: (event: ViewSchematicComponentEvent) => void;
     onBoundsSelected?: (bounds: BoundsSelection) => void;
     onContextMenuOpenChange?: (open: boolean) => void;
     cancelPanDrag: () => void;
@@ -108,4 +118,4 @@ interface CanvasElementsRendererProps {
 }
 declare const CanvasElementsRenderer: (props: CanvasElementsRendererProps) => react_jsx_runtime.JSX.Element;
 
-export { CanvasElementsRenderer, PCBViewer };
+export { CanvasElementsRenderer, PCBViewer, type ViewSchematicComponentEvent };

package/dist/index.js

@@ -10100,6 +10100,25 @@ var useMouseMatrixTransform = (props = {}) => {
 };
 var src_default = useMouseMatrixTransform;
 
+// src/lib/get-pad-component.ts
+var getPadComponent = (pad, elements) => {
+  if (pad?.type !== "pcb_smtpad" && pad?.type !== "pcb_plated_hole") return;
+  const pcbComponent = elements.find(
+    (element) => element.type === "pcb_component" && element.pcb_component_id === pad.pcb_component_id
+  );
+  if (pcbComponent?.type !== "pcb_component") return;
+  const sourceComponent = elements.find(
+    (element) => element.type === "source_component" && element.source_component_id === pcbComponent.source_component_id
+  );
+  if (sourceComponent?.type !== "source_component") return;
+  return {
+    source_component_id: sourceComponent.source_component_id,
+    pcb_component_id: pcbComponent.pcb_component_id,
+    refdes: sourceComponent.name,
+    manufacturer_part_number: sourceComponent.manufacturer_part_number
+  };
+};
+
 // node_modules/circuit-json-to-connectivity-map/dist/index.js
 import { doesLineIntersectLine } from "@tscircuit/math-utils";
 function findConnectedNetworks(connections) {
@@ -18323,7 +18342,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.406",
+  version: "1.11.408",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -18517,6 +18536,8 @@ var itemStyle = css2`
   &:hover, &:focus-visible { background: #444; }
 `;
 var VisibilityContextMenu = ({
+  component,
+  onViewSchematicComponent,
   position,
   onClose,
   onXRayNet,
@@ -18584,9 +18605,9 @@ var VisibilityContextMenu = ({
           const button = event.target.closest("button");
           if (!button) return;
           const menu = button.closest('[role="menu"]');
-          const items = Array.from(menu.querySelectorAll("button")).filter(
-            (item) => item.closest('[role="menu"]') === menu
-          );
+          const items = Array.from(
+            menu.querySelectorAll("button:not(:disabled)")
+          ).filter((item) => item.closest('[role="menu"]') === menu);
           if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault();
             const step = event.key === "ArrowDown" ? 1 : -1;
@@ -18829,6 +18850,65 @@ var VisibilityContextMenu = ({
                 )
               ]
             }
+          ),
+          component && onViewSchematicComponent && /* @__PURE__ */ jsxs15(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: itemStyle,
+              style: { whiteSpace: "normal", overflowWrap: "anywhere" },
+              onClick: () => {
+                onClose();
+                onViewSchematicComponent({
+                  source_component_id: component.source_component_id,
+                  pcb_component_id: component.pcb_component_id,
+                  refdes: component.refdes
+                });
+              },
+              children: [
+                /* @__PURE__ */ jsx20(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    style: { verticalAlign: "-1px", marginRight: 5 },
+                    children: /* @__PURE__ */ jsx20("path", { d: "M5 11 11 5M5 5h6v6" })
+                  }
+                ),
+                component.refdes,
+                " on Schematic"
+              ]
+            }
+          ),
+          component?.manufacturer_part_number && /* @__PURE__ */ jsxs15(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              disabled: true,
+              "aria-label": `Manufacturer part number: ${component.manufacturer_part_number}`,
+              className: itemStyle,
+              style: {
+                marginTop: 4,
+                background: "#292929",
+                color: "#aaa",
+                cursor: "default",
+                whiteSpace: "normal",
+                overflowWrap: "anywhere"
+              },
+              children: [
+                "MPN: ",
+                component.manufacturer_part_number
+              ]
+            }
           )
         ]
       }
@@ -19433,6 +19513,8 @@ var ToolbarOverlay = ({
   elements,
   onContextMenuOpenChange,
   getNetAtPoint,
+  getComponentAtPoint,
+  onViewSchematicComponent,
   xRayNetIds = [],
   onXRayNetsChange
 }) => {
@@ -19501,6 +19583,14 @@ var ToolbarOverlay = ({
   const [contextGroups, setContextGroups] = useState12([]);
   const [contextNetId, setContextNetId] = useState12();
   const [contextNetDisplayName, setContextNetDisplayName] = useState12("Net");
+  const [contextComponent, setContextComponent] = useState12();
+  const componentAtEvent = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return getComponentAtPoint?.({
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    });
+  };
   const pointerStart = useRef14(null);
   const inEditMode = useGlobalStore((s) => s.in_edit_mode);
   const netAtEvent = (event) => {
@@ -19661,15 +19751,17 @@ var ToolbarOverlay = ({
         if (!start || Math.hypot(event.clientX - start.x, event.clientY - start.y) > 4)
           return;
         const hit = netAtEvent(event);
-        if (!hit) return;
-        const net = hit.netId;
-        if (xRayNetIds.includes(net)) {
+        const component = componentAtEvent(event);
+        if (!hit && !component) return;
+        const net = hit?.netId;
+        if (net && xRayNetIds.includes(net)) {
           onXRayNetsChange?.(xRayNetIds.filter((id) => id !== net));
           closeContextMenu();
         } else {
           setContextNetId(net);
-          setContextNetDisplayName(hit.displayName);
-          setContextGroups(hit.groups);
+          setContextNetDisplayName(hit?.displayName ?? "Net");
+          setContextGroups(hit?.groups ?? []);
+          setContextComponent(component);
           onContextMenuOpenChange?.(true);
           setContextMenuPosition({ x: event.clientX, y: event.clientY });
         }
@@ -19682,6 +19774,7 @@ var ToolbarOverlay = ({
         event.preventDefault();
         event.stopPropagation();
         const hit = netAtEvent(event);
+        setContextComponent(componentAtEvent(event));
         setContextNetId(hit?.netId);
         setContextNetDisplayName(hit?.displayName ?? "Net");
         setContextGroups(hit?.groups ?? []);
@@ -19698,6 +19791,8 @@ var ToolbarOverlay = ({
           VisibilityContextMenu,
           {
             position: contextMenuPosition,
+            component: contextComponent,
+            onViewSchematicComponent,
             onClose: closeContextMenu,
             xRayDisplayName: contextNetDisplayName,
             xRayGroups: contextGroups.filter(
@@ -20182,6 +20277,14 @@ var CanvasElementsRenderer = (props) => {
   );
   const [xRayNetIds, setXRayNetIds] = useState13([]);
   useEffect19(() => setXRayNetIds([]), [connectivityMap]);
+  useEffect19(() => {
+    if (xRayNetIds.length === 0) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setXRayNetIds([]);
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [xRayNetIds.length]);
   const xRayElements = useMemo10(
     () => xRayNetIds.length > 0 ? elementsToRender.filter(
       (element) => isXRayCopper(element) && xRayNetIds.includes(
@@ -20197,6 +20300,21 @@ var CanvasElementsRenderer = (props) => {
       (primitive) => (primitive._element?.type === "pcb_smtpad" || primitive._element?.type === "pcb_plated_hole") && selectedElements.has(primitive._element)
     );
   }, [primitivesWithoutInteractionMetadata, xRayElements]);
+  const getComponentAtPoint = (point2) => {
+    if (!transform) return;
+    const hits = getPrimitivesUnderPoint(
+      primitivesWithoutInteractionMetadata,
+      applyToPoint19(inverse6(transform), point2),
+      transform,
+      selectedLayer
+    ).filter(
+      (p) => p._element?.type === "pcb_smtpad" || p._element?.type === "pcb_plated_hole"
+    );
+    hits.sort(
+      (a, b) => Number(b.layer === selectedLayer) - Number(a.layer === selectedLayer)
+    );
+    return getPadComponent(hits[0]?._element, elements);
+  };
   const getNetAtPoint = (point2) => {
     if (!transform) return void 0;
     const describeNet = (netId, element) => ({
@@ -20380,6 +20498,8 @@ var CanvasElementsRenderer = (props) => {
                   xRayNetIds,
                   onXRayNetsChange: setXRayNetIds,
                   onContextMenuOpenChange: props.onContextMenuOpenChange,
+                  getComponentAtPoint,
+                  onViewSchematicComponent: props.onViewSchematicComponent,
                   children: /* @__PURE__ */ jsx25(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx25(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx25(
                     PcbGroupOverlay,
                     {
@@ -20512,6 +20632,7 @@ var PCBViewer = ({
   editEvents: editEventsProp,
   onEditEventsChanged,
   onBoundsSelected,
+  onViewSchematicComponent,
   focusOnHover = false,
   clickToInteractEnabled = false,
   disablePcbGroups = false
@@ -20654,6 +20775,7 @@ var PCBViewer = ({
                   allowEditing,
                   focusOnHover,
                   onBoundsSelected,
+                  onViewSchematicComponent,
                   cancelPanDrag,
                   onContextMenuOpenChange,
                   onCreateEditEvent,