@tscircuit/schematic-viewer 1.1.10 → 1.1.12

package/dist/index.js

@@ -23,6 +23,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -937,6 +941,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react5 = require("react");
 var import_react_supergrid = require("react-supergrid");
 var import_builder3 = require("@tscircuit/builder");
+var builder1 = __toESM(require("@tscircuit/builder"));
 var import_react_fiber = require("@tscircuit/react-fiber");
 
 // src/lib/utils/collect-element-refs.ts
@@ -964,7 +969,7 @@ var collectElementRefs = (elm, allElms) => {
   return null;
 };
 
-// node_modules/zustand/esm/vanilla.mjs
+// node_modules/zustand/esm/vanilla.js
 var createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -992,9 +997,9 @@ var createStoreImpl = (createState) => {
 };
 var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
 
-// node_modules/zustand/esm/index.mjs
+// node_modules/zustand/esm/index.js
 var import_react = require("react");
-var import_with_selector = __toESM(require_with_selector(), 1);
+var import_with_selector = __toESM(require_with_selector());
 var { useSyncExternalStoreWithSelector } = import_with_selector.default;
 function useStore(api, selector = api.getState, equalityFn) {
   const slice = useSyncExternalStoreWithSelector(
@@ -1267,43 +1272,54 @@ var SVGPathComponent = ({ size, center, rotation, paths }) => {
     width: Math.max(1, size.width * ct.a),
     height: Math.max(1, size.height * ct.d)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-    style: {
-      position: "absolute",
-      transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
-      left: absoluteCenter.x - absoluteSize.width / 2,
-      top: absoluteCenter.y - absoluteSize.height / 2
-    },
-    overflow: "visible",
-    width: absoluteSize.width,
-    height: absoluteSize.height,
-    viewBox: `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`,
-    children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-      fill: p.fill ?? "none",
-      strokeLinecap: "round",
-      strokeWidth: 2 * (p.strokeWidth || 1),
-      stroke: p.stroke || "red",
-      d: p.d
-    }, i))
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+        left: absoluteCenter.x - absoluteSize.width / 2,
+        top: absoluteCenter.y - absoluteSize.height / 2
+        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
+      },
+      overflow: "visible",
+      width: absoluteSize.width,
+      height: absoluteSize.height,
+      viewBox: `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`,
+      children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          fill: p.fill ?? "none",
+          strokeLinecap: "round",
+          strokeWidth: 2 * (p.strokeWidth || 1),
+          stroke: p.stroke || "red",
+          d: p.d
+        },
+        i
+      ))
+    }
+  );
 };
 var SVGPathComponent_default = SVGPathComponent;
 
 // src/schematic-components/SimpleResistor.tsx
 var import_jsx_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"
-      }
-    ]
-  });
+  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
@@ -1311,17 +1327,20 @@ 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: 2, d: "M 12 0 l 0 30" },
-      { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
-      { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_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: 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
@@ -1348,23 +1367,26 @@ var directionToVec = (direction) => {
 // src/schematic-components/SchematicPort.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SchematicPort = ({ port: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SVGPathComponent, {
-    rotation: 0,
-    center: schematic.center,
-    size: { width: 0.2, height: 0.2 },
-    paths: [
-      {
-        stroke: "blue",
-        strokeWidth: 1,
-        d: "M 0 0 l 10 0 l 0 10 l -10 0 z"
-      },
-      schematic.facing_direction ? {
-        stroke: "blue",
-        strokeWidth: 0.5,
-        d: `M 5 5 l ${directionToVec(schematic.facing_direction).x * 7} ${directionToVec(schematic.facing_direction).y * 7}`
-      } : null
-    ].filter(Boolean)
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SVGPathComponent,
+    {
+      rotation: 0,
+      center: schematic.center,
+      size: { width: 0.2, height: 0.2 },
+      paths: [
+        {
+          stroke: "blue",
+          strokeWidth: 1,
+          d: "M 0 0 l 10 0 l 0 10 l -10 0 z"
+        },
+        schematic.facing_direction ? {
+          stroke: "blue",
+          strokeWidth: 0.5,
+          d: `M 5 5 l ${directionToVec(schematic.facing_direction).x * 7} ${directionToVec(schematic.facing_direction).y * 7}`
+        } : null
+      ].filter(Boolean)
+    }
+  );
 };
 var SchematicPort_default = SchematicPort;
 
@@ -1533,16 +1555,19 @@ var SchematicText = ({ schematic_text }) => {
   } else if (anchor === "right") {
     offset = [-bounds.width, -bounds.height / 2];
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
-    ref: boundsRef,
-    style: {
-      fontFamily: "'IBM Plex Mono', monospace",
-      position: "absolute",
-      left: tPos.x + offset[0],
-      top: tPos.y + offset[1]
-    },
-    children: text
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      ref: boundsRef,
+      style: {
+        fontFamily: "'IBM Plex Mono', monospace",
+        position: "absolute",
+        left: tPos.x + offset[0],
+        top: tPos.y + offset[1]
+      },
+      children: text
+    }
+  );
 };
 var SchematicText_default = SchematicText;
 
@@ -1552,20 +1577,23 @@ var import_svg_path_generator = __toESM(require_svg_path_generator2());
 // src/schematic-components/RenderError.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var RenderError_default = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.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
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        backgroundColor: "red",
+        color: "white",
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        padding: 5,
+        right: 0,
+        top: 0,
+        opacity: 0.75
+      },
+      children: text
+    }
+  );
 };
 
 // src/schematic-components/SchematicTrace.tsx
@@ -1573,9 +1601,7 @@ 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_runtime8.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++) {
@@ -1590,18 +1616,21 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SVGPathComponent_default, {
-    rotation: 0,
-    center,
-    size: pathBounds,
-    paths: [
-      {
-        stroke: "green",
-        strokeWidth: 0.02,
-        d
-      }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    SVGPathComponent_default,
+    {
+      rotation: 0,
+      center,
+      size: pathBounds,
+      paths: [
+        {
+          stroke: "green",
+          strokeWidth: 0.02,
+          d
+        }
+      ]
+    }
+  );
 };
 var SchematicTrace_default = SchematicTrace;
 
@@ -1644,12 +1673,15 @@ var SchematicBug = ({ component: { source, schematic } }) => {
     x: schematic.center.x + (actualSize.minX + actualSize.maxX) / 2,
     y: schematic.center.y + (actualSize.minY + actualSize.maxY) / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SVGPathComponent_default, {
-    rotation: schematic.rotation,
-    center: actualCenter,
-    size: actualSize,
-    paths
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    SVGPathComponent_default,
+    {
+      rotation: schematic.rotation,
+      center: actualCenter,
+      size: actualSize,
+      paths
+    }
+  );
 };
 
 // src/schematic-components/SimplePowerSource.tsx
@@ -1657,52 +1689,62 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var SimplePowerSource = ({
   component: { source, schematic }
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SVGPathComponent_default, {
-    rotation: schematic.rotation,
-    center: schematic.center,
-    size: schematic.size,
-    paths: [
-      {
-        stroke: "red",
-        strokeWidth: 1,
-        d: "M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3"
-      }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    SVGPathComponent_default,
+    {
+      rotation: schematic.rotation,
+      center: schematic.center,
+      size: schematic.size,
+      paths: [
+        {
+          stroke: "red",
+          strokeWidth: 1,
+          d: "M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3"
+        }
+      ]
+    }
+  );
 };
 
 // src/schematic-components/SimpleGround.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SimpleGround = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SVGPathComponent_default, {
-    rotation: schematic.rotation,
-    center: schematic.center,
-    size: schematic.size,
-    paths: [
-      {
-        stroke: "red",
-        strokeWidth: 0.7,
-        d: "M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12"
-      }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    SVGPathComponent_default,
+    {
+      rotation: schematic.rotation,
+      center: schematic.center,
+      size: schematic.size,
+      paths: [
+        {
+          stroke: "red",
+          strokeWidth: 0.7,
+          d: "M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12"
+        }
+      ]
+    }
+  );
 };
 
 // src/schematic-components/SimpleInductor.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var SimpleInductor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SVGPathComponent_default, {
-    rotation: schematic.rotation,
-    center: schematic.center,
-    size: schematic.size,
-    paths: [
-      {
-        stroke: "red",
-        strokeWidth: 1,
-        d: "m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273"
-      }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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
@@ -1716,45 +1758,31 @@ var SchematicComponent = ({ component }) => {
     return null;
   switch (source.ftype) {
     case "simple_resistor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleResistor, {
-        component: { source, schematic }
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleResistor, { component: { source, schematic } });
     }
     case "simple_capacitor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleCapacitor, {
-        component: { source, schematic }
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleCapacitor, { component: { source, schematic } });
     }
     case "simple_power_source": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimplePowerSource, {
-        component: { source, schematic }
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimplePowerSource, { component: { source, schematic } });
     }
     case "simple_ground": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleGround, {
-        component: { source, schematic }
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleGround, { component: { source, schematic } });
     }
     case "simple_inductor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleInductor, {
-        component: { source, schematic }
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleInductor, { component: { source, schematic } });
     }
     case "simple_bug": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SchematicBug, {
-        component: { source, schematic }
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SchematicBug, { component: { source, schematic } });
     }
     case "simple_diode": {
       return null;
     }
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", {
-        children: [
-          "unknown ftype: ",
-          component.source.ftype
-        ]
-      });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+        "unknown ftype: ",
+        component.source.ftype
+      ] });
     }
   }
 };
