@uipath/apollo-wind 0.9.0 → 0.10.0-pr219.03c9188

package/dist/components/custom/chat-steps-view.cjs

@@ -0,0 +1,308 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    StepsView: ()=>StepsView
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function HeaderDivider() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "h-9 w-px bg-border-subtle"
+    });
+}
+function StatusBadge({ label }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex h-10 items-center rounded-xl bg-brand-subtle px-4 py-2",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            className: "text-sm font-bold leading-5 text-foreground-accent-muted",
+            children: label
+        })
+    });
+}
+function StatItem({ value, label }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex flex-col gap-0.5",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-[15px] font-semibold leading-5 text-foreground",
+                children: value
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-sm font-medium leading-5 text-foreground-subtle",
+                children: label
+            })
+        ]
+    });
+}
+function ActionButton({ icon, label, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+        type: "button",
+        className: "flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:border-border-hover hover:text-foreground-hover",
+        onClick: onClick,
+        children: [
+            icon,
+            label
+        ]
+    });
+}
+function TabBar({ activeTab }) {
+    const tabs = [
+        {
+            id: 'steps',
+            label: 'Steps',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.List, {
+                className: "h-4 w-4"
+            })
+        },
+        {
+            id: 'history',
+            label: 'History',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Calendar, {
+                className: "h-4 w-4"
+            })
+        },
+        {
+            id: 'resources',
+            label: 'Resources',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Folder, {
+                className: "h-4 w-4"
+            })
+        }
+    ];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex h-10 items-center rounded-xl bg-surface-overlay p-1",
+        children: tabs.map((tab)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 transition-colors', activeTab === tab.id ? 'border border-border-subtle bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                children: [
+                    tab.icon,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: tab.label
+                    })
+                ]
+            }, tab.id))
+    });
+}
+function StepCard({ step, isHovered }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex h-16 items-center justify-between rounded-2xl border px-4', isHovered ? 'border-border-subtle bg-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]' : 'border-border-subtle'),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center gap-4",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex h-8 w-8 items-center justify-center rounded-lg bg-surface-hover",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Bot, {
+                            className: "h-5 w-5 text-foreground"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex flex-col",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-start gap-0.5",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-sm font-semibold leading-5 tracking-[-0.35px] text-foreground",
+                                        children: step.title
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                        className: "ms-1 text-xs leading-5 tracking-[-0.3px] text-foreground-subtle",
+                                        children: [
+                                            "• ",
+                                            step.stepRange
+                                        ]
+                                    })
+                                ]
+                            }),
+                            step.loop ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "flex h-5 w-5 items-center justify-center rounded-[10px] bg-surface-muted",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Repeat2, {
+                                            className: "h-3.5 w-3.5 text-foreground-on-accent"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                        className: "text-sm leading-5 text-foreground-subtle",
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                className: "font-semibold",
+                                                children: "Loop"
+                                            }),
+                                            ": ",
+                                            step.loop
+                                        ]
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-sm leading-5 tracking-[-0.35px] text-foreground-subtle",
+                                children: step.description
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                className: "h-4 w-4 shrink-0 text-foreground-subtle"
+            })
+        ]
+    });
+}
+function StepsView({ className, flowName = 'Flow name', flowDescription = 'Lorem ipsum dolor sit amet lorem ipsum.', status = 'ACTIVE', lastRun = '25/11/2025   12:15PM', totalRuns = 32, steps = [
+    {
+        id: '1',
+        title: 'Gmail',
+        stepRange: 'Steps 1 - 2',
+        description: 'Evaluate temperature conditions and proceed'
+    },
+    {
+        id: '2',
+        title: 'Salesforce',
+        stepRange: 'Steps 3 - 5',
+        description: 'Evaluate temperature conditions and proceed'
+    },
+    {
+        id: '3',
+        title: 'Excel - Process vendor from each file',
+        stepRange: 'Steps 6 - 12',
+        description: 'Evaluate temperature conditions and proceed',
+        loop: 'For each row in the "vendor list", starting from the second row.'
+    },
+    {
+        id: '4',
+        title: 'Gmail',
+        stepRange: 'Steps 1 - 2',
+        description: 'Evaluate temperature conditions and proceed'
+    }
+], activeTab = 'steps', onBack, onEdit, onPause }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 flex-col p-0', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex shrink-0 items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                className: "shrink-0 text-foreground transition-colors hover:text-foreground",
+                                onClick: onBack,
+                                "aria-label": "Go back",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ArrowLeft, {
+                                    className: "h-6 w-6"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex flex-col gap-1",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "whitespace-nowrap text-xl font-semibold leading-5 text-foreground",
+                                        children: flowName
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "whitespace-nowrap text-sm font-medium leading-5 text-foreground-subtle",
+                                        children: flowDescription
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(HeaderDivider, {}),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusBadge, {
+                        label: status
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex shrink-0 items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(HeaderDivider, {}),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatItem, {
+                                value: lastRun,
+                                label: "Last run"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex shrink-0 items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(HeaderDivider, {}),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatItem, {
+                                value: String(totalRuns),
+                                label: "Total runs"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex-1"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex shrink-0 items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ActionButton, {
+                                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Pencil, {
+                                    className: "h-4 w-4"
+                                }),
+                                label: "Edit",
+                                onClick: onEdit
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ActionButton, {
+                                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Pause, {
+                                    className: "h-4 w-4"
+                                }),
+                                label: "Pause",
+                                onClick: onPause
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex flex-1 flex-col rounded-t-2xl border border-border-muted bg-surface p-4",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TabBar, {
+                        activeTab: activeTab
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "mx-auto mt-20 flex w-full max-w-[680px] flex-col gap-6",
+                        children: steps.map((step, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StepCard, {
+                                step: step,
+                                isHovered: index === steps.length - 1
+                            }, step.id))
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.StepsView = __webpack_exports__.StepsView;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "StepsView"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/chat-steps-view.d.ts

@@ -0,0 +1,38 @@
+export interface FlowStep {
+    id: string;
+    title: string;
+    stepRange: string;
+    description: string;
+    /** Optional loop annotation */
+    loop?: string;
+}
+export interface StepsViewProps {
+    className?: string;
+    /** Flow name displayed in the header */
+    flowName?: string;
+    /** Flow description */
+    flowDescription?: string;
+    /** Status badge label */
+    status?: string;
+    /** Last run date/time */
+    lastRun?: string;
+    /** Total runs count */
+    totalRuns?: number;
+    /** Steps to display */
+    steps?: FlowStep[];
+    /** Currently active tab */
+    activeTab?: 'steps' | 'history' | 'resources';
+    /** Callback when back button is clicked */
+    onBack?: () => void;
+    /** Callback when Edit is clicked */
+    onEdit?: () => void;
+    /** Callback when Pause is clicked */
+    onPause?: () => void;
+}
+/**
+ * Canvas content for the Delegate Steps page.
+ *
+ * Shows a flow header with metadata, a tabbed content area,
+ * and a vertical list of step cards.
+ */
+export declare function StepsView({ className, flowName, flowDescription, status, lastRun, totalRuns, steps, activeTab, onBack, onEdit, onPause, }: StepsViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/chat-steps-view.js

@@ -0,0 +1,274 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, Bot, Calendar, ChevronDown, Folder, List, Pause, Pencil, Repeat2 } from "lucide-react";
+import { cn } from "../../lib/index.js";
+function HeaderDivider() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "h-9 w-px bg-border-subtle"
+    });
+}
+function StatusBadge({ label }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex h-10 items-center rounded-xl bg-brand-subtle px-4 py-2",
+        children: /*#__PURE__*/ jsx("span", {
+            className: "text-sm font-bold leading-5 text-foreground-accent-muted",
+            children: label
+        })
+    });
+}
+function StatItem({ value, label }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-0.5",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "text-[15px] font-semibold leading-5 text-foreground",
+                children: value
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "text-sm font-medium leading-5 text-foreground-subtle",
+                children: label
+            })
+        ]
+    });
+}
+function ActionButton({ icon, label, onClick }) {
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: "flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:border-border-hover hover:text-foreground-hover",
+        onClick: onClick,
+        children: [
+            icon,
+            label
+        ]
+    });
+}
+function TabBar({ activeTab }) {
+    const tabs = [
+        {
+            id: 'steps',
+            label: 'Steps',
+            icon: /*#__PURE__*/ jsx(List, {
+                className: "h-4 w-4"
+            })
+        },
+        {
+            id: 'history',
+            label: 'History',
+            icon: /*#__PURE__*/ jsx(Calendar, {
+                className: "h-4 w-4"
+            })
+        },
+        {
+            id: 'resources',
+            label: 'Resources',
+            icon: /*#__PURE__*/ jsx(Folder, {
+                className: "h-4 w-4"
+            })
+        }
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex h-10 items-center rounded-xl bg-surface-overlay p-1",
+        children: tabs.map((tab)=>/*#__PURE__*/ jsxs("div", {
+                className: cn('flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 transition-colors', activeTab === tab.id ? 'border border-border-subtle bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                children: [
+                    tab.icon,
+                    /*#__PURE__*/ jsx("span", {
+                        children: tab.label
+                    })
+                ]
+            }, tab.id))
+    });
+}
+function StepCard({ step, isHovered }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex h-16 items-center justify-between rounded-2xl border px-4', isHovered ? 'border-border-subtle bg-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)]' : 'border-border-subtle'),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-4",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex h-8 w-8 items-center justify-center rounded-lg bg-surface-hover",
+                        children: /*#__PURE__*/ jsx(Bot, {
+                            className: "h-5 w-5 text-foreground"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-start gap-0.5",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "text-sm font-semibold leading-5 tracking-[-0.35px] text-foreground",
+                                        children: step.title
+                                    }),
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "ms-1 text-xs leading-5 tracking-[-0.3px] text-foreground-subtle",
+                                        children: [
+                                            "• ",
+                                            step.stepRange
+                                        ]
+                                    })
+                                ]
+                            }),
+                            step.loop ? /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "flex h-5 w-5 items-center justify-center rounded-[10px] bg-surface-muted",
+                                        children: /*#__PURE__*/ jsx(Repeat2, {
+                                            className: "h-3.5 w-3.5 text-foreground-on-accent"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "text-sm leading-5 text-foreground-subtle",
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "font-semibold",
+                                                children: "Loop"
+                                            }),
+                                            ": ",
+                                            step.loop
+                                        ]
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsx("span", {
+                                className: "text-sm leading-5 tracking-[-0.35px] text-foreground-subtle",
+                                children: step.description
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ChevronDown, {
+                className: "h-4 w-4 shrink-0 text-foreground-subtle"
+            })
+        ]
+    });
+}
+function StepsView({ className, flowName = 'Flow name', flowDescription = 'Lorem ipsum dolor sit amet lorem ipsum.', status = 'ACTIVE', lastRun = '25/11/2025   12:15PM', totalRuns = 32, steps = [
+    {
+        id: '1',
+        title: 'Gmail',
+        stepRange: 'Steps 1 - 2',
+        description: 'Evaluate temperature conditions and proceed'
+    },
+    {
+        id: '2',
+        title: 'Salesforce',
+        stepRange: 'Steps 3 - 5',
+        description: 'Evaluate temperature conditions and proceed'
+    },
+    {
+        id: '3',
+        title: 'Excel - Process vendor from each file',
+        stepRange: 'Steps 6 - 12',
+        description: 'Evaluate temperature conditions and proceed',
+        loop: 'For each row in the "vendor list", starting from the second row.'
+    },
+    {
+        id: '4',
+        title: 'Gmail',
+        stepRange: 'Steps 1 - 2',
+        description: 'Evaluate temperature conditions and proceed'
+    }
+], activeTab = 'steps', onBack, onEdit, onPause }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex flex-1 flex-col p-0', className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex shrink-0 items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "shrink-0 text-foreground transition-colors hover:text-foreground",
+                                onClick: onBack,
+                                "aria-label": "Go back",
+                                children: /*#__PURE__*/ jsx(ArrowLeft, {
+                                    className: "h-6 w-6"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex flex-col gap-1",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "whitespace-nowrap text-xl font-semibold leading-5 text-foreground",
+                                        children: flowName
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "whitespace-nowrap text-sm font-medium leading-5 text-foreground-subtle",
+                                        children: flowDescription
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(HeaderDivider, {}),
+                    /*#__PURE__*/ jsx(StatusBadge, {
+                        label: status
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex shrink-0 items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ jsx(HeaderDivider, {}),
+                            /*#__PURE__*/ jsx(StatItem, {
+                                value: lastRun,
+                                label: "Last run"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex shrink-0 items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ jsx(HeaderDivider, {}),
+                            /*#__PURE__*/ jsx(StatItem, {
+                                value: String(totalRuns),
+                                label: "Total runs"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex-1"
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex shrink-0 items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(ActionButton, {
+                                icon: /*#__PURE__*/ jsx(Pencil, {
+                                    className: "h-4 w-4"
+                                }),
+                                label: "Edit",
+                                onClick: onEdit
+                            }),
+                            /*#__PURE__*/ jsx(ActionButton, {
+                                icon: /*#__PURE__*/ jsx(Pause, {
+                                    className: "h-4 w-4"
+                                }),
+                                label: "Pause",
+                                onClick: onPause
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-1 flex-col rounded-t-2xl border border-border-muted bg-surface p-4",
+                children: [
+                    /*#__PURE__*/ jsx(TabBar, {
+                        activeTab: activeTab
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "mx-auto mt-20 flex w-full max-w-[680px] flex-col gap-6",
+                        children: steps.map((step, index)=>/*#__PURE__*/ jsx(StepCard, {
+                                step: step,
+                                isHovered: index === steps.length - 1
+                            }, step.id))
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { StepsView };