@motiadev/workbench 0.0.6 → 0.0.7-build.20250529215343

package/dist/src/components/ui/theme-toggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThemeToggle: React.FC;

package/dist/src/components/ui/theme-toggle.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '@/hooks/use-theme';
+import { cn } from '@/lib/utils';
+export const ThemeToggle = () => {
+    const { theme, setTheme } = useTheme();
+    const toggleTheme = () => {
+        setTheme(theme === 'light' ? 'dark' : 'light');
+    };
+    return (_jsxs("button", { onClick: toggleTheme, className: "relative flex items-center cursor-pointer w-16 h-8 bg-muted rounded-full p-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "aria-label": `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`, children: [_jsx("div", { className: cn('absolute w-6 h-6 bg-background border border-border rounded-full shadow-sm transition-transform duration-200 ease-in-out', theme === 'dark' ? 'translate-x-8' : 'translate-x-0') }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10", children: _jsx(Sun, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'light' ? 'text-foreground' : 'text-muted-foreground') }) }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10 ml-2", children: _jsx(Moon, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'dark' ? 'text-foreground' : 'text-muted-foreground') }) })] }));
+};

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

@@ -5,4 +5,3 @@ 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/hooks/use-debounced.d.ts

@@ -0,0 +1 @@
+export declare const useDebounced: (fn: () => void, delay?: number) => () => void;

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

@@ -0,0 +1,18 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const useDebounced = (fn, delay = 500) => {
+    const saveTimeoutRef = useRef(null);
+    const debouncedFn = useCallback(() => {
+        if (saveTimeoutRef.current) {
+            clearTimeout(saveTimeoutRef.current);
+        }
+        saveTimeoutRef.current = setTimeout(fn, delay);
+    }, [fn, delay]);
+    useEffect(() => {
+        return () => {
+            if (saveTimeoutRef.current) {
+                clearTimeout(saveTimeoutRef.current);
+            }
+        };
+    }, []);
+    return debouncedFn;
+};

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

@@ -4,7 +4,5 @@ type Flow = {
 };
 export declare const useListFlows: () => {
     flows: Flow[];
-    isLoading: boolean;
 };
 export {};
-//# sourceMappingURL=use-list-flows.d.ts.map

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

@@ -1,12 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useStreamGroup } from '@motiadev/stream-client-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 };
+    const { data: flows } = useStreamGroup({
+        streamName: '__motia.flows',
+        groupId: 'default',
+    });
+    return { flows };
 };

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

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

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

@@ -1,22 +1,7 @@
 import { useLogs } from '@/stores/use-logs';
-import { useState, useEffect } from 'react';
-import { io } from 'socket.io-client';
-const socket = io('/');
+import { useStreamEventHandler, useStreamGroup } from '@motiadev/stream-client-react';
 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 };
+    const { event } = useStreamGroup({ streamName: '__motia.logs', groupId: 'default' });
+    useStreamEventHandler({ event, type: 'log', listener: addLog }, [addLog]);
 };

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

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

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

@@ -0,0 +1,6 @@
+type Theme = 'dark' | 'light' | 'system';
+export declare const useTheme: () => {
+    theme: Theme;
+    setTheme: (newTheme: Theme) => void;
+};
+export {};

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

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+const storageKey = 'motia-workbench-theme';
+const defaultTheme = localStorage.getItem(storageKey) || 'system';
+const updateTheme = (theme) => {
+    const root = window.document.body;
+    root.classList.remove('light', 'dark');
+    if (theme === 'system') {
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        root.classList.add(systemTheme);
+        return;
+    }
+    root.classList.add(theme);
+};
+export const useTheme = () => {
+    const [theme, _setTheme] = useState(defaultTheme);
+    useEffect(() => {
+        updateTheme(defaultTheme);
+    }, []);
+    const setTheme = useCallback((newTheme) => {
+        localStorage.setItem(storageKey, newTheme);
+        _setTheme(newTheme);
+        updateTheme(newTheme);
+    }, []);
+    return {
+        theme,
+        setTheme,
+    };
+};

package/dist/src/index.css

@@ -0,0 +1,169 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@config "../tailwind.config.js";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  line-height: 1.5;
+  font-size: 16px;
+
+  color-scheme: light dark;
+  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  font-optical-sizing: auto;
+
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(0.98 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+body {
+  margin: 0;
+  place-items: center;
+  min-height: 100dvh;
+  width: 100%;
+}
+
+body,
+#root {
+  width: 100dvw;
+  height: 100dvh;
+}
+
+strong {
+  font-weight: 800;
+}
+
+.react-flow__attribution {
+  display: none;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes flowDash {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -20;
+  }
+}
+
+.edge-animated {
+  stroke-dasharray: 5; /* length of dash pattern */
+  stroke-linecap: round; /* round the dash ends */
+  animation: flowDash 1s linear infinite;
+}

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

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

package/dist/src/main.d.ts

@@ -1,9 +1 @@
 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.js

@@ -1,15 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MotiaStreamProvider } from '@motiadev/stream-client-react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Route, Routes } from 'react-router';
+import { RootMotia } from './components/root-motia';
 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 });
