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

package/dist/src/components/tutorial/tutorial.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motiaAnalytics } from '@/lib/motia-analytics';
+import { useTutorialEngine } from './hooks/use-tutorial-engine';
+import { TutorialStep } from './tutorial-step';
+import './tutorial.css';
+export const Tutorial = () => {
+    const engine = useTutorialEngine();
+    const onNext = () => {
+        const currentStep = engine.currentStepRef.current;
+        const nextStep = currentStep + 1;
+        engine.moveStep(nextStep);
+        if (engine.currentStep === engine.totalSteps) {
+            motiaAnalytics.track('tutorial_completed', {
+                manualOpen: engine.manualOpenRef.current,
+            });
+        }
+        else {
+            motiaAnalytics.track('tutorial_next_step', {
+                step: nextStep,
+                manualOpen: engine.manualOpenRef.current,
+            });
+        }
+    };
+    const onClose = () => {
+        motiaAnalytics.track('tutorial_closed', {
+            step: engine.currentStepRef.current,
+            manualOpen: engine.manualOpenRef.current,
+        });
+        engine.onClose();
+    };
+    return (_jsxs("div", { children: [_jsx("div", { className: "fixed inset-0 z-[9999]" }), _jsx("div", { className: "absolute top-5 left-5 w-full h-full rounded-lg shadow-[0_0_0_9999px_rgba(0,0,0,0.5)] z-[10000] pointer-events-none", ref: engine.highlighterRef }), _jsx(TutorialStep, { ref: engine.ref, step: engine.currentStep, totalSteps: engine.totalSteps, title: engine.title, description: engine.description, link: engine.link, image: engine.image, onNext: onNext, onClose: onClose })] }));
+};

package/dist/src/components/ui/json-editor.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+type JsonEditorProps = {
+    value: string;
+    height?: number | string;
+    schema?: Record<string, unknown>;
+    onChange?: (value: string) => void;
+    onValidate?: (isValid: boolean) => void;
+    language?: 'json' | string;
+    readOnly?: boolean;
+};
+export declare const JsonEditor: FC<JsonEditorProps>;
+export {};

package/dist/src/components/ui/json-editor.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Editor, { useMonaco } from '@monaco-editor/react';
+import { useThemeStore } from '@motiadev/ui';
+import { useEffect, useMemo } from 'react';
+export const JsonEditor = ({ value, height = 300, schema, onChange, onValidate, language = 'json', readOnly = false, }) => {
+    const monaco = useMonaco();
+    const theme = useThemeStore((state) => state.theme);
+    const editorTheme = useMemo(() => (theme === 'dark' ? 'vs-dark' : 'light'), [theme]);
+    useEffect(() => {
+        if (!monaco)
+            return;
+        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ isolatedModules: true });
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            schemas: schema
+                ? [
+                    {
+                        uri: window.location.href,
+                        fileMatch: ['*'],
+                        schema,
+                    },
+                ]
+                : [],
+        });
+    }, [monaco, schema, language]);
+    return (_jsx(Editor, { "data-testid": "json-editor", height: height, language: language, value: value, theme: editorTheme, onChange: (value) => {
+            if (!value) {
+                onValidate?.(false);
+            }
+            onChange?.(value ?? '');
+        }, onValidate: (markers) => onValidate?.(markers.length === 0), options: {
+            readOnly,
+            scrollBeyondLastLine: false,
+            minimap: { enabled: false },
+        } }));
+};

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

@@ -0,0 +1,10 @@
+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 };

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@motiadev/ui';
+import * as React from 'react';
+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 text-md font-medium bg-muted text-muted-foreground font-bold [&: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/theme-toggle.d.ts

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, useThemeStore } from '@motiadev/ui';
+import { Moon, Sun } from 'lucide-react';
+import { useEffect } from 'react';
+export const ThemeToggle = () => {
+    const theme = useThemeStore((state) => state.theme);
+    const setTheme = useThemeStore((state) => state.setTheme);
+    const toggleTheme = () => {
+        setTheme(theme === 'light' ? 'dark' : 'light');
+    };
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        const colorScheme = url.searchParams.get('color-scheme');
+        if (colorScheme) {
+            setTheme(colorScheme);
+        }
+    }, [setTheme]);
+    return (_jsxs("button", { onClick: toggleTheme, className: "relative flex items-center cursor-pointer w-16 h-8 border bg-muted-foreground/10 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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export declare const Tooltip: ({ children, content, disabled, }: {
+    children: ReactNode;
+    content: string | ReactNode;
+    disabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export const Tooltip = ({ children, content, disabled, }) => (_jsx(TooltipPrimitive.Provider, { disableHoverableContent: disabled, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { className: "TooltipContent", side: "bottom", children: [_jsx("div", { className: "p-2 bg-background text-popover-foreground text-sm rounded-lg border border-light-800", children: content }), _jsx(TooltipPrimitive.Arrow, { className: "TooltipArrow" })] }) })] }) }));

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-fetch-flows.d.ts

