@motiadev/workbench 0.0.1

package/src/views/flow/nodes/json-schema-form.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState } from 'react'
+import { JSONSchema7 } from 'json-schema'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+
+interface JsonSchemaFormProps {
+  schema: JSONSchema7
+  formData?: any
+  onChange?: (data: any) => void
+}
+
+export const JsonSchemaForm: React.FC<JsonSchemaFormProps> = ({ schema, formData = {}, onChange }) => {
+  const [values, setValues] = useState(formData)
+
+  useEffect(() => {
+    onChange?.(values)
+  }, [values, onChange])
+
+  const renderField = (propertyName: string, propertySchema: JSONSchema7) => {
+    const value = values[propertyName]
+
+    switch (propertySchema.type) {
+      case 'string':
+        if (propertySchema.enum) {
+          return (
+            <div className="space-y-2" key={propertyName}>
+              <Label>{propertySchema.title || propertyName}</Label>
+              <Select value={value} onValueChange={(newValue) => setValues({ ...values, [propertyName]: newValue })}>
+                <SelectTrigger>
+                  <SelectValue placeholder={propertySchema.description || `Select ${propertyName}`} />
+                </SelectTrigger>
+                <SelectContent>
+                  {propertySchema.enum.map((option) => (
+                    <SelectItem key={String(option)} value={String(option)}>
+                      {String(option)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )
+        }
+
+        if (propertySchema.format === 'textarea') {
+          return (
+            <div className="space-y-2" key={propertyName}>
+              <Label>{propertySchema.title || propertyName}</Label>
+              <Textarea
+                placeholder={propertySchema.description}
+                value={value || ''}
+                onChange={(e) => setValues({ ...values, [propertyName]: e.target.value })}
+              />
+            </div>
+          )
+        }
+
+        return (
+          <div className="space-y-2" key={propertyName}>
+            <Label>{propertySchema.title || propertyName}</Label>
+            <Input
+              type="text"
+              placeholder={propertySchema.description}
+              value={value || ''}
+              onChange={(e) => setValues({ ...values, [propertyName]: e.target.value })}
+            />
+          </div>
+        )
+
+      case 'number':
+      case 'integer':
+        return (
+          <div className="space-y-2" key={propertyName}>
+            <Label>{propertySchema.title || propertyName}</Label>
+            <Input
+              type="number"
+              placeholder={propertySchema.description}
+              value={value || ''}
+              onChange={(e) => setValues({ ...values, [propertyName]: Number(e.target.value) })}
+            />
+          </div>
+        )
+
+      case 'boolean':
+        return (
+          <div className="flex items-center space-x-2" key={propertyName}>
+            <Switch
+              checked={value || false}
+              onCheckedChange={(checked) => setValues({ ...values, [propertyName]: checked })}
+            />
+            <Label>{propertySchema.title || propertyName}</Label>
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  return (
+    <form className="space-y-4">
+      {schema.properties &&
+        Object.entries(schema.properties).map(([propertyName, propertySchema]) =>
+          renderField(propertyName, propertySchema as JSONSchema7),
+        )}
+    </form>
+  )
+}

package/src/views/flow/nodes/language-indicator.tsx

@@ -0,0 +1,74 @@
+import { FC } from 'react'
+import { EventNodeData } from './nodes.types'
+
+type Props = { language: EventNodeData['language'] }
+
+export const LanguageIndicator: FC<Props> = ({ language }) => {
+  const renderIcon = (language?: string) => {
+    if (language === 'typescript') {
+      return (
+        <svg viewBox="0 0 128 128">
+          <path fill="#fff" d="M22.67 47h99.67v73.67H22.67z"></path>
+          <path
+            data-name="original"
+            fill="#007acc"
+            d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z"
+          ></path>
+        </svg>
+      )
+    }
+
+    if (language === 'javascript') {
+      return (
+        <svg viewBox="0 0 128 128">
+          <path fill="#fff" d="M1.408 1.408h125.184v125.185H1.408z"></path>
+          <path
+            fill="#323330"
+            d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"
+          ></path>
+        </svg>
+      )
+    }
+
+    if (language === 'python') {
+      return (
+        <svg viewBox="0 0 128 128">
+          <path
+            fill="#ddd"
+            d="M40 68V57.921C40 50.948 46.218 45 53.383 45h21.102C80.359 45 84 39.96 84 34.062V13.945c0-5.726-4.306-10.026-10.04-10.981a62.801 62.801 0 00-10.743-.862c-3.611.017-7.339.324-10.374.862C43.902 4.542 42 7.848 42 13.945V22h21v3H34.891c-6.14 0-11.516 3.53-13.198 10.552-1.939 8.047-2.025 13.202 0 21.605C23.195 63.411 26.782 68 32.921 68H40zm12.054-51.372c-2.19 0-3.964-1.795-3.964-4.013 0-2.229 1.773-4.039 3.964-4.039 2.182 0 3.964 1.811 3.964 4.039 0 2.218-1.782 4.013-3.964 4.013zm54.121 18.924C104.658 29.438 101.759 25 95.612 25H87v9.062C87 41.335 81.516 48 74.485 48H53.383C47.603 48 42 52.403 42 58.193V78.31c0 5.725 5.388 9.093 10.974 10.734 6.686 1.967 12.781 2.322 20.782 0C79.074 87.504 84 84.406 84 78.31V71H63v-3h32.611c6.14 0 8.428-4.416 10.563-10.843 2.206-6.618 2.112-13.115.001-21.605zM75.814 75.625c2.19 0 3.965 1.795 3.965 4.015 0 2.227-1.774 4.037-3.965 4.037-2.182 0-3.963-1.811-3.963-4.037 0-2.22 1.781-4.015 3.963-4.015zm-40.903 36.424c0-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>
+      )
+    }
+
+    if (language === 'go') {
+      return (
+        <svg viewBox="0 0 128 128">
+          <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-.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 (
+        <svg viewBox="0 0 128 128">
+          <path
+            fill="#d91404"
+            d="M82.518 54.655c-12.92 8.326-25.722 16.577-38.862 25.043l58.715 8.016zm25.409-36.843L84.881 52.48c-.331.5-.76.896-.294 1.664 5.744 9.483 11.441 18.996 17.152 28.498.901 1.501 1.813 2.996 2.979 4.436l3.463-69.191zM29.529 47.38c.269.255.94.402 1.251.249 5.509-2.708 11.053-5.355 16.442-8.286 1.756-.954 3.106-2.667 4.621-4.055a9782.097 9782.097 0 0 0 15.021-13.812c.307-.283.668-.556.852-.913 1.797-3.513 3.562-7.042 5.391-10.675-2.181-.817-4.248-1.62-6.34-2.35-.284-.099-.73.098-1.04.27-4.843 2.706-9.777 5.267-14.467 8.218-2.347 1.476-4.259 3.651-6.337 5.547-3.347 3.056-6.692 6.119-9.992 9.229a17.14 17.14 0 0 0-2.355 2.76c-2.258 3.286-4.446 6.619-6.737 10.048 1.282 1.326 2.445 2.592 3.69 3.77zm20.133-4.493c-2.739 11.577-5.465 23.088-8.279 34.978L80.284 52.8Zm21.837-19.441 11.22 27.292c7.324-11.001 14.502-21.785 21.843-32.815ZM50.122 40.519l30.012 9.743c-3.761-9.163-7.393-18.005-11.101-27.035ZM29.944 54.131 19.44 79.24l20.005-.591Zm9.739 18.695.248-.054c2.401-9.988 4.838-19.907 7.291-30.284l-16.05 8.341c2.735 7.112 5.653 14.612 8.511 21.997zm60.842-56.522c-3.195-.846-6.387-1.696-9.585-2.536-4.593-1.207-9.19-2.401-13.781-3.62-.573-.152-.989-.251-1.326.44-1.622 3.324-3.296 6.624-4.944 9.935-.051.103-.041.237-.08.492l29.71-4.502zM81.993 8.742l26.037 7.203-4.302-12.258-21.696 4.811ZM89.875 88.1l-21.361-2.916c-8.873-1.211-17.73-2.544-26.623-3.569-3.225-.371-6.536-.029-9.806.026-2.687.046-5.374.148-8.06.233-.277.008-.553.064-.828.361 22.21 2.054 44.422 4.107 66.631 6.162zM19.878 71.576c2.864-6.641 5.712-13.287 8.586-19.922.288-.667.267-1.118-.296-1.653-1.203-1.145-2.319-2.378-3.634-3.744l-5.241 25.871.193.092c.133-.214.294-.414.392-.644zM76.29 6.989c4.827-1.246 9.724-2.218 14.592-3.305.314-.071.622-.175.932-.264l-.047-.238-20.916 2.813c1.965.859 3.478 1.5 5.439.994zM30.975 109.422v8.547h-4.724V95.692h6.491c3.026 0 5.266.551 6.719 1.653 1.453 1.102 2.18 2.776 2.18 5.02 0 1.311-.361 2.477-1.083 3.497-.721 1.021-1.741 1.822-3.063 2.401l6.553 9.705h-5.242l-5.317-8.547h-2.514zm0-3.84h1.524c1.492 0 2.595-.25 3.306-.747.71-.498 1.066-1.28 1.066-2.346 0-1.057-.363-1.808-1.09-2.255-.726-.447-1.851-.671-3.374-.671h-1.433v6.019zm27.578 12.387-.624-2.179h-.244c-.498.793-1.204 1.404-2.117 1.836-.915.432-1.957.647-3.124.647-2.002 0-3.51-.535-4.526-1.607s-1.523-2.613-1.523-4.624v-11.108h4.647v9.95c0 1.229.219 2.151.656 2.766.436.615 1.131.921 2.086.921 1.301 0 2.24-.435 2.819-1.302.579-.869.869-2.308.869-4.319v-8.015h4.647v17.035h-3.566zm17.919-17.356c2.011 0 3.586.786 4.725 2.355 1.137 1.569 1.705 3.72 1.705 6.453 0 2.813-.587 4.992-1.759 6.535-1.174 1.545-2.771 2.316-4.793 2.316-2.001 0-3.57-.727-4.708-2.18h-.32l-.776 1.875h-3.551V94.26h4.647v5.516c0 .701-.062 1.823-.184 3.368h.184c1.086-1.686 2.697-2.531 4.83-2.531zm-1.494 3.719c-1.147 0-1.985.353-2.513 1.059-.528.707-.804 1.872-.823 3.498v.502c0 1.829.271 3.139.814 3.932.544.792 1.405 1.188 2.584 1.188.954 0 1.713-.44 2.277-1.318.564-.878.846-2.156.846-3.832 0-1.676-.285-2.934-.854-3.772-.568-.838-1.345-1.257-2.331-1.257zm9.021-3.398h5.089l3.215 9.584c.274.833.463 1.818.563 2.956h.092c.111-1.046.329-2.032.654-2.956l3.154-9.584h4.982l-7.207 19.214c-.66 1.777-1.602 3.108-2.825 3.992-1.225.884-2.654 1.325-4.29 1.325-.803 0-1.59-.086-2.361-.259v-3.687c.6.136 1.213.202 1.828.197.822 0 1.541-.251 2.156-.754.615-.502 1.095-1.261 1.439-2.277l.274-.839z"
+          ></path>
+        </svg>
+      )
+    }
+
+    if (language === 'php') {
+      return (
+        <svg viewBox="0 0 128 128">
+          <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 3.737 1.398 6.93l-3.053 15.7h-7.408l2.902-14.929c.33-1.698.208-2.855-.365-3.473-.573-.617-1.793-.925-3.658-.925h-5.828L58.752 73.88h-7.291l6.557-33.738zM26.73 49.114h14.133c4.252 0 7.355 1.116 9.305 3.348 1.95 2.232 2.536 5.346 1.758 9.346-.32 1.649-.863 3.154-1.625 4.52-.763 1.364-1.76 2.613-2.99 3.745-1.468 1.373-3.098 2.353-4.891 2.936-1.794.585-4.08.875-6.858.875h-6.294l-1.745 8.97h-7.35l6.557-33.74zm57.366 0h14.13c4.252 0 7.353 1.116 9.303 3.348h.002c1.95 2.232 2.538 5.346 1.76 9.346-.32 1.649-.861 3.154-1.623 4.52-.763 1.364-1.76 2.613-2.992 3.745-1.467 1.373-3.098 2.353-4.893 2.936-1.794.585-4.077.875-6.855.875h-6.295l-1.744 8.97h-7.35l6.557-33.74zm-51.051 5.325-2.742 14.12h4.468c2.963 0 5.172-.556 6.622-1.673 1.45-1.116 2.428-2.981 2.937-5.592.485-2.507.264-4.279-.666-5.309-.93-1.032-2.79-1.547-5.584-1.547h-5.035zm57.363 0-2.744 14.12h4.47c2.965 0 5.17-.556 6.622-1.673 1.449-1.116 2.427-2.981 2.935-5.592.487-2.507.266-4.279-.664-5.309-.93-1.032-2.792-1.547-5.584-1.547h-5.035z"></path>
+        </svg>
+      )
+    }
+
+    return
+  }
+  return <div className="text-xs font-mono text-muted-foreground w-3 h-3">{renderIcon(language)}</div>
+}

package/src/views/flow/nodes/nodes.types.ts

@@ -0,0 +1,36 @@
+import { JSONSchema7 } from 'json-schema'
+
+export type EventNodeData = {
+  type: string
+  name: string
+  description?: string
+  subscribes: string[]
+  emits: Array<string | { type: string; label?: string; conditional?: boolean }>
+  language?: string
+}
+
+export type NoopNodeData = {
+  type: string
+  name: string
+  description?: string
+  emits: string[]
+  subscribes: string[]
+}
+
+export type ApiNodeData = {
+  type: string
+  name: string
+  description?: string
+  emits: Array<string | { type: string; label?: string; conditional?: boolean }>
+  subscribes?: string[]
+  action: 'webhook'
+  webhookUrl?: string
+  bodySchema?: JSONSchema7
+}
+
+export type NodeData = EventNodeData | ApiNodeData | NoopNodeData
+
+export type EdgeData = {
+  label?: string
+  variant: 'default' | 'conditional'
+}

package/src/views/flow/nodes/noop-flow-node.tsx

@@ -0,0 +1,6 @@
+import { NoopNode } from '../../../publicComponents/noop-node'
+import { NoopNodeData } from './nodes.types'
+
+export const NoopFlowNode = ({ data }: { data: NoopNodeData }) => {
+  return <NoopNode data={data} />
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.ts

@@ -0,0 +1,75 @@
+import { Config } from 'tailwindcss'
+import path from 'path'
+
+const config: Config = {
+  darkMode: ['class'],
+  content: [
+    path.resolve(__dirname, './index.html'),
+    path.resolve(__dirname, './src/**/*.{ts,tsx,js,jsx}'),
+    path.resolve(process.cwd(), './steps/**/*.tsx'),
+  ],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          '1': 'hsl(var(--chart-1))',
+          '2': 'hsl(var(--chart-2))',
+          '3': 'hsl(var(--chart-3))',
+          '4': 'hsl(var(--chart-4))',
+          '5': 'hsl(var(--chart-5))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+}
+
+export default config

package/tsconfig.app.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.3"}

package/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [TanStackRouterVite(), react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})