52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1f8d,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { ScrollArea } from "@/components/ui/scroll-area"; import { useMeasuredRowVirtualization } from "./measured-row-virtualization"; export type InteractiveItemListItem = { id: string; disabled?: boolean; }; export type InteractiveItemListRenderState = { isActive: boolean; isDisabled: boolean; isSelected: boolean; }; const DEFAULT_ESTIMATE_SIZE = 72; const ROW_PADDING = 12; function requestFrame(callback: () => void) { if (typeof window !== "undefined" && window.requestAnimationFrame) { window.requestAnimationFrame(callback); return; } setTimeout(callback, 0); } export function InteractiveItemList({ activeItemId, "aria-label": ariaLabel, className, emptyLabel = "No items.", estimateSize = DEFAULT_ESTIMATE_SIZE, items, onActivateItem, onClearPreview, onClearSelection, onPreviewItem, onVisibleItemChange, renderItem, selectedItemId, }: { activeItemId?: string | null; "aria-label": string; className?: string; emptyLabel?: string; estimateSize?: number; items: readonly Item[]; onActivateItem?: (item: Item) => void; onClearPreview?: () => void; onClearSelection?: () => void; onPreviewItem?: (item: Item) => void; onVisibleItemChange?: (item: Item) => void; renderItem: ( item: Item, state: InteractiveItemListRenderState, ) => React.ReactNode; selectedItemId?: string | null; }) { const viewportRef = React.useRef(null); const optionRefs = React.useRef(new Map()); const visibleItemIdRef = React.useRef(null); const getItemKey = React.useCallback( (index: number) => items[index]?.id ?? index, [items], ); const { measureRow, scrollToIndex, totalSize, virtualRows } = useMeasuredRowVirtualization({ count: items.length, estimateSize, getItemKey, initialViewportHeight: 600, overscan: 8, paddingEnd: ROW_PADDING, paddingStart: ROW_PADDING, scrollRef: viewportRef, }); const firstEnabledIndex = React.useCallback( () => items.findIndex((item) => !item.disabled), [items], ); const lastEnabledIndex = React.useCallback(() => { for (let index = items.length - 1; index >= 0; index -= 1) { if (!items[index]?.disabled) return index; } return -1; }, [items]); const enabledIndexFrom = React.useCallback( (startIndex: number, direction: 1 | -1) => { for ( let index = startIndex; index >= 0 && index < items.length; index += direction ) { if (!items[index]?.disabled) return index; } return -1; }, [items], ); const focusItem = React.useCallback( (index: number) => { const item = items[index]; if (!item || item.disabled) return; scrollToIndex(index, { align: "center", behavior: "auto" }); requestFrame(() => { optionRefs.current.get(item.id)?.focus(); }); }, [items, scrollToIndex], ); const reportVisibleItem = React.useCallback(() => { if (!onVisibleItemChange) return; const viewport = viewportRef.current; if (!viewport) return; const marker = viewport.scrollTop + ROW_PADDING; const virtualItem = virtualRows.find((row) => row.start + row.size >= marker) ?? virtualRows[0]; const fallbackIndex = Math.min( items.length - 1, Math.max(0, Math.floor(marker / estimateSize)), ); const item = virtualItem ? items[virtualItem.index] : items[fallbackIndex]; if (!item || item.disabled || item.id === visibleItemIdRef.current) return; visibleItemIdRef.current = item.id; onVisibleItemChange(item); }, [estimateSize, items, onVisibleItemChange, virtualRows]); const handleViewportScroll = React.useCallback(() => { requestFrame(reportVisibleItem); }, [reportVisibleItem]); return ( {items.length ? ( ) : (

{emptyLabel}

)} ); } 55:T3ca6,"use client"; import * as React from "react"; import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect"; import { joinEffectKey } from "@/lib/effect-key"; const DEFAULT_INITIAL_VIEWPORT_HEIGHT = 600; const DEFAULT_OVERSCAN = 6; const MAX_VIRTUAL_ITEMS = 1_000; export interface MeasuredRowVirtualItem { index: number; key: React.Key; start: number; size: number; end: number; } export interface MeasuredRowVirtualItemWindow { end: number; items: MeasuredRowVirtualItem[]; size: number; start: number; } export interface MeasuredRowOffsets { starts: number[]; totalSize: number; } export interface MeasuredRowScrollTarget { align?: "start" | "center" | "end"; behavior?: ScrollBehavior; } export function buildMeasuredRowOffsets({ rowSizes, paddingStart = 0, paddingEnd = 0, }: { rowSizes: readonly number[]; paddingStart?: number; paddingEnd?: number; }): MeasuredRowOffsets { const starts: number[] = []; let offset = safeSize(paddingStart); for (const rowSize of rowSizes) { starts.push(offset); offset += safeSize(rowSize); } return { starts, totalSize: offset + safeSize(paddingEnd), }; } export function getMeasuredRowVirtualItems({ getItemKey, maxItems = MAX_VIRTUAL_ITEMS, offsets, overscan = DEFAULT_OVERSCAN, rowSizes, scrollTop, viewportHeight, }: { getItemKey?: (index: number) => React.Key; maxItems?: number; offsets: MeasuredRowOffsets; overscan?: number; rowSizes: readonly number[]; scrollTop: number; viewportHeight: number; }): MeasuredRowVirtualItem[] { const count = rowSizes.length; if (count === 0) return []; const safeScrollTop = safeOffset(scrollTop); const safeViewportHeight = Math.max(1, safeSize(viewportHeight)); const visibleStartIndex = findFirstRowEndingAfter({ offset: safeScrollTop, rowSizes, starts: offsets.starts, }); const visibleEndExclusive = findFirstRowStartingAtOrAfter({ offset: safeScrollTop + safeViewportHeight, starts: offsets.starts, }); const start = Math.max(0, visibleStartIndex - safeCount(overscan)); const end = Math.min( count, Math.max(visibleStartIndex + 1, visibleEndExclusive) + safeCount(overscan), ); const [cappedStart, cappedEnd] = capMeasuredRowRange({ count, end, maxItems, start, visibleEnd: Math.min( count, Math.max(visibleStartIndex + 1, visibleEndExclusive), ), visibleStart: visibleStartIndex, }); return Array.from({ length: cappedEnd - cappedStart }, (_, offset) => { const index = cappedStart + offset; const rowStart = offsets.starts[index] ?? 0; const size = safeSize(rowSizes[index]); return { index, key: getItemKey?.(index) ?? index, start: rowStart, size, end: rowStart + size, }; }); } export function measuredRowVirtualItemWindow( items: readonly MeasuredRowVirtualItem[], ): MeasuredRowVirtualItemWindow { const start = items[0]?.start ?? 0; const end = items.length ? items[items.length - 1]!.end : start; return { end, items: items.map((item) => ({ ...item, start: item.start - start, end: item.end - start, })), size: Math.max(0, end - start), start, }; } export function measuredRowScrollTopForIndex({ align = "center", index, offsets, rowSizes, viewportHeight, }: { align?: NonNullable; index: number; offsets: MeasuredRowOffsets; rowSizes: readonly number[]; viewportHeight: number; }) { if (!Number.isSafeInteger(index) || index < 0) return 0; const rowStart = offsets.starts[index]; if (rowStart == null) return 0; const rowSize = safeSize(rowSizes[index]); const safeViewportHeight = safeSize(viewportHeight); if (align === "end") return Math.max(0, rowStart - safeViewportHeight + rowSize); if (align === "center") { return Math.max(0, rowStart - safeViewportHeight / 2 + rowSize / 2); } return Math.max(0, rowStart); } export function useMeasuredRowVirtualization({ count, estimateSize, getItemKey, initialViewportHeight = DEFAULT_INITIAL_VIEWPORT_HEIGHT, overscan = DEFAULT_OVERSCAN, paddingEnd = 0, paddingStart = 0, scrollRef, }: { count: number; estimateSize: number; getItemKey?: (index: number) => React.Key; initialViewportHeight?: number; overscan?: number; paddingEnd?: number; paddingStart?: number; scrollRef: React.RefObject; }) { const safeCount = measuredRowCount(count); const safeEstimateSize = Math.max(1, safeSize(estimateSize)); const [version, forceVersion] = React.useReducer( (current: number) => current + 1, 0, ); const [scrollElement, setScrollElement] = React.useState( scrollRef.current, ); const [viewport, setViewport] = React.useState({ clientHeight: 0, scrollTop: 0, }); const measuredSizesRef = React.useRef(new Map()); const rowElementsRef = React.useRef(new Map()); const observedIndexesRef = React.useRef(new Map()); const rowObserverRef = React.useRef(null); const offsetsRef = React.useRef({ starts: [], totalSize: 0, }); const rowSizesRef = React.useRef([]); const viewportRef = React.useRef(viewport); viewportRef.current = viewport; const updateMeasuredSize = React.useCallback( (index: number, nextSize: number | null) => { if (!Number.isSafeInteger(index) || index < 0 || index >= safeCount) { return; } if (nextSize == null) return; const safeNextSize = safeSize(nextSize); if (safeNextSize <= 0) return; const measuredSizes = measuredSizesRef.current; const previousSize = measuredSizes.get(index) ?? safeEstimateSize; if (previousSize === safeNextSize) return; const previousOffsets = offsetsRef.current; const previousStart = previousOffsets.starts[index] ?? 0; const previousEnd = previousStart + previousSize; const delta = safeNextSize - previousSize; const currentScrollTop = viewportRef.current.scrollTop; measuredSizes.set(index, safeNextSize); const currentScrollElement = scrollRef.current; if ( currentScrollElement && previousEnd <= currentScrollTop && delta !== 0 ) { currentScrollElement.scrollTop = Math.max( 0, currentScrollElement.scrollTop + delta, ); setViewport((current) => ({ ...current, scrollTop: safeOffset(currentScrollElement.scrollTop), })); } forceVersion(); }, [safeCount, safeEstimateSize, scrollRef], ); const measureRow = React.useCallback( (index: number, element: HTMLElement | null) => { if (!Number.isSafeInteger(index) || index < 0) return; const rowElements = rowElementsRef.current; const previousElement = rowElements.get(index); if (previousElement && previousElement !== element) { rowObserverRef.current?.unobserve(previousElement); observedIndexesRef.current.delete(previousElement); rowElements.delete(index); } if (!element) return; rowElements.set(index, element); observedIndexesRef.current.set(element, index); rowObserverRef.current?.observe(element); updateMeasuredSize(index, readElementHeight(element)); }, [updateMeasuredSize], ); useKeyedLayoutEffect( joinEffectKey([scrollRef, scrollRef.current, scrollElement]), () => { const nextScrollElement = scrollRef.current; if (nextScrollElement !== scrollElement) { setScrollElement(nextScrollElement); } }, ); useKeyedLayoutEffect( joinEffectKey([scrollElement, updateMeasuredSize]), () => { if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver((entries) => { for (const entry of entries) { const index = observedIndexesRef.current.get( entry.target as HTMLElement, ); if (index == null) continue; updateMeasuredSize(index, readResizeEntryHeight(entry)); } }); rowObserverRef.current = observer; for (const element of rowElementsRef.current.values()) { observer.observe(element); } return () => { observer.disconnect(); if (rowObserverRef.current === observer) rowObserverRef.current = null; }; }, ); useKeyedLayoutEffect( joinEffectKey([scrollElement, initialViewportHeight]), () => { if (!scrollElement) { setViewport({ clientHeight: 0, scrollTop: 0 }); return; } let frame = 0; const readViewport = () => { frame = 0; const next = { clientHeight: safeSize(scrollElement.clientHeight), scrollTop: safeOffset(scrollElement.scrollTop), }; setViewport((current) => current.clientHeight === next.clientHeight && current.scrollTop === next.scrollTop ? current : next, ); }; const scheduleRead = () => { if (frame) return; frame = requestFrame(readViewport); }; readViewport(); scrollElement.addEventListener("scroll", scheduleRead, { passive: true }); const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleRead) : null; observer?.observe(scrollElement); return () => { if (frame) cancelFrame(frame); scrollElement.removeEventListener("scroll", scheduleRead); observer?.disconnect(); }; }, ); const rowSizes = React.useMemo( () => { void version; return Array.from( { length: safeCount }, (_, index) => measuredSizesRef.current.get(index) ?? safeEstimateSize, ); }, [safeCount, safeEstimateSize, version], ); const offsets = React.useMemo( () => buildMeasuredRowOffsets({ paddingEnd, paddingStart, rowSizes, }), [paddingEnd, paddingStart, rowSizes], ); const viewportHeight = viewport.clientHeight || safeSize(initialViewportHeight) || safeEstimateSize; const virtualRows = React.useMemo( () => getMeasuredRowVirtualItems({ getItemKey, offsets, overscan, rowSizes, scrollTop: viewport.scrollTop, viewportHeight, }), [ getItemKey, offsets, overscan, rowSizes, viewport.scrollTop, viewportHeight, ], ); const virtualRowWindow = React.useMemo( () => measuredRowVirtualItemWindow(virtualRows), [virtualRows], ); const scrollToIndex = React.useCallback( (index: number, options?: MeasuredRowScrollTarget) => { const currentScrollElement = scrollRef.current; if (!currentScrollElement) return; const top = measuredRowScrollTopForIndex({ align: options?.align ?? "center", index, offsets: offsetsRef.current, rowSizes: rowSizesRef.current, viewportHeight: currentScrollElement.clientHeight || viewportHeight, }); if (typeof currentScrollElement.scrollTo === "function") { currentScrollElement.scrollTo({ behavior: options?.behavior ?? "smooth", top, }); } else { currentScrollElement.scrollTop = top; } setViewport((current) => ({ ...current, scrollTop: safeOffset(currentScrollElement.scrollTop), })); }, [scrollRef, viewportHeight], ); offsetsRef.current = offsets; rowSizesRef.current = rowSizes; return { measureRow, scrollToIndex, totalSize: offsets.totalSize, viewportClientHeight: viewportHeight, virtualRowWindow, virtualRows, }; } function capMeasuredRowRange({ count, end, maxItems, start, visibleEnd, visibleStart, }: { count: number; end: number; maxItems: number; start: number; visibleEnd: number; visibleStart: number; }) { const safeMaxItems = Math.max(1, safeCount(maxItems)); if (end - start <= safeMaxItems) return [start, end] as const; const visibleCount = Math.min( safeMaxItems, Math.max(1, visibleEnd - visibleStart), ); const leadingBudget = Math.floor((safeMaxItems - visibleCount) / 2); let cappedStart = Math.max(start, visibleStart - leadingBudget); let cappedEnd = Math.min(end, cappedStart + safeMaxItems); if (cappedEnd - cappedStart < safeMaxItems) { cappedStart = Math.max(start, cappedEnd - safeMaxItems); } if (cappedEnd < visibleEnd) { cappedEnd = Math.min(end, visibleEnd); cappedStart = Math.max(start, cappedEnd - safeMaxItems); } cappedEnd = Math.min(count, cappedEnd); return [cappedStart, cappedEnd] as const; } function findFirstRowEndingAfter({ offset, rowSizes, starts, }: { offset: number; rowSizes: readonly number[]; starts: readonly number[]; }) { let low = 0; let high = rowSizes.length - 1; let result = rowSizes.length - 1; while (low <= high) { const middle = Math.floor((low + high) / 2); const end = (starts[middle] ?? 0) + safeSize(rowSizes[middle]); if (end > offset) { result = middle; high = middle - 1; } else { low = middle + 1; } } return result; } function findFirstRowStartingAtOrAfter({ offset, starts, }: { offset: number; starts: readonly number[]; }) { let low = 0; let high = starts.length - 1; let result = starts.length; while (low <= high) { const middle = Math.floor((low + high) / 2); if ((starts[middle] ?? 0) >= offset) { result = middle; high = middle - 1; } else { low = middle + 1; } } return result; } function readElementHeight(element: HTMLElement) { const rectHeight = element.getBoundingClientRect().height; if (Number.isFinite(rectHeight) && rectHeight > 0) return rectHeight; return element.offsetHeight; } function readResizeEntryHeight(entry: ResizeObserverEntry) { const borderBoxSize = entry.borderBoxSize; const boxSize = Array.isArray(borderBoxSize) ? borderBoxSize[0] : borderBoxSize; if (boxSize && Number.isFinite(boxSize.blockSize) && boxSize.blockSize > 0) { return boxSize.blockSize; } if ( Number.isFinite(entry.contentRect.height) && entry.contentRect.height > 0 ) { return entry.contentRect.height; } return readElementHeight(entry.target as HTMLElement); } function requestFrame(callback: FrameRequestCallback) { if (typeof window !== "undefined" && window.requestAnimationFrame) { return window.requestAnimationFrame(callback); } return setTimeout(() => callback(performance.now()), 0) as unknown as number; } function cancelFrame(frame: number) { if (typeof window !== "undefined" && window.cancelAnimationFrame) { window.cancelAnimationFrame(frame); return; } clearTimeout(frame); } function measuredRowCount(count: number) { return Number.isFinite(count) && count > 0 ? Math.floor(count) : 0; } function safeCount(value: number) { return Number.isFinite(value) && value > 0 ? Math.floor(value) : 0; } function safeOffset(value: number) { return Number.isFinite(value) && value > 0 ? value : 0; } function safeSize(value: number | undefined) { return Number.isFinite(value) && value != null && value > 0 ? value : 0; } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@retab","registryDependencies":["@retab/scroll-area","@retab/utils","@retab/effect-key","@retab/use-keyed-layout-effect"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/new-york-v4/ui/interactive-item-list.tsx","content":"$54","type":"registry:ui","target":"@ui/interactive-item-list.tsx"},{"path":"registry/new-york-v4/ui/measured-row-virtualization.ts","content":"$55","type":"registry:ui","target":"@ui/measured-row-virtualization.ts"}],"className":"h-[70svh] min-h-80"}]]}]