@wandelbots/wandelbots-js-react-components 1.19.2 → 1.20.0

package/dist/themes/createDarkTheme.d.ts

@@ -0,0 +1,3 @@
+import { type Theme } from "@mui/material";
+export declare function createDarkTheme(): Theme;
+//# sourceMappingURL=createDarkTheme.d.ts.map

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

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

package/dist/themes/createLightTheme.d.ts

@@ -0,0 +1,2 @@
+export declare function createLightTheme(): import("@mui/material").Theme;
+//# sourceMappingURL=createLightTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createLightTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createLightTheme.ts"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,kCAK/B"}

package/dist/themes/themeTypes.d.ts

@@ -0,0 +1,74 @@
+type NovaColorPaletteExtension = {
+    paletteExt?: {
+        primary?: {
+            hover?: string;
+            selected?: string;
+            focus?: string;
+            focusVisible?: string;
+            outlineBorder?: string;
+        };
+        secondary?: {
+            tonal?: string;
+        };
+    };
+};
+export interface AxisControlComponentColors {
+    color?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    buttonBackgroundColor?: string;
+}
+interface NovaComponentsExtension {
+    componentsExt?: {
+        JoggingCartesian?: {
+            Axis?: {
+                X?: AxisControlComponentColors;
+                Y?: AxisControlComponentColors;
+                Z?: AxisControlComponentColors;
+            };
+        };
+    };
+}
+interface BackgroundPaperElevation {
+    0?: string;
+    1?: string;
+    2?: string;
+    3?: string;
+    4?: string;
+    5?: string;
+    6?: string;
+    7?: string;
+    8?: string;
+    9?: string;
+    10?: string;
+    11?: string;
+    12?: string;
+    13?: string;
+    14?: string;
+    15?: string;
+    16?: string;
+    17?: string;
+    18?: string;
+    19?: string;
+    20?: string;
+    21?: string;
+    22?: string;
+    23?: string;
+    24?: string;
+}
+declare module "@mui/material/styles" {
+    interface Palette {
+        tertiary: Palette["primary"];
+        backgroundPaperElevation?: BackgroundPaperElevation;
+    }
+    interface PaletteOptions {
+        tertiary?: PaletteOptions["primary"];
+        backgroundPaperElevation?: BackgroundPaperElevation;
+    }
+    interface Theme extends NovaComponentsExtension, NovaColorPaletteExtension {
+    }
+    interface ThemeOptions extends NovaComponentsExtension, NovaColorPaletteExtension {
+    }
+}
+export {};
+//# sourceMappingURL=themeTypes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"themeTypes.d.ts","sourceRoot":"","sources":["../../src/themes/themeTypes.ts"],"names":[],"mappings":"AAAA,KAAK,yBAAyB,GAAG;IAC/B,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE;YACR,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,QAAQ,CAAC,EAAE,MAAM,CAAA;YACjB,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,YAAY,CAAC,EAAE,MAAM,CAAA;YACrB,aAAa,CAAC,EAAE,MAAM,CAAA;SACvB,CAAA;QACD,SAAS,CAAC,EAAE;YACV,KAAK,CAAC,EAAE,MAAM,CAAA;SACf,CAAA;KACF,CAAA;CACF,CAAA;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,UAAU,uBAAuB;IAC/B,aAAa,CAAC,EAAE;QACd,gBAAgB,CAAC,EAAE;YACjB,IAAI,CAAC,EAAE;gBACL,CAAC,CAAC,EAAE,0BAA0B,CAAA;gBAC9B,CAAC,CAAC,EAAE,0BAA0B,CAAA;gBAC9B,CAAC,CAAC,EAAE,0BAA0B,CAAA;aAC/B,CAAA;SACF,CAAA;KACF,CAAA;CACF;AAED,UAAU,wBAAwB;IAChC,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;QAC5B,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;KACpD;IAED,UAAU,cAAc;QACtB,QAAQ,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;QACpC,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;KACpD;IAED,UAAU,KAAM,SAAQ,uBAAuB,EAAE,yBAAyB;KAAG;IAE7E,UAAU,YACR,SAAQ,uBAAuB,EAC7B,yBAAyB;KAAG;CACjC"}

package/dist/themes/theming.d.ts

@@ -1,34 +1,4 @@
 import type { Theme, ThemeOptions } from "@mui/material/styles";
-/**
- * Settings used to construct the Nova default theme.
- * The dark theme is the default and defines the structure of the
- * settings.
- */
-export declare const novaDarkSettings: {
-    mode: "dark" | "light";
-    colors: {
-        primary: string;
-        textDefault: string;
-        textSubtle: string;
-        background: {
-            default: string;
-            panel: string;
-        };
-    };
-};
-export type NovaThemeSettings = typeof novaDarkSettings;
-export declare const novaLightSettings: {
-    mode: "light";
-    colors: {
-        primary: string;
-        textDefault: string;
-        textSubtle: string;
-        background: {
-            default: string;
-            panel: string;
-        };
-    };
-};
 /**
  * Create the default Wandelbots Nova Material UI theme, overriding
  * any defaults with the provided theme options.

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

@@ -1 +1 @@
-{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src/themes/theming.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAwB/D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;UACX,MAAM,GAAG,OAAO;;;;;;;;;;CAUjC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,OAAO,gBAAgB,CAAA;AAEvD,eAAO,MAAM,iBAAiB;;;;;;;;;;;CAWD,CAAA;AAE7B;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,KAAK,CA4G5D"}
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src/themes/theming.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAI/D;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,KAAK,CAW5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.19.2",
+  "version": "1.20.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/SelectableFab.tsx

@@ -0,0 +1,47 @@
+import { Fab, styled, type FabProps } from "@mui/material"
+
+const StyledSelectableFab = styled(Fab, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<CodeFabProps>(({ theme }) => ({
+  borderRadius: "20px",
+
+  "&:hover": {
+    background: theme.palette.backgroundPaperElevation?.[7],
+  },
+
+  variants: [
+    {
+      props: ({ selected }) => !selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[0],
+        color: theme.palette.action.disabled,
+        "> img": {
+          opacity: 0.4,
+        },
+      },
+    },
+    {
+      props: ({ selected }) => selected,
+      style: {
+        background: theme.palette.backgroundPaperElevation?.[11],
+        border: `1px solid ${theme.palette.divider}`,
+        color: theme.palette.primary.contrastText,
+      },
+    },
+  ],
+}))
+
+type CodeFabProps = {
+  selected?: boolean
+} & Omit<FabProps, "variant" | "color">
+
+export function SelectableFab({ selected, ...props }: CodeFabProps) {
+  return (
+    <StyledSelectableFab
+      selected={selected}
+      {...props}
+      color={"secondary"}
+      variant="circular"
+    />
+  )
+}

package/src/components/VelocitySlider.tsx

@@ -40,6 +40,7 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
       </Typography>
       <Slider
         value={props.velocity}
+        color="secondary"
         onChange={onSliderChange}
         min={props.min}
         max={props.max}

package/src/components/jogging/JoggingActivationRequired.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack } from "@mui/material"
+import { Button, Stack, useTheme } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import type React from "react"
 import { useTranslation } from "react-i18next"
@@ -9,6 +9,7 @@ import type { JoggingStore } from "./JoggingStore"
 export const JoggingActivationRequired = observer(
   ({ store, children }: { store: JoggingStore; children: React.ReactNode }) => {
     const { t } = useTranslation()
+    const theme = useTheme()
 
     function renderOverlay() {
       if (store.activationState === "inactive" && !store.activationError) {
@@ -16,7 +17,7 @@ export const JoggingActivationRequired = observer(
           <TransparentOverlay
             sx={{
               borderRadius: "6px",
-              backgroundColor: "rgba(38, 47, 66, 0.7)",
+              backgroundColor: `color-mix(in srgb, ${theme.palette.backgroundPaperElevation?.[5]}, transparent)`,
             }}
           >
             <Button
@@ -33,7 +34,7 @@ export const JoggingActivationRequired = observer(
         return (
           <TransparentOverlay
             sx={{
-              backgroundColor: "rgba(38, 47, 66, 0.7)",
+              backgroundColor: `color-mix(in srgb, ${theme.palette.backgroundPaperElevation?.[5]}, transparent)`,
             }}
           >
             <LoadingCover

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -1,12 +1,14 @@
-import { Button, Typography } from "@mui/material"
+import { Add, Remove } from "@mui/icons-material"
+import { IconButton, Typography } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
 import { useRef, type ReactNode } from "react"
-import { useAnimationFrame } from "../utils/hooks"
 import { externalizeComponent } from "../../externalizeComponent"
+import type { AxisControlComponentColors } from "../../themes/themeTypes"
+import { useAnimationFrame } from "../utils/hooks"
 
 type JoggingCartesianAxisControlProps = {
-  color?: string
+  colors?: AxisControlComponentColors
   label: ReactNode
   getDisplayedValue: () => string
   startJogging: (direction: "-" | "+") => void
@@ -17,7 +19,7 @@ type JoggingCartesianAxisControlProps = {
 export const JoggingCartesianAxisControl = externalizeComponent(
   observer(
     ({
-      color,
+      colors,
       label,
       getDisplayedValue,
       startJogging,
@@ -35,8 +37,6 @@ export const JoggingCartesianAxisControl = externalizeComponent(
 
       const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
-      color = color || "#F14D42"
-
       function onPointerDownMinus(ev: React.PointerEvent) {
         // Stop right click from triggering jog
         if (ev.button === 0) startJogging("-")
@@ -46,35 +46,46 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         if (ev.button === 0) startJogging("+")
       }
 
+      if (!colors) {
+        colors = {
+          color: "#fff",
+          backgroundColor: "#000",
+          borderColor: "#000",
+          buttonBackgroundColor: "#000",
+        }
+      }
+
       return (
-        <Stack height="72px" direction="row" {...rest}>
-          <Button
+        <Stack height="72px" direction="row" justifyContent="center" {...rest}>
+          <IconButton
             onPointerDown={onPointerDownMinus}
             onPointerUp={stopJogging}
             onPointerOut={stopJogging}
             disabled={disabled}
+            size="large"
             sx={{
-              width: "105px",
-              backgroundColor: color,
-              color: "white",
+              width: "55px",
+              backgroundColor: colors.buttonBackgroundColor,
+              color: colors.color,
               alignContent: "center",
               fontSize: "37px",
               borderRadius: "16px 0px 0px 16px",
-
+              borderLeft: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
               ":hover": {
-                color: "white",
-                backgroundColor: color,
+                backgroundColor: colors.buttonBackgroundColor,
               },
             }}
           >
-            {"-"}
-          </Button>
+            <Remove />
+          </IconButton>
 
           <Stack
             spacing="6px"
             sx={{
-              width: "184px",
-              backgroundColor: color,
+              width: "150px",
+              backgroundColor: colors.backgroundColor,
               alignItems: "center",
               justifyContent: "center",
               opacity: "0.9",
@@ -94,7 +105,7 @@ export const JoggingCartesianAxisControl = externalizeComponent(
               height="22px"
               sx={{
                 fontSize: "15px",
-                color: "white",
+                color: colors.color,
               }}
               ref={valueContainerRef}
             >
@@ -102,27 +113,29 @@ export const JoggingCartesianAxisControl = externalizeComponent(
             </Typography>
           </Stack>
 
-          <Button
+          <IconButton
             onPointerDown={onPointerDownPlus}
             onPointerUp={stopJogging}
             onPointerOut={stopJogging}
             disabled={disabled}
+            size="large"
             sx={{
-              width: "105px",
-              backgroundColor: color,
-              color: "white",
+              width: "55px",
+              backgroundColor: colors.buttonBackgroundColor,
+              color: colors.color,
               alignContent: "center",
               fontSize: "37px",
               borderRadius: "0px 16px 16px 0px",
-
+              borderRight: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
               ":hover": {
-                color: "white",
-                backgroundColor: color,
+                backgroundColor: colors.buttonBackgroundColor,
               },
             }}
           >
-            {"+"}
-          </Button>
+            <Add />
+          </IconButton>
         </Stack>
       )
     },

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -3,10 +3,10 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
+  useTheme,
 } from "@mui/material"
 import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
-import type { ReactNode } from "react"
 import { useTranslation } from "react-i18next"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
@@ -28,8 +28,15 @@ type JoggingCartesianOpts = {
 }
 
 export const JoggingCartesianTab = observer(
-  ({ store, children }: { store: JoggingStore; children?: ReactNode }) => {
+  ({
+    store,
+    children,
+  }: {
+    store: JoggingStore
+    children?: React.ReactNode
+  }) => {
     const { t } = useTranslation()
+    const theme = useTheme()
 
     function onMotionTypeChange(
       _event: React.MouseEvent<HTMLElement>,
@@ -119,17 +126,17 @@ export const JoggingCartesianTab = observer(
     const axisList = [
       {
         id: "x",
-        color: "#F14D42",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.X,
         icon: <XAxisIcon />,
       },
       {
         id: "y",
-        color: "#42A705",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Y,
         icon: <YAxisIcon />,
       },
       {
         id: "z",
-        color: "#0075FF",
+        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Z,
         icon: <ZAxisIcon />,
       },
     ] as const
@@ -145,7 +152,7 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} justifyContent="space-between">
+      <Stack flexGrow={1} gap={4}>
         <Stack>
           {/* Show Wandelscript string for the current coords */}
           <JoggingCartesianValues store={store} />
@@ -169,6 +176,7 @@ export const JoggingCartesianTab = observer(
             onChange={onMotionTypeChange}
             exclusive
             aria-label={t("Jogging.Cartesian.MotionType.lb")}
+            sx={{ justifyContent: "center" }}
           >
             <ToggleButton value="translate">
               {t("Jogging.Cartesian.Translation.bt")}
@@ -194,7 +202,7 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
-                  color={axis.color}
+                  colors={axis.colors}
                   disabled={store.isLocked}
                   label={
                     <>
@@ -231,7 +239,7 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
-                  color={axis.color}
+                  colors={axis.colors}
                   disabled={store.isLocked}
                   label={
                     <>

package/src/components/jogging/JoggingOptions.tsx

@@ -44,6 +44,8 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           <Select
             labelId="jogging-coord-select"
             value={store.selectedCoordSystemId}
+            size="small"
+            variant="filled"
             displayEmpty={true}
             onChange={(event) => {
               store.setSelectedCoordSystemId(event.target.value as string)
@@ -64,6 +66,8 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           <Select
             labelId="jogging-tcp-select"
             value={store.selectedTcpId}
+            size="small"
+            variant="filled"
             onChange={(event) => {
               store.setSelectedTcpId(event.target.value as string)
             }}
@@ -92,7 +96,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         }}
       >
         {/* Orientation */}
-        <Stack width="35%">
+        <Stack width="50%">
           <InputLabel id="orientation-select">
             {t("Jogging.Cartesian.Orientation.lb")}
           </InputLabel>
@@ -103,20 +107,22 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
             aria-labelledby="orientation-select"
             disabled={store.isLocked}
           >
-            <ToggleButton value="coordsys">
+            <ToggleButton value="coordsys" sx={{ flexGrow: 1 }}>
               <OrientationCoordSysIcon />
             </ToggleButton>
-            <ToggleButton value="tool">
+            <ToggleButton value="tool" sx={{ flexGrow: 1 }}>
               <OrientationToolIcon />
             </ToggleButton>
           </ToggleButtonGroup>
         </Stack>
 
         {/* Increment selection */}
-        <Stack width="65%">
+        <Stack width="50%">
           <InputLabel id="jogging-increment-select">{"Increment"}</InputLabel>
           <Select
             labelId="jogging-increment-select"
+            size="small"
+            variant="filled"
             value={store.activeDiscreteIncrement?.id || "continuous"}
             onChange={(event) => {
               store.setSelectedIncrementId(

package/src/components/jogging/JoggingPanel.tsx

@@ -1,4 +1,4 @@
-import { Paper, Stack, Tab, Tabs } from "@mui/material"
+import { Paper, Stack, Tab, Tabs, useTheme } from "@mui/material"
 import { NovaClient } from "@wandelbots/wandelbots-js"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
@@ -29,6 +29,8 @@ export type JoggingPanelProps = {
  */
 export const JoggingPanel = externalizeComponent(
   observer((props: JoggingPanelProps) => {
+    const theme = useTheme()
+
     const nova = isString(props.nova)
       ? new NovaClient({ instanceUrl: props.nova })
       : props.nova
@@ -86,22 +88,13 @@ export const JoggingPanel = externalizeComponent(
           height: "100%",
         }}
       >
-        <Paper
-          sx={{
-            height: "100%",
-          }}
-        >
-          {state.joggingStore ? (
-            <JoggingPanelInner store={state.joggingStore}>
-              {props.children}
-            </JoggingPanelInner>
-          ) : (
-            <LoadingCover
-              message="Loading jogging"
-              error={state.loadingError}
-            />
-          )}
-        </Paper>
+        {state.joggingStore ? (
+          <JoggingPanelInner store={state.joggingStore}>
+            {props.children}
+          </JoggingPanelInner>
+        ) : (
+          <LoadingCover message="Loading jogging" error={state.loadingError} />
+        )}
       </Stack>
     )
   }),
@@ -166,7 +159,11 @@ const JoggingPanelInner = observer(
     return (
       <Stack flexGrow={1} height="100%">
         {/* Tab selection */}
-        <Tabs value={store.tabIndex} onChange={store.onTabChange}>
+        <Tabs
+          value={store.tabIndex}
+          onChange={store.onTabChange}
+          variant="fullWidth"
+        >
           {store.tabs.map((tab) => (
             <Tab
               key={tab.id}

package/src/index.ts

@@ -1,15 +1,17 @@
-export * from "./components/wandelscript-editor/WandelscriptEditor"
-export * from "./components/robots/SupportedRobot"
-export * from "./components/robots/Robot"
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"
-export type { JoggingStore } from "./components/jogging/JoggingStore"
 export * from "./components/jogging/JoggingPanel"
-export * from "./components/VelocitySlider"
+export type { JoggingStore } from "./components/jogging/JoggingStore"
+export * from "./components/LoadingCover"
 export * from "./components/modal/NoMotionGroupModal"
-export * from "./components/utils/hooks"
 export * from "./components/robots/AxisConfig"
-export * from "./components/LoadingCover"
+export * from "./components/robots/Robot"
+export * from "./components/robots/SupportedRobot"
+export * from "./components/SelectableFab"
+export * from "./components/utils/hooks"
+export * from "./components/VelocitySlider"
+export * from "./components/wandelscript-editor/WandelscriptEditor"
+export * from "./themes/themeTypes"
 export { createNovaMuiTheme } from "./themes/theming"