@motiadev/workbench 0.13.2-beta.164-110989 → 0.13.2-beta.164-681857

package/dist/src/lib/__tests__/utils.test.js

@@ -0,0 +1,94 @@
+import { formatDuration } from '../utils';
+describe('formatDuration', () => {
+    describe('milliseconds', () => {
+        it('should format values under 1 second as milliseconds', () => {
+            expect(formatDuration(0)).toBe('0ms');
+            expect(formatDuration(1)).toBe('1ms');
+            expect(formatDuration(250)).toBe('250ms');
+            expect(formatDuration(500)).toBe('500ms');
+            expect(formatDuration(999)).toBe('999ms');
+        });
+    });
+    describe('seconds', () => {
+        it('should format values between 1 second and 1 minute as seconds with 1 decimal', () => {
+            expect(formatDuration(1000)).toBe('1.0s');
+            expect(formatDuration(1500)).toBe('1.5s');
+            expect(formatDuration(15000)).toBe('15.0s');
+            expect(formatDuration(45500)).toBe('45.5s');
+            expect(formatDuration(59999)).toBe('60.0s');
+        });
+        it('should round to 1 decimal place', () => {
+            expect(formatDuration(1234)).toBe('1.2s');
+            expect(formatDuration(1567)).toBe('1.6s');
+            expect(formatDuration(12345)).toBe('12.3s');
+        });
+    });
+    describe('minutes', () => {
+        it('should format values between 1 minute and 1 hour as minutes with 1 decimal', () => {
+            expect(formatDuration(60000)).toBe('1.0min');
+            expect(formatDuration(90000)).toBe('1.5min');
+            expect(formatDuration(300000)).toBe('5.0min');
+            expect(formatDuration(1800000)).toBe('30.0min');
+            expect(formatDuration(3599999)).toBe('60.0min');
+        });
+        it('should round to 1 decimal place', () => {
+            expect(formatDuration(123456)).toBe('2.1min');
+            expect(formatDuration(567890)).toBe('9.5min');
+        });
+    });
+    describe('hours', () => {
+        it('should format values 1 hour or more as hours with 1 decimal', () => {
+            expect(formatDuration(3600000)).toBe('1.0h');
+            expect(formatDuration(5400000)).toBe('1.5h');
+            expect(formatDuration(7200000)).toBe('2.0h');
+            expect(formatDuration(36000000)).toBe('10.0h');
+        });
+        it('should round to 1 decimal place', () => {
+            expect(formatDuration(3661000)).toBe('1.0h');
+            expect(formatDuration(5432100)).toBe('1.5h');
+            expect(formatDuration(9000000)).toBe('2.5h');
+        });
+    });
+    describe('edge cases', () => {
+        it('should return "N/A" for undefined', () => {
+            expect(formatDuration(undefined)).toBe('N/A');
+        });
+        it('should return "N/A" for null', () => {
+            expect(formatDuration(null)).toBe('N/A');
+        });
+        it('should return "N/A" for 0 when treated as falsy', () => {
+            expect(formatDuration(0)).toBe('0ms');
+        });
+    });
+    describe('boundary values', () => {
+        it('should correctly handle millisecond-second boundary (999ms vs 1.0s)', () => {
+            expect(formatDuration(999)).toBe('999ms');
+            expect(formatDuration(1000)).toBe('1.0s');
+        });
+        it('should correctly handle second-minute boundary (59.9s vs 1.0min)', () => {
+            expect(formatDuration(59999)).toBe('60.0s');
+            expect(formatDuration(60000)).toBe('1.0min');
+        });
+        it('should correctly handle minute-hour boundary (59.9min vs 1.0h)', () => {
+            expect(formatDuration(3599999)).toBe('60.0min');
+            expect(formatDuration(3600000)).toBe('1.0h');
+        });
+    });
+    describe('real-world scenarios', () => {
+        it('should format typical API response times', () => {
+            expect(formatDuration(50)).toBe('50ms');
+            expect(formatDuration(150)).toBe('150ms');
+            expect(formatDuration(2500)).toBe('2.5s');
+        });
+        it('should format typical workflow execution times', () => {
+            expect(formatDuration(5000)).toBe('5.0s');
+            expect(formatDuration(30000)).toBe('30.0s');
+            expect(formatDuration(120000)).toBe('2.0min');
+        });
+        it('should format long-running tasks', () => {
+            expect(formatDuration(600000)).toBe('10.0min');
+            expect(formatDuration(1800000)).toBe('30.0min');
+            expect(formatDuration(7200000)).toBe('2.0h');
+        });
+    });
+});

