@wandelbots/wandelbots-js-react-components 2.10.3 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.10.3",
+  "version": "2.11.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -55,16 +55,16 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^8.5.8",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/csf-tools": "^8.5.8",
-    "@storybook/react-vite": "^8.5.8",
-    "@storybook/test": "^8.5.8",
+    "@storybook/addon-docs": "^8.6.2",
+    "@storybook/addon-essentials": "^8.6.2",
+    "@storybook/addon-interactions": "^8.6.2",
+    "@storybook/blocks": "^8.6.2",
+    "@storybook/react": "^8.6.2",
+    "@storybook/csf-tools": "^8.6.2",
+    "@storybook/react-vite": "^8.6.2",
+    "@storybook/test": "^8.6.2",
     "@storybook/test-runner": "^0.21.3",
-    "@storybook/types": "^8.5.8",
+    "@storybook/types": "^8.6.2",
     "@svgr/rollup": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.12",
@@ -90,7 +90,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.2",
     "storybook-dark-mode": "^4.0.2",
     "storybook-preset-inline-svg": "^1.0.1",
     "ts-dedent": "^2.2.0",
@@ -100,10 +100,9 @@
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.7",
     "wait-on": "^8.0.2",
-    "@wandelbots/wandelbots-js": "^1.16.0"
+    "@wandelbots/wandelbots-js": "^1.17.1"
   },
   "peerDependencies": {
-    "@wandelbots/wandelbots-js": "^1.12.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^6",
@@ -113,7 +112,7 @@
     "@react-three/fiber": "~8.18.0",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
-    "three": ">=0.173",
+    "three": ">=0.174",
     "three-stdlib": ">=2"
   },
   "peerDependenciesMeta": {
@@ -123,13 +122,13 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@shikijs/monaco": "^3.0.0",
+    "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",
     "react-error-boundary": "^5.0.0",
     "react-i18next": "^15.4.1",
-    "shiki": "^3.0.0"
+    "shiki": "^3.1.0"
   }
 }

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -0,0 +1,59 @@
+import { useTheme } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { Trans, useTranslation } from "react-i18next"
+import ControllerTypePhysicalIcon from "./icons/controller-type-physical.svg"
+import ControllerTypeVirtualIcon from "./icons/controller-type-virtual.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface ControllerTypeIndicatorProps {
+  isVirtual: boolean
+  motionGroupId: string
+}
+
+export const ControllerTypeIndicator = observer(
+  ({ isVirtual, motionGroupId }: ControllerTypeIndicatorProps) => {
+    const theme = useTheme()
+    const { t } = useTranslation()
+
+    if (isVirtual) {
+      return (
+        <IndicatorWithExplanation
+          id="motion-group-virtual"
+          icon={ControllerTypeVirtualIcon}
+          color={theme.palette.tertiary.main}
+          name={t("SafetyBar.ControllerType.Virtual.lb")}
+          explanation={
+            <Trans
+              i18nKey="SafetyBar.MotionGroup.Virtual.Explanation.lb"
+              values={{
+                motionGroupId,
+              }}
+            >
+              Motion group <code>{motionGroupId}</code> refers to a virtual
+              robot with no physical counterpart. It can be freely manipulated
+              without special safety precautions.
+            </Trans>
+          }
+        />
+      )
+    }
+
+    return (
+      <IndicatorWithExplanation
+        id="motion-group-physical"
+        icon={ControllerTypePhysicalIcon}
+        color={theme.palette.primary.main}
+        name={t("SafetyBar.ControllerType.Physical.lb")}
+        explanation={
+          <Trans
+            i18nKey="SafetyBar.MotionGroup.Physical.Explanation.lb"
+            values={{
+              motionGroupId,
+            }}
+            components={{ code: <code />, strong: <strong /> }}
+          />
+        }
+      />
+    )
+  },
+)

package/src/components/safetyBar/IndicatorWithExplanation.tsx

@@ -0,0 +1,117 @@
+import {
+  Popover,
+  Stack,
+  SvgIcon,
+  Typography,
+  type TypographyProps,
+} from "@mui/material"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import type { ElementType, ReactNode } from "react"
+
+export type IndicatorWithExplanationProps = {
+  id: string
+  icon: ElementType
+  color: TypographyProps["color"]
+  title?: ReactNode
+  name: ReactNode
+  explanation: ReactNode
+  literalValue?: string
+}
+
+export const IndicatorWithExplanation = observer(
+  ({
+    id,
+    icon,
+    color,
+    title,
+    name,
+    explanation,
+    literalValue,
+  }: IndicatorWithExplanationProps) => {
+    const state = useLocalObservable(() => ({
+      anchorEl: null as HTMLElement | null,
+
+      get isPopoverOpen() {
+        return !!state.anchorEl
+      },
+
+      openPopover(event: React.MouseEvent<HTMLElement>) {
+        state.anchorEl = event.currentTarget
+      },
+
+      closePopover() {
+        state.anchorEl = null
+      },
+    }))
+
+    return (
+      <>
+        <Stack
+          aria-owns={state.isPopoverOpen ? id : undefined}
+          aria-haspopup="true"
+          onMouseEnter={state.openPopover}
+          onMouseLeave={state.closePopover}
+          sx={{
+            cursor: "pointer",
+          }}
+        >
+          <SvgIcon
+            component={icon}
+            sx={{
+              color,
+            }}
+          />
+        </Stack>
+        <Popover
+          id={id}
+          sx={{
+            pointerEvents: "none",
+          }}
+          open={state.isPopoverOpen}
+          anchorEl={state.anchorEl}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+          onClose={state.closePopover}
+          disableRestoreFocus
+        >
+          <Stack
+            gap="1rem"
+            padding={2}
+            maxWidth="450px"
+            sx={{
+              wordWrap: "break-word",
+            }}
+          >
+            <div>
+              {title && (
+                <Typography component="span" fontSize="14px">
+                  {`${title}: `}
+                </Typography>
+              )}
+              <Typography
+                component="span"
+                color={color}
+                fontWeight="bold"
+                fontSize="14px"
+              >
+                {name}
+              </Typography>
+            </div>
+
+            <Typography fontSize="14px">{explanation}</Typography>
+
+            {literalValue && (
+              <Typography fontSize="12px">{literalValue}</Typography>
+            )}
+          </Stack>
+        </Popover>
+      </>
+    )
+  },
+)

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -0,0 +1,76 @@
+import { useTheme } from "@mui/material"
+import type { RobotControllerStateOperationModeEnum } from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
+import { Trans, useTranslation } from "react-i18next"
+import OperationModeAutomaticIcon from "./icons/operation-mode-automatic.svg"
+import OperationModeErrorIcon from "./icons/operation-mode-error.svg"
+import OperationModeManualIcon from "./icons/operation-mode-manual.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface OperationModeIndicatorProps {
+  operationMode: RobotControllerStateOperationModeEnum
+}
+
+export const OperationModeIndicator = observer(
+  ({ operationMode }: OperationModeIndicatorProps) => {
+    const { t } = useTranslation()
+    const theme = useTheme()
+
+    switch (operationMode) {
+      case "OPERATION_MODE_AUTO":
+        return (
+          <IndicatorWithExplanation
+            id="operation-mode-auto"
+            icon={OperationModeAutomaticIcon}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Automatic.ti")}
+            color={"rgba(255, 255, 255, 0.57)"}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Auto.Explanation.lb">
+                The robot controller is in automatic operation mode. Automated
+                movement without manual confirmation is possible in this mode.
+              </Trans>
+            }
+          />
+        )
+      case "OPERATION_MODE_MANUAL":
+      case "OPERATION_MODE_MANUAL_T1":
+      case "OPERATION_MODE_MANUAL_T2": {
+        return (
+          <IndicatorWithExplanation
+            id="operation-mode-manual"
+            icon={OperationModeManualIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Manual.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Manual.Explanation.lb">
+                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.
+              </Trans>
+            }
+            literalValue={operationMode}
+          />
+        )
+      }
+      default:
+        return (
+          <IndicatorWithExplanation
+            id="operation-mode-error"
+            icon={OperationModeErrorIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Error.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Error.Explanation.lb">
+                The robot controller has entered an unexpected operation mode.
+                Motion group movement may not be possible.
+              </Trans>
+            }
+            literalValue={operationMode}
+          />
+        )
+    }
+  },
+)

package/src/components/safetyBar/SafetyBar.tsx

