@wandelbots/wandelbots-js-react-components 2.34.2 → 2.35.0-pr.feature-replace-forward-trigger-build.377.c42fff6

package/README.md

@@ -2,207 +2,197 @@
 
 [![NPM version](https://img.shields.io/npm/v/@wandelbots/wandelbots-js-react-components.svg)](https://npmjs.org/package/@wandelbots/wandelbots-js-react-components) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@wandelbots/wandelbots-js-react-components)](https://bundlephobia.com/package/@wandelbots/wandelbots-js-react-components) [![Release](https://github.com/wandelbotsgmbh/wandelbots-js-react-components/actions/workflows/release.yml/badge.svg)](https://github.com/wandelbotsgmbh/wandelbots-js-react-components/actions/workflows/release.yml) [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://wandelbotsgmbh.github.io/wandelbots-js-react-components)
 
-A growing collection of ready-made React UI components based on MaterialUI and React Three Fiber for use with the Wandelbots platform.
+React UI components for building robotics applications on the [Wandelbots Nova platform](https://www.wandelbots.com/).
+
+Built with TypeScript, Material-UI, and React Three Fiber. Provides robot control interfaces, 3D visualizations, and automation components that integrate with the Nova ecosystem.
+
+## Quick Start
 
 ```bash
 npm install @wandelbots/wandelbots-js-react-components
 ```
 
-### Basic usage:
+## Getting Started
 
-Import your desired components or functions from the package:
+For setup instructions, integration examples, and basic usage patterns, visit the **[Getting Started Guide](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/gettingstarted--docs)** in our Storybook documentation.
 
-```jsx
-import { JoggingPanel, ... } from '@wandelbots/wandelbots-js-react-components'
-```
+## Documentation
 
-See the [Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) for implementation details of each component.
-
-### Index
-
-<table>
-  <tr>
-    <td valign="top">
-      <ul>
-        <li><a href="#ui">UI</a></li>
-        <ul>
-          <li><a href="#joggingpanel">JoggingPanel</a></li>
-          <li><a href="#wandelscripteditor">WandelscriptEditor</a></li>
-          <li><a href="#theming">Theming</a></li>
-        </ul>
-        <li><a href="#viewport">3D Viewport</a></li>
-        <ul>
-          <li><a href="#robot">Robot</a></li>
-          <li><a href="#lightning">Lightning</a></li>
-          <li><a href="#safety">Safety Zones</a></li>
-        </ul>
-      </ul>
-    </td>
-  </tr>
-</table>
-
-### UI
-
-#### JoggingPanel
-
-<a href="https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingpanel--docs">
-<img width="20%" alt="jogging" src="https://github.com/user-attachments/assets/07d8bd72-9378-4199-8f54-d101c857797c">
-</a>
-
-The JoggingPanel is a high-level user interface for manually moving a robot using the Wandelbots stack. It needs only a `NovaClient` instance from [wandelbots-js](https://github.com/wandelbotsgmbh/wandelbots-js) and the id of a motion group to connect to.
-
-```tsx
-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
-}
-```
+See the [Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) for interactive examples and API documentation.
 
-#### WandelscriptEditor
-
-The WandelscriptEditor provides an interface for editing snippets of Wandelscript code with the appropriate syntax highlighting. It uses the [Monaco](https://microsoft.github.io/monaco-editor/) editor under the hood.
-
-```tsx
-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 */
-  monacoSetup?: (monaco: Monaco) => void
-}
-```
+## Components
 
-#### Theming
+### Robot Control & Jogging
 
-The UI components presented in this library will respect the Material UI theme of the application they are rendered within, allowing customization with the [MUI theming system](mui.com/material-ui).
+Manual robot control interfaces.
 
-Using the Wandelbots MUI theme
-To make the components look exactly like they do in the storybook, pass the [Wandelbots MUI theme](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-wandelbots-mui-theme--docs) to ThemeProvider.
+**[JoggingPanel](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingpanel--docs)** - Complete jogging interface with cartesian and joint controls
 
-```tsx
-import { ThemeProvider } from "@mui/material";
-import { createNovaMuiTheme, JoggingPanel } from "@wandelbots/wandelbots-js-react-components"
+- Dual-mode operation (Cartesian & Joint space)
+- Real-time velocity control
+- Multiple coordinate systems support
 
-const theme = createNovaMuiTheme()
+**Individual Jogging Controls**
 
-<ThemeProvider theme={theme}>
-  <JoggingPanel ... />
-</ThemeProvider>
-```
+- **[JoggingCartesianAxisControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingcartesianaxiscontrol--docs)** - Single-axis cartesian movement
+- **[JoggingJointRotationControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingjointrotationcontrol--docs)** - Individual joint controls
+- **[VelocitySlider](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-velocityslider--docs)** - Speed adjustment interface
 
-### Viewport
+### Program Execution
 
-#### Robot
+Program control and monitoring components.
 
-<a href="https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-robot--docs">
-<img width="20%" alt="Robot" src="https://github.com/user-attachments/assets/da661136-8b53-48ba-85de-63b09e3b51f3">
-</a>
+**[ProgramControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-programcontrol--docs)** - Program lifecycle management
 
-This `Robot` component adds the robot to the 3D viewport. Use it together with the `connectedMotionGroup` from `@wandelbots/nova-js/v1`.
+- Play, pause, stop functionality
+- State machine integration
+- Manual reset capabilities
 
-```tsx
-<Robot connectedMotionGroup={connectedMotionGroup} />
-```
+**[ProgramStateIndicator](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-programstateindicator--docs)** - Visual program status
 
-The robot model are loaded from the [jsdelivr CDN](https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components/public/models/).
+- Live execution state monitoring
+- Error state visualization
 
-In case you want to use the application offline, you can download the models and host them locally. You can override the URL resolver of the `Robot` component by passing a `getModel` function like:
+### 3D Visualization & Robotics
 
-```tsx
-<Robot
-  getModel={() => `public/${connectedMotionGroup.modelFromController}.glb`}
-  connectedMotionGroup={connectedMotionGroup}
-/>
-```
+3D components for robot visualization.
 
-```tsx
-export type ConnectecMotionGroupRobotProps = {
-  connectedMotionGroup: ConnectedMotionGroup // The connected motion group from wandelbots-js
-  getModel?: (modelFromController: string) => string // A function that returns the URL of the robot model
-  transparentColor?: string // Whether the robot should be displayed transparently
-} & GroupProps
-```
+**[Robot](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-robot--docs)** - Real-time 3D robot rendering
 
-##### SupportedRobot
+- Live pose updates from motion groups
+- Extensive robot model support from major manufacturers
+- [Supported Models](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/story/3d-view-robot-supported-models--abb-1010-037-15) - ABB, FANUC, KUKA, Universal Robots, Yaskawa (100+ models)
+- Automatic model loading from CDN
 
-The `SupportedRobot` can be used to display a robot model without the need for a `connectedMotionGroup` from `@wandelbots/nova-js/v1`.
+**[SafetyZonesRenderer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-safetyzonesrenderer--docs)** - 3D safety visualization
 
-```tsx
-<SupportedRobot
-  rapidlyChangingMotionState={rapidlyChangingMotionState}
-  dhParameters={dhParameters as any}
-  modelFromController={modelFromController || ""}
-  getModel={() => `./robot-pad/models/${modelFromController}.glb`}
-/>
-```
+- Real-time safety zone rendering
+- Visual collision boundaries
 
-```tsx
-export type SupportedRobotProps = {
-  rapidlyChangingMotionState: MotionGroupStateResponse // The motion state of the robot
-  modelFromController: string // The model name of the robot
-  dhParameters: DHParameter[] // The DH parameters of the robot
-  getModel?: (modelFromController: string) => string // A function that returns the URL of the robot model
-  transparentColor?: string // Whether the robot should be displayed transparently
-} & GroupProps
-```
+**[TrajectoryRenderer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-trajectoryrenderer--docs)** - Motion path visualization
 
-#### Lighting
+- Real-time trajectory display
+- Path planning visualization
 
-The `PresetEnvironment` component adds a default lighting setup to the 3D viewport.
+### Safety & Monitoring
 
-```tsx
-<PresetEnvironment>
-```
+Safety components for production environments.
 
-#### Safety
+**[SafetyBar](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/safety-safetybar--docs)** - Centralized safety status
 
-<a href="https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-safetyzonesrenderer--docs">
-<img width="20%" alt="Bildschirmfoto 2024-09-19 um 14 26 40" src="https://github.com/user-attachments/assets/be5ef8c3-5cd2-4d6d-bfc3-cbf4eb4fc04c">
-</a>
+- Real-time safety monitoring
+- Emergency stop integration
 
-The `SafetyZonesRenderer` component visualizes the safety zones of the controller.
+### Code Editing
 
-```tsx
-<SafetyZonesRenderer safetyZones={connectedMotionGroup.safetyZones || []} />
-```
+Code editing capabilities for robot programming.
 
-## Contributing
+**[WandelscriptEditor](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/wandelscript-wandelscripteditor--docs)** - Code editor
 
-To set up wandelbots-js-react-components for development, first clone the repo and run:
+- Monaco editor integration
+- Wandelscript syntax highlighting
+- IntelliSense support
 
-```bash
-npm install
-```
+### Data & Interface Components
+
+UI components for data display and user interaction.
+
+**Data Components**
+
+- **[DataGrid](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-datagrid--docs)** - Data tables with robotics data formatting
+- **[LogPanel](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-logpanel--docs)** - Real-time log display and filtering
+- **[CycleTimer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-cycletimer--docs)** - Production cycle timing and metrics
+
+**Robot Management**
+
+- **[RobotCard](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotcard--docs)** - Robot overview cards with status
+- **[RobotListItem](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotlistitem--docs)** - List view for multiple robots
+- **[RobotSetupReadinessIndicator](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotsetupreadinessindicator--docs)** - Setup validation status
+
+**Navigation**
+
+- **[AppHeader](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/navigation-appheader--docs)** - Application header with branding
+- **[TabBar](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/navigation-tabbar--docs)** - Multi-section navigation
+
+### Theming & Styling
+
+Styling system for consistent robotics applications.
 
-Then you can run the storybook to develop the components:
+**[Theming components](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-theming-components--docs)** - Interactive theming examples
+
+- Component theming demonstrations
+- Customization patterns
+
+**[Wandelbots MUI Theme](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-wandelbots-mui-theme--docs)** - Material-UI theme
+
+- Dark/light mode support
+- Robotics-specific color schemes
+- Material Design integration
+
+## Architecture & Integration
+
+### Nova Platform Integration
+
+Components integrate with the Wandelbots Nova ecosystem:
+
+- **NovaClient Integration** - Components accept either `NovaClient` instances or URL strings
+- **Real-time Updates** - WebSocket connections for live robot state updates
+- **Motion Group Management** - Direct integration with `ConnectedMotionGroup` objects
+- **State Synchronization** - Automatic state management with MobX reactivity
+
+### Technical Foundation
+
+- **TypeScript** - Full type safety and enhanced developer experience
+- **Material-UI v6/v7** - Professional design system and theming
+- **React Three Fiber** - High-performance 3D rendering for robotics visualization
+- **MobX** - Reactive state management for real-time updates
+- **i18next** - Internationalization support for global deployment
+
+## Installation & Setup
+
+### Prerequisites
+
+- React 18+ or 19+
+- Material-UI v6 or v7
+- @emotion/react and @emotion/styled
+
+### Optional Dependencies (for 3D components)
+
+- @react-three/fiber, @react-three/drei, three, three-stdlib
+
+See the [Getting Started Guide](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/gettingstarted--docs) for complete setup instructions and integration examples.
+
+## Development
+
+To set up the project for development:
 
 ```bash
-npm run dev
+git clone https://github.com/wandelbotsgmbh/wandelbots-js-react-components.git
+cd wandelbots-js-react-components
+npm install
+npm run dev  # Start Storybook development server
 ```
 
 ### Local Testing
 
-To test the package locally, you can run:
+Build and test the package locally:
 
 ```bash
 npm run build
 npm pack
+npm install /path/to/wandelbots-wandelbots-js-react-components-x.x.x.tgz
 ```
 
-this will generate a `.tgz` file in the root of the project. You can then install this package in another project with:
+> **Note:** Use `npm install` with the `.tgz` file instead of `npm link` due to peer dependency requirements with React Three Fiber components.
 
-```bash
-npm install /path/to/wandelbots-wandelbots-js-react-components-0.0.1.tgz
-```
+## Contributing
+
+We welcome contributions! Please see our contributing guidelines and feel free to submit issues and pull requests.
+
+## License
+
+This project is licensed under the terms specified in the LICENSE file.
+
+---
 
-`npm link` leads to issues with the react three fiber components (`peerDependencies` are not supported), so it is recommended to use `npm install` with the `.tgz` file.
+[Explore the Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) • [Visit Wandelbots.com](https://www.wandelbots.com/)

package/dist/components/AppHeader.d.ts

@@ -0,0 +1,34 @@
+import { type SxProps } from "@mui/material";
+import { type ReactNode } from "react";
+export type AppItem = {
+    /** Unique identifier for the app */
+    id: string;
+    /** Display name of the app */
+    name: string;
+    /** Icon component to display */
+    icon: ReactNode;
+    /** URL or callback to navigate to the app */
+    href?: string;
+    /** Click handler for the app */
+    onClick?: () => void;
+};
+export type AppHeaderProps = {
+    /** Current app icon */
+    appIcon: ReactNode;
+    /** Current app name */
+    appName: string;
+    /** List of other available apps */
+    apps?: AppItem[];
+    /** Callback when an app is selected */
+    onAppSelect?: (app: AppItem) => void;
+    /** Additional styling */
+    sx?: SxProps;
+};
+/**
+ * A top navigation header component that displays the current app and provides
+ * a dropdown menu to navigate to other apps.
+ */
+export declare const AppHeader: ((props: AppHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=AppHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/components/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,OAAO,EAGb,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAmB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAIjE,MAAM,MAAM,OAAO,GAAG;IACpB,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,IAAI,EAAE,SAAS,CAAA;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,uBAAuB;IACvB,OAAO,EAAE,SAAS,CAAA;IAClB,uBAAuB;IACvB,OAAO,EAAE,MAAM,CAAA;IACf,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;IAChB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,yBAAyB;IACzB,EAAE,CAAC,EAAE,OAAO,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,WACH,cAAc;;CAsJhC,CAAA"}

package/dist/components/CopyableText.d.ts

@@ -1,5 +1,6 @@
-export declare const CopyableText: import("react").ForwardRefExoticComponent<{
+export declare const CopyableText: (props: {
     label?: string;
     value: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+    ref?: React.Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CopyableText.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.d.ts","sourceRoot":"","sources":["../../src/components/CopyableText.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;YAMX,MAAM;WACP,MAAM;kDA4ElB,CAAA"}
+{"version":3,"file":"CopyableText.d.ts","sourceRoot":"","sources":["../../src/components/CopyableText.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC,4CA4EA,CAAA"}

package/dist/components/CycleTimer.d.ts

@@ -1,13 +1,13 @@
 export interface CycleTimerProps {
     /**
      * Callback that receives the timer control functions:
-     * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
+     * - `startNewCycle(maxTimeSeconds?, elapsedSeconds?)` - Start a new timer cycle (if maxTimeSeconds is omitted, runs as count-up timer)
      * - `pause()` - Pause the countdown while preserving remaining time
      * - `resume()` - Resume countdown from where it was paused
      * - `isPaused()` - Check current pause state
      */
     onCycleComplete: (controls: {
-        startNewCycle: (maxTimeSeconds: number, elapsedSeconds?: number) => void;
+        startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void;
         pause: () => void;
         resume: () => void;
         isPaused: () => boolean;
@@ -22,17 +22,22 @@ export interface CycleTimerProps {
     compact?: boolean;
     /** Additional CSS classes */
     className?: string;
+    /** Whether the timer is in an error state (pauses timer and shows error styling) */
+    hasError?: boolean;
 }
 /**
- * A circular gauge timer component that shows the remaining time of a cycle
+ * A circular gauge timer component that shows the remaining time of a cycle or counts up
  *
  * Features:
  * - Circular gauge with 264px diameter and 40px thickness
- * - Shows remaining time prominently in the center (60px font)
- * - Displays "remaining time" label at top and total time at bottom
- * - Automatically counts down and triggers callback when reaching zero
+ * - Two modes: count-down (with max time) or count-up (without max time)
+ * - Count-down mode: shows remaining time prominently, counts down to zero
+ * - Count-up mode: shows elapsed time, gauge progresses in minute steps
+ * - Displays appropriate labels based on mode
+ * - Automatically counts down/up and triggers callback when reaching zero (count-down only)
  * - Full timer control: start, pause, resume functionality
  * - Support for starting with elapsed time (resume mid-cycle)
+ * - Error state support: pauses timer and shows error styling (red color)
  * - Smooth spring-based progress animations for all state transitions
  * - Fully localized with i18next
  * - Material-UI theming integration
@@ -44,37 +49,49 @@ export interface CycleTimerProps {
  * @param variant - Visual variant: "default" (large gauge) or "small" (animated icon with text)
  * @param compact - For small variant: whether to hide remaining time details
  * @param className - Additional CSS classes
+ * @param hasError - Whether the timer is in an error state (pauses timer and shows error styling)
  *
  * Usage:
  * ```tsx
+ * // Count-down timer (with max time)
  * <CycleTimer
  *   onCycleComplete={(controls) => {
- *     // Start a 5-minute cycle
+ *     // Start a 5-minute countdown cycle
  *     controls.startNewCycle(300)
  *
  *     // Or start a 5-minute cycle with 2 minutes already elapsed
  *     controls.startNewCycle(300, 120)
+ *   }}
+ *   onCycleEnd={() => console.log('Cycle completed!')}
+ * />
  *
- *     // Pause the timer
- *     controls.pause()
+ * // Count-up timer (no max time)
+ * <CycleTimer
+ *   onCycleComplete={(controls) => {
+ *     // Start count-up timer
+ *     controls.startNewCycle()
  *
- *     // Resume the timer
- *     controls.resume()
+ *     // Or start count-up timer with some elapsed time
+ *     controls.startNewCycle(undefined, 120)
+ *   }}
+ * />
  *
- *     // Check if paused
- *     const paused = controls.isPaused()
+ * // Timer with error state
+ * <CycleTimer
+ *   hasError={errorCondition}
+ *   onCycleComplete={(controls) => {
+ *     controls.startNewCycle(300)
  *   }}
- *   onCycleEnd={() => console.log('Cycle completed!')}
  * />
  * ```
  *
  * Control Functions:
- * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
+ * - `startNewCycle(maxTimeSeconds?, elapsedSeconds?)` - Start a new timer cycle (omit maxTimeSeconds for count-up mode)
  * - `pause()` - Pause the countdown while preserving remaining time
  * - `resume()` - Resume countdown from where it was paused
  * - `isPaused()` - Check current pause state
  */
-export declare const CycleTimer: (({ onCycleComplete, onCycleEnd, autoStart, variant, compact, className, }: CycleTimerProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const CycleTimer: (({ onCycleComplete, onCycleEnd, autoStart, variant, compact, className, hasError, }: CycleTimerProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 //# sourceMappingURL=CycleTimer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CycleTimer.d.ts","sourceRoot":"","sources":["../../src/components/CycleTimer.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,eAAe,EAAE,CAAC,QAAQ,EAAE;QAC1B,aAAa,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;QACxE,KAAK,EAAE,MAAM,IAAI,CAAA;QACjB,MAAM,EAAE,MAAM,IAAI,CAAA;QAClB,QAAQ,EAAE,MAAM,OAAO,CAAA;KACxB,KAAK,IAAI,CAAA;IACV,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,UAAU,8EAShB,eAAe;;CA2YrB,CAAA"}
+{"version":3,"file":"CycleTimer.d.ts","sourceRoot":"","sources":["../../src/components/CycleTimer.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,eAAe,EAAE,CAAC,QAAQ,EAAE;QAC1B,aAAa,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;QACzE,KAAK,EAAE,MAAM,IAAI,CAAA;QACjB,MAAM,EAAE,MAAM,IAAI,CAAA;QAClB,QAAQ,EAAE,MAAM,OAAO,CAAA;KACxB,KAAK,IAAI,CAAA;IACV,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,eAAO,MAAM,UAAU,wFAUhB,eAAe;;CA0lBrB,CAAA"}

package/dist/components/DataGrid.d.ts

@@ -0,0 +1,66 @@
+import { Box } from "@mui/material";
+import { type DataGridProps, type GridColDef, type GridRowParams } from "@mui/x-data-grid";
+export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
+    /**
+     * Array of data items to display in the grid
+     */
+    data: T[];
+    /**
+     * Column definitions for the DataGrid
+     */
+    columns: GridColDef[];
+    /**
+     * Function to transform data items into DataGrid rows
+     * Should return an object with an 'id' field and other fields matching column definitions
+     */
+    getRowData: (item: T) => Record<string, unknown> & {
+        id: string | number;
+    };
+    /**
+     * Callback when a row is clicked
+     */
+    onRowClick?: (item: T, params: GridRowParams) => void;
+    /**
+     * Currently selected item (for highlighting)
+     */
+    selectedItem?: T | null;
+    /**
+     * Function to get the ID of an item (used for selection highlighting)
+     */
+    getItemId?: (item: T) => string | number;
+    /**
+     * Title displayed in the toolbar
+     */
+    title?: string;
+    /**
+     * Show item count in title
+     * @default true
+     */
+    showCount?: boolean;
+    /**
+     * Placeholder text for the search input
+     * @default "Search programs"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Additional DataGrid props to pass through
+     */
+    dataGridProps?: Partial<DataGridProps>;
+    /**
+     * Custom toolbar component to replace the default one
+     */
+    CustomToolbar?: React.ComponentType;
+    /**
+     * Select the first item by default
+     * @default false
+     */
+    selectFirstByDefault?: boolean;
+    /**
+     * Custom sx styles for the root container
+     */
+    sx?: React.ComponentProps<typeof Box>["sx"];
+}
+export declare const WandelbotsDataGrid: (<T>({ data, columns, getRowData, onRowClick, selectedItem, getItemId, title, showCount, searchPlaceholder, dataGridProps, CustomToolbar, selectFirstByDefault, sx, }: WandelbotsDataGridProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=DataGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../src/components/DataGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAiC,MAAM,eAAe,CAAA;AAClE,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,UAAU,EACf,KAAK,aAAa,EAQnB,MAAM,kBAAkB,CAAA;AAKzB,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAA;IAET;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAA;IAErB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAE1E;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IAErD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAA;IAExC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAEnC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;CAC5C;AAED,eAAO,MAAM,kBAAkB,IAE1B,CAAC,oKAcC,uBAAuB,CAAC,CAAC,CAAC;;CAmiBhC,CAAA"}

package/dist/components/LogPanel.d.ts

@@ -0,0 +1,38 @@
+import type { SxProps } from "@mui/material";
+import { LogStore } from "./LogStore";
+export type LogPanelProps = {
+    /** Log store instance to use, or create one automatically if not provided */
+    store?: LogStore;
+    /** Height of the component */
+    height?: string | number;
+    /** Additional styles */
+    sx?: SxProps;
+    /** Ref to the log store for external access */
+    onStoreReady?: (store: LogStore) => void;
+};
+/**
+ * A complete log panel component with built-in state management.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const [logStore, setLogStore] = useState<LogStore>()
+ *
+ *   return (
+ *     <LogPanel
+ *       height={400}
+ *       onStoreReady={setLogStore}
+ *     />
+ *   )
+ * }
+ *
+ * // Then use the store to add messages
+ * logStore?.addInfo("Operation completed successfully")
+ * logStore?.addError("Something went wrong")
+ * logStore?.addWarning("Warning message")
+ * ```
+ */
+export declare const LogPanel: ((props: LogPanelProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=LogPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogPanel.d.ts","sourceRoot":"","sources":["../../src/components/LogPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,MAAM,MAAM,aAAa,GAAG;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,wBAAwB;IACxB,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAA;CACzC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,WACF,aAAa;;CA2B/B,CAAA"}

package/dist/components/LogStore.d.ts

@@ -0,0 +1,12 @@
+import type { LogLevel, LogMessage } from "./LogViewer";
+export declare class LogStore {
+    messages: LogMessage[];
+    constructor();
+    addMessage: (message: string, level?: LogLevel) => void;
+    clearMessages: () => void;
+    addInfo: (message: string) => void;
+    addWarning: (message: string) => void;
+    addError: (message: string) => void;
+    addDebug: (message: string) => void;
+}
+//# sourceMappingURL=LogStore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogStore.d.ts","sourceRoot":"","sources":["../../src/components/LogStore.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAEvD,qBAAa,QAAQ;IACnB,QAAQ,EAAE,UAAU,EAAE,CAAK;;IAU3B,UAAU,GAAI,SAAS,MAAM,EAAE,QAAO,QAAiB,UAQtD;IAED,aAAa,aAEZ;IAED,OAAO,GAAI,SAAS,MAAM,UAEzB;IAED,UAAU,GAAI,SAAS,MAAM,UAE5B;IAED,QAAQ,GAAI,SAAS,MAAM,UAE1B;IAED,QAAQ,GAAI,SAAS,MAAM,UAE1B;CACF"}