package/dist/src/lib/motia-analytics.d.ts

@@ -0,0 +1,38 @@
+interface AmplitudeInstance {
+    setOptOut(optOut: boolean): void;
+    track(eventName: string, eventProperties?: Record<string, any>): void;
+    identify(userId: string, userProperties?: Record<string, any>): void;
+    setUserId(userId: string): void;
+    getUserId(): string | undefined;
+}
+declare global {
+    interface Window {
+        amplitude: AmplitudeInstance;
+    }
+}
+declare class WorkbenchAnalytics {
+    private isInitialized;
+    private userIdCache;
+    private projectIdCache;
+    private motiaVersion;
+    constructor();
+    private initialize;
+    private fetchUserData;
+    private generateFallbackUserId;
+    private identifyUser;
+    private getBrowserInfo;
+    getAnalyticsIds(): {
+        userId: string | null;
+        projectId: string | null;
+    };
+    track(eventName: string, properties?: Record<string, any>): void;
+}
+export declare const motiaAnalytics: WorkbenchAnalytics;
+export declare const useAnalytics: () => {
+    track: (eventName: string, properties?: Record<string, any>) => void;
+    getAnalyticsIds: () => {
+        userId: string | null;
+        projectId: string | null;
+    };
+};
+export {};

package/dist/src/lib/motia-analytics.js

