xertica-ui 1.2.4 → 1.2.6

package/components/CodeBlock.tsx

@@ -137,11 +137,11 @@ interface CodeBlockProps {
   showLineNumbers?: boolean;
 }
 
-export const CodeBlock = ({ 
-  code, 
-  language = 'tsx', 
+export const CodeBlock = ({
+  code,
+  language = 'tsx',
   filename,
-  showLineNumbers = false 
+  showLineNumbers = false
 }: CodeBlockProps) => {
   const [copied, setCopied] = useState(false);
 
@@ -161,7 +161,7 @@ export const CodeBlock = ({
       } else {
         throw new Error('Clipboard API not available');
       }
-      
+
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {
@@ -175,10 +175,10 @@ export const CodeBlock = ({
         document.body.appendChild(textArea);
         textArea.focus();
         textArea.select();
-        
+
         const successful = document.execCommand('copy');
         document.body.removeChild(textArea);
-        
+
         if (successful) {
           setCopied(true);
           setTimeout(() => setCopied(false), 2000);
@@ -202,7 +202,7 @@ export const CodeBlock = ({
           <span className="text-xs text-muted-foreground uppercase">{language}</span>
         </div>
       )}
-      
+
       <div className="relative">
         <Button
           variant="ghost"
@@ -220,7 +220,7 @@ export const CodeBlock = ({
         <div className="overflow-x-auto w-full max-w-full">
           <SyntaxHighlighter
             language={language}
-            style={elegantTheme}
+            style={elegantTheme as any}
             showLineNumbers={showLineNumbers}
             wrapLines={true}
             customStyle={{

package/components/index.ts

@@ -1,9 +1,10 @@
+import '../index.css';
 // ============================================================================
 // Xertica Assistant Exports
 // ============================================================================
 
 export { XerticaAssistant } from './ui/xertica-assistant';
-export type { 
+export type {
   XerticaAssistantProps,
   Message,
   Conversation,

package/components/media/AudioPlayer.tsx

@@ -14,12 +14,12 @@ export interface AudioPlayerProps {
   className?: string;
 }
 
-export function AudioPlayer({ 
-  src, 
+export function AudioPlayer({
+  src,
   title = "Audio",
   artist,
   autoPlay = false,
-  className 
+  className
 }: AudioPlayerProps) {
   const audioRef = useRef<HTMLAudioElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -38,9 +38,9 @@ export function AudioPlayer({
     if (audioRef.current) {
       setCurrentTime(audioRef.current.currentTime);
     }
-    
+
     setIsFloating(floating);
-    
+
     if (!floating) {
       setIsManualFloating(false);
       if (containerRef.current) {
@@ -55,21 +55,21 @@ export function AudioPlayer({
     if (audio) {
       // If we are switching modes, restore time and play state
       if (Math.abs(audio.currentTime - currentTime) > 0.5) {
-         audio.currentTime = currentTime;
+        audio.currentTime = currentTime;
       }
       if (isPlaying) {
-         const playPromise = audio.play();
-         if (playPromise !== undefined) {
-            playPromise.catch(error => {
-               // Auto-play might be blocked or interrupted
-               console.log("Playback interrupted during switch:", error);
-            });
-         }
+        const playPromise = audio.play();
+        if (playPromise !== undefined) {
+          playPromise.catch(error => {
+            // Auto-play might be blocked or interrupted
+            console.log("Playback interrupted during switch:", error);
+          });
+        }
       }
     }
     // We depend on isFloating to trigger this check when the DOM node is recreated
     // But we also need to attach listeners to the new node
-  }, [isFloating]); 
+  }, [isFloating]);
 
   // Auto-float on scroll logic
   useEffect(() => {
@@ -79,17 +79,17 @@ export function AudioPlayer({
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (isPlaying && !entry.isIntersecting && !isFloating) {
-           // Sync time before floating
-           if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-           setIsFloating(true);
+          // Sync time before floating
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          setIsFloating(true);
         }
         else if (entry.isIntersecting && isFloating && !isManualFloating) {
-           // Sync time before docking
-           if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-           handleSetFloating(false);
+          // Sync time before docking
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          handleSetFloating(false);
         }
       },
-      { threshold: 0.2 } 
+      { threshold: 0.2 }
     );
 
     observer.observe(container);
@@ -161,7 +161,7 @@ export function AudioPlayer({
 
   const PlayerControls = ({ isCompact = false }) => (
     <div className={cn("flex items-center gap-3 w-full", isCompact ? "px-3 py-1" : "px-4 py-3")}>
-      <Button 
+      <Button
         onClick={togglePlay}
         size="icon"
         variant="outline"
@@ -174,70 +174,70 @@ export function AudioPlayer({
       </Button>
 
       <div className="flex-1 min-w-0 flex flex-col justify-center gap-1.5">
-          <div className="flex items-center justify-between text-xs leading-none">
-            <div className="flex items-center gap-2 truncate">
-              <span className="font-medium text-foreground truncate">{title}</span>
-              {artist && !isCompact && <span className="text-muted-foreground hidden sm:inline-block border-l pl-2 border-border truncate">{artist}</span>}
-            </div>
-            <div className="text-muted-foreground font-medium tabular-nums shrink-0 text-[10px] sm:text-xs">
-              {formatTime(currentTime)} / {formatTime(duration || 0)}
-            </div>
+        <div className="flex items-center justify-between text-xs leading-none">
+          <div className="flex items-center gap-2 truncate">
+            <span className="font-medium text-foreground truncate">{title}</span>
+            {artist && !isCompact && <span className="text-muted-foreground hidden sm:inline-block border-l pl-2 border-border truncate">{artist}</span>}
           </div>
-          
-          <Slider
-            value={[currentTime]}
-            max={duration || 100}
-            step={1}
-            onValueChange={handleSeek}
-            className="w-full"
-          />
+          <div className="text-muted-foreground font-medium tabular-nums shrink-0 text-[10px] sm:text-xs">
+            {formatTime(currentTime)} / {formatTime(duration || 0)}
+          </div>
+        </div>
+
+        <Slider
+          value={[currentTime]}
+          max={duration || 100}
+          step={1}
+          onValueChange={handleSeek}
+          className="w-full"
+        />
       </div>
 
       <div className="flex items-center gap-1 shrink-0">
-          {!isCompact && (
-            <div className="hidden sm:flex items-center gap-2 group/volume mr-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                onClick={() => {
-                    const newMuted = !isMuted;
-                    setIsMuted(newMuted);
-                    if (audioRef.current) audioRef.current.muted = newMuted;
-                }}
-              >
-                {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
-              </Button>
-              <div className="w-0 overflow-hidden group-hover/volume:w-20 transition-all duration-300">
-                  <Slider
-                    value={[isMuted ? 0 : volume]}
-                    max={1}
-                    step={0.01}
-                    onValueChange={handleVolumeChange}
-                    className="w-20"
-                  />
-              </div>
-            </div>
-          )}
-
-          {!isCompact && (
-             <div className="w-px h-6 bg-border mx-1 hidden sm:block" />
-          )}
-
-          {!isCompact && (
+        {!isCompact && (
+          <div className="hidden sm:flex items-center gap-2 group/volume mr-2">
             <Button
               variant="ghost"
               size="icon"
               className="h-8 w-8 text-muted-foreground hover:text-foreground"
               onClick={() => {
-                setIsManualFloating(true);
-                handleSetFloating(true);
+                const newMuted = !isMuted;
+                setIsMuted(newMuted);
+                if (audioRef.current) audioRef.current.muted = newMuted;
               }}
-              title="Modo Flutuante"
             >
-              <Maximize2 className="w-4 h-4" />
+              {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
             </Button>
-          )}
+            <div className="w-0 overflow-hidden group-hover/volume:w-20 transition-all duration-300">
+              <Slider
+                value={[isMuted ? 0 : volume]}
+                max={1}
+                step={0.01}
+                onValueChange={handleVolumeChange}
+                className="w-20"
+              />
+            </div>
+          </div>
+        )}
+
+        {!isCompact && (
+          <div className="w-px h-6 bg-border mx-1 hidden sm:block" />
+        )}
+
+        {!isCompact && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-muted-foreground hover:text-foreground"
+            onClick={() => {
+              setIsManualFloating(true);
+              handleSetFloating(true);
+            }}
+            title="Modo Flutuante"
+          >
+            <Maximize2 className="w-4 h-4" />
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -247,21 +247,21 @@ export function AudioPlayer({
       <FloatingMediaWrapper
         isFloating={isFloating}
         setIsFloating={handleSetFloating}
-        onCloseMedia={() => {
+        onClose={() => {
           setIsPlaying(false);
-          setIsFloating(false); 
+          setIsFloating(false);
           if (audioRef.current) audioRef.current.pause();
         }}
         title={title}
-        aspectRatio={320/110} 
+        aspectRatio={320 / 110}
         minHeight={110}
         minWidth={320}
         className="w-full"
       >
         <div className={cn(
           "bg-card w-full overflow-hidden flex flex-col justify-center",
-          isFloating 
-            ? "h-full bg-transparent text-primary-foreground [&_.text-muted-foreground]:text-primary-foreground/80 [&_.text-foreground]:text-primary-foreground [&_.text-primary]:text-primary-foreground [&_.border-primary\\/20]:border-primary-foreground/30 [&_.hover\\:bg-primary\\/5]:hover:bg-primary-foreground/10 [&_[data-slot=slider-track]]:bg-primary-foreground/20 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground" 
+          isFloating
+            ? "h-full bg-transparent text-primary-foreground [&_.text-muted-foreground]:text-primary-foreground/80 [&_.text-foreground]:text-primary-foreground [&_.text-primary]:text-primary-foreground [&_.border-primary\\/20]:border-primary-foreground/30 [&_.hover\\:bg-primary\\/5]:hover:bg-primary-foreground/10 [&_[data-slot=slider-track]]:bg-primary-foreground/20 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground"
             : "border rounded-md shadow-sm"
         )}>
           <audio

package/components/media/VideoPlayer.tsx

@@ -13,12 +13,12 @@ export interface VideoPlayerProps {
   className?: string;
 }
 
-export function VideoPlayer({ 
-  src, 
-  poster, 
+export function VideoPlayer({
+  src,
+  poster,
   title = "Untitled Video",
   autoPlay = false,
-  className 
+  className
 }: VideoPlayerProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -31,7 +31,7 @@ export function VideoPlayer({
   const [isFloating, setIsFloating] = useState(false);
   const [isManualFloating, setIsManualFloating] = useState(false);
   const [showControls, setShowControls] = useState(true);
-  
+
   let controlsTimeout: NodeJS.Timeout;
 
   // Wrapper for setIsFloating to handle scroll-on-restore and sync state
@@ -39,9 +39,9 @@ export function VideoPlayer({
     if (videoRef.current) {
       setCurrentTime(videoRef.current.currentTime);
     }
-    
+
     setIsFloating(floating);
-    
+
     if (!floating) {
       setIsManualFloating(false);
       if (containerRef.current) {
@@ -55,15 +55,15 @@ export function VideoPlayer({
     const video = videoRef.current;
     if (video) {
       if (Math.abs(video.currentTime - currentTime) > 0.5) {
-         video.currentTime = currentTime;
+        video.currentTime = currentTime;
       }
       if (isPlaying) {
-         const playPromise = video.play();
-         if (playPromise !== undefined) {
-            playPromise.catch(error => {
-               console.log("Playback interrupted during switch:", error);
-            });
-         }
+        const playPromise = video.play();
+        if (playPromise !== undefined) {
+          playPromise.catch(error => {
+            console.log("Playback interrupted during switch:", error);
+          });
+        }
       }
     }
   }, [isFloating]);
@@ -76,11 +76,11 @@ export function VideoPlayer({
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (isPlaying && !entry.isIntersecting && !isFloating) {
-           if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
-           setIsFloating(true);
+          if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
+          setIsFloating(true);
         } else if (entry.isIntersecting && isFloating && !isManualFloating) {
-           if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
-           handleSetFloating(false);
+          if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
+          handleSetFloating(false);
         }
       },
       { threshold: 0.2 }
@@ -179,16 +179,16 @@ export function VideoPlayer({
       <FloatingMediaWrapper
         isFloating={isFloating}
         setIsFloating={handleSetFloating}
-        onCloseMedia={() => {
+        onClose={() => {
           setIsPlaying(false);
-          setIsFloating(false); 
+          setIsFloating(false);
           if (videoRef.current) videoRef.current.pause();
         }}
         title={title}
-        aspectRatio={16/9}
+        aspectRatio={16 / 9}
         className="w-full h-full"
       >
-        <div 
+        <div
           className="relative w-full h-full bg-black group overflow-hidden"
           onMouseMove={handleMouseMove}
           onMouseLeave={() => isPlaying && setShowControls(false)}
@@ -205,12 +205,12 @@ export function VideoPlayer({
           {!isPlaying && (
             <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
               <div className="w-16 h-16 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center border border-white/20 shadow-2xl">
-                 <Play className="w-8 h-8 text-white ml-1" fill="white" />
+                <Play className="w-8 h-8 text-white ml-1" fill="white" />
               </div>
             </div>
           )}
 
-          <div 
+          <div
             className={cn(
               "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300",
               showControls ? "opacity-100" : "opacity-0"
@@ -263,18 +263,18 @@ export function VideoPlayer({
               </div>
 
               <div className="flex items-center gap-2">
-                 <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-white hover:bg-white/20 h-8 w-8"
-                    onClick={() => {
-                      if (!isFloating) setIsManualFloating(true);
-                      handleSetFloating(!isFloating);
-                    }}
-                    title={isFloating ? "Restaurar" : "Pop-out Player"}
-                  >
-                    {isFloating ? <Maximize className="w-4 h-4" /> : <PictureInPicture className="w-4 h-4" />}
-                  </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-white hover:bg-white/20 h-8 w-8"
+                  onClick={() => {
+                    if (!isFloating) setIsManualFloating(true);
+                    handleSetFloating(!isFloating);
+                  }}
+                  title={isFloating ? "Restaurar" : "Pop-out Player"}
+                >
+                  {isFloating ? <Maximize className="w-4 h-4" /> : <PictureInPicture className="w-4 h-4" />}
+                </Button>
               </div>
             </div>
           </div>

package/components/ui/drawer.tsx

@@ -117,6 +117,17 @@ function DrawerDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
+
+  );
+}
+
+function DrawerHandle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-handle"
+      className={cn("bg-muted mx-auto mt-4 h-2 w-[100px] shrink-0 rounded-full", className)}
+      {...props}
+    />
   );
 }
 
@@ -131,4 +142,5 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  DrawerHandle,
 };