@djangocfg/ui-tools 2.1.91

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

@@ -0,0 +1,208 @@
+'use client';
+
+import { Highlight, Language, themes } from 'prism-react-renderer';
+import React from 'react';
+
+import { CopyButton } from '@djangocfg/ui-core/components';
+
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+
+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

@@ -0,0 +1,47 @@
+/**
+ * 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 React, { lazy, Suspense } from 'react';
+import type { Language } from 'prism-react-renderer';
+
+// Lazy load the client component
+const PrettyCodeClient = lazy(() => import('./PrettyCode.client'));
+
+// Loading fallback component
+const LoadingFallback = () => (
+  <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;
+}
+
+const PrettyCode: React.FC<PrettyCodeProps> = (props) => {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <PrettyCodeClient {...props} />
+    </Suspense>
+  );
+};
+
+export default PrettyCode;
+export type { Language };

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

@@ -0,0 +1,91 @@
+# 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

@@ -0,0 +1,284 @@
+# 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';
+```