@tscircuit/schematic-viewer 1.3.0 → 1.4.0

package/dist/index.js

@@ -89,8 +89,8 @@ var require_use_sync_external_store_shim_development = __commonJS({
         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;
+        var React2 = require("react");
+        var ReactSharedInternals = React2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         function error(format) {
           {
             {
@@ -120,13 +120,13 @@ var require_use_sync_external_store_shim_development = __commonJS({
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is;
-        var useState5 = React.useState, useEffect4 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
+        var useState4 = React2.useState, useEffect3 = React2.useEffect, useLayoutEffect = React2.useLayoutEffect, useDebugValue2 = React2.useDebugValue;
         var didWarnOld18Alpha = false;
         var didWarnUncachedGetSnapshot = false;
         function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
           {
             if (!didWarnOld18Alpha) {
-              if (React.startTransition !== void 0) {
+              if (React2.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.");
               }
@@ -142,7 +142,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
               }
             }
           }
-          var _useState = useState5({
+          var _useState = useState4({
             inst: {
               value,
               getSnapshot
@@ -157,7 +157,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
               });
             }
           }, [subscribe, value, getSnapshot]);
-          useEffect4(function() {
+          useEffect3(function() {
             if (checkIfSnapshotChanged(inst)) {
               forceUpdate({
                 inst
@@ -191,7 +191,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         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;
+        var useSyncExternalStore$2 = React2.useSyncExternalStore !== void 0 ? React2.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());
@@ -285,16 +285,16 @@ var require_with_selector_development = __commonJS({
         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 React2 = 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, useMemo3 = React.useMemo, useDebugValue2 = React.useDebugValue;
+        var useRef3 = React2.useRef, useEffect3 = React2.useEffect, useMemo3 = React2.useMemo, useDebugValue2 = React2.useDebugValue;
         function useSyncExternalStoreWithSelector2(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-          var instRef = useRef2(null);
+          var instRef = useRef3(null);
           var inst;
           if (instRef.current === null) {
             inst = {
@@ -349,7 +349,7 @@ var require_with_selector_development = __commonJS({
             return [getSnapshotWithSelector, getServerSnapshotWithSelector];
           }, [getSnapshot, getServerSnapshot, selector, isEqual]), getSelection = _useMemo[0], getServerSelection = _useMemo[1];
           var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-          useEffect4(function() {
+          useEffect3(function() {
             inst.hasValue = true;
             inst.value = value;
           }, [value]);
@@ -939,8 +939,8 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Schematic.tsx
-var import_builder3 = require("@tscircuit/builder");
-var import_react_fiber = __toESM(require("@tscircuit/react-fiber"));
+var import_core = require("@tscircuit/core");
+var import_soup_util = require("@tscircuit/soup-util");
 
 // node_modules/zustand/esm/vanilla.mjs
 var import_meta = {};
@@ -1012,6 +1012,20 @@ function applyToPoint(matrix, point) {
   };
 }
 
+// node_modules/transformation-matrix/src/inverse.js
+function inverse(matrix) {
+  const { a, b, c, d, e, f } = matrix;
+  const denom = a * d - b * c;
+  return {
+    a: d / denom,
+    b: b / -denom,
+    c: c / -denom,
+    d: a / denom,
+    e: (d * e - c * f) / -denom,
+    f: (b * e - a * f) / denom
+  };
+}
+
 // node_modules/transformation-matrix/src/utils.js
 function isUndefined(val) {
   return typeof val === "undefined";
@@ -1222,7 +1236,275 @@ peg$SyntaxError.buildMessage = function(expected, found) {
 };
 
 // src/lib/render-context/index.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
+
+// src/schematic-components/ContextProviders.tsx
+var import_react2 = require("react");
+var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StoreContext = (0, import_react3.createContext)(null);
+var ContextProviders = ({ children }) => {
+  const store = (0, import_react2.useMemo)(() => createRenderContextStore(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreContext.Provider, { value: store, children });
+};
+
+// src/schematic-components/RenderError.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RenderError_default = ({ text }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        backgroundColor: "red",
+        color: "white",
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        padding: 5,
+        right: 0,
+        top: 0,
+        opacity: 0.75
+      },
+      children: text
+    }
+  );
+};
+
+// src/lib/utils/colors.ts
+var colorMap = {
+  "3d_viewer": {
+    background_bottom: "rgb(102, 102, 128)",
+    background_top: "rgb(204, 204, 230)",
+    board: "rgb(51, 43, 23)",
+    copper: "rgb(179, 156, 0)",
+    silkscreen_bottom: "rgb(230, 230, 230)",
+    silkscreen_top: "rgb(230, 230, 230)",
+    soldermask: "rgb(20, 51, 36)",
+    solderpaste: "rgb(128, 128, 128)"
+  },
+  board: {
+    anchor: "rgb(255, 38, 226)",
+    aux_items: "rgb(255, 255, 255)",
+    b_adhes: "rgb(0, 0, 132)",
+    b_crtyd: "rgb(255, 38, 226)",
+    b_fab: "rgb(88, 93, 132)",
+    b_mask: "rgba(2, 255, 238, 0.400)",
+    b_paste: "rgb(0, 194, 194)",
+    b_silks: "rgb(232, 178, 167)",
+    background: "rgb(0, 16, 35)",
+    cmts_user: "rgb(89, 148, 220)",
+    copper: {
+      b: "rgb(77, 127, 196)",
+      f: "rgb(200, 52, 52)",
+      in1: "rgb(127, 200, 127)",
+      in10: "rgb(237, 124, 51)",
+      in11: "rgb(91, 195, 235)",
+      in12: "rgb(247, 111, 142)",
+      in13: "rgb(167, 165, 198)",
+      in14: "rgb(40, 204, 217)",
+      in15: "rgb(232, 178, 167)",
+      in16: "rgb(242, 237, 161)",
+      in17: "rgb(237, 124, 51)",
+      in18: "rgb(91, 195, 235)",
+      in19: "rgb(247, 111, 142)",
+      in2: "rgb(206, 125, 44)",
+      in20: "rgb(167, 165, 198)",
+      in21: "rgb(40, 204, 217)",
+      in22: "rgb(232, 178, 167)",
+      in23: "rgb(242, 237, 161)",
+      in24: "rgb(237, 124, 51)",
+      in25: "rgb(91, 195, 235)",
+      in26: "rgb(247, 111, 142)",
+      in27: "rgb(167, 165, 198)",
+      in28: "rgb(40, 204, 217)",
+      in29: "rgb(232, 178, 167)",
+      in3: "rgb(79, 203, 203)",
+      in30: "rgb(242, 237, 161)",
+      in4: "rgb(219, 98, 139)",
+      in5: "rgb(167, 165, 198)",
+      in6: "rgb(40, 204, 217)",
+      in7: "rgb(232, 178, 167)",
+      in8: "rgb(242, 237, 161)",
+      in9: "rgb(141, 203, 129)"
+    },
+    cursor: "rgb(255, 255, 255)",
+    drc: "rgb(194, 194, 194)",
+    drc_error: "rgba(215, 91, 107, 0.800)",
+    drc_exclusion: "rgb(255, 255, 255)",
+    drc_warning: "rgba(255, 208, 66, 0.902)",
+    dwgs_user: "rgb(194, 194, 194)",
+    eco1_user: "rgb(180, 219, 210)",
+    eco2_user: "rgb(216, 200, 82)",
+    edge_cuts: "rgb(208, 210, 205)",
+    f_adhes: "rgb(132, 0, 132)",
+    f_crtyd: "rgb(255, 0, 245)",
+    f_fab: "rgb(175, 175, 175)",
+    f_mask: "rgba(216, 100, 255, 0.400)",
+    f_paste: "rgba(180, 160, 154, 0.902)",
+    f_silks: "rgb(242, 237, 161)",
+    footprint_text_back: "rgb(0, 0, 132)",
+    footprint_text_front: "rgb(194, 194, 194)",
+    footprint_text_invisible: "rgb(132, 132, 132)",
+    grid: "rgb(132, 132, 132)",
+    grid_axes: "rgb(194, 194, 194)",
+    margin: "rgb(255, 38, 226)",
+    microvia: "rgb(0, 132, 132)",
+    no_connect: "rgb(0, 0, 132)",
+    pad_back: "rgb(77, 127, 196)",
+    pad_front: "rgb(200, 52, 52)",
+    pad_plated_hole: "rgb(194, 194, 0)",
+    pad_through_hole: "rgb(227, 183, 46)",
+    plated_hole: "rgb(26, 196, 210)",
+    ratsnest: "rgba(245, 255, 213, 0.702)",
+    select_overlay: "rgb(4, 255, 67)",
+    through_via: "rgb(236, 236, 236)",
+    user_1: "rgb(194, 194, 194)",
+    user_2: "rgb(89, 148, 220)",
+    user_3: "rgb(180, 219, 210)",
+    user_4: "rgb(216, 200, 82)",
+    user_5: "rgb(194, 194, 194)",
+    user_6: "rgb(89, 148, 220)",
+    user_7: "rgb(180, 219, 210)",
+    user_8: "rgb(216, 200, 82)",
+    user_9: "rgb(232, 178, 167)",
+    via_blind_buried: "rgb(187, 151, 38)",
+    via_hole: "rgb(227, 183, 46)",
+    via_micro: "rgb(0, 132, 132)",
+    via_through: "rgb(236, 236, 236)",
+    worksheet: "rgb(200, 114, 171)"
+  },
+  gerbview: {
+    axes: "rgb(0, 0, 132)",
+    background: "rgb(0, 0, 0)",
+    dcodes: "rgb(255, 255, 255)",
+    grid: "rgb(132, 132, 132)",
+    layers: [
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+      "rgb(132, 132, 0)",
+      "rgb(194, 194, 194)",
+      "rgb(0, 0, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+      "rgb(132, 132, 0)",
+      "rgb(194, 194, 194)",
+      "rgb(0, 0, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+      "rgb(132, 132, 0)",
+      "rgb(194, 194, 194)",
+      "rgb(0, 0, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)"
+    ],
+    negative_objects: "rgb(132, 132, 132)",
+    worksheet: "rgb(0, 0, 132)"
+  },
+  meta: {
+    filename: "kicad_2020",
+    name: "KiCad 2020",
+    version: 2
+  },
+  palette: [
+    "rgb(132, 0, 0)",
+    "rgb(194, 194, 0)",
+    "rgb(194, 0, 194)",
+    "rgb(194, 0, 0)",
+    "rgb(0, 132, 132)",
+    "rgb(0, 132, 0)",
+    "rgb(0, 0, 132)",
+    "rgb(132, 132, 132)",
+    "rgb(132, 0, 132)",
+    "rgb(194, 194, 194)",
+    "rgb(132, 0, 132)",
+    "rgb(132, 0, 0)",
+    "rgb(132, 132, 0)",
+    "rgb(194, 194, 194)",
+    "rgb(0, 0, 132)",
+    "rgb(0, 132, 0)"
+  ],
+  schematic: {
+    aux_items: "rgb(46, 46, 46)",
+    background: "rgb(245, 241, 237)",
+    brightened: "rgb(255, 0, 255)",
+    bus: "rgb(0, 0, 132)",
+    bus_junction: "rgb(0, 0, 132)",
+    component_body: "rgb(255, 255, 194)",
+    component_outline: "rgb(132, 0, 0)",
+    cursor: "rgb(15, 15, 15)",
+    erc_error: "rgba(230, 9, 13, 0.800)",
+    erc_warning: "rgba(209, 146, 0, 0.800)",
+    fields: "rgb(132, 0, 132)",
+    grid: "rgb(181, 181, 181)",
+    grid_axes: "rgb(0, 0, 132)",
+    hidden: "rgb(194, 194, 194)",
+    junction: "rgb(0, 150, 0)",
+    label_global: "rgb(132, 0, 0)",
+    label_hier: "rgb(114, 86, 0)",
+    label_local: "rgb(15, 15, 15)",
+    net_name: "rgb(132, 132, 132)",
+    no_connect: "rgb(0, 0, 132)",
+    note: "rgb(0, 0, 194)",
+    override_item_colors: false,
+    pin: "rgb(132, 0, 0)",
+    pin_name: "rgb(0, 100, 100)",
+    pin_number: "rgb(169, 0, 0)",
+    reference: "rgb(0, 100, 100)",
+    shadow: "rgba(102, 179, 255, 0.800)",
+    sheet: "rgb(132, 0, 0)",
+    sheet_background: "rgba(253, 255, 231, 0.000)",
+    sheet_fields: "rgb(132, 0, 132)",
+    sheet_filename: "rgb(114, 86, 0)",
+    sheet_label: "rgb(0, 100, 100)",
+    sheet_name: "rgb(0, 100, 100)",
+    value: "rgb(0, 100, 100)",
+    wire: "rgb(0, 150, 0)",
+    worksheet: "rgb(132, 0, 0)"
+  }
+};
 
 // src/lib/utils/get-svg-path-bounds.ts
 var import_svg_path_bounds = __toESM(require_svg_path_bounds());
@@ -1242,8 +1524,8 @@ function getSVGPathBounds(ds) {
 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 import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SVGPathComponent = ({
   size,
   center,
@@ -1255,14 +1537,8 @@ var SVGPathComponent = ({
   hoverContent
 }) => {
   const ct = useGlobalStore((s) => s.camera_transform);
-  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) {
-  }
-  const padding = {
-    x: 0,
-    y: 0
-  };
+  const pathBounds = get_svg_path_bounds_default(paths.filter((p) => p.type !== "circle").map((p) => p.d));
+  const padding = { x: 0, y: 0 };
   const absoluteCenter = applyToPoint(ct, center);
   const innerSize = {
     width: size.width * ct.a,
@@ -1272,81 +1548,50 @@ var SVGPathComponent = ({
     width: innerSize.width + padding.x * 2,
     height: innerSize.height + padding.y * 2
   };
-  const [hovering, setHovering] = (0, import_react2.useState)(false);
+  const [hovering, setHovering] = (0, import_react4.useState)(false);
   const svgLeft = absoluteCenter.x - fullSize.width / 2;
   const svgTop = absoluteCenter.y - fullSize.height / 2;
   const preferredRatio = pathBounds.width === 0 ? innerSize.height / pathBounds.height : innerSize.width / pathBounds.width;
   const svgToScreen = compose(
-    // translate(0, 0)
     scale(
       pathBounds.width === 0 ? preferredRatio : fullSize.width / pathBounds.width,
       pathBounds.height === 0 ? preferredRatio : fullSize.height / pathBounds.height
     ),
     translate(-pathBounds.minX, -pathBounds.minY)
-    // translate(center.x, center.y)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    hovering && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: svgLeft - 6,
-            top: svgTop - 6,
-            pointerEvents: "none",
-            width: fullSize.width + 12,
-            height: fullSize.height + 12,
-            border: "1px red solid",
-            mixBlendMode: "difference",
-            zIndex: 1e3
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: svgLeft + fullSize.width + 10,
-            pointerEvents: "none",
-            zIndex: 1e3,
-            color: "red",
-            mixBlendMode: "difference",
-            top: svgTop,
-            fontFamily: "monospace",
-            fontSize: 14
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      onMouseOver: () => setHovering(Boolean(hoverContent)),
+      onMouseOut: () => setHovering(false),
+      style: {
+        position: "absolute",
+        cursor: hovering ? "pointer" : void 0,
+        zIndex,
+        transform: [
+          invertY ? "scale(1, 1)" : "scale(1, -1)",
+          shiftToBottom ? "translate(0, 100%)" : "",
+          rotation === 0 ? "" : `rotate(${rotation}deg)`
+        ].join(" "),
+        left: svgLeft,
+        top: svgTop
+      },
+      overflow: "visible",
+      width: fullSize.width,
+      height: fullSize.height,
+      children: paths.map(
+        (p, i) => p.type === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "circle",
+          {
+            cx: p.cx,
+            cy: p.cy,
+            r: p.r,
+            fill: p.fill ?? "none",
+            strokeWidth: 1.5 * (p.strokeWidth || 1),
+            stroke: p.stroke || "red"
           },
-          children: hoverContent
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "svg",
-      {
-        onMouseOver: () => setHovering(Boolean(hoverContent)),
-        onMouseOut: () => setHovering(false),
-        style: {
-          position: "absolute",
-          // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
-          cursor: hovering ? "pointer" : void 0,
-          zIndex,
-          transform: [
-            invertY ? "scale(1, 1)" : "scale(1, -1)",
-            // TODO based on ct.d
-            shiftToBottom ? "translate(0, 100%)" : "",
-            rotation === 0 ? "" : `rotate(${rotation}rad)`
-          ].join(" "),
-          left: svgLeft,
-          top: svgTop
-          // overflow: "hidden",
-          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
-          // backgroundColor: "rgba(255, 0, 0, 0.1)",
-        },
-        overflow: "visible",
-        width: fullSize.width,
-        height: fullSize.height,
-        children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          i
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
             transform: toSVG(svgToScreen),
@@ -1354,157 +1599,18 @@ var SVGPathComponent = ({
             strokeLinecap: "round",
             strokeWidth: 1.5 * (p.strokeWidth || 1),
             stroke: p.stroke || "red",
-            d: p.d
+            d: p.d || ""
           },
           i
-        ))
-      }
-    )
-  ] });
-};
-var SVGPathComponent_default = SVGPathComponent;
-
-// src/schematic-components/SimpleResistor.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SimpleResistor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    SVGPathComponent_default,
-    {
-      rotation: schematic.rotation,
-      center: schematic.center,
-      size: schematic.size,
-      paths: [
-        {
-          stroke: "red",
-          strokeWidth: 1,
-          d: "M 0 15 l 10 0 l 0 -6 l 20 0 l 0 12 l -20 0 l 0 -6 m 20 0 l 10 0"
-        }
-      ]
-    }
-  );
-};
-
-// src/schematic-components/SimpleCapacitor.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var SimpleCapacitor = ({
-  component: { source, schematic }
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    SVGPathComponent_default,
-    {
-      rotation: schematic.rotation,
-      center: schematic.center,
-      size: schematic.size,
-      paths: [
-        { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
-        { stroke: "red", strokeWidth: 1, d: "M 12 0 l 0 30" },
-        { stroke: "red", strokeWidth: 1, d: "M 18 0 l 0 30" },
-        { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" }
-      ]
-    }
-  );
-};
-
-// 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/schematic-components/SchematicComponent.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SchematicComponent = ({ component }) => {
-  const { source, schematic } = component;
-  if (!source.ftype)
-    return null;
-  switch (source.ftype) {
-    case "simple_resistor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleResistor, { component: { source, schematic } });
-    }
-    case "simple_capacitor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleCapacitor, { component: { source, schematic } });
-    }
-    case "simple_power_source": {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimplePowerSource, { component: { source, schematic } });
-    }
-    case "simple_ground": {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleGround, { component: { source, schematic } });
-    }
-    case "simple_inductor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleInductor, { component: { source, schematic } });
-    }
-    case "simple_bug": {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SchematicBug, { component: { source, schematic } });
-    }
-    case "simple_diode": {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleDiode, { component: { source, schematic } });
-    }
-    default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-        "unknown ftype: ",
-        component.source.ftype
-      ] });
-    }
-  }
-};
-var SchematicComponent_default = SchematicComponent;
-
-// 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 "${direction}"`);
-};
-
-// src/schematic-components/SchematicPort.tsx
-var import_jsx_runtime6 = 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}`;
-  const vec = directionToVec(schematic.facing_direction);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    SVGPathComponent,
-    {
-      rotation: 0,
-      hoverContent: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-        hoverName,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {}),
-        source_port?.pin_number && `Pin ${source_port.pin_number}`
-      ] }),
-      center: schematic.center,
-      size: {
-        width: 0.2 + Math.abs(vec.x) * 0.04,
-        height: 0.2 + Math.abs(vec.y) * 0.04
-      },
-      zIndex: 10,
-      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 ${vec.x * 7} ${vec.y * 7}`
-        } : null
-      ].filter(Boolean)
+        )
+      )
     }
   );
 };
-var SchematicPort_default = SchematicPort;
+var SVGPathComponent_default = SVGPathComponent;
 
 // node_modules/react-use-measure/dist/web.js
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_debounce = __toESM(require_debounce());
 function useMeasure(_temp) {
   let {
@@ -1522,7 +1628,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] = (0, import_react4.useState)({
+  const [bounds, set] = (0, import_react5.useState)({
     left: 0,
     top: 0,
     width: 0,
@@ -1532,7 +1638,7 @@ function useMeasure(_temp) {
     x: 0,
     y: 0
   });
-  const state = (0, import_react4.useRef)({
+  const state = (0, import_react5.useRef)({
     element: null,
     scrollContainers: null,
     resizeObserver: null,
@@ -1540,12 +1646,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 = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const mounted = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     mounted.current = true;
     return () => void (mounted.current = false);
   });
-  const [forceRefresh, resizeChange, scrollChange] = (0, import_react4.useMemo)(() => {
+  const [forceRefresh, resizeChange, scrollChange] = (0, import_react5.useMemo)(() => {
     const callback = () => {
       if (!state.current.element)
         return;
@@ -1611,22 +1717,22 @@ function useMeasure(_temp) {
   };
   useOnWindowScroll(scrollChange, Boolean(scroll));
   useOnWindowResize(resizeChange);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     removeListeners();
     addListeners();
   }, [scroll, scrollChange, resizeChange]);
-  (0, import_react4.useEffect)(() => removeListeners, []);
+  (0, import_react5.useEffect)(() => removeListeners, []);
   return [ref, bounds, forceRefresh];
 }
 function useOnWindowResize(onWindowResize) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const cb = onWindowResize;
     window.addEventListener("resize", cb);
     return () => void window.removeEventListener("resize", cb);
   }, [onWindowResize]);
 }
 function useOnWindowScroll(onScroll, enabled) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (enabled) {
       const cb = onScroll;
       window.addEventListener("scroll", cb, {
@@ -1654,7 +1760,7 @@ var keys = ["x", "y", "top", "bottom", "left", "right", "width", "height"];
 var areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
 
 // src/schematic-components/SchematicText.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SchematicText = ({ schematic_text }) => {
   const ct = useGlobalStore((s) => s.camera_transform);
   const { text, position, anchor } = schematic_text;
@@ -1670,7 +1776,7 @@ var SchematicText = ({ schematic_text }) => {
   }
   const fontTransformRatio = 0.15;
   const projectedTextSize = fontTransformRatio * ct.a;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref: boundsRef,
@@ -1687,85 +1793,222 @@ var SchematicText = ({ schematic_text }) => {
 };
 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_runtime8 = require("react/jsx-runtime");
-var RenderError_default = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        backgroundColor: "red",
-        color: "white",
-        fontSize: 14,
-        fontFamily: "sans-serif",
-        padding: 5,
-        right: 0,
-        top: 0,
-        opacity: 0.75
+// src/schematic-components/SchematicChip.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SchematicChip = ({ component: { source, schematic, allElements } }) => {
+  const { center, size, rotation, schematic_component_id } = schematic;
+  const { manufacturerPartNumber, name } = source;
+  const chipWidth = size.width;
+  const chipHeight = size.height;
+  const paths = [];
+  paths.push({
+    type: "path",
+    strokeWidth: 0.02,
+    stroke: colorMap.schematic.component_outline,
+    fill: colorMap.schematic.component_body,
+    d: `M ${-chipWidth / 2},${-chipHeight / 2} h ${chipWidth} v ${chipHeight} h ${-chipWidth} Z`
+  });
+  const schematicPorts = allElements.filter(
+    (item) => item.type === "schematic_port" && item.schematic_component_id === schematic_component_id
+  );
+  const portLength = 0.2;
+  const circleRadius = 0.05;
+  const labelOffset = 0.1;
+  const pinLabels = [];
+  schematicPorts.forEach((port) => {
+    const { side, pinNumber, distanceFromEdge } = port.center;
+    let x = 0, y = 0, endX = 0, endY = 0;
+    let labelX = 0, labelY = 0;
+    let textAnchor = "middle";
+    switch (side) {
+      case "left":
+        x = -chipWidth / 2;
+        y = -chipHeight / 2 + distanceFromEdge;
+        endX = x - portLength;
+        endY = y;
+        labelX = endX;
+        labelY = y + labelOffset;
+        textAnchor = "end";
+        break;
+      case "right":
+        x = chipWidth / 2;
+        y = chipHeight / 2 - distanceFromEdge;
+        endX = x + portLength;
+        endY = y;
+        labelX = endX - labelOffset;
+        labelY = y + labelOffset;
+        textAnchor = "start";
+        break;
+      case "bottom":
+        x = -chipWidth / 2 + distanceFromEdge;
+        y = -chipHeight / 2;
+        endX = x;
+        endY = y - portLength;
+        labelX = x;
+        labelY = endY + labelOffset;
+        break;
+      case "top":
+        x = chipWidth / 2 - distanceFromEdge;
+        y = chipHeight / 2;
+        endX = x;
+        endY = y + portLength;
+        labelX = x;
+        labelY = endY + labelOffset;
+        break;
+    }
+    paths.push({
+      type: "path",
+      strokeWidth: 0.02,
+      stroke: colorMap.schematic.component_outline,
+      d: `M ${x},${y} L ${endX},${endY}`
+    });
+    paths.push({
+      type: "circle",
+      cx: endX,
+      cy: endY,
+      r: circleRadius,
+      strokeWidth: 0.01,
+      stroke: colorMap.schematic.component_outline,
+      fill: colorMap.schematic.component_outline
+    });
+    if (pinNumber !== void 0) {
+      pinLabels.push({
+        x: labelX,
+        y: labelY,
+        text: `${pinNumber}`,
+        anchor: textAnchor
+      });
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SVGPathComponent_default,
+      {
+        rotation,
+        center,
+        size,
+        paths
+      }
+    ),
+    pinLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SchematicText_default,
+      {
+        schematic_text: {
+          anchor: label.anchor,
+          position: {
+            x: center.x + label.x,
+            y: center.y + label.y
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: `PIN_LABEL_${index}`,
+          text: label.text,
+          type: "schematic_text"
+        }
       },
-      children: text
+      index
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SchematicText_default,
+      {
+        schematic_text: {
+          anchor: "center",
+          position: {
+            x: center.x,
+            y: center.y - chipHeight / 2 - 0.2
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC_MPN",
+          text: manufacturerPartNumber,
+          type: "schematic_text"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SchematicText_default,
+      {
+        schematic_text: {
+          anchor: "center",
+          position: {
+            x: center.x,
+            y: center.y + chipHeight / 2 + 0.2
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC_NAME",
+          text: name,
+          type: "schematic_text"
+        }
+      }
+    )
+  ] });
+};
+
+// src/schematic-components/SchematicComponent.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SchematicComponent = ({ component }) => {
+  const { source, schematic, allElements } = component;
+  if (!source.ftype)
+    return null;
+  switch (source.ftype) {
+    case "simple_resistor":
+    case "simple_capacitor":
+    case "simple_power_source":
+    case "simple_ground":
+    case "simple_inductor":
+    case "simple_diode": {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SchematicComponentFromSymbol, { component: { source, schematic } });
     }
-  );
+    case "simple_chip":
+    case "simple_bug": {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SchematicChip, { component: { source, schematic, allElements } });
+    }
+    default: {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+        "unknown ftype: ",
+        component.source.ftype
+      ] });
+    }
+  }
 };
+var SchematicComponent_default = SchematicComponent;
 
-// src/schematic-components/SVGPathComponent2.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var SVGPathComponent2 = ({
-  size,
-  center,
-  rotation,
-  paths,
-  zIndex,
-  invertY,
-  shiftToBottom,
-  hoverContent
-}) => {
-  const ct = useGlobalStore((c) => c.camera_transform);
-  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "svg",
+// src/schematic-components/SchematicComponentFromSymbol.tsx
+var import_schematic_symbols = require("schematic-symbols");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SchematicComponentFromSymbol = ({ component: { source, schematic } }) => {
+  const { center, rotation } = schematic;
+  const symbol = import_schematic_symbols.symbols[schematic.symbol_name];
+  const paths = symbol.primitives.filter((p) => p.type === "path").map((p) => ({
+    stroke: colorMap.schematic.component_outline,
+    strokeWidth: 0.02,
+    d: p.points.reduce(
+      (acc, point, index) => {
+        const command = index === 0 ? "M" : "L";
+        return `${acc} ${command} ${point.x} ${point.y}`;
+      },
+      ""
+    )
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    SVGPathComponent_default,
     {
-      style: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
-        pointerEvents: "none",
-        zIndex
-        // overflow: "hidden",
-        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
-        // backgroundColor: "rgba(255, 0, 0, 0.1)",
+      rotation,
+      center,
+      size: {
+        width: symbol?.size.width,
+        height: symbol?.size.height
       },
-      overflow: "visible",
-      children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "path",
-        {
-          transform: toSVG(ct),
-          fill: p.fill ?? "none",
-          strokeLinecap: "round",
-          strokeWidth: 1.5 * (p.strokeWidth || 1),
-          stroke: p.stroke || "red",
-          d: p.d
-        },
-        i
-      ))
+      paths
     }
   );
 };
-var SVGPathComponent2_default = SVGPathComponent2;
 
 // src/schematic-components/SchematicTrace.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_svg_path_generator = __toESM(require_svg_path_generator2());
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var SchematicTrace = ({ trace: { source, schematic } }) => {
   const edges = schematic.edges;
   if (edges.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.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++) {
@@ -1780,16 +2023,16 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    SVGPathComponent2_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    SVGPathComponent_default,
     {
       rotation: 0,
       center,
       size: pathBounds,
       paths: [
         {
-          stroke: "green",
-          strokeWidth: 0.02,
+          stroke: colorMap.schematic.wire,
+          strokeWidth: 0.01,
           d
         }
       ]
@@ -1798,212 +2041,18 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
 };
 var SchematicTrace_default = SchematicTrace;
 
-// src/schematic-components/SchematicBug.tsx
-var import_builder2 = require("@tscircuit/builder");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var SchematicBug = ({ component: { source, schematic } }) => {
-  const location = schematic.center;
-  const port_arrangement = {
-    top_size: 0,
-    bottom_size: 0,
-    ...schematic.port_arrangement
-  };
-  const manufacturerPartNumber = source.manufacturerPartNumber;
-  let bugw = schematic.size.width;
-  let bugh = schematic.size.height;
-  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))
-    bugh = height;
-  const paths = [
-    {
-      stroke: "red",
-      strokeWidth: 0.02,
-      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 = (0, import_builder2.getPortPosition)(
-        { ...port_arrangement, pin_spacing: schematic.pin_spacing },
-        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 {
-        stroke: "red",
-        strokeWidth: 0.02,
-        d: `M ${pos.x} ${pos.y} L ${x2} ${y2}`
-      };
-    })
-  ];
-  const actualSize = get_svg_path_bounds_default(paths.map((p) => p.d).join(" "));
-  const actualCenter = {
-    x: schematic.center.x + (actualSize.minX + actualSize.maxX) / 2,
-    y: schematic.center.y + (actualSize.minY + actualSize.maxY) / 2
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      SVGPathComponent_default,
-      {
-        rotation: schematic.rotation,
-        center: actualCenter,
-        size: actualSize,
-        paths
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      SchematicText_default,
-      {
-        schematic_text: {
-          anchor: "bottom",
-          position: {
-            x: location.x + actualSize.minX / 1.5,
-            y: location.y + actualSize.minY
-          },
-          schematic_component_id: "SYNTHETIC",
-          schematic_text_id: "SYNTHETIC",
-          text: manufacturerPartNumber,
-          type: "schematic_text"
-        }
-      }
-    )
-  ] });
-};
-
-// src/schematic-components/SimplePowerSource.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var SimplePowerSource = ({
-  component: { source, schematic }
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    SVGPathComponent_default,
-    {
-      rotation: schematic.rotation,
-      center: schematic.center,
-      size: schematic.size,
-      invertY: true,
-      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"
-        },
-        // positive symbol
-        {
-          stroke: "red",
-          strokeWidth: 0.5,
-          d: "M 8 -9 L 8 -6 M 9.5 -7.5 L 6.5 -7.5"
-        },
-        // negative symbol
-        {
-          stroke: "red",
-          strokeWidth: 0.5,
-          d: "M 9.5 7.5 L 6.5 7.5"
-        }
-      ]
-    }
-  );
-};
-
-// src/schematic-components/SimpleGround.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var SimpleGround = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    SVGPathComponent_default,
-    {
-      rotation: schematic.rotation,
-      center: schematic.center,
-      size: schematic.size,
-      invertY: true,
-      shiftToBottom: true,
-      paths: [
-        {
-          stroke: "red",
-          strokeWidth: 0.7,
-          d: "M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12"
-        }
-      ]
-    }
-  );
-};
-
-// src/schematic-components/SimpleInductor.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var SimpleInductor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    SVGPathComponent_default,
-    {
-      rotation: schematic.rotation,
-      center: schematic.center,
-      size: schematic.size,
-      paths: [
-        {
-          stroke: "red",
-          strokeWidth: 1,
-          // https://commons.wikimedia.org/wiki/File:Electrical_symbols_library.svg
-          d: "m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273"
-        }
-      ]
-    }
-  );
-};
-
-// src/schematic-components/SimpleDiode.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var SimpleDiode = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    SVGPathComponent_default,
-    {
-      rotation: schematic.rotation,
-      center: schematic.center,
-      size: {
-        height: 0.5,
-        width: 1
-      },
-      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" }
-        // For LEDs
-        // {
-        //   stroke: "red",
-        //   strokeWidth: 2,
-        //   d: "M 35 -32 l 7 5.25 l 1.75 -9.625 z m 3.5 2.625 l -5.25 7",
-        // },
-        // {
-        //   stroke: "red",
-        //   strokeWidth: 2,
-        //   d: "M 52 -26 l 7 5.25 l 1.75 -9.625 z m 3.5 2.625 l -5.25 7",
-        // },
-      ]
-    }
-  );
-};
-
-// src/schematic-components/ContextProviders.tsx
-var import_react5 = require("react");
-var import_react6 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var StoreContext = (0, import_react6.createContext)(null);
-var ContextProviders = ({ children }) => {
-  const store = (0, import_react5.useMemo)(() => createRenderContextStore(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StoreContext.Provider, { value: store, children });
-};
-
 // src/lib/render-context/index.ts
 var createRenderContextStore = () => createStore((set) => ({
   camera_transform: compose(scale(100, 100, 0, 0)),
   setCameraTransform: (transform2) => set({ camera_transform: transform2 })
 }));
 var useGlobalStore = (s) => {
-  const store = (0, import_react7.useContext)(StoreContext);
+  const store = (0, import_react6.useContext)(StoreContext);
   return useStore(store, s);
 };
 
 // src/Schematic.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_react_error_boundary = require("react-error-boundary");
 var import_react_supergrid = require("react-supergrid");
 
@@ -2032,68 +2081,13 @@ var collectElementRefs = (elm, allElms) => {
       schematic: elm,
       source: source_component,
       source_component,
-      source_port
+      source_port,
+      allElements: allElms
     };
   }
   return null;
 };
 
