@tscircuit/schematic-viewer 1.0.0 → 1.0.2

package/dist/index.js

@@ -0,0 +1,2113 @@
+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 __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// 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) {
+    "use strict";
+    var e = require("react");
+    function h(a, b) {
+      return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
+    }
+    var k = "function" === typeof Object.is ? Object.is : h;
+    var l = e.useState;
+    var m = e.useEffect;
+    var n = e.useLayoutEffect;
+    var p = e.useDebugValue;
+    function q(a, b) {
+      var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c = f[0].inst, g = f[1];
+      n(function() {
+        c.value = d;
+        c.getSnapshot = b;
+        r(c) && g({ inst: c });
+      }, [a, d, b]);
+      m(function() {
+        r(c) && g({ inst: c });
+        return a(function() {
+          r(c) && g({ inst: c });
+        });
+      }, [a]);
+      p(d);
+      return d;
+    }
+    function r(a) {
+      var b = a.getSnapshot;
+      a = a.value;
+      try {
+        var d = b();
+        return !k(a, d);
+      } catch (f) {
+        return true;
+      }
+    }
+    function t(a, b) {
+      return b();
+    }
+    var u = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t : q;
+    exports.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u;
+  }
+});
+
+// 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 ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        function error(format) {
+          {
+            {
+              for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+                args[_key2 - 1] = arguments[_key2];
+              }
+              printWarning("error", format, args);
+            }
+          }
+        }
+        function printWarning(level, format, args) {
+          {
+            var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+            var stack = ReactDebugCurrentFrame.getStackAddendum();
+            if (stack !== "") {
+              format += "%s";
+              args = args.concat([stack]);
+            }
+            var argsWithFormat = args.map(function(item) {
+              return String(item);
+            });
+            argsWithFormat.unshift("Warning: " + format);
+            Function.prototype.apply.call(console[level], console, argsWithFormat);
+          }
+        }
+        function is(x, y) {
+          return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
+        }
+        var objectIs = typeof Object.is === "function" ? Object.is : is;
+        var useState4 = React.useState, useEffect4 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
+        var didWarnOld18Alpha = false;
+        var didWarnUncachedGetSnapshot = false;
+        function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+          {
+            if (!didWarnOld18Alpha) {
+              if (React.startTransition !== void 0) {
+                didWarnOld18Alpha = true;
+                error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.");
+              }
+            }
+          }
+          var value = getSnapshot();
+          {
+            if (!didWarnUncachedGetSnapshot) {
+              var cachedValue = getSnapshot();
+              if (!objectIs(value, cachedValue)) {
+                error("The result of getSnapshot should be cached to avoid an infinite loop");
+                didWarnUncachedGetSnapshot = true;
+              }
+            }
+          }
+          var _useState = useState4({
+            inst: {
+              value,
+              getSnapshot
+            }
+          }), inst = _useState[0].inst, forceUpdate = _useState[1];
+          useLayoutEffect(function() {
+            inst.value = value;
+            inst.getSnapshot = getSnapshot;
+            if (checkIfSnapshotChanged(inst)) {
+              forceUpdate({
+                inst
+              });
+            }
+          }, [subscribe, value, getSnapshot]);
+          useEffect4(function() {
+            if (checkIfSnapshotChanged(inst)) {
+              forceUpdate({
+                inst
+              });
+            }
+            var handleStoreChange = function() {
+              if (checkIfSnapshotChanged(inst)) {
+                forceUpdate({
+                  inst
+                });
+              }
+            };
+            return subscribe(handleStoreChange);
+          }, [subscribe]);
+          useDebugValue2(value);
+          return value;
+        }
+        function checkIfSnapshotChanged(inst) {
+          var latestGetSnapshot = inst.getSnapshot;
+          var prevValue = inst.value;
+          try {
+            var nextValue = latestGetSnapshot();
+            return !objectIs(prevValue, nextValue);
+          } catch (error2) {
+            return true;
+          }
+        }
+        function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
+          return getSnapshot();
+        }
+        var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
+        var isServerEnvironment = !canUseDOM;
+        var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
+        var useSyncExternalStore$2 = React.useSyncExternalStore !== void 0 ? React.useSyncExternalStore : shim;
+        exports.useSyncExternalStore = useSyncExternalStore$2;
+        if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
+          __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+        }
+      })();
+    }
+  }
+});
+
+// node_modules/use-sync-external-store/shim/index.js
+var require_shim = __commonJS({
+  "node_modules/use-sync-external-store/shim/index.js"(exports, module2) {
+    "use strict";
+    if (process.env.NODE_ENV === "production") {
+      module2.exports = require_use_sync_external_store_shim_production_min();
+    } else {
+      module2.exports = require_use_sync_external_store_shim_development();
+    }
+  }
+});
+
+// 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) {
+    "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;
+    }
+    var q = "function" === typeof Object.is ? Object.is : p;
+    var r = n.useSyncExternalStore;
+    var t = h.useRef;
+    var u = h.useEffect;
+    var v = h.useMemo;
+    var w = h.useDebugValue;
+    exports.useSyncExternalStoreWithSelector = function(a, b, e, l, g) {
+      var c = t(null);
+      if (null === c.current) {
+        var f = { hasValue: false, value: null };
+        c.current = f;
+      } else
+        f = c.current;
+      c = v(function() {
+        function a2(a3) {
+          if (!c2) {
+            c2 = true;
+            d2 = a3;
+            a3 = l(a3);
+            if (void 0 !== g && f.hasValue) {
+              var b2 = f.value;
+              if (g(b2, a3))
+                return k = b2;
+            }
+            return k = a3;
+          }
+          b2 = k;
+          if (q(d2, a3))
+            return b2;
+          var e2 = l(a3);
+          if (void 0 !== g && g(b2, e2))
+            return b2;
+          d2 = a3;
+          return k = e2;
+        }
+        var c2 = false, d2, k, m = void 0 === e ? null : e;
+        return [function() {
+          return a2(b());
+        }, null === m ? void 0 : function() {
+          return a2(m());
+        }];
+      }, [b, e, l, g]);
+      var d = r(a, c[0], c[1]);
+      u(function() {
+        f.hasValue = true;
+        f.value = d;
+      }, [d]);
+      w(d);
+      return d;
+    };
+  }
+});
+
+// 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 shim = require_shim();
+        function is(x, y) {
+          return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
+        }
+        var objectIs = typeof Object.is === "function" ? Object.is : is;
+        var useSyncExternalStore = shim.useSyncExternalStore;
+        var useRef2 = React.useRef, useEffect4 = React.useEffect, useMemo2 = React.useMemo, useDebugValue2 = React.useDebugValue;
+        function useSyncExternalStoreWithSelector2(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+          var instRef = useRef2(null);
+          var inst;
+          if (instRef.current === null) {
+            inst = {
+              hasValue: false,
+              value: null
+            };
+            instRef.current = inst;
+          } else {
+            inst = instRef.current;
+          }
+          var _useMemo = useMemo2(function() {
+            var hasMemo = false;
+            var memoizedSnapshot;
+            var memoizedSelection;
+            var memoizedSelector = function(nextSnapshot) {
+              if (!hasMemo) {
+                hasMemo = true;
+                memoizedSnapshot = nextSnapshot;
+                var _nextSelection = selector(nextSnapshot);
+                if (isEqual !== void 0) {
+                  if (inst.hasValue) {
+                    var currentSelection = inst.value;
+                    if (isEqual(currentSelection, _nextSelection)) {
+                      memoizedSelection = currentSelection;
+                      return currentSelection;
+                    }
+                  }
+                }
+                memoizedSelection = _nextSelection;
+                return _nextSelection;
+              }
+              var prevSnapshot = memoizedSnapshot;
+              var prevSelection = memoizedSelection;
+              if (objectIs(prevSnapshot, nextSnapshot)) {
+                return prevSelection;
+              }
+              var nextSelection = selector(nextSnapshot);
+              if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
+                return prevSelection;
+              }
+              memoizedSnapshot = nextSnapshot;
+              memoizedSelection = nextSelection;
+              return nextSelection;
+            };
+            var maybeGetServerSnapshot = getServerSnapshot === void 0 ? null : getServerSnapshot;
+            var getSnapshotWithSelector = function() {
+              return memoizedSelector(getSnapshot());
+            };
+            var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : function() {
+              return memoizedSelector(maybeGetServerSnapshot());
+            };
+            return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+          }, [getSnapshot, getServerSnapshot, selector, isEqual]), getSelection = _useMemo[0], getServerSelection = _useMemo[1];
+          var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
+          useEffect4(function() {
+            inst.hasValue = true;
+            inst.value = value;
+          }, [value]);
+          useDebugValue2(value);
+          return value;
+        }
+        exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector2;
+        if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
+          __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+        }
+      })();
+    }
+  }
+});
+
+// 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, module2) {
+    "use strict";
+    if (process.env.NODE_ENV === "production") {
+      module2.exports = require_with_selector_production_min();
+    } else {
+      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, 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) {
+      var data = [];
+      path.replace(segment, function(_, command, args) {
+        var type = command.toLowerCase();
+        args = parseValues(args);
+        if (type == "m" && args.length > 2) {
+          data.push([command].concat(args.splice(0, 2)));
+          type = "l";
+          command = command == "m" ? "l" : "L";
+        }
+        while (true) {
+          if (args.length == length[type]) {
+            args.unshift(command);
+            return data.push(args);
+          }
+          if (args.length < length[type])
+            throw new Error("malformed path data");
+          data.push([command].concat(args.splice(0, length[type])));
+        }
+      });
+      return data;
+    }
+    var number = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/ig;
+    function parseValues(args) {
+      var numbers = args.match(number);
+      return numbers ? numbers.map(Number) : [];
+    }
+  }
+});
+
+// node_modules/abs-svg-path/index.js
+var require_abs_svg_path = __commonJS({
+  "node_modules/abs-svg-path/index.js"(exports, module2) {
+    module2.exports = absolutize;
+    function absolutize(path) {
+      var startX = 0;
+      var startY = 0;
+      var x = 0;
+      var y = 0;
+      return path.map(function(seg) {
+        seg = seg.slice();
+        var type = seg[0];
+        var command = type.toUpperCase();
+        if (type != command) {
+          seg[0] = command;
+          switch (type) {
+            case "a":
+              seg[6] += x;
+              seg[7] += y;
+              break;
+            case "v":
+              seg[1] += y;
+              break;
+            case "h":
+              seg[1] += x;
+              break;
+            default:
+              for (var i = 1; i < seg.length; ) {
+                seg[i++] += x;
+                seg[i++] += y;
+              }
+          }
+        }
+        switch (command) {
+          case "Z":
+            x = startX;
+            y = startY;
+            break;
+          case "H":
+            x = seg[1];
+            break;
+          case "V":
+            y = seg[1];
+            break;
+          case "M":
+            x = startX = seg[1];
+            y = startY = seg[2];
+            break;
+          default:
+            x = seg[seg.length - 2];
+            y = seg[seg.length - 1];
+        }
+        return seg;
+      });
+    }
+  }
+});
+
+// node_modules/svg-arc-to-cubic-bezier/modules/index.js
+var modules_exports = {};
+__export(modules_exports, {
+  default: () => modules_default
+});
+var _slicedToArray, TAU, mapToEllipse, approxUnitArc, vectorAngle, getArcCenter, arcToBezier, modules_default;
+var init_modules = __esm({
+  "node_modules/svg-arc-to-cubic-bezier/modules/index.js"() {
+    _slicedToArray = function() {
+      function sliceIterator(arr, i) {
+        var _arr = [];
+        var _n = true;
+        var _d = false;
+        var _e = void 0;
+        try {
+          for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+            _arr.push(_s.value);
+            if (i && _arr.length === i)
+              break;
+          }
+        } catch (err) {
+          _d = true;
+          _e = err;
+        } finally {
+          try {
+            if (!_n && _i["return"])
+              _i["return"]();
+          } finally {
+            if (_d)
+              throw _e;
+          }
+        }
+        return _arr;
+      }
+      return function(arr, i) {
+        if (Array.isArray(arr)) {
+          return arr;
+        } else if (Symbol.iterator in Object(arr)) {
+          return sliceIterator(arr, i);
+        } else {
+          throw new TypeError("Invalid attempt to destructure non-iterable instance");
+        }
+      };
+    }();
+    TAU = Math.PI * 2;
+    mapToEllipse = function mapToEllipse2(_ref, rx, ry, cosphi, sinphi, centerx, centery) {
+      var x = _ref.x, y = _ref.y;
+      x *= rx;
+      y *= ry;
+      var xp = cosphi * x - sinphi * y;
+      var yp = sinphi * x + cosphi * y;
+      return {
+        x: xp + centerx,
+        y: yp + centery
+      };
+    };
+    approxUnitArc = function approxUnitArc2(ang1, ang2) {
+      var a = ang2 === 1.5707963267948966 ? 0.551915024494 : ang2 === -1.5707963267948966 ? -0.551915024494 : 4 / 3 * Math.tan(ang2 / 4);
+      var x1 = Math.cos(ang1);
+      var y1 = Math.sin(ang1);
+      var x2 = Math.cos(ang1 + ang2);
+      var y2 = Math.sin(ang1 + ang2);
+      return [{
+        x: x1 - y1 * a,
+        y: y1 + x1 * a
+      }, {
+        x: x2 + y2 * a,
+        y: y2 - x2 * a
+      }, {
+        x: x2,
+        y: y2
+      }];
+    };
+    vectorAngle = function vectorAngle2(ux, uy, vx, vy) {
+      var sign = ux * vy - uy * vx < 0 ? -1 : 1;
+      var dot = ux * vx + uy * vy;
+      if (dot > 1) {
+        dot = 1;
+      }
+      if (dot < -1) {
+        dot = -1;
+      }
+      return sign * Math.acos(dot);
+    };
+    getArcCenter = function getArcCenter2(px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp) {
+      var rxsq = Math.pow(rx, 2);
+      var rysq = Math.pow(ry, 2);
+      var pxpsq = Math.pow(pxp, 2);
+      var pypsq = Math.pow(pyp, 2);
+      var radicant = rxsq * rysq - rxsq * pypsq - rysq * pxpsq;
+      if (radicant < 0) {
+        radicant = 0;
+      }
+      radicant /= rxsq * pypsq + rysq * pxpsq;
+      radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1);
+      var centerxp = radicant * rx / ry * pyp;
+      var centeryp = radicant * -ry / rx * pxp;
+      var centerx = cosphi * centerxp - sinphi * centeryp + (px + cx) / 2;
+      var centery = sinphi * centerxp + cosphi * centeryp + (py + cy) / 2;
+      var vx1 = (pxp - centerxp) / rx;
+      var vy1 = (pyp - centeryp) / ry;
+      var vx2 = (-pxp - centerxp) / rx;
+      var vy2 = (-pyp - centeryp) / ry;
+      var ang1 = vectorAngle(1, 0, vx1, vy1);
+      var ang2 = vectorAngle(vx1, vy1, vx2, vy2);
+      if (sweepFlag === 0 && ang2 > 0) {
+        ang2 -= TAU;
+      }
+      if (sweepFlag === 1 && ang2 < 0) {
+        ang2 += TAU;
+      }
+      return [centerx, centery, ang1, ang2];
+    };
+    arcToBezier = function arcToBezier2(_ref2) {
+      var px = _ref2.px, py = _ref2.py, cx = _ref2.cx, cy = _ref2.cy, rx = _ref2.rx, ry = _ref2.ry, _ref2$xAxisRotation = _ref2.xAxisRotation, xAxisRotation = _ref2$xAxisRotation === void 0 ? 0 : _ref2$xAxisRotation, _ref2$largeArcFlag = _ref2.largeArcFlag, largeArcFlag = _ref2$largeArcFlag === void 0 ? 0 : _ref2$largeArcFlag, _ref2$sweepFlag = _ref2.sweepFlag, sweepFlag = _ref2$sweepFlag === void 0 ? 0 : _ref2$sweepFlag;
+      var curves = [];
+      if (rx === 0 || ry === 0) {
+        return [];
+      }
+      var sinphi = Math.sin(xAxisRotation * TAU / 360);
+      var cosphi = Math.cos(xAxisRotation * TAU / 360);
+      var pxp = cosphi * (px - cx) / 2 + sinphi * (py - cy) / 2;
+      var pyp = -sinphi * (px - cx) / 2 + cosphi * (py - cy) / 2;
+      if (pxp === 0 && pyp === 0) {
+        return [];
+      }
+      rx = Math.abs(rx);
+      ry = Math.abs(ry);
+      var lambda = Math.pow(pxp, 2) / Math.pow(rx, 2) + Math.pow(pyp, 2) / Math.pow(ry, 2);
+      if (lambda > 1) {
+        rx *= Math.sqrt(lambda);
+        ry *= Math.sqrt(lambda);
+      }
+      var _getArcCenter = getArcCenter(px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp), _getArcCenter2 = _slicedToArray(_getArcCenter, 4), centerx = _getArcCenter2[0], centery = _getArcCenter2[1], ang1 = _getArcCenter2[2], ang2 = _getArcCenter2[3];
+      var ratio = Math.abs(ang2) / (TAU / 4);
+      if (Math.abs(1 - ratio) < 1e-7) {
+        ratio = 1;
+      }
+      var segments = Math.max(Math.ceil(ratio), 1);
+      ang2 /= segments;
+      for (var i = 0; i < segments; i++) {
+        curves.push(approxUnitArc(ang1, ang2));
+        ang1 += ang2;
+      }
+      return curves.map(function(curve) {
+        var _mapToEllipse = mapToEllipse(curve[0], rx, ry, cosphi, sinphi, centerx, centery), x1 = _mapToEllipse.x, y1 = _mapToEllipse.y;
+        var _mapToEllipse2 = mapToEllipse(curve[1], rx, ry, cosphi, sinphi, centerx, centery), x2 = _mapToEllipse2.x, y2 = _mapToEllipse2.y;
+        var _mapToEllipse3 = mapToEllipse(curve[2], rx, ry, cosphi, sinphi, centerx, centery), x = _mapToEllipse3.x, y = _mapToEllipse3.y;
+        return { x1, y1, x2, y2, x, y };
+      });
+    };
+    modules_default = arcToBezier;
+  }
+});
+
+// node_modules/normalize-svg-path/index.js
+var require_normalize_svg_path = __commonJS({
+  "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;
+      var result = [];
+      var bezierX = 0;
+      var bezierY = 0;
+      var startX = 0;
+      var startY = 0;
+      var quadX = null;
+      var quadY = null;
+      var x = 0;
+      var y = 0;
+      for (var i = 0, len = path.length; i < len; i++) {
+        var seg = path[i];
+        var command = seg[0];
+        switch (command) {
+          case "M":
+            startX = seg[1];
+            startY = seg[2];
+            break;
+          case "A":
+            var curves = arcToCurve({
+              px: x,
+              py: y,
+              cx: seg[6],
+              cy: seg[7],
+              rx: seg[1],
+              ry: seg[2],
+              xAxisRotation: seg[3],
+              largeArcFlag: seg[4],
+              sweepFlag: seg[5]
+            });
+            if (!curves.length)
+              continue;
+            for (var j = 0, c; j < curves.length; j++) {
+              c = curves[j];
+              seg = ["C", c.x1, c.y1, c.x2, c.y2, c.x, c.y];
+              if (j < curves.length - 1)
+                result.push(seg);
+            }
+            break;
+          case "S":
+            var cx = x;
+            var cy = y;
+            if (prev == "C" || prev == "S") {
+              cx += cx - bezierX;
+              cy += cy - bezierY;
+            }
+            seg = ["C", cx, cy, seg[1], seg[2], seg[3], seg[4]];
+            break;
+          case "T":
+            if (prev == "Q" || prev == "T") {
+              quadX = x * 2 - quadX;
+              quadY = y * 2 - quadY;
+            } else {
+              quadX = x;
+              quadY = y;
+            }
+            seg = quadratic(x, y, quadX, quadY, seg[1], seg[2]);
+            break;
+          case "Q":
+            quadX = seg[1];
+            quadY = seg[2];
+            seg = quadratic(x, y, seg[1], seg[2], seg[3], seg[4]);
+            break;
+          case "L":
+            seg = line(x, y, seg[1], seg[2]);
+            break;
+          case "H":
+            seg = line(x, y, seg[1], y);
+            break;
+          case "V":
+            seg = line(x, y, x, seg[1]);
+            break;
+          case "Z":
+            seg = line(x, y, startX, startY);
+            break;
+        }
+        prev = command;
+        x = seg[seg.length - 2];
+        y = seg[seg.length - 1];
+        if (seg.length > 4) {
+          bezierX = seg[seg.length - 4];
+          bezierY = seg[seg.length - 3];
+        } else {
+          bezierX = x;
+          bezierY = y;
+        }
+        result.push(seg);
+      }
+      return result;
+    }
+    function line(x1, y1, x2, y2) {
+      return ["C", x1, y1, x2, y2, x2, y2];
+    }
+    function quadratic(x1, y1, cx, cy, x2, y2) {
+      return [
+        "C",
+        x1 / 3 + 2 / 3 * cx,
+        y1 / 3 + 2 / 3 * cy,
+        x2 / 3 + 2 / 3 * cx,
+        y2 / 3 + 2 / 3 * cy,
+        x2,
+        y2
+      ];
+    }
+  }
+});
+
+// node_modules/is-svg-path/index.js
+var require_is_svg_path = __commonJS({
+  "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();
+      if (/^[mzlhvcsqta]\s*[-+.0-9][^mlhvzcsqta]+/i.test(str) && /[\dz]$/i.test(str) && str.length > 4)
+        return true;
+      return false;
+    };
+  }
+});
+
+// node_modules/svg-path-bounds/index.js
+var require_svg_path_bounds = __commonJS({
+  "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();
+    module2.exports = pathBounds;
+    function pathBounds(path) {
+      if (Array.isArray(path) && path.length === 1 && typeof path[0] === "string")
+        path = path[0];
+      if (typeof path === "string") {
+        if (!isSvgPath(path))
+          throw Error("String is not an SVG path.");
+        path = parse(path);
+      }
+      if (!Array.isArray(path))
+        throw Error("Argument should be a string or an array of path segments.");
+      path = abs(path);
+      path = normalize(path);
+      if (!path.length)
+        return [0, 0, 0, 0];
+      var bounds = [Infinity, Infinity, -Infinity, -Infinity];
+      for (var i = 0, l = path.length; i < l; i++) {
+        var points = path[i].slice(1);
+        for (var j = 0; j < points.length; j += 2) {
+          if (points[j + 0] < bounds[0])
+            bounds[0] = points[j + 0];
+          if (points[j + 1] < bounds[1])
+            bounds[1] = points[j + 1];
+          if (points[j + 0] > bounds[2])
+            bounds[2] = points[j + 0];
+          if (points[j + 1] > bounds[3])
+            bounds[3] = points[j + 1];
+        }
+      }
+      return bounds;
+    }
+  }
+});
+
+// node_modules/debounce/index.js
+var require_debounce = __commonJS({
+  "node_modules/debounce/index.js"(exports, module2) {
+    function debounce(func, wait, immediate) {
+      var timeout, args, context, timestamp, result;
+      if (null == wait)
+        wait = 100;
+      function later() {
+        var last = Date.now() - timestamp;
+        if (last < wait && last >= 0) {
+          timeout = setTimeout(later, wait - last);
+        } else {
+          timeout = null;
+          if (!immediate) {
+            result = func.apply(context, args);
+            context = args = null;
+          }
+        }
+      }
+      ;
+      var debounced = function() {
+        context = this;
+        args = arguments;
+        timestamp = Date.now();
+        var callNow = immediate && !timeout;
+        if (!timeout)
+          timeout = setTimeout(later, wait);
+        if (callNow) {
+          result = func.apply(context, args);
+          context = args = null;
+        }
+        return result;
+      };
+      debounced.clear = function() {
+        if (timeout) {
+          clearTimeout(timeout);
+          timeout = null;
+        }
+      };
+      debounced.flush = function() {
+        if (timeout) {
+          result = func.apply(context, args);
+          context = args = null;
+          clearTimeout(timeout);
+          timeout = null;
+        }
+      };
+      return debounced;
+    }
+    debounce.debounce = 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, module2) {
+    function SvgPathGenerator(path) {
+      if (!(this instanceof SvgPathGenerator)) {
+        return new SvgPathGenerator(path);
+      }
+      this.currentPath = (path || "") + " ";
+      this.isRelative = false;
+    }
+    module2.exports = SvgPathGenerator;
+    SvgPathGenerator.prototype.toString = function() {
+      return this.end();
+    };
+    SvgPathGenerator.prototype.moveTo = function() {
+      this._appendData("M", arguments);
+      return this;
+    };
+    SvgPathGenerator.prototype.close = SvgPathGenerator.prototype.closePath = function() {
+      this._appendData("Z", []);
+      return this;
+    };
+    SvgPathGenerator.prototype.lineTo = function() {
+      this._appendData("L", arguments);
+      return this;
+    };
+    SvgPathGenerator.prototype.horizontalLineTo = function(x) {
+      this._appendData("H", [x]);
+      return this;
+    };
+    SvgPathGenerator.prototype.verticalLineTo = function(y) {
+      this._appendData("V", [y]);
+      return this;
+    };
+    SvgPathGenerator.prototype.curveTo = function() {
+      this._appendData("C", arguments);
+      return this;
+    };
+    SvgPathGenerator.prototype.smoothCurveTo = function() {
+      this._appendData("S", arguments);
+      return this;
+    };
+    SvgPathGenerator.prototype.bezierCurveTo = function() {
+      this._appendData("Q", arguments);
+      return this;
+    };
+    SvgPathGenerator.prototype.smoothBezierCurveTo = function() {
+      this._appendData("T", arguments);
+      return this;
+    };
+    SvgPathGenerator.prototype.ellipticalArc = function() {
+      this._appendData("A", arguments);
+      return this;
+    };
+    SvgPathGenerator.prototype.relative = function() {
+      this.isRelative = true;
+      return this;
+    };
+    SvgPathGenerator.prototype.end = function() {
+      return this.currentPath.trim();
+    };
+    SvgPathGenerator.prototype._appendData = function(symbol, args) {
+      args = Array.prototype.slice.call(args);
+      if (this.isRelative) {
+        symbol = symbol.toLowerCase();
+        this.isRelative = false;
+      }
+      this.currentPath += symbol + " " + args.join(" ") + " ";
+    };
+  }
+});
+
+// node_modules/svg-path-generator/index.js
+var require_svg_path_generator2 = __commonJS({
+  "node_modules/svg-path-generator/index.js"(exports, module2) {
+    module2.exports = require_svg_path_generator();
+  }
+});
+
+// node_modules/lodash/_baseRange.js
+var require_baseRange = __commonJS({
+  "node_modules/lodash/_baseRange.js"(exports, module2) {
+    var nativeCeil = Math.ceil;
+    var nativeMax = Math.max;
+    function baseRange(start, end, step, fromRight) {
+      var index = -1, length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), result = Array(length);
+      while (length--) {
+        result[fromRight ? length : ++index] = start;
+        start += step;
+      }
+      return result;
+    }
+    module2.exports = baseRange;
+  }
+});
+
+// node_modules/lodash/eq.js
+var require_eq = __commonJS({
+  "node_modules/lodash/eq.js"(exports, module2) {
+    function eq(value, other) {
+      return value === other || value !== value && other !== other;
+    }
+    module2.exports = eq;
+  }
+});
+
+// node_modules/lodash/_freeGlobal.js
+var require_freeGlobal = __commonJS({
+  "node_modules/lodash/_freeGlobal.js"(exports, module2) {
+    var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+    module2.exports = freeGlobal;
+  }
+});
+
+// node_modules/lodash/_root.js
+var require_root = __commonJS({
+  "node_modules/lodash/_root.js"(exports, module2) {
+    var freeGlobal = require_freeGlobal();
+    var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+    var root = freeGlobal || freeSelf || Function("return this")();
+    module2.exports = root;
+  }
+});
+
+// node_modules/lodash/_Symbol.js
+var require_Symbol = __commonJS({
+  "node_modules/lodash/_Symbol.js"(exports, module2) {
+    var root = require_root();
+    var Symbol2 = root.Symbol;
+    module2.exports = Symbol2;
+  }
+});
+
+// node_modules/lodash/_getRawTag.js
+var require_getRawTag = __commonJS({
+  "node_modules/lodash/_getRawTag.js"(exports, module2) {
+    var Symbol2 = require_Symbol();
+    var objectProto = Object.prototype;
+    var hasOwnProperty = objectProto.hasOwnProperty;
+    var nativeObjectToString = objectProto.toString;
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
+    function getRawTag(value) {
+      var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
+      try {
+        value[symToStringTag] = void 0;
+        var unmasked = true;
+      } catch (e) {
+      }
+      var result = nativeObjectToString.call(value);
+      if (unmasked) {
+        if (isOwn) {
+          value[symToStringTag] = tag;
+        } else {
+          delete value[symToStringTag];
+        }
+      }
+      return result;
+    }
+    module2.exports = getRawTag;
+  }
+});
+
+// node_modules/lodash/_objectToString.js
+var require_objectToString = __commonJS({
+  "node_modules/lodash/_objectToString.js"(exports, module2) {
+    var objectProto = Object.prototype;
+    var nativeObjectToString = objectProto.toString;
+    function objectToString(value) {
+      return nativeObjectToString.call(value);
+    }
+    module2.exports = objectToString;
+  }
+});
+
+// node_modules/lodash/_baseGetTag.js
+var require_baseGetTag = __commonJS({
+  "node_modules/lodash/_baseGetTag.js"(exports, module2) {
+    var Symbol2 = require_Symbol();
+    var getRawTag = require_getRawTag();
+    var objectToString = require_objectToString();
+    var nullTag = "[object Null]";
+    var undefinedTag = "[object Undefined]";
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
+    function baseGetTag(value) {
+      if (value == null) {
+        return value === void 0 ? undefinedTag : nullTag;
+      }
+      return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+    }
+    module2.exports = baseGetTag;
+  }
+});
+
+// node_modules/lodash/isObject.js
+var require_isObject = __commonJS({
+  "node_modules/lodash/isObject.js"(exports, module2) {
+    function isObject2(value) {
+      var type = typeof value;
+      return value != null && (type == "object" || type == "function");
+    }
+    module2.exports = isObject2;
+  }
+});
+
+// node_modules/lodash/isFunction.js
+var require_isFunction = __commonJS({
+  "node_modules/lodash/isFunction.js"(exports, module2) {
+    var baseGetTag = require_baseGetTag();
+    var isObject2 = require_isObject();
+    var asyncTag = "[object AsyncFunction]";
+    var funcTag = "[object Function]";
+    var genTag = "[object GeneratorFunction]";
+    var proxyTag = "[object Proxy]";
+    function isFunction(value) {
+      if (!isObject2(value)) {
+        return false;
+      }
+      var tag = baseGetTag(value);
+      return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+    }
+    module2.exports = isFunction;
+  }
+});
+
+// node_modules/lodash/isLength.js
+var require_isLength = __commonJS({
+  "node_modules/lodash/isLength.js"(exports, module2) {
+    var MAX_SAFE_INTEGER = 9007199254740991;
+    function isLength(value) {
+      return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+    }
+    module2.exports = isLength;
+  }
+});
+
+// node_modules/lodash/isArrayLike.js
+var require_isArrayLike = __commonJS({
+  "node_modules/lodash/isArrayLike.js"(exports, module2) {
+    var isFunction = require_isFunction();
+    var isLength = require_isLength();
+    function isArrayLike(value) {
+      return value != null && isLength(value.length) && !isFunction(value);
+    }
+    module2.exports = isArrayLike;
+  }
+});
+
+// node_modules/lodash/_isIndex.js
+var require_isIndex = __commonJS({
+  "node_modules/lodash/_isIndex.js"(exports, module2) {
+    var MAX_SAFE_INTEGER = 9007199254740991;
+    var reIsUint = /^(?:0|[1-9]\d*)$/;
+    function isIndex(value, length) {
+      var type = typeof value;
+      length = length == null ? MAX_SAFE_INTEGER : length;
+      return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
+    }
+    module2.exports = isIndex;
+  }
+});
+
+// node_modules/lodash/_isIterateeCall.js
+var require_isIterateeCall = __commonJS({
+  "node_modules/lodash/_isIterateeCall.js"(exports, module2) {
+    var eq = require_eq();
+    var isArrayLike = require_isArrayLike();
+    var isIndex = require_isIndex();
+    var isObject2 = require_isObject();
+    function isIterateeCall(value, index, object) {
+      if (!isObject2(object)) {
+        return false;
+      }
+      var type = typeof index;
+      if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
+        return eq(object[index], value);
+      }
+      return false;
+    }
+    module2.exports = isIterateeCall;
+  }
+});
+
+// node_modules/lodash/_trimmedEndIndex.js
+var require_trimmedEndIndex = __commonJS({
+  "node_modules/lodash/_trimmedEndIndex.js"(exports, module2) {
+    var reWhitespace = /\s/;
+    function trimmedEndIndex(string) {
+      var index = string.length;
+      while (index-- && reWhitespace.test(string.charAt(index))) {
+      }
+      return index;
+    }
+    module2.exports = trimmedEndIndex;
+  }
+});
+
+// node_modules/lodash/_baseTrim.js
+var require_baseTrim = __commonJS({
+  "node_modules/lodash/_baseTrim.js"(exports, module2) {
+    var trimmedEndIndex = require_trimmedEndIndex();
+    var reTrimStart = /^\s+/;
+    function baseTrim(string) {
+      return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+    }
+    module2.exports = baseTrim;
+  }
+});
+
+// node_modules/lodash/isObjectLike.js
+var require_isObjectLike = __commonJS({
+  "node_modules/lodash/isObjectLike.js"(exports, module2) {
+    function isObjectLike(value) {
+      return value != null && typeof value == "object";
+    }
+    module2.exports = isObjectLike;
+  }
+});
+
+// node_modules/lodash/isSymbol.js
+var require_isSymbol = __commonJS({
+  "node_modules/lodash/isSymbol.js"(exports, module2) {
+    var baseGetTag = require_baseGetTag();
+    var isObjectLike = require_isObjectLike();
+    var symbolTag = "[object Symbol]";
+    function isSymbol(value) {
+      return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+    }
+    module2.exports = isSymbol;
+  }
+});
+
+// node_modules/lodash/toNumber.js
+var require_toNumber = __commonJS({
+  "node_modules/lodash/toNumber.js"(exports, module2) {
+    var baseTrim = require_baseTrim();
+    var isObject2 = require_isObject();
+    var isSymbol = require_isSymbol();
+    var NAN = 0 / 0;
+    var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+    var reIsBinary = /^0b[01]+$/i;
+    var reIsOctal = /^0o[0-7]+$/i;
+    var freeParseInt = parseInt;
+    function toNumber(value) {
+      if (typeof value == "number") {
+        return value;
+      }
+      if (isSymbol(value)) {
+        return NAN;
+      }
+      if (isObject2(value)) {
+        var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+        value = isObject2(other) ? other + "" : other;
+      }
+      if (typeof value != "string") {
+        return value === 0 ? value : +value;
+      }
+      value = baseTrim(value);
+      var isBinary = reIsBinary.test(value);
+      return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+    }
+    module2.exports = toNumber;
+  }
+});
+
+// node_modules/lodash/toFinite.js
+var require_toFinite = __commonJS({
+  "node_modules/lodash/toFinite.js"(exports, module2) {
+    var toNumber = require_toNumber();
+    var INFINITY = 1 / 0;
+    var MAX_INTEGER = 17976931348623157e292;
+    function toFinite(value) {
+      if (!value) {
+        return value === 0 ? value : 0;
+      }
+      value = toNumber(value);
+      if (value === INFINITY || value === -INFINITY) {
+        var sign = value < 0 ? -1 : 1;
+        return sign * MAX_INTEGER;
+      }
+      return value === value ? value : 0;
+    }
+    module2.exports = toFinite;
+  }
+});
+
+// node_modules/lodash/_createRange.js
+var require_createRange = __commonJS({
+  "node_modules/lodash/_createRange.js"(exports, module2) {
+    var baseRange = require_baseRange();
+    var isIterateeCall = require_isIterateeCall();
+    var toFinite = require_toFinite();
+    function createRange(fromRight) {
+      return function(start, end, step) {
+        if (step && typeof step != "number" && isIterateeCall(start, end, step)) {
+          end = step = void 0;
+        }
+        start = toFinite(start);
+        if (end === void 0) {
+          end = start;
+          start = 0;
+        } else {
+          end = toFinite(end);
+        }
+        step = step === void 0 ? start < end ? 1 : -1 : toFinite(step);
+        return baseRange(start, end, step, fromRight);
+      };
+    }
+    module2.exports = createRange;
+  }
+});
+
+// node_modules/lodash/range.js
+var require_range = __commonJS({
+  "node_modules/lodash/range.js"(exports, module2) {
+    var createRange = require_createRange();
+    var range2 = createRange();
+    module2.exports = range2;
+  }
+});
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Schematic: () => Schematic
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Schematic.tsx
+var import_react4 = require("react");
+var import_builder2 = require("@tscircuit/builder");
+var import_react_fiber = require("@tscircuit/react-fiber");
+
+// src/lib/utils/collect-element-refs.ts
+var collectElementRefs = (elm, allElms) => {
+  const source_component = allElms.find(
+    (e) => e.type === "source_component" && e.source_component_id === elm.source_component_id
+  );
+  if (["schematic_component", "schematic_trace", "schematic_port"].includes(
+    elm.type
+  )) {
+    return {
+      schematic: elm,
+      source: source_component
+    };
+  }
+  return null;
+};
+
+// node_modules/zustand/esm/vanilla.mjs
+var createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (nextState !== state) {
+      const previousState = state;
+      state = replace ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const destroy = () => listeners.clear();
+  const api = { setState, getState, subscribe, destroy };
+  state = createState(
+    setState,
+    getState,
+    api
+  );
+  return api;
+};
+var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+
+// node_modules/zustand/esm/index.mjs
+var import_react = require("react");
+var import_with_selector = __toESM(require_with_selector(), 1);
+var { useSyncExternalStoreWithSelector } = import_with_selector.default;
+function useStore(api, selector = api.getState, equalityFn) {
+  const slice = useSyncExternalStoreWithSelector(
+    api.subscribe,
+    api.getState,
+    api.getServerState || api.getState,
+    selector,
+    equalityFn
+  );
+  (0, import_react.useDebugValue)(slice);
+  return slice;
+}
+var createImpl = (createState) => {
+  const api = typeof createState === "function" ? createStore(createState) : createState;
+  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+var create = (createState) => createState ? createImpl(createState) : createImpl;
+var create$1 = create;
+
+// node_modules/transformation-matrix/src/applyToPoint.js
+function applyToPoint(matrix, point) {
+  return Array.isArray(point) ? [
+    matrix.a * point[0] + matrix.c * point[1] + matrix.e,
+    matrix.b * point[0] + matrix.d * point[1] + matrix.f
+  ] : {
+    x: matrix.a * point.x + matrix.c * point.y + matrix.e,
+    y: matrix.b * point.x + matrix.d * point.y + matrix.f
+  };
+}
+
+// node_modules/transformation-matrix/src/utils.js
+function isUndefined(val) {
+  return typeof val === "undefined";
+}
+
+// node_modules/transformation-matrix/src/translate.js
+function translate(tx, ty = 0) {
+  return {
+    a: 1,
+    c: 0,
+    e: tx,
+    b: 0,
+    d: 1,
+    f: ty
+  };
+}
+
+// node_modules/transformation-matrix/src/transform.js
+function transform(...matrices) {
+  matrices = Array.isArray(matrices[0]) ? matrices[0] : matrices;
+  const multiply = (m1, m2) => {
+    return {
+      a: m1.a * m2.a + m1.c * m2.b,
+      c: m1.a * m2.c + m1.c * m2.d,
+      e: m1.a * m2.e + m1.c * m2.f + m1.e,
+      b: m1.b * m2.a + m1.d * m2.b,
+      d: m1.b * m2.c + m1.d * m2.d,
+      f: m1.b * m2.e + m1.d * m2.f + m1.f
+    };
+  };
+  switch (matrices.length) {
+    case 0:
+      throw new Error("no matrices provided");
+    case 1:
+      return matrices[0];
+    case 2:
+      return multiply(matrices[0], matrices[1]);
+    default: {
+      const [m1, m2, ...rest] = matrices;
+      const m = multiply(m1, m2);
+      return transform(m, ...rest);
+    }
+  }
+}
+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))
+    sy = sx;
+  const scaleMatrix = {
+    a: sx,
+    c: 0,
+    e: 0,
+    b: 0,
+    d: sy,
+    f: 0
+  };
+  if (isUndefined(cx) || isUndefined(cy)) {
+    return scaleMatrix;
+  }
+  return transform([
+    translate(cx, cy),
+    scaleMatrix,
+    translate(-cx, -cy)
+  ]);
+}
+
+// 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() {
+    this.constructor = child;
+  }
+  C.prototype = parent.prototype;
+  child.prototype = new C();
+}
+function peg$SyntaxError(message, expected, found, location) {
+  var self2 = Error.call(this, message);
+  if (Object.setPrototypeOf) {
+    Object.setPrototypeOf(self2, peg$SyntaxError.prototype);
+  }
+  self2.expected = expected;
+  self2.found = found;
+  self2.location = location;
+  self2.name = "SyntaxError";
+  return self2;
+}
+peg$subclass(peg$SyntaxError, Error);
+function peg$padEnd(str, targetLength, padString) {
+  padString = padString || " ";
+  if (str.length > targetLength) {
+    return str;
+  }
+  targetLength -= str.length;
+  padString += padString.repeat(targetLength);
+  return str + padString.slice(0, targetLength);
+}
+peg$SyntaxError.prototype.format = function(sources) {
+  var str = "Error: " + this.message;
+  if (this.location) {
+    var src = null;
+    var k;
+    for (k = 0; k < sources.length; k++) {
+      if (sources[k].source === this.location.source) {
+        src = sources[k].text.split(/\r\n|\n|\r/g);
+        break;
+      }
+    }
+    var s = this.location.start;
+    var loc = this.location.source + ":" + s.line + ":" + s.column;
+    if (src) {
+      var e = this.location.end;
+      var filler = peg$padEnd("", s.line.toString().length, " ");
+      var line = src[s.line - 1];
+      var last = s.line === e.line ? e.column : line.length + 1;
+      var hatLen = last - s.column || 1;
+      str += "\n --> " + loc + "\n" + filler + " |\n" + s.line + " | " + line + "\n" + filler + " | " + peg$padEnd("", s.column - 1, " ") + peg$padEnd("", hatLen, "^");
+    } else {
+      str += "\n at " + loc;
+    }
+  }
+  return str;
+};
+peg$SyntaxError.buildMessage = function(expected, found) {
+  var DESCRIBE_EXPECTATION_FNS = {
+    literal: function(expectation) {
+      return '"' + literalEscape(expectation.text) + '"';
+    },
+    class: function(expectation) {
+      var escapedParts = expectation.parts.map(function(part) {
+        return Array.isArray(part) ? classEscape(part[0]) + "-" + classEscape(part[1]) : classEscape(part);
+      });
+      return "[" + (expectation.inverted ? "^" : "") + escapedParts.join("") + "]";
+    },
+    any: function() {
+      return "any character";
+    },
+    end: function() {
+      return "end of input";
+    },
+    other: function(expectation) {
+      return expectation.description;
+    }
+  };
+  function hex(ch) {
+    return ch.charCodeAt(0).toString(16).toUpperCase();
+  }
+  function literalEscape(s) {
+    return s.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\0/g, "\\0").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/[\x00-\x0F]/g, function(ch) {
+      return "\\x0" + hex(ch);
+    }).replace(/[\x10-\x1F\x7F-\x9F]/g, function(ch) {
+      return "\\x" + hex(ch);
+    });
+  }
+  function classEscape(s) {
+    return s.replace(/\\/g, "\\\\").replace(/\]/g, "\\]").replace(/\^/g, "\\^").replace(/-/g, "\\-").replace(/\0/g, "\\0").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/[\x00-\x0F]/g, function(ch) {
+      return "\\x0" + hex(ch);
+    }).replace(/[\x10-\x1F\x7F-\x9F]/g, function(ch) {
+      return "\\x" + hex(ch);
+    });
+  }
+  function describeExpectation(expectation) {
+    return DESCRIBE_EXPECTATION_FNS[expectation.type](expectation);
+  }
+  function describeExpected(expected2) {
+    var descriptions = expected2.map(describeExpectation);
+    var i, j;
+    descriptions.sort();
+    if (descriptions.length > 0) {
+      for (i = 1, j = 1; i < descriptions.length; i++) {
+        if (descriptions[i - 1] !== descriptions[i]) {
+          descriptions[j] = descriptions[i];
+          j++;
+        }
+      }
+      descriptions.length = j;
+    }
+    switch (descriptions.length) {
+      case 1:
+        return descriptions[0];
+      case 2:
+        return descriptions[0] + " or " + descriptions[1];
+      default:
+        return descriptions.slice(0, -1).join(", ") + ", or " + descriptions[descriptions.length - 1];
+    }
+  }
+  function describeFound(found2) {
+    return found2 ? '"' + literalEscape(found2) + '"' : "end of input";
+  }
+  return "Expected " + describeExpected(expected) + " but " + describeFound(found) + " found.";
+};
+
+// src/lib/render-context/index.ts
+var useRenderContext = create$1((set, get) => ({
+  camera_transform: compose(scale(100, 100, 0, 0)),
+  setCameraTransform: (transform2) => set({ camera_transform: transform2 })
+}));
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require_svg_path_bounds());
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = applyToPoint(ct, center);
+  const absoluteSize = {
+    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>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimpleResistor.tsx
+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"
+    }
+  ]} />;
+};
+
+// src/schematic-components/SimpleCapacitor.tsx
+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" }
+  ]} />;
+};
+
+// src/lib/hooks/use-maybe-promise.ts
+var import_react2 = require("react");
+
+// src/schematic-components/ProjectComponent.tsx
+var import_builder = require("@tscircuit/builder");
+
+// src/lib/utils/direction-to-vec.ts
+var directionToVec = (direction) => {
+  if (direction === "up")
+    return { x: 0, y: -1 };
+  else if (direction === "down")
+    return { x: 0, y: 1 };
+  else if (direction === "left")
+    return { x: -1, y: 0 };
+  else if (direction === "right")
+    return { x: 1, y: 0 };
+  else
+    throw new Error("Invalid direction");
+};
+
+// src/schematic-components/SchematicPort.tsx
+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)} />;
+};
+var SchematicPort_default = SchematicPort;
+
+// node_modules/react-use-measure/dist/web.js
+var import_react3 = require("react");
+var import_debounce = __toESM(require_debounce());
+function useMeasure(_temp) {
+  let {
+    debounce,
+    scroll,
+    polyfill,
+    offsetSize
+  } = _temp === void 0 ? {
+    debounce: 0,
+    scroll: false,
+    offsetSize: false
+  } : _temp;
+  const ResizeObserver = polyfill || (typeof window === "undefined" ? class ResizeObserver {
+  } : window.ResizeObserver);
+  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] = (0, import_react3.useState)({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0
+  });
+  const state = (0, import_react3.useRef)({
+    element: null,
+    scrollContainers: null,
+    resizeObserver: null,
+    lastBounds: bounds
+  });
+  const scrollDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.scroll : null;
+  const resizeDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.resize : null;
+  const mounted = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    mounted.current = true;
+    return () => void (mounted.current = false);
+  });
+  const [forceRefresh, resizeChange, scrollChange] = (0, import_react3.useMemo)(() => {
+    const callback = () => {
+      if (!state.current.element)
+        return;
+      const {
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x,
+        y
+      } = state.current.element.getBoundingClientRect();
+      const size = {
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x,
+        y
+      };
+      if (state.current.element instanceof HTMLElement && offsetSize) {
+        size.height = state.current.element.offsetHeight;
+        size.width = state.current.element.offsetWidth;
+      }
+      Object.freeze(size);
+      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size))
+        set(state.current.lastBounds = size);
+    };
+    return [callback, resizeDebounce ? (0, import_debounce.default)(callback, resizeDebounce) : callback, scrollDebounce ? (0, import_debounce.default)(callback, scrollDebounce) : callback];
+  }, [set, offsetSize, scrollDebounce, resizeDebounce]);
+  function removeListeners() {
+    if (state.current.scrollContainers) {
+      state.current.scrollContainers.forEach((element) => element.removeEventListener("scroll", scrollChange, true));
+      state.current.scrollContainers = null;
+    }
+    if (state.current.resizeObserver) {
+      state.current.resizeObserver.disconnect();
+      state.current.resizeObserver = null;
+    }
+  }
+  function addListeners() {
+    if (!state.current.element)
+      return;
+    state.current.resizeObserver = new ResizeObserver(scrollChange);
+    state.current.resizeObserver.observe(state.current.element);
+    if (scroll && state.current.scrollContainers) {
+      state.current.scrollContainers.forEach((scrollContainer) => scrollContainer.addEventListener("scroll", scrollChange, {
+        capture: true,
+        passive: true
+      }));
+    }
+  }
+  const ref = (node) => {
+    if (!node || node === state.current.element)
+      return;
+    removeListeners();
+    state.current.element = node;
+    state.current.scrollContainers = findScrollContainers(node);
+    addListeners();
+  };
+  useOnWindowScroll(scrollChange, Boolean(scroll));
+  useOnWindowResize(resizeChange);
+  (0, import_react3.useEffect)(() => {
+    removeListeners();
+    addListeners();
+  }, [scroll, scrollChange, resizeChange]);
+  (0, import_react3.useEffect)(() => removeListeners, []);
+  return [ref, bounds, forceRefresh];
+}
+function useOnWindowResize(onWindowResize) {
+  (0, import_react3.useEffect)(() => {
+    const cb = onWindowResize;
+    window.addEventListener("resize", cb);
+    return () => void window.removeEventListener("resize", cb);
+  }, [onWindowResize]);
+}
+function useOnWindowScroll(onScroll, enabled) {
+  (0, import_react3.useEffect)(() => {
+    if (enabled) {
+      const cb = onScroll;
+      window.addEventListener("scroll", cb, {
+        capture: true,
+        passive: true
+      });
+      return () => void window.removeEventListener("scroll", cb, true);
+    }
+  }, [onScroll, enabled]);
+}
+function findScrollContainers(element) {
+  const result = [];
+  if (!element || element === document.body)
+    return result;
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = window.getComputedStyle(element);
+  if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
+    result.push(element);
+  return [...result, ...findScrollContainers(element.parentElement)];
+}
+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 SchematicText = ({ schematic_text }) => {
+  const ct = useCameraTransform();
+  const { text, position, anchor } = schematic_text;
+  const tPos = applyToPoint(ct, position);
+  const [boundsRef, bounds] = useMeasure();
+  let offset = [0, 0];
+  if (anchor === "center") {
+    offset = [-bounds.width / 2, -bounds.height / 2];
+  } else if (anchor === "left") {
+    offset = [0, -bounds.height / 2];
+  } 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>;
+};
+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 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>;
+};
+
+// src/schematic-components/SchematicTrace.tsx
+var SchematicTrace = ({ trace: { source, schematic } }) => {
+  const edges = schematic.edges;
+  if (edges.length === 0) {
+    return <RenderError_default text="Route with 0 edges" />;
+  }
+  const path = (0, import_svg_path_generator.default)();
+  for (let i = 0; i < edges.length; i++) {
+    path.moveTo(edges[i].from.x, edges[i].from.y);
+    path.lineTo(edges[i].to.x, edges[i].to.y);
+  }
+  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 <SVGPathComponent_default rotation={0} center={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 SchematicBug = ({ component: { source, schematic } }) => {
+  const ports_arrangement = schematic.port_arrangement;
+  const port_labels = schematic.port_labels;
+  const bugw = 30;
+  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 {
+        stroke: "red",
+        strokeWidth: 1,
+        d: `M ${p1.join(" ")} l ${rd.join(" ")}`
+      };
+    })
+  ]} />;
+};
+
+// src/schematic-components/SimplePowerSource.tsx
+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"
+    }
+  ]} />;
+};
+
+// src/schematic-components/SimpleGround.tsx
+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"
+    }
+  ]} />;
+};
+
+// src/schematic-components/SimpleInductor.tsx
+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"
+    }
+  ]} />;
+};
+
+// src/schematic-components/SimpleDiode.tsx
+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" }
+  ]} />;
+};
+
+// src/schematic-components/SchematicComponent.tsx
+var SchematicComponent = ({ component }) => {
+  const { source, schematic } = component;
+  switch (source.ftype) {
+    case "simple_resistor": {
+      return <SimpleResistor component={{ source, schematic }} />;
+    }
+    case "simple_capacitor": {
+      return <SimpleCapacitor component={{ source, schematic }} />;
+    }
+    case "simple_power_source": {
+      return <SimplePowerSource component={{ source, schematic }} />;
+    }
+    case "simple_ground": {
+      return <SimpleGround component={{ source, schematic }} />;
+    }
+    case "simple_inductor": {
+      return <SimpleInductor component={{ source, schematic }} />;
+    }
+    case "simple_bug": {
+      return <SchematicBug component={{ source, schematic }} />;
+    }
+    case "simple_diode": {
+      return <SimpleDiode component={{ source, schematic }} />;
+    }
+    default: {
+      return <div>
+        {"unknown ftype: "}
+        {component.source.ftype}
+      </div>;
+    }
+  }
+};
+var SchematicComponent_default = SchematicComponent;
+
+// src/schematic-components/SchematicElement.tsx
+var SchematicElement = ({
+  element,
+  allElements
+}) => {
+  if (element.type === "schematic_component") {
+    return <SchematicComponent_default component={collectElementRefs(element, allElements)} />;
+  }
+  if (element.type === "schematic_trace") {
+    return <SchematicTrace_default trace={collectElementRefs(element, allElements)} />;
+  }
+  if (element.type === "schematic_port") {
+    return <SchematicPort_default port={collectElementRefs(element, allElements)} />;
+  }
+  if (element.type === "schematic_text") {
+    return <SchematicText_default schematic_text={element} />;
+  }
+  return null;
+};
+
+// src/Schematic.tsx
+var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
+var import_react_error_boundary = require("react-error-boundary");
+var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
+  return <div style={{ color: "red" }}>
+    {"error rendering "}
+    {elm.type}
+    {": "}
+    {error.toString()}
+  </div>;
+};
+var Schematic = ({
+  children,
+  elements: initialElements = [],
+  style
+}) => {
+  const [elements, setElements] = (0, import_react4.useState)(initialElements);
+  const [project, setProject] = (0, import_react4.useState)(null);
+  const setCameraTransform = useRenderContext((s) => s.setCameraTransform);
+  const { ref } = (0, import_use_mouse_matrix_transform.useMouseMatrixTransform)({
+    onSetTransform: (transform2) => setCameraTransform(transform2),
+    initialTransform: compose(scale(100, 100, 0, 0))
+  });
+  (0, import_react4.useEffect)(() => {
+    if (initialElements.length > 0) {
+      setProject((0, import_builder2.createProjectFromElements)(initialElements));
+      return;
+    }
+    const projectBuilder = (0, import_builder2.createProjectBuilder)();
+    (0, import_react_fiber.createRoot)().render(children, projectBuilder).then(async (elements2) => {
+      setElements(elements2);
+      setProject((0, import_builder2.createProjectFromElements)(elements2));
+    }).catch((e) => {
+      console.error("ERROR RENDERING CIRCUIT");
+      throw e;
+    });
+  }, [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>;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Schematic
+});
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+//# sourceMappingURL=index.js.map