@wandelbots/wandelbots-js-react-components 1.8.0 → 1.9.0

package/src/components/jogging/JoggingPanel.stories.tsx

@@ -1,26 +1,29 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { JoggingPanel } from "./JoggingPanel";
-import { useArgs } from "@storybook/preview-api";
-import { NovaClient } from "@wandelbots/wandelbots-js";
+import type { Meta, StoryObj } from "@storybook/react"
+import { JoggingPanel } from "../../index"
+import { useArgs } from "@storybook/preview-api"
+import { NovaClient } from "@wandelbots/wandelbots-js"
 
 const meta: Meta<typeof JoggingPanel> = {
   component: JoggingPanel,
 
   args: {
-    motionGroupId: "0@mock-ur5e"
+    motionGroupId: "0@mock-ur5e",
   },
   render: function Component(args) {
-    const [, setArgs] = useArgs();
-    return <JoggingPanel
-      {...args} 
-      nova={new NovaClient({
-        instanceUrl: "https://mock",
-        mock: true
-      })}
-    />;
+    const [, setArgs] = useArgs()
+    return (
+      <JoggingPanel
+        {...args}
+        nova={
+          new NovaClient({
+            instanceUrl: "https://mock",
+            mock: true,
+          })
+        }
+      />
+    )
   },
-};
-export default meta;
+}
+export default meta
 
-export const Default: StoryObj<typeof JoggingPanel> = {
-};
+export const Default: StoryObj<typeof JoggingPanel> = {}

package/src/components/jogging/JoggingPanel.tsx

@@ -6,11 +6,17 @@ import { JoggingJointTab } from "./JoggingJointTab"
 import { JoggingStore } from "./JoggingStore"
 import { LoadingCover } from "../LoadingCover"
 import { runInAction } from "mobx"
-import { NovaClient } from "@wandelbots/wandelbots-js"
+import type { NovaClient } from "@wandelbots/wandelbots-js"
 
 export type JoggingPanelProps = {
+  /** Connection to a Nova instance to use for jogging */
   nova: NovaClient
+  /** Id of the motion group to move e.g. 0@ur5e **/
   motionGroupId: string
+  /** Callback with the jogging panel's state store for further customization/config */
+  onSetup?: (store: JoggingStore) => void
+  /** Any children will go at the bottom of the panel under the default components */
+  children?: React.ReactNode
 }
 
 export const JoggingPanel = observer((props: JoggingPanelProps) => {
@@ -28,6 +34,9 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
       runInAction(() => {
         state.joggingStore = joggingStore
       })
+      if (props.onSetup) {
+        props.onSetup(joggingStore)
+      }
     } catch (err) {
       state.loadingError = err
     }
@@ -47,7 +56,7 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
     const {
       currentTab,
       selectedTcpId,
-      selectedCoordSystemId,
+      activeCoordSystemId,
       selectedDiscreteIncrement,
     } = state.joggingStore
 
@@ -55,40 +64,27 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
 
     const cartesianJoggingOpts = {
       tcpId: selectedTcpId,
-      coordSystemId: selectedCoordSystemId,
+      coordSystemId: activeCoordSystemId,
     }
 
     if (selectedDiscreteIncrement && currentTab.id === "cartesian") {
-      state.joggingStore.jogger.setJoggingMode("increment", cartesianJoggingOpts)
+      state.joggingStore.jogger.setJoggingMode(
+        "increment",
+        cartesianJoggingOpts,
+      )
     } else {
-      state.joggingStore.jogger.setJoggingMode(currentTab.id, cartesianJoggingOpts)
+      state.joggingStore.jogger.setJoggingMode(
+        currentTab.id,
+        cartesianJoggingOpts,
+      )
     }
   }, [
     state.joggingStore?.currentTab,
     state.joggingStore?.selectedTcpId,
-    state.joggingStore?.selectedCoordSystemId,
+    state.joggingStore?.activeCoordSystemId,
     state.joggingStore?.selectedDiscreteIncrement,
   ])
 