@@ -0,0 +1 @@
+export declare const useFetchFlows: () => void;

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

@@ -0,0 +1,26 @@
+import { useStreamGroup } from '@motiadev/stream-client-react';
+import { useEffect } from 'react';
+import { useFlowStore } from '@/stores/use-flow-store';
+const streamGroupArgs = { streamName: '__motia.flows', groupId: 'default' };
+export const useFetchFlows = () => {
+    const setFlows = useFlowStore((state) => state.setFlows);
+    const selectFlowId = useFlowStore((state) => state.selectFlowId);
+    const clearSelectedFlowId = useFlowStore((state) => state.clearSelectedFlowId);
+    const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
+    const { data: flows } = useStreamGroup(streamGroupArgs);
+    useEffect(() => {
+        if (flows)
+            setFlows(flows.map((flow) => flow.id));
+    }, [flows, setFlows]);
+    useEffect(() => {
+        const hasFlows = flows.length > 0;
+        const isSelectedFlowValid = selectedFlowId && flows.some((flow) => flow.id === selectedFlowId);
+        if (!hasFlows && selectedFlowId) {
+            clearSelectedFlowId();
+            return;
+        }
+        if (hasFlows && (!selectedFlowId || !isSelectedFlowValid)) {
+            selectFlowId(flows[0].id);
+        }
+    }, [flows, selectedFlowId, selectFlowId, clearSelectedFlowId]);
+};

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

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

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/hooks/use-update-handle-positions.d.ts

@@ -0,0 +1,10 @@
+import { Position } from '@xyflow/react';
+import type { BaseNodeProps } from '../publicComponents/node-props';
+export declare const useHandlePositions: (data: BaseNodeProps) => {
+    sourcePosition: Position;
+    targetPosition: Position;
+    updateSourcePosition: (position: "bottom" | "right") => void;
+    updateTargetPosition: (position: "top" | "left") => void;
+    toggleTargetPosition: () => void;
+    toggleSourcePosition: () => void;
+};

package/dist/src/hooks/use-update-handle-positions.js

@@ -0,0 +1,35 @@
+import { Position, useReactFlow, useUpdateNodeInternals } from '@xyflow/react';
+export const useHandlePositions = (data) => {
+    const reactFlow = useReactFlow();
+    const updateNodeInternals = useUpdateNodeInternals();
+    const sourcePosition = data.nodeConfig?.sourceHandlePosition === 'bottom' ? Position.Bottom : Position.Right;
+    const targetPosition = data.nodeConfig?.targetHandlePosition === 'top' ? Position.Top : Position.Left;
+    const updateSourcePosition = (position) => {
+        reactFlow.updateNode(data.id, {
+            data: { ...data, nodeConfig: { ...data.nodeConfig, sourceHandlePosition: position } },
+        });
+        updateNodeInternals(data.id);
+    };
+    const updateTargetPosition = (position) => {
+        reactFlow.updateNode(data.id, {
+            data: { ...data, nodeConfig: { ...data.nodeConfig, targetHandlePosition: position } },
+        });
+        updateNodeInternals(data.id);
+    };
+    const toggleTargetPosition = () => {
+        const newPosition = targetPosition === Position.Top ? Position.Left : Position.Top;
+        updateTargetPosition(newPosition);
+    };
+    const toggleSourcePosition = () => {
+        const newPosition = sourcePosition === Position.Bottom ? Position.Right : Position.Bottom;
+        updateSourcePosition(newPosition);
+    };
+    return {
+        sourcePosition,
+        targetPosition,
+        updateSourcePosition,
+        updateTargetPosition,
+        toggleTargetPosition,
+        toggleSourcePosition,
+    };
+};

package/dist/src/index.css

@@ -1,7 +1,7 @@
-@import '@motiadev/ui/styles.css';
-@import '@motiadev/ui/globals.css';
+@import "@motiadev/ui/styles.css";
+@import "@motiadev/ui/globals.css";
 
-@import 'tw-animate-css';
+@import "tw-animate-css";
 @config "../tailwind.config.js";
 
 @keyframes flowDash {
@@ -27,7 +27,7 @@
 }
 
 .font-mono {
-  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-family: "IBM Plex Mono", "Courier New", monospace;
   font-size: 14px;
 }
 
@@ -40,7 +40,7 @@
 .json-view {
   border-radius: 8px;
   padding: 12px 12px;
-  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-family: "IBM Plex Mono", "Courier New", monospace;
   font-size: 14px;
   line-height: 1.5;
   font-weight: 500;

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

@@ -0,0 +1 @@
+export {};

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;