@motiadev/workbench 0.2.1-beta.76 → 0.2.2-build.20250618141055

package/dist/index.d.ts

@@ -6,4 +6,4 @@ export { BaseHandle } from './src/publicComponents/base-handle';
 export { Position } from '@xyflow/react';
 export type { EventNodeData, ApiNodeData } from './src/views/flow/nodes/nodes.types';
 export type { ApiNodeProps, BaseNodeProps, CronNodeProps, EventNodeProps, NoopNodeProps, } from './src/publicComponents/node-props';
-export { Button } from './src/components/ui/button';
+export { Button } from '@motiadev/ui';

package/dist/index.html

@@ -6,20 +6,20 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
       rel="stylesheet"
     />
     <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.1-min.js.gz"></script>
     <script>
       window.amplitude.init('ab2408031a38aa5cb85587a27ecfc69c', {
-          autocapture: {
-            fileDownloads: false,
-            formInteractions: false,
-          }, 
-          fetchRemoteConfig: true, 
-          recording: false,
-          optOut: true
-        })
+        autocapture: {
+          fileDownloads: false,
+          formInteractions: false,
+        },
+        fetchRemoteConfig: true,
+        recording: false,
+        optOut: true,
+      })
     </script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/dist/index.js

@@ -4,4 +4,4 @@ export { NoopNode } from './src/publicComponents/noop-node';
 export { BaseNode } from './src/publicComponents/base-node';
 export { BaseHandle } from './src/publicComponents/base-handle';
 export { Position } from '@xyflow/react';
-export { Button } from './src/components/ui/button';
+export { Button } from '@motiadev/ui';

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useListFlows } from '@/hooks/use-list-flows';
-import { File, Link2, Logs, Workflow } from 'lucide-react';
+import { File, Link2, Logs, Workflow, GanttChartIcon } from 'lucide-react';
 import { Link, useLocation } from 'react-router';
 import { Sidebar, SidebarButton, SidebarGroup } from './ui/sidebar';
 import { BadgeCount } from './ui/BadgeCount';
@@ -8,5 +8,5 @@ export const AppSidebar = () => {
     const { flows } = useListFlows();
     const { pathname } = useLocation();
     const isActive = (flowId) => pathname.includes(`/flow/${flowId}`);
-    return (_jsxs(Sidebar, { children: [_jsxs(SidebarGroup, { testId: "motia-title", title: "Motia", children: [_jsx(Link, { "data-testid": "logs-link", to: "/logs", children: _jsxs(SidebarButton, { isActive: pathname === '/logs', icon: _jsx(Logs, { className: "w-4 h-4" }), children: ["Logs", pathname !== '/logs' && _jsx(BadgeCount, {})] }) }), _jsx(Link, { "data-testid": "states-link", to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) }), _jsx(Link, { "data-testid": "endpoints-link", to: "/endpoints", children: _jsx(SidebarButton, { isActive: pathname === '/endpoints', icon: _jsx(Link2, { className: "w-4 h-4" }), children: "Endpoints" }) })] }), _jsx(SidebarGroup, { testId: "flows-title", title: "Flows", children: flows.map((flow) => (_jsx(Link, { "data-testid": `flow-${flow.name}-link`, to: `/flow/${flow.id}`, children: _jsx(SidebarButton, { isActive: isActive(flow.id), icon: _jsx(Workflow, { className: "w-4 h-4" }), children: flow.name }) }, flow.id))) })] }));
+    return (_jsxs(Sidebar, { children: [_jsxs(SidebarGroup, { testId: "motia-title", title: "Motia", children: [_jsx(Link, { "data-testid": "logs-link", to: "/logs", children: _jsxs(SidebarButton, { isActive: pathname === '/logs', icon: _jsx(Logs, { className: "w-4 h-4" }), children: ["Logs", pathname !== '/logs' && _jsx(BadgeCount, {})] }) }), _jsx(Link, { "data-testid": "traces-link", to: "/traces", children: _jsx(SidebarButton, { isActive: pathname === '/traces', icon: _jsx(GanttChartIcon, { className: "w-4 h-4" }), children: "Traces" }) }), _jsx(Link, { "data-testid": "states-link", to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) }), _jsx(Link, { "data-testid": "endpoints-link", to: "/endpoints", children: _jsx(SidebarButton, { isActive: pathname === '/endpoints', icon: _jsx(Link2, { className: "w-4 h-4" }), children: "Endpoints" }) })] }), _jsx(SidebarGroup, { testId: "flows-title", title: "Flows", children: flows.map((flow) => (_jsx(Link, { "data-testid": `flow-${flow.name}-link`, to: `/flow/${flow.id}`, children: _jsx(SidebarButton, { isActive: isActive(flow.id), icon: _jsx(Workflow, { className: "w-4 h-4" }), children: flow.name }) }, flow.id))) })] }));
 };

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { Loader2, Play, X } from 'lucide-react';
-import { Button } from '../ui/button';
+import { Button } from '@motiadev/ui';
 import { Input } from '../ui/input';
 import { Textarea } from '../ui/textarea';
 import { EndpointBadge } from './endpoint-badge';
@@ -67,5 +67,5 @@ export const EndpointCall = ({ endpoint, onClose }) => {
         setExecutionTime(executionTime);
         setIsRequestLoading(false);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2 overflow-y-auto", children: [_jsxs("div", { className: "text-xs flex flex-row gap-2 items-center justify-between w-full", children: [_jsx("span", { className: "font-bold", children: "Request" }), _jsx("div", { className: "flex flex-row gap-2 items-center hover:bg-white/10 rounded-md p-1", children: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }) })] }), _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 })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description }), !!pathParams.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Path Params" }), _jsx("div", { className: "flex flex-col gap-4", children: pathParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param }), _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })] }, param))) })] })), !!endpoint.queryParams?.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-4", children: endpoint.queryParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param.name }), _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) })] }, param.name))) })] })), shouldHaveBody && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Body" }), _jsx(Textarea, { "data-testid": "endpoint-body-textarea", className: `w-full font-mono font-medium min-h-[200px] ${!isJsonValid ? 'border-red-500' : ''}`, value: body, onChange: handleBodyChange }), _jsx("span", { "data-testid": "endpoint-invalid-json-message", className: `text-xs text-red-500 ${isJsonValid ? 'invisible' : ''}`, children: "Invalid JSON" })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, "data-testid": "endpoint-play-button", disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), responseCode !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", "data-testid": "endpoint-response-container", children: [_jsxs("span", { className: "text-xs font-bold", children: [_jsx(EndpointBadge, { variant: responseCode >= 400 ? 'DELETE' : 'GET', children: responseCode }), " Execution time: ", _jsxs("span", { className: "text-muted-foreground", children: [executionTime, "ms"] })] }), isStreamed && (_jsxs("span", { className: "flex flex-row items-center font-medium text-muted-foreground text-xs", children: [_jsxs("span", { className: "ml-1 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"] })), _jsx("span", { className: "text-xs font-mono font-bold dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: JSON.stringify(responseBodyData, null, 2) })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2 overflow-y-auto", children: [_jsxs("div", { className: "text-xs flex flex-row gap-2 items-center justify-between w-full", children: [_jsx("span", { className: "font-bold", children: "Request" }), _jsx("div", { className: "flex flex-row gap-2 items-center hover:bg-white/10 rounded-md p-1", children: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }) })] }), _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 })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description }), !!pathParams.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Path Params" }), _jsx("div", { className: "flex flex-col gap-4", children: pathParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param }), _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })] }, param))) })] })), !!endpoint.queryParams?.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-4", children: endpoint.queryParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param.name }), _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) })] }, param.name))) })] })), shouldHaveBody && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Body" }), _jsx(Textarea, { "data-testid": "endpoint-body-textarea", className: `w-full font-mono font-medium min-h-[200px] ${!isJsonValid ? 'border-red-500' : ''}`, value: body, onChange: handleBodyChange }), _jsx("span", { "data-testid": "endpoint-invalid-json-message", className: `text-xs text-red-500 ${isJsonValid ? 'invisible' : ''}`, children: "Invalid JSON" })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, "data-testid": "endpoint-play-button", disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin w-4 h-4" }) : _jsx(Play, { className: "w-4 h-4" }), " Play"] }), responseCode !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", "data-testid": "endpoint-response-container", children: [_jsxs("span", { className: "text-xs font-bold", children: [_jsx(EndpointBadge, { variant: responseCode >= 400 ? 'DELETE' : 'GET', children: responseCode }), " Execution time: ", _jsxs("span", { className: "text-muted-foreground", children: [executionTime, "ms"] })] }), isStreamed && (_jsxs("span", { className: "flex flex-row items-center font-medium text-muted-foreground text-xs", children: [_jsxs("span", { className: "ml-1 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"] })), _jsx("span", { className: "text-xs font-mono font-bold dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: JSON.stringify(responseBodyData, null, 2) })] }))] }));
 };

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

@@ -11,5 +11,5 @@ export const Header = () => {
     const { pathname } = useLocation();
     const { flows } = useListFlows();
     const isActive = (flowId) => pathname.includes(`/flow/${flowId}`);
-    return (_jsxs("header", { className: "min-h-16 px-4 gap-1 flex items-center bg-header text-header-foreground border-b border-header-border", children: [_jsx(LogoIcon, { className: "h-8 w-8 mr-16" }), _jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, active: true, children: _jsxs(Link, { "data-testid": "header-logs-link", to: "/logs", className: 'flex flex-row items-center pr-2 relative', children: ["Logs", _jsx(BadgeCount, { className: "absolute top-1 right-0", dotOnly: true })] }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-states-link", to: "/states", children: "States" }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-endpoints-link", to: "/endpoints", children: "Endpoints" }) }) })] }) }), _jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { className: 'cursor-pointer', "data-testid": "header-flows-link", children: "Flows" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuSub, { children: _jsx(NavigationMenuList, { className: "flex flex-col min-w-[200px]", children: flows.map((flow) => (_jsx(NavigationMenuItem, { className: "w-full", asChild: true, children: _jsx(NavigationMenuLink, { asChild: true, active: isActive(flow.id), children: _jsxs(Link, { "data-testid": `flow-${flow.name}-link`, to: `/flow/${flow.id}`, className: 'flex flex-row gap-2 items-center', children: [_jsx(Workflow, { className: "w-4 h-4" }), " ", flow.name] }) }) }, flow.id))) }) }) })] }), _jsx(NavigationMenuIndicator, {})] }) }), _jsx("div", { className: "ml-auto", children: _jsx(ThemeToggle, {}) })] }));
+    return (_jsxs("header", { className: "min-h-16 px-4 gap-1 flex items-center bg-header text-header-foreground border-b border-header-border", children: [_jsx(LogoIcon, { className: "h-8 w-8 mr-16" }), _jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsxs(Link, { "data-testid": "header-logs-link", to: "/logs", className: 'flex flex-row items-center pr-2 relative', children: ["Logs", _jsx(BadgeCount, { className: "absolute top-1 right-0", dotOnly: true })] }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-traces-link", to: "/traces", children: "Traces" }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-states-link", to: "/states", children: "States" }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-endpoints-link", to: "/endpoints", children: "Endpoints" }) }) })] }) }), _jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { className: 'cursor-pointer', "data-testid": "header-flows-link", children: "Flows" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuSub, { children: _jsx(NavigationMenuList, { className: "flex flex-col min-w-[200px]", children: flows.map((flow) => (_jsx(NavigationMenuItem, { className: "w-full", asChild: true, children: _jsx(NavigationMenuLink, { asChild: true, active: isActive(flow.id), children: _jsxs(Link, { "data-testid": `flow-${flow.name}-link`, to: `/flow/${flow.id}`, className: 'flex flex-row gap-2 items-center', children: [_jsx(Workflow, { className: "w-4 h-4" }), " ", flow.name] }) }) }, flow.id))) }) }) })] }), _jsx(NavigationMenuIndicator, {})] }) }), _jsx("div", { className: "ml-auto", children: _jsx(ThemeToggle, {}) })] }));
 };

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLogs } from '@/stores/use-logs';
 import { ChevronDown, ChevronUp, Trash2 } from 'lucide-react';
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { Button } from '../ui/button';
+import { Button } from '@motiadev/ui';
 import { cn } from '@/lib/utils';
 import { Logs } from './logs';
 const MIN_HEIGHT = 100;

package/dist/src/components/observability/events/code/function-call.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = {
+    topLevelClassName?: string;
+    objectName?: string;
+    functionName: string;
+    args: Array<string | object | false | undefined>;
+    callsQuantity?: number;
+};
+export declare const Argument: React.FC<{
+    arg: string | object | false;
+}>;
+export declare const FunctionCall: React.FC<Props>;
+export {};

package/dist/src/components/observability/events/code/function-call.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const Argument = ({ arg }) => {
+    if (typeof arg === 'string') {
+        return _jsxs("span", { className: "font-mono text-blue-500", children: ["'", arg, "'"] });
+    }
+    else if (arg === false) {
+        return _jsx("span", { className: "font-mono text-blue-100 font-bold bg-blue-500/50 px-2 rounded-md", children: "value" });
+    }
+    const entries = Object.entries(arg);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-green-500", children: '{ ' }), entries.map(([key, value], index) => (_jsxs("span", { children: [key, ": ", _jsx(Argument, { arg: value }), index < entries.length - 1 && _jsx(_Fragment, { children: ", " })] }, key))), _jsx("span", { className: "font-mono text-green-500", children: ' }' })] }));
+};
+export const FunctionCall = ({ topLevelClassName, objectName, functionName, args, callsQuantity }) => {
+    const hasCalls = callsQuantity && callsQuantity > 1;
+    const filteredArgs = args.filter((arg) => arg !== undefined);
+    return (_jsxs("div", { children: [topLevelClassName && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-pink-500", children: topLevelClassName }), "."] })), objectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-pink-500", children: objectName }), "."] })), _jsx("span", { className: "font-mono text-pink-500", children: functionName }), _jsx("span", { className: "font-mono text-emerald-500", children: "(" }), filteredArgs.map((arg, index) => (_jsxs("span", { children: [_jsx(Argument, { arg: arg }), index < filteredArgs.length - 1 && _jsx(_Fragment, { children: ", " })] }, index))), _jsx("span", { className: "font-mono text-emerald-500", children: ")" }), hasCalls && _jsxs("span", { className: "font-mono text-muted-foreground", children: [" x", callsQuantity] })] }));
+};

package/dist/src/components/observability/events/event-icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TraceEvent as TraceEventType } from '@/types/observability';
+type Props = {
+    event: TraceEventType;
+};
+export declare const EventIcon: React.FC<Props>;
+export {};

package/dist/src/components/observability/events/event-icon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageCircle, Package, Radio, ScrollText } from 'lucide-react';
+export const EventIcon = ({ event }) => {
+    if (event.type === 'log') {
+        return _jsx(ScrollText, { className: "w-4 h-4 text-muted-foreground" });
+    }
+    else if (event.type === 'emit') {
+        return _jsx(MessageCircle, { className: "w-4 h-4 text-muted-foreground" });
+    }
+    else if (event.type === 'state') {
+        return _jsx(Package, { className: "w-4 h-4 text-muted-foreground" });
+    }
+    else if (event.type === 'stream') {
+        return _jsx(Radio, { className: "w-4 h-4 text-muted-foreground" });
+    }
+};

package/dist/src/components/observability/events/trace-emit-event.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EmitEvent } from '@/types/observability';
+export declare const TraceEmitEvent: React.FC<{
+    event: EmitEvent;
+}>;

package/dist/src/components/observability/events/trace-emit-event.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FunctionCall } from './code/function-call';
+export const TraceEmitEvent = ({ event }) => {
+    return _jsx(FunctionCall, { functionName: "emit", args: [{ topic: event.topic, data: false }] });
+};

package/dist/src/components/observability/events/trace-event.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TraceEvent as TraceEventType } from '../../../types/observability';
+export declare const TraceEvent: React.FC<{
+    event: TraceEventType;
+}>;

package/dist/src/components/observability/events/trace-event.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { TraceEmitEvent } from './trace-emit-event';
+import { TraceLogEvent } from './trace-log-event';
+import { TraceStateEvent } from './trace-state-event';
+import { TraceStreamEvent } from './trace-stream-event';
+export const TraceEvent = memo(({ event }) => {
+    if (event.type === 'log') {
+        return _jsx(TraceLogEvent, { event: event });
+    }
+    else if (event.type === 'emit') {
+        return _jsx(TraceEmitEvent, { event: event });
+    }
+    else if (event.type === 'state') {
+        return _jsx(TraceStateEvent, { event: event });
+    }
+    else if (event.type === 'stream') {
+        return _jsx(TraceStreamEvent, { event: event });
+    }
+});

package/dist/src/components/observability/events/trace-log-event.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { LogEntry } from '@/types/observability';
+export declare const TraceLogEvent: React.FC<{
+    event: LogEntry;
+}>;

package/dist/src/components/observability/events/trace-log-event.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LogLevelBadge } from '@/components/logs/log-level-badge';
+export const TraceLogEvent = ({ event }) => {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LogLevelBadge, { level: event.level }), " ", event.message] }));
+};

package/dist/src/components/observability/events/trace-state-event.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StateEvent } from '@/types/observability';
+export declare const TraceStateEvent: React.FC<{
+    event: StateEvent;
+}>;

package/dist/src/components/observability/events/trace-state-event.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FunctionCall } from './code/function-call';
+export const TraceStateEvent = ({ event }) => {
+    return (_jsx(FunctionCall, { objectName: "state", functionName: event.operation, args: [event.data.traceId, event.data.key, event.data.value ? false : undefined] }));
+};

package/dist/src/components/observability/events/trace-stream-event.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StreamEvent } from '@/types/observability';
+export declare const TraceStreamEvent: React.FC<{
+    event: StreamEvent;
+}>;

package/dist/src/components/observability/events/trace-stream-event.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FunctionCall } from './code/function-call';
+export const TraceStreamEvent = ({ event }) => {
+    return (_jsx(FunctionCall, { topLevelClassName: "streams", objectName: event.streamName, functionName: event.operation, args: [event.data.groupId, event.data.id, event.data.data ? false : undefined], callsQuantity: event.calls }));
+};

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

@@ -0,0 +1,2 @@
+import { TraceGroup } from '../../../types/observability';
+export declare const useGetEndTime: (group: TraceGroup | undefined | null) => number;

package/dist/src/components/observability/hooks/use-get-endtime.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+export const useGetEndTime = (group) => {
+    const groupEndTime = group?.endTime;
+    const [endTime, setEndTime] = useState(groupEndTime || Date.now());
+    useEffect(() => {
+        if (groupEndTime) {
+            setEndTime(groupEndTime);
+        }
+        else {
+            const interval = setInterval(() => setEndTime(Date.now()), 50);
+            return () => clearInterval(interval);
+        }
+    }, [groupEndTime]);
+    return endTime;
+};

package/dist/src/components/observability/observability-stats.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TraceGroup } from '@/types/observability';
+export declare const ObservabilityStats: React.MemoExoticComponent<({ groups }: {
+    groups: TraceGroup[];
+}) => import("react/jsx-runtime").JSX.Element>;

package/dist/src/components/observability/observability-stats.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Activity, CheckCircle, Hash, XCircle } from 'lucide-react';
+const calculateStats = (groups) => {
+    const running = groups.filter(({ status }) => status === 'running').length;
+    const completed = groups.filter(({ status }) => status === 'completed').length;
+    const failed = groups.filter(({ status }) => status === 'failed').length;
+    return { total: groups.length, running, completed, failed };
+};
+const Stat = ({ title, value, icon }) => {
+    return (_jsx(Card, { children: _jsxs(CardHeader, { className: "relative", children: [_jsx(CardDescription, { children: title }), _jsxs("div", { className: "flex flex-row gap-2 items-center", children: [icon, _jsx(CardTitle, { className: "@[250px]/card:text-3xl text-2xl font-semibold tabular-nums", children: value })] })] }) }));
+};
+export const ObservabilityStats = memo(({ groups }) => {
+    const stats = calculateStats(groups);
+    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Stat, { title: "Total Traces", value: stats.total.toLocaleString(), icon: _jsx(Hash, { className: "w-4 h-4 text-teal-500" }) }), _jsx(Stat, { title: "Running Traces", value: stats.running.toLocaleString(), icon: _jsx(Activity, { className: "w-4 h-4 text-blue-500" }) }), _jsx(Stat, { title: "Completed Traces", value: stats.completed.toLocaleString(), icon: _jsx(CheckCircle, { className: "w-4 h-4 text-green-500" }) }), _jsx(Stat, { title: "Failed Traces", value: stats.failed.toLocaleString(), icon: _jsx(XCircle, { className: "w-4 h-4 text-red-500" }) })] }));
+});

package/dist/src/components/observability/trace-item/trace-item-detail.d.ts

@@ -0,0 +1,7 @@
+import { Trace } from '@/types/observability';
+import React from 'react';
+type Props = {
+    trace: Trace;
+};
+export declare const TraceItemDetail: React.FC<Props>;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { cn, formatDuration } from '@/lib/utils';
+import { memo } from 'react';
+import { EventIcon } from '../events/event-icon';
+import { TraceEvent } from '../events/trace-event';
+export const TraceItemDetail = memo(({ trace }) => {
+    return (_jsxs(Card, { className: cn('mt-2', trace.error && 'border-red-800/80 border-solid'), children: [_jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground mb-4", children: [trace.endTime && _jsxs("span", { children: ["Duration: ", formatDuration(trace.endTime - trace.startTime)] }), _jsx("div", { className: "bg-blue-500 font-bold text-xs px-[4px] py-[2px] rounded-sm text-blue-100", children: trace.entryPoint.type }), trace.correlationId && _jsxs(Badge, { variant: "outline", children: ["Correlated: ", trace.correlationId] })] }), _jsx("div", { className: "pl-6 border-l-1 border-gray-500/40 font-mono text-xs flex flex-col gap-3", children: trace.events.map((event, index) => (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute -left-[26px] top-[8px] w-1 h-1 rounded-full bg-emerald-500 outline outline-2 outline-emerald-500/50" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(EventIcon, { event: event }), _jsxs("span", { className: "text-sm font-mono text-muted-foreground", children: ["+", Math.floor(event.timestamp - trace.startTime), "ms"] }), _jsx(TraceEvent, { event: event })] })] }, index))) })] }), trace.error && (_jsxs("div", { className: "p-4 bg-red-800/10", children: [_jsx("div", { className: "text-sm text-red-800 dark:text-red-400 font-semibold", children: trace.error.message }), _jsx("div", { className: "text-sm text-red-800 dark:text-red-400 pl-4", children: trace.error.stack })] }))] }));
+});

package/dist/src/components/observability/trace-item/trace-item.d.ts

@@ -0,0 +1,9 @@
+import { Trace, TraceGroup } from '@/types/observability';
+import React from 'react';
+type Props = {
+    trace: Trace;
+    group: TraceGroup;
+    groupEndTime: number;
+};
+export declare const TraceItem: React.FC<Props>;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import { TraceItemDetail } from './trace-item-detail';
+export const TraceItem = ({ trace, group, groupEndTime }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-row items-center hover:bg-muted/50 p-1 rounded-md cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [_jsxs("div", { className: "flex items-center min-w-[200px] w-[200px] h-[20px]", children: [_jsx(ChevronDown, { className: cn('w-[20px] h-4 mr-2 transition-transform duration-50', {
+                                    'rotate-180': isExpanded,
+                                }) }), _jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: trace.name })] }), _jsx("div", { className: "relative w-full", children: _jsx("div", { className: cn('h-[20px] rounded-[4px] cursor-pointer hover:opacity-80 transition-all duration-200', {
+                                'bg-blue-500': trace.status === 'running',
+                                'bg-green-500': trace.status === 'completed',
+                                'bg-red-500': trace.status === 'failed',
+                            }), onClick: () => setIsExpanded(!isExpanded), style: {
+                                marginLeft: `${((trace.startTime - group.startTime) / (groupEndTime - group.startTime)) * 100}%`,
+                                width: trace.endTime
+                                    ? `${((trace.endTime - trace.startTime) / (groupEndTime - group.startTime)) * 100}%`
+                                    : `${((Date.now() - trace.startTime) / (groupEndTime - group.startTime)) * 100}%`,
+                            } }) })] }), isExpanded && _jsx(TraceItemDetail, { trace: trace })] }));
+};

package/dist/src/components/observability/trace-status.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TraceGroup } from '../../types/observability';
+export declare const LoadingSpinner: React.FC<{
+    className: string;
+}>;
+export declare const TraceStatus: React.FC<{
+    status: TraceGroup['status'];
+    name: string;
+}>;
+export declare const TraceStatusBadge: React.FC<{
+    status: TraceGroup['status'];
+}>;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { CheckCircle, Clock, XCircle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+export const LoadingSpinner = ({ className }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn('animate-spin', className), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+};
+const getStatusIcon = (status) => {
+    switch (status) {
+        case 'running':
+        case 'active':
+            return _jsx(LoadingSpinner, { className: "w-4 h-4 text-blue-500" });
+        case 'completed':
+            return _jsx(CheckCircle, { className: "w-4 h-4 text-green-500" });
+        case 'failed':
+            return _jsx(XCircle, { className: "w-4 h-4 text-red-500" });
+        case 'stalled':
+            return _jsx(Clock, { className: "w-4 h-4 text-yellow-500" });
+        default:
+            return _jsx(Clock, { className: "w-4 h-4 text-gray-500" });
+    }
+};
+const statusVariants = cva('inline-flex items-center rounded-lg px-3 py-[2px] uppercase text-[10px] font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+    variants: {
+        status: {
+            running: 'dark:bg-blue-800/30 dark:text-blue-500 bg-blue-100 text-blue-700',
+            active: 'dark:bg-blue-800/30 dark:text-blue-500 bg-blue-100 text-blue-700',
+            completed: 'dark:bg-green-800/30 dark:text-green-500 bg-green-100 text-green-700',
+            failed: 'dark:bg-red-800/30 dark:text-red-500 bg-red-100 text-red-700',
+            stalled: 'dark:bg-yellow-800/30 dark:text-yellow-500 bg-yellow-100 text-yellow-700',
+            default: 'dark:bg-gray-800/30 dark:text-gray-500 bg-gray-100 text-gray-800',
+        },
+    },
+    defaultVariants: {
+        status: 'default',
+    },
+});
+export const TraceStatus = ({ status, name }) => {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [getStatusIcon(status), _jsx("span", { className: "font-medium text-sm", children: name })] }));
+};
+export const TraceStatusBadge = ({ status }) => {
+    return _jsx("div", { className: statusVariants({ status }), children: status });
+};

package/dist/src/components/observability/trace-timeline.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    groupId: string;
+};
+export declare const TraceTimeline: React.FC<Props>;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useStreamGroup, useStreamItem } from '@motiadev/stream-client-react';
+import { TraceItem } from './trace-item/trace-item';
+import { useGetEndTime } from './hooks/use-get-endtime';
+export const TraceTimeline = memo(({ groupId }) => {
+    const { data: group } = useStreamItem({
+        streamName: 'motia-trace-group',
+        groupId: 'default',
+        id: groupId,
+    });
+    const { data } = useStreamGroup({ streamName: 'motia-trace', groupId });
+    const endTime = useGetEndTime(group);
+    if (!group)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col p-2", children: [_jsxs("div", { className: "flex flex-row items-center px-2", children: [_jsx("div", { className: "flex items-center min-w-[200px] w-[200px] h-[20px]" }), _jsx("div", { className: "flex flex-1 relative", children: _jsxs("div", { className: "flex justify-between font-mono pb-2 w-full text-xs text-muted-foreground border-b border-blue-500", children: [_jsx("span", { children: "0ms" }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.25), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.5), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.75), "ms"] }), _jsxs("span", { children: [Math.floor(endTime - group.startTime), "ms"] }), _jsxs("div", { className: "absolute bottom-[-4px] w-full flex justify-between", children: [_jsx("span", { className: "w-[1px] h-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" })] })] }) })] }), _jsx("div", { className: "h-full overflow-auto p-2 space-y-2", children: data?.map((trace) => _jsx(TraceItem, { trace: trace, group: group, groupEndTime: endTime }, trace.id)) })] }));
+});

package/dist/src/components/observability/traces-groups.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TraceGroup } from '@/types/observability';
+interface Props {
+    groups: TraceGroup[];
+    selectedGroupId: string | null;
+    onGroupSelect: (group: TraceGroup) => void;
+}
+export declare const TracesGroups: React.FC<Props>;
+export {};

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { formatDistanceToNow } from 'date-fns';
+import { TraceStatus, TraceStatusBadge } from './trace-status';
+export const TracesGroups = memo(({ groups, selectedGroupId, onGroupSelect }) => {
+    const formatDuration = (duration) => {
+        if (!duration)
+            return 'N/A';
+        if (duration < 1000)
+            return `${duration}ms`;
+        return `${(duration / 1000).toFixed(1)}s`;
+    };
+    return (_jsxs("div", { className: "overflow-auto p-4 space-y-4 ", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Traces" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [groups.length, " total"] })] }), groups.length > 0 && (_jsx("div", { className: "space-y-2", children: [...groups].reverse().map((group) => (_jsx(Card, { "data-testid": `trace-${group.id}`, className: `cursor-pointer transition-colors hover:bg-muted/50 ${selectedGroupId === group.id ? 'ring-2 ring-primary' : ''}`, onClick: () => onGroupSelect(group), children: _jsxs(CardContent, { className: "p-3", children: [_jsxs("div", { className: "flex flex-row justify-between mb-2", children: [_jsx(TraceStatus, { status: group.status, name: group.name }), _jsx(TraceStatusBadge, { status: group.status })] }), _jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-semibold font-mono tracking-[1px]", children: group.id }), _jsxs("span", { children: [group.metadata.totalSteps, " steps"] })] }), _jsxs("div", { className: "flex justify-between", children: [group.endTime && _jsxs("span", { children: ["Duration: ", formatDuration(group.endTime - group.startTime)] }), _jsxs("span", { children: [formatDistanceToNow(group.startTime), " ago"] })] }), group.metadata.activeSteps > 0 && (_jsxs("div", { className: "text-blue-600", children: [group.metadata.activeSteps, " active"] }))] })] }) }, group.id))) }))] }));
+});

package/dist/src/components/ui/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('rounded-lg border bg-card text-card-foreground shadow-sm', className), ...props })));
+Card.displayName = 'Card';
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex flex-col space-y-1.5 p-4', className), ...props })));
+CardHeader.displayName = 'CardHeader';
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn('text-2xl font-semibold leading-none tracking-tight', className), ...props })));
+CardTitle.displayName = 'CardTitle';
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+CardDescription.displayName = 'CardDescription';
+const CardContent = React.forwardRef(({ className, ...props }, ref) => _jsx("div", { ref: ref, className: cn('p-6 pt-0', className), ...props }));
+CardContent.displayName = 'CardContent';
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex items-center p-6 pt-0', className), ...props })));
+CardFooter.displayName = 'CardFooter';
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/src/components/ui/navigation-menu.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+export declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
     viewport?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
-declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
-declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
-declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
-export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };
+export declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+export declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/navigation-menu.js

@@ -3,29 +3,28 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
 import { ChevronDownIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
-function NavigationMenu({ className, children, viewport = true, ...props }) {
+export function NavigationMenu({ className, children, viewport = true, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
 }
-function NavigationMenuList({ className, ...props }) {
+export function NavigationMenuList({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn('group flex flex-1 list-none items-center justify-center gap-1', className), ...props }));
 }
-function NavigationMenuItem({ className, ...props }) {
+export function NavigationMenuItem({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn('relative', className), ...props }));
 }
-const navigationMenuTriggerStyle = cva('group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1');
-function NavigationMenuTrigger({ className, children, ...props }) {
+export const navigationMenuTriggerStyle = cva('group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1');
+export function NavigationMenuTrigger({ className, children, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(ChevronDownIcon, { className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
 }
-function NavigationMenuContent({ className, ...props }) {
+export function NavigationMenuContent({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto', 'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none', className), ...props }));
 }
-function NavigationMenuViewport({ className, ...props }) {
+export function NavigationMenuViewport({ className, ...props }) {
     return (_jsx("div", { className: cn('absolute top-full left-0 isolate z-50 flex justify-center'), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn('origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]', className), ...props }) }));
 }
-function NavigationMenuLink({ className, ...props }) {
+export function NavigationMenuLink({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
-function NavigationMenuIndicator({ className, ...props }) {
+export function NavigationMenuIndicator({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', className), ...props, children: _jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" }) }));
 }
-export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };