@uipath/apollo-wind 0.8.1 → 0.9.1

package/dist/examples/flow-editor-layout-example.cjs

@@ -0,0 +1,309 @@
+"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__, {
+    CanvasToolbar: ()=>CanvasToolbar,
+    PublishToolbar: ()=>PublishToolbar,
+    FlowEditorLayout: ()=>FlowEditorLayout
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const button_cjs_namespaceObject = require("../components/ui/button.cjs");
+const resizable_cjs_namespaceObject = require("../components/ui/resizable.cjs");
+const separator_cjs_namespaceObject = require("../components/ui/separator.cjs");
+const switch_cjs_namespaceObject = require("../components/ui/switch.cjs");
+const tooltip_cjs_namespaceObject = require("../components/ui/tooltip.cjs");
+const index_cjs_namespaceObject = require("../components/ui/layout/index.cjs");
+const external_lib_index_cjs_namespaceObject = require("../lib/index.cjs");
+const react_label_namespaceObject = require("@radix-ui/react-label");
+const toggle_group_cjs_namespaceObject = require("../components/ui/toggle-group.cjs");
+const dropdown_menu_cjs_namespaceObject = require("../components/ui/dropdown-menu.cjs");
+function LatchedButton({ isActive, icon, label, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_cjs_namespaceObject.Tooltip, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: (0, external_lib_index_cjs_namespaceObject.cn)('w-[40px] h-[40px] rounded-r-2xl rounded-l-none bg-background border', isActive ? '-ml-px w-[41px] border-y-border border-r-border border-l-background' : 'border-l-0 border-border hover:bg-muted'),
+                    onClick: onClick,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: (0, external_lib_index_cjs_namespaceObject.cn)('flex items-center justify-center w-6 h-6 rounded-lg transition-colors', isActive ? 'bg-primary text-background' : 'bg-transparent text-foreground'),
+                        children: icon
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipContent, {
+                side: "right",
+                children: label
+            })
+        ]
+    });
+}
+function FlowEditorLayout({ className, sidebarOptions, sidebarContent, activeSidebarId, sidebarOpen = false, onSidebarChange, onSidebarOpenChange, mainContent, bottomContent, bottomOpen = false }) {
+    const containerRef = (0, external_react_namespaceObject.useRef)(null);
+    const bottomPanelRef = (0, external_react_namespaceObject.useRef)(null);
+    const switcherRef = (0, external_react_namespaceObject.useRef)(null);
+    const rafRef = (0, external_react_namespaceObject.useRef)(0);
+    const updateSwitcherPosition = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!containerRef.current || !switcherRef.current) return;
+        if (!bottomOpen) {
+            switcherRef.current.style.bottom = '24px';
+            return;
+        }
+        const size = bottomPanelRef.current?.getSize();
+        if (void 0 !== size) {
+            const containerHeight = containerRef.current.offsetHeight;
+            const bottomHeight = size / 100 * containerHeight;
+            switcherRef.current.style.bottom = `${bottomHeight + 24}px`;
+        }
+    }, [
+        bottomOpen
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        updateSwitcherPosition();
+        const handleResize = ()=>{
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(updateSwitcherPosition);
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>{
+            window.removeEventListener('resize', handleResize);
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [
+        updateSwitcherPosition
+    ]);
+    const handlePanelResize = (0, external_react_namespaceObject.useCallback)(()=>{
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(updateSwitcherPosition);
+    }, [
+        updateSwitcherPosition
+    ]);
+    const handlePanelSelect = (0, external_react_namespaceObject.useCallback)((panelId)=>{
+        if (activeSidebarId === panelId) onSidebarOpenChange?.(!sidebarOpen);
+        else {
+            onSidebarChange?.(panelId);
+            if (!sidebarOpen) onSidebarOpenChange?.(true);
+        }
+    }, [
+        activeSidebarId,
+        sidebarOpen,
+        onSidebarChange,
+        onSidebarOpenChange
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipProvider, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+            className: (0, external_lib_index_cjs_namespaceObject.cn)('h-screen bg-background', className),
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: (0, external_lib_index_cjs_namespaceObject.cn)('bg-background overflow-hidden transition-all duration-300 ease-in-out', sidebarOpen ? 'w-72' : 'w-0'),
+                    children: sidebarOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                        className: "w-72 h-full",
+                        children: sidebarContent
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                    ref: containerRef,
+                    className: "flex-1 relative bg-muted m-1 rounded-3xl border",
+                    children: [
+                        sidebarOptions && sidebarOptions.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                            ref: switcherRef,
+                            gap: 2,
+                            className: "absolute left-0 z-10",
+                            style: {
+                                bottom: 24
+                            },
+                            children: sidebarOptions.map((panel)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LatchedButton, {
+                                    isActive: activeSidebarId === panel.id && sidebarOpen,
+                                    icon: panel.icon,
+                                    label: panel.label,
+                                    onClick: ()=>handlePanelSelect(panel.id)
+                                }, panel.id))
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                            className: "flex-1 relative rounded-3xl overflow-hidden",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(resizable_cjs_namespaceObject.ResizablePanelGroup, {
+                                direction: "vertical",
+                                className: "h-full",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(resizable_cjs_namespaceObject.ResizablePanel, {
+                                        defaultSize: 100,
+                                        minSize: 30,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                                            className: "flex-1 h-full",
+                                            children: mainContent
+                                        })
+                                    }),
+                                    bottomOpen && bottomContent && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(resizable_cjs_namespaceObject.ResizableHandle, {}),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(resizable_cjs_namespaceObject.ResizablePanel, {
+                                                ref: bottomPanelRef,
+                                                defaultSize: 30,
+                                                minSize: 15,
+                                                maxSize: 50,
+                                                onResize: handlePanelResize,
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                                                    className: "flex-1 h-full bg-background",
+                                                    children: bottomContent
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function CanvasToolbar() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+        className: "absolute bottom-4 left-1/2 -translate-x-1/2",
+        align: "center",
+        gap: 1,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "flex items-center gap-1 rounded-lg border bg-background p-1.5",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(toggle_group_cjs_namespaceObject.ToggleGroup, {
+                    type: "single",
+                    defaultValue: "build",
+                    className: "gap-0",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(toggle_group_cjs_namespaceObject.ToggleGroupItem, {
+                            value: "build",
+                            className: "h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+                            children: "Build"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(toggle_group_cjs_namespaceObject.ToggleGroupItem, {
+                            value: "evaluate",
+                            className: "h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+                            children: "Evaluate"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(separator_cjs_namespaceObject.Separator, {
+                    orientation: "vertical",
+                    className: "mx-1 h-6"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Play, {
+                        className: "h-4 w-4"
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(separator_cjs_namespaceObject.Separator, {
+                    orientation: "vertical",
+                    className: "mx-1 h-6"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                        className: "h-4 w-4"
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Copy, {
+                        className: "h-4 w-4"
+                    })
+                })
+            ]
+        })
+    });
+}
+function PublishToolbar() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+        className: "absolute bottom-4 right-4",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "flex items-center gap-3 rounded-lg border bg-background p-1.5 pl-3",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_label_namespaceObject.Label, {
+                    htmlFor: "toolbar-active",
+                    className: "text-sm font-medium",
+                    children: "Active"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
+                    id: "toolbar-active"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(separator_cjs_namespaceObject.Separator, {
+                    orientation: "vertical",
+                    className: "h-6"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                variant: "ghost",
+                                size: "icon",
+                                className: "h-8 w-8",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MoreVertical, {
+                                    className: "h-4 w-4"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                            align: "end",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                    children: "Edit"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                    children: "Duplicate"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                    children: "Delete"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+exports.CanvasToolbar = __webpack_exports__.CanvasToolbar;
+exports.FlowEditorLayout = __webpack_exports__.FlowEditorLayout;
+exports.PublishToolbar = __webpack_exports__.PublishToolbar;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "CanvasToolbar",
+    "FlowEditorLayout",
+    "PublishToolbar"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/examples/flow-editor-layout-example.js

@@ -0,0 +1,269 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Copy, MoreVertical, Play, Plus } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
+import { Button } from "../components/ui/button.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../components/ui/resizable.js";
+import { Separator } from "../components/ui/separator.js";
+import { Switch } from "../components/ui/switch.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip.js";
+import { Column, Row } from "../components/ui/layout/index.js";
+import { cn } from "../lib/index.js";
+import { Label } from "@radix-ui/react-label";
+import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu.js";
+function LatchedButton({ isActive, icon, label, onClick }) {
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: cn('w-[40px] h-[40px] rounded-r-2xl rounded-l-none bg-background border', isActive ? '-ml-px w-[41px] border-y-border border-r-border border-l-background' : 'border-l-0 border-border hover:bg-muted'),
+                    onClick: onClick,
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: cn('flex items-center justify-center w-6 h-6 rounded-lg transition-colors', isActive ? 'bg-primary text-background' : 'bg-transparent text-foreground'),
+                        children: icon
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                side: "right",
+                children: label
+            })
+        ]
+    });
+}
+function FlowEditorLayout({ className, sidebarOptions, sidebarContent, activeSidebarId, sidebarOpen = false, onSidebarChange, onSidebarOpenChange, mainContent, bottomContent, bottomOpen = false }) {
+    const containerRef = useRef(null);
+    const bottomPanelRef = useRef(null);
+    const switcherRef = useRef(null);
+    const rafRef = useRef(0);
+    const updateSwitcherPosition = useCallback(()=>{
+        if (!containerRef.current || !switcherRef.current) return;
+        if (!bottomOpen) {
+            switcherRef.current.style.bottom = '24px';
+            return;
+        }
+        const size = bottomPanelRef.current?.getSize();
+        if (void 0 !== size) {
+            const containerHeight = containerRef.current.offsetHeight;
+            const bottomHeight = size / 100 * containerHeight;
+            switcherRef.current.style.bottom = `${bottomHeight + 24}px`;
+        }
+    }, [
+        bottomOpen
+    ]);
+    useEffect(()=>{
+        updateSwitcherPosition();
+        const handleResize = ()=>{
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(updateSwitcherPosition);
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>{
+            window.removeEventListener('resize', handleResize);
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [
+        updateSwitcherPosition
+    ]);
+    const handlePanelResize = useCallback(()=>{
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(updateSwitcherPosition);
+    }, [
+        updateSwitcherPosition
+    ]);
+    const handlePanelSelect = useCallback((panelId)=>{
+        if (activeSidebarId === panelId) onSidebarOpenChange?.(!sidebarOpen);
+        else {
+            onSidebarChange?.(panelId);
+            if (!sidebarOpen) onSidebarOpenChange?.(true);
+        }
+    }, [
+        activeSidebarId,
+        sidebarOpen,
+        onSidebarChange,
+        onSidebarOpenChange
+    ]);
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        children: /*#__PURE__*/ jsxs(Row, {
+            className: cn('h-screen bg-background', className),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: cn('bg-background overflow-hidden transition-all duration-300 ease-in-out', sidebarOpen ? 'w-72' : 'w-0'),
+                    children: sidebarOpen && /*#__PURE__*/ jsx(Column, {
+                        className: "w-72 h-full",
+                        children: sidebarContent
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Column, {
+                    ref: containerRef,
+                    className: "flex-1 relative bg-muted m-1 rounded-3xl border",
+                    children: [
+                        sidebarOptions && sidebarOptions.length > 0 && /*#__PURE__*/ jsx(Column, {
+                            ref: switcherRef,
+                            gap: 2,
+                            className: "absolute left-0 z-10",
+                            style: {
+                                bottom: 24
+                            },
+                            children: sidebarOptions.map((panel)=>/*#__PURE__*/ jsx(LatchedButton, {
+                                    isActive: activeSidebarId === panel.id && sidebarOpen,
+                                    icon: panel.icon,
+                                    label: panel.label,
+                                    onClick: ()=>handlePanelSelect(panel.id)
+                                }, panel.id))
+                        }),
+                        /*#__PURE__*/ jsx(Column, {
+                            className: "flex-1 relative rounded-3xl overflow-hidden",
+                            children: /*#__PURE__*/ jsxs(ResizablePanelGroup, {
+                                direction: "vertical",
+                                className: "h-full",
+                                children: [
+                                    /*#__PURE__*/ jsx(ResizablePanel, {
+                                        defaultSize: 100,
+                                        minSize: 30,
+                                        children: /*#__PURE__*/ jsx(Column, {
+                                            className: "flex-1 h-full",
+                                            children: mainContent
+                                        })
+                                    }),
+                                    bottomOpen && bottomContent && /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(ResizableHandle, {}),
+                                            /*#__PURE__*/ jsx(ResizablePanel, {
+                                                ref: bottomPanelRef,
+                                                defaultSize: 30,
+                                                minSize: 15,
+                                                maxSize: 50,
+                                                onResize: handlePanelResize,
+                                                children: /*#__PURE__*/ jsx(Column, {
+                                                    className: "flex-1 h-full bg-background",
+                                                    children: bottomContent
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function CanvasToolbar() {
+    return /*#__PURE__*/ jsx(Row, {
+        className: "absolute bottom-4 left-1/2 -translate-x-1/2",
+        align: "center",
+        gap: 1,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "flex items-center gap-1 rounded-lg border bg-background p-1.5",
+            children: [
+                /*#__PURE__*/ jsxs(ToggleGroup, {
+                    type: "single",
+                    defaultValue: "build",
+                    className: "gap-0",
+                    children: [
+                        /*#__PURE__*/ jsx(ToggleGroupItem, {
+                            value: "build",
+                            className: "h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+                            children: "Build"
+                        }),
+                        /*#__PURE__*/ jsx(ToggleGroupItem, {
+                            value: "evaluate",
+                            className: "h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+                            children: "Evaluate"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Separator, {
+                    orientation: "vertical",
+                    className: "mx-1 h-6"
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    children: /*#__PURE__*/ jsx(Play, {
+                        className: "h-4 w-4"
+                    })
+                }),
+                /*#__PURE__*/ jsx(Separator, {
+                    orientation: "vertical",
+                    className: "mx-1 h-6"
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    children: /*#__PURE__*/ jsx(Plus, {
+                        className: "h-4 w-4"
+                    })
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    children: /*#__PURE__*/ jsx(Copy, {
+                        className: "h-4 w-4"
+                    })
+                })
+            ]
+        })
+    });
+}
+function PublishToolbar() {
+    return /*#__PURE__*/ jsx(Row, {
+        className: "absolute bottom-4 right-4",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "flex items-center gap-3 rounded-lg border bg-background p-1.5 pl-3",
+            children: [
+                /*#__PURE__*/ jsx(Label, {
+                    htmlFor: "toolbar-active",
+                    className: "text-sm font-medium",
+                    children: "Active"
+                }),
+                /*#__PURE__*/ jsx(Switch, {
+                    id: "toolbar-active"
+                }),
+                /*#__PURE__*/ jsx(Separator, {
+                    orientation: "vertical",
+                    className: "h-6"
+                }),
+                /*#__PURE__*/ jsxs(DropdownMenu, {
+                    children: [
+                        /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsx(Button, {
+                                variant: "ghost",
+                                size: "icon",
+                                className: "h-8 w-8",
+                                children: /*#__PURE__*/ jsx(MoreVertical, {
+                                    className: "h-4 w-4"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                            align: "end",
+                            children: [
+                                /*#__PURE__*/ jsx(DropdownMenuItem, {
+                                    children: "Edit"
+                                }),
+                                /*#__PURE__*/ jsx(DropdownMenuItem, {
+                                    children: "Duplicate"
+                                }),
+                                /*#__PURE__*/ jsx(DropdownMenuItem, {
+                                    children: "Delete"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { CanvasToolbar, FlowEditorLayout, PublishToolbar };