@tscircuit/schematic-viewer 0.0.5 → 0.0.7

package/dist/index.js

@@ -1276,9 +1276,24 @@ module.exports = __toCommonJS(src_exports);
 
 // src/Schematic.tsx
 var import_react4 = require("react");
+var import_builder2 = require("@tscircuit/builder");
+var import_react_fiber = require("@tscircuit/react-fiber");
 
-// src/schematic-components/MovableGrid/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/lib/utils/collect-element-refs.ts
+var collectElementRefs = (elm, allElms) => {
+  const source_component = allElms.find(
+    (e) => e.type === "source_component" && e.source_component_id === elm.source_component_id
+  );
+  if (["schematic_component", "schematic_trace", "schematic_port"].includes(
+    elm.type
+  )) {
+    return {
+      schematic: elm,
+      source: source_component
+    };
+  }
+  return null;
+};
 
 // node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
@@ -1544,11 +1559,10 @@ peg$SyntaxError.buildMessage = function(expected, found) {
 };
 
 // src/lib/render-context/index.ts
-var useRenderContext = create$1()(
-  (set, get) => ({
-    camera_transform: compose(scale(100, 100, 0, 0))
-  })
-);
+var useRenderContext = create$1((set, get) => ({
+  camera_transform: compose(scale(100, 100, 0, 0)),
+  setCameraTransform: (transform2) => set({ camera_transform: transform2 })
+}));
 var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
 
 // src/lib/utils/get-svg-path-bounds.ts
@@ -1569,7 +1583,6 @@ function getSVGPathBounds(ds) {
 var get_svg_path_bounds_default = getSVGPathBounds;
 
 // src/schematic-components/SVGPathComponent.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
 var SVGPathComponent = ({ size, center, rotation, paths }) => {
   const ct = useCameraTransform();
   const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
@@ -1586,169 +1599,43 @@ 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_runtime2.jsx)("svg", {
-    style: {
-      position: "absolute",
-      transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
-      left: absoluteCenter.x - absoluteSize.width / 2,
-      top: absoluteCenter.y - absoluteSize.height / 2
-    },
-    overflow: "visible",
-    width: absoluteSize.width,
-    height: absoluteSize.height,
-    viewBox: `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`,
-    children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", {
-      fill: "none",
-      strokeWidth: 2 * (p.strokeWidth || 1),
-      stroke: p.stroke || "red",
-      d: p.d
-    }, i))
-  });
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
 };
 var SVGPathComponent_default = SVGPathComponent;
 
 // src/schematic-components/SimpleResistor.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 var SimpleResistor = ({ 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 10 0 l 0 -6 l 20 0 l 0 12 l -20 0 l 0 -6 m 20 0 l 10 0"
