shadcn.io is not affiliated with official shadcn/ui
Sleep Tracker Chat Block for Solid
A sleep coach posts a night card with a stepped hypnogram, a toggle group of seven nights that swaps the drawing, and derived time asleep, efficiency and minutes per stage.
Installation
Overview
Show a night of sleep in conversation with this sleep tracker chat for Solid with Ark UI. A framed window of fixed height holds a thread with Tomasz Fenn, a sleep coach at Dreamlog. He posts a night card: a stepped hypnogram with four rows, Awake, REM, Light and Deep, drawn as an SVG, beside a description list of the same figures, and a Toggle Group of seven nights, Mon 5 to Sun 11 Oct, that swaps the drawing. Time in bed, time asleep, efficiency and minutes per stage are worked out from the typed stages of each night, and the note under the chart comes from the sleep stage with the fewest minutes. The composer's Shine Button is the only colored control. The frame is ruled by Guides. It suits a sleep journal, a wellness app or any coach who shares a chart in a thread.
FAQ
What stays in the page, and how do I make it real?
Everything. The seven nights are typed as runs of stages with minutes, and the replies come from a short script. Nothing is sent and no model runs. To make it real, load a night's stage runs from your device or health service and keep the same helpers, which turn runs into a path and into the figures.
How are the figures derived?
Time in bed is the sum of all runs, time asleep subtracts the awake minutes, and efficiency is asleep divided by in bed. The line is drawn from the same runs, so the chart and the list always agree.
Where does the coach's note come from?
From a typed table keyed by the sleep stage with the fewest minutes on the chosen night: REM, Light or Deep. It is a rule, not a model.
Does it screen for sleep problems?
No. The card says the nights are examples and not a screening, and a message about snoring or stopped breathing gets a line suggesting a clinician.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time such as "You, 14:09". Delivery is a glyph and a word, never a color. The chart has a text description and its figures are repeated in a description list; the nights are a labelled toggle group. Nothing is told by color.