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

package/dist/MotionGroupVisualizer-1twp8wG6.js

@@ -1,1328 +0,0 @@
-import { j as e, g as Me, v as _e, o as Te, N as ke, V as re, c as se, h as U, b as X, M as v, J as O } from "./interpolation-D4ATdkEg.js";
-import * as g from "three";
-import { Matrix4 as w, Vector3 as k, Quaternion as J } from "three";
-import { ConvexGeometry as oe, RoundedBoxGeometry as Fe } from "three-stdlib";
-import Ge, { useMemo as V, useRef as R, useEffect as M, useCallback as T, useState as F, Suspense as ie } from "react";
-import { useThree as ae, useFrame as le, Canvas as K } from "@react-three/fiber";
-import { Environment as Le, Lightformer as L, Line as B, useGLTF as Se, Bounds as Z } from "@react-three/drei";
-import { useTheme as Pe, Card as Ae, Box as b, Typography as Q, Divider as z, Button as ee } from "@mui/material";
-import { observer as Ie } from "mobx-react-lite";
-import { useTranslation as De } from "react-i18next";
-import { ErrorBoundary as ce } from "react-error-boundary";
-function Oe(t) {
-  switch (t.shape_type) {
-    case "convex_hull":
-      return new oe(
-        t.vertices.map(
-          (n) => new g.Vector3(
-            n[0] / 1e3,
-            n[1] / 1e3,
-            n[2] / 1e3
-          )
-        )
-      );
-    case "box":
-      return new g.BoxGeometry(
-        t.size_x / 1e3,
-        t.size_y / 1e3,
-        t.size_z / 1e3
-      );
-    case "sphere":
-      return new g.SphereGeometry(t.radius / 1e3);
-    case "capsule":
-      return new g.CapsuleGeometry(
-        t.radius / 1e3,
-        t.cylinder_height / 1e3
-      );
-    case "cylinder":
-      return new g.CylinderGeometry(
-        t.radius / 1e3,
-        t.radius / 1e3,
-        t.height / 1e3
-      );
-    case "rectangle":
-      return new g.BoxGeometry(t.size_x / 1e3, t.size_y / 1e3, 0);
-    default:
-      return console.warn(`${t.shape_type} is not supported`), new g.BufferGeometry();
-  }
-}
-function Ve({
-  name: t,
-  collider: s,
-  children: n
-}) {
-  var u, c;
-  const a = ((u = s.pose) == null ? void 0 : u.position) ?? [0, 0, 0], i = ((c = s.pose) == null ? void 0 : c.orientation) ?? [0, 0, 0];
-  return s.margin && console.warn(`${t} margin is not supported`), /* @__PURE__ */ e.jsx(
-    "mesh",
-    {
-      name: t,
-      position: new g.Vector3(
-        a[0],
-        a[1],
-        a[2]
-      ).divideScalar(1e3),
-      rotation: new g.Euler(i[0], i[1], i[2], "XYZ"),
-      geometry: Oe(s.shape),
-      children: n
-    }
-  );
-}
-function Ue({
-  name: t,
-  colliders: s,
-  meshChildrenProvider: n,
-  ...a
-}) {
-  return /* @__PURE__ */ e.jsx("group", { name: t, ...a, children: Object.entries(s).map(([i, u]) => /* @__PURE__ */ e.jsx(
-    Ve,
-    {
-      name: i,
-      collider: u,
-      children: n(i, u)
-    },
-    i
-  )) });
-}
-function it({
-  scene: t,
-  meshChildrenProvider: s
-}) {
-  const n = t.colliders;
-  return /* @__PURE__ */ e.jsx("group", { children: n && /* @__PURE__ */ e.jsx(
-    Ue,
-    {
-      meshChildrenProvider: s,
-      colliders: n
-    }
-  ) });
-}
-function te() {
-  return /* @__PURE__ */ e.jsx(Le, { children: /* @__PURE__ */ e.jsx(Ce, {}) });
-}
-function Ce({ positions: t = [2, 0, 2, 0, 2, 0, 2, 0] }) {
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      L,
-      {
-        intensity: 5,
-        "rotation-x": Math.PI / 2,
-        position: [0, 5, -9],
-        scale: [10, 10, 1]
-      }
-    ),
-    /* @__PURE__ */ e.jsx("group", { rotation: [0, 0.5, 0], children: /* @__PURE__ */ e.jsx("group", { children: t.map((s, n) => /* @__PURE__ */ e.jsx(
-      L,
-      {
-        form: "circle",
-        intensity: 5,
-        rotation: [Math.PI / 2, 0, 0],
-        position: [s, 4, n * 4],
-        scale: [3, 1, 1]
-      },
-      n
-    )) }) }),
-    /* @__PURE__ */ e.jsx(
-      L,
-      {
-        intensity: 40,
-        "rotation-y": Math.PI / 2,
-        position: [-5, 1, -1],
-        scale: [20, 0.1, 1]
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      L,
-      {
-        intensity: 20,
-        "rotation-y": -Math.PI,
-        position: [-5, -2, -1],
-        scale: [20, 0.1, 1]
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      L,
-      {
-        "rotation-y": Math.PI / 2,
-        position: [-5, -1, -1],
-        scale: [20, 0.5, 1],
-        intensity: 5
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      L,
-      {
-        "rotation-y": -Math.PI / 2,
-        position: [10, 1, 0],
-        scale: [20, 1, 1],
-        intensity: 10
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      L,
-      {
-        form: "ring",
-        color: "white",
-        intensity: 5,
-        scale: 10,
-        position: [-15, 4, -18],
-        target: [0, 0, 0]
-      }
-    )
-  ] });
-}
-function at({
-  safetyZones: t,
-  dhParameters: s,
-  ...n
-}) {
-  const a = {
-    attach: "material",
-    color: "#009f4d",
-    opacity: 0.2,
-    depthTest: !1,
-    depthWrite: !1,
-    transparent: !0,
-    polygonOffset: !0
-  }, i = Me(s ?? []), u = (f, r) => {
-    var d, x;
-    if (!((d = r == null ? void 0 : r.pose) != null && d.position) || !((x = r == null ? void 0 : r.pose) != null && x.orientation))
-      return null;
-    const h = new g.Vector3(r.pose.position[0] / 1e3, r.pose.position[1] / 1e3, r.pose.position[2] / 1e3), m = new g.Vector3(r.pose.orientation[0], r.pose.orientation[1], r.pose.orientation[2]);
-    let o;
-    const l = r.shape.shape_type === "plane" ? { ...a, side: g.DoubleSide } : { ...a, side: g.FrontSide };
-    switch (r.shape.shape_type) {
-      /**
-       * Plane shape, uses DH parameters to calculate the size of the plane (reach distance of a robot)
-       */
-      case "plane":
-        o = /* @__PURE__ */ e.jsx("planeGeometry", { args: [i, i] });
-        break;
-      /**
-       * Sphere shape
-       */
-      case "sphere": {
-        const p = (r == null ? void 0 : r.shape).radius / 1e3;
-        o = /* @__PURE__ */ e.jsx("sphereGeometry", { args: [p] });
-        break;
-      }
-      /**
-       * Capsule shape
-       */
-      case "capsule": {
-        const p = (r == null ? void 0 : r.shape).radius / 1e3, j = (r == null ? void 0 : r.shape).cylinder_height / 1e3;
-        o = /* @__PURE__ */ e.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 = (r == null ? void 0 : r.shape).vertices.map(
-          (y) => new g.Vector3(y[0] / 1e3, y[1] / 1e3, y[2] / 1e3)
-        ), j = _e(p);
-        if (j.isCoplanar && j.normal) {
-          const G = new g.Vector3().addVectors(
-            p[0],
-            j.normal.multiplyScalar(1e-4)
-          );
-          p.push(G);
-        }
-        try {
-          o = /* @__PURE__ */ e.jsx("primitive", { object: new oe(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 = r.shape, j = p.radius / 1e3, y = p.sphere_center_distance_x / 1e3, G = p.sphere_center_distance_y / 1e3, S = j * 2;
-        o = /* @__PURE__ */ e.jsx(
-          "primitive",
-          {
-            object: new Fe(y, G, S, 2, j),
-            attach: "geometry"
-          }
-        );
-        break;
-      }
-      default:
-        console.warn("Unsupported safety zone shape type:", r.shape.shape_type), o = null;
-    }
-    return /* @__PURE__ */ e.jsxs(
-      "mesh",
-      {
-        renderOrder: f,
-        position: h,
-        quaternion: Te(m),
-        children: [
-          o,
-          /* @__PURE__ */ e.jsx("meshStandardMaterial", { ...l, polygonOffsetFactor: -f })
-        ]
-      },
-      `safety-zone-${r.shape.shape_type}-${f}`
-    );
-  }, c = V(() => Object.values(t ?? {}).map((f, r) => u(r, f)), [t, i]);
-  return /* @__PURE__ */ e.jsx("group", { ...n, children: c });
-}
-function lt({
-  trajectory: t,
-  ...s
-}) {
-  const n = (t == null ? void 0 : t.map((a) => {
-    if (a.position && a.position.length >= 3) {
-      const [i, u, c] = a.position;
-      if (isFinite(i) && isFinite(u) && isFinite(c))
-        return new g.Vector3(i / 1e3, c / 1e3, -u / 1e3);
-    }
-    return null;
-  }).filter((a) => a !== null)) || [];
-  return /* @__PURE__ */ e.jsx("group", { ...s, children: n.length > 0 && /* @__PURE__ */ e.jsx(
-    B,
-    {
-      points: n,
-      lineWidth: 3,
-      polygonOffset: !0,
-      polygonOffsetFactor: 10,
-      polygonOffsetUnits: 10
-    }
-  ) });
-}
-const E = /* @__PURE__ */ new Map();
-async function C(t, s) {
-  if (E.has(t))
-    return E.get(t);
-  const n = (async () => {
-    var c;
-    const a = s || "", i = new ke({ instanceUrl: a }), u = i.api.motionGroupModels;
-    (c = u.axios) != null && c.interceptors && u.axios.interceptors.request.use((f) => {
-      var r;
-      return (r = f.url) != null && r.includes("/glb") && (f.responseType = "blob"), f;
-    });
-    try {
-      const f = await i.api.motionGroupModels.getMotionGroupGlbModel(t);
-      return URL.createObjectURL(f);
-    } catch (f) {
-      throw console.error("Failed to fetch model:", f), f;
-    }
-  })();
-  return E.set(t, n), n;
-}
-function ue(t) {
-  function s(n) {
-    return n.children.length === 0 ? [n] : [n, ...n.children.flatMap((a) => s(a))];
-  }
-  return s(t).filter((n) => pe(n));
-}
-function de(t) {
-  return t.name.endsWith("_FLG");
-}
-function pe(t) {
-  return /_J[0-9]+$/.test(t.name);
-}
-function Ee(t, s) {
-  let n;
-  function a(i) {
-    if (de(i)) {
-      if (n)
-        throw Error(
-          `Found multiple flange groups in robot model ${s}; first ${n.name} then ${i.name}. Only one _FLG group is allowed.`
-        );
-      n = i;
-    }
-    pe(i), i.children.map(a);
-  }
-  if (a(t.scene), !n)
-    throw Error(
-      `No flange group found in robot model ${s}. Flange must be identified with a name ending in _FLG.`
-    );
-  return { gltf: t };
-}
-function fe({
-  rapidlyChangingMotionState: t,
-  dhParameters: s,
-  onRotationChanged: n,
-  children: a
-}) {
-  const i = R([]), u = R([]), c = R(null), { invalidate: f } = ae();
-  M(() => {
-    const o = t.joint_position.filter(
-      (l) => l !== void 0
-    );
-    return c.current = new re(o, {
-      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 l;
-      (l = c.current) == null || l.destroy();
-    };
-  }, []), le((o, l) => {
-    if (c.current) {
-      const d = c.current.update(l);
-      h(), d || f();
-    }
-  });
-  function r(o) {
-    o && (u.current = ue(o), h(), f());
-  }
-  function h() {
-    var l;
-    const o = ((l = c.current) == null ? void 0 : l.getCurrentValues()) || [];
-    if (n)
-      n(u.current, o);
-    else
-      for (const [d, x] of u.current.entries()) {
-        const p = s[d], j = p.theta || 0, y = p.reverse_rotation_direction ? -1 : 1;
-        x.rotation.y = y * (o[d] || 0) + j;
-      }
-  }
-  const m = T(() => {
-    const o = t.joint_position.filter(
-      (l) => l !== void 0
-    );
-    requestAnimationFrame(() => {
-      var l;
-      i.current = o, (l = c.current) == null || l.setTarget(o);
-    });
-  }, [t]);
-  return M(() => {
-    m();
-  }, [t, m]), se(() => {
-    m();
-  }), /* @__PURE__ */ e.jsx("group", { ref: r, children: a });
-}
-const Je = "line", Be = "mesh";
-function We({
-  rapidlyChangingMotionState: t,
-  dhParameters: s,
-  ...n
-}) {
-  const a = new w(), i = R([]), u = R([]);
-  Ge.useEffect(() => {
-    i.current = new Array(s.length).fill(null), u.current = new Array(s.length).fill(null);
-  }, [s.length]);
-  function c(h, m) {
-    const o = new k(), l = new J(), d = new k();
-    a.decompose(o, l, d);
-    const x = o.clone(), p = new w().makeRotationY(
-      h.theta + m * (h.reverse_rotation_direction ? -1 : 1)
-    ).multiply(new w().makeTranslation(0, h.d / 1e3, 0)).multiply(new w().makeTranslation(h.a / 1e3, 0, 0)).multiply(new w().makeRotationX(h.alpha));
-    return a.multiply(p), a.decompose(o, l, d), { a: x, b: o };
-  }
-  function f(h, m, o, l) {
-    if (!s)
-      return;
-    const d = s[h];
-    if (!d)
-      return;
-    const { a: x, b: p } = c(d, l);
-    m.geometry.setPositions([x.toArray(), p.toArray()].flat()), o.position.set(p.x, p.y, p.z);
-  }
-  function r(h, m) {
-    a.identity();
-    for (let o = 0; o < Math.min(h.length, m.length); o++) {
-      const l = i.current[o], d = u.current[o];
-      l && d && f(o, l, d, m[o]);
-    }
-  }
-  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(
-    fe,
-    {
-      rapidlyChangingMotionState: t,
-      dhParameters: s,
-      onRotationChanged: r,
-      children: /* @__PURE__ */ e.jsxs("group", { ...n, name: "Scene", children: [
-        /* @__PURE__ */ e.jsxs("mesh", { children: [
-          /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.01, 32, 32] }),
-          /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "black", depthTest: !0 })
-        ] }),
-        s.map((h, m) => {
-          const { a: o, b: l } = c(
-            h,
-            t.joint_position[m] ?? 0
-          ), d = `dhrobot_J0${m}`;
-          return /* @__PURE__ */ e.jsxs("group", { name: d, children: [
-            /* @__PURE__ */ e.jsx(
-              B,
-              {
-                ref: (x) => {
-                  i.current[m] = x;
-                },
-                name: Je,
-                points: [o, l],
-                color: "white",
-                lineWidth: 5
-              }
-            ),
-            /* @__PURE__ */ e.jsxs(
-              "mesh",
-              {
-                ref: (x) => {
-                  u.current[m] = x;
-                },
-                name: Be,
-                position: l,
-                children: [
-                  /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.01, 32, 32] }),
-                  /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "black", depthTest: !0 })
-                ]
-              },
-              "mesh_" + m
-            )
-          ] }, d);
-        })
-      ] })
-    }
-  ) });
-}
-const $e = console.warn;
-function he() {
-  return M(() => {
-    console.warn = (t) => {
-      t !== "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand" && $e(t);
-    };
-  }, []), /* @__PURE__ */ e.jsx(e.Fragment, {});
-}
-function He(t) {
-  return t.type === "Mesh";
-}
-function Ne({
-  url: t,
-  flangeRef: s,
-  postModelRender: n,
-  ...a
-}) {
-  const i = Se(t);
-  let u;
-  try {
-    u = Ee(i, "robot.glb").gltf;
-  } catch (r) {
-    throw r;
-  }
-  const c = T(
-    (r) => {
-      r && n && n();
-    },
-    [n]
-  );
-  function f(r) {
-    try {
-      return He(r) ? r.geometry ? /* @__PURE__ */ e.jsx(
-        "mesh",
-        {
-          name: r.name,
-          geometry: r.geometry,
-          material: r.material,
-          position: r.position,
-          rotation: r.rotation
-        },
-        r.uuid
-      ) : /* @__PURE__ */ e.jsx("group", { name: r.name, position: r.position, rotation: r.rotation }, r.uuid) : /* @__PURE__ */ e.jsx(
-        "group",
-        {
-          name: r.name,
-          position: r.position,
-          rotation: r.rotation,
-          ref: de(r) ? s : void 0,
-          children: r.children.map(f)
-        },
-        r.uuid
-      );
-    } catch (h) {
-      return console.warn("Error rendering node", r.name, h), null;
-    }
-  }
-  return /* @__PURE__ */ e.jsx("group", { ...a, dispose: null, ref: c, children: f(u.scene) });
-}
-function me({
-  modelURL: t,
-  flangeRef: s,
-  postModelRender: n,
-  ...a
-}) {
-  const [i, u] = F(null);
-  return M(() => {
-    (async () => {
-      try {
-        if (typeof t == "string")
-          u(t);
-        else {
-          const f = await t;
-          u(f);
-        }
-      } catch (f) {
-        console.error("Failed to resolve model URL:", f);
-      }
-    })();
-  }, [t]), i ? /* @__PURE__ */ e.jsx(
-    Ne,
-    {
-      url: i,
-      flangeRef: s,
-      postModelRender: n,
-      ...a
-    }
-  ) : null;
-}
-const xe = (t, s) => {
-  t.userData.isGhost || (t.traverse((n) => {
-    if (n instanceof g.Mesh) {
-      n.material instanceof g.Material && (n.material.colorWrite = !1);
-      const a = n.clone(), i = n.clone();
-      a.material = new g.MeshStandardMaterial({
-        depthTest: !0,
-        depthWrite: !0,
-        colorWrite: !1,
-        polygonOffset: !0,
-        polygonOffsetFactor: -1,
-        side: g.DoubleSide
-      }), a.userData.isGhost = !0, i.material = new g.MeshStandardMaterial({
-        color: s,
-        opacity: 0.3,
-        depthTest: !0,
-        depthWrite: !1,
-        transparent: !0,
-        polygonOffset: !0,
-        polygonOffsetFactor: -2,
-        side: g.DoubleSide
-      }), i.userData.isGhost = !0, n.parent && (n.parent.add(a), n.parent.add(i));
-    }
-  }), t.userData.isGhost = !0);
-}, ye = (t) => {
-  if (!t.userData.isGhost) return;
-  const s = [];
-  t.traverse((n) => {
-    var a;
-    n instanceof g.Mesh && ((a = n.userData) != null && a.isGhost ? s.push(n) : n.material instanceof g.Material && (n.material.colorWrite = !0));
-  }), s.forEach((n) => {
-    n.parent && n.parent.remove(n);
-  }), t.userData.isGhost = !1;
-}, ge = U(
-  ({
-    rapidlyChangingMotionState: t,
-    modelFromController: s,
-    dhParameters: n,
-    getModel: a = C,
-    flangeRef: i,
-    postModelRender: u,
-    transparentColor: c,
-    instanceUrl: f,
-    ...r
-  }) => {
-    const [h, m] = F(null), o = T((d) => {
-      m(d);
-    }, []);
-    M(() => {
-      h && (c ? xe(h, c) : ye(h));
-    }, [h, c]);
-    const l = /* @__PURE__ */ e.jsx(
-      We,
-      {
-        rapidlyChangingMotionState: t,
-        dhParameters: n,
-        ...r
-      }
-    );
-    return /* @__PURE__ */ e.jsxs(
-      ce,
-      {
-        fallback: l,
-        onError: (d) => {
-          console.warn(d);
-        },
-        children: [
-          /* @__PURE__ */ e.jsx(ie, { fallback: l, children: /* @__PURE__ */ e.jsx("group", { ref: o, children: /* @__PURE__ */ e.jsx(
-            fe,
-            {
-              rapidlyChangingMotionState: t,
-              dhParameters: n,
-              children: /* @__PURE__ */ e.jsx(
-                me,
-                {
-                  modelURL: (() => {
-                    const d = a(s, f);
-                    if (!d) {
-                      const x = new Blob([], { type: "model/gltf-binary" }), p = new File([x], `${s}.glb`, { type: "model/gltf-binary" });
-                      return Promise.resolve(URL.createObjectURL(p));
-                    }
-                    return d;
-                  })(),
-                  postModelRender: u,
-                  flangeRef: i,
-                  ...r
-                }
-              )
-            }
-          ) }) }),
-          /* @__PURE__ */ e.jsx(he, {})
-        ]
-      }
-    );
-  }
-);
-function qe({
-  connectedMotionGroup: t,
-  getModel: s = C,
-  flangeRef: n,
-  transparentColor: a,
-  postModelRender: i,
-  ...u
-}) {
-  return t.dhParameters ? /* @__PURE__ */ e.jsx(
-    ge,
-    {
-      rapidlyChangingMotionState: t.rapidlyChangingMotionState,
-      modelFromController: t.modelFromController || "",
-      dhParameters: t.dhParameters,
-      getModel: s,
-      flangeRef: n,
-      transparentColor: a,
-      postModelRender: i,
-      ...u
-    }
-  ) : null;
-}
-const ct = U(
-  Ie(
-    ({
-      robotName: t,
-      programState: s,
-      safetyState: n,
-      operationMode: a,
-      driveToHomeEnabled: i = !1,
-      onDriveToHomePress: u,
-      onDriveToHomeRelease: c,
-      connectedMotionGroup: f,
-      robotComponent: r = qe,
-      customContentComponent: h,
-      className: m
-    }) => {
-      var H;
-      const o = Pe(), { t: l } = De(), [d, x] = F(!1), p = R(null), j = R(null), [y, G] = F(!1), [S, Re] = F({ width: 400, height: 600 }), [Xe, ve] = F(0);
-      M(() => {
-        const D = () => {
-          if (j.current) {
-            const { offsetWidth: q, offsetHeight: Y } = j.current;
-            G(q > Y), Re({ width: q, height: Y });
-          }
-        };
-        D();
-        const N = new ResizeObserver(D);
-        return j.current && N.observe(j.current), () => {
-          N.disconnect();
-        };
-      }, []);
-      const W = T(() => {
-        ve((D) => D + 1);
-      }, []), P = T(() => {
-        !i || !u || (x(!0), u());
-      }, [i, u]), A = T(() => {
-        !i || !c || (x(!1), c());
-      }, [i, c]), $ = T(() => {
-        d && c && (x(!1), c());
-      }, [d, c]), _ = y ? S.width < 350 : S.height < 200, I = y ? S.height < 310 : S.height < 450;
-      return /* @__PURE__ */ e.jsx(
-        Ae,
-        {
-          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 ${o.palette.divider}`,
-            borderRadius: "18px",
-            boxShadow: "none",
-            backgroundColor: ((H = o.palette.backgroundPaperElevation) == null ? void 0 : H[8]) || "#2A2A3F",
-            backgroundImage: "none"
-            // Override any gradient from elevation
-          },
-          children: y ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-            /* @__PURE__ */ e.jsx(
-              b,
-              {
-                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: _ ? "none" : "block"
-                },
-                children: !_ && /* @__PURE__ */ e.jsxs(
-                  K,
-                  {
-                    orthographic: !0,
-                    camera: {
-                      position: [3, 2, 3],
-                      zoom: 1
-                    },
-                    shadows: !0,
-                    frameloop: "demand",
-                    style: {
-                      borderRadius: o.shape.borderRadius,
-                      width: "100%",
-                      height: "100%",
-                      background: "transparent",
-                      position: "absolute",
-                      top: 0,
-                      left: 0
-                    },
-                    dpr: [1, 2],
-                    gl: { alpha: !0, antialias: !0 },
-                    children: [
-                      /* @__PURE__ */ e.jsx(te, {}),
-                      /* @__PURE__ */ e.jsx(Z, { fit: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ e.jsx(
-                        r,
-                        {
-                          connectedMotionGroup: f,
-                          postModelRender: W
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ e.jsxs(
-              b,
-              {
-                sx: {
-                  flex: "1",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "flex-start",
-                  width: _ ? "100%" : "50%"
-                },
-                children: [
-                  /* @__PURE__ */ e.jsxs(
-                    b,
-                    {
-                      sx: {
-                        p: { xs: 1.5, sm: 2, md: 3 },
-                        pb: { xs: 1, sm: 1.5, md: 2 },
-                        textAlign: "left"
-                      },
-                      children: [
-                        /* @__PURE__ */ e.jsx(Q, { variant: "h6", component: "h2", sx: { mb: 1 }, children: t }),
-                        /* @__PURE__ */ e.jsx(
-                          X,
-                          {
-                            programState: s,
-                            safetyState: n,
-                            operationMode: a
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ e.jsxs(
-                    b,
-                    {
-                      sx: {
-                        p: { xs: 1.5, sm: 2, md: 3 },
-                        pt: 0,
-                        flex: "1",
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "space-between"
-                      },
-                      children: [
-                        !I && h && /* @__PURE__ */ e.jsxs(b, { children: [
-                          /* @__PURE__ */ e.jsx(h, {}),
-                          /* @__PURE__ */ e.jsx(
-                            z,
-                            {
-                              sx: {
-                                mt: 1,
-                                mb: 0,
-                                borderColor: o.palette.divider,
-                                opacity: 0.5
-                              }
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ e.jsx(
-                          b,
-                          {
-                            sx: {
-                              mt: !I && h ? "auto" : 0
-                            },
-                            children: /* @__PURE__ */ e.jsx(
-                              b,
-                              {
-                                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__ */ e.jsx(
-                                  ee,
-                                  {
-                                    ref: p,
-                                    variant: "contained",
-                                    color: "secondary",
-                                    size: "small",
-                                    disabled: !i,
-                                    onMouseDown: P,
-                                    onMouseUp: A,
-                                    onMouseLeave: $,
-                                    onTouchStart: P,
-                                    onTouchEnd: A,
-                                    sx: {
-                                      textTransform: "none",
-                                      px: 1.5,
-                                      py: 0.5
-                                    },
-                                    children: l("RobotCard.DriveToHome.bt")
-                                  }
-                                )
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ] }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(
-            b,
-            {
-              sx: {
-                p: 3,
-                height: "100%",
-                display: "flex",
-                flexDirection: "column"
-              },
-              children: [
-                /* @__PURE__ */ e.jsxs(b, { children: [
-                  /* @__PURE__ */ e.jsx(Q, { variant: "h6", component: "h2", sx: { mb: 1 }, children: t }),
-                  /* @__PURE__ */ e.jsx(
-                    X,
-                    {
-                      programState: s,
-                      safetyState: n,
-                      operationMode: a
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ e.jsx(
-                  b,
-                  {
-                    sx: {
-                      flex: _ ? 0 : 1,
-                      position: "relative",
-                      minHeight: _ ? 0 : { xs: 120, sm: 150, md: 200 },
-                      height: _ ? 0 : "auto",
-                      borderRadius: 1,
-                      overflow: "hidden",
-                      display: _ ? "none" : "block"
-                    },
-                    children: !_ && /* @__PURE__ */ e.jsxs(
-                      K,
-                      {
-                        orthographic: !0,
-                        camera: {
-                          position: [3, 2, 3],
-                          zoom: 1
-                        },
-                        shadows: !0,
-                        frameloop: "demand",
-                        style: {
-                          borderRadius: o.shape.borderRadius,
-                          width: "100%",
-                          height: "100%",
-                          background: "transparent",
-                          position: "absolute"
-                        },
-                        dpr: [1, 2],
-                        gl: { alpha: !0, antialias: !0 },
-                        children: [
-                          /* @__PURE__ */ e.jsx(te, {}),
-                          /* @__PURE__ */ e.jsx(Z, { fit: !0, clip: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ e.jsx(
-                            r,
-                            {
-                              connectedMotionGroup: f,
-                              postModelRender: W
-                            }
-                          ) })
-                        ]
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ e.jsxs(b, { children: [
-                  !I && h && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                    /* @__PURE__ */ e.jsx(h, {}),
-                    /* @__PURE__ */ e.jsx(
-                      z,
-                      {
-                        sx: {
-                          mt: 1,
-                          mb: 0,
-                          borderColor: o.palette.divider,
-                          opacity: 0.5
-                        }
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ e.jsx(
-                    b,
-                    {
-                      sx: {
-                        display: "flex",
-                        justifyContent: "flex-start",
-                        mt: !I && h ? { xs: 1, sm: 2, md: 5 } : { xs: 0.5, sm: 1, md: 2 },
-                        mb: { xs: 0.5, sm: 0.75, md: 1 }
-                      },
-                      children: /* @__PURE__ */ e.jsx(
-                        ee,
-                        {
-                          ref: p,
-                          variant: "contained",
-                          color: "secondary",
-                          size: "small",
-                          disabled: !i,
-                          onMouseDown: P,
-                          onMouseUp: A,
-                          onMouseLeave: $,
-                          onTouchStart: P,
-                          onTouchEnd: A,
-                          sx: {
-                            textTransform: "none",
-                            px: 1.5,
-                            py: 0.5
-                          },
-                          children: l("RobotCard.DriveToHome.bt")
-                        }
-                      )
-                    }
-                  )
-                ] })
-              ]
-            }
-          ) })
-        }
-      );
-    }
-  )
-), ut = Array(6).fill(2 * Math.PI);
-function je({
-  rapidlyChangingMotionState: t,
-  dhParameters: s,
-  onTranslationChanged: n,
-  children: a
-}) {
-  const i = R([]), u = R([]), c = R(null), { invalidate: f } = ae();
-  M(() => {
-    const o = t.joint_position.filter(
-      (l) => l !== void 0
-    );
-    return c.current = new re(o, {
-      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 l;
-      (l = c.current) == null || l.destroy();
-    };
-  }, []), le((o, l) => {
-    if (c.current) {
-      const d = c.current.update(l);
-      h(), d || f();
-    }
-  });
-  function r(o) {
-    o && (u.current = ue(o), h(), f());
-  }
-  function h() {
-    var l;
-    const o = ((l = c.current) == null ? void 0 : l.getCurrentValues()) || [];
-    if (n)
-      n(u.current, o);
-    else
-      for (const [d, x] of u.current.entries()) {
-        const j = s[d].reverse_rotation_direction ? -1 : 1;
-        x.position.y = j * (o[d] || 0) / 1e3;
-      }
-  }
-  const m = T(() => {
-    const o = t.joint_position.filter(
-      (l) => l !== void 0
-    );
-    requestAnimationFrame(() => {
-      var l;
-      i.current = o, (l = c.current) == null || l.setTarget(o);
-    });
-  }, [t]);
-  return M(() => {
-    m();
-  }, [t, m]), se(() => {
-    m();
-  }), /* @__PURE__ */ e.jsx("group", { ref: r, children: a });
-}
-function we({
-  rapidlyChangingMotionState: t,
-  dhParameters: s,
-  ...n
-}) {
-  const a = new w(), i = R(null), u = R(null);
-  function c(h) {
-    const m = new w();
-    for (let x = 0; x < s.length; x++) {
-      const p = s[x], j = h[x] ?? 0, y = new w().makeRotationY(p.theta).multiply(
-        new w().makeTranslation(
-          p.a / 1e3,
-          (p.d + j * (p.reverse_rotation_direction ? -1 : 1)) / 1e3,
-          0
-        )
-      ).multiply(new w().makeRotationX(p.alpha));
-      m.multiply(y);
-    }
-    const o = new k(), l = new J(), d = new k();
-    return m.decompose(o, l, d), o;
-  }
-  const f = c(t.joint_position);
-  function r(h, m) {
-    a.identity();
-    let o = new k();
-    for (let p = 0; p < s.length; p++) {
-      const j = m[p] ?? 0, y = s[p], G = new w().makeRotationY(y.theta).multiply(
-        new w().makeTranslation(
-          y.a / 1e3,
-          (y.d + j * (y.reverse_rotation_direction ? -1 : 1)) / 1e3,
-          0
-        )
-      ).multiply(new w().makeRotationX(y.alpha));
-      a.multiply(G);
-    }
-    const l = new k(), d = new J(), x = new k();
-    if (a.decompose(l, d, x), o = l, i.current && i.current.position.set(o.x, o.y, o.z), u.current) {
-      const p = u.current.geometry;
-      p && p.setPositions && p.setPositions([0, 0, 0, o.x, o.y, o.z]);
-    }
-  }
-  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(
-    je,
-    {
-      rapidlyChangingMotionState: t,
-      dhParameters: s,
-      onTranslationChanged: r,
-      children: /* @__PURE__ */ e.jsxs("group", { ...n, name: "Scene", children: [
-        /* @__PURE__ */ e.jsxs("mesh", { name: "Base", position: [0, 0, 0], children: [
-          /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.02, 32, 32] }),
-          /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "green", depthTest: !0 })
-        ] }),
-        /* @__PURE__ */ e.jsx(
-          B,
-          {
-            ref: u,
-            points: [new k(0, 0, 0), f],
-            color: "White",
-            lineWidth: 5
-          }
-        ),
-        /* @__PURE__ */ e.jsxs("mesh", { ref: i, name: "TCP", position: f, children: [
-          /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.025, 32, 32] }),
-          /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "red", depthTest: !0 })
-        ] })
-      ] })
-    }
-  ) });
-}
-const be = U(
-  ({
-    rapidlyChangingMotionState: t,
-    modelFromController: s,
-    dhParameters: n,
-    getModel: a = C,
-    flangeRef: i,
-    postModelRender: u,
-    transparentColor: c,
-    instanceUrl: f,
-    ...r
-  }) => {
-    const [h, m] = F(null), o = T((d) => {
-      m(d);
-    }, []);
-    M(() => {
-      h && (c ? xe(h, c) : ye(h));
-    }, [h, c]);
-    const l = /* @__PURE__ */ e.jsx(
-      we,
-      {
-        rapidlyChangingMotionState: t,
-        dhParameters: n,
-        ...r
-      }
-    );
-    return /* @__PURE__ */ e.jsxs(
-      ce,
-      {
-        fallback: l,
-        onError: (d) => {
-          console.warn(d);
-        },
-        children: [
-          /* @__PURE__ */ e.jsx(ie, { fallback: l, children: /* @__PURE__ */ e.jsx("group", { ref: o, children: /* @__PURE__ */ e.jsx(
-            je,
-            {
-              rapidlyChangingMotionState: t,
-              dhParameters: n,
-              children: /* @__PURE__ */ e.jsx(
-                me,
-                {
-                  modelURL: (() => {
-                    const d = a(s, f);
-                    if (!d) {
-                      const x = new Blob([], { type: "model/gltf-binary" }), p = new File([x], `${s}.glb`, { type: "model/gltf-binary" });
-                      return Promise.resolve(URL.createObjectURL(p));
-                    }
-                    return d;
-                  })(),
-                  postModelRender: u,
-                  flangeRef: i,
-                  ...r
-                }
-              )
-            }
-          ) }) }),
-          /* @__PURE__ */ e.jsx(he, {})
-        ]
-      }
-    );
-  }
-);
-function dt({
-  connectedMotionGroup: t,
-  getModel: s = C,
-  flangeRef: n,
-  transparentColor: a,
-  postModelRender: i,
-  ...u
-}) {
-  if (!t.dhParameters)
-    return null;
-  const c = t.modelFromController || "";
-  return c && s(c) ? /* @__PURE__ */ e.jsx(
-    be,
-    {
-      rapidlyChangingMotionState: t.rapidlyChangingMotionState,
-      modelFromController: c,
-      dhParameters: t.dhParameters,
-      getModel: s,
-      flangeRef: n,
-      transparentColor: a,
-      postModelRender: i,
-      ...u
-    }
-  ) : /* @__PURE__ */ e.jsx(
-    we,
-    {
-      rapidlyChangingMotionState: t.rapidlyChangingMotionState,
-      dhParameters: t.dhParameters,
-      ...u
-    }
-  );
-}
-const ne = {
-  [v.Abb]: [0, 0, 0, 0, Math.PI / 2, 0, 0],
-  [v.Fanuc]: [0, 0, 0, 0, -Math.PI / 2, 0, 0],
-  [v.Yaskawa]: [0, 0, 0, 0, -Math.PI / 2, 0, 0],
-  [v.Kuka]: [
-    0,
-    -Math.PI / 2,
-    Math.PI / 2,
-    0,
-    Math.PI / 2,
-    0,
-    0
-  ],
-  [v.Universalrobots]: [
-    0,
-    -Math.PI / 2,
-    -Math.PI / 2,
-    -Math.PI / 2,
-    Math.PI / 2,
-    -Math.PI / 2,
-    0
-  ]
-};
-function Ye(t) {
-  const [s] = t.split("_");
-  switch (s) {
-    case "ABB":
-      return v.Abb;
-    case "FANUC":
-      return v.Fanuc;
-    case "YASKAWA":
-      return v.Yaskawa;
-    case "KUKA":
-      return v.Kuka;
-    case "UniversalRobots":
-      return v.Universalrobots;
-    default:
-      return null;
-  }
-}
-function pt(t, s) {
-  const n = Ye(t);
-  return n && n in ne ? ne[n] : s || null;
-}
-const ft = U((t) => {
-  const {
-    inverseSolver: s,
-    dhParameters: n,
-    ...a
-  } = t, [i, u] = F(O.RevoluteJoint);
-  M(() => {
-    n.length && u(n[0].type ?? O.RevoluteJoint);
-  }, [n]);
-  const c = V(() => s === null && i === O.RevoluteJoint, [s, i]), f = V(() => s === null && i === O.PrismaticJoint, [s, i]);
-  return V(() => !!s, [s]) || c ? /* @__PURE__ */ e.jsx(ge, { dhParameters: n, ...a }) : f ? /* @__PURE__ */ e.jsx(be, { dhParameters: n, ...a }) : /* @__PURE__ */ e.jsx(e.Fragment, {});
-});
-export {
-  it as C,
-  dt as L,
-  ne as M,
-  te as P,
-  ct as R,
-  at as S,
-  lt as T,
-  ut as a,
-  qe as b,
-  be as c,
-  C as d,
-  Ye as e,
-  ge as f,
-  pt as g,
-  ft as h
-};
-//# sourceMappingURL=MotionGroupVisualizer-1twp8wG6.js.map