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/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"] 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/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"] 52:Tbc53,"use client" import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area" import { ReactPptxViewer, usePptxViewerThumbnails, type ParsedPresentation, type PptxSlideThumbnailItem, type PptxSlideThumbnailRenderWindow, type PptxViewerController, type PptxViewerError, type PresentationSource, type ViewerZoomLevel, type ViewerZoomState, } from "@extend-ai/react-pptx" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { ScrollArea as InlineScrollArea, ScrollBar, } from "@/components/ui/scroll-area" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { DocumentViewerThumbnailSidebar, useElementWidth, useInlineThumbnailSidebar, } from "@/components/extend/document-viewer-sidebar" import { FileThumbnail } from "@/components/extend/file-thumbnail" import { IconPlaceholder } from "@/components/icon-placeholder" import "@extend-ai/react-pptx/styles.css" import * as React from "react" import { useVirtualizer } from "@tanstack/react-virtual" const PPTX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.presentationml.presentation" const PPT_MIME_TYPE = "application/vnd.ms-powerpoint" const DEFAULT_ZOOM = 100 const PPTX_LOADING_INDICATOR_DELAY_MS = 300 const PPTX_THUMBNAIL_WIDTH = 112 const PPTX_THUMBNAIL_LIST_PADDING = 12 const PPTX_THUMBNAIL_ROW_ESTIMATE = 112 const PPTX_THUMBNAIL_PREFETCH_ROWS = 0 const PPTX_THUMBNAIL_FOLLOW_DELAY_MS = 250 const PPTX_SCROLL_TOP_EPSILON_PX = 24 const PPTX_INSTANT_NAVIGATION_TIMEOUT_MS = 250 const PPTX_SMOOTH_NAVIGATION_TIMEOUT_MS = 1000 const ZOOM_OPTIONS = [25, 50, 75, 100, 125, 150, 175, 200, 300, 400] as const const ZOOM_MODE_LABELS = { "fit-page": "Fit page", "fit-width": "Fit width", automatic: "Automatic", } satisfies Record, string> const PPTX_THUMBNAIL_FOCUS_RING_CLASS = "group-focus-visible/pptx-thumbnail-sidebar:ring-2 group-focus-visible/pptx-thumbnail-sidebar:ring-ring group-focus-visible/pptx-thumbnail-sidebar:ring-offset-1 group-focus-visible/pptx-thumbnail-sidebar:ring-offset-background" type UploadedPresentation = { file: File identity: string sourceUrl: string | undefined } function areNumberArraysEqual( left: readonly number[], right: readonly number[] ) { return ( left.length === right.length && left.every((value, index) => value === right[index]) ) } function formatPresentationName(fileName: string | undefined, url: string) { if (fileName?.trim()) return fileName const pathname = url.split("?")[0] ?? "" const rawName = pathname.split("/").pop() ?? "presentation.pptx" try { return decodeURIComponent(rawName) } catch { return rawName } } function ensurePresentationExtension(fileName: string) { const lowerFileName = fileName.toLowerCase() return lowerFileName.endsWith(".pptx") || lowerFileName.endsWith(".ppt") ? fileName : `${fileName}.pptx` } function downloadBlob(blob: Blob, fileName: string) { const url = URL.createObjectURL(blob) const anchor = document.createElement("a") anchor.href = url anchor.download = fileName anchor.rel = "noopener" document.body.append(anchor) anchor.click() anchor.remove() window.setTimeout(() => URL.revokeObjectURL(url), 0) } async function downloadPresentation({ file, fileName, url, }: { file?: File fileName: string url?: string }) { if (file) { downloadBlob(file, ensurePresentationExtension(fileName)) return } if (!url) return const response = await fetch(url) if (!response.ok) { throw new Error(`Failed to download presentation (${response.status})`) } downloadBlob(await response.blob(), ensurePresentationExtension(fileName)) } function getNextZoom(currentZoom: number, direction: 1 | -1) { if (direction > 0) { return ZOOM_OPTIONS.find((value) => value > currentZoom) ?? currentZoom } for (let index = ZOOM_OPTIONS.length - 1; index >= 0; index -= 1) { const value = ZOOM_OPTIONS[index] if (value < currentZoom) return value } return currentZoom } function isZoomMode(value: string): value is Exclude { return value in ZOOM_MODE_LABELS } function useDelayedLoadingIndicator(isLoading: boolean, delayMs: number) { const [showSpinner, setShowSpinner] = React.useState(false) const [previousIsLoading, setPreviousIsLoading] = React.useState(isLoading) if (previousIsLoading !== isLoading) { setPreviousIsLoading(isLoading) setShowSpinner(false) } React.useEffect(() => { if (!isLoading) return const timeoutId = window.setTimeout(() => { setShowSpinner(true) }, delayMs) return () => window.clearTimeout(timeoutId) }, [delayMs, isLoading]) return isLoading && showSpinner } function useDebouncedValue(value: TValue, delayMs: number) { const [debouncedValue, setDebouncedValue] = React.useState(value) React.useEffect(() => { const timeoutId = window.setTimeout(() => setDebouncedValue(value), delayMs) return () => window.clearTimeout(timeoutId) }, [delayMs, value]) return debouncedValue } function ViewerLoadingSurface({ showSpinner = true, }: { showSpinner?: boolean }) { return (

{showSpinner ? : null}

) } function ToolbarTooltip({ children, label, }: { children: React.ReactNode label: string }) { return ( {children}} > {label} ) } function PptxFileActionsMenu({ controlsDisabled, downloadDisabled, isPreparingDownload, onDownload, onUploadClick, showDownloadButton, showUploadButton, }: { controlsDisabled: boolean downloadDisabled: boolean isPreparingDownload: boolean onDownload: () => void onUploadClick: () => void showDownloadButton: boolean showUploadButton: boolean }) { if (!showDownloadButton && !showUploadButton) return null return ( } > {showDownloadButton ? ( {isPreparingDownload ? ( ) : ( )} Download ) : null} {showUploadButton ? ( Upload ) : null} ) } function PptxSlideNumberControl({ activeSlideIndex, controlsDisabled, onSlideChange, slideCount, }: { activeSlideIndex: number controlsDisabled: boolean onSlideChange: (slideIndex: number) => void slideCount: number }) { const inputRef = React.useRef(null) const displaySlide = slideCount ? activeSlideIndex + 1 : 1 const [isEditing, setIsEditing] = React.useState(false) const [draftSlide, setDraftSlide] = React.useState(() => String(displaySlide)) React.useEffect(() => { if (!isEditing) return inputRef.current?.focus() inputRef.current?.select() }, [isEditing]) const applySlideDraft = React.useCallback( (value: string) => { const parsedSlide = Number(value.trim()) if (!Number.isInteger(parsedSlide)) return const nextSlide = Math.min( Math.max(parsedSlide, 1), Math.max(slideCount, 1) ) onSlideChange(nextSlide - 1) }, [onSlideChange, slideCount] ) return (

Slide {isEditing ? ( setIsEditing(false)} onChange={(event: React.ChangeEvent) => { setDraftSlide(event.target.value) applySlideDraft(event.target.value) }} onKeyDown={(event: React.KeyboardEvent) => { if (event.key === "Enter" || event.key === "Escape") { event.currentTarget.blur() } }} className={cn( "h-8 px-2.5", "mx-1 w-14 min-w-14 rounded-md [&_[data-slot=input]]:text-center" )} /> ) : ( )} of {slideCount || "-"}

) } function PptxToolbar({ activeSlideIndex, controlsDisabled, isPreparingDownload, onDownload, onSlideChange, onToggleSidebar, onUploadClick, onZoomChange, resolvedZoom, showDownloadButton, showUploadButton, slideCount, toolbarActions, zoomLevel, }: { activeSlideIndex: number controlsDisabled: boolean isPreparingDownload: boolean onDownload: () => void onSlideChange: (slideIndex: number) => void onToggleSidebar: () => void onUploadClick: () => void onZoomChange: (zoomLevel: ViewerZoomLevel) => void resolvedZoom: number showDownloadButton: boolean showUploadButton: boolean slideCount: number toolbarActions?: React.ReactNode zoomLevel: ViewerZoomLevel }) { const canGoPrevious = !controlsDisabled && activeSlideIndex > 0 const canGoNext = !controlsDisabled && slideCount > 0 && activeSlideIndex < slideCount - 1 const canZoomOut = !controlsDisabled && resolvedZoom > ZOOM_OPTIONS[0] const canZoomIn = !controlsDisabled && resolvedZoom < ZOOM_OPTIONS[ZOOM_OPTIONS.length - 1] const selectValue = typeof zoomLevel === "number" ? zoomLevel.toString() : zoomLevel const roundedZoom = Number(resolvedZoom.toFixed(2)) const zoomOptions = ZOOM_OPTIONS.includes( roundedZoom as (typeof ZOOM_OPTIONS)[number] ) ? ZOOM_OPTIONS : [...ZOOM_OPTIONS, roundedZoom].sort((left, right) => left - right) return (

{toolbarActions ? ( <> {toolbarActions} ) : null} {showDownloadButton || showUploadButton ? ( ) : null}

) } function PptxSidebarThumbnail({ aspectRatio, containerRef, displayFileName, isActive, slideNumber, status, }: { aspectRatio: number containerRef: PptxSlideThumbnailItem["containerRef"] displayFileName: string isActive: boolean slideNumber: number status: PptxSlideThumbnailItem["status"] }) { return ( } isLoading={status !== "ready" && status !== "error"} hasError={status === "error"} className={cn( "w-full rounded-sm border-0 shadow-xs ring-0 transition-shadow duration-150", isActive && "shadow-sm" )} /> ) } function PptxThumbnailSidebarList({ activeSlideIndex, displayFileName, isLoading, onRenderWindowChange, onSelectSlide, sidebarOpen, slideCount, thumbnails, }: { activeSlideIndex: number displayFileName: string isLoading: boolean onRenderWindowChange: (window: PptxSlideThumbnailRenderWindow) => void onSelectSlide: (slideIndex: number) => void sidebarOpen: boolean slideCount: number thumbnails: PptxSlideThumbnailItem[] }) { const viewportRef = React.useRef(null) const thumbnailListboxId = React.useId() const visibleThumbnails = React.useMemo( () => thumbnails.slice(0, slideCount || 0), [slideCount, thumbnails] ) const activeDescendantId = visibleThumbnails.length ? `${thumbnailListboxId}-slide-${activeSlideIndex + 1}` : undefined const virtualizer = useVirtualizer({ count: visibleThumbnails.length, estimateSize: () => PPTX_THUMBNAIL_ROW_ESTIMATE, getItemKey: (index) => visibleThumbnails[index]?.slide.id ?? index, getScrollElement: () => viewportRef.current, overscan: 0, }) const virtualItems = virtualizer.getVirtualItems() const renderWindowSignature = virtualItems .map((virtualRow) => virtualRow.index) .join(",") const virtualSlideIndexes = React.useMemo( () => renderWindowSignature ? renderWindowSignature.split(",").map((index) => Number(index)) : [], [renderWindowSignature] ) React.useEffect(() => { if (!sidebarOpen || isLoading || !visibleThumbnails.length) { onRenderWindowChange({ prefetchSlideIndexes: [], visibleSlideIndexes: [], }) return } const visibleSlideIndexes = virtualSlideIndexes const firstVirtualIndex = virtualSlideIndexes[0] ?? 0 const lastVirtualIndex = virtualSlideIndexes[virtualSlideIndexes.length - 1] ?? firstVirtualIndex const firstPrefetchIndex = Math.max( 0, firstVirtualIndex - PPTX_THUMBNAIL_PREFETCH_ROWS ) const lastPrefetchIndex = Math.min( visibleThumbnails.length - 1, lastVirtualIndex + PPTX_THUMBNAIL_PREFETCH_ROWS ) const visibleSlideIndexSet = new Set(visibleSlideIndexes) const prefetchSlideIndexes: number[] = [] for ( let index = firstPrefetchIndex; index <= lastPrefetchIndex; index += 1 ) { if (!visibleSlideIndexSet.has(index)) { prefetchSlideIndexes.push(index) } } onRenderWindowChange({ prefetchSlideIndexes, visibleSlideIndexes, }) }, [ isLoading, onRenderWindowChange, sidebarOpen, virtualSlideIndexes, visibleThumbnails.length, ]) React.useEffect(() => { if (!sidebarOpen || !visibleThumbnails.length) return const frameId = window.requestAnimationFrame(() => { virtualizer.scrollToIndex( Math.min(activeSlideIndex, visibleThumbnails.length - 1), { align: "auto" } ) }) return () => window.cancelAnimationFrame(frameId) }, [activeSlideIndex, sidebarOpen, virtualizer, visibleThumbnails.length]) const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (slideCount < 1) return let nextSlideIndex: number | null = null if (event.key === "ArrowDown") { nextSlideIndex = Math.min(slideCount - 1, activeSlideIndex + 1) } else if (event.key === "ArrowUp") { nextSlideIndex = Math.max(0, activeSlideIndex - 1) } else if (event.key === "Home") { nextSlideIndex = 0 } else if (event.key === "End") { nextSlideIndex = slideCount - 1 } if (nextSlideIndex === null) return event.preventDefault() onSelectSlide(nextSlideIndex) }, [activeSlideIndex, onSelectSlide, slideCount] ) return ( { event.currentTarget.focus({ preventScroll: true }) }, role: "listbox", tabIndex: 0, }} viewportRef={viewportRef} > {isLoading ? (

) : visibleThumbnails.length ? (

{virtualItems.map((virtualRow) => { const thumbnail = visibleThumbnails[virtualRow.index] if (!thumbnail) return null const isActive = thumbnail.slideIndex === activeSlideIndex return (

) })}

) : null} ) } function PptxThumbnailSidebarContent({ activeSlideIndex, controller, displayFileName, isLoading, onSelectSlide, sidebarOpen, slideCount, }: { activeSlideIndex: number controller: PptxViewerController | null displayFileName: string isLoading: boolean onSelectSlide: (slideIndex: number) => void sidebarOpen: boolean slideCount: number }) { const [renderWindow, setRenderWindow] = React.useState({ prefetchSlideIndexes: [], visibleSlideIndexes: [], }) const thumbnailOptions = React.useMemo( () => ({ renderWindow, resolution: { maxHeight: Math.round(PPTX_THUMBNAIL_WIDTH * 0.75), maxWidth: PPTX_THUMBNAIL_WIDTH, }, }), [renderWindow] ) const { thumbnails } = usePptxViewerThumbnails(controller, thumbnailOptions) const handleRenderWindowChange = React.useCallback( (nextWindow: PptxSlideThumbnailRenderWindow) => { setRenderWindow((currentWindow) => { const currentVisible = currentWindow.visibleSlideIndexes ?? [] const nextVisible = nextWindow.visibleSlideIndexes ?? [] const currentPrefetch = currentWindow.prefetchSlideIndexes ?? [] const nextPrefetch = nextWindow.prefetchSlideIndexes ?? [] if ( areNumberArraysEqual(currentVisible, nextVisible) && areNumberArraysEqual(currentPrefetch, nextPrefetch) ) { return currentWindow } return nextWindow }) }, [] ) return ( ) } export type PptxViewerPreviewProps = { className?: string defaultThumbnailSidebarOpen?: boolean defaultZoom?: ViewerZoomLevel fileName?: string initialSlide?: number showDownload?: boolean showToolbar?: boolean showUpload?: boolean src?: string toolbarActions?: React.ReactNode } export function PptxViewerPreview({ className, defaultThumbnailSidebarOpen = false, defaultZoom = DEFAULT_ZOOM, fileName, initialSlide = 1, showDownload = true, showToolbar = true, showUpload = true, src, toolbarActions, }: PptxViewerPreviewProps) { const fileInputRef = React.useRef(null) const [viewerShellRef, viewerShellWidth] = useElementWidth() const requestedInitialSlideIndex = Math.max(0, Math.round(initialSlide) - 1) const [viewportElement, setViewportElement] = React.useState(null) const [uploadedPresentation, setUploadedPresentation] = React.useState(null) const [sidebarOpen, setSidebarOpen] = React.useState( defaultThumbnailSidebarOpen ) const [thumbnailSidebarMounted, setThumbnailSidebarMounted] = React.useState( defaultThumbnailSidebarOpen ) const [activeSlideIndex, setActiveSlideIndex] = React.useState( requestedInitialSlideIndex ) const [zoomLevel, setZoomLevel] = React.useState(defaultZoom) const [resolvedZoom, setResolvedZoom] = React.useState(() => typeof defaultZoom === "number" ? defaultZoom : DEFAULT_ZOOM ) const [slideCount, setSlideCount] = React.useState(0) const [isLoading, setIsLoading] = React.useState(Boolean(src)) const [loadError, setLoadError] = React.useState() const [isPreparingDownload, setIsPreparingDownload] = React.useState(false) const [controller, setController] = React.useState(null) const sidebarInline = useInlineThumbnailSidebar(viewerShellWidth) const activeUploadedPresentation = uploadedPresentation?.sourceUrl === src ? uploadedPresentation : null const source: PresentationSource | undefined = activeUploadedPresentation?.file ?? src const sourceIdentity = activeUploadedPresentation?.identity ?? src ?? "" const hasPresentation = Boolean(source) const displayFileName = React.useMemo( () => activeUploadedPresentation?.file.name ?? (src ? formatPresentationName(fileName, src) : (fileName ?? "presentation.pptx")), [activeUploadedPresentation?.file.name, fileName, src] ) const thumbnailSidebarVisible = Boolean(sidebarOpen && hasPresentation) const sidebarActiveSlideIndex = useDebouncedValue( activeSlideIndex, PPTX_THUMBNAIL_FOLLOW_DELAY_MS ) const controlsDisabled = !hasPresentation || isLoading || Boolean(loadError) const shouldShowLoadingSpinner = useDelayedLoadingIndicator( isLoading, PPTX_LOADING_INDICATOR_DELAY_MS ) const virtualization = React.useMemo( () => ({ enabled: true, overscanViewport: 0.75, scrollElement: viewportElement, }), [viewportElement] ) const pendingSlideNavigationRef = React.useRef<{ hasObservedIntermediateSlide: boolean targetIndex: number timeoutId: number } | null>(null) const cancelPendingSlideNavigation = React.useCallback(() => { const pendingNavigation = pendingSlideNavigationRef.current if (pendingNavigation) { window.clearTimeout(pendingNavigation.timeoutId) pendingSlideNavigationRef.current = null } }, []) if (thumbnailSidebarVisible && !thumbnailSidebarMounted) { setThumbnailSidebarMounted(true) } const [previousSource, setPreviousSource] = React.useState({ sourceIdentity, defaultZoom, }) if ( previousSource.sourceIdentity !== sourceIdentity || previousSource.defaultZoom !== defaultZoom ) { setPreviousSource({ sourceIdentity, defaultZoom }) setSlideCount(0) setZoomLevel(defaultZoom) setResolvedZoom( typeof defaultZoom === "number" ? defaultZoom : DEFAULT_ZOOM ) setLoadError(undefined) setIsLoading(Boolean(sourceIdentity)) } React.useEffect(() => { cancelPendingSlideNavigation() viewportElement?.scrollTo({ top: 0, left: 0 }) }, [ cancelPendingSlideNavigation, defaultZoom, sourceIdentity, viewportElement, ]) React.useEffect( () => cancelPendingSlideNavigation, [cancelPendingSlideNavigation] ) const [initialSlideSource, setInitialSlideSource] = React.useState({ sourceIdentity, requestedInitialSlideIndex, }) if ( initialSlideSource.sourceIdentity !== sourceIdentity || initialSlideSource.requestedInitialSlideIndex !== requestedInitialSlideIndex ) { setInitialSlideSource({ sourceIdentity, requestedInitialSlideIndex }) setActiveSlideIndex(requestedInitialSlideIndex) } React.useEffect(() => { if (controller?.isReady()) { void controller.goToSlide(requestedInitialSlideIndex, { behavior: "instant", block: "center", }) } }, [requestedInitialSlideIndex, sourceIdentity, controller]) const navigateToSlide = React.useCallback( (nextSlideIndex: number, behavior: ScrollBehavior) => { const normalizedSlideIndex = Math.min( Math.max(0, Math.round(nextSlideIndex)), Math.max(0, slideCount - 1) ) const resolvedBehavior = behavior === "smooth" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : behavior cancelPendingSlideNavigation() const timeoutId = window.setTimeout( () => { const pendingNavigation = pendingSlideNavigationRef.current if (pendingNavigation?.targetIndex !== normalizedSlideIndex) return pendingSlideNavigationRef.current = null setActiveSlideIndex(normalizedSlideIndex) }, resolvedBehavior === "smooth" ? PPTX_SMOOTH_NAVIGATION_TIMEOUT_MS : PPTX_INSTANT_NAVIGATION_TIMEOUT_MS ) pendingSlideNavigationRef.current = { hasObservedIntermediateSlide: false, targetIndex: normalizedSlideIndex, timeoutId, } setActiveSlideIndex(normalizedSlideIndex) void controller?.goToSlide(normalizedSlideIndex, { behavior: resolvedBehavior, block: "center", }) }, [cancelPendingSlideNavigation, slideCount, controller] ) const handleSlideChange = React.useCallback( (nextSlideIndex: number) => navigateToSlide(nextSlideIndex, "smooth"), [navigateToSlide] ) const handleThumbnailSlideChange = React.useCallback( (nextSlideIndex: number) => navigateToSlide(nextSlideIndex, "instant"), [navigateToSlide] ) const handleViewerSlideChange = React.useCallback( (nextSlideIndex: number) => { const pendingNavigation = pendingSlideNavigationRef.current if (pendingNavigation) { if (nextSlideIndex !== pendingNavigation.targetIndex) { pendingNavigation.hasObservedIntermediateSlide = true return } // The controller reports the destination immediately, before the smooth // scroll starts. Keep the destination authoritative until the scroll // observer has crossed an intermediate slide and reports it again. if (!pendingNavigation.hasObservedIntermediateSlide) return window.clearTimeout(pendingNavigation.timeoutId) pendingSlideNavigationRef.current = null } React.startTransition(() => { setActiveSlideIndex((currentSlideIndex) => currentSlideIndex === nextSlideIndex ? currentSlideIndex : nextSlideIndex ) }) }, [] ) const syncFirstSlideAtViewportTop = React.useCallback( (viewport: HTMLDivElement) => { if (viewport.scrollTop > PPTX_SCROLL_TOP_EPSILON_PX) return setActiveSlideIndex((currentSlideIndex) => currentSlideIndex === 0 ? currentSlideIndex : 0 ) if (!isLoading && controller && controller.getSlideIndex() !== 0) { void controller.goToSlide(0, { behavior: "instant", block: "start", }) } }, [isLoading, controller] ) const handleViewerUserScrollIntent = React.useCallback( (event: React.SyntheticEvent) => { const viewport = event.currentTarget // Stop an in-flight native smooth scroll before manual wheel, touch, // pointer, or keyboard input takes ownership of the viewport. viewport.scrollTo({ behavior: "instant", left: viewport.scrollLeft, top: viewport.scrollTop, }) cancelPendingSlideNavigation() syncFirstSlideAtViewportTop(viewport) }, [cancelPendingSlideNavigation, syncFirstSlideAtViewportTop] ) const handleViewerScroll = React.useCallback( (event: React.UIEvent) => { if (pendingSlideNavigationRef.current) return syncFirstSlideAtViewportTop(event.currentTarget) }, [syncFirstSlideAtViewportTop] ) const handleViewerKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if ( event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "End" || event.key === "Home" || event.key === "PageDown" || event.key === "PageUp" || event.key === " " || event.key === "Spacebar" ) { handleViewerUserScrollIntent(event) } }, [handleViewerUserScrollIntent] ) const handleLoad = React.useCallback((presentation: ParsedPresentation) => { const nextSlideCount = presentation.document.slides.length setSlideCount(nextSlideCount) setActiveSlideIndex((currentSlideIndex) => Math.min(currentSlideIndex, Math.max(0, nextSlideCount - 1)) ) setLoadError(undefined) }, []) const handleReady = React.useCallback(() => { setIsLoading(false) }, []) const handleZoomChange = React.useCallback((state: ViewerZoomState) => { setZoomLevel(state.level) setResolvedZoom(state.resolvedZoom) }, []) const handleError = React.useCallback((error: PptxViewerError) => { setLoadError(error.message) setIsLoading(false) }, []) const handleDownload = React.useCallback(async () => { if (isPreparingDownload || !source) return setIsPreparingDownload(true) try { await downloadPresentation({ file: activeUploadedPresentation?.file, fileName: displayFileName, url: activeUploadedPresentation ? undefined : src, }) } catch (error) { console.error(error) } finally { setIsPreparingDownload(false) } }, [ activeUploadedPresentation, displayFileName, isPreparingDownload, source, src, ]) async function handleUpload(event: React.ChangeEvent) { const file = event.target.files?.[0] event.target.value = "" if (!file) return setUploadedPresentation({ file, identity: `${file.name}-${file.size}-${file.lastModified}`, sourceUrl: src, }) } return (

{showToolbar ? ( setSidebarOpen((open) => !open)} onUploadClick={() => fileInputRef.current?.click()} onZoomChange={setZoomLevel} resolvedZoom={resolvedZoom} showDownloadButton={showDownload} showUploadButton={showUpload} slideCount={slideCount} toolbarActions={toolbarActions} zoomLevel={zoomLevel} /> ) : null}

{thumbnailSidebarMounted && hasPresentation ? ( ) : null} {!source ? (

Upload a PowerPoint presentation to preview

Pass a PPTX URL with the src prop or upload a PPTX or legacy PPT file.

) : ( ( )} renderError={(error) => (

Unable to display PowerPoint

{error.message}

)} emptyState={

This presentation has no slides.

} onLoad={handleLoad} onReady={handleReady} onError={handleError} onSlideChange={handleViewerSlideChange} onZoomChange={handleZoomChange} /> )}

) } function InlineScrollArea2({ className, children, orientation = "both", scrollFade = false, scrollbarGutter = false, scrollbarOverflowOnly = false, viewportClassName, viewportProps, viewportRef, ...props }: InlineScrollAreaProps) { const { className: viewportPropsClassName, ref: viewportPropsRef, ...resolvedViewportProps } = viewportProps ?? {} const composedViewportRef = React.useMemo( () => InlineComposeRefs(viewportPropsRef, viewportRef), [viewportPropsRef, viewportRef] ) 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 = ScrollAreaPrimitive.Root.Props & { orientation?: "vertical" | "horizontal" | "both" scrollFade?: boolean scrollbarGutter?: boolean scrollbarOverflowOnly?: boolean viewportClassName?: string viewportProps?: ScrollAreaPrimitive.Viewport.Props 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 } } } function InlineSpinner({ className, ...props }: InlineRegistryIconProps) { return ( ) } type InlineRegistryIconProps = Omit< React.ComponentProps<"svg">, "children" | "strokeWidth" > & { strokeWidth?: number } 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","@extend-ai/react-pptx@0.2.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40extend-ai%2Freact-pptx","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":"@extend-ai/react-pptx@0.2.1"}]]}]}],["$","li","@tanstack/react-virtual@^3.13.12",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-virtual","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":"@tanstack/react-virtual@^3.13.12"}]]}]}],["$","li","@base-ui/react@^1.4.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.4.1"}]]}]}]]}],["$","$L50",null,{"namespace":"@extend","registryDependencies":["@extend/document-viewer-sidebar","@extend/file-thumbnail","utils","button","dropdown-menu","input","scroll-area","select","separator","tooltip"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/extend/pptx-viewer.tsx","content":"$52","type":"registry:ui","target":"@components/extend/pptx-viewer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]