@motiadev/workbench 0.5.11-beta.120-742949 → 0.5.11-beta.120-433270

package/dist/src/App.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CollapsiblePanel, CollapsiblePanelGroup, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CollapsiblePanel, CollapsiblePanelGroup, Panel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
 import { ReactFlowProvider } from '@xyflow/react';
 import { analytics } from '@/lib/analytics';
 import { File, GanttChart, Link2, LogsIcon } from 'lucide-react';
-import { useCallback, useMemo } from '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';
@@ -22,6 +22,7 @@ export const App = () => {
     const tab = useTabsStore((state) => state.tab);
     const setTopTab = useTabsStore((state) => state.setTopTab);
     const setBottomTab = useTabsStore((state) => state.setBottomTab);
+    const [viewMode, setViewMode] = useState('system');
     const tabChangeCallbacks = useMemo(() => ({
         [TabLocation.TOP]: setTopTab,
         [TabLocation.BOTTOM]: setBottomTab,
@@ -30,5 +31,26 @@ export const App = () => {
         analytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
         tabChangeCallbacks[location](newTab);
     }, [tabChangeCallbacks, tab]);
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        const viewMode = url.searchParams.get('view-mode');
+        if (viewMode) {
+            setViewMode(viewMode);
+        }
+    }, [setViewMode]);
+    if (viewMode === 'project') {
+        return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen ", children: [_jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsx(Panel, { tabs: [
+                            {
+                                label: 'Flow',
+                                labelComponent: _jsx(FlowTabMenuItem, {}),
+                                content: (_jsx(ReactFlowProvider, { children: _jsx("div", { className: "h-[calc(100vh-100px)] w-full", children: _jsx(FlowPage, {}) }) })),
+                            },
+                            {
+                                label: 'Endpoint',
+                                labelComponent: (_jsxs(_Fragment, { children: [_jsx(Link2, {}), "Endpoint"] })),
+                                content: _jsx(EndpointsPage, {}),
+                            },
+                        ] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+    }
     return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", "data-testid": "flows-link", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", "data-testid": "endpoints-link", className: "cursor-pointer", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", "data-testid": "traces-link", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
 };

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

@@ -6,6 +6,7 @@ type Props = {
     endpoint: ApiEndpoint;
     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

@@ -6,7 +6,7 @@ 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 }) => {
+export const EndpointBodyPanel = ({ endpoint, onChange, onValidate, panelName }) => {
     const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
     const { body, setBody } = useJsonSchemaToJson(endpoint.bodySchema);
     const handleBodyChange = (body) => {
@@ -16,5 +16,5 @@ export const EndpointBodyPanel = ({ endpoint, onChange, onValidate }) => {
     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, style: { backgroundColor: 'transparent' } })) }));
+    return (_jsx(Panel, { title: "Body", size: "sm", contentClassName: "p-0", "data-testid": `endpoint-body-panel__${panelName}`, children: onChange ? (_jsx(JsonEditor, { value: body, schema: endpoint.bodySchema, onChange: handleBodyChange, onValidate: onValidate })) : (_jsx(ReactJson, { src: convertJsonSchemaToJson(endpoint.bodySchema), theme: "default", enableClipboard: false, style: { backgroundColor: 'transparent' } })) }));
 };

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

@@ -53,5 +53,5 @@ export const EndpointCall = ({ endpoint }) => {
         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, 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 })] }));
+    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, 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.js

@@ -4,7 +4,7 @@ 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]) => ({
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(EndpointPathParamsPanel, { endpoint: endpoint }), _jsx(EndpointQueryParamsPanel, { endpoint: endpoint }), _jsx(EndpointBodyPanel, { endpoint: endpoint, panelName: "details" }), _jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
                     responseCode: status,
                     bodySchema: schema,
                 })) })] }));

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

@@ -2,11 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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);
     const setTheme = useThemeStore((state) => state.setTheme);
     const toggleTheme = () => {
         setTheme(theme === 'light' ? 'dark' : 'light');
     };
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        const colorScheme = url.searchParams.get('color-scheme');
+        if (colorScheme) {
+            setTheme(colorScheme);
+        }
+    }, [setTheme]);
     return (_jsxs("button", { onClick: toggleTheme, className: "relative flex items-center cursor-pointer w-16 h-8 border bg-muted-foreground/10 rounded-full p-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "aria-label": `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`, children: [_jsx("div", { className: cn('absolute w-6 h-6 bg-background border border-border rounded-full shadow-sm transition-transform duration-200 ease-in-out', theme === 'dark' ? 'translate-x-8' : 'translate-x-0') }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10", children: _jsx(Sun, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'light' ? 'text-foreground' : 'text-muted-foreground') }) }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10 ml-2", children: _jsx(Moon, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'dark' ? 'text-foreground' : 'text-muted-foreground') }) })] }));
 };

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 {};

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

@@ -3,15 +3,17 @@ interface TabsState {
     setTopTab: (tab: string) => void;
     setBottomTab: (tab: string) => void;
 }
-export declare const useTabsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<TabsState>, "persist"> & {
+export declare const useTabsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<TabsState>, "setState" | "persist"> & {
+    setState(partial: TabsState | Partial<TabsState> | ((state: TabsState) => TabsState | Partial<TabsState>), replace?: false | undefined): unknown;
+    setState(state: TabsState | ((state: TabsState) => TabsState), replace: true): unknown;
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState, unknown>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: TabsState) => void) => () => void;
         onFinishHydration: (fn: (state: TabsState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState, unknown>>;
     };
 }>;
 export {};

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

@@ -1,17 +1,18 @@
-type Theme = 'dark' | 'light' | 'system';
+export type Theme = 'dark' | 'light' | 'system';
 export type ThemeState = {
     theme: Theme;
     setTheme: (theme: Theme) => void;
 };
-export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeState>, "persist"> & {
+export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeState>, "setState" | "persist"> & {
+    setState(partial: ThemeState | Partial<ThemeState> | ((state: ThemeState) => ThemeState | Partial<ThemeState>), replace?: false | undefined): unknown;
+    setState(state: ThemeState | ((state: ThemeState) => ThemeState), replace: true): unknown;
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown, unknown>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: ThemeState) => void) => () => void;
         onFinishHydration: (fn: (state: ThemeState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown, unknown>>;
     };
 }>;
-export {};