@tscircuit/3d-viewer 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -0,0 +1,657 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // 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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// node_modules/@tscircuit/soup-util/dist/index.cjs
+var require_dist = __commonJS({
+  "node_modules/@tscircuit/soup-util/dist/index.cjs"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var soup_util_exports = {};
+    __export2(soup_util_exports, {
+      default: () => soup_util_default,
+      su: () => su3
+    });
+    module2.exports = __toCommonJS2(soup_util_exports);
+    var su3 = (soup) => {
+      const su22 = new Proxy(
+        {},
+        {
+          get: (proxy_target, component_type) => {
+            return {
+              get: (id) => soup.find(
+                (e) => e.type === component_type && e[`${component_type}_id`] === id
+              ),
+              getUsing: (using) => {
+                const keys = Object.keys(using);
+                if (keys.length !== 1) {
+                  throw new Error(
+                    "getUsing requires exactly one key, e.g. { pcb_component_id }"
+                  );
+                }
+                const join_key = keys[0];
+                const join_type = join_key.replace("_id", "");
+                const joiner = soup.find(
+                  (e) => e.type === join_type && e[join_key] === using[join_key]
+                );
+                if (!joiner)
+                  return null;
+                return soup.find(
+                  (e) => e.type === component_type && e[`${component_type}_id`] === joiner[`${component_type}_id`]
+                );
+              },
+              getWhere: (where) => {
+                const keys = Object.keys(where);
+                return soup.find(
+                  (e) => e.type === component_type && keys.every((key) => e[key] === where[key])
+                );
+              },
+              list: (where) => {
+                const keys = !where ? [] : Object.keys(where);
+                return soup.filter(
+                  (e) => e.type === component_type && keys.every((key) => e[key] === where[key])
+                );
+              },
+              select: (selector) => {
+                if (component_type === "source_component") {
+                  return soup.find(
+                    (e) => e.type === "source_component" && e.name === selector.replace(/\./g, "")
+                  );
+                } else if (component_type === "pcb_port" || component_type === "source_port" || component_type === "schematic_port") {
+                  const [component_name, port_selector] = selector.replace(/\./g, "").split(/[\s\>]+/);
+                  const source_component = soup.find(
+                    (e) => e.type === "source_component" && e.name === component_name
+                  );
+                  if (!source_component)
+                    return null;
+                  const source_port = soup.find(
+                    (e) => e.type === "source_port" && e.source_component_id === source_component.source_component_id && (e.name === port_selector || (e.port_hints ?? []).includes(port_selector))
+                  );
+                  if (!source_port)
+                    return null;
+                  if (component_type === "source_port")
+                    return source_port;
+                  if (component_type === "pcb_port") {
+                    return soup.find(
+                      (e) => e.type === "pcb_port" && e.source_port_id === source_port.source_port_id
+                    );
+                  } else if (component_type === "schematic_port") {
+                    return soup.find(
+                      (e) => e.type === "schematic_port" && e.source_port_id === source_port.source_port_id
+                    );
+                  }
+                }
+              }
+            };
+          }
+        }
+      );
+      return su22;
+    };
+    su3.unparsed = su3;
+    var soup_util_default = su3;
+  }
+});
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  CadViewer: () => CadViewer
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/hooks/use-convert-children-to-soup.ts
+var useConvertChildrenToSoup = (children, defaultSoup) => {
+  return defaultSoup;
+};
+
+// src/CadViewer.tsx
+var import_soup_util2 = __toESM(require_dist(), 1);
+var import_react5 = require("react");
+
+// src/soup-to-3d/index.ts
+var import_soup_util = __toESM(require_dist(), 1);
+var import_transforms = require("@jscad/modeling/src/operations/transforms");
+var import_primitives2 = require("@jscad/modeling/src/primitives");
+var import_colors2 = require("@jscad/modeling/src/colors");
+var import_booleans2 = require("@jscad/modeling/src/operations/booleans");
+
+// src/geoms/plated-hole.ts
+var import_primitives = require("@jscad/modeling/src/primitives");
+var import_colors = require("@jscad/modeling/src/colors");
+var import_booleans = require("@jscad/modeling/src/operations/booleans");
+
+// src/geoms/constants.ts
+var M = 0.01;
+var colors = {
+  copper: [0.9, 0.6, 0.2],
+  fr4Green: [5 / 255, 163 / 255, 46 / 255],
+  fr4GreenSolderWithMask: [0 / 255, 152 / 255, 19 / 255]
+};
+
+// src/geoms/plated-hole.ts
+var platedHole = (plated_hole, ctx) => {
+  if (plated_hole.shape === "circle" || !plated_hole.shape) {
+    return (0, import_colors.colorize)(
+      colors.copper,
+      (0, import_booleans.subtract)(
+        (0, import_booleans.union)(
+          (0, import_primitives.cylinder)({
+            center: [plated_hole.x, plated_hole.y, 0],
+            radius: plated_hole.hole_diameter / 2,
+            height: 1.2
+          }),
+          (0, import_primitives.cylinder)({
+            center: [plated_hole.x, plated_hole.y, 1.2 / 2],
+            radius: plated_hole.outer_diameter / 2,
+            height: M
+          }),
+          (0, import_primitives.cylinder)({
+            center: [plated_hole.x, plated_hole.y, -1.2 / 2],
+            radius: plated_hole.outer_diameter / 2,
+            height: M
+          })
+        ),
+        (0, import_primitives.cylinder)({
+          center: [plated_hole.x, plated_hole.y, 0],
+          radius: plated_hole.hole_diameter / 2 - M,
+          height: 1.5
+        })
+      )
+    );
+  } else {
+    throw new Error(`Unsupported plated hole shape: ${plated_hole.shape}`);
+  }
+};
+
+// src/soup-to-3d/index.ts
+var import_extrusions = require("@jscad/modeling/src/operations/extrusions");
+var import_expansions = require("@jscad/modeling/src/operations/expansions");
+var createBoardGeomFromSoup = (soup) => {
+  const board = (0, import_soup_util.su)(soup).pcb_board.list()[0];
+  if (!board) {
+    throw new Error("No pcb_board found");
+  }
+  const plated_holes = (0, import_soup_util.su)(soup).pcb_plated_hole.list();
+  const pads = (0, import_soup_util.su)(soup).pcb_smtpad.list();
+  const traces = (0, import_soup_util.su)(soup).pcb_trace.list();
+  const pcb_vias = (0, import_soup_util.su)(soup).pcb_via.list();
+  let boardGeom = (0, import_primitives2.cuboid)({ size: [board.width, board.height, 1.2] });
+  const platedHoleGeoms = [];
+  const padGeoms = [];
+  const traceGeoms = [];
+  const ctx = {
+    pcbThickness: 1.2
+  };
+  const addPlatedHole = (plated_hole) => {
+    if (plated_hole.shape === "circle" || !plated_hole.shape) {
+      const cyGeom = (0, import_primitives2.cylinder)({
+        center: [plated_hole.x, plated_hole.y, 0],
+        radius: plated_hole.hole_diameter / 2 + M
+      });
+      boardGeom = (0, import_booleans2.subtract)(boardGeom, cyGeom);
+      const platedHoleGeom = platedHole(plated_hole, ctx);
+      platedHoleGeoms.push(platedHoleGeom);
+    }
+  };
+  for (const plated_hole of plated_holes) {
+    addPlatedHole(plated_hole);
+  }
+  for (const pad of pads) {
+    if (pad.shape === "rect") {
+      const padGeom = (0, import_colors2.colorize)(
+        colors.copper,
+        (0, import_primitives2.cuboid)({
+          center: [pad.x, pad.y, 1.2 / 2 + M],
+          size: [pad.width, pad.height, M]
+        })
+      );
+      padGeoms.push(padGeom);
+    } else if (pad.shape === "circle") {
+      const padGeom = (0, import_colors2.colorize)(
+        colors.copper,
+        (0, import_primitives2.cylinder)({
+          center: [pad.x, pad.y, 1.2 / 2 + M],
+          radius: pad.radius,
+          height: M
+        })
+      );
+      padGeoms.push(padGeom);
+    }
+  }
+  for (const { route: mixedRoute } of traces) {
+    const subRoutes = mixedRoute.reduce(
+      (c, p) => {
+        const lastLayer = c.current?.[c.current.length - 1]?.layer;
+        if (p.route_type === "via" || p.route_type === "wire" && p.layer !== lastLayer) {
+          if (c.current.length > 2) {
+            c.allPrev.push(c.current);
+          }
+          c.current = p.route_type === "wire" ? [p] : [];
+          return c;
+        }
+        c.current.push(p);
+        return c;
+      },
+      {
+        current: [],
+        allPrev: []
+      }
+    );
+    for (const route of subRoutes.allPrev.concat([subRoutes.current])) {
+      const linePath = (0, import_primitives2.line)(route.map((p) => [p.x, p.y]));
+      const layer = route[0].route_type === "wire" ? route[0].layer : "top";
+      const layerSign = layer === "top" ? 1 : -1;
+      let traceGeom = (0, import_transforms.translate)(
+        [0, 0, layerSign * 1.2 / 2],
+        (0, import_extrusions.extrudeLinear)(
+          { height: M * layerSign },
+          (0, import_expansions.expand)({ delta: 0.1, corners: "edge" }, linePath)
+        )
+      );
+      for (const via of pcb_vias) {
+        traceGeom = (0, import_booleans2.subtract)(
+          traceGeom,
+          (0, import_primitives2.cylinder)({
+            center: [via.x, via.y, 0],
+            radius: via.outer_diameter / 2,
+            height: 5
+          })
+        );
+      }
+      traceGeom = (0, import_colors2.colorize)(colors.fr4GreenSolderWithMask, traceGeom);
+      traceGeoms.push(traceGeom);
+    }
+    for (const via of mixedRoute.filter((p) => p.route_type === "via")) {
+      if (via.route_type !== "via") continue;
+      addPlatedHole({
+        x: via.x,
+        y: via.y,
+        hole_diameter: 0.8,
+        outer_diameter: 1.6,
+        shape: "circle",
+        layers: ["top", "bottom"],
+        type: "pcb_plated_hole"
+      });
+    }
+  }
+  for (const via of pcb_vias) {
+    addPlatedHole({
+      x: via.x,
+      y: via.y,
+      hole_diameter: via.hole_diameter,
+      outer_diameter: via.outer_diameter,
+      shape: "circle",
+      layers: ["top", "bottom"],
+      type: "pcb_plated_hole"
+    });
+  }
+  boardGeom = (0, import_colors2.colorize)(colors.fr4Green, boardGeom);
+  return [boardGeom, ...platedHoleGeoms, ...padGeoms, ...traceGeoms];
+};
+
+// src/hooks/use-stls-from-geom.ts
+var import_react = require("react");
+var import_stl_serializer = __toESM(require("@jscad/stl-serializer"), 1);
+function blobToBase64Url(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+var useStlsFromGeom = (geom) => {
+  const [stls, setStls] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    const generateStls = async () => {
+      setLoading(true);
+      const geometries = Array.isArray(geom) ? geom : [geom];
+      const stlPromises = geometries.map(async (g) => {
+        const rawData = import_stl_serializer.default.serialize({ binary: true }, [g]);
+        const blobData = new Blob(rawData);
+        const stlUrl = await blobToBase64Url(blobData);
+        return { stlUrl, color: g.color };
+      });
+      try {
+        const generatedStls = await Promise.all(stlPromises);
+        setStls(generatedStls);
+      } catch (error) {
+        console.error("Error generating STLs:", error);
+        setStls([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+    generateStls();
+  }, [geom]);
+  return { stls, loading };
+};
+
+// src/three-components/STLModel.tsx
+var import_fiber = require("@react-three/fiber");
+var import_react2 = require("react");
+var import_three_stdlib = require("three-stdlib");
+var import_jsx_runtime = require("react/jsx-runtime");
+function STLModel({
+  stlUrl,
+  mtlUrl,
+  color,
+  opacity = 1
+}) {
+  const geom = (0, import_fiber.useLoader)(import_three_stdlib.STLLoader, stlUrl);
+  const mesh = (0, import_react2.useRef)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { ref: mesh, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("primitive", { object: geom, attach: "geometry" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "meshStandardMaterial",
+      {
+        color,
+        transparent: opacity !== 1,
+        opacity
+      }
+    )
+  ] });
+}
+
+// src/CadViewerContainer.tsx
+var import_fiber3 = require("@react-three/fiber");
+var import_drei2 = require("@react-three/drei");
+
+// src/three-components/cube-with-labeled-sides.tsx
+var import_react3 = require("react");
+var import_fiber2 = require("@react-three/fiber");
+var import_drei = require("@react-three/drei");
+var THREE = __toESM(require("three"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+window.TSCI_MAIN_CAMERA_ROTATION = new THREE.Euler(0, 0, 0);
+function computePointInFront(rotationVector, distance) {
+  const quaternion = new THREE.Quaternion().setFromEuler(
+    new THREE.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  );
+  const forwardVector = new THREE.Vector3(0, 0, 1);
+  forwardVector.applyQuaternion(quaternion);
+  const result = forwardVector.multiplyScalar(distance);
+  return result;
+}
+var CubeWithLabeledSides = ({}) => {
+  const ref = (0, import_react3.useRef)();
+  const rotationTrackingRef = (0, import_react3.useRef)({ lastRotation: new THREE.Euler() });
+  (0, import_fiber2.useFrame)((state, delta) => {
+    if (!ref.current) return;
+    const mainRot = window.TSCI_MAIN_CAMERA_ROTATION;
+    const cameraPosition = computePointInFront(mainRot, 2);
+    state.camera.position.copy(cameraPosition);
+    state.camera.lookAt(0, 0, 0);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { ref, rotation: [Math.PI / 2, 0, 0], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [1, 1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "white" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drei.Text, { position: [0, 0, 0.51], fontSize: 0.25, color: "black", children: "Front" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_drei.Text,
+      {
+        position: [0, 0, -0.51],
+        fontSize: 0.25,
+        color: "black",
+        rotation: [0, Math.PI, 0],
+        children: "Back"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_drei.Text,
+      {
+        position: [0.51, 0, 0],
+        fontSize: 0.25,
+        color: "black",
+        rotation: [0, Math.PI / 2, 0],
+        children: "Right"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_drei.Text,
+      {
+        position: [-0.51, 0, 0],
+        fontSize: 0.25,
+        color: "black",
+        rotation: [0, -Math.PI / 2, 0],
+        children: "Left"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_drei.Text,
+      {
+        position: [0, 0.51, 0],
+        fontSize: 0.25,
+        color: "black",
+        rotation: [-Math.PI / 2, 0, 0],
+        children: "Top"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_drei.Text,
+      {
+        position: [0, -0.51, 0],
+        fontSize: 0.25,
+        color: "black",
+        rotation: [Math.PI / 2, 0, 0],
+        children: "Bottom"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "lineSegments",
+      {
+        args: [new THREE.EdgesGeometry(new THREE.BoxGeometry(1, 1, 1))],
+        material: new THREE.LineBasicMaterial({
+          color: 0,
+          linewidth: 2
+        })
+      }
+    )
+  ] });
+};
+
+// src/CadViewerContainer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RotationTracker = () => {
+  (0, import_fiber3.useFrame)(({ camera }) => {
+    window.TSCI_MAIN_CAMERA_ROTATION = camera.rotation;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+};
+var CadViewerContainer = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: 120,
+          height: 120
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_fiber3.Canvas,
+          {
+            camera: {
+              up: [0, 0, 1],
+              // rotation: [-Math.PI / 2, 0, 0],
+              // lookAt: new THREE.Vector3(0, 0, 0),
+              position: [1, 1, 1]
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ambientLight", { intensity: Math.PI / 2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CubeWithLabeledSides, {})
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_fiber3.Canvas,
+      {
+        scene: { up: [0, 0, 1] },
+        camera: { up: [0, 0, 1], position: [5, 5, 5] },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RotationTracker, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_drei2.OrbitControls, { autoRotate: true, autoRotateSpeed: 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ambientLight", { intensity: Math.PI / 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "pointLight",
+            {
+              position: [-10, -10, 10],
+              decay: 0,
+              intensity: Math.PI / 4
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_drei2.Grid,
+            {
+              rotation: [Math.PI / 2, 0, 0],
+              infiniteGrid: true,
+              cellSize: 1,
+              sectionSize: 10
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+};
+
+// src/three-components/MixedStlModel.tsx
+var import_react4 = require("react");
+var import_three_stdlib2 = require("three-stdlib");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function MixedStlModel({
+  url,
+  position,
+  rotation
+}) {
+  const [obj, setObj] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    async function loadUrlContent() {
+      const response = await fetch(url);
+      const text = await response.text();
+      const mtlContent = text.match(/newmtl[\s\S]*?endmtl/g)?.join("\n").replace(/d 0\./g, "d 1.");
+      const objContent = text.replace(/newmtl[\s\S]*?endmtl/g, "");
+      const mtlLoader = new import_three_stdlib2.MTLLoader();
+      mtlLoader.setMaterialOptions({
+        invertTrProperty: true
+      });
+      const materials = mtlLoader.parse(
+        // Grayscale the colors, for some reason everything from JLCPCB is
+        // a bit red, it doesn't look right. The grayscale version looks OK,
+        // it's a HACK because we only take the second color rather than
+        // averaging the colors
+        mtlContent.replace(
+          /Kd\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/g,
+          "Kd $2 $2 $2"
+        ),
+        "test.mtl"
+      );
+      const objLoader = new import_three_stdlib2.OBJLoader();
+      objLoader.setMaterials(materials);
+      setObj(objLoader.parse(objContent));
+    }
+    loadUrlContent();
+  }, [url]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("group", { rotation, position, children: obj && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("primitive", { object: obj }) });
+}
+
+// src/CadViewer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CadViewer = ({ soup, children }) => {
+  soup ??= useConvertChildrenToSoup(children, soup);
+  const boardGeom = (0, import_react5.useMemo)(() => createBoardGeomFromSoup(soup), [soup]);
+  const { stls, loading } = useStlsFromGeom(boardGeom);
+  const cad_components = (0, import_soup_util2.su)(soup).cad_component.list();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CadViewerContainer, { children: [
+    stls.map(({ stlUrl, color }, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      STLModel,
+      {
+        stlUrl,
+        color,
+        opacity: index === 0 ? 0.95 : 1
+      },
+      stlUrl
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      MixedStlModel,
+      {
+        url: "/easyeda-models/dc694c23844346e9981bdbac7bb76421",
+        position: [0, 0, 0.5],
+        rotation: [0, 0, Math.PI / 2]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      MixedStlModel,
+      {
+        url: "/easyeda-models/c7acac53bcbc44d68fbab8f60a747688",
+        position: [-5.65, 0, 0.5],
+        rotation: [0, 0, Math.PI / 2]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      MixedStlModel,
+      {
+        url: "/easyeda-models/c7acac53bcbc44d68fbab8f60a747688",
+        position: [6.75, 0, 0.5],
+        rotation: [0, 0, 0]
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CadViewer
+});
+//# sourceMappingURL=index.cjs.map