@motiadev/workbench 0.7.2-beta.135-745094 → 0.7.3-beta.136

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 '@motiadev/ui';
+import { APP_SIDEBAR_CONTAINER_ID } from './components/sidebar/sidebar';
 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/endpoints/endpoint-badge.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "POST" | "GET" | "DELETE" | "PUT" | "PATCH" | "HEAD" | "OPTIONS" | null | undefined;
+    defaultVariants?: "variant" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+export declare function EndpointBadge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/endpoints/endpoint-badge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+const badgeVariants = cva('rounded-lg px-2 py-1 text-sm font-mono font-bold transition-colors', {
+    variants: {
+        variant: {
+            POST: 'bg-[#258DC3]/15 text-[#258DC3]',
+            GET: 'bg-[#709A2D]/15 text-[#709A2D]',
+            DELETE: 'bg-[#DE2134]/15 text-[#DE2134]',
+            PUT: 'bg-yellow-500/50 text-yellow-100', // TODO color
+            PATCH: 'bg-yellow-500/50 text-yellow-100', // TODO color
+            HEAD: 'bg-blue-500/50 text-blue-100', // TODO color
+            OPTIONS: 'bg-purple-500/50 text-purple-100', // TODO color
+        },
+        defaultVariants: {
+            variant: 'bg-blue-500/50 text-blue-100',
+        },
+    },
+});
+export function EndpointBadge({ className, variant, ...props }) {
+    return _jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}

package/dist/src/components/endpoints/endpoint-body-panel.d.ts

@@ -0,0 +1,13 @@
+import { ApiEndpoint } from '@/types/endpoint';
+import { FC } from 'react';
+import 'react18-json-view/src/dark.css';
+import 'react18-json-view/src/style.css';
+type Props = {
+    endpoint: ApiEndpoint;
+    value: string;
+    onChange?: (body: string) => void;
+    onValidate?: (isValid: boolean) => void;
+    panelName: string;
+};
+export declare const EndpointBodyPanel: FC<Props>;
+export {};

package/dist/src/components/endpoints/endpoint-body-panel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Panel } from '@motiadev/ui';
+import { JsonEditor } from './json-editor';
+import ReactJson from 'react18-json-view';
+import 'react18-json-view/src/dark.css';
+import 'react18-json-view/src/style.css';
+export const EndpointBodyPanel = ({ endpoint, onChange, onValidate, panelName, value }) => {
+    const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
+    const handleBodyChange = (body) => {
+        onChange?.(body);
+    };
+    if (!shouldHaveBody) {
+        return null;
+    }
+    return (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": `endpoint-body-panel__${panelName}`, children: onChange ? (_jsx(JsonEditor, { value: value, schema: endpoint.bodySchema, onChange: handleBodyChange, onValidate: onValidate })) : (_jsx(ReactJson, { src: value ? JSON.parse(value) : {}, theme: "default", enableClipboard: false, style: { backgroundColor: 'transparent' } })) }));
+};

package/dist/src/components/endpoints/endpoint-call.d.ts

@@ -0,0 +1,7 @@
+import { ApiEndpoint } from '@/types/endpoint';
+import { FC } from 'react';
+type Props = {
+    endpoint: ApiEndpoint;
+};
+export declare const EndpointCall: FC<Props>;
+export {};

package/dist/src/components/endpoints/endpoint-call.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@motiadev/ui';
+import { Loader2, Play } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { EndpointBodyPanel } from './endpoint-body-panel';
+import { EndpointPathParamsPanel } from './endpoint-path-params-panel';
+import { EndpointQueryParamsPanel } from './endpoint-query-params-panel';
+import { EndpointResponse } from './endpoint-response';
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+export const EndpointCall = ({ endpoint }) => {
+    const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
+    const [isRequestLoading, setIsRequestLoading] = useState(false);
+    const [responseCode, setResponseCode] = useState(undefined);
+    const [responseBody, setResponseBody] = useState(undefined);
+    const [executionTime, setExecutionTime] = useState(undefined);
+    const { body, setBody } = useJsonSchemaToJson(endpoint.bodySchema);
+    const [isBodyValid, setIsBodyValid] = useState(true);
+    const [pathParamsValues, setPathParamsValues] = useState({});
+    const [queryParamsValues, setQueryParamsValues] = useState({});
+    const isPlayEnabled = useMemo(() => {
+        if (shouldHaveBody && !isBodyValid)
+            return false;
+        return (Object.values(pathParamsValues).every((value) => value) &&
+            Object.values(queryParamsValues).every((value) => value));
+    }, [pathParamsValues, shouldHaveBody, isBodyValid, queryParamsValues]);
+    useEffect(() => {
+        if (endpoint.id) {
+            setResponseCode(undefined);
+            setResponseBody(undefined);
+            setExecutionTime(undefined);
+            setIsRequestLoading(false);
+        }
+    }, [endpoint.id]);
+    const handleRequest = async () => {
+        setIsRequestLoading(true);
+        const startTime = Date.now();
+        const path = new URL(window.location.origin +
+            Object.entries(pathParamsValues).reduce((acc, [param, value]) => {
+                return acc.replace(`:${param}`, value);
+            }, endpoint.path));
+        for (const [key, value] of Object.entries(queryParamsValues)) {
+            path.searchParams.set(key, value);
+        }
+        const response = await fetch(path.toString(), {
+            method: endpoint.method,
+            headers: { 'Content-Type': 'application/json' },
+            body: endpoint.method === 'GET' ? null : body,
+        });
+        const endTime = Date.now();
+        const executionTime = endTime - startTime;
+        const json = await response.json();
+        setResponseCode(response.status);
+        setResponseBody(json);
+        setExecutionTime(executionTime);
+        setIsRequestLoading(false);
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint, onChange: setPathParamsValues }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint, onChange: setQueryParamsValues }), _jsx(EndpointBodyPanel, { endpoint: endpoint, value: body, onChange: setBody, onValidate: setIsBodyValid, panelName: "call" }), _jsxs(Button, { className: "w-fit", onClick: handleRequest, variant: "accent", "data-testid": "endpoint-play-button", disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), _jsx(EndpointResponse, { responseCode: responseCode, responseBody: responseBody, executionTime: executionTime })] }));
+};

