SableDesign reference
Mockup

Inbox — swipe actions

The SW-1 acceptance target for geometry, choreography, and state — the v4 Apple Mail model on a real gesture state machine. Swipe right for Read/Unread; swipe left for [ More ][ Archive ]. Pills track the finger and grow from zero beside the row; release past the detent holds the panel open; a full swipe arms the primary (its icon slides to the outer edge) and fires on release, with hysteresis so backing off disarms. More opens a sheet; Archive removes the row with an undo snackbar. Every threshold is in finger space. Note (DS-1): a web mockup validates geometry and state but not gesture physics — pointer space here isn't the app's post-friction native space, so the swipe still needs device QA as a separate gate.

Light
9:41
MailboxInbox
Swipe states
Frozen frames of the real component. Try each by hand in the live inbox below.
Partial reveal
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pmNew
Row still visible; the pill grows from zero beside it.
Detent hold
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Released past the detent — the panel holds open and both pills are tappable.
Arm
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Past FULL — the primary eats the track and its icon slides to the outer edge (one haptic on device).
Disarm on drag-back
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Dragged past FULL, then back below FULL − HYST — the primary shrank to the pair; release does nothing, and no haptic fires.
Commit
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Release while armed → Archive fires; the row flings off and collapses.
Live inbox
Sam RiversHighRe: launch checklist — One more pass on copy and I think we're good.3:42 pmNew
team@sable.devWeekly digest — 12 threads sorted — 12 threads sorted · 3 domains active · 1 new rule fired.2:10 pmNew
investor@fund.coHighFollowing up on the round — Would love to close by end of month. Quick call?11:02 amNew
design@figma.comComments on your file — 3 new comments on "Sable — components".Mon
alerts@sable.devBouncedA rule fired: bounced — One message to noreply@old.co bounced back.Sun
notes@stripe.comYour invoice for June — Invoice #A0B1 is ready. Amount due: $0.00.Sun
Dark
9:41
MailboxInbox
Swipe states
Frozen frames of the real component. Try each by hand in the live inbox below.
Partial reveal
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pmNew
Row still visible; the pill grows from zero beside it.
Detent hold
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Released past the detent — the panel holds open and both pills are tappable.
Arm
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Past FULL — the primary eats the track and its icon slides to the outer edge (one haptic on device).
Disarm on drag-back
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Dragged past FULL, then back below FULL − HYST — the primary shrank to the pair; release does nothing, and no haptic fires.
Commit
Sam RiversRe: launch checklist — one more copy pass and your sign-off.3:42 pm
Release while armed → Archive fires; the row flings off and collapses.
Live inbox
Sam RiversHighRe: launch checklist — One more pass on copy and I think we're good.3:42 pmNew
team@sable.devWeekly digest — 12 threads sorted — 12 threads sorted · 3 domains active · 1 new rule fired.2:10 pmNew
investor@fund.coHighFollowing up on the round — Would love to close by end of month. Quick call?11:02 amNew
design@figma.comComments on your file — 3 new comments on "Sable — components".Mon
alerts@sable.devBouncedA rule fired: bounced — One message to noreply@old.co bounced back.Sun
notes@stripe.comYour invoice for June — Invoice #A0B1 is ready. Amount due: $0.00.Sun