@wandelbots/wandelbots-js-react-components 5.4.1 → 5.4.2-pr.ci-pr-preview.586.f684aae

package/dist/MotionGroupVisualizer-CIASsBC6.js

@@ -0,0 +1,1433 @@
+import { j as t, g as Te, v as ke, o as Se, h as Le, k as Ge, l as Ce, s as Pe, m as Fe, n as Ae, p as Ie, q as De, N as Oe, V as se, c as oe, r as V, t as Ue, B as w, T as K, b as Z, D as Q, w as z, M, J as O } from "./interpolation-lSTX6ZXZ.js";
+import * as g from "three";
+import { Matrix4 as b, Vector3 as S, Quaternion as B } from "three";
+import { ConvexGeometry as ie, RoundedBoxGeometry as Ve } from "three-stdlib";
+import * as Ee from "react";
+import Je, { useMemo as U, useRef as v, useEffect as _, useCallback as k, useState as L, Suspense as ae } from "react";
+import { Environment as Be, Lightformer as C, Line as N, useGLTF as Ne, Bounds as ee } from "@react-three/drei";
+import { useThree as le, useFrame as ce, Canvas as te } from "@react-three/fiber";
+import { observer as We } from "mobx-react-lite";
+import { useTranslation as $e } from "react-i18next";
+import R from "prop-types";
+import { ErrorBoundary as ue } from "react-error-boundary";
+function He(e) {
+  switch (e.shape_type) {
+    case "convex_hull":
+      return new ie(
+        e.vertices.map(
+          (n) => new g.Vector3(
+            n[0] / 1e3,
+            n[1] / 1e3,
+            n[2] / 1e3
+          )
+        )
+      );
+    case "box":
+      return new g.BoxGeometry(
+        e.size_x / 1e3,
+        e.size_y / 1e3,
+        e.size_z / 1e3
+      );
+    case "sphere":
+      return new g.SphereGeometry(e.radius / 1e3);
+    case "capsule":
+      return new g.CapsuleGeometry(
+        e.radius / 1e3,
+        e.cylinder_height / 1e3
+      );
+    case "cylinder":
+      return new g.CylinderGeometry(
+        e.radius / 1e3,
+        e.radius / 1e3,
+        e.height / 1e3
+      );
+    case "rectangle":
+      return new g.BoxGeometry(e.size_x / 1e3, e.size_y / 1e3, 0);
+    default:
+      return console.warn(`${e.shape_type} is not supported`), new g.BufferGeometry();
+  }
+}
+function qe({
+  name: e,
+  collider: r,
+  children: n
+}) {
+  var d, u;
+  const i = ((d = r.pose) == null ? void 0 : d.position) ?? [0, 0, 0], o = ((u = r.pose) == null ? void 0 : u.orientation) ?? [0, 0, 0];
+  return r.margin && console.warn(`${e} margin is not supported`), /* @__PURE__ */ t.jsx(
+    "mesh",
+    {
+      name: e,
+      position: new g.Vector3(
+        i[0],
+        i[1],
+        i[2]
+      ).divideScalar(1e3),
+      rotation: new g.Euler(o[0], o[1], o[2], "XYZ"),
+      geometry: He(r.shape),
+      children: n
+    }
+  );
+}
+function Ye({
+  name: e,
+  colliders: r,
+  meshChildrenProvider: n,
+  ...i
+}) {
+  return /* @__PURE__ */ t.jsx("group", { name: e, ...i, children: Object.entries(r).map(([o, d]) => /* @__PURE__ */ t.jsx(
+    qe,
+    {
+      name: o,
+      collider: d,
+      children: n(o, d)
+    },
+    o
+  )) });
+}
+function jt({
+  scene: e,
+  meshChildrenProvider: r
+}) {
+  const n = e.colliders;
+  return /* @__PURE__ */ t.jsx("group", { children: n && /* @__PURE__ */ t.jsx(
+    Ye,
+    {
+      meshChildrenProvider: r,
+      colliders: n
+    }
+  ) });
+}
+function ne() {
+  return /* @__PURE__ */ t.jsx(Be, { children: /* @__PURE__ */ t.jsx(Xe, {}) });
+}
+function Xe({ positions: e = [2, 0, 2, 0, 2, 0, 2, 0] }) {
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      C,
+      {
+        intensity: 5,
+        "rotation-x": Math.PI / 2,
+        position: [0, 5, -9],
+        scale: [10, 10, 1]
+      }
+    ),
+    /* @__PURE__ */ t.jsx("group", { rotation: [0, 0.5, 0], children: /* @__PURE__ */ t.jsx("group", { children: e.map((r, n) => /* @__PURE__ */ t.jsx(
+      C,
+      {
+        form: "circle",
+        intensity: 5,
+        rotation: [Math.PI / 2, 0, 0],
+        position: [r, 4, n * 4],
+        scale: [3, 1, 1]
+      },
+      n
+    )) }) }),
+    /* @__PURE__ */ t.jsx(
+      C,
+      {
+        intensity: 40,
+        "rotation-y": Math.PI / 2,
+        position: [-5, 1, -1],
+        scale: [20, 0.1, 1]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      C,
+      {
+        intensity: 20,
+        "rotation-y": -Math.PI,
+        position: [-5, -2, -1],
+        scale: [20, 0.1, 1]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      C,
+      {
+        "rotation-y": Math.PI / 2,
+        position: [-5, -1, -1],
+        scale: [20, 0.5, 1],
+        intensity: 5
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      C,
+      {
+        "rotation-y": -Math.PI / 2,
+        position: [10, 1, 0],
+        scale: [20, 1, 1],
+        intensity: 10
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      C,
+      {
+        form: "ring",
+        color: "white",
+        intensity: 5,
+        scale: 10,
+        position: [-15, 4, -18],
+        target: [0, 0, 0]
+      }
+    )
+  ] });
+}
+function bt({
+  safetyZones: e,
+  dhParameters: r,
+  ...n
+}) {
+  const i = {
+    attach: "material",
+    color: "#009f4d",
+    opacity: 0.2,
+    depthTest: !1,
+    depthWrite: !1,
+    transparent: !0,
+    polygonOffset: !0
+  }, o = Te(r ?? []), d = (h, l) => {
+    var f, x;
+    if (!((f = l == null ? void 0 : l.pose) != null && f.position) || !((x = l == null ? void 0 : l.pose) != null && x.orientation))
+      return null;
+    const a = new g.Vector3(
+      l.pose.position[0] / 1e3,
+      l.pose.position[1] / 1e3,
+      l.pose.position[2] / 1e3
+    ), m = new g.Vector3(
+      l.pose.orientation[0],
+      l.pose.orientation[1],
+      l.pose.orientation[2]
+    );
+    let s;
+    const c = l.shape.shape_type === "plane" ? { ...i, side: g.DoubleSide } : { ...i, side: g.FrontSide };
+    switch (l.shape.shape_type) {
+      /**
+       * Plane shape, uses DH parameters to calculate the size of the plane (reach distance of a robot)
+       */
+      case "plane":
+        s = /* @__PURE__ */ t.jsx("planeGeometry", { args: [o, o] });
+        break;
+      /**
+       * Sphere shape
+       */
+      case "sphere": {
+        const p = (l == null ? void 0 : l.shape).radius / 1e3;
+        s = /* @__PURE__ */ t.jsx("sphereGeometry", { args: [p] });
+        break;
+      }
+      /**
+       * Capsule shape
+       */
+      case "capsule": {
+        const p = (l == null ? void 0 : l.shape).radius / 1e3, j = (l == null ? void 0 : l.shape).cylinder_height / 1e3;
+        s = /* @__PURE__ */ t.jsx("capsuleGeometry", { args: [p, j] });
+        break;
+      }
+      /**
+       * Convex hull, checks at first if the vertices are coplanar - if yes, adds a small offset for
+       * renderer to be able to visualize the convex hull.
+       */
+      case "convex_hull": {
+        const p = (l == null ? void 0 : l.shape).vertices.map(
+          (y) => new g.Vector3(y[0] / 1e3, y[1] / 1e3, y[2] / 1e3)
+        ), j = ke(p);
+        if (j.isCoplanar && j.normal) {
+          const G = new g.Vector3().addVectors(
+            p[0],
+            j.normal.multiplyScalar(1e-4)
+          );
+          p.push(G);
+        }
+        try {
+          s = /* @__PURE__ */ t.jsx(
+            "primitive",
+            {
+              object: new ie(p),
+              attach: "geometry"
+            }
+          );
+        } catch (y) {
+          return console.log("Error creating ConvexGeometry:", y), null;
+        }
+        break;
+      }
+      /**
+       * Convex hull around four spheres. Sphere center points in x/y-plane,
+       * offset by either combination "+/- sizeX" or "+/- sizeY".
+       * Alternative description: Rectangle in x/y-plane with a 3D padding (source: nova-api docs)
+       *
+       * Basically a rounded box with a rectangular cross-section.
+       */
+      case "rectangular_capsule": {
+        const p = l.shape, j = p.radius / 1e3, y = p.sphere_center_distance_x / 1e3, G = p.sphere_center_distance_y / 1e3, P = j * 2;
+        s = /* @__PURE__ */ t.jsx(
+          "primitive",
+          {
+            object: new Ve(y, G, P, 2, j),
+            attach: "geometry"
+          }
+        );
+        break;
+      }
+      default:
+        console.warn(
+          "Unsupported safety zone shape type:",
+          l.shape.shape_type
+        ), s = null;
+    }
+    return /* @__PURE__ */ t.jsxs(
+      "mesh",
+      {
+        renderOrder: h,
+        position: a,
+        quaternion: Se(m),
+        children: [
+          s,
+          /* @__PURE__ */ t.jsx("meshStandardMaterial", { ...c, polygonOffsetFactor: -h })
+        ]
+      },
+      `safety-zone-${l.shape.shape_type}-${h}`
+    );
+  }, u = U(() => Object.values(e ?? {}).map(
+    (h, l) => d(l, h)
+  ), [e, o]);
+  return /* @__PURE__ */ t.jsx("group", { ...n, children: u });
+}
+function wt({
+  trajectory: e,
+  ...r
+}) {
+  const n = (e == null ? void 0 : e.map((i) => {
+    if (i.position && i.position.length >= 3) {
+      const [o, d, u] = i.position;
+      if (Number.isFinite(o) && Number.isFinite(d) && Number.isFinite(u))
+        return new g.Vector3(o / 1e3, u / 1e3, -d / 1e3);
+    }
+    return null;
+  }).filter((i) => i !== null)) || [];
+  return /* @__PURE__ */ t.jsx("group", { ...r, children: n.length > 0 && /* @__PURE__ */ t.jsx(
+    N,
+    {
+      points: n,
+      lineWidth: 3,
+      polygonOffset: !0,
+      polygonOffsetFactor: 10,
+      polygonOffsetUnits: 10
+    }
+  ) });
+}
+function Ke(e) {
+  return Le("MuiCard", e);
+}
+Ge("MuiCard", ["root"]);
+const Ze = (e) => {
+  const {
+    classes: r
+  } = e;
+  return Ae({
+    root: ["root"]
+  }, Ke, r);
+}, Qe = Pe(Ie, {
+  name: "MuiCard",
+  slot: "Root"
+})({
+  overflow: "hidden"
+}), de = /* @__PURE__ */ Ee.forwardRef(function(r, n) {
+  const i = Ce({
+    props: r,
+    name: "MuiCard"
+  }), {
+    className: o,
+    raised: d = !1,
+    ...u
+  } = i, h = {
+    ...i,
+    raised: d
+  }, l = Ze(h);
+  return /* @__PURE__ */ t.jsx(Qe, {
+    className: Fe(l.root, o),
+    elevation: d ? 8 : void 0,
+    ref: n,
+    ownerState: h,
+    ...u
+  });
+});
+process.env.NODE_ENV !== "production" && (de.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: R.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: R.object,
+  /**
+   * @ignore
+   */
+  className: R.string,
+  /**
+   * If `true`, the card will use raised styling.
+   * @default false
+   */
+  raised: De(R.bool, (e) => e.raised && e.variant === "outlined" ? new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.') : null),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: R.oneOfType([R.arrayOf(R.oneOfType([R.func, R.object, R.bool])), R.func, R.object])
+});
+const J = /* @__PURE__ */ new Map();
+async function E(e, r) {
+  if (J.has(e))
+    return J.get(e);
+  const n = (async () => {
+    var u;
+    const i = r || "", o = new Oe({ instanceUrl: i }), d = o.api.motionGroupModels;
+    (u = d.axios) != null && u.interceptors && d.axios.interceptors.request.use((h) => {
+      var l;
+      return (l = h.url) != null && l.includes("/glb") && (h.responseType = "blob"), h;
+    });
+    try {
+      const h = await o.api.motionGroupModels.getMotionGroupGlbModel(
+        e
+      );
+      return URL.createObjectURL(h);
+    } catch (h) {
+      throw console.error("Failed to fetch model:", h), h;
+    }
+  })();
+  return J.set(e, n), n;
+}
+function pe(e) {
+  function r(n) {
+    return n.children.length === 0 ? [n] : [n, ...n.children.flatMap((i) => r(i))];
+  }
+  return r(e).filter((n) => he(n));
+}
+function fe(e) {
+  return e.name.endsWith("_FLG");
+}
+function he(e) {
+  return /_J[0-9]+$/.test(e.name);
+}
+function ze(e, r) {
+  let n;
+  function i(o) {
+    if (fe(o)) {
+      if (n)
+        throw Error(
+          `Found multiple flange groups in robot model ${r}; first ${n.name} then ${o.name}. Only one _FLG group is allowed.`
+        );
+      n = o;
+    }
+    he(o), o.children.map(i);
+  }
+  if (i(e.scene), !n)
+    throw Error(
+      `No flange group found in robot model ${r}. Flange must be identified with a name ending in _FLG.`
+    );
+  return { gltf: e };
+}
+function me({
+  rapidlyChangingMotionState: e,
+  dhParameters: r,
+  onRotationChanged: n,
+  children: i
+}) {
+  const o = v([]), d = v([]), u = v(null), { invalidate: h } = le();
+  _(() => {
+    const s = e.joint_position.filter(
+      (c) => c !== void 0
+    );
+    return u.current = new se(s, {
+      tension: 120,
+      // Controls spring stiffness - higher values create faster, more responsive motion
+      friction: 20,
+      // Controls damping - higher values reduce oscillation and create smoother settling
+      threshold: 1e-3
+    }), () => {
+      var c;
+      (c = u.current) == null || c.destroy();
+    };
+  }, []), ce((s, c) => {
+    if (u.current) {
+      const f = u.current.update(c);
+      a(), f || h();
+    }
+  });
+  function l(s) {
+    s && (d.current = pe(s), a(), h());
+  }
+  function a() {
+    var c;
+    const s = ((c = u.current) == null ? void 0 : c.getCurrentValues()) || [];
+    if (n)
+      n(d.current, s);
+    else
+      for (const [f, x] of d.current.entries()) {
+        const p = r[f], j = p.theta || 0, y = p.reverse_rotation_direction ? -1 : 1;
+        x.rotation.y = y * (s[f] || 0) + j;
+      }
+  }
+  const m = k(() => {
+    const s = e.joint_position.filter(
+      (c) => c !== void 0
+    );
+    requestAnimationFrame(() => {
+      var c;
+      o.current = s, (c = u.current) == null || c.setTarget(s);
+    });
+  }, [e]);
+  return _(() => {
+    m();
+  }, [e, m]), oe(() => {
+    m();
+  }), /* @__PURE__ */ t.jsx("group", { ref: l, children: i });
+}
+const et = "line", tt = "mesh";
+function nt({
+  rapidlyChangingMotionState: e,
+  dhParameters: r,
+  ...n
+}) {
+  const i = new b(), o = v([]), d = v([]);
+  Je.useEffect(() => {
+    o.current = new Array(r.length).fill(null), d.current = new Array(r.length).fill(null);
+  }, [r.length]);
+  function u(a, m) {
+    const s = new S(), c = new B(), f = new S();
+    i.decompose(s, c, f);
+    const x = s.clone(), p = new b().makeRotationY(
+      a.theta + m * (a.reverse_rotation_direction ? -1 : 1)
+    ).multiply(new b().makeTranslation(0, a.d / 1e3, 0)).multiply(new b().makeTranslation(a.a / 1e3, 0, 0)).multiply(new b().makeRotationX(a.alpha));
+    return i.multiply(p), i.decompose(s, c, f), { a: x, b: s };
+  }
+  function h(a, m, s, c) {
+    if (!r)
+      return;
+    const f = r[a];
+    if (!f)
+      return;
+    const { a: x, b: p } = u(f, c);
+    m.geometry.setPositions([x.toArray(), p.toArray()].flat()), s.position.set(p.x, p.y, p.z);
+  }
+  function l(a, m) {
+    i.identity();
+    for (let s = 0; s < Math.min(a.length, m.length); s++) {
+      const c = o.current[s], f = d.current[s];
+      c && f && h(s, c, f, m[s]);
+    }
+  }
+  return /* @__PURE__ */ t.jsx(
+    me,
+    {
+      rapidlyChangingMotionState: e,
+      dhParameters: r,
+      onRotationChanged: l,
+      children: /* @__PURE__ */ t.jsxs("group", { ...n, name: "Scene", children: [
+        /* @__PURE__ */ t.jsxs("mesh", { children: [
+          /* @__PURE__ */ t.jsx("sphereGeometry", { args: [0.01, 32, 32] }),
+          /* @__PURE__ */ t.jsx("meshStandardMaterial", { color: "black", depthTest: !0 })
+        ] }),
+        r == null ? void 0 : r.map((a, m) => {
+          const { a: s, b: c } = u(
+            a,
+            e.joint_position[m] ?? 0
+          ), f = `dhrobot_J0${m}`;
+          return /* @__PURE__ */ t.jsxs("group", { name: f, children: [
+            /* @__PURE__ */ t.jsx(
+              N,
+              {
+                ref: (x) => {
+                  o.current[m] = x;
+                },
+                name: et,
+                points: [s, c],
+                color: "white",
+                lineWidth: 5
+              }
+            ),
+            /* @__PURE__ */ t.jsxs(
+              "mesh",
+              {
+                ref: (x) => {
+                  d.current[m] = x;
+                },
+                name: tt,
+                position: c,
+                children: [
+                  /* @__PURE__ */ t.jsx("sphereGeometry", { args: [0.01, 32, 32] }),
+                  /* @__PURE__ */ t.jsx("meshStandardMaterial", { color: "black", depthTest: !0 })
+                ]
+              },
+              `mesh_${m}`
+            )
+          ] }, f);
+        })
+      ] })
+    }
+  );
+}
+const rt = console.warn;
+function xe() {
+  return _(() => {
+    console.warn = (e) => {
+      e !== "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand" && rt(e);
+    };
+  }, []), null;
+}
+function st(e) {
+  return e.type === "Mesh";
+}
+function ot({
+  url: e,
+  flangeRef: r,
+  postModelRender: n,
+  ...i
+}) {
+  const o = Ne(e), u = ze(o, "robot.glb").gltf, h = k(
+    (a) => {
+      a && n && n();
+    },
+    [n]
+  );
+  function l(a) {
+    try {
+      return st(a) ? a.geometry ? /* @__PURE__ */ t.jsx(
+        "mesh",
+        {
+          name: a.name,
+          geometry: a.geometry,
+          material: a.material,
+          position: a.position,
+          rotation: a.rotation
+        },
+        a.uuid
+      ) : /* @__PURE__ */ t.jsx(
+        "group",
+        {
+          name: a.name,
+          position: a.position,
+          rotation: a.rotation
+        },
+        a.uuid
+      ) : /* @__PURE__ */ t.jsx(
+        "group",
+        {
+          name: a.name,
+          position: a.position,
+          rotation: a.rotation,
+          ref: fe(a) ? r : void 0,
+          children: a.children.map(l)
+        },
+        a.uuid
+      );
+    } catch (m) {
+      return console.warn("Error rendering node", a.name, m), null;
+    }
+  }
+  return /* @__PURE__ */ t.jsx("group", { ...i, dispose: null, ref: h, children: l(u.scene) });
+}
+function ye({
+  modelURL: e,
+  flangeRef: r,
+  postModelRender: n,
+  ...i
+}) {
+  const [o, d] = L(null);
+  return _(() => {
+    (async () => {
+      try {
+        if (typeof e == "string")
+          d(e);
+        else {
+          const h = await e;
+          d(h);
+        }
+      } catch (h) {
+        console.error("Failed to resolve model URL:", h);
+      }
+    })();
+  }, [e]), o ? /* @__PURE__ */ t.jsx(
+    ot,
+    {
+      url: o,
+      flangeRef: r,
+      postModelRender: n,
+      ...i
+    }
+  ) : null;
+}
+const ge = (e, r) => {
+  e.userData.isGhost || (e.traverse((n) => {
+    if (n instanceof g.Mesh) {
+      n.material instanceof g.Material && (n.material.colorWrite = !1);
+      const i = n.clone(), o = n.clone();
+      i.material = new g.MeshStandardMaterial({
+        depthTest: !0,
+        depthWrite: !0,
+        colorWrite: !1,
+        polygonOffset: !0,
+        polygonOffsetFactor: -1,
+        side: g.DoubleSide
+      }), i.userData.isGhost = !0, o.material = new g.MeshStandardMaterial({
+        color: r,
+        opacity: 0.3,
+        depthTest: !0,
+        depthWrite: !1,
+        transparent: !0,
+        polygonOffset: !0,
+        polygonOffsetFactor: -2,
+        side: g.DoubleSide
+      }), o.userData.isGhost = !0, n.parent && (n.parent.add(i), n.parent.add(o));
+    }
+  }), e.userData.isGhost = !0);
+}, je = (e) => {
+  if (!e.userData.isGhost) return;
+  const r = [];
+  e.traverse((n) => {
+    var i;
+    n instanceof g.Mesh && ((i = n.userData) != null && i.isGhost ? r.push(n) : n.material instanceof g.Material && (n.material.colorWrite = !0));
+  }), r.forEach((n) => {
+    n.parent && n.parent.remove(n);
+  }), e.userData.isGhost = !1;
+}, be = V(
+  ({
+    rapidlyChangingMotionState: e,
+    modelFromController: r,
+    dhParameters: n,
+    getModel: i = E,
+    flangeRef: o,
+    postModelRender: d,
+    transparentColor: u,
+    instanceUrl: h,
+    ...l
+  }) => {
+    const [a, m] = L(null), s = k((f) => {
+      m(f);
+    }, []);
+    _(() => {
+      a && (u ? ge(a, u) : je(a));
+    }, [a, u]);
+    const c = /* @__PURE__ */ t.jsx(
+      nt,
+      {
+        rapidlyChangingMotionState: e,
+        dhParameters: n,
+        ...l
+      }
+    );
+    return /* @__PURE__ */ t.jsxs(
+      ue,
+      {
+        fallback: c,
+        onError: (f) => {
+          console.warn(f);
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ae, { fallback: c, children: /* @__PURE__ */ t.jsx("group", { ref: s, children: /* @__PURE__ */ t.jsx(
+            me,
+            {
+              rapidlyChangingMotionState: e,
+              dhParameters: n,
+              children: /* @__PURE__ */ t.jsx(
+                ye,
+                {
+                  modelURL: (() => {
+                    const f = i(r, h);
+                    if (!f) {
+                      const x = new Blob([], { type: "model/gltf-binary" }), p = new File(
+                        [x],
+                        `${r}.glb`,
+                        { type: "model/gltf-binary" }
+                      );
+                      return Promise.resolve(URL.createObjectURL(p));
+                    }
+                    return f;
+                  })(),
+                  postModelRender: d,
+                  flangeRef: o,
+                  ...l
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ t.jsx(xe, {})
+        ]
+      }
+    );
+  }
+);
+function it({
+  connectedMotionGroup: e,
+  getModel: r = E,
+  flangeRef: n,
+  transparentColor: i,
+  postModelRender: o,
+  ...d
+}) {
+  return e.dhParameters ? /* @__PURE__ */ t.jsx(
+    be,
+    {
+      rapidlyChangingMotionState: e.rapidlyChangingMotionState,
+      modelFromController: e.modelFromController || "",
+      dhParameters: e.dhParameters,
+      getModel: r,
+      flangeRef: n,
+      transparentColor: i,
+      postModelRender: o,
+      ...d
+    }
+  ) : null;
+}
+const Rt = V(
+  We(
+    ({
+      robotName: e,
+      programState: r,
+      safetyState: n,
+      operationMode: i,
+      driveToHomeEnabled: o = !1,
+      onDriveToHomePress: d,
+      onDriveToHomeRelease: u,
+      connectedMotionGroup: h,
+      robotComponent: l = it,
+      customContentComponent: a,
+      className: m
+    }) => {
+      var H;
+      const s = Ue(), { t: c } = $e(), [f, x] = L(!1), p = v(null), j = v(null), [y, G] = L(!1), [P, Me] = L({ width: 400, height: 600 }), [lt, _e] = L(0);
+      _(() => {
+        const D = () => {
+          if (j.current) {
+            const { offsetWidth: Y, offsetHeight: X } = j.current;
+            G(Y > X), Me({ width: Y, height: X });
+          }
+        };
+        D();
+        const q = new ResizeObserver(D);
+        return j.current && q.observe(j.current), () => {
+          q.disconnect();
+        };
+      }, []);
+      const W = k(() => {
+        _e((D) => D + 1);
+      }, []), F = k(() => {
+        !o || !d || (x(!0), d());
+      }, [o, d]), A = k(() => {
+        !o || !u || (x(!1), u());
+      }, [o, u]), $ = k(() => {
+        f && u && (x(!1), u());
+      }, [f, u]), T = y ? P.width < 350 : P.height < 200, I = y ? P.height < 310 : P.height < 450;
+      return /* @__PURE__ */ t.jsx(
+        de,
+        {
+          ref: j,
+          className: m,
+          sx: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: y ? "row" : "column",
+            position: "relative",
+            overflow: "hidden",
+            minWidth: { xs: 180, sm: 220, md: 250 },
+            minHeight: y ? { xs: 200, sm: 240, md: 260 } : { xs: 150, sm: 180, md: 220 },
+            // Allow progressive hiding in portrait mode
+            border: `1px solid ${s.palette.divider}`,
+            borderRadius: "18px",
+            boxShadow: "none",
+            backgroundColor: ((H = s.palette.backgroundPaperElevation) == null ? void 0 : H[8]) || "#2A2A3F",
+            backgroundImage: "none"
+            // Override any gradient from elevation
+          },
+          children: y ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsx(
+              w,
+              {
+                sx: {
+                  flex: "0 0 50%",
+                  position: "relative",
+                  height: "100%",
+                  minHeight: "100%",
+                  maxHeight: "100%",
+                  borderRadius: 1,
+                  m: { xs: 1.5, sm: 2, md: 3 },
+                  mr: { xs: 0.75, sm: 1, md: 1.5 },
+                  overflow: "hidden",
+                  // Prevent content from affecting container size
+                  display: T ? "none" : "block"
+                },
+                children: !T && /* @__PURE__ */ t.jsxs(
+                  te,
+                  {
+                    orthographic: !0,
+                    camera: {
+                      position: [3, 2, 3],
+                      zoom: 1
+                    },
+                    shadows: !0,
+                    frameloop: "demand",
+                    style: {
+                      borderRadius: s.shape.borderRadius,
+                      width: "100%",
+                      height: "100%",
+                      background: "transparent",
+                      position: "absolute",
+                      top: 0,
+                      left: 0
+                    },
+                    dpr: [1, 2],
+                    gl: { alpha: !0, antialias: !0 },
+                    children: [
+                      /* @__PURE__ */ t.jsx(ne, {}),
+                      /* @__PURE__ */ t.jsx(ee, { fit: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ t.jsx(
+                        l,
+                        {
+                          connectedMotionGroup: h,
+                          postModelRender: W
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ t.jsxs(
+              w,
+              {
+                sx: {
+                  flex: "1",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "flex-start",
+                  width: T ? "100%" : "50%"
+                },
+                children: [
+                  /* @__PURE__ */ t.jsxs(
+                    w,
+                    {
+                      sx: {
+                        p: { xs: 1.5, sm: 2, md: 3 },
+                        pb: { xs: 1, sm: 1.5, md: 2 },
+                        textAlign: "left"
+                      },
+                      children: [
+                        /* @__PURE__ */ t.jsx(K, { variant: "h6", component: "h2", sx: { mb: 1 }, children: e }),
+                        /* @__PURE__ */ t.jsx(
+                          Z,
+                          {
+                            programState: r,
+                            safetyState: n,
+                            operationMode: i
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsxs(
+                    w,
+                    {
+                      sx: {
+                        p: { xs: 1.5, sm: 2, md: 3 },
+                        pt: 0,
+                        flex: "1",
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "space-between"
+                      },
+                      children: [
+                        !I && a && /* @__PURE__ */ t.jsxs(w, { children: [
+                          /* @__PURE__ */ t.jsx(a, {}),
+                          /* @__PURE__ */ t.jsx(
+                            Q,
+                            {
+                              sx: {
+                                mt: 1,
+                                mb: 0,
+                                borderColor: s.palette.divider,
+                                opacity: 0.5
+                              }
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ t.jsx(
+                          w,
+                          {
+                            sx: {
+                              mt: !I && a ? "auto" : 0
+                            },
+                            children: /* @__PURE__ */ t.jsx(
+                              w,
+                              {
+                                sx: {
+                                  display: "flex",
+                                  justifyContent: "flex-start",
+                                  mt: { xs: 1, sm: 1.5, md: 2 },
+                                  mb: { xs: 0.5, sm: 0.75, md: 1 }
+                                },
+                                children: /* @__PURE__ */ t.jsx(
+                                  z,
+                                  {
+                                    ref: p,
+                                    variant: "contained",
+                                    color: "secondary",
+                                    size: "small",
+                                    disabled: !o,
+                                    onMouseDown: F,
+                                    onMouseUp: A,
+                                    onMouseLeave: $,
+                                    onTouchStart: F,
+                                    onTouchEnd: A,
+                                    sx: {
+                                      textTransform: "none",
+                                      px: 1.5,
+                                      py: 0.5
+                                    },
+                                    children: c("RobotCard.DriveToHome.bt")
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs(
+            w,
+            {
+              sx: {
+                p: 3,
+                height: "100%",
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ t.jsxs(w, { children: [
+                  /* @__PURE__ */ t.jsx(K, { variant: "h6", component: "h2", sx: { mb: 1 }, children: e }),
+                  /* @__PURE__ */ t.jsx(
+                    Z,
+                    {
+                      programState: r,
+                      safetyState: n,
+                      operationMode: i
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t.jsx(
+                  w,
+                  {
+                    sx: {
+                      flex: T ? 0 : 1,
+                      position: "relative",
+                      minHeight: T ? 0 : { xs: 120, sm: 150, md: 200 },
+                      height: T ? 0 : "auto",
+                      borderRadius: 1,
+                      overflow: "hidden",
+                      display: T ? "none" : "block"
+                    },
+                    children: !T && /* @__PURE__ */ t.jsxs(
+                      te,
+                      {
+                        orthographic: !0,
+                        camera: {
+                          position: [3, 2, 3],
+                          zoom: 1
+                        },
+                        shadows: !0,
+                        frameloop: "demand",
+                        style: {
+                          borderRadius: s.shape.borderRadius,
+                          width: "100%",
+                          height: "100%",
+                          background: "transparent",
+                          position: "absolute"
+                        },
+                        dpr: [1, 2],
+                        gl: { alpha: !0, antialias: !0 },
+                        children: [
+                          /* @__PURE__ */ t.jsx(ne, {}),
+                          /* @__PURE__ */ t.jsx(ee, { fit: !0, clip: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ t.jsx(
+                            l,
+                            {
+                              connectedMotionGroup: h,
+                              postModelRender: W
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ t.jsxs(w, { children: [
+                  !I && a && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                    /* @__PURE__ */ t.jsx(a, {}),
+                    /* @__PURE__ */ t.jsx(
+                      Q,
+                      {
+                        sx: {
+                          mt: 1,
+                          mb: 0,
+                          borderColor: s.palette.divider,
+                          opacity: 0.5
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ t.jsx(
+                    w,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "flex-start",
+                        mt: !I && a ? { xs: 1, sm: 2, md: 5 } : { xs: 0.5, sm: 1, md: 2 },
+                        mb: { xs: 0.5, sm: 0.75, md: 1 }
+                      },
+                      children: /* @__PURE__ */ t.jsx(
+                        z,
+                        {
+                          ref: p,
+                          variant: "contained",
+                          color: "secondary",
+                          size: "small",
+                          disabled: !o,
+                          onMouseDown: F,
+                          onMouseUp: A,
+                          onMouseLeave: $,
+                          onTouchStart: F,
+                          onTouchEnd: A,
+                          sx: {
+                            textTransform: "none",
+                            px: 1.5,
+                            py: 0.5
+                          },
+                          children: c("RobotCard.DriveToHome.bt")
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) })
+        }
+      );
+    }
+  )
+), vt = Array(6).fill(2 * Math.PI);
+function we({
+  rapidlyChangingMotionState: e,
+  dhParameters: r,
+  onTranslationChanged: n,
+  children: i
+}) {
+  const o = v([]), d = v([]), u = v(null), { invalidate: h } = le();
+  _(() => {
+    const s = e.joint_position.filter(
+      (c) => c !== void 0
+    );
+    return u.current = new se(s, {
+      tension: 120,
+      // Controls spring stiffness - higher values create faster, more responsive motion
+      friction: 20,
+      // Controls damping - higher values reduce oscillation and create smoother settling
+      threshold: 1e-3
+    }), () => {
+      var c;
+      (c = u.current) == null || c.destroy();
+    };
+  }, []), ce((s, c) => {
+    if (u.current) {
+      const f = u.current.update(c);
+      a(), f || h();
+    }
+  });
+  function l(s) {
+    s && (d.current = pe(s), a(), h());
+  }
+  function a() {
+    var c;
+    const s = ((c = u.current) == null ? void 0 : c.getCurrentValues()) || [];
+    if (n)
+      n(d.current, s);
+    else
+      for (const [f, x] of d.current.entries()) {
+        const j = r[f].reverse_rotation_direction ? -1 : 1;
+        x.position.y = j * (s[f] || 0) / 1e3;
+      }
+  }
+  const m = k(() => {
+    const s = e.joint_position.filter(
+      (c) => c !== void 0
+    );
+    requestAnimationFrame(() => {
+      var c;
+      o.current = s, (c = u.current) == null || c.setTarget(s);
+    });
+  }, [e]);
+  return _(() => {
+    m();
+  }, [e, m]), oe(() => {
+    m();
+  }), /* @__PURE__ */ t.jsx("group", { ref: l, children: i });
+}
+function Re({
+  rapidlyChangingMotionState: e,
+  dhParameters: r,
+  ...n
+}) {
+  const i = new b(), o = v(null), d = v(null);
+  function u(a) {
+    const m = new b();
+    for (let x = 0; x < r.length; x++) {
+      const p = r[x], j = a[x] ?? 0, y = new b().makeRotationY(p.theta).multiply(
+        new b().makeTranslation(
+          p.a / 1e3,
+          (p.d + j * (p.reverse_rotation_direction ? -1 : 1)) / 1e3,
+          0
+        )
+      ).multiply(new b().makeRotationX(p.alpha));
+      m.multiply(y);
+    }
+    const s = new S(), c = new B(), f = new S();
+    return m.decompose(s, c, f), s;
+  }
+  const h = u(
+    e.joint_position
+  );
+  function l(a, m) {
+    i.identity();
+    let s = new S();
+    for (let p = 0; p < r.length; p++) {
+      const j = m[p] ?? 0, y = r[p], G = new b().makeRotationY(y.theta).multiply(
+        new b().makeTranslation(
+          y.a / 1e3,
+          (y.d + j * (y.reverse_rotation_direction ? -1 : 1)) / 1e3,
+          0
+        )
+      ).multiply(new b().makeRotationX(y.alpha));
+      i.multiply(G);
+    }
+    const c = new S(), f = new B(), x = new S();
+    if (i.decompose(c, f, x), s = c, o.current && o.current.position.set(
+      s.x,
+      s.y,
+      s.z
+    ), d.current) {
+      const p = d.current.geometry;
+      p != null && p.setPositions && p.setPositions([
+        0,
+        0,
+        0,
+        s.x,
+        s.y,
+        s.z
+      ]);
+    }
+  }
+  return /* @__PURE__ */ t.jsx(
+    we,
+    {
+      rapidlyChangingMotionState: e,
+      dhParameters: r,
+      onTranslationChanged: l,
+      children: /* @__PURE__ */ t.jsxs("group", { ...n, name: "Scene", children: [
+        /* @__PURE__ */ t.jsxs("mesh", { name: "Base", position: [0, 0, 0], children: [
+          /* @__PURE__ */ t.jsx("sphereGeometry", { args: [0.02, 32, 32] }),
+          /* @__PURE__ */ t.jsx("meshStandardMaterial", { color: "green", depthTest: !0 })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          N,
+          {
+            ref: d,
+            points: [new S(0, 0, 0), h],
+            color: "White",
+            lineWidth: 5
+          }
+        ),
+        /* @__PURE__ */ t.jsxs("mesh", { ref: o, name: "TCP", position: h, children: [
+          /* @__PURE__ */ t.jsx("sphereGeometry", { args: [0.025, 32, 32] }),
+          /* @__PURE__ */ t.jsx("meshStandardMaterial", { color: "red", depthTest: !0 })
+        ] })
+      ] })
+    }
+  );
+}
+const ve = V(
+  ({
+    rapidlyChangingMotionState: e,
+    modelFromController: r,
+    dhParameters: n,
+    getModel: i = E,
+    flangeRef: o,
+    postModelRender: d,
+    transparentColor: u,
+    instanceUrl: h,
+    ...l
+  }) => {
+    const [a, m] = L(null), s = k((f) => {
+      m(f);
+    }, []);
+    _(() => {
+      a && (u ? ge(a, u) : je(a));
+    }, [a, u]);
+    const c = /* @__PURE__ */ t.jsx(
+      Re,
+      {
+        rapidlyChangingMotionState: e,
+        dhParameters: n,
+        ...l
+      }
+    );
+    return /* @__PURE__ */ t.jsxs(
+      ue,
+      {
+        fallback: c,
+        onError: (f) => {
+          console.warn(f);
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ae, { fallback: c, children: /* @__PURE__ */ t.jsx("group", { ref: s, children: /* @__PURE__ */ t.jsx(
+            we,
+            {
+              rapidlyChangingMotionState: e,
+              dhParameters: n,
+              children: /* @__PURE__ */ t.jsx(
+                ye,
+                {
+                  modelURL: (() => {
+                    const f = i(r, h);
+                    if (!f) {
+                      const x = new Blob([], { type: "model/gltf-binary" }), p = new File(
+                        [x],
+                        `${r}.glb`,
+                        { type: "model/gltf-binary" }
+                      );
+                      return Promise.resolve(URL.createObjectURL(p));
+                    }
+                    return f;
+                  })(),
+                  postModelRender: d,
+                  flangeRef: o,
+                  ...l
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ t.jsx(xe, {})
+        ]
+      }
+    );
+  }
+);
+function Mt({
+  connectedMotionGroup: e,
+  getModel: r = E,
+  flangeRef: n,
+  transparentColor: i,
+  postModelRender: o,
+  ...d
+}) {
+  if (!e.dhParameters)
+    return null;
+  const u = e.modelFromController || "";
+  return u && r(u) ? /* @__PURE__ */ t.jsx(
+    ve,
+    {
+      rapidlyChangingMotionState: e.rapidlyChangingMotionState,
+      modelFromController: u,
+      dhParameters: e.dhParameters,
+      getModel: r,
+      flangeRef: n,
+      transparentColor: i,
+      postModelRender: o,
+      ...d
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    Re,
+    {
+      rapidlyChangingMotionState: e.rapidlyChangingMotionState,
+      dhParameters: e.dhParameters,
+      ...d
+    }
+  );
+}
+const re = {
+  [M.Abb]: [0, 0, 0, 0, Math.PI / 2, 0, 0],
+  [M.Fanuc]: [0, 0, 0, 0, -Math.PI / 2, 0, 0],
+  [M.Yaskawa]: [0, 0, 0, 0, -Math.PI / 2, 0, 0],
+  [M.Kuka]: [
+    0,
+    -Math.PI / 2,
+    Math.PI / 2,
+    0,
+    Math.PI / 2,
+    0,
+    0
+  ],
+  [M.Universalrobots]: [
+    0,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    Math.PI / 2,
+    -Math.PI / 2,
+    0
+  ]
+};
+function at(e) {
+  const [r] = e.split("_");
+  switch (r) {
+    case "ABB":
+      return M.Abb;
+    case "FANUC":
+      return M.Fanuc;
+    case "YASKAWA":
+      return M.Yaskawa;
+    case "KUKA":
+      return M.Kuka;
+    case "UniversalRobots":
+      return M.Universalrobots;
+    default:
+      return null;
+  }
+}
+function _t(e, r) {
+  const n = at(e);
+  return n && n in re ? re[n] : r || null;
+}
+const Tt = V((e) => {
+  const { inverseSolver: r, dhParameters: n, ...i } = e, [o, d] = L(
+    O.RevoluteJoint
+  );
+  _(() => {
+    n.length && d(n[0].type ?? O.RevoluteJoint);
+  }, [n]);
+  const u = U(() => r === null && o === O.RevoluteJoint, [r, o]), h = U(() => r === null && o === O.PrismaticJoint, [r, o]);
+  return U(() => !!r, [r]) || u ? /* @__PURE__ */ t.jsx(be, { dhParameters: n, ...i }) : h ? /* @__PURE__ */ t.jsx(ve, { dhParameters: n, ...i }) : null;
+});
+export {
+  jt as C,
+  Mt as L,
+  re as M,
+  ne as P,
+  Rt as R,
+  bt as S,
+  wt as T,
+  vt as a,
+  it as b,
+  ve as c,
+  E as d,
+  at as e,
+  be as f,
+  _t as g,
+  Tt as h
+};
+//# sourceMappingURL=MotionGroupVisualizer-CIASsBC6.js.map