-  useEffect(() => {
-
-    // Set the robot to default control mode (JoZi says is important for physical robot jogging)
-    async function init() {
-      if (!state.joggingStore) return
-
-      try {
-        await nova.api.controller.setDefaultMode(
-          state.joggingStore.jogger.motionStream.controllerId,
-          "MODE_CONTROL",
-        )
-      } catch (err) {
-        console.error(err)
-      }
-    }
-
-    init()
-  }, [state.joggingStore?.jogger.motionStream.controllerId])
-
   if (!state.joggingStore) {
     return (
       <JoggingPanelOuter>
@@ -119,9 +115,8 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
           {store.currentTab.id === "cartesian" && (
             <JoggingCartesianTab store={store} />
           )}
-          {store.currentTab.id === "joint" && (
-            <JoggingJointTab store={store} />
-          )}
+          {store.currentTab.id === "joint" && <JoggingJointTab store={store} />}
+          {props.children}
         </Stack>
       </Stack>
     </JoggingPanelOuter>
@@ -136,11 +131,14 @@ function JoggingPanelOuter({ children }: { children: React.ReactNode }) {
         minWidth: "350px",
         overflowY: "auto",
         position: "relative",
+        height: "100%",
       }}
     >
-      <Paper sx={{
-        minHeight: "90vh"
-      }}>
+      <Paper
+        sx={{
+          height: "100%",
+        }}
+      >
         {children}
       </Paper>
     </Stack>

package/src/components/jogging/JoggingStore.tsx

@@ -1,6 +1,11 @@
-import { keyBy } from "lodash-es"
+import { keyBy, uniqueId } from "lodash-es"
 import { autorun, makeAutoObservable, type IReactionDisposer } from "mobx"
-import type { CoordinateSystem, JoggerConnection, MotionGroupSpecification, RobotTcp } from "@wandelbots/wandelbots-js"
+import type {
+  CoordinateSystem,
+  JoggerConnection,
+  MotionGroupSpecification,
+  RobotTcp,
+} from "@wandelbots/wandelbots-js"
 import { tryParseJson } from "@wandelbots/wandelbots-js"
 
 const discreteIncrementOptions = [
@@ -22,8 +27,8 @@ export type IncrementOptionId = IncrementOption["id"]
 export class JoggingStore {
   selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
 
-  // TODO
-  isLocked: boolean = false
+  /** Locks to prevent UI interactions during certain operations */
+  locks = new Set<string>()
 
   /**
    * Id of selected coordinate system from among those defined on the API side
@@ -33,6 +38,13 @@ export class JoggingStore {
   /** Id of selected tool center point from among the options available on the robot */
   selectedTcpId: string = ""
 
+  /**
+   * Whether the user is jogging in the coordinate system or tool orientation.
+   * When in tool orientation, the robot moves in a direction relative to the
+   * attached tool rotation.
+   */
+  selectedOrientation: "coordsys" | "tool" = "coordsys"
+
   /**
    * Id of selected increment amount for jogging. Options are defined by robot pad.
    * When non-continuous, jogging moves the robot by a fixed number of mm or degrees
@@ -74,20 +86,28 @@ export class JoggingStore {
     const { nova } = jogger
 
     // Find out what TCPs this motion group has (we need it for jogging)
-    const [motionGroupSpec, { coordinatesystems }, { tcps }] = await Promise.all([
-      nova.api.motionGroupInfos.getMotionGroupSpecification(jogger.motionGroupId),
-
-      // Fetch coord systems so user can select between them
-      nova.api.coordinateSystems.listCoordinateSystems("ROTATION_VECTOR"),
-
-      // Same for TCPs
-      nova.api.motionGroupInfos.listTcps(
-        jogger.motionGroupId,
-        "ROTATION_VECTOR",
-      ),
-    ])
-
-    return new JoggingStore(jogger, motionGroupSpec, coordinatesystems || [], tcps || [])
+    const [motionGroupSpec, { coordinatesystems }, { tcps }] =
+      await Promise.all([
+        nova.api.motionGroupInfos.getMotionGroupSpecification(
+          jogger.motionGroupId,
+        ),
+
+        // Fetch coord systems so user can select between them
+        nova.api.coordinateSystems.listCoordinateSystems("ROTATION_VECTOR"),
+
+        // Same for TCPs
+        nova.api.motionGroupInfos.listTcps(
+          jogger.motionGroupId,
+          "ROTATION_VECTOR",
+        ),
+      ])
+
+    return new JoggingStore(
+      jogger,
+      motionGroupSpec,
+      coordinatesystems || [],
+      tcps || [],
+    )
   }
 
   constructor(
@@ -147,6 +167,10 @@ export class JoggingStore {
     if (["translate", "rotate"].includes(save.selectedCartesianMotionType)) {
       this.selectedCartesianMotionType = save.selectedCartesianMotionType
     }
+
+    if (["coordsys", "tool"].includes(save.selectedOrientation)) {
+      this.selectedOrientation = save.selectedOrientation
+    }
   }
 
   saveToLocalStorage() {
@@ -156,11 +180,16 @@ export class JoggingStore {
     )
   }
 
+  get isLocked() {
+    return this.locks.size > 0
+  }
+
   get localStorageSave() {
     return {
       selectedTabId: this.selectedTabId,
       selectedCoordSystemId: this.selectedCoordSystemId,
       selectedTcpId: this.selectedTcpId,
+      selectedOrientation: this.selectedOrientation,
       selectedIncrementId: this.selectedIncrementId,
       selectedCartesianMotionType: this.selectedCartesianMotionType,
     }
@@ -211,6 +240,12 @@ export class JoggingStore {
     return this.coordSystemsById[this.selectedCoordSystemId]
   }
 
+  get activeCoordSystemId() {
+    return this.selectedOrientation === "tool"
+      ? "tool"
+      : this.selectedCoordSystemId
+  }
+
   get tcpsById() {
     return keyBy(this.tcps, (tcp) => tcp.id)
   }
@@ -272,6 +307,10 @@ export class JoggingStore {
     this.selectedTcpId = id
   }
 
+  setSelectedOrientation(orientation: "coordsys" | "tool") {
+    this.selectedOrientation = orientation
+  }
+
   setSelectedIncrementId(id: IncrementOptionId) {
     this.selectedIncrementId = id
   }
@@ -291,4 +330,16 @@ export class JoggingStore {
   setSelectedCartesianMotionType(type: "translate" | "rotate") {
     this.selectedCartesianMotionType = type
   }
+
+  /** Lock the UI until the given async callback resolves */
+  async withMotionLock(fn: () => Promise<void>) {
+    const lockId = uniqueId()
+    this.locks.add(lockId)
+
+    try {
+      return await fn()
+    } finally {
+      this.locks.delete(lockId)
+    }
+  }
 }

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,4 +1,4 @@
-import { Stack, Divider, Typography } from "@mui/material"
+import { Stack, Typography } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import type { JoggingStore } from "./JoggingStore"
 import { VelocitySlider } from "../VelocitySlider"
@@ -21,35 +21,37 @@ export const JoggingVelocitySlider = observer(
     }))
 
     return (
-      <Stack>
-        <Divider />
-        <Stack
-          sx={{
-            margin: "0px 20px",
-            marginTop: "0.8rem",
-            marginBottom: "0.8rem",
-          }}
-        >
-          <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>
+      <Stack
+        sx={{
+          margin: "0px 20px",
+          marginTop: "24px",
+          marginBottom: "24px",
+        }}
+      >
+        <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>
+          <Stack
+            sx={{
+              justifyContent: "center",
+            }}
+          >
             <Typography
               sx={{
-                fontWeight: "bold",
-                fontSize: "15px",
+                fontSize: "12px",
+                opacity: 0.6,
               }}
             >
               {t("Jogging.Velocity.lb")}
             </Typography>
-            <VelocitySlider
-              velocity={store.velocityInCurrentUnits}
-              min={store.minVelocityInCurrentUnits}
-              max={store.maxVelocityInCurrentUnits}
-              onVelocityChange={store.setVelocityFromSlider}
-              disabled={store.isLocked}
-              valueLabelFormat={state.valueLabelFormat}
-            />
           </Stack>
+          <VelocitySlider
+            velocity={store.velocityInCurrentUnits}
+            min={store.minVelocityInCurrentUnits}
+            max={store.maxVelocityInCurrentUnits}
+            onVelocityChange={store.setVelocityFromSlider}
+            disabled={store.isLocked}
+            valueLabelFormat={state.valueLabelFormat}
+          />
         </Stack>
-        <Divider />
       </Stack>
     )
   },

package/src/components/wandelscript-editor/WandelscriptEditor.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { WandelscriptEditor } from "./WandelscriptEditor";
+import type { Meta, StoryObj } from "@storybook/react"
+import { WandelscriptEditor } from "../../index"
 
 const meta: Meta<typeof WandelscriptEditor> = {
   component: WandelscriptEditor,
-};
-export default meta;
+}
+export default meta
 
 const defaultCode = `start = [832, -452, 289]  # The start position of the edge
 end = [817, 168, 288]  # The end position of the edge
@@ -29,7 +29,7 @@ for i = 0..<int(n / 2) - 1:
     move via arc(a) to b
     if i == 10:
         test_pose = planned_pose()
-`;
+`
 
 export const Editor: StoryObj<typeof WandelscriptEditor> = {
   args: {
@@ -40,6 +40,6 @@ export const Editor: StoryObj<typeof WandelscriptEditor> = {
       <div style={{ height: "400px" }}>
         <WandelscriptEditor {...props} />
       </div>
-    );
+    )
   },
-};
+}

package/src/components/wandelscript-editor/WandelscriptEditor.tsx

@@ -1,29 +1,46 @@
 import Editor, { useMonaco, type Monaco } from "@monaco-editor/react"
-import React, { useEffect } from "react"
-import { createHighlighter, type BundledTheme } from "shiki"
+import { useEffect, useRef, useState } from "react"
+import type {
+  BundledLanguage,
+  HighlighterGeneric} from "shiki";
+import {
+  createHighlighter,
+  type BundledTheme,
+} from "shiki"
 import { shikiToMonaco } from "@shikijs/monaco"
 
 import wandelscriptTextmateGrammar from "./wandelscript.tmLanguage"
 import { useTheme } from "@mui/material"
-import { editor } from "monaco-editor"
+import type { editor } from "monaco-editor"
 
 type WandelscriptEditorProps = {
   /** The current Wandelscript content of the code editor (controlled component) */
   code?: string
   /** What to do when the user edits the code */
-  onChange?: (code: string|undefined, ev: editor.IModelContentChangedEvent) => void
-  /** Callback to further configure monaco on startup if needed */
+  onChange?: (
+    code: string | undefined,
+    ev: editor.IModelContentChangedEvent,
+  ) => void
+  /** Options for monaco editor */
   monacoOptions?: editor.IEditorOptions
   /** Callback to further configure monaco on startup if needed */
   monacoSetup?: (monaco: Monaco) => void
 }
 
-const shikiTheme: BundledTheme = "dark-plus"
-
 /** A Monaco (VSCode-style) embedded code editor with Wandelscript syntax highlighting */
 export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
   const monaco = useMonaco()
   const theme = useTheme()
+  const shikiHighlighterRef = useRef<HighlighterGeneric<
+    BundledLanguage,
+    BundledTheme
+  > | null>(null)
+
+  const [activeShikiTheme, setActiveShikiTheme] =
+    useState<BundledTheme>("dark-plus")
+
+  const targetShikiTheme =
+    theme.palette.mode === "dark" ? "dark-plus" : "light-plus"
 
   async function setupEditor(monaco: Monaco) {
     // Register and configure the Wandelscript language
@@ -50,38 +67,46 @@ export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
     // Monaco doesn't support TextMate grammar config directly, so we
     // use Shiki as an intermediary
 
-    const highlighter = await createHighlighter({
-      // Our textmate grammar doesn't quite conform to the expected type
-      // here; I'm not sure what the missing properties mean exactly
-      langs: [wandelscriptTextmateGrammar as any],
-      themes: [shikiTheme],
-    })
+    if (!shikiHighlighterRef.current) {
+      shikiHighlighterRef.current = await createHighlighter({
+        // Our textmate grammar doesn't quite conform to the expected type
+        // here; I'm not sure what the missing properties mean exactly
+        langs: [wandelscriptTextmateGrammar as any],
+        themes: ["dark-plus", "light-plus"],
+      })
+    }
 
-    shikiToMonaco(highlighter, monaco)
+    shikiToMonaco(shikiHighlighterRef.current, monaco)
 
     // Override the generated shiki theme to use shiki syntax highlighting
     // but vscode colors
-    monaco.editor.defineTheme(shikiTheme, {
+    monaco.editor.defineTheme(targetShikiTheme, {
       base: theme.palette.mode === "dark" ? "vs-dark" : "vs",
       inherit: true,
       rules: [],
-      colors: {
-        "editor.background": "#262F42",
-        "editorLineNumber.foreground": "#797979",
-        "editorLineNumber.activeForeground": "#e9e9e9",
-      },
+      colors:
+        theme.palette.mode === "dark"
+          ? {
+              "editor.background": "#262F42",
+              "editorLineNumber.foreground": "#797979",
+              "editorLineNumber.activeForeground": "#e9e9e9",
+              "editor.lineHighlightBorder": "#494949",
+            }
+          : {},
     })
 
     if (props.monacoSetup) {
       props.monacoSetup(monaco)
     }
+
+    setActiveShikiTheme(targetShikiTheme)
   }
 
   useEffect(() => {
     if (monaco) {
       setupEditor(monaco)
     }
-  }, [monaco])
+  }, [monaco, targetShikiTheme])
 
   if (!monaco) {
     return null
@@ -92,7 +117,7 @@ export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
       value={props.code}
       onChange={props.onChange}
       defaultLanguage="wandelscript"
-      theme={shikiTheme}
+      theme={activeShikiTheme}
       options={{
         minimap: { enabled: false },
         wordWrap: "on",
@@ -101,4 +126,4 @@ export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
       }}
     />
   )
-}
+}

package/src/externalizeComponent.tsx

@@ -0,0 +1,37 @@
+import { ThemeProvider } from "@emotion/react"
+import { createMUIThemeFromNova, createNovaTheme } from "./themes/theming"
+import type { FC } from "react"
+import { useTheme } from "@mui/material"
+import { I18nextProvider } from "react-i18next"
+// @ts-expect-error invalid type-only import error
+import i18n from "./i18n/config"
+
+/**
+ * Our components require a certain context that may or may not
+ * be provided by the user application; this wrapper ensures
+ * they can be used either way.
+ */
+export function externalizeComponent<T>(
+  Component: (props: T) => React.ReactNode,
+) {
+  return (props: T) => (
+    <NovaComponentsProvider>
+      <Component {...(props as T & JSX.IntrinsicAttributes)} />
+    </NovaComponentsProvider>
+  )
+}
+
+const NovaComponentsProvider: FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const theme = useTheme()
+  const defaultNovaTheme = createNovaTheme({
+    mode: theme.palette.mode,
+  })
+  const defaultTheme = createMUIThemeFromNova(defaultNovaTheme)
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+    </ThemeProvider>
+  )
+}

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

@@ -8,5 +8,6 @@
   "Jogging.Cartesian.Translation.bt": "Translation",
   "Jogging.Cartesian.Rotation.bt": "Rotation",
   "Jogging.Joints.JointValues.lb": "Gelenkwerte",
-  "Jogging.Increment.Continuous.dd": "Fortlaufend"
+  "Jogging.Increment.Continuous.dd": "Fortlaufend",
+  "Jogging.Cartesian.Orientation.lb": "Orientierung"
 }

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

@@ -8,5 +8,6 @@
   "Jogging.Cartesian.Translation.bt": "Translation",
   "Jogging.Cartesian.Rotation.bt": "Rotation",
   "Jogging.Joints.JointValues.lb": "Joint values",
-  "Jogging.Increment.Continuous.dd": "Continuous"
+  "Jogging.Increment.Continuous.dd": "Continuous",
+  "Jogging.Cartesian.Orientation.lb": "Orientation"
 }

package/src/icons/orientation-coord-system.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7099 16.2621L20.6205 16.608L21.2793 18.679L18.3573 17.2179V9.85689L12.0715 6.71409V2.89269L13.3795 4.21073L14.1921 3.40503L11.5179 0.714233L8.81153 3.40223L9.61723 4.21363L10.9286 2.91113V6.71413L4.64295 9.85693V17.2179L1.72915 18.6747L2.38625 16.6083L1.29687 16.2625L0.0714111 20.1429L3.89721 21.2858L4.24307 20.1966L2.40729 19.6134L5.28149 18.1766L11.5001 21.2856L17.7183 18.1764L20.5947 19.6146L18.7635 20.1964L19.1094 21.2856L22.9286 20.1427L21.7099 16.2621ZM11.5001 12.6463L6.55967 10.1763L11.5001 7.70633L16.4409 10.1767L11.5001 12.6463ZM12.0715 13.6388L17.2145 11.0672V17.1504L12.0715 19.722V13.6388ZM5.78567 11.0672L10.9287 13.6388V19.722L5.78567 17.1504V11.0672Z" fill="currentColor"/>
+</svg>

package/src/icons/orientation-tool.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.87 7.12001L13.56 8.81002L16.55 5.82001L12.82 2.09001L11.87 1.14001L4.21001 8.80001L3.26001 9.75001L7.25001 13.74V17.18H14.8V13.63L10.08 8.91001L11.87 7.12001ZM10.96 4.13001L11.87 3.22001L14.47 5.82001L13.56 6.73001L10.96 4.13001ZM8.71001 14.37H12.45L11.11 13.03L11.07 12.99H8.57001L5.32001 9.74001L9.91001 5.15001L10.83 6.07001L8.00001 8.90001L13.33 14.23V15.71H8.70001V14.36L8.71001 14.37Z" fill="currentColor" fill-opacity="0.8"/>
+</svg>

package/src/index.ts

@@ -1,10 +1,40 @@
-export * from "./components/wandelscript-editor/WandelscriptEditor"
-export * from "./components/robots/SupportedRobot"
-export * from "./components/robots/Robot"
-export * from "./components/robots/AxisConfig"
-export * from "./components/3d-viewport/PresetEnvironment"
-export * from "./components/3d-viewport/SafetyZonesRenderer"
-export * from "./components/jogging/JoggingCartesianAxisControl"
-export * from "./components/jogging/JoggingJointRotationControl"
-export * from "./components/jogging/JoggingPanel"
+import { externalizeComponent } from "./externalizeComponent"
+
+export type * from "./components/wandelscript-editor/WandelscriptEditor"
+import { WandelscriptEditor as WE } from "./components/wandelscript-editor/WandelscriptEditor"
+export const WandelscriptEditor = externalizeComponent(WE)
+
+export type * from "./components/robots/SupportedRobot"
+import { SupportedRobot as SR } from "./components/robots/SupportedRobot"
+export const SupportedRobot = externalizeComponent(SR)
+
+export type * from "./components/robots/Robot"
+import { Robot as R } from "./components/robots/Robot"
+export const Robot = externalizeComponent(R)
+
+export type * from "./components/3d-viewport/PresetEnvironment"
+import { PresetEnvironment as PE } from "./components/3d-viewport/PresetEnvironment"
+export const PresetEnvironment = externalizeComponent(PE)
+
+export type * from "./components/3d-viewport/SafetyZonesRenderer"
+import { SafetyZonesRenderer as SZR } from "./components/3d-viewport/SafetyZonesRenderer"
+export const SafetyZonesRenderer = externalizeComponent(SZR)
+
+export type * from "./components/jogging/JoggingCartesianAxisControl"
+import { JoggingCartesianAxisControl as JCAC } from "./components/jogging/JoggingCartesianAxisControl"
+export const JoggingCartesianAxisControl = externalizeComponent(JCAC)
+
+export type * from "./components/jogging/JoggingJointRotationControl"
+import { JoggingJointRotationControl as JJRC } from "./components/jogging/JoggingJointRotationControl"
+export const JoggingJointRotationControl = externalizeComponent(JJRC)
+
+export type { JoggingStore } from "./components/jogging/JoggingStore"
+export type * from "./components/jogging/JoggingPanel"
+import { JoggingPanel as JP } from "./components/jogging/JoggingPanel"
+export const JoggingPanel = externalizeComponent(JP)
+
+export type * from "./components/VelocitySlider"
+import { VelocitySlider as VS } from "./components/VelocitySlider"
+export const VelocitySlider = externalizeComponent(VS)
+
 export * from "./components/utils/hooks"