-// src/schematic-components/SchematicBox.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var SchematicBox = ({ box: { schematic } }) => {
-  const { width: w, height: h } = schematic;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    SVGPathComponent,
-    {
-      rotation: 0,
-      center: schematic,
-      size: { width: schematic.width, height: schematic.height },
-      paths: [
-        {
-          stroke: "red",
-          strokeWidth: 0.02,
-          d: `M 0 0 l ${w} 0 l 0 ${h} l -${w} 0 z`
-        }
-      ]
-    }
-  );
-};
-var SchematicBox_default = SchematicBox;
-
-// src/schematic-components/SchematicLine.tsx
-var import_svg_path_generator2 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime18 = 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);
-  const d = path.toString();
-  const pathBounds = get_svg_path_bounds_default(d);
-  const center = {
-    x: pathBounds.minX + pathBounds.width / 2,
-    y: pathBounds.minY + pathBounds.height / 2
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    SVGPathComponent,
-    {
-      rotation: 0,
-      center,
-      size: pathBounds,
-      paths: [
-        {
-          stroke: "red",
-          strokeWidth: 0.02,
-          d
-        }
-      ]
-    }
-  );
-};
-var SchematicLine_default = SchematicLine;
-
 // src/lib/utils/get-rotation-from-anchor-side.ts
 var getRotationFromAnchorSide = (anchor_side) => {
   if (anchor_side === "left")
@@ -2121,7 +2115,7 @@ var getVecFromAnchorSide = (anchor_side) => {
 };
 
 // src/schematic-components/SchematicNetLabel.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SchematicNetLabel = ({
   net_label
 }) => {
@@ -2133,8 +2127,8 @@ var SchematicNetLabel = ({
   const anchor_dist = is_vertical ? 0.04 : text_width / 4;
   anchor_vec.x *= anchor_dist;
   anchor_vec.y *= anchor_dist;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SVGPathComponent_default,
       {
         rotation: getRotationFromAnchorSide(anchor_side),
@@ -2153,7 +2147,7 @@ var SchematicNetLabel = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SchematicText_default,
       {
         schematic_text: {
@@ -2172,56 +2166,14 @@ var SchematicNetLabel = ({
   ] });
 };
 
-// src/schematic-components/SchematicPath.tsx
-var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SchematicPath = (props) => {
-  const { points, is_filled, is_closed, fill_color } = props.path.schematic;
-  if (points.length === 0)
-    return null;
-  const path = (0, import_svg_path_generator3.default)();
-  path.moveTo(points[0].x, points[0].y);
-  for (const point of points.slice(1)) {
-    path.lineTo(point.x, point.y);
-  }
-  if (is_closed) {
-    path.closePath();
-  }
-  const d = path.toString();
-  const pathBounds = get_svg_path_bounds_default(d);
-  pathBounds.height = Math.max(pathBounds.height, 1);
-  pathBounds.width = Math.max(pathBounds.width, 1);
-  const center = {
-    x: pathBounds.minX + pathBounds.width / 2,
-    y: pathBounds.minY + pathBounds.height / 2
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    SVGPathComponent,
-    {
-      rotation: 0,
-      center,
-      size: pathBounds,
-      paths: [
-        {
-          stroke: is_filled ? "none" : fill_color ?? "red",
-          strokeWidth: 0.02,
-          fill: is_filled ? fill_color ?? "red" : void 0,
-          d
-        }
-      ]
-    }
-  );
-};
-var SchematicPath_default = SchematicPath;
-
 // src/schematic-components/SchematicElement.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SchematicElement = ({
   element,
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       SchematicComponent_default,
       {
         component: collectElementRefs(element, allElements)
@@ -2229,47 +2181,32 @@ var SchematicElement = ({
     );
   }
   if (element.type === "schematic_trace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
-  }
-  if (element.type === "schematic_port") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
-  }
-  if (element.type === "schematic_box") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
-  }
-  if (element.type === "schematic_line") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
-  }
-  if (element.type === "schematic_path") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicText_default, { schematic_text: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SchematicText_default, { schematic_text: element });
   }
   if (element.type === "schematic_net_label") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicNetLabel, { net_label: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SchematicNetLabel, { net_label: element });
   }
   return null;
 };
 