@@ -0,0 +1,132 @@
+import { useCallback } from 'react';
+class WorkbenchAnalytics {
+    constructor() {
+        Object.defineProperty(this, "isInitialized", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "userIdCache", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "projectIdCache", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "motiaVersion", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.initialize();
+    }
+    async initialize() {
+        if (typeof window !== 'undefined' && window.amplitude) {
+            await this.fetchUserData();
+            this.isInitialized = true;
+            this.identifyUser();
+        }
+    }
+    async fetchUserData() {
+        try {
+            const response = await fetch('/motia/analytics/user');
+            if (response.ok) {
+                const data = await response.json();
+                this.userIdCache = data.userId;
+                this.projectIdCache = data.projectId;
+                this.motiaVersion = data.motiaVersion;
+                window.amplitude.setOptOut(!data.analyticsEnabled);
+                // Set the user ID in Amplitude to match backend
+                if (window.amplitude && data.userId) {
+                    window.amplitude.setUserId(data.userId);
+                }
+            }
+            else {
+                console.warn('Failed to fetch user data from backend, using fallback');
+                this.userIdCache = this.generateFallbackUserId();
+            }
+        }
+        catch (error) {
+            console.warn('Error fetching user data:', error);
+            this.userIdCache = this.generateFallbackUserId();
+        }
+    }
+    generateFallbackUserId() {
+        let userId = localStorage.getItem('motia-user-id');
+        if (!userId) {
+            userId = `user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            localStorage.setItem('motia-user-id', userId);
+        }
+        return userId;
+    }
+    identifyUser() {
+        if (!this.isInitialized || !this.userIdCache)
+            return;
+        try {
+            window.amplitude.identify(this.userIdCache, {
+                project_id: this.projectIdCache,
+                browser: this.getBrowserInfo(),
+                screen_resolution: `${window.screen.width}x${window.screen.height}`,
+                workbench_version: this.motiaVersion,
+            });
+        }
+        catch (error) {
+            console.warn('Analytics user identification failed:', error);
+        }
+    }
+    getBrowserInfo() {
+        const ua = navigator.userAgent;
+        if (ua.includes('Chrome'))
+            return 'Chrome';
+        if (ua.includes('Firefox'))
+            return 'Firefox';
+        if (ua.includes('Safari'))
+            return 'Safari';
+        if (ua.includes('Edge'))
+            return 'Edge';
+        return 'Unknown';
+    }
+    // Method to get current user and project IDs for external use
+    getAnalyticsIds() {
+        return {
+            userId: this.userIdCache,
+            projectId: this.projectIdCache,
+        };
+    }
+    // Simple track method that preserves the user binding
+    track(eventName, properties) {
+        if (!this.isInitialized)
+            return;
+        const eventProperties = {
+            project_id: this.projectIdCache,
+            source: 'frontend',
+            ...properties,
+        };
+        try {
+            window.amplitude.track(eventName, eventProperties);
+        }
+        catch (error) {
+            console.warn('Analytics tracking failed:', error);
+        }
+    }
+}
+export const motiaAnalytics = new WorkbenchAnalytics();
+export const useAnalytics = () => {
+    const track = useCallback((eventName, properties) => {
+        motiaAnalytics.track(eventName, properties);
+    }, []);
+    const getAnalyticsIds = useCallback(() => {
+        return motiaAnalytics.getAnalyticsIds();
+    }, []);
+    return {
+        track,
+        getAnalyticsIds,
+    };
+};

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

@@ -0,0 +1,2 @@
+import { type AppTab, TabLocation } from '@/stores/use-app-tabs-store';
+export declare const registerPluginTabs: (addTab: (position: TabLocation, tab: AppTab) => void) => void;

package/dist/src/lib/plugins.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { plugins } from 'virtual:motia-plugins';
+import { DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic';
+import { memo } from 'react';
+import { TabLocation, useAppTabsStore } from '@/stores/use-app-tabs-store';
+import { isValidTabLocation } from './utils';
+export const registerPluginTabs = (addTab) => {
+    if (!Array.isArray(plugins)) {
+        console.warn('[Motia] Invalid plugins configuration: expected array');
+        return;
+    }
+    plugins.forEach((plugin, index) => {
+        try {
+            if (!plugin.label) {
+                console.warn(`[Motia] Plugin at index ${index} missing label, skipping`);
+                return;
+            }
+            if (!plugin.component) {
+                console.warn(`[Motia] Plugin "${plugin.label}" missing component, skipping`);
+                return;
+            }
+            const position = plugin.position || 'top';
+            if (!isValidTabLocation(position)) {
+                console.warn(`[Motia] Plugin "${plugin.label}" has invalid position "${position}", defaulting to "top"`);
+            }
+            const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP;
+            const PluginTabLabel = memo(() => {
+                const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon);
+                const iconName = hasIcon ? plugin.labelIcon : 'toy-brick';
+                if (!hasIcon) {
+                    console.warn(`[Motia] Plugin "${plugin.label}" has invalid icon "${plugin.labelIcon}", defaulting to "toy-brick"`);
+                }
+                return (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: iconName }), _jsx("span", { children: plugin.label })] }));
+            });
+            PluginTabLabel.displayName = `${plugin.label}TabLabel`;
+            const PluginContent = memo(() => {
+                const Component = plugin.component;
+                const props = plugin.props || {};
+                if (!Component) {
+                    return _jsx("div", { children: "Error: Plugin component not found" });
+                }
+                return _jsx(Component, { ...props });
+            });
+            PluginContent.displayName = `${plugin.label}Content`;
+            addTab(tabLocation, {
+                id: plugin.label.toLowerCase(),
+                tabLabel: PluginTabLabel,
+                content: PluginContent,
+            });
+        }
+        catch (error) {
+            console.error(`[Motia] Error registering plugin "${plugin.label}":`, error);
+        }
+    });
+};
+const refreshPluginTabs = (nextPlugins) => {
+    try {
+        const state = useAppTabsStore.getState();
+        const { removeTab, addTab } = state;
+        const idsToRefresh = new Set(nextPlugins.map((p) => (p.label || '').toLowerCase()));
+        idsToRefresh.forEach((id) => {
+            removeTab(TabLocation.TOP, id);
+            removeTab(TabLocation.BOTTOM, id);
+        });
+        nextPlugins.forEach((plugin, index) => {
+            try {
+                if (!plugin.label || !plugin.component)
+                    return;
+                const position = plugin.position || 'top';
+                const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP;
+                const PluginTabLabel = memo(() => {
+                    const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon);
+                    const iconName = hasIcon ? plugin.labelIcon : 'toy-brick';
+                    return (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: iconName }), _jsx("span", { children: plugin.label })] }));
+                });
+                PluginTabLabel.displayName = `${plugin.label}TabLabel_HMR_${index}`;
+                const PluginContent = memo(() => {
+                    const Component = plugin.component;
+                    const props = plugin.props || {};
+                    if (!Component)
+                        return _jsx("div", { children: "Error: Plugin component not found" });
+                    return _jsx(Component, { ...props });
+                });
+                PluginContent.displayName = `${plugin.label}Content_HMR_${index}`;
+                addTab(tabLocation, {
+                    id: plugin.label.toLowerCase(),
+                    tabLabel: PluginTabLabel,
+                    content: PluginContent,
+                });
+            }
+            catch (error) {
+                console.error(`[Motia] Error refreshing plugin "${plugin.label}":`, error);
+            }
+        });
+    }
+    catch (err) {
+        console.error('[Motia] Failed to refresh plugin tabs via HMR:', err);
+    }
+};
+if (import.meta.hot) {
+    import.meta.hot.accept('virtual:motia-plugins', (mod) => {
+        const next = mod?.plugins || [];
+        refreshPluginTabs(next);
+    });
+}

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

@@ -0,0 +1,7 @@
+import { TabLocation } from '@/stores/use-app-tabs-store';
+export declare const formatDuration: (duration?: number) => string;
+export declare const formatTimestamp: (time: number) => string;
+export type ViewMode = 'project' | 'system';
+export declare const DEFAULT_VIEW_MODE: ViewMode;
+export declare const getViewModeFromURL: () => ViewMode;
+export declare const isValidTabLocation: (position: string) => position is TabLocation;

package/dist/src/lib/utils.js

@@ -0,0 +1,34 @@
+import { TabLocation } from '@/stores/use-app-tabs-store';
+export const formatDuration = (duration) => {
+    if (duration === undefined || duration === null)
+        return 'N/A';
+    if (duration < 1000)
+        return `${duration}ms`;
+    if (duration < 60000)
+        return `${(duration / 1000).toFixed(1)}s`;
+    if (duration < 3600000)
+        return `${(duration / 60000).toFixed(1)}min`;
+    return `${(duration / 3600000).toFixed(1)}h`;
+};
+export const formatTimestamp = (time) => {
+    const date = new Date(Number(time));
+    return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`;
+};
+export const DEFAULT_VIEW_MODE = 'system';
+export const getViewModeFromURL = () => {
+    try {
+        const url = new URL(window.location.href);
+        const viewMode = url.searchParams.get('view-mode');
+        if (viewMode === 'project' || viewMode === 'system') {
+            return viewMode;
+        }
+        return DEFAULT_VIEW_MODE;
+    }
+    catch (error) {
+        console.error('[Motia] Error parsing URL:', error);
+        return DEFAULT_VIEW_MODE;
+    }
+};
+export const isValidTabLocation = (position) => {
+    return Object.values(TabLocation).includes(position);
+};

package/dist/src/main.d.ts

@@ -0,0 +1,2 @@
+import '@motiadev/ui/globals.css';
+import './index.css';

package/dist/src/main.js

@@ -0,0 +1,17 @@
+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-dom';
+import { App } from './App';
+import { NotFoundPage } from './components/NotFoundPage';
+import { RootMotia } from './components/root-motia';
+import '@motiadev/ui/globals.css';
+import './index.css';
+const rootElement = document.getElementById('root');
+if (!rootElement.innerHTML) {
+    const basePath = workbenchBase;
+    const root = createRoot(rootElement);
+    const address = window.location.origin.replace('http', 'ws');
+    root.render(_jsx(StrictMode, { children: _jsx(MotiaStreamProvider, { address: address, children: _jsx(RootMotia, { children: _jsx(BrowserRouter, { children: _jsxs(Routes, { children: [_jsx(Route, { path: basePath, element: _jsx(App, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFoundPage, {}) })] }) }) }) }) }));
+}

package/dist/src/project-view-mode.d.ts

@@ -0,0 +1 @@
+export declare const ProjectViewMode: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/src/project-view-mode.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APP_SIDEBAR_CONTAINER_ID, Panel } from '@motiadev/ui';
+import { memo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
+const topTabs = (state) => state.tabs[TabLocation.TOP];
+export const ProjectViewMode = memo(() => {
+    const tabs = useAppTabsStore(useShallow(topTabs));
+    return (_jsxs("div", { className: "grid grid-rows-1 grid-cols-[1fr_auto] bg-background text-foreground h-screen ", children: [_jsx("main", { className: "m-2 overflow-hidden", children: _jsx(Panel, { contentClassName: 'p-0', tabs: tabs.map((tab) => {
+                        const Element = tab.content;
+                        const LabelComponent = tab.tabLabel;
+                        return {
+                            label: tab.id,
+                            labelComponent: _jsx(LabelComponent, {}),
+                            content: _jsx(Element, {}),
+                            'data-testid': tab.id,
+                        };
+                    }) }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+});
+ProjectViewMode.displayName = 'ProjectViewMode';

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

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+import type { ApiNodeProps } from './node-props';
+type Props = PropsWithChildren<ApiNodeProps>;
+export declare const ApiNode: ({ data, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseNode } from './base-node/base-node';
+export const ApiNode = ({ data, children }) => {
+    return (_jsxs(BaseNode, { data: data, variant: "api", title: data.name, language: data.language, subtitle: data.description, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.webhookUrl && (_jsx("div", { className: "flex gap-1 items-center text-muted-foreground", children: _jsx("div", { className: "font-mono", children: data.webhookUrl }) })), children] }));
+};

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

@@ -0,0 +1,9 @@
+import { type HandleProps } from '@xyflow/react';
+import type React from 'react';
+import type { HTMLAttributes } from 'react';
+type Props = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    isHidden?: boolean;
+    onTogglePosition?: () => void;
+};
+export declare const BaseHandle: React.FC<Props>;
+export {};

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

@@ -0,0 +1,8 @@
+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, onTogglePosition, ...rest } = props;
+    const isHorizontal = position === Position.Left || position === Position.Right;
+    return (_jsx("div", { className: clsx('absolute w-[6px] h-[6px]', position === Position.Top && '-top-[4px]', position === Position.Bottom && '-bottom-[4px]', position === Position.Left && '-left-[4px]', position === Position.Right && '-right-[4px]', isHorizontal ? 'top-1/2 -mt-[2px]' : 'left-1/2 -ml-[2px]', isHidden && 'hidden'), onClick: onTogglePosition, children: _jsx(RFHandle, { ...rest, position: position, style: { background: 'rgb(30,118,231)' }, className: "\n        bg-white/50\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/base-node.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+import { type PropsWithChildren } from 'react';
+import type { BaseNodeProps } from '../node-props';
+type Props = PropsWithChildren<{
+    title: string;
+    subtitle?: string;
+    variant: 'event' | 'api' | 'noop' | 'cron';
+    language?: string;
+    className?: string;
+    disableSourceHandle?: boolean;
+    disableTargetHandle?: boolean;
+    data: BaseNodeProps;
+}>;
+export declare const BaseNode: React.FC<Props>;
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from '@motiadev/ui';
+import { ScanSearch } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useHandlePositions } from '@/hooks/use-update-handle-positions';
+import { BaseHandle } from './base-handle';
+import { NodeHeader } from './node-header';
+import { NodeSidebar } from './node-sidebar';
+export const BaseNode = ({ title, variant, children, disableSourceHandle, disableTargetHandle, language, subtitle, data, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { sourcePosition, targetPosition, toggleTargetPosition, toggleSourcePosition } = useHandlePositions(data);
+    const [content, setContent] = useState(null);
+    const [features, setFeatures] = useState([]);
+    const fetchContent = useCallback(async () => {
+        const response = await fetch(`/__motia/step/${data.id}`);
+        const responseData = await response.json();
+        setContent(responseData.content);
+        setFeatures(responseData.features);
+    }, [data.id]);
+    useEffect(() => {
+        if (data.id && isOpen) {
+            fetchContent();
+        }
+    }, [data.id, isOpen, fetchContent]);
+    return (_jsxs("div", { className: cn('p-1 rounded-lg max-w-[350px]', {
+            'bg-muted-foreground/20': isOpen,
+        }), children: [_jsx("div", { className: "rounded-lg dark:bg-[#101010] bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { "data-testid": `open-code-preview-button-${title?.toLowerCase()}`, variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
+                                    'bg-card': variant !== 'noop',
+                                }), children: children }) })), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, onTogglePosition: toggleSourcePosition }))] }) }), content && (_jsx(NodeSidebar, { features: features, content: content, title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
+};

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

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type { Feature } from '@/types/file';
+type CodeDisplayProps = {
+    code: string;
+    language?: string;
+    features?: Feature[];
+};
+export declare const CodeDisplay: React.FC<CodeDisplayProps>;
+export {};

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeStore } from '@motiadev/ui';
+import { useRef, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { FeatureCard } from './feature-card';
+import { LanguageIndicator } from './language-indicator';
+const codeTagProps = {
+    style: {
+        fontFamily: 'DM Mono, monospace',
+        fontSize: '16px',
+    },
+};
+const customStyle = {
+    margin: 0,
+    borderRadius: 0,
+    padding: 0,
+};
+const isHighlighted = (lines, lineNumber) => {
+    return lines.some((line) => {
+        const [start, end] = line.split('-').map((num) => parseInt(num, 10));
+        if (end !== undefined) {
+            return lineNumber >= start && lineNumber <= end;
+        }
+        return lineNumber == start;
+    });
+};
+const getFirstLineNumber = (line) => {
+    const [start] = line.split('-').map((num) => parseInt(num, 10));
+    return start;
+};
+export const CodeDisplay = ({ code, language, features }) => {
+    const theme = useThemeStore((state) => state.theme);
+    const themeStyle = theme === 'dark' ? oneDark : oneLight;
+    const [highlightedLines, setHighlightedLines] = useState([]);
+    const [selectedFeature, setSelectedFeature] = useState(null);
+    const ref = useRef(null);
+    const handleFeatureClick = (feature) => {
+        setSelectedFeature(feature);
+        setHighlightedLines(feature.lines);
+        const lineNumber = getFirstLineNumber(feature.lines[0]);
+        const line = ref.current?.querySelector(`[data-line-number="${lineNumber}"]`);
+        if (line) {
+            line.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [_jsxs("div", { className: "flex items-center py-2 px-5 dark:bg-[#1e1e1e] gap-2 justify-center", children: [_jsx("div", { className: "text-sm text-muted-foreground", children: "Read only" }), _jsx("div", { className: "flex-1" }), _jsx(LanguageIndicator, { language: language, className: "w-4 h-4", size: 16, showLabel: true })] }), _jsxs("div", { className: "flex flex-row h-[calc(100%-36px)]", children: [features && features.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 p-2 bg-card overflow-y-auto min-w-[200px] w-[300px]", children: features.map((feature, index) => (_jsx(FeatureCard, { feature: feature, highlighted: selectedFeature === feature, onClick: () => handleFeatureClick(feature), onHover: () => handleFeatureClick(feature) }, index))) })), _jsx("div", { className: "overflow-y-auto", ref: ref, children: _jsx(SyntaxHighlighter, { showLineNumbers: true, language: language, style: themeStyle, codeTagProps: codeTagProps, customStyle: customStyle, wrapLines: true, lineProps: (lineNumber) => {
+                                if (isHighlighted(highlightedLines, lineNumber)) {
+                                    return {
+                                        'data-line-number': lineNumber,
+                                        style: {
+                                            borderLeft: '2px solid var(--accent-1000)',
+                                            backgroundColor: 'rgb(from var(--accent-1000) r g b / 0.2)',
+                                        },
+                                    };
+                                }
+                                return {
+                                    'data-line-number': lineNumber,
+                                    style: {
+                                        borderLeft: '2px solid transparent',
+                                    },
+                                };
+                            }, children: code }) })] })] }));
+};

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+import type { EventNodeData } from '@/types/flow';
+export declare const Emits: React.FC<{
+    emits: EventNodeData['emits'];
+}>;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const toTopic = (emit) => typeof emit === 'string' ? emit : emit.topic;
+export const Emits = ({ emits }) => {
+    return (_jsx("div", { className: "flex flex-col gap-2", children: emits.map((emit) => (_jsx("div", { "data-testid": `emits__${toTopic(emit)}`, children: toTopic(emit) }, toTopic(emit)))) }));
+};

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

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { Feature } from '@/types/file';
+type Props = {
+    feature: Feature;
+    highlighted: boolean;
+    onClick: () => void;
+    onHover: () => void;
+};
+export declare const FeatureCard: React.FC<Props>;
+export {};