@motiadev/workbench 0.13.0-beta.162-846200 → 0.13.0-beta.162-813224

package/dist/src/components/tutorial/engine/workbench-xpath.ts

@@ -1,53 +0,0 @@
-export const workbenchXPath = {
-  sidebarContainer: '//div[@data-testid="sidebar-panel"]',
-  closePanelButton: '//div[@id="app-sidebar-container"]//button[@data-testid="close-panel"]',
-  bottomPanel: '//div[@id="bottom-panel"]',
-
-  flows: {
-    dropdownFlow: (flowId: string) => `//div[@data-testid="dropdown-${flowId}"]`,
-    feature: (featureId: string) => `//div[@data-feature-id="${featureId}"]`,
-    previewButton: (stepId: string) => `//button[@data-testid="open-code-preview-button-${stepId}"]`,
-    node: (stepId: string) => `//div[@data-testid="node-${stepId}"]`,
-  },
-
-  endpoints: {
-    endpointsList: '//div[@data-testid="endpoints-list"]',
-    endpoint: (method: string, path: string) => `//div[@data-testid="endpoint-${method}-${path}"]`,
-    callPanel: '//div[@data-testid="endpoint-details-panel"]',
-    specButton: '//button[@data-testid="endpoint-spec-button"]',
-
-    bodyTab: '//button[@data-testid="endpoint-body-tab"]',
-    headersTab: '//button[@data-testid="endpoint-headers-tab"]',
-    paramsTab: '//button[@data-testid="endpoint-params-tab"]',
-
-    callTab: '//button[@data-testid="endpoint-body-tab"]', // deprecated
-    response: '//div[@data-testid="endpoint-response-container"]',
-    playButton: '//button[@data-testid="endpoint-play-button"]',
-  },
-
-  tracing: {
-    trace: (index: number) => `(//button[contains(@class, 'motia-trace-group')])[${index}]`,
-    details: '//div[@data-testid="trace-details"]',
-    timeline: (index: number) => `(//div[@data-testid="trace-timeline-item"])[${index}]`,
-  },
-
-  logs: {
-    container: '//div[@data-testid="logs-container"]',
-    searchContainer: '//div[@data-testid="logs-search-container"]',
-    traceColumn: (index: number) => `(//td[starts-with(@data-testid, 'trace')])[${index}]`,
-    row: '//div[@data-testid="log-row"]',
-  },
-
-  states: {
-    container: '//div[@data-testid="states-container"]',
-    row: (index: number) => `(//tr[starts-with(@data-testid, 'item-')])[${index}]`,
-  },
-
-  links: {
-    flows: '//div[@data-testid="flows-dropdown-trigger"]',
-    endpoints: '//button[@data-testid="endpoints-link"]',
-    tracing: '//button[@data-testid="tracing-link"]',
-    logs: '//button[@data-testid="logs-link"]',
-    states: '//button[@data-testid="states-link"]',
-  },
-}

package/dist/src/components/tutorial/hooks/tutorial-utils.ts

@@ -1,26 +0,0 @@
-export const waitForElementByXPath = async (
-  xpath: string,
-  optional: boolean = false,
-  maxAttempts: number = 50,
-  delayMs: number = 50,
-): Promise<HTMLElement | null> => {
-  let attempts = 0
-
-  while (attempts < maxAttempts) {
-    const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
-    const targetElement = result?.singleNodeValue as HTMLElement | undefined
-
-    if (targetElement) {
-      return targetElement
-    } else if (optional) {
-      return null
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, delayMs))
-    attempts++
-  }
-
-  console.warn(`Element not found after maximum attempts: ${xpath}`)
-
-  return null
-}

package/dist/src/components/tutorial/hooks/use-tutorial-engine.ts

