@tscircuit/schematic-viewer 1.1.21 → 1.2.0

package/dist/index.js

@@ -1,34 +1,13 @@
-'use strict';
-
-var react = require('react');
-var reactSupergrid = require('react-supergrid');
-var builder = require('@tscircuit/builder');
-var TscReactFiber = require('@tscircuit/react-fiber');
-var jsxRuntime = require('react/jsx-runtime');
-var useMouseMatrixTransform = require('use-mouse-matrix-transform');
-var reactErrorBoundary = require('react-error-boundary');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var TscReactFiber__default = /*#__PURE__*/_interopDefault(TscReactFiber);
-
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw new Error('Dynamic require of "' + x + '" is not supported');
-});
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-var __commonJS = (cb, mod) => function __require2() {
+var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __export = (target, all) => {
@@ -56,7 +35,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js
 var require_use_sync_external_store_shim_production_min = __commonJS({
   "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js"(exports) {
-    var e = __require("react");
+    "use strict";
+    var e = require("react");
     function h(a, b) {
       return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
     }
@@ -102,12 +82,14 @@ var require_use_sync_external_store_shim_production_min = __commonJS({
 // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
+    "use strict";
     if (process.env.NODE_ENV !== "production") {
       (function() {
+        "use strict";
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React = __require("react");
+        var React = require("react");
         var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         function error(format) {
           {
@@ -221,11 +203,12 @@ var require_use_sync_external_store_shim_development = __commonJS({
 
 // node_modules/use-sync-external-store/shim/index.js
 var require_shim = __commonJS({
-  "node_modules/use-sync-external-store/shim/index.js"(exports, module) {
+  "node_modules/use-sync-external-store/shim/index.js"(exports, module2) {
+    "use strict";
     if (process.env.NODE_ENV === "production") {
-      module.exports = require_use_sync_external_store_shim_production_min();
+      module2.exports = require_use_sync_external_store_shim_production_min();
     } else {
-      module.exports = require_use_sync_external_store_shim_development();
+      module2.exports = require_use_sync_external_store_shim_development();
     }
   }
 });
@@ -233,7 +216,8 @@ var require_shim = __commonJS({
 // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js
 var require_with_selector_production_min = __commonJS({
   "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js"(exports) {
-    var h = __require("react");
+    "use strict";
+    var h = require("react");
     var n = require_shim();
     function p(a, b) {
       return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
@@ -294,12 +278,14 @@ var require_with_selector_production_min = __commonJS({
 // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
 var require_with_selector_development = __commonJS({
   "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js"(exports) {
+    "use strict";
     if (process.env.NODE_ENV !== "production") {
       (function() {
+        "use strict";
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React = __require("react");
+        var React = require("react");
         var shim = require_shim();
         function is(x, y) {
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
@@ -381,19 +367,20 @@ var require_with_selector_development = __commonJS({
 
 // node_modules/use-sync-external-store/shim/with-selector.js
 var require_with_selector = __commonJS({
-  "node_modules/use-sync-external-store/shim/with-selector.js"(exports, module) {
+  "node_modules/use-sync-external-store/shim/with-selector.js"(exports, module2) {
+    "use strict";
     if (process.env.NODE_ENV === "production") {
-      module.exports = require_with_selector_production_min();
+      module2.exports = require_with_selector_production_min();
     } else {
-      module.exports = require_with_selector_development();
+      module2.exports = require_with_selector_development();
     }
   }
 });
 
 // node_modules/parse-svg-path/index.js
 var require_parse_svg_path = __commonJS({
-  "node_modules/parse-svg-path/index.js"(exports, module) {
-    module.exports = parse;
+  "node_modules/parse-svg-path/index.js"(exports, module2) {
+    module2.exports = parse;
     var length = { a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0 };
     var segment = /([astvzqmhlc])([^astvzqmhlc]*)/ig;
     function parse(path) {
@@ -428,8 +415,8 @@ var require_parse_svg_path = __commonJS({
 
 // node_modules/abs-svg-path/index.js
 var require_abs_svg_path = __commonJS({
-  "node_modules/abs-svg-path/index.js"(exports, module) {
-    module.exports = absolutize;
+  "node_modules/abs-svg-path/index.js"(exports, module2) {
+    module2.exports = absolutize;
     function absolutize(path) {
       var startX = 0;
       var startY = 0;
@@ -641,8 +628,9 @@ var init_modules = __esm({
 
 // node_modules/normalize-svg-path/index.js
 var require_normalize_svg_path = __commonJS({
-  "node_modules/normalize-svg-path/index.js"(exports, module) {
-    module.exports = normalize;
+  "node_modules/normalize-svg-path/index.js"(exports, module2) {
+    "use strict";
+    module2.exports = normalize;
     var arcToCurve = (init_modules(), __toCommonJS(modules_exports));
     function normalize(path) {
       var prev;
@@ -754,8 +742,9 @@ var require_normalize_svg_path = __commonJS({
 
 // node_modules/is-svg-path/index.js
 var require_is_svg_path = __commonJS({
-  "node_modules/is-svg-path/index.js"(exports, module) {
-    module.exports = function isPath(str) {
+  "node_modules/is-svg-path/index.js"(exports, module2) {
+    "use strict";
+    module2.exports = function isPath(str) {
       if (typeof str !== "string")
         return false;
       str = str.trim();
@@ -768,12 +757,13 @@ var require_is_svg_path = __commonJS({
 
 // node_modules/svg-path-bounds/index.js
 var require_svg_path_bounds = __commonJS({
-  "node_modules/svg-path-bounds/index.js"(exports, module) {
+  "node_modules/svg-path-bounds/index.js"(exports, module2) {
+    "use strict";
     var parse = require_parse_svg_path();
     var abs = require_abs_svg_path();
     var normalize = require_normalize_svg_path();
     var isSvgPath = require_is_svg_path();
-    module.exports = pathBounds;
+    module2.exports = pathBounds;
     function pathBounds(path) {
       if (Array.isArray(path) && path.length === 1 && typeof path[0] === "string")
         path = path[0];
@@ -809,7 +799,7 @@ var require_svg_path_bounds = __commonJS({
 
 // node_modules/debounce/index.js
 var require_debounce = __commonJS({
-  "node_modules/debounce/index.js"(exports, module) {
+  "node_modules/debounce/index.js"(exports, module2) {
     function debounce(func, wait, immediate) {
       var timeout, args, context, timestamp, result;
       if (null == wait)
@@ -826,6 +816,7 @@ var require_debounce = __commonJS({
           }
         }
       }
+      ;
       var debounced = function() {
         context = this;
         args = arguments;
@@ -856,13 +847,13 @@ var require_debounce = __commonJS({
       return debounced;
     }
     debounce.debounce = debounce;
-    module.exports = debounce;
+    module2.exports = debounce;
   }
 });
 
 // node_modules/svg-path-generator/lib/svg-path-generator.js
 var require_svg_path_generator = __commonJS({
-  "node_modules/svg-path-generator/lib/svg-path-generator.js"(exports, module) {
+  "node_modules/svg-path-generator/lib/svg-path-generator.js"(exports, module2) {
     function SvgPathGenerator(path) {
       if (!(this instanceof SvgPathGenerator)) {
         return new SvgPathGenerator(path);
@@ -870,7 +861,7 @@ var require_svg_path_generator = __commonJS({
       this.currentPath = (path || "") + " ";
       this.isRelative = false;
     }
-    module.exports = SvgPathGenerator;
+    module2.exports = SvgPathGenerator;
     SvgPathGenerator.prototype.toString = function() {
       return this.end();
     };
@@ -934,11 +925,24 @@ var require_svg_path_generator = __commonJS({
 
 // node_modules/svg-path-generator/index.js
 var require_svg_path_generator2 = __commonJS({
-  "node_modules/svg-path-generator/index.js"(exports, module) {
-    module.exports = require_svg_path_generator();
+  "node_modules/svg-path-generator/index.js"(exports, module2) {
+    module2.exports = require_svg_path_generator();
   }
 });
 
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Schematic: () => Schematic
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Schematic.tsx
+var import_react6 = require("react");
+var import_react_supergrid = require("react-supergrid");
+var import_builder3 = require("@tscircuit/builder");
+var import_react_fiber = __toESM(require("@tscircuit/react-fiber"));
+
 // src/lib/utils/collect-element-refs.ts
 var collectElementRefs = (elm, allElms) => {
   const source_port = allElms.find(
@@ -999,6 +1003,7 @@ var createStoreImpl = (createState) => {
 var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
 
 // node_modules/zustand/esm/index.js
+var import_react = require("react");
 var import_with_selector = __toESM(require_with_selector());
 var { useSyncExternalStoreWithSelector } = import_with_selector.default;
 function useStore(api, selector = api.getState, equalityFn) {
@@ -1009,7 +1014,7 @@ function useStore(api, selector = api.getState, equalityFn) {
     selector,
     equalityFn
   );
-  react.useDebugValue(slice);
+  (0, import_react.useDebugValue)(slice);
   return slice;
 }
 var createImpl = (createState) => {
@@ -1080,6 +1085,9 @@ function compose(...matrices) {
   return transform(...matrices);
 }
 
+// node_modules/transformation-matrix/src/rotate.js
+var { cos, sin, PI } = Math;
+
 // node_modules/transformation-matrix/src/scale.js
 function scale(sx, sy = void 0, cx = void 0, cy = void 0) {
   if (isUndefined(sy))
@@ -1102,6 +1110,9 @@ 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/fromTransformAttribute.autogenerated.js
 function peg$subclass(child, parent) {
   function C() {
@@ -1250,6 +1261,10 @@ function getSVGPathBounds(ds) {
   return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
 }
 var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 var SVGPathComponent = ({
   size,
   center,
@@ -1260,22 +1275,25 @@ var SVGPathComponent = ({
 }) => {
   const ct = useCameraTransform();
   const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
-  Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+  }
   pathBounds.height = Math.max(pathBounds.height, 1);
   pathBounds.width = Math.max(pathBounds.width, 1);
   const absoluteCenter = applyToPoint(ct, center);
   const actualAbsWidth = size.width * ct.a;
-  const actualAbsHeight = size.height * ct.d;
+  const actualAbsHeight = size.height * Math.abs(ct.d);
   const absoluteSize = {
     width: Math.max(1, actualAbsWidth),
     height: Math.max(1, actualAbsHeight)
   };
-  const [hovering, setHovering] = react.useState(false);
+  const [hovering, setHovering] = (0, import_react2.useState)(false);
   const svgLeft = absoluteCenter.x - absoluteSize.width / 2;
   const svgTop = absoluteCenter.y - absoluteSize.height / 2;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    hovering && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+  const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`;
+  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)(
         "div",
         {
           style: {
@@ -1291,7 +1309,7 @@ var SVGPathComponent = ({
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           style: {
@@ -1309,7 +1327,7 @@ var SVGPathComponent = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
         onMouseOver: () => setHovering(Boolean(hoverContent)),
@@ -1319,7 +1337,11 @@ var SVGPathComponent = ({
           // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
           cursor: hovering ? "pointer" : void 0,
           zIndex,
-          transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+          transform: [
+            "scale(1, -1)",
+            // TODO based on ct.d
+            rotation === 0 ? "" : `rotate(${rotation}rad)`
+          ].join(" "),
           left: svgLeft,
           top: svgTop
           // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
@@ -1327,8 +1349,8 @@ var SVGPathComponent = ({
         overflow: "visible",
         width: absoluteSize.width,
         height: absoluteSize.height,
-        viewBox: `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`,
-        children: paths.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        viewBox,
+        children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
           {
             fill: p.fill ?? "none",
@@ -1344,8 +1366,11 @@ var SVGPathComponent = ({
   ] });
 };
 var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimpleResistor.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var SimpleResistor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1361,10 +1386,13 @@ var SimpleResistor = ({ component: { source, schematic } }) => {
     }
   );
 };
+
+// src/schematic-components/SimpleCapacitor.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SimpleCapacitor = ({
   component: { source, schematic }
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1380,6 +1408,13 @@ var SimpleCapacitor = ({
   );
 };
 
+// src/lib/hooks/use-maybe-promise.ts
+var import_react3 = require("react");
+
+// src/schematic-components/ProjectComponent.tsx
+var import_builder = require("@tscircuit/builder");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
 // src/lib/utils/direction-to-vec.ts
 var directionToVec = (direction) => {
   if (direction === "up")
@@ -1393,17 +1428,20 @@ var directionToVec = (direction) => {
   else
     throw new Error("Invalid direction");
 };
+
+// src/schematic-components/SchematicPort.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 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}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
-      hoverContent: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      hoverContent: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
         hoverName,
-        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
         source_port?.pin_number && `Pin ${source_port.pin_number}`
       ] }),
       center: schematic.center,
@@ -1427,6 +1465,7 @@ var SchematicPort = ({
 var SchematicPort_default = SchematicPort;
 
 // node_modules/react-use-measure/dist/web.js
+var import_react4 = require("react");
 var import_debounce = __toESM(require_debounce());
 function useMeasure(_temp) {
   let {
@@ -1444,7 +1483,7 @@ function useMeasure(_temp) {
   if (!ResizeObserver) {
     throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
   }
-  const [bounds, set] = react.useState({
+  const [bounds, set] = (0, import_react4.useState)({
     left: 0,
     top: 0,
     width: 0,
@@ -1454,7 +1493,7 @@ function useMeasure(_temp) {
     x: 0,
     y: 0
   });
-  const state = react.useRef({
+  const state = (0, import_react4.useRef)({
     element: null,
     scrollContainers: null,
     resizeObserver: null,
@@ -1462,12 +1501,12 @@ function useMeasure(_temp) {
   });
   const scrollDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.scroll : null;
   const resizeDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.resize : null;
-  const mounted = react.useRef(false);
-  react.useEffect(() => {
+  const mounted = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     mounted.current = true;
     return () => void (mounted.current = false);
   });
-  const [forceRefresh, resizeChange, scrollChange] = react.useMemo(() => {
+  const [forceRefresh, resizeChange, scrollChange] = (0, import_react4.useMemo)(() => {
     const callback = () => {
       if (!state.current.element)
         return;
@@ -1533,22 +1572,22 @@ function useMeasure(_temp) {
   };
   useOnWindowScroll(scrollChange, Boolean(scroll));
   useOnWindowResize(resizeChange);
-  react.useEffect(() => {
+  (0, import_react4.useEffect)(() => {
     removeListeners();
     addListeners();
   }, [scroll, scrollChange, resizeChange]);
-  react.useEffect(() => removeListeners, []);
+  (0, import_react4.useEffect)(() => removeListeners, []);
   return [ref, bounds, forceRefresh];
 }
 function useOnWindowResize(onWindowResize) {
-  react.useEffect(() => {
+  (0, import_react4.useEffect)(() => {
     const cb = onWindowResize;
     window.addEventListener("resize", cb);
     return () => void window.removeEventListener("resize", cb);
   }, [onWindowResize]);
 }
 function useOnWindowScroll(onScroll, enabled) {
-  react.useEffect(() => {
+  (0, import_react4.useEffect)(() => {
     if (enabled) {
       const cb = onScroll;
       window.addEventListener("scroll", cb, {
@@ -1574,6 +1613,9 @@ function findScrollContainers(element) {
 }
 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_runtime6 = require("react/jsx-runtime");
 var SchematicText = ({ schematic_text }) => {
   const ct = useCameraTransform();
   const { text, position, anchor } = schematic_text;
@@ -1587,7 +1629,7 @@ var SchematicText = ({ schematic_text }) => {
   } else if (anchor === "right") {
     offset = [-bounds.width, -bounds.height / 2];
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ref: boundsRef,
@@ -1605,8 +1647,11 @@ var SchematicText_default = SchematicText;
 
 // src/schematic-components/SchematicTrace.tsx
 var import_svg_path_generator = __toESM(require_svg_path_generator2());
+
+// src/schematic-components/RenderError.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var RenderError_default = ({ text }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       style: {
@@ -1624,10 +1669,13 @@ var RenderError_default = ({ text }) => {
     }
   );
 };
+
+// src/schematic-components/SchematicTrace.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var SchematicTrace = ({ trace: { source, schematic } }) => {
   const edges = schematic.edges;
   if (edges.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RenderError_default, { text: `Route with 0 edges (${source.source_trace_id})` });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.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++) {
@@ -1642,7 +1690,7 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     SVGPathComponent_default,
     {
       rotation: 0,
@@ -1659,6 +1707,10 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
   );
 };
 var SchematicTrace_default = SchematicTrace;
+
+// src/schematic-components/SchematicBug.tsx
+var import_builder2 = require("@tscircuit/builder");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
   const port_arrangement = {
     top_size: 0,
@@ -1667,8 +1719,8 @@ var SchematicBug = ({ component: { source, schematic } }) => {
   };
   let bugw = schematic.size.width;
   let bugh = schematic.size.height;
-  const { total_ports, width, height } = builder.getPortArrangementSize(port_arrangement);
-  const port_indices = builder.getPortIndices(port_arrangement);
+  const { total_ports, width, height } = (0, import_builder2.getPortArrangementSize)(port_arrangement);
+  const port_indices = (0, import_builder2.getPortIndices)(port_arrangement);
   if (isNaN(bugw))
     bugw = width;
   if (isNaN(bugh))
@@ -1680,7 +1732,7 @@ var SchematicBug = ({ component: { source, schematic } }) => {
       d: `M ${-bugw / 2} ${-bugh / 2} L ${bugw / 2} ${-bugh / 2} L ${bugw / 2} ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`
     },
     ...port_indices.map((portNum) => {
-      const pos = builder.getPortPosition(port_arrangement, portNum);
+      const pos = (0, import_builder2.getPortPosition)(port_arrangement, portNum);
       const x2 = pos.side === "left" ? -bugw / 2 : pos.side === "right" ? bugw / 2 : pos.x;
       const y2 = pos.side === "top" ? -bugh / 2 : pos.side === "bottom" ? bugh / 2 : pos.y;
       return {
@@ -1695,7 +1747,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__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1705,10 +1757,13 @@ var SchematicBug = ({ component: { source, schematic } }) => {
     }
   );
 };
+
+// src/schematic-components/SimplePowerSource.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SimplePowerSource = ({
   component: { source, schematic }
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1724,8 +1779,11 @@ var SimplePowerSource = ({
     }
   );
 };
+
+// src/schematic-components/SimpleGround.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SimpleGround = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1741,8 +1799,11 @@ var SimpleGround = ({ component: { source, schematic } }) => {
     }
   );
 };
+
+// src/schematic-components/SimpleInductor.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var SimpleInductor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1759,34 +1820,40 @@ var SimpleInductor = ({ component: { source, schematic } }) => {
     }
   );
 };
+
+// src/schematic-components/SimpleDiode.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// src/schematic-components/SchematicComponent.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SchematicComponent = ({ component }) => {
   const { source, schematic } = component;
   if (!source.ftype)
     return null;
   switch (source.ftype) {
     case "simple_resistor": {
-      return /* @__PURE__ */ jsxRuntime.jsx(SimpleResistor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleResistor, { component: { source, schematic } });
     }
     case "simple_capacitor": {
-      return /* @__PURE__ */ jsxRuntime.jsx(SimpleCapacitor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleCapacitor, { component: { source, schematic } });
     }
     case "simple_power_source": {
-      return /* @__PURE__ */ jsxRuntime.jsx(SimplePowerSource, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimplePowerSource, { component: { source, schematic } });
     }
     case "simple_ground": {
-      return /* @__PURE__ */ jsxRuntime.jsx(SimpleGround, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleGround, { component: { source, schematic } });
     }
     case "simple_inductor": {
-      return /* @__PURE__ */ jsxRuntime.jsx(SimpleInductor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleInductor, { component: { source, schematic } });
     }
     case "simple_bug": {
-      return /* @__PURE__ */ jsxRuntime.jsx(SchematicBug, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SchematicBug, { component: { source, schematic } });
     }
     case "simple_diode": {
       return null;
     }
     default: {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
         "unknown ftype: ",
         component.source.ftype
       ] });
@@ -1794,9 +1861,12 @@ var SchematicComponent = ({ component }) => {
   }
 };
 var SchematicComponent_default = SchematicComponent;
+
+// src/schematic-components/SchematicBox.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SchematicBox = ({ box: { schematic } }) => {
   const { width: w, height: h } = schematic;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1816,8 +1886,11 @@ 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 SchematicLine = ({ line: { schematic } }) => {
   const { x1, x2, y1, y2 } = schematic;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
   const path = (0, import_svg_path_generator2.default)();
   path.moveTo(x1, y1);
   path.lineTo(x2, y2);
@@ -1829,7 +1902,7 @@ var SchematicLine = ({ line: { schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1849,6 +1922,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 SchematicPath = (props) => {
   const { points, is_filled, is_closed, fill_color } = props.path.schematic;
   if (points.length === 0)
@@ -1869,7 +1943,7 @@ var SchematicPath = (props) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1887,12 +1961,15 @@ var SchematicPath = (props) => {
   );
 };
 var SchematicPath_default = SchematicPath;
+
+// src/schematic-components/SchematicElement.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SchematicElement = ({
   element,
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       SchematicComponent_default,
       {
         component: collectElementRefs(element, allElements)
@@ -1900,69 +1977,80 @@ var SchematicElement = ({
     );
   }
   if (element.type === "schematic_trace") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_port") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SchematicPort_default, { port: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_box") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SchematicBox_default, { box: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_line") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SchematicLine_default, { line: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_path") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SchematicPath_default, { path: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_text") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SchematicText_default, { schematic_text: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicText_default, { schematic_text: element });
   }
   if (element.type === "source_error") {
-    return /* @__PURE__ */ jsxRuntime.jsx(RenderError_default, { text: element.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RenderError_default, { text: element.message });
   }
   return null;
 };
-var LazyTableViewer = react.lazy(
-  () => import('@tscircuit/table-viewer').then((m) => ({
+
+// src/Schematic.tsx
+var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
+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 LazyTableViewer = (0, import_react5.lazy)(
+  () => import("@tscircuit/table-viewer").then((m) => ({
     default: m.SoupTableViewer
   }))
 );
-var TableViewer = (params) => /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(LazyTableViewer, { ...params }) });
-var ErrorBoundary = reactErrorBoundary.ErrorBoundary;
+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 }) });
+
+// src/Schematic.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ErrorBoundary = import_react_error_boundary.ErrorBoundary;
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "red" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { color: "red" }, children: [
     "error rendering ",
     elm.type,
     ": ",
     error.toString()
   ] });
 };
-var toMMSINeg = (v, z) => v >= 0 ? reactSupergrid.toMMSI(v, z) : `-${reactSupergrid.toMMSI(-v, z)}`;
+var toMMSINeg = (v, z) => v >= 0 ? (0, import_react_supergrid.toMMSI)(v, z) : `-${(0, import_react_supergrid.toMMSI)(-v, z)}`;
 var Schematic = ({
   children,
   elements: initialElements,
   soup: initialSoup,
   style,
-  showTable
+  showTable = false
 }) => {
   initialSoup = initialSoup ?? initialElements ?? [];
-  const [elements, setElements] = react.useState(initialSoup ?? []);
-  const [project, setProject] = react.useState(null);
+  const [elements, setElements] = (0, import_react6.useState)(initialSoup ?? []);
+  const [project, setProject] = (0, import_react6.useState)(null);
   const setCameraTransform = useRenderContext((s) => s.setCameraTransform);
   const cameraTransform = useRenderContext((s) => s.camera_transform);
   const [boundsRef, bounds] = useMeasure();
-  const { ref, setTransform } = useMouseMatrixTransform.useMouseMatrixTransform({
+  const { ref, setTransform } = (0, import_use_mouse_matrix_transform.useMouseMatrixTransform)({
     onSetTransform: (transform2) => {
       setCameraTransform(transform2);
     }
     // initialTransform: compose(scale(100, 100, 0, 0)),
   });
-  const setElementsAndCamera = react.useCallback(
+  const setElementsAndCamera = (0, import_react6.useCallback)(
     (elements2) => {
       const elmBounds = ref.current.getBoundingClientRect();
       const { center, width, height } = elements2.some(
         (e) => e.type.startsWith("schematic_")
-      ) ? builder.findBoundsAndCenter(
+      ) ? (0, import_builder3.findBoundsAndCenter)(
         elements2.filter((e) => e.type.startsWith("schematic_"))
       ) : { center: { x: 0, y: 0 }, width: 1e-3, height: 1e-3 };
       const scaleFactor = Math.min(
@@ -1971,33 +2059,33 @@ var Schematic = ({
         100
       );
       setElements(elements2);
-      setProject(builder.createProjectFromElements(elements2));
+      setProject((0, import_builder3.createProjectFromElements)(elements2));
       setTransform(
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
           // translate(100, 0),
-          scale(scaleFactor, scaleFactor, 0, 0),
+          scale(scaleFactor, -scaleFactor, 0, 0),
           translate(-center.x, -center.y)
         )
       );
     },
     [setElements, setTransform]
   );
-  react.useEffect(() => {
+  (0, import_react6.useEffect)(() => {
     if (initialSoup.length > 0) {
       setElementsAndCamera(initialSoup);
       return;
     }
-    const projectBuilder = builder.createProjectBuilder();
-    (TscReactFiber.createRoot ?? TscReactFiber__default.default.createRoot)().render(children, projectBuilder).then(async (elements2) => {
+    const projectBuilder = (0, import_builder3.createProjectBuilder)();
+    (import_react_fiber.createRoot ?? import_react_fiber.default.createRoot)().render(children, projectBuilder).then(async (elements2) => {
       setElementsAndCamera(elements2);
     }).catch((e) => {
       console.error("ERROR RENDERING CIRCUIT");
       throw e;
     });
   }, [children]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         style: {
@@ -2015,8 +2103,8 @@ var Schematic = ({
           boundsRef(el);
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactSupergrid.SuperGrid,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react_supergrid.SuperGrid,
             {
               stringifyCoord: (x, y, z) => {
                 if (z === 0)
@@ -2028,7 +2116,7 @@ var Schematic = ({
               transform: cameraTransform
             }
           ),
-          elements?.map((elm, i) => /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ jsxRuntime.jsx(
+          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             SchematicElement,
             {
               element: elm,
@@ -2039,9 +2127,13 @@ var Schematic = ({
         ]
       }
     ),
-    showTable !== false && elements && /* @__PURE__ */ jsxRuntime.jsx(TableViewer, { elements })
+    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableViewer, { elements })
   ] });
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Schematic
+});
 /*! Bundled license information:
 
 use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js:
@@ -2088,7 +2180,4 @@ use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.developme
    * LICENSE file in the root directory of this source tree.
    *)
 */
-
-exports.Schematic = Schematic;
-//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map