@motiadev/workbench 0.3.1-beta.86 → 0.3.1-beta.88-406962

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

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { cn } from '@/lib/utils';
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { Button } from './button';
-const SIDEBAR_COLLAPSED_KEY = 'sidebar-collapsed';
-export const Sidebar = ({ children }) => {
-    const [isCollapsed, setIsCollapsed] = useState(() => {
-        if (typeof window !== 'undefined') {
-            const saved = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
-            return saved ? JSON.parse(saved) : true;
-        }
-        return true;
-    });
-    useEffect(() => {
-        localStorage.setItem(SIDEBAR_COLLAPSED_KEY, JSON.stringify(isCollapsed));
-    }, [isCollapsed]);
-    return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-sidebar-border bg-sidebar text-sidebar-foreground border-solid overflow-hidden relative', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 absolute top-3 right-1", children: _jsx(Button, { variant: "ghost", size: "icon", "data-testid": "sidebar-toggle", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px] mt-4", children: children })] }));
-};
-export const SidebarGroup = ({ children, title, testId, }) => {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-xs font-bold text-muted-foreground px-4 py-2 uppercase", "data-testid": testId, children: title }), children] }));
-};
-export const SidebarButton = ({ children, isActive, icon }) => {
-    return (_jsxs("div", { className: cn('flex text-sm font-medium items-center gap-2 px-4 py-3 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors cursor-pointer', isActive && 'bg-sidebar-accent text-sidebar-accent-foreground'), children: [_jsx("div", { className: "text-sidebar-foreground/70", children: icon }), children] }));
-};

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

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };

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

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
-function Skeleton({ className, ...props }) {
-    return _jsx("div", { className: cn('animate-pulse rounded-md bg-primary/10', className), ...props });
-}
-export { Skeleton };

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

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { Switch };

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

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { cn } from '@/lib/utils';
-const Switch = React.forwardRef(({ className, ...props }, ref) => (_jsx(SwitchPrimitives.Root, { className: cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0') }) })));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-export { Switch };

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '@/lib/utils';
-const Tabs = TabsPrimitive.Root;
-const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', className), ...props })));
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', className), ...props })));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -1,3 +0,0 @@
-import * as React from 'react';
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-const Textarea = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("textarea", { className: cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className), ref: ref, ...props }));
-});
-Textarea.displayName = 'Textarea';
-export { Textarea };

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -1,11 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from '@/lib/utils';
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props }) })));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -1,9 +0,0 @@
-import { FlowResponse } from '@/views/flow/hooks/use-get-flow-state';
-export type Flow = {
-    id: string;
-    name: string;
-    data?: FlowResponse;
-};
-export declare const useListFlows: () => {
-    flows: Flow[];
-};

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

@@ -1,8 +0,0 @@
-import { useStreamGroup } from '@motiadev/stream-client-react';
-export const useListFlows = () => {
-    const { data: flows } = useStreamGroup({
-        streamName: '__motia.flows',
-        groupId: 'default',
-    });
-    return { flows };
-};

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

@@ -1,6 +0,0 @@
-type Theme = 'dark' | 'light' | 'system';
-export declare const useTheme: () => {
-    theme: Theme;
-    setTheme: (newTheme: Theme) => void;
-};
-export {};

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

@@ -1,28 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-const storageKey = 'motia-workbench-theme';
-const defaultTheme = localStorage.getItem(storageKey) || 'system';
-const updateTheme = (theme) => {
-    const root = window.document.body;
-    root.classList.remove('light', 'dark');
-    if (theme === 'system') {
-        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        root.classList.add(systemTheme);
-        return;
-    }
-    root.classList.add(theme);
-};
-export const useTheme = () => {
-    const [theme, _setTheme] = useState(defaultTheme);
-    useEffect(() => {
-        updateTheme(defaultTheme);
-    }, []);
-    const setTheme = useCallback((newTheme) => {
-        localStorage.setItem(storageKey, newTheme);
-        _setTheme(newTheme);
-        updateTheme(newTheme);
-    }, []);
-    return {
-        theme,
-        setTheme,
-    };
-};

package/dist/src/publicComponents/base-handle.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Position, Handle as RFHandle } from '@xyflow/react';
-import clsx from 'clsx';
-import { colorMap } from './colorMap';
-export const BaseHandle = (props) => {
-    const { isHidden, position, variant, ...rest } = props;
-    return (_jsx("div", { className: clsx('absolute w-[6px] h-[6px]', position === Position.Top && '-top-[20px]', position === Position.Bottom && '-bottom-[20px]', 'left-1/2 -ml-[2px]', isHidden && 'hidden'), children: _jsx(RFHandle, { ...rest, position: position, style: {
-                background: colorMap[variant],
-            }, className: "\n        !static\n        !w-[6px]\n        !h-[6px]\n        !min-w-[6px]\n        !min-h-[6px]\n        !p-0\n        !border-none\n        !transform-none\n        !rounded-full\n        !outline-none\n        !shadow-none\n      " }) }));
-};

package/dist/src/publicComponents/base-node.d.ts

@@ -1,16 +0,0 @@
-import { type VariantProps } from 'class-variance-authority';
-import React, { PropsWithChildren } from 'react';
-declare const baseDot: (props?: ({
-    variant?: "event" | "api" | "noop" | "cron" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type Props = PropsWithChildren<{
-    title: string;
-    variant: VariantProps<typeof baseDot>['variant'];
-    language?: string;
-    headerChildren?: React.ReactNode;
-    className?: string;
-    disableSourceHandle?: boolean;
-    disableTargetHandle?: boolean;
-}>;
-export declare const BaseNode: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/publicComponents/base-node.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
-import { Position } from '@xyflow/react';
-import { cva } from 'class-variance-authority';
-import { BaseHandle } from './base-handle';
-import { LanguageIndicator } from '../views/flow/nodes/language-indicator';
-import { colorMap } from './colorMap';
-const baseDot = cva('w-[6px] h-[6px] rounded-full', {
-    variants: {
-        variant: {
-            event: 'bg-[rgba(0,117,255,1)]',
-            api: 'bg-[rgba(189,255,0,1)]',
-            noop: 'bg-[rgba(255,49,234,1)]',
-            cron: 'bg-[rgba(255,113,11,1)]',
-        },
-    },
-});
-const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
-const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-foreground flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));
-export const BaseNode = (props) => {
-    const { title, variant, children, disableSourceHandle, disableTargetHandle, language } = props;
-    return (_jsx("div", { className: "p-[1px] rounded-lg max-w-[350px] ", children: _jsx("div", { className: "rounded-lg bg-background p-4 border border-muted border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, style: {
-                borderColor: colorMap[variant],
-            }, children: _jsxs("div", { className: "group relative", children: [_jsx(HeaderBar, { text: title, variant: variant, children: _jsx(LanguageIndicator, { language: language }) }), _jsx("div", { className: "pt-4 space-y-3", children: children }), !disableTargetHandle && _jsx(BaseHandle, { type: "target", position: Position.Top, variant: variant }), !disableSourceHandle && _jsx(BaseHandle, { type: "source", position: Position.Bottom, variant: variant }), _jsx("div", { className: "absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-background rounded-md border border-white/5" })] }) }) }));
-};

package/dist/src/publicComponents/colorMap.d.ts

@@ -1,6 +0,0 @@
-export declare const colorMap: {
-    event: string;
-    api: string;
-    noop: string;
-    cron: string;
-};

package/dist/src/publicComponents/colorMap.js

@@ -1,6 +0,0 @@
-export const colorMap = {
-    event: 'rgb(0,117,255)',
-    api: 'rgb(189,255,0)',
-    noop: 'rgb(255,49,234)',
-    cron: 'rgb(255,113,11)',
-};

package/dist/src/publicComponents/components/header-bar.d.ts

@@ -1,11 +0,0 @@
-import { type VariantProps } from 'class-variance-authority';
-import React from 'react';
-declare const baseDot: (props?: ({
-    variant?: "event" | "api" | "noop" | "cron" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const HeaderBar: ({ text, variant, children, }: {
-    text: string;
-    variant: VariantProps<typeof baseDot>["variant"];
-    children?: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/publicComponents/components/header-bar.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
-import { cva } from 'class-variance-authority';
-const baseDot = cva('w-[6px] h-[6px] rounded-full', {
-    variants: {
-        variant: {
-            event: 'bg-[rgba(0,117,255,1)]',
-            api: 'bg-[rgba(189,255,0,1)]',
-            noop: 'bg-[rgba(255,49,234,1)]',
-            cron: 'bg-[rgba(255,113,11,1)]',
-        },
-    },
-});
-const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
-export const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-foreground flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));

package/dist/src/publicComponents/emits.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Send } from 'lucide-react';
-const toTopic = (emit) => typeof emit === 'string' ? emit : emit.topic;
-export const Emits = ({ emits }) => {
-    return (_jsx(_Fragment, { children: emits.map((emit) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-muted-foreground", "data-testid": `emits__${toTopic(emit)}`, children: [_jsx(Send, { className: "w-4 h-4 text-muted-foreground/60" }), _jsx("div", { className: "font-mono tracking-wider", children: toTopic(emit) })] }, toTopic(emit)))) }));
-};

package/dist/src/publicComponents/subscribe.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Eye } from 'lucide-react';
-export const Subscribe = ({ subscribes }) => {
-    return (_jsx(_Fragment, { children: subscribes.map((subscribe) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-muted-foreground", "data-testid": `subscribes__${subscribe}`, children: [_jsx(Eye, { className: "w-4 h-4 text-muted-foreground/60" }), _jsx("div", { className: "font-mono tracking-wider", children: subscribe })] }, subscribe))) }));
-};

package/dist/src/route-wrapper.d.ts

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

package/dist/src/route-wrapper.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppSidebar } from './components/app-sidebar';
-import { ReactFlowProvider } from '@xyflow/react';
-import { Header } from './components/header/header';
-export const RouteWrapper = ({ children }) => (_jsx("div", { className: "flex flex-col bg-background text-foreground h-screen", children: _jsxs(ReactFlowProvider, { children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-row flex-1", children: [_jsx(AppSidebar, {}), _jsx("div", { className: "flex-1", children: children })] })] }) }));

package/dist/src/routes/endpoints-page.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Endpoints } from '@/components/endpoints/endpoints';
-export const EndpointsPage = () => {
-    return _jsx(Endpoints, {});
-};

package/dist/src/routes/flow.d.ts

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

package/dist/src/routes/flow.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FlowView } from '@/views/flow/flow-view';
-import { useParams } from 'react-router';
-import { useFetchFlows } from '@/hooks/use-fetch-flows';
-export const Flow = () => {
-    const { id } = useParams();
-    const { flow, flowConfig } = useFetchFlows(id);
-    if (!flow || flow.error)
-        return (_jsx("div", { className: "w-full h-full bg-background flex flex-col items-center justify-center", children: _jsx("p", { children: flow?.error }) }));
-    return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
-};

package/dist/src/routes/index.d.ts

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

package/dist/src/routes/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@/components/ui/button';
-export const Index = () => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center w-full h-full gap-10 bg-gradient-to-r from-background via-background to-muted", children: [_jsx("h1", { className: "text-5xl font-extrabold max-w-[600px] text-center text-foreground", children: "Unified Backend Framework for APIs, Events and AI Agents" }), _jsx("div", { className: "max-w-[600px] text-center text-xl font-medium text-muted-foreground", children: "Write in any language. Automate anything. From AI agents to backend automation, Motia runs event-driven workflows with zero overhead." }), _jsx("div", { className: "p-[1px] min-w-[600px] rounded-lg shadow-lg border border-border", children: _jsx("div", { className: "rounded-lg bg-card p-8 font-semibold text-xl min-h-[100px] flex items-center", children: _jsxs("div", { className: "flex items-center gap-2 font-mono", children: [_jsx("span", { className: "text-primary", children: "$" }), _jsx("span", { className: "text-card-foreground", children: "npx motia generate step" })] }) }) }), _jsxs("div", { className: "flex flex-col gap-8 items-center", children: [_jsx("span", { className: "text-muted-foreground text-xl", children: "or" }), _jsx("a", { href: "https://motia.dev/docs", target: "_blank", children: _jsx(Button, { size: "lg", className: "text-xl py-6 px-8", children: "Read developer docs" }) })] })] }));
-};

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Logs } from '@/components/logs/logs';
-import { useLogs } from '@/stores/use-logs';
-import { useEffect } from 'react';
-export const LogsPage = () => {
-    const setUnreadLogsCount = useLogs((state) => state.setUnreadLogsCount);
-    useEffect(() => {
-        setUnreadLogsCount(0);
-        return () => setUnreadLogsCount(0);
-    }, [setUnreadLogsCount]);
-    return (_jsxs("div", { className: "w-full h-full overflow-hidden bg-background text-foreground", children: [_jsxs("header", { className: "p-4 border-b border-border", children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Logs" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Check all logs saved locally" })] }), _jsx(Logs, {})] }));
-};

package/dist/src/routes/states-page.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { States } from '@/components/states/states';
-export const StatesPage = () => {
-    return (_jsxs("div", { className: "w-full h-full overflow-hidden bg-background text-foreground", children: [_jsxs("header", { className: "p-4 border-b border-border", children: [_jsx("h1", { className: "text-xl font-bold text-foreground", children: "State details" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Check all states saved locally along with all fields" })] }), _jsx(States, {})] }));
-};

package/dist/src/routes/traces-page.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ObservabilityStats } from '@/components/observability/observability-stats';
-import { TraceTimeline } from '@/components/observability/trace-timeline';
-import { useStreamGroup } from '@motiadev/stream-client-react';
-import { useState } from 'react';
-import { TracesGroups } from '../components/observability/traces-groups';
-export const TracesPage = () => {
-    const [selectedGroupId, setSelectedGroupId] = useState(null);
-    const { data } = useStreamGroup({ streamName: 'motia-trace-group', groupId: 'default' });
-    const handleGroupSelect = (group) => {
-        setSelectedGroupId(group.id);
-    };
-    return (_jsxs("div", { className: "flex flex-col h-screen", children: [_jsx("div", { className: "border-b border-border p-4", children: _jsx(ObservabilityStats, { groups: data }) }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "w-1/3 border-r border-border overflow-auto", "data-testid": "traces-container", children: _jsx(TracesGroups, { groups: data, selectedGroupId: selectedGroupId, onGroupSelect: handleGroupSelect }) }), _jsxs("div", { className: "flex-1 overflow-auto", "data-testid": "trace-details", children: [selectedGroupId && _jsx(TraceTimeline, { groupId: selectedGroupId }), !selectedGroupId && (_jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "Select a trace or trace group to view the timeline" }))] })] })] }));
-};

package/dist/src/stores/use-logs.js

@@ -1,52 +0,0 @@
-import { useSyncExternalStore, useCallback } from 'react';
-const listeners = new Set();
-let currentLogs = [];
-let currentUnreadLogsCount = 0;
-let memoizedSnapshot;
-const updateMemoizedSnapshot = () => {
-    memoizedSnapshot = {
-        logs: currentLogs,
-        unreadLogsCount: currentUnreadLogsCount,
-        addLog: storeActions.addLog,
-        resetLogs: storeActions.resetLogs,
-        setUnreadLogsCount: storeActions.setUnreadLogsCount,
-    };
-};
-const notify = () => {
-    listeners.forEach((listener) => listener());
-};
-const storeActions = {
-    addLog: (log) => {
-        currentLogs = [log, ...currentLogs];
-        currentUnreadLogsCount += 1;
-        updateMemoizedSnapshot();
-        notify();
-    },
-    resetLogs: () => {
-        if (currentLogs.length === 0 && currentUnreadLogsCount === 0) {
-            return;
-        }
-        currentLogs = [];
-        currentUnreadLogsCount = 0;
-        updateMemoizedSnapshot();
-        notify();
-    },
-    setUnreadLogsCount: (count) => {
-        if (currentUnreadLogsCount === count) {
-            return;
-        }
-        currentUnreadLogsCount = count;
-        updateMemoizedSnapshot();
-        notify();
-    },
-};
-updateMemoizedSnapshot();
-// Stable subscribe function so React doesn't unnecessarily tear down the subscription
-const subscribe = (onStoreChange) => {
-    listeners.add(onStoreChange);
-    return () => listeners.delete(onStoreChange);
-};
-export function useLogs(selector = (state) => state) {
-    const getSnapshot = useCallback(() => selector(memoizedSnapshot), [selector]);
-    return useSyncExternalStore(subscribe, getSnapshot);
-}

package/dist/src/views/flow/arrow-head.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type Props = {
-    color?: string;
-    id: string;
-    className?: string;
-};
-export declare const ArrowHead: React.FC<Props>;
-export {};

package/dist/src/views/flow/arrow-head.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowHead = (props) => {
-    // Use CSS custom property for theme-aware coloring, fallback to provided color
-    const strokeColor = props.color || 'var(--arrow-color, #B3B3B3)';
-    return (_jsxs("marker", { id: props.id, viewBox: "-5 -5 10 10", markerUnits: "strokeWidth", markerWidth: "10", markerHeight: "10", className: props.className, children: [_jsx("line", { x1: 0, y1: 0, x2: 2, y2: -2, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" }), _jsx("line", { x1: -2, y1: -2, x2: 0, y2: 0, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" })] }));
-};

package/dist/src/views/flow/flow-view.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogConsole } from '@/components/logs/log-console';
-import { Background, BackgroundVariant, ReactFlow, } from '@xyflow/react';
-import { useCallback, useMemo, useState } from 'react';
-import { ArrowHead } from './arrow-head';
-import { BaseEdge } from './base-edge';
-import { FlowLoader } from './flow-loader';
-import { useGetFlowState } from './hooks/use-get-flow-state';
-import { Legend } from './legend';
-import { NodeOrganizer } from './node-organizer';
-import '@xyflow/react/dist/style.css';
-const edgeTypes = {
-    base: BaseEdge,
-};
-export const FlowView = ({ flow, flowConfig }) => {
-    const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig);
-    const [initialized, setInitialized] = useState(false);
-    const [hoveredType, setHoveredType] = useState(null);
-    const onInitialized = useCallback(() => {
-        setInitialized(true);
-    }, []);
-    const getClassName = useCallback((nodeType) => {
-        if (!hoveredType)
-            return '';
-        if (nodeType) {
-            return nodeType === hoveredType
-                ? 'border border-border scale-[1.02] transition-all duration-300'
-                : 'opacity-30 transition-all duration-300';
-        }
-        // If no nodeType is provided, this is an edge
-        return 'opacity-30 transition-all duration-300';
-    }, [hoveredType]);
-    const nodesWithHighlights = useMemo(() => nodes.map((node) => ({
-        ...node,
-        className: getClassName(node.data.type),
-    })), [nodes, getClassName]);
-    const edgesWithHighlights = useMemo(() => edges.map((edge) => ({
-        ...edge,
-        className: getClassName(), // No argument means it's an edge
-    })), [edges, getClassName]);
-    const onNodesChangeHandler = useCallback((changes) => {
-        onNodesChange(changes);
-    }, [onNodesChange]);
-    if (!nodeTypes) {
-        return null;
-    }
-    return (_jsxs("div", { className: "w-full h-full relative bg-background", children: [!initialized && _jsx(FlowLoader, {}), _jsx(Legend, { onHover: setHoveredType }), _jsxs(ReactFlow, { nodes: nodesWithHighlights, edges: edgesWithHighlights, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChangeHandler, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 50, size: 2, className: "[--xy-background-color-dots:theme(colors.muted.DEFAULT)] [--xy-background-color:theme(colors.background)]" }), _jsx(NodeOrganizer, { onInitialized: onInitialized }), _jsx("svg", { className: "[--arrow-color:theme(colors.muted.foreground)]", children: _jsx("defs", { children: _jsx(ArrowHead, { id: "arrowhead" }) }) })] }), _jsx(LogConsole, {})] }));
-};

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

@@ -1,52 +0,0 @@
-import { Edge, Node } from '@xyflow/react';
-import React from 'react';
-import type { EdgeData, NodeData } from '../nodes/nodes.types';
-type Emit = string | {
-    topic: string;
-    label?: string;
-};
-type FlowStep = {
-    id: string;
-    name: string;
-    type: 'event' | 'api' | 'noop' | 'cron';
-    description?: string;
-    subscribes?: string[];
-    emits: Emit[];
-    virtualEmits?: Emit[];
-    action?: 'webhook';
-    webhookUrl?: string;
-    language?: string;
-    nodeComponentPath?: string;
-    filePath?: string;
-};
-export type FlowResponse = {
-    id: string;
-    name: string;
-    steps: FlowStep[];
-    edges: FlowEdge[];
-    error?: string;
-};
-export type FlowConfigResponse = {
-    id: string;
-    config: {
-        [stepName: string]: Position;
-    };
-};
-type FlowEdge = {
-    id: string;
-    source: string;
-    target: string;
-    data: EdgeData;
-};
-type Position = {
-    x: number;
-    y: number;
-};
-export declare const useGetFlowState: (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
-    nodes: Node<NodeData>[];
-    edges: Edge<EdgeData>[];
-    onNodesChange: import("@xyflow/react").OnNodesChange<Node<NodeData>>;
-    onEdgesChange: import("@xyflow/react").OnEdgesChange<Edge<EdgeData>>;
-    nodeTypes: Record<string, React.ComponentType<any>>;
-};
-export {};

package/dist/src/views/flow/legend.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-export declare const Legend: FC<{
-    onHover: (type: string | null) => void;
-}>;

package/dist/src/views/flow/legend.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { LayoutList, X } from 'lucide-react';
-import { useState } from 'react';
-import { colorMap } from '@/publicComponents/colorMap';
-const EdgeSwatch = ({ color, dashed }) => (_jsx("svg", { className: "my-1", width: "48", height: "10", viewBox: "0 0 48 10", xmlns: "http://www.w3.org/2000/svg", children: _jsx("line", { x1: "0", y1: "5", x2: "48", y2: "5", stroke: color, strokeWidth: "2", strokeDasharray: dashed ? '4' : 'none', strokeLinecap: "round" }) }));
-const legendItems = [
-    {
-        label: 'Event (Core)',
-        type: 'event',
-        color: colorMap.event,
-        description: 'Core logic components that process events.',
-    },
-    {
-        label: 'API',
-        type: 'api',
-        color: colorMap.api,
-        description: 'HTTP endpoints that trigger flows.',
-    },
-    {
-        label: 'Noop (Non-Operation)',
-        type: 'noop',
-        color: colorMap.noop,
-        description: 'Placeholder nodes for external processes.',
-    },
-    {
-        label: 'Cron',
-        type: 'cron',
-        color: colorMap.cron,
-        description: 'Scheduled tasks that run at specified intervals.',
-    },
-];
-const edgeLegendItems = [
-    {
-        label: 'Event Edge',
-        color: colorMap.event,
-        description: 'Represents an event emitted and subscribed by steps.',
-        dashed: true,
-    },
-    {
-        label: 'Virtual Edge',
-        color: 'hsl(var(--muted-foreground))',
-        description: 'Represents virtual connections.',
-        dashed: true,
-    },
-];
-export const Legend = ({ onHover }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsx("div", { className: 'absolute right-4 top-4 z-10 max-w-[500px]', children: _jsxs("div", { className: cn('rounded-lg border border-border bg-background/90 p-4 flex flex-col', !isExpanded && 'rounded-b-lg', isExpanded && 'gap-4'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [isExpanded && _jsx("div", { className: "text-sm text-muted-foreground uppercase", children: "Flow Legend" }), _jsx("div", { className: "flex-1 flex justify-end", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsExpanded(!isExpanded), className: "p-2 hover:bg-muted", children: isExpanded ? _jsx(X, { size: 16 }) : _jsx(LayoutList, { size: 16 }) }) })] }), _jsx("div", { className: cn('overflow-hidden transition-all duration-200 ease-in-out', isExpanded ? 'max-h-[600px] opacity-100' : 'max-h-0 opacity-0'), children: isExpanded && (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-2 gap-3", children: legendItems.map((item) => (_jsx("div", { onMouseEnter: () => onHover(item.type), onMouseLeave: () => onHover(null), className: "group cursor-pointer transition-all hover:bg-muted/20 rounded-md p-2", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-[8px] h-[8px] mt-[4px] rounded-full", style: { backgroundColor: item.color } }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: item.label }), _jsx("div", { className: "text-muted-foreground text-sm mt-0.5", children: item.description })] })] }) }, item.type))) }), _jsx("div", { className: "h-px bg-border my-4" }), _jsx("div", { className: "text-sm text-muted-foreground uppercase pb-4", children: "Edge Legend" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: edgeLegendItems.map((item) => (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(EdgeSwatch, { color: item.color, dashed: item.dashed }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: item.label }), _jsx("div", { className: "text-muted-foreground text-sm mt-0.5", children: item.description })] })] }, item.label))) })] })) })] }) }));
-};

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

@@ -1,4 +0,0 @@
-import { ApiNodeData } from './nodes.types';
-export declare const ApiFlowNode: ({ data }: {
-    data: ApiNodeData;
-}) => import("react/jsx-runtime").JSX.Element;