@motiadev/workbench 0.5.11-beta.120-433270 → 0.5.11-beta.120-110250

package/dist/index.d.ts

@@ -6,3 +6,5 @@ export { BaseHandle } from './src/publicComponents/base-node/base-handle';
 export { Position } from '@xyflow/react';
 export type { EventNodeData, ApiNodeData } from './src/types/flow';
 export type { ApiNodeProps, BaseNodeProps, CronNodeProps, EventNodeProps, NoopNodeProps, } from './src/publicComponents/node-props';
+export type { TutorialStep } from './src/components/tutorial/engine/tutorial-types';
+export { workbenchXPath } from './src/components/tutorial/engine/workbench-xpath';

package/dist/index.html

@@ -10,6 +10,10 @@
       href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.1-min.js.gz"></script>
     <script>
       window.amplitude.init('ab2408031a38aa5cb85587a27ecfc69c', {
@@ -25,10 +29,26 @@
 
     <!-- Start of Reo Javascript -->
     <script type="text/javascript">
-      !function(){var e,t,n;e="d8f0ce9cae8ae64",t=function(){Reo.init({clientID:"d8f0ce9cae8ae64"})},(n=document.createElement("script")).src="https://static.reo.dev/"+e+"/reo.js",n.defer=!0,n.onload=t,document.head.appendChild(n)}();
+      !(function () {
+        var e, t, n
+        ;(e = 'd8f0ce9cae8ae64'),
+          (t = function () {
+            Reo.init({ clientID: 'd8f0ce9cae8ae64' })
+          }),
+          ((n = document.createElement('script')).src = 'https://static.reo.dev/' + e + '/reo.js'),
+          (n.defer = !0),
+          (n.onload = t),
+          document.head.appendChild(n)
+      })()
     </script>
     <!-- End of Reo Javascript -->
 
+    <script>
+      const importFile = async (path) => {
+        return await import(/* @vite-ignore */ `/@fs/${processCwd}/${path}`)
+      }
+    </script>
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Motia Workbench</title>
   </head>

package/dist/index.js

@@ -4,3 +4,4 @@ export { NoopNode } from './src/publicComponents/noop-node';
 export { BaseNode } from './src/publicComponents/base-node/base-node';
 export { BaseHandle } from './src/publicComponents/base-node/base-handle';
 export { Position } from '@xyflow/react';
+export { workbenchXPath } from './src/components/tutorial/engine/workbench-xpath';

package/dist/middleware.js

@@ -8,6 +8,15 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const vite_1 = require("vite");
 const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+const processCwdPlugin = () => {
+    return {
+        name: 'html-transform',
+        transformIndexHtml: (html) => {
+            const cwd = process.cwd();
+            return html.replace('</head>', `<script>const processCwd = "${cwd}";</script></head>`);
+        },
+    };
+};
 const applyMiddleware = async (app) => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
@@ -17,13 +26,17 @@ const applyMiddleware = async (app) => {
             allowedHosts: true,
             host: true,
             fs: {
-                allow: [__dirname, path_1.default.join(process.cwd(), './steps')],
+                allow: [
+                    __dirname, // workbench root
+                    path_1.default.join(process.cwd(), './steps'), // steps directory
+                    path_1.default.join(process.cwd(), './tutorial.tsx'), // tutorial file
+                ],
             },
         },
         resolve: {
             alias: { '@': path_1.default.resolve(__dirname, './src') },
         },
-        plugins: [(0, plugin_react_1.default)()],
+        plugins: [(0, plugin_react_1.default)(), processCwdPlugin()],
     });
     app.use(vite.middlewares);
     app.use('*', async (req, res, next) => {

package/dist/src/App.js

@@ -1,9 +1,9 @@
-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 { ReactFlowProvider } from '@xyflow/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } 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';
@@ -12,6 +12,7 @@ import { LogsPage } from './components/logs/logs-page';
 import { TracesPage } from './components/observability/traces-page';
 import { APP_SIDEBAR_CONTAINER_ID } from './components/sidebar/sidebar';
 import { StatesPage } from './components/states/states-page';
+import { Tutorial } from './components/tutorial/tutorial';
 import { useTabsStore } from './stores/use-tabs-store';
 var TabLocation;
 (function (TabLocation) {
@@ -22,7 +23,6 @@ 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,26 +31,5 @@ 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 })] }));
+    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/flow/hooks/use-get-flow-state.js

