// screens.jsx — Integrate Health UI screens, pixel-matched to reference.
// All screens render inside an 820×520 card area. They expose animatable state
// via props so the timeline can drive them.
const IH_TEAL = '#2FB4BF'; // primary accent (button fill top)
const IH_TEAL_DEEP = '#1E8A94'; // button fill bottom / active
const IH_TEAL_SOFT = '#BFE5E9'; // disabled button / light fill
const IH_BORDER = '#9FD8DE'; // input + card outlines
const IH_TEXT = '#2B3741'; // primary dark text (slate)
const IH_TEXT_MUTED = '#6C7680'; // secondary
const IH_TEXT_SOFT = '#A8B0B8'; // placeholders
const IH_BG_CARD = '#F4F6F7'; // screen card bg
const IH_BG_PAGE = '#FFFFFF'; // stage bg
const IH_INACTIVE = '#D5DADE'; // inactive step ring
// Serif + sans pairing — matches the reference (serif italic headings, sans body)
const FONT_SERIF = "'Petrona', Georgia, serif";
const FONT_SANS = "'Inter', system-ui, -apple-system, sans-serif";
// ── Welcome screen ──────────────────────────────────────────────────────────
function WelcomeScreen({ buttonHover = false, buttonPressed = false, completedVisible = true }) {
const btnScale = buttonPressed ? 0.985 : (buttonHover ? 1.008 : 1);
const btnShadow = buttonPressed
? '0 2px 8px rgba(30,138,148,0.25)'
: (buttonHover
? '0 10px 28px rgba(30,138,148,0.32)'
: '0 6px 18px rgba(30,138,148,0.22)');
return (
welcome back
Here's your practice overview
{/* Primary CTA */}
start a new session
{/* Recent activity */}
Recent Activity
view all →
{/* Patricia — the just-finished entry; animates in */}
);
}
// ── New Session modal/card ─────────────────────────────────────────────────
function NewSessionScreen({ typedName = '', inputFocused = false, createHover = false, createPressed = false }) {
const hasInput = typedName.length > 0;
const createActive = hasInput;
const createShadow = !createActive
? 'none'
: (createHover ? '0 8px 20px rgba(30,138,148,0.28)' : '0 4px 12px rgba(30,138,148,0.18)');
const createScale = createPressed ? 0.985 : (createHover && createActive ? 1.01 : 1);
return (
New Patient Session
{/* Input */}
{hasInput ? typedName : 'Patient name or ID'}
{inputFocused && (
)}
Friday, December 18
{/* Buttons row */}
);
}
// ── Active Visit / Speak screen ────────────────────────────────────────────
function ActiveVisitScreen({
step = 1, // 1=speak, 2=summarize, 3=sync
recording = false, // has user clicked start?
recordPulse = 0, // 0..1 breathing pulse value
transcriptTurns = [], // [{speaker, text, revealed, isLast}]
btnHover = false,
btnPressed = false,
emphasize = false, // scene 4 emphasis on Speak step
}) {
return (
{/* Header row */}
Patricia Lawson
Follow Up Visit
{' • Dec 18 • 9:24 AM'}
{/* Stepper */}
1} emphasize={emphasize && step === 1} />
1} />
2} />
2} />
{/* Transcript area */}
{/* Record button */}
{recording && (
)}
{recording ? 'stop recording' : 'start recording'}
);
}
function RecentItem({ date, patient, visit, status, visible, collapsible = false }) {
const wrapperStyle = collapsible ? {
maxHeight: visible ? 80 : 0,
marginBottom: visible ? 0 : -8, // cancel parent gap when collapsed
overflow: 'hidden',
transition: 'max-height 420ms cubic-bezier(.4,.1,.2,1), margin-bottom 420ms cubic-bezier(.4,.1,.2,1)',
} : null;
const item = (
{patient}
— {visit}
{date}
{status}
);
return collapsible ? {item}
: item;
}
function Step({ num, label, active, done, emphasize }) {
const circleBg = active ? 'linear-gradient(90deg, #5DBED8 0%, #0057B8 100%)' : (done ? 'linear-gradient(90deg, #5DBED8 0%, #0057B8 100%)' : '#fff');
const circleBorder = active || done ? 'transparent' : IH_INACTIVE;
const circleColor = active || done ? '#fff' : IH_TEXT_SOFT;
const labelColor = active ? IH_TEAL_DEEP : (done ? IH_TEXT_MUTED : IH_TEXT_SOFT);
return (
{done ? '✓' : num}
{label}
);
}
function StepConnector({ active }) {
return (
);
}
function LoadingRing() {
return (
);
}
function TranscriptConversation({ turns }) {
// Auto-scroll container keeps latest turn in view
const scrollRef = React.useRef(null);
React.useEffect(() => {
const el = scrollRef.current;
if (!el) return;
el.scrollTop = el.scrollHeight;
}, [turns.map(t => t.revealed).join('|')]);
return (
{turns.map((turn, i) => {
const isPatient = turn.speaker === 'Patient';
return (
{turn.speaker}
{turn.revealed}
{turn.isLast && (
)}
);
})}
{words.map((w, i) => (
{w.text}
))}
{/* Typing cursor */}
);
}
// ── Shared screen card ─────────────────────────────────────────────────────
const screenCardStyle = {
width: 500,
minHeight: 640,
background: IH_BG_CARD,
borderRadius: 20,
boxShadow: '0 4px 24px rgba(30,55,65,0.10)',
overflow: 'hidden',
position: 'relative',
};
// Expose globally for other babel scripts
Object.assign(window, {
WelcomeScreen,
NewSessionScreen,
ActiveVisitScreen,
IH_TEAL, IH_TEAL_DEEP, IH_TEAL_SOFT, IH_BORDER,
IH_TEXT, IH_TEXT_MUTED, IH_TEXT_SOFT,
IH_BG_CARD, IH_BG_PAGE,
FONT_SERIF, FONT_SANS,
});