"use client"; /** * SwipeActionRow — a mobile-first swipe-to-reveal action row that is *never* * touch-only. Every action is reachable three ways: swipe/drag (pointer + * touch), Tab-to-focus reveal, and an always-visible overflow menu — so the * component works with a mouse and a keyboard exactly as well as with a thumb. * * Safety model (destructive actions must not fire by accident): * - Full-swipe-to-fire is OFF by default (`fullSwipe`). * - Destructive actions require an inline Confirm step (a two-tap guard) unless * explicitly opted out; `confirmAction` forces confirm on every action. * - Destructive actions are marked with a label + icon + `--color-error`, never * color alone (forced-colors safe). * * Only-one-open: wrap rows in so opening one row snaps any * other open row shut (the mail-app pattern). * * Accessibility: real {anchor.renderInPortal( {menuOpen && anchor.anchored && ( } role="menu" aria-label="Row actions" initial={reduced ? false : { opacity: 0, scale: 0.96, y: -4 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: -4 }} transition={{ duration: 0.14, ease: [0.2, 0, 0, 1] }} style={anchor.panelStyle} className="z-[60] min-w-[180px] overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] py-1 shadow-[var(--shadow-md,0_8px_24px_rgba(0,0,0,0.14))]" > {allActions.map((a) => { const tone = actionTone(a); return (

); })} )} , )} )} )} {/* confirm bar — the two-tap safety guard for destructive actions */} {confirming && ( )} {/* polite announcements for completed / cancelled actions */} {announcement} ); } /* -------------------------------------------------------------------------- */ /* Action button (revealed in a side panel) */ /* -------------------------------------------------------------------------- */ function ActionButton({ action, side, disabled, onFocus, onActivate, arm, }: { action: SwipeAction; side: SwipeSide; disabled: boolean; onFocus: () => void; onActivate: () => void; arm?: MotionValue; }) { const tone = actionTone(action); return ( ); } export default SwipeActionRow;