@motiadev/workbench 0.4.4-beta.97 → 0.5.0-beta.99

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

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 type JsonEditorProps = {
     value: string;
+    height?: number | string;
     schema?: Record<string, unknown>;
     onChange: (value: string) => void;
     onValidate?: (isValid: boolean) => void;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { useThemeStore } from '@/stores/use-theme-store';
-export const JsonEditor = ({ value, schema, onChange, onValidate }) => {
+export const JsonEditor = ({ value, height = 300, schema, onChange, onValidate }) => {
     const monaco = useMonaco();
     const theme = useThemeStore((state) => state.theme);
     const editorTheme = useMemo(() => (theme === 'dark' ? 'vs-dark' : 'light'), [theme]);
@@ -22,7 +22,7 @@ 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) => {
+    return (_jsx(Editor, { "data-testid": "json-editor", height: height, language: "json", value: value, theme: editorTheme, onChange: (value) => {
             if (!value) {
                 onValidate?.(false);
             }

package/dist/src/components/logs/log-level-badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from '../ui/badge';
+import { Badge } from '@motiadev/ui';
 const map = {
     info: 'info',
     error: 'error',

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

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Sidebar } from '@/components/sidebar/sidebar';
-import { Badge } from '@/components/ui/badge';
+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-status.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-const statusVariants = cva('inline-flex items-center rounded-full px-4 py-1 text-xs font-bold transition-colors', {
-    variants: {
-        status: {
-            running: 'dark:bg-accent-100 dark:text-accent-1000 bg-accent-200 text-accent-900 capitalize',
-            completed: 'bg-accent-1000 text-white',
-            failed: 'bg-destructive/10 text-destructive capitalize',
-            default: 'dark:bg-gray-800/30 dark:text-gray-500 bg-gray-100 text-gray-800',
-        },
-    },
-    defaultVariants: {
-        status: 'default',
-    },
-});
+import { Badge } from '@motiadev/ui';
+import { useMemo } from 'react';
 export const TraceStatusBadge = ({ status, duration }) => {
-    return _jsx("div", { className: statusVariants({ status }), children: duration && status !== 'failed' ? duration : status });
+    const variant = useMemo(() => {
+        if (status === 'running') {
+            return 'info';
+        }
+        if (status === 'completed') {
+            return 'success';
+        }
+        if (status === 'failed') {
+            return 'error';
+        }
+        return 'default';
+    }, [status]);
+    return _jsx(Badge, { variant: variant, children: duration && status !== 'failed' ? duration : status });
 };

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

@@ -1,34 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge } from '@/components/ui/badge';
-import { Panel } from '@motiadev/ui';
-import { Copy, Database, Hash } from 'lucide-react';
-import { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import JsonView from 'react18-json-view';
-export const StateDetails = ({ state }) => {
-    const stateMetadata = useMemo(() => {
-        const valueSize = JSON.stringify(state.value).length;
-        const sizeLabel = valueSize < 1024 ? `${valueSize} bytes` : `${(valueSize / 1024).toFixed(1)} KB`;
-        return {
-            size: sizeLabel,
-            isComplex: typeof state.value === 'object' && state.value !== null,
-            hasNesting: typeof state.value === 'object' &&
-                state.value !== null &&
-                Object.values(state.value).some((v) => typeof v === 'object'),
-        };
-    }, [state.value]);
-    const copyToClipboard = async () => {
-        try {
-            await navigator.clipboard.writeText(JSON.stringify(state.value, null, 2));
-        }
-        catch (err) {
-            console.error('Failed to copy to clipboard:', err);
-        }
-    };
-    return (_jsxs(Panel, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Database, { className: "w-4 h-4" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "State Overview" })] }), actions: [
-            {
-                icon: _jsx(Copy, {}),
-                onClick: copyToClipboard,
-                label: 'Copy',
-            },
-        ], children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground font-medium", children: "Type" }), _jsx("div", { children: _jsx(Badge, { variant: "secondary", className: "text-xs", children: state.type }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground font-medium", children: "Size" }), _jsx("div", { className: "text-foreground font-mono", children: stateMetadata.size })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground font-medium", children: "Group ID" }), _jsx("div", { className: "text-foreground font-mono text-xs bg-background px-2 py-1 rounded border", children: state.groupId })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground font-medium", children: "Key" }), _jsxs("div", { className: "text-foreground font-mono text-xs bg-background px-2 py-1 rounded border flex items-center gap-1", children: [_jsx(Hash, { className: "w-3 h-3" }), state.key] })] })] }), stateMetadata.isComplex && (_jsx("div", { className: "pt-2 border-t border-border/50", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: stateMetadata.hasNesting ? 'Nested Object' : 'Simple Object' }), Array.isArray(state.value) && (_jsxs(Badge, { variant: "outline", className: "text-xs", children: [state.value.length, " items"] }))] }) }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Value Structure" }), _jsx("div", { className: "bg-background border border-border rounded-lg p-3 overflow-auto max-h-[400px]", children: _jsx(JsonView, { src: state.value, theme: "default", enableClipboard: false, collapsed: 2 }) })] })] }));
-};
+export const StateDetails = ({ state }) => _jsx(JsonView, { src: state.value, theme: "default" });

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Panel } from '@motiadev/ui';
-import { AlertCircle, Check, Database, Loader2, Save } from 'lucide-react';
-import { useState, useCallback, useEffect, useRef } from 'react';
+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';
 export const StateEditor = ({ state }) => {
     const [isRequestLoading, setIsRequestLoading] = useState(false);
@@ -58,5 +58,14 @@ export const StateEditor = ({ state }) => {
         setHasChanges(false);
         setSaveStatus('idle');
     }, [state.value]);
-    return (_jsxs(Panel, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Database, { className: "w-4 h-4" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Edit State Value" })] }), children: [_jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "Modify the state value using the JSON editor below. Changes will be saved to the system when you click Save." }), _jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [_jsxs("div", { children: [_jsx("strong", { children: "Group:" }), " ", _jsx("code", { className: "bg-background px-1 py-0.5 rounded", children: state.groupId })] }), _jsxs("div", { children: [_jsx("strong", { children: "Key:" }), " ", _jsx("code", { className: "bg-background px-1 py-0.5 rounded", children: state.key })] })] }), _jsxs("div", { className: "space-y-3 pt-2", children: [_jsxs("div", { className: "relative", children: [_jsx(JsonEditor, { value: jsonValue, onChange: handleJsonChange, onValidate: setIsValid }), !isValid && (_jsxs("div", { className: "absolute top-2 right-2 bg-destructive/90 text-destructive-foreground px-2 py-1 rounded text-xs flex items-center gap-1", children: [_jsx(AlertCircle, { className: "w-3 h-3" }), "Invalid JSON"] }))] }), saveStatus === 'success' && (_jsx("div", { className: "bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-lg p-3", children: _jsxs("div", { className: "flex items-center gap-2 text-green-700 dark:text-green-400 text-sm", children: [_jsx(Check, { className: "w-4 h-4" }), "State saved successfully!"] }) })), saveStatus === 'error' && (_jsx("div", { className: "bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-lg p-3", children: _jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-400 text-sm", children: [_jsx(AlertCircle, { className: "w-4 h-4" }), "Failed to save state. Please try again."] }) }))] }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: hasChanges ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-orange-500 rounded-full" }), "Unsaved changes"] })) : (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }), "Up to date"] })) }), _jsxs("div", { className: "flex items-center gap-2", children: [hasChanges && (_jsx(Button, { variant: "secondary", onClick: resetChanges, disabled: isRequestLoading, children: "Reset" })), _jsx(Button, { onClick: handleSave, variant: "accent", disabled: isRequestLoading || !isValid || !hasChanges, "data-testid": "state-save-button", children: isRequestLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-3 h-3 animate-spin mr-1" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-3 h-3 mr-1" }), "Save Changes"] })) })] })] })] }));
+    const statusView = useMemo(() => {
+        if (saveStatus === 'success') {
+            return (_jsx("div", { className: "bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-lg p-2", children: _jsxs("div", { className: "flex items-center gap-2 text-green-700 dark:text-green-400 text-sm", children: [_jsx(Check, { className: "w-4 h-4" }), "State saved successfully!"] }) }));
+        }
+        if (saveStatus === 'error') {
+            return (_jsx("div", { className: "bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-lg p-2", children: _jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-400 text-sm", children: [_jsx(AlertCircle, { className: "w-4 h-4" }), "Failed to save state. Please try again."] }) }));
+        }
+        return (_jsx("div", { className: "text-xs text-muted-foreground", children: hasChanges ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-orange-500 rounded-full" }), "Unsaved changes"] })) : (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }), "Up to date"] })) }));
+    }, [saveStatus, hasChanges]);
+    return (_jsxs("div", { className: "flex flex-col gap-2 h-full", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Modify the state value using the JSON editor below." }), _jsx("div", { className: "space-y-3 pt-2 flex flex-col", children: _jsxs("div", { className: "relative flex-1", children: [_jsx(JsonEditor, { value: jsonValue, onChange: handleJsonChange, onValidate: setIsValid, height: 'calc(100vh - 300px)' }), !isValid && (_jsxs("div", { className: "absolute top-2 right-2 bg-destructive/90 text-destructive-foreground px-2 py-1 rounded text-xs flex items-center gap-1", children: [_jsx(AlertCircle, { className: "w-3 h-3" }), "Invalid JSON"] }))] }) }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [statusView, _jsxs("div", { className: "flex items-center gap-2", children: [hasChanges && (_jsx(Button, { variant: "secondary", onClick: resetChanges, disabled: isRequestLoading, children: "Reset" })), _jsx(Button, { onClick: handleSave, variant: "accent", disabled: isRequestLoading || !isValid || !hasChanges, "data-testid": "state-save-button", children: isRequestLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-3 h-3 animate-spin mr-1" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-3 h-3 mr-1" }), "Save Changes"] })) })] })] })] }));
 };

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronRight, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { Sidebar } from '@/components/sidebar/sidebar';
-import { Label } from '@/components/ui/label';
+import { Label } from '@motiadev/ui';
 import { LanguageIndicator } from '@/publicComponents/base-node/language-indicator';
 import { Subscribe } from './base-node/subscribe';
 import { Emits } from './base-node/emits';