+import { RouteWrapper } from './route-wrapper';
+import { Index } from './routes';
+import { EndpointsPage } from './routes/endpoints-page';
+import { Flow } from './routes/flow';
+import { LogsPage } from './routes/logs-page';
+import { StatesPage } from './routes/states-page';
 // Render the app
 const rootElement = document.getElementById('root');
 if (!rootElement.innerHTML) {
     const root = createRoot(rootElement);
-    root.render(_jsx(StrictMode, { children: _jsx(RouterProvider, { router: router }) }));
+    root.render(_jsx(StrictMode, { children: _jsx(MotiaStreamProvider, { address: "ws://localhost:3000", children: _jsx(BrowserRouter, { children: _jsx(RootMotia, { children: _jsx(RouteWrapper, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Index, {}) }), _jsx(Route, { path: "/flow/:id", element: _jsx(Flow, {}) }), _jsx(Route, { path: "/logs", element: _jsx(LogsPage, {}) }), _jsx(Route, { path: "/states", element: _jsx(StatesPage, {}) }), _jsx(Route, { path: "/endpoints", element: _jsx(EndpointsPage, {}) })] }) }) }) }) }) }));
 }

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

@@ -1,8 +1,5 @@
 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;
+type Props = PropsWithChildren<ApiNodeProps>;
+export declare const ApiNode: ({ data, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=api-node.d.ts.map

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

@@ -1,7 +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 })] }));
+import { DetailItem, NodeDetails } from './node-details';
+export const ApiNode = ({ data, children }) => {
+    return (_jsxs(BaseNode, { variant: "api", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.description && _jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: [_jsx(Webhook, { className: "w-3 h-3 text-muted-foreground/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), _jsx(NodeDetails, { type: "api", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Webhook URL", children: _jsxs("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: [_jsx(Webhook, { className: "w-3 h-3 text-muted-foreground/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] }) }) })] }));
 };

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

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

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

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

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

@@ -1,11 +1,12 @@
 import { type VariantProps } from 'class-variance-authority';
-import { PropsWithChildren } from 'react';
-declare const baseBackgroundVariants: (props?: ({
-    variant?: "event" | "api" | "noop" | null | undefined;
+import React, { PropsWithChildren } from 'react';
+declare const baseDot: (props?: ({
+    variant?: "event" | "api" | "noop" | "cron" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = PropsWithChildren<{
-    variant?: VariantProps<typeof baseBackgroundVariants>['variant'];
     title: string;
+    variant: VariantProps<typeof baseDot>['variant'];
+    language?: string;
     headerChildren?: React.ReactNode;
     className?: string;
     disableSourceHandle?: boolean;
@@ -13,4 +14,3 @@ type Props = PropsWithChildren<{
 }>;
 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.js

@@ -3,18 +3,23 @@ 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', {
+import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
+import { colorMap } from './colorMap';
+const baseDot = cva('w-[6px] h-[6px] rounded-full', {
     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',
+            event: 'bg-[rgba(0,117,255,1)]',
+            api: 'bg-[rgba(189,255,0,1)]',
+            noop: 'bg-[rgba(255,49,234,1)]',
+            cron: 'bg-[rgba(255,113,11,1)]',
         },
     },
 });
-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] }));
+const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
+const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-foreground flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _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" })] }));
+    const { title, variant, children, disableSourceHandle, disableTargetHandle, language } = props;
+    return (_jsx("div", { className: "p-[1px] rounded-lg max-w-[350px] ", children: _jsx("div", { className: "rounded-lg bg-background p-4 border border-muted border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, style: {
+                borderColor: colorMap[variant],
+            }, children: _jsxs("div", { className: "group relative", children: [_jsx(HeaderBar, { text: title, variant: variant, children: _jsx(LanguageIndicator, { language: language }) }), _jsx("div", { className: "pt-4 space-y-3", children: children }), !disableTargetHandle && _jsx(BaseHandle, { type: "target", position: Position.Top, variant: variant }), !disableSourceHandle && _jsx(BaseHandle, { type: "source", position: Position.Bottom, variant: variant }), _jsx("div", { className: "absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-background rounded-md border border-white/5" })] }) }) }));
 };

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

@@ -0,0 +1,6 @@
+export declare const colorMap: {
+    event: string;
+    api: string;
+    noop: string;
+    cron: string;
+};

package/dist/src/publicComponents/colorMap.js

@@ -0,0 +1,6 @@
+export const colorMap = {
+    event: 'rgb(0,117,255)',
+    api: 'rgb(189,255,0)',
+    noop: 'rgb(255,49,234)',
+    cron: 'rgb(255,113,11)',
+};

