@wandelbots/wandelbots-js-react-components 2.44.0-pr.feature-seperate-timer.383.16690f0 → 2.44.0

package/src/components/jogging/PoseJointValues.tsx

@@ -1,40 +1,101 @@
-import { Button, Stack } from "@mui/material"
-import type { Joints } from "@wandelbots/nova-api/v1"
+import { Button, Stack, Typography } from "@mui/material"
+import type {
+  ConnectedMotionGroup,
+  MotionGroupStateResponse,
+  MotionStreamConnection,
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
-import { useState } from "react"
-import { externalizeComponent } from "../../externalizeComponent"
+import { useRef, useState } from "react"
 import { CopyableText } from "../CopyableText"
+import { useAnimationFrame } from "../utils/hooks"
+
+/** Minimal interface for what PoseJointValues needs from motion stream */
+type MotionStateProvider = {
+  rapidlyChangingMotionState: MotionGroupStateResponse
+}
+
+/** Creates a motion state provider from either a MotionStreamConnection or ConnectedMotionGroup */
+function createMotionStateProvider(
+  motionStream?: MotionStreamConnection,
+  connectedMotionGroup?: ConnectedMotionGroup,
+): MotionStateProvider | undefined {
+  if (motionStream) {
+    return motionStream
+  }
+  if (connectedMotionGroup) {
+    return {
+      rapidlyChangingMotionState:
+        connectedMotionGroup.rapidlyChangingMotionState,
+    }
+  }
+  return undefined
+}
 
 export type PoseJointValuesProps = {
-  joints: Joints
+  /** Either a MotionStreamConnection or ConnectedMotionGroup */
+  motionStream?: MotionStreamConnection
+  connectedMotionGroup?: ConnectedMotionGroup
   showCopyButton?: boolean
 }
 
-export const PoseJointValues = externalizeComponent(
-  observer(({ joints, showCopyButton = false }: PoseJointValuesProps) => {
-    const [copyMessage, setCopyMessage] = useState<string | null>(null)
-    const poseString = `[${joints.joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+export const PoseJointValues = observer(
+  ({
+    motionStream,
+    connectedMotionGroup,
+    showCopyButton = false,
+  }: PoseJointValuesProps) => {
+    const poseHolderRef = useRef<HTMLDivElement>(null)
+    const [copyMessage, setCopyMessage] = useState("")
+
+    const activeMotionStream = createMotionStateProvider(
+      motionStream,
+      connectedMotionGroup,
+    )
+
+    if (!activeMotionStream) {
+      throw new Error(
+        "PoseJointValues requires either motionStream or connectedMotionGroup prop",
+      )
+    }
+
+    function getCurrentPoseString() {
+      if (!activeMotionStream) return ""
+      const { joints } =
+        activeMotionStream.rapidlyChangingMotionState.state.joint_position
+      return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+    }
 
     const handleCopy = async () => {
       try {
-        await navigator.clipboard.writeText(poseString)
+        await navigator.clipboard.writeText(getCurrentPoseString())
         setCopyMessage("Copied!")
-        setTimeout(() => setCopyMessage(null), 2000)
+        setTimeout(() => setCopyMessage(""), 2000)
       } catch {
         setCopyMessage("Copy failed")
-        setTimeout(() => setCopyMessage(null), 2000)
+        setTimeout(() => setCopyMessage(""), 2000)
       }
     }
 
+    useAnimationFrame(() => {
+      if (!poseHolderRef.current) {
+        return
+      }
+
+      const newPoseContent = getCurrentPoseString()
+      if (poseHolderRef.current.textContent === newPoseContent) {
+        return
+      }
+      poseHolderRef.current.textContent = newPoseContent
+    })
+
     return (
       <Stack
         direction="row"
         alignItems="center"
         spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
-        data-testid="pose-joint-values"
       >
-        <CopyableText value={poseString} />
+        <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
         {showCopyButton && (
           <Button
             variant="contained"
@@ -43,10 +104,15 @@ export const PoseJointValues = externalizeComponent(
             onClick={handleCopy}
             sx={{ flexShrink: 0 }}
           >
-            { copyMessage ? copyMessage : "Copy"}
+            Copy
           </Button>
         )}
+        {copyMessage && (
+          <Typography variant="caption" color="success.main">
+            {copyMessage}
+          </Typography>
+        )}
       </Stack>
     )
-  }),
+  },
 )

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

@@ -52,19 +52,12 @@
   "CycleTimer.CycleTime.lb": "Zykluszeit",
   "CycleTimer.Measuring.lb": "wird gemessen...",
   "CycleTimer.Determined.lb": "bestimmt",
-  "Timer.error": "Fehler",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Weiter",
   "ProgramControl.Retry.bt": "Wiederholen",
   "ProgramControl.Pause.bt": "Pause",
   "ProgramControl.Stop.bt": "Stopp",
-  "ProgramStateIndicator.Preparing.lb": "Vorbereitung",
-  "ProgramStateIndicator.Starting.lb": "Startet",
   "ProgramStateIndicator.Running.lb": "In Betrieb",
-  "ProgramStateIndicator.Pausing.lb": "Pausiert",
-  "ProgramStateIndicator.Stopping.lb": "Stoppt",
-  "ProgramStateIndicator.Completed.lb": "Abgeschlossen",
-  "ProgramStateIndicator.Failed.lb": "Fehlgeschlagen",
   "ProgramStateIndicator.Error.lb": "Fehler",
   "ProgramStateIndicator.EStop.lb": "Not-Aus",
   "ProgramStateIndicator.Idle.lb": "Leerlauf",

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

@@ -53,19 +53,12 @@
   "CycleTimer.CycleTime.lb": "Cycle Time",
   "CycleTimer.Measuring.lb": "measuring...",
   "CycleTimer.Determined.lb": "determined",
-  "Timer.error": "Error",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Resume",
   "ProgramControl.Retry.bt": "Retry",
   "ProgramControl.Pause.bt": "Pause",
   "ProgramControl.Stop.bt": "Stop",
-  "ProgramStateIndicator.Preparing.lb": "Preparing",
-  "ProgramStateIndicator.Starting.lb": "Starting",
   "ProgramStateIndicator.Running.lb": "Running",
-  "ProgramStateIndicator.Pausing.lb": "Pausing",
-  "ProgramStateIndicator.Stopping.lb": "Stopping",
-  "ProgramStateIndicator.Completed.lb": "Completed",
-  "ProgramStateIndicator.Failed.lb": "Failed",
   "ProgramStateIndicator.Error.lb": "Error",
   "ProgramStateIndicator.EStop.lb": "E-Stop",
   "ProgramStateIndicator.Idle.lb": "Idle",

package/src/index.ts

@@ -4,7 +4,6 @@ export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
 export * from "./components/AppHeader"
 export * from "./components/CycleTimer"
-export * from "./components/Timer"
 export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"

package/dist/components/Timer/Timer.d.ts

@@ -1,3 +0,0 @@
-export { Timer } from "./index";
-export type { TimerControls, TimerProps } from "./types";
-//# sourceMappingURL=Timer.d.ts.map

package/dist/components/Timer/Timer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/Timer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Timer/TimerDefaultVariant.d.ts

@@ -1,10 +0,0 @@
-import type { TimerState, TimerAnimationState } from "./types";
-interface TimerDefaultVariantProps {
-    timerState: TimerState;
-    animationState: TimerAnimationState;
-    hasError: boolean;
-    className?: string;
-}
-export declare const TimerDefaultVariant: ({ timerState, animationState, hasError, className, }: TimerDefaultVariantProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=TimerDefaultVariant.d.ts.map

package/dist/components/Timer/TimerDefaultVariant.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimerDefaultVariant.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/TimerDefaultVariant.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAG9D,UAAU,wBAAwB;IAChC,UAAU,EAAE,UAAU,CAAA;IACtB,cAAc,EAAE,mBAAmB,CAAA;IACnC,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,mBAAmB,GAAI,sDAKjC,wBAAwB,4CAwH1B,CAAA"}

package/dist/components/Timer/TimerSmallVariant.d.ts

@@ -1,11 +0,0 @@
-import type { TimerState, TimerAnimationState } from "./types";
-interface TimerSmallVariantProps {
-    timerState: TimerState;
-    animationState: TimerAnimationState;
-    hasError: boolean;
-    compact: boolean;
-    className?: string;
-}
-export declare const TimerSmallVariant: ({ timerState, animationState, hasError, compact, className, }: TimerSmallVariantProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=TimerSmallVariant.d.ts.map

package/dist/components/Timer/TimerSmallVariant.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimerSmallVariant.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/TimerSmallVariant.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAG9D,UAAU,sBAAsB;IAC9B,UAAU,EAAE,UAAU,CAAA;IACtB,cAAc,EAAE,mBAAmB,CAAA;IACnC,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,iBAAiB,GAAI,+DAM/B,sBAAsB,4CAuHxB,CAAA"}

package/dist/components/Timer/index.d.ts

@@ -1,19 +0,0 @@
-import type { TimerProps } from "./types";
-/**
- * A simple count-up timer component with visual progress indication
- *
- * Features:
- * - Count-up timer that tracks elapsed time
- * - Visual progress gauge that cycles every minute
- * - Two display variants: large circular gauge (default) or small icon with text
- * - Full timer control: start, pause, resume, reset functionality
- * - Support for starting with elapsed time (resume mid-session)
- * - Error state support: pauses timer and shows error styling
- * - Smooth progress animations with spring physics
- * - Fully localized with i18next
- * - Material-UI theming integration
- */
-export declare const Timer: (({ onTimerReady, autoStart, variant, compact, className, hasError, }: TimerProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Timer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAIzC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,KAAK,yEASX,UAAU;;CAoEhB,CAAA"}

package/dist/components/Timer/types.d.ts

@@ -1,36 +0,0 @@
-export interface TimerControls {
-    start: (elapsedSeconds?: number) => void;
-    pause: () => void;
-    resume: () => void;
-    reset: () => void;
-    isPaused: () => boolean;
-}
-export interface TimerProps {
-    /**
-     * Callback that receives the timer control functions
-     */
-    onTimerReady: (controls: TimerControls) => void;
-    /** Whether the timer should start automatically when initialized */
-    autoStart?: boolean;
-    /** Visual variant of the timer */
-    variant?: "default" | "small";
-    /** For small variant: whether to show compact display */
-    compact?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-    /** Whether the timer is in an error state (pauses timer and shows error styling) */
-    hasError?: boolean;
-}
-export interface TimerState {
-    elapsedTime: number;
-    isRunning: boolean;
-    isPausedState: boolean;
-    currentProgress: number;
-    wasRunningBeforeError: boolean;
-}
-export interface TimerAnimationState {
-    showPauseAnimation: boolean;
-    showErrorAnimation: boolean;
-    showMainText: boolean;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Timer/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;IAC/C,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,qBAAqB,EAAE,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,OAAO,CAAA;IAC3B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,YAAY,EAAE,OAAO,CAAA;CACtB"}

package/dist/components/Timer/useTimerAnimations.d.ts

@@ -1,11 +0,0 @@
-import type { TimerAnimationState } from "./types";
-export declare const useTimerAnimations: () => {
-    animationState: TimerAnimationState;
-    triggerPauseAnimation: () => void;
-    triggerErrorAnimation: () => void;
-    clearErrorAnimation: () => void;
-    triggerFadeTransition: () => void;
-    setInitialAnimationState: () => void;
-    cleanup: () => void;
-};
-//# sourceMappingURL=useTimerAnimations.d.ts.map

package/dist/components/Timer/useTimerAnimations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTimerAnimations.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/useTimerAnimations.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,eAAO,MAAM,kBAAkB;;;;;;;;CA0F9B,CAAA"}

package/dist/components/Timer/useTimerLogic.d.ts

@@ -1,20 +0,0 @@
-import type { TimerState } from "./types";
-interface UseTimerLogicProps {
-    autoStart: boolean;
-    hasError: boolean;
-    onPauseAnimation: () => void;
-    onErrorAnimation: () => void;
-    onClearErrorAnimation: () => void;
-}
-export declare const useTimerLogic: ({ autoStart, hasError, onPauseAnimation, onErrorAnimation, onClearErrorAnimation, }: UseTimerLogicProps) => {
-    timerState: TimerState;
-    controls: {
-        start: (elapsedSeconds?: number) => void;
-        pause: () => void;
-        resume: () => void;
-        reset: () => void;
-        isPaused: () => boolean;
-    };
-};
-export {};
-//# sourceMappingURL=useTimerLogic.d.ts.map

package/dist/components/Timer/useTimerLogic.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTimerLogic.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/useTimerLogic.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,UAAU,kBAAkB;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,qBAAqB,EAAE,MAAM,IAAI,CAAA;CAClC;AAED,eAAO,MAAM,aAAa,GAAI,qFAM3B,kBAAkB;;;iCAyBA,MAAM;;;;;;CA0K1B,CAAA"}

package/dist/components/Timer/utils.d.ts

@@ -1,9 +0,0 @@
-/**
- * Formats time in seconds to MM:SS format
- */
-export declare const formatTime: (seconds: number) => string;
-/**
- * Calculates progress percentage for timer (minute-based cycles)
- */
-export declare const calculateTimerProgress: (elapsedTime: number) => number;
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/Timer/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,KAAG,MAI5C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,aAAa,MAAM,KAAG,MAE5D,CAAA"}

package/src/components/Timer/Timer.ts

@@ -1,2 +0,0 @@
-export { Timer } from "./index"
-export type { TimerControls, TimerProps } from "./types"

package/src/components/Timer/TimerDefaultVariant.tsx

@@ -1,140 +0,0 @@
-import { Box, Fade, Typography } from "@mui/material"
-import { Gauge } from "@mui/x-charts"
-import { useTheme } from "@mui/material/styles"
-import { useTranslation } from "react-i18next"
-import type { TimerState, TimerAnimationState } from "./types"
-import { formatTime } from "./utils"
-
-interface TimerDefaultVariantProps {
-  timerState: TimerState
-  animationState: TimerAnimationState
-  hasError: boolean
-  className?: string
-}
-
-export const TimerDefaultVariant = ({
-  timerState,
-  animationState,
-  hasError,
-  className,
-}: TimerDefaultVariantProps) => {
-  const { t } = useTranslation()
-  const theme = useTheme()
-  const { elapsedTime, currentProgress } = timerState
-  const { showErrorAnimation, showPauseAnimation, showMainText } = animationState
-
-  return (
-    <Box
-      className={className}
-      sx={{
-        position: "relative",
-        width: 264,
-        height: 264,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Gauge
-        width={264}
-        height={264}
-        value={currentProgress}
-        valueMin={0}
-        valueMax={100}
-        innerRadius="85%"
-        outerRadius="100%"
-        margin={0}
-        skipAnimation={true}
-        text={() => ""}
-        sx={{
-          opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-          transition: "opacity 0.5s ease-out",
-          [`& .MuiGauge-valueArc`]: {
-            fill: hasError
-              ? theme.palette.error.light
-              : theme.palette.success.main,
-            transition: "fill 0.5s ease-out",
-          },
-          [`& .MuiGauge-referenceArc`]: {
-            fill: "#171927",
-            stroke: "transparent",
-            strokeWidth: 0,
-            transition:
-              "fill 0.5s ease-out, stroke 0.5s ease-out, stroke-width 0.5s ease-out",
-          },
-          [`& .MuiGauge-valueText`]: {
-            display: "none",
-          },
-          [`& .MuiGauge-text`]: {
-            display: "none",
-          },
-        }}
-      />
-
-      {/* Center content overlay */}
-      <Box
-        sx={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          width: 225,
-          height: 225,
-          borderRadius: "50%",
-          backgroundColor: "#292B3F",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          gap: 1,
-          transition: "background-color 0.5s ease-out",
-        }}
-      >
-        {/* Main display */}
-        <Box
-          sx={{
-            position: "relative",
-            height: "48px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            marginBottom: 0.5,
-          }}
-        >
-          {/* Error text */}
-          <Fade in={showMainText && hasError} timeout={200}>
-            <Typography
-              variant="h6"
-              sx={{
-                position: "absolute",
-                fontSize: "16px",
-                fontWeight: 500,
-                color: theme.palette.error.light,
-              }}
-            >
-              {t("timer.error")}
-            </Typography>
-          </Fade>
-
-          {/* Timer display */}
-          <Fade in={showMainText && !hasError} timeout={300}>
-            <Typography
-              variant="h1"
-              sx={{
-                position: "absolute",
-                fontSize: "48px",
-                fontWeight: 500,
-                color: theme.palette.text.primary,
-                lineHeight: 1,
-                letterSpacing: "-0.5px",
-              }}
-            >
-              {formatTime(elapsedTime)}
-            </Typography>
-          </Fade>
-        </Box>
-      </Box>
-    </Box>
-  )
-}

package/src/components/Timer/TimerSmallVariant.tsx

@@ -1,140 +0,0 @@
-import { Box, Typography } from "@mui/material"
-import { useTheme } from "@mui/material/styles"
-import { useTranslation } from "react-i18next"
-import type { TimerState, TimerAnimationState } from "./types"
-import { formatTime } from "./utils"
-
-interface TimerSmallVariantProps {
-  timerState: TimerState
-  animationState: TimerAnimationState
-  hasError: boolean
-  compact: boolean
-  className?: string
-}
-
-export const TimerSmallVariant = ({
-  timerState,
-  animationState,
-  hasError,
-  compact,
-  className,
-}: TimerSmallVariantProps) => {
-  const { t } = useTranslation()
-  const theme = useTheme()
-  const { elapsedTime, currentProgress } = timerState
-  const { showErrorAnimation, showPauseAnimation } = animationState
-
-  // Simple text-only mode for compact variant
-  if (compact) {
-    return (
-      <Box
-        className={className}
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          m: 0,
-        }}
-      >
-        <Typography
-          variant="body2"
-          sx={{
-            color: hasError
-              ? theme.palette.error.light
-              : theme.palette.text.primary,
-            fontSize: "14px",
-            transition: "color 0.5s ease-out",
-          }}
-        >
-          {hasError ? t("timer.error") : formatTime(elapsedTime)}
-        </Typography>
-      </Box>
-    )
-  }
-
-  return (
-    <Box
-      className={className}
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        m: 0,
-        gap: 1,
-      }}
-    >
-      {/* Animated progress ring icon */}
-      <Box
-        sx={{
-          width: 20,
-          height: 20,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-          transition: "opacity 0.5s ease-out",
-        }}
-      >
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          style={{ transform: "rotate(-90deg)" }}
-          role="img"
-          aria-label="Timer progress"
-        >
-          <circle
-            cx="10"
-            cy="10"
-            r="8"
-            fill="none"
-            stroke={
-              hasError
-                ? theme.palette.error.light
-                : theme.palette.success.main
-            }
-            strokeWidth="2"
-            opacity={0.3}
-            style={{
-              transition: "stroke 0.8s ease-in-out, opacity 2s ease-in-out",
-            }}
-          />
-          <circle
-            cx="10"
-            cy="10"
-            r="8"
-            fill="none"
-            stroke={
-              hasError
-                ? theme.palette.error.light
-                : theme.palette.success.main
-            }
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeDasharray={`${2 * Math.PI * 8}`}
-            strokeDashoffset={`${2 * Math.PI * 8 * (1 - currentProgress / 100)}`}
-            style={{
-              transition:
-                "stroke-dashoffset 0.1s ease-out, stroke 0.8s ease-in-out, opacity 2s ease-in-out",
-            }}
-          />
-        </svg>
-      </Box>
-
-      {/* Timer text display */}
-      <Typography
-        variant="body2"
-        sx={{
-          color: hasError
-            ? theme.palette.error.light
-            : theme.palette.text.primary,
-          fontSize: "14px",
-          lineHeight: "normal",
-          letterSpacing: "normal",
-          transition:
-            "color 0.8s ease-in-out, font-size 0.3s ease-out, opacity 2s ease-in-out",
-        }}
-      >
-        {hasError ? t("timer.error") : formatTime(elapsedTime)}
-      </Typography>
-    </Box>
-  )
-}