{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fullscreen-viewer",
  "dependencies": [
    "react-pdf",
    "@wojtekmaj/react-hooks",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/reusables/pdf-viewers/fullscreen-viewer.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Download,\n  X,\n  ZoomIn,\n  ZoomOut,\n} from \"lucide-react\"\nimport { Document, Page, pdfjs } from \"react-pdf\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nimport { LoadingSpinner } from \"./loading-spinner\"\n\npdfjs.GlobalWorkerOptions.workerSrc = new URL(\n  \"pdfjs-dist/build/pdf.worker.min.mjs\",\n  import.meta.url\n).toString()\n\ninterface FullscreenViewerProps {\n  url: string\n  onClose?: () => void\n}\nconst maxWidth = 800\n\nexport const FullscreenViewer = ({ url, onClose }: FullscreenViewerProps) => {\n  const [numPages, setNumPages] = useState<number | null>(null)\n  const [pageNumber, setPageNumber] = useState(1)\n  const [scale, setScale] = useState(1)\n  const [pageHeight, setPageHeight] = useState<number>(0)\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const [containerWidth, setContainerWidth] = useState<number>(maxWidth)\n\n  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {\n    setNumPages(numPages)\n  }\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    // Initialize width\n    setContainerWidth(el.clientWidth)\n    // Observe size changes\n    const ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          setContainerWidth(Math.floor(entry.contentRect.width))\n        }\n      }\n    })\n    ro.observe(el)\n    // Fallback on window resize (older browsers)\n    const handleResize = () => setContainerWidth(el.clientWidth)\n    window.addEventListener(\"resize\", handleResize)\n    return () => {\n      ro.disconnect()\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  const pageWidth = Math.min(containerWidth, maxWidth)\n\n  return (\n    <div className=\"fixed inset-0 z-50 overflow-auto bg-gray-100 dark:bg-gray-900\">\n      <div className=\"sticky top-0 z-10 border-b bg-white shadow-sm dark:bg-gray-600\">\n        <div className=\"mx-auto w-full max-w-[1400px] px-4 py-2\">\n          <div\n            className={cn(\n              \"flex flex-wrap items-center justify-between gap-2 md:gap-4\"\n            )}\n          >\n            {/* Navigation Controls */}\n            <div className={cn(\"w flex items-center gap-2\", \"mx-auto md:mx-0\")}>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={() => setPageNumber((p) => Math.max(1, p - 1))}\n                disabled={pageNumber <= 1}\n                className=\"rounded-full dark:border-white/10 dark:bg-white/10 dark:backdrop-blur-sm dark:hover:bg-white/20\"\n              >\n                <ChevronLeft className=\"h-4 w-4\" />\n              </Button>\n\n              <span className=\"text-sm font-medium\">\n                <span className=\"md:hidden\">\n                  {pageNumber} / {numPages || \"-\"}\n                </span>\n                <span className=\"hidden md:inline\">\n                  Page {pageNumber} of {numPages || \"-\"}\n                </span>\n              </span>\n\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={() =>\n                  setPageNumber((p) => Math.min(numPages || p, p + 1))\n                }\n                disabled={pageNumber >= (numPages || 1)}\n                className=\"rounded-full dark:border-white/10 dark:bg-white/10 dark:backdrop-blur-sm dark:hover:bg-white/20\"\n              >\n                <ChevronRight className=\"h-4 w-4\" />\n              </Button>\n            </div>\n\n            <div className={cn(\"flex items-center gap-2\", \"mx-auto md:mx-0\")}>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setScale((s) => Math.max(0.5, s - 0.1))}\n                className=\"rounded-full text-sm hover:opacity-90 dark:border-white/10 dark:bg-white/10 dark:text-white dark:backdrop-blur-sm dark:hover:bg-white/20\"\n                disabled={scale <= 0.5}\n                aria-label=\"Zoom Out\"\n              >\n                <span className=\"md:hidden\">\n                  <ZoomOut className=\"h-4 w-4\" />\n                </span>\n                <span className=\"hidden md:inline\">Zoom Out</span>\n              </Button>\n              <span className=\"min-w-[35px] text-center text-sm font-medium\">\n                {Math.round(scale * 100)}%\n              </span>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setScale((s) => Math.min(2, s + 0.1))}\n                className=\"rounded-full text-sm hover:opacity-90 dark:border-white/10 dark:bg-white/10 dark:text-white dark:backdrop-blur-sm dark:hover:bg-white/20\"\n                disabled={scale >= 2}\n                aria-label=\"Zoom In\"\n              >\n                <span className=\"md:hidden\">\n                  <ZoomIn className=\"h-4 w-4\" />\n                </span>\n                <span className=\"hidden md:inline\">Zoom In</span>\n              </Button>\n\n              {/* Download Button */}\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                onClick={() => window.open(url, \"_blank\")}\n                className={cn(\n                  \"ml-2 h-8 w-8 rounded-full\",\n                  \"hover:opacity-90 dark:bg-white/10 dark:text-white\",\n                  \"dark:border-white/10 dark:backdrop-blur-sm dark:hover:bg-white/20\",\n                  \"transition-all duration-200 ease-in-out\"\n                )}\n                title=\"Download PDF\"\n              >\n                <Download className=\"h-4 w-4\" />\n              </Button>\n\n              {/* Close Button */}\n              {onClose && (\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  onClick={onClose}\n                  className={cn(\n                    \"ml-2 h-8 w-8 rounded-full\",\n                    \"hover:opacity-90 dark:bg-white/10 dark:text-white\",\n                    \"dark:border-white/10 dark:backdrop-blur-sm dark:hover:bg-white/20\",\n                    \"transition-all duration-200 ease-in-out\"\n                  )}\n                  title=\"Close\"\n                >\n                  <X className=\"h-4 w-4\" />\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex justify-center p-4 md:p-8\" ref={containerRef}>\n        <div className=\"flex justify-center\" style={{ minHeight: pageHeight }}>\n          <Document\n            file={url}\n            onLoadSuccess={onDocumentLoadSuccess}\n            loading={\n              <LoadingSpinner\n                minHeight={pageHeight ? `${pageHeight}px` : \"600px\"}\n                minWidth={pageWidth ? `${pageWidth}px` : \"800px\"}\n                spinnerClassName=\"text-white dark:text-white\"\n              />\n            }\n            className={cn(\n              \"flex flex-col items-center\",\n              \"[&_.react-pdf__Page]:my-0\",\n              \"[&_.react-pdf__Page__canvas]:max-w-full\",\n              \"[&_.react-pdf__Page__canvas]:h-auto\"\n            )}\n          >\n            <Page\n              pageNumber={pageNumber}\n              renderTextLayer={true}\n              renderAnnotationLayer={true}\n              className=\"rounded-lg shadow-xl\"\n              width={pageWidth * scale}\n              loading={\n                <LoadingSpinner\n                  minHeight={pageHeight ? `${pageHeight}px` : \"600px\"}\n                  minWidth={pageWidth ? `${pageWidth}px` : \"800px\"}\n                  spinnerClassName=\"dark:text-black\"\n                />\n              }\n              onLoadSuccess={(page) => {\n                setPageHeight(page.height * (pageWidth / page.width) * scale)\n              }}\n            />\n          </Document>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/pdf-viewers/fullscreen-viewer.tsx"
    },
    {
      "path": "registry/reusables/pdf-viewers/loading-spinner.tsx",
      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface LoadingSpinnerProps {\n  minHeight?: string\n  minWidth?: string\n  className?: string\n  spinnerClassName?: string\n}\n\nexport const LoadingSpinner = ({\n  minHeight = \"600px\",\n  minWidth = \"800px\",\n  className,\n  spinnerClassName,\n}: LoadingSpinnerProps) => {\n  return (\n    <div\n      className={cn(\"flex items-center justify-center\", className)}\n      style={{ minHeight, minWidth }}\n    >\n      <Loader2\n        className={cn(\"h-8 w-8 animate-spin text-white\", spinnerClassName)}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/pdf-viewers/loading-spinner.tsx"
    }
  ],
  "type": "registry:component"
}