@djangocfg/ui-nextjs 2.1.90 → 2.1.92

package/src/tools/ImageViewer/README.md

@@ -1,200 +0,0 @@
-# ImageViewer
-
-Image viewer with zoom, pan, rotate, and flip functionality.
-
-## Features
-
-- Mouse wheel zoom
-- Drag to pan
-- Zoom presets (25%, 50%, 100%, 200%, 400%)
-- Rotate 90°
-- Flip horizontal/vertical
-- Fullscreen dialog mode
-- Keyboard shortcuts
-- Checkerboard background for transparency
-- Image dimensions display
-
-## Installation
-
-```tsx
-import { ImageViewer } from '@djangocfg/ui-nextjs';
-```
-
-## Basic Usage
-
-```tsx
-<ImageViewer
-  file={{
-    name: 'photo.jpg',
-    path: '/images/photo.jpg',
-    mimeType: 'image/jpeg',
-  }}
-  content={imageArrayBuffer}
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `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
-
-```typescript
-interface ImageFile {
-  name: string;       // Display name
-  path: string;       // File path (for state tracking)
-  mimeType?: string;  // MIME type (e.g., 'image/png')
-}
-```
-
-## Content Formats
-
-The `content` prop accepts:
-
-- **ArrayBuffer**: Binary image data (creates blob URL)
-- **Data URL**: Base64 encoded string starting with `data:`
-- **Base64 string**: Raw base64 (auto-prefixed with data URL)
-
-```tsx
-// ArrayBuffer (from fetch or file read)
-const response = await fetch('/image.png');
-const buffer = await response.arrayBuffer();
-<ImageViewer file={file} content={buffer} />
-
-// Data URL
-<ImageViewer file={file} content="data:image/png;base64,iVBORw0KGgo..." />
-
-// 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 |
-|-----|--------|
-| `+` / `=` | Zoom in |
-| `-` | Zoom out |
-| `0` | Reset to fit |
-| `R` | Rotate 90° |
-
-## Toolbar Controls
-
-The floating toolbar at the bottom provides:
-
-- **Zoom out** button
-- **Zoom level** dropdown with presets
-- **Zoom in** button
-- **Fit to view** button
-- **Flip horizontal** toggle
-- **Flip vertical** toggle
-- **Rotate 90°** button
-- **Expand** fullscreen button
-
-## Fullscreen Mode
-
-Click the expand button to open the image in a fullscreen dialog. The dialog includes the same toolbar and supports all interactions.
-
-```tsx
-// Fullscreen is automatically available unless inDialog is true
-<ImageViewer file={file} content={content} />
-
-// When embedding in your own dialog, disable the expand button
-<Dialog>
-  <ImageViewer file={file} content={content} inDialog />
-</Dialog>
-```
-
-## Styling
-
-The component fills its container and displays a checkerboard pattern behind transparent images.
-
-```tsx
-<div className="w-full h-[500px]">
-  <ImageViewer file={file} content={content} />
-</div>
-```
-
-## Error State
-
-When content is empty or invalid, displays an error placeholder:
-
-```tsx
-// Shows "Failed to load image" with icon
-<ImageViewer file={file} content="" />
-```
-
-## Example: File Browser Integration
-
-```tsx
-function FilePreview({ file, content }: { file: OpenFile; content: ArrayBuffer }) {
-  const imageFile: ImageFile = {
-    name: file.name,
-    path: file.path,
-    mimeType: file.mimeType,
-  };
-
-  return (
-    <div className="h-full">
-      <ImageViewer file={imageFile} content={content} />
-    </div>
-  );
-}
-```
-
-## Architecture
-
-```
-ImageViewer/
-├── index.ts                    # Public API exports
-├── types.ts                    # Type definitions
-├── components/
-│   ├── index.ts                # Component exports
-│   ├── ImageViewer.tsx         # Main viewer component
-│   ├── ImageToolbar.tsx        # Zoom/rotate/flip controls
-│   └── ImageInfo.tsx           # Dimensions display
-├── hooks/
-│   ├── index.ts
-│   ├── useImageLoading.ts      # Blob URL & LQIP management
-│   └── useImageTransform.ts    # Rotation/flip state
-├── utils/
-│   ├── index.ts
-│   ├── constants.ts            # Size limits, zoom presets
-│   └── lqip.ts                 # Low-Quality Image Placeholder
-└── README.md
-```
-
-## Dependencies
-
-- `react-zoom-pan-pinch` - Zoom and pan functionality
-- `lucide-react` - Icons
-- `@djangocfg/ui-core` - UI components (Button, Dialog, etc.)

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

@@ -1,44 +0,0 @@
-'use client';
-
-/**
- * ImageInfo - Displays image dimensions badge
- */
-
-import { useEffect, useState } from 'react';
-import { useImageCache } from '../../../stores/mediaCache';
-import type { ImageInfoProps } from '../types';
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
-export function ImageInfo({ src }: ImageInfoProps) {
-  const { getDimensions, cacheDimensions } = useImageCache();
-  const [dimensions, setDimensions] = useState<{ w: number; h: number } | null>(null);
-
-  useEffect(() => {
-    // Check cache first
-    const cached = getDimensions(src);
-    if (cached) {
-      setDimensions({ w: cached.width, h: cached.height });
-      return;
-    }
-
-    // Load and cache dimensions
-    const img = new Image();
-    img.onload = () => {
-      const dims = { w: img.naturalWidth, h: img.naturalHeight };
-      setDimensions(dims);
-      cacheDimensions(src, { width: dims.w, height: dims.h });
-    };
-    img.src = src;
-  }, [src, getDimensions, cacheDimensions]);
-
-  if (!dimensions) return null;
-
-  return (
-    <div className="absolute top-3 right-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono">
-      {dimensions.w} × {dimensions.h}
-    </div>
-  );
-}

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

@@ -1,150 +0,0 @@
-'use client';
-
-/**
- * ImageToolbar - Floating toolbar for image controls
- */
-
-import { useMemo, useCallback } from 'react';
-import { ZoomIn, ZoomOut, RotateCw, FlipHorizontal, FlipVertical, Maximize2, Expand } from 'lucide-react';
-import { useControls } from 'react-zoom-pan-pinch';
-import { Button, cn } from '@djangocfg/ui-core';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../../../components/dropdown-menu';
-import { ZOOM_PRESETS } from '../utils';
-import type { ImageToolbarProps } from '../types';
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
-export function ImageToolbar({
-  scale,
-  transform,
-  onRotate,
-  onFlipH,
-  onFlipV,
-  onZoomPreset,
-  onExpand,
-}: ImageToolbarProps) {
-  const { zoomIn, zoomOut, resetTransform } = useControls();
-
-  const zoomLabel = useMemo(() => {
-    const percent = Math.round(scale * 100);
-    return `${percent}%`;
-  }, [scale]);
-
-  return (
-    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-background/90 backdrop-blur-sm border rounded-lg p-1 shadow-lg">
-      {/* Zoom controls */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={() => zoomOut()}
-        title="Zoom out"
-      >
-        <ZoomOut className="h-3.5 w-3.5" />
-      </Button>
-
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="h-7 px-2 min-w-[52px] font-mono text-xs">
-            {zoomLabel}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="center" className="min-w-[80px]">
-          {ZOOM_PRESETS.map((preset) => (
-            <DropdownMenuItem
-              key={preset.label}
-              onClick={() => onZoomPreset(preset.value)}
-              className="text-xs justify-center"
-            >
-              {preset.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={() => zoomIn()}
-        title="Zoom in"
-      >
-        <ZoomIn className="h-3.5 w-3.5" />
-      </Button>
-
-      <div className="w-px h-4 bg-border mx-1" />
-
-      {/* Fit to view */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={() => resetTransform()}
-        title="Fit to view"
-      >
-        <Maximize2 className="h-3.5 w-3.5" />
-      </Button>
-
-      <div className="w-px h-4 bg-border mx-1" />
-
-      {/* Transform controls */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn('h-7 w-7', transform.flipH && 'bg-accent')}
-        onClick={onFlipH}
-        title="Flip horizontal"
-      >
-        <FlipHorizontal className="h-3.5 w-3.5" />
-      </Button>
-
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn('h-7 w-7', transform.flipV && 'bg-accent')}
-        onClick={onFlipV}
-        title="Flip vertical"
-      >
-        <FlipVertical className="h-3.5 w-3.5" />
-      </Button>
-
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7"
-        onClick={onRotate}
-        title="Rotate 90°"
-      >
-        <RotateCw className="h-3.5 w-3.5" />
-      </Button>
-
-      {transform.rotation !== 0 && (
-        <span className="text-[10px] text-muted-foreground font-mono pl-1">
-          {transform.rotation}°
-        </span>
-      )}
-
-      {onExpand && (
-        <>
-          <div className="w-px h-4 bg-border mx-1" />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={onExpand}
-            title="Open in fullscreen"
-          >
-            <Expand className="h-3.5 w-3.5" />
-          </Button>
-        </>
-      )}
-    </div>
-  );
-}

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

@@ -1,241 +0,0 @@
-'use client';
-
-/**
- * ImageViewer - Image viewer with zoom, pan, rotate, flip
- *
- * Features:
- * - Zoom with mouse wheel and presets
- * - Pan with drag
- * - Rotate 90°
- * - Flip horizontal/vertical
- * - Fullscreen dialog
- * - Keyboard shortcuts (+/-, 0, r)
- */
-
-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, DialogTitle, Alert, AlertDescription } from '@djangocfg/ui-core';
-
-import { ImageToolbar } from './ImageToolbar';
-import { ImageInfo } from './ImageInfo';
-import { useImageTransform, useImageLoading } from '../hooks';
-import type { ImageViewerProps } from '../types';
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
-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);
-
-  // Loading state
-  const {
-    src,
-    lqip,
-    isFullyLoaded,
-    useProgressiveLoading,
-    error,
-    hasContent,
-  } = 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({
-    resetKey: file.path,
-  });
-
-  // Zoom preset handler
-  const handleZoomPreset = useCallback((value: number | 'fit') => {
-    if (!controlsRef.current) return;
-    if (value === 'fit') {
-      controlsRef.current.resetTransform();
-    } else {
-      controlsRef.current.setTransform(0, 0, value);
-    }
-  }, []);
-
-  // Expand to fullscreen
-  const handleExpand = useCallback(() => {
-    setDialogOpen(true);
-  }, []);
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!containerRef.current?.contains(document.activeElement) &&
-          document.activeElement !== containerRef.current) {
-        return;
-      }
-
-      const controls = controlsRef.current;
-      if (!controls) return;
-
-      switch (e.key) {
-        case '+':
-        case '=':
-          e.preventDefault();
-          controls.zoomIn();
-          break;
-        case '-':
-          e.preventDefault();
-          controls.zoomOut();
-          break;
-        case '0':
-          e.preventDefault();
-          controls.resetTransform();
-          break;
-        case 'r':
-          if (!e.metaKey && !e.ctrlKey) {
-            e.preventDefault();
-            rotate();
-          }
-          break;
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [rotate]);
-
-  // 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 || 'Failed to load image'}</AlertDescription>
-        </Alert>
-      </div>
-    );
-  }
-
-  // No content
-  if (!hasContent) {
-    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">No image content</p>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      tabIndex={0}
-      className={cn(
-        'flex-1 h-full relative overflow-hidden outline-none',
-        'bg-[length:16px_16px]',
-        '[background-color:hsl(var(--muted)/0.2)]',
-        '[background-image:linear-gradient(45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(-45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,hsl(var(--muted)/0.4)_75%),linear-gradient(-45deg,transparent_75%,hsl(var(--muted)/0.4)_75%)]',
-        '[background-position:0_0,0_8px,8px_-8px,-8px_0px]'
-      )}
-    >
-      {src && <ImageInfo src={src} />}
-
-      {/* Progressive loading indicator */}
-      {useProgressiveLoading && !isFullyLoaded && (
-        <div className="absolute top-3 left-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono flex items-center gap-1.5">
-          <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
-          Loading...
-        </div>
-      )}
-
-      <TransformWrapper
-        initialScale={1}
-        minScale={0.1}
-        maxScale={8}
-        centerOnInit
-        centerZoomedOut
-        onTransformed={(ref, state) => {
-          setScale(state.scale);
-          controlsRef.current = ref;
-        }}
-        onInit={(ref) => {
-          controlsRef.current = ref;
-        }}
-        wheel={{ step: 0.1 }}
-        doubleClick={{ mode: 'toggle', step: 2 }}
-        panning={{ velocityDisabled: false }}
-      >
-        <ImageToolbar
-          scale={scale}
-          transform={transform}
-          onRotate={rotate}
-          onFlipH={flipH}
-          onFlipV={flipV}
-          onZoomPreset={handleZoomPreset}
-          onExpand={!inDialog ? handleExpand : undefined}
-        />
-
-        <TransformComponent
-          wrapperClass="!w-full !h-full cursor-grab active:cursor-grabbing"
-          contentClass="!w-full !h-full flex items-center justify-center"
-        >
-          <div className="relative">
-            {/* LQIP Placeholder (blurred, shown while loading) */}
-            {useProgressiveLoading && lqip && !isFullyLoaded && (
-              <img
-                src={lqip}
-                alt=""
-                aria-hidden="true"
-                className="absolute inset-0 max-w-full max-h-full object-contain select-none"
-                style={{
-                  transform: transformStyle,
-                  filter: 'blur(20px)',
-                  transition: 'opacity 0.3s ease-out',
-                  opacity: isFullyLoaded ? 0 : 1,
-                }}
-                draggable={false}
-              />
-            )}
-
-            {/* Full Image */}
-            {src && (
-              <img
-                src={src}
-                alt={file.name}
-                className="max-w-full max-h-full object-contain select-none"
-                style={{
-                  transform: transformStyle,
-                  transition: useProgressiveLoading
-                    ? 'transform 0.15s ease-out, opacity 0.3s ease-out'
-                    : 'transform 0.15s ease-out',
-                  opacity: useProgressiveLoading && !isFullyLoaded ? 0 : 1,
-                }}
-                draggable={false}
-                crossOrigin="anonymous"
-                onError={() => setLoadError(true)}
-              />
-            )}
-          </div>
-        </TransformComponent>
-      </TransformWrapper>
-
-      {/* 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 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>
-      )}
-    </div>
-  );
-}

package/src/tools/ImageViewer/components/index.ts

@@ -1,7 +0,0 @@
-/**
- * ImageViewer components - Public API
- */
-
-export { ImageViewer } from './ImageViewer';
-export { ImageToolbar } from './ImageToolbar';
-export { ImageInfo } from './ImageInfo';

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

@@ -1,9 +0,0 @@
-/**
- * ImageViewer hooks - Public API
- */
-
-export { useImageTransform } from './useImageTransform';
-export type { UseImageTransformOptions, UseImageTransformReturn } from './useImageTransform';
-
-export { useImageLoading } from './useImageLoading';
-export type { UseImageLoadingOptions, UseImageLoadingReturn } from './useImageLoading';