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

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

@@ -0,0 +1,17 @@
+import type React from 'react'
+import type { EventNodeData } from '../../types/flow'
+
+const toTopic = (emit: string | { topic: string; label?: string; conditional?: boolean }) =>
+  typeof emit === 'string' ? emit : emit.topic
+
+export const Emits: React.FC<{ emits: EventNodeData['emits'] }> = ({ emits }) => {
+  return (
+    <div className="flex flex-col gap-2">
+      {emits.map((emit) => (
+        <div key={toTopic(emit)} data-testid={`emits__${toTopic(emit)}`}>
+          {toTopic(emit)}
+        </div>
+      ))}
+    </div>
+  )
+}

package/dist/src/publicComponents/base-node/feature-card.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@motiadev/ui'
+import type React from 'react'
+import type { Feature } from '../../types/file'
+
+type Props = {
+  feature: Feature
+  highlighted: boolean
+  onClick: () => void
+  onHover: () => void
+}
+
+export const FeatureCard: React.FC<Props> = ({ feature, highlighted, onClick, onHover }) => {
+  return (
+    <div
+      data-feature-id={feature.id}
+      className={cn(
+        'p-4 rounded-lg bg-card shadow-sm cursor-pointer hover:bg-card/50 border-2 border-transparent',
+        highlighted && 'border-2 border-accent-1000 bg-accent-100',
+      )}
+      onClick={onClick}
+      onMouseEnter={onHover}
+    >
+      <div className="text-md font-semibold text-foreground leading-tight whitespace-nowrap mb-2">{feature.title}</div>
+      <div className="text-sm font-medium text-muted-foreground leading-tight">{feature.description}</div>
+      {feature.link && (
+        <div className="text-sm font-medium text-muted-foreground leading-tight">
+          <a href={feature.link}>Learn more</a>
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/src/publicComponents/base-node/language-indicator.tsx

@@ -0,0 +1,131 @@
+import { cn } from '@motiadev/ui'
+import type { FC } from 'react'
+import type { EventNodeData } from '../../types/flow'
+
+type Props = { language: EventNodeData['language']; className?: string; size?: number; showLabel?: boolean }
+
+export const LanguageIndicator: FC<Props> = ({ language, className, size = 18, showLabel = false }) => {
+  const renderIcon = (language?: string) => {
+    if (language === 'typescript') {
+      return (
+        <>
+          {showLabel ? <>TypeScript</> : null}
+          <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
+            <path
+              d="M3 3V21H21V3H3ZM9 12H13.5V13.5H12V19.5H10.5V13.5H9V12ZM16.5 12H19.5V13.5H16.5V15H18C18.3975 15.0012 18.7783 15.1596 19.0593 15.4407C19.3404 15.7217 19.4988 16.1025 19.5 16.5V18C19.4988 18.3975 19.3404 18.7783 19.0593 19.0593C18.7783 19.3404 18.3975 19.4988 18 19.5H15V18H18V16.5H16.5C16.1025 16.4988 15.7217 16.3404 15.4407 16.0593C15.1596 15.7783 15.0012 15.3975 15 15V13.5C15.0012 13.1025 15.1596 12.7217 15.4407 12.4407C15.7217 12.1596 16.1025 12.0012 16.5 12Z"
+              fill="#0288D1"
+            />
+          </svg>
+        </>
+      )
+    }
+
+    if (language === 'javascript') {
+      return (
+        <>
+          {showLabel ? <>JavaScript</> : null}
+          <svg
+            width={size}
+            height={size}
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+          >
+            <g clipPath="url(#clip0_42_2938)">
+              <path
+                d="M0 0H20V20H0V0ZM18.3617 15.23C18.2158 14.3175 17.6217 13.5508 15.8592 12.8358C15.2458 12.5483 14.5642 12.3483 14.3617 11.8858C14.2858 11.6108 14.2742 11.4608 14.3233 11.2983C14.4483 10.76 15.0858 10.5983 15.5858 10.7483C15.9108 10.8483 16.2108 11.0983 16.3992 11.4983C17.2608 10.935 17.2608 10.935 17.8617 10.5608C17.6367 10.2108 17.525 10.06 17.3733 9.91083C16.8483 9.32333 16.1492 9.02333 15.0117 9.04917L14.4242 9.12333C13.8608 9.26083 13.3242 9.56083 12.9992 9.96083C12.0492 11.0367 12.3233 12.9117 13.4733 13.6867C14.6108 14.5367 16.2742 14.7233 16.4867 15.5242C16.6867 16.4992 15.7617 16.8117 14.8483 16.6992C14.1725 16.5492 13.7983 16.2108 13.3858 15.5858L11.8608 16.4617C12.0358 16.8617 12.2358 17.0358 12.5358 17.3858C13.9858 18.8492 17.6108 18.7742 18.2617 16.5492C18.2858 16.4742 18.4617 15.9617 18.3233 15.1742L18.3617 15.23ZM10.8758 9.1925H9.0025C9.0025 10.8075 8.995 12.4125 8.995 14.03C8.995 15.0567 9.0475 15.9992 8.88 16.2892C8.605 16.8633 7.89667 16.79 7.575 16.6892C7.245 16.5258 7.0775 16.3008 6.88333 15.9767C6.83083 15.8892 6.79167 15.8133 6.7775 15.8133L5.25667 16.7508C5.51083 17.2758 5.88167 17.7275 6.36 18.015C7.0725 18.44 8.03 18.5775 9.0325 18.3525C9.685 18.1642 10.2475 17.7767 10.5417 17.1767C10.9667 16.4017 10.8767 15.4517 10.8725 14.3883C10.8825 12.6767 10.8725 10.9642 10.8725 9.23917L10.8758 9.1925Z"
+                fill="white"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_42_2938">
+                <rect width="20" height="20" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+        </>
+      )
+    }
+
+    if (language === 'python') {
+      return (
+        <>
+          {showLabel ? <>Python</> : null}
+          <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
+            <path
+              d="M9.86 2C9.10148 2 8.37403 2.30132 7.83767 2.83767C7.30132 3.37403 7 4.10148 7 4.86V6.54H11.29C11.68 6.54 12 7.11 12 7.5H4.86C4.10148 7.5 3.37403 7.80132 2.83767 8.33767C2.30132 8.87403 2 9.60148 2 10.36V14.141C2 14.8995 2.30132 15.627 2.83767 16.1633C3.37403 16.6997 4.10148 17.001 4.86 17.001H6.04V14.321C6.03868 13.9459 6.11143 13.5742 6.25407 13.2273C6.3967 12.8803 6.60642 12.565 6.8712 12.2993C7.13598 12.0336 7.45061 11.8227 7.79704 11.6789C8.14347 11.535 8.51489 11.461 8.89 11.461H14.14C15.72 11.461 17 10.19 17 8.61V4.86C17 4.10148 16.6987 3.37403 16.1623 2.83767C15.626 2.30132 14.8985 2 14.14 2H9.86ZM9.14 3.61C9.54 3.61 9.86 3.73 9.86 4.32C9.86 4.91 9.54 5.211 9.14 5.211C8.75 5.211 8.43 4.911 8.43 4.321C8.43 3.731 8.75 3.61 9.14 3.61Z"
+              fill="#0288D1"
+            />
+            <path
+              d="M17.959 7V9.68C17.9602 10.055 17.8873 10.4266 17.7446 10.7734C17.602 11.1202 17.3922 11.4355 17.1274 11.7011C16.8627 11.9667 16.5481 12.1774 16.2017 12.3212C15.8554 12.465 15.484 12.539 15.109 12.539H9.86C9.48489 12.5377 9.11321 12.6104 8.76628 12.7531C8.41935 12.8957 8.10399 13.1054 7.83828 13.3702C7.57257 13.635 7.36175 13.9496 7.2179 14.296C7.07405 14.6425 7 15.0139 7 15.389V19.139C7 19.8975 7.30132 20.625 7.83767 21.1613C8.37403 21.6977 9.10148 21.999 9.86 21.999H14.14C14.8983 21.999 15.6256 21.6978 16.162 21.1617C16.6983 20.6255 16.9997 19.8983 17 19.14V17.46H12.709C12.319 17.46 12 16.89 12 16.5H19.14C19.8985 16.5 20.626 16.1987 21.1623 15.6623C21.6987 15.126 22 14.3985 22 13.64V9.86C22 9.10148 21.6987 8.37403 21.1623 7.83767C20.626 7.30132 19.8985 7 19.14 7H17.959ZM8.32 11.513L8.316 11.517L8.354 11.513H8.32ZM14.86 18.789C15.25 18.789 15.57 19.089 15.57 19.679C15.57 19.7722 15.5516 19.8646 15.516 19.9507C15.4803 20.0368 15.428 20.1151 15.362 20.181C15.2961 20.247 15.2178 20.2993 15.1317 20.335C15.0456 20.3706 14.9532 20.389 14.86 20.389C14.46 20.389 14.14 20.269 14.14 19.679C14.14 19.089 14.46 18.789 14.86 18.789Z"
+              fill="#FDD835"
+            />
+          </svg>
+        </>
+      )
+    }
+
+    if (language === 'go') {
+      return (
+        <>
+          {showLabel ? <>Go</> : null}
+          <svg viewBox="0 0 128 128" width={size} height={size} className={className}>
+            <path d="M108.7 64.4c-1.6-1.2-3.8-1.9-6-1.9-.1-3.6-.2-7.2-.2-10.7-.1-9.5-.1-19.3-2.6-28.6 6.5-2.5 6.2-7.6 5.9-9.2-.7-3.8-4-7.9-9-7.9-1.9 0-3.9.6-5.8 1.9C83.4 1.6 73 .5 62.5.5 53 1.3 46.4 2.8 41 5.4c-2.3 1.1-4.2 2.4-6 3.9-1.8-1.1-3.7-1.7-5.5-1.7-5.1 0-8.8 4.1-9.4 8.1-.6 4 1.6 7.3 6 8.9-2.2 8.9-1.5 18.1-.7 27 .3 3.7.6 7.6.7 11.4h-.5c-2.3 0-4.6.7-6.3 1.9-.7.5-2.1 2-2 3.3 0 .4.2.9.9 1.3.2 2.1 1.5 2.4 2.3 2.4 1.6 0 3.4-1.1 3.9-1.5.5-.3.9-.5 1.2-.6l.5-.2c-.1 2.2-.3 4.5-.5 7-.9 11.7-2 25 3.9 34.6 1.2 1.9 2.6 3.6 4.3 5.1l-.9.6c-2.7 1.9-6.7 4.7-4.3 8.5v.1c.4.4.6.5.9.5h.1c.3.5.9 1.6 2.4 1.6.6 0 1.3-.2 2-.6 1.1-.6 2.1-1.4 3-2.2 1.5-1.3 3-2.6 5-2.9l.6-.1.7.3c6.4 2.6 12.9 3.3 17.3 3.4h2.6c7.7 0 14.8-1.2 20.5-3.5 1.2-.5 2.4-1.1 3.5-1.7 1.2.5 2.3 1.7 3.4 3 1.4 1.6 2.8 3.2 4.5 3.2.8 0 1.6-.4 2.4-1.1 1.2-.7 1.8-1.7 1.8-2.9 0-2.6-2.9-5.7-5.2-7.2 2-2 3.6-4.2 4.9-6.7 5.9-11.8 5-26.2 4.2-39l.5.3c.5.4 2.3 1.5 3.9 1.5.8 0 2.1-.3 2.3-2.4.7-.4.8-.9.9-1.3 0-1.3-1.4-2.8-2.1-3.3zm-17.1-56c1.7-1.1 3.4-1.7 5.2-1.7 4.4 0 7.7 3.7 8.3 7.3.6 3.7-1.4 6.8-5.4 8.4 0-.2-.1-.3-.2-.5l-.6-2.1-.3-.8-.9-2.4c0-.1 0-.1-.1-.2 0 0 0-.1-.1-.1-.4-.7-.7-1.4-1.1-2l-.2-.3-1.2-1.8c-.1-.1-.2-.2-.3-.4-.4-.5-.8-1-1.3-1.5-.1-.2-.3-.3-.5-.5l-1.2-1.2c.1.1 0-.1-.1-.2-.2zM26.3 23.9c-4-1.5-6.1-4.5-5.5-8.1.6-3.7 4-7.5 8.7-7.5 1.7 0 3.3.5 4.9 1.4l-.1.1-.3.3c-.5.5-1 1-1.4 1.5l-.3.3c-.5.6-1 1.2-1.5 1.9l-.2.3c-.5.7-.9 1.3-1.3 2 0 0 0 .1-.1.1-.4.7-.8 1.5-1.1 2.3 0 .2-.1.4-.1.5-.3.8-.7 1.6-.9 2.4 0 .1 0 .1-.1.2l-.6 2-.1.3zm-.9 45.2c-.3.1-.8.3-1.4.7-1 .7-2.4 1.4-3.5 1.4-.6 0-1.4-.2-1.6-1.7.5-.2 1-.4 1.4-.9.1-.2.1-.4-.1-.5-.2-.1-.4-.1-.5.1-.3.3-.6.5-1.1.6h-.1c-.3-.2-.5-.4-.6-.7.1-.9 1.1-2.1 1.8-2.7 1.6-1.2 3.7-1.8 5.9-1.8h.6v2.9l-.1 1c-.1 1.4-.2 1.4-.7 1.6zm15.8 52l.1.1c-1.9.5-3.4 1.7-4.8 2.9-.9.8-1.8 1.6-2.9 2.1-.6.4-1.1.5-1.6.5-1 0-1.5-.8-1.7-1.2.1-.8.5-1.5 1-2.2.3-.4.6-.9.8-1.4.1-.2 0-.4-.2-.5-.2-.1-.4 0-.5.2-.2.4-.5.8-.7 1.3-.4.7-.9 1.4-1.1 2.2h-.1c-.1 0-.2-.1-.4-.3-2-3.2 1.4-5.5 4.2-7.5l.9-.6h.2l.2.1 1.2.9.4.3c.4.3.8.6 1.3.9l.5.3 1.3.8.6.3c.4.3.8.5 1.3.8zm52.3-5.3c2.1 1.4 5 4.4 5 6.7 0 .8-.4 1.5-1.1 2-.1-.3-.2-.6-.4-.9-.3-.9-.7-1.9-1.5-2.6-.1-.1-.4-.1-.5 0-.1.1-.1.4 0 .5.7.6 1 1.5 1.3 2.4l.4 1.1c-.6.5-1.2.8-1.8.8-1.4 0-2.6-1.5-3.9-3-1-1.1-2-2.3-3.1-3l.3-.2c.3-.1.5-.3.7-.5l1.3-.9.8-.6 1.4-1.1c.2-.2.4-.4.7-.6.2.1.3 0 .4-.1zm4.7-7.5c-1.2 2.5-3.4 5.7-7.1 8.5l-.2.1c-.3.3-.7.5-1.1.8l-1.1.7-.2.1-1.6.9-.7.4c-5.4 2.8-12.8 4.8-23.2 4.8h-2.6c-8.1-.3-14.3-2-18.9-4.2h-.1c-1.1-.5-2.1-1.1-3.1-1.7-4.6-2.9-7.1-6.1-8.3-8-5.8-9.4-4.8-22.5-3.8-34.1.2-3 .5-5.7.6-8.4l.1-1.8.1-.1v-.1l-.1-.5V63c-.1-4-.4-7.7-.7-11.5-.8-9-1.5-18.4.9-27.4.2-.8.4-1.6.7-2.3v-.1l.1-.3c.1-.4.3-.8.5-1.2.1-.3.2-.5.3-.7l.3-.8.4-.8.3-.6c.1-.3.3-.6.4-.8.1-.2.2-.4.3-.5.2-.4.5-.8.7-1.1.2-.3.4-.6.6-.8.1-.2.2-.3.4-.5l.6-.8c.1-.1.2-.2.3-.4l.9-1 .1-.1 1.2-1.2.2-.2c7-6 17-7.8 27.1-8.6 5.9 0 13.5.3 20 2.7 3.2 1.2 6 2.8 8.4 4.9.3.3.6.6.9.8l.9.9 1 1.2.6.7 1 1.4.5.7.9 1.5.4.8c.3.6.5 1.3.7 2 0 .1.1.2.1.4.2.6.4 1.2.6 1.7l.1.3c3 9.9 3.1 20.2 3.1 30.4 0 3.5 0 7.4.2 10.4v.6c0 .9.1 1.8.1 2.5v.1l.1 1.9c0 .6.1 1.3.1 2v.3c.9 12.6 1.9 27.1-4 38.8zm11.2-40c-.5-.2-.9-.3-1.2-.7-.1-.2-.3-.2-.5-.1s-.2.3-.1.5c.4.5.9.7 1.4.9-.2 1.5-1 1.7-1.6 1.7-1.1 0-2.5-.7-3.5-1.4-.4-.3-.7-.4-1-.5l-.2-2.4c0-.4 0-.8-.1-1.1 0-.6-.1-1.3-.1-2 2.1.1 4.1.7 5.6 1.8.7.5 1.8 1.8 1.7 2.6.1.3-.1.6-.4.7zM77.7 7.2c-3.8 0-7.5 1.6-9.9 4.1-2.2 2.4-3.3 5.4-3.1 8.8v.1C66 27.4 72 30 76.8 30c4.2 0 8.1-1.8 10.4-4.7 2-2.5 2.7-5.8 1.8-9.3-1.5-6.4-6.8-8.8-11.3-8.8zm8.9 17.5c-2.1 2.7-5.9 4.3-9.9 4.3-2.7 0-5.2-.7-7.2-2.1-2.2-1.6-3.6-3.9-4.1-6.9-.2-3.2.8-6 2.9-8.2 2.3-2.5 5.8-3.9 9.4-3.9 4.2 0 9.2 2.1 10.6 8.1.8 3.4.2 6.4-1.7 8.7zm-27-5.5c-.4-7.3-6.2-10.6-11.8-10.6-4.1 0-7.9 1.7-10.3 4.5-2.1 2.6-2.8 5.9-2.1 9.6 1.6 6.3 7 8.5 11.5 8.5 3.8 0 7.4-1.5 9.8-4 2.1-2.2 3.1-5 2.9-8zM47 30.5c-4.2 0-9.3-2.1-10.8-8-.7-3.5 0-6.6 2-9 2.2-2.7 5.8-4.3 9.7-4.3 7.7 0 10.8 5.4 11.1 10 .2 2.9-.7 5.5-2.6 7.5-2.3 2.4-5.8 3.8-9.4 3.8zm-5.4-13.9c-1.9 0-3.5 1.7-3.5 3.8 0 2.1 1.6 3.8 3.5 3.8s3.5-1.7 3.5-3.8c0-2.1-1.6-3.8-3.5-3.8zm1.6 5.7c-.5 0-.8-.4-.8-1 0-.5.4-1 .8-1 .5 0 .8.4.8 1 0 .5-.4 1-.8 1zm27.9-6.6c-1.9 0-3.5 1.7-3.5 3.8 0 2.1 1.6 3.8 3.5 3.8s3.5-1.7 3.5-3.8c0-2.1-1.5-3.8-3.5-3.8zm1.6 5.6c-.5 0-.8-.4-.8-1 0-.5.4-1 .8-1 .5 0 .8.4.8 1s-.3 1-.8 1zm-4.2 9c.1-.3.1-.7 0-1.1-1.1-4.1-10.4-3.5-10.4 1.3 0-.4-.1-.6-.1-.8 0 .3.1.6.1.8-1.5.2-2.8 1.2-3.6 2.7-.7 1.4-.8 2.9-.1 4.2.6 1.1 1.6 1.7 2.8 1.7-.4 2.1 0 4.6 1 6 .5.7 1.2 1.1 1.8 1.1.9 0 1.9-.7 2.8-1.8.6 1 1.5 1.7 2.7 1.9h.2c.2-.1.4-.2.6-.2.7-.2 1.4-.5 1.9-1.3v-.1c.3-1.4.1-2.9 0-4.3l-.1-1.2c.5.2 1 .3 1.5.3 1 0 1.8-.4 2.5-1.2.9-1 1.2-2 1-3-.1-2.3-2.4-4-4.6-5zm-5.9 13.2c-.9 1.1-1.7 1.7-2.4 1.7-.5 0-.9-.3-1.3-.7-.9-1.2-1.3-3.7-.9-5.6l.5-.1h.2l.6-.1h.1l1.2-.4.6-.2c.1 0 .1 0 .2-.1.2-.1.3-.1.5-.1.2-.1.4-.1.7-.2h.2l-.1 1.3c-.1 1.3-.2 2.9-.1 4.5zm5.2-3.3c.1 1.3.2 2.7 0 4-.3.6-.8.7-1.5 1l-.6.2c-1-.2-1.8-.8-2.2-1.8-.2-1.5-.1-3 .1-4.6l.1-1.5h.1c1.1 0 2.1.5 3.1.9l.7.3c.1.4.2.9.2 1.5zm4.1-2.7c-.6.7-1.3 1-2 1-.6 0-1.1-.2-1.7-.4-.3-.1-.6-.2-.9-.4-1.1-.4-2.2-.9-3.4-.9h-1.3l-.4.1c-.1 0-.2 0-.3.1-.2 0-.3.1-.5.2-.1 0-.2 0-.2.1l-.8.3c-.1.1-.3.1-.4.1l-.3.1-.3.1c-.2.1-.3.1-.5.1-.1 0-.2 0-.3.1l-.5.1h-.2l-.6.1c-1 0-1.7-.4-2.2-1.3-.6-1-.6-2.3.1-3.5.7-1.2 1.9-2.1 3.1-2.3 1.2 2.5 8.1 2.2 9.9-.2 2 .9 4.2 2.5 4.5 4.2.2.7-.1 1.5-.8 2.3zM58 29.4z"></path>
+          </svg>
+        </>
+      )
+    }
+
+    if (language === 'ruby') {
+      return (
+        <>
+          {showLabel ? <>Ruby</> : null}
+          <svg
+            width={size}
+            height={size}
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+          >
+            <g clipPath="url(#clip0_42_2969)">
+              <path
+                d="M16.7967 0.0691243C19.3242 0.506624 20.0408 2.23412 19.9875 4.04412L20 4.01829L18.8625 18.925L4.075 19.9383H4.08833C2.86083 19.8866 0.125 19.7741 0 15.9491L1.37083 13.4491L3.72 18.9375L4.13917 19.9141L6.47667 12.2941L6.45167 12.3L6.465 12.275L14.1775 14.7383L13.0142 10.2125L12.1892 6.96246L19.5392 6.48829L19.0267 6.06329L13.75 1.76162L16.7992 0.060791L16.7967 0.0691243ZM4.275 4.22746C7.2425 1.28329 11.0725 -0.456709 12.5433 1.02746C14.0117 2.50829 12.4558 6.11496 9.4825 9.05746C6.51333 12.0008 2.73 13.8358 1.2625 12.355C-0.209167 10.8741 1.3 7.17412 4.2725 4.22996L4.275 4.22746Z"
+                fill="white"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_42_2969">
+                <rect width="20" height="20" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+        </>
+      )
+    }
+
+    if (language === 'php') {
+      return (
+        <>
+          {showLabel ? <>PHP</> : null}
+          <svg viewBox="0 0 128 128" width={size} height={size} className={className}>
+            <path d="M64 30.332C28.654 30.332 0 45.407 0 64s28.654 33.668 64 33.668c35.345 0 64-15.075 64-33.668S99.346 30.332 64 30.332zm-5.982 9.81h7.293v.003l-1.745 8.968h6.496c4.087 0 6.908.714 8.458 2.139 1.553 1.427 2.017 2.017 3.737 3.737 5.946 1.719 2.209-2.209 2.209-5.928 0-8.137zm-51.051 51.372c0-3.757-1.072-5.686-3.214-5.791a6.03 6.03 0 00-2.495.409c-.646.231-1.082.461-1.311.692v8.968c1.371.86 2.588 1.26 3.649 1.197 2.247-.148 3.371-1.971 3.371-5.475zm2.643.157c0 1.909-.447 3.493-1.348 4.753-1.003 1.427-2.394 2.16-4.172 2.201-1.34.043-2.721-.378-4.142-1.258v8.151l-2.298-.82V107.14c.377-.462.862-.859 1.451-1.196 1.368-.798 3.031-1.207 4.987-1.228l.033.032c1.788-.022 3.166.712 4.134 2.201.902 1.366 1.355 3.117 1.355 5.257zm14.049 5.349c0 2.56-.257 4.333-.77 5.318-.516.986-1.497 1.773-2.945 2.359-1.174.463-2.444.714-3.808.757l-.38-1.448c1.386-.188 2.362-.378 2.928-.566 1.114-.377 1.878-.955 2.298-1.73.337-.631.503-1.835.503-3.618v-.599a11.809 11.809 0 01-4.941 1.068c-1.132 0-2.13-.354-2.99-1.068-.966-.777-1.449-1.764-1.449-2.958v-9.566l2.299-.787v9.63c0 1.028.332 1.82.996 2.376s1.524.822 2.578.803c1.054-.022 2.183-.431 3.382-1.228v-11.234h2.299v12.491zm8.973 1.479a9.457 9.457 0 01-.757.032c-1.3 0-2.314-.309-3.038-.93-.722-.622-1.084-1.479-1.084-2.573v-9.054h-1.574v-1.446h1.574v-3.84l2.296-.817v4.657h2.583v1.446h-2.583v8.991c0 .862.231 1.474.694 1.83.397.295 1.029.463 1.889.506v1.198zm13.917-.189h-2.298v-8.873c0-.902-.211-1.68-.631-2.329-.485-.734-1.159-1.102-2.024-1.102-1.054 0-2.372.556-3.954 1.668v10.636h-2.298V97.637l2.298-.725v9.659c1.469-1.068 3.073-1.604 4.816-1.604 1.218 0 2.203.41 2.958 1.228.757.817 1.134 1.836 1.134 3.053v9.597h-.001zm12.218-7.157c0-1.444-.274-2.636-.82-3.579-.649-1.149-1.657-1.756-3.021-1.818-2.52.146-3.778 1.951-3.778 5.412 0 1.587.262 2.912.79 3.976.674 1.356 1.685 2.024 3.033 2.002 2.531-.02 3.796-2.017 3.796-5.993zm2.518.015c0 2.055-.526 3.765-1.575 5.131-1.154 1.528-2.749 2.296-4.783 2.296-2.017 0-3.589-.768-4.723-2.296-1.028-1.366-1.542-3.076-1.542-5.131 0-1.932.556-3.556 1.668-4.879 1.174-1.403 2.718-2.107 4.627-2.107 1.909 0 3.463.704 4.66 2.107 1.111 1.323 1.668 2.947 1.668 4.879zm13.178 7.142h-2.299v-9.376c0-1.028-.31-1.831-.928-2.409-.619-.576-1.443-.855-2.472-.833-1.091.021-2.13.378-3.116 1.069v11.549h-2.299v-11.833c1.323-.963 2.54-1.592 3.652-1.886 1.049-.274 1.974-.41 2.771-.41.545 0 1.059.053 1.542.158.903.209 1.637.596 2.203 1.164.631.629.946 1.384.946 2.267v10.54z"></path>
+          </svg>
+        </>
+      )
+    }
+
+    return
+  }
+  return (
+    <div
+      className={cn('text-muted-foreground', {
+        'text-sm flex items-center justify-center flex-row gap-2': showLabel,
+        'font-mono text-xs': !showLabel,
+      })}
+    >
+      {renderIcon(language)}
+    </div>
+  )
+}

package/dist/src/publicComponents/base-node/node-header.tsx

@@ -0,0 +1,49 @@
+import { cn } from '@motiadev/ui'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { CalendarClock, CircleOff, Link2, Waypoints } from 'lucide-react'
+import type React from 'react'
+import type { PropsWithChildren } from 'react'
+
+const baseIcon = cva('rounded-md p-2', {
+  variants: {
+    variant: {
+      event: 'bg-[rgba(30,118,231,0.2)] text-[rgb(30,118,231)]',
+      api: 'dark:bg-[rgba(192,255,17,0.2)] dark:text-[rgb(192,255,17)] bg-[rgb(231,255,166)] text-[rgb(94,125,11)]',
+      noop: 'bg-[rgba(239,18,229,0.2)] text-[rgb(239,18,229)]',
+      cron: 'bg-[rgba(241,105,15,0.2)] text-[rgb(241,105,15)]',
+    },
+  },
+})
+
+const NodeIcon = ({ variant }: { variant: VariantProps<typeof baseIcon>['variant'] }) => {
+  if (variant === 'cron') {
+    return <CalendarClock className="w-5 h-5" />
+  } else if (variant === 'api') {
+    return <Link2 className="w-5 h-5" />
+  } else if (variant === 'noop') {
+    return <CircleOff className="w-5 h-5" />
+  } else if (variant === 'event') {
+    return <Waypoints className="w-5 h-5" />
+  }
+  return <div className={cn(baseIcon({ variant }))}>Icon</div>
+}
+
+type Props = PropsWithChildren<{
+  text: string
+  variant: VariantProps<typeof baseIcon>['variant']
+  className?: string
+}>
+
+export const NodeHeader: React.FC<Props> = ({ text, variant, children, className }) => (
+  <div className={cn('flex items-center gap-2 p-2', className)}>
+    <div className={baseIcon({ variant })}>
+      <NodeIcon variant={variant} />
+    </div>
+    <div className="flex flex-1 justify-between items-start gap-4">
+      <div className="flex flex-col">
+        <div className="text-sm font-semibold leading-[1.25] tracking-[-0.25px]">{text}</div>
+      </div>
+      {children}
+    </div>
+  </div>
+)

package/dist/src/publicComponents/base-node/node-sidebar.tsx

@@ -0,0 +1,41 @@
+import { Sidebar } from '@motiadev/ui'
+import { X } from 'lucide-react'
+import type React from 'react'
+import type { Feature } from '../../types/file'
+import { CodeDisplay } from './code-display'
+
+type NodeSidebarProps = {
+  content: string
+  features: Feature[]
+  title: string
+  subtitle?: string
+  variant: 'event' | 'api' | 'noop' | 'cron'
+  language?: string
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const NodeSidebar: React.FC<NodeSidebarProps> = ({
+  content,
+  title,
+  subtitle,
+  language,
+  isOpen,
+  onClose,
+  features,
+}) => {
+  if (!isOpen) return null
+
+  return (
+    <Sidebar
+      title={title}
+      subtitle={subtitle}
+      initialWidth={900}
+      contentClassName="p-0 h-full gap-0"
+      onClose={onClose}
+      actions={[{ icon: <X />, onClick: onClose, label: 'Close' }]}
+    >
+      <CodeDisplay code={content} language={language} features={features} />
+    </Sidebar>
+  )
+}

package/dist/src/publicComponents/base-node/subscribe.tsx

@@ -0,0 +1,13 @@
+import type React from 'react'
+
+export const Subscribe: React.FC<{ subscribes: string[] }> = ({ subscribes }) => {
+  return (
+    <div className="flex flex-col gap-2">
+      {subscribes.map((subscribe) => (
+        <div key={subscribe} data-testid={`subscribes__${subscribe}`}>
+          {subscribe}
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { Clock } from 'lucide-react'
+import type React from 'react'
+import type { PropsWithChildren } from 'react'
+import { BaseNode } from './base-node/base-node'
+import type { CronNodeProps } from './node-props'
+
+export const CronNode: React.FC<PropsWithChildren<CronNodeProps>> = ({ data, children }) => {
+  return (
+    <BaseNode
+      data={data}
+      variant="cron"
+      title={data.name}
+      subtitle={data.description}
+      language={data.language}
+      disableTargetHandle={!data.virtualSubscribes?.length}
+      disableSourceHandle={!data.virtualEmits?.length && !data.emits?.length}
+    >
+      <div className="text-xs text-muted-foreground flex items-center gap-2">
+        <Clock className="w-3 h-3" /> {data.cronExpression}
+      </div>
+      {children}
+    </BaseNode>
+  )
+}

package/dist/src/publicComponents/event-node.tsx

@@ -0,0 +1,20 @@
+import type React from 'react'
+import type { PropsWithChildren } from 'react'
+import { BaseNode } from './base-node/base-node'
+import type { EventNodeProps } from './node-props'
+
+export const EventNode: React.FC<PropsWithChildren<EventNodeProps>> = ({ data, children }) => {
+  return (
+    <BaseNode
+      data={data}
+      variant="event"
+      title={data.name}
+      subtitle={data.description}
+      language={data.language}
+      disableSourceHandle={!data.emits?.length && !data.virtualEmits?.length}
+      disableTargetHandle={!data.subscribes?.length && !data.virtualSubscribes?.length}
+    >
+      {children}
+    </BaseNode>
+  )
+}

package/dist/src/publicComponents/node-props.tsx

@@ -0,0 +1,15 @@
+import type { ApiNodeData, CronNodeData, EventNodeData, NoopNodeData } from '../types/flow'
+
+export type NodeProps = EventNodeProps | NoopNodeProps | ApiNodeProps | CronNodeProps
+export type BaseNodeProps = {
+  id: string
+  nodeConfig?: {
+    sourceHandlePosition?: 'bottom' | 'right'
+    targetHandlePosition?: 'top' | 'left'
+  }
+}
+
+export type EventNodeProps = { data: BaseNodeProps & EventNodeData }
+export type NoopNodeProps = { data: BaseNodeProps & NoopNodeData }
+export type ApiNodeProps = { data: BaseNodeProps & ApiNodeData }
+export type CronNodeProps = { data: BaseNodeProps & CronNodeData }

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

@@ -0,0 +1,19 @@
+import type React from 'react'
+import type { PropsWithChildren } from 'react'
+import { BaseNode } from './base-node/base-node'
+import type { NoopNodeProps } from './node-props'
+
+export const NoopNode: React.FC<PropsWithChildren<NoopNodeProps>> = ({ data, children }) => {
+  return (
+    <BaseNode
+      data={data}
+      variant="noop"
+      title={data.name}
+      subtitle={data.description}
+      disableSourceHandle={!data.virtualEmits.length}
+      disableTargetHandle={!data.subscribes?.length}
+    >
+      {children}
+    </BaseNode>
+  )
+}

package/dist/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/dist/src/stores/use-app-tabs-store.ts

@@ -0,0 +1,49 @@
+import { create } from 'zustand'
+
+export enum TabLocation {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
+
+export type AppTab = {
+  id: string
+  tabLabel: React.ElementType
+  content: React.ElementType
+}
+
+export interface AppTabsState {
+  tabs: Record<TabLocation, AppTab[]>
+  addTab: (position: TabLocation, tab: AppTab) => void
+  setTabs: (position: TabLocation, tabs: AppTab[]) => void
+  removeTab: (position: TabLocation, id: string) => void
+}
+
+const defaultTabs: Record<TabLocation, AppTab[]> = {
+  [TabLocation.TOP]: [],
+  [TabLocation.BOTTOM]: [],
+}
+
+export const useAppTabsStore = create<AppTabsState>((set) => ({
+  tabs: defaultTabs,
+  addTab: (position: TabLocation, tab: AppTab) =>
+    set((state) => ({
+      tabs: {
+        ...state.tabs,
+        [position]: [...state.tabs[position], tab],
+      },
+    })),
+  setTabs: (position: TabLocation, tabs: AppTab[]) =>
+    set((state) => ({
+      tabs: {
+        ...state.tabs,
+        [position]: tabs,
+      },
+    })),
+  removeTab: (position: TabLocation, id: string) =>
+    set((state) => ({
+      tabs: {
+        ...state.tabs,
+        [position]: state.tabs[position].filter((tab) => tab.id !== id),
+      },
+    })),
+}))

package/dist/src/stores/use-flow-store.ts

@@ -0,0 +1,31 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+type UseFlowStore = {
+  selectedFlowId?: string
+  selectFlowId: (flowId: string) => void
+  clearSelectedFlowId: () => void
+  flows: string[]
+  setFlows: (flows: string[]) => void
+}
+
+export const useFlowStore = create(
+  persist<UseFlowStore>(
+    (set) => ({
+      flows: [],
+      setFlows: (flows) => set({ flows }),
+      selectFlowId: (flowId) =>
+        set((state) => {
+          if (state.selectedFlowId === flowId) {
+            return state
+          }
+          return { selectedFlowId: flowId }
+        }),
+      clearSelectedFlowId: () => set({ selectedFlowId: undefined }),
+    }),
+    {
+      name: 'motia-flow-storage',
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+)

package/dist/src/stores/use-global-store.ts

@@ -0,0 +1,24 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+type UseGlobalStore = {
+  selectedEndpointId?: string
+  selectEndpointId: (endpointId?: string) => void
+}
+
+const select = (id: string | undefined, name: keyof UseGlobalStore) => (state: UseGlobalStore) => {
+  return id ? (state[name] === id ? state : { ...state, [name]: id }) : { ...state, [name]: undefined }
+}
+
+export const useGlobalStore = create(
+  persist<UseGlobalStore>(
+    (set) => ({
+      selectedEndpointId: undefined,
+      selectEndpointId: (endpointId) => set(select(endpointId, 'selectedEndpointId')),
+    }),
+    {
+      name: 'motia-global-storage',
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+)

package/dist/src/stores/use-motia-config-store.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+
+interface MotiaConfig {
+  isDev: boolean
+  isTutorialDisabled: boolean
+}
+
+interface MotiaConfigState {
+  config: MotiaConfig | null
+  isLoading: boolean
+  error: Error | null
+  fetchConfig: () => Promise<void>
+}
+
+export const useMotiaConfigStore = create<MotiaConfigState>((set, get) => ({
+  config: null,
+  isLoading: false,
+  error: null,
+  fetchConfig: async () => {
+    const { config, isLoading } = get()
+    if (isLoading || config) return
+
+    set({ isLoading: true, error: null })
+    try {
+      const response = await fetch('/__motia')
+      if (!response.ok) {
+        throw new Error(`Failed to fetch Motia config: ${response.statusText}`)
+      }
+      const data = await response.json()
+      set({ config: data, isLoading: false })
+    } catch (error) {
+      console.error('Failed to fetch Motia config:', error)
+      set({ error: error as Error, isLoading: false })
+    }
+  },
+}))

package/dist/src/stores/use-tabs-store.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+import { motiaAnalytics } from '../lib/motia-analytics'
+
+interface TabsState {
+  tab: Record<string, string>
+  setTopTab: (tab: string) => void
+  setBottomTab: (tab: string) => void
+}
+
+export const useTabsStore = create(
+  persist<TabsState>(
+    (set, get) => ({
+      tab: {
+        top: 'flow',
+        bottom: 'tracing',
+      },
+      setTopTab: (tab) => {
+        const currentTab = get().tab
+        motiaAnalytics.track('Top panel tab changed', { 'new.top': tab, tab: currentTab })
+        set((state) => ({ tab: { ...state.tab, top: tab } }))
+      },
+      setBottomTab: (tab) => {
+        const currentTab = get().tab
+        motiaAnalytics.track('Bottom panel tab changed', { 'new.bottom': tab, tab: currentTab })
+        set((state) => ({ tab: { ...state.tab, bottom: tab } }))
+      },
+    }),
+    {
+      name: 'motia-tabs-storage',
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+)

package/dist/src/system-view-mode.tsx

@@ -0,0 +1,28 @@
+import { APP_SIDEBAR_CONTAINER_ID, CollapsiblePanelGroup } from '@motiadev/ui'
+import { memo } from 'react'
+import { BottomPanel } from './components/bottom-panel'
+import { Header } from './components/header/header'
+import { TopPanel } from './components/top-panel'
+
+export const SystemViewMode = memo(() => {
+  return (
+    <div className="grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen">
+      <div className="col-span-2">
+        <Header />
+      </div>
+      <main className="m-2 overflow-hidden">
+        <CollapsiblePanelGroup
+          autoSaveId="app-panel"
+          direction="vertical"
+          className="gap-1 h-full"
+          aria-label="Workbench panels"
+        >
+          <TopPanel />
+          <BottomPanel />
+        </CollapsiblePanelGroup>
+      </main>
+      <div id={APP_SIDEBAR_CONTAINER_ID} />
+    </div>
+  )
+})
+SystemViewMode.displayName = 'SystemViewMode'

package/dist/src/types/endpoint.ts

@@ -0,0 +1,12 @@
+export type ApiRouteMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTIONS' | 'HEAD'
+export type QueryParam = { name: string; description: string }
+
+export type ApiEndpoint = {
+  id: string
+  method: ApiRouteMethod
+  path: string
+  description?: string
+  queryParams?: QueryParam[]
+  responseSchema?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
+  bodySchema?: Record<string, Record<string, any>> // eslint-disable-line @typescript-eslint/no-explicit-any
+}

package/dist/src/types/file.ts

@@ -0,0 +1,7 @@
+export type Feature = {
+  id?: string
+  title: string
+  description: string
+  lines: string[]
+  link?: string
+}