{ if (event.pointerType === 'mouse') expand() }}
onPointerLeave={() => { if (!pinned.current && !deck.current?.contains(document.activeElement)) onCollapse() }}
- onFocus={() => { if (!suppressFocus.current) expand() }}
+ onFocus={event => {
+ if (suppressFocus.current) return
+ if (event.target.isSameNode(cover.current) && restoreCoverFocus()) { revealCover(); return }
+ expand()
+ if (expanded && event.target.isSameNode(cover.current)) focusFirstPreview()
+ }}
onBlur={event => { if (!(event.relatedTarget instanceof Element && event.relatedTarget.closest('.instrument-gallery-backdrop')) && !event.currentTarget.contains(event.relatedTarget)) { pinned.current = false; onCollapse() } }}
onKeyDown={event => { if (event.key === 'Escape' && expanded) { event.preventDefault(); event.stopPropagation(); dismiss() } }}>
- {items.length > 0 &&
}
-function FieldVelocityBox({ records, markets, measurements, examples, area, onOpen }: {
+function FieldVelocityBox({ records, markets, measurements, examples, area, onOpen, restoreCoverFocus }: {
records: InstrumentRecord[]; markets: MarketSignal[]; measurements: MeasurementSeries[]; examples: IdeaVintageExample[]; area: FocusAreaKey
onOpen: (id: InstrumentId, itemId: string) => void
+ restoreCoverFocus: (instrument: InstrumentId) => boolean
}) {
const areaLabel = FOCUS_AREAS.find(f => f.key === area)!.label
// One owner for the entire deck row: a pinned/focused deck cannot coexist
// with a newly hovered one. Late leave/blur events only close their own deck.
const [expandedInstrument, setExpandedInstrument] = useState
(null)
- return
- {records.map(record =>
setExpandedInstrument(record.instrument)}
- onCollapse={() => setExpandedInstrument(current => current === record.instrument ? null : current)} />)}
+ const viewport = useRef(null)
+ const galleries = records.map(record => instrumentGallery(record, measurements, markets, examples, areaLabel))
+ const expandedIndex = records.findIndex(record => record.instrument === expandedInstrument)
+ const viewCount = expandedIndex < 0 ? 0 : galleries[expandedIndex].items.length
+ const extra = Math.max(0, viewCount - 1)
+ useLayoutEffect(() => {
+ if (!expandedInstrument) return
+ const reveal = () => {
+ const frame = viewport.current
+ const deck = frame?.querySelector(`[data-chart-deck="${expandedInstrument}"]`)
+ if (!frame?.clientWidth || !deck) return
+ const row = deck.parentElement!
+ const gap = parseFloat(window.getComputedStyle(row).columnGap) || 0
+ const width = Math.min(viewCount * (deck.offsetWidth + gap) - gap, frame.clientWidth)
+ const start = row.offsetLeft + deck.offsetLeft
+ const left = Math.max(0, start + width - frame.clientWidth, Math.min(frame.scrollLeft, start))
+ // Never scrollIntoView: only the gallery's horizontal viewport may move.
+ // Stable dependencies also preserve a user's scroll across modal/history updates.
+ frame.scrollTo?.({ left, behavior: 'instant' })
+ }
+ reveal()
+ window.addEventListener('resize', reveal)
+ return () => window.removeEventListener('resize', reveal)
+ }, [expandedInstrument, viewCount])
+ return
+
+ {records.map((record, index) => restoreCoverFocus(record.instrument)}
+ expanded={expandedInstrument === record.instrument}
+ subdued={expandedInstrument !== null && expandedInstrument !== record.instrument}
+ shift={expandedIndex >= 0 && index > expandedIndex ? extra : 0}
+ onExpand={() => setExpandedInstrument(record.instrument)}
+ onCollapse={() => setExpandedInstrument(current => current === record.instrument ? null : current)} />)}
+