@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.56785bf → 2.33.0-pr.feature-robot-precondition-list.372.c924328

package/dist/themes/createDarkTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CAgSvC"}
+{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CA0WvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.33.0-pr.feature-robot-precondition-list.372.56785bf",
+  "version": "2.33.0-pr.feature-robot-precondition-list.372.c924328",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/{AppTopBar.md → AppHeader.md}

@@ -1,6 +1,6 @@
-# AppTopBar Component
+# AppHeader Component
 
-A navigation bar component that displays the current application's icon and name, with an optional dropdown menu for switching between different applications.
+A navigation header component that displays the current application's icon and name, with an optional dropdown menu for switching between different applications.
 
 ## Features
 
@@ -14,7 +14,7 @@ A navigation bar component that displays the current application's icon and name
 
 ```tsx
 import {
-  AppTopBar,
+  AppHeader,
   type AppItem,
 } from "@wandelbots/wandelbots-js-react-components"
 import { Home, Settings, Person } from "@mui/icons-material"
@@ -36,7 +36,7 @@ const apps: AppItem[] = [
 
 function MyApp() {
   return (
-    <AppTopBar
+    <AppHeader
       appIcon={<Person />}
       appName="Robot Control Studio"
       apps={apps}
@@ -48,7 +48,7 @@ function MyApp() {
 
 ## Props
 
-### AppTopBarProps
+### AppHeaderProps
 
 - **appIcon** (`ReactNode`): Icon component for the current application
 - **appName** (`string`): Display name of the current application

package/src/components/{AppTopBar.tsx → AppHeader.tsx}

@@ -28,7 +28,7 @@ export type AppItem = {
   onClick?: () => void
 }
 
-export type AppTopBarProps = {
+export type AppHeaderProps = {
   /** Current app icon */
   appIcon: ReactNode
   /** Current app name */
@@ -42,11 +42,11 @@ export type AppTopBarProps = {
 }
 
 /**
- * A top navigation bar component that displays the current app and provides
+ * A top navigation header component that displays the current app and provides
  * a dropdown menu to navigate to other apps.
  */
-export const AppTopBar = externalizeComponent(
-  observer((props: AppTopBarProps) => {
+export const AppHeader = externalizeComponent(
+  observer((props: AppHeaderProps) => {
     const { appIcon, appName, apps = [], onAppSelect, sx } = props
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
     const isMenuOpen = Boolean(anchorEl)
@@ -73,7 +73,18 @@ export const AppTopBar = externalizeComponent(
 
     return (
       <>
-        <AppBar position="static" sx={sx}>
+        <AppBar
+          position="static"
+          sx={{
+            boxShadow: "none",
+            backgroundImage: "none",
+            "& .MuiAppBar-root": {
+              backgroundImage: "none",
+              backgroundColor: "transparent",
+            },
+            ...sx,
+          }}
+        >
           <Toolbar sx={{ minHeight: "64px !important" }}>
             {/* App Icon */}
             <Box sx={{ mr: 2, display: "flex", alignItems: "center" }}>

package/src/components/DataGrid.tsx

@@ -65,7 +65,7 @@ export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
 
   /**
    * Placeholder text for the search input
-   * @default "Search"
+   * @default "Search programs"
    */
   searchPlaceholder?: string
 
@@ -102,7 +102,7 @@ export const WandelbotsDataGrid = externalizeComponent(
       getItemId,
       title,
       showCount = true,
-      searchPlaceholder = "Search",
+      searchPlaceholder = "Search programs",
       dataGridProps,
       CustomToolbar,
       selectFirstByDefault = false,
@@ -185,7 +185,7 @@ export const WandelbotsDataGrid = externalizeComponent(
                 display: "flex",
                 width: "100%",
                 gap: 1,
-                p: 1,
+                p: 0.5,
                 alignItems: "center",
               }}
             >
@@ -205,8 +205,9 @@ export const WandelbotsDataGrid = externalizeComponent(
                 sx={{
                   ml: "auto",
                   display: "flex",
-                  gap: 1,
+                  gap: 0.5,
                   alignItems: "center",
+                  pr: 1,
                 }}
               >
                 <FilterPanelTrigger
@@ -233,12 +234,7 @@ export const WandelbotsDataGrid = externalizeComponent(
                         overflow: "hidden",
                       }}
                     >
-                      <Box
-                        sx={{
-                          borderRadius: state.expanded ? "4px 0 0 4px" : "4px",
-                          borderRight: state.expanded ? "none" : undefined,
-                        }}
-                      >
+                      {!state.expanded && (
                         <QuickFilterTrigger
                           render={
                             <ToolbarButton aria-label="Search">
@@ -246,36 +242,147 @@ export const WandelbotsDataGrid = externalizeComponent(
                             </ToolbarButton>
                           }
                         />
-                      </Box>
+                      )}
                       <Box
                         sx={{
                           display: "flex",
                           overflow: "hidden",
                           transition: "all 0.3s ease-in-out",
-                          width: state.expanded ? "192px" : "0px",
+                          width: state.expanded ? "200px" : "0px",
+                          position: "relative",
                         }}
                       >
                         <Box
                           sx={{
                             flex: 1,
+                            position: "relative",
                             "& .MuiInputBase-root": {
                               height: "32px",
-                              borderRadius:
+                              borderRadius: "16px",
+                              backgroundColor: "#171927",
+                              paddingLeft: "40px",
+                              paddingRight:
                                 state.expanded && state.value !== ""
-                                  ? "0"
-                                  : "0 4px 4px 0",
+                                  ? "40px"
+                                  : "12px",
+                              color: "white",
+                              fontSize: "14px",
+                              border: "none !important",
+                              outline: "none !important",
+                              boxShadow: "none !important",
+                              "&::before": {
+                                display: "none !important",
+                                border: "none !important",
+                              },
+                              "&::after": {
+                                display: "none !important",
+                                border: "none !important",
+                              },
+                              "&:hover": {
+                                "&::before": {
+                                  display: "none !important",
+                                  border: "none !important",
+                                },
+                                "&::after": {
+                                  display: "none !important",
+                                  border: "none !important",
+                                },
+                              },
+                              "&:focus-within": {
+                                outline: "none !important",
+                                boxShadow: "none !important",
+                                "&::before": {
+                                  display: "none !important",
+                                  border: "none !important",
+                                },
+                                "&::after": {
+                                  display: "none !important",
+                                  border: "none !important",
+                                },
+                              },
+                              "&.Mui-focused": {
+                                outline: "none !important",
+                                boxShadow: "none !important",
+                                "&::before": {
+                                  display: "none !important",
+                                  border: "none !important",
+                                },
+                                "&::after": {
+                                  display: "none !important",
+                                  border: "none !important",
+                                },
+                              },
+                              "& .MuiInputBase-input": {
+                                padding: "8px 0",
+                                border: "none !important",
+                                outline: "none !important",
+                                boxShadow: "none !important",
+                                "&:focus": {
+                                  outline: "none !important",
+                                  boxShadow: "none !important",
+                                  border: "none !important",
+                                },
+                                "&::placeholder": {
+                                  color: "rgba(255, 255, 255, 0.3)",
+                                  opacity: 1,
+                                },
+                              },
+                              "& fieldset": {
+                                border: "none !important",
+                                display: "none !important",
+                              },
+                              "& .MuiOutlinedInput-notchedOutline": {
+                                border: "none !important",
+                                display: "none !important",
+                              },
                             },
                           }}
                         >
+                          {state.expanded && (
+                            <SearchIcon
+                              fontSize="small"
+                              sx={{
+                                position: "absolute",
+                                left: "12px",
+                                top: "50%",
+                                transform: "translateY(-50%)",
+                                color: "rgba(255, 255, 255, 0.6)",
+                                zIndex: 1,
+                                pointerEvents: "none",
+                              }}
+                            />
+                          )}
                           <QuickFilterControl placeholder={searchPlaceholder} />
                         </Box>
                         {state.expanded && state.value !== "" && (
                           <QuickFilterClear
                             render={
-                              <Box sx={{ borderRadius: "0 4px 4px 0" }}>
-                                <ToolbarButton aria-label="Clear">
-                                  <ClearIcon fontSize="small" />
-                                </ToolbarButton>
+                              <Box
+                                sx={{
+                                  position: "absolute",
+                                  right: "8px",
+                                  top: "50%",
+                                  transform: "translateY(-50%)",
+                                  zIndex: 1,
+                                }}
+                              >
+                                <Box
+                                  sx={{
+                                    minWidth: "24px",
+                                    width: "24px",
+                                    height: "24px",
+                                    padding: 0,
+                                    color: "rgba(255, 255, 255, 0.6)",
+                                    "&:hover": {
+                                      backgroundColor:
+                                        "rgba(255, 255, 255, 0.1)",
+                                    },
+                                  }}
+                                >
+                                  <ToolbarButton aria-label="Clear">
+                                    <ClearIcon fontSize="small" />
+                                  </ToolbarButton>
+                                </Box>
                               </Box>
                             }
                           />
@@ -298,6 +405,33 @@ export const WandelbotsDataGrid = externalizeComponent(
             height: "100%",
             display: "flex",
             flexDirection: "column",
+            // Apply scrollbar styling like in the theme
+            "& *": {
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none",
+              },
+            },
+            "&:hover *": {
+              scrollbarWidth: "thin",
+              scrollbarColor: `${theme.palette.divider} transparent`,
+              "&::-webkit-scrollbar": {
+                display: "block",
+                width: "8px",
+                height: "8px",
+              },
+              "&::-webkit-scrollbar-track": {
+                background: "transparent",
+              },
+              "&::-webkit-scrollbar-thumb": {
+                background: theme.palette.divider,
+                borderRadius: "4px",
+              },
+              "&::-webkit-scrollbar-thumb:hover": {
+                background: theme.palette.action.hover,
+              },
+            },
             ...sx,
           }}
         >
@@ -371,7 +505,10 @@ export const WandelbotsDataGrid = externalizeComponent(
                 border: "none",
                 margin: "1px 0",
                 position: "relative",
+                // Disable all default MUI hover effects
+                backgroundColor: "transparent !important",
                 "&:hover": {
+                  backgroundColor: "transparent !important",
                   "&::before": {
                     content: '""',
                     position: "absolute",
@@ -386,11 +523,15 @@ export const WandelbotsDataGrid = externalizeComponent(
                 },
                 // Disable MUI's built-in selection styling completely
                 "&.Mui-selected": {
-                  "&:hover": {},
+                  backgroundColor: "transparent !important",
+                  "&:hover": {
+                    backgroundColor: "transparent !important",
+                  },
                 },
                 // Highlight selected row with a distinct color using data attribute
                 ...(selectedRowId !== null && {
                   [`&[data-id="${selectedRowId}"]`]: {
+                    backgroundColor: "transparent !important",
                     "&::before": {
                       content: '""',
                       position: "absolute",
@@ -402,6 +543,9 @@ export const WandelbotsDataGrid = externalizeComponent(
                       borderRadius: "16px",
                       zIndex: 0,
                     },
+                    "&:hover": {
+                      backgroundColor: "transparent !important",
+                    },
                     "&:hover::before": {
                       backgroundColor: "rgba(255, 255, 255, 0.12) !important",
                     },
@@ -421,6 +565,9 @@ export const WandelbotsDataGrid = externalizeComponent(
                 "&:focus-within": {
                   outline: "none",
                 },
+                "&:hover": {
+                  backgroundColor: "transparent !important",
+                },
               },
               "& .MuiDataGrid-columnHeader": {
                 border: "none",

package/src/components/LogStore.ts

@@ -37,4 +37,8 @@ export class LogStore {
   addError = (message: string) => {
     this.addMessage(message, "error")
   }
+
+  addDebug = (message: string) => {
+    this.addMessage(message, "debug")
+  }
 }

package/src/components/LogViewer.tsx

@@ -17,7 +17,7 @@ import { observer } from "mobx-react-lite"
 import { useEffect, useRef, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
 
-export type LogLevel = "info" | "error" | "warning"
+export type LogLevel = "info" | "error" | "warning" | "debug"
 
 export type LogMessage = {
   id: string
@@ -37,6 +37,46 @@ export type LogViewerProps = {
   sx?: SxProps
 }
 
+/**
+ * Utility function to create a log message
+ */
+export const createLogMessage = (
+  message: string,
+  level: LogLevel,
+  id?: string,
+): LogMessage => ({
+  id: id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+  timestamp: new Date(),
+  message,
+  level,
+})
+
+/**
+ * Utility function to create a debug log message
+ */
+export const createDebugMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "debug", id)
+
+/**
+ * Utility function to create an info log message
+ */
+export const createInfoMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "info", id)
+
+/**
+ * Utility function to create a warning log message
+ */
+export const createWarningMessage = (
+  message: string,
+  id?: string,
+): LogMessage => createLogMessage(message, "warning", id)
+
+/**
+ * Utility function to create an error log message
+ */
+export const createErrorMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "error", id)
+
 /**
  * A log viewer component that displays timestamped log messages with different levels.
  * Features a header with document icon and clear button, and scrollable message area.
@@ -79,6 +119,9 @@ export const LogViewer = externalizeComponent(
         case "warning":
           return theme.palette.warning.main
         case "info":
+          return theme.palette.info.main
+        case "debug":
+          return theme.palette.text.disabled
         default:
           return theme.palette.text.secondary
       }
@@ -285,6 +328,22 @@ export const LogViewer = externalizeComponent(
             display: "flex",
             flexDirection: "column",
             gap: "2px",
+            // Custom scrollbar styling to keep it consistently dark
+            scrollbarWidth: "thin",
+            scrollbarColor: `${theme.palette.divider} transparent`,
+            "&::-webkit-scrollbar": {
+              width: "6px",
+            },
+            "&::-webkit-scrollbar-track": {
+              background: "transparent",
+            },
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: theme.palette.divider,
+              borderRadius: "3px",
+              "&:hover": {
+                backgroundColor: theme.palette.divider,
+              },
+            },
           }}
         >
           {messages.length === 0 ? (

package/src/components/ProgramControl.tsx

@@ -9,6 +9,7 @@ export enum ProgramState {
   RUNNING = "running",
   PAUSED = "paused",
   STOPPING = "stopping",
+  ERROR = "error",
 }
 
 export interface ProgramControlProps {
@@ -51,7 +52,7 @@ interface ButtonConfig {
  * A control component for program execution with run, pause, and stop functionality.
  *
  * Features:
- * - State machine with idle, running, paused, and stopping states
+ * - State machine with idle, running, paused, stopping, and error states
  * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
  * - Optional manual reset functionality
  * - Responsive design with 110px circular buttons
@@ -76,11 +77,15 @@ export const ProgramControl = externalizeComponent(
         const baseConfigs: Record<string, ButtonConfig> = {
           run: {
             enabled:
-              state === ProgramState.IDLE || state === ProgramState.PAUSED,
+              state === ProgramState.IDLE ||
+              state === ProgramState.PAUSED ||
+              state === ProgramState.ERROR,
             label:
               state === ProgramState.PAUSED
                 ? t("ProgramControl.Resume.bt")
-                : t("ProgramControl.Start.bt"),
+                : state === ProgramState.ERROR
+                  ? t("ProgramControl.Retry.bt")
+                  : t("ProgramControl.Start.bt"),
             color: theme.palette.success.main,
             onClick: onRun,
           },

package/src/components/ProgramStateIndicator.tsx

@@ -92,6 +92,11 @@ export const ProgramStateIndicator = externalizeComponent(
                 label: t("ProgramStateIndicator.Stopped.lb"),
                 color: theme.palette.error.main,
               }
+            case ProgramState.ERROR:
+              return {
+                label: t("ProgramStateIndicator.Error.lb"),
+                color: theme.palette.error.main,
+              }
             case ProgramState.IDLE:
             default:
               return {