@motiadev/workbench 0.3.1-beta.86 → 0.3.1-beta.88-406962

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
 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-muted-foreground text-sm py-2', {
+const valueVariants = cva('text-muted-foreground text-sm', {
     variants: {
         variant: {
-            boolean: 'text-sky-400',
-            number: 'text-teal-400',
+            boolean: 'text-sky-400 font-mono font-bold',
+            number: 'text-teal-400 font-mono font-bold',
             undefined: 'text-muted-foreground',
-            string: 'text-muted-foreground',
+            string: 'text-muted-foreground font-mono font-medium',
             object: 'text-gray-800',
         },
     },
@@ -19,7 +19,7 @@ const valueVariants = cva('text-muted-foreground text-sm py-2', {
 });
 const Value = ({ value, variant, label, }) => {
     const displayValue = typeof value === 'string' ? value : JSON.stringify(value);
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [label && _jsx("div", { className: "text-md font-semibold py-2", children: label }), _jsx("div", { className: valueVariants({ variant }), children: displayValue })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [label && _jsx("div", { className: "text-md font-bold", children: label }), _jsx("div", { className: valueVariants({ variant }), children: displayValue })] }));
 };
 export const StateValue = ({ value, label, isRoot = false }) => {
     const [isOpen, setIsOpen] = useState(true);
@@ -43,7 +43,7 @@ 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-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 &&
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [(label || openBracket) && (_jsxs("div", { className: "flex gap-1 items-center text-md font-bold hover:bg-muted-foreground/10 rounded-md py-2 cursor-pointer", 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-muted-foreground text-sm", children: closeBracket })] }));
     }

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGlobalStore } from '@/stores/use-global-store';
+import { cn } from '@motiadev/ui';
+import { useMemo } from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
+import { useGetStateItems } from './hooks/states-hooks';
+import { StateDetail } from './state-detail';
+export const StatesPage = () => {
+    const selectedStateId = useGlobalStore((state) => state.selectedStateId);
+    const selectStateId = useGlobalStore((state) => state.selectStateId);
+    const items = useGetStateItems();
+    const selectedItem = useMemo(() => (selectedStateId ? items.find((item) => `${item.groupId}:${item.key}` === selectedStateId) : null), [items, selectedStateId]);
+    const handleRowClick = (item) => selectStateId(`${item.groupId}:${item.key}`);
+    const onClose = () => selectStateId(undefined);
+    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [selectedItem && _jsx(StateDetail, { state: selectedItem, onClose: onClose }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 bg-background", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "rounded-0", children: "Group ID" }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Type" })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { "data-testid": `item-${item}`, onClick: () => handleRowClick(item), className: cn('font-mono font-semibold', selectedItem === item
+                                ? 'bg-muted-foreground/10 hover:bg-muted-foreground/20'
+                                : 'hover:bg-muted-foreground/10'), children: [_jsx(TableCell, { className: "hover:bg-transparent", children: item.groupId }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.key }), _jsx(TableCell, { className: "hover:bg-transparent", children: item.type })] }, `${item.groupId}:${item.key}`))) })] })] }));
+};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "info" | "error" | "warning" | "red-rounded" | "red-dot" | null | undefined;
+    variant?: "error" | "default" | "secondary" | "destructive" | "outline" | "info" | "warning" | "red-rounded" | "red-dot" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

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

@@ -11,7 +11,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tf
 TableFooter.displayName = 'TableFooter';
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
 TableRow.displayName = 'TableRow';
