orcheo-canvas 0.0.1

package/package.json

@@ -0,0 +1,165 @@
+{
+  "name": "orcheo-canvas",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Canvas UI for Orcheo workflow orchestration platform",
+  "keywords": ["orcheo", "workflow", "canvas", "ui", "react"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orcheo-ai/orcheo.git",
+    "directory": "apps/canvas"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "test": "vitest",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@evilmartians/agent-prism-data": "^0.0.8",
+    "@evilmartians/agent-prism-types": "^0.0.8",
+    "@monaco-editor/react": "^4.7.0",
+    "@openai/chatkit-react": "^1.1.1",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@rjsf/core": "^5.24.13",
+    "@rjsf/utils": "^5.24.13",
+    "@rjsf/validator-ajv8": "^5.24.13",
+    "@xyflow/react": "^12.6.0",
+    "ag-grid-react": "^32.1.0",
+    "antd": "^5.20.5",
+    "aos": "^2.3.4",
+    "canvas-confetti": "^1.9.3",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "d3": "^7.9.0",
+    "d3-sankey": "^0.12.3",
+    "date-fns": "^3.6.0",
+    "diff": "^6.0.0-beta",
+    "diff-match-patch": "^1.0.5",
+    "echarts-for-react": "^3.0.2",
+    "embla-carousel-react": "^8.5.2",
+    "emoji-picker-react": "^4.11.1",
+    "esbuild": "^0.25.4",
+    "esbuild-plugin-globals": "^0.2.0",
+    "ethers": "^6.13.2",
+    "exceljs": "^4.4.0",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.3.24",
+    "highcharts": "^11.4.7",
+    "highcharts-react-official": "^3.2.1",
+    "input-otp": "^1.4.2",
+    "jspdf": "^3.0.1",
+    "jspdf-autotable": "^5.0.2",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^0.477.0",
+    "mapbox-gl": "^1.13.3",
+    "moment": "^2.30.1",
+    "papaparse": "^5.4.1",
+    "patch-package": "^8.0.0",
+    "plotly": "^1.0.6",
+    "react": "^19.0.0",
+    "react-big-calendar": "latest",
+    "react-chartjs-2": "latest",
+    "react-circular-progressbar": "latest",
+    "react-colorful": "latest",
+    "react-confetti": "latest",
+    "react-day-picker": "latest",
+    "react-dnd": "latest",
+    "react-dnd-html5-backend": "latest",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "latest",
+    "react-feather": "latest",
+    "react-hook-form": "latest",
+    "react-hot-toast": "latest",
+    "react-intersection-observer": "latest",
+    "react-json-pretty": "^2.2.0",
+    "react-konva": "latest",
+    "react-leaflet": "latest",
+    "react-markdown": "latest",
+    "react-masonry-css": "latest",
+    "react-pdf": "latest",
+    "react-plotly.js": "latest",
+    "react-resizable-panels": "latest",
+    "react-router-dom": "latest",
+    "react-split": "^2.0.14",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-type-animation": "latest",
+    "recharts": "^2.15.1",
+    "sonner": "^2.0.1",
+    "styled-components": "^6.1.13",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.167.1",
+    "tsparticles": "^3.5.0",
+    "vaul": "^1.1.2",
+    "yup": "^1.4.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.13.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "jsdom": "^24.1.3",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0",
+    "vitest": "^3.2.4"
+  },
+  "overrides": {
+    "lodash": "^4.17.21",
+    "debug": "^4.3.4",
+    "clean-css": "^4.2.3",
+    "merge": "^2.1.1",
+    "braces": "^3.0.3",
+    "highlight.js": "^11.9.0",
+    "got": "^11.8.5",
+    "micromatch": "^4.0.8",
+    "prismjs": "^1.30.0",
+    "refractor": "^4.6.0",
+    "dompurify": "^3.2.4"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/favicon.drawio

@@ -0,0 +1,83 @@
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36" version="26.2.14">
+  <diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">
+    <mxGraphModel dx="3664" dy="733" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="WIyWlLk6GJQsqaUBKTNV-0" />
+        <mxCell id="WIyWlLk6GJQsqaUBKTNV-1" parent="WIyWlLk6GJQsqaUBKTNV-0" />
+        <mxCell id="xZQY71x421pRE-uKHZpD-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-8" target="xZQY71x421pRE-uKHZpD-9" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-8" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+          <mxGeometry x="-2230" y="260" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-19" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-9" target="xZQY71x421pRE-uKHZpD-17" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-20" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-9" target="xZQY71x421pRE-uKHZpD-18" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-9" value="" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+          <mxGeometry x="-2210" y="450" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-11" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+          <mxGeometry x="-1880" y="290" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-32" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" target="fJnVb3r60i2aODetUhyN-0" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-1840" y="520" as="sourcePoint" />
+            <mxPoint x="-1840" y="610" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-33" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;exitPerimeter=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="fJnVb3r60i2aODetUhyN-1" target="xZQY71x421pRE-uKHZpD-11" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-1840" y="460" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-17" value="" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+          <mxGeometry x="-2330" y="450" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;entryPerimeter=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-18" target="fJnVb3r60i2aODetUhyN-1" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-1900" y="490" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-18" value="" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+          <mxGeometry x="-2086" y="450" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-21" value="" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+          <mxGeometry x="-2400" y="610" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-22" value="" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;flipH=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+          <mxGeometry x="-2060" y="610" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-24" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-17" target="xZQY71x421pRE-uKHZpD-21" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-2220" y="330" as="sourcePoint" />
+            <mxPoint x="-2263" y="430" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-25" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0.25;entryY=0;entryDx=0;entryDy=0;dashed=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-8" target="xZQY71x421pRE-uKHZpD-18" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-2210" y="340" as="sourcePoint" />
+            <mxPoint x="-2253" y="440" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-26" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-18" target="xZQY71x421pRE-uKHZpD-22" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="-2200" y="350" as="sourcePoint" />
+            <mxPoint x="-2243" y="450" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xZQY71x421pRE-uKHZpD-27" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;dashed=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="xZQY71x421pRE-uKHZpD-8" target="xZQY71x421pRE-uKHZpD-17" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fJnVb3r60i2aODetUhyN-0" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="-1900" y="610" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="fJnVb3r60i2aODetUhyN-1" value="" style="strokeWidth=7;html=1;shape=mxgraph.flowchart.terminator;whiteSpace=wrap;fillColor=#fad7ac;strokeColor=#b46504;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="-1890" y="460" width="100" height="60" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

package/public/favicon.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than draw.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent; color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="627px" height="417px" viewBox="-0.5 -0.5 627 417" content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36&quot; version=&quot;26.2.14&quot; scale=&quot;1&quot; border=&quot;0&quot;&gt;&#10;  &lt;diagram id=&quot;C5RBs43oDa-KdzZeNtuy&quot; name=&quot;Page-1&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;3664&quot; dy=&quot;733&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;827&quot; pageHeight=&quot;1169&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;WIyWlLk6GJQsqaUBKTNV-0&quot; /&gt;&#10;        &lt;mxCell id=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-0&quot; /&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-10&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-8&quot; target=&quot;xZQY71x421pRE-uKHZpD-9&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-8&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-2230&quot; y=&quot;260&quot; width=&quot;120&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-19&quot; value=&quot;&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-9&quot; target=&quot;xZQY71x421pRE-uKHZpD-17&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-20&quot; value=&quot;&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-9&quot; target=&quot;xZQY71x421pRE-uKHZpD-18&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-9&quot; value=&quot;&quot; style=&quot;rhombus;whiteSpace=wrap;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-2210&quot; y=&quot;450&quot; width=&quot;80&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-11&quot; value=&quot;&quot; style=&quot;ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-1880&quot; y=&quot;290&quot; width=&quot;80&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-32&quot; value=&quot;&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; target=&quot;fJnVb3r60i2aODetUhyN-0&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;-1840&quot; y=&quot;520&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;-1840&quot; y=&quot;610&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-33&quot; value=&quot;&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;exitPerimeter=0;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;fJnVb3r60i2aODetUhyN-1&quot; target=&quot;xZQY71x421pRE-uKHZpD-11&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;-1840&quot; y=&quot;460&quot; as=&quot;sourcePoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-17&quot; value=&quot;&quot; style=&quot;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-2330&quot; y=&quot;450&quot; width=&quot;80&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-29&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;entryPerimeter=0;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-18&quot; target=&quot;fJnVb3r60i2aODetUhyN-1&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;-1900&quot; y=&quot;490&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-18&quot; value=&quot;&quot; style=&quot;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-2086&quot; y=&quot;450&quot; width=&quot;80&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-21&quot; value=&quot;&quot; style=&quot;shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-2400&quot; y=&quot;610&quot; width=&quot;120&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-22&quot; value=&quot;&quot; style=&quot;shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;flipH=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-2060&quot; y=&quot;610&quot; width=&quot;120&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-24&quot; style=&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-17&quot; target=&quot;xZQY71x421pRE-uKHZpD-21&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;-2220&quot; y=&quot;330&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;-2263&quot; y=&quot;430&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-25&quot; style=&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0.25;entryY=0;entryDx=0;entryDy=0;dashed=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-8&quot; target=&quot;xZQY71x421pRE-uKHZpD-18&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;-2210&quot; y=&quot;340&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;-2253&quot; y=&quot;440&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-26&quot; style=&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-18&quot; target=&quot;xZQY71x421pRE-uKHZpD-22&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;-2200&quot; y=&quot;350&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;-2243&quot; y=&quot;450&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;xZQY71x421pRE-uKHZpD-27&quot; style=&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;dashed=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;endArrow=blockThin;endFill=1;&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot; source=&quot;xZQY71x421pRE-uKHZpD-8&quot; target=&quot;xZQY71x421pRE-uKHZpD-17&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;fJnVb3r60i2aODetUhyN-0&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;fillColor=#fad7ac;strokeColor=#b46504;strokeWidth=7;&quot; vertex=&quot;1&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-1900&quot; y=&quot;610&quot; width=&quot;120&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;fJnVb3r60i2aODetUhyN-1&quot; value=&quot;&quot; style=&quot;strokeWidth=7;html=1;shape=mxgraph.flowchart.terminator;whiteSpace=wrap;fillColor=#fad7ac;strokeColor=#b46504;&quot; vertex=&quot;1&quot; parent=&quot;WIyWlLk6GJQsqaUBKTNV-1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;-1890&quot; y=&quot;460&quot; width=&quot;100&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;      &lt;/root&gt;&#10;    &lt;/mxGraphModel&gt;&#10;  &lt;/diagram&gt;&#10;&lt;/mxfile&gt;&#10;"><defs/><g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-0"><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-1"><g data-cell-id="xZQY71x421pRE-uKHZpD-10"><g><path d="M 233 63 L 233 172.17" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 233 185.17 L 228.67 172.17 L 237.33 172.17 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-8"><g><rect x="173" y="3" width="120" height="60" rx="9" ry="9" fill="#fad7ac" stroke="#b46504" stroke-width="7" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-19"><g><path d="M 193 233 L 173.83 233" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 160.83 233 L 173.83 228.67 L 173.83 237.33 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-20"><g><path d="M 273 233 L 296.17 233" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 309.17 233 L 296.17 237.33 L 296.17 228.67 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-9"><g><path d="M 233 193 L 273 233 L 233 273 L 193 233 Z" fill="#fad7ac" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-11"><g><ellipse cx="563" cy="73" rx="40" ry="40" fill="#fad7ac" stroke="#b46504" stroke-width="7" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-32"><g><path d="M 563 263 L 563.5 308.5 L 563.23 332.18" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 563.09 345.17 L 558.9 332.13 L 567.57 332.22 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-33"><g><path d="M 563 203 L 563 133.83" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 563 120.83 L 567.33 133.83 L 558.67 133.83 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-17"><g><rect x="73" y="193" width="80" height="80" fill="#fad7ac" stroke="#b46504" stroke-width="7" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-29"><g><path d="M 397 233 L 492.17 233" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 505.17 233 L 492.17 237.33 L 492.17 228.67 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-18"><g><rect x="317" y="193" width="80" height="80" fill="#fad7ac" stroke="#b46504" stroke-width="7" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-21"><g><path d="M 3 413 L 23 353 L 123 353 L 103 413 Z" fill="#fad7ac" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-22"><g><path d="M 343 413 L 363 353 L 463 353 L 443 413 Z" fill="#fad7ac" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" transform="translate(403,0)scale(-1,1)translate(-403,0)" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-24"><g><path d="M 93 273 L 70.31 333.5" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 65.75 345.67 L 66.26 331.98 L 74.37 335.02 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-25"><g><path d="M 293 63 L 330.32 173.27" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" stroke-dasharray="21 21" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 334.49 185.59 L 326.22 174.66 L 334.43 171.88 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-26"><g><path d="M 377 273 L 396.56 333.19" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 400.58 345.56 L 392.44 334.53 L 400.68 331.85 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="xZQY71x421pRE-uKHZpD-27"><g><path d="M 173 63 L 139.12 173.09" fill="none" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" stroke-dasharray="21 21" pointer-events="stroke" style="stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/><path d="M 135.3 185.52 L 134.98 171.82 L 143.27 174.37 Z" fill="#b46504" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(180, 101, 4), rgb(201, 133, 49)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="fJnVb3r60i2aODetUhyN-0"><g><rect x="503" y="353" width="120" height="60" rx="9" ry="9" fill="#fad7ac" stroke="#b46504" stroke-width="7" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g><g data-cell-id="fJnVb3r60i2aODetUhyN-1"><g><path d="M 543.61 203 L 582.39 203 C 599.29 203 613 216.43 613 233 C 613 249.57 599.29 263 582.39 263 L 543.61 263 C 526.71 263 513 249.57 513 233 C 513 216.43 526.71 203 543.61 203 Z" fill="#fad7ac" stroke="#b46504" stroke-width="7" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(250, 215, 172), rgb(75, 45, 8)); stroke: light-dark(rgb(180, 101, 4), rgb(201, 133, 49));"/></g></g></g></g></g></svg>

package/src/App.test.tsx

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+describe("App", () => {
+  it("renders the Orcheo Canvas navigation", () => {
+    render(<App />);
+    expect(screen.getByText(/Orcheo Canvas/i)).toBeInTheDocument();
+  });
+});

package/src/App.tsx

@@ -0,0 +1,43 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import WorkflowGallery from "@features/workflow/pages/workflow-gallery";
+import WorkflowCanvas from "@features/workflow/pages/workflow-canvas";
+import WorkflowExecutionDetails from "@features/workflow/pages/workflow-execution-details";
+import Login from "@features/auth/pages/login";
+import Signup from "@features/auth/pages/signup";
+import Profile from "@features/account/pages/profile";
+import Settings from "@features/account/pages/settings";
+import HelpSupport from "@features/support/pages/help-support";
+import PublicChatPage from "@features/chatkit/pages/public-chat";
+
+export default function OrcheoCanvasApp() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<WorkflowGallery />} />
+
+        <Route path="/workflow-canvas" element={<WorkflowCanvas />} />
+        <Route
+          path="/workflow-canvas/:workflowId"
+          element={<WorkflowCanvas />}
+        />
+
+        <Route
+          path="/workflow-execution-details/:executionId"
+          element={<WorkflowExecutionDetails />}
+        />
+
+        <Route path="/login" element={<Login />} />
+
+        <Route path="/signup" element={<Signup />} />
+
+        <Route path="/profile" element={<Profile />} />
+
+        <Route path="/settings" element={<Settings />} />
+
+        <Route path="/help-support" element={<HelpSupport />} />
+
+        <Route path="/chat/:workflowId" element={<PublicChatPage />} />
+      </Routes>
+    </Router>
+  );
+}

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/design-system/ui/accordion.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/design-system/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/design-system/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/design-system/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };