@djangocfg/layouts 1.0.1

package/src/snippets/Chat/types.ts

@@ -0,0 +1,79 @@
+/**
+ * Chat Types
+ * Type definitions for RAG-powered chat widget
+ */
+
+import type { ChatMessage as BaseChatMessage, ChatSource } from '@djangocfg/api/cfg/contexts';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Extended Message Type (for UI with sources)
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface ChatMessageWithSources extends BaseChatMessage {
+  sources?: ChatSource[];
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Widget Props
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface ChatWidgetProps {
+  /** Whether to auto-open on mount */
+  autoOpen?: boolean;
+  /** Render even when closed (for animations) */
+  persistent?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Callback when toggle state changes */
+  onToggle?: (isOpen: boolean) => void;
+  /** Callback when message is sent */
+  onMessage?: (message: ChatMessageWithSources) => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// UI State
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface ChatUIState {
+  isOpen: boolean;
+  isExpanded: boolean;
+  isMinimized: boolean;
+  showSources: boolean;
+  showTimestamps: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component Props
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface MessageListProps {
+  messages: ChatMessageWithSources[];
+  isLoading?: boolean;
+  showSources?: boolean;
+  showTimestamps?: boolean;
+  autoScroll?: boolean;
+  className?: string;
+}
+
+export interface MessageInputProps {
+  onSend: (message: string) => Promise<void>;
+  isLoading?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export interface SessionListProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectSession: (sessionId: string) => void;
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Re-export types from API
+// ─────────────────────────────────────────────────────────────────────────
+
+export type { ChatSource } from '@djangocfg/api/cfg/contexts';
+export type { ChatMessage as BaseChatMessage } from '@djangocfg/api/cfg/contexts';
+

package/src/snippets/VideoPlayer/README.md

@@ -0,0 +1,203 @@
+# 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 '@repo/ui/snippets/VideoPlayer';
+
+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 '@repo/ui/snippets/VideoPlayer';
+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
+```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/snippets/VideoPlayer/VideoControls.tsx

@@ -0,0 +1,133 @@
+/**
+ * Custom Video Controls for Vidstack Player
+ */
+
+'use client';
+
+import React from 'react';
+import { useMediaStore, useMediaRemote } from '@vidstack/react';
+import type { MediaPlayerElement } from 'vidstack';
+import { Play, Pause, Volume2, VolumeX, Maximize, Minimize } from 'lucide-react';
+import { cn } from '@djangocfg/ui';
+
+interface VideoControlsProps {
+  player: React.RefObject<MediaPlayerElement | 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 opacity-0 hover:opacity-100 focus-within:opacity-100 transition-opacity duration-300",
+      "bg-gradient-to-t from-black/80 via-black/20 to-transparent",
+      className
+    )}>
+      {/* Progress Bar */}
+      <div className="px-4 pb-2">
+        <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">
+        {/* 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>
+  );
+}

package/src/snippets/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,114 @@
+/**
+ * Professional VideoPlayer - Vidstack Implementation
+ * Supports YouTube, Vimeo, MP4, HLS and more with custom controls
+ */
+
+'use client';
+
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { MediaPlayer, MediaOutlet } from '@vidstack/react';
+import { MediaRemoteControl, type MediaPlayerElement } from 'vidstack';
+import { cn } from '@djangocfg/ui';
+import { type VideoPlayerProps, type VideoPlayerRef } from './types';
+import { VideoControls } from './VideoControls';
+
+export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(({
+  source,
+  aspectRatio = 16 / 9,
+  autoplay = false,
+  muted = false,
+  playsInline = true,
+  controls = true,
+  className,
+  showInfo = false,
+  theme = 'default',
+  onPlay,
+  onPause,
+  onEnded,
+  onError,
+}, ref) => {
+  const playerRef = useRef<MediaPlayerElement | null>(null);
+
+  // Expose player methods via ref
+  useImperativeHandle(ref, () => {
+    const getRemote = () => {
+      if (!playerRef.current) return null;
+      const remote = new MediaRemoteControl();
+      remote.setTarget(playerRef.current as unknown as EventTarget);
+      return remote;
+    };
+    
+    return {
+      play: () => getRemote()?.play(),
+      pause: () => getRemote()?.pause(),
+      togglePlay: () => getRemote()?.togglePaused(),
+      seekTo: (time: number) => getRemote()?.seek(time),
+      setVolume: (volume: number) => getRemote()?.changeVolume(Math.max(0, Math.min(1, volume))),
+      toggleMute: () => getRemote()?.toggleMuted(),
+      enterFullscreen: () => getRemote()?.enterFullscreen(),
+      exitFullscreen: () => getRemote()?.exitFullscreen(),
+    };
+  }, []);
+
+  const handlePlay = () => {
+    onPlay?.();
+  };
+
+  const handlePause = () => {
+    onPause?.();
+  };
+
+  const handleEnded = () => {
+    onEnded?.();
+  };
+
+  const handleError = (detail: any) => {
+    onError?.(detail?.message || 'Video playback error');
+  };
+
+  return (
+    <div className={cn("w-full", className)}>
+      {/* Video Player */}
+      <div 
+        className={cn(
+          "relative w-full overflow-hidden rounded-lg bg-black",
+          theme === 'minimal' && "rounded-none",
+          theme === 'modern' && "rounded-xl shadow-2xl"
+        )}
+        style={{ aspectRatio: aspectRatio }}
+      >
+        <MediaPlayer
+          ref={playerRef}
+          title={source.title || 'Video'}
+          src={source.url}
+          poster={source.poster}
+          autoPlay={autoplay}
+          muted={muted}
+          playsInline={playsInline}
+          onPlay={handlePlay}
+          onPause={handlePause}
+          onEnded={handleEnded}
+          onError={handleError}
+          className="w-full h-full"
+        >
+          <MediaOutlet />
+          
+          {/* Custom controls */}
+          {controls && <VideoControls player={playerRef} />}
+        </MediaPlayer>
+      </div>
+      
+      {/* Video Info */}
+      {showInfo && source.title && (
+        <div className="mt-4 space-y-2">
+          <h3 className="text-xl font-semibold text-foreground">{source.title}</h3>
+          {source.description && (
+            <p className="text-muted-foreground">{source.description}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+VideoPlayer.displayName = 'VideoPlayer';

package/src/snippets/VideoPlayer/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Professional VideoPlayer - Vidstack Implementation
+ * Export all components and types
+ */
+
+export { VideoPlayer } from './VideoPlayer';
+export { VideoControls } from './VideoControls';
+export type { VideoSource, VideoPlayerProps, VideoPlayerRef } from './types';

package/src/snippets/VideoPlayer/types.ts

@@ -0,0 +1,61 @@
+/**
+ * VideoPlayer Types - Professional Vidstack Implementation
+ */
+
+export interface VideoSource {
+  /** Video URL - supports YouTube, Vimeo, MP4, HLS, etc. */
+  url: string;
+  /** Video title */
+  title?: string;
+  /** Video description */
+  description?: string;
+  /** Custom poster/thumbnail URL */
+  poster?: string;
+  /** Video duration in seconds */
+  duration?: number;
+}
+
+export interface VideoPlayerProps {
+  /** Video source configuration */
+  source: VideoSource;
+  /** Aspect ratio (default: 16/9) */
+  aspectRatio?: number;
+  /** Auto-play video */
+  autoplay?: boolean;
+  /** Mute video by default */
+  muted?: boolean;
+  /** Play video inline on mobile */
+  playsInline?: boolean;
+  /** Show custom controls */
+  controls?: boolean;
+  /** Custom CSS class */
+  className?: string;
+  /** Show video info */
+  showInfo?: boolean;
+  /** Player theme */
+  theme?: 'default' | 'minimal' | 'modern';
+  /** Event callbacks */
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnded?: () => void;
+  onError?: (error: string) => void;
+}
+
+export interface VideoPlayerRef {
+  /** Play video */
+  play: () => void;
+  /** Pause video */
+  pause: () => void;
+  /** Toggle play/pause */
+  togglePlay: () => void;
+  /** Seek to time */
+  seekTo: (time: number) => void;
+  /** Set volume (0-1) */
+  setVolume: (volume: number) => void;
+  /** Toggle mute */
+  toggleMute: () => void;
+  /** Enter fullscreen */
+  enterFullscreen: () => void;
+  /** Exit fullscreen */
+  exitFullscreen: () => void;
+}

package/src/snippets/index.ts

@@ -0,0 +1,10 @@
+// ============================================================================
+// Snippets - Reusable UI Snippets
+// ============================================================================
+
+export { KnowledgeChat, ChatWidget, ChatUIProvider, useChatUI } from './Chat';
+export type { ChatWidgetProps, ChatUIState } from './Chat';
+
+export * from './Breadcrumbs';
+export * from './AuthDialog';
+export * from './VideoPlayer';

package/src/styles/dashboard.css

@@ -0,0 +1,41 @@
+/**
+ * Dashboard Layout Styles
+ * Specific styles for dashboard layout components
+ * (Header, Sidebar, etc.)
+ */
+
+/**
+ * Dashboard Header
+ * Sticky header with solid background
+ */
+.dashboard-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background-color: hsl(var(--background));
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+/**
+ * Dashboard Sidebar
+ * Collapsible sidebar with icon mode
+ */
+.dashboard-sidebar {
+  /* Sidebar-specific styles can be added here if needed */
+  /* Most styling is handled by shadcn/ui Sidebar component */
+}
+
+/**
+ * Dashboard Main Content
+ * Main content area with proper spacing
+ */
+.dashboard-main {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+}

package/src/styles/index.css

@@ -0,0 +1,20 @@
+/**
+ * Unrealon Layouts Styles
+ * Layout-specific styles for @djangocfg/layouts package
+ *
+ * This file contains styles specific to layout components:
+ * - Dashboard layout
+ * - Public layout
+ * - Header/Sidebar components
+ *
+ * Usage: Import this file in your app after importing @djangocfg/ui styles
+ */
+
+/* Source detection for Tailwind v4 monorepo */
+@import "./sources.css";
+
+/* Dashboard layout styles */
+@import "./dashboard.css";
+
+/* Public layout styles can be added here */
+/* @import "./public.css"; */

package/src/styles/sources.css

@@ -0,0 +1,6 @@
+/**
+ * Tailwind v4 Source Detection for Layouts Package
+ *
+ * @source directive tells Tailwind v4 where to scan for utility classes.
+ */
+@source "../components";

package/src/types/index.ts

@@ -0,0 +1 @@
+export type { PageConfig, PageWithConfig } from "./pageConfig";