@tscircuit/schematic-viewer 1.0.2 → 1.0.3

package/dist/index.js

@@ -1295,6 +1295,9 @@ var collectElementRefs = (elm, allElms) => {
   return null;
 };
 
+// src/schematic-components/MovableGrid/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+
 // node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
   let state;
@@ -1583,6 +1586,7 @@ function getSVGPathBounds(ds) {
 var get_svg_path_bounds_default = getSVGPathBounds;
 
 // src/schematic-components/SVGPathComponent.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var SVGPathComponent = ({ size, center, rotation, paths }) => {
   const ct = useCameraTransform();
   const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
@@ -1599,36 +1603,60 @@ var SVGPathComponent = ({ size, center, rotation, paths }) => {
     width: Math.max(1, size.width * ct.a),
     height: Math.max(1, size.height * ct.d)
   };
-  return <svg style={{
-    position: "absolute",
-    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
-    left: absoluteCenter.x - absoluteSize.width / 2,
-    top: absoluteCenter.y - absoluteSize.height / 2
-  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", {
+    style: {
+      position: "absolute",
+      transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+      left: absoluteCenter.x - absoluteSize.width / 2,
+      top: absoluteCenter.y - absoluteSize.height / 2
+    },
+    overflow: "visible",
+    width: absoluteSize.width,
+    height: absoluteSize.height,
+    viewBox: `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`,
+    children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", {
+      fill: "none",
+      strokeWidth: 2 * (p.strokeWidth || 1),
+      stroke: p.stroke || "red",
+      d: p.d
+    }, i))
+  });
 };
 var SVGPathComponent_default = SVGPathComponent;
 
 // src/schematic-components/SimpleResistor.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SimpleResistor = ({ component: { source, schematic } }) => {
-  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
-    {
-      stroke: "red",
-      strokeWidth: 1,
-      d: "M 0 15 l 10 0 l 0 -6 l 20 0 l 0 12 l -20 0 l 0 -6 m 20 0 l 10 0"
-    }
-  ]} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SVGPathComponent_default, {
+    rotation: schematic.rotation,
+    center: schematic.center,
+    size: schematic.size,
+    paths: [
+      {
+        stroke: "red",
+        strokeWidth: 1,
+        d: "M 0 15 l 10 0 l 0 -6 l 20 0 l 0 12 l -20 0 l 0 -6 m 20 0 l 10 0"
+      }
+    ]
+  });
 };
 
 // src/schematic-components/SimpleCapacitor.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SimpleCapacitor = ({
   component: { source, schematic }
 }) => {
-  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} 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 18 15 l 12 0" }
-  ]} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SVGPathComponent_default, {
+    rotation: schematic.rotation,
+    center: schematic.center,
+    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 18 15 l 12 0" }
+    ]
+  });
 };
 
 // src/lib/hooks/use-maybe-promise.ts
@@ -1636,6 +1664,7 @@ var import_react2 = require("react");
 
 // src/schematic-components/ProjectComponent.tsx
 var import_builder = require("@tscircuit/builder");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 
 // src/lib/utils/direction-to-vec.ts
 var directionToVec = (direction) => {
@@ -1652,19 +1681,25 @@ var directionToVec = (direction) => {
 };
 
 // src/schematic-components/SchematicPort.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SchematicPort = ({ port: { source, schematic } }) => {
-  return <SVGPathComponent rotation={0} center={schematic.center} size={{ width: 0.2, height: 0.2 }} paths={[
-    {
-      stroke: "blue",
-      strokeWidth: 1,
-      d: "M 0 0 l 10 0 l 0 10 l -10 0 z"
-    },
-    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}`
-    } : null
-  ].filter(Boolean)} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SVGPathComponent, {
+    rotation: 0,
+    center: schematic.center,
+    size: { width: 0.2, height: 0.2 },
+    paths: [
+      {
+        stroke: "blue",
+        strokeWidth: 1,
+        d: "M 0 0 l 10 0 l 0 10 l -10 0 z"
+      },
+      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}`
+      } : null
+    ].filter(Boolean)
+  });
 };
 var SchematicPort_default = SchematicPort;
 
@@ -1819,6 +1854,7 @@ var keys = ["x", "y", "top", "bottom", "left", "right", "width", "height"];
 var areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
 
 // src/schematic-components/SchematicText.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SchematicText = ({ schematic_text }) => {
   const ct = useCameraTransform();
   const { text, position, anchor } = schematic_text;
@@ -1832,12 +1868,16 @@ var SchematicText = ({ schematic_text }) => {
   } else if (anchor === "right") {
     offset = [-bounds.width, -bounds.height / 2];
   }
-  return <div ref={boundsRef} style={{
-    fontFamily: "'IBM Plex Mono', monospace",
-    position: "absolute",
-    left: tPos.x + offset[0],
-    top: tPos.y + offset[1]
-  }}>{text}</div>;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+    ref: boundsRef,
+    style: {
+      fontFamily: "'IBM Plex Mono', monospace",
+      position: "absolute",
+      left: tPos.x + offset[0],
+      top: tPos.y + offset[1]
+    },
+    children: text
+  });
 };
 var SchematicText_default = SchematicText;
 
@@ -1845,25 +1885,32 @@ var SchematicText_default = SchematicText;
 var import_svg_path_generator = __toESM(require_svg_path_generator2());
 
 // src/schematic-components/RenderError.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var RenderError_default = ({ text }) => {
-  return <div style={{
-    position: "fixed",
-    backgroundColor: "red",
-    color: "white",
-    fontSize: 14,
-    fontFamily: "sans-serif",
-    padding: 5,
-    right: 0,
-    top: 0,
-    opacity: 0.75
-  }}>{text}</div>;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
+    style: {
+      position: "fixed",
+      backgroundColor: "red",
+      color: "white",
+      fontSize: 14,
+      fontFamily: "sans-serif",
+      padding: 5,
+      right: 0,
+      top: 0,
+      opacity: 0.75
+    },
+    children: text
+  });
 };
 
 // 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 <RenderError_default text="Route with 0 edges" />;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderError_default, {
+      text: "Route with 0 edges"
+    });
   }
   const path = (0, import_svg_path_generator.default)();
   for (let i = 0; i < edges.length; i++) {
@@ -1878,18 +1925,24 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return <SVGPathComponent_default rotation={0} center={center} size={pathBounds} paths={[
-    {
-      stroke: "green",
-      strokeWidth: 0.02,
-      d
-    }
-  ]} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGPathComponent_default, {
+    rotation: 0,
+    center,
+    size: pathBounds,
+    paths: [
+      {
+        stroke: "green",
+        strokeWidth: 0.02,
+        d
+      }
+    ]
+  });
 };
 var SchematicTrace_default = SchematicTrace;
 
 // src/schematic-components/SchematicBug.tsx
 var import_range = __toESM(require_range());
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
   const ports_arrangement = schematic.port_arrangement;
   const port_labels = schematic.port_labels;
