✦ Preact Form Conditional Workflow

A branching questionnaire editor with route analysis, node configuration, path simulation, and mock publishing.

---

✨ Highlights

• Workflow Map: Visualizes question and terminal nodes with their outgoing branch destinations.
• Node Inspector: Edits prompt, help copy, choices, destinations, and terminal behavior.
• Branch Routing: Lets every choice target another question or end the current path.
• Graph Analysis: Reports broken destinations, unreachable nodes, and the reachable node count.
• Path Simulator: Runs the questionnaire and records the exact route taken to a terminal result.
• Node Creation: Adds stable nanoid-backed nodes without coupling logic to display order.
• Persistent Workflow: Keeps the current graph in IndexedDB and exposes explicit draft status.
• Responsive Editor: Preserves a compact simulator on mobile while expanding the graph and inspector on desktop.

🧱 Project Structure

public/
`-- favicon.svg
src/
|-- app.tsx
|-- index.css
|-- main.tsx
|-- components/
|   `-- workflow-map.tsx
|-- domain/
|   `-- workflow.ts
`-- services/
    `-- mock-workflow-api.ts

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• Prettier 3
• idb-keyval
• nanoid
• lucide-preact

📦 Included Demo Data

• A workspace-qualification workflow branches between personal, team, and enterprise recommendations.
• The preset contains eight reachable nodes and multiple terminal outcomes for immediate route testing.

All people, organizations, records, identifiers, prices, and responses are synthetic and remain in the browser unless a mock submission is triggered.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• The analyzer detects broken and unreachable references; production editors may also add cycle policy and schema migration checks.
• Destination IDs are domain values rather than UI indexes, so reordering does not change routing.
• The simulator is deterministic and local; connect published workflow versions to a server before using them for live intake.
• Mock calls include visible latency so loading, disabled, success, and failure states can be tested before connecting a real API.
• Replace functions in src/services/ with your HTTP client while preserving the domain contracts used by the UI.
• The interface is responsive on mobile and desktop; dense review panels intentionally make fuller use of desktop space.
• Treat this repository as a reference template and complete product-specific accessibility, privacy, security, and policy review before production use.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview
npm audit --omit=dev

🌐 Vercel Deployment

{
  "$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.