{TXNS.map((d) => { const total = d.items.reduce((s, it) => s + it.gross, 0); return (

{d.day} ₹{total.toLocaleString('en-IN')}

{d.items.map((it) => ( setOpenId(v ? it.id : null)}> ))}

); })}

); } function SwipeableRow({ children, isOpen, onOpen }) { const REVEAL = 128; const [drag, setDrag] = React.useState(null); const rowRef = React.useRef(null); const onDown = (e) => { if (e.target.closest('.tx-actions')) return; e.currentTarget.setPointerCapture?.(e.pointerId); setDrag({ startX: e.clientX, startY: e.clientY, dx: 0, locked: null, pid: e.pointerId, base: isOpen ? -REVEAL : 0 }); }; const onMove = (e) => { if (!drag || drag.pid !== e.pointerId) return; const dx = e.clientX - drag.startX; const dy = e.clientY - drag.startY; let locked = drag.locked; if (!locked && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) { locked = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y'; } setDrag({ ...drag, dx, dy, locked }); }; const onUp = () => { if (!drag) return; if (drag.locked === 'x') { const final = drag.base + drag.dx; if (final < -REVEAL * 0.45) onOpen(true); else onOpen(false); } setDrag(null); }; React.useEffect(() => { if (!isOpen) return; const close = (e) => { if (!rowRef.current) return; if (!rowRef.current.contains(e.target)) onOpen(false); }; document.addEventListener('pointerdown', close, true); return () => document.removeEventListener('pointerdown', close, true); }, [isOpen, onOpen]); let offset = isOpen ? -REVEAL : 0; if (drag?.locked === 'x') { offset = Math.max(-REVEAL - 24, Math.min(0, drag.base + drag.dx)); } const isDragging = drag?.locked === 'x'; return (

{children}

); } function TxRow({ it }) { const tone = toneOf(it.payer); const youPaid = it.payer === ME; const myShare = it.myShare; return ( <>

{it.payer[0]} {it.cat && {it.cat}}

{it.title} {youPaid ? 'you paid' : `${it.payer} paid`} {it.participants.map((name) => { const m = memberOf(name); if (!m) return null; return ( {m.key} ); })}

₹{it.gross.toLocaleString('en-IN')} {myShare.side === 'teal' ? '+' : '−'}₹{myShare.amt.toLocaleString('en-IN')}

); } // ───────────────────────────────────────────────────────────── // Balances pane // ───────────────────────────────────────────────────────────── function BalancesPane({ owe, owed }) { const net = owed - owe; return (

simplified to the fewest payments — settling these clears everyone.

{FLOWS.map((f) => )}

your net position = 0 ? 'var(--teal)' : 'var(--ink)' }}> {net >= 0 ? '+' : '−'}₹{Math.abs(net).toLocaleString('en-IN')}

); } function FlowRow({ f }) { const youAre = f.from === ME ? 'from' : (f.to === ME ? 'to' : null); const fromTone = toneOf(f.from); const toTone = toneOf(f.to); const youOwe = youAre === 'from'; const youGet = youAre === 'to'; return (

{f.from[0]} {f.to[0]}

{youOwe ? ( <>you pay {f.to} ₹{f.amount.toLocaleString('en-IN')} ) : youGet ? ( <>{f.from} pays you ₹{f.amount.toLocaleString('en-IN')} ) : ( <>{f.from} pays {f.to} ₹{f.amount.toLocaleString('en-IN')} )} {f.note}

{youOwe ? ( ) : youGet ? ( ) : ( )}

); } // ───────────────────────────────────────────────────────────── // Action bar (buttons mode) // ───────────────────────────────────────────────────────────── // ───────────────────────────────────────────────────────────── // FloatingFab (buttons mode) — single floating + button at bottom-center // ───────────────────────────────────────────────────────────── function FloatingFab({ onAdd }) { return (

); } // ───────────────────────────────────────────────────────────── // Action bar (legacy — unused in new layout) // ───────────────────────────────────────────────────────────── function ActionBar({ onAdd, onSettle }) { return (

); } // ───────────────────────────────────────────────────────────── // Gesture dock — bidirectional: drag UP = add, drag DOWN = settle // ───────────────────────────────────────────────────────────── function GestureDock({ onAdd, onSettle, nextSettle }) { const [drag, setDrag] = React.useState(null); const UP_THRESHOLD = 50; const DOWN_THRESHOLD = 30; const onDown = (e) => { e.currentTarget.setPointerCapture?.(e.pointerId); setDrag({ startY: e.clientY, dy: 0, pid: e.pointerId }); }; const onMove = (e) => { if (!drag || drag.pid !== e.pointerId) return; const dy = e.clientY - drag.startY; setDrag({ ...drag, dy }); }; const onUp = () => { if (!drag) return; if (drag.dy < -UP_THRESHOLD) onAdd('＋ add expense'); else if (drag.dy > DOWN_THRESHOLD) { onSettle(`settle ₹${nextSettle.amount.toLocaleString('en-IN')} → ${nextSettle.to}`); } setDrag(null); }; const dy = drag?.dy || 0; const direction = dy < -4 ? 'up' : (dy > 4 ? 'down' : null); const upLift = direction === 'up' ? Math.min(100, -dy) : 0; const downPull = direction === 'down' ? Math.min(60, dy) : 0; const upProgress = Math.min(1, upLift / UP_THRESHOLD); const downProgress = Math.min(1, downPull / DOWN_THRESHOLD); const armed = (direction === 'up' && upProgress >= 1) || (direction === 'down' && downProgress >= 1); // handle nudges in the direction of the finger const handleNudge = (direction === 'up' ? -upLift * 0.32 : direction === 'down' ? downPull * 0.6 : 0); return (

{/* preview pill (lives above the handle in both cases — the direction is conveyed by color + content, not position) */} {direction && (

{direction === 'up' ? ( <> ＋ add expense ) : ( <> settle ₹{nextSettle.amount.toLocaleString('en-IN')} → {nextSettle.to} )}

)}

↑ swipe to add

↓ swipe to settle

); } // ───────────────────────────────────────────────────────────── // Radial FAB — long-press to fan out 4 options on an arc above the FAB. // Backdrop blurs + darkens while the menu is open. Each option has a // scale-up hot state when the pointer enters it. Release while hovering // an item commits it. // ───────────────────────────────────────────────────────────── function RadialFab({ onCommit, nextSettle }) { const [open, setOpen] = React.useState(false); const [hot, setHot] = React.useState(null); // hovered item id const longPressTimer = React.useRef(null); const pointerActive = React.useRef(false); // 4 items on an arc above the fab; angles in degrees, -90 = straight up. // distance is how far each tile sits from the fab center. const items = React.useMemo(() => ([ { id: 'add', label: 'add', angle: -150, dist: 100, icon: (＋) }, { id: 'settle', label: 'settle', angle: -110, dist: 116, icon: () }, { id: 'scan', label: 'scan', angle: -70, dist: 116, icon: () }, { id: 'note', label: 'note', angle: -30, dist: 100, icon: () }, ]), []); const COMMIT = { add: '＋ add expense', settle: `settle ₹${nextSettle.amount.toLocaleString('en-IN')} → ${nextSettle.to}`, scan: '📷 scan receipt', note: '✎ note added', }; const closeMenu = () => { setOpen(false); setHot(null); pointerActive.current = false; if (longPressTimer.current) { clearTimeout(longPressTimer.current); longPressTimer.current = null; } }; // hit-test items by position relative to the menu center (fab center) const itemAt = (clientX, clientY, fabCenter) => { const dx = clientX - fabCenter.x; const dy = clientY - fabCenter.y; for (const it of items) { const rad = (it.angle * Math.PI) / 180; const ix = Math.cos(rad) * it.dist; const iy = Math.sin(rad) * it.dist; const d = Math.hypot(dx - ix, dy - iy); if (d < 34) return it.id; } return null; }; const fabRef = React.useRef(null); const onPointerDown = (e) => { pointerActive.current = true; try { e.currentTarget.setPointerCapture?.(e.pointerId); } catch {} // long-press → open menu longPressTimer.current = setTimeout(() => { if (pointerActive.current) setOpen(true); longPressTimer.current = null; }, 320); }; const onPointerMove = (e) => { if (!open || !fabRef.current) return; const r = fabRef.current.getBoundingClientRect(); const center = { x: r.left + r.width / 2, y: r.top + r.height / 2 }; const next = itemAt(e.clientX, e.clientY, center); if (next !== hot) setHot(next); }; const onPointerUp = (e) => { pointerActive.current = false; if (longPressTimer.current) { clearTimeout(longPressTimer.current); longPressTimer.current = null; // tap (no long-press) — quick add if (!open) { onCommit(COMMIT.add); return; } } if (open) { if (hot) onCommit(COMMIT[hot]); closeMenu(); } }; const onPointerCancel = () => closeMenu(); // close on Escape React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') closeMenu(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open]); return ( <> {/* backdrop sits in the page, covers the whole screen when open */}

{ e.stopPropagation(); closeMenu(); }} />

tap to add · hold for more {/* menu items live INSIDE the dock, anchored at the FAB center. Items fan UPWARD because all angles are in the upper hemisphere (sin < 0 in screen coords). */}

{items.map((it, i) => { const rad = (it.angle * Math.PI) / 180; const tx = open ? Math.cos(rad) * it.dist : 0; const ty = open ? Math.sin(rad) * it.dist : 0; return (

{it.icon}

{it.label}

); })}

); } // ───────────────────────────────────────────────────────────── // Commit toast — fly-in confirmation when a gesture commits // ───────────────────────────────────────────────────────────── function CommitToast({ message, onDone }) { React.useEffect(() => { if (!message) return; const t = setTimeout(onDone, 1200); return () => clearTimeout(t); }, [message, onDone]); return (

{message && ( <> {message} )}

); } // ───────────────────────────────────────────────────────────── // Tweaks // ───────────────────────────────────────────────────────────── function Tweaks({ t, setTweak }) { return ( setTweak('actionMode', v)} /> ); } // ───────────────────────────────────────────────────────────── // Root // ───────────────────────────────────────────────────────────── function App() { const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS); const [view, setView] = React.useState('transactions'); const [expanded, setExpanded] = React.useState(false); const [toast, setToast] = React.useState(null); const owed = 0; const owe = 860; const nextSettle = FLOWS[0]; const fireCommit = (msg) => setToast(msg); return ( <>

{t.actionMode === 'gestures' ? : t.actionMode === 'radial' ? : }

setToast(null)} />

); } ReactDOM.createRoot(document.getElementById('root')).render();