package/dist/src/publicComponents/components/header-bar.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+import React from 'react';
+declare const baseDot: (props?: ({
+    variant?: "event" | "api" | "noop" | "cron" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const HeaderBar: ({ text, variant, children, }: {
+    text: string;
+    variant: VariantProps<typeof baseDot>["variant"];
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/publicComponents/components/header-bar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+const baseDot = cva('w-[6px] h-[6px] rounded-full', {
+    variants: {
+        variant: {
+            event: 'bg-[rgba(0,117,255,1)]',
+            api: 'bg-[rgba(189,255,0,1)]',
+            noop: 'bg-[rgba(255,49,234,1)]',
+            cron: 'bg-[rgba(255,113,11,1)]',
+        },
+    },
+});
+const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
+export const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-foreground flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));

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

@@ -0,0 +1,2 @@
+import { CronNodeProps } from './node-props';
+export declare const CronNode: ({ data }: CronNodeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseNode } from './base-node';
+import { Clock } from 'lucide-react';
+import { NodeDetails, DetailItem } from './node-details';
+export const CronNode = ({ data }) => {
+    return (_jsxs(BaseNode, { variant: "cron", title: data.name, language: data.language, headerChildren: _jsx(Clock, { className: "w-4 h-4 text-purple-400" }), disableTargetHandle: !data.virtualSubscribes?.length, disableSourceHandle: !data.virtualEmits?.length && !data.emits?.length, children: [_jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), _jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }), _jsx(NodeDetails, { type: "cron", name: data.name, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Cron Expression", children: _jsx("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: _jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }) }) }) })] }));
+};

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

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

package/dist/src/publicComponents/emits.js

@@ -1,6 +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;
+const toTopic = (emit) => typeof emit === 'string' ? emit : emit.topic;
 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)))) }));
+    return (_jsx(_Fragment, { children: emits.map((emit) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-muted-foreground", "data-testid": `emits__${toTopic(emit)}`, children: [_jsx(Send, { className: "w-4 h-4 text-muted-foreground/60" }), _jsx("div", { className: "font-mono tracking-wider", children: toTopic(emit) })] }, toTopic(emit)))) }));
 };

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

@@ -1,9 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { EventNodeProps } from './node-props';
 type Props = PropsWithChildren<EventNodeProps & {
-    excludePubsub?: boolean;
     className?: string;
 }>;
 export declare const EventNode: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=event-node.d.ts.map

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

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
 import { BaseNode } from './base-node';
-import { Emits } from './emits';
-import { Subscribe } from './subscribe';
+import { NodeDetails } from './node-details';
 export const EventNode = (props) => {
-    const { data, excludePubsub, children } = props;
-    return (_jsxs(BaseNode, { variant: "event", title: data.name, disableSourceHandle: !data.emits.length, disableTargetHandle: !data.subscribes.length, headerChildren: _jsx(LanguageIndicator, { language: data.language }), children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children, !excludePubsub && (_jsx("div", { className: "space-y-2 pt-2 border-t border-white/10", children: _jsx(Subscribe, { data: data }) })), _jsx(Emits, { emits: data.emits })] }));
+    const { data, children } = props;
+    return (_jsxs(BaseNode, { variant: "event", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [_jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), children, _jsx(NodeDetails, { type: "event", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language })] }));
 };

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

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+type Props = PropsWithChildren<{
+    name: string;
+    type: 'event' | 'api' | 'noop' | 'cron';
+    subscribes?: string[];
+    emits?: Array<string | {
+        topic: string;
+        label?: string;
+    }>;
+    description?: string;
+    language?: string;
+}>;
+export declare const DetailItem: React.FC<PropsWithChildren<{
+    label: string;
+}>>;
+export declare const NodeDetails: React.FC<Props>;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from 'lucide-react';
+import { DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../components/ui/dialog';
+import { DialogContent } from '../components/ui/dialog';
+import { Dialog } from '../components/ui/dialog';
+import { Label } from '../components/ui/label';
+import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
+import { Emits } from './emits';
+import { Subscribe } from './subscribe';
+import { colorMap } from './colorMap';
+import { HeaderBar } from './components/header-bar';
+export const DetailItem = (props) => {
+    const { label, children } = props;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { className: "text-foreground", children: label }), children] }));
+};
+export const NodeDetails = (props) => {
+    const { name, type, subscribes, emits, description, language, children } = props;
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx("div", { className: "flex justify-end gap-2", children: _jsx("div", { className: "border border-solid border-border/50 p-1 rounded-md cursor-pointer", children: _jsx(ChevronRight, { className: "w-4 h-4" }) }) }) }), _jsxs(DialogContent, { className: "border border-solid", style: { borderColor: colorMap[type] }, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: _jsx(HeaderBar, { variant: type, text: name }) }) }), _jsx(DialogDescription, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [description && (_jsx(DetailItem, { label: "Description", children: _jsx("span", { className: "text-sm text-muted-foreground", children: description }) })), _jsx(DetailItem, { label: "Language", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LanguageIndicator, { language: language }), _jsx("span", { className: "capitalize", children: language })] }) }), subscribes && (_jsx(DetailItem, { label: "Subscribes", children: _jsx(Subscribe, { subscribes: subscribes }) })), emits && (_jsx(DetailItem, { label: "Emits", children: _jsx(Emits, { emits: emits }) })), children] }) })] })] }));
+};