@widgetic/design-system 0.5.20 → 0.5.22

package/dist/components/modals/BaseModal.svelte

@@ -33,6 +33,10 @@
   export let enableSpaceKey = false;
   export let isSelected = false;
   export let showScroll = false;
+  // An image preview stays hidden until its real size is known, so the card does not open large and then shrink.
+  export let shown = true;
+  // Width and height ease to the content, instead of jumping.
+  export let animateSize = false;
   // The words a screen reader says for the close button. A page that shows the modal in another language passes its own.
   export let closeLabel: string = 'Close modal';
 
@@ -319,6 +323,8 @@
             min-height: {2 * contentPadding + 50}px;
             max-width: {modalStyle.maxWidth};
             max-height: {modalStyle.maxHeight};
+            visibility: {viewportWidth === 0 || !shown ? 'hidden' : 'visible'};
+            transition: {animateSize ? 'width 200ms ease, height 200ms ease' : 'none'};
             padding: {contentPadding}px 0;
             user-select: text;
             -webkit-user-select: text;

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -25,6 +25,8 @@ declare const BaseModal: $$__sveltets_2_IsomorphicComponent<{
     enableSpaceKey?: boolean;
     isSelected?: boolean;
     showScroll?: boolean;
+    shown?: boolean;
+    animateSize?: boolean;
     closeLabel?: string;
     children: any;
 }, {

package/dist/components/navigation/Breadcrumbs.svelte

@@ -40,7 +40,7 @@
   // words (tooltips and screen readers): a page that shows this in another language passes its own
   export let backLabel: string = 'Back';
   export let forwardLabel: string = 'Forward';
-  export let rootLabel: string = 'File browser';
+  export let rootLabel: string = 'Files';
   export let breadcrumbLabel: string = 'breadcrumb';
   // event handlers
   export let onNavigate: BreadcrumbsProps['onNavigate'] = () => {};

package/dist/components/pdf/PDFViewer.svelte

@@ -76,6 +76,16 @@
   let scale = 1.5;
   let loading = true;
   let error: string | null = null;
+  // pdf.js reads the file with fetch. The upload host sends no CORS header, so that read fails.
+  // The browser's own viewer loads the same address as a frame, which does not need that header.
+  let browserFrameUrl = '';
+  let frameHeight = 640;
+
+  function sizeBrowserFrame() {
+    const host = containerDiv?.closest('.file-browser-module') || containerDiv?.closest('.portal-contents');
+    const available = host instanceof HTMLElement ? host.clientHeight : 0;
+    frameHeight = Math.max(360, (available || 720) - 140);
+  }
   let mounted = false;
   let currentUrl = '';
   let canvasWidth = initialContainerWidth;  // Start with initial size
@@ -194,6 +204,26 @@
     renderPDF();
   }
 
+  function prefersBrowserFrame(absoluteUrl: string): boolean {
+    try {
+      const parsed = new URL(absoluteUrl, window.location.href);
+      const isHttp = parsed.protocol === 'http:' || parsed.protocol === 'https:';
+      return isHttp && parsed.origin !== window.location.origin;
+    } catch {
+      return false;
+    }
+  }
+
+  function showBrowserFrame(absoluteUrl: string) {
+    currentUrl = url;
+    browserFrameUrl = absoluteUrl;
+    sizeBrowserFrame();
+    error = null;
+    isCanvasReady = true;
+    pdfDoc = null;
+    renderingPhase = 'ready';
+  }
+
   async function loadPDF() {
     if (!url || !browser) {
       console.error('Cannot load PDF: missing URL or not in browser');
@@ -211,12 +241,20 @@
       // Reset state
       loading = true;
       error = null;
+      browserFrameUrl = '';
       isCanvasReady = false;
       showPdfContent = false;
       loadedFromCache = false;
       
       // Get absolute URL for cache key
       const absoluteUrl = getAbsoluteUrl(url);
+
+      // A file on another host (the upload CDN) has no CORS header. pdf.js would fetch it and the
+      // browser would log that failure. The browser's own viewer loads it as a frame instead.
+      if (prefersBrowserFrame(absoluteUrl)) {
+        showBrowserFrame(absoluteUrl);
+        return;
+      }
       
       // Check if the PDF is in the cache
       const cachedEntry = pdfCache.get(absoluteUrl);
@@ -337,6 +375,17 @@
     } catch (err) {
       if(showLogs) console.error('Error loading PDF:', err);
       const errorMessage = err instanceof Error ? err.message : 'Failed to load PDF';
+      const fetchBlocked = /failed to fetch|networkerror|load failed/i.test(errorMessage);
+      const frameUrl = getAbsoluteUrl(url);
+      if (fetchBlocked && /^https?:/i.test(frameUrl)) {
+        browserFrameUrl = frameUrl;
+        sizeBrowserFrame();
+        error = null;
+        isCanvasReady = true;
+        pdfDoc = null;
+        renderingPhase = 'ready';
+        return;
+      }
       error = errorMessage;
       dispatch('error', { message: errorMessage });
       pdfDoc = null;
@@ -537,6 +586,9 @@
 <!-- PDF Viewer HTML template -->
 
 <div class="{className ? className + ' ' : ''}pdf-viewer-container w-full h-full px-4 widgetic-colors relative" bind:this={containerDiv} style={style}>
+  {#if browserFrameUrl}
+    <iframe class="pdf-browser-frame w-full border-0 bg-white" style="height: {frameHeight}px" src={browserFrameUrl} title={failedLabel}></iframe>
+  {:else}
   <!-- Always render loading or error state on top of content -->
   {#if !mounted || loading || (!isCanvasReady && !error)}
     <div class="text-[hsl(var(--grey5))] p-6 absolute z-10 widgetic-colors flex items-center justify-center inset-0">
@@ -582,6 +634,7 @@
       </div>
     </WScrollArea>
   </div>
+  {/if}
 </div>
 
 <style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.20",
+	"version": "0.5.22",
 	"license": "SEE LICENSE IN LICENSE",
 	"type": "module",
 	"svelte": "./dist/index.js",
@@ -314,8 +314,11 @@
 	"overrides": {
 		"shell-quote": "^1.12.0"
 	},
+	"engines": {
+		"node": ">=26.12.1"
+	},
 	"volta": {
-		"node": "22.22.0",
+		"node": "26.12.1",
 		"npm": "11.1.0"
 	}
 }