Health sheet

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useRef,  useState,  type CSSProperties,  type ReactElement,  type FocusEvent,  type KeyboardEvent,  type PointerEvent,} from 'react';import { AREAS, RISK_BARS, RISK_LABEL, type Area } from './areas';import { Body, BODY_BOX, LIT_BOX, LitHeart, LitLungs, LitMouth, VIEW } from './body';import { DemoTouch, runDemo } from './demo-touch';import { ClockIcon, CloseIcon, StatusIcons } from './icons';import { useAutoplay } from './use-autoplay';import { usePanelScroll } from './use-panel-scroll';import styles from './health-sheet.module.css';/*

/* Health sheet (health-sheet.tsx): a silver phone on a light stage, its screen showing a light   bottom sheet with a pale figure; at night a graphite phone on a near-black stage, the sheet   warm and dark, the figure dark and translucent. The lit organs are a drawing that never   changes: the same orange in both. The phone is drawn in points, as a phone's screen is   designed: --pt is one point in px (0.647 at full size, less on a stage too narrow for it), so   the phone scales as one picture.   Memory. The stage is the one layout boundary, of a fixed height. What moves is moved by   transforms and opacity on boxes of a fixed size: the sheet, the figure, the lit organs (whose   breath runs only while the stage is on screen), the cards and the bars. The drawings are SVGs   that never change. The biggest layer is the list, which is repainted as it scrolls, so it is   the only one the size of the sheet: it paints the sheet's background too, and the sheet itself   paints nothing. The figure is a layer of its own, cut to the body, which the pan moves without   repainting anything. And every layer inside the list keeps its full size as the list scrolls   (see .scroller), so that none is ever cut and sized anew. */.stage {  /* Its colours, light and dark: each light-dark() pair resolves by the color-scheme the root     inherits from the page, or the one the colorScheme prop sets (below). */  /* The stage and its edge. */  --surface: #f7f6fb;  --line: rgb(0 0 0 / 6%);  /* The phone's frame, silver or graphite: its body, the four stops of its sheen, its edge, the     shine inside the edge, and the side buttons. */

/** How likely the issue is to matter: it sets the chip's words and how many bars fill. */export type Risk = 'low' | 'medium' | 'high';/** One area of the body the sheet can show. */export type Area = {  id: 'lungs' | 'heart' | 'mouth';  /** The tab's label. */  tab: string;  /** The line over the title: "Lungs & Airways". */  area: string;  /** The issue: the sheet's title. */  title: string;  risk: Risk;  /** What the risk means, in a few sentences. */  likelihood: string;  /** How soon it may matter: "<3 months". */  time: string;  /** The same, read aloud: "less than 3 months". */  timeSpoken: string;  /** What that time means, in a few sentences. */  urgency: string;};export const RISK_LABEL: Record<Risk, string> = {

import { useId } from 'react';import styles from './health-sheet.module.css';/* * The body: a translucent figure from the head to the waist, with its organs drawn in it, and a * lit copy of each organ group on a box of its own, just big enough for it and its halo. Lighting * an organ fades its lit copy in (an HTML box's opacity): the drawings themselves never change. * Coordinates are in points, with 0 near the top of the sheet and the head above it, out of view * until the figure pans down. * * The figure's own colours are tokens in the stylesheet, set by class: pale by day, dark at night. * The lit organs are drawn in their orange, the same in both. *//** The figure's box, in points: x from 0 to 393, y from -150 to 330. */export const VIEW = { top: -150 };/** * The drawing's box in the figure, in points: x, y, width and height. It is cut to the body, from * just above the head to the lowest point that ever shows, so that its layer is no bigger than it. */export const BODY_BOX = [60, -125, 273, 441] as const;/** Each lit drawing's box in the figure, in points: x, y, width and height. */

/* * The phone's small drawings: its status bar, the sheet's close cross and the time card's clock. * They never change once drawn. *//** Signal, wireless and battery, as the status bar draws them. */export function StatusIcons({ className }: { className?: string }) {  return (    <svg className={className} viewBox="0 0 70 13" aria-hidden="true">      <g fill="currentColor">        <rect x="0" y="8" width="3" height="4" rx="0.8" />        <rect x="4.6" y="6" width="3" height="6" rx="0.8" />        <rect x="9.2" y="3.6" width="3" height="8.4" rx="0.8" />        <rect x="13.8" y="1" width="3" height="11" rx="0.8" />        <path d="M30 3.2c2.6 0 5 1 6.8 2.7l1.3-1.3A11.4 11.4 0 0 0 30 1.4a11.4 11.4 0 0 0-8.1 3.2l1.3 1.3A9.6 9.6 0 0 1 30 3.2zm0 3.4c1.6 0 3.1.6 4.3 1.6l1.3-1.3A8 8 0 0 0 30 4.8a8 8 0 0 0-5.6 2.1l1.3 1.3A6.3 6.3 0 0 1 30 6.6zm0 3.4c.7 0 1.3.2 1.8.6L30 12.4l-1.8-1.8c.5-.4 1.1-.6 1.8-.6z" />        <rect          x="44.5"          y="1.5"          width="21"          height="10"          rx="3"          fill="none"          stroke="currentColor"          strokeOpacity="0.4"

'use client';import { useEffect, type RefObject } from 'react';/* * Scrolls the sheet by hand. The sheet's list is overflow: hidden, and this moves its scrollTop: * the wheel, a vertical touch drag (which coasts a little when let go), and the browser itself * when something inside takes the focus. Why not a native scroll area: Safari on iOS gives each * one layers of its own at full device resolution, which here cost more GPU memory than the rest * of the phone; a hidden-overflow box is repainted in place instead. * * At the list's ends the gesture is left to the page, which scrolls on. While the list moves, a * thin bar over its right edge shows where it is, then fades. *//** How long the bar stays after the list stops, in ms. */const LINGER = 700;/** How far a touch moves before it counts as a drag, in px. */const SLOP = 6;type Touch = { x: number; y: number; at: number; vertical: boolean | null; speed: number };export function usePanelScroll(  panel: RefObject<HTMLElement | null>,

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's finger, and the steps that move it. On a phone a pointer has no arrow: the demo * shows a soft disc where a finger would be, faint while it travels and firm while it touches. * A demo is a script of awaited steps: wait, travel to a control, tap it, or press and slide (to * scroll the sheet or swipe it), calling the component's own handlers as a finger would. Stopping * the demo (the reader takes over, or it scrolls away) ends the step in progress at once: its * promise rejects, which ends the script right there, and the disc fades out. * * The disc moves by animations the compositor plays (a slide too: the scrolled value follows that * animation's clock), on a box of a fixed size, so it never makes the browser lay anything out. */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Travels to `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: Point) => Promise<void>;  /** Touches and lifts; `action` runs as the finger comes down. */

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;