@viji-dev/sdk 1.0.0

package/src/components/ui/FileDropzonePanel.tsx

@@ -0,0 +1,120 @@
+import React, { useRef, useState } from 'react';
+import { Button } from '@heroui/react';
+import { DocumentIcon, FolderIcon } from '@heroicons/react/24/outline';
+import { useInputManagerStore } from '../../stores/scene-player/input-manager.store';
+
+interface FileDropzonePanelProps {
+  fileType: 'audio' | 'video';
+  onFilesAdded?: () => void;
+}
+
+const FileDropzonePanel: React.FC<FileDropzonePanelProps> = ({
+  fileType,
+  onFilesAdded
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { addAudioFiles, addVideoFiles } = useInputManagerStore();
+
+  const acceptedTypes = fileType === 'audio' 
+    ? 'audio/*' 
+    : 'video/*,image/*';
+
+  const handleFiles = async (files: FileList) => {
+    if (files.length === 0) return;
+
+    setIsLoading(true);
+    try {
+      const fileArray = Array.from(files);
+      
+      if (fileType === 'audio') {
+        await addAudioFiles(fileArray);
+      } else {
+        await addVideoFiles(fileArray);
+      }
+      
+      onFilesAdded?.();
+    } catch (error) {
+      console.error(`Failed to add ${fileType} files:`, error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    
+    const files = e.dataTransfer.files;
+    handleFiles(files);
+  };
+
+  const handleBrowseClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files) {
+      handleFiles(files);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Dropzone Area */}
+      <div
+        className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
+          isDragOver
+            ? 'border-primary-400 bg-primary-400/10'
+            : 'border-gray-600 bg-gray-800/30'
+        }`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <DocumentIcon className="w-12 h-12 mx-auto mb-4 text-gray-400" />
+        <p className="text-gray-300 mb-2">
+          Drag & drop {fileType} files here
+        </p>
+        <p className="text-gray-500 text-sm">or browse</p>
+      </div>
+
+      {/* Browse Button */}
+      <Button
+        variant="flat"
+        className="w-full bg-gray-700 text-white hover:bg-gray-600"
+        startContent={<FolderIcon className="w-4 h-4" />}
+        onPress={handleBrowseClick}
+        isLoading={isLoading}
+        isDisabled={isLoading}
+      >
+        {isLoading ? `Loading ${fileType} files...` : 'Browse folder'}
+      </Button>
+
+      {/* Hidden File Input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={acceptedTypes}
+        multiple
+        className="hidden"
+        onChange={handleFileInputChange}
+      />
+    </div>
+  );
+};
+
+export default FileDropzonePanel;

package/src/components/ui/FileListPanel.tsx

@@ -0,0 +1,285 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Button } from '@heroui/react';
+import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useInputManagerStore } from '../../stores/scene-player/input-manager.store';
+import MediaPlayerControls from './MediaPlayerControls';
+
+interface ScrollingTextProps {
+  text: string;
+  className?: string;
+}
+
+const ScrollingText: React.FC<ScrollingTextProps> = ({ text, className = '' }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [translateX, setTranslateX] = useState(0);
+  const [durationMs, setDurationMs] = useState(0);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const content = contentRef.current;
+    if (!container || !content) return;
+    const overflow = content.scrollWidth > container.clientWidth + 2; // tolerance
+    setIsOverflowing(overflow);
+    if (!overflow) {
+      setTranslateX(0);
+      setDurationMs(0);
+    }
+  }, [text]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    const container = containerRef.current;
+    const content = contentRef.current;
+    if (!container || !content) return;
+    const overflow = content.scrollWidth > container.clientWidth + 2;
+    if (!overflow) return;
+    const delta = content.scrollWidth - container.clientWidth;
+    // speed ~ 60px/s
+    const ms = Math.max(300, Math.round((delta / 60) * 1000));
+    setDurationMs(ms);
+    setTranslateX(-delta);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    setDurationMs(250);
+    setTranslateX(0);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`relative overflow-hidden ${className}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      title={text}
+    >
+      {/* Fade overlays */}
+      {isOverflowing && (
+        <>
+          {isHovered && (
+            <div className="pointer-events-none absolute inset-y-0 left-0 w-6 z-10" style={{
+              background: 'linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0))'
+            }} />
+          )}
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-6 z-10" style={{
+            background: 'linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0))'
+          }} />
+        </>
+      )}
+      <div
+        ref={contentRef}
+        className="whitespace-nowrap inline-block"
+        style={{
+          transform: `translateX(${translateX}px)`,
+          transition: durationMs ? `transform ${durationMs}ms linear` : undefined,
+        }}
+      >
+        {text}
+      </div>
+    </div>
+  );
+};
+
+interface FileListPanelProps {
+  fileType: 'audio' | 'video';
+  onBackToDropzone?: () => void;
+}
+
+const FileListPanel: React.FC<FileListPanelProps> = ({
+  fileType,
+  onBackToDropzone
+}) => {
+  const {
+    inputConfiguration,
+    removeAudioFile,
+    removeVideoFile,
+    playAudio,
+    playVideo
+  } = useInputManagerStore();
+
+  // Files and selection are used directly from inputConfiguration below for strict typing
+
+  const handleFileSelect = async (fileId: string) => {
+    try {
+      if (fileType === 'audio') {
+        await playAudio(fileId);
+      } else {
+        await playVideo(fileId);
+      }
+    } catch (error) {
+      console.error(`Failed to play ${fileType} file:`, error);
+    }
+  };
+
+  const handleFileRemove = (fileId: string) => {
+    if (fileType === 'audio') {
+      removeAudioFile(fileId);
+    } else {
+      removeVideoFile(fileId);
+    }
+  };
+
+  const formatDuration = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const hasNoFiles = fileType === 'audio' 
+    ? inputConfiguration.audio.files.length === 0 
+    : inputConfiguration.video.files.length === 0;
+
+  if (hasNoFiles) {
+    return (
+      <div className="text-center py-8 text-gray-400">
+        <p>No {fileType} files loaded</p>
+        <Button
+          size="sm"
+          variant="flat"
+          className="mt-2 bg-white/10 text-white hover:bg-white/20"
+          onPress={onBackToDropzone}
+        >
+          Add Files
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* File List */}
+      <div className="space-y-2 max-h-64 overflow-y-auto">
+        {fileType === 'audio'
+          ? (
+            inputConfiguration.audio.files.map((file) => {
+              const isSelected = file.id === inputConfiguration.audio.playerState.currentTrackId;
+              const displayName = file.name;
+              // Note: SDK AudioFile doesn't have title/artist properties
+
+              return (
+                <div
+                  key={file.id}
+                  className={`p-3 rounded-lg border transition-colors ${
+                    isSelected 
+                      ? 'bg-white/10 border-primary-400' 
+                      : 'bg-transparent border-gray-600 hover:bg-white/5'
+                  }`}
+                >
+                  <div className="flex items-center w-full">
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      className="flex items-center flex-1 justify-start px-0 py-0 h-auto min-h-0 bg-transparent hover:bg-transparent min-w-0"
+                      onClick={() => handleFileSelect(file.id)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          handleFileSelect(file.id);
+                        }
+                      }}
+                    >
+                      <div className="flex-shrink-0 w-5 h-5 mr-3 flex items-center justify-center">
+                        {isSelected && (
+                          <CheckIcon className="w-4 h-4 text-green-400" />
+                        )}
+                      </div>
+                      <div className="flex-1 text-left min-w-0">
+                        <ScrollingText text={displayName} className="text-white font-medium" />
+                        {typeof file.duration === 'number' && (
+                          <div className="text-gray-500 text-xs">
+                            {formatDuration(file.duration)}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <Button
+                      isIconOnly
+                      size="sm"
+                      variant="flat"
+                      className="ml-2 bg-transparent hover:bg-red-500/20 text-gray-400 hover:text-red-400"
+                      onPress={() => handleFileRemove(file.id)}
+                    >
+                      <TrashIcon className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            inputConfiguration.video.files.map((file) => {
+              const isSelected = file.id === inputConfiguration.video.playerState.currentFileId;
+              const displayName = file.name;
+
+              return (
+                <div
+                  key={file.id}
+                  className={`p-3 rounded-lg border transition-colors ${
+                    isSelected 
+                      ? 'bg-white/10 border-primary-400' 
+                      : 'bg-transparent border-gray-600 hover:bg-white/5'
+                  }`}
+                >
+                  <div className="flex items-center w-full">
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      className="flex items-center flex-1 justify-start px-0 py-0 h-auto min-h-0 bg-transparent hover:bg-transparent min-w-0"
+                      onClick={() => handleFileSelect(file.id)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          handleFileSelect(file.id);
+                        }
+                      }}
+                    >
+                      <div className="flex-shrink-0 w-5 h-5 mr-3 flex items-center justify-center">
+                        {isSelected && (
+                          <CheckIcon className="w-4 h-4 text-green-400" />
+                        )}
+                      </div>
+                      <div className="flex-1 text-left min-w-0">
+                        <ScrollingText text={displayName} className="text-white font-medium" />
+                        {typeof file.duration === 'number' && (
+                          <div className="text-gray-500 text-xs">
+                            {formatDuration(file.duration)}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <Button
+                      isIconOnly
+                      size="sm"
+                      variant="flat"
+                      className="ml-2 bg-transparent hover:bg-red-500/20 text-gray-400 hover:text-red-400"
+                      onPress={() => handleFileRemove(file.id)}
+                    >
+                      <TrashIcon className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+      </div>
+
+      {/* Media Player Controls (only for audio) */}
+      {fileType === 'audio' && <MediaPlayerControls fileType={fileType} />}
+
+      {/* Add More Files Button */}
+      <Button
+        size="sm"
+        variant="flat"
+        className="w-full bg-white/10 text-white hover:bg-white/20"
+        onPress={onBackToDropzone}
+      >
+        Add More Files
+      </Button>
+    </div>
+  );
+};
+
+export default FileListPanel;

package/src/components/ui/InputExpansionPanel.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Card } from '@heroui/react';
+
+interface InputExpansionPanelProps {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const InputExpansionPanel: React.FC<InputExpansionPanelProps> = ({
+  isOpen,
+  title,
+  children,
+  className = ""
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={`absolute right-16 w-80 pointer-events-auto z-[9999] ${className}`} style={{ zIndex: 9999 }}>
+      <Card className="bg-black/90 backdrop-blur-sm border border-white/20 rounded-xl">
+        <div className="p-4">
+          <h3 className="text-white font-medium text-lg mb-4">{title}</h3>
+          {children}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default InputExpansionPanel;

package/src/components/ui/MediaPlayerControls.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { Button, Slider } from '@heroui/react';
+import { 
+  PlayIcon, 
+  PauseIcon, 
+  BackwardIcon, 
+  ForwardIcon,
+  SpeakerWaveIcon,
+  SpeakerXMarkIcon
+} from '@heroicons/react/24/solid';
+import { useInputManagerStore } from '../../stores/scene-player/input-manager.store';
+
+interface MediaPlayerControlsProps {
+  fileType: 'audio' | 'video';
+}
+
+const MediaPlayerControls: React.FC<MediaPlayerControlsProps> = ({ fileType }) => {
+  const {
+    inputConfiguration,
+    playAudio,
+    pauseAudio,
+    playVideo,
+    pauseVideo,
+    nextTrack,
+    previousTrack,
+    seekAudio,
+    seekVideo,
+    setAudioVolume,
+    setAudioMuted
+  } = useInputManagerStore();
+
+  const playerState = fileType === 'audio' 
+    ? inputConfiguration.audio.playerState 
+    : inputConfiguration.video.playerState;
+  const mediaDuration = fileType === 'audio' 
+    ? (inputConfiguration.audio.files.find(f => f.id === inputConfiguration.audio.playerState.currentTrackId)?.duration || 0)
+    : (inputConfiguration.video.files.find(f => f.id === inputConfiguration.video.playerState.currentFileId)?.duration || 0);
+
+  const volume = inputConfiguration.audio.volume;
+  const isMuted = (inputConfiguration.audio as any).isMuted ?? (inputConfiguration.audio as any).muted;
+
+  const handlePlayPause = async () => {
+    try {
+      if (playerState.isPlaying) {
+        if (fileType === 'audio') {
+          pauseAudio();
+        } else {
+          pauseVideo();
+        }
+      } else {
+        if (fileType === 'audio') {
+          await playAudio();
+        } else {
+          await playVideo();
+        }
+      }
+    } catch (error) {
+      console.error(`Failed to ${playerState.isPlaying ? 'pause' : 'play'} ${fileType}:`, error);
+    }
+  };
+
+  const handleSeek = (time: number) => {
+    if (fileType === 'audio') {
+      seekAudio(time);
+    } else {
+      seekVideo(time);
+    }
+  };
+
+  const handleVolumeChange = (newVolume: number) => {
+    setAudioVolume(newVolume / 100);
+  };
+
+  const handleMuteToggle = () => {
+    setAudioMuted(!isMuted);
+  };
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const hasFiles = fileType === 'audio' 
+    ? inputConfiguration.audio.files.length > 0
+    : inputConfiguration.video.files.length > 0;
+
+  if (!hasFiles) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3 pt-3 border-t border-gray-600">
+      {/* Progress Bar */}
+      {mediaDuration > 0 && (
+        <div className="space-y-2">
+          <Slider
+            aria-label="Playback progress"
+            step={1}
+            minValue={0}
+            maxValue={mediaDuration}
+            value={playerState.currentTime}
+            onChange={(value) => handleSeek(value as number)}
+            className="w-full"
+            size="sm"
+            color="primary"
+          />
+          <div className="flex justify-between text-xs text-gray-400">
+            <span>{formatTime(playerState.currentTime)}</span>
+            <span>{formatTime(mediaDuration)}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Main Controls */}
+      <div className="flex items-center justify-center space-x-2">
+        <Button
+          isIconOnly
+          size="sm"
+          variant="flat"
+          className="bg-white/10 text-white hover:bg-white/20"
+          onPress={previousTrack}
+          isDisabled={!hasFiles}
+        >
+          <BackwardIcon className="w-4 h-4" />
+        </Button>
+
+        <Button
+          isIconOnly
+          variant="flat"
+          className="bg-primary-500 text-white hover:bg-primary-600 w-10 h-10"
+          onPress={handlePlayPause}
+          isDisabled={!hasFiles}
+        >
+          {playerState.isPlaying ? (
+            <PauseIcon className="w-5 h-5" />
+          ) : (
+            <PlayIcon className="w-5 h-5" />
+          )}
+        </Button>
+
+        <Button
+          isIconOnly
+          size="sm"
+          variant="flat"
+          className="bg-white/10 text-white hover:bg-white/20"
+          onPress={nextTrack}
+          isDisabled={!hasFiles}
+        >
+          <ForwardIcon className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Volume Control (Audio only) */}
+      {fileType === 'audio' && (
+        <div className="flex items-center space-x-2">
+          <Button
+            isIconOnly
+            size="sm"
+            variant="flat"
+            className="bg-transparent text-white hover:bg-white/10"
+            onPress={handleMuteToggle}
+          >
+            {isMuted ? (
+              <SpeakerXMarkIcon className="w-4 h-4" />
+            ) : (
+              <SpeakerWaveIcon className="w-4 h-4" />
+            )}
+          </Button>
+          <Slider
+            aria-label="Volume"
+            step={1}
+            minValue={0}
+            maxValue={100}
+            value={isMuted ? 0 : volume * 100}
+            onChange={(val) => {
+              const numeric = Array.isArray(val) ? val[0] : val;
+              handleVolumeChange(numeric as number);
+            }}
+            className="flex-1"
+            size="sm"
+            color="primary"
+            isDisabled={isMuted}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MediaPlayerControls;

package/src/components/ui/MenuContainer.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Button, Card, CardBody } from '@heroui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+interface MenuContainerProps {
+  isOpen: boolean;
+  activeMenu: 'projects' | 'parameters' | 'settings' | null;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const MenuContainer: React.FC<MenuContainerProps> = ({
+  isOpen,
+  activeMenu,
+  onClose,
+  children,
+  className = '',
+}) => {
+  if (!isOpen || !activeMenu) {
+    return null;
+  }
+
+  const getMenuTitle = (menu: string) => {
+    switch (menu) {
+      case 'projects': return 'Projects';
+      case 'parameters': return 'Parameters';
+      case 'settings': return 'Settings';
+      default: return menu.charAt(0).toUpperCase() + menu.slice(1);
+    }
+  };
+
+  return (
+    <div className={`absolute left-4 z-50 pointer-events-auto ${className}`} style={{ top: '72px' }}>
+      {/* Menu Panel - Using Card component like SceneInfoBar */}
+      <Card className="bg-black/20 backdrop-blur-sm border-white/10 w-[28rem]" style={{ height: 'calc(100vh - 192px)' }}>
+        <CardBody className="p-0 flex flex-col h-full">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-white/10 flex-shrink-0">
+            <h2 className="text-white font-semibold text-lg">
+              {getMenuTitle(activeMenu)}
+            </h2>
+            <Button
+              isIconOnly
+              variant="flat"
+              size="sm"
+              className="bg-white/10 text-white hover:bg-white/20 border-white/20"
+              onPress={onClose}
+              aria-label="Close menu"
+            >
+              <XMarkIcon className="w-5 h-5" />
+            </Button>
+          </div>
+
+          {/* Menu Content */}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden p-4">
+            {children}
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* Backdrop (for mobile) */}
+      <div 
+        className="fixed inset-0 bg-black/20 backdrop-blur-sm -z-10 md:hidden"
+        onClick={onClose}
+      />
+    </div>
+  );
+};
+
+export default MenuContainer;