package/dist/src/components/endpoints/endpoint-description.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ApiEndpoint } from '@/types/endpoint';
+type Props = {
+    endpoint: ApiEndpoint;
+};
+export declare const EndpointDescription: FC<Props>;
+export {};

package/dist/src/components/endpoints/endpoint-description.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EndpointResponseSchema } from './endpoint-response-schema';
+import { EndpointPathParamsPanel } from './endpoint-path-params-panel';
+import { EndpointQueryParamsPanel } from './endpoint-query-params-panel';
+import { EndpointBodyPanel } from './endpoint-body-panel';
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+export const EndpointDescription = ({ endpoint }) => {
+    const { body } = useJsonSchemaToJson(endpoint.bodySchema);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint }), _jsx(EndpointBodyPanel, { endpoint: endpoint, panelName: "details", value: body }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
+                    responseCode: status,
+                    bodySchema: schema,
+                })) })] }));
+};

package/dist/src/components/endpoints/endpoint-path-params-panel.d.ts

@@ -0,0 +1,8 @@
+import { ApiEndpoint } from '@/types/endpoint';
+import { FC } from 'react';
+type Props = {
+    endpoint: ApiEndpoint;
+    onChange?: (pathParamsValues: Record<string, string>) => void;
+};
+export declare const EndpointPathParamsPanel: FC<Props>;
+export {};

package/dist/src/components/endpoints/endpoint-path-params-panel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Panel } from '@motiadev/ui';
+import { Fragment, useState } from 'react';
+import { usePathParams } from './hooks/use-path-params';
+export const EndpointPathParamsPanel = ({ endpoint, onChange }) => {
+    const pathParams = usePathParams(endpoint.path);
+    const [pathParamsValues, setPathParamsValues] = useState(pathParams?.reduce((acc, param) => ({ ...acc, [param]: '' }), {}));
+    const onPathParamChange = (param, value) => {
+        const newPathParamsValues = { ...pathParamsValues, [param]: value };
+        setPathParamsValues(newPathParamsValues);
+        onChange?.(newPathParamsValues);
+    };
+    if (!pathParams.length) {
+        return null;
+    }
+    return (_jsx(Panel, { title: "Path params", size: "sm", variant: "default", children: _jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: '1fr 2fr' }, children: pathParams.map((param) => (_jsxs(Fragment, { children: [_jsx("div", { className: "font-bold leading-[36px] flex text-xs", children: param }), _jsx("div", { className: "flex items-center text-xs", children: onChange && (_jsx(Input, { className: "w-full text-xs", placeholder: param, value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })) })] }, param))) }) }));
+};

package/dist/src/components/endpoints/endpoint-query-params-panel.d.ts

@@ -0,0 +1,8 @@
+import { ApiEndpoint } from '@/types/endpoint';
+import { FC } from 'react';
+type Props = {
+    endpoint: ApiEndpoint;
+    onChange?: (queryParamsValues: Record<string, string>) => void;
+};
+export declare const EndpointQueryParamsPanel: FC<Props>;
+export {};

package/dist/src/components/endpoints/endpoint-query-params-panel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '@motiadev/ui';
+import { Panel } from '@motiadev/ui';
+import { Fragment, useState } from 'react';
+export const EndpointQueryParamsPanel = ({ endpoint, onChange }) => {
+    const [queryParamsValues, setQueryParamsValues] = useState(endpoint.queryParams?.reduce((acc, param) => ({ ...acc, [param.name]: '' }), {}) ?? {});
+    const onQueryParamChange = (param, value) => {
+        const newQueryParamsValues = { ...queryParamsValues, [param]: value };
+        setQueryParamsValues(newQueryParamsValues);
+        onChange?.(newQueryParamsValues);
+    };
+    if (!endpoint.queryParams?.length) {
+        return null;
+    }
+    return (_jsx(Panel, { title: "Query params", size: "sm", variant: "outlined", children: _jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: '1fr 2fr', gridTemplateRows: '1fr 1fr' }, children: endpoint.queryParams.map((param) => (_jsxs(Fragment, { children: [_jsx("div", { className: "font-bold leading-[36px] flex text-xs", children: param.name }), _jsx("div", { className: "flex items-center text-xs ", children: onChange ? (_jsx(Input, { className: "text-xs", placeholder: param.description, value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) })) : (_jsx("span", { children: param.description })) })] }, param.name))) }) }));
+};

package/dist/src/components/endpoints/endpoint-response-schema.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type EndpointResponseItem = {
+    responseCode: string;
+    bodySchema: Record<string, Record<string, any>>;
+};
+type EndpointResponseProps = {
+    items: EndpointResponseItem[];
+};
+export declare const EndpointResponseSchema: FC<EndpointResponseProps>;
+export {};

package/dist/src/components/endpoints/endpoint-response-schema.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertJsonSchemaToJson } from '@/components/endpoints/hooks/utils';
+import { useThemeStore } from '@/stores/use-theme-store';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
+import { useMemo } from 'react';
+import ReactJson from 'react18-json-view';
+const EndpointResponseSchemaItem = ({ responseCode, bodySchema }) => {
+    const theme = useThemeStore((store) => store.theme);
+    const schema = useMemo(() => convertJsonSchemaToJson(bodySchema), [bodySchema]);
+    return (_jsx(TabsContent, { value: responseCode, className: "border-t", children: _jsx("div", { className: "text-xs font-mono rounded-lg whitespace-pre-wrap", children: _jsx(ReactJson, { src: schema, dark: theme === 'dark', enableClipboard: false, style: { backgroundColor: 'transparent' } }) }) }, responseCode));
+};
+export const EndpointResponseSchema = ({ items }) => {
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "flex flex-col rounded-lg border", children: _jsxs(Tabs, { defaultValue: items[0].responseCode, children: [_jsx("div", { className: "flex items-center justify-between bg-card", children: _jsx(TabsList, { className: "bg-transparent p-0", children: items.map((item) => (_jsx(TabsTrigger, { value: item.responseCode, className: "text-xs font-bold cursor-pointer", children: item.responseCode }, item.responseCode))) }) }), items.map((props) => (_jsx(EndpointResponseSchemaItem, { ...props }, props.responseCode)))] }) }));
+};

package/dist/src/components/endpoints/endpoint-response.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type EndpointResponseProps = {
+    responseCode: number | string | undefined;
+    responseBody: Record<string, any> | undefined;
+    executionTime?: number;
+};
+export declare const EndpointResponse: FC<EndpointResponseProps>;
+export {};

package/dist/src/components/endpoints/endpoint-response.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStream } from '@/components/endpoints/hooks/use-state-stream';
+import { useThemeStore } from '@/stores/use-theme-store';
+import { Panel } from '@motiadev/ui';
+import { XCircle } from 'lucide-react';
+import { useMemo } from 'react';
+import ReactJson from 'react18-json-view';
+const getStatusMessage = (status) => {
+    switch (status) {
+        case 200:
+            return 'OK';
+        case 201:
+            return 'Created';
+        case 204:
+            return 'No Content';
+        case 400:
+            return 'Bad Request';
+        case 401:
+            return 'Unauthorized';
+        case 403:
+            return 'Forbidden';
+        case 404:
+            return 'Not Found';
+        case 500:
+            return 'Internal Server Error';
+        default:
+            return 'Unknown Status';
+    }
+};
+export const EndpointResponse = ({ responseCode, executionTime, responseBody }) => {
+    const theme = useThemeStore((state) => state.theme);
+    const { data, isStreamed, originalData } = useStateStream(responseBody);
+    const statusMessage = useMemo(() => getStatusMessage(Number(responseCode)), [responseCode]);
+    const isError = Number(responseCode) >= 400;
+    if (!responseBody || !responseCode) {
+        return null;
+    }
+    return (_jsx(Panel, { "data-testid": 'endpoint-response-container', tabs: isStreamed
+            ? [
+                {
+                    label: 'Streamed Response',
+                    content: (_jsx(ReactJson, { src: data, dark: theme === 'dark', style: { backgroundColor: 'transparent' } })),
+                },
+                {
+                    label: 'Original',
+                    content: (_jsx(ReactJson, { src: originalData, dark: theme === 'dark', style: { backgroundColor: 'transparent' } })),
+                },
+            ]
+            : undefined, title: _jsxs("div", { className: "flex flex-row justify-between items-center flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && _jsx(XCircle, { className: "text-red-500 w-4 h-4" }), _jsxs("span", { className: "font-bold text-xs", children: [responseCode, " - ", statusMessage] })] }), !!executionTime && (_jsxs("span", { className: "text-xs text-muted-foreground justify-self-end", children: ["Execution time: ", _jsxs("span", { className: "font-bold", children: [executionTime, "ms"] })] }))] }), subtitle: isStreamed && (_jsxs("span", { className: "col-span-2 flex flex-row items-center font-medium text-card-foreground text-xs mt-2", children: [_jsxs("span", { className: "inline-block w-2 h-2 rounded-full bg-green-500 mr-2 relative", children: [_jsx("span", { className: "absolute inset-0 rounded-full bg-green-500 animate-[ping_1.5s_ease-in-out_infinite]" }), _jsx("span", { className: "absolute inset-0 rounded-full bg-green-500" })] }), "Object is being streamed, this is not the actual response from the API Endpoint"] })), children: !isStreamed && (_jsx(ReactJson, { src: data, dark: theme === 'dark', style: { backgroundColor: 'transparent' } })) }));
+};

package/dist/src/components/endpoints/endpoint-side-panel.d.ts

@@ -0,0 +1,8 @@
+import { ApiEndpoint } from '@/types/endpoint';
+import { FC } from 'react';
+type Props = {
+    endpoint: ApiEndpoint;
+    onClose: () => void;
+};
+export declare const EndpointSidePanel: FC<Props>;
+export {};

package/dist/src/components/endpoints/endpoint-side-panel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar } from '@/components/sidebar/sidebar';
+import { X } from 'lucide-react';
+import { EndpointBadge } from './endpoint-badge';
+import { EndpointCall } from './endpoint-call';
+import { EndpointDescription } from './endpoint-description';
+export const EndpointSidePanel = ({ endpoint, onClose }) => {
+    return (_jsx(Sidebar, { initialWidth: 600, subtitle: endpoint.description, title: _jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-bold", children: endpoint.path })] }), onClose: onClose, tabs: [
+            {
+                label: 'Details',
+                content: _jsx(EndpointDescription, { endpoint: endpoint }),
+                'data-testid': 'endpoint-details-tab',
+            },
+            {
+                label: 'Call',
+                content: _jsx(EndpointCall, { endpoint: endpoint }),
+                'data-testid': 'endpoint-call-tab',
+            },
+        ], actions: [
+            {
+                icon: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }),
+                onClick: onClose,
+            },
+        ] }));
+};

package/dist/src/components/endpoints/endpoints-page.d.ts

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { useGlobalStore } from '@/stores/use-global-store';
+import { useMemo } from 'react';
+import { EndpointBadge } from './endpoint-badge';
+import { EndpointSidePanel } from './endpoint-side-panel';
+import { useGetEndpoints } from './hooks/use-get-endpoints';
+export const EndpointsPage = () => {
+    const endpoints = useGetEndpoints();
+    const selectedEndpointId = useGlobalStore((state) => state.selectedEndpointId);
+    const selectEndpointId = useGlobalStore((state) => state.selectEndpointId);
+    const selectedEndpoint = useMemo(() => selectedEndpointId && endpoints.find((endpoint) => endpoint.id === selectedEndpointId), [endpoints, selectedEndpointId]);
+    return (_jsxs("div", { className: "flex flex-row w-full h-full", children: [_jsx("div", { className: "flex flex-col flex-1 overflow-y-auto", children: endpoints.map((endpoint) => (_jsx("div", { "data-testid": `endpoint-${endpoint.method}-${endpoint.path}`, className: cn(selectedEndpoint === endpoint && 'bg-muted-foreground/10', 'cursor-pointer select-none'), onClick: () => selectEndpointId(endpoint.id), children: _jsxs("div", { className: "flex flex-row gap-2 items-center hover:bg-muted-foreground/10 p-2", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-mono font-bold whitespace-nowrap", children: endpoint.path }), _jsx("span", { className: "text-md text-muted-foreground truncate", children: endpoint.description })] }) }, `${endpoint.method} ${endpoint.path}`))) }), selectedEndpoint && (_jsx(EndpointSidePanel, { endpoint: selectedEndpoint, onClose: () => selectEndpointId(undefined) }))] }));
+};

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

@@ -0,0 +1,2 @@
+import { ApiEndpoint } from '@/types/endpoint';
+export declare const useGetEndpoints: () => ApiEndpoint[];

package/dist/src/components/endpoints/hooks/use-get-endpoints.js

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

package/dist/src/components/endpoints/hooks/use-json-schema-to-json.d.ts

@@ -0,0 +1,4 @@
+export declare const useJsonSchemaToJson: (schema: Record<string, any> | undefined) => {
+    body: string;
+    setBody: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

package/dist/src/components/endpoints/hooks/use-json-schema-to-json.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { convertJsonSchemaToJson } from './utils';
+export const useJsonSchemaToJson = (schema) => {
+    const [body, setBody] = useState('');
+    useEffect(() => {
+        if (schema) {
+            setBody(JSON.stringify(convertJsonSchemaToJson(schema), null, 2));
+        }
+    }, [schema]);
+    return { body, setBody };
+};

package/dist/src/components/endpoints/hooks/use-path-params.d.ts

@@ -0,0 +1 @@
+export declare const usePathParams: (path: string) => string[];

package/dist/src/components/endpoints/hooks/use-path-params.js

@@ -0,0 +1,4 @@
+export const usePathParams = (path) => {
+    const pathParams = path.match(/:(\w+)/g);
+    return pathParams?.map((param) => param.slice(1)) ?? [];
+};

package/dist/src/components/endpoints/hooks/use-state-stream.d.ts

@@ -0,0 +1,7 @@
+export declare const useStateStream: (object: Record<string, any> | undefined) => {
+    data: {};
+    originalData: any[] | {
+        [x: string]: any;
+    };
+    isStreamed: boolean;
+};

package/dist/src/components/endpoints/hooks/use-state-stream.js

@@ -0,0 +1,11 @@
+import { useStreamItem } from '@motiadev/stream-client-react';
+export const useStateStream = (object) => {
+    const { __motia, ...rest } = object || {};
+    const { data } = useStreamItem(__motia);
+    const originalData = Array.isArray(object) ? object : rest || object;
+    return {
+        data: data || originalData,
+        originalData,
+        isStreamed: !!__motia,
+    };
+};

package/dist/src/components/endpoints/hooks/utils.d.ts

@@ -0,0 +1 @@
+export declare const convertJsonSchemaToJson: (schema?: Record<string, any>) => any;

package/dist/src/components/endpoints/hooks/utils.js

@@ -0,0 +1,29 @@
+export const convertJsonSchemaToJson = (schema) => {
+    if (!schema)
+        return {};
+    if (schema.type === 'object') {
+        const result = {};
+        if (schema.properties) {
+            Object.entries(schema.properties).forEach(([key, value]) => {
+                result[key] = convertJsonSchemaToJson(value);
+            });
+        }
+        return result;
+    }
+    switch (schema.type) {
+        case 'array':
+            return [convertJsonSchemaToJson(schema.items)];
+        case 'string':
+            return schema.enum?.[0] ?? schema.description ?? 'string';
+        case 'number':
+            return schema.description ?? 0;
+        case 'integer':
+            return 0;
+        case 'boolean':
+            return schema.description ?? false;
+        case 'null':
+            return schema.description ?? null;
+        default:
+            return undefined;
+    }
+};

package/dist/src/components/endpoints/response-body.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    status: string;
+    body: Record<string, any>;
+};
+export declare const ResponseBody: React.FC<Props>;
+export {};

package/dist/src/components/endpoints/response-body.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+export const ResponseBody = ({ status, body }) => {
+    const { body: responseBody } = useJsonSchemaToJson(body);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: status }), _jsx("span", { className: "text-xs font-mono dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: responseBody })] }));
+};

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 '@motiadev/ui';
+import { cn } from '@/lib/utils';
 const labelVariants = cva('absolute pointer-events-all text-cs border p-1 px-2', {
     variants: {
         color: {

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 '@motiadev/ui';
+import { Sidebar } from '@/components/sidebar/sidebar';
 import { X } from 'lucide-react';
 const defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId'];
 export const LogDetail = ({ log, onClose }) => {

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

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Sidebar, Badge } from '@motiadev/ui';
+import { Sidebar } from '@/components/sidebar/sidebar';
+import { 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 '@motiadev/ui';
+import { cn } from '@/lib/utils';
 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/traces-groups.js

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

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

@@ -0,0 +1,8 @@
+import { type PanelProps } from '@motiadev/ui';
+import { FC } from 'react';
+export declare const APP_SIDEBAR_CONTAINER_ID = "app-sidebar-container";
+export type SidebarProps = PanelProps & {
+    onClose: () => void;
+    initialWidth?: number;
+};
+export declare const Sidebar: FC<SidebarProps>;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Panel } from '@motiadev/ui';
+import { createPortal } from 'react-dom';
+import { useEffect, useMemo } from 'react';
+import { useResizable } from 'react-use-resizable';
+import { Equal } from 'lucide-react';
+export const APP_SIDEBAR_CONTAINER_ID = 'app-sidebar-container';
+const CLOSE_PREVIOUS_SIDEBAR_EVENT = 'close-previous-sidebar';
+export const Sidebar = ({ initialWidth, onClose, ...props }) => {
+    const sidebarId = useMemo(() => Symbol(), []);
+    const { getRootProps, getHandleProps } = useResizable({
+        lockVertical: true,
+        initialWidth: initialWidth ?? 400,
+        initialHeight: '100%',
+        onDragStart: () => {
+            document.body.style.userSelect = 'none';
+        },
+        onDragEnd: () => {
+            document.body.style.userSelect = '';
+        },
+    });
+    useEffect(() => {
+        const event = new CustomEvent(CLOSE_PREVIOUS_SIDEBAR_EVENT, { detail: { sidebarId } });
+        window.dispatchEvent(event);
+        const handleClose = (e) => {
+            const customEvent = e;
+            if (customEvent.detail.sidebarId !== sidebarId) {
+                onClose();
+            }
+        };
+        window.addEventListener(CLOSE_PREVIOUS_SIDEBAR_EVENT, handleClose);
+        return () => {
+            window.removeEventListener(CLOSE_PREVIOUS_SIDEBAR_EVENT, handleClose);
+        };
+    }, [sidebarId, onClose]);
+    return createPortal(_jsxs("div", { ...getRootProps(), className: "pr-2 py-2 relative", children: [_jsx("div", { ...getHandleProps({
+                    reverse: true,
+                }), className: "flex h-6 w-6 items-center justify-center rounded-full bg-background border border-border absolute top-1/2 -translate-y-1/2 -left-4 z-20", children: _jsx(Equal, { className: "rotate-90 w-4 h-4 text-muted-foreground" }) }), _jsx(Panel, { ...props, variant: "outlined", className: "max-h-[calc(100vh-80px)] h-full", "data-testid": "sidebar-panel" })] }), document.querySelector(`#${APP_SIDEBAR_CONTAINER_ID}`));
+};

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 '../ui/json-editor';
+import { JsonEditor } from '../endpoints/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 '@motiadev/ui';
+import { Sidebar } from '@/components/sidebar/sidebar';
 import { X } from 'lucide-react';
 import { StateDetails } from './state-details';
 import { StateEditor } from './state-editor';