@viji-dev/sdk 1.0.0 → 1.0.2

package/src/components/ui/FileDropzonePanel.tsx

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

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

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

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

@@ -1,71 +0,0 @@
-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;