@tscircuit/schematic-viewer 2.0.26 → 2.0.27

package/dist/index.js

@@ -192,6 +192,176 @@ var useChangeSchematicTracesForMovedComponents = ({
   }, [svgDivRef, activeEditEvent, circuitJson, editEvents]);
 };
 
+// lib/hooks/useSchematicGroupsOverlay.ts
+import { useEffect as useEffect3 } from "react";
+import { su as su3 } from "@tscircuit/soup-util";
+var useSchematicGroupsOverlay = (svgDivRef, circuitJson, circuitJsonKey, showGroups) => {
+  useEffect3(() => {
+    if (!svgDivRef.current || !showGroups || !circuitJson || circuitJson.length === 0) {
+      if (svgDivRef.current) {
+        const existingOverlays2 = svgDivRef.current.querySelectorAll(
+          ".schematic-group-overlay"
+        );
+        existingOverlays2.forEach((overlay) => overlay.remove());
+      }
+      return;
+    }
+    const svg = svgDivRef.current.querySelector("svg");
+    if (!svg) {
+      return;
+    }
+    const existingOverlays = svg.querySelectorAll(".schematic-group-overlay");
+    existingOverlays.forEach((overlay) => overlay.remove());
+    try {
+      const sourceGroups = su3(circuitJson).source_group?.list() || [];
+      const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
+      let groupsToRender = [];
+      const hasMeaningfulGroups = sourceGroups.length > 0 && sourceGroups.some((group) => group.name && group.name !== "default" && group.name !== "");
+      if (hasMeaningfulGroups) {
+        const groupMap = /* @__PURE__ */ new Map();
+        for (const comp of schematicComponents) {
+          const sourceComp = su3(circuitJson).source_component.get(
+            comp.source_component_id
+          );
+          if (sourceComp?.source_group_id) {
+            if (!groupMap.has(sourceComp.source_group_id)) {
+              groupMap.set(sourceComp.source_group_id, []);
+            }
+            groupMap.get(sourceComp.source_group_id).push(comp);
+          }
+        }
+        groupsToRender = Array.from(groupMap.entries()).map(
+          ([groupId, components], index) => {
+            const group = sourceGroups.find(
+              (g) => g.source_group_id === groupId
+            );
+            return {
+              id: groupId,
+              name: group?.name || `Group ${index + 1}`,
+              components,
+              color: getGroupColor(index)
+            };
+          }
+        );
+      } else {
+        const componentTypeGroups = /* @__PURE__ */ new Map();
+        for (const comp of schematicComponents) {
+          const sourceComp = su3(circuitJson).source_component.get(
+            comp.source_component_id
+          );
+          if (sourceComp) {
+            const componentType = sourceComp.ftype || "other";
+            if (!componentTypeGroups.has(componentType)) {
+              componentTypeGroups.set(componentType, []);
+            }
+            componentTypeGroups.get(componentType).push(comp);
+          }
+        }
+        groupsToRender = Array.from(componentTypeGroups.entries()).map(
+          ([type, components], index) => ({
+            id: `type_${type}`,
+            name: `${type.charAt(0).toUpperCase() + type.slice(1)}s`,
+            components,
+            color: getGroupColor(index)
+          })
+        );
+      }
+      groupsToRender.forEach((group, groupIndex) => {
+        if (group.components.length === 0) return;
+        const groupBounds = calculateGroupBounds(group.components, svg);
+        if (!groupBounds) return;
+        const groupOverlay = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "rect"
+        );
+        groupOverlay.setAttribute("class", "schematic-group-overlay");
+        groupOverlay.setAttribute("x", (groupBounds.minX - 25).toString());
+        groupOverlay.setAttribute("y", (groupBounds.minY - 25).toString());
+        groupOverlay.setAttribute(
+          "width",
+          (groupBounds.maxX - groupBounds.minX + 50).toString()
+        );
+        groupOverlay.setAttribute(
+          "height",
+          (groupBounds.maxY - groupBounds.minY + 50).toString()
+        );
+        groupOverlay.setAttribute("fill", "none");
+        groupOverlay.setAttribute("stroke", group.color);
+        groupOverlay.setAttribute("stroke-width", "3");
+        groupOverlay.setAttribute("stroke-dasharray", "8,4");
+        groupOverlay.setAttribute("opacity", "0.8");
+        groupOverlay.setAttribute("rx", "4");
+        groupOverlay.setAttribute("ry", "4");
+        const groupLabel = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        );
+        groupLabel.setAttribute("class", "schematic-group-overlay");
+        groupLabel.setAttribute("x", (groupBounds.minX - 10).toString());
+        groupLabel.setAttribute("y", (groupBounds.minY - 8).toString());
+        groupLabel.setAttribute("fill", group.color);
+        groupLabel.setAttribute("font-size", "14");
+        groupLabel.setAttribute("font-family", "Arial, sans-serif");
+        groupLabel.setAttribute("font-weight", "bold");
+        groupLabel.setAttribute("stroke", "#fff");
+        groupLabel.setAttribute("stroke-width", "0.5");
+        groupLabel.setAttribute("paint-order", "stroke fill");
+        groupLabel.textContent = group.name;
+        svg.appendChild(groupOverlay);
+        svg.appendChild(groupLabel);
+      });
+    } catch (error) {
+      console.error("Error creating group overlays:", error);
+    }
+  }, [svgDivRef, circuitJsonKey, showGroups]);
+};
+function getGroupColor(index) {
+  const colors2 = [
+    "#FF6B6B",
+    // Red
+    "#4ECDC4",
+    // Teal
+    "#45B7D1",
+    // Blue
+    "#96CEB4",
+    // Green
+    "#FF8C42",
+    // Orange
+    "#DDA0DD",
+    // Plum
+    "#98D8C8",
+    // Mint
+    "#F7DC6F"
+    // Light Yellow
+  ];
+  return colors2[index % colors2.length];
+}
+function calculateGroupBounds(components, svg) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const component of components) {
+    let componentElement = svg.querySelector(
+      `g[data-schematic-component-id="${component.schematic_component_id}"]`
+    );
+    if (!componentElement) {
+      componentElement = svg.querySelector(
+        `[data-schematic-component-id="${component.schematic_component_id}"]`
+      );
+    }
+    if (componentElement) {
+      const bbox = componentElement.getBBox();
+      minX = Math.min(minX, bbox.x);
+      minY = Math.min(minY, bbox.y);
+      maxX = Math.max(maxX, bbox.x + bbox.width);
+      maxY = Math.max(maxY, bbox.y + bbox.height);
+    }
+  }
+  if (minX === Infinity) {
+    return null;
+  }
+  const bounds = { minX, minY, maxX, maxY };
+  return bounds;
+}
+
 // lib/utils/debug.ts
 import Debug from "debug";
 var debug = Debug("schematic-viewer");
