@djangocfg/ui-nextjs 1.4.45

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

@@ -0,0 +1,217 @@
+'use client';
+
+import { Highlight, Language, themes } from 'prism-react-renderer';
+import React, { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { useCopy } from '@djangocfg/ui-core/hooks';
+import { useTheme } from '../../hooks/useTheme';
+
+interface PrettyCodeProps {
+  data: string | object;
+  language: Language;
+  className?: string;
+  mode?: 'dark' | 'light';
+  inline?: boolean;
+  customBg?: string; // Custom background class
+}
+
+const PrettyCode = ({ data, language, className, mode, inline = false, customBg }: PrettyCodeProps) => {
+  const detectedTheme = useTheme();
+  const [copied, setCopied] = useState(false);
+  const { copyToClipboard } = useCopy({
+    successMessage: "Code copied to clipboard",
+    errorMessage: "Failed to copy code"
+  });
+
+  // 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 copy
+  const handleCopy = async () => {
+    const success = await copyToClipboard(contentJson);
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+  
+  // 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 text-sm font-mono inline-block`}
+            style={{
+              ...style,
+              fontSize: '0.875rem',
+              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>
+        <button
+          onClick={handleCopy}
+          className="inline-flex items-center justify-center p-1.5 rounded text-muted-foreground hover:text-foreground bg-background/80 border border-border/50 backdrop-blur-sm transition-colors"
+          title="Copy code"
+        >
+          {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+        </button>
+      </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: '0.875rem',
+                lineHeight: 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,43 @@
+/**
+ * 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;
+}
+
+const PrettyCode: React.FC<PrettyCodeProps> = (props) => {
+  return <PrettyCodeClient {...props} />;
+};
+
+export default PrettyCode;
+export type { Language };

package/src/tools/VideoPlayer/README.md

@@ -0,0 +1,239 @@
+# VideoPlayer - Professional Vidstack Implementation
+
+A professional, accessible video player built with Vidstack React that supports YouTube, Vimeo, MP4, HLS, and more.
+
+## Features
+
+- ✅ **Multi-platform support**: YouTube, Vimeo, MP4, HLS, DASH
+- ✅ **Custom controls**: Professional UI with hover effects
+- ✅ **Accessibility**: Full keyboard navigation and screen reader support
+- ✅ **Responsive**: Works on all screen sizes
+- ✅ **TypeScript**: Full type safety
+- ✅ **Themes**: Default, minimal, and modern themes
+- ✅ **No recommendations**: Clean playback without YouTube distractions
+
+## Installation
+
+The VideoPlayer is already included in the UI package with all dependencies:
+
+```bash
+pnpm add @vidstack/react@next media-icons@next
+```
+
+## Basic Usage
+
+```tsx
+import { VideoPlayer } from '@djangocfg/ui-nextjs/tools';
+
+function MyComponent() {
+  return (
+    <VideoPlayer
+      source={{
+        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        title: 'Never Gonna Give You Up',
+        description: 'Rick Astley - Never Gonna Give You Up (Official Video)'
+      }}
+      autoplay={false}
+      controls={true}
+      className="max-w-4xl mx-auto"
+    />
+  );
+}
+```
+
+## Advanced Usage
+
+```tsx
+import { VideoPlayer, VideoPlayerRef } from '@djangocfg/ui-nextjs/tools';
+import { useRef } from 'react';
+
+function AdvancedPlayer() {
+  const playerRef = useRef<VideoPlayerRef>(null);
+
+  const handleCustomPlay = () => {
+    playerRef.current?.play();
+  };
+
+  return (
+    <VideoPlayer
+      ref={playerRef}
+      source={{
+        url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        title: 'Big Buck Bunny',
+        poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+        duration: 596
+      }}
+      theme="modern"
+      autoplay={false}
+      muted={false}
+      playsInline={true}
+      showInfo={true}
+      onPlay={() => console.log('Video started')}
+      onPause={() => console.log('Video paused')}
+      onEnded={() => console.log('Video ended')}
+      onError={(error) => console.error('Video error:', error)}
+    />
+  );
+}
+```
+
+## Supported Video Sources
+
+### YouTube
+- **URL Format**: `https://www.youtube.com/watch?v=VIDEO_ID` or `youtube/VIDEO_ID`
+- **Auto-conversion**: Full YouTube URLs are automatically converted to `youtube/ID` format
+- **Poster**: ⚠️ YouTube iframe ignores custom poster images and always shows YouTube's thumbnail
+- **Examples**:
+  ```tsx
+  url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
+  url: 'https://youtu.be/dQw4w9WgXcQ'
+  url: 'youtube/dQw4w9WgXcQ'
+  ```
+
+### Vimeo
+- **URL Format**: `https://vimeo.com/VIDEO_ID` or `vimeo/VIDEO_ID`
+- **Auto-conversion**: Full Vimeo URLs are automatically converted to `vimeo/ID` format
+- **Poster**: ⚠️ Vimeo may ignore custom poster and use their own thumbnail
+- **Example**: `url: 'vimeo/76979871'`
+
+### Direct Video Files (MP4, WebM, OGG)
+- **Poster**: ✅ **Works perfectly!** Custom poster images are fully supported
+- **Examples**:
+  ```tsx
+  url: 'https://example.com/video.mp4',
+  poster: '/images/video-poster.jpg'  // This works!
+  ```
+
+### HLS Streams
+- **Poster**: ✅ Custom poster supported
+- **Example**: `url: 'https://example.com/stream.m3u8'`
+
+### DASH Streams  
+- **Poster**: ✅ Custom poster supported
+- **Example**: `url: 'https://example.com/stream.mpd'`
+
+> **Note**: The `poster` prop works for direct video files, HLS, and DASH streams. For YouTube and Vimeo, the platform's own thumbnail is displayed regardless of the `poster` prop due to iframe limitations.
+
+### YouTube
+```tsx
+<VideoPlayer
+  source={{
+    url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    title: 'YouTube Video'
+  }}
+/>
+```
+
+### Vimeo
+```tsx
+<VideoPlayer
+  source={{
+    url: 'https://vimeo.com/76979871',
+    title: 'Vimeo Video'
+  }}
+/>
+```
+
+### Direct MP4
+```tsx
+<VideoPlayer
+  source={{
+    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    title: 'Direct MP4',
+    poster: 'https://example.com/poster.jpg'
+  }}
+/>
+```
+
+### HLS Stream
+```tsx
+<VideoPlayer
+  source={{
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    title: 'HLS Stream'
+  }}
+/>
+```
+
+## API Reference
+
+### VideoPlayerProps
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `source` | `VideoSource` | - | Video source configuration |
+| `aspectRatio` | `number` | `16/9` | Video aspect ratio |
+| `autoplay` | `boolean` | `false` | Auto-play video |
+| `muted` | `boolean` | `false` | Mute video by default |
+| `playsInline` | `boolean` | `true` | Play inline on mobile |
+| `controls` | `boolean` | `true` | Show custom controls |
+| `showInfo` | `boolean` | `false` | Show video info below player |
+| `theme` | `'default' \| 'minimal' \| 'modern'` | `'default'` | Player theme |
+| `className` | `string` | - | Custom CSS class |
+| `onPlay` | `() => void` | - | Play event callback |
+| `onPause` | `() => void` | - | Pause event callback |
+| `onEnded` | `() => void` | - | End event callback |
+| `onError` | `(error: string) => void` | - | Error event callback |
+
+### VideoSource
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `url` | `string` | Video URL (YouTube, Vimeo, MP4, HLS, etc.) |
+| `title` | `string?` | Video title |
+| `description` | `string?` | Video description |
+| `poster` | `string?` | Custom poster/thumbnail URL |
+| `duration` | `number?` | Video duration in seconds |
+
+### VideoPlayerRef Methods
+
+| Method | Description |
+|--------|-------------|
+| `play()` | Play the video |
+| `pause()` | Pause the video |
+| `togglePlay()` | Toggle play/pause |
+| `seekTo(time: number)` | Seek to specific time |
+| `setVolume(volume: number)` | Set volume (0-1) |
+| `toggleMute()` | Toggle mute |
+| `enterFullscreen()` | Enter fullscreen |
+| `exitFullscreen()` | Exit fullscreen |
+
+## Themes
+
+### Default Theme
+Clean, professional look with rounded corners and subtle shadows.
+
+### Minimal Theme
+No rounded corners, minimal styling for embedding in tight spaces.
+
+### Modern Theme
+Enhanced shadows and larger border radius for a contemporary look.
+
+## Accessibility
+
+The VideoPlayer includes full accessibility support:
+
+- ✅ Keyboard navigation (Space, Arrow keys, F for fullscreen)
+- ✅ Screen reader announcements
+- ✅ Focus indicators
+- ✅ ARIA labels and roles
+- ✅ High contrast support
+
+## Performance
+
+- ✅ Lazy loading of video content
+- ✅ Efficient re-renders with Vidstack's optimized state management
+- ✅ Minimal bundle size impact
+- ✅ Hardware-accelerated playback when available
+
+## Browser Support
+
+Supports all modern browsers through Vidstack's comprehensive compatibility layer:
+
+- ✅ Chrome 63+
+- ✅ Firefox 67+
+- ✅ Safari 12+
+- ✅ Edge 79+
+- ✅ iOS Safari 12+
+- ✅ Chrome Android 63+
+

package/src/tools/VideoPlayer/VideoControls.tsx

@@ -0,0 +1,138 @@
+/**
+ * Custom Video Controls for Vidstack Player
+ */
+
+'use client';
+
+import React from 'react';
+import { useMediaStore, useMediaRemote } from '@vidstack/react';
+import type { MediaPlayerInstance } from '@vidstack/react';
+import { Play, Pause, Volume2, VolumeX, Maximize, Minimize } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+interface VideoControlsProps {
+  player: React.RefObject<MediaPlayerInstance | null>;
+  className?: string;
+}
+
+export function VideoControls({ player, className }: VideoControlsProps) {
+  const store = useMediaStore(player);
+  const remote = useMediaRemote();
+  
+  const isPaused = store.paused;
+  const isMuted = store.muted;
+  const isFullscreen = store.fullscreen;
+  const currentTime = store.currentTime;
+  const duration = store.duration;
+  const volume = store.volume;
+
+  const formatTime = (seconds: number): string => {
+    if (!seconds || seconds < 0) return '0:00';
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!duration) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = clickX / rect.width;
+    const newTime = percentage * duration;
+    remote.seek(newTime);
+  };
+
+  const handleVolumeChange = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+    remote.changeVolume(percentage);
+    if (percentage > 0 && isMuted) {
+      remote.toggleMuted();
+    }
+  };
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+  return (
+    <div 
+      className={cn(
+        "absolute inset-0 flex flex-col justify-end transition-opacity duration-300",
+        "bg-gradient-to-t from-black/80 via-black/20 to-transparent",
+        "opacity-0 group-hover:opacity-100 focus-within:opacity-100",
+        "pointer-events-none group-hover:pointer-events-auto",
+        className
+      )}
+    >
+      {/* Progress Bar */}
+      <div className="px-4 pb-2 pointer-events-auto">
+        <div 
+          className="h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all group"
+          onClick={handleProgressClick}
+        >
+          <div 
+            className="h-full bg-primary rounded-full transition-all relative group-hover:bg-primary/90"
+            style={{ width: `${progress}%` }}
+          >
+            <div className="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
+          </div>
+        </div>
+      </div>
+
+      {/* Control Bar */}
+      <div className="flex items-center gap-4 px-4 pb-4 pointer-events-auto">
+        {/* Play/Pause */}
+        <button
+          onClick={() => remote.togglePaused()}
+          className="text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full"
+        >
+          {isPaused ? <Play className="h-6 w-6" /> : <Pause className="h-6 w-6" />}
+        </button>
+
+        {/* Time */}
+        <div className="text-white text-sm font-medium">
+          {formatTime(currentTime)} / {formatTime(duration)}
+        </div>
+
+        <div className="flex-1" />
+
+        {/* Volume Control */}
+        <div className="flex items-center gap-2 group/volume">
+          <button
+            onClick={() => remote.toggleMuted()}
+            className="text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full"
+          >
+            {isMuted || volume === 0 ? (
+              <VolumeX className="h-5 w-5" />
+            ) : (
+              <Volume2 className="h-5 w-5" />
+            )}
+          </button>
+          
+          <div 
+            className="w-0 group-hover/volume:w-20 transition-all overflow-hidden"
+          >
+            <div 
+              className="h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-all"
+              onClick={handleVolumeChange}
+            >
+              <div 
+                className="h-full bg-white rounded-full transition-all"
+                style={{ width: `${volume * 100}%` }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Fullscreen */}
+        <button
+          onClick={() => isFullscreen ? remote.exitFullscreen() : remote.enterFullscreen()}
+          className="text-white hover:text-primary transition-colors p-1.5 hover:bg-white/10 rounded-full"
+        >
+          {isFullscreen ? <Minimize className="h-5 w-5" /> : <Maximize className="h-5 w-5" />}
+        </button>
+      </div>
+    </div>
+  );
+}
+