-const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle text-md font-medium bg-muted text-muted-foreground first:rounded-l-lg last:rounded-r-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle text-md font-medium bg-muted text-muted-foreground font-bold [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
 TableHead.displayName = 'TableHead';
 const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
 TableCell.displayName = 'TableCell';

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

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

package/dist/src/hooks/use-fetch-flows.d.ts

@@ -1,5 +1 @@
-import { FlowConfigResponse, FlowResponse } from '@/views/flow/hooks/use-get-flow-state';
-export declare const useFetchFlows: (flowId: string) => {
-    flow: FlowResponse | null;
-    flowConfig: FlowConfigResponse | null;
-};
+export declare const useFetchFlows: () => void;

package/dist/src/hooks/use-fetch-flows.js

@@ -1,17 +1,22 @@
-import { useStreamItem } from '@motiadev/stream-client-react';
-export const useFetchFlows = (flowId) => {
-    const { data: flow } = useStreamItem({
+import { useFlowStore } from '@/stores/use-flow-store';
+import { useStreamGroup } from '@motiadev/stream-client-react';
+import { useEffect } from 'react';
+export const useFetchFlows = () => {
+    const setFlows = useFlowStore((state) => state.setFlows);
+    const selectFlowId = useFlowStore((state) => state.selectFlowId);
+    const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
+    const { data: flows } = useStreamGroup({
         streamName: '__motia.flows',
         groupId: 'default',
-        id: flowId,
     });
-    const { data: flowConfig } = useStreamItem({
-        streamName: '__motia.flowsConfig',
-        groupId: 'default',
-        id: flowId,
-    });
-    return {
-        flow,
-        flowConfig,
-    };
+    useEffect(() => {
+        if (flows)
+            setFlows(flows.map((flow) => flow.id));
+    }, [flows, setFlows]);
+    useEffect(() => {
+        if ((!selectedFlowId && flows.length > 0) ||
+            (selectedFlowId && flows.length > 0 && !flows.find((flow) => flow.id === selectedFlowId))) {
+            selectFlowId(flows[0].id);
+        }
+    }, [flows, selectedFlowId, selectFlowId, selectedFlowId]);
 };

package/dist/src/hooks/use-log-listener.js

@@ -1,7 +1,7 @@
-import { useLogs } from '@/stores/use-logs';
+import { useLogsStore } from '@/stores/use-logs-store';
 import { useStreamEventHandler, useStreamGroup } from '@motiadev/stream-client-react';
 export const useLogListener = () => {
-    const addLog = useLogs((state) => state.addLog);
+    const addLog = useLogsStore((state) => state.addLog);
     const { event } = useStreamGroup({ streamName: '__motia.logs', groupId: 'default' });
     useStreamEventHandler({ event, type: 'log', listener: addLog }, [addLog]);
 };

package/dist/src/hooks/use-update-handle-positions.d.ts

@@ -0,0 +1,10 @@
+import { Position } from '@xyflow/react';
+import { BaseNodeProps } from '../publicComponents/node-props';
+export declare const useHandlePositions: (data: BaseNodeProps) => {
+    sourcePosition: Position;
+    targetPosition: Position;
+    updateSourcePosition: (position: "bottom" | "right") => void;
+    updateTargetPosition: (position: "top" | "left") => void;
+    toggleTargetPosition: () => void;
+    toggleSourcePosition: () => void;
+};

package/dist/src/hooks/use-update-handle-positions.js

@@ -0,0 +1,35 @@
+import { Position, useReactFlow, useUpdateNodeInternals } from '@xyflow/react';
+export const useHandlePositions = (data) => {
+    const reactFlow = useReactFlow();
+    const updateNodeInternals = useUpdateNodeInternals();
+    const sourcePosition = data.nodeConfig?.sourceHandlePosition === 'right' ? Position.Right : Position.Bottom;
+    const targetPosition = data.nodeConfig?.targetHandlePosition === 'left' ? Position.Left : Position.Top;
+    const updateSourcePosition = (position) => {
+        reactFlow.updateNode(data.id, {
+            data: { ...data, nodeConfig: { ...data.nodeConfig, sourceHandlePosition: position } },
+        });
+        updateNodeInternals(data.id);
+    };
+    const updateTargetPosition = (position) => {
+        reactFlow.updateNode(data.id, {
+            data: { ...data, nodeConfig: { ...data.nodeConfig, targetHandlePosition: position } },
+        });
+        updateNodeInternals(data.id);
+    };
+    const toggleTargetPosition = () => {
+        const newPosition = targetPosition === Position.Top ? Position.Left : Position.Top;
+        updateTargetPosition(newPosition);
+    };
+    const toggleSourcePosition = () => {
+        const newPosition = sourcePosition === Position.Bottom ? Position.Right : Position.Bottom;
+        updateSourcePosition(newPosition);
+    };
+    return {
+        sourcePosition,
+        targetPosition,
+        updateSourcePosition,
+        updateTargetPosition,
+        toggleTargetPosition,
+        toggleSourcePosition,
+    };
+};

package/dist/src/index.css

@@ -1,194 +1,54 @@
-@import 'tailwindcss';
+@import "@motiadev/ui/styles.css";
+@import "@motiadev/ui/globals.css";
 @import 'tw-animate-css';
 @config "../tailwind.config.js";
 
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  line-height: 1.5;
-  font-size: 16px;
-
-  color-scheme: light dark;
-  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), serif;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  width: 100%;
-  font-optical-sizing: auto;
-
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(0.98 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --header: oklch(0.985 0 0);
-  --header-foreground: oklch(0.145 0 0);
-  --header-primary: oklch(0.205 0 0);
-  --header-primary-foreground: oklch(0.985 0 0);
-  --header-accent: oklch(0.97 0 0);
-  --header-accent-foreground: oklch(0.205 0 0);
-  --header-border: oklch(0.922 0 0);
-  --header-ring: oklch(0.708 0 0);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --header: oklch(0.205 0 0);
-  --header-foreground: oklch(0.985 0 0);
-  --header-primary: oklch(0.488 0.243 264.376);
-  --header-primary-foreground: oklch(0.985 0 0);
-  --header-accent: oklch(0.269 0 0);
-  --header-accent-foreground: oklch(0.985 0 0);
-  --header-border: oklch(1 0 0 / 10%);
-  --header-ring: oklch(0.556 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-header: var(--header);
-  --color-header-foreground: var(--header-foreground);
-  --color-header-primary: var(--header-primary);
-  --color-header-primary-foreground: var(--header-primary-foreground);
-  --color-header-accent: var(--header-accent);
-  --color-header-accent-foreground: var(--header-accent-foreground);
-  --color-header-border: var(--header-border);
-  --color-header-ring: var(--header-ring);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-body {
-  margin: 0;
-  place-items: center;
-  min-height: 100dvh;
-  width: 100%;
-  font-family: 'DM Sans', sans-serif;
-}
-
-body,
-#root {
-  width: 100dvw;
-  height: 100dvh;
-}
-
-strong {
-  font-weight: 800;
+@keyframes flowDash {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -20;
+  }
 }
 
-.react-flow__attribution {
-  display: none;
+.json-view {
+  background:rgba(0, 0, 0, 0.1);
 }
 
-@layer base {
-  * {
-    @apply border-border;
+.dark {
+  .react-flow__panel {
+    background: var(--background)
   }
-  body {
-    @apply bg-background text-foreground;
+  .json-view {
+    background: rgba(0, 0, 0, 0.8);
   }
 }
 
-@keyframes flowDash {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: -20;
-  }
+.font-mono {
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-size: 14px;
 }
 
 .edge-animated {
   stroke-dasharray: 5; /* length of dash pattern */
   stroke-linecap: round; /* round the dash ends */
   animation: flowDash 1s linear infinite;
+}
+
+.json-view {
+  border-radius: 8px;
+  padding: 12px 12px;
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.json-view--pair, .json-view--property, .json-view > span {
+  line-height: 24px;
+}
+
+.json-view--property {
+  font-weight: 600;
 }

package/dist/src/lib/utils.d.ts

@@ -1,3 +1,4 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare const formatDuration: (duration?: number) => string;
+export declare const formatTimestamp: (time: number) => string;

package/dist/src/lib/utils.js

@@ -10,3 +10,7 @@ export const formatDuration = (duration) => {
         return `${duration}ms`;
     return `${(duration / 1000).toFixed(1)}s`;
 };
+export const formatTimestamp = (time) => {
+    const date = new Date(Number(time));
+    return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`;
+};

package/dist/src/main.d.ts

@@ -1 +1,2 @@
+import '@motiadev/ui/globals.css';
 import './index.css';

package/dist/src/main.js

@@ -1,21 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { MotiaStreamProvider } from '@motiadev/stream-client-react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter, Route, Routes } from 'react-router';
 import { RootMotia } from './components/root-motia';
+import '@motiadev/ui/globals.css';
 import './index.css';
-import { RouteWrapper } from './route-wrapper';
-import { Index } from './routes';
-import { EndpointsPage } from './routes/endpoints-page';
-import { Flow } from './routes/flow';
-import { LogsPage } from './routes/logs-page';
-import { StatesPage } from './routes/states-page';
-import { TracesPage } from './routes/traces-page';
-// Render the app
+import { App } from './App';
 const rootElement = document.getElementById('root');
 if (!rootElement.innerHTML) {
     const root = createRoot(rootElement);
     const address = window.location.origin.replace('http', 'ws');
-    root.render(_jsx(StrictMode, { children: _jsx(MotiaStreamProvider, { address: address, children: _jsx(BrowserRouter, { children: _jsx(RootMotia, { children: _jsx(RouteWrapper, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Index, {}) }), _jsx(Route, { path: "/flow/:id", element: _jsx(Flow, {}) }), _jsx(Route, { path: "/logs", element: _jsx(LogsPage, {}) }), _jsx(Route, { path: "/states", element: _jsx(StatesPage, {}) }), _jsx(Route, { path: "/endpoints", element: _jsx(EndpointsPage, {}) }), _jsx(Route, { path: "/traces", element: _jsx(TracesPage, {}) })] }) }) }) }) }) }));
+    root.render(_jsx(StrictMode, { children: _jsx(MotiaStreamProvider, { address: address, children: _jsx(RootMotia, { children: _jsx(App, {}) }) }) }));
 }

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Webhook } from 'lucide-react';
-import { BaseNode } from './base-node';
-import { DetailItem, NodeDetails } from './node-details';
+import { BaseNode } from './base-node/base-node';
 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-muted-foreground", children: [_jsx(Webhook, { className: "w-3 h-3 text-muted-foreground/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] }) }) })] }));
+    return (_jsxs(BaseNode, { data: data, variant: "api", title: data.name, language: data.language, subtitle: data.description, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, subscribes: data.subscribes, emits: data.emits, details: [{ label: 'Endpoint', value: data.webhookUrl }].filter((item) => !!item), children: [data.webhookUrl && (_jsx("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: _jsx("div", { className: "font-mono", children: data.webhookUrl }) })), children] }));
 };

package/dist/src/publicComponents/{base-handle.d.ts → base-node/base-handle.d.ts}

@@ -3,6 +3,7 @@ import { HandleProps } from '@xyflow/react';
 type Props = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
     isHidden?: boolean;
     variant?: string | null;
+    onTogglePosition?: () => void;
 };
 export declare const BaseHandle: React.FC<Props>;
 export {};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Position, Handle as RFHandle } from '@xyflow/react';
+import clsx from 'clsx';
+export const BaseHandle = (props) => {
+    const { isHidden, position, variant, onTogglePosition, ...rest } = props;
+    const isHorizontal = position === Position.Left || position === Position.Right;
+    return (_jsx("div", { className: clsx('absolute w-[6px] h-[6px]', position === Position.Top && '-top-[4px]', position === Position.Bottom && '-bottom-[4px]', position === Position.Left && '-left-[4px]', position === Position.Right && '-right-[4px]', isHorizontal ? 'top-1/2 -mt-[2px]' : 'left-1/2 -ml-[2px]', isHidden && 'hidden'), onClick: onTogglePosition, children: _jsx(RFHandle, { ...rest, position: position, style: { background: 'rgb(30,118,231)' }, className: "\n        bg-white/50\n        !static\n        !w-[6px]\n        !h-[6px]\n        !min-w-[6px]\n        !min-h-[6px]\n        !p-0\n        !border-none\n        !transform-none\n        !rounded-full\n        !outline-none\n        !shadow-none\n      " }) }));
+};

package/dist/src/publicComponents/base-node/base-node.d.ts

@@ -0,0 +1,21 @@
+import { PanelDetailItem } from '@motiadev/ui';
+import React, { PropsWithChildren } from 'react';
+import { BaseNodeProps } from '../node-props';
+type Props = PropsWithChildren<{
+    title: string;
+    subtitle?: string;
+    variant: 'event' | 'api' | 'noop' | 'cron';
+    language?: string;
+    className?: string;
+    disableSourceHandle?: boolean;
+    disableTargetHandle?: boolean;
+    details?: PanelDetailItem[];
+    emits?: Array<string | {
+        topic: string;
+        label?: string;
+    }>;
+    subscribes?: string[];
+    data: BaseNodeProps;
+}>;
+export declare const BaseNode: React.FC<Props>;
+export {};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHandlePositions } from '@/hooks/use-update-handle-positions';
+import { ChevronUp } from 'lucide-react';
+import { useState } from 'react';
+import { BaseHandle } from './base-handle';
+import { LanguageIndicator } from './language-indicator';
+import { NodeHeader } from './node-header';
+import { NodeSidebar } from './node-sidebar';
+export const BaseNode = ({ title, variant, children, disableSourceHandle, disableTargetHandle, language, subtitle, details, subscribes, emits, data, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { sourcePosition, targetPosition, toggleTargetPosition, toggleSourcePosition } = useHandlePositions(data);
+    return (_jsxs("div", { className: "p-[1px] rounded-lg max-w-[350px]", children: [_jsx("div", { className: "rounded-lg bg-background border-2 border-muted border-solid border-muted-foreground/10", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsxs(NodeHeader, { text: title, variant: variant, subtitle: subtitle, children: [_jsx(LanguageIndicator, { language: language }), _jsx("div", { className: "flex justify-end gap-2", children: _jsx("div", { className: "p-[2px] cursor-pointer rounded-md hover:bg-muted-foreground/10", onClick: () => setIsOpen(true), children: _jsx(ChevronUp, { className: "w-4 h-4" }) }) })] }), children && _jsx("div", { className: "border-t-2 border-muted-foreground/10 p-4 space-y-3", children: children }), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, variant: variant, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, variant: variant, onTogglePosition: toggleSourcePosition }))] }) }), _jsx(NodeSidebar, { title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false), details: details, subscribes: subscribes, emits: emits })] }));
+};

package/dist/src/publicComponents/{emits.d.ts → base-node/emits.d.ts}

@@ -1,4 +1,4 @@
-import { EventNodeData } from '../views/flow/nodes/nodes.types';
+import { EventNodeData } from '@/types/flow';
 import React from 'react';
 export declare const Emits: React.FC<{
     emits: EventNodeData['emits'];

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const toTopic = (emit) => typeof emit === 'string' ? emit : emit.topic;
+export const Emits = ({ emits }) => {
+    return (_jsx("div", { className: "flex flex-col gap-2", children: emits.map((emit) => (_jsx("div", { "data-testid": `emits__${toTopic(emit)}`, children: toTopic(emit) }, toTopic(emit)))) }));
+};

package/dist/src/{views/flow/nodes → publicComponents/base-node}/language-indicator.d.ts

@@ -1,5 +1,5 @@
+import { EventNodeData } from '@/types/flow';
 import { FC } from 'react';
-import { EventNodeData } from './nodes.types';
 type Props = {
     language: EventNodeData['language'];
 };