@djangocfg/ui-tools 2.1.404 → 2.1.408

package/src/tools/FileIcon/index.ts

@@ -12,4 +12,8 @@ export type {
   FolderIconOverrides,
 } from './specialFolders';
 
+export { getFileIcon, DEFAULT_FILE_ICON } from './get-file-icon';
+export type { FileIconDef } from './get-file-icon';
+
+/** @deprecated Use `getFileIcon` — resolution is now synchronous. */
 export { loadMaterialIcons, getMaterialIconsSync } from './loader';

package/src/tools/FileIcon/loader.ts

@@ -1,47 +1,29 @@
 'use client';
 
 /**
- * Lazy loader for `material-file-icons`. The package is an optional dependency:
- * if it's installed in the consumer's tree, we render its rich VSCode-style
- * SVGs; if not, the loader resolves to `null` and `<FileIcon>` falls back to a
- * Lucide icon. Either way, ui-tools never throws or warns about a missing
- * package.
+ * Back-compat shim for the former `material-file-icons` lazy loader.
  *
- * Resolution is cached per-process so we don't re-import on every render.
+ * File icons are now resolved synchronously from a vendored static data
+ * module — see `./get-file-icon`. The async API is kept so existing callers
+ * of `loadMaterialIcons` / `getMaterialIconsSync` keep working; both resolve
+ * immediately to the local resolver.
+ *
+ * @deprecated Import {@link getFileIcon} from `./get-file-icon` instead.
  */
 
-type GetIconFn = (name: string) => { svg: string } | undefined;
-
-let cached: GetIconFn | null | undefined;
-let inflight: Promise<GetIconFn | null> | null = null;
+import { getFileIcon } from './get-file-icon';
 
