@motiadev/workbench 0.4.1-beta.92 → 0.4.2-beta.94

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

@@ -0,0 +1,11 @@
+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;
+    onChange?: (body: string) => void;
+    onValidate?: (isValid: boolean) => void;
+};
+export declare const EndpointBodyPanel: FC<Props>;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+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';
+import { convertJsonSchemaToJson } from './hooks/utils';
+export const EndpointBodyPanel = ({ endpoint, onChange, onValidate }) => {
+    const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
+    const { body, setBody } = useJsonSchemaToJson(endpoint.bodySchema);
+    const handleBodyChange = (body) => {
+        setBody(body);
+        onChange?.(body);
+    };
+    if (!shouldHaveBody) {
+        return null;
+    }
+    return (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": "endpoint-body-panel", children: onChange ? (_jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: handleBodyChange, onValidate: onValidate })) : (_jsx(ReactJson, { src: convertJsonSchemaToJson(endpoint.bodySchema ?? {}), theme: "default", enableClipboard: false })) }));
+};

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

@@ -2,7 +2,6 @@ import { ApiEndpoint } from '@/types/endpoint';
 import { FC } from 'react';
 type Props = {
     endpoint: ApiEndpoint;
-    onClose: () => void;
 };
 export declare const EndpointCall: FC<Props>;
 export {};

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

@@ -1,38 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Sidebar } from '@/components/sidebar/sidebar';
-import { Button, Input, Panel } from '@motiadev/ui';
-import { Loader2, Play, X } from 'lucide-react';
+import { Button } from '@motiadev/ui';
+import { Loader2, Play } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
-import { EndpointBadge } from './endpoint-badge';
+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 { EndpointResponseSchema } from './endpoint-response-schema';
-import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
-import { usePathParams } from './hooks/use-path-params';
-import { JsonEditor } from './json-editor';
-export const EndpointCall = ({ endpoint, onClose }) => {
+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 [body, setBody] = useState(undefined);
     const [isBodyValid, setIsBodyValid] = useState(true);
-    const pathParams = usePathParams(endpoint.path);
-    const [pathParamsValues, setPathParamsValues] = useState(pathParams?.reduce((acc, param) => ({ ...acc, [param]: '' }), {}));
-    const [queryParamsValues, setQueryParamsValues] = useState(endpoint.queryParams?.reduce((acc, param) => ({ ...acc, [param.name]: '' }), {}) ?? {});
+    const [pathParamsValues, setPathParamsValues] = useState({});
+    const [queryParamsValues, setQueryParamsValues] = useState({});
     const isPlayEnabled = useMemo(() => {
-        if (!pathParams)
-            return true;
         if (shouldHaveBody && !isBodyValid)
             return false;
-        return pathParams?.every((param) => pathParamsValues[param]);
-    }, [pathParams, pathParamsValues, shouldHaveBody, isBodyValid]);
-    const onPathParamChange = (param, value) => {
-        setPathParamsValues((prev) => ({ ...prev, [param]: value }));
-    };
-    const onQueryParamChange = (param, value) => {
-        setQueryParamsValues((prev) => ({ ...prev, [param]: value }));
-    };
+        return (Object.values(pathParamsValues).every((value) => value) &&
+            Object.values(queryParamsValues).every((value) => value));
+    }, [pathParamsValues, shouldHaveBody, isBodyValid, queryParamsValues]);
     useEffect(() => {
         if (endpoint.id) {
             setResponseCode(undefined);
@@ -45,8 +34,8 @@ export const EndpointCall = ({ endpoint, onClose }) => {
         setIsRequestLoading(true);
         const startTime = Date.now();
         const path = new URL(window.location.origin +
-            pathParams.reduce((acc, param) => {
-                return acc.replace(`:${param}`, pathParamsValues[param]);
+            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);
@@ -64,13 +53,5 @@ export const EndpointCall = ({ endpoint, onClose }) => {
         setExecutionTime(executionTime);
         setIsRequestLoading(false);
     };
-    return (_jsxs(Sidebar, { initialWidth: 600, 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, actions: [
-            {
-                icon: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }),
-                onClick: onClose,
-            },
-        ], children: [endpoint.description && (_jsx("div", { className: "rounded-lg border p-4 font-medium text-muted-foreground", children: endpoint.description })), !!pathParams.length && (_jsx(Panel, { title: "Path params", size: "sm", children: _jsx("table", { children: pathParams.map((param) => (_jsxs("tr", { children: [_jsx("td", { className: "flex flex-col font-bold leading-[36px]", children: param }), _jsx("td", { className: "w-2/3 pl-4", children: _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) }) })] }, param))) }) })), !!endpoint.queryParams?.length && (_jsx(Panel, { title: "Query params", size: "sm", children: _jsx("table", { children: endpoint.queryParams.map((param) => (_jsxs("tr", { children: [_jsxs("td", { className: "flex flex-col justify-start", children: [_jsx("span", { className: "font-bold", children: param.name }), _jsx("span", { className: "text-md text-muted-foreground", children: param.description })] }), _jsx("td", { className: "w-2/3 pl-4 align-top", children: _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) }) })] }, param.name))) }) })), shouldHaveBody && (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": "endpoint-body-panel", children: _jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: setBody, onValidate: setIsBodyValid }) })), _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 }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
-                    responseCode: status,
-                    bodySchema: schema,
-                })) })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint, onChange: setPathParamsValues }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint, onChange: setQueryParamsValues }), _jsx(EndpointBodyPanel, { endpoint: endpoint, onChange: setBody, onValidate: setIsBodyValid }), _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,11 @@
+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';
+export const EndpointDescription = ({ endpoint }) => {
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint }), _jsx(EndpointBodyPanel, { endpoint: endpoint }), _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 { FC } from 'react';
+import { ApiEndpoint } from '@/types/endpoint';
+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,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Panel } from '@motiadev/ui';
+import { Fragment, useMemo, 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);
+    };
+    const subtitle = useMemo(() => {
+        if (onChange) {
+            return Object.entries(pathParamsValues).reduce((acc, [param, value]) => {
+                if (!value) {
+                    return acc;
+                }
+                return acc.replace(`:${param}`, value);
+            }, endpoint.path);
+        }
+        return endpoint.path;
+    }, [pathParamsValues, endpoint.path, onChange]);
+    if (!pathParams.length) {
+        return null;
+    }
+    return (_jsx(Panel, { title: "Path params", subtitle: subtitle, size: "sm", variant: "outlined", 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) })) : (_jsx("span", { className: "text-xs", children: `:${param}` })) })] }, 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.js

@@ -13,5 +13,5 @@ export const EndpointResponseSchema = ({ items }) => {
     if (items.length === 0) {
         return null;
     }
-    return (_jsx("div", { className: "flex flex-col rounded-lg border", "data-testid": "endpoint-response-container", 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)))] }) }));
+    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.js

@@ -35,18 +35,16 @@ export const EndpointResponse = ({ responseCode, executionTime, responseBody })
     if (!responseBody || !responseCode) {
         return null;
     }
-    return (_jsx(Panel, { tabs: isStreamed
-            ? {
-                tabs: [
-                    {
-                        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' } })),
-                    },
-                ],
-            }
+    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.js

@@ -3,12 +3,12 @@ import { cn } from '@/lib/utils';
 import { useGlobalStore } from '@/stores/use-global-store';
 import { useMemo } from 'react';
 import { EndpointBadge } from './endpoint-badge';
-import { EndpointCall } from './endpoint-call';
+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(EndpointCall, { endpoint: selectedEndpoint, onClose: () => selectEndpointId(undefined) })] }));
+    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/utils.js

@@ -14,7 +14,7 @@ export const convertJsonSchemaToJson = (schema) => {
         case 'array':
             return [convertJsonSchemaToJson(schema.items)];
         case 'string':
-            return schema.description ?? 'string';
+            return schema.enum?.[0] ?? schema.description ?? 'string';
         case 'number':
             return schema.description ?? 0;
         case 'integer':

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

@@ -3,7 +3,7 @@ type JsonEditorProps = {
     value: string;
     schema: Record<string, unknown> | undefined;
     onChange: (value: string) => void;
-    onValidate: (isValid: boolean) => void;
+    onValidate?: (isValid: boolean) => void;
 };
 export declare const JsonEditor: FC<JsonEditorProps>;
 export {};

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

@@ -22,8 +22,8 @@ export const JsonEditor = ({ value, schema, onChange, onValidate }) => {
     }, [monaco, schema]);
     return (_jsx(Editor, { "data-testid": "json-editor", height: "200px", language: "json", value: value, theme: editorTheme, onChange: (value) => {
             if (!value) {
-                onValidate(false);
+                onValidate?.(false);
             }
             onChange(value ?? '');
-        }, onValidate: (markers) => onValidate(markers.length === 0), options: { lineNumbers: 'off', minimap: { enabled: false } } }));
+        }, onValidate: (markers) => onValidate?.(markers.length === 0), options: { lineNumbers: 'off', minimap: { enabled: false } } }));
 };

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

@@ -6,7 +6,7 @@ import { useLogsStore } from '@/stores/use-logs-store';
 import { useMemo, useState } from 'react';
 import { LogDetail } from './log-detail';
 import { LogLevelDot } from './log-level-dot';
-import { Button, Input } from '@motiadev/ui';
+import { Button, cn, Input } from '@motiadev/ui';
 import { CircleX, Trash } from 'lucide-react';
 export const LogsPage = () => {
     const logs = useLogsStore((state) => state.logs);
@@ -22,5 +22,8 @@ export const LogsPage = () => {
                 log.step.toLowerCase().includes(search.toLowerCase()));
         });
     }, [logs, search]);
-    return (_jsxs("div", { className: "h-full flex flex-row", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", 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, { className: "cursor-pointer border-0", 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) })] }));
+    return (_jsxs("div", { className: "h-full flex flex-row", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", 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, { 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/states/states-page.js

@@ -12,7 +12,7 @@ export const StatesPage = () => {
     const selectedItem = useMemo(() => (selectedStateId ? items.find((item) => `${item.groupId}:${item.key}` === selectedStateId) : null), [items, selectedStateId]);
     const handleRowClick = (item) => selectStateId(`${item.groupId}:${item.key}`);
     const onClose = () => selectStateId(undefined);
-    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [selectedItem && _jsx(StateDetail, { 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', selectedItem === item
+    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [selectedItem && _jsx(StateDetail, { 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}`))) })] })] }));
 };