Port Pretext's exact-height accordion to day sections

[Huxpro]

Summary

Port the Pretext Accordion demo into BusyWeek as collapsible day sections whose expanded heights are calculated ahead of rendering.

The reference demo animates from 0 to an exact measured text height without reading the rendered body height and without a CSS max-height approximation. BusyWeek already owns the measured height of every Todo, so a day can use the same idea at the group level.

Proposed interaction

• Tapping a day header toggles that day between expanded and collapsed.
• Today starts expanded.
• Match the reference accordion initially: opening one day closes the previously open day.
• Animate the disclosure glyph and the exact day-body height together.
• Todos retain their own variable-height insertion/removal transitions inside an expanded day.
• Keep the user's visible scroll anchor stable when a section above the viewport opens or closes.

Layout model

For each day, derive the expanded body height from application state:

• measured/predicted Todo row heights
• row dividers and internal spacing
• empty-day content, if rendered
• completed-item visibility
• current text width/font configuration

Do not use:

• DOM/native element height reads as the primary source
• a large sentinel max-height
• clipped scale transforms that distort text

Recompute the target when a Todo is created, edited, moved, completed, deleted, hidden, or remeasured after a width/font change.

Acceptance criteria

• Day headers are accessible expand/collapse controls with an explicit expanded state.
• Collapsed and expanded heights animate between exact values on Web and Lynx native.
• No text clipping or blank tail space occurs for arbitrary multiline Todos.
• Later day cards move continuously while the active section changes height.
• Opening/closing a section does not reset Todo state or remount active content unnecessarily.
• Editing, moving, deleting, or hiding completed Todos updates an open panel's target height.
• Scroll position remains anchored when an off-screen/above-screen section changes.
• Rapid repeated taps and interrupted transitions settle on the correct final state.
• Reduced-motion mode applies the final height without the spatial animation.
• Tests cover exact height derivation, state interruption, multiline rows, and completed-item filtering.

Reference

The original demo uses prepare() + layout() to compute every panel's exact line count and height, then transitions the body to that number:

• Demo: https://chenglou.me/pretext/accordion/
• Source: https://github.com/chenglou/pretext/blob/main/pages/demos/accordion.ts