@motiadev/workbench 0.5.11-beta.120-167191 → 0.5.11-beta.120-722203

package/dist/src/App.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CollapsiblePanel, CollapsiblePanelGroup, Panel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
 import { analytics } from '@/lib/analytics';
-import { CollapsiblePanel, CollapsiblePanelGroup, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
 import { ReactFlowProvider } from '@xyflow/react';
 import { File, GanttChart, Link2, LogsIcon } from 'lucide-react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { EndpointsPage } from './components/endpoints/endpoints-page';
 import { FlowPage } from './components/flow/flow-page';
 import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
@@ -23,6 +23,7 @@ export const App = () => {
     const tab = useTabsStore((state) => state.tab);
     const setTopTab = useTabsStore((state) => state.setTopTab);
     const setBottomTab = useTabsStore((state) => state.setBottomTab);
+    const [viewMode, setViewMode] = useState('system');
     const tabChangeCallbacks = useMemo(() => ({
         [TabLocation.TOP]: setTopTab,
         [TabLocation.BOTTOM]: setBottomTab,
@@ -31,5 +32,26 @@ export const App = () => {
         analytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
         tabChangeCallbacks[location](newTab);
     }, [tabChangeCallbacks, tab]);
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        const viewMode = url.searchParams.get('view-mode');
+        if (viewMode) {
+            setViewMode(viewMode);
+        }
+    }, [setViewMode]);
+    if (viewMode === 'project') {
+        return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen ", children: [_jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsx(Panel, { tabs: [
+                            {
+                                label: 'Flow',
+                                labelComponent: _jsx(FlowTabMenuItem, {}),
+                                content: (_jsx(ReactFlowProvider, { children: _jsx("div", { className: "h-[calc(100vh-100px)] w-full", children: _jsx(FlowPage, {}) }) })),
+                            },
+                            {
+                                label: 'Endpoint',
+                                labelComponent: (_jsxs(_Fragment, { children: [_jsx(Link2, {}), "Endpoint"] })),
+                                content: _jsx(EndpointsPage, {}),
+                            },
+                        ] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+    }
     return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", "data-testid": "flows-link", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", "data-testid": "endpoints-link", className: "cursor-pointer", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", "data-testid": "traces-link", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID }), _jsx(Tutorial, {})] }));
 };

package/dist/src/components/tutorial/engine/workbench-xpath.d.ts