@@ -0,0 +1,43 @@
+import { Divider, Stack } from "@mui/material"
+import type {
+  RobotControllerStateOperationModeEnum,
+  RobotControllerStateSafetyStateEnum,
+} from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
+import { externalizeComponent } from "../../externalizeComponent"
+import { ControllerTypeIndicator } from "./ControllerTypeIndicator"
+import { OperationModeIndicator } from "./OperationModeIndicator"
+import { SafetyStateIndicator } from "./SafetyStateIndicator"
+
+export interface SafetyBarProps {
+  isVirtual: boolean
+  motionGroupId: string
+  operationMode: RobotControllerStateOperationModeEnum
+  safetyState: RobotControllerStateSafetyStateEnum
+}
+
+export const SafetyBar = externalizeComponent(
+  observer((props: SafetyBarProps) => {
+    return (
+      <Stack
+        direction="row"
+        gap="8px"
+        alignItems="center"
+        sx={{ height: "24px" }}
+      >
+        <SafetyStateIndicator safetyState={props.safetyState} />
+
+        <Divider orientation="vertical" flexItem />
+
+        <OperationModeIndicator operationMode={props.operationMode} />
+
+        <Divider orientation="vertical" flexItem />
+
+        <ControllerTypeIndicator
+          isVirtual={props.isVirtual}
+          motionGroupId={props.motionGroupId}
+        />
+      </Stack>
+    )
+  }),
+)

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -0,0 +1,131 @@
+import { useTheme } from "@mui/material"
+import type { RobotControllerStateSafetyStateEnum } from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
+import { Trans, useTranslation } from "react-i18next"
+import { assertUnreachable } from "../utils/errorHandling"
+import SafetyStateErrorIcon from "./icons/safety-state-error.svg"
+import SafetyStateEstopIcon from "./icons/safety-state-estop.svg"
+import SafetyStateManualActionRequiredIcon from "./icons/safety-state-manual-action-required.svg"
+import SafetyStateNormalIcon from "./icons/safety-state-normal.svg"
+import SafetyStateStopIcon from "./icons/safety-state-stop.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface SafetyStateIndicatorProps {
+  safetyState: RobotControllerStateSafetyStateEnum
+}
+
+export const SafetyStateIndicator = observer(
+  ({ safetyState }: SafetyStateIndicatorProps) => {
+    const { t } = useTranslation()
+    const theme = useTheme()
+
+    switch (safetyState) {
+      // Normal state, robot can move
+      case "SAFETY_STATE_NORMAL":
+        return (
+          <IndicatorWithExplanation
+            id="safety-state-normal"
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Normal.lb")}
+            icon={SafetyStateNormalIcon}
+            color={"rgba(255, 255, 255, 0.57)"}
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.Normal.Explanation.lb">
+                The robot controller is in a normal safety state. Movement is
+                not prevented by this state.
+              </Trans>
+            }
+          />
+        )
+
+      // Estop
+      case "SAFETY_STATE_DEVICE_EMERGENCY_STOP":
+      case "SAFETY_STATE_ROBOT_EMERGENCY_STOP":
+        return (
+          <IndicatorWithExplanation
+            id="safety-state-estop"
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Estop.lb")}
+            icon={SafetyStateEstopIcon}
+            color={theme.palette.error.main}
+            explanation={
+              <Trans i18nKey="SafetyBar.StopState.Estop.Explanation.lb">
+                An emergency stop of the robot controller has been triggered.
+                Movement of the robot is no longer possible until the estop is
+                released.
+              </Trans>
+            }
+            literalValue={safetyState}
+          />
+        )
+
+      // 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 (
+          <IndicatorWithExplanation
+            id="safety-state-stop"
+            icon={SafetyStateStopIcon}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Stop.lb")}
+            color={theme.palette.warning.main}
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.Stop.Explanation.lb">
+                The robot controller has entered a stop state. Movement is no
+                longer possible until the stop state is resolved.
+              </Trans>
+            }
+            literalValue={safetyState}
+          />
+        )
+
+      // 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 (
+          <IndicatorWithExplanation
+            id="safety-state-manual-action-required"
+            icon={SafetyStateManualActionRequiredIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.ManualActionRequired.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.ManualActionRequired.Explanation.lb">
+                The robot controller has entered a safety state requiring manual
+                action to resolve.
+              </Trans>
+            }
+            literalValue={safetyState}
+          />
+        )
+
+      // Error
+      case "SAFETY_STATE_UNKNOWN":
+      case "SAFETY_STATE_FAULT":
+        return (
+          <IndicatorWithExplanation
+            id="safety-state-error"
+            icon={SafetyStateErrorIcon}
+            color={theme.palette.error.main}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Error.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.Error.Explanation.lb">
+                The robot controller has entered an unexpected safety state.
+              </Trans>
+            }
+            literalValue={safetyState}
+          />
+        )
+      default:
+        assertUnreachable(safetyState, `Unknown safety state ${safetyState}`)
+    }
+  },
+)

package/src/components/safetyBar/icons/controller-type-physical.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><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"/></svg>

