@wandelbots/wandelbots-js-react-components 6.0.0 → 6.1.0

package/dist/chunks/{interpolation-DG8VTxzS.js → useSmoothedMotionState-CpGsrwj4.js}

@@ -1,80 +1,80 @@
-import { jsx as p, jsxs as V } from "react/jsx-runtime";
-import { useTheme as f } from "@mui/material/styles";
-import R from "@mui/material/Chip";
-import _ from "@mui/material/Typography";
-import { observer as P } from "mobx-react-lite";
-import { useTranslation as C } from "react-i18next";
-import { e as O } from "./externalizeComponent-EDymnaGR.js";
-import x from "@mui/icons-material/Pause";
-import I from "@mui/icons-material/PlayArrow";
-import S from "@mui/icons-material/Stop";
-import E from "@mui/material/Box";
-import N from "@mui/material/Button";
-import { autorun as v, reaction as M } from "mobx";
-import A, { useEffect as Y } from "react";
-var c = /* @__PURE__ */ ((t) => (t.IDLE = "idle", t.PREPARING = "preparing", t.STARTING = "starting", t.RUNNING = "running", t.PAUSING = "pausing", t.PAUSED = "paused", t.STOPPING = "stopping", t.COMPLETED = "completed", t.FAILED = "failed", t.STOPPED = "stopped", t.ERROR = "error", t))(c || {});
-const Q = O(
-  P(
+import { jsx as g, jsxs as M } from "react/jsx-runtime";
+import { useTheme as O } from "@mui/material/styles";
+import w from "@mui/material/Chip";
+import F from "@mui/material/Typography";
+import { observer as R } from "mobx-react-lite";
+import { useTranslation as V } from "react-i18next";
+import { e as x } from "./externalizeComponent-EDymnaGR.js";
+import Y from "@mui/icons-material/Pause";
+import S from "@mui/icons-material/PlayArrow";
+import P from "@mui/icons-material/Stop";
+import A from "@mui/material/Box";
+import D from "@mui/material/Button";
+import { autorun as N, reaction as U, observable as L, runInAction as C } from "mobx";
+import b, { useEffect as _, useState as G, useRef as I } from "react";
+var d = /* @__PURE__ */ ((t) => (t.IDLE = "idle", t.PREPARING = "preparing", t.STARTING = "starting", t.RUNNING = "running", t.PAUSING = "pausing", t.PAUSED = "paused", t.STOPPING = "stopping", t.COMPLETED = "completed", t.FAILED = "failed", t.STOPPED = "stopped", t.ERROR = "error", t))(d || {});
+const et = x(
+  R(
     ({
       state: t,
       onRun: e,
-      onPause: n,
-      onStop: l,
-      onReset: a,
+      onPause: i,
+      onStop: s,
+      onReset: o,
       requiresManualReset: r = !1,
-      variant: o = "with_pause",
-      className: h
+      variant: a = "with_pause",
+      className: p
     }) => {
-      const s = f(), { t: m } = C(), d = () => {
-        const i = {
+      const u = O(), { t: m } = V(), l = () => {
+        const n = {
           run: {
             enabled: t === "idle" || t === "stopped" || t === "paused" || t === "completed" || t === "failed" || t === "error",
             label: m(t === "paused" ? "ProgramControl.Resume.bt" : t === "error" || t === "failed" ? "ProgramControl.Retry.bt" : "ProgramControl.Start.bt"),
-            color: s.palette.success.main,
+            color: u.palette.success.main,
             onClick: e
           },
           pause: {
             enabled: t === "running",
             label: m("ProgramControl.Pause.bt"),
             color: "#FFFFFF33",
-            onClick: n || (() => {
+            onClick: i || (() => {
             })
           },
           stop: {
             enabled: t === "preparing" || t === "starting" || t === "running" || t === "pausing" || t === "paused",
             label: m("ProgramControl.Stop.bt"),
-            color: s.palette.error.main,
-            onClick: l
+            color: u.palette.error.main,
+            onClick: s
           }
         };
-        return o === "without_pause" ? [i.run, i.stop] : [i.run, i.pause, i.stop];
-      }, g = (i) => {
-        const u = { sx: { fontSize: "55px" } };
-        if (o === "without_pause")
-          return i === 0 ? /* @__PURE__ */ p(I, { ...u }) : /* @__PURE__ */ p(S, { ...u });
-        switch (i) {
+        return a === "without_pause" ? [n.run, n.stop] : [n.run, n.pause, n.stop];
+      }, h = (n) => {
+        const c = { sx: { fontSize: "55px" } };
+        if (a === "without_pause")
+          return n === 0 ? /* @__PURE__ */ g(S, { ...c }) : /* @__PURE__ */ g(P, { ...c });
+        switch (n) {
           case 0:
-            return /* @__PURE__ */ p(I, { ...u });
+            return /* @__PURE__ */ g(S, { ...c });
           case 1:
-            return /* @__PURE__ */ p(x, { ...u });
+            return /* @__PURE__ */ g(Y, { ...c });
           case 2:
-            return /* @__PURE__ */ p(S, { ...u });
+            return /* @__PURE__ */ g(P, { ...c });
           default:
             return null;
         }
-      }, T = d();
-      return /* @__PURE__ */ p(
-        E,
+      }, T = l();
+      return /* @__PURE__ */ g(
+        A,
         {
-          className: h,
+          className: p,
           sx: {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             gap: 2
           },
-          children: /* @__PURE__ */ p(
-            E,
+          children: /* @__PURE__ */ g(
+            A,
             {
               sx: {
                 display: "flex",
@@ -83,8 +83,8 @@ const Q = O(
                 justifyContent: "center",
                 alignItems: "center"
               },
-              children: T.map((i, u) => /* @__PURE__ */ V(
-                E,
+              children: T.map((n, c) => /* @__PURE__ */ M(
+                A,
                 {
                   sx: {
                     display: "flex",
@@ -93,47 +93,47 @@ const Q = O(
                     gap: 1
                   },
                   children: [
-                    /* @__PURE__ */ p(
-                      N,
+                    /* @__PURE__ */ g(
+                      D,
                       {
                         variant: "contained",
-                        disabled: !i.enabled || t === "preparing" || t === "starting" || t === "pausing" || t === "stopping" && !r,
-                        onClick: i.onClick,
+                        disabled: !n.enabled || t === "preparing" || t === "starting" || t === "pausing" || t === "stopping" && !r,
+                        onClick: n.onClick,
                         sx: {
                           width: "88px",
                           height: "88px",
                           borderRadius: "88px",
-                          backgroundColor: i.color,
-                          opacity: i.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? 1 : 0.3,
+                          backgroundColor: n.color,
+                          opacity: n.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? 1 : 0.3,
                           "&:hover": {
-                            backgroundColor: i.color,
-                            opacity: i.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? 0.8 : 0.3
+                            backgroundColor: n.color,
+                            opacity: n.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? 0.8 : 0.3
                           },
                           "&:disabled": {
-                            backgroundColor: i.color,
+                            backgroundColor: n.color,
                             opacity: 0.3
                           },
                           minWidth: "88px",
                           flexShrink: 0
                         },
-                        children: g(u)
+                        children: h(c)
                       }
                     ),
-                    /* @__PURE__ */ p(
-                      _,
+                    /* @__PURE__ */ g(
+                      F,
                       {
                         variant: "body1",
                         sx: {
-                          color: i.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? i.color : s.palette.text.disabled,
+                          color: n.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? n.color : u.palette.text.disabled,
                           textAlign: "center",
-                          opacity: i.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? 1 : 0.3
+                          opacity: n.enabled && t !== "preparing" && t !== "starting" && t !== "pausing" && !(t === "stopping" && !r) ? 1 : 0.3
                         },
-                        children: i.label
+                        children: n.label
                       }
                     )
                   ]
                 },
-                i.label
+                n.label
               ))
             }
           )
@@ -141,89 +141,89 @@ const Q = O(
       );
     }
   )
-), Z = O(
-  P(
+), rt = x(
+  R(
     ({
       programState: t,
       safetyState: e,
-      operationMode: n,
-      className: l
+      operationMode: i,
+      className: s
     }) => {
-      const a = f(), { t: r } = C(), o = () => {
+      const o = O(), { t: r } = V(), a = () => {
         if (e === "SAFETY_STATE_DEVICE_EMERGENCY_STOP" || e === "SAFETY_STATE_ROBOT_EMERGENCY_STOP" || e === "SAFETY_STATE_STOP_0" || e === "SAFETY_STATE_STOP_1" || e === "SAFETY_STATE_STOP_2" || e === "SAFETY_STATE_PROTECTIVE_STOP" || e === "SAFETY_STATE_STOP" || e === "SAFETY_STATE_REDUCED" || e === "SAFETY_STATE_MASTERING" || e === "SAFETY_STATE_CONFIRM_SAFETY" || e === "SAFETY_STATE_OPERATOR_SAFETY" || e === "SAFETY_STATE_RECOVERY" || e === "SAFETY_STATE_VIOLATION")
           return {
             label: r("ProgramStateIndicator.EStop.lb"),
-            color: a.palette.error.main
+            color: o.palette.error.main
           };
         if (e === "SAFETY_STATE_UNKNOWN" || e === "SAFETY_STATE_FAULT")
           return {
             label: r("ProgramStateIndicator.Error.lb"),
-            color: a.palette.error.main
+            color: o.palette.error.main
           };
         if (e === "SAFETY_STATE_NORMAL")
           switch (t) {
-            case c.PREPARING:
+            case d.PREPARING:
               return {
                 label: r("ProgramStateIndicator.Preparing.lb"),
-                color: a.palette.warning.main
+                color: o.palette.warning.main
               };
-            case c.STARTING:
+            case d.STARTING:
               return {
                 label: r("ProgramStateIndicator.Starting.lb"),
-                color: a.palette.warning.main
+                color: o.palette.warning.main
               };
-            case c.RUNNING:
+            case d.RUNNING:
               return {
                 label: r("ProgramStateIndicator.Running.lb"),
-                color: a.palette.success.main
+                color: o.palette.success.main
               };
-            case c.PAUSING:
+            case d.PAUSING:
               return {
                 label: r("ProgramStateIndicator.Pausing.lb"),
-                color: a.palette.warning.main
+                color: o.palette.warning.main
               };
-            case c.PAUSED:
+            case d.PAUSED:
               return {
                 label: r("ProgramStateIndicator.Paused.lb"),
-                color: a.palette.grey[600]
+                color: o.palette.grey[600]
               };
-            case c.STOPPING:
+            case d.STOPPING:
               return {
                 label: r("ProgramStateIndicator.Stopping.lb"),
-                color: a.palette.warning.main
+                color: o.palette.warning.main
               };
-            case c.COMPLETED:
+            case d.COMPLETED:
               return {
                 label: r("ProgramStateIndicator.Completed.lb"),
-                color: a.palette.success.main
+                color: o.palette.success.main
               };
-            case c.FAILED:
+            case d.FAILED:
               return {
                 label: r("ProgramStateIndicator.Failed.lb"),
-                color: a.palette.error.main
+                color: o.palette.error.main
               };
-            case c.STOPPED:
+            case d.STOPPED:
               return {
                 label: r("ProgramStateIndicator.Stopped.lb"),
-                color: a.palette.warning.main
+                color: o.palette.warning.main
               };
-            case c.ERROR:
+            case d.ERROR:
               return {
                 label: r("ProgramStateIndicator.Error.lb"),
-                color: a.palette.error.main
+                color: o.palette.error.main
               };
             default:
               return {
                 label: r("ProgramStateIndicator.Ready.lb"),
-                color: a.palette.success.main
+                color: o.palette.success.main
               };
           }
         return {
           label: r("ProgramStateIndicator.Idle.lb"),
-          color: a.palette.grey[600]
+          color: o.palette.grey[600]
         };
-      }, { label: h, color: s } = o(), d = `${h} / ${(() => {
-        switch (n) {
+      }, { label: p, color: u } = a(), l = `${p} / ${(() => {
+        switch (i) {
           case "OPERATION_MODE_AUTO":
             return r("ProgramStateIndicator.Auto.lb");
           case "OPERATION_MODE_MANUAL":
@@ -236,12 +236,12 @@ const Q = O(
             return r("ProgramStateIndicator.Auto.lb");
         }
       })()}`;
-      return /* @__PURE__ */ p(
-        R,
+      return /* @__PURE__ */ g(
+        w,
         {
-          className: l,
-          label: /* @__PURE__ */ p(
-            _,
+          className: s,
+          label: /* @__PURE__ */ g(
+            F,
             {
               variant: "body2",
               sx: {
@@ -249,13 +249,13 @@ const Q = O(
                 // Smaller than body2
                 lineHeight: 1.2
               },
-              children: d
+              children: l
             }
           ),
           variant: "filled",
           sx: {
-            backgroundColor: s,
-            color: a.palette.getContrastText(s),
+            backgroundColor: u,
+            color: o.palette.getContrastText(u),
             fontWeight: 500,
             height: "auto",
             "& .MuiChip-label": {
@@ -268,28 +268,28 @@ const Q = O(
     }
   )
 );
-function b(t) {
-  Y(t, []);
+function E(t) {
+  _(t, []);
 }
-function q(t) {
-  b(() => v(t));
+function nt(t) {
+  E(() => N(t));
 }
-function tt(t, e, n) {
-  b(() => M(t, e, n));
+function ot(t, e, i) {
+  E(() => U(t, e, i));
 }
-function et(t) {
-  return b(() => {
+function it(t) {
+  return E(() => {
     let e;
-    function n() {
-      t(), e = requestAnimationFrame(n);
+    function i() {
+      t(), e = requestAnimationFrame(i);
     }
-    return e = requestAnimationFrame(n), () => {
+    return e = requestAnimationFrame(i), () => {
       cancelAnimationFrame(e);
     };
   });
 }
-class D {
-  constructor(e = [], n = {}) {
+class v {
+  constructor(e = [], i = {}) {
     this.currentValues = [], this.targetValues = [], this.previousTargetValues = [], this.targetUpdateTime = 0, this.animationId = null, this.updateCount = 0, this.velocities = [], this.animate = () => {
       this.update(0.016666666666666666) ? this.animationId = null : this.animationId = requestAnimationFrame(this.animate);
     }, this.options = {
@@ -300,7 +300,7 @@ class D {
       },
       onComplete: () => {
       },
-      ...n
+      ...i
     }, this.currentValues = [...e], this.targetValues = [...e], this.previousTargetValues = [...e], this.velocities = new Array(e.length).fill(0), this.targetUpdateTime = performance.now(), this.updateCount = 0;
   }
   /**
@@ -313,14 +313,14 @@ class D {
    * @returns true when interpolation is complete (all values reached their targets)
    */
   update(e = 1 / 60) {
-    let n = !1, l = !0;
+    let i = !1, s = !0;
     this.updateCount++;
-    const a = Math.min(e, 1 / 15), r = this.updateCount === 1 ? 0.7 : 1;
-    for (let o = 0; o < this.currentValues.length; o++) {
-      const h = this.currentValues[o], s = this.targetValues[o], m = this.velocities[o], d = s - h, g = d * this.options.tension * r, T = m * this.options.friction, i = g - T, u = m + i * a, F = h + u * a;
-      Math.abs(d) < this.options.threshold && Math.abs(u) < this.options.threshold * 10 ? this.currentValues[o] !== s && (this.currentValues[o] = s, this.velocities[o] = 0, n = !0) : (l = !1, this.currentValues[o] = F, this.velocities[o] = u, n = !0);
+    const o = Math.min(e, 1 / 15), r = this.updateCount === 1 ? 0.7 : 1;
+    for (let a = 0; a < this.currentValues.length; a++) {
+      const p = this.currentValues[a], u = this.targetValues[a], m = this.velocities[a], l = u - p, h = l * this.options.tension * r, T = m * this.options.friction, n = h - T, c = m + n * o, f = p + c * o;
+      Math.abs(l) < this.options.threshold && Math.abs(c) < this.options.threshold * 10 ? this.currentValues[a] !== u && (this.currentValues[a] = u, this.velocities[a] = 0, i = !0) : (s = !1, this.currentValues[a] = f, this.velocities[a] = c, i = !0);
     }
-    return n && this.options.onChange(this.currentValues), l && this.options.onComplete(this.currentValues), l;
+    return i && this.options.onChange(this.currentValues), s && this.options.onComplete(this.currentValues), s;
   }
   /**
    * Set new target values for the interpolation to move towards
@@ -329,16 +329,16 @@ class D {
    * to prevent jarring movements when targets change frequently.
    */
   setTarget(e) {
-    const n = performance.now(), l = n - this.targetUpdateTime;
-    this.previousTargetValues = [...this.targetValues], this.targetValues = [...e], this.targetUpdateTime = n, this.updateCount = 0;
-    const a = this.previousTargetValues.every(
-      (r, o) => r === this.currentValues[o]
+    const i = performance.now(), s = i - this.targetUpdateTime;
+    this.previousTargetValues = [...this.targetValues], this.targetValues = [...e], this.targetUpdateTime = i, this.updateCount = 0;
+    const o = this.previousTargetValues.every(
+      (r, a) => r === this.currentValues[a]
     );
-    if (l < 8 && l > 0 && this.previousTargetValues.length > 0 && !a) {
-      const r = Math.min(l / 8, 1);
-      for (let o = 0; o < this.targetValues.length; o++) {
-        const h = this.previousTargetValues[o] || 0, s = e[o] || 0;
-        Math.abs(s - h) > 0.1 && (this.targetValues[o] = h + (s - h) * r);
+    if (s < 8 && s > 0 && this.previousTargetValues.length > 0 && !o) {
+      const r = Math.min(s / 8, 1);
+      for (let a = 0; a < this.targetValues.length; a++) {
+        const p = this.previousTargetValues[a] || 0, u = e[a] || 0;
+        Math.abs(u - p) > 0.1 && (this.targetValues[a] = p + (u - p) * r);
       }
     }
     for (; this.currentValues.length < e.length; )
@@ -410,24 +410,69 @@ class D {
     this.animationId === null && this.animate();
   }
 }
-function rt(t = [], e = {}) {
-  const n = A.useRef(null);
-  return n.current || (n.current = new D(t, e)), A.useEffect(() => {
-    var l;
-    (l = n.current) == null || l.updateOptions(e);
-  }, [e]), A.useEffect(() => () => {
+function at(t = [], e = {}) {
+  const i = b.useRef(null);
+  return i.current || (i.current = new v(t, e)), b.useEffect(() => {
+    var s;
+    (s = i.current) == null || s.updateOptions(e);
+  }, [e]), b.useEffect(() => () => {
+    var s;
+    (s = i.current) == null || s.destroy();
+  }, []), [i.current];
+}
+function st(t, e) {
+  const [i] = G(
+    () => L({ ...t })
+  ), s = I(null), o = I(null), r = I(0);
+  function a() {
+    o.current !== null && (cancelAnimationFrame(o.current), o.current = null);
+  }
+  function p() {
+    const l = s.current;
+    if (!l) return;
+    const h = performance.now(), T = (h - r.current) / 1e3;
+    r.current = h;
+    const n = l.update(T);
+    C(() => {
+      i.joint_position = l.getCurrentValues();
+    }), o.current = n ? null : requestAnimationFrame(p);
+  }
+  function u() {
+    o.current === null && (r.current = performance.now(), o.current = requestAnimationFrame(p));
+  }
+  function m(l) {
+    var T;
+    const h = l.joint_position.filter(
+      (n) => n !== void 0
+    );
+    (T = s.current) == null || T.setTarget(h), C(() => {
+      const n = l, c = i;
+      for (const f of Object.keys(n))
+        f !== "joint_position" && c[f] !== n[f] && (c[f] = n[f]);
+    }), u();
+  }
+  return E(() => {
+    const l = t.joint_position.filter(
+      (h) => h !== void 0
+    );
+    return s.current = new v(l, e), () => {
+      var h;
+      a(), (h = s.current) == null || h.destroy();
+    };
+  }), _(() => {
     var l;
-    (l = n.current) == null || l.destroy();
-  }, []), [n.current];
+    e && ((l = s.current) == null || l.updateOptions(e));
+  }, [e]), _(() => N(() => m(t)), [t]), i;
 }
 export {
-  c as P,
-  D as V,
-  Q as a,
-  Z as b,
-  q as c,
-  tt as d,
-  et as e,
-  rt as f,
-  b as u
+  d as P,
+  v as V,
+  et as a,
+  rt as b,
+  E as c,
+  nt as d,
+  ot as e,
+  it as f,
+  at as g,
+  st as u
 };

package/dist/chunks/useSmoothedMotionState-VYxEIyfr.cjs

@@ -0,0 +1 @@
+"use strict";const g=require("react/jsx-runtime"),C=require("@mui/material/styles"),V=require("@mui/material/Chip"),x=require("@mui/material/Typography"),O=require("mobx-react-lite"),R=require("react-i18next"),F=require("./externalizeComponent-OO4jcrz5.cjs"),N=require("@mui/icons-material/Pause"),_=require("@mui/icons-material/PlayArrow"),P=require("@mui/icons-material/Stop"),f=require("@mui/material/Box"),v=require("@mui/material/Button"),b=require("mobx"),T=require("react");var m=(e=>(e.IDLE="idle",e.PREPARING="preparing",e.STARTING="starting",e.RUNNING="running",e.PAUSING="pausing",e.PAUSED="paused",e.STOPPING="stopping",e.COMPLETED="completed",e.FAILED="failed",e.STOPPED="stopped",e.ERROR="error",e))(m||{});const M=F.externalizeComponent(O.observer(({state:e,onRun:t,onPause:i,onStop:s,onReset:o,requiresManualReset:r=!1,variant:a="with_pause",className:p})=>{const u=C.useTheme(),{t:d}=R.useTranslation(),l=()=>{const n={run:{enabled:e==="idle"||e==="stopped"||e==="paused"||e==="completed"||e==="failed"||e==="error",label:d(e==="paused"?"ProgramControl.Resume.bt":e==="error"||e==="failed"?"ProgramControl.Retry.bt":"ProgramControl.Start.bt"),color:u.palette.success.main,onClick:t},pause:{enabled:e==="running",label:d("ProgramControl.Pause.bt"),color:"#FFFFFF33",onClick:i||(()=>{})},stop:{enabled:e==="preparing"||e==="starting"||e==="running"||e==="pausing"||e==="paused",label:d("ProgramControl.Stop.bt"),color:u.palette.error.main,onClick:s}};return a==="without_pause"?[n.run,n.stop]:[n.run,n.pause,n.stop]},h=n=>{const c={sx:{fontSize:"55px"}};if(a==="without_pause")return n===0?g.jsx(_,{...c}):g.jsx(P,{...c});switch(n){case 0:return g.jsx(_,{...c});case 1:return g.jsx(N,{...c});case 2:return g.jsx(P,{...c});default:return null}},A=l();return g.jsx(f,{className:p,sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:g.jsx(f,{sx:{display:"flex",gap:"40px",flexWrap:"wrap",justifyContent:"center",alignItems:"center"},children:A.map((n,c)=>g.jsxs(f,{sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:1},children:[g.jsx(v,{variant:"contained",disabled:!n.enabled||e==="preparing"||e==="starting"||e==="pausing"||e==="stopping"&&!r,onClick:n.onClick,sx:{width:"88px",height:"88px",borderRadius:"88px",backgroundColor:n.color,opacity:n.enabled&&e!=="preparing"&&e!=="starting"&&e!=="pausing"&&!(e==="stopping"&&!r)?1:.3,"&:hover":{backgroundColor:n.color,opacity:n.enabled&&e!=="preparing"&&e!=="starting"&&e!=="pausing"&&!(e==="stopping"&&!r)?.8:.3},"&:disabled":{backgroundColor:n.color,opacity:.3},minWidth:"88px",flexShrink:0},children:h(c)}),g.jsx(x,{variant:"body1",sx:{color:n.enabled&&e!=="preparing"&&e!=="starting"&&e!=="pausing"&&!(e==="stopping"&&!r)?n.color:u.palette.text.disabled,textAlign:"center",opacity:n.enabled&&e!=="preparing"&&e!=="starting"&&e!=="pausing"&&!(e==="stopping"&&!r)?1:.3},children:n.label})]},n.label))})})})),w=F.externalizeComponent(O.observer(({programState:e,safetyState:t,operationMode:i,className:s})=>{const o=C.useTheme(),{t:r}=R.useTranslation(),a=()=>{if(t==="SAFETY_STATE_DEVICE_EMERGENCY_STOP"||t==="SAFETY_STATE_ROBOT_EMERGENCY_STOP"||t==="SAFETY_STATE_STOP_0"||t==="SAFETY_STATE_STOP_1"||t==="SAFETY_STATE_STOP_2"||t==="SAFETY_STATE_PROTECTIVE_STOP"||t==="SAFETY_STATE_STOP"||t==="SAFETY_STATE_REDUCED"||t==="SAFETY_STATE_MASTERING"||t==="SAFETY_STATE_CONFIRM_SAFETY"||t==="SAFETY_STATE_OPERATOR_SAFETY"||t==="SAFETY_STATE_RECOVERY"||t==="SAFETY_STATE_VIOLATION")return{label:r("ProgramStateIndicator.EStop.lb"),color:o.palette.error.main};if(t==="SAFETY_STATE_UNKNOWN"||t==="SAFETY_STATE_FAULT")return{label:r("ProgramStateIndicator.Error.lb"),color:o.palette.error.main};if(t==="SAFETY_STATE_NORMAL")switch(e){case m.PREPARING:return{label:r("ProgramStateIndicator.Preparing.lb"),color:o.palette.warning.main};case m.STARTING:return{label:r("ProgramStateIndicator.Starting.lb"),color:o.palette.warning.main};case m.RUNNING:return{label:r("ProgramStateIndicator.Running.lb"),color:o.palette.success.main};case m.PAUSING:return{label:r("ProgramStateIndicator.Pausing.lb"),color:o.palette.warning.main};case m.PAUSED:return{label:r("ProgramStateIndicator.Paused.lb"),color:o.palette.grey[600]};case m.STOPPING:return{label:r("ProgramStateIndicator.Stopping.lb"),color:o.palette.warning.main};case m.COMPLETED:return{label:r("ProgramStateIndicator.Completed.lb"),color:o.palette.success.main};case m.FAILED:return{label:r("ProgramStateIndicator.Failed.lb"),color:o.palette.error.main};case m.STOPPED:return{label:r("ProgramStateIndicator.Stopped.lb"),color:o.palette.warning.main};case m.ERROR:return{label:r("ProgramStateIndicator.Error.lb"),color:o.palette.error.main};default:return{label:r("ProgramStateIndicator.Ready.lb"),color:o.palette.success.main}}return{label:r("ProgramStateIndicator.Idle.lb"),color:o.palette.grey[600]}},{label:p,color:u}=a(),l=`${p} / ${(()=>{switch(i){case"OPERATION_MODE_AUTO":return r("ProgramStateIndicator.Auto.lb");case"OPERATION_MODE_MANUAL":return r("ProgramStateIndicator.Manual.lb");case"OPERATION_MODE_MANUAL_T1":return r("ProgramStateIndicator.ManualT1.lb");case"OPERATION_MODE_MANUAL_T2":return r("ProgramStateIndicator.ManualT2.lb");default:return r("ProgramStateIndicator.Auto.lb")}})()}`;return g.jsx(V,{className:s,label:g.jsx(x,{variant:"body2",sx:{fontSize:"0.75rem",lineHeight:1.2},children:l}),variant:"filled",sx:{backgroundColor:u,color:o.palette.getContrastText(u),fontWeight:500,height:"auto","& .MuiChip-label":{paddingX:1.5,paddingY:.5}}})}));function I(e){T.useEffect(e,[])}function Y(e){I(()=>b.autorun(e))}function j(e,t,i){I(()=>b.reaction(e,t,i))}function D(e){return I(()=>{let t;function i(){e(),t=requestAnimationFrame(i)}return t=requestAnimationFrame(i),()=>{cancelAnimationFrame(t)}})}class S{constructor(t=[],i={}){this.currentValues=[],this.targetValues=[],this.previousTargetValues=[],this.targetUpdateTime=0,this.animationId=null,this.updateCount=0,this.velocities=[],this.animate=()=>{this.update(.016666666666666666)?this.animationId=null:this.animationId=requestAnimationFrame(this.animate)},this.options={tension:120,friction:20,threshold:.001,onChange:()=>{},onComplete:()=>{},...i},this.currentValues=[...t],this.targetValues=[...t],this.previousTargetValues=[...t],this.velocities=new Array(t.length).fill(0),this.targetUpdateTime=performance.now(),this.updateCount=0}update(t=1/60){let i=!1,s=!0;this.updateCount++;const o=Math.min(t,1/15),r=this.updateCount===1?.7:1;for(let a=0;a<this.currentValues.length;a++){const p=this.currentValues[a],u=this.targetValues[a],d=this.velocities[a],l=u-p,h=l*this.options.tension*r,A=d*this.options.friction,n=h-A,c=d+n*o,E=p+c*o;Math.abs(l)<this.options.threshold&&Math.abs(c)<this.options.threshold*10?this.currentValues[a]!==u&&(this.currentValues[a]=u,this.velocities[a]=0,i=!0):(s=!1,this.currentValues[a]=E,this.velocities[a]=c,i=!0)}return i&&this.options.onChange(this.currentValues),s&&this.options.onComplete(this.currentValues),s}setTarget(t){const i=performance.now(),s=i-this.targetUpdateTime;this.previousTargetValues=[...this.targetValues],this.targetValues=[...t],this.targetUpdateTime=i,this.updateCount=0;const o=this.previousTargetValues.every((r,a)=>r===this.currentValues[a]);if(s<8&&s>0&&this.previousTargetValues.length>0&&!o){const r=Math.min(s/8,1);for(let a=0;a<this.targetValues.length;a++){const p=this.previousTargetValues[a]||0,u=t[a]||0;Math.abs(u-p)>.1&&(this.targetValues[a]=p+(u-p)*r)}}for(;this.currentValues.length<t.length;)this.currentValues.push(t[this.currentValues.length]),this.velocities.push(0);this.currentValues.length>t.length&&(this.currentValues=this.currentValues.slice(0,t.length),this.velocities=this.velocities.slice(0,t.length))}getCurrentValues(){return[...this.currentValues]}getValue(t){return this.currentValues[t]??0}isInterpolating(){return this.animationId!==null}stop(){this.animationId!==null&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setImmediate(t){this.stop(),this.currentValues=[...t],this.targetValues=[...t],this.previousTargetValues=[...t],this.velocities=new Array(t.length).fill(0),this.targetUpdateTime=performance.now(),this.updateCount=0,this.options.onChange(this.currentValues)}updateOptions(t){this.options={...this.options,...t}}startAutoInterpolation(){this.startInterpolation()}destroy(){this.stop()}startInterpolation(){this.animationId===null&&this.animate()}}function U(e=[],t={}){const i=T.useRef(null);return i.current||(i.current=new S(e,t)),T.useEffect(()=>{var s;(s=i.current)==null||s.updateOptions(t)},[t]),T.useEffect(()=>()=>{var s;(s=i.current)==null||s.destroy()},[]),[i.current]}function L(e,t){const[i]=T.useState(()=>b.observable({...e})),s=T.useRef(null),o=T.useRef(null),r=T.useRef(0);function a(){o.current!==null&&(cancelAnimationFrame(o.current),o.current=null)}function p(){const l=s.current;if(!l)return;const h=performance.now(),A=(h-r.current)/1e3;r.current=h;const n=l.update(A);b.runInAction(()=>{i.joint_position=l.getCurrentValues()}),o.current=n?null:requestAnimationFrame(p)}function u(){o.current===null&&(r.current=performance.now(),o.current=requestAnimationFrame(p))}function d(l){var A;const h=l.joint_position.filter(n=>n!==void 0);(A=s.current)==null||A.setTarget(h),b.runInAction(()=>{const n=l,c=i;for(const E of Object.keys(n))E!=="joint_position"&&c[E]!==n[E]&&(c[E]=n[E])}),u()}return I(()=>{const l=e.joint_position.filter(h=>h!==void 0);return s.current=new S(l,t),()=>{var h;a(),(h=s.current)==null||h.destroy()}}),T.useEffect(()=>{var l;t&&((l=s.current)==null||l.updateOptions(t))},[t]),T.useEffect(()=>b.autorun(()=>d(e)),[e]),i}exports.ProgramControl=M;exports.ProgramState=m;exports.ProgramStateIndicator=w;exports.ValueInterpolator=S;exports.useAnimationFrame=D;exports.useAutorun=Y;exports.useInterpolation=U;exports.useMounted=I;exports.useReaction=j;exports.useSmoothedMotionState=L;

package/dist/components/robots/LinearAxisAnimator.d.ts

@@ -7,5 +7,12 @@ type LinearAxisAnimatorProps = {
     onTranslationChanged?: (joints: Object3D[], jointValues: number[]) => void;
     children: React.ReactNode;
 };
+/**
+ * Applies the incoming motion state to the linear axis, as-is.
+ *
+ * This component performs no smoothing: it renders exactly the pose it is
+ * given. If damped/spring transitions are desired, run the motion state
+ * through {@link useSmoothedMotionState} before passing it here.
+ */
 export default function LinearAxisAnimator({ rapidlyChangingMotionState, dhParameters, onTranslationChanged, children, }: LinearAxisAnimatorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/robots/MotionGroupVisualizer.d.ts

@@ -5,5 +5,20 @@ export type MotionGroupVisualizerProps = {
     instanceUrl: string;
     inverseSolver?: string | null;
 } & (SupportedRobotProps | SupportedLinearAxisProps);
+/**
+ * Picks the right visualizer for the motion group (robot, turntable or linear
+ * axis) and renders it at exactly the pose it is given — no smoothing.
+ *
+ * For spring-damped transitions, use {@link MotionGroupVisualizer}.
+ */
+export declare const MotionGroupVisualizerExact: React.FC<MotionGroupVisualizerProps>;
+/**
+ * Motion group visualizer with built-in spring smoothing of the joint stream.
+ *
+ * Thin wrapper that runs the incoming motion state through
+ * {@link useSmoothedMotionState} and renders {@link MotionGroupVisualizerExact}.
+ * It is the batteries-included default; drop down to `MotionGroupVisualizerExact`
+ * when you need to control or disable smoothing.
+ */
 export declare const MotionGroupVisualizer: React.FC<MotionGroupVisualizerProps>;
 export default MotionGroupVisualizer;

package/dist/components/robots/RobotAnimator.d.ts

@@ -16,5 +16,12 @@ type RobotAnimatorProps = {
     onRotationChanged?: (joints: Object3D[], jointValues: number[]) => void;
     children: React.ReactNode;
 };
+/**
+ * Applies the incoming motion state to the robot's joints, as-is.
+ *
+ * This component performs no smoothing: it renders exactly the pose it is
+ * given. If damped/spring transitions are desired, run the motion state
+ * through {@link useSmoothedMotionState} before passing it here.
+ */
 declare const RobotAnimator: React.ForwardRefExoticComponent<RobotAnimatorProps & React.RefAttributes<RobotAnimatorHandle>>;
 export default RobotAnimator;

package/dist/components/robots/SupportedLinearAxis.d.ts

@@ -15,5 +15,22 @@ export type SupportedLinearAxisProps = {
     postModelRender?: () => void;
     transparentColor?: string;
 } & ThreeElements["group"];
-export declare const SupportedLinearAxis: ({ rapidlyChangingMotionState, modelFromController, dhParameters, getModel, flangeRef, postModelRender, transparentColor, instanceUrl, ...props }: SupportedLinearAxisProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the linear axis at exactly the pose it is given, frame by frame — no
+ * smoothing, so it tracks the streamed motion state with no lag or overshoot.
+ *
+ * Use this when the incoming stream is already the exact pose to display. For
+ * spring-damped transitions, use {@link SupportedLinearAxis}, or compose
+ * {@link useSmoothedMotionState} with this component yourself.
+ */
+export declare const SupportedLinearAxisExact: ({ rapidlyChangingMotionState, modelFromController, dhParameters, getModel, flangeRef, postModelRender, transparentColor, instanceUrl, ...props }: SupportedLinearAxisProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Linear axis visualizer with built-in spring smoothing of the joint stream.
+ *
+ * Thin wrapper that runs the incoming motion state through
+ * {@link useSmoothedMotionState} and renders {@link SupportedLinearAxisExact}.
+ * It is the batteries-included default; drop down to `SupportedLinearAxisExact`
+ * when you need to control or disable smoothing.
+ */
+export declare const SupportedLinearAxis: ({ rapidlyChangingMotionState, ...props }: SupportedLinearAxisProps) => import("react/jsx-runtime").JSX.Element;
 export default SupportedLinearAxis;