@@ -1,213 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { MotiaTutorial } from '../engine/tutorial-engine'
-import type { TutorialImage } from '../engine/tutorial-types'
-import { waitForElementByXPath } from './tutorial-utils'
-
-export const useTutorialEngine = () => {
-  const ref = useRef<HTMLDivElement>(null)
-  const highlighterRef = useRef<HTMLDivElement>(null)
-
-  const [title, setTitle] = useState('')
-  const [description, setDescription] = useState<React.ReactNode | undefined>(undefined)
-  const [image, setImage] = useState<TutorialImage | undefined>(undefined)
-  const [link, setLink] = useState<string | undefined>(undefined)
-  const [currentStep, setCurrentStep] = useState(0)
-  const [totalSteps, setTotalSteps] = useState(MotiaTutorial.steps.length)
-
-  const manualOpenRef = useRef(false)
-  const loading = useRef(false)
-  const currentStepRef = useRef(0)
-
-  const moveComponent = (x: number, y: number) => {
-    if (ref.current) {
-      ref.current.style.position = 'absolute'
-      ref.current.style.left = `${x}px`
-      ref.current.style.top = `${y}px`
-    }
-  }
-
-  const moveStep = async (stepNumber: number) => {
-    const container = ref.current
-
-    if (container && !loading.current) {
-      if (stepNumber >= MotiaTutorial.steps.length) {
-        onClose()
-        return
-      }
-
-      if (container.parentElement) {
-        container.style.transition = 'all 0.3s ease-in-out'
-        container.parentElement.style.opacity = '1'
-        container.parentElement.style.display = 'block'
-      }
-
-      loading.current = true
-      currentStepRef.current = stepNumber
-
-      const step = MotiaTutorial.steps[stepNumber]
-
-      // Run any before actions
-      if (step.before) {
-        for (const action of step.before) {
-          const monaco = (window as any).monaco
-          if (action.type === 'click') {
-            const element = await waitForElementByXPath(action.selector, action.optional)
-
-            if (element) {
-              element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-              element.click()
-              element.dispatchEvent(
-                new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Enter', keyCode: 13 }),
-              )
-            }
-          } else if (action.type === 'fill-editor' && monaco) {
-            monaco.editor?.getEditors?.()?.[0]?.setValue(JSON.stringify(action.content, null, 2))
-          }
-        }
-      }
-
-      setCurrentStep(stepNumber + 1)
-      setTitle(step.title)
-      setDescription(await step.description())
-      setImage(step.image)
-      setLink(step.link)
-
-      setTimeout(async () => {
-        const { height, width } = container.getBoundingClientRect()
-
-        if (step.elementXpath) {
-          const targetElement = await waitForElementByXPath(step.elementXpath)
-
-          if (!targetElement) {
-            console.warn(`Element not found after maximum attempts: ${step.elementXpath}`)
-            loading.current = false
-            return
-          }
-
-          if (targetElement && highlighterRef.current) {
-            const { top, left, width, height } = targetElement.getBoundingClientRect()
-            highlighterRef.current.style.top = `${top - 0}px`
-            highlighterRef.current.style.left = `${left - 0}px`
-            highlighterRef.current.style.width = `${width + 0}px`
-            highlighterRef.current.style.height = `${height + 0}px`
-          }
-
-          // Position tutorial relative to target element
-          if (targetElement) {
-            const targetRect = targetElement.getBoundingClientRect()
-            const spaceBelow = window.innerHeight - targetRect.bottom
-            const spaceAbove = targetRect.top
-            const spaceRight = window.innerWidth - targetRect.right
-            const spaceLeft = targetRect.left
-
-            // Helper function to adjust horizontal position within viewport bounds
-            const adjustHorizontalPosition = (x: number) => {
-              // this is important to avoid the tutorial from overflowing at far left or right
-              return Math.max(20, Math.min(x, window.innerWidth - width - 20))
-            }
-
-            // Try to position below first
-            if (spaceBelow >= height + 20) {
-              const x = targetRect.left + targetRect.width / 2 - width / 2
-              moveComponent(adjustHorizontalPosition(x), targetRect.bottom + 20)
-            }
-            // Try above if not enough space below
-            else if (spaceAbove >= height + 20) {
-              const x = targetRect.left + targetRect.width / 2 - width / 2
-              moveComponent(adjustHorizontalPosition(x), targetRect.top - height - 20)
-            }
-            // Try right side
-            else if (spaceRight >= width + 20) {
-              moveComponent(targetRect.right + 20, targetRect.top + targetRect.height / 2 - height / 2)
-            }
-            // Try left side
-            else if (spaceLeft >= width + 20) {
-              moveComponent(targetRect.left - width - 20, targetRect.top + targetRect.height / 2 - height / 2)
-            }
-          }
-        } else {
-          if (highlighterRef.current) {
-            highlighterRef.current.style.top = '50%'
-            highlighterRef.current.style.left = '50%'
-            highlighterRef.current.style.width = '1px'
-            highlighterRef.current.style.height = '1px'
-          }
-          // Fallback to center of screen
-          moveComponent(window.innerWidth / 2 - width / 2, window.innerHeight / 2 - height / 2)
-        }
-      }, 1)
-
-      loading.current = false
-    }
-  }
-
-  const onClose = () => {
-    if (ref.current?.parentElement) {
-      ref.current.parentElement.style.transition = 'opacity 0.3s ease-out'
-      ref.current.parentElement.style.opacity = '0'
-      localStorage.setItem('motia-tutorial-closed', 'true')
-
-      setTimeout(() => {
-        if (ref.current?.parentElement) {
-          ref.current.parentElement.style.display = 'none'
-          setCurrentStep(0)
-        }
-      }, 300)
-    }
-  }
-
-  useEffect(() => {
-    importFile('tutorial/tutorial.tsx')
-      .then((module) => {
-        if (Array.isArray(module.steps) && module.steps.length > 0) {
-          MotiaTutorial.register(module.steps)
-        }
-      })
-      .catch((error) => {
-        // Tutorial file is optional, so we don't need to throw an error
-        console.log('Tutorial file not found or could not be loaded:', error.message)
-      })
-  }, [])
-
-  useEffect(() => {
-    const container = ref.current
-
-    if (container?.parentElement) {
-      container.parentElement.style.display = 'none'
-    }
-
-    const onOpen = () => {
-      if (container?.parentElement) {
-        setTotalSteps(MotiaTutorial.steps.length)
-        moveStep(0)
-      }
-    }
-
-    MotiaTutorial.onOpen(() => {
-      manualOpenRef.current = true
-      onOpen()
-    })
-
-    MotiaTutorial.onStepsRegistered(() => {
-      if (localStorage.getItem('motia-tutorial-closed') !== 'true') {
-        manualOpenRef.current = false
-        onOpen()
-      }
-    })
-  }, [])
-
-  return {
-    ref,
-    highlighterRef,
-    title,
-    description,
-    image,
-    link,
-    currentStep,
-    totalSteps,
-    onClose,
-    moveStep,
-    currentStepRef,
-    manualOpenRef,
-  }
-}

package/dist/src/components/tutorial/hooks/use-tutorial.ts

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react'
-import { MotiaTutorial } from '../engine/tutorial-engine'
-import type { TutorialStep } from '../engine/tutorial-types'
-
-export const useTutorial = () => {
-  const open = () => MotiaTutorial.open()
-  const [steps, setSteps] = useState<TutorialStep[]>([])
-
-  useEffect(() => {
-    MotiaTutorial.onStepsRegistered(() => setSteps(MotiaTutorial.steps))
-  }, [])
-
-  return { open, steps }
-}

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

@@ -1,46 +0,0 @@
-import { Button } from '@motiadev/ui'
-import { Book } from 'lucide-react'
-import type { FC } from 'react'
-import { motiaAnalytics } from '../../lib/motia-analytics'
-import { Tooltip } from '../ui/tooltip'
-import { useTutorial } from './hooks/use-tutorial'
-
-export const TutorialButton: FC = () => {
-  const { open, steps } = useTutorial()
-  const isTutorialFlowMissing = steps.length === 0
-
-  const onTutorialButtonClick = () => {
-    if (!isTutorialFlowMissing) {
-      open()
-    }
-
-    motiaAnalytics.track('tutorial_button_clicked', { isTutorialFlowMissing })
-  }
-
-  const trigger = (
-    <Button data-testid="tutorial-trigger" variant="default" onClick={() => onTutorialButtonClick()}>
-      <Book className="h-4 w-4" />
-      Tutorial
-    </Button>
-  )
-
-  if (isTutorialFlowMissing) {
-    return (
-      <Tooltip
-        content={
-          <div className="flex flex-col gap-4 p-4 max-w-[320px]">
-            <p className="text-sm wrap-break-word p-0 m-0">
-              In order to start the tutorial, you need to download the tutorial steps using the Motia CLI. In your
-              terminal execute the following command to create a new project:
-            </p>
-            <pre className="text-sm font-bold">npx motia@latest create</pre>
-          </div>
-        }
-      >
-        {trigger}
-      </Tooltip>
-    )
-  }
-
-  return trigger
-}

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

@@ -1,82 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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 }