@wandelbots/wandelbots-js-react-components 2.28.0 → 2.29.0-pr.feature-add-cycle-timer.368.cb225d2

package/dist/components/CycleTimer.d.ts

@@ -0,0 +1,79 @@
+export interface CycleTimerProps {
+    /**
+     * Callback that receives the timer control functions:
+     * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
+     * - `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;
+        pause: () => void;
+        resume: () => void;
+        isPaused: () => boolean;
+    }) => void;
+    /** Callback fired when a cycle actually completes (reaches zero) */
+    onCycleEnd?: () => void;
+    /** Whether the timer should start automatically when maxTime is set */
+    autoStart?: boolean;
+    /** Visual variant of the timer */
+    variant?: "default" | "small";
+    /** For small variant: whether to show remaining time details (compact hides them) */
+    compact?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A circular gauge timer component that shows the remaining time of a cycle
+ *
+ * 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
+ * - Full timer control: start, pause, resume functionality
+ * - Support for starting with elapsed time (resume mid-cycle)
+ * - Fully localized with i18next
+ * - Material-UI theming integration
+ * - Small variant with animated progress icon (gauge border only) next to text
+ *
+ * @param onCycleComplete - Callback that receives timer control functions
+ * @param onCycleEnd - Optional callback fired when a cycle actually completes (reaches zero)
+ * @param autoStart - Whether to start timer automatically (default: true)
+ * @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
+ *
+ * Usage:
+ * ```tsx
+ * <CycleTimer
+ *   onCycleComplete={(controls) => {
+ *     // Start a 5-minute cycle
+ *     controls.startNewCycle(300)
+ *
+ *     // Or start a 5-minute cycle with 2 minutes already elapsed
+ *     controls.startNewCycle(300, 120)
+ *
+ *     // Pause the timer
+ *     controls.pause()
+ *
+ *     // Resume the timer
+ *     controls.resume()
+ *
+ *     // Check if paused
+ *     const paused = controls.isPaused()
+ *   }}
+ *   onCycleEnd={() => console.log('Cycle completed!')}
+ * />
+ * ```
+ *
+ * Control Functions:
+ * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
+ * - `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) & {
+    displayName: string;
+};
+//# sourceMappingURL=CycleTimer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CycleTimer.d.ts","sourceRoot":"","sources":["../../src/components/CycleTimer.tsx"],"names":[],"mappings":"AAOA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,UAAU,8EAShB,eAAe;;CAoRrB,CAAA"}

package/dist/components/ProgramControl.d.ts

@@ -0,0 +1,43 @@
+export type ProgramState = "idle" | "running" | "paused" | "stopping";
+export interface ProgramControlProps {
+    /** The current state of the program control */
+    state: ProgramState;
+    /** Callback fired when the run/resume button is clicked */
+    onRun: () => void;
+    /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */
+    onPause?: () => void;
+    /** Callback fired when the stop button is clicked */
+    onStop: () => void;
+    /**
+     * Function to reset the component from 'stopping' state back to 'idle'.
+     * This must be called manually by the user when requiresManualReset is true.
+     */
+    onReset?: () => void;
+    /**
+     * When true, the component will stay in 'stopping' state until onReset is called manually.
+     * When false (default), auto-resets to 'idle' after 2 seconds.
+     */
+    requiresManualReset?: boolean;
+    /**
+     * Variant of the component:
+     * - 'with_pause': Shows run/pause/stop buttons (default)
+     * - 'without_pause': Shows only run/stop buttons
+     */
+    variant?: "with_pause" | "without_pause";
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * A control component for program execution with run, pause, and stop functionality.
+ *
+ * Features:
+ * - State machine with idle, running, paused, and stopping states
+ * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
+ * - Optional manual reset functionality
+ * - Responsive design with 110px circular buttons
+ * - Material-UI theming integration
+ */
+export declare const ProgramControl: (({ state, onRun, onPause, onStop, onReset, requiresManualReset, variant, className, }: ProgramControlProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=ProgramControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramControl.d.ts","sourceRoot":"","sources":["../../src/components/ProgramControl.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;AAErE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,YAAY,CAAA;IACnB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qDAAqD;IACrD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,eAAe,CAAA;IACxC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AASD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,0FAWpB,mBAAmB;;CAuJzB,CAAA"}

package/dist/components/jogging/JoggingStore.d.ts

@@ -113,7 +113,7 @@ export declare class JoggingStore {
     saveToLocalStorage(): void;
     get isLocked(): boolean;
     get localStorageSave(): {
-        selectedTabId: "cartesian" | "joint" | "debug";
+        selectedTabId: "debug" | "cartesian" | "joint";
         selectedCoordSystemId: string;
         selectedTcpId: string;
         selectedOrientation: string;