@@ -1897,126 +1950,181 @@ var SchematicBug = ({ component: { source, schematic } }) => {
   const rh = 15;
   const pd = 7.5;
   const bugh = Math.max(ports_arrangement.left_size, ports_arrangement.right_size) * rh;
-  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
-    {
-      stroke: "red",
-      strokeWidth: 1,
-      d: `M 0 0 L ${bugw} 0 L ${bugw} ${bugh} L 0 ${bugh}Z`
-    },
-    ...(0, import_range.default)(
-      0,
-      ports_arrangement.left_size + ports_arrangement.right_size
-    ).map((i) => {
-      const ls = ports_arrangement.left_size;
-      const left = i < ls;
-      const rowi = i % ls;
-      const p1 = [left ? 0 : bugw, rh / 2 + rowi * rh];
-      const rd = [left ? -pd : pd, 0];
-      return {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SVGPathComponent_default, {
+    rotation: schematic.rotation,
+    center: schematic.center,
+    size: schematic.size,
+    paths: [
+      {
         stroke: "red",
         strokeWidth: 1,
-        d: `M ${p1.join(" ")} l ${rd.join(" ")}`
-      };
-    })
-  ]} />;
+        d: `M 0 0 L ${bugw} 0 L ${bugw} ${bugh} L 0 ${bugh}Z`
+      },
+      ...(0, import_range.default)(
+        0,
+        ports_arrangement.left_size + ports_arrangement.right_size
+      ).map((i) => {
+        const ls = ports_arrangement.left_size;
+        const left = i < ls;
+        const rowi = i % ls;
+        const p1 = [left ? 0 : bugw, rh / 2 + rowi * rh];
+        const rd = [left ? -pd : pd, 0];
+        return {
+          stroke: "red",
+          strokeWidth: 1,
+          d: `M ${p1.join(" ")} l ${rd.join(" ")}`
+        };
+      })
+    ]
+  });
 };
 
 // src/schematic-components/SimplePowerSource.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SimplePowerSource = ({
   component: { source, schematic }
 }) => {
-  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
-    {
-      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"
-    }
-  ]} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SVGPathComponent_default, {
+    rotation: schematic.rotation,
+    center: schematic.center,
+    size: schematic.size,
+    paths: [
+      {
+        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"
+      }
+    ]
+  });
 };
 
 // src/schematic-components/SimpleGround.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var SimpleGround = ({ component: { source, schematic } }) => {
-  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
-    {
-      stroke: "red",
-      strokeWidth: 0.7,
-      d: "M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12"
-    }
-  ]} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SVGPathComponent_default, {
+    rotation: schematic.rotation,
+    center: schematic.center,
+    size: schematic.size,
+    paths: [
+      {
+        stroke: "red",
+        strokeWidth: 0.7,
+        d: "M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12"
+      }
+    ]
+  });
 };
 
 // src/schematic-components/SimpleInductor.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SimpleInductor = ({ component: { source, schematic } }) => {
-  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
-    {
-      stroke: "red",
-      strokeWidth: 1,
-      d: "m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273"
-    }
-  ]} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SVGPathComponent_default, {
+    rotation: schematic.rotation,
+    center: schematic.center,
+    size: schematic.size,
+    paths: [
+      {
+        stroke: "red",
+        strokeWidth: 1,
+        d: "m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273"
+      }
+    ]
+  });
 };
 
 // src/schematic-components/SimpleDiode.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SimpleDiode = ({ component: { source, schematic } }) => {
