@motiadev/workbench 0.0.1 → 0.0.3

package/dist/src/components/ui/sidebar.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { PanelLeft } from 'lucide-react';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+    return context;
+}
+const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback((value) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        }
+        else {
+            _setOpen(openState);
+        }
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, [setOpenProp, open]);
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = React.useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { style: {
+                    '--sidebar-width': SIDEBAR_WIDTH,
+                    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                    ...style,
+                }, className: cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', className), ref: ref, ...props, children: children }) }) }));
+});
+SidebarProvider.displayName = 'SidebarProvider';
+const Sidebar = React.forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    if (collapsible === 'none') {
+        return (_jsx("div", { className: cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', className), ref: ref, ...props, children: children }));
+    }
+    if (isMobile) {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsx(SheetContent, { "data-sidebar": "sidebar", "data-mobile": "true", className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
+                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                }, side: side, children: _jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) }));
+    }
+    return (_jsxs("div", { ref: ref, className: "group peer hidden md:block text-sidebar-foreground", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [_jsx("div", { className: cn('duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]') }), _jsx("div", { className: cn('duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex', side === 'left'
+                    ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                    : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow", children: children }) })] }));
+});
+Sidebar.displayName = 'Sidebar';
+const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (_jsxs(Button, { ref: ref, "data-sidebar": "trigger", variant: "ghost", size: "icon", className: cn('h-7 w-7', className), onClick: (event) => {
+            onClick?.(event);
+            toggleSidebar();
+        }, ...props, children: [_jsx(PanelLeft, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (_jsx("button", { ref: ref, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
+});
+SidebarRail.displayName = 'SidebarRail';
+const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("main", { ref: ref, className: cn('relative flex min-h-svh flex-1 flex-col bg-background', 'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props }));
+});
+SidebarInset.displayName = 'SidebarInset';
+const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(Input, { ref: ref, "data-sidebar": "input", className: cn('h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', className), ...props }));
+});
+SidebarInput.displayName = 'SidebarInput';
+const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("div", { ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props });
+});
+SidebarHeader.displayName = 'SidebarHeader';
+const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("div", { ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props });
+});
+SidebarFooter.displayName = 'SidebarFooter';
+const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(Separator, { ref: ref, "data-sidebar": "separator", className: cn('mx-2 w-auto bg-sidebar-border', className), ...props }));
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
+});
+SidebarContent.displayName = 'SidebarContent';
+const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
+});
+SidebarGroup.displayName = 'SidebarGroup';
+const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "group-label", className: cn('duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "group-action", className: cn('absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props })));
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className), ...props })));
+SidebarMenu.displayName = 'SidebarMenu';
+const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props })));
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    const { isMobile, state } = useSidebar();
+    const button = (_jsx(Comp, { ref: ref, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    if (!tooltip) {
+        return button;
+    }
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            children: tooltip,
+        };
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, ...tooltip })] }));
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "menu-action", className: cn('absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
+            'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0', className), ...props }));
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": "menu-badge", className: cn('absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props })));
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+    // Random width between 50 to 90%.
+    const width = React.useMemo(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+    return (_jsxs("div", { ref: ref, "data-sidebar": "menu-skeleton", className: cn('rounded-md h-8 flex gap-2 px-2 items-center', className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 flex-1 max-w-[--skeleton-width]", "data-sidebar": "menu-skeleton-text", style: {
+                    '--skeleton-width': width,
+                } })] }));
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": "menu-sub", className: cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props })));
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => (_jsx("li", { ref: ref, ...props })));
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/src/components/ui/skeleton.d.ts

@@ -0,0 +1,3 @@
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/src/components/ui/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAE9E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/src/components/ui/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+function Skeleton({ className, ...props }) {
+    return _jsx("div", { className: cn('animate-pulse rounded-md bg-primary/10', className), ...props });
+}
+export { Skeleton };

package/dist/src/components/ui/switch.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };
+//# sourceMappingURL=switch.d.ts.map

package/dist/src/components/ui/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAA;AAI1D,QAAA,MAAM,MAAM,8JAkBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/src/components/ui/switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/lib/utils";
+const Switch = React.forwardRef(({ className, ...props }, ref) => (_jsx(SwitchPrimitives.Root, { className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") }) })));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export { Switch };

package/dist/src/components/ui/table.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+//# sourceMappingURL=table.d.ts.map

package/dist/src/components/ui/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,KAAK,iHAMV,CAAA;AAGD,QAAA,MAAM,WAAW,+HAEhB,CAAA;AAGD,QAAA,MAAM,SAAS,+HAId,CAAA;AAGD,QAAA,MAAM,WAAW,+HAIhB,CAAA;AAGD,QAAA,MAAM,QAAQ,uHAQb,CAAA;AAGD,QAAA,MAAM,SAAS,2HAWd,CAAA;AAGD,QAAA,MAAM,SAAS,2HAQd,CAAA;AAGD,QAAA,MAAM,YAAY,+HAIjB,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/dist/src/components/ui/table.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+const Table = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm', className), ...props }) })));
+Table.displayName = 'Table';
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('[&_tr]:border-b', className), ...props }));
+TableHeader.displayName = 'TableHeader';
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('[&_tr:last-child]:border-0', className), ...props })));
+TableBody.displayName = 'TableBody';
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
+TableFooter.displayName = 'TableFooter';
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
+TableRow.displayName = 'TableRow';
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
+TableHead.displayName = 'TableHead';
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
+TableCell.displayName = 'TableCell';
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('mt-4 text-sm text-muted-foreground', className), ...props })));
+TableCaption.displayName = 'TableCaption';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/src/components/ui/textarea.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/src/components/ui/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,QAAQ,0LAcZ,CAAA;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/src/components/ui/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("textarea", { className: cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref, ...props }));
+});
+Textarea.displayName = "Textarea";
+export { Textarea };

package/dist/src/components/ui/tooltip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/src/components/ui/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,QAAA,MAAM,eAAe,iDAA4B,CAAA;AAEjD,QAAA,MAAM,OAAO,yCAAwB,CAAA;AAErC,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,cAAc,gKAelB,CAAA;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/src/components/ui/tooltip.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@/lib/utils';
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/src/hooks/use-list-flows.d.ts

@@ -0,0 +1,10 @@
+type Flow = {
+    id: string;
+    name: string;
+};
+export declare const useListFlows: () => {
+    flows: Flow[];
+    isLoading: boolean;
+};
+export {};
+//# sourceMappingURL=use-list-flows.d.ts.map

package/dist/src/hooks/use-list-flows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-list-flows.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-list-flows.tsx"],"names":[],"mappings":"AAEA,KAAK,IAAI,GAAG;IACV,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,YAAY;;;CAYxB,CAAA"}

package/dist/src/hooks/use-list-flows.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+export const useListFlows = () => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [flows, setFlows] = useState([]);
+    useEffect(() => {
+        fetch('/flows')
+            .then((res) => res.json())
+            .then(setFlows)
+            .finally(() => setIsLoading(false));
+    }, []);
+    return { flows, isLoading };
+};

package/dist/src/hooks/use-log-listener.d.ts

@@ -0,0 +1,6 @@
+type UseWebSocketReturn = {
+    isConnected: boolean;
+};
+export declare const useLogListener: () => UseWebSocketReturn;
+export {};
+//# sourceMappingURL=use-log-listener.d.ts.map

package/dist/src/hooks/use-log-listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-log-listener.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-log-listener.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,OAAO,CAAA;CACrB,CAAA;AAID,eAAO,MAAM,cAAc,QAAO,kBAqBjC,CAAA"}

package/dist/src/hooks/use-log-listener.js

@@ -0,0 +1,22 @@
+import { useLogs } from '@/stores/use-logs';
+import { useState, useEffect } from 'react';
+import { io } from 'socket.io-client';
+const socket = io('/');
+export const useLogListener = () => {
+    const [isConnected, setIsConnected] = useState(socket.connected);
+    const addLog = useLogs((state) => state.addLog);
+    useEffect(() => {
+        const onConnect = () => setIsConnected(true);
+        const onDisconnect = () => setIsConnected(false);
+        const onLog = (log) => addLog(log);
+        socket.on('connect', onConnect);
+        socket.on('disconnect', onDisconnect);
+        socket.on('log', onLog);
+        return () => {
+            socket.off('connect', onConnect);
+            socket.off('disconnect', onDisconnect);
+            socket.off('log', onLog);
+        };
+    }, [addLog]);
+    return { isConnected };
+};

package/dist/src/hooks/use-mobile.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/src/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-mobile.tsx"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAc1B"}

package/dist/src/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/src/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/src/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/src/main.d.ts

@@ -0,0 +1,9 @@
+import './index.css';
+declare const router: import("@tanstack/react-router").Router<import("@tanstack/react-router").RootRoute<undefined, {}, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, {}, undefined, import("./routeTree.gen").RootRouteChildren, import("./routeTree.gen").FileRouteTypes>, import("@tanstack/react-router").TrailingSlashOption, boolean, import("@tanstack/history").RouterHistory, Record<string, any>, Record<string, any>>;
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: typeof router;
+    }
+}
+export {};
+//# sourceMappingURL=main.d.ts.map

package/dist/src/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.tsx"],"names":[],"mappings":"AAEA,OAAO,aAAa,CAAA;AAOpB,QAAA,MAAM,MAAM,wbAA8B,CAAA;AAG1C,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAU,QAAQ;QAChB,MAAM,EAAE,OAAO,MAAM,CAAA;KACtB;CACF"}

package/dist/src/main.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+// Import the generated route tree
+import { routeTree } from './routeTree.gen';
+// Create a new router instance
+const router = createRouter({ routeTree });
+// Render the app
+const rootElement = document.getElementById('root');
+if (!rootElement.innerHTML) {
+    const root = createRoot(rootElement);
+    root.render(_jsx(StrictMode, { children: _jsx(RouterProvider, { router: router }) }));
+}

package/dist/src/publicComponents/api-node.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { ApiNodeProps } from './node-props';
+type Props = PropsWithChildren<ApiNodeProps & {
+    excludePubsub?: boolean;
+}>;
+export declare const ApiNode: ({ data, children, excludePubsub }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=api-node.d.ts.map

package/dist/src/publicComponents/api-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-node.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/api-node.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE3C,KAAK,KAAK,GAAG,iBAAiB,CAAC,YAAY,GAAG;IAAE,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAA;AAE1E,eAAO,MAAM,OAAO,sCAAuC,KAAK,4CAmB/D,CAAA"}

package/dist/src/publicComponents/api-node.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Webhook } from 'lucide-react';
+import { BaseNode } from './base-node';
+import { Emits } from './emits';
+export const ApiNode = ({ data, children, excludePubsub }) => {
+    return (_jsxs(BaseNode, { variant: "api", title: data.name, disableSourceHandle: !data.emits?.length, disableTargetHandle: !data.subscribes?.length, children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), !excludePubsub && _jsx(Emits, { emits: data.emits })] }));
+};

package/dist/src/publicComponents/base-handle.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+import { HandleProps } from '@xyflow/react';
+type Props = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    isHidden?: boolean;
+};
+export declare const BaseHandle: React.FC<Props>;
+export {};
+//# sourceMappingURL=base-handle.d.ts.map

package/dist/src/publicComponents/base-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-handle.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/base-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAgC,MAAM,eAAe,CAAA;AAGzE,KAAK,KAAK,GAAG,WAAW,GACtB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,GAAG;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiCtC,CAAA"}

