@vention/machine-apps-components 1.10.0 → 1.11.0

package/index.esm.js

@@ -10,10 +10,11 @@ import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/de';
 import 'dayjs/locale/es';
-import { Box, useTheme, Typography, Button, InputAdornment, IconButton, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, List, ListItem, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import { Box, useTheme, Typography, Button, InputAdornment, IconButton, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, List, ListItem, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress, Alert, LinearProgress } from '@mui/material';
 import { VentionSelect, VentionModalBase, VentionIcon, VentionTextInput, COLORS, VentionButton, VentionStatusIndicator, VentionSpinner, VentionAlert, VentionDropZone, VentionUploadFile, VentionIconButton } from '@vention/machine-ui';
 import { tss } from 'tss-react/mui';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useMqttSubscription } from '@vention/machine-logic-ui-sdk';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1850,6 +1851,42 @@ var enTranslations = {
     delete: "Delete",
     deleteConfirmation: "Are you sure you want to delete this item?",
     emptyState: "No items yet. Click Add to create one."
+  },
+  calibration: {
+    footer: {
+      loading: "Working...",
+      cancel: "Cancel",
+      neverCompleted: "Not calibrated yet",
+      lastCompleted: "Last calibrated"
+    },
+    handEye: {
+      calibrate: {
+        calibrate: "Calibrate",
+        update: "Update calibration",
+        cancel: "Cancel calibration",
+        cancelling: "Cancelling...",
+        running: "{{percent}}% Completed",
+        lastCalibratedOn: "Calibrated on {{date}}",
+        never: "Not calibrated"
+      },
+      verify: {
+        action: "Verify calibration",
+        loading: "Verifying..."
+      }
+    },
+    environment: {
+      topAlert: "Before starting environment calibration, please contact Vention's team for assistance.",
+      helper: "Enable free drive and move the robot to take photos covering the entire environment, including walls, bins, machines.",
+      startSession: "Start new session",
+      starting: "Starting...",
+      takePhoto: "Take photo",
+      endSession: "End session",
+      sessionLabel: "Session",
+      photoCount: "{{count}} photo(s) saved",
+      noPhotos: "No photos captured yet",
+      lastPhotoAt: "last on {{date}}",
+      error: "Environment scan failed. Reset the bin and retry."
+    }
   }
 };
 
@@ -1991,6 +2028,42 @@ var frTranslations = {
     delete: "Supprimer",
     deleteConfirmation: "Êtes-vous sûr de vouloir supprimer cet élément?",
     emptyState: "Aucun élément. Cliquez sur Ajouter pour en créer un."
+  },
+  calibration: {
+    footer: {
+      loading: "En cours...",
+      cancel: "Annuler",
+      neverCompleted: "Non calibré",
+      lastCompleted: "Dernier calibrage"
+    },
+    handEye: {
+      calibrate: {
+        calibrate: "Calibrer",
+        update: "Mettre à jour le calibrage",
+        cancel: "Annuler le calibrage",
+        cancelling: "Annulation...",
+        running: "{{percent}} % effectué",
+        lastCalibratedOn: "Calibré le {{date}}",
+        never: "Non calibré"
+      },
+      verify: {
+        action: "Vérifier le calibrage",
+        loading: "Vérification..."
+      }
+    },
+    environment: {
+      topAlert: "Avant de démarrer le calibrage de l'environnement, veuillez contacter l'équipe Vention.",
+      helper: "Activez le free drive et déplacez le robot pour prendre des photos couvrant tout l'environnement : murs, bacs, machines.",
+      startSession: "Démarrer une session",
+      starting: "Démarrage...",
+      takePhoto: "Prendre une photo",
+      endSession: "Terminer la session",
+      sessionLabel: "Session",
+      photoCount: "{{count}} photo(s) enregistrée(s)",
+      noPhotos: "Aucune photo capturée",
+      lastPhotoAt: "dernière le {{date}}",
+      error: "Échec du balayage de l'environnement. Réinitialisez le bac et réessayez."
+    }
   }
 };
 
@@ -2132,6 +2205,42 @@ var deTranslations = {
     delete: "Löschen",
     deleteConfirmation: "Sind Sie sicher, dass Sie dieses Element löschen möchten?",
     emptyState: "Noch keine Elemente. Klicken Sie auf Hinzufügen, um eines zu erstellen."
+  },
+  calibration: {
+    footer: {
+      loading: "Läuft...",
+      cancel: "Abbrechen",
+      neverCompleted: "Nicht kalibriert",
+      lastCompleted: "Zuletzt kalibriert"
+    },
+    handEye: {
+      calibrate: {
+        calibrate: "Kalibrieren",
+        update: "Kalibrierung aktualisieren",
+        cancel: "Kalibrierung abbrechen",
+        cancelling: "Abbrechen...",
+        running: "{{percent}}% abgeschlossen",
+        lastCalibratedOn: "Kalibriert am {{date}}",
+        never: "Nicht kalibriert"
+      },
+      verify: {
+        action: "Kalibrierung prüfen",
+        loading: "Prüfung läuft..."
+      }
+    },
+    environment: {
+      topAlert: "Bitte kontaktieren Sie das Vention-Team, bevor Sie die Umgebungskalibrierung starten.",
+      helper: "Aktivieren Sie Free Drive und bewegen Sie den Roboter, um Fotos der gesamten Umgebung aufzunehmen — Wände, Bins, Maschinen.",
+      startSession: "Neue Sitzung starten",
+      starting: "Wird gestartet...",
+      takePhoto: "Foto aufnehmen",
+      endSession: "Sitzung beenden",
+      sessionLabel: "Sitzung",
+      photoCount: "{{count}} Foto(s) gespeichert",
+      noPhotos: "Noch keine Fotos aufgenommen",
+      lastPhotoAt: "zuletzt am {{date}}",
+      error: "Umgebungsscan fehlgeschlagen. Bin zurücksetzen und erneut versuchen."
+    }
   }
 };
 
@@ -2273,6 +2382,42 @@ var esTranslations = {
     delete: "Eliminar",
     deleteConfirmation: "¿Está seguro de que desea eliminar este elemento?",
     emptyState: "Aún no hay elementos. Haz clic en Agregar para crear uno."
+  },
+  calibration: {
+    footer: {
+      loading: "En curso...",
+      cancel: "Cancelar",
+      neverCompleted: "Sin calibrar",
+      lastCompleted: "Última calibración"
+    },
+    handEye: {
+      calibrate: {
+        calibrate: "Calibrar",
+        update: "Actualizar calibración",
+        cancel: "Cancelar calibración",
+        cancelling: "Cancelando...",
+        running: "{{percent}}% completado",
+        lastCalibratedOn: "Calibrado el {{date}}",
+        never: "Sin calibrar"
+      },
+      verify: {
+        action: "Verificar calibración",
+        loading: "Verificando..."
+      }
+    },
+    environment: {
+      topAlert: "Antes de iniciar la calibración del entorno, contacta al equipo de Vention.",
+      helper: "Activa el free drive y mueve el robot para tomar fotos que cubran todo el entorno — paredes, contenedores, máquinas.",
+      startSession: "Iniciar nueva sesión",
+      starting: "Iniciando...",
+      takePhoto: "Tomar foto",
+      endSession: "Terminar sesión",
+      sessionLabel: "Sesión",
+      photoCount: "{{count}} foto(s) guardada(s)",
+      noPhotos: "Sin fotos aún",
+      lastPhotoAt: "última el {{date}}",
+      error: "Falló el escaneo del entorno. Restablece el contenedor y vuelve a intentarlo."
+    }
   }
 };
 
@@ -3048,7 +3193,7 @@ const I18nSettings = function I18nSettings({
   const {
     classes,
     cx
-  } = useStyles$h({
+  } = useStyles$k({
     layout
   });
   const {
@@ -3138,7 +3283,7 @@ const I18nSettings = function I18nSettings({
   });
 };
 I18nSettings.displayName = "I18nSettings";
-const useStyles$h = tss.withParams().create(({
+const useStyles$k = tss.withParams().create(({
   theme,
   layout
 }) => ({
@@ -5599,7 +5744,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
   } = props;
   const {
     classes
-  } = useStyles$g();
+  } = useStyles$j();
   const {
     t
   } = useI18n();
@@ -5662,7 +5807,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
     })
   });
 };
-const useStyles$g = tss.create(({
+const useStyles$j = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -5726,7 +5871,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const {
     classes
-  } = useStyles$f();
+  } = useStyles$i();
   const {
     t
   } = useI18n();
@@ -5850,7 +5995,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
     })]
   });
 };
-const useStyles$f = tss.create(({
+const useStyles$i = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -5922,7 +6067,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
   const {
     classes,
     cx
-  } = useStyles$e();
+  } = useStyles$h();
   const {
     t
   } = useI18n();
@@ -5955,7 +6100,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
     })]
   });
 };
-const useStyles$e = tss.create(({
+const useStyles$h = tss.create(({
   theme
 }) => ({
   tabButton: {
@@ -6026,7 +6171,7 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
   const theme = useTheme();
   const {
     classes
-  } = useStyles$d({
+  } = useStyles$g({
     variant
   });
   const {
@@ -6167,7 +6312,7 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
     })]
   });
 };
-const useStyles$d = tss.withParams().create(({
+const useStyles$g = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -6327,7 +6472,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
   } = props;
   const {
     classes
-  } = useStyles$c();
+  } = useStyles$f();
   if (!visible) return null;
   const getFadedColor = function getFadedColor(color, opacity = 1) {
     return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
@@ -6373,7 +6518,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
     })
   });
 };
-const useStyles$c = tss.create(({
+const useStyles$f = tss.create(({
   theme
 }) => ({
   actionButton: {
@@ -6409,7 +6554,7 @@ const StatusTopBarRoot = function StatusTopBarRoot(props) {
   } = props;
   const {
     classes
-  } = useStyles$b({
+  } = useStyles$e({
     variant
   });
   const visibleButtons = buttonConfigs.filter(config => config.visible !== false);
@@ -6436,7 +6581,7 @@ const StatusTopBarRoot = function StatusTopBarRoot(props) {
     })]
   });
 };
-const useStyles$b = tss.withParams().create(({
+const useStyles$e = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -6485,7 +6630,7 @@ const Sidebar = function Sidebar(props) {
   } = props;
   const {
     classes
-  } = useStyles$a({
+  } = useStyles$d({
     variant
   });
   return jsx(Box, {
@@ -6549,7 +6694,7 @@ const SidebarItemComponent = function SidebarItemComponent(props) {
     })
   });
 };
-const useStyles$a = tss.withParams().create(({
+const useStyles$d = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -6741,7 +6886,7 @@ const LogsTable = /*#__PURE__*/memo(({
   const {
     classes,
     cx
-  } = useStyles$9({
+  } = useStyles$c({
     tableHeight
   });
   const theme = useTheme();
@@ -7014,7 +7159,7 @@ const LogsTable = /*#__PURE__*/memo(({
   });
 });
 LogsTable.displayName = "LogsTable";
-const useStyles$9 = tss.withParams().create(({
+const useStyles$c = tss.withParams().create(({
   theme,
   tableHeight
 }) => ({
@@ -7157,7 +7302,7 @@ const LogFilterForm = /*#__PURE__*/memo(({
   var _a, _b, _c, _d;
   const {
     classes
-  } = useStyles$8();
+  } = useStyles$b();
   const {
     t
   } = useI18n();
@@ -7294,7 +7439,7 @@ const LogFilterForm = /*#__PURE__*/memo(({
   });
 });
 LogFilterForm.displayName = "LogFilterForm";
-const useStyles$8 = tss.create(({
+const useStyles$b = tss.create(({
   theme
 }) => ({
   filterSection: {
@@ -7570,7 +7715,7 @@ const LogsPagination = /*#__PURE__*/memo(({
 }) => {
   const {
     classes
-  } = useStyles$7();
+  } = useStyles$a();
   const {
     t
   } = useI18n();
@@ -7609,7 +7754,7 @@ const LogsPagination = /*#__PURE__*/memo(({
   });
 });
 LogsPagination.displayName = "LogsPagination";
-const useStyles$7 = tss.create(({
+const useStyles$a = tss.create(({
   theme
 }) => ({
   paginationSection: {
@@ -7660,7 +7805,7 @@ const LogsPanel = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     classes,
     cx
-  } = useStyles$6();
+  } = useStyles$9();
   const [logs, setLogs] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -7796,7 +7941,7 @@ const LogsPanel = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 LogsPanel.displayName = "LogsPanel";
-const useStyles$6 = tss.create(({
+const useStyles$9 = tss.create(({
   theme
 }) => ({
   root: {
@@ -7814,7 +7959,7 @@ const SettingsPage = function SettingsPage({
 }) {
   const {
     classes
-  } = useStyles$5({
+  } = useStyles$8({
     sidebarWidth
   });
   return jsxs(Box, {
@@ -7831,7 +7976,7 @@ const SettingsPage = function SettingsPage({
   });
 };
 SettingsPage.displayName = "SettingsPage";
-const useStyles$5 = tss.withParams().create(({
+const useStyles$8 = tss.withParams().create(({
   theme,
   sidebarWidth
 }) => ({
@@ -7877,7 +8022,7 @@ function FileUploadPanel({
   const {
     classes,
     cx
-  } = useStyles$4({
+  } = useStyles$7({
     maxHeight
   });
   const {
@@ -7930,7 +8075,7 @@ function FileUploadPanel({
   });
 }
 FileUploadPanel.displayName = "FileUploadPanel";
-const useStyles$4 = tss.withParams().create(({
+const useStyles$7 = tss.withParams().create(({
   theme,
   maxHeight
 }) => ({
@@ -7981,7 +8126,7 @@ function StepProgressCircle({
   const {
     classes,
     cx
-  } = useStyles$3({
+  } = useStyles$6({
     size,
     strokeWidth,
     variant
@@ -8039,7 +8184,7 @@ function StepProgressCircle({
   });
 }
 StepProgressCircle.displayName = "StepProgressCircle";
-const useStyles$3 = tss.withParams().create(({
+const useStyles$6 = tss.withParams().create(({
   theme,
   size,
   strokeWidth,
@@ -8109,7 +8254,7 @@ const ActionButton = function ActionButton({
   const {
     classes,
     cx
-  } = useStyles$2({
+  } = useStyles$5({
     size
   });
   const {
@@ -8141,7 +8286,7 @@ const ActionButton = function ActionButton({
   });
 };
 ActionButton.displayName = "ActionButton";
-const useStyles$2 = tss.withParams().create(({
+const useStyles$5 = tss.withParams().create(({
   theme,
   size
 }) => ({
@@ -8185,7 +8330,7 @@ const PressButton = function PressButton({
   const {
     classes,
     cx
-  } = useStyles$1({
+  } = useStyles$4({
     size
   });
   const {
@@ -8257,7 +8402,7 @@ const PressButton = function PressButton({
   });
 };
 PressButton.displayName = "PressButton";
-const useStyles$1 = tss.withParams().create(({
+const useStyles$4 = tss.withParams().create(({
   theme,
   size
 }) => ({
@@ -8436,7 +8581,7 @@ function ProductFormListComponent({
   const {
     classes,
     cx
-  } = useStyles({
+  } = useStyles$3({
     maxHeight
   });
   useAutoScrollInput(editDialogOpen);
@@ -8656,7 +8801,7 @@ function ProductFormListComponent({
 }
 ProductFormListComponent.displayName = "ProductFormList";
 const ProductFormList = /*#__PURE__*/memo(ProductFormListComponent);
-const useStyles = tss.withParams().create(({
+const useStyles$3 = tss.withParams().create(({
   theme,
   maxHeight
 }) => ({
@@ -8738,6 +8883,673 @@ const useStyles = tss.withParams().create(({
   }
 }));
 
+const TIMESTAMP_FORMAT$2 = "MM/DD/YYYY, hh:mm:ss A";
+const CalibrationFooter = function CalibrationFooter({
+  primaryLabel,
+  onPrimaryAction,
+  isLoading = false,
+  loadingLabel,
+  disabled = false,
+  onCancel,
+  cancelLabel,
+  lastCompletedAt,
+  completedLabelPrefix,
+  neverCompletedLabel,
+  className,
+  sx,
+  "data-testid": dataTestId = "calibration-footer"
+}) {
+  const {
+    classes,
+    cx
+  } = useStyles$2();
+  const {
+    t
+  } = useTranslation();
+  const resolvedLoadingLabel = loadingLabel !== null && loadingLabel !== void 0 ? loadingLabel : t("calibration.footer.loading", {
+    defaultValue: "Working..."
+  });
+  const resolvedCancelLabel = cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("calibration.footer.cancel", {
+    defaultValue: "Cancel"
+  });
+  const resolvedNeverCompletedLabel = neverCompletedLabel !== null && neverCompletedLabel !== void 0 ? neverCompletedLabel : t("calibration.footer.neverCompleted", {
+    defaultValue: "Not calibrated yet"
+  });
+  const resolvedCompletedPrefix = completedLabelPrefix !== null && completedLabelPrefix !== void 0 ? completedLabelPrefix : t("calibration.footer.lastCompleted", {
+    defaultValue: "Last calibrated"
+  });
+  const showCancel = isLoading && typeof onCancel === "function";
+  return jsxs(Box, {
+    className: cx(classes.root, className),
+    sx: sx,
+    "data-testid": dataTestId,
+    children: [jsxs(Box, {
+      className: classes.buttonRow,
+      children: [showCancel ? jsx(VentionButton, {
+        onClick: onCancel,
+        variant: "outline",
+        size: "large",
+        "data-testid": `${dataTestId}-cancel`,
+        children: resolvedCancelLabel
+      }) : null, jsx(VentionButton, {
+        onClick: onPrimaryAction,
+        disabled: disabled || isLoading,
+        variant: "filled",
+        size: "large",
+        startIcon: isLoading ? jsx(CircularProgress, {
+          size: 16,
+          color: "inherit"
+        }) : undefined,
+        "data-testid": `${dataTestId}-primary`,
+        children: isLoading ? resolvedLoadingLabel : primaryLabel
+      })]
+    }), jsx(Box, {
+      className: classes.statusRow,
+      "data-testid": `${dataTestId}-status`,
+      children: lastCompletedAt ? jsxs(Fragment, {
+        children: [jsx(VentionIcon, {
+          type: "circle-check-filled",
+          size: 20,
+          color: "status.success"
+        }), jsxs(Typography, {
+          variant: "uiText14SemiBold",
+          className: classes.statusText,
+          children: [resolvedCompletedPrefix, " ", dayjs(lastCompletedAt).format(TIMESTAMP_FORMAT$2)]
+        })]
+      }) : jsx(Typography, {
+        variant: "uiText14SemiBold",
+        className: classes.statusTextMuted,
+        children: resolvedNeverCompletedLabel
+      })
+    })]
+  });
+};
+CalibrationFooter.displayName = "CalibrationFooter";
+const useStyles$2 = tss.create(({
+  theme
+}) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(2)
+  },
+  buttonRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2)
+  },
+  statusRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  },
+  statusText: {
+    color: theme.palette.text.primary
+  },
+  statusTextMuted: {
+    color: theme.palette.text.secondary
+  }
+}));
+
+// MQTT topics for calibration progress events.
+//
+// These topics are the contract between `griip_sdk` (which publishes via
+// paho-mqtt) and this React library (which subscribes via @vention/machine-logic-ui-sdk).
+// Keep this file and `griip_sdk/calibration/mqtt_topics.py` in sync.
+const HAND_EYE_PROGRESS_TOPIC = "griip/calibration/hand_eye/progress";
+const ENVIRONMENT_PROGRESS_TOPIC = "griip/calibration/environment/progress";
+
+const TIMESTAMP_FORMAT$1 = "MM/DD/YYYY, hh:mm:ss A";
+const MQTT_STATUS_TO_PROGRESS = {
+  in_progress: "running",
+  success: "success",
+  error: "error",
+  cancelled: "cancelled"
+};
+function mqttMessageToProgress(message) {
+  return {
+    percent: message.percentage,
+    status: MQTT_STATUS_TO_PROGRESS[message.status],
+    message: message.message
+  };
+}
+const STATUS_ALERT = {
+  error: {
+    severity: "error",
+    testId: "calibration-hand-eye-page-error"
+  },
+  success: {
+    severity: "success",
+    testId: "calibration-hand-eye-page-success"
+  },
+  cancelled: {
+    severity: "info",
+    testId: "calibration-hand-eye-page-cancelled"
+  }
+};
+const CalibrationHandEyePage = function CalibrationHandEyePage({
+  onCalibrate,
+  onCancel,
+  progress,
+  lastCalibrationAt,
+  forceShowStart = false,
+  disabled = false,
+  error,
+  onError,
+  onVerify,
+  className,
+  sx
+}) {
+  var _a, _b, _c;
+  const {
+    classes,
+    cx
+  } = useStyles$1();
+  const {
+    t
+  } = useTranslation();
+  const [verifyResult, setVerifyResult] = useState(null);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [isCancelling, setIsCancelling] = useState(false);
+  const [internalError, setInternalError] = useState(null);
+  // Subscribe to live progress from griip-sdk. If the consumer wraps the app
+  // with <MqttProvider> from @vention/machine-logic-ui-sdk, the SDK's
+  // run_hand_eye_calibration ticks land here automatically. Consumers that
+  // would rather drive progress directly can pass the `progress` prop — it
+  // wins over the MQTT-derived value.
+  const mqttMessage = useMqttSubscription({
+    topic: HAND_EYE_PROGRESS_TOPIC,
+    unsubscribeOnUnmount: true
+  });
+  const effectiveProgress = progress !== null && progress !== void 0 ? progress : mqttMessage ? mqttMessageToProgress(mqttMessage) : undefined;
+  const status = (_a = effectiveProgress === null || effectiveProgress === void 0 ? void 0 : effectiveProgress.status) !== null && _a !== void 0 ? _a : "idle";
+  // `forceShowStart` lets the consumer escape a stale "running" MQTT message
+  // (e.g. on page refresh after a previous run completed but the broker is
+  // retaining the last progress payload).
+  const isRunning = !forceShowStart && status === "running";
+  const isCalibrated = Boolean(lastCalibrationAt);
+  const percent = Math.max(0, Math.min(100, Math.round((_b = effectiveProgress === null || effectiveProgress === void 0 ? void 0 : effectiveProgress.percent) !== null && _b !== void 0 ? _b : 0)));
+  const displayedError = error !== null && error !== void 0 ? error : internalError;
+  const statusAlert = STATUS_ALERT[status];
+  const reportError = raw => {
+    const err = raw instanceof Error ? raw : new Error(String(raw));
+    setInternalError(err.message);
+    onError === null || onError === void 0 ? void 0 : onError(err);
+  };
+  const handleCalibrate = () => __awaiter(this, void 0, void 0, function* () {
+    setInternalError(null);
+    try {
+      yield onCalibrate();
+    } catch (raw) {
+      reportError(raw);
+    }
+  });
+  const handleCancel = () => __awaiter(this, void 0, void 0, function* () {
+    setIsCancelling(true);
+    try {
+      yield onCancel();
+    } catch (raw) {
+      reportError(raw);
+    } finally {
+      setIsCancelling(false);
+    }
+  });
+  const handleVerify = () => __awaiter(this, void 0, void 0, function* () {
+    if (!onVerify) return;
+    setIsVerifying(true);
+    try {
+      const result = yield onVerify();
+      setVerifyResult(result);
+    } catch (raw) {
+      reportError(raw);
+    } finally {
+      setIsVerifying(false);
+    }
+  });
+  const verifyFailing = (verifyResult === null || verifyResult === void 0 ? void 0 : verifyResult.isValid) === false;
+  return jsxs(Box, {
+    className: cx(classes.container, className),
+    sx: sx,
+    "data-testid": "calibration-hand-eye-page",
+    children: [verifyFailing ? jsxs(Box, {
+      className: classes.verificationWarning,
+      "data-testid": "calibration-hand-eye-page-verify-warning",
+      children: [jsx(VentionIcon, {
+        type: "alert-triangle-filled",
+        size: 20,
+        color: "inherit"
+      }), jsx(Typography, {
+        variant: "uiText14SemiBold",
+        children: verifyResult === null || verifyResult === void 0 ? void 0 : verifyResult.message
+      })]
+    }) : null, displayedError ? jsx(Alert, {
+      severity: "error",
+      className: classes.alert,
+      "data-testid": "calibration-hand-eye-page-error-alert",
+      children: displayedError
+    }) : null, isRunning ? jsxs(Fragment, {
+      children: [jsxs(Box, {
+        className: classes.progressBlock,
+        "data-testid": "calibration-hand-eye-page-progress",
+        children: [jsx(LinearProgress, {
+          variant: "determinate",
+          value: percent,
+          className: classes.progressBar
+        }), jsx(Typography, {
+          variant: "hmiText20SemiBold",
+          className: classes.progressLabel,
+          children: (_c = effectiveProgress === null || effectiveProgress === void 0 ? void 0 : effectiveProgress.message) !== null && _c !== void 0 ? _c : t("calibration.handEye.calibrate.running", {
+            defaultValue: "{{percent}}% Completed",
+            percent
+          })
+        })]
+      }), jsx(VentionButton, {
+        variant: "filled",
+        size: "x-large",
+        onClick: handleCancel,
+        className: classes.primaryButton,
+        disabled: isCancelling,
+        startIcon: isCancelling ? jsx(CircularProgress, {
+          size: 16,
+          color: "inherit"
+        }) : undefined,
+        "data-testid": "calibration-hand-eye-page-cancel",
+        children: isCancelling ? t("calibration.handEye.calibrate.cancelling", {
+          defaultValue: "Cancelling..."
+        }) : t("calibration.handEye.calibrate.cancel", {
+          defaultValue: "Cancel calibration"
+        })
+      })]
+    }) : jsxs(Fragment, {
+      children: [jsx(VentionButton, {
+        variant: "filled",
+        size: "x-large",
+        onClick: handleCalibrate,
+        className: classes.primaryButton,
+        disabled: disabled || isVerifying,
+        startIcon: isCalibrated ? jsx(VentionIcon, {
+          type: "refresh",
+          size: 24,
+          color: "white"
+        }) : undefined,
+        "data-testid": "calibration-hand-eye-page-calibrate",
+        children: isCalibrated ? t("calibration.handEye.calibrate.update", {
+          defaultValue: "Update calibration"
+        }) : t("calibration.handEye.calibrate.calibrate", {
+          defaultValue: "Calibrate"
+        })
+      }), onVerify && isCalibrated ? jsx(VentionButton, {
+        variant: "outline",
+        size: "x-large",
+        onClick: handleVerify,
+        className: classes.primaryButton,
+        disabled: disabled || isVerifying,
+        startIcon: isVerifying ? jsx(CircularProgress, {
+          size: 16,
+          color: "inherit"
+        }) : undefined,
+        "data-testid": "calibration-hand-eye-page-verify",
+        children: isVerifying ? t("calibration.handEye.verify.loading", {
+          defaultValue: "Verifying..."
+        }) : t("calibration.handEye.verify.action", {
+          defaultValue: "Verify calibration"
+        })
+      }) : null, statusAlert && (effectiveProgress === null || effectiveProgress === void 0 ? void 0 : effectiveProgress.message) && !(status === "error" && displayedError) ? jsx(Alert, {
+        severity: statusAlert.severity,
+        className: classes.alert,
+        "data-testid": statusAlert.testId,
+        children: effectiveProgress.message
+      }) : null, jsx(Typography, {
+        variant: "hmiText20SemiBold",
+        className: classes.statusText,
+        "data-testid": "calibration-hand-eye-page-status",
+        children: isCalibrated && lastCalibrationAt ? t("calibration.handEye.calibrate.lastCalibratedOn", {
+          defaultValue: "Calibrated on {{date}}",
+          date: dayjs(lastCalibrationAt).format(TIMESTAMP_FORMAT$1)
+        }) : t("calibration.handEye.calibrate.never", {
+          defaultValue: "Not calibrated"
+        })
+      })]
+    })]
+  });
+};
+CalibrationHandEyePage.displayName = "CalibrationHandEyePage";
+const useStyles$1 = tss.create(({
+  theme
+}) => ({
+  container: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    minHeight: 480,
+    gap: theme.spacing(2),
+    padding: theme.spacing(4),
+    borderRadius: theme.spacing(2),
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper
+  },
+  verificationWarning: {
+    position: "absolute",
+    top: theme.spacing(3),
+    left: theme.spacing(3),
+    right: theme.spacing(3),
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.spacing(1),
+    backgroundColor: theme.palette.warning.light,
+    color: theme.palette.warning.dark
+  },
+  primaryButton: {
+    width: 400
+  },
+  progressBlock: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+    width: "100%",
+    maxWidth: 900,
+    marginBottom: theme.spacing(2)
+  },
+  progressBar: {
+    height: 32,
+    borderRadius: 8
+  },
+  progressLabel: {
+    color: theme.palette.text.primary
+  },
+  alert: {
+    width: 400
+  },
+  statusText: {
+    color: theme.palette.text.secondary
+  }
+}));
+
+const TIMESTAMP_FORMAT = "MM/DD/YYYY, hh:mm:ss A";
+const CalibrationEnvironmentPage = function CalibrationEnvironmentPage({
+  onStartSession,
+  onTakePhoto,
+  onEndSession,
+  sessionName,
+  photoCount,
+  lastPhotoAt,
+  isError = false,
+  errorMessage,
+  isBusy = false,
+  illustration,
+  helperText,
+  topAlertTitle,
+  className,
+  sx
+}) {
+  var _a, _b;
+  const {
+    classes,
+    cx
+  } = useStyles({
+    isError
+  });
+  const {
+    t
+  } = useTranslation();
+  // Subscribe to live progress from griip-sdk. Props win over MQTT-derived
+  // values so consumers can still drive state directly when MQTT isn't in
+  // play (e.g. Storybook, tests).
+  const mqttMessage = useMqttSubscription({
+    topic: ENVIRONMENT_PROGRESS_TOPIC,
+    unsubscribeOnUnmount: true
+  });
+  const effectiveSessionName = (_a = sessionName !== null && sessionName !== void 0 ? sessionName : mqttMessage === null || mqttMessage === void 0 ? void 0 : mqttMessage.sessionName) !== null && _a !== void 0 ? _a : null;
+  const effectivePhotoCount = (_b = photoCount !== null && photoCount !== void 0 ? photoCount : mqttMessage === null || mqttMessage === void 0 ? void 0 : mqttMessage.photoCount) !== null && _b !== void 0 ? _b : 0;
+  const effectiveIsError = isError || (mqttMessage === null || mqttMessage === void 0 ? void 0 : mqttMessage.status) === "error";
+  const effectiveErrorMessage = errorMessage !== null && errorMessage !== void 0 ? errorMessage : (mqttMessage === null || mqttMessage === void 0 ? void 0 : mqttMessage.status) === "error" ? mqttMessage.message : undefined;
+  const sessionActive = Boolean(effectiveSessionName);
+  const resolvedHelperText = helperText !== null && helperText !== void 0 ? helperText : t("calibration.environment.helper", {
+    defaultValue: "Enable free drive and move the robot to take photos covering the entire environment, including walls, bins, machines."
+  });
+  const resolvedTopAlert = topAlertTitle !== null && topAlertTitle !== void 0 ? topAlertTitle : t("calibration.environment.topAlert", {
+    defaultValue: "Before starting environment calibration, please contact Vention's team for assistance."
+  });
+  return jsxs(Box, {
+    className: cx(classes.container, className),
+    sx: sx,
+    "data-testid": "calibration-environment-page",
+    children: [jsx(Alert, {
+      severity: "warning",
+      className: classes.alertBanner,
+      "data-testid": "calibration-environment-page-instructions",
+      children: resolvedTopAlert
+    }), jsx(Box, {
+      className: classes.card,
+      children: effectiveIsError ? jsxs(Box, {
+        className: classes.errorContent,
+        "data-testid": "calibration-environment-page-error",
+        children: [jsx(VentionIcon, {
+          type: "circle-x-filled",
+          size: 48,
+          color: "status.destructive"
+        }), jsx(Typography, {
+          variant: "hmiText28SemiBold",
+          className: classes.errorTitle,
+          children: effectiveErrorMessage !== null && effectiveErrorMessage !== void 0 ? effectiveErrorMessage : t("calibration.environment.error", {
+            defaultValue: "Environment scan failed. Reset the bin and retry."
+          })
+        })]
+      }) : jsxs(Box, {
+        className: classes.normalContent,
+        children: [jsxs(Box, {
+          className: classes.illustrationBlock,
+          children: [illustration !== null && illustration !== void 0 ? illustration : jsx(Box, {
+            className: classes.illustrationPlaceholder,
+            "aria-hidden": true
+          }), jsx(Typography, {
+            variant: "hmiText20SemiBold",
+            className: classes.helperText,
+            children: resolvedHelperText
+          })]
+        }), jsx(Box, {
+          className: classes.buttonColumn,
+          children: !sessionActive ? jsx(VentionButton, {
+            variant: "filled",
+            size: "x-large",
+            fullWidth: true,
+            onClick: onStartSession,
+            disabled: isBusy,
+            startIcon: isBusy ? jsx(CircularProgress, {
+              size: 16,
+              color: "inherit"
+            }) : jsx(VentionIcon, {
+              type: "camera",
+              size: 24,
+              color: "white"
+            }),
+            "data-testid": "calibration-environment-page-start-session",
+            children: isBusy ? t("calibration.environment.starting", {
+              defaultValue: "Starting..."
+            }) : t("calibration.environment.startSession", {
+              defaultValue: "Start new session"
+            })
+          }) : jsxs(Fragment, {
+            children: [jsxs(Box, {
+              className: classes.sessionLine,
+              children: [jsx(VentionIcon, {
+                type: "folder-open",
+                size: 20,
+                color: "status.info"
+              }), jsxs(Typography, {
+                variant: "uiText14SemiBold",
+                className: classes.sessionName,
+                children: [t("calibration.environment.sessionLabel", {
+                  defaultValue: "Session"
+                }), ": ", effectiveSessionName]
+              })]
+            }), jsxs(Box, {
+              className: classes.sessionButtonRow,
+              children: [jsx(VentionButton, {
+                variant: "filled",
+                size: "x-large",
+                onClick: onTakePhoto,
+                disabled: isBusy,
+                startIcon: isBusy ? jsx(CircularProgress, {
+                  size: 16,
+                  color: "inherit"
+                }) : jsx(VentionIcon, {
+                  type: "camera",
+                  size: 24,
+                  color: "white"
+                }),
+                "data-testid": "calibration-environment-page-take-photo",
+                sx: {
+                  flex: 2,
+                  whiteSpace: "nowrap"
+                },
+                children: t("calibration.environment.takePhoto", {
+                  defaultValue: "Take photo"
+                })
+              }), jsx(VentionButton, {
+                variant: "outline",
+                size: "x-large",
+                onClick: onEndSession,
+                disabled: isBusy,
+                "data-testid": "calibration-environment-page-end-session",
+                sx: {
+                  flex: 1,
+                  whiteSpace: "nowrap"
+                },
+                children: t("calibration.environment.endSession", {
+                  defaultValue: "End session"
+                })
+              })]
+            }), jsxs(Box, {
+              className: classes.statusLine,
+              "data-testid": "calibration-environment-page-status",
+              children: [jsx(VentionIcon, {
+                type: "circle-check-filled",
+                size: 20,
+                color: "status.success"
+              }), jsxs(Typography, {
+                variant: "uiText14SemiBold",
+                className: classes.statusText,
+                children: [effectivePhotoCount > 0 ? t("calibration.environment.photoCount", {
+                  defaultValue: "{{count}} photo(s) saved",
+                  count: effectivePhotoCount
+                }) : t("calibration.environment.noPhotos", {
+                  defaultValue: "No photos captured yet"
+                }), lastPhotoAt ? " — " + t("calibration.environment.lastPhotoAt", {
+                  defaultValue: "last on {{date}}",
+                  date: dayjs(lastPhotoAt).format(TIMESTAMP_FORMAT)
+                }) : ""]
+              })]
+            })]
+          })
+        })]
+      })
+    })]
+  });
+};
+CalibrationEnvironmentPage.displayName = "CalibrationEnvironmentPage";
+const useStyles = tss.withParams().create(({
+  theme,
+  isError
+}) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    gap: theme.spacing(3)
+  },
+  alertBanner: {
+    width: "100%",
+    flexShrink: 0
+  },
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "stretch",
+    flex: 1,
+    minHeight: 480,
+    padding: theme.spacing(5),
+    gap: theme.spacing(5),
+    borderRadius: theme.spacing(2),
+    border: `1px solid ${isError ? theme.palette.error.light : theme.palette.divider}`,
+    backgroundColor: isError ? theme.palette.error.light : theme.palette.background.paper
+  },
+  errorContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(3),
+    height: "100%"
+  },
+  errorTitle: {
+    textAlign: "center",
+    color: theme.palette.text.primary
+  },
+  normalContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(5)
+  },
+  illustrationBlock: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(3),
+    maxWidth: 640
+  },
+  illustrationPlaceholder: {
+    width: 320,
+    height: 180,
+    borderRadius: theme.spacing(1),
+    backgroundColor: theme.palette.action.hover,
+    backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 12px, ${theme.palette.divider} 12px, ${theme.palette.divider} 13px)`
+  },
+  helperText: {
+    textAlign: "center",
+    color: theme.palette.text.primary
+  },
+  buttonColumn: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    width: 520,
+    maxWidth: "100%"
+  },
+  sessionLine: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  },
+  sessionName: {
+    color: theme.palette.primary.main
+  },
+  sessionButtonRow: {
+    display: "flex",
+    gap: theme.spacing(2),
+    width: "100%"
+  },
+  statusLine: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  },
+  statusText: {
+    color: theme.palette.text.secondary
+  }
+}));
+
 var UserLevel;
 (function (UserLevel) {
   UserLevel[UserLevel["Operator"] = 1] = "Operator";
@@ -10999,4 +11811,4 @@ function getApiBaseUrl(options) {
   return getExecutionEngineHttpUrl(processName);
 }
 
-export { ActionButton, FileUploadPanel, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, PressButton, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };
+export { ActionButton, CalibrationEnvironmentPage, CalibrationFooter, CalibrationHandEyePage, ENVIRONMENT_PROGRESS_TOPIC, FileUploadPanel, HAND_EYE_PROGRESS_TOPIC, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, PressButton, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };