@motiadev/workbench 0.2.1-beta.55 → 0.2.1-beta.57

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

@@ -4,11 +4,17 @@ import { File, Link2, Logs, Workflow } from 'lucide-react';
 import { Link, useLocation } from 'react-router';
 import { Sidebar, SidebarButton, SidebarGroup } from './ui/sidebar';
 import { Badge } from './ui/badge';
-import { useLogs } from '../stores/use-logs';
+import { useLogs } from '@/stores/use-logs';
+const BadgeCount = () => {
+    const unreadLogsCount = useLogs((state) => state.unreadLogsCount);
+    if (!unreadLogsCount) {
+        return null;
+    }
+    return _jsx(Badge, { variant: "red-rounded", children: unreadLogsCount });
+};
 export const AppSidebar = () => {
     const { flows } = useListFlows();
     const { pathname } = useLocation();
     const isActive = (flowId) => pathname.includes(`/flow/${flowId}`);
-    const unreadLogsCount = useLogs((state) => state.unreadLogsCount);
-    return (_jsxs(Sidebar, { children: [_jsxs(SidebarGroup, { title: "Motia", children: [_jsx(Link, { to: "/logs", children: _jsxs(SidebarButton, { isActive: pathname === '/logs', icon: _jsx(Logs, { className: "w-4 h-4" }), children: ["Logs", pathname !== '/logs' && unreadLogsCount > 0 && _jsx(Badge, { variant: "red-rounded", children: unreadLogsCount })] }) }), _jsx(Link, { to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) }), _jsx(Link, { to: "/endpoints", children: _jsx(SidebarButton, { isActive: pathname === '/endpoints', icon: _jsx(Link2, { className: "w-4 h-4" }), children: "Endpoints" }) })] }), _jsx(SidebarGroup, { title: "Flows", children: flows.map((flow) => (_jsx(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, { title: "Motia", children: [_jsx(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, { to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) }), _jsx(Link, { to: "/endpoints", children: _jsx(SidebarButton, { isActive: pathname === '/endpoints', icon: _jsx(Link2, { className: "w-4 h-4" }), children: "Endpoints" }) })] }), _jsx(SidebarGroup, { title: "Flows", children: flows.map((flow) => (_jsx(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

@@ -53,5 +53,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, { className: "w-full font-mono font-medium min-h-[200px]", value: body, onChange: (e) => setBody(e.target.value) })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, 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", 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 bg-black/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, { className: "w-full font-mono font-medium min-h-[200px]", value: body, onChange: (e) => setBody(e.target.value) })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, 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", 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/endpoints/response-body.js

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

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

@@ -3,5 +3,5 @@ import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
 import { ResponseBody } from './response-body';
 export const SelectedEndpoint = ({ endpoint }) => {
     const { body: requestBody } = useJsonSchemaToJson(endpoint.bodySchema);
-    return (_jsxs(_Fragment, { children: [endpoint.queryParams && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-2 flex-1 p-2 rounded-lg bg-muted table", children: endpoint.queryParams.map((param) => (_jsxs("span", { className: "text-xs table-row", children: [_jsx("span", { className: "font-bold table-cell", children: param.name }), _jsx("span", { className: "text-xs table-cell", children: param.description })] }, param.name))) })] })), requestBody && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Request Body" }), _jsx("span", { className: "text-xs font-mono bg-black/50 p-2 rounded-lg whitespace-pre-wrap", children: requestBody })] })), endpoint.responseSchema && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Response" }), Object.entries(endpoint.responseSchema).map(([status, schema]) => (_jsx(ResponseBody, { status: status, body: schema }, status)))] }))] }));
+    return (_jsxs(_Fragment, { children: [endpoint.queryParams && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-2 flex-1 p-2 rounded-lg bg-muted table", children: endpoint.queryParams.map((param) => (_jsxs("span", { className: "text-xs table-row", children: [_jsx("span", { className: "font-bold table-cell", children: param.name }), _jsx("span", { className: "text-xs table-cell", children: param.description })] }, param.name))) })] })), requestBody && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Request Body" }), _jsx("span", { className: "text-xs font-mono dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: requestBody })] })), endpoint.responseSchema && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Response" }), Object.entries(endpoint.responseSchema).map(([status, schema]) => (_jsx(ResponseBody, { status: status, body: schema }, status)))] }))] }));
 };

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLogs } from '@/stores/use-logs';
-import { motion, AnimatePresence } from 'framer-motion';
 import { ChevronDown, ChevronUp, Trash2 } from 'lucide-react';
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { Button } from '../ui/button';
@@ -8,13 +7,20 @@ import { cn } from '@/lib/utils';
 import { Logs } from './logs';
 const MIN_HEIGHT = 100;
 const DEFAULT_HEIGHT = 200;
+const ClearLogsButton = () => {
+    const hasLog = useLogs((state) => state.logs.length > 0);
+    const resetLogs = useLogs((state) => state.resetLogs);
+    if (!hasLog) {
+        return null;
+    }
+    return (_jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash2, { className: "w-4 h-4" }), "Clear logs"] }));
+};
 export const LogConsole = () => {
     const [isExpanded, setIsExpanded] = useState(false);
     const [height, setHeight] = useState(DEFAULT_HEIGHT);
-    const logs = useLogs((state) => state.logs);
-    const resetLogs = useLogs((state) => state.resetLogs);
     const dragRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
+    const contentRef = useRef(null);
     const toggleExpand = () => setIsExpanded(!isExpanded);
     const handleMouseDown = useCallback((e) => {
         e.preventDefault();
@@ -41,5 +47,19 @@ export const LogConsole = () => {
             document.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isDragging]);
-    return (_jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-background/80 border border-solid border-border m-4 rounded-lg", children: [_jsx("div", { ref: dragRef, onMouseDown: handleMouseDown, className: cn('absolute -top-1 left-0 right-0 h-1 cursor-ns-resize hover:bg-background/40', isDragging && 'bg-background/40') }), _jsxs("div", { className: "text-white/50 flex justify-between w-full items-center p-4 gap-2", children: [_jsx("label", { className: "w-full text-left justify-start h-full text-md uppercase", children: "Logs" }), logs.length > 0 && (_jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash2, { className: "w-4 h-4" }), "Clear logs"] })), _jsx(Button, { variant: "outline", onClick: toggleExpand, children: isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronUp, { className: "w-4 h-4" }) })] }), _jsx(AnimatePresence, { children: isExpanded && (_jsx(motion.div, { initial: { height: 0 }, animate: { height }, exit: { height: 0 }, transition: { duration: 0.2 }, className: "overflow-hidden", children: _jsx(Logs, {}) }, "log-content")) })] }));
+    useEffect(() => {
+        if (contentRef.current) {
+            if (isExpanded) {
+                contentRef.current.style.height = `${height}px`;
+            }
+            else {
+                contentRef.current.style.height = '0px';
+            }
+        }
+    }, [isExpanded, height]);
+    return (_jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-background/80 border border-solid border-border m-4 rounded-lg", children: [_jsx("div", { ref: dragRef, onMouseDown: handleMouseDown, className: cn('absolute -top-1 left-0 right-0 h-1 cursor-ns-resize hover:bg-background/40', isDragging && 'bg-background/40') }), _jsxs("div", { className: "text-muted-foreground flex justify-between w-full items-center p-4 gap-2", children: [_jsx("label", { className: "w-full text-left justify-start h-full text-md uppercase", children: "Logs" }), _jsx(ClearLogsButton, {}), _jsx(Button, { variant: "outline", onClick: toggleExpand, children: isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronUp, { className: "w-4 h-4" }) })] }), _jsx("div", { ref: contentRef, style: {
+                    overflow: 'hidden',
+                    transition: 'height 0.2s ease-out',
+                    height: isExpanded ? `${height}px` : '0px',
+                }, children: _jsx(Logs, {}) })] }));
 };

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { cn } from '../../lib/utils';
 const Value = ({ value }) => {
     const displayValue = typeof value === 'string' ? value : JSON.stringify(value);
-    return _jsx("div", { className: "text-gray-400 text-md", children: displayValue });
+    return _jsx("div", { className: "dark:text-gray-400 text-md", children: displayValue });
 };
 const LogValue = ({ value }) => {
     if (React.isValidElement(value)) {
@@ -16,5 +16,5 @@ const LogValue = ({ value }) => {
     return _jsx(Value, { value: value });
 };
 export const LogField = ({ label, value, className }) => {
-    return (_jsx("div", { className: cn('flex row text-white p-2', className), children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-md font-semibold", children: label }), _jsx("span", { className: "", children: value ? _jsx(LogValue, { value: value }) : _jsx(Value, { value: value }) })] }) }));
+    return (_jsx("div", { className: cn('flex row text-foreground p-2', className), children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-md font-semibold", children: label }), _jsx("span", { className: "", children: value ? _jsx(LogValue, { value: value }) : _jsx(Value, { value: value }) })] }) }));
 };

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

@@ -14,5 +14,5 @@ export const Logs = () => {
     const handleLogClick = (log) => {
         setSelectedLog(log);
     };
-    return (_jsxs("div", { className: "overflow-y-auto h-full text-bold p-4", children: [_jsx(LogDetail, { log: selectedLog, onClose: () => setSelectedLog(undefined) }), _jsx(Table, { children: _jsx(TableBody, { className: "text-md font-mono", children: logs.map((log, index) => (_jsxs(TableRow, { className: "cursor-pointer even:bg-muted/50 border-0", onClick: () => handleLogClick(log), children: [_jsxs(TableCell, { className: "whitespace-nowrap flex items-center gap-2", children: [_jsx(LogLevelDot, { level: log.level }), timestamp(log.time)] }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono cursor-pointer hover:text-primary text-muted-foreground text-xs font-mono", children: log.traceId }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono", children: log.step }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }));
+    return (_jsxs("div", { className: "overflow-y-auto h-full text-bold p-4", children: [_jsx(LogDetail, { log: selectedLog, onClose: () => setSelectedLog(undefined) }), _jsx(Table, { children: _jsx(TableBody, { className: "text-md font-mono", children: logs.map((log, index) => (_jsxs(TableRow, { className: "cursor-pointer even:bg-muted/50 border-0", onClick: () => handleLogClick(log), children: [_jsxs(TableCell, { className: "whitespace-nowrap flex items-center gap-2", children: [_jsx(LogLevelDot, { level: log.level }), timestamp(log.time)] }), _jsx(TableCell, { className: "whitespace-nowrap text-md cursor-pointer hover:text-primary text-muted-foreground text-xs font-mono", children: log.traceId }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono", children: log.step }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }));
 };

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

@@ -3,13 +3,13 @@ import { cva } from 'class-variance-authority';
 import { SquareMinus, SquarePlus } from 'lucide-react';
 import React, { useState } from 'react';
 import { cn } from '../../lib/utils';
-const valueVariants = cva('text-white/60 text-sm py-2', {
+const valueVariants = cva('text-muted-foreground text-sm py-2', {
     variants: {
         variant: {
             boolean: 'text-sky-400',
             number: 'text-teal-400',
-            undefined: 'text-white/60',
-            string: 'text-white/60',
+            undefined: 'text-muted-foreground',
+            string: 'text-muted-foreground',
             object: 'text-gray-800',
         },
     },
@@ -43,9 +43,9 @@ export const StateValue = ({ value, label, isRoot = false }) => {
     const [openBracket, closeBracket] = isRoot ? [] : isArray ? ['[', ']'] : ['{', '}'];
     if (typeof value === 'object' && !!value) {
         const valueObject = value;
-        return (_jsxs("div", { className: "flex flex-col gap-2", children: [(label || openBracket) && (_jsxs("div", { className: "flex gap-1 items-center text-md font-semibold hover:bg-gray-800 rounded-md py-2", onClick: toggle, children: [isOpen ? (_jsx(SquareMinus, { className: "w-4 h-4 text-white/60" })) : (_jsx(SquarePlus, { className: "w-4 h-4 text-white/60" })), label, ' ', !isRoot && (_jsxs("span", { className: "text-white/60 text-sm", children: [openBracket, !isOpen && ` ... ${closeBracket}`] }))] })), isOpen &&
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [(label || openBracket) && (_jsxs("div", { className: "flex gap-1 items-center text-md font-semibold hover:bg-gray-800 rounded-md py-2", onClick: toggle, children: [isOpen ? (_jsx(SquareMinus, { className: "w-4 h-4 text-muted-foreground" })) : (_jsx(SquarePlus, { className: "w-4 h-4 text-muted-foreground" })), label, ' ', !isRoot && (_jsxs("span", { className: "text-muted-foreground text-sm", children: [openBracket, !isOpen && ` ... ${closeBracket}`] }))] })), isOpen &&
                     !!valueObject &&
-                    Object.keys(valueObject).map((key) => (_jsx("div", { className: cn('flex flex-col gap-2', !isRoot && 'ml-4'), children: _jsx("span", { className: "text-md", children: _jsx(StateValue, { label: isArray ? undefined : key, value: valueObject[key] }) }) }, key))), !isRoot && isOpen && _jsx("span", { className: "text-white/60 text-sm", children: closeBracket })] }));
+                    Object.keys(valueObject).map((key) => (_jsx("div", { className: cn('flex flex-col gap-2', !isRoot && 'ml-4'), children: _jsx("span", { className: "text-md", children: _jsx(StateValue, { label: isArray ? undefined : key, value: valueObject[key] }) }) }, key))), !isRoot && isOpen && _jsx("span", { className: "text-muted-foreground text-sm", children: closeBracket })] }));
     }
     return _jsx(Value, { value: undefined, variant: "object" });
 };

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
-const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+const buttonVariants = cva('inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+function DropdownMenu({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

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

@@ -3,13 +3,14 @@ import { useState } from 'react';
 import { cn } from '@/lib/utils';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { Button } from './button';
+import { ThemeToggle } from './theme-toggle';
 export const Sidebar = ({ children }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
-    return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-zinc-800 border-solid overflow-hidden', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
+    return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-sidebar-border bg-sidebar text-sidebar-foreground border-solid overflow-hidden', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-4 py-3", children: [!isCollapsed && _jsx(ThemeToggle, {}), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) })] }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
 };
 export const SidebarGroup = ({ children, title }) => {
     return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-xs font-bold text-muted-foreground px-4 py-2 uppercase", children: title }), children] }));
 };
 export const SidebarButton = ({ children, isActive, icon }) => {
-    return (_jsxs("div", { className: cn('flex text-sm font-medium items-center gap-2 px-4 py-3 ', isActive && 'bg-muted'), children: [_jsx("div", { className: "text-muted-foreground", children: icon }), children] }));
+    return (_jsxs("div", { className: cn('flex text-sm font-medium items-center gap-2 px-4 py-3 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors cursor-pointer', isActive && 'bg-sidebar-accent text-sidebar-accent-foreground'), children: [_jsx("div", { className: "text-sidebar-foreground/70", children: icon }), children] }));
 };

package/dist/src/components/ui/theme-toggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThemeToggle: React.FC;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '@/hooks/use-theme';
+import { cn } from '@/lib/utils';
+export const ThemeToggle = () => {
+    const { theme, setTheme } = useTheme();
+    const toggleTheme = () => {
+        setTheme(theme === 'light' ? 'dark' : 'light');
+    };
+    return (_jsxs("button", { onClick: toggleTheme, className: "relative flex items-center cursor-pointer w-16 h-8 bg-muted 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/hooks/use-theme.d.ts

@@ -0,0 +1,6 @@
+type Theme = 'dark' | 'light' | 'system';
+export declare const useTheme: () => {
+    theme: Theme;
+    setTheme: (newTheme: Theme) => void;
+};
+export {};

package/dist/src/hooks/use-theme.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+const storageKey = 'motia-workbench-theme';
+const defaultTheme = localStorage.getItem(storageKey) || 'system';
+const updateTheme = (theme) => {
+    const root = window.document.body;
+    root.classList.remove('light', 'dark');
+    if (theme === 'system') {
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        root.classList.add(systemTheme);
+        return;
+    }
+    root.classList.add(theme);
+};
+export const useTheme = () => {
+    const [theme, _setTheme] = useState(defaultTheme);
+    useEffect(() => {
+        updateTheme(defaultTheme);
+    }, []);
+    const setTheme = useCallback((newTheme) => {
+        localStorage.setItem(storageKey, newTheme);
+        _setTheme(newTheme);
+        updateTheme(newTheme);
+    }, []);
+    return {
+        theme,
+        setTheme,
+    };
+};

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

@@ -3,5 +3,5 @@ import { Webhook } from 'lucide-react';
 import { BaseNode } from './base-node';
 import { DetailItem, NodeDetails } from './node-details';
 export const ApiNode = ({ data, children }) => {
-    return (_jsxs(BaseNode, { variant: "api", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.description && _jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: [_jsx(Webhook, { className: "w-3 h-3 text-muted-foreground/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), _jsx(NodeDetails, { type: "api", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Webhook URL", children: _jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] }) }) })] }));
+    return (_jsxs(BaseNode, { variant: "api", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.description && _jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: [_jsx(Webhook, { className: "w-3 h-3 text-muted-foreground/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), _jsx(NodeDetails, { type: "api", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Webhook URL", children: _jsxs("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: [_jsx(Webhook, { className: "w-3 h-3 text-muted-foreground/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] }) }) })] }));
 };

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

@@ -16,7 +16,7 @@ const baseDot = cva('w-[6px] h-[6px] rounded-full', {
     },
 });
 const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
-const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-white flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));
+const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-foreground flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));
 export const BaseNode = (props) => {
     const { title, variant, children, disableSourceHandle, disableTargetHandle, language } = props;
     return (_jsx("div", { className: "p-[1px] rounded-lg max-w-[350px] ", children: _jsx("div", { className: "rounded-lg bg-background p-4 border border-muted border-solid", style: {

package/dist/src/publicComponents/components/header-bar.js

@@ -12,4 +12,4 @@ const baseDot = cva('w-[6px] h-[6px] rounded-full', {
     },
 });
 const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant })) }));
-export const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-white flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));
+export const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-foreground flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));

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

@@ -3,5 +3,5 @@ import { BaseNode } from './base-node';
 import { Clock } from 'lucide-react';
 import { NodeDetails, DetailItem } from './node-details';
 export const CronNode = ({ data }) => {
-    return (_jsxs(BaseNode, { variant: "cron", title: data.name, language: data.language, headerChildren: _jsx(Clock, { className: "w-4 h-4 text-purple-400" }), disableTargetHandle: !data.virtualSubscribes?.length, disableSourceHandle: !data.virtualEmits?.length && !data.emits?.length, children: [_jsx("div", { className: "text-sm text-white/70", children: data.description }), _jsxs("div", { className: "text-xs text-white/50 flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }), _jsx(NodeDetails, { type: "cron", name: data.name, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Cron Expression", children: _jsx("div", { className: "flex gap-1 items-center text-xs text-white/60", children: _jsxs("div", { className: "text-xs text-white/50 flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }) }) }) })] }));
+    return (_jsxs(BaseNode, { variant: "cron", title: data.name, language: data.language, headerChildren: _jsx(Clock, { className: "w-4 h-4 text-purple-400" }), disableTargetHandle: !data.virtualSubscribes?.length, disableSourceHandle: !data.virtualEmits?.length && !data.emits?.length, children: [_jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), _jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }), _jsx(NodeDetails, { type: "cron", name: data.name, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Cron Expression", children: _jsx("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: _jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", data.cronExpression] }) }) }) })] }));
 };

package/dist/src/publicComponents/emits.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Send } from 'lucide-react';
 const toTopic = (emit) => typeof emit === 'string' ? emit : emit.topic;
 export const Emits = ({ emits }) => {
-    return (_jsx(_Fragment, { children: emits.map((emit) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-white/60", "data-testid": `emits__${toTopic(emit)}`, children: [_jsx(Send, { className: "w-4 h-4 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: toTopic(emit) })] }, toTopic(emit)))) }));
+    return (_jsx(_Fragment, { children: emits.map((emit) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-muted-foreground", "data-testid": `emits__${toTopic(emit)}`, children: [_jsx(Send, { className: "w-4 h-4 text-muted-foreground/60" }), _jsx("div", { className: "font-mono tracking-wider", children: toTopic(emit) })] }, toTopic(emit)))) }));
 };

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

@@ -11,9 +11,9 @@ import { colorMap } from './colorMap';
 import { HeaderBar } from './components/header-bar';
 export const DetailItem = (props) => {
     const { label, children } = props;
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { className: "text-white", children: label }), children] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { className: "text-foreground", children: label }), children] }));
 };
 export const NodeDetails = (props) => {
     const { name, type, subscribes, emits, description, language, children } = props;
-    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx("div", { className: "flex justify-end gap-2", children: _jsx("div", { className: "border border-solid border-white/10 p-1 rounded-md cursor-pointer", children: _jsx(ChevronRight, { className: "w-4 h-4" }) }) }) }), _jsxs(DialogContent, { className: "border border-solid", style: { borderColor: colorMap[type] }, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: _jsx(HeaderBar, { variant: type, text: name }) }) }), _jsx(DialogDescription, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [description && (_jsx(DetailItem, { label: "Description", children: _jsx("span", { className: "text-sm text-white/60", children: description }) })), _jsx(DetailItem, { label: "Language", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LanguageIndicator, { language: language }), _jsx("span", { className: "capitalize", children: language })] }) }), subscribes && (_jsx(DetailItem, { label: "Subscribes", children: _jsx(Subscribe, { subscribes: subscribes }) })), emits && (_jsx(DetailItem, { label: "Emits", children: _jsx(Emits, { emits: emits }) })), children] }) })] })] }));
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx("div", { className: "flex justify-end gap-2", children: _jsx("div", { className: "border border-solid border-border/50 p-1 rounded-md cursor-pointer", children: _jsx(ChevronRight, { className: "w-4 h-4" }) }) }) }), _jsxs(DialogContent, { className: "border border-solid", style: { borderColor: colorMap[type] }, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: _jsx(HeaderBar, { variant: type, text: name }) }) }), _jsx(DialogDescription, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [description && (_jsx(DetailItem, { label: "Description", children: _jsx("span", { className: "text-sm text-muted-foreground", children: description }) })), _jsx(DetailItem, { label: "Language", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LanguageIndicator, { language: language }), _jsx("span", { className: "capitalize", children: language })] }) }), subscribes && (_jsx(DetailItem, { label: "Subscribes", children: _jsx(Subscribe, { subscribes: subscribes }) })), emits && (_jsx(DetailItem, { label: "Emits", children: _jsx(Emits, { emits: emits }) })), children] }) })] })] }));
 };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseNode } from './base-node';
 export const NoopNode = ({ data, children }) => {
-    return (_jsxs(BaseNode, { variant: "noop", title: data.name, disableSourceHandle: !data.virtualEmits.length, disableTargetHandle: !data.subscribes?.length, children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-white/60", children: data.description }), children] }));
+    return (_jsxs(BaseNode, { variant: "noop", title: data.name, disableSourceHandle: !data.virtualEmits.length, disableTargetHandle: !data.subscribes?.length, children: [data.description && _jsx("div", { className: "text-sm max-w-[300px] text-muted-foreground", children: data.description }), children] }));
 };

package/dist/src/publicComponents/subscribe.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Eye } from 'lucide-react';
 export const Subscribe = ({ subscribes }) => {
-    return (_jsx(_Fragment, { children: subscribes.map((subscribe) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-white/60", "data-testid": `subscribes__${subscribe}`, children: [_jsx(Eye, { className: "w-4 h-4 text-white/40" }), _jsx("div", { className: "font-mono tracking-wider", children: subscribe })] }, subscribe))) }));
+    return (_jsx(_Fragment, { children: subscribes.map((subscribe) => (_jsxs("div", { className: "flex gap-2 items-center text-xs text-muted-foreground", "data-testid": `subscribes__${subscribe}`, children: [_jsx(Eye, { className: "w-4 h-4 text-muted-foreground/60" }), _jsx("div", { className: "font-mono tracking-wider", children: subscribe })] }, subscribe))) }));
 };

package/dist/src/route-wrapper.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AppSidebar } from './components/app-sidebar';
 import { ReactFlowProvider } from '@xyflow/react';
-export const RouteWrapper = ({ children }) => (_jsx("div", { className: "flex flex-row", children: _jsxs(ReactFlowProvider, { children: [_jsx(AppSidebar, {}), _jsx("div", { className: "flex-1", children: children })] }) }));
+export const RouteWrapper = ({ children }) => (_jsx("div", { className: "flex flex-row bg-background text-foreground", children: _jsxs(ReactFlowProvider, { children: [_jsx(AppSidebar, {}), _jsx("div", { className: "flex-1", children: children })] }) }));

package/dist/src/routes/flow.js

@@ -18,5 +18,5 @@ export const Flow = () => {
     useEffect(fetchFlow, [fetchFlow]);
     if (!flow)
         return null;
-    return (_jsx("div", { className: "w-full h-screen", children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
+    return (_jsx("div", { className: "w-full h-screen bg-background", children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
 };

package/dist/src/routes/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../components/ui/button';
 export const Index = () => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center w-full h-screen gap-10 bg-gradient-to-r from-black to-gray-900", children: [_jsx("h1", { className: "text-5xl font-extrabold max-w-[600px] text-center", children: "Code-first framework for intelligent workflows" }), _jsx("div", { className: "max-w-[600px] text-center text-xl font-medium text-gray-400", children: "Write in any language. Automate anything. From AI agents to backend automation, Motia runs event-driven workflows with zero overhead." }), _jsx("div", { className: "p-[1px] min-w-[600px] rounded-lg shadow-[0px_7px_14px_0px_rgba(7,0,23,0.98),0px_26px_26px_0px_rgba(7,0,23,0.85),0px_59px_35px_0px_rgba(7,0,23,0.5),0px_105px_42px_0px_rgba(7,0,23,0.15),0px_164px_46px_0px_rgba(7,0,23,0.02)]", children: _jsx("div", { className: "rounded-lg bg-black p-8 font-semibold text-xl min-h-[100px] flex items-center", children: _jsxs("div", { className: "flex items-center gap-2 font-mono", children: [_jsx("span", { className: "text-[rgb(0,117,255)]", children: "$" }), _jsx("span", { className: "text-white", children: "npx motia generate step" })] }) }) }), _jsxs("div", { className: "flex flex-col gap-8 items-center", children: [_jsx("span", { className: "text-gray-400 text-xl", children: "or" }), _jsx("a", { href: "https://motia.dev/docs", target: "_blank", children: _jsx(Button, { size: "lg", className: "text-xl py-6 px-8", children: "Read developer docs" }) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center w-full h-screen gap-10 bg-gradient-to-r from-background via-background to-muted", children: [_jsx("h1", { className: "text-5xl font-extrabold max-w-[600px] text-center text-foreground", children: "Code-first framework for intelligent workflows" }), _jsx("div", { className: "max-w-[600px] text-center text-xl font-medium text-muted-foreground", children: "Write in any language. Automate anything. From AI agents to backend automation, Motia runs event-driven workflows with zero overhead." }), _jsx("div", { className: "p-[1px] min-w-[600px] rounded-lg shadow-lg border border-border", children: _jsx("div", { className: "rounded-lg bg-card p-8 font-semibold text-xl min-h-[100px] flex items-center", children: _jsxs("div", { className: "flex items-center gap-2 font-mono", children: [_jsx("span", { className: "text-primary", children: "$" }), _jsx("span", { className: "text-card-foreground", children: "npx motia generate step" })] }) }) }), _jsxs("div", { className: "flex flex-col gap-8 items-center", children: [_jsx("span", { className: "text-muted-foreground text-xl", children: "or" }), _jsx("a", { href: "https://motia.dev/docs", target: "_blank", children: _jsx(Button, { size: "lg", className: "text-xl py-6 px-8", children: "Read developer docs" }) })] })] }));
 };

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

@@ -3,10 +3,10 @@ import { Logs } from '../components/logs/logs';
 import { useLogs } from '../stores/use-logs';
 import { useEffect } from 'react';
 export const LogsPage = () => {
-    const { setUnreadLogsCount } = useLogs((state) => state);
+    const setUnreadLogsCount = useLogs((state) => state.setUnreadLogsCount);
     useEffect(() => {
         setUnreadLogsCount(0);
         return () => setUnreadLogsCount(0);
     }, [setUnreadLogsCount]);
-    return (_jsxs("div", { className: "w-full h-screen overflow-hidden", children: [_jsxs("header", { className: "p-4 pb-0 border-b border-zinc-800", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Logs" }), _jsx("span", { className: "text-sm text-zinc-400", children: "Check all logs saved locally" })] }), _jsx(Logs, {})] }));
+    return (_jsxs("div", { className: "w-full h-screen overflow-hidden bg-background text-foreground", children: [_jsxs("header", { className: "p-4 border-b border-border", children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Logs" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Check all logs saved locally" })] }), _jsx(Logs, {})] }));
 };

package/dist/src/routes/states-page.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { States } from '../components/states/states';
 export const StatesPage = () => {
-    return (_jsxs("div", { className: "w-full h-screen overflow-hidden", children: [_jsxs("header", { className: "p-4 pb-0 border-b border-zinc-800", children: [_jsx("h1", { className: "text-xl font-bold", children: "State details" }), _jsx("span", { className: "text-sm text-zinc-400", children: "Check all states saved locally along with all fields" })] }), _jsx(States, {})] }));
+    return (_jsxs("div", { className: "w-full h-screen overflow-hidden bg-background text-foreground", children: [_jsxs("header", { className: "p-4 border-b border-border", children: [_jsx("h1", { className: "text-xl font-bold text-foreground", children: "State details" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Check all states saved locally along with all fields" })] }), _jsx(States, {})] }));
 };

package/dist/src/stores/use-logs.d.ts

@@ -13,4 +13,4 @@ export type LogsState = {
     unreadLogsCount: number;
     setUnreadLogsCount: (count: number) => void;
 };
-export declare const useLogs: import("zustand").UseBoundStore<import("zustand").StoreApi<LogsState>>;
+export declare function useLogs<SelectorOutput = LogsState>(selector?: (state: LogsState) => SelectorOutput): SelectorOutput;

package/dist/src/stores/use-logs.js

@@ -1,8 +1,52 @@
-import { create } from 'zustand';
-export const useLogs = create()((set) => ({
-    logs: [],
-    addLog: (log) => set((state) => ({ ...state, logs: [log, ...state.logs], unreadLogsCount: state.unreadLogsCount + 1 })),
-    resetLogs: () => set({ logs: [], unreadLogsCount: 0 }),
-    unreadLogsCount: 0,
-    setUnreadLogsCount: (count) => set({ unreadLogsCount: count }),
-}));
+import { useSyncExternalStore, useCallback } from 'react';
+const listeners = new Set();
+let currentLogs = [];
+let currentUnreadLogsCount = 0;
+let memoizedSnapshot;
+const updateMemoizedSnapshot = () => {
+    memoizedSnapshot = {
+        logs: currentLogs,
+        unreadLogsCount: currentUnreadLogsCount,
+        addLog: storeActions.addLog,
+        resetLogs: storeActions.resetLogs,
+        setUnreadLogsCount: storeActions.setUnreadLogsCount,
+    };
+};
+const notify = () => {
+    listeners.forEach((listener) => listener());
+};
+const storeActions = {
+    addLog: (log) => {
+        currentLogs = [log, ...currentLogs];
+        currentUnreadLogsCount += 1;
+        updateMemoizedSnapshot();
+        notify();
+    },
+    resetLogs: () => {
+        if (currentLogs.length === 0 && currentUnreadLogsCount === 0) {
+            return;
+        }
+        currentLogs = [];
+        currentUnreadLogsCount = 0;
+        updateMemoizedSnapshot();
+        notify();
+    },
+    setUnreadLogsCount: (count) => {
+        if (currentUnreadLogsCount === count) {
+            return;
+        }
+        currentUnreadLogsCount = count;
+        updateMemoizedSnapshot();
+        notify();
+    },
+};
+updateMemoizedSnapshot();
+// Stable subscribe function so React doesn't unnecessarily tear down the subscription
+const subscribe = (onStoreChange) => {
+    listeners.add(onStoreChange);
+    return () => listeners.delete(onStoreChange);
+};
+export function useLogs(selector = (state) => state) {
+    const getSnapshot = useCallback(() => selector(memoizedSnapshot), [selector]);
+    return useSyncExternalStore(subscribe, getSnapshot);
+}

package/dist/src/views/flow/arrow-head.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 type Props = {
-    color: string;
+    color?: string;
     id: string;
+    className?: string;
 };
 export declare const ArrowHead: React.FC<Props>;
 export {};

package/dist/src/views/flow/arrow-head.js

@@ -1,2 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowHead = (props) => (_jsxs("marker", { id: props.id, viewBox: "-5 -5 10 10", markerUnits: "strokeWidth", markerWidth: "10", markerHeight: "10", children: [_jsx("line", { x1: 0, y1: 0, x2: 2, y2: -2, stroke: props.color, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" }), _jsx("line", { x1: -2, y1: -2, x2: 0, y2: 0, stroke: props.color, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" })] }));
+export const ArrowHead = (props) => {
+    // Use CSS custom property for theme-aware coloring, fallback to provided color
+    const strokeColor = props.color || 'var(--arrow-color, #B3B3B3)';
+    return (_jsxs("marker", { id: props.id, viewBox: "-5 -5 10 10", markerUnits: "strokeWidth", markerWidth: "10", markerHeight: "10", className: props.className, children: [_jsx("line", { x1: 0, y1: 0, x2: 2, y2: -2, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" }), _jsx("line", { x1: -2, y1: -2, x2: 0, y2: 0, stroke: strokeColor, strokeWidth: "1", strokeOpacity: "1", strokeLinecap: "round" })] }));
+};