@djangocfg/ui-nextjs 2.1.90 → 2.1.91

package/src/hooks/useSessionStorage.ts

@@ -1,290 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-/**
- * Storage wrapper format with metadata
- * Used when TTL is specified
- */
-interface StorageWrapper<T> {
-  _meta: {
-    createdAt: number;
-    ttl: number;
-  };
-  _value: T;
-}
-
-/**
- * Options for useSessionStorage hook
- */
-export interface UseSessionStorageOptions {
-  /**
-   * Time-to-live in milliseconds.
-   * After this time, value is considered expired and initialValue is returned.
-   * Data is automatically cleaned up on next read.
-   * @example 24 * 60 * 60 * 1000 // 24 hours
-   */
-  ttl?: number;
-}
-
-/**
- * Check if data is in new wrapped format with _meta
- */
-function isWrappedFormat<T>(data: unknown): data is StorageWrapper<T> {
-  return (
-    data !== null &&
-    typeof data === 'object' &&
-    '_meta' in data &&
-    '_value' in data &&
-    typeof (data as StorageWrapper<T>)._meta === 'object' &&
-    typeof (data as StorageWrapper<T>)._meta.createdAt === 'number'
-  );
-}
-
-/**
- * Check if wrapped data is expired
- */
-function isExpired<T>(wrapped: StorageWrapper<T>): boolean {
-  if (!wrapped._meta.ttl) return false;
-  const age = Date.now() - wrapped._meta.createdAt;
-  return age > wrapped._meta.ttl;
-}
-
-/**
- * Simple sessionStorage hook with better error handling and optional TTL support
- *
- * @param key - Storage key
- * @param initialValue - Default value if key doesn't exist
- * @param options - Optional configuration (ttl for auto-expiration)
- * @returns [value, setValue, removeValue] - Current value, setter function, and remove function
- *
- * @example
- * // Without TTL (backwards compatible)
- * const [value, setValue] = useSessionStorage('key', 'default');
- *
- * @example
- * // With TTL (1 hour)
- * const [value, setValue] = useSessionStorage('key', 'default', {
- *   ttl: 60 * 60 * 1000
- * });
- */
-export function useSessionStorage<T>(
-  key: string,
-  initialValue: T,
-  options?: UseSessionStorageOptions
-) {
-  const ttl = options?.ttl;
-
-  // Get initial value from sessionStorage or use provided initialValue
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === 'undefined') {
-      return initialValue;
-    }
-
-    try {
-      const item = window.sessionStorage.getItem(key);
-      if (item === null) return initialValue;
-
-      try {
-        const parsed = JSON.parse(item);
-
-        // Check if new format with _meta
-        if (isWrappedFormat<T>(parsed)) {
-          // Check TTL expiration
-          if (isExpired(parsed)) {
-            // Expired! Clean up and use initial value
-            window.sessionStorage.removeItem(key);
-            return initialValue;
-          }
-          // Not expired, extract value
-          return parsed._value;
-        }
-
-        // Old format (backwards compatible)
-        return parsed as T;
-      } catch {
-        // If JSON.parse fails, return as string
-        return item as T;
-      }
-    } catch (error) {
-      console.error(`Error reading sessionStorage key "${key}":`, error);
-      return initialValue;
-    }
-  });
-
-  // Check data size and limit
-  const checkDataSize = (data: any): boolean => {
-    try {
-      const jsonString = JSON.stringify(data);
-      const sizeInBytes = new Blob([jsonString]).size;
-      const sizeInKB = sizeInBytes / 1024;
-
-      // Limit to 1MB per item
-      if (sizeInKB > 1024) {
-        console.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
-        return false;
-      }
-
-      return true;
-    } catch (error) {
-      console.error(`Error checking data size for key "${key}":`, error);
-      return false;
-    }
-  };
-
-  // Clear old data when sessionStorage is full
-  const clearOldData = () => {
-    try {
-      const keys = Object.keys(sessionStorage).filter(k => k && typeof k === 'string');
-      // Remove oldest items if we have more than 50 items
-      if (keys.length > 50) {
-        const itemsToRemove = Math.ceil(keys.length * 0.2);
-        for (let i = 0; i < itemsToRemove; i++) {
-          try {
-            const k = keys[i];
-            if (k) {
-              sessionStorage.removeItem(k);
-            }
-          } catch {
-            // Ignore errors when removing items
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Error clearing old sessionStorage data:', error);
-    }
-  };
-
-  // Force clear all data if quota is exceeded
-  const forceClearAll = () => {
-    try {
-      const keys = Object.keys(sessionStorage);
-      for (const k of keys) {
-        try {
-          sessionStorage.removeItem(k);
-        } catch {
-          // Ignore errors when removing items
-        }
-      }
-    } catch (error) {
-      console.error('Error force clearing sessionStorage:', error);
-    }
-  };
-
-  // Prepare data for storage (with or without TTL wrapper)
-  const prepareForStorage = (value: T): string => {
-    if (ttl) {
-      // Wrap with _meta for TTL support
-      const wrapped: StorageWrapper<T> = {
-        _meta: {
-          createdAt: Date.now(),
-          ttl,
-        },
-        _value: value,
-      };
-      return JSON.stringify(wrapped);
-    }
-    // Old format (no wrapper) - for strings, store directly
-    if (typeof value === 'string') {
-      return value;
-    }
-    return JSON.stringify(value);
-  };
-
-  // Update sessionStorage when value changes
-  const setValue = (value: T | ((val: T) => T)) => {
-    try {
-      const valueToStore = value instanceof Function ? value(storedValue) : value;
-
-      // Check data size before attempting to save
-      if (!checkDataSize(valueToStore)) {
-        console.warn(`Data size too large for key "${key}", removing key`);
-        // Remove the key if data is too large
-        try {
-          window.sessionStorage.removeItem(key);
-        } catch {
-          // Ignore errors when removing
-        }
-        // Still update the state
-        setStoredValue(valueToStore);
-        return;
-      }
-
-      setStoredValue(valueToStore);
-
-      if (typeof window !== 'undefined') {
-        const dataToStore = prepareForStorage(valueToStore);
-
-        // Try to set the value
-        try {
-          window.sessionStorage.setItem(key, dataToStore);
-        } catch (storageError: any) {
-          // If quota exceeded, clear old data and try again
-          if (storageError.name === 'QuotaExceededError' ||
-              storageError.code === 22 ||
-              storageError.message?.includes('quota')) {
-            console.warn('sessionStorage quota exceeded, clearing old data...');
-            clearOldData();
-
-            // Try again after clearing
-            try {
-              window.sessionStorage.setItem(key, dataToStore);
-            } catch (retryError) {
-              console.error(`Failed to set sessionStorage key "${key}" after clearing old data:`, retryError);
-              // If still fails, force clear all and try one more time
-              try {
-                forceClearAll();
-                window.sessionStorage.setItem(key, dataToStore);
-              } catch (finalError) {
-                console.error(`Failed to set sessionStorage key "${key}" after force clearing:`, finalError);
-                // If still fails, just update the state without sessionStorage
-                setStoredValue(valueToStore);
-              }
-            }
-          } else {
-            throw storageError;
-          }
-        }
-      }
-    } catch (error) {
-      console.error(`Error setting sessionStorage key "${key}":`, error);
-      // Still update the state even if sessionStorage fails
-      const valueToStore = value instanceof Function ? value(storedValue) : value;
-      setStoredValue(valueToStore);
-    }
-  };
-
-  // Remove value from sessionStorage
-  const removeValue = () => {
-    try {
-      setStoredValue(initialValue);
-      if (typeof window !== 'undefined') {
-        try {
-          window.sessionStorage.removeItem(key);
-        } catch (removeError: any) {
-          // If removal fails due to quota, try to clear some data first
-          if (removeError.name === 'QuotaExceededError' ||
-              removeError.code === 22 ||
-              removeError.message?.includes('quota')) {
-            console.warn('sessionStorage quota exceeded during removal, clearing old data...');
-            clearOldData();
-
-            try {
-              window.sessionStorage.removeItem(key);
-            } catch (retryError) {
-              console.error(`Failed to remove sessionStorage key "${key}" after clearing:`, retryError);
-              // If still fails, force clear all
-              forceClearAll();
-            }
-          } else {
-            throw removeError;
-          }
-        }
-      }
-    } catch (error) {
-      console.error(`Error removing sessionStorage key "${key}":`, error);
-    }
-  };
-
-  return [storedValue, setValue, removeValue] as const;
-}

package/src/lib/index.ts

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

package/src/lib/logger/index.ts

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,122 +0,0 @@
-/**
- * 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

@@ -1,175 +0,0 @@
-/**
- * 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

@@ -1,82 +0,0 @@
-/**
- * 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/index.ts

@@ -1,8 +0,0 @@
-export {
-  useMediaCacheStore,
-  useImageCache,
-  useAudioCache,
-  useVideoCache,
-  useBlobUrlCleanup,
-  generateContentKey,
-} from './mediaCache';