@@ -32,6 +32,7 @@ async function importFlow(flow, flowConfig) {
             return;
         }
         try {
+            console.log(path);
             const module = await import(/* @vite-ignore */ `/@fs/${path}`);
             const component = module.Node ?? module.default;
             nodeComponentCache.set(path, component);

package/dist/src/components/flow/node-organizer.js

@@ -1,39 +1,5 @@
 import { useNodesInitialized, useReactFlow } from '@xyflow/react';
-import dagre from 'dagre';
 import { useEffect, useRef } from 'react';
-const organizeNodes = (nodes, edges) => {
-    const dagreGraph = new dagre.graphlib.Graph({ compound: true });
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    dagreGraph.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' });
-    nodes.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height });
-    });
-    edges.forEach((edge) => {
-        if (typeof edge.label === 'string') {
-            dagreGraph.setEdge(edge.source, edge.target, {
-                label: edge.label ?? '',
-                width: edge.label.length * 40, // Add width for the label
-                height: 30, // Add height for the label
-                labelpos: 'c', // Position label in center
-            });
-        }
-        else {
-            dagreGraph.setEdge(edge.source, edge.target);
-        }
-    });
-    dagre.layout(dagreGraph);
-    return nodes.map((node) => {
-        if (node.position.x !== 0 || node.position.y !== 0) {
-            return node;
-        }
-        const { x, y } = dagreGraph.node(node.id);
-        const position = {
-            x: x - (node.measured?.width ?? 0) / 2,
-            y: y - (node.measured?.height ?? 0) / 2,
-        };
-        return { ...node, position };
-    });
-};
 export const NodeOrganizer = ({ onInitialized }) => {
     const { setNodes, getNodes, getEdges, fitView } = useReactFlow();
     const nodesInitialized = useNodesInitialized();
@@ -41,10 +7,10 @@ export const NodeOrganizer = ({ onInitialized }) => {
     useEffect(() => {
         if (nodesInitialized && !initialized.current) {
             initialized.current = true;
-            const nodes = getNodes();
-            const edges = getEdges();
-            const organizedNodes = organizeNodes(nodes, edges);
-            setNodes(organizedNodes);
+            // const nodes = getNodes() as Node<EventNodeData | ApiNodeData>[]
+            // const edges = getEdges() as Edge<EdgeData>[]
+            // const organizedNodes = organizeNodes(nodes, edges)
+            // setNodes(organizedNodes)
             onInitialized();
             setTimeout(async () => {
                 await fitView();

package/dist/src/components/header/header.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useThemeStore } from '@/stores/use-theme-store';
 import { ThemeToggle } from '../ui/theme-toggle';
-import { TutorialButton } from '../ui/tutorial-button';
+import { TutorialButton } from '../tutorial/tutorial-button';
 export const Header = () => {
     const theme = useThemeStore((state) => state.theme);
     return (_jsxs("header", { className: "min-h-16 px-4 gap-4 flex items-center bg-default text-default-foreground border-b", children: [_jsx("img", { src: `/motia-${theme}.png`, className: "h-5", id: "logo-icon", "data-testid": "logo-icon" }), _jsx("div", { className: "flex-1" }), _jsx(TutorialButton, {}), _jsx(ThemeToggle, {})] }));

package/dist/src/components/logs/logs-page.js

@@ -22,7 +22,7 @@ export const LogsPage = () => {
                 log.step.toLowerCase().includes(search.toLowerCase()));
         });
     }, [logs, search]);
-    return (_jsxs("div", { className: "h-full flex flex-row", "data-testid": "logs-container", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "pr-10 font-medium" }), _jsx(CircleX, { className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash, {}), " Clear"] })] }), _jsx(Table, { children: _jsx(TableBody, { className: "font-mono font-medium", children: filteredLogs.map((log, index) => (_jsxs(TableRow, { className: cn('font-mono font-semibold cursor-pointer border-0', {
+    return (_jsxs("div", { className: "h-full flex flex-row", "data-testid": "logs-container", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "pr-10 font-medium" }), _jsx(CircleX, { className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash, {}), " Clear"] })] }), _jsx(Table, { children: _jsx(TableBody, { className: "font-mono font-medium", children: filteredLogs.map((log, index) => (_jsxs(TableRow, { "data-testid": "log-row", className: cn('font-mono font-semibold cursor-pointer border-0', {
                                     'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,
                                     'hover:bg-muted-foreground/10': selectedLogId !== log.id,
                                 }), onClick: () => selectLogId(log.id), children: [_jsxs(TableCell, { "data-testid": `time-${index}`, className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground", children: [_jsx(LogLevelDot, { level: log.level }), formatTimestamp(log.time)] }), _jsx(TableCell, { "data-testid": `trace-${log.traceId}`, className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground", onClick: () => setSearch(log.traceId), children: log.traceId }), _jsx(TableCell, { "data-testid": `step-${index}`, "aria-label": log.step, className: "whitespace-nowrap", children: log.step }), _jsx(TableCell, { "data-testid": `msg-${index}`, "aria-label": log.msg, className: "whitespace-nowrap max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }), _jsx(LogDetail, { log: selectedLog, onClose: () => selectLogId(undefined) })] }));

package/dist/src/components/observability/trace-item/trace-item.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@/lib/utils';
 export const TraceItem = ({ trace, group, groupEndTime, onExpand }) => {
-    return (_jsxs("div", { className: "flex hover:bg-muted-foreground/10 relative cursor-pointer", onClick: () => onExpand(trace.id), children: [_jsx("div", { className: "flex items-center min-w-[200px] max-w-[200px] h-[32px] max-h-[32px] py-4 px-2 text-sm font-semibold text-foreground truncate sticky left-0 bg-card z-9", children: trace.name }), _jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", "data-testid": "trace-timeline-item", children: _jsx("div", { className: "relative w-full h-[32px] flex items-center", children: _jsx("div", { className: cn('h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200', {
+    return (_jsxs("div", { className: "flex hover:bg-muted-foreground/10 relative cursor-pointer", onClick: () => onExpand(trace.id), "data-testid": "trace-timeline-item", children: [_jsx("div", { className: "flex items-center min-w-[200px] max-w-[200px] h-[32px] max-h-[32px] py-4 px-2 text-sm font-semibold text-foreground truncate sticky left-0 bg-card z-9", children: trace.name }), _jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", children: _jsx("div", { className: "relative w-full h-[32px] flex items-center", children: _jsx("div", { className: cn('h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200', {
                             'bg-[repeating-linear-gradient(140deg,#BEFE29,#BEFE29_8px,#ABE625_8px,#ABE625_16px)]': trace.status === 'running',
                             'bg-[repeating-linear-gradient(140deg,#2862FE,#2862FE_8px,#2358E5_8px,#2358E5_16px)]': trace.status === 'completed',
                             'bg-[repeating-linear-gradient(140deg,#EA2069,#EA2069_8px,#D41E60_8px,#D41E60_16px)]': trace.status === 'failed',

package/dist/src/components/observability/traces-groups.js

@@ -11,5 +11,5 @@ export const TracesGroups = memo(({ groups, selectedGroupId, onGroupSelect }) =>
             return `${duration}ms`;
         return `${(duration / 1000).toFixed(1)}s`;
     };
-    return (_jsx("div", { className: "overflow-auto", children: groups.length > 0 && (_jsx("div", { children: [...groups].reverse().map((group) => (_jsx("div", { "data-testid": `trace-${group.id}`, className: cn('cursor-pointer transition-colors', selectedGroupId === group.id ? 'bg-muted-foreground/10' : 'hover:bg-muted/70'), onClick: () => onGroupSelect(group), children: _jsxs("div", { className: "p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [_jsx("span", { className: "font-semibold text-lg", children: group.name }), _jsx(TraceStatusBadge, { status: group.status, duration: group.endTime ? formatDuration(group.endTime - group.startTime) : undefined })] }), _jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-mono tracking-[1px]", children: group.id }), _jsxs("span", { children: [group.metadata.totalSteps, " steps"] })] }), _jsxs("div", { className: "flex justify-between", children: [formatDistanceToNow(group.startTime), " ago"] }), group.metadata.activeSteps > 0 && (_jsxs("div", { className: "text-blue-600", children: [group.metadata.activeSteps, " active"] }))] })] }) }, group.id))) })) }));
+    return (_jsx("div", { className: "overflow-auto", children: groups.length > 0 && (_jsx("div", { children: [...groups].reverse().map((group) => (_jsx("div", { "data-testid": `trace-${group.id}`, className: cn('motia-trace-group cursor-pointer transition-colors', selectedGroupId === group.id ? 'bg-muted-foreground/10' : 'hover:bg-muted/70'), onClick: () => onGroupSelect(group), children: _jsxs("div", { className: "p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [_jsx("span", { className: "font-semibold text-lg", children: group.name }), _jsx(TraceStatusBadge, { status: group.status, duration: group.endTime ? formatDuration(group.endTime - group.startTime) : undefined })] }), _jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-mono tracking-[1px]", children: group.id }), _jsxs("span", { children: [group.metadata.totalSteps, " steps"] })] }), _jsxs("div", { className: "flex justify-between", children: [formatDistanceToNow(group.startTime), " ago"] }), group.metadata.activeSteps > 0 && (_jsxs("div", { className: "text-blue-600", children: [group.metadata.activeSteps, " active"] }))] })] }) }, group.id))) })) }));
 });

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

@@ -35,5 +35,5 @@ export const Sidebar = ({ initialWidth, onClose, ...props }) => {
     }, [sidebarId, onClose]);
     return createPortal(_jsxs("div", { ...getRootProps(), className: "pr-2 py-2 relative", children: [_jsx("div", { ...getHandleProps({
                     reverse: true,
-                }), className: "flex h-6 w-6 items-center justify-center rounded-full bg-background border border-border absolute top-1/2 -translate-y-1/2 -left-4 z-20", children: _jsx(Equal, { className: "rotate-90 w-4 h-4 text-muted-foreground" }) }), _jsx(Panel, { ...props, variant: "outlined", className: "max-h-[calc(100vh-80px)] h-full" })] }), document.querySelector(`#${APP_SIDEBAR_CONTAINER_ID}`));
+                }), className: "flex h-6 w-6 items-center justify-center rounded-full bg-background border border-border absolute top-1/2 -translate-y-1/2 -left-4 z-20", children: _jsx(Equal, { className: "rotate-90 w-4 h-4 text-muted-foreground" }) }), _jsx(Panel, { ...props, variant: "outlined", className: "max-h-[calc(100vh-80px)] h-full", "data-testid": "sidebar-panel" })] }), document.querySelector(`#${APP_SIDEBAR_CONTAINER_ID}`));
 };

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

