50: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/1o6_421saitt-.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"] 51: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/1o6_421saitt-.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"] 52:T636b,"use client" import * as React from "react" import { closestCenter, DndContext, DragOverlay, PointerSensor, useDroppable, useSensor, useSensors, type CollisionDetection, type DragEndEvent, type DragOverEvent, type DragStartEvent, } from "@dnd-kit/core" import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { ScrollArea as ScrollAreaPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { ScrollArea as InlineScrollArea, ScrollBar, } from "@/components/ui/scroll-area" import { FileThumbnail } from "@/components/extend/file-thumbnail" import { IconPlaceholder } from "@/components/icon-placeholder" export type DocumentSplitPageId = `page-${number}` export type DocumentSplit = { id: string title: string pages: DocumentSplitPageId[] } type PageId = DocumentSplitPageId type SplitGroup = DocumentSplit const THUMBNAIL_WIDTH = 72 const THUMBNAIL_HEIGHT = 92 const DRAG_OVERLAY_DROP_ANIMATION = null const THUMBNAIL_SURFACE_CLASS_NAME = "relative overflow-hidden rounded-lg border border-border bg-background shadow-xs" const THUMBNAIL_BUTTON_CLASS_NAME = cn( THUMBNAIL_SURFACE_CLASS_NAME, "cursor-grab text-left transition-[border-color,box-shadow,opacity] outline-none hover:border-ring/40 hover:ring-2 hover:ring-ring focus-visible:border-ring/40 focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing" ) const splitterCollisionDetection: CollisionDetection = (args) => { const dragType = args.active.data.current?.type if (dragType === "page") { return closestCenter({ ...args, droppableContainers: args.droppableContainers.filter( (container) => container.data.current?.type === "page" || (container.data.current?.type === "page-dropzone" && container.data.current?.isEmpty) ), }) } if (dragType === "split") { return closestCenter({ ...args, droppableContainers: args.droppableContainers.filter( (container) => container.data.current?.type === "split" ), }) } return closestCenter(args) } export const INITIAL_SPLITS: DocumentSplit[] = [ { id: "split-1", title: "Abstract and intro", pages: ["page-1", "page-2", "page-3"], }, { id: "split-2", title: "Model architecture", pages: ["page-4", "page-5", "page-6", "page-7"], }, { id: "split-3", title: "Training and results", pages: ["page-8", "page-9", "page-10"], }, ] export function createInitialSplits(pageCount: number) { if (pageCount <= 0) return INITIAL_SPLITS const pages = Array.from( { length: pageCount }, (_, index) => `page-${index + 1}` as PageId ) const chunkSize = Math.max(1, Math.ceil(pageCount / 3)) return Array.from( { length: Math.ceil(pageCount / chunkSize) }, (_, index) => { const startIndex = index * chunkSize const groupPages = pages.slice(startIndex, startIndex + chunkSize) const firstPage = getPageNumber(groupPages[0]) const lastPage = getPageNumber(groupPages[groupPages.length - 1]) return { id: `split-${index + 1}`, title: firstPage === lastPage ? `Page ${firstPage}` : `Pages ${firstPage}-${lastPage}`, pages: groupPages, } } ) } function getPageNumber(pageId: PageId) { return Number(pageId.replace("page-", "")) } function getSplitSortableId(groupId: string) { return `split-sortable-${groupId}` } function findGroupId(groups: SplitGroup[], id: string) { if (groups.some((group) => group.id === id)) return id return groups.find((group) => group.pages.includes(id as PageId))?.id ?? null } function getGroupPages(groups: SplitGroup[], groupId: string | null) { return groups.find((group) => group.id === groupId)?.pages ?? [] } function movePageToGroup({ draggedPageId, groups, insertIndex, targetGroupId, }: { draggedPageId: PageId groups: SplitGroup[] insertIndex: number targetGroupId: string }) { return groups.map((group) => { const pagesWithoutDragged = group.pages.filter( (pageId) => pageId !== draggedPageId ) if (group.id !== targetGroupId) { return { ...group, pages: pagesWithoutDragged } } const nextPages = [...pagesWithoutDragged] nextPages.splice(insertIndex, 0, draggedPageId) return { ...group, pages: nextPages } }) } function areSplitGroupsEqual(left: SplitGroup[], right: SplitGroup[]) { if (left === right) return true if (left.length !== right.length) return false return left.every((leftGroup, groupIndex) => { const rightGroup = right[groupIndex] if (!rightGroup) return false return ( leftGroup.id === rightGroup.id && leftGroup.title === rightGroup.title && leftGroup.pages.length === rightGroup.pages.length && leftGroup.pages.every( (pageId, pageIndex) => pageId === rightGroup.pages[pageIndex] ) ) }) } function reorderPageInGroup({ draggedPageId, groups, overPageId, }: { draggedPageId: PageId groups: SplitGroup[] overPageId: PageId }) { const groupId = findGroupId(groups, draggedPageId) const pages = getGroupPages(groups, groupId) const draggedIndex = pages.indexOf(draggedPageId) const overIndex = pages.indexOf(overPageId) if (!groupId || draggedIndex === -1 || overIndex === -1) return groups return groups.map((group) => group.id === groupId ? { ...group, pages: arrayMove(group.pages, draggedIndex, overIndex), } : group ) } function createPageRangeLabel(pageIds: PageId[]) { if (pageIds.length === 0) return "No pages" return `Pages ${pageIds.map(getPageNumber).join(", ")}` } function SplitGroupDropzone({ children, group, }: { children: React.ReactNode group: SplitGroup }) { const { isOver, setNodeRef } = useDroppable({ id: group.id, data: { type: "page-dropzone", isEmpty: group.pages.length === 0 }, }) return (

{children}

) } function PageThumbnail({ imageUrl, onSelect, pageId, }: { imageUrl?: string onSelect: (pageNumber: number) => void pageId: PageId }) { const pageNumber = getPageNumber(pageId) const { attributes, isDragging, listeners, setNodeRef, transform, transition, } = useSortable({ id: pageId, data: { type: "page" }, }) return ( ) } function SplitGroupCard({ canRemove, group, dragHandleProps, thumbnailImages, onRemove, onSelectPage, }: { canRemove: boolean group: SplitGroup dragHandleProps?: React.ComponentPropsWithoutRef<"button"> thumbnailImages: Record onRemove: () => void onSelectPage: (pageNumber: number) => void }) { return (

{group.title}

{createPageRangeLabel(group.pages)}

{group.pages.length}

{group.pages.length ? (

{group.pages.map((pageId) => ( ))}

) : (

Drop pages here

)}

) } function SortableSplitGroupCard({ canRemove, group, thumbnailImages, onRemove, onSelectPage, }: { canRemove: boolean group: SplitGroup thumbnailImages: Record onRemove: () => void onSelectPage: (pageNumber: number) => void }) { const { attributes, isDragging, listeners, setNodeRef, transform, transition, } = useSortable({ id: getSplitSortableId(group.id), data: { type: "split", groupId: group.id }, }) return (

) } function SplitGroupDragOverlay({ group, thumbnailImages, width, onSelectPage, }: { group: SplitGroup thumbnailImages: Record width?: number onSelectPage: (pageNumber: number) => void }) { return (

{}} onSelectPage={onSelectPage} />

) } export function DocumentSplits({ className, splits, thumbnailImages = {}, withFrameDivider = true, onSelectPage, onSplitsChange, }: { className?: string splits: SplitGroup[] thumbnailImages?: Record withFrameDivider?: boolean onSelectPage: (pageNumber: number) => void onSplitsChange: (splits: SplitGroup[]) => void }) { const [draggedPageId, setDraggedPageId] = React.useState(null) const [activeSplitGroupId, setActiveSplitGroupId] = React.useState< string | null >(null) const [activeSplitGroupWidth, setActiveSplitGroupWidth] = React.useState< number | undefined >() const dragStartGroupIdRef = React.useRef(null) const dragStartSplitsRef = React.useRef(null) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 6 } }) ) const handleDragStart = React.useCallback( (event: DragStartEvent) => { const dragType = event.active.data.current?.type if (dragType === "split") { dragStartGroupIdRef.current = null dragStartSplitsRef.current = null setDraggedPageId(null) setActiveSplitGroupId( (event.active.data.current?.groupId as string | undefined) ?? null ) setActiveSplitGroupWidth(event.active.rect.current.initial?.width) return } if (dragType !== "page") { dragStartGroupIdRef.current = null dragStartSplitsRef.current = null setDraggedPageId(null) setActiveSplitGroupId(null) setActiveSplitGroupWidth(undefined) return } const pageId = String(event.active.id) as PageId dragStartGroupIdRef.current = findGroupId(splits, pageId) dragStartSplitsRef.current = splits setDraggedPageId(pageId) setActiveSplitGroupId(null) setActiveSplitGroupWidth(undefined) }, [splits] ) const handleDragOver = React.useCallback( (event: DragOverEvent) => { if (event.active.data.current?.type !== "page" || !event.over) return const pageId = String(event.active.id) as PageId const overId = String(event.over.id) const sourceGroupId = findGroupId(splits, pageId) const targetGroupId = findGroupId(splits, overId) if (!sourceGroupId || !targetGroupId || sourceGroupId === targetGroupId) { return } const targetPages = getGroupPages(splits, targetGroupId) const overIndex = targetPages.indexOf(overId as PageId) const insertIndex = overIndex === -1 ? targetPages.length : overIndex const nextSplits = movePageToGroup({ draggedPageId: pageId, groups: splits, insertIndex, targetGroupId, }) if (!areSplitGroupsEqual(splits, nextSplits)) { onSplitsChange(nextSplits) } }, [onSplitsChange, splits] ) const handleDragEnd = React.useCallback( (event: DragEndEvent) => { if (event.active.data.current?.type === "split" && event.over) { const activeGroupId = event.active.data.current.groupId const overGroupId = event.over.data.current?.groupId const draggedIndex = splits.findIndex( (group) => group.id === activeGroupId ) const overIndex = splits.findIndex((group) => group.id === overGroupId) if (draggedIndex !== -1 && overIndex !== -1) { const nextSplits = arrayMove(splits, draggedIndex, overIndex) if (!areSplitGroupsEqual(splits, nextSplits)) { onSplitsChange(nextSplits) } } dragStartGroupIdRef.current = null dragStartSplitsRef.current = null setDraggedPageId(null) setActiveSplitGroupId(null) setActiveSplitGroupWidth(undefined) return } if (event.active.data.current?.type !== "page" || !event.over) { dragStartGroupIdRef.current = null dragStartSplitsRef.current = null setDraggedPageId(null) setActiveSplitGroupId(null) setActiveSplitGroupWidth(undefined) return } const pageId = String(event.active.id) as PageId const overId = String(event.over.id) as PageId const overGroupId = findGroupId(splits, overId) if (dragStartGroupIdRef.current === overGroupId) { const nextSplits = reorderPageInGroup({ draggedPageId: pageId, groups: splits, overPageId: overId, }) if (!areSplitGroupsEqual(splits, nextSplits)) { onSplitsChange(nextSplits) } } dragStartGroupIdRef.current = null dragStartSplitsRef.current = null setDraggedPageId(null) setActiveSplitGroupId(null) setActiveSplitGroupWidth(undefined) }, [onSplitsChange, splits] ) const handleDragCancel = React.useCallback(() => { if (dragStartSplitsRef.current) { onSplitsChange(dragStartSplitsRef.current) } dragStartSplitsRef.current = null dragStartGroupIdRef.current = null setDraggedPageId(null) setActiveSplitGroupId(null) setActiveSplitGroupWidth(undefined) }, [onSplitsChange]) const activeSplitGroup = activeSplitGroupId ? splits.find((group) => group.id === activeSplitGroupId) : null return (

getSplitSortableId(group.id))} strategy={verticalListSortingStrategy} >

{splits.map((group) => ( 1} group={group} thumbnailImages={thumbnailImages} onRemove={() => { if (splits.length <= 1) return onSplitsChange( splits.filter((split) => split.id !== group.id) ) }} onSelectPage={onSelectPage} /> ))}

{draggedPageId ? (

) : activeSplitGroup ? ( ) : null}

) } function InlineScrollArea2({ className, children, orientation = "both", scrollFade = false, scrollbarGutter = false, scrollbarOverflowOnly = false, viewportClassName, viewportProps, viewportRef, ...props }: InlineScrollAreaProps) { const localViewportRef = React.useRef(null) const { className: viewportPropsClassName, ref: viewportPropsRef, style: viewportStyle, ...resolvedViewportProps } = viewportProps ?? {} const resolvedViewportStyle = { ...viewportStyle } delete resolvedViewportStyle.overflow const composedViewportRef = React.useMemo( () => InlineComposeRefs(localViewportRef, viewportPropsRef, viewportRef), [viewportPropsRef, viewportRef] ) React.useEffect(() => { const viewport = localViewportRef.current if (!viewport || !scrollFade) return const updateOverflow = () => { const x = Math.abs(viewport.scrollLeft) const y = Math.max(0, viewport.scrollTop) const overflow = { "x-start": x, "x-end": Math.max(0, viewport.scrollWidth - viewport.clientWidth - x), "y-start": y, "y-end": Math.max(0, viewport.scrollHeight - viewport.clientHeight - y), } for (const [edge, value] of Object.entries(overflow)) { viewport.style.setProperty( `--scroll-area-overflow-${edge}`, `${value}px` ) } } const observer = new ResizeObserver(updateOverflow) observer.observe(viewport) if (viewport.firstElementChild) observer.observe(viewport.firstElementChild) viewport.addEventListener("scroll", updateOverflow, { passive: true }) updateOverflow() return () => { observer.disconnect() viewport.removeEventListener("scroll", updateOverflow) } }, [scrollFade]) if ( !viewportProps && !viewportRef && !viewportClassName && !scrollFade && !scrollbarGutter && !scrollbarOverflowOnly ) { return ( [data-orientation=vertical]]:hidden", className )} > {children} {orientation !== "vertical" ? ( ) : null} ) } return ( {children} {orientation !== "horizontal" ? ( ) : null} {orientation !== "vertical" ? ( ) : null} {orientation === "both" ? : null} ) } type InlineScrollAreaProps = React.ComponentProps< typeof ScrollAreaPrimitive.Root > & { orientation?: "vertical" | "horizontal" | "both" scrollFade?: boolean scrollbarGutter?: boolean scrollbarOverflowOnly?: boolean viewportClassName?: string viewportProps?: React.ComponentProps viewportRef?: React.Ref } function InlineComposeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (!ref) continue if (typeof ref === "function") ref(node) else ref.current = node } } } 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@dnd-kit/core@^6.3.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core@^6.3.1"}]]}]}],["$","li","@dnd-kit/sortable@^10.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/sortable@^10.0.0"}]]}]}],["$","li","@dnd-kit/utilities@^3.2.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/utilities@^3.2.2"}]]}]}],["$","li","radix-ui@^1.4.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui@^1.4.3"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["@extend/file-thumbnail","https://ui.shadcn.com/r/styles/radix-nova/utils.json","https://ui.shadcn.com/r/styles/radix-nova/button.json","https://ui.shadcn.com/r/styles/radix-nova/scroll-area.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/extend/document-splits.tsx","content":"$52","type":"registry:ui","target":"@components/extend/document-splits.tsx"}],"className":"h-[70svh] min-h-80"}]]}]