-      }
-    ]
-  });
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    {
+      stroke: "red",
+      strokeWidth: 1,
+      d: "M 0 15 l 10 0 l 0 -6 l 20 0 l 0 12 l -20 0 l 0 -6 m 20 0 l 10 0"
+    }
+  ]} />;
 };
 
 // src/schematic-components/SimpleCapacitor.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
 var SimpleCapacitor = ({
   component: { source, schematic }
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SVGPathComponent_default, {
-    rotation: schematic.rotation,
-    center: schematic.center,
-    size: schematic.size,
-    paths: [
-      { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
-      { stroke: "red", strokeWidth: 2, d: "M 12 0 l 0 30" },
-      { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
-      { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" }
-    ]
-  });
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
+    { stroke: "red", strokeWidth: 2, d: "M 12 0 l 0 30" },
+    { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
+    { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" }
+  ]} />;
 };
 
 // src/lib/hooks/use-maybe-promise.ts
 var import_react2 = require("react");
-var useMaybePromise = (promise) => {
-  const [state, setState] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
-    if (promise instanceof Promise) {
-      promise.then(setState);
-    } else {
-      setState(promise);
-    }
-  }, [promise]);
-  return state;
-};
 
 // src/schematic-components/ProjectComponent.tsx
 var import_builder = require("@tscircuit/builder");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ProjectComponent = ({ project: $project }) => {
-  const project = useMaybePromise($project);
-  if (!project)
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {
-      children: "loading"
-    });
-  const projectClass = new import_builder.ProjectClass(project);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, {
-    children: [
-      project.schematic_components.map((schematic_component) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SchematicComponent, {
-        component: {
-          source: projectClass.getSourceComponent(
-            schematic_component.source_component_id
-          ),
-          schematic: schematic_component
-        }
-      }, schematic_component.schematic_component_id)),
-      project.schematic_ports.map((schematic_port) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SchematicPort, {
-        port: {
-          source: projectClass.getSourcePort(
-            schematic_port.schematic_port_id
-          ),
-          schematic: schematic_port
-        }
-      }, schematic_port.schematic_port_id)),
-      project.schematic_traces.map((schematic_trace) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SchematicTrace, {
-        trace: {
-          source: projectClass.getSourceTrace(
-            schematic_trace.source_trace_id
-          ),
-          schematic: schematic_trace
-        }
-      }, schematic_trace.schematic_trace_id)),
-      project.schematic_texts.map((schematic_text) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SchematicText, {
-        schematic_text
-      }, schematic_text.schematic_text_id))
-    ]
-  });
-};
-
-// src/schematic-components/SchematicComponent.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var SchematicComponent = ({ component }) => {
-  const { source, schematic } = component;
-  switch (source.ftype) {
-    case "simple_resistor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SimpleResistor, {
-        component: { source, schematic }
-      });
-    }
-    case "simple_capacitor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SimpleCapacitor, {
-        component: { source, schematic }
-      });
-    }
-    case "simple_power_source": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SimplePowerSource, {
-        component: { source, schematic }
-      });
-    }
-    case "simple_ground": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SimpleGround, {
-        component: { source, schematic }
-      });
-    }
-    case "simple_inductor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SimpleInductor, {
-        component: { source, schematic }
-      });
-    }
-    case "simple_bug": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SchematicBug, {
-        component: { source, schematic }
-      });
-    }
-    case "simple_diode": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SimpleDiode, {
-        component: { source, schematic }
-      });
-    }
-    default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
-        children: [
-          "unknown ftype: ",
-          component.source.ftype
-        ]
-      });
-    }
-  }
-};
 
 // src/lib/utils/direction-to-vec.ts
 var directionToVec = (direction) => {
@@ -1765,26 +1652,21 @@ var directionToVec = (direction) => {
 };
 
 // src/schematic-components/SchematicPort.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
 var SchematicPort = ({ port: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.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 <SVGPathComponent rotation={0} center={schematic.center} size={{ width: 0.2, height: 0.2 }} paths={[
+    {
+      stroke: "blue",
+      strokeWidth: 1,
+      d: "M 0 0 l 10 0 l 0 10 l -10 0 z"
+    },
+    schematic.facing_direction ? {
+      stroke: "blue",
+      strokeWidth: 0.5,
+      d: `M 5 5 l ${directionToVec(schematic.facing_direction).x * 7} ${directionToVec(schematic.facing_direction).y * 7}`
+    } : null
+  ].filter(Boolean)} />;
 };
+var SchematicPort_default = SchematicPort;
 
 // node_modules/react-use-measure/dist/web.js
 var import_react3 = require("react");
@@ -1937,7 +1819,6 @@ 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_runtime8 = require("react/jsx-runtime");
 var SchematicText = ({ schematic_text }) => {
   const ct = useCameraTransform();
   const { text, position, anchor } = schematic_text;
@@ -1951,48 +1832,38 @@ var SchematicText = ({ schematic_text }) => {
   } else if (anchor === "right") {
     offset = [-bounds.width, -bounds.height / 2];
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.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 <div ref={boundsRef} style={{
+    fontFamily: "'IBM Plex Mono', monospace",
+    position: "absolute",
+    left: tPos.x + offset[0],
+    top: tPos.y + offset[1]
+  }}>{text}</div>;
 };
+var SchematicText_default = SchematicText;
 
 // src/schematic-components/SchematicTrace.tsx
 var import_svg_path_generator = __toESM(require_svg_path_generator2());
 
 // src/schematic-components/RenderError.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
 var RenderError_default = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.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 <div style={{
+    position: "fixed",
+    backgroundColor: "red",
+    color: "white",
+    fontSize: 14,
+    fontFamily: "sans-serif",
+    padding: 5,
+    right: 0,
+    top: 0,
+    opacity: 0.75
+  }}>{text}</div>;
 };
 
 // src/schematic-components/SchematicTrace.tsx
-var import_jsx_runtime10 = 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"
-    });
+    return <RenderError_default text="Route with 0 edges" />;
   }
   const path = (0, import_svg_path_generator.default)();
   for (let i = 0; i < edges.length; i++) {
@@ -2007,23 +1878,18 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SVGPathComponent_default, {
-    rotation: 0,
-    center,
-    size: pathBounds,
-    paths: [
-      {
-        stroke: "green",
-        strokeWidth: 0.02,
-        d
-      }
-    ]
-  });
+  return <SVGPathComponent_default rotation={0} center={center} size={pathBounds} paths={[
+    {
+      stroke: "green",
+      strokeWidth: 0.02,
+      d
+    }
+  ]} />;
 };
+var SchematicTrace_default = SchematicTrace;
 
 // src/schematic-components/SchematicBug.tsx
 var import_range = __toESM(require_range());
-var import_jsx_runtime11 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
   const ports_arrangement = schematic.port_arrangement;
   const port_labels = schematic.port_labels;
@@ -2031,114 +1897,152 @@ var SchematicBug = ({ component: { source, schematic } }) => {
   const rh = 15;
   const pd = 7.5;
   const bugh = Math.max(ports_arrangement.left_size, ports_arrangement.right_size) * rh;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SVGPathComponent_default, {
-    rotation: schematic.rotation,
-    center: schematic.center,
-    size: schematic.size,
-    paths: [
-      {
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    {
+      stroke: "red",
+      strokeWidth: 1,
+      d: `M 0 0 L ${bugw} 0 L ${bugw} ${bugh} L 0 ${bugh}Z`
+    },
+    ...(0, import_range.default)(
+      0,
+      ports_arrangement.left_size + ports_arrangement.right_size
+    ).map((i) => {
+      const ls = ports_arrangement.left_size;
+      const left = i < ls;
+      const rowi = i % ls;
+      const p1 = [left ? 0 : bugw, rh / 2 + rowi * rh];
+      const rd = [left ? -pd : pd, 0];
+      return {
         stroke: "red",
         strokeWidth: 1,
-        d: `M 0 0 L ${bugw} 0 L ${bugw} ${bugh} L 0 ${bugh}Z`
-      },
-      ...(0, import_range.default)(
-        0,
-        ports_arrangement.left_size + ports_arrangement.right_size
-      ).map((i) => {
-        const ls = ports_arrangement.left_size;
-        const left = i < ls;
-        const rowi = i % ls;
-        const p1 = [left ? 0 : bugw, rh / 2 + rowi * rh];
-        const rd = [left ? -pd : pd, 0];
-        return {
-          stroke: "red",
-          strokeWidth: 1,
-          d: `M ${p1.join(" ")} l ${rd.join(" ")}`
-        };
-      })
-    ]
-  });
+        d: `M ${p1.join(" ")} l ${rd.join(" ")}`
+      };
+    })
+  ]} />;
 };
 
 // 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,
-    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 <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_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,
-    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 <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_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,
-        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 <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    {
+      stroke: "red",
+      strokeWidth: 1,
+      d: "m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273"
+    }
+  ]} />;
 };
 
 // src/schematic-components/SimpleDiode.tsx
-var import_jsx_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: schematic.size,
-    paths: [
-      { stroke: "red", strokeWidth: 2, d: "M 0,0 H 21" },
-      { stroke: "red", strokeWidth: 2, d: "M 49,0 H 59" },
-      { stroke: "red", strokeWidth: 2, d: "M 49,0 L 21 14 V -14 Z" },
-      { stroke: "red", strokeWidth: 2, d: "M 49,-14 V 14" }
-    ]
-  });
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    { stroke: "red", strokeWidth: 2, d: "M 0,0 H 21" },
+    { stroke: "red", strokeWidth: 2, d: "M 49,0 H 59" },
+    { stroke: "red", strokeWidth: 2, d: "M 49,0 L 21 14 V -14 Z" },
+    { stroke: "red", strokeWidth: 2, d: "M 49,-14 V 14" }
+  ]} />;
+};
+
+// src/schematic-components/SchematicComponent.tsx
+var SchematicComponent = ({ component }) => {
+  const { source, schematic } = component;
+  switch (source.ftype) {
+    case "simple_resistor": {
+      return <SimpleResistor component={{ source, schematic }} />;
+    }
+    case "simple_capacitor": {
+      return <SimpleCapacitor component={{ source, schematic }} />;
+    }
+    case "simple_power_source": {
+      return <SimplePowerSource component={{ source, schematic }} />;
+    }
+    case "simple_ground": {
+      return <SimpleGround component={{ source, schematic }} />;
+    }
+    case "simple_inductor": {
+      return <SimpleInductor component={{ source, schematic }} />;
+    }
+    case "simple_bug": {
+      return <SchematicBug component={{ source, schematic }} />;
+    }
+    case "simple_diode": {
+      return <SimpleDiode component={{ source, schematic }} />;
+    }
+    default: {
+      return <div>
+        {"unknown ftype: "}
+        {component.source.ftype}
+      </div>;
+    }
+  }
+};
+var SchematicComponent_default = SchematicComponent;
+
+// src/schematic-components/SchematicElement.tsx
+var SchematicElement = ({
+  element,
+  allElements
+}) => {
+  if (element.type === "schematic_component") {
+    return <SchematicComponent_default component={collectElementRefs(element, allElements)} />;
+  }
+  if (element.type === "schematic_trace") {
+    return <SchematicTrace_default trace={collectElementRefs(element, allElements)} />;
+  }
+  if (element.type === "schematic_port") {
+    return <SchematicPort_default port={collectElementRefs(element, allElements)} />;
+  }
+  if (element.type === "schematic_text") {
+    return <SchematicText_default schematic_text={element} />;
+  }
+  return null;
 };
 
 // src/Schematic.tsx
-var import_builder2 = require("@tscircuit/builder");
-var import_react_fiber = require("@tscircuit/react-fiber");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
+var import_react_error_boundary = require("react-error-boundary");
+var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
+  return <div style={{ color: "red" }}>
+    {"error rendering "}
+    {elm.type}
+    {": "}
+    {error.toString()}
+  </div>;
+};
 var Schematic = ({
   children,
   elements: initialElements = []
 }) => {
   const [elements, setElements] = (0, import_react4.useState)(initialElements);
   const [project, setProject] = (0, import_react4.useState)(null);
+  const setCameraTransform = useRenderContext((s) => s.setCameraTransform);
+  const { ref } = (0, import_use_mouse_matrix_transform.useMouseMatrixTransform)({
+    onSetTransform: (transform2) => setCameraTransform(transform2),
+    initialTransform: compose(scale(100, 100, 0, 0))
+  });
   (0, import_react4.useEffect)(() => {
     if (initialElements.length > 0) {
       setProject((0, import_builder2.createProjectFromElements)(initialElements));
@@ -2155,9 +2059,7 @@ var Schematic = ({
   }, [children]);
   if (elements.length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ProjectComponent, {
-    project
-  });
+  return <div ref={ref}>{elements.map((elm) => <import_react_error_boundary.ErrorBoundary fallbackRender={fallbackRender(elm)}><SchematicElement element={elm} allElements={elements} key={JSON.stringify(elm)} /></import_react_error_boundary.ErrorBoundary>)}</div>;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {