@motiadev/workbench 0.7.3-beta.136 → 0.8.0-beta.137

package/dist/src/App.js

@@ -4,15 +4,15 @@ import { analytics } from '@/lib/analytics';
 import { ReactFlowProvider } from '@xyflow/react';
 import { File, GanttChart, Link2, LogsIcon } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { EndpointsPage } from './components/endpoints/endpoints-page';
 import { FlowPage } from './components/flow/flow-page';
 import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
 import { Header } from './components/header/header';
 import { LogsPage } from './components/logs/logs-page';
 import { TracesPage } from './components/observability/traces-page';
-import { APP_SIDEBAR_CONTAINER_ID } from './components/sidebar/sidebar';
+import { APP_SIDEBAR_CONTAINER_ID } from '@motiadev/ui';
 import { StatesPage } from './components/states/states-page';
 import { useTabsStore } from './stores/use-tabs-store';
+import { EndpointsPage } from '@motiadev/plugin-endpoint';
 var TabLocation;
 (function (TabLocation) {
     TabLocation["TOP"] = "top";

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseEdge as BaseReactFlowEdge, EdgeLabelRenderer, getSmoothStepPath } from '@xyflow/react';
 import { cva } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn, useThemeStore } from '@motiadev/ui';
 const labelVariants = cva('absolute pointer-events-all text-cs border p-1 px-2', {
     variants: {
         color: {
@@ -14,9 +14,11 @@ const labelVariants = cva('absolute pointer-events-all text-cs border p-1 px-2',
     },
 });
 export const BaseEdge = (props) => {
+    const theme = useThemeStore((state) => state.theme);
     const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props;
     const label = data?.label;
     const labelVariant = data?.labelVariant;
+    const virtualColor = theme === 'dark' ? 'rgb(225, 225, 225)' : 'rgb(85, 85, 85)';
     const [edgePath, labelX, labelY] = getSmoothStepPath({
         sourceX,
         sourceY,
@@ -28,7 +30,7 @@ export const BaseEdge = (props) => {
         offset: 10,
     });
     return (_jsxs(_Fragment, { children: [_jsx(BaseReactFlowEdge, { path: edgePath, style: {
-                    stroke: data?.variant === 'virtual' ? 'rgb(111, 111, 111)' : '#0094FF',
+                    stroke: data?.variant === 'virtual' ? virtualColor : '#0094FF',
                     strokeWidth: 2,
                     shapeRendering: 'geometricPrecision',
                     fill: 'none',

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

@@ -6,6 +6,7 @@ import { FlowLoader } from './flow-loader';
 import { useGetFlowState } from './hooks/use-get-flow-state';
 import { NodeOrganizer } from './node-organizer';
 import '@xyflow/react/dist/style.css';
+import { BackgroundEffect } from '@motiadev/ui';
 const edgeTypes = {
     base: BaseEdge,
 };
@@ -17,5 +18,5 @@ export const FlowView = ({ flow, flowConfig }) => {
     if (!nodeTypes) {
         return null;
     }
-    return (_jsxs("div", { className: "w-full h-full relative", children: [!initialized && _jsx(FlowLoader, {}), _jsxs(ReactFlow, { minZoom: 0.1, nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChangeHandler, onEdgesChange: onEdgesChange, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 50, size: 2, className: "bg-canvas-background!" }), _jsx(NodeOrganizer, { onInitialized: onInitialized, nodes: nodes, edges: edges })] })] }));
+    return (_jsxs("div", { className: "w-full h-full relative", children: [!initialized && _jsx(FlowLoader, {}), _jsxs(ReactFlow, { minZoom: 0.1, nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChangeHandler, onEdgesChange: onEdgesChange, className: "isolate", children: [_jsx(BackgroundEffect, {}), _jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1 }), _jsx(NodeOrganizer, { onInitialized: onInitialized, nodes: nodes, edges: edges })] })] }));
 };

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

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 export const useSaveWorkflowConfig = () => {
     return useCallback(async (body) => {
         try {
-            const response = await fetch(`/flows/${body.id}/config`, {
+            const response = await fetch(`/__motia/flows/${body.id}/config`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

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

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

package/dist/src/components/logs/log-detail.js

@@ -5,7 +5,7 @@ import ReactJson from 'react18-json-view';
 import 'react18-json-view/src/dark.css';
 import 'react18-json-view/src/style.css';
 import { LogLevelDot } from './log-level-dot';
-import { Sidebar } from '@/components/sidebar/sidebar';
+import { Sidebar } from '@motiadev/ui';
 import { X } from 'lucide-react';
 const defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId'];
 export const LogDetail = ({ log, onClose }) => {

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

@@ -1,13 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
 import { formatTimestamp } from '@/lib/utils';
 import { useGlobalStore } from '@/stores/use-global-store';
 import { useLogsStore } from '@/stores/use-logs-store';
+import { Button, cn, Input } from '@motiadev/ui';
+import { Search, Trash, X } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { LogDetail } from './log-detail';
 import { LogLevelDot } from './log-level-dot';
-import { Button, cn, Input } from '@motiadev/ui';
-import { CircleX, Trash } from 'lucide-react';
 export const LogsPage = () => {
     const logs = useLogsStore((state) => state.logs);
     const resetLogs = useLogsStore((state) => state.resetLogs);
@@ -22,7 +22,7 @@ export const LogsPage = () => {
                 log.step.toLowerCase().includes(search.toLowerCase()));
         });
     }, [logs, search]);
-    return (_jsxs("div", { className: "h-full flex flex-row", "data-testid": "logs-container", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "pr-10 font-medium" }), _jsx(CircleX, { className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash, {}), " Clear"] })] }), _jsx(Table, { children: _jsx(TableBody, { className: "font-mono font-medium", children: filteredLogs.map((log, index) => (_jsxs(TableRow, { "data-testid": "log-row", className: cn('font-mono font-semibold cursor-pointer border-0', {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full", "data-testid": "logs-container", children: [_jsxs("div", { className: "flex p-2 border-b gap-2", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "px-9 font-medium", placeholder: "Search by Trace ID or Message" }), _jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }), _jsx(X, { className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "default", onClick: resetLogs, className: "h-[34px]", children: [_jsx(Trash, {}), " Clear"] })] }), _jsx(Table, { children: _jsx(TableBody, { className: "font-mono font-medium", children: filteredLogs.map((log, index) => (_jsxs(TableRow, { "data-testid": "log-row", className: cn('font-mono font-semibold cursor-pointer border-0', {
                                     'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,
                                     'hover:bg-muted-foreground/10': selectedLogId !== log.id,
                                 }), onClick: () => selectLogId(log.id), children: [_jsxs(TableCell, { "data-testid": `time-${index}`, className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground", children: [_jsx(LogLevelDot, { level: log.level }), formatTimestamp(log.time)] }), _jsx(TableCell, { "data-testid": `trace-${log.traceId}`, className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground", onClick: () => setSearch(log.traceId), children: log.traceId }), _jsx(TableCell, { "data-testid": `step-${index}`, "aria-label": log.step, className: "whitespace-nowrap", children: log.step }), _jsx(TableCell, { "data-testid": `msg-${index}`, "aria-label": log.msg, className: "whitespace-nowrap max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }), _jsx(LogDetail, { log: selectedLog, onClose: () => selectLogId(undefined) })] }));

package/dist/src/components/observability/trace-item/trace-item-detail.js

@@ -1,6 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Sidebar } from '@/components/sidebar/sidebar';
-import { Badge } from '@motiadev/ui';
+import { Sidebar, Badge } from '@motiadev/ui';
 import { formatDuration } from '@/lib/utils';
 import { X } from 'lucide-react';
 import { memo } from 'react';

package/dist/src/components/observability/trace-item/trace-item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
+import { cn } from '@motiadev/ui';
 export const TraceItem = ({ trace, group, groupEndTime, onExpand }) => {
     return (_jsxs("div", { className: "flex hover:bg-muted-foreground/10 relative cursor-pointer", onClick: () => onExpand(trace.id), "data-testid": "trace-timeline-item", children: [_jsx("div", { className: "flex items-center min-w-[200px] max-w-[200px] h-[32px] max-h-[32px] py-4 px-2 text-sm font-semibold text-foreground truncate sticky left-0 bg-card z-9", children: trace.name }), _jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", children: _jsx("div", { className: "relative w-full h-[32px] flex items-center", children: _jsx("div", { className: cn('h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200', {
                             'bg-[repeating-linear-gradient(140deg,#BEFE29,#BEFE29_8px,#ABE625_8px,#ABE625_16px)]': trace.status === 'running',

package/dist/src/components/observability/trace-timeline.js

@@ -25,5 +25,5 @@ export const TraceTimeline = memo(({ groupId }) => {
     };
     if (!group)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col flex-1 overflow-x-auto h-full relative", children: _jsxs("div", { className: "flex flex-col items-center min-w-full sticky top-0", style: { width: `${zoom * 1000}px` }, children: [_jsxs("div", { className: "flex flex-1 w-full sticky top-0 bg-background z-10", children: [_jsxs("div", { className: "w-full min-h-[37px] h-[37px] min-w-[200px] max-w-[200px] flex items-center justify-center gap-2 sticky left-0 top-0 bg-card", children: [_jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: zoomMinus, children: _jsx(Minus, { className: "w-4 h-4 cursor-pointer" }) }), _jsxs("span", { className: "text-sm font-bold text-muted-foreground", children: [Math.floor(zoom * 100), "%"] }), _jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: () => setZoom(zoom + 0.1), children: _jsx(Plus, { className: "w-4 h-4 cursor-pointer" }) })] }), _jsxs("div", { className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card", children: [_jsx("span", { children: "0ms" }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.25), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.5), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.75), "ms"] }), _jsxs("span", { children: [Math.floor(endTime - group.startTime), "ms"] }), _jsxs("div", { className: "absolute bottom-[-4px] w-full flex justify-between", children: [_jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" })] })] })] }), _jsx("div", { className: "flex flex-col w-full h-full", children: data?.map((trace) => (_jsx(TraceItem, { trace: trace, group: group, groupEndTime: endTime, onExpand: selectTraceId }, trace.id))) })] }) }), selectedTrace && _jsx(TraceItemDetail, { trace: selectedTrace, onClose: () => selectTraceId(undefined) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col flex-1 overflow-x-auto h-full relative", children: _jsxs("div", { className: "flex flex-col items-center min-w-full sticky top-0", style: { width: `${zoom * 1000}px` }, children: [_jsxs("div", { className: "flex flex-1 w-full sticky top-0 bg-background z-10", children: [_jsxs("div", { className: "w-full min-h-[37px] h-[37px] min-w-[200px] max-w-[200px] flex items-center justify-center gap-2 sticky left-0 top-0 bg-card backdrop-blur-[4px] backdrop-filter", children: [_jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: zoomMinus, children: _jsx(Minus, { className: "w-4 h-4 cursor-pointer" }) }), _jsxs("span", { className: "text-sm font-bold text-muted-foreground", children: [Math.floor(zoom * 100), "%"] }), _jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: () => setZoom(zoom + 0.1), children: _jsx(Plus, { className: "w-4 h-4 cursor-pointer" }) })] }), _jsxs("div", { className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card", children: [_jsx("span", { children: "0ms" }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.25), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.5), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.75), "ms"] }), _jsxs("span", { children: [Math.floor(endTime - group.startTime), "ms"] }), _jsxs("div", { className: "absolute bottom-[-4px] w-full flex justify-between", children: [_jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" })] })] })] }), _jsx("div", { className: "flex flex-col w-full h-full", children: data?.map((trace) => (_jsx(TraceItem, { trace: trace, group: group, groupEndTime: endTime, onExpand: selectTraceId }, trace.id))) })] }) }), selectedTrace && _jsx(TraceItemDetail, { trace: selectedTrace, onClose: () => selectTraceId(undefined) })] }));
 });

package/dist/src/components/observability/traces-groups.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
+import { cn } from '@motiadev/ui';
 import { formatDistanceToNow } from 'date-fns';
 import { memo } from 'react';
 import { TraceStatusBadge } from './trace-status';

package/dist/src/components/observability/traces-page.js

@@ -3,19 +3,31 @@ import { TraceTimeline } from '@/components/observability/trace-timeline';
 import { useStreamGroup } from '@motiadev/stream-client-react';
 import { TracesGroups } from '@/components/observability/traces-groups';
 import { useGlobalStore } from '../../stores/use-global-store';
-import { useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { Button, cn, Input } from '@motiadev/ui';
+import { Search, Trash, X } from 'lucide-react';
 export const TracesPage = () => {
     const selectedGroupId = useGlobalStore((state) => state.selectedTraceGroupId);
     const selectTraceGroupId = useGlobalStore((state) => state.selectTraceGroupId);
     const { data } = useStreamGroup({ streamName: 'motia-trace-group', groupId: 'default' });
     const handleGroupSelect = (group) => selectTraceGroupId(group.id);
+    const [search, setSearch] = useState('');
+    const clearTraces = () => fetch('/__motia/trace/clear', { method: 'POST' });
+    const traceGroups = useMemo(() => data?.filter((group) => group.name.toLowerCase().includes(search.toLowerCase()) ||
+        group.id.toLowerCase().includes(search.toLowerCase())), [data, search]);
     useEffect(() => {
-        if (data && data.length > 0) {
-            const group = data[data.length - 1];
+        if (traceGroups && traceGroups.length > 0) {
+            const group = traceGroups[traceGroups.length - 1];
             if (group && group.status === 'running' && group.id !== selectedGroupId) {
                 selectTraceGroupId(group.id);
             }
         }
-    }, [data]);
-    return (_jsxs("div", { className: "flex flex-1 overflow-hidden h-full", children: [_jsx("div", { className: "max-w-1/3 border-r border-border overflow-auto h-full", "data-testid": "traces-container", children: _jsx(TracesGroups, { groups: data, selectedGroupId: selectedGroupId, onGroupSelect: handleGroupSelect }) }), _jsxs("div", { className: "flex-2 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" }))] })] }));
+        else if (selectedGroupId) {
+            selectTraceGroupId(undefined);
+        }
+    }, [traceGroups]);
+    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full", children: [_jsxs("div", { className: "flex p-2 border-b gap-2", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "px-9 font-medium", placeholder: "Search by Trace ID or Step Name" }), _jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }), _jsx(X, { className: cn('cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground', {
+                                    visible: search !== '',
+                                    invisible: search === '',
+                                }), onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "default", onClick: clearTraces, className: "h-[34px]", children: [_jsx(Trash, {}), " Clear"] })] }), _jsxs("div", { className: "grid grid-cols-[300px_1fr] overflow-hidden", children: [_jsx("div", { className: "w-[300px] border-r border-border overflow-auto h-full", "data-testid": "traces-container", children: _jsx(TracesGroups, { groups: traceGroups, selectedGroupId: selectedGroupId, onGroupSelect: handleGroupSelect }) }), _jsxs("div", { className: "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/components/states/hooks/states-hooks.d.ts

@@ -4,4 +4,10 @@ export interface StateItem {
     type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
     value: string | number | boolean | object | unknown[] | null;
 }
-export declare const useGetStateItems: () => StateItem[];
+type Output = {
+    items: StateItem[];
+    deleteItems: (ids: string[]) => void;
+    refetch: () => void;
+};
+export declare const useGetStateItems: () => Output;
+export {};

package/dist/src/components/states/hooks/states-hooks.js

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 export const useGetStateItems = () => {
     const [items, setItems] = useState([]);
-    useEffect(() => {
+    const refetch = useCallback(() => {
         fetch('/__motia/state')
             .then(async (res) => {
             if (res.ok) {
@@ -14,5 +14,13 @@ export const useGetStateItems = () => {
             .then(setItems)
             .catch((err) => console.error(err));
     }, []);
-    return items;
+    const deleteItems = (ids) => {
+        fetch('/__motia/state/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ids }),
+        }).then(() => refetch());
+    };
+    useEffect(refetch, [refetch]);
+    return { items, deleteItems, refetch };
 };

package/dist/src/components/states/state-editor.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Button } from '@motiadev/ui';
 import { AlertCircle, Check, Loader2, Save } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { JsonEditor } from '../endpoints/json-editor';
+import { JsonEditor } from '../ui/json-editor';
 export const StateEditor = ({ state }) => {
     const [isRequestLoading, setIsRequestLoading] = useState(false);
     const [isValid, setIsValid] = useState(true);

package/dist/src/components/states/state-sidebar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Sidebar } from '@/components/sidebar/sidebar';
+import { Sidebar } from '@motiadev/ui';
 import { X } from 'lucide-react';
 import { StateDetails } from './state-details';
 import { StateEditor } from './state-editor';

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

@@ -1,18 +1,56 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useGlobalStore } from '@/stores/use-global-store';
-import { cn } from '@motiadev/ui';
-import { useMemo } from 'react';
+import { Checkbox, Button, cn, Input } from '@motiadev/ui';
+import { RefreshCw, Search, Trash, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
 import { useGetStateItems } from './hooks/states-hooks';
 import { StateSidebar } from './state-sidebar';
 export const StatesPage = () => {
     const selectedStateId = useGlobalStore((state) => state.selectedStateId);
     const selectStateId = useGlobalStore((state) => state.selectStateId);
-    const items = useGetStateItems();
-    const selectedItem = useMemo(() => (selectedStateId ? items.find((item) => `${item.groupId}:${item.key}` === selectedStateId) : null), [items, selectedStateId]);
+    const { items, deleteItems, refetch } = useGetStateItems();
+    const [search, setSearch] = useState('');
+    const filteredItems = useMemo(() => {
+        return items.filter((item) => {
+            return (item.groupId.toLowerCase().includes(search.toLowerCase()) ||
+                item.key.toLowerCase().includes(search.toLowerCase()));
+        });
+    }, [items, search]);
+    const selectedItem = useMemo(() => (selectedStateId ? filteredItems.find((item) => `${item.groupId}:${item.key}` === selectedStateId) : null), [filteredItems, selectedStateId]);
+    const [checkedItems, setCheckedItems] = useState(new Set());
     const handleRowClick = (item) => selectStateId(`${item.groupId}:${item.key}`);
     const onClose = () => selectStateId(undefined);
-    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", "data-testid": "states-container", children: [selectedItem && _jsx(StateSidebar, { state: selectedItem, onClose: onClose }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-background", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "rounded-0", children: "Group ID" }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Type" })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { "data-testid": `item-${item}`, onClick: () => handleRowClick(item), className: cn('font-mono font-semibold cursor-pointer border-0', selectedItem === item
-                                ? 'bg-muted-foreground/10 hover:bg-muted-foreground/20'
-                                : 'hover:bg-muted-foreground/10'), children: [_jsx(TableCell, { className: "hover:bg-transparent", children: item.groupId }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.key }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.type })] }, `${item.groupId}:${item.key}`))) })] })] }));
+    const deleteStates = () => {
+        deleteItems(Array.from(checkedItems));
+        setCheckedItems(new Set());
+    };
+    const handleCheckboxChange = (item) => {
+        const isChecked = checkedItems.has(`${item.groupId}:${item.key}`);
+        setCheckedItems((prev) => {
+            const newSet = new Set(prev);
+            if (isChecked) {
+                newSet.delete(`${item.groupId}:${item.key}`);
+            }
+            else {
+                newSet.add(`${item.groupId}:${item.key}`);
+            }
+            return newSet;
+        });
+    };
+    const toggleSelectAll = (checked) => {
+        setCheckedItems((prev) => {
+            const newSet = new Set(prev);
+            if (checked) {
+                filteredItems.forEach((item) => newSet.add(`${item.groupId}:${item.key}`));
+            }
+            else {
+                filteredItems.forEach((item) => newSet.delete(`${item.groupId}:${item.key}`));
+            }
+            return newSet;
+        });
+    };
+    return (_jsxs(_Fragment, { children: [selectedItem && _jsx(StateSidebar, { state: selectedItem, onClose: onClose }), _jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full", "data-testid": "states-container", children: [_jsxs("div", { className: "flex p-2 border-b gap-2", "data-testid": "logs-search-container", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "px-9 font-medium", placeholder: "Search by Group ID or Key" }), _jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }), _jsx(X, { className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "default", className: "h-[34px]", disabled: checkedItems.size === 0, onClick: deleteStates, children: [_jsx(Trash, {}), " Delete"] }), _jsx(Button, { variant: "default", className: "h-[34px]", onClick: refetch, children: _jsx(RefreshCw, { className: "w-4 h-4 text-muted-foreground" }) })] }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-background/20 backdrop-blur-sm", children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Checkbox, { onClick: (evt) => evt.stopPropagation(), onCheckedChange: toggleSelectAll }) }), _jsx(TableHead, { className: "rounded-0", children: "Group ID" }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Type" })] }) }), _jsx(TableBody, { children: filteredItems.map((item) => (_jsxs(TableRow, { "data-testid": `item-${item}`, onClick: () => handleRowClick(item), className: cn('font-mono font-semibold cursor-pointer border-0', selectedItem === item
+                                        ? 'bg-muted-foreground/10 hover:bg-muted-foreground/20'
+                                        : 'hover:bg-muted-foreground/10'), children: [_jsx(TableCell, { onClick: (evt) => evt.stopPropagation(), children: _jsx(Checkbox, { checked: checkedItems.has(`${item.groupId}:${item.key}`), onClick: () => handleCheckboxChange(item) }) }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.groupId }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.key }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.type })] }, `${item.groupId}:${item.key}`))) })] })] })] }));
 };

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

@@ -9,8 +9,13 @@ export declare const workbenchXPath: {
         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;

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

@@ -9,9 +9,14 @@ export const workbenchXPath = {
         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-body-panel__call"]',
-        callTab: '//button[@data-testid="endpoint-call-tab"]',
+        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"]',
     },

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect } from 'react';
+import { BackgroundEffect } from '@motiadev/ui';
 export const TutorialStep = forwardRef(({ step, totalSteps, title, description, link, image, onNext, onClose }, ref) => {
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -13,6 +14,6 @@ export const TutorialStep = forwardRef(({ step, totalSteps, title, description,
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [onClose, onNext]);
-    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%' } })), _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" }) }))] }));
+    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/{endpoints → ui}/json-editor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useThemeStore } from '@/stores/use-theme-store';
+import { useThemeStore } from '@motiadev/ui';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { useEffect, useMemo } from 'react';
 export const JsonEditor = ({ value, height = 300, schema, onChange, onValidate, language = 'json', readOnly = false, }) => {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@motiadev/ui';
 const Table = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm', className), ...props }) })));
 Table.displayName = 'Table';
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('[&_tr]:border-b', className), ...props }));

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, useThemeStore } from '@motiadev/ui';
 import { Moon, Sun } from 'lucide-react';
-import { useThemeStore } from '@/stores/use-theme-store';
-import { cn } from '@/lib/utils';
 import { useEffect } from 'react';
 export const ThemeToggle = () => {
     const theme = useThemeStore((state) => state.theme);

package/dist/src/index.css

@@ -1,5 +1,7 @@
-@import "@motiadev/ui/styles.css";
-@import "@motiadev/ui/globals.css";
+@import '@motiadev/plugin-endpoint/styles.css';
+@import '@motiadev/ui/styles.css';
+@import '@motiadev/ui/globals.css';
+
 @import 'tw-animate-css';
 @config "../tailwind.config.js";
 
@@ -13,12 +15,12 @@
 }
 
 .json-view {
-  background:rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .dark {
   .react-flow__panel {
-    background: var(--background)
+    background: var(--background);
   }
   .json-view {
     background: rgba(0, 0, 0, 0.8);
@@ -45,10 +47,12 @@
   font-weight: 500;
 }
 
-.json-view--pair, .json-view--property, .json-view > span {
+.json-view--pair,
+.json-view--property,
+.json-view > span {
   line-height: 24px;
 }
 
 .json-view--property {
   font-weight: 600;
-}
+}

package/dist/src/lib/utils.d.ts

@@ -1,4 +1,2 @@
-import { type ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
 export declare const formatDuration: (duration?: number) => string;
 export declare const formatTimestamp: (time: number) => string;

package/dist/src/lib/utils.js

@@ -1,8 +1,3 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
 export const formatDuration = (duration) => {
     if (!duration)
         return 'N/A';

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

@@ -24,7 +24,7 @@ export const BaseNode = ({ title, variant, children, disableSourceHandle, disabl
     }, [data.id, isOpen, fetchContent]);
     return (_jsxs("div", { className: cn('p-1 rounded-lg max-w-[350px]', {
             'bg-muted-foreground/20': isOpen,
-        }), children: [_jsx("div", { className: "rounded-lg dark:bg-[#222] bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { "data-testid": `open-code-preview-button-${title?.toLowerCase()}`, variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
+        }), children: [_jsx("div", { className: "rounded-lg dark:bg-[#101010] bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { "data-testid": `open-code-preview-button-${title?.toLowerCase()}`, variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
                                     'bg-card': variant !== 'noop',
                                 }), children: children }) })), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, onTogglePosition: toggleSourcePosition }))] }) }), content && (_jsx(NodeSidebar, { features: features, content: content, title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
 };

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useThemeStore } from '@/stores/use-theme-store';
+import { useThemeStore } from '@motiadev/ui';
 import { FeatureCard } from './feature-card';
 import { useRef, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { dracula, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { LanguageIndicator } from './language-indicator';
 const codeTagProps = {
     style: {
@@ -31,7 +31,7 @@ const getFirstLineNumber = (line) => {
 };
 export const CodeDisplay = ({ code, language, features }) => {
     const theme = useThemeStore((state) => state.theme);
-    const themeStyle = theme === 'dark' ? dracula : oneLight;
+    const themeStyle = theme === 'dark' ? oneDark : oneLight;
     const [highlightedLines, setHighlightedLines] = useState([]);
     const [selectedFeature, setSelectedFeature] = useState(null);
     const ref = useRef(null);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
+import { cn } from '@motiadev/ui';
 export const FeatureCard = ({ feature, highlighted, onClick, onHover }) => {
     return (_jsxs("div", { "data-feature-id": feature.id, className: cn('p-4 rounded-lg bg-card shadow-sm cursor-pointer hover:bg-card/50 border-2 border-transparent', highlighted && 'border-2 border-accent-1000 bg-accent-100'), onClick: onClick, onMouseEnter: onHover, children: [_jsx("div", { className: "text-md font-semibold text-foreground leading-tight whitespace-nowrap mb-2", children: feature.title }), _jsx("div", { className: "text-sm font-medium text-muted-foreground leading-tight", children: feature.description }), feature.link && (_jsx("div", { className: "text-sm font-medium text-muted-foreground leading-tight", children: _jsx("a", { href: feature.link, children: "Learn more" }) }))] }));
 };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
+import { cn } from '@motiadev/ui';
 import { cva } from 'class-variance-authority';
 import { CalendarClock, CircleOff, Link2, Waypoints } from 'lucide-react';
 const baseIcon = cva('rounded-md p-2', {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Sidebar } from '@/components/sidebar/sidebar';
+import { Sidebar } from '@motiadev/ui';
 import { X } from 'lucide-react';
 import { CodeDisplay } from './code-display';
 export const NodeSidebar = ({ content, title, subtitle, language, isOpen, onClose, features, }) => {

package/dist/src/stores/use-flow-store.d.ts

@@ -4,15 +4,17 @@ type UseFlowStore = {
     flows: string[];
     setFlows: (flows: string[]) => void;
 };
-export declare const useFlowStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseFlowStore>, "persist"> & {
+export declare const useFlowStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseFlowStore>, "setState" | "persist"> & {
+    setState(partial: UseFlowStore | Partial<UseFlowStore> | ((state: UseFlowStore) => UseFlowStore | Partial<UseFlowStore>), replace?: false | undefined): unknown;
+    setState(state: UseFlowStore | ((state: UseFlowStore) => UseFlowStore), replace: true): unknown;
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore, unknown>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: UseFlowStore) => void) => () => void;
         onFinishHydration: (fn: (state: UseFlowStore) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore, unknown>>;
     };
 }>;
 export {};

package/dist/src/stores/use-global-store.d.ts

@@ -10,15 +10,17 @@ type UseGlobalStore = {
     selectedLogId?: string;
     selectLogId: (logId?: string) => void;
 };
-export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseGlobalStore>, "persist"> & {
+export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseGlobalStore>, "setState" | "persist"> & {
+    setState(partial: UseGlobalStore | Partial<UseGlobalStore> | ((state: UseGlobalStore) => UseGlobalStore | Partial<UseGlobalStore>), replace?: false | undefined): unknown;
+    setState(state: UseGlobalStore | ((state: UseGlobalStore) => UseGlobalStore), replace: true): unknown;
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore, unknown>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: UseGlobalStore) => void) => () => void;
         onFinishHydration: (fn: (state: UseGlobalStore) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore, unknown>>;
     };
 }>;
 export {};