@@ -1764,18 +1792,21 @@ var SchematicComponent_default = SchematicComponent;
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var SchematicBox = ({ box: { schematic } }) => {
   const { width: w, height: h } = schematic;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.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`
-      }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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;
 
@@ -1797,18 +1828,21 @@ var SchematicLine = ({ line: { schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SVGPathComponent, {
-    rotation: 0,
-    center,
-    size: pathBounds,
-    paths: [
-      {
-        stroke: "red",
-        strokeWidth: 0.02,
-        d
-      }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    SVGPathComponent,
+    {
+      rotation: 0,
+      center,
+      size: pathBounds,
+      paths: [
+        {
+          stroke: "red",
+          strokeWidth: 0.02,
+          d
+        }
+      ]
+    }
+  );
 };
 var SchematicLine_default = SchematicLine;
 
@@ -1816,7 +1850,6 @@ var SchematicLine_default = SchematicLine;
 var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var SchematicPath = (props) => {
-  console.log("SchematicPath", props);
   const { points, is_filled, is_closed, fill_color } = props.path.schematic;
   if (points.length === 0)
     return null;
@@ -1836,19 +1869,22 @@ var SchematicPath = (props) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.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
-      }
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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;
 
@@ -1859,44 +1895,33 @@ var SchematicElement = ({
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicComponent_default, {
-      component: collectElementRefs(element, allElements)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      SchematicComponent_default,
+      {
+        component: collectElementRefs(element, allElements)
+      }
+    );
   }
   if (element.type === "schematic_trace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicTrace_default, {
-      trace: collectElementRefs(element, allElements)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_port") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPort_default, {
-      port: collectElementRefs(element, allElements)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_box") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicBox_default, {
-      box: collectElementRefs(element, allElements)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_line") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicLine_default, {
-      line: collectElementRefs(element, allElements)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_path") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPath_default, {
-      path: collectElementRefs(element, allElements)
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicText_default, {
-      schematic_text: element
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicText_default, { schematic_text: element });
   }
   if (element.type === "source_error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RenderError_default, {
-      text: element.message
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RenderError_default, { text: element.message });
   }
   return null;
 };
@@ -1913,27 +1938,17 @@ var LazyTableViewer = (0, import_react4.lazy)(
     default: m.SoupTableViewer
   }))
 );
-var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react4.Suspense, {
-  fallback: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
-    children: "Loading..."
-  }),
-  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LazyTableViewer, {
-    ...params
-  })
-});
+var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LazyTableViewer, { ...params }) });
 
 // src/Schematic.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-    style: { color: "red" },
-    children: [
-      "error rendering ",
-      elm.type,
-      ": ",
-      error.toString()
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { color: "red" }, children: [
+    "error rendering ",
+    elm.type,
+    ": ",
+    error.toString()
+  ] });
 };
 var toMMSINeg = (v, z) => v >= 0 ? (0, import_react_supergrid.toMMSI)(v, z) : `-${(0, import_react_supergrid.toMMSI)(-v, z)}`;
 var Schematic = ({
@@ -1953,7 +1968,9 @@ var Schematic = ({
     onSetTransform: (transform2) => {
       setCameraTransform(transform2);
     }
+    // initialTransform: compose(scale(100, 100, 0, 0)),
   });
+  console.log({ builder1 });
   const setElementsAndCamera = (0, import_react5.useCallback)(
     (elements2) => {
       const elmBounds = ref.current.getBoundingClientRect();
@@ -1972,6 +1989,7 @@ var Schematic = ({
       setTransform(
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+          // translate(100, 0),
           scale(scaleFactor, scaleFactor, 0, 0),
           translate(-center.x, -center.y)
         )
@@ -1992,9 +2010,10 @@ var Schematic = ({
       throw e;
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
         style: {
           width: "100%",
           backgroundColor: "rgba(255,255,255,0)",
@@ -2009,69 +2028,81 @@ var Schematic = ({
           boundsRef(el);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_supergrid.SuperGrid, {
-            stringifyCoord: (x, y, z) => {
-              if (z === 0)
-                return "";
-              return `${toMMSINeg(x, z)}, ${toMMSINeg(y, z)}`;
-            },
-            width: bounds.width,
-            height: bounds.height,
-            transform: cameraTransform
-          }),
-          elements == null ? void 0 : elements.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_error_boundary.ErrorBoundary, {
-            fallbackRender: fallbackRender(elm),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicElement, {
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react_supergrid.SuperGrid,
+            {
+              stringifyCoord: (x, y, z) => {
+                if (z === 0)
+                  return "";
+                return `${toMMSINeg(x, z)}, ${toMMSINeg(y, z)}`;
+              },
+              width: bounds.width,
+              height: bounds.height,
+              transform: cameraTransform
+            }
+          ),
+          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_error_boundary.ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            SchematicElement,
+            {
               element: elm,
               allElements: elements
-            }, JSON.stringify(elm))
-          }, i))
+            },
+            JSON.stringify(elm)
+          ) }, i))
         ]
-      }),
-      showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableViewer, {
-        elements
-      })
-    ]
-  });
+      }
+    ),
+    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableViewer, { elements })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Schematic
 });
-/**
- * @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.
- */
+/*! Bundled license information:
+
+use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js:
+  (**
+   * @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.
+   *)
+
+use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
+  (**
+   * @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.
+   *)
+
+use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js:
+  (**
+   * @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.
+   *)
+
+use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js:
+  (**
+   * @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.
+   *)
+*/
 //# sourceMappingURL=index.js.map