Animate Todo-to-composer transition with line-aware shared elements

[Huxpro]

Summary

Animate the transition between a Todo row and the full-screen composer as a line-aware shared element instead of replacing one screen with another.

When a Todo is long-pressed, its card should expand from its current position into the composer. The visible text lines should preserve their initial geometry and flow toward the line layout at the composer width. Closing the composer should reverse the transition where possible.

This builds on the variable-height, Pretext-backed multiline layout introduced in #6.

Interaction

Opening

• Long-press a Todo body.
• Lift the Todo card above the timeline without an initial geometry jump.
• Expand the card shell toward the full-screen composer.
• Fade or transform the checkbox and delete affordance out.
• Move each existing text line from its row baseline to the corresponding composer baseline.
• Reveal the date controls and composer chrome as the surface expands.
• Keep the textarea focused only after the geometry transition is ready, so keyboard presentation does not interrupt the morph.

Closing

• Cancel/back reverses the morph into the original Todo row.
• Saving an edit morphs toward the updated Todo when it remains visible.
• If the Todo moved to another date or its destination is off-screen, finish with a graceful card fade/slide rather than forcing a bad shared-element target.

Why line-aware

Scaling a single text bitmap distorts glyphs and produces incorrect wrapping. Pretext can predict the source and destination line layouts before the transition starts, allowing the UI to animate line positions while keeping text sharp.

Potential inputs:

• source/destination width
• line count, line height, and line ranges
• source/destination card geometry
• native renderer layout correction when available

Web can use Pretext line layout APIs such as prepareWithSegments() / layoutWithLines(). Native should use the matching lynx-Pretext facade and may reconcile the prediction with the renderer layout event.

Acceptance criteria

• A multiline Todo opens into the composer without a flash, collapse, or one-frame reflow.
• Text remains sharp; the animation does not use whole-card text scaling.
• Source lines transition coherently when destination wrapping differs.
• Checkbox/delete controls leave while composer/date controls enter with intentional timing.
• Cancel/back supports the reverse animation.
• Save handles same-date edits, cross-date moves, and off-screen destinations.
• CJK, emoji, explicit newlines, and long unbroken content do not break geometry.
• Web and native have equivalent behavior, allowing platform-specific measurement correction.
• prefers-reduced-motion / reduced-motion mode uses a short non-spatial transition.
• Keyboard presentation does not cover or interrupt the expanding shared element.

Suggested implementation stages

1. Shared card-shell geometry with current text fading between source and destination.
2. Per-line source/destination mapping driven by Pretext.
3. Reverse transition and save-to-new-date fallbacks.
4. Keyboard choreography, reduced motion, and edge-case polish.