-  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
-    { stroke: "red", strokeWidth: 2, d: "M 0,0 H 21" },
-    { stroke: "red", strokeWidth: 2, d: "M 49,0 H 59" },
-    { stroke: "red", strokeWidth: 2, d: "M 49,0 L 21 14 V -14 Z" },
-    { stroke: "red", strokeWidth: 2, d: "M 49,-14 V 14" }
-  ]} />;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SVGPathComponent_default, {
+    rotation: schematic.rotation,
+    center: schematic.center,
+    size: schematic.size,
+    paths: [
+      { stroke: "red", strokeWidth: 2, d: "M 0,0 H 21" },
+      { stroke: "red", strokeWidth: 2, d: "M 49,0 H 59" },
+      { stroke: "red", strokeWidth: 2, d: "M 49,0 L 21 14 V -14 Z" },
+      { stroke: "red", strokeWidth: 2, d: "M 49,-14 V 14" }
+    ]
+  });
 };
 
 // src/schematic-components/SchematicComponent.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SchematicComponent = ({ component }) => {
   const { source, schematic } = component;
   switch (source.ftype) {
     case "simple_resistor": {
-      return <SimpleResistor component={{ source, schematic }} />;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleResistor, {
+        component: { source, schematic }
+      });
     }
     case "simple_capacitor": {
-      return <SimpleCapacitor component={{ source, schematic }} />;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleCapacitor, {
+        component: { source, schematic }
+      });
     }
     case "simple_power_source": {
-      return <SimplePowerSource component={{ source, schematic }} />;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimplePowerSource, {
+        component: { source, schematic }
+      });
     }
     case "simple_ground": {
-      return <SimpleGround component={{ source, schematic }} />;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleGround, {
+        component: { source, schematic }
+      });
     }
     case "simple_inductor": {
-      return <SimpleInductor component={{ source, schematic }} />;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleInductor, {
+        component: { source, schematic }
+      });
     }
     case "simple_bug": {
-      return <SchematicBug component={{ source, schematic }} />;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicBug, {
+        component: { source, schematic }
+      });
     }
     case "simple_diode": {
-      return <SimpleDiode component={{ source, schematic }} />;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleDiode, {
+        component: { source, schematic }
+      });
     }
     default: {
-      return <div>
-        {"unknown ftype: "}
-        {component.source.ftype}
-      </div>;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", {
+        children: [
+          "unknown ftype: ",
+          component.source.ftype
+        ]
+      });
     }
   }
 };
 var SchematicComponent_default = SchematicComponent;
 
 // src/schematic-components/SchematicElement.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var SchematicElement = ({
   element,
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return <SchematicComponent_default component={collectElementRefs(element, allElements)} />;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SchematicComponent_default, {
+      component: collectElementRefs(element, allElements)
+    });
   }
   if (element.type === "schematic_trace") {
-    return <SchematicTrace_default trace={collectElementRefs(element, allElements)} />;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SchematicTrace_default, {
+      trace: collectElementRefs(element, allElements)
+    });
   }
   if (element.type === "schematic_port") {
-    return <SchematicPort_default port={collectElementRefs(element, allElements)} />;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SchematicPort_default, {
+      port: collectElementRefs(element, allElements)
+    });
   }
   if (element.type === "schematic_text") {
-    return <SchematicText_default schematic_text={element} />;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SchematicText_default, {
+      schematic_text: element
+    });
   }
   return null;
 };
@@ -2024,13 +2132,17 @@ var SchematicElement = ({
 // src/Schematic.tsx
 var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
 var import_react_error_boundary = require("react-error-boundary");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return <div style={{ color: "red" }}>
-    {"error rendering "}
-    {elm.type}
-    {": "}
-    {error.toString()}
-  </div>;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", {
+    style: { color: "red" },
+    children: [
+      "error rendering ",
+      elm.type,
+      ": ",
+      error.toString()
+    ]
+  });
 };
 var Schematic = ({
   children,
@@ -2060,15 +2172,25 @@ var Schematic = ({
   }, [children]);
   if (elements.length === 0)
     return null;
-  return <div style={{
-    width: "100%",
-    backgroundColor: "rgba(255,255,255,0)",
-    minHeight: 200,
-    overflow: "hidden",
-    position: "relative",
-    cursor: "grab",
-    ...style
-  }} ref={ref}>{elements.map((elm) => <import_react_error_boundary.ErrorBoundary fallbackRender={fallbackRender(elm)}><SchematicElement element={elm} allElements={elements} key={JSON.stringify(elm)} /></import_react_error_boundary.ErrorBoundary>)}</div>;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", {
+    style: {
+      width: "100%",
+      backgroundColor: "rgba(255,255,255,0)",
+      minHeight: 200,
+      overflow: "hidden",
+      position: "relative",
+      cursor: "grab",
+      ...style
+    },
+    ref,
+    children: elements.map((elm) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_error_boundary.ErrorBoundary, {
+      fallbackRender: fallbackRender(elm),
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SchematicElement, {
+        element: elm,
+        allElements: elements
+      }, JSON.stringify(elm))
+    }))
+  });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {