✦ Preact Telegram Flow Builder

A visual, node-based IDE for designing complex Telegram bot automation scenarios.

---

✨ Highlights

• Infinite Canvas Workspace: Engineered a custom 2D canvas with mouse-wheel zooming, space-bar panning, and a dot-grid background.
• Node-Based Architecture: Visually map out Telegram bot logic (Commands, Messages, API calls) using draggable SVG-connected nodes.
• Dynamic Property Inspector: A contextual right sidebar that instantly adapts its UI based on the selected node type (e.g., showing Inline Keyboard editors for Message nodes).
• Zero Dependencies for Drag & Drop: Built strictly with Preact state and native DOM events for maximum performance and UI fluidity without bloated DND libraries.

🧱 Project Structure

src/
|-- main.tsx          # Application entry point
`-- app.tsx           # Monolithic IDE interface handling Canvas, State, and Paneling

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173. Controls: Click and drag nodes to move them. Hold Space and drag to pan the canvas. Use Ctrl + Scroll to zoom in and out. Click on a node to open the Property Inspector.

🔌 Extension Notes & Nuances

• Desktop-Exclusive UI: This template is engineered specifically for desktop viewports. Mobile responsiveness and touch-events are omitted by design, as complex node-based IDEs require precise pointer interactions and a large workspace.
• Static Edge Creation: While nodes can be dragged and existing SVG edges dynamically recalculate their Bezier curves in real-time, the ability to draw new connections by dragging between ports is not included. This was done to keep the monolithic app.tsx lightweight and understandable.
• State Export: Currently, the graph state (nodes and edges) is kept in memory. To integrate with a backend, attach an onClick handler to the "Save" button to serialize the state into JSON and POST it to your server/database.
• Monolithic Architecture: For demonstration purposes, the entire Canvas, Sidebar, and State logic is contained within app.tsx. For production use, it is highly recommended to split this into smaller components (<Canvas />, <Node />, <Inspector />).

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a highly optimized vercel.json for Vite static SPA deployment, ensuring perfect client-side routing.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.