{/* Light source from −45° / 80° */}

{/* Dispersion — subtle chromatic edge */}

); }; const TradeBottomNav = ({ active = 'discover', onChange = () => {}, onVoice = () => {} }) => { /* Per-item layout cache: { [key]: { x, width } } where x is the button's left edge in buttonRow coordinates. Once all 4 nav buttons report, we can compute the centered pill x for each. The FAB is excluded — it sits in slot 3 but is not a navigable destination. */ const [layouts, setLayouts] = React.useState({}); const buttonRowRef = React.useRef(null); const navBtnRefs = React.useRef({}); /* Layout measurement — read each NavBtn's getBoundingClientRect() relative to the parent buttonRow. Synchronous in useLayoutEffect so the first-paint pill x is correct (no x=0 flash). */ React.useLayoutEffect(() => { const rowEl = buttonRowRef.current; if (!rowEl) return; const rowRect = rowEl.getBoundingClientRect(); const next = {}; let allFound = true; for (const item of NAV_ITEMS) { const el = navBtnRefs.current[item.key]; if (!el) { allFound = false; continue; } const r = el.getBoundingClientRect(); next[item.key] = { x: r.left - rowRect.left, width: r.width }; } if (allFound) { setLayouts(next); if (isFirstSettleRef.current) { const l = next[active]; if (l) { const t = l.x + l.width / 2 - PILL_W / 2; isFirstSettleRef.current = false; pillXRef.current = t; setPillX(t); } } } }, []); /* Pill x-target per item: button center − pill half-width. */ const targets = React.useMemo(() => { const out = {}; for (const item of NAV_ITEMS) { const l = layouts[item.key]; if (l) out[item.key] = l.x + l.width / 2 - PILL_W / 2; } return out; }, [layouts]); const allMeasured = NAV_ITEMS.every((i) => layouts[i.key]); /* Pill translateX — driven by spring on `active` changes and during drag-release snap; set directly during pan. */ const [pillX, setPillX] = React.useState(0); const pillXRef = React.useRef(0); const draggingRef = React.useRef(false); const isFirstSettleRef = React.useRef(true); const cancelSpringRef = React.useRef(null); React.useEffect(() => { if (!allMeasured) return; if (draggingRef.current) return; if (isFirstSettleRef.current) return; const target = targets[active]; if (target == null) return; if (cancelSpringRef.current) cancelSpringRef.current(); cancelSpringRef.current = springTo( pillXRef.current, target, SPRING_CONFIG, (x) => { pillXRef.current = x; setPillX(x); } ); pillXRef.current = target; }, [active, allMeasured, targets]); /* Drag clamp range — min/max of the four nav-button targets. The FAB slot is intentionally excluded so the pill can't park there. */ const dragRange = React.useMemo(() => { if (!allMeasured) return null; const xs = NAV_ITEMS.map((i) => targets[i.key]); return { min: Math.min(...xs), max: Math.max(...xs) }; }, [allMeasured, targets]); const pointerStartXRef = React.useRef(0); const dragStartXRef = React.useRef(0); const pointerIdRef = React.useRef(null); const pointerActiveRef = React.useRef(false); const handlePointerDown = (e) => { pointerActiveRef.current = true; pointerStartXRef.current = e.clientX; dragStartXRef.current = pillXRef.current; pointerIdRef.current = e.pointerId; }; const handlePointerMove = (e) => { if (!pointerActiveRef.current) return; if (!dragRange) return; const dx = e.clientX - pointerStartXRef.current; if (!draggingRef.current && Math.abs(dx) > DRAG_THRESHOLD) { draggingRef.current = true; try { e.currentTarget.setPointerCapture(pointerIdRef.current); } catch (_) {} if (cancelSpringRef.current) { cancelSpringRef.current(); cancelSpringRef.current = null; } } if (draggingRef.current) { const next = Math.max(dragRange.min, Math.min(dragRange.max, dragStartXRef.current + dx)); pillXRef.current = next; setPillX(next); } }; const handlePointerUp = (e) => { if (!pointerActiveRef.current) return; pointerActiveRef.current = false; try { e.currentTarget.releasePointerCapture(pointerIdRef.current); } catch (_) {} const wasDragging = draggingRef.current; draggingRef.current = false; if (!wasDragging) return; if (!allMeasured) return; const current = pillXRef.current; let nearestKey = NAV_ITEMS[0].key; let nearestDist = Infinity; for (const item of NAV_ITEMS) { const d = Math.abs(current - targets[item.key]); if (d < nearestDist) { nearestDist = d; nearestKey = item.key; } } const target = targets[nearestKey]; if (cancelSpringRef.current) cancelSpringRef.current(); /* Fire onChange BEFORE the snap spring so the page cross-fade runs in parallel with the pill settle (was previously gated to the spring's complete callback). */ if (nearestKey !== active) onChange(nearestKey); cancelSpringRef.current = springTo( pillXRef.current, target, SPRING_CONFIG, (x) => { pillXRef.current = x; setPillX(x); } ); pillXRef.current = target; }; const handlePointerCancel = (e) => { if (!pointerActiveRef.current) return; pointerActiveRef.current = false; try { e.currentTarget.releasePointerCapture(pointerIdRef.current); } catch (_) {} const wasDragging = draggingRef.current; draggingRef.current = false; if (!wasDragging) return; if (!allMeasured) return; const target = targets[active]; if (target != null) { if (cancelSpringRef.current) cancelSpringRef.current(); cancelSpringRef.current = springTo( pillXRef.current, target, SPRING_CONFIG, (x) => { pillXRef.current = x; setPillX(x); } ); pillXRef.current = target; } }; return ( /* trade-bottom-nav-shell instead of bottom-nav-shell: the mobile @media adds an env(safe-area-inset-bottom) lift to .bottom-nav-shell for the home BottomNav. Trade's INNER capsule already uses an env(...) lift, so applying both would double-lift the pill and put it ~34px above its intended position. Using a different class keeps the home lift while letting the trade outer stay at bottom:0. */

{/* Visual glass capsule — same Figma recipe as BottomNav. */}

{/* L1 · Frost — borderRadius must be set explicitly: backdrop-filter is NOT clipped by the parent's border-radius even with overflow:hidden, so without this the blur renders as a rectangle and leaks past the pill's rounded ends as visible "corner" artifacts. Matching br:100 clips the blur to the capsule. */}

{/* L2 · Light source from 0°/100° */}

{/* L3 · Refraction crest */}

{/* L4 · Dispersion edge */}

{/* Edge rim — sits above the glass, no clipping needed. */}

{/* Sliding pill — rendered BEFORE the buttonRow so the FAB in the buttonRow draws on top when the pill crosses center. */} {allMeasured && ( )} {/* Button row — 5 slots: Discover · Trade · FAB · Portfolio · Activity. */}

{ if (!draggingRef.current) onChange(NAV_ITEMS[0].key); }} btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[0].key] = el; }} /> { if (!draggingRef.current) onChange(NAV_ITEMS[1].key); }} btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[1].key] = el; }} />

{/* Empty — shared at App root sits over this slot. */}

{ if (!draggingRef.current) onChange(NAV_ITEMS[2].key); }} btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[2].key] = el; }} /> { if (!draggingRef.current) onChange(NAV_ITEMS[3].key); }} btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[3].key] = el; }} />

); }; const styles = { outer: { position: 'absolute', left: '16px', right: '16px', bottom: 0, height: '120px', zIndex: 50, }, glassCapsule: { position: 'absolute', left: 0, right: 0, bottom: '28px', height: '58px', borderRadius: '100px', overflow: 'hidden', backgroundColor: 'rgba(255,255,255,0.10)', boxShadow: '0px 12px 32px rgba(16, 24, 40, 0.16)', }, rim: { position: 'absolute', left: 0, right: 0, bottom: '28px', height: '58px', borderRadius: '100px', border: '1.5px solid rgba(255,255,255,0.7)', }, refractionTop: { position: 'absolute', top: 0, left: 0, right: 0, height: '2px', }, dispersionBottom: { position: 'absolute', bottom: 0, left: 0, right: 0, height: '2px', }, pillContainer: { position: 'absolute', left: 0, bottom: `${28 + (58 - PILL_H) / 2}px`, width: `${PILL_W}px`, height: `${PILL_H}px`, }, buttonRow: { position: 'absolute', left: 0, right: 0, bottom: '28px', height: '58px', display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px', alignItems: 'center', justifyContent: 'center', }, btn: { flex: 1, maxWidth: '77px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', }, btnInner: { width: '64px', height: '48px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', }, activePillBody: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: `${PILL_R}px`, backgroundColor: 'rgba(0,175,171,0.20)', border: '1px solid rgba(255,255,255,0.75)', overflow: 'hidden', }, iconWrap: { width: '26px', height: '26px', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', }, iconLayer: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', }, fabSlot: { flex: 1, maxWidth: '77px', display: 'flex', alignItems: 'center', justifyContent: 'center', }, fabWrap: { width: '76px', height: '76px', transform: 'translateY(-22px)', position: 'relative', }, fabCutout: { position: 'absolute', top: '-5px', left: '-5px', width: '86px', height: '86px', borderRadius: '43px', backgroundColor: colors.bg, }, fabRing: { position: 'absolute', top: 0, left: 0, width: '76px', height: '76px', borderRadius: '38px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0px 0px 24px rgba(0, 175, 171, 0.4)', }, fab: { width: '68px', height: '68px', borderRadius: '34px', backgroundColor: colors.teal, overflow: 'hidden', }, fabVideo: { width: '100%', height: '100%', }, }; Object.assign(window, { TradeBottomNav }); })();