@@ -0,0 +1,12 @@
+import { TutorialStep } from './tutorial-types';
+declare class Tutorial {
+    steps: TutorialStep[];
+    private onStepsRegisteredCallbacks;
+    private onOpenCallbacks;
+    register(steps: TutorialStep[]): void;
+    onStepsRegistered(callback: () => void): void;
+    onOpen(callback: () => void): void;
+    open(): void;
+}
+export declare const MotiaTutorial: Tutorial;
+export {};

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

@@ -0,0 +1,36 @@
+class Tutorial {
+    constructor() {
+        Object.defineProperty(this, "steps", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "onStepsRegisteredCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "onOpenCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+    }
+    register(steps) {
+        this.steps = steps;
+        this.onStepsRegisteredCallbacks.forEach((callback) => callback());
+    }
+    onStepsRegistered(callback) {
+        this.onStepsRegisteredCallbacks.push(callback);
+    }
+    onOpen(callback) {
+        this.onOpenCallbacks.push(callback);
+    }
+    open() {
+        this.onOpenCallbacks.forEach((callback) => callback());
+    }
+}
+export const MotiaTutorial = new Tutorial();

package/dist/src/components/tutorial/engine/tutorial-types.d.ts

@@ -0,0 +1,22 @@
+export type TutorialActionClick = {
+    type: 'click';
+    selector: string;
+    optional?: boolean;
+};
+export type TutorialActionEditor = {
+    type: 'fill-editor';
+    content: Record<string, any>;
+};
+export type TutorialAction = TutorialActionClick | TutorialActionEditor;
+export type TutorialImage = {
+    height: number;
+    src: string;
+};
+export type TutorialStep = {
+    title: string;
+    description: React.FC<void>;
+    image?: TutorialImage;
+    link?: string;
+    elementXpath?: string;
+    before?: TutorialAction[];
+};

package/dist/src/components/tutorial/engine/tutorial-types.js

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

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

@@ -0,0 +1,39 @@
+export declare const workbenchXPath: {
+    sidebarContainer: string;
+    closePanelButton: string;
+    bottomPanel: string;
+    flows: {
+        feature: (featureId: string) => string;
+        previewButton: (stepId: string) => string;
+        node: (stepId: string) => string;
+    };
+    endpoints: {
+        endpoint: (method: string, path: string) => string;
+        callPanel: string;
+        callTab: string;
+        response: string;
+        playButton: string;
+    };
+    tracing: {
+        trace: (index: number) => string;
+        details: string;
+        timeline: (index: number) => string;
+    };
+    logs: {
+        container: string;
+        searchContainer: string;
+        traceColumn: (index: number) => string;
+        row: string;
+    };
+    states: {
+        container: string;
+        row: (index: number) => string;
+    };
+    links: {
+        flows: string;
+        endpoints: string;
+        tracing: string;
+        logs: string;
+        states: string;
+    };
+};

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

@@ -0,0 +1,39 @@
+export const workbenchXPath = {
+    sidebarContainer: '//div[@data-testid="sidebar-panel"]',
+    closePanelButton: '//div[@id="app-sidebar-container"]//button[@data-testid="close-panel"]',
+    bottomPanel: '//div[@id="bottom-panel"]',
+    flows: {
+        feature: (featureId) => `//div[@data-feature-id="${featureId}"]`,
+        previewButton: (stepId) => `//button[@data-testid="open-code-preview-button-${stepId}"]`,
+        node: (stepId) => `//div[@data-testid="node-${stepId}"]`,
+    },
+    endpoints: {
+        endpoint: (method, path) => `//div[@data-testid="endpoint-${method}-${path}"]`,
+        callPanel: '//div[@data-testid="endpoint-body-panel__call"]',
+        callTab: '//button[@data-testid="endpoint-call-tab"]',
+        response: '//div[@data-testid="endpoint-response-container"]',
+        playButton: '//button[@data-testid="endpoint-play-button"]',
+    },
+    tracing: {
+        trace: (index) => `(//div[contains(@class, 'motia-trace-group')])[${index}]`,
+        details: '//div[@data-testid="trace-details"]',
+        timeline: (index) => `(//div[@data-testid="trace-timeline-item"])[${index}]`,
+    },
+    logs: {
+        container: '//div[@data-testid="logs-container"]',
+        searchContainer: '//div[@data-testid="logs-search-container"]',
+        traceColumn: (index) => `(//td[starts-with(@data-testid, 'trace')])[${index}]`,
+        row: '//div[@data-testid="log-row"]',
+    },
+    states: {
+        container: '//div[@data-testid="states-container"]',
+        row: (index) => `(//tr[starts-with(@data-testid, 'item-')])[${index}]`,
+    },
+    links: {
+        flows: '//button[@data-testid="flows-link"]',
+        endpoints: '//button[@data-testid="endpoints-link"]',
+        tracing: '//button[@data-testid="traces-link"]',
+        logs: '//button[@data-testid="logs-link"]',
+        states: '//button[@data-testid="states-link"]',
+    },
+};

package/dist/src/components/tutorial/hooks/tutorial-utils.d.ts

@@ -0,0 +1 @@
+export declare const waitForElementByXPath: (xpath: string, optional?: boolean, maxAttempts?: number, delayMs?: number) => Promise<HTMLElement | null>;

package/dist/src/components/tutorial/hooks/tutorial-utils.js

@@ -0,0 +1,17 @@
+export const waitForElementByXPath = async (xpath, optional = false, maxAttempts = 50, delayMs = 50) => {
+    let attempts = 0;
+    while (attempts < maxAttempts) {
+        const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+        const targetElement = result?.singleNodeValue;
+        if (targetElement) {
+            return targetElement;
+        }
+        else if (optional) {
+            return null;
+        }
+        await new Promise((resolve) => setTimeout(resolve, delayMs));
+        attempts++;
+    }
+    console.warn(`Element not found after maximum attempts: ${xpath}`);
+    return null;
+};

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

@@ -0,0 +1,14 @@
+import { TutorialImage } from '../engine/tutorial-types';
+export declare const useTutorialEngine: () => {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    highlighterRef: import("react").RefObject<HTMLDivElement | null>;
+    title: string;
+    description: import("react").ReactNode;
+    image: TutorialImage | undefined;
+    link: string | undefined;
+    currentStep: number;
+    totalSteps: number;
+    onClose: () => void;
+    moveStep: (stepNumber: number) => Promise<void>;
+    currentStepRef: import("react").RefObject<number>;
+};

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

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from 'react';
+import { waitForElementByXPath } from './tutorial-utils';
+import { MotiaTutorial } from '../engine/tutorial-engine';
+export const useTutorialEngine = () => {
+    const ref = useRef(null);
+    const highlighterRef = useRef(null);
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState(undefined);
+    const [image, setImage] = useState(undefined);
+    const [link, setLink] = useState(undefined);
+    const [currentStep, setCurrentStep] = useState(0);
+    const [totalSteps, setTotalSteps] = useState(MotiaTutorial.steps.length);
+    const loading = useRef(false);
+    const currentStepRef = useRef(0);
+    const moveComponent = (x, y) => {
+        if (ref.current) {
+            ref.current.style.position = 'absolute';
+            ref.current.style.left = `${x}px`;
+            ref.current.style.top = `${y}px`;
+        }
+    };
+    const moveStep = async (stepNumber) => {
+        const container = ref.current;
+        if (container && !loading.current) {
+            if (stepNumber >= MotiaTutorial.steps.length) {
+                onClose();
+                return;
+            }
+            loading.current = true;
+            currentStepRef.current = stepNumber;
+            const step = MotiaTutorial.steps[stepNumber];
+            // Run any before actions
+            if (step.before) {
+                for (const action of step.before) {
+                    if (action.type === 'click') {
+                        const element = await waitForElementByXPath(action.selector, action.optional);
+                        if (element) {
+                            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            element.click();
+                            element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Enter', keyCode: 13 }));
+                        }
+                    }
+                    else if (action.type === 'fill-editor' && monaco) {
+                        monaco.editor?.getEditors?.()?.[0]?.setValue(JSON.stringify(action.content, null, 2));
+                    }
+                }
+            }
+            setCurrentStep(stepNumber + 1);
+            setTitle(step.title);
+            setDescription(await step.description());
+            setImage(step.image);
+            setLink(step.link);
+            setTimeout(async () => {
+                const { height, width } = container.getBoundingClientRect();
+                if (step.elementXpath) {
+                    const targetElement = await waitForElementByXPath(step.elementXpath);
+                    if (!targetElement) {
+                        console.warn(`Element not found after maximum attempts: ${step.elementXpath}`);
+                        loading.current = false;
+                        return;
+                    }
+                    if (targetElement && highlighterRef.current) {
+                        const { top, left, width, height } = targetElement.getBoundingClientRect();
+                        highlighterRef.current.style.top = `${top - 0}px`;
+                        highlighterRef.current.style.left = `${left - 0}px`;
+                        highlighterRef.current.style.width = `${width + 0}px`;
+                        highlighterRef.current.style.height = `${height + 0}px`;
+                    }
+                    // Position tutorial relative to target element
+                    if (targetElement) {
+                        const targetRect = targetElement.getBoundingClientRect();
+                        const spaceBelow = window.innerHeight - targetRect.bottom;
+                        const spaceAbove = targetRect.top;
+                        const spaceRight = window.innerWidth - targetRect.right;
+                        const spaceLeft = targetRect.left;
+                        // Helper function to adjust horizontal position within viewport bounds
+                        const adjustHorizontalPosition = (x) => {
+                            // this is important to avoid the tutorial from overflowing at far left or right
+                            return Math.max(20, Math.min(x, window.innerWidth - width - 20));
+                        };
+                        // Try to position below first
+                        if (spaceBelow >= height + 20) {
+                            const x = targetRect.left + targetRect.width / 2 - width / 2;
+                            moveComponent(adjustHorizontalPosition(x), targetRect.bottom + 20);
+                        }
+                        // Try above if not enough space below
+                        else if (spaceAbove >= height + 20) {
+                            const x = targetRect.left + targetRect.width / 2 - width / 2;
+                            moveComponent(adjustHorizontalPosition(x), targetRect.top - height - 20);
+                        }
+                        // Try right side
+                        else if (spaceRight >= width + 20) {
+                            moveComponent(targetRect.right + 20, targetRect.top + targetRect.height / 2 - height / 2);
+                        }
+                        // Try left side
+                        else if (spaceLeft >= width + 20) {
+                            moveComponent(targetRect.left - width - 20, targetRect.top + targetRect.height / 2 - height / 2);
+                        }
+                    }
+                }
+                else {
+                    if (highlighterRef.current) {
+                        highlighterRef.current.style.top = '50%';
+                        highlighterRef.current.style.left = '50%';
+                        highlighterRef.current.style.width = '1px';
+                        highlighterRef.current.style.height = '1px';
+                    }
+                    // Fallback to center of screen
+                    moveComponent(window.innerWidth / 2 - width / 2, window.innerHeight / 2 - height / 2);
+                }
+            }, 100);
+            loading.current = false;
+        }
+    };
+    const onClose = () => {
+        if (ref.current?.parentElement) {
+            ref.current.parentElement.style.transition = 'opacity 0.3s ease-out';
+            ref.current.parentElement.style.opacity = '0';
+            setTimeout(() => {
+                if (ref.current?.parentElement) {
+                    ref.current.parentElement.style.display = 'none';
+                }
+            }, 300);
+        }
+    };
+    useEffect(() => {
+        importFile('tutorial.tsx').then((module) => {
+            if (Array.isArray(module.steps) && module.steps.length > 0) {
+                MotiaTutorial.register(module.steps);
+            }
+        });
+    }, []);
+    useEffect(() => {
+        const container = ref.current;
+        if (container?.parentElement) {
+            container.parentElement.style.display = 'none';
+        }
+        const onOpen = () => {
+            if (container?.parentElement) {
+                container.parentElement.style.opacity = '1';
+                container.parentElement.style.display = 'block';
+                setTotalSteps(MotiaTutorial.steps.length);
+                moveStep(0);
+            }
+        };
+        MotiaTutorial.onOpen(onOpen);
+        MotiaTutorial.onStepsRegistered(onOpen);
+    }, []);
+    return {
+        ref,
+        highlighterRef,
+        title,
+        description,
+        image,
+        link,
+        currentStep,
+        totalSteps,
+        onClose,
+        moveStep,
+        currentStepRef,
+    };
+};

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

@@ -0,0 +1,5 @@
+import { TutorialStep } from '../engine/tutorial-types';
+export declare const useTutorial: () => {
+    open: () => void;
+    steps: TutorialStep[];
+};