@wandelbots/wandelbots-js-react-components 3.1.1 → 3.2.0-pr.feat-improve-exports.414.40b4b4e

package/dist/theming-BO8z_Hpa.js

@@ -0,0 +1,2198 @@
+import { j as a, e as A } from "./externalizeComponent-RpcZ_G17.js";
+import { SvgIcon as q, AppBar as te, Toolbar as oe, Box as m, Typography as x, IconButton as z, alpha as U, Backdrop as ae, Menu as re, MenuItem as ne, useTheme as B, Paper as ie, Button as V, Dialog as le, DialogTitle as se, DialogContent as ce, DialogActions as de, Stack as F, Chip as pe, Divider as Z, Popover as ue, styled as ge, Fab as he, Tabs as be, Tab as me, Badge as xe, createTheme as fe, rgbToHex as ve } from "@mui/material";
+import { observer as v, useLocalObservable as ye } from "mobx-react-lite";
+import * as u from "react";
+import { useState as I, useRef as Q, useEffect as W, useMemo as Se, forwardRef as y, lazy as Ee, Suspense as Te } from "react";
+import { makeObservable as we, action as G, observable as Me, runInAction as E, makeAutoObservable as Ce } from "mobx";
+import { DescriptionOutlined as ke, ContentCopy as je, ExpandLess as Oe, ExpandMore as Ae } from "@mui/icons-material";
+import { a as _e, b as Re } from "./createSvgIcon-D3GRPlVu.js";
+import { useTranslation as D, Trans as T } from "react-i18next";
+import { c as Be, L as Ie, j as Pe, t as Le } from "./VelocitySlider-QSg_8eb1.js";
+import { tryParseJson as L } from "@wandelbots/nova-js";
+import * as K from "three";
+const Fe = (t) => /* @__PURE__ */ a.jsx(q, { ...t, viewBox: "0 0 10 8", children: /* @__PURE__ */ a.jsx(
+  "path",
+  {
+    d: "M8.825 0.9125L5 4.72917L1.175 0.9125L0 2.0875L5 7.0875L10 2.0875L8.825 0.9125Z",
+    fill: "currentColor",
+    fillOpacity: "0.56"
+  }
+) }), Rt = A(
+  v((t) => {
+    const {
+      appIcon: e,
+      appName: o,
+      apps: r = [],
+      onAppSelect: n,
+      disabled: i = !1,
+      sx: s
+    } = t, [d, g] = I(null), b = !!d, h = (c) => {
+      g(c.currentTarget);
+    }, p = () => {
+      g(null);
+    }, l = (c) => {
+      p(), c.onClick ? c.onClick() : c.href && (window.location.href = c.href), n == null || n(c);
+    };
+    return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+      /* @__PURE__ */ a.jsx(
+        te,
+        {
+          position: "static",
+          sx: {
+            boxShadow: "none",
+            backgroundImage: "none",
+            "& .MuiAppBar-root": {
+              backgroundImage: "none",
+              backgroundColor: "transparent"
+            },
+            ...s
+          },
+          children: /* @__PURE__ */ a.jsxs(oe, { sx: { minHeight: "62px !important" }, children: [
+            /* @__PURE__ */ a.jsx(m, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: e }),
+            /* @__PURE__ */ a.jsxs(m, { sx: { display: "flex", alignItems: "center", flexGrow: 1 }, children: [
+              /* @__PURE__ */ a.jsx(
+                x,
+                {
+                  component: "h1",
+                  sx: {
+                    fontWeight: "bold",
+                    fontSize: "1rem"
+                  },
+                  children: o
+                }
+              ),
+              r.length > 0 && /* @__PURE__ */ a.jsx(
+                z,
+                {
+                  color: "inherit",
+                  "aria-label": "switch app",
+                  "aria-controls": "app-menu",
+                  "aria-haspopup": "true",
+                  onClick: h,
+                  disabled: i,
+                  sx: {
+                    ml: 1,
+                    width: 28,
+                    height: 28,
+                    borderRadius: "6px",
+                    padding: 0,
+                    backgroundColor: (c) => U(c.palette.common.white, 0.1),
+                    opacity: 1,
+                    "&:hover": {
+                      backgroundColor: (c) => U(c.palette.common.white, 0.16)
+                    },
+                    "& .MuiSvgIcon-root": {
+                      fontSize: "8px",
+                      width: "8px",
+                      height: "6px"
+                    }
+                  },
+                  children: /* @__PURE__ */ a.jsx(Fe, {})
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        ae,
+        {
+          open: b,
+          onClick: p,
+          sx: {
+            backdropFilter: "blur(4px)",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            zIndex: (c) => c.zIndex.modal - 1
+          }
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        re,
+        {
+          id: "app-menu",
+          anchorEl: d,
+          open: b,
+          onClose: p,
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "left"
+          },
+          sx: {
+            zIndex: (c) => c.zIndex.modal,
+            "& .MuiPaper-root": {
+              minWidth: 200,
+              mt: 1
+            }
+          },
+          children: r.map((c) => /* @__PURE__ */ a.jsxs(ne, { onClick: () => l(c), children: [
+            /* @__PURE__ */ a.jsx(m, { sx: { display: "flex", alignItems: "center" }, children: c.icon }),
+            /* @__PURE__ */ a.jsx(x, { variant: "body1", sx: { ml: 2 }, children: c.name })
+          ] }, c.id))
+        }
+      )
+    ] });
+  })
+);
+class De {
+  constructor() {
+    this.messages = [], this.addMessage = (e, o = "info") => {
+      const r = {
+        id: Math.random().toString(36).substring(2, 11),
+        timestamp: /* @__PURE__ */ new Date(),
+        message: e,
+        level: o
+      };
+      this.messages.push(r);
+    }, this.clearMessages = () => {
+      this.messages = [];
+    }, this.addInfo = (e) => {
+      this.addMessage(e, "info");
+    }, this.addWarning = (e) => {
+      this.addMessage(e, "warning");
+    }, this.addError = (e) => {
+      this.addMessage(e, "error");
+    }, this.addDebug = (e) => {
+      this.addMessage(e, "debug");
+    }, we(this, {
+      messages: Me,
+      addMessage: G,
+      clearMessages: G
+    });
+  }
+}
+const N = (t, e, o) => ({
+  id: o || `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+  timestamp: /* @__PURE__ */ new Date(),
+  message: t,
+  level: e
+}), Bt = (t, e) => N(t, "debug", e), It = (t, e) => N(t, "info", e), Pt = (t, e) => N(t, "warning", e), Lt = (t, e) => N(t, "error", e), Ne = A(
+  v((t) => {
+    var h;
+    const { messages: e = [], onClear: o, height: r = 400, sx: n } = t, i = B(), s = Q(null);
+    W(() => {
+      if (e.length === 0) return;
+      const p = s.current;
+      if (!p) return;
+      const l = setTimeout(() => {
+        p.scrollTop = p.scrollHeight;
+      }, 10);
+      return () => clearTimeout(l);
+    }, [e.length]);
+    const d = (p) => p.toLocaleTimeString("en-US", {
+      hour12: !1,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    }), g = (p) => {
+      switch (p) {
+        case "error":
+          return i.palette.error.main;
+        case "warning":
+          return i.palette.warning.main;
+        case "info":
+          return i.palette.info.main;
+        case "debug":
+          return i.palette.text.disabled;
+        default:
+          return i.palette.text.secondary;
+      }
+    }, b = ({ message: p }) => {
+      const [l, c] = I(!1), [M, S] = I(!1), [k, _] = I(!1), R = p.message.length > 150, j = async () => {
+        try {
+          await navigator.clipboard.writeText(p.message), S(!0), setTimeout(() => S(!1), 2e3);
+        } catch (P) {
+          console.error("Failed to copy message:", P);
+        }
+      }, O = R && !l ? p.message.substring(0, 150) + "..." : p.message;
+      return /* @__PURE__ */ a.jsx(
+        m,
+        {
+          onMouseEnter: () => _(!0),
+          onMouseLeave: () => _(!1),
+          sx: {
+            display: "flex",
+            gap: 1,
+            fontFamily: "monospace",
+            flexDirection: "column",
+            "&:hover": {
+              backgroundColor: i.palette.action.hover
+            },
+            borderRadius: "4px",
+            padding: "2px 4px",
+            margin: "-2px -4px"
+          },
+          children: /* @__PURE__ */ a.jsxs(m, { sx: { display: "flex", gap: 1 }, children: [
+            /* @__PURE__ */ a.jsxs(
+              x,
+              {
+                component: "span",
+                sx: {
+                  fontWeight: 400,
+                  fontSize: "12px",
+                  lineHeight: "18px",
+                  letterSpacing: "0.4px",
+                  color: i.palette.text.disabled,
+                  whiteSpace: "nowrap",
+                  flexShrink: 0
+                },
+                children: [
+                  "[",
+                  d(p.timestamp),
+                  "]"
+                ]
+              }
+            ),
+            /* @__PURE__ */ a.jsx(
+              x,
+              {
+                component: "span",
+                sx: {
+                  fontWeight: 400,
+                  fontSize: "12px",
+                  lineHeight: "18px",
+                  letterSpacing: "0.4px",
+                  color: g(p.level),
+                  wordBreak: "break-word",
+                  overflowWrap: "anywhere",
+                  hyphens: "auto",
+                  flex: 1,
+                  whiteSpace: "pre-wrap"
+                },
+                children: O
+              }
+            ),
+            /* @__PURE__ */ a.jsxs(
+              m,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: 0.5,
+                  opacity: k ? 1 : 0,
+                  transition: "opacity 0.2s ease-in-out",
+                  visibility: k ? "visible" : "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ a.jsx(
+                    z,
+                    {
+                      size: "small",
+                      onClick: j,
+                      sx: {
+                        padding: "2px",
+                        color: i.palette.text.secondary,
+                        "&:hover": {
+                          backgroundColor: i.palette.action.hover
+                        }
+                      },
+                      title: M ? "Copied!" : "Copy message",
+                      children: /* @__PURE__ */ a.jsx(je, { sx: { fontSize: 12 } })
+                    }
+                  ),
+                  R && /* @__PURE__ */ a.jsx(
+                    z,
+                    {
+                      size: "small",
+                      onClick: () => c(!l),
+                      sx: {
+                        padding: "2px",
+                        color: i.palette.text.secondary,
+                        "&:hover": {
+                          backgroundColor: i.palette.action.hover
+                        }
+                      },
+                      title: l ? "Collapse" : "Expand",
+                      children: l ? /* @__PURE__ */ a.jsx(Oe, { sx: { fontSize: 12 } }) : /* @__PURE__ */ a.jsx(Ae, { sx: { fontSize: 12 } })
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        },
+        p.id
+      );
+    };
+    return /* @__PURE__ */ a.jsxs(
+      ie,
+      {
+        sx: {
+          backgroundColor: ((h = i.palette.backgroundPaperElevation) == null ? void 0 : h[2]) || "#171927",
+          backgroundImage: "none",
+          // Override any gradient from elevation
+          height: r,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          ...n
+        },
+        children: [
+          /* @__PURE__ */ a.jsxs(
+            m,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "12px 16px"
+              },
+              children: [
+                /* @__PURE__ */ a.jsxs(m, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ a.jsx(
+                    ke,
+                    {
+                      sx: {
+                        fontSize: 16,
+                        color: i.palette.action.active,
+                        opacity: 0.56
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ a.jsx(
+                    x,
+                    {
+                      sx: {
+                        fontWeight: 500,
+                        fontSize: "14px",
+                        lineHeight: "143%",
+                        letterSpacing: "0.17px",
+                        color: i.palette.text.primary
+                      },
+                      children: "Log"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a.jsx(
+                  V,
+                  {
+                    onClick: o,
+                    variant: "text",
+                    sx: {
+                      fontWeight: 500,
+                      fontSize: "13px",
+                      lineHeight: "22px",
+                      letterSpacing: "0.46px",
+                      color: i.palette.primary.main,
+                      textTransform: "none",
+                      minWidth: "auto",
+                      padding: "4px 8px",
+                      "&:hover": {
+                        backgroundColor: i.palette.primary.main + "14"
+                        // 8% opacity
+                      }
+                    },
+                    children: "Clear"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ a.jsx(
+            m,
+            {
+              ref: s,
+              sx: {
+                flex: 1,
+                overflow: "auto",
+                padding: "8px 16px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "2px",
+                // Custom scrollbar styling to keep it consistently dark
+                scrollbarWidth: "thin",
+                scrollbarColor: `${i.palette.divider} transparent`,
+                "&::-webkit-scrollbar": {
+                  width: "6px"
+                },
+                "&::-webkit-scrollbar-track": {
+                  background: "transparent"
+                },
+                "&::-webkit-scrollbar-thumb": {
+                  backgroundColor: i.palette.divider,
+                  borderRadius: "3px",
+                  "&:hover": {
+                    backgroundColor: i.palette.divider
+                  }
+                }
+              },
+              children: e.length === 0 ? /* @__PURE__ */ a.jsx(
+                x,
+                {
+                  sx: {
+                    color: i.palette.text.disabled,
+                    fontSize: "12px",
+                    fontStyle: "italic",
+                    textAlign: "center",
+                    marginTop: 2
+                  },
+                  children: "No log messages"
+                }
+              ) : e.map((p) => /* @__PURE__ */ a.jsx(b, { message: p }, p.id))
+            }
+          )
+        ]
+      }
+    );
+  })
+), Ft = A(
+  v((t) => {
+    const { store: e, onStoreReady: o, ...r } = t, n = Q(o);
+    W(() => {
+      n.current = o;
+    }, [o]);
+    const i = Se(() => {
+      var g;
+      const d = e || new De();
+      return (g = n.current) == null || g.call(n, d), d;
+    }, [e]), s = () => {
+      i.clearMessages();
+    };
+    return /* @__PURE__ */ a.jsx(
+      Ne,
+      {
+        ...r,
+        messages: i.messages,
+        onClear: s
+      }
+    );
+  })
+);
+function $e() {
+  const t = window.location.href;
+  return t.substring(
+    0,
+    t.indexOf("/", t.indexOf("//") + 2)
+  );
+}
+function Dt({
+  baseUrl: t = $e(),
+  ...e
+}) {
+  return /* @__PURE__ */ a.jsxs(
+    le,
+    {
+      "aria-labelledby": "no-motion-group-modal-title",
+      open: !0,
+      fullWidth: !0,
+      sx: {
+        "& .MuiModal-backdrop": {
+          backdropFilter: "blur(10px)"
+        },
+        "& .MuiDialog-paper": {
+          "::before": {
+            content: '""',
+            height: "8px",
+            width: "100%",
+            background: "linear-gradient(90deg, #FF0E65 0%, #47D3FF 100%)"
+          },
+          background: "#101629"
+        }
+      },
+      children: [
+        /* @__PURE__ */ a.jsx(se, { id: "no-motion-group-modal-title", children: "No motion group found" }),
+        /* @__PURE__ */ a.jsxs(
+          ce,
+          {
+            sx: {
+              marginTop: "3rem",
+              marginBottom: "1.5rem",
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ a.jsx(x, { color: "#fff", children: "Found no devices to connect to." }),
+              /* @__PURE__ */ a.jsx(x, { color: "#fff", children: "Please ensure a motion group has been created." })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a.jsx(de, { children: /* @__PURE__ */ a.jsxs(F, { width: "100%", maxWidth: "300px", margin: "auto", marginBottom: "2rem", children: [
+          /* @__PURE__ */ a.jsx(
+            V,
+            {
+              href: `${t}/settings`,
+              variant: "contained",
+              sx: {
+                borderRadius: "8px",
+                width: "100%"
+              },
+              children: "Go to settings app"
+            }
+          ),
+          /* @__PURE__ */ a.jsx(
+            V,
+            {
+              href: `${t}`,
+              variant: "text",
+              sx: {
+                marginTop: "1rem",
+                color: "#fff",
+                textDecoration: "underline",
+                fontSize: "0.75rem"
+              },
+              children: "Back to Homescreen"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+const ze = _e(/* @__PURE__ */ a.jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
+}), "Error"), Ve = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, fill: "none", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { fill: "#38C6F4", fillRule: "evenodd", d: "M6.359 14.25v2.934h7.63v-3.521L10.196 9.87 9 8.674l.859-.859.337-.337.858-.858.565.565.631.63.565.565 1.196-1.195.543-.544 1.196-1.195-1.196-1.196-2.304-2.304L11.054.75 9.86 1.946 3.446 8.359 2.25 9.554l1.196 1.196 2.913 2.913zm1.69 0v1.244h4.249v-1.13L7.804 9.87 6.608 8.674l1.196-1.196L9.86 5.424l.007-.008-.543-.543-4.681 4.681 2.912 2.913.496.496v.113h2.124l1.174 1.174zm3.005-10.022-.294.294-.543-.543.837-.837 2.304 2.304-.543.543-.565-.565z", clipRule: "evenodd" })), Ze = y(Ve);
+var X = /* @__PURE__ */ ((t) => (t.PRECONDITION_NOT_FULFILLED = "PRECONDITION_NOT_FULFILLED", t.ROBOT_DISCONNECTED = "ROBOT_DISCONNECTED", t.CELL_OPEN = "CELL_OPEN", t.E_STOP = "E_STOP", t.MANUAL_MODE = "MANUAL_MODE", t.READY = "READY", t))(X || {});
+const Ye = A(
+  v(({ setupState: t, className: e }) => {
+    const o = B(), { t: r } = D(), n = () => {
+      var b, h, p, l, c, M, S;
+      switch (t) {
+        case "READY":
+          return {
+            label: r("RobotSetupReadinessIndicator.Ready.lb"),
+            indicatorColor: ((b = o.palette.tertiary) == null ? void 0 : b.main) || o.palette.primary.main,
+            backgroundColor: ((h = o.palette.backgroundPaperElevation) == null ? void 0 : h[11]) || o.palette.background.paper,
+            textColor: o.palette.secondary.contrastText
+          };
+        case "ROBOT_DISCONNECTED":
+          return {
+            label: r("RobotSetupReadinessIndicator.RobotDisconnected.lb"),
+            indicatorColor: o.palette.error.main,
+            backgroundColor: ((p = o.palette.backgroundPaperElevation) == null ? void 0 : p[11]) || o.palette.background.paper,
+            textColor: o.palette.secondary.contrastText
+          };
+        case "CELL_OPEN":
+          return {
+            label: r("RobotSetupReadinessIndicator.CellOpen.lb"),
+            indicatorColor: o.palette.error.main,
+            backgroundColor: ((l = o.palette.backgroundPaperElevation) == null ? void 0 : l[11]) || o.palette.background.paper,
+            textColor: o.palette.secondary.contrastText
+          };
+        case "E_STOP":
+          return {
+            label: r("RobotSetupReadinessIndicator.EStop.lb"),
+            indicatorColor: o.palette.error.main,
+            backgroundColor: ((c = o.palette.backgroundPaperElevation) == null ? void 0 : c[11]) || o.palette.background.paper,
+            textColor: o.palette.secondary.contrastText
+          };
+        case "MANUAL_MODE":
+          return {
+            label: r("RobotSetupReadinessIndicator.ManualMode.lb"),
+            indicatorColor: o.palette.error.main,
+            backgroundColor: ((M = o.palette.backgroundPaperElevation) == null ? void 0 : M[11]) || o.palette.background.paper,
+            textColor: o.palette.secondary.contrastText
+          };
+        case "PRECONDITION_NOT_FULFILLED":
+        default:
+          return {
+            label: r(
+              "RobotSetupReadinessIndicator.PreconditionNotFulfilled.lb"
+            ),
+            indicatorColor: o.palette.error.main,
+            backgroundColor: ((S = o.palette.backgroundPaperElevation) == null ? void 0 : S[11]) || o.palette.background.paper,
+            textColor: o.palette.secondary.contrastText
+          };
+      }
+    }, { label: i, indicatorColor: s, backgroundColor: d, textColor: g } = n();
+    return /* @__PURE__ */ a.jsx(
+      pe,
+      {
+        className: e,
+        label: /* @__PURE__ */ a.jsxs(
+          m,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [
+              /* @__PURE__ */ a.jsx(
+                m,
+                {
+                  sx: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    backgroundColor: s,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ a.jsx(
+                x,
+                {
+                  variant: "body2",
+                  sx: {
+                    color: g,
+                    fontSize: "0.75rem",
+                    // Smaller than body2
+                    lineHeight: 1.2
+                  },
+                  children: i
+                }
+              )
+            ]
+          }
+        ),
+        variant: "filled",
+        sx: {
+          backgroundColor: d,
+          color: o.palette.getContrastText(d),
+          fontWeight: 500,
+          height: "auto",
+          "& .MuiChip-label": {
+            paddingX: 1.5,
+            paddingY: 0.5
+          }
+        }
+      }
+    );
+  })
+), Nt = A(
+  v(
+    ({
+      robotName: t,
+      robotType: e,
+      setupState: o,
+      PreconditionComponent: r = Ye,
+      className: n
+    }) => {
+      var g;
+      const i = B(), s = e || "Robot", d = o === X.READY;
+      return /* @__PURE__ */ a.jsxs(
+        m,
+        {
+          className: n,
+          sx: {
+            border: `1px solid ${i.palette.divider}`,
+            background: ((g = i.palette.backgroundPaperElevation) == null ? void 0 : g[8]) || "#292B3F",
+            borderRadius: "8px",
+            padding: "20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            opacity: 1
+          },
+          children: [
+            /* @__PURE__ */ a.jsxs(
+              m,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 2,
+                  flex: 1
+                },
+                children: [
+                  d ? /* @__PURE__ */ a.jsx(
+                    m,
+                    {
+                      sx: {
+                        fontSize: 24,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: 24,
+                        height: 24,
+                        "& svg": {
+                          fill: `${i.palette.primary.main} !important`
+                        },
+                        "& svg path": {
+                          fill: `${i.palette.primary.main} !important`
+                        }
+                      },
+                      children: /* @__PURE__ */ a.jsx(Ze, {})
+                    }
+                  ) : /* @__PURE__ */ a.jsx(
+                    ze,
+                    {
+                      sx: {
+                        color: i.palette.error.main,
+                        fontSize: 24
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ a.jsx(
+                    x,
+                    {
+                      variant: "body1",
+                      sx: {
+                        fontWeight: 500,
+                        color: i.palette.text.primary
+                      },
+                      children: t
+                    }
+                  ),
+                  /* @__PURE__ */ a.jsx(
+                    Z,
+                    {
+                      orientation: "vertical",
+                      flexItem: !0,
+                      sx: {
+                        backgroundColor: i.palette.text.secondary,
+                        opacity: 0.3,
+                        width: "1px"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ a.jsx(
+                    x,
+                    {
+                      variant: "body2",
+                      sx: {
+                        color: i.palette.text.secondary
+                      },
+                      children: s
+                    }
+                  )
+                ]
+              }
+            ),
+            r && /* @__PURE__ */ a.jsx(r, { setupState: o })
+          ]
+        }
+      );
+    }
+  )
+), We = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "M5.248 21c-.334 0-.619-.116-.853-.35a1.153 1.153 0 0 1-.351-.848c0-.333.117-.616.351-.85.234-.233.519-.35.853-.35H7.24L4.558 9.87a2.881 2.881 0 0 1-1.126-1.042A2.77 2.77 0 0 1 3 7.317c0-.793.28-1.467.838-2.023a2.774 2.774 0 0 1 2.033-.834 2.71 2.71 0 0 1 1.728.585c.494.389.832.887 1.014 1.493h3.58V5.239c0-.22.076-.406.226-.555a.76.76 0 0 1 .558-.224c.136 0 .263.035.381.104.118.07.209.167.273.292v.14l1.835-1.702a.979.979 0 0 1 .52-.279.881.881 0 0 1 .58.091l4.01 1.85a.74.74 0 0 1 .36.364.537.537 0 0 1-.002.474.592.592 0 0 1-.366.323.657.657 0 0 1-.477-.039l-3.858-1.774L13.76 6.59v1.454l2.473 2.233 3.858-1.774a.648.648 0 0 1 .485-.03.571.571 0 0 1 .358.314.513.513 0 0 1 .01.482.79.79 0 0 1-.367.357l-4.011 1.882a.881.881 0 0 1-.58.09.979.979 0 0 1-.52-.278L13.63 9.638v.14a.92.92 0 0 1-.273.275.665.665 0 0 1-.381.12.76.76 0 0 1-.558-.224.752.752 0 0 1-.225-.555V8.096h-3.58a2.82 2.82 0 0 1-.215.54 2.552 2.552 0 0 1-.323.479l5.139 9.488h2.673c.335 0 .62.116.854.35.234.233.35.516.35.849 0 .332-.116.615-.35.849a1.167 1.167 0 0 1-.854.349H5.248Zm.623-12.385c.362 0 .67-.126.924-.378a1.25 1.25 0 0 0 .38-.92 1.25 1.25 0 0 0-.38-.92 1.261 1.261 0 0 0-.924-.379 1.26 1.26 0 0 0-.925.379 1.25 1.25 0 0 0-.38.92c0 .36.127.667.38.92.254.252.562.378.925.378Z" })), He = y(We), Ue = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "m13.37 9.12 1.69 1.69 2.99-2.99-3.73-3.73-.95-.95-7.66 7.66-.95.95 3.99 3.99v3.44h7.55v-3.55l-4.72-4.72 1.79-1.79Zm-.91-2.99.91-.91 2.6 2.6-.91.91-2.6-2.6Zm-2.25 10.24h3.74l-1.34-1.34-.04-.04h-2.5l-3.25-3.25 4.59-4.59.92.92L9.5 10.9l5.33 5.33v1.48H10.2v-1.35l.01.01ZM2 2v4.99h1.41V3.4h3.58V2H2ZM22.21 2h-4.98v1.41h3.59v3.58h1.4V2h-.01ZM20.81 20.65h-3.58v1.4h4.98v-4.99h-1.4v3.59ZM3.4 17.06H2v4.98h4.99v-1.4H3.4v-3.58Z" })), Ge = y(Ue), w = v(
+  ({
+    id: t,
+    icon: e,
+    color: o,
+    title: r,
+    name: n,
+    label: i,
+    explanation: s,
+    literalValue: d,
+    anchorOrigin: g,
+    transformOrigin: b
+  }) => {
+    const h = ye(() => ({
+      anchorEl: null,
+      get isPopoverOpen() {
+        return !!h.anchorEl;
+      },
+      openPopover(p) {
+        h.anchorEl = p.currentTarget;
+      },
+      closePopover() {
+        h.anchorEl = null;
+      }
+    }));
+    return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+      /* @__PURE__ */ a.jsxs(
+        F,
+        {
+          "aria-owns": h.isPopoverOpen ? t : void 0,
+          "aria-haspopup": "true",
+          onMouseEnter: h.openPopover,
+          onMouseLeave: h.closePopover,
+          direction: "row",
+          spacing: 1,
+          sx: {
+            cursor: "pointer"
+          },
+          children: [
+            /* @__PURE__ */ a.jsx(
+              q,
+              {
+                component: e,
+                sx: {
+                  color: o
+                }
+              }
+            ),
+            i && /* @__PURE__ */ a.jsx("div", { style: {
+              color: o
+            }, children: i })
+          ]
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        ue,
+        {
+          id: t,
+          sx: {
+            pointerEvents: "none"
+          },
+          open: h.isPopoverOpen,
+          anchorEl: h.anchorEl,
+          anchorOrigin: g ?? {
+            vertical: "bottom",
+            horizontal: "left"
+          },
+          transformOrigin: b ?? {
+            vertical: "top",
+            horizontal: "left"
+          },
+          onClose: h.closePopover,
+          disableRestoreFocus: !0,
+          children: /* @__PURE__ */ a.jsxs(
+            F,
+            {
+              gap: "1rem",
+              padding: 2,
+              maxWidth: "450px",
+              sx: {
+                wordWrap: "break-word"
+              },
+              children: [
+                /* @__PURE__ */ a.jsxs("div", { children: [
+                  r && /* @__PURE__ */ a.jsx(x, { component: "span", fontSize: "14px", children: `${r}: ` }),
+                  /* @__PURE__ */ a.jsx(
+                    x,
+                    {
+                      component: "span",
+                      color: o,
+                      fontWeight: "bold",
+                      fontSize: "14px",
+                      children: n
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a.jsx(x, { fontSize: "14px", children: s }),
+                d && /* @__PURE__ */ a.jsx(x, { fontSize: "12px", children: d })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+), Ke = v(
+  ({
+    isVirtual: t,
+    motionGroupId: e,
+    anchorOrigin: o,
+    transformOrigin: r,
+    compact: n
+  }) => {
+    const i = B(), { t: s } = D();
+    return t ? /* @__PURE__ */ a.jsx(
+      w,
+      {
+        id: "motion-group-virtual",
+        icon: Ge,
+        color: i.palette.tertiary.main,
+        name: s("SafetyBar.ControllerType.Virtual.lb"),
+        label: n ? null : s("SafetyBar.ControllerType.Virtual.lb"),
+        explanation: /* @__PURE__ */ a.jsxs(
+          T,
+          {
+            i18nKey: "SafetyBar.MotionGroup.Virtual.Explanation.lb",
+            values: {
+              motionGroupId: e
+            },
+            children: [
+              "Motion group ",
+              /* @__PURE__ */ a.jsx("code", { children: e }),
+              " refers to a virtual robot with no physical counterpart. It can be freely manipulated without special safety precautions."
+            ]
+          }
+        ),
+        anchorOrigin: o,
+        transformOrigin: r
+      }
+    ) : /* @__PURE__ */ a.jsx(
+      w,
+      {
+        id: "motion-group-physical",
+        icon: He,
+        color: i.palette.primary.main,
+        name: s("SafetyBar.ControllerType.Physical.lb"),
+        label: n ? null : s("SafetyBar.ControllerType.Physical.lb"),
+        explanation: /* @__PURE__ */ a.jsx(
+          T,
+          {
+            i18nKey: "SafetyBar.MotionGroup.Physical.Explanation.lb",
+            values: {
+              motionGroupId: e
+            },
+            components: { code: /* @__PURE__ */ a.jsx("code", {}), strong: /* @__PURE__ */ a.jsx("strong", {}) }
+          }
+        ),
+        anchorOrigin: o,
+        transformOrigin: r
+      }
+    );
+  }
+), Je = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.306 2.768c0-.424.344-.768.768-.768h.406C19.53 2 22 4.551 22 7.699c0 3.237-2.51 5.587-5.31 5.703-.84 1.595-2.478 2.677-4.36 2.677a4.845 4.845 0 0 1-3.146-1.163c-.6 1.783 0 3.922 1.79 4.99 1.929 1.149 4.395.467 5.508-1.524l.212-.378a.75.75 0 1 1 1.308.732l-.231.414c-1.524 2.725-4.9 3.66-7.54 2.085-2.716-1.618-3.432-5.037-2.129-7.599a5.22 5.22 0 0 1-.73-2.677c0-2.192 1.335-4.063 3.212-4.793-1.195-1.427-3.29-1.96-5.08-.892-1.928 1.15-2.589 3.696-1.475 5.687l.231.413a.75.75 0 0 1-1.308.732l-.212-.377c-1.524-2.726-.62-6.211 2.02-7.785 2.716-1.619 5.943-.55 7.44 1.897l.13-.001c2.739 0 4.96 2.292 4.96 5.12 0 .284-.023.563-.066.834 1.795-.354 3.288-1.96 3.288-4.095 0-2.3-1.805-4.163-4.032-4.163h-.406a.768.768 0 0 1-.768-.768Zm.496 8.191c0 .286-.033.564-.094.831a3.62 3.62 0 0 1-.672 1.415 3.425 3.425 0 0 1-2.706 1.338 3.402 3.402 0 0 1-2.384-.98 3.598 3.598 0 0 1-.852-1.306 3.677 3.677 0 0 1-.235-1.298c0-1.623 1.046-2.994 2.48-3.435a3.37 3.37 0 0 1 1.522-.107c1.665.264 2.94 1.75 2.94 3.542Z" })), qe = y(Je), Qe = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "M19.763 16.432 13.516 5.864c-.674-1.152-2.358-1.152-3.049 0l-6.23 10.568C3.563 17.567 4.405 19 5.753 19H18.23c1.364 0 2.206-1.432 1.532-2.568ZM12 8.498c.539 0 .96.428.96.938v.066l-.32 4.708a.639.639 0 0 1-.64.592.639.639 0 0 1-.64-.592l-.32-4.708A.953.953 0 0 1 12 8.498Zm0 8.79c-.556 0-1.01-.444-1.01-.987 0-.544.454-.988 1.01-.988s1.01.444 1.01.988c0 .542-.454.987-1.01.987Z", fill: "#fff", fillOpacity: 0.56 })), Xe = y(Qe), et = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "M12.953 5.09a1.497 1.497 0 0 0-1.653-.518l-1.35.43a1.504 1.504 0 0 0-1.726-.376L2.858 6.97c-.736.321-1.06 1.155-.726 1.862.334.707 1.202 1.02 1.937.698l4.27-1.865 1.466 1.973v.402c0 .873-.627 1.63-1.512 1.827l-2.56.567c-1.329.295-2.27 1.431-2.27 2.74v.107c0 .26.22.469.489.469h11.117c1.329 0 2.618.435 3.656 1.233l1.665 1.28A1 1 0 0 0 22 17.47V11.062c0-.312-.108-.616-.308-.863l-3.415-4.218a1.5 1.5 0 0 0-1.618-.471l-.378.12-.866-.475a1.516 1.516 0 0 0-1.188-.114l-1.06.338-.214-.289Z" })), tt = y(et), ot = v(
+  ({
+    operationMode: t,
+    anchorOrigin: e,
+    transformOrigin: o,
+    compact: r
+  }) => {
+    const { t: n } = D(), i = B();
+    switch (t) {
+      case "OPERATION_MODE_AUTO":
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "operation-mode-auto",
+            icon: qe,
+            title: n("SafetyBar.OperationMode.ti"),
+            name: n("SafetyBar.OperationMode.Automatic.ti"),
+            label: r ? null : n("SafetyBar.OperationMode.Automatic.ti"),
+            color: i.palette.text.secondary,
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.OperationMode.Auto.Explanation.lb", children: "The robot controller is in automatic operation mode. Automated movement without manual confirmation is possible in this mode." }),
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+      case "OPERATION_MODE_MANUAL":
+      case "OPERATION_MODE_MANUAL_T1":
+      case "OPERATION_MODE_MANUAL_T2":
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "operation-mode-manual",
+            icon: tt,
+            color: i.palette.warning.main,
+            title: n("SafetyBar.OperationMode.ti"),
+            name: n("SafetyBar.OperationMode.Manual.lb"),
+            label: r ? null : n("SafetyBar.OperationMode.Manual.lb"),
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.OperationMode.Manual.Explanation.lb", children: "The robot controller is in manual operation mode. On a physical robot, this generally indicates that an enabling switch must be held for the robot to move successfully." }),
+            literalValue: t,
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+      default:
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "operation-mode-error",
+            icon: Xe,
+            color: i.palette.warning.main,
+            title: n("SafetyBar.OperationMode.ti"),
+            name: n("SafetyBar.OperationMode.Error.lb"),
+            label: r ? null : n("SafetyBar.OperationMode.Error.lb"),
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.OperationMode.Error.Explanation.lb", children: "The robot controller has entered an unexpected operation mode. Motion group movement may not be possible." }),
+            literalValue: t,
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+    }
+  }
+), at = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "M19.763 16.432 13.516 5.864c-.674-1.152-2.358-1.152-3.049 0l-6.23 10.568C3.563 17.567 4.405 19 5.753 19H18.23c1.364 0 2.206-1.432 1.532-2.568ZM12 8.498c.539 0 .96.428.96.938v.066l-.32 4.708a.639.639 0 0 1-.64.592.639.639 0 0 1-.64-.592l-.32-4.708A.953.953 0 0 1 12 8.498Zm0 8.79c-.556 0-1.01-.444-1.01-.987 0-.544.454-.988 1.01-.988s1.01.444 1.01.988c0 .542-.454.987-1.01.987Z" })), rt = y(at), nt = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "M10.24 10.636 12 13.764l1.76-3.128h-3.52Z" }), /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.364 12a6.364 6.364 0 1 1-12.728 0 6.364 6.364 0 0 1 12.728 0ZM7.909 9.273 12 16.546l4.09-7.273H7.91Z" }), /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-1.364 0a8.636 8.636 0 1 1-17.273 0 8.636 8.636 0 0 1 17.273 0Z" })), it = y(nt), lt = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "M9.057 15.115c-1.681 0-3.111-.59-4.29-1.768C3.59 12.17 3 10.74 3 9.057c0-.29.021-.582.064-.876a4.1 4.1 0 0 1 .214-.844.78.78 0 0 1 .273-.36c.115-.077.244-.133.389-.168a.857.857 0 0 1 .437.008c.146.04.28.12.4.24l2.806 2.787 2.26-2.261-2.775-2.786a.903.903 0 0 1-.241-.405.875.875 0 0 1-.008-.442 1.13 1.13 0 0 1 .174-.389.82.82 0 0 1 .355-.273c.268-.107.548-.182.838-.224.29-.043.581-.064.871-.064 1.682 0 3.112.59 4.29 1.768 1.179 1.178 1.768 2.608 1.768 4.29 0 .444-.042.858-.126 1.241-.084.384-.21.755-.377 1.113l5.726 5.692A2.2 2.2 0 0 1 21 18.721a2.2 2.2 0 0 1-.662 1.617A2.2 2.2 0 0 1 18.72 21a2.173 2.173 0 0 1-1.617-.679l-5.692-5.709c-.372.161-.75.285-1.133.372-.383.087-.79.13-1.222.13Z", fill: "#fff", fillOpacity: 0.56 })), st = y(lt), ct = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7c0 .283.092.517.275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z" })), dt = y(ct), pt = ({
+  title: t,
+  titleId: e,
+  ...o
+}, r) => /* @__PURE__ */ u.createElement("svg", { width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", ref: r, "aria-labelledby": e, ...o }, t ? /* @__PURE__ */ u.createElement("title", { id: e }, t) : null, /* @__PURE__ */ u.createElement("path", { d: "M9 16h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 16 15V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 15 8H9a.968.968 0 0 0-.713.287A.968.968 0 0 0 8 9v6c0 .283.096.52.287.713.192.191.43.287.713.287Zm3 6a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z" })), ut = y(pt), gt = v(
+  ({
+    safetyState: t,
+    anchorOrigin: e,
+    transformOrigin: o,
+    compact: r
+  }) => {
+    const { t: n } = D(), i = B();
+    switch (t) {
+      // Normal state, robot can move
+      case "SAFETY_STATE_NORMAL":
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "safety-state-normal",
+            title: n("SafetyBar.SafetyState.ti"),
+            name: n("SafetyBar.SafetyState.Normal.lb"),
+            label: r ? null : n("SafetyBar.SafetyState.Normal.lb"),
+            icon: dt,
+            color: i.palette.text.secondary,
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.SafetyState.Normal.Explanation.lb", children: "The robot controller is in a normal safety state. Movement is not prevented by this state." }),
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+      // Estop
+      case "SAFETY_STATE_DEVICE_EMERGENCY_STOP":
+      case "SAFETY_STATE_ROBOT_EMERGENCY_STOP":
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "safety-state-estop",
+            title: n("SafetyBar.SafetyState.ti"),
+            name: n("SafetyBar.SafetyState.Estop.lb"),
+            label: r ? null : n("SafetyBar.SafetyState.Estop.lb"),
+            icon: it,
+            color: i.palette.error.main,
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.StopState.Estop.Explanation.lb", children: "An emergency stop of the robot controller has been triggered. Movement of the robot is no longer possible until the estop is released." }),
+            literalValue: t,
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+      // General stop
+      case "SAFETY_STATE_STOP_0":
+      case "SAFETY_STATE_STOP_1":
+      case "SAFETY_STATE_STOP_2":
+      case "SAFETY_STATE_PROTECTIVE_STOP":
+      case "SAFETY_STATE_STOP":
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "safety-state-stop",
+            icon: ut,
+            title: n("SafetyBar.SafetyState.ti"),
+            name: n("SafetyBar.SafetyState.Stop.lb"),
+            label: r ? null : n("SafetyBar.SafetyState.Stop.lb"),
+            color: i.palette.warning.main,
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.SafetyState.Stop.Explanation.lb", children: "The robot controller has entered a stop state. Movement is no longer possible until the stop state is resolved." }),
+            literalValue: t,
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+      // Manual action required
+      case "SAFETY_STATE_REDUCED":
+      case "SAFETY_STATE_MASTERING":
+      case "SAFETY_STATE_CONFIRM_SAFETY":
+      case "SAFETY_STATE_OPERATOR_SAFETY":
+      case "SAFETY_STATE_RECOVERY":
+      case "SAFETY_STATE_VIOLATION":
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "safety-state-manual-action-required",
+            icon: st,
+            color: i.palette.warning.main,
+            title: n("SafetyBar.SafetyState.ti"),
+            name: n("SafetyBar.SafetyState.ManualActionRequired.lb"),
+            label: r ? null : n("SafetyBar.SafetyState.ManualActionRequired.lb"),
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.SafetyState.ManualActionRequired.Explanation.lb", children: "The robot controller has entered a safety state requiring manual action to resolve." }),
+            literalValue: t,
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+      // Error
+      case "SAFETY_STATE_UNKNOWN":
+      case "SAFETY_STATE_FAULT":
+        return /* @__PURE__ */ a.jsx(
+          w,
+          {
+            id: "safety-state-error",
+            icon: rt,
+            color: i.palette.error.main,
+            title: n("SafetyBar.SafetyState.ti"),
+            name: n("SafetyBar.SafetyState.Error.lb"),
+            label: r ? null : n("SafetyBar.SafetyState.Error.lb"),
+            explanation: /* @__PURE__ */ a.jsx(T, { i18nKey: "SafetyBar.SafetyState.Error.Explanation.lb", children: "The robot controller has entered an unexpected safety state." }),
+            literalValue: t,
+            anchorOrigin: e,
+            transformOrigin: o
+          }
+        );
+      default:
+        Be(t, `Unknown safety state ${t}`);
+    }
+  }
+), $t = A(
+  v(
+    ({
+      isVirtual: t,
+      motionGroupId: e,
+      operationMode: o,
+      safetyState: r,
+      anchorOrigin: n,
+      transformOrigin: i,
+      compact: s = !0
+    }) => {
+      const d = s ? 1 : 2;
+      return /* @__PURE__ */ a.jsxs(
+        F,
+        {
+          direction: "row",
+          gap: d,
+          alignItems: "center",
+          sx: { height: "24px" },
+          children: [
+            /* @__PURE__ */ a.jsx(
+              gt,
+              {
+                safetyState: r,
+                anchorOrigin: n,
+                transformOrigin: i,
+                compact: s
+              }
+            ),
+            /* @__PURE__ */ a.jsx(Z, { orientation: "vertical", flexItem: !0 }),
+            /* @__PURE__ */ a.jsx(
+              ot,
+              {
+                operationMode: o,
+                anchorOrigin: n,
+                transformOrigin: i,
+                compact: s
+              }
+            ),
+            /* @__PURE__ */ a.jsx(Z, { orientation: "vertical", flexItem: !0 }),
+            /* @__PURE__ */ a.jsx(
+              Ke,
+              {
+                isVirtual: t,
+                motionGroupId: e,
+                anchorOrigin: n,
+                transformOrigin: i,
+                compact: s
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+), ht = ge(he, {
+  shouldForwardProp: (t) => t !== "selected"
+})(({ theme: t }) => {
+  var e, o, r;
+  return {
+    borderRadius: "20px",
+    "&:hover": {
+      background: (e = t.palette.backgroundPaperElevation) == null ? void 0 : e[7]
+    },
+    variants: [
+      {
+        props: ({ selected: n }) => !n,
+        style: {
+          background: (o = t.palette.backgroundPaperElevation) == null ? void 0 : o[0],
+          color: t.palette.action.disabled,
+          "> img": {
+            opacity: 0.4
+          }
+        }
+      },
+      {
+        props: ({ selected: n }) => n,
+        style: {
+          background: (r = t.palette.backgroundPaperElevation) == null ? void 0 : r[11],
+          border: `1px solid ${t.palette.divider}`,
+          color: t.palette.primary.contrastText
+        }
+      }
+    ]
+  };
+}), zt = (t) => {
+  const { ref: e, ...o } = t;
+  return /* @__PURE__ */ a.jsx(
+    ht,
+    {
+      ref: e,
+      selected: t.selected,
+      ...o,
+      color: "secondary",
+      variant: "circular"
+    }
+  );
+};
+function bt(t) {
+  const { children: e, value: o, index: r, ...n } = t;
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: o !== r,
+      id: `tabpanel-${r}`,
+      "aria-labelledby": `tab-${r}`,
+      ...n,
+      children: o === r && /* @__PURE__ */ a.jsx(m, { children: e })
+    }
+  );
+}
+function mt({ children: t, ...e }) {
+  const {
+    fullWidth: o,
+    indicator: r,
+    onChange: n,
+    orientation: i,
+    scrollButtons: s,
+    selectionFollowsFocus: d,
+    textColor: g,
+    value: b,
+    variant: h,
+    ...p
+  } = e;
+  return /* @__PURE__ */ a.jsx(m, { ...p, children: t });
+}
+const Vt = A(
+  v((t) => {
+    const {
+      items: e,
+      activeTab: o,
+      defaultActiveTab: r = 0,
+      onTabChange: n,
+      sx: i,
+      ref: s
+    } = t, d = o !== void 0, [g, b] = I(r), h = d ? o : g;
+    W(() => {
+      d || e.length !== 0 && (g < 0 || g > e.length - 1) && b(0);
+    }, [e.length, d, g]);
+    const p = (l, c) => {
+      d || b(c), n == null || n(c);
+    };
+    return /* @__PURE__ */ a.jsxs(
+      m,
+      {
+        ref: s,
+        sx: { height: "100%", display: "flex", flexDirection: "column", ...i },
+        children: [
+          /* @__PURE__ */ a.jsx(
+            m,
+            {
+              sx: {
+                px: 0,
+                py: 0,
+                overflow: "visible",
+                position: "relative",
+                // Extra padding to prevent badge clipping
+                // Top: accommodates badge positioned at top: -6px with 20px height
+                // Right: accommodates badge positioned at right: -8px with 20px width
+                paddingTop: (l) => l.spacing(2),
+                // 16px
+                paddingRight: (l) => l.spacing(2.5)
+                // 20px
+              },
+              children: /* @__PURE__ */ a.jsx(
+                be,
+                {
+                  value: h,
+                  onChange: p,
+                  sx: {
+                    minHeight: "32px",
+                    backgroundColor: "transparent",
+                    overflow: "visible",
+                    "& .MuiTabs-indicator": {
+                      display: "none"
+                      // Hide the default indicator
+                    },
+                    "& .MuiTabs-flexContainer": {
+                      gap: 2,
+                      overflow: "visible",
+                      paddingTop: 0,
+                      paddingBottom: 0
+                    },
+                    "& .MuiTabs-scroller": {
+                      overflow: "visible !important"
+                    },
+                    "& .MuiTab-root": {
+                      overflow: "visible"
+                    }
+                  },
+                  children: e.map((l, c) => {
+                    var O, P, H;
+                    const M = () => {
+                      if (!l.badge) return;
+                      const C = l.badge.content, f = l.badge.max;
+                      return typeof C == "number" && f && C > f ? `${f}+` : C;
+                    }, S = () => {
+                      if (!l.badge) return !1;
+                      const C = l.badge.content, f = l.badge.showZero;
+                      return !(C === 0 && !f);
+                    }, k = M(), _ = S(), R = () => {
+                      d || b(c), n == null || n(c);
+                    }, j = /* @__PURE__ */ a.jsx(
+                      me,
+                      {
+                        label: l.label,
+                        icon: l.icon,
+                        iconPosition: "start",
+                        disableRipple: !0,
+                        onClick: R,
+                        sx: {
+                          minHeight: "32px",
+                          height: "32px",
+                          padding: "0px 10px",
+                          borderRadius: "12px",
+                          backgroundColor: (C) => {
+                            var f;
+                            return ((f = C.palette.backgroundPaperElevation) == null ? void 0 : f[11]) || "#32344B";
+                          },
+                          color: "text.primary",
+                          opacity: h === c ? 1 : 0.38,
+                          fontSize: "13px",
+                          transition: "all 0.2s ease-in-out",
+                          position: "relative",
+                          overflow: "visible",
+                          "&:hover": {
+                            opacity: h === c ? 1 : 0.6
+                          },
+                          "&.Mui-selected": {
+                            opacity: 1,
+                            backgroundColor: (C) => {
+                              var f;
+                              return ((f = C.palette.backgroundPaperElevation) == null ? void 0 : f[11]) || "#32344B";
+                            },
+                            color: "text.primary"
+                          },
+                          "&:focus": {
+                            outline: "none"
+                          },
+                          "&:active": {
+                            transform: "none"
+                          }
+                        }
+                      },
+                      l.id
+                    );
+                    return _ ? /* @__PURE__ */ a.jsx(
+                      mt,
+                      {
+                        component: "span",
+                        sx: { display: "inline-flex" },
+                        children: /* @__PURE__ */ a.jsx(
+                          xe,
+                          {
+                            badgeContent: k,
+                            color: ((O = l.badge) == null ? void 0 : O.color) || "error",
+                            max: (P = l.badge) == null ? void 0 : P.max,
+                            showZero: (H = l.badge) == null ? void 0 : H.showZero,
+                            anchorOrigin: {
+                              vertical: "top",
+                              horizontal: "right"
+                            },
+                            overlap: "rectangular",
+                            sx: {
+                              "& .MuiBadge-badge": {
+                                // Ensure badge doesn't inherit tab opacity
+                                opacity: "1 !important"
+                              }
+                            },
+                            children: j
+                          }
+                        )
+                      },
+                      l.id
+                    ) : j;
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ a.jsx(
+            m,
+            {
+              sx: {
+                mt: (l) => l.spacing(2),
+                borderBottom: 1,
+                borderColor: "divider"
+              }
+            }
+          ),
+          /* @__PURE__ */ a.jsx(m, { sx: { flex: 1, overflow: "auto" }, children: e.map((l, c) => /* @__PURE__ */ a.jsx(bt, { value: h, index: c, children: l.content }, l.id)) })
+        ]
+      }
+    );
+  })
+), xt = {
+  $schema: "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  name: "wandelscript",
+  patterns: [
+    {
+      include: "#keywords"
+    },
+    {
+      include: "#strings"
+    },
+    {
+      include: "#comments"
+    },
+    {
+      include: "#functions"
+    }
+  ],
+  repository: {
+    keywords: {
+      patterns: [
+        {
+          name: "keyword.control.flow.wandelscript",
+          match: "\\b(move|via|to|interrupt|def|False|True|for|if|else|elif|while|return|switch|activate|deactivate|print|and|or|not)\\b"
+        }
+      ]
+    },
+    strings: {
+      name: "string.quoted.double.wandelscript",
+      begin: '"',
+      end: '"',
+      patterns: [
+        {
+          name: "constant.character.escape.wandelscript",
+          match: "\\\\."
+        }
+      ]
+    },
+    comments: {
+      patterns: [
+        {
+          begin: "#",
+          beginCaptures: {
+            0: { name: "punctuation.definition.comment.wandelscript" }
+          },
+          end: "$",
+          name: "comment.line.number-sign.wandelscript"
+        }
+      ]
+    },
+    functions: {
+      patterns: [
+        {
+          match: "[a-zA-Z_-]+\\(",
+          name: "entity.name.function.wandelscript"
+        }
+      ]
+    }
+  },
+  scopeName: "source.wandelscript"
+}, ft = Ee(() => import("@monaco-editor/react"));
+let $ = null;
+async function vt() {
+  if (!$) {
+    const [{ createHighlighter: t }, { shikiToMonaco: e }] = await Promise.all([
+      import("shiki"),
+      import("@shikijs/monaco")
+    ]);
+    $ = {
+      shiki: await t({
+        // Our textmate grammar doesn't quite conform to the expected type
+        // here; I'm not sure what the missing properties mean exactly
+        langs: [xt],
+        themes: ["dark-plus", "light-plus"]
+      }),
+      shikiToMonaco: e
+    };
+  }
+  return $;
+}
+const Zt = A(
+  (t) => {
+    const e = B(), [o, r] = I("dark-plus"), n = e.palette.mode === "dark" ? "dark-plus" : "light-plus";
+    async function i(s) {
+      var b, h;
+      s.languages.register({ id: "wandelscript" }), s.languages.setLanguageConfiguration("wandelscript", {
+        comments: {
+          lineComment: "#"
+        },
+        brackets: [
+          ["(", ")"],
+          ["[", "]"]
+        ],
+        autoClosingPairs: [
+          { open: "[", close: "]" },
+          { open: "(", close: ")" }
+        ],
+        surroundingPairs: [
+          { open: "[", close: "]" },
+          { open: "(", close: ")" }
+        ]
+      });
+      const { shiki: d, shikiToMonaco: g } = await vt();
+      g(d, s), s.editor.defineTheme(
+        n,
+        ((h = (b = e.componentsExt) == null ? void 0 : b.WandelscriptEditor) == null ? void 0 : h.monacoTheme) ?? {
+          base: e.palette.mode === "dark" ? "vs-dark" : "vs",
+          inherit: !0,
+          rules: [],
+          colors: {}
+        }
+      ), t.monacoSetup && t.monacoSetup(s), r(n);
+    }
+    return /* @__PURE__ */ a.jsx(Te, { fallback: /* @__PURE__ */ a.jsx(Ie, {}), children: /* @__PURE__ */ a.jsx(
+      ft,
+      {
+        value: t.code,
+        onMount: (s, d) => {
+          i(d);
+        },
+        onChange: t.onChange,
+        defaultLanguage: "wandelscript",
+        theme: o,
+        options: {
+          minimap: { enabled: !1 },
+          wordWrap: "on",
+          automaticLayout: !0,
+          ...t.monacoOptions
+        }
+      }
+    ) });
+  }
+), J = 1e-4, yt = {
+  a: 0,
+  d: 0,
+  alpha: 0,
+  theta: 0,
+  reverse_rotation_direction: !1
+};
+class Y {
+  constructor(e, o, r, n, i, s, d, g, b, h) {
+    this.nova = e, this.controller = o, this.motionGroup = r, this.initialMotionState = n, this.motionStateSocket = i, this.isVirtual = s, this.tcps = d, this.description = g, this.initialControllerState = b, this.controllerStateSocket = h, this.connectedJoggingSocket = null, this.joggingVelocity = 10, this.activationState = "inactive", this.rapidlyChangingMotionState = n, this.controllerState = b, h.addEventListener("message", (p) => {
+      var c;
+      const l = (c = L(p.data)) == null ? void 0 : c.result;
+      l && E(() => {
+        this.controllerState = l;
+      });
+    }), i.addEventListener("message", (p) => {
+      var c;
+      const l = (c = L(p.data)) == null ? void 0 : c.result;
+      if (!l)
+        throw new Error(
+          `Failed to get motion state for ${this.motionGroupId}: ${p.data}`
+        );
+      Pe(
+        this.rapidlyChangingMotionState.joint_position,
+        l.joint_position,
+        J
+      ) || E(() => {
+        this.rapidlyChangingMotionState.joint_position = l.joint_position;
+      }), Le(
+        this.rapidlyChangingMotionState,
+        l,
+        J
+      ) || E(() => {
+        this.rapidlyChangingMotionState.tcp_pose = l.tcp_pose;
+      }), this.rapidlyChangingMotionState.standstill !== l.standstill && E(() => {
+        this.rapidlyChangingMotionState.standstill = l.standstill;
+      });
+    }), Ce(this);
+  }
+  static async connectMultiple(e, o) {
+    return Promise.all(
+      o.map(
+        (r) => Y.connect(e, r)
+      )
+    );
+  }
+  static async connect(e, o) {
+    var _, R;
+    const [r, n] = o.split("@"), i = await e.api.controller.getCurrentRobotControllerState(n), s = i == null ? void 0 : i.motion_groups.find(
+      (j) => j.motion_group === o
+    );
+    if (!i || !s)
+      throw new Error(
+        `Controller ${n} or motion group ${o} not found`
+      );
+    const d = e.openReconnectingWebsocket(
+      `/controllers/${n}/motion-groups/${o}/state-stream`
+    ), g = await d.firstMessage(), b = (_ = L(g.data)) == null ? void 0 : _.result;
+    if (!b)
+      throw new Error(
+        `Unable to parse initial motion state message ${g.data}`
+      );
+    console.log(
+      `Connected motion state websocket to motion group ${s.motion_group}. Initial state:
+  `,
+      b
+    );
+    const p = (await e.api.controller.getRobotController(
+      i.controller
+    )).configuration.kind === "VirtualController", l = await e.api.motionGroup.getMotionGroupDescription(
+      n,
+      s.motion_group
+    ), c = Object.entries(l.tcps || {}).map(
+      ([j, O]) => ({
+        id: j,
+        readable_name: O.name,
+        position: O.pose.position,
+        orientation: O.pose.orientation
+      })
+    ), M = e.openReconnectingWebsocket(
+      `/controllers/${i.controller}/state-stream?response_rate=1000`
+    ), S = await M.firstMessage(), k = (R = L(S.data)) == null ? void 0 : R.result;
+    if (!k)
+      throw new Error(
+        `Unable to parse initial controller state message ${S.data}`
+      );
+    return console.log(
+      `Connected controller state websocket to controller ${i.controller}. Initial state:
+  `,
+      k
+    ), new Y(
+      e,
+      i,
+      s,
+      b,
+      d,
+      p,
+      c,
+      l,
+      k,
+      M
+    );
+  }
+  get motionGroupId() {
+    return this.motionGroup.motion_group;
+  }
+  get controllerId() {
+    return this.controller.controller;
+  }
+  get modelFromController() {
+    return this.description.motion_group_model;
+  }
+  get wandelscriptIdentifier() {
+    const e = this.motionGroupId.split("@")[0];
+    return `${this.controllerId.replace(/-/g, "_")}_${e}`;
+  }
+  /** Jogging velocity in radians for rotation and joint movement */
+  get joggingVelocityRads() {
+    return this.joggingVelocity * Math.PI / 180;
+  }
+  get joints() {
+    return this.initialMotionState.joint_position.map((e, o) => ({
+      index: o
+    }));
+  }
+  // Please note that API v2 omits 0 values
+  get dhParameters() {
+    if (this.description.dh_parameters !== void 0)
+      return this.description.dh_parameters.map((e) => ({
+        ...yt,
+        ...e
+      }));
+  }
+  get safetyZones() {
+    return this.description.safety_zones;
+  }
+  /** Gets the robot mounting position offset in 3D viz coordinates */
+  get mountingPosition() {
+    var e, o, r;
+    return this.description.mounting ? [
+      (((e = this.description.mounting.position) == null ? void 0 : e[0]) || 0) / 1e3,
+      (((o = this.description.mounting.position) == null ? void 0 : o[1]) || 0) / 1e3,
+      (((r = this.description.mounting.position) == null ? void 0 : r[2]) || 0) / 1e3
+    ] : [0, 0, 0];
+  }
+  /** Gets the robot mounting position rotation in 3D viz coordinates */
+  get mountingQuaternion() {
+    var n, i, s, d, g, b;
+    const e = new K.Vector3(
+      ((i = (n = this.description.mounting) == null ? void 0 : n.orientation) == null ? void 0 : i[0]) || 0,
+      ((d = (s = this.description.mounting) == null ? void 0 : s.orientation) == null ? void 0 : d[1]) || 0,
+      ((b = (g = this.description.mounting) == null ? void 0 : g.orientation) == null ? void 0 : b[2]) || 0
+    ), o = e.length(), r = e.normalize();
+    return new K.Quaternion().setFromAxisAngle(r, o);
+  }
+  /**
+   * Whether the controller is currently in a safety state
+   * corresponding to an emergency stop
+   */
+  get isEstopActive() {
+    return [
+      "SAFETY_STATE_ROBOT_EMERGENCY_STOP",
+      "SAFETY_STATE_DEVICE_EMERGENCY_STOP"
+    ].includes(this.controllerState.safety_state);
+  }
+  /**
+   * Whether the controller is in a safety state
+   * that may be non-functional for robot pad purposes
+   */
+  get isMoveableSafetyState() {
+    return [
+      "SAFETY_STATE_NORMAL",
+      "SAFETY_STATE_REDUCED"
+    ].includes(this.controllerState.safety_state);
+  }
+  /**
+   * Whether the controller is in an operation mode that allows movement
+   */
+  get isMoveableOperationMode() {
+    return [
+      "OPERATION_MODE_AUTO",
+      "OPERATION_MODE_MANUAL",
+      "OPERATION_MODE_MANUAL_T1",
+      "OPERATION_MODE_MANUAL_T2"
+    ].includes(this.controllerState.operation_mode);
+  }
+  /**
+   * Whether the robot is currently active and can be moved, based on the
+   * safety state, operation mode and servo toggle activation state.
+   */
+  get canBeMoved() {
+    return this.isMoveableSafetyState && this.isMoveableOperationMode && this.activationState === "active";
+  }
+  async deactivate() {
+    if (this.activationState !== "active") {
+      console.error("Tried to deactivate while already deactivating");
+      return;
+    }
+    E(() => {
+      this.activationState = "deactivating";
+    });
+    try {
+      await this.nova.api.controller.setDefaultMode(
+        this.controllerId,
+        "ROBOT_SYSTEM_MODE_MONITOR"
+      ), E(() => {
+        this.activationState = "inactive";
+      });
+    } catch (e) {
+      throw E(() => {
+        this.activationState = "active";
+      }), e;
+    }
+  }
+  async activate() {
+    if (this.activationState !== "inactive") {
+      console.error("Tried to activate while already activating");
+      return;
+    }
+    E(() => {
+      this.activationState = "activating";
+    });
+    try {
+      await this.nova.api.controller.setDefaultMode(
+        this.controllerId,
+        "ROBOT_SYSTEM_MODE_CONTROL"
+      ), E(() => {
+        this.activationState = "active";
+      });
+    } catch (e) {
+      throw E(() => {
+        this.activationState = "inactive";
+      }), e;
+    }
+  }
+  toggleActivation() {
+    this.activationState === "inactive" ? this.activate() : this.activationState === "active" && this.deactivate();
+  }
+  dispose() {
+    this.motionStateSocket.close(), this.connectedJoggingSocket && this.connectedJoggingSocket.close();
+  }
+  setJoggingVelocity(e) {
+    this.joggingVelocity = e;
+  }
+}
+function ee() {
+  var e, o, r, n, i, s, d;
+  const t = fe({
+    palette: {
+      mode: "dark",
+      text: {
+        primary: "rgba(255, 255, 255, 1)",
+        secondary: "rgba(255, 255, 255, 0.7)",
+        disabled: "rgba(255, 255, 255, 0.38)"
+      },
+      primary: {
+        main: "rgba(142, 86, 252, 1)",
+        dark: "rgba(136, 58, 255, 1)",
+        light: "rgba(157, 131, 246, 1)",
+        contrastText: "rgba(255, 255, 255, 0.87)"
+      },
+      secondary: {
+        main: "rgba(255, 255, 255, 1)",
+        dark: "rgba(255, 255, 255, 0.06)",
+        contrastText: "rgba(255, 255, 255, 0.87)"
+      },
+      tertiary: {
+        main: "rgba(100, 255, 218, 1)",
+        dark: "rgba(38, 166, 154, 1)",
+        light: "rgba(167, 255, 235, 1)",
+        contrastText: "rgba(0, 0, 0, 1)"
+      },
+      error: {
+        main: "rgba(239, 83, 80, 1)",
+        dark: "rgba(229, 57, 53, 1)",
+        light: "rgba(239, 154, 154, 1)",
+        contrastText: "rgba(255, 255, 255, 1)"
+      },
+      warning: {
+        main: "rgba(255, 171, 64, 1)",
+        dark: "rgba(255, 145, 0, 1)",
+        light: "rgba(255, 209, 128, 1)",
+        contrastText: "rgba(0, 0, 0, 0.87)"
+      },
+      success: {
+        main: "rgba(38, 166, 154, 1)",
+        dark: "rgba(0, 121, 107, 1)",
+        light: "rgba(128, 203, 196, 1)",
+        contrastText: "rgba(255, 255, 255, 0.87)"
+      },
+      background: {
+        default: "rgba(2, 6, 23, 1)",
+        paper: "rgba(17, 19, 31, 1)"
+      },
+      action: {
+        active: "rgba(255, 255, 255, 0.56)",
+        hover: "rgba(255, 255, 255, 0.08)",
+        selected: "rgba(255, 255, 255, 0.16)",
+        disabledBackground: "rgba(255, 255, 255, 0.12)",
+        focus: "rgba(255, 255, 255, 0.12)",
+        disabled: "rgba(255, 255, 255, 0.38)"
+      },
+      common: {
+        white: "rgba(255, 255, 255, 1)",
+        black: "rgba(0, 0, 0, 1)"
+      },
+      divider: "rgba(255, 255, 255, 0.12)",
+      backgroundPaperElevation: {
+        0: "rgba(17,19,31,1.0)",
+        1: "rgba(20,22,35,1.0)",
+        2: "rgba(23,25,39,1.0)",
+        3: "rgba(26,28,43,1.0)",
+        4: "rgba(29,31,47,1.0)",
+        5: "rgba(32,34,51,1.0)",
+        6: "rgba(35,37,55,1.0)",
+        7: "rgba(38,40,59,1.0)",
+        8: "rgba(41,43,63,1.0)",
+        9: "rgba(44,46,67,1.0)",
+        10: "rgba(47,49,71,1.0)",
+        11: "rgba(50,52,75,1.0)",
+        12: "rgba(53,55,79,1.0)",
+        13: "rgba(56,58,83,1.0)",
+        14: "rgba(59,61,87,1.0)",
+        15: "rgba(62,64,91,1.0)",
+        16: "rgba(57,63,87,1.0)"
+      }
+    },
+    paletteExt: {
+      primary: {
+        hover: "rgba(142, 86, 252, 0.08)",
+        selected: "rgba(142, 86, 252, 0.16)",
+        focus: "rgba(142, 86, 252, 0.12)",
+        focusVisible: "rgba(142, 86, 252, 0.3)",
+        outlineBorder: "rgba(142, 86, 252, 0.5)"
+      },
+      secondary: {
+        tonal: "rgba(255,255,255,0.1)"
+      }
+    }
+  });
+  return {
+    ...t,
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          "html, body, *": {
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          },
+          "html:hover, body:hover, *:hover": {
+            scrollbarWidth: "thin",
+            scrollbarColor: `${t.palette.divider} transparent`
+          },
+          // Global styles for DataGrid filter popup
+          ".MuiDataGrid-panelContent": {
+            borderRadius: "16px !important",
+            "& .MuiPaper-root": {
+              borderRadius: "16px !important"
+            }
+          },
+          ".MuiDataGrid-filterForm": {
+            borderRadius: "16px !important",
+            "& .MuiInputBase-root": {
+              borderRadius: "16px !important",
+              "& fieldset": {
+                borderRadius: "16px !important"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "16px !important"
+              }
+            },
+            "& .MuiTextField-root": {
+              "& .MuiInputBase-root": {
+                borderRadius: "16px !important",
+                "& fieldset": {
+                  borderRadius: "16px !important"
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderRadius: "16px !important"
+                }
+              }
+            }
+          },
+          ".MuiDataGrid-filterFormValueInput": {
+            "& .MuiInputBase-root": {
+              borderRadius: "16px !important",
+              "& fieldset": {
+                borderRadius: "16px !important"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "16px !important"
+              }
+            }
+          }
+        }
+      },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            // Main DataGrid styling can go here if needed
+          },
+          panelContent: {
+            borderRadius: "16px !important"
+          },
+          filterForm: {
+            "& .MuiInputBase-root": {
+              borderRadius: "10px !important",
+              "& fieldset": {
+                borderRadius: "10px !important"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "10px !important"
+              }
+            }
+          },
+          filterFormValueInput: {
+            "& .MuiInputBase-root": {
+              borderRadius: "10px !important",
+              "& fieldset": {
+                borderRadius: "10px !important"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "10px !important"
+              }
+            }
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            borderRadius: "10px"
+          }
+        },
+        variants: [
+          {
+            props: { color: "secondary", variant: "contained" },
+            style: {
+              border: `1px solid ${t.palette.divider}`,
+              background: (r = (o = (e = t.paletteExt) == null ? void 0 : e.secondary) == null ? void 0 : o.tonal) == null ? void 0 : r.toString()
+            }
+          },
+          {
+            props: { color: "secondary", variant: "outlined" },
+            style: {
+              border: `1px solid ${t.palette.divider}`
+            }
+          }
+        ]
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            color: t.palette.text.secondary,
+            "&.Mui-selected": {
+              color: t.palette.text.primary
+            }
+          }
+        }
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            background: (n = t.palette.backgroundPaperElevation) == null ? void 0 : n[1]
+          }
+        }
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: {
+            ".MuiToggleButtonGroup-firstButton": {
+              borderRadius: "10px 0 0 10px"
+            },
+            ".MuiToggleButtonGroup-lastButton": {
+              borderRadius: "0 10px 10px 0"
+            }
+          }
+        }
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            padding: "6px 16px"
+          }
+        }
+      },
+      MuiSelect: {
+        variants: [
+          {
+            props: { variant: "filled" },
+            style: {
+              borderRadius: "10px",
+              "::before, ::after": {
+                visibility: "collapse"
+              },
+              ".MuiInputBase-input": {
+                padding: "6px 16px",
+                borderRadius: "10px"
+              }
+            }
+          }
+        ]
+      },
+      MuiDrawer: {
+        styleOverrides: {
+          paper: {
+            border: "none",
+            boxShadow: "4px 0 8px -4px rgba(0, 0, 0, 0.3)"
+          }
+        }
+      },
+      MuiFab: {
+        styleOverrides: {
+          root: {
+            background: (s = (i = t.paletteExt) == null ? void 0 : i.secondary) == null ? void 0 : s.tonal
+          }
+        },
+        variants: [
+          {
+            props: { color: "primary" },
+            style: {
+              background: t.palette.primary.main
+            }
+          }
+        ]
+      }
+    },
+    componentsExt: {
+      JoggingPanel: {
+        JoggingCartesian: {
+          Axis: {
+            X: {
+              backgroundColor: "rgba(215, 66, 56, 1)",
+              borderColor: "rgba(215, 66, 56, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(241, 77, 66, 1)",
+                pressed: "rgba(138, 41, 35, 1)",
+                hovered: "rgba(241, 77, 66, 1)",
+                disabled: "rgba(241, 77, 66, 1)"
+              },
+              color: "rgba(255, 198, 198, 1)",
+              labelColor: t.palette.text.primary
+            },
+            Y: {
+              backgroundColor: "rgba(20, 151, 108, 1)",
+              borderColor: "rgba(20, 151, 108, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(28, 188, 135, 1)",
+                pressed: "rgba(11, 89, 63, 1)",
+                disabled: "rgba(28, 188, 135, 1)",
+                hovered: "rgba(28, 188, 135, 1)"
+              },
+              color: "rgba(215, 255, 242, 1)",
+              labelColor: t.palette.text.primary
+            },
+            Z: {
+              backgroundColor: "rgba(1, 87, 155, 1)",
+              borderColor: "rgba(1, 87, 155, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(2, 136, 209, 1)",
+                pressed: "rgba(2, 64, 114, 1)",
+                disabled: "rgba(2, 136, 209, 1)",
+                hovered: "rgba(2, 136, 209, 1)"
+              },
+              color: "rgba(210, 239, 255, 1)",
+              labelColor: t.palette.text.primary
+            }
+          }
+        },
+        JoggingJoint: {
+          Joint: {
+            arrowColor: t.palette.text.primary
+          }
+        },
+        VelocitySlider: {
+          sliderLegendColor: t.palette.text.primary
+        }
+      },
+      WandelscriptEditor: {
+        monacoTheme: {
+          base: "vs-dark",
+          inherit: !0,
+          rules: [
+            {
+              token: "keyword",
+              foreground: "#b349a9ff"
+            }
+          ],
+          colors: {
+            "editor.background": ve(
+              ((d = t.palette.backgroundPaperElevation) == null ? void 0 : d[5]) ?? ""
+            ),
+            "editor.foreground": "#d4d4d4",
+            "editorLineNumber.foreground": "#797979",
+            "editorLineNumber.activeForeground": "#e9e9e9",
+            "editor.lineHighlightBorder": "#e9e9e911"
+          }
+        }
+      }
+    }
+  };
+}
+function St() {
+  const t = ee();
+  return t.palette.mode = "light", t;
+}
+function Yt(t) {
+  var r, n, i, s;
+  let e = !0;
+  ((r = t.palette) == null ? void 0 : r.mode) === "light" ? e = !1 : ((n = t.palette) == null ? void 0 : n.mode) !== "dark" && (e = !(typeof window < "u" && ((s = (i = window.matchMedia) == null ? void 0 : i.call(window, "(prefers-color-scheme: light)")) == null ? void 0 : s.matches)));
+  const o = e ? ee() : St();
+  return Re(o, t);
+}
+export {
+  Rt as A,
+  Y as C,
+  De as L,
+  Dt as N,
+  Nt as R,
+  $t as S,
+  Vt as T,
+  Zt as W,
+  Ft as a,
+  N as b,
+  Yt as c,
+  Bt as d,
+  It as e,
+  Pt as f,
+  Lt as g,
+  Ne as h,
+  X as i,
+  Ye as j,
+  zt as k
+};
+//# sourceMappingURL=theming-BO8z_Hpa.js.map