51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:Tcb9,"use client" import * as React from "react" import { cn } from "@/lib/utils" const INLINE_THUMBNAIL_SIDEBAR_MIN_WIDTH = 768 export function useElementWidth() { const ref = React.useRef(null) const [width, setWidth] = React.useState(0) React.useLayoutEffect(() => { const element = ref.current if (!element) return const updateWidth = () => { const nextWidth = element.getBoundingClientRect().width // Keep the last real measurement while the element is hidden or // detached (keep-alive preview pools, display:none ancestors): a // zero-width pass would re-lay-out the viewer for nothing, clearing // its rendered canvases, and force a blank-then-repaint flash when // the element comes back at its old size. if (nextWidth === 0) return setWidth(nextWidth) } updateWidth() const observer = new ResizeObserver(updateWidth) observer.observe(element) return () => observer.disconnect() }, []) return [ref, width] as const } export function useInlineThumbnailSidebar(width: number) { return width >= INLINE_THUMBNAIL_SIDEBAR_MIN_WIDTH } export function DocumentViewerThumbnailSidebar({ children, className, closedInlineClassName = "-ml-40", inline, open, widthClassName = "w-40", }: { children: React.ReactNode className?: string closedInlineClassName?: string inline: boolean open: boolean widthClassName?: string }) { const [transitionsReady, setTransitionsReady] = React.useState(false) const shouldAnimateSidebar = transitionsReady && open React.useEffect(() => { let secondFrameId = 0 const firstFrameId = window.requestAnimationFrame(() => { secondFrameId = window.requestAnimationFrame(() => { setTransitionsReady(true) }) }) return () => { window.cancelAnimationFrame(firstFrameId) window.cancelAnimationFrame(secondFrameId) } }, []) return ( ) } export function DocumentViewerSidebarSkeleton({ className, inline, }: { className?: string inline: boolean }) { if (!inline) return null return (

) } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["utils"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.extend.ai/r/document-viewer-sidebar.json","proxyUrl":"https://shadcnregistry.com/r/extend/document-viewer-sidebar","itemId":"@extend/document-viewer-sidebar"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"components/extend/document-viewer-sidebar.tsx","content":"$54","type":"registry:ui","target":"@components/extend/document-viewer-sidebar.tsx"}]}]]}],"$L55"]}]

Document Viewer Sidebar

Installation

Files

@components

Styles