@motiadev/workbench 0.9.4-beta.151-160668 → 0.9.4-beta.151-182295

package/dist/motia-plugin/validator.js

@@ -27,7 +27,7 @@ const WorkbenchPluginSchema = zod_1.z.object({
     label: zod_1.z.string().optional(),
     labelIcon: zod_1.z.string().optional(),
     cssImports: zod_1.z.array(zod_1.z.string()).optional(),
-    props: zod_1.z.record(zod_1.z.any(), zod_1.z.any()).optional(),
+    props: zod_1.z.record(zod_1.z.any()).optional(),
 });
 /**
  * Validates a single plugin configuration.
@@ -49,7 +49,7 @@ function validatePluginConfig(plugin, index) {
     try {
         const result = WorkbenchPluginSchema.safeParse(plugin);
         if (!result.success) {
-            result.error.issues.forEach((err) => {
+            result.error.errors.forEach((err) => {
                 const path = err.path.join('.');
                 errors.push(`Plugin at index ${index}, field "${path}": ${err.message}`);
             });

package/dist/src/components/bottom-panel.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
-import { memo, useId } from 'react';
+import { memo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store';
 import { useTabsStore } from '../stores/use-tabs-store';
 const bottomTabsSelector = (state) => state.tabs[TabLocation.BOTTOM];
+const bottomPanelId = 'bottom-panel';
 export const BottomPanel = memo(() => {
     const defaultTab = useTabsStore((state) => state.tab.bottom);
     const setBottomTab = useTabsStore((state) => state.setBottomTab);
     const tabs = useAppTabsStore(useShallow(bottomTabsSelector));
-    const bottomPanelId = useId();
     return (_jsx(CollapsiblePanel, { id: bottomPanelId, variant: 'tabs', defaultTab: defaultTab, onTabChange: setBottomTab, header: _jsx(TabsList, { children: tabs.map(({ id, tabLabel: Label }) => (_jsx(TabsTrigger, { value: id, "data-testid": `${id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(Label, {}) }, id))) }), children: tabs.map(({ id, content: Element }) => (_jsx(TabsContent, { value: id, className: "h-full", children: _jsx(Element, {}) }, id))) }));
 });
 BottomPanel.displayName = 'BottomPanel';

package/dist/src/components/top-panel.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
-import { memo, useId } from 'react';
+import { memo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store';
 import { useTabsStore } from '../stores/use-tabs-store';
 const topTabsSelector = (state) => state.tabs[TabLocation.TOP];
+const topPanelId = 'top-panel';
 export const TopPanel = memo(() => {
     const defaultTab = useTabsStore((state) => state.tab.top);
     const setTopTab = useTabsStore((state) => state.setTopTab);
     const tabs = useAppTabsStore(useShallow(topTabsSelector));
-    const topPanelId = useId();
     return (_jsx(CollapsiblePanel, { id: topPanelId, variant: 'tabs', defaultTab: defaultTab, onTabChange: setTopTab, withResizeHandle: true, header: _jsx(TabsList, { children: tabs.map(({ id, tabLabel: Label }) => (_jsx(TabsTrigger, { value: id, "data-testid": `${id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(Label, {}) }, id))) }), children: tabs.map(({ id, content: Element }) => (_jsx(TabsContent, { value: id, className: "h-full", children: _jsx(Element, {}) }, id))) }));
 });
 TopPanel.displayName = 'TopPanel';

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

@@ -21,7 +21,7 @@ export const workbenchXPath = {
         playButton: '//button[@data-testid="endpoint-play-button"]',
     },
     tracing: {
-        trace: (index) => `(//div[contains(@class, 'motia-trace-group')])[${index}]`,
+        trace: (index) => `(//button[contains(@class, 'motia-trace-group')])[${index}]`,
         details: '//div[@data-testid="trace-details"]',
         timeline: (index) => `(//div[@data-testid="trace-timeline-item"])[${index}]`,
     },
@@ -38,7 +38,7 @@ export const workbenchXPath = {
     links: {
         flows: '//div[@data-testid="flows-dropdown-trigger"]',
         endpoints: '//button[@data-testid="endpoints-link"]',
-        tracing: '//button[@data-testid="traces-link"]',
+        tracing: '//button[@data-testid="tracing-link"]',
         logs: '//button[@data-testid="logs-link"]',
         states: '//button[@data-testid="states-link"]',
     },

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

@@ -127,6 +127,7 @@ export const useTutorialEngine = () => {
             setTimeout(() => {
                 if (ref.current?.parentElement) {
                     ref.current.parentElement.style.display = 'none';
+                    setCurrentStep(0);
                 }
             }, 300);
         }

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

@@ -4,16 +4,16 @@ import { forwardRef, useEffect } from 'react';
 export const TutorialStep = forwardRef(({ step, totalSteps, title, description, link, image, onNext, onClose }, ref) => {
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (step > 0 && e.key === 'Escape') {
                 onClose();
             }
-            else if (e.key === 'ArrowRight') {
+            else if (step > 0 && e.key === 'ArrowRight') {
                 onNext();
             }
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [onClose, onNext]);
+    }, [onClose, onNext, step]);
     return (_jsxs("div", { ref: ref, className: "driver-popover ", children: [image && (_jsx("img", { src: image.src, alt: "Step visual", className: "driver-popover-image object-cover", style: { height: image.height, width: '100%' } })), _jsxs("div", { className: "isolate relative", children: [_jsx(BackgroundEffect, {}), _jsx("div", { className: "driver-popover-title", children: _jsx("h2", { className: "popover-title", children: title }) }), _jsx("div", { className: "driver-popover-description", children: description }), link && (_jsx("a", { href: link, target: "_blank", className: "text-foreground text-xs font-semibold px-4 hover:underline", children: "Learn more" })), _jsxs("div", { className: "driver-popover-footer flex items-center justify-between", children: [_jsxs("div", { className: "text-sm text-muted-foreground font-semibold", children: [step, " ", _jsx("span", { className: "text-foreground", children: "/" }), " ", totalSteps] }), _jsx("div", { className: "driver-popover-navigation-btns driver-popover-navigation-btns-hint flex gap-2", children: _jsx("button", { className: "driver-popover-next-btn", onClick: onNext, children: step < totalSteps ? 'Continue' : 'Finish' }) })] }), step < totalSteps && (_jsx("div", { className: "tutorial-opt-out-container", children: _jsx("button", { className: "tutorial-opt-out-button", onClick: onClose, children: "Close" }) }))] })] }));
 });
 TutorialStep.displayName = 'TutorialStep';