package/dist/src/publicComponents/base-handle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Position, Handle as RFHandle } from '@xyflow/react';
+import clsx from 'clsx';
+export const BaseHandle = (props) => {
+    const { isHidden, position, ...rest } = props;
+    return (_jsx("div", { className: clsx('absolute w-1 h-1', position === Position.Top && '-top-[10px]', position === Position.Bottom && '-bottom-[10px]', 'left-1/2 -ml-[2px]', isHidden && 'hidden'), children: _jsx(RFHandle, { ...rest, position: position, className: "\n        !static\n        !w-1\n        !h-1\n        !min-w-[6px]\n        !min-h-[6px]\n        !p-0\n        !border-none\n        !bg-[#666666]\n        !transform-none\n        !rounded-full\n        !outline-none\n        !shadow-none\n      " }) }));
+};

package/dist/src/publicComponents/base-node.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+declare const baseBackgroundVariants: (props?: ({
+    variant?: "event" | "api" | "noop" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Props = PropsWithChildren<{
+    variant?: VariantProps<typeof baseBackgroundVariants>['variant'];
+    title: string;
+    headerChildren?: React.ReactNode;
+    className?: string;
+    disableSourceHandle?: boolean;
+    disableTargetHandle?: boolean;
+}>;
+export declare const BaseNode: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=base-node.d.ts.map

package/dist/src/publicComponents/base-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-node.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/base-node.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAKzC,QAAA,MAAM,sBAAsB;;8EAQ1B,CAAA;AAEF,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC,SAAS,CAAC,CAAA;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAC,CAAA;AASF,eAAO,MAAM,QAAQ,UAAW,KAAK,4CAsBpC,CAAA"}

package/dist/src/publicComponents/base-node.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { Position } from '@xyflow/react';
+import { cva } from 'class-variance-authority';
+import { BaseHandle } from './base-handle';
+const baseNodeVariants = cva('relative flex flex-col min-w-[300px] rounded-md overflow-hidden font-mono');
+const baseBackgroundVariants = cva('absolute -inset-[1px] rounded-md bg-gradient-to-r', {
+    variants: {
+        variant: {
+            event: 'from-teal-500/20 to-teal-400/10',
+            api: 'from-blue-500/20 to-blue-400/10',
+            noop: 'from-white/20 to-white/10',
+        },
+    },
+});
+const HeaderBar = ({ text, children }) => (_jsxs("div", { className: "px-3 py-1 border-b border-white/20 bg-black/30 text-xs text-white/70 flex justify-between items-center", children: [_jsx("span", { children: text }), children] }));
+export const BaseNode = (props) => {
+    const { title, variant, className, children, disableSourceHandle, disableTargetHandle, headerChildren } = props;
+    return (_jsxs("div", { className: "group relative", children: [_jsx("div", { className: cn(baseBackgroundVariants({ variant })) }), _jsxs("div", { className: cn(baseNodeVariants(), className), children: [_jsx(HeaderBar, { text: title, children: headerChildren }), _jsx("div", { className: "p-4 space-y-3", children: children })] }), !disableTargetHandle && _jsx(BaseHandle, { type: "target", position: Position.Top }), !disableSourceHandle && _jsx(BaseHandle, { type: "source", position: Position.Bottom }), _jsx("div", { className: "absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-black/20 rounded-md border border-white/5" })] }));
+};

package/dist/src/publicComponents/emits.d.ts

@@ -0,0 +1,5 @@
+import { EventNodeData } from '../views/flow/nodes/nodes.types';
+export declare const Emits: React.FC<{
+    emits: EventNodeData['emits'];
+}>;
+//# sourceMappingURL=emits.d.ts.map

package/dist/src/publicComponents/emits.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emits.d.ts","sourceRoot":"","sources":["../../../src/publicComponents/emits.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAA;AAK/D,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;CAAE,CAe7D,CAAA"}

package/dist/src/publicComponents/emits.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Send } from 'lucide-react';
+const toType = (emit) => typeof emit === 'string' ? emit : emit.type;
+export const Emits = ({ emits }) => {
+    return (_jsx(_Fragment, { children: emits.map((emit) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-white/60", "data-testid": `emits__${toType(emit)}`, children: [_jsx(Send, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: toType(emit) })] }, toType(emit)))) }));
+};