package/src/components/safetyBar/icons/controller-type-virtual.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><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"/></svg>

package/src/components/safetyBar/icons/operation-mode-automatic.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="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" /></svg>

package/src/components/safetyBar/icons/operation-mode-error.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-opacity=".56"/></svg>

package/src/components/safetyBar/icons/operation-mode-manual.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><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"/></svg>

package/src/components/safetyBar/icons/safety-state-error.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><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"/></svg>

package/src/components/safetyBar/icons/safety-state-estop.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.24 10.636 12 13.764l1.76-3.128h-3.52Z"/><path fill-rule="evenodd" clip-rule="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"/><path fill-rule="evenodd" clip-rule="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"/></svg>

package/src/components/safetyBar/icons/safety-state-manual-action-required.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-opacity=".56"/></svg>

package/src/components/safetyBar/icons/safety-state-normal.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><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" /></svg>

package/src/components/safetyBar/icons/safety-state-stop.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><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"/></svg>

package/src/components/utils/errorHandling.ts

@@ -17,6 +17,10 @@ export function makeShortErrorMessage(err: unknown) {
   }
 }
 
+export function assertUnreachable(x: never, msg: string): never {
+  throw new Error(msg + ` ${JSON.stringify(x)}`)
+}
+
 export function makeErrorMessage(err: unknown) {
   if (err instanceof AxiosError && err.code === "ERR_NETWORK") {
     return "Failed to connect to the server. Please check your internet connection."

package/src/i18n/locales/de/translations.json

@@ -12,5 +12,31 @@
   "Jogging.Cartesian.Orientation.lb": "Orientierung",
   "Jogging.JointLimitsReached.lb": "Gelenkgrenzen für Gelenk {{jointNumbers}} erreicht",
   "Jogging.Orientation.coordsys": "Base (Roboter)",
-  "Jogging.Orientation.tool": "Tool"
+  "Jogging.Orientation.tool": "Tool",
+  "SafetyBar.ActivationToggle.Activate.bt": "Aktivieren",
+  "SafetyBar.ActivationToggle.Activated.bt": "Aktiviert",
+  "SafetyBar.ActivationToggle.Activating.bt": "Wird aktiviert…",
+  "SafetyBar.ActivationToggle.Deactivating.bt": "Wird deaktiviert…",
+  "SafetyBar.ControllerType.Physical.lb": "Physische Robotersteuerung",
+  "SafetyBar.ControllerType.Virtual.lb": "Virtuelle Robotersteuerung",
+  "SafetyBar.MotionGroup.Physical.Explanation.lb": "<code>{{motionGroupId}}</code> ist ein physische Robotersteuerung. Für die Bewegung dieses Roboters sind <strong>Sicherheitsmaßnahmen</strong> aktiv.",
+  "SafetyBar.MotionGroup.Virtual.Explanation.lb": "<1>{{motionGroupId}}</1> ist eine virtuelle Robotersteuerung ohne physisches Gegenstück. Der Roboter kann ohne Sicherheitsmaßnahmen bewegt werden.",
+  "SafetyBar.OperationMode.Auto.Explanation.lb": "Automatischer Betriebsmodus der Robotersteuerung aktiv. Automatisierte Bewegung ohne manuelle Bestätigung freigegeben.",
+  "SafetyBar.OperationMode.Automatic.ti": "Automatisch",
+  "SafetyBar.OperationMode.Error.Explanation.lb": "Fehler beim Abrufen des Betriebsmodus. Originalhandbediengerät des Roboters verwenden, um Fehler zu lösen.",
+  "SafetyBar.OperationMode.Error.lb": "Fehler",
+  "SafetyBar.OperationMode.Manual.Explanation.lb": "Die Robotersteuerung befindet sich im manuellen Betriebsmodus. \nBei einem physischen Roboter bedeutet dies im Allgemeinen, dass ein Freigabeschalter gedrückt werden muss, damit sich der Roboter erfolgreich bewegen kann.",
+  "SafetyBar.OperationMode.Manual.lb": "Manuell",
+  "SafetyBar.OperationMode.ti": "Betriebsmodus",
+  "SafetyBar.SafetyState.Error.Explanation.lb": "Die Robotersteuerung ist in einen unerwarteten Sicherheitszustand eingetreten.",
+  "SafetyBar.SafetyState.Error.lb": "Fehler",
+  "SafetyBar.SafetyState.Estop.lb": "NOT-AUS",
+  "SafetyBar.SafetyState.ManualActionRequired.Explanation.lb": "Die Robotersteuerung ist in einen Sicherheitszustand eingetreten, der manuelle Maßnahmen zur Behebung erfordert.",
+  "SafetyBar.SafetyState.ManualActionRequired.lb": "Aktion erforderlich",
+  "SafetyBar.SafetyState.Normal.Explanation.lb": "Die Robotersteuerung befindet sich in einem sicheren Zustand. Roboterbewegungen sind möglich.",
+  "SafetyBar.SafetyState.Normal.lb": "Sicher",
+  "SafetyBar.SafetyState.Stop.Explanation.lb": "Die Robotersteuerung ist in einen Stoppzustand übergegangen. Bis der Stoppzustand aufgelöst ist, ist keine Bewegung mehr möglich.",
+  "SafetyBar.SafetyState.Stop.lb": "Stopp",
+  "SafetyBar.SafetyState.ti": "Sicherheitszustand",
+  "SafetyBar.StopState.Estop.Explanation.lb": "NOT-AUS aktiviert. NOT-AUS freischalten, um Roboter zu bewegen."
 }

package/src/i18n/locales/en/translations.json

@@ -13,5 +13,31 @@
   "Jogging.Activating.lb": "Activating jogging",
   "Jogging.JointLimitsReached.lb": "Joint limit reached for joint {{jointNumbers}}",
   "Jogging.Orientation.coordsys": "Base",
-  "Jogging.Orientation.tool": "Tool"
+  "Jogging.Orientation.tool": "Tool",
+  "SafetyBar.ActivationToggle.Activate.bt": "Activate",
+  "SafetyBar.ActivationToggle.Activated.bt": "Activated",
+  "SafetyBar.ActivationToggle.Activating.bt": "Activating",
+  "SafetyBar.ActivationToggle.Deactivating.bt": "Deactivating",
+  "SafetyBar.ControllerType.Physical.lb": "Physical controller",
+  "SafetyBar.ControllerType.Virtual.lb": "Virtual controller",
+  "SafetyBar.MotionGroup.Physical.Explanation.lb": "<code>{{motionGroupId}}</code> is a physical robot controller. <strong>Safety precautions</strong> are active for the movement of this robot.",
+  "SafetyBar.MotionGroup.Virtual.Explanation.lb": "<1>{{motionGroupId}}</1> is a virtual robot controller with no physical counterpart. It can be freely manipulated without safety precautions.",
+  "SafetyBar.OperationMode.Auto.Explanation.lb": "Automatic operation mode active. Automated movement without manual confirmation enabled.",
+  "SafetyBar.OperationMode.Automatic.ti": "Automatic",
+  "SafetyBar.OperationMode.Error.Explanation.lb": "Failed to get operation mode. Use the original control panel to resolve the error.",
+  "SafetyBar.OperationMode.Error.lb": "Error",
+  "SafetyBar.OperationMode.Manual.Explanation.lb": "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.",
+  "SafetyBar.OperationMode.Manual.lb": "Manual",
+  "SafetyBar.OperationMode.ti": "Operation mode",
+  "SafetyBar.SafetyState.Error.Explanation.lb": "The robot controller has entered an unexpected safety state.",
+  "SafetyBar.SafetyState.Error.lb": "Error",
+  "SafetyBar.SafetyState.Estop.lb": "E-Stop",
+  "SafetyBar.SafetyState.ManualActionRequired.Explanation.lb": "The robot controller has entered a safety state requiring manual action to resolve.",
+  "SafetyBar.SafetyState.ManualActionRequired.lb": "Action required",
+  "SafetyBar.SafetyState.Normal.Explanation.lb": "The robot controller is in a safe state. Robot movement is enabled.",
+  "SafetyBar.SafetyState.Normal.lb": "Safe",
+  "SafetyBar.SafetyState.Stop.Explanation.lb": "The robot controller has entered a stop state. Movement is no longer possible until the stop state is resolved.",
+  "SafetyBar.SafetyState.Stop.lb": "Stop",
+  "SafetyBar.SafetyState.ti": "Safety state",
+  "SafetyBar.StopState.Estop.Explanation.lb": "An emergency stop of the robot controller has been triggered. Movement of the robot is no longer possible until the estop is released."
 }

package/src/index.ts

@@ -13,6 +13,7 @@ export * from "./components/robots/AxisConfig"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"
 export * from "./components/robots/SupportedRobot"
+export * from "./components/safetyBar/SafetyBar"
 export * from "./components/SelectableFab"
 export * from "./components/utils/hooks"
 export * from "./components/VelocitySlider"