@djangocfg/ui-nextjs 2.1.76 → 2.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.76",
+  "version": "2.1.78",
   "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.76",
-    "@djangocfg/ui-core": "^2.1.76",
+    "@djangocfg/api": "^2.1.78",
+    "@djangocfg/ui-core": "^2.1.78",
     "@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.76",
+    "@djangocfg/typescript-config": "^2.1.78",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/lib/index.ts

@@ -1,2 +1,5 @@
 // Re-export from ui-core
-export * from '@djangocfg/ui-core/lib';
+export * from '@djangocfg/ui-core/lib';
+
+// Logger (consola + zustand for Console panel)
+export * from './logger';

package/src/lib/logger/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Universal Logger
+ *
+ * Combines console logging with zustand store for Console panel.
+ * Use createMediaLogger for media tools (AudioPlayer, VideoPlayer, ImageViewer).
+ */
+
+export { createLogger, createMediaLogger, logger, log } from './logger';
+export { useLogStore, useFilteredLogs, useLogCount, useErrorCount } from './logStore';
+export type { LogEntry, LogLevel, LogFilter, LogStore, Logger, MediaLogger } from './types';

package/src/lib/logger/logStore.ts

@@ -0,0 +1,122 @@
+/**
+ * Log Store
+ *
+ * Zustand store for log accumulation and filtering.
+ * Keeps logs in memory for Console panel display.
+ */
+
+'use client';
+
+import { create } from 'zustand';
+import type { LogStore, LogEntry, LogFilter } from './types';
+
+const DEFAULT_FILTER: LogFilter = {
+  levels: ['debug', 'info', 'warn', 'error', 'success'],
+  component: undefined,
+  search: undefined,
+  since: undefined,
+};
+
+const MAX_LOGS = 1000;
+
+function generateId(): string {
+  return `log-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function matchesFilter(entry: LogEntry, filter: LogFilter): boolean {
+  // Level filter
+  if (!filter.levels.includes(entry.level)) {
+    return false;
+  }
+
+  // Component filter (case-insensitive partial match)
+  if (filter.component) {
+    const comp = filter.component.toLowerCase();
+    if (!entry.component.toLowerCase().includes(comp)) {
+      return false;
+    }
+  }
+
+  // Search filter (case-insensitive, searches message and data)
+  if (filter.search) {
+    const search = filter.search.toLowerCase();
+    const inMessage = entry.message.toLowerCase().includes(search);
+    const inData = entry.data
+      ? JSON.stringify(entry.data).toLowerCase().includes(search)
+      : false;
+    if (!inMessage && !inData) {
+      return false;
+    }
+  }
+
+  // Time filter
+  if (filter.since && entry.timestamp < filter.since) {
+    return false;
+  }
+
+  return true;
+}
+
+export const useLogStore = create<LogStore>((set, get) => ({
+  logs: [],
+  filter: DEFAULT_FILTER,
+  maxLogs: MAX_LOGS,
+
+  addLog: (entry) => {
+    const newEntry: LogEntry = {
+      ...entry,
+      id: generateId(),
+      timestamp: new Date(),
+    };
+
+    set((state) => {
+      const newLogs = [...state.logs, newEntry];
+      // Trim to max size
+      if (newLogs.length > state.maxLogs) {
+        return { logs: newLogs.slice(-state.maxLogs) };
+      }
+      return { logs: newLogs };
+    });
+  },
+
+  clearLogs: () => {
+    set({ logs: [] });
+  },
+
+  setFilter: (filter) => {
+    set((state) => ({
+      filter: { ...state.filter, ...filter },
+    }));
+  },
+
+  resetFilter: () => {
+    set({ filter: DEFAULT_FILTER });
+  },
+
+  getFilteredLogs: () => {
+    const { logs, filter } = get();
+    return logs.filter((entry) => matchesFilter(entry, filter));
+  },
+
+  exportLogs: () => {
+    const { logs } = get();
+    return JSON.stringify(logs, null, 2);
+  },
+}));
+
+// Selector hooks for performance
+export const useFilteredLogs = () => {
+  const logs = useLogStore((state) => state.logs);
+  const filter = useLogStore((state) => state.filter);
+  return logs.filter((entry) => matchesFilter(entry, filter));
+};
+
+export const useLogCount = () => {
+  return useLogStore((state) => state.logs.length);
+};
+
+export const useErrorCount = () => {
+  return useLogStore((state) =>
+    state.logs.filter((log) => log.level === 'error').length
+  );
+};

package/src/lib/logger/logger.ts

@@ -0,0 +1,175 @@
+/**
+ * Logger
+ *
+ * Universal logger with consola + zustand store integration.
+ * Logs are accumulated for Console panel display.
+ * In production, only logs to store (no console output).
+ */
+
+'use client';
+
+import { consola, type ConsolaInstance } from 'consola';
+import { useLogStore } from './logStore';
+import type { Logger, LogLevel, MediaLogger } from './types';
+
+// Check environment
+const isDev = process.env.NODE_ENV !== 'production';
+const isBrowser = typeof window !== 'undefined';
+
+// Create base consola instance
+const baseConsola = consola.create({
+  level: isDev ? 4 : 2, // 4 = debug, 2 = warn
+});
+
+/**
+ * Extract error details from unknown error type
+ */
+function extractErrorData(data?: Record<string, unknown>): {
+  cleanData: Record<string, unknown> | undefined;
+  stack: string | undefined;
+} {
+  if (!data) return { cleanData: undefined, stack: undefined };
+
+  const cleanData = { ...data };
+  let stack: string | undefined;
+
+  // Extract stack from error object
+  if (data.error instanceof Error) {
+    stack = data.error.stack;
+    cleanData.error = {
+      name: data.error.name,
+      message: data.error.message,
+    };
+  } else if (typeof data.error === 'object' && data.error !== null) {
+    const errObj = data.error as Record<string, unknown>;
+    if (typeof errObj.stack === 'string') {
+      stack = errObj.stack;
+    }
+    if (typeof errObj.message === 'string') {
+      cleanData.error = errObj.message;
+    }
+  }
+
+  return { cleanData, stack };
+}
+
+/**
+ * Format buffer ranges for logging
+ */
+function formatBufferRanges(buffered: TimeRanges, duration: number): string {
+  if (buffered.length === 0) return 'empty';
+
+  const ranges: string[] = [];
+  for (let i = 0; i < buffered.length; i++) {
+    const start = buffered.start(i);
+    const end = buffered.end(i);
+    const percent = ((end - start) / duration * 100).toFixed(1);
+    ranges.push(`${start.toFixed(1)}-${end.toFixed(1)}s (${percent}%)`);
+  }
+  return ranges.join(', ');
+}
+
+/**
+ * Create a logger for a specific component/module
+ */
+export function createLogger(component: string): Logger {
+  const consolaTagged = baseConsola.withTag(component);
+
+  const log = (level: LogLevel, message: string, data?: Record<string, unknown>) => {
+    const { cleanData, stack } = extractErrorData(data);
+
+    // Add to store (for Console panel)
+    if (isBrowser) {
+      useLogStore.getState().addLog({
+        level,
+        component,
+        message,
+        data: cleanData,
+        stack,
+      });
+    }
+
+    // Log to console via consola (in dev mode)
+    if (isDev) {
+      const consolaMethod = level === 'success' ? 'success' : level;
+      if (cleanData) {
+        consolaTagged[consolaMethod](message, cleanData);
+      } else {
+        consolaTagged[consolaMethod](message);
+      }
+    }
+  };
+
+  return {
+    debug: (message, data) => log('debug', message, data),
+    info: (message, data) => log('info', message, data),
+    warn: (message, data) => log('warn', message, data),
+    error: (message, data) => log('error', message, data),
+    success: (message, data) => log('success', message, data),
+  };
+}
+
+/**
+ * Create a media-specific logger with helper methods
+ * for AudioPlayer, VideoPlayer, ImageViewer
+ */
+export function createMediaLogger(component: string): MediaLogger {
+  const baseLogger = createLogger(component);
+
+  return {
+    ...baseLogger,
+
+    load: (src: string, type?: string) => {
+      const typeStr = type ? ` (${type})` : '';
+      baseLogger.info(`LOAD: ${src}${typeStr}`);
+    },
+
+    state: (state: string, details?: Record<string, unknown>) => {
+      baseLogger.debug(`STATE: ${state}`, details);
+    },
+
+    seek: (from: number, to: number, duration: number) => {
+      baseLogger.debug(`SEEK: ${from.toFixed(2)}s -> ${to.toFixed(2)}s`, {
+        from,
+        to,
+        duration,
+        progress: `${((to / duration) * 100).toFixed(1)}%`,
+      });
+    },
+
+    buffer: (buffered: TimeRanges, duration: number) => {
+      if (buffered.length > 0) {
+        baseLogger.debug(`BUFFER: ${formatBufferRanges(buffered, duration)}`);
+      }
+    },
+
+    event: (name: string, data?: unknown) => {
+      if (data !== undefined) {
+        baseLogger.debug(`EVENT: ${name}`, { data });
+      } else {
+        baseLogger.debug(`EVENT: ${name}`);
+      }
+    },
+  };
+}
+
+/**
+ * Global logger for non-component code
+ */
+export const logger = createLogger('App');
+
+/**
+ * Quick access for one-off logs
+ */
+export const log = {
+  debug: (component: string, message: string, data?: Record<string, unknown>) =>
+    createLogger(component).debug(message, data),
+  info: (component: string, message: string, data?: Record<string, unknown>) =>
+    createLogger(component).info(message, data),
+  warn: (component: string, message: string, data?: Record<string, unknown>) =>
+    createLogger(component).warn(message, data),
+  error: (component: string, message: string, data?: Record<string, unknown>) =>
+    createLogger(component).error(message, data),
+  success: (component: string, message: string, data?: Record<string, unknown>) =>
+    createLogger(component).success(message, data),
+};

package/src/lib/logger/types.ts

@@ -0,0 +1,82 @@
+/**
+ * Logger Types
+ *
+ * Type definitions for the universal logging system.
+ * Compatible with Console panel in FileWorkspace IDE layout.
+ */
+
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'success';
+
+export interface LogEntry {
+  /** Unique log ID */
+  id: string;
+  /** Timestamp when log was created */
+  timestamp: Date;
+  /** Log level */
+  level: LogLevel;
+  /** Component/module name that created the log */
+  component: string;
+  /** Log message */
+  message: string;
+  /** Additional data (objects, errors, etc.) */
+  data?: Record<string, unknown>;
+  /** Error stack trace (for error level) */
+  stack?: string;
+}
+
+export interface LogFilter {
+  /** Filter by log levels */
+  levels: LogLevel[];
+  /** Filter by component name (partial match) */
+  component?: string;
+  /** Filter by message text (partial match) */
+  search?: string;
+  /** Filter by time range */
+  since?: Date;
+}
+
+export interface LogStore {
+  /** All accumulated logs */
+  logs: LogEntry[];
+  /** Current filter settings */
+  filter: LogFilter;
+  /** Maximum logs to keep */
+  maxLogs: number;
+
+  /** Add new log entry */
+  addLog: (entry: Omit<LogEntry, 'id' | 'timestamp'>) => void;
+  /** Clear all logs */
+  clearLogs: () => void;
+  /** Update filter settings */
+  setFilter: (filter: Partial<LogFilter>) => void;
+  /** Reset filter to defaults */
+  resetFilter: () => void;
+  /** Get filtered logs */
+  getFilteredLogs: () => LogEntry[];
+  /** Export logs as JSON string */
+  exportLogs: () => string;
+}
+
+export interface Logger {
+  debug: (message: string, data?: Record<string, unknown>) => void;
+  info: (message: string, data?: Record<string, unknown>) => void;
+  warn: (message: string, data?: Record<string, unknown>) => void;
+  error: (message: string, data?: Record<string, unknown>) => void;
+  success: (message: string, data?: Record<string, unknown>) => void;
+}
+
+/**
+ * Media-specific log helper methods
+ */
+export interface MediaLogger extends Logger {
+  /** Log source load event */
+  load: (src: string, type?: string) => void;
+  /** Log state change */
+  state: (state: string, details?: Record<string, unknown>) => void;
+  /** Log seek event */
+  seek: (from: number, to: number, duration: number) => void;
+  /** Log buffer ranges */
+  buffer: (buffered: TimeRanges, duration: number) => void;
+  /** Log generic event */
+  event: (name: string, data?: unknown) => void;
+}

package/src/stores/mediaCache.ts

@@ -3,6 +3,9 @@
 import { create } from 'zustand';
 import { persist, devtools } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
+import { createLogger } from '../lib/logger';
+
+const cacheDebug = createLogger('MediaCache');
 
 // Types
 interface BlobUrlEntry {
@@ -120,6 +123,7 @@ export const useMediaCacheStore = create<MediaCacheStore>()(
           const existing = get().blobUrls.get(key);
           if (existing) {
             // Increment ref count
+            cacheDebug.debug(`Blob URL reused: ${key}`, { refCount: existing.refCount + 1 });
             set(
               (state) => ({
                 blobUrls: new Map(state.blobUrls).set(key, {
@@ -136,6 +140,8 @@ export const useMediaCacheStore = create<MediaCacheStore>()(
           // Create new blob URL
           const blob = new Blob([content], { type: mimeType });
           const url = URL.createObjectURL(blob);
+          const sizeMB = (content.byteLength / 1024 / 1024).toFixed(2);
+          cacheDebug.debug(`Blob URL created: ${key}`, { mimeType, size: `${sizeMB}MB` });
           set(
             (state) => ({
               blobUrls: new Map(state.blobUrls).set(key, {
@@ -156,6 +162,7 @@ export const useMediaCacheStore = create<MediaCacheStore>()(
 
           if (entry.refCount <= 1) {
             // Last reference - revoke and remove
+            cacheDebug.debug(`Blob URL revoked: ${key}`);
             URL.revokeObjectURL(entry.url);
             set(
               (state) => {
@@ -168,6 +175,7 @@ export const useMediaCacheStore = create<MediaCacheStore>()(
             );
           } else {
             // Decrement ref count
+            cacheDebug.debug(`Blob URL released: ${key}`, { refCount: entry.refCount - 1 });
             set(
               (state) => ({
                 blobUrls: new Map(state.blobUrls).set(key, {
@@ -315,6 +323,8 @@ export const useMediaCacheStore = create<MediaCacheStore>()(
         // ========== Global ==========
 
         clearCache: () => {
+          const stats = get().getCacheStats();
+          cacheDebug.info('Clearing cache', stats);
           // Revoke all blob URLs before clearing
           get().blobUrls.forEach(({ url }) => URL.revokeObjectURL(url));
           set(initialState, false, 'clearCache');

package/src/tools/AudioPlayer/context/AudioProvider.tsx

@@ -20,6 +20,7 @@ import { useWavesurfer } from '@wavesurfer/react';
 import type { AudioContextState, AudioSource, WaveformOptions } from '../types';
 import { useSharedWebAudio, useAudioAnalysis } from '../hooks';
 import { useAudioCache } from '../../../stores/mediaCache';
+import { audioDebug } from '../utils/debug';
 
 // =============================================================================
 // CONTEXT
@@ -85,6 +86,54 @@ export function AudioProvider({
   // Use official wavesurfer-react hook
   const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer(options);
 
+  // Debug: Log when WaveSurfer is ready
+  useEffect(() => {
+    if (isReady && wavesurfer) {
+      const duration = wavesurfer.getDuration();
+      audioDebug.load(source.uri || 'unknown');
+      audioDebug.state('READY', { duration, isReady });
+
+      // Log buffer info
+      const audio = wavesurfer.getMediaElement();
+      if (audio) {
+        audioDebug.buffer(audio.buffered, duration);
+      }
+    }
+  }, [isReady, wavesurfer, source.uri]);
+
+  // Debug: Log WaveSurfer events
+  useEffect(() => {
+    if (!wavesurfer) return;
+
+    const handleSeeking = () => {
+      const audio = wavesurfer.getMediaElement();
+      if (audio) {
+        audioDebug.seek(currentTime, audio.currentTime, wavesurfer.getDuration());
+        audioDebug.buffer(audio.buffered, wavesurfer.getDuration());
+      }
+    };
+
+    const handleError = (err: Error) => {
+      audioDebug.error('WaveSurfer error', { error: err });
+    };
+
+    const handleLoading = (percent: number) => {
+      if (percent === 100 || percent % 25 === 0) {
+        audioDebug.debug(`Loading: ${percent}%`);
+      }
+    };
+
+    wavesurfer.on('seeking', handleSeeking);
+    wavesurfer.on('error', handleError);
+    wavesurfer.on('loading', handleLoading);
+
+    return () => {
+      wavesurfer.un('seeking', handleSeeking);
+      wavesurfer.un('error', handleError);
+      wavesurfer.un('loading', handleLoading);
+    };
+  }, [wavesurfer, currentTime]);
+
   // Restore cached playback position when ready
   useEffect(() => {
     if (isReady && wavesurfer && source.uri) {
@@ -172,10 +221,28 @@ export function AudioProvider({
     (time: number) => {
       if (wavesurfer) {
         const clampedTime = Math.max(0, Math.min(time, duration));
+        audioDebug.seek(currentTime, clampedTime, duration);
+
+        // Check buffer before seeking
+        const audio = wavesurfer.getMediaElement();
+        if (audio) {
+          let isInBuffer = false;
+          for (let i = 0; i < audio.buffered.length; i++) {
+            if (clampedTime >= audio.buffered.start(i) && clampedTime <= audio.buffered.end(i)) {
+              isInBuffer = true;
+              break;
+            }
+          }
+          if (!isInBuffer) {
+            audioDebug.warn(`Seeking to UNBUFFERED position: ${clampedTime.toFixed(2)}s`);
+            audioDebug.buffer(audio.buffered, duration);
+          }
+        }
+
         wavesurfer.setTime(clampedTime);
       }
     },
-    [wavesurfer, duration]
+    [wavesurfer, duration, currentTime]
   );
 
   const seekTo = useCallback(

package/src/tools/AudioPlayer/progressive/useAudioElement.ts

@@ -9,6 +9,7 @@
 
 import { useRef, useState, useCallback, useEffect } from 'react';
 import type { AudioState, AudioControls } from './types';
+import { audioDebug } from '../utils/debug';
 
 // =============================================================================
 // TYPES
@@ -102,9 +103,27 @@ export function useAudioElement(options: UseAudioElementOptions): UseAudioElemen
     if (!audio || !isFinite(time)) return;
 
     const clampedTime = Math.max(0, Math.min(time, duration));
+    audioDebug.seek(currentTime, clampedTime, duration);
+
+    // Check if target position is in buffer
+    let isInBuffer = false;
+    if (audio.buffered.length > 0) {
+      for (let i = 0; i < audio.buffered.length; i++) {
+        if (clampedTime >= audio.buffered.start(i) && clampedTime <= audio.buffered.end(i)) {
+          isInBuffer = true;
+          break;
+        }
+      }
+    }
+
+    if (!isInBuffer) {
+      audioDebug.warn(`Seeking to UNBUFFERED position: ${clampedTime.toFixed(2)}s`);
+      audioDebug.buffer(audio.buffered, duration);
+    }
+
     audio.currentTime = clampedTime;
     setCurrentTime(clampedTime);
-  }, [duration]);
+  }, [duration, currentTime]);
 
   const seekTo = useCallback((progress: number) => {
     const clampedProgress = Math.max(0, Math.min(progress, 1));
@@ -162,18 +181,40 @@ export function useAudioElement(options: UseAudioElementOptions): UseAudioElemen
     audio.loop = loop;
 
     const handleLoadedMetadata = () => {
+      audioDebug.state('loadedmetadata', { duration: audio.duration });
       setDuration(audio.duration);
       setIsReady(true);
       onDurationChange?.(audio.duration);
     };
 
     const handleCanPlay = () => {
+      audioDebug.state('canplay', { duration: audio.duration, buffered: audio.buffered.length });
+      audioDebug.buffer(audio.buffered, audio.duration);
       setIsReady(true);
       if (autoPlay) {
         audio.play().catch(() => {});
       }
     };
 
+    const handleSeeking = () => {
+      audioDebug.event('seeking', { currentTime: audio.currentTime });
+    };
+
+    const handleSeeked = () => {
+      audioDebug.event('seeked', { currentTime: audio.currentTime });
+      audioDebug.buffer(audio.buffered, audio.duration);
+    };
+
+    const handleWaiting = () => {
+      audioDebug.warn('WAITING - buffering...');
+      audioDebug.buffer(audio.buffered, audio.duration);
+    };
+
+    const handleStalled = () => {
+      audioDebug.warn('STALLED - network issue');
+      audioDebug.buffer(audio.buffered, audio.duration);
+    };
+
     const handlePlay = () => {
       setIsPlaying(true);
       onPlay?.();
@@ -204,6 +245,7 @@ export function useAudioElement(options: UseAudioElementOptions): UseAudioElemen
       const err = new Error(
         audio.error?.message || 'Audio loading failed'
       );
+      audioDebug.error('Audio error', { code: audio.error?.code, message: audio.error?.message });
       setError(err);
       setIsReady(false);
       onError?.(err);
@@ -224,6 +266,10 @@ export function useAudioElement(options: UseAudioElementOptions): UseAudioElemen
     audio.addEventListener('progress', handleProgress);
     audio.addEventListener('error', handleError);
     audio.addEventListener('volumechange', handleVolumeChange);
+    audio.addEventListener('seeking', handleSeeking);
+    audio.addEventListener('seeked', handleSeeked);
+    audio.addEventListener('waiting', handleWaiting);
+    audio.addEventListener('stalled', handleStalled);
 
     return () => {
       audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
@@ -235,6 +281,10 @@ export function useAudioElement(options: UseAudioElementOptions): UseAudioElemen
       audio.removeEventListener('progress', handleProgress);
       audio.removeEventListener('error', handleError);
       audio.removeEventListener('volumechange', handleVolumeChange);
+      audio.removeEventListener('seeking', handleSeeking);
+      audio.removeEventListener('seeked', handleSeeked);
+      audio.removeEventListener('waiting', handleWaiting);
+      audio.removeEventListener('stalled', handleStalled);
     };
   }, [
     autoPlay,
@@ -254,6 +304,7 @@ export function useAudioElement(options: UseAudioElementOptions): UseAudioElemen
     const audio = audioRef.current;
     if (!audio) return;
 
+    audioDebug.load(src);
     setIsReady(false);
     setError(null);
     setCurrentTime(0);

package/src/tools/AudioPlayer/utils/debug.ts

@@ -0,0 +1,12 @@
+/**
+ * AudioPlayer Debug Logger
+ *
+ * Uses universal logger with media-specific helpers.
+ * Logs go to both console (dev) and zustand store (for Console panel).
+ */
+
+import { createMediaLogger } from '../../../lib/logger';
+
+export const audioDebug = createMediaLogger('AudioPlayer');
+
+export default audioDebug;

package/src/tools/AudioPlayer/utils/index.ts

@@ -3,3 +3,4 @@
  */
 
 export { formatTime } from './formatTime';
+export { audioDebug } from './debug';

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';
@@ -156,6 +156,7 @@ export function ImageViewer({ file, content, src: directSrc, inDialog = false }:
         minScale={0.1}
         maxScale={8}
         centerOnInit
+        centerZoomedOut
         onTransformed={(ref, state) => {
           setScale(state.scale);
           controlsRef.current = ref;
@@ -224,16 +225,13 @@ export function ImageViewer({ file, content, src: directSrc, inDialog = false }:
       {/* 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} src={directSrc} 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

@@ -6,7 +6,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { useImageCache, generateContentKey } from '../../../stores/mediaCache';
-import { createLQIP, MAX_IMAGE_SIZE, WARNING_IMAGE_SIZE, PROGRESSIVE_LOADING_THRESHOLD } from '../utils';
+import { createLQIP, MAX_IMAGE_SIZE, WARNING_IMAGE_SIZE, PROGRESSIVE_LOADING_THRESHOLD, imageDebug } from '../utils';
 
 // =============================================================================
 // TYPES
@@ -72,6 +72,7 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
 
     // Direct URL mode - use as-is without blob conversion
     if (directSrc) {
+      imageDebug.load(directSrc, 'url');
       setSrc(directSrc);
       setIsFullyLoaded(true);
       return;
@@ -85,7 +86,9 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
     // Size validation - reject oversized images
     if (size > MAX_IMAGE_SIZE) {
       const sizeMB = (size / 1024 / 1024).toFixed(1);
-      setError(`Image too large: ${sizeMB}MB (maximum: 50MB)`);
+      const errorMsg = `Image too large: ${sizeMB}MB (maximum: 50MB)`;
+      imageDebug.error(errorMsg, { size, sizeMB, maxSize: MAX_IMAGE_SIZE });
+      setError(errorMsg);
       setSrc(null);
       return;
     }
@@ -93,13 +96,14 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
     // Warn about large images
     if (size > WARNING_IMAGE_SIZE) {
       const sizeMB = (size / 1024 / 1024).toFixed(1);
-      console.warn(`[ImageViewer] Large image: ${sizeMB}MB - may impact performance`);
+      imageDebug.warn(`Large image: ${sizeMB}MB - may impact performance`);
     }
 
     // Handle string content (data URLs or binary strings)
     if (typeof content === 'string') {
       // Pass through data URLs directly
       if (content.startsWith('data:')) {
+        imageDebug.load(content.slice(0, 50) + '...', 'data-url');
         setSrc(content);
         return;
       }
@@ -110,6 +114,8 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
       const contentKey = generateContentKey(buffer);
       contentKeyRef.current = contentKey;
       const url = getOrCreateBlobUrl(contentKey, buffer, mimeType || 'image/png');
+      imageDebug.load(url, 'blob');
+      imageDebug.state('loaded', { size, mimeType, contentKey });
       setSrc(url);
       return;
     }
@@ -118,6 +124,8 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
     const contentKey = generateContentKey(content);
     contentKeyRef.current = contentKey;
     const url = getOrCreateBlobUrl(contentKey, content, mimeType || 'image/png');
+    imageDebug.load(url, 'blob');
+    imageDebug.state('loaded', { size, mimeType, contentKey });
     setSrc(url);
 
     return () => {
@@ -137,10 +145,12 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
     }
 
     setIsFullyLoaded(false);
+    imageDebug.state('progressive loading', { size });
 
     // Create low-quality placeholder
     createLQIP(src).then((placeholder) => {
       if (placeholder) {
+        imageDebug.debug('LQIP created');
         setLqip(placeholder);
       }
     });
@@ -148,10 +158,14 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
     // Pre-load full image
     const img = new Image();
     img.onload = () => {
+      imageDebug.state('fully loaded');
       setIsFullyLoaded(true);
     };
+    img.onerror = () => {
+      imageDebug.error('Failed to load full image');
+    };
     img.src = src;
-  }, [src, useProgressiveLoading]);
+  }, [src, useProgressiveLoading, size]);
 
   return {
     src,

package/src/tools/ImageViewer/utils/debug.ts

@@ -0,0 +1,12 @@
+/**
+ * ImageViewer Debug Logger
+ *
+ * Uses universal logger with media-specific helpers.
+ * Logs go to both console (dev) and zustand store (for Console panel).
+ */
+
+import { createMediaLogger } from '../../../lib/logger';
+
+export const imageDebug = createMediaLogger('ImageViewer');
+
+export default imageDebug;

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

@@ -14,3 +14,4 @@ export {
   ZOOM_PRESETS,
   DEFAULT_TRANSFORM,
 } from './constants';
+export { imageDebug } from './debug';

package/src/tools/VideoPlayer/providers/NativeProvider.tsx

@@ -11,6 +11,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { Preloader, AspectRatio } from '@djangocfg/ui-core';
 
 import type { NativeProviderProps, VideoPlayerRef } from '../types';
+import { videoDebug } from '../utils/debug';
 
 /**
  * Get video URL from source
@@ -57,6 +58,11 @@ export const NativeProvider = forwardRef<VideoPlayerRef, NativeProviderProps>(
 
     const videoUrl = getVideoUrl(source);
 
+    // Debug: Log video source
+    useEffect(() => {
+      videoDebug.load(videoUrl, source.type);
+    }, [videoUrl, source.type]);
+
     // Expose video element methods via ref
     useImperativeHandle(
       ref,
@@ -122,6 +128,56 @@ export const NativeProvider = forwardRef<VideoPlayerRef, NativeProviderProps>(
       };
     }, [showPreloader, preloaderTimeout]);
 
+    // Debug: Log video events
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+
+      const handleLoadedMetadata = () => {
+        videoDebug.state('loadedmetadata', { duration: video.duration });
+      };
+
+      const handleCanPlayDebug = () => {
+        videoDebug.state('canplay', { duration: video.duration, buffered: video.buffered.length });
+        videoDebug.buffer(video.buffered, video.duration);
+      };
+
+      const handleSeeking = () => {
+        videoDebug.event('seeking', { currentTime: video.currentTime });
+      };
+
+      const handleSeeked = () => {
+        videoDebug.event('seeked', { currentTime: video.currentTime });
+        videoDebug.buffer(video.buffered, video.duration);
+      };
+
+      const handleWaiting = () => {
+        videoDebug.warn('WAITING - buffering...');
+        videoDebug.buffer(video.buffered, video.duration);
+      };
+
+      const handleStalled = () => {
+        videoDebug.warn('STALLED - network issue');
+        videoDebug.buffer(video.buffered, video.duration);
+      };
+
+      video.addEventListener('loadedmetadata', handleLoadedMetadata);
+      video.addEventListener('canplay', handleCanPlayDebug);
+      video.addEventListener('seeking', handleSeeking);
+      video.addEventListener('seeked', handleSeeked);
+      video.addEventListener('waiting', handleWaiting);
+      video.addEventListener('stalled', handleStalled);
+
+      return () => {
+        video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+        video.removeEventListener('canplay', handleCanPlayDebug);
+        video.removeEventListener('seeking', handleSeeking);
+        video.removeEventListener('seeked', handleSeeked);
+        video.removeEventListener('waiting', handleWaiting);
+        video.removeEventListener('stalled', handleStalled);
+      };
+    }, []);
+
     const handleContextMenu = (e: React.MouseEvent) => {
       if (disableContextMenu) {
         e.preventDefault();
@@ -129,8 +185,11 @@ export const NativeProvider = forwardRef<VideoPlayerRef, NativeProviderProps>(
     };
 
     const handleError = (e: React.SyntheticEvent<HTMLVideoElement>) => {
+      const video = e.currentTarget;
+      const errorMsg = video.error?.message || 'Video playback error';
+      videoDebug.error('Video error', { code: video.error?.code, message: errorMsg });
       setIsLoading(false);
-      onError?.(e.currentTarget.error?.message || 'Video playback error');
+      onError?.(errorMsg);
     };
 
     const handleTimeUpdate = () => {

package/src/tools/VideoPlayer/providers/StreamProvider.tsx

@@ -17,6 +17,7 @@ import { Preloader, AspectRatio } from '@djangocfg/ui-core';
 import { useVideoCache, generateContentKey } from '../../../stores/mediaCache';
 
 import type { StreamProviderProps, VideoPlayerRef, StreamSource, BlobSource, DataUrlSource, ErrorFallbackProps } from '../types';
+import { videoDebug } from '../utils/debug';
 
 /** Default error fallback UI */
 function DefaultErrorFallback({ error }: ErrorFallbackProps) {
@@ -162,6 +163,7 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
             streamSource.path,
             streamSource.getStreamUrl
           );
+          videoDebug.load(url, 'stream');
           setVideoUrl(url);
           break;
         }
@@ -177,17 +179,20 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
             blobSource.data,
             blobSource.mimeType || 'video/mp4'
           );
+          videoDebug.load(url, 'blob');
           setVideoUrl(url);
           break;
         }
 
         case 'data-url': {
           const dataUrlSource = source as DataUrlSource;
+          videoDebug.load(dataUrlSource.data.slice(0, 50) + '...', 'data-url');
           setVideoUrl(dataUrlSource.data);
           break;
         }
 
         default:
+          videoDebug.error('Invalid video source type', { type: (source as { type: string }).type });
           setVideoUrl(null);
           setHasError(true);
           setErrorMessage('Invalid video source');
@@ -217,17 +222,23 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
 
     // Restore cached playback position when video is ready
     const handleCanPlay = useCallback(() => {
+      const video = videoRef.current;
+      if (video) {
+        videoDebug.state('canplay', { duration: video.duration, buffered: video.buffered.length });
+        videoDebug.buffer(video.buffered, video.duration);
+      }
       setIsLoading(false);
 
       // Restore position from cache
       const sourceKey = getSourceKey();
-      if (sourceKey && videoRef.current) {
+      if (sourceKey && video) {
         const cachedPosition = getVideoPosition(sourceKey);
         if (cachedPosition && cachedPosition > 0) {
-          const duration = videoRef.current.duration;
+          const duration = video.duration;
           // Only restore if position is valid (not at the end)
           if (cachedPosition < duration - 1) {
-            videoRef.current.currentTime = cachedPosition;
+            videoDebug.debug(`Restoring position: ${cachedPosition}s`);
+            video.currentTime = cachedPosition;
           }
         }
       }
@@ -303,12 +314,59 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
     };
 
     const handleError = () => {
+      const video = videoRef.current;
+      if (video) {
+        videoDebug.error('Video error', { code: video.error?.code, message: video.error?.message });
+      }
       setIsLoading(false);
       setHasError(true);
       setErrorMessage('Failed to load video');
       onError?.('Video playback error');
     };
 
+    // Debug: Log video events
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+
+      const handleLoadedMetadata = () => {
+        videoDebug.state('loadedmetadata', { duration: video.duration });
+      };
+
+      const handleSeeking = () => {
+        videoDebug.event('seeking', { currentTime: video.currentTime });
+      };
+
+      const handleSeeked = () => {
+        videoDebug.event('seeked', { currentTime: video.currentTime });
+        videoDebug.buffer(video.buffered, video.duration);
+      };
+
+      const handleWaiting = () => {
+        videoDebug.warn('WAITING - buffering...');
+        videoDebug.buffer(video.buffered, video.duration);
+      };
+
+      const handleStalled = () => {
+        videoDebug.warn('STALLED - network issue');
+        videoDebug.buffer(video.buffered, video.duration);
+      };
+
+      video.addEventListener('loadedmetadata', handleLoadedMetadata);
+      video.addEventListener('seeking', handleSeeking);
+      video.addEventListener('seeked', handleSeeked);
+      video.addEventListener('waiting', handleWaiting);
+      video.addEventListener('stalled', handleStalled);
+
+      return () => {
+        video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+        video.removeEventListener('seeking', handleSeeking);
+        video.removeEventListener('seeked', handleSeeked);
+        video.removeEventListener('waiting', handleWaiting);
+        video.removeEventListener('stalled', handleStalled);
+      };
+    }, [videoUrl]);
+
     // Determine if we should use AspectRatio wrapper or fill mode
     const isFillMode = aspectRatio === 'fill';
     const computedAspectRatio = aspectRatio === 'auto' || aspectRatio === 'fill' ? undefined : aspectRatio;

package/src/tools/VideoPlayer/providers/VidstackProvider.tsx

@@ -19,6 +19,7 @@ import { useVideoCache } from '../../../stores/mediaCache';
 
 import type { MediaPlayerInstance, PlayerSrc } from '@vidstack/react';
 import type { VidstackProviderProps, VideoPlayerRef, ErrorFallbackProps } from '../types';
+import { videoDebug } from '../utils/debug';
 
 /**
  * Convert source to Vidstack-compatible format
@@ -136,6 +137,12 @@ export const VidstackProvider = forwardRef<VideoPlayerRef, VidstackProviderProps
     // Get Vidstack-compatible source URL
     const vidstackSrc = useMemo(() => getVidstackSrc(source), [source]);
 
+    // Debug: Log video source
+    useEffect(() => {
+      const srcString = typeof vidstackSrc === 'string' ? vidstackSrc : (vidstackSrc as { src: string }).src;
+      videoDebug.load(srcString, source.type);
+    }, [vidstackSrc, source.type]);
+
     // Retry function
     const retry = useCallback(() => {
       setHasError(false);
@@ -204,6 +211,7 @@ export const VidstackProvider = forwardRef<VideoPlayerRef, VidstackProviderProps
     const handleError = (detail: unknown) => {
       const error = detail as { message?: string };
       const msg = error?.message || 'Video playback error';
+      videoDebug.error('Vidstack error', { message: msg });
       setHasError(true);
       setErrorMessage(msg);
       onError?.(msg);
@@ -212,16 +220,26 @@ export const VidstackProvider = forwardRef<VideoPlayerRef, VidstackProviderProps
     const handleLoadStart = () => onLoadStart?.();
 
     const handleCanPlay = useCallback(() => {
+      const player = playerRef.current;
+      if (player) {
+        videoDebug.state('canplay', { duration: player.duration });
+        // Log buffer state if media element is available
+        const mediaEl = (player.provider as { media?: HTMLVideoElement } | null)?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      }
       setHasError(false);
 
       // Restore position from cache (only once per source)
-      if (sourceKey && playerRef.current && !hasRestoredPositionRef.current) {
+      if (sourceKey && player && !hasRestoredPositionRef.current) {
         const cachedPosition = getVideoPosition(sourceKey);
         if (cachedPosition && cachedPosition > 0) {
-          const duration = playerRef.current.duration;
+          const duration = player.duration;
           // Only restore if position is valid (not at the end)
           if (cachedPosition < duration - 1) {
-            playerRef.current.currentTime = cachedPosition;
+            videoDebug.debug(`Restoring position: ${cachedPosition}s`);
+            player.currentTime = cachedPosition;
           }
         }
         hasRestoredPositionRef.current = true;
@@ -252,6 +270,52 @@ export const VidstackProvider = forwardRef<VideoPlayerRef, VidstackProviderProps
       lastSavedTimeRef.current = 0;
     }, [sourceKey]);
 
+    // Debug: Log player events
+    useEffect(() => {
+      const player = playerRef.current;
+      if (!player) return;
+
+      const handleSeeking = () => {
+        videoDebug.event('seeking', { currentTime: player.currentTime });
+      };
+
+      const handleSeeked = () => {
+        videoDebug.event('seeked', { currentTime: player.currentTime });
+        const mediaEl = (player.provider as { media?: HTMLVideoElement } | null)?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      };
+
+      const handleWaiting = () => {
+        videoDebug.warn('WAITING - buffering...');
+        const mediaEl = (player.provider as { media?: HTMLVideoElement } | null)?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      };
+
+      const handleStalled = () => {
+        videoDebug.warn('STALLED - network issue');
+        const mediaEl = (player.provider as { media?: HTMLVideoElement } | null)?.media;
+        if (mediaEl?.buffered) {
+          videoDebug.buffer(mediaEl.buffered, player.duration);
+        }
+      };
+
+      player.addEventListener('seeking', handleSeeking);
+      player.addEventListener('seeked', handleSeeked);
+      player.addEventListener('waiting', handleWaiting);
+      player.addEventListener('stalled', handleStalled);
+
+      return () => {
+        player.removeEventListener('seeking', handleSeeking);
+        player.removeEventListener('seeked', handleSeeked);
+        player.removeEventListener('waiting', handleWaiting);
+        player.removeEventListener('stalled', handleStalled);
+      };
+    }, [vidstackSrc]);
+
     // Determine layout mode
     const isFillMode = aspectRatio === 'fill';
     const computedAspectRatio = aspectRatio === 'auto' || aspectRatio === 'fill' ? undefined : aspectRatio;

package/src/tools/VideoPlayer/utils/debug.ts

@@ -0,0 +1,12 @@
+/**
+ * VideoPlayer Debug Logger
+ *
+ * Uses universal logger with media-specific helpers.
+ * Logs go to both console (dev) and zustand store (for Console panel).
+ */
+
+import { createMediaLogger } from '../../../lib/logger';
+
+export const videoDebug = createMediaLogger('VideoPlayer');
+
+export default videoDebug;

package/src/tools/VideoPlayer/utils/index.ts

@@ -9,3 +9,4 @@ export {
 } from './resolvers';
 
 export { resolveFileSource } from './fileSource';
+export { videoDebug } from './debug';