@djangocfg/ui-nextjs 2.1.75 → 2.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.75",
+  "version": "2.1.77",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.75",
-    "@djangocfg/ui-core": "^2.1.75",
+    "@djangocfg/api": "^2.1.77",
+    "@djangocfg/ui-core": "^2.1.77",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -110,7 +110,7 @@
     "wavesurfer.js": "^7.12.1"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.75",
+    "@djangocfg/typescript-config": "^2.1.77",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/tools/ImageViewer/README.md

@@ -39,6 +39,7 @@ import { ImageViewer } from '@djangocfg/ui-nextjs';
 |------|------|---------|-------------|
 | `file` | `ImageFile` | required | File info (name, path, mimeType) |
 | `content` | `string \| ArrayBuffer` | required | Image data |
+| `src` | `string` | - | Direct URL (bypasses content→blob conversion) |
 | `inDialog` | `boolean` | `false` | Hide expand button (for nested usage) |
 
 ## ImageFile Type
@@ -70,8 +71,33 @@ const buffer = await response.arrayBuffer();
 
 // Base64 string (auto-converted to data URL)
 <ImageViewer file={file} content="iVBORw0KGgo..." />
+
+// Direct URL (HTTP streaming for large files)
+<ImageViewer
+  file={file}
+  content=""
+  src="https://api.example.com/images/large-photo.jpg"
+/>
 ```
 
+## HTTP Streaming
+
+For large images, use the `src` prop to stream directly from a URL instead of loading the entire file into memory:
+
+```tsx
+// When src is provided, content is ignored
+<ImageViewer
+  file={{ name: 'large-photo.jpg', path: '/photos/large.jpg' }}
+  content=""  // Empty - not used when src is provided
+  src={streamingUrl}
+/>
+```
+
+This is useful for:
+- Large images that shouldn't be loaded into memory
+- HTTP Range request streaming
+- Pre-signed URLs with authentication tokens
+
 ## Keyboard Shortcuts
 
 | Key | Action |

package/src/tools/ImageViewer/components/ImageViewer.tsx

@@ -15,7 +15,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { ImageIcon, AlertCircle } from 'lucide-react';
 import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
-import { cn, Dialog, DialogContent, Alert, AlertDescription } from '@djangocfg/ui-core';
+import { cn, Dialog, DialogContent, DialogTitle, Alert, AlertDescription } from '@djangocfg/ui-core';
 
 import { ImageToolbar } from './ImageToolbar';
 import { ImageInfo } from './ImageInfo';
@@ -26,9 +26,10 @@ import type { ImageViewerProps } from '../types';
 // COMPONENT
 // =============================================================================
 
-export function ImageViewer({ file, content, inDialog = false }: ImageViewerProps) {
+export function ImageViewer({ file, content, src: directSrc, inDialog = false }: ImageViewerProps) {
   const [scale, setScale] = useState(1);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [loadError, setLoadError] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const controlsRef = useRef<ReturnType<typeof useControls> | null>(null);
 
@@ -40,7 +41,12 @@ export function ImageViewer({ file, content, inDialog = false }: ImageViewerProp
     useProgressiveLoading,
     error,
     hasContent,
-  } = useImageLoading({ content, mimeType: file.mimeType });
+  } = useImageLoading({ content, mimeType: file.mimeType, src: directSrc });
+
+  // Reset load error when src changes
+  useEffect(() => {
+    setLoadError(false);
+  }, [src]);
 
   // Transform state
   const { transform, rotate, flipH, flipV, transformStyle } = useImageTransform({
@@ -100,14 +106,14 @@ export function ImageViewer({ file, content, inDialog = false }: ImageViewerProp
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [rotate]);
 
-  // Show error for oversized images
-  if (error) {
+  // Show error for oversized images or load errors
+  if (error || loadError) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-3 bg-muted/30 p-4">
         <AlertCircle className="w-12 h-12 text-destructive/70" />
         <Alert variant="destructive" className="max-w-md">
           <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{error}</AlertDescription>
+          <AlertDescription>{error || 'Failed to load image'}</AlertDescription>
         </Alert>
       </div>
     );
@@ -118,7 +124,7 @@ export function ImageViewer({ file, content, inDialog = false }: ImageViewerProp
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-2 bg-muted/30">
         <ImageIcon className="w-12 h-12 text-muted-foreground/50" />
-        <p className="text-sm text-muted-foreground">Failed to load image</p>
+        <p className="text-sm text-muted-foreground">No image content</p>
       </div>
     );
   }
@@ -150,6 +156,7 @@ export function ImageViewer({ file, content, inDialog = false }: ImageViewerProp
         minScale={0.1}
         maxScale={8}
         centerOnInit
+        centerZoomedOut
         onTransformed={(ref, state) => {
           setScale(state.scale);
           controlsRef.current = ref;
@@ -207,6 +214,8 @@ export function ImageViewer({ file, content, inDialog = false }: ImageViewerProp
                   opacity: useProgressiveLoading && !isFullyLoaded ? 0 : 1,
                 }}
                 draggable={false}
+                crossOrigin="anonymous"
+                onError={() => setLoadError(true)}
               />
             )}
           </div>
@@ -216,16 +225,13 @@ export function ImageViewer({ file, content, inDialog = false }: ImageViewerProp
       {/* Fullscreen dialog */}
       {!inDialog && (
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <DialogContent className="max-w-[95vw] max-h-[95vh] w-[95vw] h-[95vh] p-0 overflow-hidden [&>button]:hidden">
-            <div className="h-full flex flex-col">
-              <div className="flex items-center justify-between px-4 py-2 border-b shrink-0">
-                <span className="text-sm font-medium truncate">{file.name}</span>
-              </div>
-              <div className="flex-1 min-h-0 relative">
-                <div className="absolute inset-0">
-                  <ImageViewer file={file} content={content} inDialog />
-                </div>
-              </div>
+          <DialogContent className="max-w-[95vw] max-h-[95vh] w-[95vw] h-[95vh] p-0 overflow-hidden [&>button]:hidden flex flex-col">
+            <DialogTitle className="sr-only">{file.name}</DialogTitle>
+            <div className="flex items-center justify-between px-4 py-2 border-b shrink-0">
+              <span className="text-sm font-medium truncate">{file.name}</span>
+            </div>
+            <div className="flex-1 min-h-0">
+              <ImageViewer file={file} content={content} src={directSrc} inDialog />
             </div>
           </DialogContent>
         </Dialog>

package/src/tools/ImageViewer/hooks/useImageLoading.ts

@@ -17,6 +17,11 @@ export interface UseImageLoadingOptions {
   content: string | ArrayBuffer;
   /** MIME type for blob creation */
   mimeType?: string;
+  /**
+   * Direct image URL (bypasses content→blob conversion).
+   * When provided, content is ignored and URL is used directly.
+   */
+  src?: string;
 }
 
 export interface UseImageLoadingReturn {
@@ -43,7 +48,7 @@ export interface UseImageLoadingReturn {
 // =============================================================================
 
 export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadingReturn {
-  const { content, mimeType } = options;
+  const { content, mimeType, src: directSrc } = options;
 
   const { getOrCreateBlobUrl, releaseBlobUrl } = useImageCache();
 
@@ -56,14 +61,22 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
 
   // Calculate size and flags
   const size = content ? (typeof content === 'string' ? content.length : content.byteLength) : 0;
-  const hasContent = size > 0;
-  const useProgressiveLoading = size > PROGRESSIVE_LOADING_THRESHOLD;
+  // When directSrc is provided, we have content (the URL itself)
+  const hasContent = directSrc ? true : size > 0;
+  const useProgressiveLoading = directSrc ? false : size > PROGRESSIVE_LOADING_THRESHOLD;
 
   // Create blob URL with caching and size validation
   useEffect(() => {
     // Reset error state
     setError(null);
 
+    // Direct URL mode - use as-is without blob conversion
+    if (directSrc) {
+      setSrc(directSrc);
+      setIsFullyLoaded(true);
+      return;
+    }
+
     if (!hasContent) {
       setSrc(null);
       return;
@@ -113,7 +126,7 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
         contentKeyRef.current = null;
       }
     };
-  }, [content, mimeType, hasContent, size, getOrCreateBlobUrl, releaseBlobUrl]);
+  }, [content, mimeType, hasContent, size, directSrc, getOrCreateBlobUrl, releaseBlobUrl]);
 
   // Create LQIP for progressive loading
   useEffect(() => {

package/src/tools/ImageViewer/types.ts

@@ -24,6 +24,12 @@ export interface ImageViewerProps {
   file: ImageFile;
   /** Image content as string (data URL or base64) or ArrayBuffer */
   content: string | ArrayBuffer;
+  /**
+   * Direct image URL for HTTP streaming.
+   * When provided, bypasses content→blob conversion and uses URL directly.
+   * Useful for large files loaded via HTTP Range requests.
+   */
+  src?: string;
   /** Hide expand button when already in dialog */
   inDialog?: boolean;
 }