@motiadev/workbench 0.8.2-beta.140-628177 → 0.8.2-beta.140-111855

package/dist/motia-plugin/validator.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePluginConfig = validatePluginConfig;
+exports.validatePlugins = validatePlugins;
+const fs_1 = require("fs");
+const zod_1 = require("zod");
+const types_1 = require("./types");
+const utils_1 = require("./utils");
+/**
+ * Zod schema for WorkbenchPlugin configuration.
+ * Provides runtime type validation with detailed error messages.
+ */
+const WorkbenchPluginSchema = zod_1.z.object({
+    packageName: zod_1.z
+        .string()
+        .min(1, 'packageName is required and cannot be empty')
+        .refine((name) => name.startsWith('~/') || name.startsWith('@') || /^[a-z0-9-_]+$/i.test(name), {
+        message: 'packageName must be a valid npm package name or local path (starting with ~/)',
+    }),
+    componentName: zod_1.z.string().optional(),
+    position: zod_1.z
+        .enum(['top', 'bottom'])
+        .optional()
+        .refine((pos) => pos === undefined || (0, types_1.isValidPosition)(pos), {
+        message: 'position must be either "top" or "bottom"',
+    }),
+    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()).optional(),
+});
+/**
+ * Validates a single plugin configuration.
+ *
+ * @param plugin - The plugin configuration to validate
+ * @param index - The index of the plugin in the array (for error messages)
+ * @returns A validation result with errors, warnings, and normalized plugin
+ */
+function validatePluginConfig(plugin, index) {
+    const errors = [];
+    const warnings = [];
+    if (typeof plugin !== 'object' || plugin === null) {
+        return {
+            valid: false,
+            errors: [`Plugin at index ${index}: expected object, got ${typeof plugin}`],
+            warnings: [],
+        };
+    }
+    try {
+        const result = WorkbenchPluginSchema.safeParse(plugin);
+        if (!result.success) {
+            result.error.errors.forEach((err) => {
+                const path = err.path.join('.');
+                errors.push(`Plugin at index ${index}, field "${path}": ${err.message}`);
+            });
+            return { valid: false, errors, warnings };
+        }
+        const validatedPlugin = result.data;
+        if ((0, utils_1.isLocalPlugin)(validatedPlugin.packageName)) {
+            const resolvedPath = (0, utils_1.resolveLocalPath)(validatedPlugin.packageName);
+            if (!(0, fs_1.existsSync)(resolvedPath)) {
+                warnings.push(`Plugin at index ${index}: local path "${validatedPlugin.packageName}" does not exist at "${resolvedPath}". ` +
+                    `Make sure the path is correct relative to the project root.`);
+            }
+        }
+        if (!validatedPlugin.label) {
+            warnings.push(`Plugin at index ${index}: "label" not specified, will use default "${types_1.CONSTANTS.DEFAULTS.LABEL}"`);
+        }
+        if (!validatedPlugin.labelIcon) {
+            warnings.push(`Plugin at index ${index}: "labelIcon" not specified, will use default "${types_1.CONSTANTS.DEFAULTS.ICON}"`);
+        }
+        if (!validatedPlugin.position) {
+            warnings.push(`Plugin at index ${index}: "position" not specified, will use default "${types_1.CONSTANTS.DEFAULTS.POSITION}"`);
+        }
+        if (validatedPlugin.props && Object.keys(validatedPlugin.props).length === 0) {
+            warnings.push(`Plugin at index ${index}: "props" is an empty object`);
+        }
+        if (validatedPlugin.cssImports) {
+            if (validatedPlugin.cssImports.length === 0) {
+                warnings.push(`Plugin at index ${index}: "cssImports" is an empty array`);
+            }
+            validatedPlugin.cssImports.forEach((cssImport, cssIndex) => {
+                if (!cssImport || cssImport.trim() === '') {
+                    warnings.push(`Plugin at index ${index}: cssImport at index ${cssIndex} is empty or whitespace`);
+                }
+            });
+        }
+        return {
+            valid: true,
+            errors: [],
+            warnings,
+            plugin: validatedPlugin,
+        };
+    }
+    catch (error) {
+        return {
+            valid: false,
+            errors: [`Plugin at index ${index}: unexpected validation error: ${error}`],
+            warnings: [],
+        };
+    }
+}
+/**
+ * Validates an array of plugin configurations.
+ *
+ * @param plugins - Array of plugin configurations to validate
+ * @param options - Validation options
+ * @returns Combined validation result for all plugins
+ */
+function validatePlugins(plugins, options = {}) {
+    const allErrors = [];
+    const allWarnings = [];
+    const validatedPlugins = [];
+    if (!Array.isArray(plugins)) {
+        return {
+            valid: false,
+            errors: [`Expected plugins to be an array, got ${typeof plugins}`],
+            warnings: [],
+        };
+    }
+    if (plugins.length === 0) {
+        console.warn('[motia-plugins] No plugins provided to validate');
+        return {
+            valid: true,
+            errors: [],
+            warnings: ['No plugins configured'],
+        };
+    }
+    for (let i = 0; i < plugins.length; i++) {
+        const result = validatePluginConfig(plugins[i], i);
+        allErrors.push(...result.errors);
+        allWarnings.push(...result.warnings);
+        if (result.valid && result.plugin) {
+            validatedPlugins.push(result.plugin);
+        }
+        if (options.failFast && result.errors.length > 0) {
+            break;
+        }
+    }
+    const packageNames = validatedPlugins.map((p) => p.packageName);
+    const duplicates = packageNames.filter((name, index) => packageNames.indexOf(name) !== index);
+    if (duplicates.length > 0) {
+        const uniqueDuplicates = [...new Set(duplicates)];
+        uniqueDuplicates.forEach((dup) => {
+            allWarnings.push(`Duplicate package name found: "${dup}". This may cause conflicts.`);
+        });
+    }
+    const valid = allErrors.length === 0;
+    if (valid) {
+        console.log(`[motia-plugins] ✓ Validated ${validatedPlugins.length} plugin(s) successfully`);
+        if (allWarnings.length > 0) {
+            console.warn(`[motia-plugins] Found ${allWarnings.length} warning(s)`);
+        }
+    }
+    else {
+        console.error(`[motia-plugins] ✗ Validation failed with ${allErrors.length} error(s)`);
+    }
+    return {
+        valid,
+        errors: allErrors,
+        warnings: allWarnings,
+    };
+}

package/dist/postcss.config.mjs

@@ -1,6 +1,6 @@
-import path from 'path'
 import { dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import path from 'path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 

package/dist/src/App.d.ts

@@ -1,2 +1,2 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 export declare const App: FC;

package/dist/src/App.js

@@ -2,10 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { FlowPage } from './components/flow/flow-page';
 import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
-import { TracingTabLabel } from './components/observability/trace-tab-label';
-import { TracesPage } from './components/observability/traces-page';
-import { StatesTabLabel } from './components/states/state-tab-label';
-import { StatesPage } from './components/states/states-page';
 import { registerPluginTabs } from './lib/plugins';
 import { getViewModeFromURL } from './lib/utils';
 import { ProjectViewMode } from './project-view-mode';
@@ -13,9 +9,7 @@ import { setAppTabs, TabLocation } from './stores/use-app-tabs-store';
 import { SystemViewMode } from './system-view-mode';
 const TAB_IDS = {
     FLOW: 'flow',
-    TRACING: 'tracing',
     LOGS: 'logs',
-    STATES: 'states',
 };
 const registerDefaultTabs = () => {
     const topTabs = [
@@ -25,18 +19,7 @@ const registerDefaultTabs = () => {
             content: FlowPage,
         },
     ];
-    const bottomTabs = [
-        {
-            id: TAB_IDS.TRACING,
-            tabLabel: TracingTabLabel,
-            content: TracesPage,
-        },
-        {
-            id: TAB_IDS.STATES,
-            tabLabel: StatesTabLabel,
-            content: StatesPage,
-        },
-    ];
+    const bottomTabs = [];
     setAppTabs(TabLocation.TOP, topTabs);
     setAppTabs(TabLocation.BOTTOM, bottomTabs);
 };

package/dist/src/components/flow/base-edge.d.ts

@@ -1,3 +1,3 @@
-import { EdgeProps } from '@xyflow/react';
-import React from 'react';
+import { type EdgeProps } from '@xyflow/react';
+import type React from 'react';
 export declare const BaseEdge: React.FC<EdgeProps>;

package/dist/src/components/flow/base-edge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, useThemeStore } from '@motiadev/ui';
 import { BaseEdge as BaseReactFlowEdge, EdgeLabelRenderer, getSmoothStepPath } from '@xyflow/react';
 import { cva } from 'class-variance-authority';
-import { cn, useThemeStore } from '@motiadev/ui';
 const labelVariants = cva('absolute pointer-events-all text-cs border p-1 px-2', {
     variants: {
         color: {

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useFlowStore } from '@/stores/use-flow-store';
 import { useStreamItem } from '@motiadev/stream-client-react';
-import { FlowView } from './flow-view';
 import { ReactFlowProvider } from '@xyflow/react';
+import { useFlowStore } from '@/stores/use-flow-store';
+import { FlowView } from './flow-view';
 export const FlowPage = () => {
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
     const { data: flow } = useStreamItem({

package/dist/src/components/flow/flow-tab-menu-item.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui';
 import { ChevronsUpDown, Workflow } from 'lucide-react';
-import { useFlowStore } from '@/stores/use-flow-store';
-import { useFetchFlows } from '@/hooks/use-fetch-flows';
 import { useShallow } from 'zustand/react/shallow';
+import { useFetchFlows } from '@/hooks/use-fetch-flows';
 import { analytics } from '@/lib/analytics';
+import { useFlowStore } from '@/stores/use-flow-store';
 export const FlowTabMenuItem = () => {
     useFetchFlows();
     const selectFlowId = useFlowStore((state) => state.selectFlowId);

package/dist/src/components/flow/flow-view.d.ts

@@ -1,6 +1,6 @@
-import { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '@/types/flow';
-import { Edge as ReactFlowEdge, Node as ReactFlowNode } from '@xyflow/react';
-import React from 'react';
+import { type Edge as ReactFlowEdge, type Node as ReactFlowNode } from '@xyflow/react';
+import type React from 'react';
+import type { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '@/types/flow';
 import '@xyflow/react/dist/style.css';
 export type FlowNode = ReactFlowNode<NodeData>;
 export type FlowEdge = ReactFlowEdge<EdgeData>;

package/dist/src/components/flow/hooks/use-get-flow-state.d.ts

@@ -1,6 +1,6 @@
+import { type Edge, type Node } from '@xyflow/react';
+import type React from 'react';
 import type { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '@/types/flow';
-import { Edge, Node } from '@xyflow/react';
-import React from 'react';
 export declare const useGetFlowState: (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
     nodes: Node<NodeData>[];
     edges: Edge<EdgeData>[];

package/dist/src/components/flow/hooks/use-get-flow-state.js

@@ -10,9 +10,7 @@ const DEFAULT_CONFIG = { x: 0, y: 0 };
 const getNodePosition = (flowConfig, stepName) => {
     return flowConfig?.config[stepName] || DEFAULT_CONFIG;
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const nodeComponentCache = new Map();
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const BASE_NODE_TYPES = {
     event: EventFlowNode,
     api: ApiFlowNode,
@@ -20,7 +18,6 @@ const BASE_NODE_TYPES = {
     cron: CronFlowNode,
 };
 async function importFlow(flow, flowConfig) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const nodeTypes = { ...BASE_NODE_TYPES };
     const customNodePromises = flow.steps
         .filter((step) => step.nodeComponentPath)
@@ -57,7 +54,6 @@ async function importFlow(flow, flowConfig) {
     return { nodes, edges, nodeTypes };
 }
 export const useGetFlowState = (flow, flowConfig) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [nodeTypes, setNodeTypes] = useState(BASE_NODE_TYPES);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);

package/dist/src/components/flow/hooks/use-save-workflow-config.d.ts

@@ -1,2 +1,2 @@
-import { FlowConfigResponse } from '@/types/flow';
+import type { FlowConfigResponse } from '@/types/flow';
 export declare const useSaveWorkflowConfig: () => (body: FlowConfigResponse) => Promise<any>;

package/dist/src/components/flow/node-organizer.d.ts

@@ -1,6 +1,6 @@
-import { EdgeData, NodeData } from '@/types/flow';
-import { Edge, Node } from '@xyflow/react';
-import React from 'react';
+import { type Edge, type Node } from '@xyflow/react';
+import type React from 'react';
+import type { EdgeData, NodeData } from '@/types/flow';
 type Props = {
     onInitialized: () => void;
     nodes: Node<NodeData>[];

package/dist/src/components/flow/nodes/api-flow-node.d.ts

@@ -1,2 +1,2 @@
-import { ApiNodeProps } from '@/publicComponents/node-props';
+import type { ApiNodeProps } from '@/publicComponents/node-props';
 export declare const ApiFlowNode: ({ data }: ApiNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/nodes/cron-flow-node.d.ts

@@ -1,2 +1,2 @@
-import { CronNodeProps } from '@/publicComponents/node-props';
+import type { CronNodeProps } from '@/publicComponents/node-props';
 export declare const CronFlowNode: ({ data }: CronNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/nodes/event-flow-node.d.ts

@@ -1,2 +1,2 @@
-import { EventNodeProps } from '@/publicComponents/node-props';
+import type { EventNodeProps } from '@/publicComponents/node-props';
 export declare const EventFlowNode: ({ data }: EventNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/nodes/noop-flow-node.d.ts

@@ -1,2 +1,2 @@
-import { NoopNodeProps } from '@/publicComponents/node-props';
+import type { NoopNodeProps } from '@/publicComponents/node-props';
 export declare const NoopFlowNode: ({ data }: NoopNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/header/deploy-button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { analytics } from '@/lib/analytics';
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui';
 import { Rocket } from 'lucide-react';
 import { useState } from 'react';
+import { analytics } from '@/lib/analytics';
 export const DeployButton = () => {
     const [isOpen, setIsOpen] = useState(false);
     const onDeployButtonClick = () => {
@@ -24,5 +24,5 @@ export const DeployButton = () => {
         analytics.track('deploy_button_self_hosted_clicked');
         window.open('https://www.motia.dev/docs/deployment-guide/self-hosted', '_blank');
     };
-    return (_jsxs(_Fragment, { children: [isOpen && (_jsxs("div", { children: [_jsx("div", { className: "fixed inset-0 z-[9999] bg-black/20 backdrop-blur-sm", onClick: () => setIsOpen(false) }), _jsxs("div", { className: "driver-popover w-[600px]! fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[10000] animate-in fade-in-0 zoom-in-95", children: [_jsx("img", { src: "https://oxhhfuuoqzsaqthfairn.supabase.co/storage/v1/object/public/public-images/preview.png", alt: "Motia Cloud", className: "driver-popover-image object-cover", style: { height: 393, width: '100%' } }), _jsx("div", { className: "driver-popover-title", children: _jsx("h2", { className: "popover-title", children: "Motia Cloud is Live!" }) }), _jsx("div", { className: "driver-popover-description", children: "Deploy to production in minutes, not hours. One click gets your Motia project live with enterprise-grade reliability. Seamlessly scale, rollback instantly, and monitor everything in real-time. Your code deserves infrastructure that just works." }), _jsx("a", { href: "https://www.motia.dev/docs/concepts/deployment/motia-cloud/features", target: "_blank", className: "text-foreground text-xs font-semibold px-4 hover:underline", children: "Learn more about Motia Cloud" }), _jsx("div", { className: "driver-popover-footer flex items-center justify-end", children: _jsxs("div", { className: "driver-popover-navigation-btns flex gap-6", children: [_jsx("button", { className: "tutorial-opt-out-button text-sm! font-semibold! text-muted-foreground!", onClick: onClose, children: "Close" }), _jsx("a", { href: "https://motia.cloud?utm_source=workbench&utm_medium=referral", target: "_blank", onClick: onDeployClick, children: _jsx("button", { className: "driver-popover-next-btn", children: "Deploy!" }) })] }) })] })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "font-semibold text-sm dark:bg-white dark:text-black dark:hover:bg-white/90 bg-black/90 hover:bg-black/80 text-white", onClick: onDeployButtonClick, children: [_jsx(Rocket, {}), "Deploy"] }) }), _jsxs(DropdownMenuContent, { className: "bg-background text-foreground w-56", children: [_jsx(DropdownMenuItem, { className: "cursor-pointer h-10 font-semibold", onClick: onMotiaCloudClick, children: "Motia Cloud" }), _jsx(DropdownMenuItem, { className: "cursor-pointer h-10 font-semibold", onClick: onSelfHostedClick, children: "Self-Hosted (Docker)" })] })] })] }));
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsxs("div", { children: [_jsx("div", { className: "fixed inset-0 z-[9999] bg-black/20 backdrop-blur-sm", onClick: () => setIsOpen(false) }), _jsxs("div", { className: "driver-popover w-[600px]! fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[10000] animate-in fade-in-0 zoom-in-95", children: [_jsx("img", { src: "https://oxhhfuuoqzsaqthfairn.supabase.co/storage/v1/object/public/public-images/preview.png", alt: "Motia Cloud", className: "driver-popover-image object-cover", style: { height: 393, width: '100%' } }), _jsx("div", { className: "driver-popover-title", children: _jsx("h2", { className: "popover-title", children: "Motia Cloud is Live!" }) }), _jsx("div", { className: "driver-popover-description", children: "Deploy to production in minutes, not hours. One click gets your Motia project live with enterprise-grade reliability. Seamlessly scale, rollback instantly, and monitor everything in real-time. Your code deserves infrastructure that just works." }), _jsx("a", { href: "https://www.motia.dev/docs/concepts/deployment/motia-cloud/features", target: "_blank", className: "text-foreground text-xs font-semibold px-4 hover:underline", rel: "noopener", children: "Learn more about Motia Cloud" }), _jsx("div", { className: "driver-popover-footer flex items-center justify-end", children: _jsxs("div", { className: "driver-popover-navigation-btns flex gap-6", children: [_jsx("button", { className: "tutorial-opt-out-button text-sm! font-semibold! text-muted-foreground!", onClick: onClose, children: "Close" }), _jsx("a", { href: "https://motia.cloud?utm_source=workbench&utm_medium=referral", target: "_blank", onClick: onDeployClick, rel: "noopener", children: _jsx("button", { className: "driver-popover-next-btn", children: "Deploy!" }) })] }) })] })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "font-semibold text-sm dark:bg-white dark:text-black dark:hover:bg-white/90 bg-black/90 hover:bg-black/80 text-white", onClick: onDeployButtonClick, children: [_jsx(Rocket, {}), "Deploy"] }) }), _jsxs(DropdownMenuContent, { className: "bg-background text-foreground w-56", children: [_jsx(DropdownMenuItem, { className: "cursor-pointer h-10 font-semibold", onClick: onMotiaCloudClick, children: "Motia Cloud" }), _jsx(DropdownMenuItem, { className: "cursor-pointer h-10 font-semibold", onClick: onSelfHostedClick, children: "Self-Hosted (Docker)" })] })] })] }));
 };

package/dist/src/components/header/header.d.ts

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

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import motiaLogoDark from '@/assets/motia-dark.png';
-import motiaLogoLight from '@/assets/motia-light.png';
 import { useThemeStore } from '@motiadev/ui';
 import { useEffect, useState } from 'react';
+import motiaLogoDark from '@/assets/motia-dark.png';
+import motiaLogoLight from '@/assets/motia-light.png';
 import { Tutorial } from '../tutorial/tutorial';
 import { TutorialButton } from '../tutorial/tutorial-button';
 import { ThemeToggle } from '../ui/theme-toggle';

package/dist/src/components/root-motia.d.ts

@@ -1,2 +1,3 @@
-import React, { PropsWithChildren } from 'react';
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
 export declare const RootMotia: React.FC<PropsWithChildren>;

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

@@ -1,4 +1,4 @@
-import { TutorialStep } from './tutorial-types';
+import type { TutorialStep } from './tutorial-types';
 declare class Tutorial {
     steps: TutorialStep[];
     private onStepsRegisteredCallbacks;

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

@@ -1,4 +1,4 @@
-import { TutorialImage } from '../engine/tutorial-types';
+import type { TutorialImage } from '../engine/tutorial-types';
 export declare const useTutorialEngine: () => {
     ref: import("react").RefObject<HTMLDivElement | null>;
     highlighterRef: import("react").RefObject<HTMLDivElement | null>;

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

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

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

@@ -1,2 +1,2 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 export declare const TutorialButton: FC;

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

@@ -1,7 +1,7 @@
 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 { analytics } from '@/lib/analytics';
 import { Tooltip } from '../ui/tooltip';
 import { useTutorial } from './hooks/use-tutorial';
 export const TutorialButton = () => {

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TutorialImage } from './engine/tutorial-types';
+import type React from 'react';
+import type { TutorialImage } from './engine/tutorial-types';
 type TutorialStepProps = {
     step: number;
     totalSteps: number;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect } from 'react';
 import { BackgroundEffect } from '@motiadev/ui';
+import { forwardRef, useEffect } from 'react';
 export const TutorialStep = forwardRef(({ step, totalSteps, title, description, link, image, onNext, onClose }, ref) => {
     useEffect(() => {
         const handleKeyDown = (e) => {

package/dist/src/components/tutorial/tutorial.css

@@ -1,6 +1,6 @@
-@import '@motiadev/ui/styles.css';
-@import '@motiadev/ui/globals.css';
-@import 'tw-animate-css';
+@import "@motiadev/ui/styles.css";
+@import "@motiadev/ui/globals.css";
+@import "tw-animate-css";
 
 :root {
   --tutorial-text-color: var(--dark-800);
@@ -58,7 +58,6 @@
 
 .driver-popover-title {
   padding: 16px 16px 0 16px;
-  
 }
 
 .driver-popover-description {
@@ -122,7 +121,7 @@
 }
 
 .driver-popover-navigation-btns-hint:hover:before {
-  content: 'Use arrow keys to navigate';
+  content: "Use arrow keys to navigate";
   position: absolute;
   color: white;
   top: -20px;
@@ -155,7 +154,8 @@
   display: none;
 }
 
-.driver-popover-next-btn, .driver-popover-next-btn:hover {
+.driver-popover-next-btn,
+.driver-popover-next-btn:hover {
   color: white;
   padding: 16px 32px;
 }
@@ -201,7 +201,7 @@
   background: var(--tutorial-code-bg);
   padding: 16px;
   border-radius: 8px;
-  
+
   code {
     font-size: 14px;
     font-weight: 400;
@@ -212,4 +212,4 @@
 
 .driver-popover-close-btn {
   display: none;
-}
+}

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 type JsonEditorProps = {
     value: string;
     height?: number | string;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useThemeStore } from '@motiadev/ui';
 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();

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 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 }));

package/dist/src/components/ui/theme-toggle.d.ts

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

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export declare const Tooltip: ({ children, content, disabled, }: {
     children: ReactNode;
     content: string | ReactNode;

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

@@ -1,6 +1,6 @@
-import { useFlowStore } from '@/stores/use-flow-store';
 import { useStreamGroup } from '@motiadev/stream-client-react';
 import { useEffect } from 'react';
+import { useFlowStore } from '@/stores/use-flow-store';
 export const useFetchFlows = () => {
     const setFlows = useFlowStore((state) => state.setFlows);
     const selectFlowId = useFlowStore((state) => state.selectFlowId);

package/dist/src/hooks/use-update-handle-positions.d.ts

@@ -1,5 +1,5 @@
 import { Position } from '@xyflow/react';
-import { BaseNodeProps } from '../publicComponents/node-props';
+import type { BaseNodeProps } from '../publicComponents/node-props';
 export declare const useHandlePositions: (data: BaseNodeProps) => {
     sourcePosition: Position;
     targetPosition: Position;

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/plugins.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { addAppTab, TabLocation } from '@/stores/use-app-tabs-store';
+import { plugins } from 'virtual:motia-plugins';
 import { DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic';
 import { memo } from 'react';
-import { plugins } from 'virtual:motia-plugins';
+import { addAppTab, TabLocation } from '@/stores/use-app-tabs-store';
 import { isValidTabLocation } from './utils';
 export const registerPluginTabs = () => {
     if (!Array.isArray(plugins)) {
@@ -43,7 +43,7 @@ export const registerPluginTabs = () => {
             });
             PluginContent.displayName = `${plugin.label}Content`;
             addAppTab(tabLocation, {
-                id: plugin.label,
+                id: plugin.label.toLowerCase(),
                 tabLabel: PluginTabLabel,
                 content: PluginContent,
             });

package/dist/src/main.js

@@ -2,15 +2,14 @@ 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, Routes, Route } from 'react-router-dom';
-import { RootMotia } from './components/root-motia';
+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) {
-    // eslint-disable-next-line no-undef
     const basePath = workbenchBase;
     const root = createRoot(rootElement);
     const address = window.location.origin.replace('http', 'ws');

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
 import { APP_SIDEBAR_CONTAINER_ID, Panel } from '@motiadev/ui';
 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 = () => {
     const tabs = useAppTabsStore(useShallow(topTabs));