@@ -201,7 +371,7 @@ var enableDebug = () => {
 var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useEffect as useEffect6, useMemo, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
 import {
   fromString,
   identity,
@@ -210,11 +380,11 @@ import {
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
 
 // lib/hooks/use-resize-handling.ts
-import { useEffect as useEffect3, useState } from "react";
+import { useEffect as useEffect4, useState } from "react";
 var useResizeHandling = (containerRef) => {
   const [containerWidth, setContainerWidth] = useState(0);
   const [containerHeight, setContainerHeight] = useState(0);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!containerRef.current) return;
     const updateDimensions = () => {
       const rect = containerRef.current?.getBoundingClientRect();
@@ -234,8 +404,8 @@ var useResizeHandling = (containerRef) => {
 };
 
 // lib/hooks/useComponentDragging.ts
-import { su as su3 } from "@tscircuit/soup-util";
-import { useCallback, useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
+import { su as su4 } from "@tscircuit/soup-util";
+import { useCallback, useEffect as useEffect5, useRef as useRef3, useState as useState2 } from "react";
 import { compose as compose2 } from "transformation-matrix";
 var debug2 = debug_default.extend("useComponentDragging");
 var useComponentDragging = ({
@@ -258,7 +428,7 @@ var useComponentDragging = ({
   const componentPositionsRef = useRef3(
     /* @__PURE__ */ new Map()
   );
-  useEffect4(() => {
+  useEffect5(() => {
     editEvents.forEach((event) => {
       if ("edit_event_type" in event && event.edit_event_type === "edit_schematic_component_location" && !event.in_progress) {
         componentPositionsRef.current.set(event.schematic_component_id, {
@@ -280,7 +450,7 @@ var useComponentDragging = ({
       );
       if (!schematic_component_id) return;
       if (cancelDrag) cancelDrag();
-      const schematic_component = su3(circuitJson).schematic_component.get(
+      const schematic_component = su4(circuitJson).schematic_component.get(
         schematic_component_id
       );
       if (!schematic_component) return;
@@ -367,7 +537,7 @@ var useComponentDragging = ({
     dragStartPosRef.current = null;
     setActiveEditEvent(null);
   }, [onEditEvent]);
-  useEffect4(() => {
+  useEffect5(() => {
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -387,6 +557,9 @@ var zIndexMap = {
   schematicEditIcon: 50,
   schematicGridIcon: 49,
   spiceSimulationIcon: 51,
+  viewMenuIcon: 48,
+  viewMenu: 55,
+  viewMenuBackdrop: 54,
   clickToInteractOverlay: 100
 };
 
@@ -403,7 +576,7 @@ var EditIcon = ({
       style: {
         position: "absolute",
         top: "16px",
-        right: "16px",
+        right: "64px",
         backgroundColor: active ? "#4CAF50" : "#fff",
         color: active ? "#fff" : "#000",
         padding: "8px",
@@ -447,7 +620,7 @@ var GridIcon = ({
       style: {
         position: "absolute",
         top: "56px",
-        right: "16px",
+        right: "64px",
         backgroundColor: active ? "#4CAF50" : "#fff",
         color: active ? "#fff" : "#000",
         padding: "8px",
@@ -475,9 +648,190 @@ var GridIcon = ({
   );
 };
 
+// lib/components/ViewMenuIcon.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ViewMenuIcon = ({
+  onClick,
+  active
+}) => {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      onClick,
+      style: {
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        backgroundColor: active ? "#4CAF50" : "#fff",
+        color: active ? "#fff" : "#000",
+        padding: "8px",
+        borderRadius: "4px",
+        cursor: "pointer",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        zIndex: zIndexMap.viewMenuIcon
+      },
+      children: /* @__PURE__ */ jsxs2(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: [
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "5", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "19", r: "1" })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// lib/components/ViewMenu.tsx
+import { useMemo } from "react";
+import { su as su5 } from "@tscircuit/soup-util";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ViewMenu = ({
+  circuitJson,
+  circuitJsonKey,
+  isVisible,
+  onClose,
+  showGroups,
+  onToggleGroups
+}) => {
+  const hasGroups = useMemo(() => {
+    if (!circuitJson || circuitJson.length === 0) return false;
+    try {
+      const sourceGroups = su5(circuitJson).source_group?.list() || [];
+      if (sourceGroups.length > 0) return true;
+      const schematicComponents = su5(circuitJson).schematic_component?.list() || [];
+      if (schematicComponents.length > 1) {
+        const componentTypes = /* @__PURE__ */ new Set();
+        for (const comp of schematicComponents) {
+          const sourceComp = su5(circuitJson).source_component.get(
+            comp.source_component_id
+          );
+          if (sourceComp?.ftype) {
+            componentTypes.add(sourceComp.ftype);
+          }
+        }
+        return componentTypes.size > 1;
+      }
+      return false;
+    } catch (error) {
+      console.error("Error checking for groups:", error);
+      return false;
+    }
+  }, [circuitJsonKey]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        onClick: onClose,
+        style: {
+          position: "absolute",
+          inset: 0,
+          backgroundColor: "transparent",
+          zIndex: zIndexMap.viewMenuBackdrop
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "56px",
+          right: "16px",
+          backgroundColor: "#ffffff",
+          color: "#000000",
+          border: "1px solid #ccc",
+          borderRadius: "4px",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+          minWidth: "200px",
+          zIndex: zIndexMap.viewMenu
+        },
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              onClick: () => {
+                if (hasGroups) {
+                  onToggleGroups(!showGroups);
+                }
+              },
+              style: {
+                padding: "8px 12px",
+                cursor: hasGroups ? "pointer" : "not-allowed",
+                opacity: hasGroups ? 1 : 0.5,
+                fontSize: "13px",
+                color: "#000000",
+                fontFamily: "sans-serif",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              },
+              onMouseEnter: (e) => {
+                if (hasGroups) {
+                  e.currentTarget.style.backgroundColor = "#f0f0f0";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (hasGroups) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    style: {
+                      width: "16px",
+                      height: "16px",
+                      border: "2px solid #000",
+                      borderRadius: "2px",
+                      backgroundColor: "transparent",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "10px",
+                      fontWeight: "bold"
+                    },
+                    children: showGroups && "\u2713"
+                  }
+                ),
+                "View Schematic Groups"
+              ]
+            }
+          ),
+          !hasGroups && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                padding: "8px 12px",
+                fontSize: "11px",
+                color: "#666",
+                fontStyle: "italic"
+              },
+              children: "No groups found in this schematic"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
 // lib/components/SpiceIcon.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var SpiceIcon = () => /* @__PURE__ */ jsx3(
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SpiceIcon = () => /* @__PURE__ */ jsx5(
   "svg",
   {
     width: "16",
@@ -488,23 +842,23 @@ var SpiceIcon = () => /* @__PURE__ */ jsx3(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx3("path", { d: "M3 12h2.5l2.5-9 4 18 4-9h5.5" })
+    children: /* @__PURE__ */ jsx5("path", { d: "M3 12h2.5l2.5-9 4 18 4-9h5.5" })
   }
 );
 
 // lib/components/SpiceSimulationIcon.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var SpiceSimulationIcon = ({
   onClick
 }) => {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       onClick,
       style: {
         position: "absolute",
         top: "16px",
-        right: "56px",
+        right: "112px",
         backgroundColor: "#fff",
         color: "#000",
         padding: "8px",
@@ -516,7 +870,7 @@ var SpiceSimulationIcon = ({
         gap: "4px",
         zIndex: zIndexMap.spiceSimulationIcon
       },
-      children: /* @__PURE__ */ jsx4(SpiceIcon, {})
+      children: /* @__PURE__ */ jsx6(SpiceIcon, {})
     }
   );
 };
@@ -533,7 +887,7 @@ import {
   Legend
 } from "chart.js";
 import { Line } from "react-chartjs-2";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -574,7 +928,7 @@ var SpicePlot = ({
   error
 }) => {
   if (isLoading) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -589,7 +943,7 @@ var SpicePlot = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         style: {
@@ -608,7 +962,7 @@ var SpicePlot = ({
     );
   }
   if (plotData.length === 0) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -695,11 +1049,11 @@ var SpicePlot = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx5("div", { style: { position: "relative", height: "300px", width: "100%" }, children: /* @__PURE__ */ jsx5(Line, { options, data: chartData }) });
+  return /* @__PURE__ */ jsx7("div", { style: { position: "relative", height: "300px", width: "100%" }, children: /* @__PURE__ */ jsx7(Line, { options, data: chartData }) });
 };
 
 // lib/components/SpiceSimulationOverlay.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var SpiceSimulationOverlay = ({
   spiceString,
   onClose,
@@ -708,7 +1062,7 @@ var SpiceSimulationOverlay = ({
   isLoading,
   error
 }) => {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       style: {
@@ -724,7 +1078,7 @@ var SpiceSimulationOverlay = ({
         zIndex: 1002,
         fontFamily: "sans-serif"
       },
-      children: /* @__PURE__ */ jsxs3(
+      children: /* @__PURE__ */ jsxs5(
         "div",
         {
           style: {
@@ -736,7 +1090,7 @@ var SpiceSimulationOverlay = ({
             boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)"
           },
           children: [
-            /* @__PURE__ */ jsxs3(
+            /* @__PURE__ */ jsxs5(
               "div",
               {
                 style: {
@@ -748,7 +1102,7 @@ var SpiceSimulationOverlay = ({
                   paddingBottom: "16px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx8(
                     "h2",
                     {
                       style: {
@@ -760,7 +1114,7 @@ var SpiceSimulationOverlay = ({
                       children: "SPICE Simulation"
                     }
                   ),
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       onClick: onClose,
@@ -779,7 +1133,7 @@ var SpiceSimulationOverlay = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
               SpicePlot,
               {
                 plotData,
@@ -788,8 +1142,8 @@ var SpiceSimulationOverlay = ({
                 error
               }
             ) }),
-            /* @__PURE__ */ jsxs3("div", { style: { marginTop: "24px" }, children: [
-              /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsxs5("div", { style: { marginTop: "24px" }, children: [
+              /* @__PURE__ */ jsx8(
                 "h3",
                 {
                   style: {
@@ -802,7 +1156,7 @@ var SpiceSimulationOverlay = ({
                   children: "SPICE Netlist"
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx8(
                 "pre",
                 {
                   style: {
@@ -828,7 +1182,7 @@ var SpiceSimulationOverlay = ({
 };
 
 // lib/hooks/useSpiceSimulation.ts
-import { useState as useState3, useEffect as useEffect5 } from "react";
+import { useState as useState3, useEffect as useEffect6 } from "react";
 
 // lib/workers/spice-simulation.worker.blob.js
 var b64 = "dmFyIGU9bnVsbCxzPWFzeW5jKCk9Pihhd2FpdCBpbXBvcnQoImh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZWVjaXJjdWl0LWVuZ2luZUAxLjUuMi8rZXNtIikpLlNpbXVsYXRpb24sYz1hc3luYygpPT57aWYoZSYmZS5pc0luaXRpYWxpemVkKCkpcmV0dXJuO2xldCBpPWF3YWl0IHMoKTtlPW5ldyBpLGF3YWl0IGUuc3RhcnQoKX07c2VsZi5vbm1lc3NhZ2U9YXN5bmMgaT0+e3RyeXtpZihhd2FpdCBjKCksIWUpdGhyb3cgbmV3IEVycm9yKCJTaW11bGF0aW9uIG5vdCBpbml0aWFsaXplZCIpO2xldCB0PWkuZGF0YS5zcGljZVN0cmluZyxhPXQubWF0Y2goL3dyZGF0YVxzKyhcUyspXHMrKC4qKS9pKTtpZihhKXtsZXQgbz1gLnByb2JlICR7YVsyXS50cmltKCkuc3BsaXQoL1xzKy8pLmpvaW4oIiAiKX1gO3Q9dC5yZXBsYWNlKC93cmRhdGEuKi9pLG8pfWVsc2UgaWYoIXQubWF0Y2goL1wucHJvYmUvaSkpdGhyb3cgdC5tYXRjaCgvcGxvdFxzKyguKikvaSk/bmV3IEVycm9yKCJUaGUgJ3Bsb3QnIGNvbW1hbmQgaXMgbm90IHN1cHBvcnRlZCBmb3IgZGF0YSBleHRyYWN0aW9uLiBQbGVhc2UgdXNlICd3cmRhdGEgPGZpbGVuYW1lPiA8dmFyMT4gLi4uJyBvciAnLnByb2JlIDx2YXIxPiAuLi4nIGluc3RlYWQuIik6bmV3IEVycm9yKCJObyAnLnByb2JlJyBvciAnd3JkYXRhJyBjb21tYW5kIGZvdW5kIGluIFNQSUNFIGZpbGUuIFVzZSAnd3JkYXRhIDxmaWxlbmFtZT4gPHZhcjE+IC4uLicgdG8gc3BlY2lmeSBvdXRwdXQuIik7ZS5zZXROZXRMaXN0KHQpO2xldCBuPWF3YWl0IGUucnVuU2ltKCk7c2VsZi5wb3N0TWVzc2FnZSh7dHlwZToicmVzdWx0IixyZXN1bHQ6bn0pfWNhdGNoKHQpe3NlbGYucG9zdE1lc3NhZ2Uoe3R5cGU6ImVycm9yIixlcnJvcjp0Lm1lc3NhZ2V9KX19Owo=";
@@ -885,7 +1239,7 @@ var useSpiceSimulation = (spiceString) => {
   const [nodes, setNodes] = useState3([]);
   const [isLoading, setIsLoading] = useState3(true);
   const [error, setError] = useState3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!spiceString) {
       setIsLoading(false);
       setPlotData([]);
@@ -991,7 +1345,7 @@ var getSpiceFromCircuitJson = (circuitJson) => {
 };
 
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -1012,11 +1366,11 @@ var SchematicViewer = ({
   const getCircuitHash = (circuitJson2) => {
     return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
   };
-  const circuitJsonKey = useMemo(
+  const circuitJsonKey = useMemo2(
     () => getCircuitHash(circuitJson),
     [circuitJson]
   );
-  const spiceString = useMemo(() => {
+  const spiceString = useMemo2(() => {
     if (!spiceSimulationEnabled) return null;
     try {
       return getSpiceFromCircuitJson(circuitJson);
@@ -1036,6 +1390,8 @@ var SchematicViewer = ({
   const [isInteractionEnabled, setIsInteractionEnabled] = useState4(
     !clickToInteractEnabled
   );
+  const [showViewMenu, setShowViewMenu] = useState4(false);
+  const [showSchematicGroups, setShowSchematicGroups] = useState4(false);
   const svgDivRef = useRef4(null);
   const touchStartRef = useRef4(null);
   const handleTouchStart = (e) => {
@@ -1059,7 +1415,7 @@ var SchematicViewer = ({
   };
   const [internalEditEvents, setInternalEditEvents] = useState4([]);
   const circuitJsonRef = useRef4(circuitJson);
-  useEffect6(() => {
+  useEffect7(() => {
     const circuitHash = getCircuitHash(circuitJson);
     const circuitHashRef = getCircuitHash(circuitJsonRef.current);
     if (circuitHash !== circuitHashRef) {
@@ -1080,7 +1436,7 @@ var SchematicViewer = ({
     enabled: isInteractionEnabled && !showSpiceOverlay
   });
   const { containerWidth, containerHeight } = useResizeHandling(containerRef);
-  const svgString = useMemo(() => {
+  const svgString = useMemo2(() => {
     if (!containerWidth || !containerHeight) return "";
     return convertCircuitJsonToSchematicSvg(circuitJson, {
       width: containerWidth,
@@ -1092,13 +1448,13 @@ var SchematicViewer = ({
       colorOverrides
     });
   }, [circuitJson, containerWidth, containerHeight]);
-  const containerBackgroundColor = useMemo(() => {
+  const containerBackgroundColor = useMemo2(() => {
     const match = svgString.match(
       /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i
     );
     return match?.[1] ?? "transparent";
   }, [svgString]);
-  const realToSvgProjection = useMemo(() => {
+  const realToSvgProjection = useMemo2(() => {
     if (!svgString) return identity();
     const transformString = svgString.match(
       /data-real-to-screen-transform="([^"]+)"/
@@ -1116,7 +1472,7 @@ var SchematicViewer = ({
       onEditEvent(event);
     }
   };
-  const editEventsWithUnappliedEditEvents = useMemo(() => {
+  const editEventsWithUnappliedEditEvents = useMemo2(() => {
     return [...unappliedEditEvents, ...internalEditEvents];
   }, [unappliedEditEvents, internalEditEvents]);
   const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(
@@ -1144,8 +1500,9 @@ var SchematicViewer = ({
     activeEditEvent,
     editEvents: editEventsWithUnappliedEditEvents
   });
-  const svgDiv = useMemo(
-    () => /* @__PURE__ */ jsx7(
+  useSchematicGroupsOverlay(svgDivRef, circuitJson, circuitJsonKey, showSchematicGroups);
+  const svgDiv = useMemo2(
+    () => /* @__PURE__ */ jsx9(
       "div",
       {
         ref: svgDivRef,
@@ -1158,7 +1515,7 @@ var SchematicViewer = ({
     ),
     [svgString, isInteractionEnabled, clickToInteractEnabled]
   );
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: containerRef,
@@ -1199,7 +1556,7 @@ var SchematicViewer = ({
         handleTouchEnd(e);
       },
       children: [
-        !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx7(
+        !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx9(
           "div",
           {
             onClick: (e) => {
@@ -1218,7 +1575,7 @@ var SchematicViewer = ({
               pointerEvents: "all",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 style: {
@@ -1235,22 +1592,40 @@ var SchematicViewer = ({
             )
           }
         ),
-        editingEnabled && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
+          ViewMenuIcon,
+          {
+            active: showViewMenu,
+            onClick: () => setShowViewMenu(!showViewMenu)
+          }
+        ),
+        editingEnabled && /* @__PURE__ */ jsx9(
           EditIcon,
           {
             active: editModeEnabled,
             onClick: () => setEditModeEnabled(!editModeEnabled)
           }
         ),
-        editingEnabled && editModeEnabled && /* @__PURE__ */ jsx7(
+        editingEnabled && editModeEnabled && /* @__PURE__ */ jsx9(
           GridIcon,
           {
             active: snapToGrid,
             onClick: () => setSnapToGrid(!snapToGrid)
           }
         ),
-        spiceSimulationEnabled && /* @__PURE__ */ jsx7(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
-        showSpiceOverlay && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
+          ViewMenu,
+          {
+            circuitJson,
+            circuitJsonKey,
+            isVisible: showViewMenu,
+            onClose: () => setShowViewMenu(false),
+            showGroups: showSchematicGroups,
+            onToggleGroups: setShowSchematicGroups
+          }
+        ),
+        spiceSimulationEnabled && /* @__PURE__ */ jsx9(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
+        showSpiceOverlay && /* @__PURE__ */ jsx9(
           SpiceSimulationOverlay,
           {
             spiceString,