// ui.jsx — shared chrome: brand tokens, primitives, mock UI components. const W = 1920, H = 1080; // Track current second on the root for comment anchoring. function TimeLabel() { const t = useTime(); React.useEffect(() => { const el = document.getElementById('root'); if (!el) return; const m = Math.floor(t / 60); const s = Math.floor(t % 60); el.setAttribute('data-screen-label', `${m}:${String(s).padStart(2, '0')}`); }, [Math.floor(t)]); return null; } // ── Top-of-stage chrome: tiny brand stamp + scene caption ──────────────────── function BrandStamp({ caption, sceneNo, totalScenes }) { return (
Willowbridge · Willowcare Demo Practice
{caption} {sceneNo != null && ( <> · {String(sceneNo).padStart(2, '0')}/{String(totalScenes).padStart(2, '0')} )}
); } function WillowMark({ size = 24, color = null }) { // Canonical WillowBridge icon — mirrors apps/web/public/icon.svg + Login.tsx // emblem (a circle with a stem breaking through the top and paired teardrop // leaves running down the stem). Two variants: // - badge (default, no `color` prop): full icon with navy rounded-square // bg + bone strokes, suitable for any background // - line (when `color` is passed): outline-only in `color`, transparent bg if (color != null) { return ( ); } return ( ); } // ── Sprite-style fade-in wrapper that accepts a child render fn ────────────── function Fade({ start, end, dur = 0.5, exit = 0.4, children, style }) { return ( {({ localTime, duration }) => { const exitStart = duration - exit; let o = 1, ty = 0; if (localTime < dur) { const t = Easing.easeOutCubic(clamp(localTime / dur, 0, 1)); o = t; ty = (1 - t) * 14; } else if (localTime > exitStart) { const t = Easing.easeInQuad(clamp((localTime - exitStart) / exit, 0, 1)); o = 1 - t; ty = -t * 8; } return (
{typeof children === 'function' ? children({ localTime, duration }) : children}
); }} ); } // ── Window frame mimicking the WillowBridge web app shell ──────────────────── function AppShell({ route = '/worklist', user = 'Mara K.', children, w = 1620, h = 880, x = 150, y = 130 }) { return (
{/* Title bar */}
Willowbridge
demo.willowbridge.app{route}
{user}
{/* Left rail */}
{children}
); } function Dot({ c }) { return ; } function Avatar({ name }) { const initials = name.split(' ').map(s => s[0]).slice(0, 2).join(''); return (
{initials}
); } function SideRail({ route }) { // athena-marketplace tenants: no /rcm — billing flows through athena // and the Willowbridge RCM surface is hidden (ADR 0021). const items = [ ['/worklist', 'Worklist'], ['/chart', 'Charts'], ['/billing', 'Billing'], ['/audit', 'Audit'], ['/admin', 'Admin'], ]; return (
{items.map(([r, label]) => { const active = route.startsWith(r); return (
{label} {active && {r}}
); })}
Period
2026-05
); } // ── Pills & chips ──────────────────────────────────────────────────────────── // Tonal system matches marketing/index.html pill-badge variants: // alert / steel / teal / primary + neutral, dark (chrome-tone) // Legacy names (willow/amber/ok/danger) alias onto the canonical tones. function Pill({ tone = 'neutral', children, mono = true, size = 'md' }) { const tones = { neutral: { bg: 'var(--wb-panel)', fg: 'var(--wb-ink-2)', bd: 'var(--wb-rule)' }, primary: { bg: 'var(--wb-primary-soft)', fg: 'var(--wb-primary)', bd: 'transparent' }, steel: { bg: 'var(--wb-steel-soft)', fg: 'var(--wb-steel)', bd: 'transparent' }, teal: { bg: 'var(--wb-teal-soft)', fg: 'var(--wb-teal)', bd: 'transparent' }, alert: { bg: 'var(--wb-alert-soft)', fg: 'var(--wb-alert)', bd: 'transparent' }, dark: { bg: 'var(--wb-primary)', fg: 'var(--wb-paper)', bd: 'var(--wb-primary)' }, // legacy aliases willow: { bg: 'var(--wb-primary-soft)', fg: 'var(--wb-primary)', bd: 'transparent' }, amber: { bg: 'var(--wb-steel-soft)', fg: 'var(--wb-steel)', bd: 'transparent' }, danger: { bg: 'var(--wb-alert-soft)', fg: 'var(--wb-alert)', bd: 'transparent' }, ok: { bg: 'var(--wb-primary-soft)', fg: 'var(--wb-primary)', bd: 'transparent' }, }; const c = tones[tone] || tones.neutral; const pad = size === 'sm' ? '3px 8px' : size === 'lg' ? '8px 16px' : '5px 12px'; return ( {children} ); } // ── Cursor (for narrative/pointing) ────────────────────────────────────────── function Cursor({ x, y, label, tone = 'ink' }) { return (
{label && (
{label}
)}
); } // ── Hero text builder: roman + italic-serif emphasis (Willowbridge house style) function Hero({ children, size = 96, color = 'var(--ink)', align = 'left', lineHeight = 1.05 }) { return (
{children}
); } function Em({ children, size }) { return {children}; } // ── Tween helper: animate a number ramping (easeOut) over a window ────────── function rampNumber(t, start, dur, from, to, ease = Easing.easeOutCubic) { if (t <= start) return from; if (t >= start + dur) return to; return from + (to - from) * ease((t - start) / dur); } // ── Tiny chart-line drawer for graphs ─────────────────────────────────────── function MiniChart({ width, height, points, color = 'var(--willow)', dotIndex = -1, fillBelow = true }) { const min = Math.min(...points); const max = Math.max(...points); const range = max - min || 1; const dx = width / (points.length - 1); const ys = points.map(p => height - ((p - min) / range) * (height - 12) - 6); const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${i * dx} ${ys[i]}`).join(' '); return ( {fillBelow && ( )} {dotIndex >= 0 && ( )} ); } // ── Background paper texture ──────────────────────────────────────────────── // Tide is a clean cool-blue surface — no warm paper dots. Just the wb-bg color. function PaperBG() { return (
); } // ── Scene title block (consistent leader for each scene) ──────────────────── function SceneTitle({ kicker, title, x = 110, y = 110, color = 'var(--ink)', kickerColor = 'var(--willow)' }) { return (
{kicker}
{title}
); } // ───────────────────────────────────────────────────────────────────────────── // Marketing-style primitives (cohesive with the brand site screenshots) // ───────────────────────────────────────────────────────────────────────────── // Soft pastel patient avatar — circle with initials. Tone palette mirrors the // "Today's patients" rows on the marketing landing page. function PatientAvatar({ initials, tone = 'peach', size = 56 }) { const tones = { peach: { bg: '#f4dcd6', fg: '#7a443a' }, // Edith Marsh slate: { bg: '#e6e8ed', fg: '#3a4961' }, // Roy Tanaka sage: { bg: '#dde8e3', fg: '#2c6b5e' }, // Beatrice Liu blue: { bg: '#dce5f1', fg: '#1e3a64' }, // Jorge Fuentes coral: { bg: '#f1e1d8', fg: '#7a4032' }, mint: { bg: '#d8e6dd', fg: '#2c6b4a' }, }; const c = tones[tone] || tones.slate; return (
{initials}
); } // Marketing-style status pill — UPPERCASE label, mono, rounded-rect (not // full pill), soft tinted background. Matches "CALL DUE / REVIEW DUE / // RPM SETUP / READY TO BILL" badges on the landing page. function StatusPill({ tone = 'alert', children }) { const tones = { alert: { bg: '#f1dcdd', fg: '#9d4753' }, // CALL DUE steel: { bg: '#d8dde6', fg: '#3a4961' }, // REVIEW DUE teal: { bg: '#d6e4e3', fg: '#2c6b6e' }, // RPM SETUP primary: { bg: '#19294a', fg: '#f1e8d3' }, // READY TO BILL soft: { bg: '#e3e8f1', fg: '#3a4961' }, }; const c = tones[tone] || tones.steel; return ( {children} ); } // Marketing-style pill action button — full radius, accent bg, white text, // with → arrow. Used for "Place call →", "Open chart →", etc. function ActionButton({ tone = 'primary', children, size = 'md' }) { const tones = { primary: { bg: '#19294a', fg: '#fff' }, // Open chart / Submit alert: { bg: '#a94957', fg: '#fff' }, // Place call (coral) teal: { bg: '#34707b', fg: '#fff' }, // Pair device ghost: { bg: '#fff', fg: '#19294a', bd: '1px solid var(--wb-rule)' }, }; const c = tones[tone] || tones.primary; const pad = size === 'sm' ? '7px 14px' : '11px 18px'; const fs = size === 'sm' ? 13 : 14; return ( {children} → ); } // Mini progress bar — short ruler showing minutes-captured vs target. function MiniProgress({ value, max, tone = 'primary', width = 120 }) { const pct = clamp(value / max, 0, 1); const tones = { primary: '#19294a', alert: '#a94957', teal: '#34707b', steel: '#5b6e87', }; const c = tones[tone] || tones.primary; return (
); } // Marketing-style browser chrome (3 traffic-light dots + URL pill) function BrowserChrome({ url, w = 1200 }) { return (
{url}
); } // Encounter banner — full-width dark-navy bar with pulsing dot, mono timer, // encounter title + subtitle, and a white "Document call" pill on the right. // Mirrors the banner used at the top of the marketing hero mockup. function EncounterBanner({ timer, title, subtitle, action = 'Document call', paused = false, w = '100%' }) { return (
{/* Pulse dot */}
{/* Timer */}
{timer}
{/* Title block */}
{paused ? 'Paused · outside chart' : title}
{subtitle}
{/* Action */}
{action}
); } // Decorative offset blob — soft pastel circle that sits behind cards // (peach + light blue accents in the marketing stat cards). function CornerBlob({ tone = 'peach', size = 110, x, y, opacity = 0.55 }) { const colors = { peach: '#f0d8d3', blue: '#dfe6f1', sage: '#dde9e3', mint: '#d8e6dd', }; return (
); } // Numbered step marker — light blue circle with navy digit (1/2/3/4) function StepNum({ n, size = 32 }) { return (
{n}
); } Object.assign(window, { W, H, TimeLabel, BrandStamp, WillowMark, Fade, AppShell, Avatar, SideRail, Dot, Pill, Cursor, Hero, Em, rampNumber, MiniChart, PaperBG, SceneTitle, // marketing primitives: PatientAvatar, StatusPill, ActionButton, MiniProgress, BrowserChrome, EncounterBanner, CornerBlob, StepNum, });