@djangocfg/ui-nextjs 2.1.90 → 2.1.92

package/src/tools/PrettyCode/PrettyCode.client.tsx

@@ -1,208 +0,0 @@
-'use client';
-
-import { Highlight, Language, themes } from 'prism-react-renderer';
-import React from 'react';
-
-import { CopyButton } from '@djangocfg/ui-core/components';
-
-import { useResolvedTheme } from '../../hooks/useResolvedTheme';
-
-interface PrettyCodeProps {
-  data: string | object;
-  language: Language;
-  className?: string;
-  mode?: 'dark' | 'light';
-  inline?: boolean;
-  customBg?: string; // Custom background class
-  isCompact?: boolean; // Compact mode for smaller font sizes
-}
-
-const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false }: PrettyCodeProps) => {
-  const detectedTheme = useResolvedTheme();
-
-  // Font size based on compact mode
-  const fontSize = isCompact ? '0.75rem' : '0.875rem'; // 12px vs 14px
-
-  // Use provided mode or fall back to detected theme
-  const currentTheme = mode || detectedTheme;
-  const isDarkMode = currentTheme === 'dark';
-
-  // Select the Prism theme based on the current theme
-  const prismTheme = isDarkMode ? themes.vsDark : themes.vsLight;
-
-  // Convert form object to JSON string with proper formatting
-  const contentJson = typeof data === 'string' ? data : JSON.stringify(data || {}, null, 2);
-  
-  // Handle empty content
-  if (!contentJson || contentJson.trim() === '') {
-    const bgClass = customBg || 'bg-muted dark:bg-zinc-900';
-    return (
-      <div className={`relative h-full ${bgClass} rounded-sm border border-border dark:border-zinc-700 ${className || ''}`}>
-        <div className="h-full overflow-auto p-4">
-          <p className="text-muted-foreground text-sm italic">No content available</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Get display name for language badge
-  const getLanguageDisplayName = (lang: string): string => {
-    switch (lang.toLowerCase()) {
-      case 'bash':
-      case 'shell':
-        return 'Bash';
-      case 'python':
-      case 'py':
-        return 'Python';
-      case 'javascript':
-      case 'js':
-        return 'JavaScript';
-      case 'typescript':
-      case 'ts':
-        return 'TypeScript';
-      case 'json':
-        return 'JSON';
-      case 'yaml':
-      case 'yml':
-        return 'YAML';
-      case 'html':
-        return 'HTML';
-      case 'css':
-        return 'CSS';
-      case 'sql':
-        return 'SQL';
-      case 'xml':
-        return 'XML';
-      case 'markdown':
-      case 'md':
-        return 'Markdown';
-      case 'plaintext':
-      case 'text':
-        return 'Text';
-      case 'mermaid':
-        return 'Mermaid';
-      default:
-        return lang.charAt(0).toUpperCase() + lang.slice(1);
-    }
-  };
-
-  // Normalize language for Prism - use only basic supported languages
-  const normalizedLanguage = (() => {
-    const lang = language.toLowerCase();
-    
-    // Try basic languages that are definitely supported
-    switch (lang) {
-      case 'javascript':
-      case 'js':
-        return 'javascript';
-      case 'typescript':
-      case 'ts':
-        return 'typescript'; // Try TypeScript first
-      case 'python':
-      case 'py':
-        return 'python';
-      case 'json':
-        return 'json';
-      case 'css':
-        return 'css';
-      case 'html':
-        return 'markup';
-      case 'xml':
-        return 'markup';
-      case 'bash':
-      case 'shell':
-        return 'bash';
-      case 'sql':
-        return 'sql';
-      case 'yaml':
-      case 'yml':
-        return 'yaml';
-      case 'markdown':
-      case 'md':
-        return 'markdown';
-      case 'mermaid':
-        return 'text'; // Mermaid is handled separately in MarkdownMessage
-      default:
-        // For unknown languages, try to use the original name first
-        // If it doesn't work, Prism will fallback to plain text
-        return lang || 'text';
-    }
-  })();
-
-  const displayLanguage = getLanguageDisplayName(language);
-
-  if (inline) {
-    const inlineBgClass = customBg || 'bg-muted dark:bg-[#1e1e1e]';
-    return (
-      <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
-        {({ className, style, tokens, getTokenProps }) => (
-          <code
-            className={`${className} ${inlineBgClass} px-2 py-1 rounded ${isCompact ? 'text-xs' : 'text-sm'} font-mono inline-block`}
-            style={{
-              ...style,
-              fontSize,
-              fontFamily: 'monospace',
-            }}
-          >
-            {tokens.map((line) => (
-              line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token })} />
-              ))
-            ))}
-          </code>
-        )}
-      </Highlight>
-    );
-  }
-
-  const bgClass = customBg || 'bg-muted dark:bg-[#1e1e1e]';
-  
-  return (
-    <div className={`relative h-full ${bgClass} rounded-sm border border-border dark:border-zinc-800 dark:shadow-sm ${className || ''}`}>
-      {/* Header with language badge and copy button */}
-      <div className="absolute top-2 left-3 right-3 z-10 flex items-center justify-between">
-        <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-background/80 text-muted-foreground border border-border/50 backdrop-blur-sm">
-          {displayLanguage}
-        </span>
-        <CopyButton
-          value={contentJson}
-          variant="ghost"
-          className="h-7 w-7 bg-background/80 border border-border/50 backdrop-blur-sm"
-          iconClassName="h-3.5 w-3.5"
-          title="Copy code"
-        />
-      </div>
-      
-      <div className="h-full overflow-auto">
-        <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre
-              className={`${className}`}
-              style={{
-                ...style,
-                margin: 0,
-                padding: '2.5rem 1rem 1rem 1rem', // Extra top padding for language badge
-                fontSize,
-                lineHeight: isCompact ? 1.4 : 1.5,
-                fontFamily: 'monospace',
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-word',
-                overflowWrap: 'break-word',
-              }}
-            >
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line })}>
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-          )}
-        </Highlight>
-      </div>
-    </div>
-  );
-};
-
-export default PrettyCode; 

