@tscircuit/schematic-viewer 1.2.6 → 1.2.8

package/dist/index.js

@@ -1113,6 +1113,14 @@ function scale(sx, sy = void 0, cx = void 0, cy = void 0) {
 // node_modules/transformation-matrix/src/skew.js
 var { tan } = Math;
 
+// node_modules/transformation-matrix/src/toString.js
+function toSVG(matrix) {
+  return toString(matrix);
+}
+function toString(matrix) {
+  return `matrix(${matrix.a},${matrix.b},${matrix.c},${matrix.d},${matrix.e},${matrix.f})`;
+}
+
 // node_modules/transformation-matrix/src/fromTransformAttribute.autogenerated.js
 function peg$subclass(child, parent) {
   function C() {
@@ -1280,20 +1288,32 @@ var SVGPathComponent = ({
   const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
   if (badRatio) {
   }
-  pathBounds.height = Math.max(pathBounds.height, 0.01);
-  pathBounds.width = Math.max(pathBounds.width, 0.01);
+  const padding = {
+    x: 0,
+    y: 0
+  };
   const absoluteCenter = applyToPoint(ct, center);
-  const actualAbsWidth = size.width * ct.a;
-  const actualAbsHeight = size.height * Math.abs(ct.d);
-  const absoluteSize = {
-    width: Math.max(1, actualAbsWidth),
-    height: Math.max(1, actualAbsHeight)
+  const innerSize = {
+    width: size.width * ct.a,
+    height: size.height * Math.abs(ct.d)
+  };
+  const fullSize = {
+    width: innerSize.width + padding.x * 2,
+    height: innerSize.height + padding.y * 2
   };
-  console.log(absoluteSize, pathBounds);
   const [hovering, setHovering] = (0, import_react2.useState)(false);
-  const svgLeft = absoluteCenter.x - absoluteSize.width / 2;
-  const svgTop = absoluteCenter.y - absoluteSize.height / 2;
-  const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`;
+  const svgLeft = absoluteCenter.x - fullSize.width / 2;
+  const svgTop = absoluteCenter.y - fullSize.height / 2;
+  const preferredRatio = pathBounds.width === 0 ? innerSize.height / pathBounds.height : innerSize.width / pathBounds.width;
+  const svgToScreen = compose(
+    // translate(0, 0)
+    scale(
+      pathBounds.width === 0 ? preferredRatio : fullSize.width / pathBounds.width,
+      pathBounds.height === 0 ? preferredRatio : fullSize.height / pathBounds.height
+    ),
+    translate(-pathBounds.minX, -pathBounds.minY)
+    // translate(center.x, center.y)
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     hovering && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1301,11 +1321,11 @@ var SVGPathComponent = ({
         {
           style: {
             position: "absolute",
-            left: svgLeft - 4,
-            top: svgTop - 4,
+            left: svgLeft - 6,
+            top: svgTop - 6,
             pointerEvents: "none",
-            width: actualAbsWidth + 8,
-            height: actualAbsHeight + 8,
+            width: fullSize.width + 12,
+            height: fullSize.height + 12,
             border: "1px red solid",
             mixBlendMode: "difference",
             zIndex: 1e3
@@ -1317,7 +1337,7 @@ var SVGPathComponent = ({
         {
           style: {
             position: "absolute",
-            left: svgLeft + actualAbsWidth + 10,
+            left: svgLeft + fullSize.width + 10,
             pointerEvents: "none",
             zIndex: 1e3,
             color: "red",
@@ -1348,18 +1368,20 @@ var SVGPathComponent = ({
           ].join(" "),
           left: svgLeft,
           top: svgTop
-          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
+          // overflow: "hidden",
+          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
+          // backgroundColor: "rgba(255, 0, 0, 0.1)",
         },
         overflow: "visible",
-        width: absoluteSize.width,
-        height: absoluteSize.height,
-        viewBox,
+        width: fullSize.width,
+        height: fullSize.height,
         children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
           {
+            transform: toSVG(svgToScreen),
             fill: p.fill ?? "none",
             strokeLinecap: "round",
-            strokeWidth: 2 * (p.strokeWidth || 1),
+            strokeWidth: 1.5 * (p.strokeWidth || 1),
             stroke: p.stroke || "red",
             d: p.d
           },
@@ -1404,8 +1426,8 @@ var SimpleCapacitor = ({
       size: schematic.size,
       paths: [
         { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
-        { stroke: "red", strokeWidth: 2, d: "M 12 0 l 0 30" },
-        { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
+        { stroke: "red", strokeWidth: 1, d: "M 12 0 l 0 30" },
+        { stroke: "red", strokeWidth: 1, d: "M 18 0 l 0 30" },
         { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" }
       ]
     }
@@ -1430,7 +1452,7 @@ var directionToVec = (direction) => {
   else if (direction === "right")
     return { x: 1, y: 0 };
   else
-    throw new Error("Invalid direction");
+    throw new Error(`Invalid direction "${direction}"`);
 };
 
 // src/schematic-components/SchematicPort.tsx
@@ -1439,6 +1461,7 @@ var SchematicPort = ({
   port: { source_port, source_component, schematic }
 }) => {
   const hoverName = source_component?.name ? `.${source_component.name} > .${source_port?.name ?? source_port?.pin_number}` : `.${source_port?.name ?? source_port?.pin_number}`;
+  const vec = directionToVec(schematic.facing_direction);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     SVGPathComponent,
     {
@@ -1449,7 +1472,10 @@ var SchematicPort = ({
         source_port?.pin_number && `Pin ${source_port.pin_number}`
       ] }),
       center: schematic.center,
-      size: { width: 0.2, height: 0.2 },
+      size: {
+        width: 0.2 + Math.abs(vec.x) * 0.04,
+        height: 0.2 + Math.abs(vec.y) * 0.04
+      },
       zIndex: 10,
       paths: [
         {
@@ -1460,7 +1486,7 @@ var SchematicPort = ({
         schematic.facing_direction ? {
           stroke: "blue",
           strokeWidth: 0.5,
-          d: `M 5 5 l ${directionToVec(schematic.facing_direction).x * 7} ${directionToVec(schematic.facing_direction).y * 7}`
+          d: `M 5 5 l ${vec.x * 7} ${vec.y * 7}`
         } : null
       ].filter(Boolean)
     }
@@ -1677,12 +1703,60 @@ var RenderError_default = ({ text }) => {
   );
 };
 
-// src/schematic-components/SchematicTrace.tsx
+// src/schematic-components/SVGPathComponent2.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var SVGPathComponent2 = ({
+  size,
+  center,
+  rotation,
+  paths,
+  zIndex,
+  invertY,
+  shiftToBottom,
+  hoverContent
+}) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
+        pointerEvents: "none",
+        zIndex
+        // overflow: "hidden",
+        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
+        // backgroundColor: "rgba(255, 0, 0, 0.1)",
+      },
+      overflow: "visible",
+      children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          transform: toSVG(ct),
+          fill: p.fill ?? "none",
+          strokeLinecap: "round",
+          strokeWidth: 1.5 * (p.strokeWidth || 1),
+          stroke: p.stroke || "red",
+          d: p.d
+        },
+        i
+      ))
+    }
+  );
+};
+var SVGPathComponent2_default = SVGPathComponent2;
+
+// src/schematic-components/SchematicTrace.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SchematicTrace = ({ trace: { source, schematic } }) => {
   const edges = schematic.edges;
   if (edges.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderError_default, { text: `Route with 0 edges (${source.source_trace_id})` });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderError_default, { text: `Route with 0 edges (${source.source_trace_id})` });
   }
   const path = (0, import_svg_path_generator.default)();
   for (let i = 0; i < edges.length; i++) {
@@ -1697,8 +1771,8 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    SVGPathComponent_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    SVGPathComponent2_default,
     {
       rotation: 0,
       center,
@@ -1717,7 +1791,7 @@ var SchematicTrace_default = SchematicTrace;
 
 // src/schematic-components/SchematicBug.tsx
 var import_builder2 = require("@tscircuit/builder");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
   const port_arrangement = {
     top_size: 0,
@@ -1754,7 +1828,7 @@ var SchematicBug = ({ component: { source, schematic } }) => {
     x: schematic.center.x + (actualSize.minX + actualSize.maxX) / 2,
     y: schematic.center.y + (actualSize.minY + actualSize.maxY) / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1766,11 +1840,11 @@ var SchematicBug = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimplePowerSource.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SimplePowerSource = ({
   component: { source, schematic }
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1782,6 +1856,18 @@ var SimplePowerSource = ({
           stroke: "red",
           strokeWidth: 1,
           d: "M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3"
+        },
+        // positive symbol
+        {
+          stroke: "red",
+          strokeWidth: 0.5,
+          d: "M 8 -9 L 8 -6 M 9.5 -7.5 L 6.5 -7.5"
+        },
+        // negative symbol
+        {
+          stroke: "red",
+          strokeWidth: 0.5,
+          d: "M 9.5 7.5 L 6.5 7.5"
         }
       ]
     }
@@ -1789,9 +1875,9 @@ var SimplePowerSource = ({
 };
 
 // src/schematic-components/SimpleGround.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var SimpleGround = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1811,9 +1897,9 @@ var SimpleGround = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimpleInductor.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SimpleInductor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1832,38 +1918,38 @@ var SimpleInductor = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimpleDiode.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 
 // src/schematic-components/SchematicComponent.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SchematicComponent = ({ component }) => {
   const { source, schematic } = component;
   if (!source.ftype)
     return null;
   switch (source.ftype) {
     case "simple_resistor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleResistor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleResistor, { component: { source, schematic } });
     }
     case "simple_capacitor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleCapacitor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleCapacitor, { component: { source, schematic } });
     }
     case "simple_power_source": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimplePowerSource, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimplePowerSource, { component: { source, schematic } });
     }
     case "simple_ground": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleGround, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleGround, { component: { source, schematic } });
     }
     case "simple_inductor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleInductor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleInductor, { component: { source, schematic } });
     }
     case "simple_bug": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SchematicBug, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicBug, { component: { source, schematic } });
     }
     case "simple_diode": {
       return null;
     }
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
         "unknown ftype: ",
         component.source.ftype
       ] });
@@ -1873,10 +1959,10 @@ var SchematicComponent = ({ component }) => {
 var SchematicComponent_default = SchematicComponent;
 
 // src/schematic-components/SchematicBox.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var SchematicBox = ({ box: { schematic } }) => {
   const { width: w, height: h } = schematic;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1896,7 +1982,7 @@ var SchematicBox_default = SchematicBox;
 
 // src/schematic-components/SchematicLine.tsx
 var import_svg_path_generator2 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SchematicLine = ({ line: { schematic } }) => {
   const { x1, x2, y1, y2 } = schematic;
   const dx = x2 - x1;
@@ -1906,13 +1992,11 @@ var SchematicLine = ({ line: { schematic } }) => {
   path.lineTo(x2, y2);
   const d = path.toString();
   const pathBounds = get_svg_path_bounds_default(d);
-  pathBounds.height = Math.max(pathBounds.height, 1);
-  pathBounds.width = Math.max(pathBounds.width, 1);
   const center = {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1932,7 +2016,7 @@ var SchematicLine_default = SchematicLine;
 
 // src/schematic-components/SchematicPath.tsx
 var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SchematicPath = (props) => {
   const { points, is_filled, is_closed, fill_color } = props.path.schematic;
   if (points.length === 0)
@@ -1953,7 +2037,7 @@ var SchematicPath = (props) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1973,13 +2057,13 @@ var SchematicPath = (props) => {
 var SchematicPath_default = SchematicPath;
 
 // src/schematic-components/SchematicElement.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SchematicElement = ({
   element,
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       SchematicComponent_default,
       {
         component: collectElementRefs(element, allElements)
@@ -1987,25 +2071,25 @@ var SchematicElement = ({
     );
   }
   if (element.type === "schematic_trace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_port") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_box") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_line") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_path") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicText_default, { schematic_text: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicText_default, { schematic_text: element });
   }
   if (element.type === "source_error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RenderError_default, { text: element.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RenderError_default, { text: element.message });
   }
   return null;
 };
@@ -2016,19 +2100,19 @@ var import_react_error_boundary = require("react-error-boundary");
 
 // src/schematic-components/TableViewer.tsx
 var import_react5 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var LazyTableViewer = (0, import_react5.lazy)(
   () => import("@tscircuit/table-viewer").then((m) => ({
     default: m.SoupTableViewer
   }))
 );
-var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react5.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LazyTableViewer, { ...params }) });
+var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react5.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LazyTableViewer, { ...params }) });
 
 // src/Schematic.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ErrorBoundary = import_react_error_boundary.ErrorBoundary;
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { color: "red" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { color: "red" }, children: [
     "error rendering ",
     elm.type,
     ": ",
@@ -2094,8 +2178,8 @@ var Schematic = ({
       throw e;
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         style: {
@@ -2113,7 +2197,7 @@ var Schematic = ({
           boundsRef(el);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             import_react_supergrid.SuperGrid,
             {
               stringifyCoord: (x, y, z) => {
@@ -2126,7 +2210,7 @@ var Schematic = ({
               transform: cameraTransform
             }
           ),
-          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             SchematicElement,
             {
               element: elm,
@@ -2137,7 +2221,7 @@ var Schematic = ({
         ]
       }
     ),
-    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableViewer, { elements })
+    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableViewer, { elements })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node: