update

ts_web/elements/sio-image-lightbox.ts

@@ -15,6 +15,10 @@ import { colors, bdTheme } from './00colors.js';
 import { spacing, radius, shadows, transitions } from './00tokens.js';
 import { fontFamilies } from './00fonts.js';
 
+// Import components
+import { SioPdfViewer } from './sio-pdf-viewer.js';
+SioPdfViewer;
+
 export interface ILightboxFile {
   url: string;
   name: string;
@@ -360,14 +364,12 @@ export class SioImageLightbox extends DeesElement {
               </div>
             ` : ''}
             ${isPDF ? html`
-              <iframe 
+              <sio-pdf-viewer
                 class="pdf-viewer ${this.fileLoaded ? 'loaded' : ''}"
-                src="${this.file.url}" 
-                title="${this.file.name}"
+                .url="${this.file.url}"
+                .fileName="${this.file.name}"
                 @load=${() => this.fileLoaded = true}
-                @error=${() => this.fileLoaded = false}
-                @click=${(e: Event) => e.stopPropagation()}
-              ></iframe>
+              ></sio-pdf-viewer>
             ` : html`
               <img 
                 class="image ${this.fileLoaded ? 'loaded' : ''}"
@@ -404,6 +406,12 @@ export class SioImageLightbox extends DeesElement {
     this.resetZoom();
     this.isOpen = true;
 
+    // For PDFs, we'll handle loading state differently since it's in a separate component
+    if (this.isPDF()) {
+      // PDFs are handled by sio-pdf-viewer which manages its own loading state
+      this.fileLoaded = true;
+    }
+
     // Add keyboard listener
     document.addEventListener('keydown', this.handleKeyDown);
   }