-// src/Schematic.tsx
-var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
-
 // src/schematic-components/TableViewer.tsx
-var import_react8 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var LazyTableViewer = (0, import_react8.lazy)(
+var import_react7 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var LazyTableViewer = (0, import_react7.lazy)(
   () => import("@tscircuit/table-viewer").then((m) => ({
     default: m.SoupTableViewer
   }))
 );
-var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react8.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LazyTableViewer, { ...params }) });
+var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react7.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LazyTableViewer, { ...params }) });
 
 // src/Schematic.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ErrorBoundary = import_react_error_boundary.ErrorBoundary;
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { color: "red" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { color: "red" }, children: [
     "error rendering ",
     elm.type,
     ": ",
@@ -2278,70 +2215,136 @@ var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
 };
 var toMMSINeg = (v, z) => v >= 0 ? (0, import_react_supergrid.toMMSI)(v, z) : `-${(0, import_react_supergrid.toMMSI)(-v, z)}`;
 var Schematic = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ContextProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SchematicWithoutContext, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContextProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SchematicWithoutContext, { ...props }) });
 };
 var SchematicWithoutContext = ({
   children,
-  elements: initialElements,
-  soup: initialSoup,
+  soup,
   style,
   showTable = false,
   _soupPostProcessor
 }) => {
-  initialSoup = initialSoup ?? initialElements ?? [];
-  const [elements, setElements] = (0, import_react9.useState)(initialSoup ?? []);
-  const [project, setProject] = (0, import_react9.useState)(null);
-  const { setCameraTransform, camera_transform: cameraTransform } = useGlobalStore();
+  const {
+    circuitJson: circuitJsonFromChildren,
+    error: errorFromChildren,
+    isLoading
+  } = (0, import_core.useRenderedCircuit)(children);
+  const [elements, setElements] = (0, import_react8.useState)([]);
+  const { setCameraTransform } = useGlobalStore();
   const [boundsRef, bounds] = useMeasure();
-  const { ref, setTransform } = (0, import_use_mouse_matrix_transform.useMouseMatrixTransform)({
-    onSetTransform: (transform2) => {
-      setCameraTransform(transform2);
+  const containerRef = (0, import_react8.useRef)(null);
+  const transformRef = (0, import_react8.useRef)(compose(translate(0, 0), scale(1, 1)));
+  const isDraggingRef = (0, import_react8.useRef)(false);
+  const lastMousePosRef = (0, import_react8.useRef)({ x: 0, y: 0 });
+  const [, forceUpdate] = (0, import_react8.useState)({});
+  const updateTransform = (0, import_react8.useCallback)(
+    (newTransform) => {
+      transformRef.current = newTransform;
+      setCameraTransform(newTransform);
+      forceUpdate({});
+    },
+    [setCameraTransform]
+  );
+  (0, import_react8.useEffect)(() => {
+    let processedElements = [];
+    if (circuitJsonFromChildren && (!soup || soup.length === 0)) {
+      processedElements = circuitJsonFromChildren;
+    } else if (soup && soup.length > 0) {
+      processedElements = soup;
     }
-    // initialTransform: compose(scale(100, 100, 0, 0)),
-  });
-  const setElementsAndCamera = (0, import_react9.useCallback)(
-    (elements2) => {
-      const elmBounds = ref.current.getBoundingClientRect();
-      const { center, width, height } = elements2.some(
+    if (processedElements.length > 0) {
+      if (_soupPostProcessor) {
+        processedElements = _soupPostProcessor(processedElements);
+      }
+      setElements(processedElements);
+    }
+  }, [circuitJsonFromChildren, soup, _soupPostProcessor]);
+  (0, import_react8.useEffect)(() => {
+    if (elements.length > 0 && containerRef.current) {
+      const elmBounds = containerRef.current.getBoundingClientRect();
+      const { center, width, height } = elements.some(
         (e) => e.type.startsWith("schematic_")
-      ) ? (0, import_builder3.findBoundsAndCenter)(
-        elements2.filter((e) => e.type.startsWith("schematic_"))
+      ) ? (0, import_soup_util.findBoundsAndCenter)(
+        elements.filter((e) => e.type.startsWith("schematic_"))
       ) : { center: { x: 0, y: 0 }, width: 1e-3, height: 1e-3 };
       const scaleFactor = Math.min(
         (elmBounds.width ?? 0) / width,
         (elmBounds.height ?? 0) / height,
         100
       );
-      setElements(elements2);
-      setProject((0, import_builder3.createProjectFromElements)(elements2));
-      setTransform(
-        compose(
-          translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-          scale(scaleFactor, -scaleFactor, 0, 0),
-          translate(-center.x, -center.y)
-        )
+      const newTransform = compose(
+        translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+        scale(scaleFactor, -scaleFactor, 0, 0),
+        translate(-center.x, -center.y)
       );
+      updateTransform(newTransform);
+    }
+  }, [elements, bounds.width, bounds.height, updateTransform]);
+  const handleMouseDown = (0, import_react8.useCallback)((e) => {
+    isDraggingRef.current = true;
+    lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+  }, []);
+  const handleMouseMove = (0, import_react8.useCallback)(
+    (e) => {
+      if (!isDraggingRef.current)
+        return;
+      const dx = e.clientX - lastMousePosRef.current.x;
+      const dy = e.clientY - lastMousePosRef.current.y;
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+      const scale2 = transformRef.current.a;
+      const dragSensitivity = 150 / scale2;
+      const newTransform = compose(
+        translate(dx * dragSensitivity, dy * dragSensitivity),
+        transformRef.current
+      );
+      updateTransform(newTransform);
     },
-    [setElements, setTransform]
+    [updateTransform]
   );
-  (0, import_react9.useEffect)(() => {
-    if (initialSoup.length > 0) {
-      setElementsAndCamera(initialSoup);
-      return;
-    }
-    const projectBuilder = (0, import_builder3.createProjectBuilder)();
-    (import_react_fiber.createRoot ?? import_react_fiber.default.createRoot)().render(children, projectBuilder).then(async (elements2) => {
-      if (_soupPostProcessor) {
-        elements2 = _soupPostProcessor(elements2);
+  const handleMouseUp = (0, import_react8.useCallback)(() => {
+    isDraggingRef.current = false;
+  }, []);
+  const handleWheel = (0, import_react8.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const scaleMultiplier = Math.pow(0.999, e.deltaY);
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const inverseTransform = inverse(transformRef.current);
+        const transformedPoint = applyToPoint(inverseTransform, {
+          x: mouseX,
+          y: mouseY
+        });
+        const newTransform = compose(
+          transformRef.current,
+          translate(transformedPoint.x, transformedPoint.y),
+          scale(scaleMultiplier, scaleMultiplier),
+          translate(-transformedPoint.x, -transformedPoint.y)
+        );
+        updateTransform(newTransform);
       }
-      setElementsAndCamera(elements2);
-    }).catch((e) => {
-      console.error("ERROR RENDERING CIRCUIT");
-      throw e;
-    });
-  }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    },
+    [updateTransform]
+  );
+  (0, import_react8.useEffect)(() => {
+    const container = containerRef.current;
+    if (container) {
+      container.addEventListener("wheel", handleWheel, { passive: false });
+      return () => {
+        container.removeEventListener("wheel", handleWheel);
+      };
+    }
+  }, [handleWheel]);
+  if (errorFromChildren) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+      "Error: ",
+      errorFromChildren.message
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         style: {
@@ -2351,15 +2354,19 @@ var SchematicWithoutContext = ({
           overflow: "hidden",
           position: "relative",
           isolation: "isolate",
-          cursor: "grab",
+          cursor: isDraggingRef.current ? "grabbing" : "grab",
           ...style
         },
         ref: (el) => {
-          ref.current = el;
+          containerRef.current = el;
           boundsRef(el);
         },
+        onMouseDown: handleMouseDown,
+        onMouseMove: handleMouseMove,
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseUp,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             import_react_supergrid.SuperGrid,
             {
               stringifyCoord: (x, y, z) => {
@@ -2369,10 +2376,10 @@ var SchematicWithoutContext = ({
               },
               width: bounds.width,
               height: bounds.height,
-              transform: cameraTransform
+              transform: transformRef.current
             }
           ),
-          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             SchematicElement,
             {
               element: elm,
@@ -2383,7 +2390,7 @@ var SchematicWithoutContext = ({
         ]
       }
     ),
-    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableViewer, { elements })
+    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableViewer, { elements })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node: