@motiadev/workbench 0.14.0-beta.165-285707 → 0.15.0-beta.165

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

@@ -1,2 +0,0 @@
-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/cron-flow-node.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CronNode } from '@/publicComponents/cron-node';
-export const CronFlowNode = ({ data }) => {
-    return _jsx(CronNode, { data: data });
-};

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

@@ -1,2 +0,0 @@
-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/event-flow-node.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EventNode } from '@/publicComponents/event-node';
-export const EventFlowNode = ({ data }) => {
-    return _jsx(EventNode, { data: data });
-};

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

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

package/dist/src/components/flow/nodes/noop-flow-node.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { NoopNode } from '@/publicComponents/noop-node';
-export const NoopFlowNode = ({ data }) => {
-    return _jsx(NoopNode, { data: data });
-};

package/dist/src/components/header/deploy-button.d.ts

@@ -1 +0,0 @@
-export declare const DeployButton: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui';
-import { Rocket } from 'lucide-react';
-import { useState } from 'react';
-import { motiaAnalytics } from '@/lib/motia-analytics';
-export const DeployButton = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const onDeployButtonClick = () => {
-        motiaAnalytics.track('deploy_button_clicked');
-    };
-    const onDeployClick = () => {
-        setIsOpen(false);
-        motiaAnalytics.track('deploy_button_deploy_clicked');
-    };
-    const onClose = () => {
-        setIsOpen(false);
-        motiaAnalytics.track('deploy_button_closed');
-    };
-    const onMotiaCloudClick = () => {
-        setIsOpen(true);
-        motiaAnalytics.track('deploy_button_motia_cloud_clicked');
-    };
-    const onSelfHostedClick = () => {
-        motiaAnalytics.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/deployment-guide/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 +0,0 @@
-import type React from 'react';
-export declare const Header: React.FC;

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

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useThemeStore } from '@motiadev/ui';
-import { memo, useEffect } from 'react';
-import motiaLogoDark from '@/assets/motia-dark.png';
-import motiaLogoLight from '@/assets/motia-light.png';
-import { useMotiaConfigStore } from '@/stores/use-motia-config-store';
-import { Tutorial } from '../tutorial/tutorial';
-import { TutorialButton } from '../tutorial/tutorial-button';
-import { ThemeToggle } from '../ui/theme-toggle';
-import { DeployButton } from './deploy-button';
-export const Header = memo(() => {
-    const theme = useThemeStore((state) => state.theme);
-    const logo = theme === 'light' ? motiaLogoLight : motiaLogoDark;
-    const config = useMotiaConfigStore((state) => state.config);
-    const fetchConfig = useMotiaConfigStore((state) => state.fetchConfig);
-    useEffect(() => {
-        fetchConfig();
-    }, []);
-    const isDevMode = config?.isDev ?? false;
-    const isTutorialDisabled = config?.isTutorialDisabled ?? true;
-    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: logo, className: "h-5", id: "logo-icon", "data-testid": "logo-icon" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), isDevMode && !isTutorialDisabled && _jsx(TutorialButton, {}), isDevMode && _jsx(DeployButton, {}), !isTutorialDisabled && _jsx(Tutorial, {})] }));
-});
-Header.displayName = 'Header';

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

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

package/dist/src/components/root-motia.js

@@ -1,7 +0,0 @@
-import { memo } from 'react';
-import { useAnalytics } from '@/lib/motia-analytics';
-export const RootMotia = memo(({ children }) => {
-    useAnalytics();
-    return children;
-});
-RootMotia.displayName = 'RootMotia';

package/dist/src/components/top-panel.d.ts

@@ -1 +0,0 @@
-export declare const TopPanel: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
-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));
-    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/tutorial-engine.d.ts

@@ -1,12 +0,0 @@
-import type { 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

@@ -1,36 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-export declare const workbenchXPath: {
-    sidebarContainer: string;
-    closePanelButton: string;
-    bottomPanel: string;
-    flows: {
-        dropdownFlow: (flowId: string) => string;
-        feature: (featureId: string) => string;
-        previewButton: (stepId: string) => string;
-        node: (stepId: string) => string;
-    };
-    endpoints: {
-        endpointsList: string;
-        endpoint: (method: string, path: string) => string;
-        callPanel: string;
-        specButton: string;
-        bodyTab: string;
-        headersTab: string;
-        paramsTab: 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

@@ -1,45 +0,0 @@
-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: {
-        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}"]`,
-    },
-    endpoints: {
-        endpointsList: '//div[@data-testid="endpoints-list"]',
-        endpoint: (method, path) => `//div[@data-testid="endpoint-${method}-${path}"]`,
-        callPanel: '//div[@data-testid="endpoint-details-panel"]',
-        specButton: '//button[@data-testid="endpoint-spec-button"]',
-        bodyTab: '//button[@data-testid="endpoint-body-tab"]',
-        headersTab: '//button[@data-testid="endpoint-headers-tab"]',
-        paramsTab: '//button[@data-testid="endpoint-params-tab"]',
-        callTab: '//button[@data-testid="endpoint-body-tab"]', // deprecated
-        response: '//div[@data-testid="endpoint-response-container"]',
-        playButton: '//button[@data-testid="endpoint-play-button"]',
-    },
-    tracing: {
-        trace: (index) => `(//button[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: '//div[@data-testid="flows-dropdown-trigger"]',
-        endpoints: '//button[@data-testid="endpoints-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/tutorial-utils.d.ts

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import type { 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>;
-    manualOpenRef: import("react").RefObject<boolean>;
-};

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

@@ -1,183 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { MotiaTutorial } from '../engine/tutorial-engine';
-import { waitForElementByXPath } from './tutorial-utils';
-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 manualOpenRef = useRef(false);
-    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;
-            }
-            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];
-            // Run any before actions
-            if (step.before) {
-                for (const action of step.before) {
-                    const monaco = window.monaco;
-                    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);
-                }
-            }, 1);
-            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';
-            localStorage.setItem('motia-tutorial-closed', 'true');
-            setTimeout(() => {
-                if (ref.current?.parentElement) {
-                    ref.current.parentElement.style.display = 'none';
-                    setCurrentStep(0);
-                }
-            }, 300);
-        }
-    };
-    useEffect(() => {
-        importFile('tutorial/tutorial.tsx')
-            .then((module) => {
-            if (Array.isArray(module.steps) && module.steps.length > 0) {
-                MotiaTutorial.register(module.steps);
-            }
-        })
-            .catch((error) => {
-            // Tutorial file is optional, so we don't need to throw an error
-            console.log('Tutorial file not found or could not be loaded:', error.message);
-        });
-    }, []);
-    useEffect(() => {
-        const container = ref.current;
-        if (container?.parentElement) {
-            container.parentElement.style.display = 'none';
-        }
-        const onOpen = () => {
-            if (container?.parentElement) {
-                setTotalSteps(MotiaTutorial.steps.length);
-                moveStep(0);
-            }
-        };
-        MotiaTutorial.onOpen(() => {
-            manualOpenRef.current = true;
-            onOpen();
-        });
-        MotiaTutorial.onStepsRegistered(() => {
-            if (localStorage.getItem('motia-tutorial-closed') !== 'true') {
-                manualOpenRef.current = false;
-                onOpen();
-            }
-        });
-    }, []);
-    return {
-        ref,
-        highlighterRef,
-        title,
-        description,
-        image,
-        link,
-        currentStep,
-        totalSteps,
-        onClose,
-        moveStep,
-        currentStepRef,
-        manualOpenRef,
-    };
-};

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

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

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

@@ -1,10 +0,0 @@
-import { useEffect, useState } from 'react';
-import { MotiaTutorial } from '../engine/tutorial-engine';
-export const useTutorial = () => {
-    const open = () => MotiaTutorial.open();
-    const [steps, setSteps] = useState([]);
-    useEffect(() => {
-        MotiaTutorial.onStepsRegistered(() => setSteps(MotiaTutorial.steps));
-    }, []);
-    return { open, steps };
-};

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

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

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

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@motiadev/ui';
-import { Book } from 'lucide-react';
-import { motiaAnalytics } from '@/lib/motia-analytics';
-import { Tooltip } from '../ui/tooltip';
-import { useTutorial } from './hooks/use-tutorial';
-export const TutorialButton = () => {
-    const { open, steps } = useTutorial();
-    const isTutorialFlowMissing = steps.length === 0;
-    const onTutorialButtonClick = () => {
-        if (!isTutorialFlowMissing) {
-            open();
-        }
-        motiaAnalytics.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) {
-        return (_jsx(Tooltip, { content: _jsxs("div", { className: "flex flex-col gap-4 p-4 max-w-[320px]", children: [_jsx("p", { className: "text-sm wrap-break-word p-0 m-0", children: "In order to start the tutorial, you need to download the tutorial steps using the Motia CLI. In your terminal execute the following command to create a new project:" }), _jsx("pre", { className: "text-sm font-bold", children: "npx motia@latest create" })] }), children: trigger }));
-    }
-    return trigger;
-};

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

@@ -1,14 +0,0 @@
-import type React from 'react';
-import type { TutorialImage } from './engine/tutorial-types';
-type TutorialStepProps = {
-    step: number;
-    totalSteps: number;
-    title: string;
-    description: React.ReactNode;
-    link?: string;
-    image?: TutorialImage;
-    onNext: () => void;
-    onClose: () => void;
-};
-export declare const TutorialStep: React.ForwardRefExoticComponent<TutorialStepProps & React.RefAttributes<HTMLDivElement>>;
-export {};

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

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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) => {
-            if (step > 0 && e.key === 'Escape') {
-                onClose();
-            }
-            else if (step > 0 && e.key === 'ArrowRight') {
-                onNext();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [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';

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

@@ -1,2 +0,0 @@
-import './tutorial.css';
-export declare const Tutorial: () => import("react/jsx-runtime").JSX.Element;

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

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