@wandelbots/wandelbots-js-react-components 2.32.0-pr.feature-robot-precondition-list.372.297bf4f → 2.32.0-pr.feature-robot-precondition-list.372.5d8a86e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.32.0-pr.feature-robot-precondition-list.372.297bf4f",
+  "version": "2.32.0-pr.feature-robot-precondition-list.372.5d8a86e",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/CycleTimer.tsx

@@ -301,77 +301,56 @@ export const CycleTimer = externalizeComponent(
             sx={{
               display: "flex",
               alignItems: "center",
-              gap: 0.125, // Minimal gap - 1px
+              m: 0,
+              gap: 1, // 8px gap between circle and text
             }}
           >
-            {/* Animated progress gauge icon */}
+            {/* Animated progress ring icon */}
             <Box
               sx={{
-                position: "relative",
-                width: 40,
-                height: 40,
+                width: 20,
+                height: 20,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                borderRadius: "50%",
-                overflow: "visible",
+                opacity: isPausedState ? 0.6 : 1,
+                transition: "opacity 0.2s ease",
               }}
             >
-              <Gauge
-                width={40}
-                height={40}
-                value={progressValue}
-                valueMin={0}
-                valueMax={100}
-                innerRadius="70%"
-                outerRadius="95%"
-                skipAnimation={true}
-                sx={{
-                  opacity: isPausedState ? 0.6 : 1,
-                  transition: "opacity 0.2s ease",
-                  [`& .MuiGauge-valueArc`]: {
-                    fill: theme.palette.success.main,
-                  },
-                  [`& .MuiGauge-referenceArc`]: {
-                    fill: theme.palette.success.main,
-                    opacity: 0.3,
-                  },
-                  [`& .MuiGauge-valueText`]: {
-                    display: "none",
-                  },
-                  [`& .MuiGauge-text`]: {
-                    display: "none",
-                  },
-                  [`& text`]: {
-                    display: "none",
-                  },
-                  // Hide any inner circle elements that might flash
-                  [`& .MuiGauge-referenceArcBackground`]: {
-                    display: "none",
-                  },
-                  [`& .MuiGauge-valueArcBackground`]: {
-                    display: "none",
-                  },
-                  [`& circle`]: {
-                    display: "none",
-                  },
-                }}
-              />
-
-              {/* Inner circle overlay to prevent flashing */}
-              <Box
-                sx={{
-                  position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
-                  width: 13,
-                  height: 13,
-                  borderRadius: "50%",
-                  backgroundColor: theme.palette.background?.paper || "white",
-                  pointerEvents: "none",
-                }}
-              />
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                style={{ transform: "rotate(-90deg)" }}
+                role="img"
+                aria-label="Timer progress"
+              >
+                {/* Background ring */}
+                <circle
+                  cx="10"
+                  cy="10"
+                  r="8"
+                  fill="none"
+                  stroke={theme.palette.success.main}
+                  strokeWidth="2"
+                  opacity={0.3}
+                />
+                {/* Progress ring */}
+                <circle
+                  cx="10"
+                  cy="10"
+                  r="8"
+                  fill="none"
+                  stroke={theme.palette.success.main}
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeDasharray={`${2 * Math.PI * 8}`}
+                  strokeDashoffset={`${2 * Math.PI * 8 * (1 - progressValue / 100)}`}
+                  style={{
+                    transition: "stroke-dashoffset 0.1s ease-out",
+                  }}
+                />
+              </svg>
             </Box>
 
             {/* Timer text display */}
@@ -383,8 +362,8 @@ export const CycleTimer = externalizeComponent(
               }}
             >
               {compact
-                ? // Compact mode: show only remaining time
-                  formatTime(remainingTime)
+                ? // Compact mode: show remaining time with "min." suffix
+                  `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
                 : // Full mode: show "remaining / of total min." format
                   `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`}
             </Typography>

package/src/components/ProgramControl.tsx

@@ -4,7 +4,12 @@ import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
 
-export type ProgramState = "idle" | "running" | "paused" | "stopping"
+export enum ProgramState {
+  IDLE = "idle",
+  RUNNING = "running",
+  PAUSED = "paused",
+  STOPPING = "stopping",
+}
 
 export interface ProgramControlProps {
   /** The current state of the program control */
@@ -70,22 +75,24 @@ export const ProgramControl = externalizeComponent(
       const getButtonConfigs = (): ButtonConfig[] => {
         const baseConfigs: Record<string, ButtonConfig> = {
           run: {
-            enabled: state === "idle" || state === "paused",
+            enabled:
+              state === ProgramState.IDLE || state === ProgramState.PAUSED,
             label:
-              state === "paused"
+              state === ProgramState.PAUSED
                 ? t("ProgramControl.Resume.bt")
                 : t("ProgramControl.Start.bt"),
             color: theme.palette.success.main,
             onClick: onRun,
           },
           pause: {
-            enabled: state === "running",
+            enabled: state === ProgramState.RUNNING,
             label: t("ProgramControl.Pause.bt"),
             color: "#FFFFFF33",
             onClick: onPause || (() => {}),
           },
           stop: {
-            enabled: state === "running" || state === "paused",
+            enabled:
+              state === ProgramState.RUNNING || state === ProgramState.PAUSED,
             label: t("ProgramControl.Stop.bt"),
             color: theme.palette.error.main,
             onClick: onStop,
@@ -157,7 +164,7 @@ export const ProgramControl = externalizeComponent(
                   variant="contained"
                   disabled={
                     !config.enabled ||
-                    (state === "stopping" && !requiresManualReset)
+                    (state === ProgramState.STOPPING && !requiresManualReset)
                   }
                   onClick={config.onClick}
                   sx={{
@@ -167,14 +174,17 @@ export const ProgramControl = externalizeComponent(
                     backgroundColor: config.color,
                     opacity:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? 1
                         : 0.3,
                     "&:hover": {
                       backgroundColor: config.color,
                       opacity:
                         config.enabled &&
-                        !(state === "stopping" && !requiresManualReset)
+                        !(
+                          state === ProgramState.STOPPING &&
+                          !requiresManualReset
+                        )
                           ? 0.8
                           : 0.3,
                     },
@@ -194,13 +204,13 @@ export const ProgramControl = externalizeComponent(
                   sx={{
                     color:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? config.color
                         : theme.palette.text.disabled,
                     textAlign: "center",
                     opacity:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? 1
                         : 0.3,
                   }}

package/src/components/ProgramStateIndicator.tsx

@@ -1,4 +1,4 @@
-import { Chip, useTheme } from "@mui/material"
+import { Chip, Typography, useTheme } from "@mui/material"
 import type {
   RobotControllerStateOperationModeEnum,
   RobotControllerStateSafetyStateEnum,
@@ -6,7 +6,7 @@ import type {
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
-import type { ProgramState } from "./ProgramControl"
+import { ProgramState } from "./ProgramControl"
 
 export interface ProgramStateIndicatorProps {
   /** The current state of the program */
@@ -77,22 +77,22 @@ export const ProgramStateIndicator = externalizeComponent(
         // For normal safety states, check program state
         if (safetyState === "SAFETY_STATE_NORMAL") {
           switch (programState) {
-            case "running":
+            case ProgramState.RUNNING:
               return {
                 label: t("ProgramStateIndicator.Running.lb"),
                 color: theme.palette.success.main,
               }
-            case "paused":
+            case ProgramState.PAUSED:
               return {
                 label: t("ProgramStateIndicator.Paused.lb"),
                 color: theme.palette.grey[600],
               }
-            case "stopping":
+            case ProgramState.STOPPING:
               return {
                 label: t("ProgramStateIndicator.Stopped.lb"),
                 color: theme.palette.error.main,
               }
-            case "idle":
+            case ProgramState.IDLE:
             default:
               return {
                 label: t("ProgramStateIndicator.Ready.lb"),
@@ -131,14 +131,26 @@ export const ProgramStateIndicator = externalizeComponent(
       return (
         <Chip
           className={className}
-          label={fullLabel}
+          label={
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "0.75rem", // Smaller than body2
+                lineHeight: 1.2,
+              }}
+            >
+              {fullLabel}
+            </Typography>
+          }
           variant="filled"
           sx={{
             backgroundColor: color,
             color: theme.palette.getContrastText(color),
             fontWeight: 500,
+            height: "auto",
             "& .MuiChip-label": {
-              paddingX: 2,
+              paddingX: 1.5,
+              paddingY: 0.5,
             },
           }}
         />