@motiadev/workbench 0.13.2-beta.164-681857 → 0.14.0-beta.165-707935

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 })] }));
-};

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

@@ -1,12 +0,0 @@
-import { type FC } from 'react';
-type JsonEditorProps = {
-    value: string;
-    height?: number | string;
-    schema?: Record<string, unknown>;
-    onChange?: (value: string) => void;
-    onValidate?: (isValid: boolean) => void;
-    language?: 'json' | string;
-    readOnly?: boolean;
-};
-export declare const JsonEditor: FC<JsonEditorProps>;
-export {};

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

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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();
-    const theme = useThemeStore((state) => state.theme);
-    const editorTheme = useMemo(() => (theme === 'dark' ? 'vs-dark' : 'light'), [theme]);
-    useEffect(() => {
-        if (!monaco)
-            return;
-        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ isolatedModules: true });
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            schemas: schema
-                ? [
-                    {
-                        uri: window.location.href,
-                        fileMatch: ['*'],
-                        schema,
-                    },
-                ]
-                : [],
-        });
-    }, [monaco, schema, language]);
-    return (_jsx(Editor, { "data-testid": "json-editor", height: height, language: language, value: value, theme: editorTheme, onChange: (value) => {
-            if (!value) {
-                onValidate?.(false);
-            }
-            onChange?.(value ?? '');
-        }, onValidate: (markers) => onValidate?.(markers.length === 0), options: {
-            readOnly,
-            scrollBeyondLastLine: false,
-            minimap: { enabled: false },
-        } }));
-};

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

@@ -1,10 +0,0 @@
-import * as React from 'react';
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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 }));
-TableHeader.displayName = 'TableHeader';
-const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('[&_tr:last-child]:border-0', className), ...props })));
-TableBody.displayName = 'TableBody';
-const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
-TableFooter.displayName = 'TableFooter';
-const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
-TableRow.displayName = 'TableRow';
-const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle text-md font-medium bg-muted text-muted-foreground font-bold [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
-TableHead.displayName = 'TableHead';
-const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
-TableCell.displayName = 'TableCell';
-const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('mt-4 text-sm text-muted-foreground', className), ...props })));
-TableCaption.displayName = 'TableCaption';
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

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

package/dist/src/components/ui/theme-toggle.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, useThemeStore } from '@motiadev/ui';
-import { Moon, Sun } from 'lucide-react';
-import { useEffect } from 'react';
-export const ThemeToggle = () => {
-    const theme = useThemeStore((state) => state.theme);
-    const setTheme = useThemeStore((state) => state.setTheme);
-    const toggleTheme = () => {
-        setTheme(theme === 'light' ? 'dark' : 'light');
-    };
-    useEffect(() => {
-        const url = new URL(window.location.href);
-        const colorScheme = url.searchParams.get('color-scheme');
-        if (colorScheme) {
-            setTheme(colorScheme);
-        }
-    }, [setTheme]);
-    return (_jsxs("button", { onClick: toggleTheme, className: "relative flex items-center cursor-pointer w-16 h-8 border bg-muted-foreground/10 rounded-full p-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "aria-label": `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`, children: [_jsx("div", { className: cn('absolute w-6 h-6 bg-background border border-border rounded-full shadow-sm transition-transform duration-200 ease-in-out', theme === 'dark' ? 'translate-x-8' : 'translate-x-0') }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10", children: _jsx(Sun, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'light' ? 'text-foreground' : 'text-muted-foreground') }) }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10 ml-2", children: _jsx(Moon, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'dark' ? 'text-foreground' : 'text-muted-foreground') }) })] }));
-};

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

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export declare const Tooltip: ({ children, content, disabled, }: {
-    children: ReactNode;
-    content: string | ReactNode;
-    disabled?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-export const Tooltip = ({ children, content, disabled, }) => (_jsx(TooltipPrimitive.Provider, { disableHoverableContent: disabled, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { className: "TooltipContent", side: "bottom", children: [_jsx("div", { className: "p-2 bg-background text-popover-foreground text-sm rounded-lg border border-light-800", children: content }), _jsx(TooltipPrimitive.Arrow, { className: "TooltipArrow" })] }) })] }) }));

package/dist/src/hooks/use-debounced.d.ts

@@ -1 +0,0 @@
-export declare const useDebounced: (fn: () => void, delay?: number) => () => void;

package/dist/src/hooks/use-debounced.js

@@ -1,18 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-export const useDebounced = (fn, delay = 500) => {
-    const saveTimeoutRef = useRef(null);
-    const debouncedFn = useCallback(() => {
-        if (saveTimeoutRef.current) {
-            clearTimeout(saveTimeoutRef.current);
-        }
-        saveTimeoutRef.current = setTimeout(fn, delay);
-    }, [fn, delay]);
-    useEffect(() => {
-        return () => {
-            if (saveTimeoutRef.current) {
-                clearTimeout(saveTimeoutRef.current);
-            }
-        };
-    }, []);
-    return debouncedFn;
-};

package/dist/src/hooks/use-fetch-flows.d.ts

@@ -1 +0,0 @@
-export declare const useFetchFlows: () => void;

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

@@ -1,26 +0,0 @@
-import { useStreamGroup } from '@motiadev/stream-client-react';
-import { useEffect } from 'react';
-import { useFlowStore } from '@/stores/use-flow-store';
-const streamGroupArgs = { streamName: '__motia.flows', groupId: 'default' };
-export const useFetchFlows = () => {
-    const setFlows = useFlowStore((state) => state.setFlows);
-    const selectFlowId = useFlowStore((state) => state.selectFlowId);
-    const clearSelectedFlowId = useFlowStore((state) => state.clearSelectedFlowId);
-    const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
-    const { data: flows } = useStreamGroup(streamGroupArgs);
-    useEffect(() => {
-        if (flows)
-            setFlows(flows.map((flow) => flow.id));
-    }, [flows, setFlows]);
-    useEffect(() => {
-        const hasFlows = flows.length > 0;
-        const isSelectedFlowValid = selectedFlowId && flows.some((flow) => flow.id === selectedFlowId);
-        if (!hasFlows && selectedFlowId) {
-            clearSelectedFlowId();
-            return;
-        }
-        if (hasFlows && (!selectedFlowId || !isSelectedFlowValid)) {
-            selectFlowId(flows[0].id);
-        }
-    }, [flows, selectedFlowId, selectFlowId, clearSelectedFlowId]);
-};

package/dist/src/hooks/use-mobile.d.ts

@@ -1 +0,0 @@
-export declare function useIsMobile(): boolean;

package/dist/src/hooks/use-mobile.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-const MOBILE_BREAKPOINT = 768;
-export function useIsMobile() {
-    const [isMobile, setIsMobile] = React.useState(undefined);
-    React.useEffect(() => {
-        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = () => {
-            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        };
-        mql.addEventListener('change', onChange);
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        return () => mql.removeEventListener('change', onChange);
-    }, []);
-    return !!isMobile;
-}

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

@@ -1,10 +0,0 @@
-import { Position } from '@xyflow/react';
-import type { BaseNodeProps } from '../publicComponents/node-props';
-export declare const useHandlePositions: (data: BaseNodeProps) => {
-    sourcePosition: Position;
-    targetPosition: Position;
-    updateSourcePosition: (position: "bottom" | "right") => void;
-    updateTargetPosition: (position: "top" | "left") => void;
-    toggleTargetPosition: () => void;
-    toggleSourcePosition: () => void;
-};