@opensite/ui 0.3.1 → 0.3.2

package/dist/project-interactive-hover-reveal.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectInteractiveHoverRevealItem {

package/dist/project-masonry-columns.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectMasonryColumnsItem {

package/dist/project-masonry-columns.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectMasonryColumnsItem {

package/dist/project-nature-mosaic.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectNatureMosaicProps {

package/dist/project-nature-mosaic.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectNatureMosaicProps {

package/dist/project-scroll-reveal.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectScrollRevealItem {

package/dist/project-scroll-reveal.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectScrollRevealItem {

package/dist/project-showcase-alternating.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectShowcaseAlternatingItem {

package/dist/project-showcase-alternating.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectShowcaseAlternatingItem {

package/dist/project-sticky-scroll.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectStickyScrollItem {

package/dist/project-sticky-scroll.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectStickyScrollItem {

package/dist/project-studio-hover-preview.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectStudioHoverPreviewItem {

package/dist/project-studio-hover-preview.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectStudioHoverPreviewItem {

package/dist/project-table-list.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectTableListItem {

package/dist/project-table-list.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectTableListItem {

package/dist/project-video-carousel.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoCarouselItem {

package/dist/project-video-carousel.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoCarouselItem {

package/dist/project-video-hover-bento.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverBentoItem {

package/dist/project-video-hover-bento.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverBentoItem {

package/dist/project-video-hover-grid.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverGridItem {

package/dist/project-video-hover-grid.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverGridItem {

package/dist/project-video-hover-rounded.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverRoundedItem {

package/dist/project-video-hover-rounded.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverRoundedItem {

package/dist/project-video-hover-stack.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverStackItem {

package/dist/project-video-hover-stack.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverStackItem {

package/dist/project-video-hover-two-by-two.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverTwoByTwoItem {

package/dist/project-video-hover-two-by-two.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverTwoByTwoItem {

package/dist/project-work-showcase.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectWorkShowcaseProject {

package/dist/project-work-showcase.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectWorkShowcaseProject {

package/dist/registry.cjs

@@ -33,6 +33,7 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var pdfViewer = require('@page-speed/pdf-viewer');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -81631,6 +81632,19 @@ function ResourceDetailWhitepaperSidebar({
   patternOpacity
 }) {
   const [showFullViewer, setShowFullViewer] = React11.useState(false);
+  const [isMounted, setIsMounted] = React11.useState(false);
+  React11.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  React11.useEffect(() => {
+    if (!showFullViewer) return;
+    if (typeof document === "undefined") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [showFullViewer]);
   const handleOpenFullViewer = React11.useCallback(() => {
     setShowFullViewer(true);
   }, []);
@@ -81759,36 +81773,47 @@ function ResourceDetailWhitepaperSidebar({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-last md:order-0 md:col-span-4 lg:col-span-3", children: renderSidebar() }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-7 md:col-start-5 lg:col-start-6", children: renderArticle() })
         ] }),
-        showFullViewer && sidebar?.pdfUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-black/90", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleCloseFullViewer,
-                className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
-                "aria-label": "Close viewer",
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            pdfViewer.PDFViewer,
+        showFullViewer && sidebar?.pdfUrl && isMounted && typeof document !== "undefined" && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              url: sidebar.pdfUrl,
-              height: "100%",
-              config: {
-                showControls: true,
-                showThumbnails: true,
-                enableDownload: true,
-                enablePrint: true,
-                enableFullscreen: true,
-                initialZoom: "page-width"
-              }
+              className: "fixed inset-0 z-[9999] flex flex-col bg-black/90",
+              role: "dialog",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseFullViewer,
+                      className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                      "aria-label": "Close viewer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  pdfViewer.PDFViewer,
+                  {
+                    url: sidebar.pdfUrl,
+                    height: "100%",
+                    config: {
+                      showControls: true,
+                      showThumbnails: true,
+                      enableDownload: true,
+                      enablePrint: true,
+                      enableFullscreen: true,
+                      initialZoom: "page-fit"
+                    }
+                  }
+                ) })
+              ]
             }
-          ) })
-        ] })
+          ),
+          document.body
+        )
       ]
     }
   );

package/dist/registry.js

@@ -32,6 +32,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { PDFViewer } from '@page-speed/pdf-viewer';
+import { createPortal } from 'react-dom';
 
 // lib/utils.ts
 function cn(...inputs) {
@@ -81591,6 +81592,19 @@ function ResourceDetailWhitepaperSidebar({
   patternOpacity
 }) {
   const [showFullViewer, setShowFullViewer] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!showFullViewer) return;
+    if (typeof document === "undefined") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [showFullViewer]);
   const handleOpenFullViewer = useCallback(() => {
     setShowFullViewer(true);
   }, []);
@@ -81719,36 +81733,47 @@ function ResourceDetailWhitepaperSidebar({
           /* @__PURE__ */ jsx("div", { className: "order-last md:order-0 md:col-span-4 lg:col-span-3", children: renderSidebar() }),
           /* @__PURE__ */ jsx("div", { className: "md:col-span-7 md:col-start-5 lg:col-start-6", children: renderArticle() })
         ] }),
-        showFullViewer && sidebar?.pdfUrl && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-black/90", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleCloseFullViewer,
-                className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
-                "aria-label": "Close viewer",
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-            PDFViewer,
+        showFullViewer && sidebar?.pdfUrl && isMounted && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              url: sidebar.pdfUrl,
-              height: "100%",
-              config: {
-                showControls: true,
-                showThumbnails: true,
-                enableDownload: true,
-                enablePrint: true,
-                enableFullscreen: true,
-                initialZoom: "page-width"
-              }
+              className: "fixed inset-0 z-[9999] flex flex-col bg-black/90",
+              role: "dialog",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
+                  /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseFullViewer,
+                      className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                      "aria-label": "Close viewer",
+                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+                  PDFViewer,
+                  {
+                    url: sidebar.pdfUrl,
+                    height: "100%",
+                    config: {
+                      showControls: true,
+                      showThumbnails: true,
+                      enableDownload: true,
+                      enablePrint: true,
+                      enableFullscreen: true,
+                      initialZoom: "page-fit"
+                    }
+                  }
+                ) })
+              ]
             }
-          ) })
-        ] })
+          ),
+          document.body
+        )
       ]
     }
   );