-export async function loadMaterialIcons(): Promise<GetIconFn | null> {
-  if (cached !== undefined) return cached;
-  if (inflight) return inflight;
+/** Returns an inline SVG string for a file name, or `undefined`. */
+type GetIconFn = (name: string) => { svg?: string } | undefined;
 
-  inflight = (async () => {
-    try {
-      // Computed specifier so bundlers don't try to eagerly resolve it.
-      const specifier = 'material-file-icons';
-      const mod = (await import(/* @vite-ignore */ specifier)) as {
-        getIcon?: GetIconFn;
-        default?: { getIcon?: GetIconFn };
-      };
-      const fn = mod.getIcon ?? mod.default?.getIcon ?? null;
-      cached = fn;
-      return fn;
-    } catch {
-      cached = null;
-      return null;
-    } finally {
-      inflight = null;
-    }
-  })();
+const localGetIcon: GetIconFn = (name) => ({ svg: getFileIcon(name).svg });
 
-  return inflight;
+/** @deprecated Use {@link getFileIcon} — resolution is now synchronous. */
+export function loadMaterialIcons(): Promise<GetIconFn> {
+  return Promise.resolve(localGetIcon);
 }
 
-/** Synchronous accessor — returns null until `loadMaterialIcons` resolves. */
-export function getMaterialIconsSync(): GetIconFn | null {
-  return cached ?? null;
+/** @deprecated Use {@link getFileIcon} — resolution is now synchronous. */
+export function getMaterialIconsSync(): GetIconFn {
+  return localGetIcon;
 }

package/src/tools/FileIcon/specialFolders.ts

@@ -2,6 +2,8 @@
 
 import {
   BookOpen,
+  Component,
+  Database,
   FlaskConical,
   Folder,
   FolderCode,
@@ -11,9 +13,11 @@ import {
   FolderOutput,
   Github,
   Image as ImageIcon,
+  Languages,
   Package,
   Settings,
   Terminal,
+  Workflow,
   type LucideIcon,
 } from 'lucide-react';
 
@@ -50,6 +54,7 @@ const SPECIAL_FOLDERS: Record<string, LucideIcon> = {
   test: FlaskConical,
   __tests__: FlaskConical,
   __test__: FlaskConical,
+  spec: FlaskConical,
   scripts: Terminal,
   bin: Terminal,
   config: Settings,
@@ -60,6 +65,19 @@ const SPECIAL_FOLDERS: Record<string, LucideIcon> = {
   '.git': FolderGit2,
   '.github': Github,
   '.gitlab': FolderGit2,
+  '.husky': Workflow,
+  '.circleci': Workflow,
+  components: Component,
+  component: Component,
+  ui: Component,
+  i18n: Languages,
+  locale: Languages,
+  locales: Languages,
+  lang: Languages,
+  translations: Languages,
+  db: Database,
+  database: Database,
+  migrations: Database,
 };
 
 export interface ResolveFolderIconOptions {

package/src/tools/Gallery/components/lightbox/GalleryLightbox.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useEffect, useCallback, useState, useMemo } from 'react'
+import { memo, useEffect, useCallback, useState, useMemo, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { cn } from '@djangocfg/ui-core/lib'
 import { useAppT } from '@djangocfg/i18n'
@@ -19,7 +19,8 @@ import type { GalleryLightboxProps } from '../../types'
  * - Preloads adjacent images for smooth navigation
  * - Loading skeleton while image loads
  * - Zoom with pan/drag support
- * - Keyboard and swipe navigation
+ * - Keyboard navigation (arrows, Home/End, Esc), focus trap, backdrop click
+ * - Swipe navigation
  */
 export const GalleryLightbox = memo(function GalleryLightbox({
   open,
@@ -35,6 +36,9 @@ export const GalleryLightbox = memo(function GalleryLightbox({
 }: GalleryLightboxProps) {
   const t = useAppT()
   const [mounted, setMounted] = useState(false)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  // Element focused before the lightbox opened, restored on close
+  const previousFocusRef = useRef<HTMLElement | null>(null)
 
   // Translations
   const labels = useMemo(() => ({
@@ -58,7 +62,9 @@ export const GalleryLightbox = memo(function GalleryLightbox({
   // Prepare data
   const currentImage = useMemo(() => images[currentIndex], [images, currentIndex])
   const hasMultiple = useMemo(() => images.length > 1, [images.length])
+  const isVideo = currentImage?.type === 'video' && Boolean(currentImage.videoSrc)
   const { isZoomed, isDragging } = zoom
+  const resetZoom = zoom.reset
 
   // Preload adjacent images when lightbox is open
   usePreloadImages(open ? images : [], currentIndex, 2)
@@ -70,20 +76,33 @@ export const GalleryLightbox = memo(function GalleryLightbox({
 
   // Reset zoom when image changes
   useEffect(() => {
-    zoom.reset()
-  }, [currentIndex])
+    resetZoom()
+  }, [currentIndex, resetZoom])
 
   // Prevent body scroll when open
   useEffect(() => {
-    if (open) {
-      const originalStyle = window.getComputedStyle(document.body).overflow
-      document.body.style.overflow = 'hidden'
-      return () => {
-        document.body.style.overflow = originalStyle
-      }
+    if (!open) return
+    const originalStyle = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = originalStyle
     }
   }, [open])
 
+  // Focus management: move focus into the dialog on open, restore on close
+  useEffect(() => {
+    if (!open || !mounted) return
+    previousFocusRef.current = document.activeElement as HTMLElement | null
+    // Defer to allow the portal content to mount
+    const id = window.requestAnimationFrame(() => {
+      dialogRef.current?.focus()
+    })
+    return () => {
+      window.cancelAnimationFrame(id)
+      previousFocusRef.current?.focus?.()
+    }
+  }, [open, mounted])
+
   // Navigation handlers
   const goToPrev = useCallback(() => {
     if (hasMultiple) {
@@ -97,15 +116,16 @@ export const GalleryLightbox = memo(function GalleryLightbox({
     }
   }, [hasMultiple, currentIndex, images.length, onIndexChange])
 
-  // Keyboard navigation
+  // Keyboard navigation + focus trap
   useEffect(() => {
     if (!open) return
 
     const handleKeyDown = (e: KeyboardEvent) => {
       switch (e.key) {
         case 'Escape':
+          e.preventDefault()
           if (isZoomed) {
-            zoom.reset()
+            resetZoom()
           } else {
             onClose()
           }
@@ -116,12 +136,47 @@ export const GalleryLightbox = memo(function GalleryLightbox({
         case 'ArrowRight':
           if (!isZoomed) goToNext()
           break
+        case 'Home':
+          if (!isZoomed && hasMultiple) {
+            e.preventDefault()
+            onIndexChange(0)
+          }
+          break
+        case 'End':
+          if (!isZoomed && hasMultiple) {
+            e.preventDefault()
+            onIndexChange(images.length - 1)
+          }
+          break
+        case 'Tab': {
+          // Trap focus within the dialog
+          const dialog = dialogRef.current
+          if (!dialog) break
+          const focusable = dialog.querySelectorAll<HTMLElement>(
+            'button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
+          )
+          if (focusable.length === 0) {
+            e.preventDefault()
+            break
+          }
+          const first = focusable[0]
+          const last = focusable[focusable.length - 1]
+          const active = document.activeElement
+          if (e.shiftKey && (active === first || active === dialog)) {
+            e.preventDefault()
+            last.focus()
+          } else if (!e.shiftKey && active === last) {
+            e.preventDefault()
+            first.focus()
+          }
+          break
+        }
       }
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [open, isZoomed, goToPrev, goToNext, onClose, zoom])
+  }, [open, isZoomed, goToPrev, goToNext, onClose, resetZoom, hasMultiple, images.length, onIndexChange])
 
   // Swipe handlers (disabled when zoomed)
   const swipeHandlers = useSwipe({
@@ -132,13 +187,27 @@ export const GalleryLightbox = memo(function GalleryLightbox({
   // Action handlers
   const handleDownload = useCallback(() => {
     if (!currentImage) return
+    // For videos download the video file, otherwise the image
+    const downloadUrl = isVideo ? currentImage.videoSrc! : currentImage.src
+    // Derive a filename from the URL path, fall back to a numbered name
+    let filename = isVideo ? `video-${currentIndex + 1}.mp4` : `image-${currentIndex + 1}.jpg`
+    try {
+      const path = new URL(downloadUrl, window.location.href).pathname
+      const last = path.split('/').pop()
+      if (last && /\.[a-z0-9]+$/i.test(last)) {
+        filename = decodeURIComponent(last)
+      }
+    } catch {
+      // Keep fallback filename
+    }
     const link = document.createElement('a')
-    link.href = currentImage.src
-    link.download = currentImage.alt || `image-${currentIndex + 1}.jpg`
+    link.href = downloadUrl
+    link.download = filename
+    link.rel = 'noopener'
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
-  }, [currentImage, currentIndex])
+  }, [currentImage, currentIndex, isVideo])
 
   const handleShare = useCallback(async () => {
     if (!currentImage) return
@@ -160,29 +229,31 @@ export const GalleryLightbox = memo(function GalleryLightbox({
     zoom.toggleZoom()
   }, [zoom])
 
-  const handleContentClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-  }, [])
+  // Close only when the backdrop itself (not a child) is clicked
+  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose()
+  }, [onClose])
 
   if (!open || !mounted) return null
 
   const lightbox = (
     <div
+      ref={dialogRef}
       className={cn(
         'fixed inset-0 z-50',
         'backdrop-blur-sm',
-        'animate-in fade-in-0 duration-200'
+        'animate-in fade-in-0 duration-200',
+        'focus:outline-none'
       )}
       style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
-      onClick={onClose}
       role="dialog"
       aria-modal="true"
-      aria-label={labels.lightbox}
+      aria-label={title || labels.lightbox}
+      tabIndex={-1}
     >
       {/* Content */}
       <div
         className="relative w-full h-full flex flex-col"
-        onClick={handleContentClick}
         {...swipeHandlers}
       >
         {/* Header */}
@@ -191,7 +262,7 @@ export const GalleryLightbox = memo(function GalleryLightbox({
           <div className="text-white">
             {title && <div className="font-medium">{title}</div>}
             {hasMultiple && (
-              <div className="text-sm text-white/70">
+              <div className="text-sm text-white/70" aria-live="polite">
                 {currentIndex + 1} / {images.length}
               </div>
             )}
@@ -199,10 +270,10 @@ export const GalleryLightbox = memo(function GalleryLightbox({
 
           {/* Actions */}
           <div className="flex items-center gap-2">
-            {enableZoom && (
+            {enableZoom && !isVideo && (
               <button
                 type="button"
-                className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
+                className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                 onClick={handleToggleZoom}
                 aria-label={isZoomed ? labels.zoomOut : labels.zoomIn}
               >
@@ -217,7 +288,7 @@ export const GalleryLightbox = memo(function GalleryLightbox({
             {enableDownload && (
               <button
                 type="button"
-                className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
+                className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                 onClick={handleDownload}
                 aria-label={labels.download}
               >
@@ -228,7 +299,7 @@ export const GalleryLightbox = memo(function GalleryLightbox({
             {enableShare && (
               <button
                 type="button"
-                className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
+                className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                 onClick={handleShare}
                 aria-label={labels.share}
               >
@@ -238,7 +309,7 @@ export const GalleryLightbox = memo(function GalleryLightbox({
 
             <button
               type="button"
-              className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
+              className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
               onClick={onClose}
               aria-label={labels.close}
             >
@@ -248,17 +319,21 @@ export const GalleryLightbox = memo(function GalleryLightbox({
         </div>
 
         {/* Main Image */}
-        <div className="flex-1 flex items-center justify-center p-4 pt-16 pb-24 overflow-hidden">
+        <div
+          className="flex-1 flex items-center justify-center p-4 pt-16 pb-24 overflow-hidden"
+          onClick={handleBackdropClick}
+        >
           {currentImage && (
             <div
               className={cn(
                 'relative w-full h-full select-none',
-                isZoomed ? 'cursor-grab' : enableZoom ? 'cursor-zoom-in' : 'cursor-default',
-                isDragging && 'cursor-grabbing'
+                // Zoom cursors only apply to images, not video (needs native controls)
+                !isVideo && (isZoomed ? 'cursor-grab' : enableZoom ? 'cursor-zoom-in' : 'cursor-default'),
+                !isVideo && isDragging && 'cursor-grabbing'
               )}
-              {...(enableZoom ? zoom.handlers : {})}
+              {...(enableZoom && !isVideo ? zoom.handlers : {})}
               style={{
-                transform: isZoomed
+                transform: isZoomed && !isVideo
                   ? `scale(${zoom.state.scale}) translate(${zoom.state.x}px, ${zoom.state.y}px)`
                   : 'scale(1)',
                 transition: isDragging ? 'none' : 'transform 0.3s ease-out',
@@ -267,7 +342,9 @@ export const GalleryLightbox = memo(function GalleryLightbox({
             >
               <GalleryMedia
                 media={currentImage}
-                className="w-full h-full pointer-events-none"
+                // pointer-events disabled for images so the zoom wrapper gets clicks;
+                // video needs pointer events for its native/overlay controls
+                className={cn('w-full h-full', !isVideo && 'pointer-events-none')}
                 objectFit="contain"
                 showLoading
                 priority

package/src/tools/Gallery/components/media/GalleryVideo.tsx

@@ -51,8 +51,13 @@ export const GalleryVideo = memo(function GalleryVideo({
     if (!video) return
 
     if (video.paused) {
-      video.play()
-      setIsPlaying(true)
+      // play() returns a promise that can reject (autoplay policy / no source)
+      const playPromise = video.play()
+      if (playPromise && typeof playPromise.then === 'function') {
+        playPromise.then(() => setIsPlaying(true)).catch(() => setIsPlaying(false))
+      } else {
+        setIsPlaying(true)
+      }
     } else {
       video.pause()
       setIsPlaying(false)
@@ -98,6 +103,14 @@ export const GalleryVideo = memo(function GalleryVideo({
     setIsPlaying(false)
   }, [])
 
+  // Keep local state in sync with native video events (native controls, end of playback)
+  const handlePlay = useCallback(() => setIsPlaying(true), [])
+  const handlePause = useCallback(() => setIsPlaying(false), [])
+  const handleEnded = useCallback(() => {
+    setIsPlaying(false)
+    setShowOverlay(true)
+  }, [])
+
   const handleContainerClick = useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
   }, [])
@@ -110,6 +123,7 @@ export const GalleryVideo = memo(function GalleryVideo({
   if (hasError) {
     return (
       <div
+        data-nav
         className={cn('relative w-full h-full bg-black', className)}
         onClick={handleContainerClick}
       >
@@ -133,6 +147,7 @@ export const GalleryVideo = memo(function GalleryVideo({
 
   return (
     <div
+      data-nav
       className={cn('relative w-full h-full bg-black', className)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -143,12 +158,16 @@ export const GalleryVideo = memo(function GalleryVideo({
         className="w-full h-full object-contain"
         src={media.videoSrc}
         poster={media.src}
+        aria-label={media.alt || 'Video'}
         autoPlay={autoPlay}
         muted={muted}
         loop={loop}
         playsInline
         onClick={handleVideoClick}
         onError={handleError}
+        onPlay={handlePlay}
+        onPause={handlePause}
+        onEnded={handleEnded}
       >
         {media.videoType && (
           <source src={media.videoSrc} type={media.videoType} />

package/src/tools/Gallery/components/preview/GalleryCarousel.tsx

@@ -161,8 +161,18 @@ export const GalleryCarousel = memo(function GalleryCarousel({
     const dy = Math.abs(e.clientY - y)
     const dt = Date.now() - time
 
+    // Don't open lightbox when interacting with video controls
+    const target = e.target as HTMLElement
+    const isVideoInteraction =
+      target.tagName === 'VIDEO' || target.closest('video, [data-nav]') !== null
+
     // Only trigger click if pointer didn't move much and was quick
-    if (dx < CLICK_THRESHOLD && dy < CLICK_THRESHOLD && dt < CLICK_TIME_THRESHOLD) {
+    if (
+      !isVideoInteraction &&
+      dx < CLICK_THRESHOLD &&
+      dy < CLICK_THRESHOLD &&
+      dt < CLICK_TIME_THRESHOLD
+    ) {
       onLightboxOpen()
     }
 

package/src/tools/Gallery/hooks/usePreloadImages.ts

@@ -3,6 +3,10 @@
 import { useEffect, useRef } from 'react';
 
 import type { GalleryMediaItem } from '../types'
+import { normalizeImageUrl } from '../utils'
+
+/** Max number of URLs to remember as "already preloaded" before evicting oldest */
+const MAX_PRELOAD_MEMORY = 200
 
 /**
  * Preload adjacent images for smoother navigation
@@ -13,6 +17,7 @@ export function usePreloadImages(
   currentIndex: number,
   preloadCount: number = 1
 ): void {
+  // Insertion-ordered Set, used as a bounded LRU to avoid unbounded growth
   const preloadedRef = useRef<Set<string>>(new Set())
 
   useEffect(() => {
@@ -26,18 +31,50 @@ export function usePreloadImages(
 
       const index = (currentIndex + offset + images.length) % images.length
       const image = images[index]
+      if (!image) continue
+
+      // Videos are not preloadable via Image(); skip them
+      if (image.type === 'video') continue
 
-      if (image && !preloadedRef.current.has(image.src)) {
-        toPreload.push(image.src)
+      const src = normalizeImageUrl(image.src)
+      if (src && !preloadedRef.current.has(src)) {
+        toPreload.push(src)
       }
     }
 
-    // Preload images
+    if (toPreload.length === 0) return
+
+    const memory = preloadedRef.current
+    const loaders: HTMLImageElement[] = []
+
     toPreload.forEach((src) => {
       const img = new Image()
+      // Release the loader once finished so it can be GC'd
+      const cleanup = () => {
+        img.onload = null
+        img.onerror = null
+      }
+      img.onload = cleanup
+      img.onerror = cleanup
       img.src = src
-      preloadedRef.current.add(src)
+      loaders.push(img)
+
+      memory.add(src)
+      // Evict oldest entries to keep the Set bounded
+      if (memory.size > MAX_PRELOAD_MEMORY) {
+        const oldest = memory.values().next().value
+        if (oldest !== undefined) memory.delete(oldest)
+      }
     })
+
+    // Cancel in-flight loaders if the effect re-runs before they settle
+    return () => {
+      loaders.forEach((img) => {
+        img.onload = null
+        img.onerror = null
+        img.src = ''
+      })
+    }
   }, [images, currentIndex, preloadCount])
 }
 
@@ -47,9 +84,19 @@ export function usePreloadImages(
 export function preloadImage(src: string): Promise<void> {
   return new Promise((resolve, reject) => {
     const img = new Image()
-    img.onload = () => resolve()
-    img.onerror = reject
-    img.src = src
+    const cleanup = () => {
+      img.onload = null
+      img.onerror = null
+    }
+    img.onload = () => {
+      cleanup()
+      resolve()
+    }
+    img.onerror = () => {
+      cleanup()
+      reject(new Error(`Failed to preload image: ${src}`))
+    }
+    img.src = normalizeImageUrl(src)
   })
 }
 

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

@@ -24,20 +24,31 @@ export function ImageInfo({ src }: ImageInfoProps) {
       return;
     }
 
+    // Clear stale dimensions while the new source resolves
+    setDimensions(null);
+
     // Load and cache dimensions
+    let cancelled = false;
     const img = new Image();
     img.onload = () => {
+      if (cancelled) return;
       const dims = { w: img.naturalWidth, h: img.naturalHeight };
       setDimensions(dims);
       cacheDimensions(src, { width: dims.w, height: dims.h });
     };
     img.src = src;
+
+    return () => {
+      cancelled = true;
+      img.onload = null;
+      img.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">
+    <div className="absolute top-3 right-3 z-10 px-2 py-1 bg-black/60 backdrop-blur-sm border border-white/10 rounded text-[10px] text-white/80 font-mono">
       {dimensions.w} × {dimensions.h}
     </div>
   );