package/src/tools/PrettyCode/index.tsx

@@ -1,45 +0,0 @@
-/**
- * PrettyCode Component - Dynamic Import Wrapper
- *
- * Lazy loads the heavy Prism library (~500KB) only when needed.
- * This significantly reduces the initial bundle size.
- */
-
-'use client';
-
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import type { Language } from 'prism-react-renderer';
-
-// Dynamic import with loading state
-const PrettyCodeClient = dynamic(() => import('./PrettyCode.client'), {
-  ssr: false,
-  loading: () => (
-    <div className="relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-zinc-900">
-      <div className="p-4">
-        <div className="flex items-center gap-2">
-          <div className="animate-pulse h-4 w-4 rounded-full bg-muted-foreground/20"></div>
-          <span className="text-xs text-muted-foreground">Loading code...</span>
-        </div>
-      </div>
-    </div>
-  ),
-});
-
-interface PrettyCodeProps {
-  data: string | object;
-  language: Language;
-  className?: string;
-  mode?: 'dark' | 'light';
-  inline?: boolean;
-  customBg?: string;
-  isCompact?: boolean; // Compact mode for smaller font sizes
-}
-
-const PrettyCode: React.FC<PrettyCodeProps> = (props) => {
-  return <PrettyCodeClient {...props} />;
-};
-
-export default PrettyCode;
-export type { Language };

package/src/tools/VideoPlayer/@refactoring/00-PLAN.md

@@ -1,91 +0,0 @@
-# VideoPlayer Refactoring Plan
-
-## Overview
-
-The VideoPlayer is already reasonably well-organized with a `providers/` subfolder. This refactoring focuses on incremental improvements rather than major restructuring.
-
-**Total: 2,024 lines across 10 files**
-
-## Current Structure (Before)
-
-```
-VideoPlayer/
-├── index.ts (68 lines)                 # Public exports
-├── types.ts (369 lines)                # All types + helper functions ⚠️
-├── VideoPlayer.tsx (202 lines)         # Main orchestrator
-├── VideoPlayerContext.tsx (125 lines)  # Streaming context
-├── VideoControls.tsx (139 lines)       # Vidstack controls
-├── VideoErrorFallback.tsx (174 lines)  # Error UI
-├── README.md
-└── providers/
-    ├── index.ts (8 lines)
-    ├── VidstackProvider.tsx (332 lines) # YouTube/Vimeo/HLS/DASH
-    ├── NativeProvider.tsx (206 lines)   # HTML5 <video>
-    └── StreamProvider.tsx (401 lines)   # HTTP Range + Blob ⚠️
-```
-
-**Issues Identified:**
-1. `types.ts` (369 lines) - Contains types AND helper functions
-2. `StreamProvider.tsx` (401 lines) - Largest file, multiple concerns
-3. Position caching logic duplicated in VidstackProvider & StreamProvider
-4. No dedicated hooks/ folder
-
-## Target Structure (After)
-
-```
-VideoPlayer/
-├── index.ts                    # Public API
-├── README.md
-├── types/
-│   ├── index.ts                # Re-exports all types
-│   ├── sources.ts              # Source type definitions
-│   ├── player.ts               # Player props and config types
-│   └── provider.ts             # Provider-specific types
-├── hooks/
-│   ├── index.ts
-│   └── useVideoPositionCache.ts  # Extracted caching logic
-├── utils/
-│   ├── index.ts
-│   ├── resolvers.ts            # resolvePlayerMode, resolveFileSource
-│   └── stream.ts               # Stream URL generation helpers
-├── components/
-│   ├── index.ts
-│   ├── VideoPlayer.tsx         # Main component
-│   ├── VideoControls.tsx       # Vidstack controls
-│   └── VideoErrorFallback.tsx  # Error UI
-├── context/
-│   ├── index.ts
-│   └── VideoPlayerContext.tsx
-└── providers/
-    ├── index.ts
-    ├── VidstackProvider.tsx
-    ├── NativeProvider.tsx
-    └── StreamProvider.tsx
-```
-
-## Benefits
-
-1. **DRY Principle** - Extract duplicated position caching logic
-2. **Separation of Concerns** - Types split by domain
-3. **Consistent Structure** - Matches AudioPlayer/ImageViewer patterns
-4. **Maintainability** - Easier to find and modify specific functionality
-5. **Testability** - Hooks and utils can be unit tested
-
-## Execution Phases
-
-| Phase | Description | Files |
-|-------|-------------|-------|
-| 1 | Create folder structure | types/, hooks/, utils/, components/, context/ |
-| 2 | Split types | sources.ts, player.ts, provider.ts |
-| 3 | Extract utils | resolvers.ts, stream.ts |
-| 4 | Extract hooks | useVideoPositionCache.ts |
-| 5 | Move components | VideoPlayer.tsx, VideoControls.tsx, VideoErrorFallback.tsx |
-| 6 | Move context | VideoPlayerContext.tsx |
-| 7 | Update exports | index.ts |
-| 8 | Cleanup and verify | Delete old files, run pnpm check |
-
-## Risk Assessment
-
-- **Low Risk**: Incremental changes, no logic modifications
-- **Testing**: Run `pnpm check` after each phase
-- **Providers**: Already well-organized, minimal changes needed

package/src/tools/VideoPlayer/@refactoring/01-TYPES.md

@@ -1,284 +0,0 @@
-# Phase 1: Types Split
-
-## Goal
-
-Split the 369-line `types.ts` into domain-specific files and move helper functions to utils.
-
-## Current Structure
-
-```typescript
-// types.ts (369 lines)
-// Contains:
-// 1. Source types (UrlSource, YouTubeSource, VimeoSource, HLSSource, etc.)
-// 2. Player types (PlayerMode, AspectRatioValue, VideoPlayerProps, etc.)
-// 3. Provider types (VidstackProviderProps, NativeProviderProps, etc.)
-// 4. Helper functions (resolvePlayerMode, resolveFileSource, isSimpleStreamSource)
-```
-
-## Target Files
-
-### types/sources.ts (~120 lines)
-
-All source type definitions:
-
-```typescript
-/**
- * Video source type definitions
- */
-
-// URL source (direct video URL)
-export interface UrlSource {
-  type: 'url';
-  url: string;
-  mimeType?: string;
-}
-
-// YouTube embed
-export interface YouTubeSource {
-  type: 'youtube';
-  videoId: string;
-  startTime?: number;
-}
-
-// Vimeo embed
-export interface VimeoSource {
-  type: 'vimeo';
-  videoId: string;
-  startTime?: number;
-}
-
-// HLS streaming
-export interface HLSSource {
-  type: 'hls';
-  url: string;
-}
-
-// DASH streaming
-export interface DASHSource {
-  type: 'dash';
-  url: string;
-}
-
-// HTTP Range streaming with auth
-export interface StreamSource {
-  type: 'stream';
-  streamKey: string;
-  fileName: string;
-  fileSize?: number;
-  mimeType?: string;
-  getStreamUrl: (streamKey: string) => Promise<string>;
-}
-
-// Simple stream (resolved via context)
-export interface SimpleStreamSource {
-  type: 'stream';
-  streamKey: string;
-  fileName: string;
-  fileSize?: number;
-  mimeType?: string;
-}
-
-// Blob (ArrayBuffer)
-export interface BlobSource {
-  type: 'blob';
-  data: ArrayBuffer;
-  mimeType?: string;
-  fileName?: string;
-}
-
-// Data URL (base64)
-export interface DataUrlSource {
-  type: 'data-url';
-  dataUrl: string;
-  mimeType?: string;
-}
-
-// Union of all sources
-export type VideoSourceUnion =
-  | UrlSource
-  | YouTubeSource
-  | VimeoSource
-  | HLSSource
-  | DASHSource
-  | StreamSource
-  | BlobSource
-  | DataUrlSource;
-```
-
-### types/player.ts (~100 lines)
-
-Player configuration and main component types:
-
-```typescript
-/**
- * Player configuration types
- */
-
-import type { ReactNode, CSSProperties } from 'react';
-import type { VideoSourceUnion } from './sources';
-
-// Player mode
-export type PlayerMode = 'auto' | 'vidstack' | 'native' | 'streaming';
-
-// Aspect ratio
-export type AspectRatioValue = number | 'auto' | 'fill';
-
-// Common settings
-export interface CommonPlayerSettings {
-  autoPlay?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  controls?: boolean;
-  preload?: 'none' | 'metadata' | 'auto';
-}
-
-// Common events
-export interface CommonPlayerEvents {
-  onPlay?: () => void;
-  onPause?: () => void;
-  onEnded?: () => void;
-  onTimeUpdate?: (currentTime: number) => void;
-  onError?: (error: Error) => void;
-  onLoadStart?: () => void;
-  onCanPlay?: () => void;
-}
-
-// Error fallback props
-export interface ErrorFallbackProps {
-  error: Error | null;
-  source: VideoSourceUnion;
-  retry?: () => void;
-}
-
-// Main component props
-export interface VideoPlayerProps extends CommonPlayerSettings, CommonPlayerEvents {
-  source: VideoSourceUnion;
-  mode?: PlayerMode;
-  aspectRatio?: AspectRatioValue;
-  poster?: string;
-  className?: string;
-  style?: CSSProperties;
-  errorFallback?: (props: ErrorFallbackProps) => ReactNode;
-}
-
-// Ref API
-export interface VideoPlayerRef {
-  play: () => Promise<void>;
-  pause: () => void;
-  seek: (time: number) => void;
-  setVolume: (volume: number) => void;
-  setMuted: (muted: boolean) => void;
-  requestFullscreen: () => Promise<void>;
-  exitFullscreen: () => Promise<void>;
-  readonly currentTime: number;
-  readonly duration: number;
-  readonly paused: boolean;
-  readonly muted: boolean;
-  readonly volume: number;
-  readonly isFullscreen: boolean;
-}
-```
-
-### types/provider.ts (~80 lines)
-
-Provider-specific types:
-
-```typescript
-/**
- * Provider-specific types
- */
-
-import type { ReactNode } from 'react';
-import type { VideoSourceUnion, StreamSource, BlobSource, DataUrlSource } from './sources';
-import type { CommonPlayerSettings, CommonPlayerEvents, AspectRatioValue, ErrorFallbackProps } from './player';
-
-// Vidstack provider props
-export interface VidstackProviderProps extends CommonPlayerSettings, CommonPlayerEvents {
-  source: VideoSourceUnion;
-  aspectRatio?: AspectRatioValue;
-  poster?: string;
-  className?: string;
-  errorFallback?: (props: ErrorFallbackProps) => ReactNode;
-}
-
-// Native provider props
-export interface NativeProviderProps extends CommonPlayerSettings, CommonPlayerEvents {
-  source: VideoSourceUnion;
-  aspectRatio?: AspectRatioValue;
-  poster?: string;
-  className?: string;
-  disableContextMenu?: boolean;
-}
-
-// Stream provider props
-export interface StreamProviderProps extends CommonPlayerSettings, CommonPlayerEvents {
-  source: StreamSource | BlobSource | DataUrlSource;
-  aspectRatio?: AspectRatioValue;
-  poster?: string;
-  className?: string;
-  errorFallback?: (props: ErrorFallbackProps) => ReactNode;
-}
-
-// File source resolution options
-export interface ResolveFileSourceOptions {
-  fileName: string;
-  content: string | ArrayBuffer;
-  mimeType?: string;
-}
-
-// Context value
-export interface VideoPlayerContextValue {
-  getStreamUrl?: (streamKey: string) => Promise<string>;
-}
-
-export interface VideoPlayerProviderProps {
-  getStreamUrl: (streamKey: string) => Promise<string>;
-  children: ReactNode;
-}
-```
-
-### types/index.ts
-
-Re-export all types:
-
-```typescript
-/**
- * VideoPlayer types - Public API
- */
-
-// Source types
-export type {
-  UrlSource,
-  YouTubeSource,
-  VimeoSource,
-  HLSSource,
-  DASHSource,
-  StreamSource,
-  SimpleStreamSource,
-  BlobSource,
-  DataUrlSource,
-  VideoSourceUnion,
-} from './sources';
-
-// Player types
-export type {
-  PlayerMode,
-  AspectRatioValue,
-  CommonPlayerSettings,
-  CommonPlayerEvents,
-  ErrorFallbackProps,
-  VideoPlayerProps,
-  VideoPlayerRef,
-} from './player';
-
-// Provider types
-export type {
-  VidstackProviderProps,
-  NativeProviderProps,
-  StreamProviderProps,
-  ResolveFileSourceOptions,
-  VideoPlayerContextValue,
-  VideoPlayerProviderProps,
-} from './provider';
-```