@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.d053ea2

package/dist/chunks/MotionGroupVisualizer-om9U-U7G.js

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