@motiadev/workbench 0.14.0-beta.165-285707 → 0.15.0-beta.165

package/dist/src/components/tutorial/tutorial-step.tsx

@@ -0,0 +1,82 @@
+import { BackgroundEffect } from '@motiadev/ui'
+import type React from 'react'
+import { forwardRef, useEffect } from 'react'
+import type { TutorialImage } from './engine/tutorial-types'
+
+type TutorialStepProps = {
+  step: number
+  totalSteps: number
+  title: string
+  description: React.ReactNode
+  link?: string
+  image?: TutorialImage
+  onNext: () => void
+  onClose: () => void
+}
+
+export const TutorialStep = forwardRef<HTMLDivElement, TutorialStepProps>(
+  ({ step, totalSteps, title, description, link, image, onNext, onClose }, ref) => {
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (step > 0 && e.key === 'Escape') {
+          onClose()
+        } else if (step > 0 && e.key === 'ArrowRight') {
+          onNext()
+        }
+      }
+      window.addEventListener('keydown', handleKeyDown)
+
+      return () => window.removeEventListener('keydown', handleKeyDown)
+    }, [onClose, onNext, step])
+
+    return (
+      <div ref={ref} className="driver-popover ">
+        {image && (
+          <img
+            src={image.src}
+            alt="Step visual"
+            className="driver-popover-image object-cover"
+            style={{ height: image.height, width: '100%' }}
+          />
+        )}
+
+        <div className="isolate relative">
+          <BackgroundEffect />
+          <div className="driver-popover-title">
+            <h2 className="popover-title">{title}</h2>
+          </div>
+
+          <div className="driver-popover-description">{description}</div>
+
+          {link && (
+            <a href={link} target="_blank" className="text-foreground text-xs font-semibold px-4 hover:underline">
+              Learn more
+            </a>
+          )}
+
+          <div className="driver-popover-footer flex items-center justify-between">
+            <div className="text-sm text-muted-foreground font-semibold">
+              {step} <span className="text-foreground">/</span> {totalSteps}
+            </div>
+
+            <div className="driver-popover-navigation-btns driver-popover-navigation-btns-hint flex gap-2">
+              <button className="driver-popover-next-btn" onClick={onNext}>
+                {step < totalSteps ? 'Continue' : 'Finish'}
+              </button>
+            </div>
+          </div>
+
+          {step < totalSteps && (
+            <div className="tutorial-opt-out-container">
+              <button className="tutorial-opt-out-button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+)
+
+TutorialStep.displayName = 'TutorialStep'

package/dist/src/components/tutorial/tutorial.tsx

@@ -0,0 +1,59 @@
+import { motiaAnalytics } from '../../lib/motia-analytics'
+import { useTutorialEngine } from './hooks/use-tutorial-engine'
+import { TutorialStep } from './tutorial-step'
+import './tutorial.css'
+
+export const Tutorial = () => {
+  const engine = useTutorialEngine()
+
+  const onNext = () => {
+    const currentStep = engine.currentStepRef.current
+    const nextStep = currentStep + 1
+
+    engine.moveStep(nextStep)
+
+    if (engine.currentStep === engine.totalSteps) {
+      motiaAnalytics.track('tutorial_completed', {
+        manualOpen: engine.manualOpenRef.current,
+      })
+    } else {
+      motiaAnalytics.track('tutorial_next_step', {
+        step: nextStep,
+        manualOpen: engine.manualOpenRef.current,
+      })
+    }
+  }
+
+  const onClose = () => {
+    motiaAnalytics.track('tutorial_closed', {
+      step: engine.currentStepRef.current,
+      manualOpen: engine.manualOpenRef.current,
+    })
+    engine.onClose()
+  }
+
+  return (
+    <div>
+      {/* backdrop container */}
+      <div className="fixed inset-0 z-[9999]" />
+
+      {/* Highlighter container */}
+      <div
+        className="absolute top-5 left-5 w-full h-full rounded-lg shadow-[0_0_0_9999px_rgba(0,0,0,0.5)] z-[10000] pointer-events-none"
+        ref={engine.highlighterRef}
+      />
+
+      <TutorialStep
+        ref={engine.ref}
+        step={engine.currentStep}
+        totalSteps={engine.totalSteps}
+        title={engine.title}
+        description={engine.description}
+        link={engine.link}
+        image={engine.image}
+        onNext={onNext}
+        onClose={onClose}
+      />
+    </div>
+  )
+}

package/dist/src/components/ui/json-editor.tsx

@@ -0,0 +1,68 @@
+import Editor, { useMonaco } from '@monaco-editor/react'
+import { useThemeStore } from '@motiadev/ui'
+import { type FC, useEffect, useMemo } from 'react'
+
+type JsonEditorProps = {
+  value: string
+  height?: number | string
+  schema?: Record<string, unknown>
+  onChange?: (value: string) => void
+  onValidate?: (isValid: boolean) => void
+  language?: 'json' | string
+  readOnly?: boolean
+}
+
+export const JsonEditor: FC<JsonEditorProps> = ({
+  value,
+  height = 300,
+  schema,
+  onChange,
+  onValidate,
+  language = 'json',
+  readOnly = false,
+}) => {
+  const monaco = useMonaco()
+  const theme = useThemeStore((state) => state.theme)
+  const editorTheme = useMemo(() => (theme === 'dark' ? 'vs-dark' : 'light'), [theme])
+
+  useEffect(() => {
+    if (!monaco) return
+
+    // @ts-expect-error - monaco.languages.typescript.javascriptDefaults is not typed
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ isolatedModules: true })
+    // @ts-expect-error - monaco.languages.json.jsonDefaults is not typed
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      schemas: schema
+        ? [
+            {
+              uri: window.location.href,
+              fileMatch: ['*'],
+              schema,
+            },
+          ]
+        : [],
+    })
+  }, [monaco, schema, language])
+
+  return (
+    <Editor
+      data-testid="json-editor"
+      height={height}
+      language={language}
+      value={value}
+      theme={editorTheme}
+      onChange={(value) => {
+        if (!value) {
+          onValidate?.(false)
+        }
+        onChange?.(value ?? '')
+      }}
+      onValidate={(markers) => onValidate?.(markers.length === 0)}
+      options={{
+        readOnly,
+        scrollBeyondLastLine: false,
+        minimap: { enabled: false },
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,75 @@
+import { cn } from '@motiadev/ui'
+import * as React from 'react'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />,
+)
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  ),
+)
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />
+  ),
+)
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <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<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <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<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className)}
+      {...props}
+    />
+  ),
+)
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+  ),
+)
+TableCaption.displayName = 'TableCaption'
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

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

@@ -0,0 +1,54 @@
+import { cn, type Theme, useThemeStore } from '@motiadev/ui'
+import { Moon, Sun } from 'lucide-react'
+import type React from 'react'
+import { useEffect } from 'react'
+
+export const ThemeToggle: React.FC = () => {
+  const theme = useThemeStore((state) => state.theme)
+  const setTheme = useThemeStore((state) => state.setTheme)
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light')
+  }
+
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    const colorScheme = url.searchParams.get('color-scheme') as Theme
+    if (colorScheme) {
+      setTheme(colorScheme)
+    }
+  }, [setTheme])
+
+  return (
+    <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`}
+    >
+      <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',
+        )}
+      />
+
+      <div className="flex items-center justify-center w-6 h-6 z-10">
+        <Sun
+          className={cn(
+            'h-3.5 w-3.5 transition-colors duration-200',
+            theme === 'light' ? 'text-foreground' : 'text-muted-foreground',
+          )}
+        />
+      </div>
+
+      <div className="flex items-center justify-center w-6 h-6 z-10 ml-2">
+        <Moon
+          className={cn(
+            'h-3.5 w-3.5 transition-colors duration-200',
+            theme === 'dark' ? 'text-foreground' : 'text-muted-foreground',
+          )}
+        />
+      </div>
+    </button>
+  )
+}

package/dist/src/components/ui/tooltip.tsx

@@ -0,0 +1,26 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import type { ReactNode } from 'react'
+
+export const Tooltip = ({
+  children,
+  content,
+  disabled,
+}: {
+  children: ReactNode
+  content: string | ReactNode
+  disabled?: boolean
+}) => (
+  <TooltipPrimitive.Provider disableHoverableContent={disabled}>
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content className="TooltipContent" side="bottom">
+          <div className="p-2 bg-background text-popover-foreground text-sm rounded-lg border border-light-800">
+            {content}
+          </div>
+          <TooltipPrimitive.Arrow className="TooltipArrow" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  </TooltipPrimitive.Provider>
+)

package/dist/src/hooks/use-debounced.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+export const useDebounced = (fn: () => void, delay = 500) => {
+  const saveTimeoutRef = useRef<NodeJS.Timeout>(null)
+
+  const debouncedFn = useCallback(() => {
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current)
+    }
+    saveTimeoutRef.current = setTimeout(fn, delay)
+  }, [fn, delay])
+
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  return debouncedFn
+}

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

@@ -0,0 +1,33 @@
+import { useStreamGroup } from '@motiadev/stream-client-react'
+import { useEffect } from 'react'
+import { useFlowStore } from '../stores/use-flow-store'
+import type { FlowResponse } from '../types/flow'
+
+const streamGroupArgs = { streamName: '__motia.flows', groupId: 'default' }
+
+export const useFetchFlows = () => {
+  const setFlows = useFlowStore((state) => state.setFlows)
+  const selectFlowId = useFlowStore((state) => state.selectFlowId)
+  const clearSelectedFlowId = useFlowStore((state) => state.clearSelectedFlowId)
+  const selectedFlowId = useFlowStore((state) => state.selectedFlowId)
+
+  const { data: flows } = useStreamGroup<FlowResponse>(streamGroupArgs)
+
+  useEffect(() => {
+    if (flows) setFlows(flows.map((flow) => flow.id))
+  }, [flows, setFlows])
+
+  useEffect(() => {
+    const hasFlows = flows.length > 0
+    const isSelectedFlowValid = selectedFlowId && flows.some((flow) => flow.id === selectedFlowId)
+
+    if (!hasFlows && selectedFlowId) {
+      clearSelectedFlowId()
+      return
+    }
+
+    if (hasFlows && (!selectedFlowId || !isSelectedFlowValid)) {
+      selectFlowId(flows[0].id)
+    }
+  }, [flows, selectedFlowId, selectFlowId, clearSelectedFlowId])
+}

package/dist/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

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

@@ -0,0 +1,42 @@
+import { Position, useReactFlow, useUpdateNodeInternals } from '@xyflow/react'
+import type { BaseNodeProps } from '../publicComponents/node-props'
+
+export const useHandlePositions = (data: BaseNodeProps) => {
+  const reactFlow = useReactFlow()
+  const updateNodeInternals = useUpdateNodeInternals()
+  const sourcePosition = data.nodeConfig?.sourceHandlePosition === 'bottom' ? Position.Bottom : Position.Right
+  const targetPosition = data.nodeConfig?.targetHandlePosition === 'top' ? Position.Top : Position.Left
+
+  const updateSourcePosition = (position: 'bottom' | 'right') => {
+    reactFlow.updateNode(data.id, {
+      data: { ...data, nodeConfig: { ...data.nodeConfig, sourceHandlePosition: position } },
+    })
+    updateNodeInternals(data.id)
+  }
+
+  const updateTargetPosition = (position: 'top' | 'left') => {
+    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,7 +1,7 @@
-@import "@motiadev/ui/styles.css";
-@import "@motiadev/ui/globals.css";
+@import '@motiadev/ui/styles.css';
+@import '@motiadev/ui/globals.css';
 
-@import "tw-animate-css";
+@import 'tw-animate-css';
 @config "../tailwind.config.js";
 
 @keyframes flowDash {
@@ -27,7 +27,7 @@
 }
 
 .font-mono {
-  font-family: "IBM Plex Mono", "Courier New", monospace;
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
   font-size: 14px;
 }
 
@@ -40,7 +40,7 @@
 .json-view {
   border-radius: 8px;
   padding: 12px 12px;
-  font-family: "IBM Plex Mono", "Courier New", monospace;
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
   font-size: 14px;
   line-height: 1.5;
   font-weight: 500;

package/dist/src/lib/__tests__/utils.test.ts

@@ -0,0 +1,110 @@
+import { formatDuration } from '../utils'
+
+describe('formatDuration', () => {
+  describe('milliseconds', () => {
+    it('should format values under 1 second as milliseconds', () => {
+      expect(formatDuration(0)).toBe('0ms')
+      expect(formatDuration(1)).toBe('1ms')
+      expect(formatDuration(250)).toBe('250ms')
+      expect(formatDuration(500)).toBe('500ms')
+      expect(formatDuration(999)).toBe('999ms')
+    })
+  })
+
+  describe('seconds', () => {
+    it('should format values between 1 second and 1 minute as seconds with 1 decimal', () => {
+      expect(formatDuration(1000)).toBe('1.0s')
+      expect(formatDuration(1500)).toBe('1.5s')
+      expect(formatDuration(15000)).toBe('15.0s')
+      expect(formatDuration(45500)).toBe('45.5s')
+      expect(formatDuration(59999)).toBe('60.0s')
+    })
+
+    it('should round to 1 decimal place', () => {
+      expect(formatDuration(1234)).toBe('1.2s')
+      expect(formatDuration(1567)).toBe('1.6s')
+      expect(formatDuration(12345)).toBe('12.3s')
+    })
+  })
+
+  describe('minutes', () => {
+    it('should format values between 1 minute and 1 hour as minutes with 1 decimal', () => {
+      expect(formatDuration(60000)).toBe('1.0min')
+      expect(formatDuration(90000)).toBe('1.5min')
+      expect(formatDuration(300000)).toBe('5.0min')
+      expect(formatDuration(1800000)).toBe('30.0min')
+      expect(formatDuration(3599999)).toBe('60.0min')
+    })
+
+    it('should round to 1 decimal place', () => {
+      expect(formatDuration(123456)).toBe('2.1min')
+      expect(formatDuration(567890)).toBe('9.5min')
+    })
+  })
+
+  describe('hours', () => {
+    it('should format values 1 hour or more as hours with 1 decimal', () => {
+      expect(formatDuration(3600000)).toBe('1.0h')
+      expect(formatDuration(5400000)).toBe('1.5h')
+      expect(formatDuration(7200000)).toBe('2.0h')
+      expect(formatDuration(36000000)).toBe('10.0h')
+    })
+
+    it('should round to 1 decimal place', () => {
+      expect(formatDuration(3661000)).toBe('1.0h')
+      expect(formatDuration(5432100)).toBe('1.5h')
+      expect(formatDuration(9000000)).toBe('2.5h')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should return "N/A" for undefined', () => {
+      expect(formatDuration(undefined)).toBe('N/A')
+    })
+
+    it('should return "N/A" for null', () => {
+      expect(formatDuration(null as any)).toBe('N/A')
+    })
+
+    it('should return "N/A" for 0 when treated as falsy', () => {
+      expect(formatDuration(0)).toBe('0ms')
+    })
+  })
+
+  describe('boundary values', () => {
+    it('should correctly handle millisecond-second boundary (999ms vs 1.0s)', () => {
+      expect(formatDuration(999)).toBe('999ms')
+      expect(formatDuration(1000)).toBe('1.0s')
+    })
+
+    it('should correctly handle second-minute boundary (59.9s vs 1.0min)', () => {
+      expect(formatDuration(59999)).toBe('60.0s')
+      expect(formatDuration(60000)).toBe('1.0min')
+    })
+
+    it('should correctly handle minute-hour boundary (59.9min vs 1.0h)', () => {
+      expect(formatDuration(3599999)).toBe('60.0min')
+      expect(formatDuration(3600000)).toBe('1.0h')
+    })
+  })
+
+  describe('real-world scenarios', () => {
+    it('should format typical API response times', () => {
+      expect(formatDuration(50)).toBe('50ms')
+      expect(formatDuration(150)).toBe('150ms')
+      expect(formatDuration(2500)).toBe('2.5s')
+    })
+
+    it('should format typical workflow execution times', () => {
+      expect(formatDuration(5000)).toBe('5.0s')
+      expect(formatDuration(30000)).toBe('30.0s')
+      expect(formatDuration(120000)).toBe('2.0min')
+    })
+
+    it('should format long-running tasks', () => {
+      expect(formatDuration(600000)).toBe('10.0min')
+      expect(formatDuration(1800000)).toBe('30.0min')
+      expect(formatDuration(7200000)).toBe('2.0h')
+    })
+  })
+})