fix(compact): layer screens so swipe back reveals the screen underneath

[alchaplinsky]

Summary

Swiping back on a pushed screen in the phone shell dragged it over an empty white ground: the shell rendered one screen at a time, so the list root did not exist until the pop landed. This layers the screens the way a native navigation stack does.

• Compact/Stack (new): the screen a push came from stays mounted and inert under the pushed one — the tab root with its bar under the entry or form, the settings root under a section pane, the pane under its sub-page. It keeps its scroll and is there to come back to.
• One number drives the lower layer: --pop (.stack-under in theme.css) recedes it a third of the width and dims it, as iOS does. A push transitions it; an edge swipe writes it per frame, so the screen underneath slides back in step with the finger. Cancel springs both back; commit finishes the slide at a pace scaled to the distance left.
• Push motion: pushed screens now arrive across the whole width (animate-push) with an edge shadow (shadow-push), instead of the 24px nudge-and-fade. The slide-up form only dims the root under it (motion="rise").
• Docs updated in docs/compact-shell.md; compact tests adjusted for the layered DOM and a new case covers the lower layer's motion and cleanup.

Not done here: a tapped Back is still a cut (no exit animation), since the store drops the screen's content before one could run. The --pop glide relies on CSS @property (iOS 16.4+); older WebKit lands correctly without interpolation.

Verification

• bun run typecheck, bun run lint (0 warnings), bun run build: clean
• bun run test: 1073 passed
• Not run on a device: the frontend has no browser-side IPC mock. Worth a pass in dark mode to tune the dim and shadow strengths.

Decisions

• adopted · architectural · [compact-shell] — Compact-shell screens are layered, not swapped: Stack keeps the lower screen mounted and inert under the pushed one. — A one-screen-at-a-time shell has nothing under a dragged screen; layering also preserves scroll and gives the push something to slide over.
• adopted · implementation · [compact-shell] — The lower layer's recede and dim are one CSS custom property (--pop), transitioned by the push and written per frame by the swipe. — One value to write at 60Hz, and the geometry lives in CSS rather than in the hook.
• rejected · implementation · [compact-shell] — Exit animation on a tapped Back. — The store drops the screen's content before an animation could run; needs a deferred unmount in Stack first.

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; the previous search-focus issue is fixed and no new blocking issue was found.

Summary

The PR keeps lower screens mounted so swipe Back reveals the screen underneath. It adds shared push motion and links the lower screen’s movement to the swipe.

• Compact screens reveal the screen underneath when you swipe back.
• Search focuses after its screen becomes active.

_{Reviews (2) · Last reviewed commit: "fix(compact): land a search request made..." · Reviewed by Greptile}