@@ -3,6 +3,7 @@ export declare const workbenchXPath: {
     closePanelButton: string;
     bottomPanel: string;
     flows: {
+        dropdownFlow: (flowId: string) => string;
         feature: (featureId: string) => string;
         previewButton: (stepId: string) => string;
         node: (stepId: string) => string;

package/dist/src/components/tutorial/engine/workbench-xpath.js

@@ -3,6 +3,7 @@ export const workbenchXPath = {
     closePanelButton: '//div[@id="app-sidebar-container"]//button[@data-testid="close-panel"]',
     bottomPanel: '//div[@id="bottom-panel"]',
     flows: {
+        dropdownFlow: (flowId) => `//div[@data-testid="dropdown-${flowId}"]`,
         feature: (featureId) => `//div[@data-feature-id="${featureId}"]`,
         previewButton: (stepId) => `//button[@data-testid="open-code-preview-button-${stepId}"]`,
         node: (stepId) => `//div[@data-testid="node-${stepId}"]`,
@@ -30,7 +31,7 @@ export const workbenchXPath = {
         row: (index) => `(//tr[starts-with(@data-testid, 'item-')])[${index}]`,
     },
     links: {
-        flows: '//button[@data-testid="flows-link"]',
+        flows: '//div[@data-testid="flows-dropdown-trigger"]',
         endpoints: '//button[@data-testid="endpoints-link"]',
         tracing: '//button[@data-testid="traces-link"]',
         logs: '//button[@data-testid="logs-link"]',

package/dist/src/components/tutorial/hooks/use-tutorial-engine.d.ts

@@ -11,4 +11,5 @@ export declare const useTutorialEngine: () => {
     onClose: () => void;
     moveStep: (stepNumber: number) => Promise<void>;
     currentStepRef: import("react").RefObject<number>;
+    manualOpenRef: import("react").RefObject<boolean>;
 };

package/dist/src/components/tutorial/hooks/use-tutorial-engine.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { waitForElementByXPath } from './tutorial-utils';
 import { MotiaTutorial } from '../engine/tutorial-engine';
+import { waitForElementByXPath } from './tutorial-utils';
 export const useTutorialEngine = () => {
     const ref = useRef(null);
     const highlighterRef = useRef(null);
@@ -10,15 +10,11 @@ export const useTutorialEngine = () => {
     const [link, setLink] = useState(undefined);
     const [currentStep, setCurrentStep] = useState(0);
     const [totalSteps, setTotalSteps] = useState(MotiaTutorial.steps.length);
+    const manualOpenRef = useRef(false);
     const loading = useRef(false);
     const currentStepRef = useRef(0);
     const moveComponent = (x, y) => {
         if (ref.current) {
-            if (ref.current.parentElement) {
-                ref.current.style.transition = 'all 0.3s ease-in-out';
-                ref.current.parentElement.style.opacity = '1';
-                ref.current.parentElement.style.display = 'block';
-            }
             ref.current.style.position = 'absolute';
             ref.current.style.left = `${x}px`;
             ref.current.style.top = `${y}px`;
@@ -31,6 +27,11 @@ export const useTutorialEngine = () => {
                 onClose();
                 return;
             }
+            if (container.parentElement) {
+                container.style.transition = 'all 0.3s ease-in-out';
+                container.parentElement.style.opacity = '1';
+                container.parentElement.style.display = 'block';
+            }
             loading.current = true;
             currentStepRef.current = stepNumber;
             const step = MotiaTutorial.steps[stepNumber];
@@ -113,7 +114,7 @@ export const useTutorialEngine = () => {
                     // Fallback to center of screen
                     moveComponent(window.innerWidth / 2 - width / 2, window.innerHeight / 2 - height / 2);
                 }
-            }, 100);
+            }, 1);
             loading.current = false;
         }
     };
@@ -147,9 +148,13 @@ export const useTutorialEngine = () => {
                 moveStep(0);
             }
         };
-        MotiaTutorial.onOpen(onOpen);
+        MotiaTutorial.onOpen(() => {
+            manualOpenRef.current = true;
+            onOpen();
+        });
         MotiaTutorial.onStepsRegistered(() => {
             if (localStorage.getItem('motia-tutorial-closed') !== 'true') {
+                manualOpenRef.current = false;
                 onOpen();
             }
         });
@@ -166,5 +171,6 @@ export const useTutorialEngine = () => {
         onClose,
         moveStep,
         currentStepRef,
+        manualOpenRef,
     };
 };

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { analytics } from '@/lib/analytics';
 import { Button } from '@motiadev/ui';
 import { Book } from 'lucide-react';
-import { useTutorial } from './hooks/use-tutorial';
 import { Tooltip } from '../ui/tooltip';
+import { useTutorial } from './hooks/use-tutorial';
 export const TutorialButton = () => {
     const { open, steps } = useTutorial();
     const isTutorialFlowMissing = steps.length === 0;
@@ -10,6 +11,7 @@ export const TutorialButton = () => {
         if (!isTutorialFlowMissing) {
             open();
         }
+        analytics.track('tutorial_button_clicked', { isTutorialFlowMissing });
     };
     const trigger = (_jsxs(Button, { "data-testid": "tutorial-trigger", variant: "default", onClick: () => onTutorialButtonClick(), children: [_jsx(Book, { className: "h-4 w-4" }), "Tutorial"] }));
     if (isTutorialFlowMissing) {

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

@@ -1,8 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { analytics } from '@/lib/analytics';
 import { useTutorialEngine } from './hooks/use-tutorial-engine';
 import { TutorialStep } from './tutorial-step';
 import './tutorial.css';
 export const Tutorial = () => {
     const engine = useTutorialEngine();
-    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: () => engine.moveStep(engine.currentStepRef.current + 1), onClose: engine.onClose })] }));
+    const onNext = () => {
+        const currentStep = engine.currentStepRef.current;
+        const nextStep = currentStep + 1;
+        engine.moveStep(nextStep);
+        if (engine.currentStep === engine.totalSteps) {
+            analytics.track('tutorial_completed', {
+                manualOpen: engine.manualOpenRef.current,
+            });
+        }
+        else {
+            analytics.track('tutorial_next_step', {
+                step: nextStep,
+                manualOpen: engine.manualOpenRef.current,
+            });
+        }
+    };
+    const onClose = () => {
+        analytics.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/theme-toggle.js

@@ -2,11 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Moon, Sun } from 'lucide-react';
 import { useThemeStore } from '@/stores/use-theme-store';
 import { cn } from '@/lib/utils';
+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/publicComponents/base-node/feature-card.d.ts

@@ -1,4 +1,5 @@
 import { Feature } from '@/types/file';
+import React from 'react';
 type Props = {
     feature: Feature;
     highlighted: boolean;

package/dist/src/stores/use-theme-store.d.ts

@@ -1,4 +1,4 @@
-type Theme = 'dark' | 'light' | 'system';
+export type Theme = 'dark' | 'light' | 'system';
 export type ThemeState = {
     theme: Theme;
     setTheme: (theme: Theme) => void;
@@ -14,4 +14,3 @@ export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import(
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>;
     };
 }>;
-export {};