@tscircuit/pcb-viewer 1.11.440 → 1.11.441

package/dist/index.js

@@ -17447,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"
+          }
+        }
+      )
     }
   );
 };
@@ -19199,7 +19211,7 @@ import {
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.439",
+  version: "1.11.440",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -19284,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;
@@ -19299,6 +19352,7 @@ var ComponentSearch = ({
   elements,
   onSelect
 }) => {
+  const isSmallScreen = useIsSmallScreen();
   const [open, setOpen] = useState9(false);
   const [query, setQuery] = useState9("");
   const [activeComponentId, setActiveComponentId] = useState9(
@@ -19371,7 +19425,7 @@ var ComponentSearch = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "button",
           {
             ref: toggle,
@@ -19379,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",
@@ -19395,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" })
                 ]
               }
             )
@@ -19420,7 +19475,7 @@ var ComponentSearch = ({
               boxSizing: "border-box"
             },
             children: [
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "input",
                 {
                   ref: input,
@@ -19453,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`,
@@ -19469,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",
@@ -19491,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))
@@ -19506,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";