@tscircuit/pcb-viewer 1.11.439 → 1.11.441

package/dist/index.js

@@ -9394,6 +9394,53 @@ var getBoundsOfPcbElements = (elements) => {
   }
   return bounds;
 };
+var getBoardBounds = (board) => {
+  if (board.width && board.height && board.center) {
+    const halfWidth = board.width / 2;
+    const halfHeight = board.height / 2;
+    return {
+      minX: board.center.x - halfWidth,
+      minY: board.center.y - halfHeight,
+      maxX: board.center.x + halfWidth,
+      maxY: board.center.y + halfHeight,
+      width: board.width,
+      height: board.height,
+      center: {
+        x: board.center.x,
+        y: board.center.y
+      }
+    };
+  }
+  if (!board.outline || board.outline.length === 0) {
+    throw new Error(
+      "Unable to compute board bounds. pcb_board must include width/height/center or a non-empty outline."
+    );
+  }
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const point2 of board.outline) {
+    minX = Math.min(minX, point2.x);
+    minY = Math.min(minY, point2.y);
+    maxX = Math.max(maxX, point2.x);
+    maxY = Math.max(maxY, point2.y);
+  }
+  const width = maxX - minX;
+  const height = maxY - minY;
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    width,
+    height,
+    center: {
+      x: minX + width / 2,
+      y: minY + height / 2
+    }
+  };
+};
 function stringHash(str) {
   let hash = 0;
   if (str.length == 0) return hash;
@@ -9717,6 +9764,27 @@ var getPlatedHolePolygon = (pad, componentRotation = 0) => {
   );
 };
 
+// src/lib/get-pcb-viewport-bounds.ts
+function getPcbViewportBounds(elements) {
+  const pcbElements = elements.filter(
+    (element) => element.type.startsWith("pcb_")
+  );
+  if (pcbElements.length === 0) {
+    return { center: { x: 0, y: 0 }, width: 1e-3, height: 1e-3 };
+  }
+  const boardsAndPanels = pcbElements.filter(
+    (element) => element.type === "pcb_board" || element.type === "pcb_panel"
+  ).map((element) => {
+    if (element.type !== "pcb_board" || !element.outline?.length)
+      return element;
+    const { center, width, height } = getBoardBounds(element);
+    return { ...element, center, width, height };
+  });
+  return findBoundsAndCenter(
+    boardsAndPanels.length > 0 ? boardsAndPanels : pcbElements
+  );
+}
+
 // src/lib/apply-edit-events.ts
 import { translate as translate6 } from "transformation-matrix";
 function applyEditEvents({
@@ -9777,13 +9845,19 @@ function applyEditEvents({
 // src/lib/calculate-board-size-key.ts
 var calculateBoardSizeKey = (circuitJson) => {
   if (!circuitJson) return "empty";
-  const board = circuitJson.find((e) => e.type === "pcb_board");
-  if (!board) return "no-board";
-  const round = (n) => Math.round(n * 1e3) / 1e3;
-  if (board.outline) {
-    return board.outline.map((o) => `${round(o.x)}_${round(o.y)}`).join(",");
-  }
-  return `${round(board.width)}_${round(board.height)}`;
+  const boardSizeKeys = circuitJson.filter(
+    (element) => element.type === "pcb_board" || element.type === "pcb_panel"
+  ).map(
+    (element) => JSON.stringify([
+      element.type,
+      element.center.x,
+      element.center.y,
+      element.width,
+      element.height,
+      element.type === "pcb_board" ? element.outline?.map(({ x, y }) => [x, y]) : void 0
+    ])
+  ).sort();
+  return boardSizeKeys.length > 0 ? boardSizeKeys.join(";") : "no-board";
 };
 
 // src/lib/calculate-circuit-json-key.ts
@@ -17373,21 +17447,33 @@ var FocusedPcbComponentOverlay = ({
   return /* @__PURE__ */ jsx10(
     "div",
     {
-      "data-focused-pcb-component-id": componentId,
+      "data-pcb-focus-viewport": true,
       style: {
         position: "absolute",
-        left: center.x - width / 2,
-        top: center.y - height / 2,
-        width,
-        height,
-        transform: `rotate(${rotation}rad)`,
-        transformOrigin: "center",
-        border: "2px solid #3399ff",
-        borderRadius: 4,
-        boxSizing: "border-box",
+        inset: 0,
+        overflow: "clip",
         pointerEvents: "none",
         zIndex: zIndexMap.elementOverlay
-      }
+      },
+      children: /* @__PURE__ */ jsx10(
+        "div",
+        {
+          "data-focused-pcb-component-id": componentId,
+          style: {
+            position: "absolute",
+            left: center.x - width / 2,
+            top: center.y - height / 2,
+            width,
+            height,
+            transform: `rotate(${rotation}rad)`,
+            transformOrigin: "center",
+            border: "2px solid #3399ff",
+            borderRadius: 4,
+            boxSizing: "border-box",
+            pointerEvents: "none"
+          }
+        }
+      )
     }
   );
 };
@@ -19125,7 +19211,7 @@ import {
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.438",
+  version: "1.11.440",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -19210,7 +19296,48 @@ var package_default = {
 // src/components/ComponentSearch.tsx
 import { css as css2 } from "@emotion/css";
 import { useEffect as useEffect15, useId, useMemo as useMemo11, useRef as useRef11, useState as useState9 } from "react";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// src/components/ToolbarButton.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var getToolbarButtonStyle = (isSmallScreen) => ({
+  backgroundColor: "#1F1F1F",
+  border: "1px solid #666",
+  margin: 0,
+  padding: 4,
+  paddingLeft: isSmallScreen ? 8 : 6,
+  paddingRight: isSmallScreen ? 8 : 6,
+  borderRadius: 2,
+  color: "#eee",
+  cursor: "pointer",
+  fontSize: 12,
+  height: "fit-content",
+  userSelect: "none",
+  whiteSpace: "nowrap"
+});
+var ToolbarButton = ({
+  children,
+  isSmallScreen,
+  onClick,
+  ...props
+}) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ...props,
+      ...touchHandlers,
+      style: {
+        ...getToolbarButtonStyle(isSmallScreen),
+        ...touchStyle,
+        ...props.style
+      },
+      children
+    }
+  );
+};
+
+// src/components/ComponentSearch.tsx
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var buttonClass = css2`
   background: #1f1f1f;
   border: 1px solid #666;
@@ -19225,6 +19352,7 @@ var ComponentSearch = ({
   elements,
   onSelect
 }) => {
+  const isSmallScreen = useIsSmallScreen();
   const [open, setOpen] = useState9(false);
   const [query, setQuery] = useState9("");
   const [activeComponentId, setActiveComponentId] = useState9(
@@ -19297,7 +19425,7 @@ var ComponentSearch = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "button",
           {
             ref: toggle,
@@ -19305,15 +19433,16 @@ var ComponentSearch = ({
             className: buttonClass,
             "aria-label": "Search components",
             title: "Search components",
-            style: { display: "flex", alignItems: "center", padding: "4px 6px" },
+            style: getToolbarButtonStyle(isSmallScreen),
             "aria-expanded": open,
             "aria-controls": panelId,
             onClick: () => setOpen(!open),
             children: /* @__PURE__ */ jsxs14(
               "svg",
               {
-                width: "14",
-                height: "14",
+                width: "1em",
+                height: "1em",
+                style: { verticalAlign: "middle" },
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
@@ -19321,8 +19450,8 @@ var ComponentSearch = ({
                 strokeLinecap: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx20("circle", { cx: "10.5", cy: "10.5", r: "6.5" }),
-                  /* @__PURE__ */ jsx20("path", { d: "m16 16 5 5" })
+                  /* @__PURE__ */ jsx21("circle", { cx: "10.5", cy: "10.5", r: "6.5" }),
+                  /* @__PURE__ */ jsx21("path", { d: "m16 16 5 5" })
                 ]
               }
             )
@@ -19346,7 +19475,7 @@ var ComponentSearch = ({
               boxSizing: "border-box"
             },
             children: [
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   ref: input,
@@ -19379,7 +19508,7 @@ var ComponentSearch = ({
                   }
                 }
               ),
-              !normalizedQuery ? /* @__PURE__ */ jsx20("output", { style: { display: "block", marginTop: 8 }, children: "Type a component name." }) : matches.length === 0 ? /* @__PURE__ */ jsx20("output", { style: { display: "block", marginTop: 8 }, children: "No matching components." }) : /* @__PURE__ */ jsx20(
+              !normalizedQuery ? /* @__PURE__ */ jsx21("output", { style: { display: "block", marginTop: 8 }, children: "Type a component name." }) : matches.length === 0 ? /* @__PURE__ */ jsx21("output", { style: { display: "block", marginTop: 8 }, children: "No matching components." }) : /* @__PURE__ */ jsx21(
                 "div",
                 {
                   id: `${panelId}-results`,
@@ -19395,7 +19524,7 @@ var ComponentSearch = ({
                     maxHeight: 220,
                     overflowY: "auto"
                   },
-                  children: matches.map((component, index) => /* @__PURE__ */ jsx20("div", { role: "presentation", children: /* @__PURE__ */ jsxs14(
+                  children: matches.map((component, index) => /* @__PURE__ */ jsx21("div", { role: "presentation", children: /* @__PURE__ */ jsxs14(
                     "button",
                     {
                       type: "button",
@@ -19417,8 +19546,8 @@ var ComponentSearch = ({
                       },
                       onClick: () => select(component.id),
                       children: [
-                        /* @__PURE__ */ jsx20("span", { children: component.name }),
-                        /* @__PURE__ */ jsx20("span", { style: { color: "#aaa" }, children: component.layer })
+                        /* @__PURE__ */ jsx21("span", { children: component.name }),
+                        /* @__PURE__ */ jsx21("span", { style: { color: "#aaa" }, children: component.layer })
                       ]
                     }
                   ) }, component.id))
@@ -19432,42 +19561,6 @@ var ComponentSearch = ({
   );
 };
 
-// src/components/ToolbarButton.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var ToolbarButton = ({
-  children,
-  isSmallScreen,
-  onClick,
-  ...props
-}) => {
-  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      ...props,
-      ...touchHandlers,
-      style: {
-        backgroundColor: "#1F1F1F",
-        border: "1px solid #666",
-        margin: 0,
-        padding: 4,
-        paddingLeft: isSmallScreen ? 8 : 6,
-        paddingRight: isSmallScreen ? 8 : 6,
-        borderRadius: 2,
-        color: "#eee",
-        cursor: "pointer",
-        fontSize: 12,
-        height: "fit-content",
-        userSelect: "none",
-        whiteSpace: "nowrap",
-        ...touchStyle,
-        ...props.style
-      },
-      children
-    }
-  );
-};
-
 // src/components/ToolbarErrorDropdown.tsx
 import { useCallback as useCallback9, useMemo as useMemo12, useState as useState10 } from "react";
 
@@ -22106,14 +22199,13 @@ var PCBViewer = ({
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
   );
-  const boardSizeKey = calculateBoardSizeKey(circuitJson);
+  const boardSizeKey = useMemo17(
+    () => calculateBoardSizeKey(circuitJson),
+    [circuitJson]
+  );
   const resetTransform = () => {
     const elmBounds = refDimensions?.width > 0 ? refDimensions : { width: 500, height: 500 };
-    const { center, width, height: height2 } = elements.some(
-      (e) => e.type.startsWith("pcb_")
-    ) ? findBoundsAndCenter(
-      elements.filter((e) => e.type.startsWith("pcb_"))
-    ) : { center: { x: 0, y: 0 }, width: 1e-3, height: 1e-3 };
+    const { center, width, height: height2 } = getPcbViewportBounds(elements);
     const scaleFactor = Math.min(
       (elmBounds.width ?? 0) / width,
       (elmBounds.height ?? 0) / height2,