feat: Prototype Flow Builder for the Care Design Library

[vinutv]

Overview

Adds a native Prototype Builder to the Care Design Library — a client-only, zero-code environment for rapidly assembling realistic Care/HMIS workflows using existing Care Design System components. It behaves like an interactive HTML prototype: no backend, no database, no persistence beyond a per-session snapshot.

Open it from Tools → Prototype Builder in the sidebar (route #prototype-builder).

What's included

Four-panel builder

• Pages sidebar — add / rename / duplicate / delete / reorder pages, set start page, flow grouping.
• Component Library — 30+ Care components/blocks grouped by category (Foundation, Inputs, Actions, Navigation, Data, Healthcare, Blocks); click-to-add and drag-onto-canvas via @dnd-kit.
• Canvas — live composition (select, reorder, duplicate, delete, hidden/modal toggles) with desktop/tablet/mobile device frames.
• Interaction panel — per-component Properties, Behaviour, Smart suggestions (e.g. Patient Card → "Open Patient Profile"), and a When → Do action builder with optional variable conditions.

Flow View — node-graph of pages; connections auto-derive from Navigate interactions, with pan / zoom / auto-arrange.

Prototype Player — runs the prototype end-to-end: navigation with slide/fade transitions, back/history, modals, toasts, show/hide/toggle, variable capture, live-filtered mock data, device switching, and keyboard shortcuts (Esc, Backspace).

Also: temporary prototype variables, mock healthcare data (patients, appointments, meds, labs, queue, vitals), and one-click workflow templates (OP journey, appointment booking, pharmacy dispensing, lab sample collection).

Wiring notes for reviewers

• New full-screen prototype-builder route in App.tsx + a Tools nav entry in app-sidebar.tsx.
• Full-screen routes bypass DynamicMainContent, which is the only place that dismisses the pre-React splash (__removeLoadingScreen()). PrototypeBuilder now calls it on mount so a fresh deep-link doesn't leave the loader stuck.
• All state lives in a reducer/context (store.tsx) with sessionStorage-only persistence — nothing is written to a backend.

Scope / intentional limitations

• AI Assistant is realized as the deterministic Templates menu (no LLM/backend by design).
• Conditional logic supports variable-based guards on actions (ordered conditional actions), not a full visual branch-node editor.
• Persistence is sessionStorage-only per the "no persistence" principle.
• The Flow view edits connections indirectly (via interactions) rather than drag-to-wire handles.

Verification

• Manually driven in-browser: Login → Dashboard → Patient Overview navigation, flow graph, transitions, and toasts all work.
• tsc -b, ESLint, and Prettier all pass on the new module and touched files.

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying careui with    Cloudflare Pages

Latest commit:	7e93204
Status:	✅  Deploy successful!
Preview URL:	https://f3050f21.careui.pages.dev
Branch Preview URL:	https://feat-prototype-flow-builder.careui.pages.dev

View logs