@viji-dev/sdk 1.0.0 → 1.0.1

package/src/components/ui/QuickInputControls.tsx

@@ -1,542 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Button, Popover, PopoverTrigger, PopoverContent, Card, CardBody } from '@heroui/react';
-import { 
-  VideoCameraIcon, 
-  MicrophoneIcon, 
-  CursorArrowRaysIcon,
-  VideoCameraSlashIcon,
-  NoSymbolIcon
-} from '@heroicons/react/24/outline';
-import { 
-  ComputerDesktopIcon,
-  DocumentIcon
-} from '@heroicons/react/24/solid';
-import { useInputManagerStore, AudioInputType, VideoInputType } from '../../stores/scene-player/input-manager.store';
-import { useSceneSessionStore } from '../../stores/scene-player/scene-session.store';
-import InputExpansionPanel from './InputExpansionPanel';
-import DeviceSelectionList from './DeviceSelectionList';
-import FileDropzonePanel from './FileDropzonePanel';
-import FileListPanel from './FileListPanel';
-
-interface QuickInputControlsProps {
-  className?: string;
-  onSetControlsPinned?: (pinned: boolean) => void;
-}
-
-type PanelType = 'devices' | 'files' | null;
-
-const QuickInputControls: React.FC<QuickInputControlsProps> = ({ className = "", onSetControlsPinned }) => {
-  // Debug refs
-  const videoContentRef = useRef<HTMLDivElement | null>(null);
-  const audioContentRef = useRef<HTMLDivElement | null>(null);
-
-  const [showVideoMenu, setShowVideoMenu] = useState(false);
-  const [showAudioMenu, setShowAudioMenu] = useState(false);
-  const videoOpenedAtRef = useRef<number>(0);
-  const audioOpenedAtRef = useRef<number>(0);
-  const clickInsideVideoRef = useRef<boolean>(false);
-  const clickInsideAudioRef = useRef<boolean>(false);
-  const [activeVideoPanel, setActiveVideoPanel] = useState<PanelType>(null);
-  const [activeAudioPanel, setActiveAudioPanel] = useState<PanelType>(null);
-  const [showFileList, setShowFileList] = useState(false);
-
-  // Toggle helpers to mirror frontend behavior (only one menu open at a time)
-  const openVideoMenu = () => {
-    setShowAudioMenu(false);
-    videoOpenedAtRef.current = Date.now();
-    setShowVideoMenu(true);
-  };
-  const openAudioMenu = () => {
-    setShowVideoMenu(false);
-    audioOpenedAtRef.current = Date.now();
-    setShowAudioMenu(true);
-  };
-  const closeVideoMenu = () => setShowVideoMenu(false);
-  const closeAudioMenu = () => setShowAudioMenu(false);
-
-  const {
-    inputConfiguration,
-    streamError,
-    setInteractionEnabled,
-    setAudioInputType,
-    setVideoInputType,
-    updateStreamsForCore,
-    setStreamError
-  } = useInputManagerStore();
-  
-  const { updateCoreConfig } = useSceneSessionStore();
-
-  // Get current input state
-  const hasVideoInput = inputConfiguration.video.type !== VideoInputType.NONE;
-  const hasAudioInput = inputConfiguration.audio.type !== AudioInputType.NONE;
-  const interactionEnabled = inputConfiguration.interactionEnabled;
-
-  // Focus video popover on open (minimal)
-  useEffect(() => {
-    if (showVideoMenu) {
-      requestAnimationFrame(() => {
-        try { videoContentRef.current?.focus?.(); } catch {}
-      });
-    }
-  }, [showVideoMenu]);
-
-  useEffect(() => {
-    if (showAudioMenu) {
-      requestAnimationFrame(() => {
-        try { audioContentRef.current?.focus?.(); } catch {}
-      });
-    }
-  }, [showAudioMenu]);
-
-  // Minimal initial outside-click guard (like visualizer)
-  useEffect(() => {
-    if (!showVideoMenu && !showAudioMenu) return;
-    const handler = (e: Event) => {
-      const now = Date.now();
-      const withinGuard = (showVideoMenu && now - (videoOpenedAtRef.current || 0) < 200) || (showAudioMenu && now - (audioOpenedAtRef.current || 0) < 200);
-      if ((e.type === 'pointerdown' || e.type === 'click') && withinGuard) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-    document.addEventListener('pointerdown', handler, true);
-    document.addEventListener('click', handler, true);
-    return () => {
-      document.removeEventListener('pointerdown', handler, true);
-      document.removeEventListener('click', handler, true);
-    };
-  }, [showVideoMenu, showAudioMenu]);
-
-  // Ensure panels close when input types change to non-panel types
-  useEffect(() => {
-    if (inputConfiguration.video.type !== VideoInputType.CAMERA && 
-        inputConfiguration.video.type !== VideoInputType.FILES) {
-      setActiveVideoPanel(null);
-    }
-  }, [inputConfiguration.video.type]);
-
-  useEffect(() => {
-    if (inputConfiguration.audio.type !== AudioInputType.MICROPHONE && 
-        inputConfiguration.audio.type !== AudioInputType.FILES) {
-      setActiveAudioPanel(null);
-    }
-  }, [inputConfiguration.audio.type]);
-
-  // Pin/unpin controls while file panels are active (both dropzone and list views)
-  useEffect(() => {
-    const filesPanelActive = activeAudioPanel === 'files' || activeVideoPanel === 'files';
-    const isAnyFilesSubpanelOpen = filesPanelActive; // dropzone or list both count
-    onSetControlsPinned?.(isAnyFilesSubpanelOpen);
-  }, [activeAudioPanel, activeVideoPanel, showFileList, onSetControlsPinned]);
-
-  const handleInteractionToggle = async () => {
-    const newState = !interactionEnabled;
-    setInteractionEnabled(newState);
-    
-    // Update VijiCore interaction state (now works at runtime!)
-    try {
-      await updateCoreConfig({
-        allowUserInteraction: newState
-      });
-    } catch (error) {
-      console.error('Failed to update interaction state:', error);
-      // Revert local state if core update failed
-      setInteractionEnabled(!newState);
-    }
-  };
-
-  const handleVideoInputChange = async (type: VideoInputType) => {
-    setShowVideoMenu(false);
-    
-    // Close audio panel when opening video panel
-    setActiveAudioPanel(null);
-    
-    // Manage panel state based on input type FIRST (before async operations)
-    if (type === VideoInputType.CAMERA) {
-      setActiveVideoPanel('devices');
-    } else if (type === VideoInputType.FILES) {
-      const hasFiles = inputConfiguration.video.files.length > 0;
-      setActiveVideoPanel('files');
-      setShowFileList(hasFiles);
-    } else {
-      // Close panel for NONE, SCREEN_VIDEO, or any other type
-      setActiveVideoPanel(null);
-    }
-    
-    // Then update the input type only if changed
-    if (inputConfiguration.video.type !== type) {
-      await setVideoInputType(type);
-    }
-    
-    // Update core only for video when type changed (avoid touching audio)
-    if (inputConfiguration.video.type !== type) {
-      try {
-        const streams = await updateStreamsForCore();
-        await updateCoreConfig({
-          videoStream: streams.videoStream
-        });
-      } catch (error) {
-        console.error('Failed to update video input:', error);
-      }
-    }
-  };
-
-  const handleAudioInputChange = async (type: AudioInputType) => {
-    setShowAudioMenu(false);
-    
-    // Close video panel when opening audio panel
-    setActiveVideoPanel(null);
-    
-    // Manage panel state based on input type FIRST (before async operations)
-    if (type === AudioInputType.MICROPHONE) {
-      setActiveAudioPanel('devices');
-    } else if (type === AudioInputType.FILES) {
-      const hasFiles = inputConfiguration.audio.files.length > 0;
-      setActiveAudioPanel('files');
-      setShowFileList(hasFiles);
-    } else {
-      // Close panel for NONE, SCREEN_AUDIO, or any other type
-      setActiveAudioPanel(null);
-    }
-    
-    // Then update the input type only if changed
-    if (inputConfiguration.audio.type !== type) {
-      await setAudioInputType(type);
-    }
-    
-    // Update core only for audio when type changed (avoid touching video)
-    if (inputConfiguration.audio.type !== type) {
-      try {
-        const streams = await updateStreamsForCore();
-        await updateCoreConfig({
-          audioStream: streams.audioStream
-        });
-      } catch (error) {
-        console.error('Failed to update audio input:', error);
-      }
-    }
-  };
-
-  const getVideoIcon = () => {
-    switch (inputConfiguration.video.type) {
-      case VideoInputType.CAMERA:
-        return <VideoCameraIcon className="w-5 h-5" />;
-      case VideoInputType.SCREEN_VIDEO:
-        return <ComputerDesktopIcon className="w-5 h-5" />;
-      case VideoInputType.FILES:
-        return <DocumentIcon className="w-5 h-5" />;
-      default:
-        return <VideoCameraSlashIcon className="w-5 h-5" />;
-    }
-  };
-
-  const getAudioIcon = () => {
-    switch (inputConfiguration.audio.type) {
-      case AudioInputType.MICROPHONE:
-        return <MicrophoneIcon className="w-5 h-5" />;
-      case AudioInputType.SCREEN_AUDIO:
-        return <ComputerDesktopIcon className="w-5 h-5" />;
-      case AudioInputType.FILES:
-        return <DocumentIcon className="w-5 h-5" />;
-      default:
-        return <NoSymbolIcon className="w-5 h-5" />;
-    }
-  };
-
-  // Panel management handlers
-  const handleFilesAdded = () => {
-    setShowFileList(true);
-  };
-
-  const handleBackToDropzone = () => {
-    setShowFileList(false);
-  };
-
-  // const closePanels = () => {
-  //   setActiveVideoPanel(null);
-  //   setActiveAudioPanel(null);
-  //   setShowFileList(false);
-  // };
-
-  // Close panels when clicking outside or when menus close
-  // Note: menu close now controlled by toggles
-
-  // Panel content rendering
-  const renderVideoPanelContent = () => {
-    if (activeVideoPanel === 'devices') {
-      const handleDeviceSelect = async () => {
-        try {
-          const streams = await updateStreamsForCore();
-          await updateCoreConfig({ videoStream: streams.videoStream });
-        } catch (error) {
-          console.error('Failed to apply video device stream to core:', error);
-        }
-      };
-      return <DeviceSelectionList deviceType="video" onDeviceSelect={handleDeviceSelect} />;
-    } else if (activeVideoPanel === 'files') {
-      return showFileList ? (
-        <FileListPanel fileType="video" onBackToDropzone={handleBackToDropzone} />
-      ) : (
-        <FileDropzonePanel fileType="video" onFilesAdded={handleFilesAdded} />
-      );
-    }
-    return null;
-  };
-
-  const renderAudioPanelContent = () => {
-    if (activeAudioPanel === 'devices') {
-      const handleDeviceSelect = async () => {
-        try {
-          const streams = await updateStreamsForCore();
-          await updateCoreConfig({ audioStream: streams.audioStream });
-        } catch (error) {
-          console.error('Failed to apply audio device stream to core:', error);
-        }
-      };
-      return <DeviceSelectionList deviceType="audio" onDeviceSelect={handleDeviceSelect} />;
-    } else if (activeAudioPanel === 'files') {
-      return showFileList ? (
-        <FileListPanel fileType="audio" onBackToDropzone={handleBackToDropzone} />
-      ) : (
-        <FileDropzonePanel fileType="audio" onFilesAdded={handleFilesAdded} />
-      );
-    }
-    return null;
-  };
-
-  return (
-    <div className={`absolute ${className}`}>
-      {/* Video Input Expansion Panel */}
-      <InputExpansionPanel
-        isOpen={activeVideoPanel !== null}
-        title={activeVideoPanel === 'devices' ? 'Camera' : 'Files'}
-        className="bottom-0"
-      >
-        {renderVideoPanelContent()}
-      </InputExpansionPanel>
-
-      {/* Audio Input Expansion Panel */}
-      <InputExpansionPanel
-        isOpen={activeAudioPanel !== null}
-        title={activeAudioPanel === 'devices' ? 'Microphone' : 'Files'}
-        className="bottom-0"
-      >
-        {renderAudioPanelContent()}
-      </InputExpansionPanel>
-
-      <div className="flex flex-col space-y-2 pointer-events-auto">
-        {/* Video Control */}
-        <Popover 
-          isOpen={showVideoMenu} 
-          onOpenChange={(isOpen) => {
-            if (isOpen) {
-              openVideoMenu();
-            } else {
-              // Ignore auto-closes; we close via explicit actions
-              setTimeout(() => { /* swallow */ }, 0);
-            }
-          }} 
-          placement="left"
-          shouldCloseOnBlur={false}
-          isDismissable={false}
-          shouldCloseOnInteractOutside={() => false}
-          isKeyboardDismissDisabled
-          portalContainer={typeof document !== 'undefined' ? document.getElementById('root') ?? undefined : undefined}
-          disableAnimation
-        >
-          <PopoverTrigger>
-            <Button
-              isIconOnly
-              variant="flat"
-              className={`bg-black/20 backdrop-blur-sm border border-white/10 text-white hover:bg-white/10 ${
-                hasVideoInput ? 'ring-2 ring-primary-400' : ''
-              }`}
-              aria-label={hasVideoInput ? "Video input active" : "No video input"}
-              data-role="video-trigger"
-              onPointerDownCapture={(e) => { e.stopPropagation(); clickInsideVideoRef.current = true; setTimeout(() => { clickInsideVideoRef.current = false; }, 0); }}
-              onPress={(e: any) => { e?.preventDefault?.(); e?.stopPropagation?.();
-                if (showVideoMenu) { closeVideoMenu(); } else { openVideoMenu(); }
-              }}
-            >
-              {getVideoIcon()}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent 
-            className="bg-black/90 backdrop-blur-sm border-white/20"
-            tabIndex={-1}
-            onPointerDownCapture={() => { clickInsideVideoRef.current = true; setTimeout(() => { clickInsideVideoRef.current = false; }, 0); }}
-          >
-            <Card className="bg-transparent border-0 shadow-none">
-              <CardBody className="p-3">
-                <div className="flex flex-col space-y-2">
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<ComputerDesktopIcon className="w-4 h-4" />}
-                    onPress={() => handleVideoInputChange(VideoInputType.SCREEN_VIDEO)}
-                  >
-                    Screen Share
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<DocumentIcon className="w-4 h-4" />}
-                    onPress={() => handleVideoInputChange(VideoInputType.FILES)}
-                  >
-                    Video File
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<VideoCameraIcon className="w-4 h-4" />}
-                    onPress={() => handleVideoInputChange(VideoInputType.CAMERA)}
-                  >
-                    Camera
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<NoSymbolIcon className="w-4 h-4" />}
-                    onPress={() => handleVideoInputChange(VideoInputType.NONE)}
-                  >
-                    No Input
-                  </Button>
-                </div>
-              </CardBody>
-            </Card>
-          </PopoverContent>
-        </Popover>
-
-        {/* Audio Control */}
-        <Popover 
-          isOpen={showAudioMenu} 
-          onOpenChange={(isOpen) => {
-            if (isOpen) {
-              openAudioMenu();
-            } else {
-              setTimeout(() => { /* swallow */ }, 0);
-            }
-          }} 
-          placement="left"
-          shouldCloseOnBlur={false}
-          isDismissable={false}
-          shouldCloseOnInteractOutside={() => false}
-          isKeyboardDismissDisabled
-          portalContainer={typeof document !== 'undefined' ? document.getElementById('root') ?? undefined : undefined}
-          disableAnimation
-        >
-          <PopoverTrigger>
-            <Button
-              isIconOnly
-              variant="flat"
-              className={`bg-black/20 backdrop-blur-sm border border-white/10 text-white hover:bg-white/10 ${
-                hasAudioInput ? 'ring-2 ring-primary-400' : ''
-              }`}
-              aria-label={hasAudioInput ? "Audio input active" : "No audio input"}
-              data-role="audio-trigger"
-              onPointerDownCapture={(e) => { e.stopPropagation(); clickInsideAudioRef.current = true; setTimeout(() => { clickInsideAudioRef.current = false; }, 0); }}
-              onPress={(e: any) => { e?.preventDefault?.(); e?.stopPropagation?.();
-                if (showAudioMenu) { closeAudioMenu(); } else { openAudioMenu(); }
-              }}
-            >
-              {getAudioIcon()}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent 
-            className="bg-black/90 backdrop-blur-sm border-white/20"
-            tabIndex={-1}
-            onPointerDownCapture={() => { clickInsideAudioRef.current = true; setTimeout(() => { clickInsideAudioRef.current = false; }, 0); }}
-          >
-            <Card className="bg-transparent border-0 shadow-none">
-              <CardBody className="p-3">
-                <div className="flex flex-col space-y-2">
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<ComputerDesktopIcon className="w-4 h-4" />}
-                    onPress={() => handleAudioInputChange(AudioInputType.SCREEN_AUDIO)}
-                  >
-                    Screen Audio
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<DocumentIcon className="w-4 h-4" />}
-                    onPress={() => handleAudioInputChange(AudioInputType.FILES)}
-                  >
-                    Audio File
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<MicrophoneIcon className="w-4 h-4" />}
-                    onPress={() => handleAudioInputChange(AudioInputType.MICROPHONE)}
-                  >
-                    Microphone
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="bg-white/10 text-white hover:bg-white/20 justify-start"
-                    startContent={<NoSymbolIcon className="w-4 h-4" />}
-                    onPress={() => handleAudioInputChange(AudioInputType.NONE)}
-                  >
-                    No Input
-                  </Button>
-                </div>
-              </CardBody>
-            </Card>
-          </PopoverContent>
-        </Popover>
-
-        {/* Interaction Control */}
-        <Button
-          isIconOnly
-          variant="flat"
-          className={`bg-black/20 backdrop-blur-sm border border-white/10 text-white hover:bg-white/10 ${
-            interactionEnabled ? 'ring-2 ring-primary-400' : ''
-          }`}
-          onPress={handleInteractionToggle}
-          aria-label={interactionEnabled ? "Disable interactions" : "Enable interactions"}
-        >
-          <CursorArrowRaysIcon className="w-5 h-5" />
-        </Button>
-      </div>
-
-      {/* Error Display */}
-      {streamError && (
-        <div className="absolute top-16 right-0 w-80 z-50">
-          <Card className="bg-red-900/90 backdrop-blur-sm border border-red-500/50 rounded-xl">
-            <CardBody className="p-4">
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <h4 className="text-red-100 font-medium text-sm mb-1">Device Error</h4>
-                  <p className="text-red-200 text-xs">{streamError}</p>
-                </div>
-                <Button
-                  isIconOnly
-                  size="sm"
-                  variant="light"
-                  className="text-red-200 hover:text-red-100 min-w-6 w-6 h-6"
-                  onPress={() => setStreamError('')}
-                  aria-label="Dismiss error"
-                >
-                  <NoSymbolIcon className="w-4 h-4" />
-                </Button>
-              </div>
-            </CardBody>
-          </Card>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default QuickInputControls;

package/src/components/ui/SDKMenuSystem.tsx

@@ -1,96 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Tooltip } from '@heroui/react';
-import { 
-  FolderOpenIcon, 
-  AdjustmentsHorizontalIcon, 
-  Cog6ToothIcon 
-} from '@heroicons/react/24/outline';
-import MenuContainer from './MenuContainer';
-import ProjectSwitcherMenu from './ProjectSwitcherMenu';
-import ParametersMenu from './ParametersMenu';
-import SettingsMenu from './SettingsMenu';
-
-type MenuType = 'projects' | 'parameters' | 'settings' | null;
-
-interface SDKMenuSystemProps {
-  currentProject?: any;
-  onProjectSwitch?: (project: any) => void;
-  // Note: UI CRUD removed from ProjectSwitcherMenu - onProjectCreate, onProjectDelete, onProjectRename no longer used
-}
-
-const SDKMenuSystem: React.FC<SDKMenuSystemProps> = ({
-  currentProject,
-  onProjectSwitch,
-}) => {
-  // Projects menu should be open by default as specified by user
-  const [active, setActive] = useState<MenuType>('projects');
-
-  const toggle = (type: MenuType) => setActive((prev) => (prev === type ? null : type));
-
-  return (
-    <>
-      <div className="absolute top-4 left-4 z-60 flex space-x-2 pointer-events-auto">
-        {/* Project Switcher Button - First and opened by default */}
-        <Tooltip content="Projects" placement="bottom" className="bg-black/80 text-white">
-          <Button
-            isIconOnly
-            variant={active === 'projects' ? 'solid' : 'flat'}
-            color={active === 'projects' ? 'primary' : 'default'}
-            className="bg-black/20 backdrop-blur-sm border border-white/10 text-white hover:bg-white/10"
-            onPress={() => toggle('projects')}
-            aria-label="Toggle projects"
-          >
-            <FolderOpenIcon className="w-5 h-5" />
-          </Button>
-        </Tooltip>
-
-        {/* Parameters Button */}
-        <Tooltip content="Parameters" placement="bottom" className="bg-black/80 text-white">
-          <Button
-            isIconOnly
-            variant={active === 'parameters' ? 'solid' : 'flat'}
-            color={active === 'parameters' ? 'primary' : 'default'}
-            className="bg-black/20 backdrop-blur-sm border border-white/10 text-white hover:bg-white/10"
-            onPress={() => toggle('parameters')}
-            aria-label="Toggle parameters"
-          >
-            <AdjustmentsHorizontalIcon className="w-5 h-5" />
-          </Button>
-        </Tooltip>
-
-        {/* Settings Button */}
-        <Tooltip content="Settings" placement="bottom" className="bg-black/80 text-white">
-          <Button
-            isIconOnly
-            variant={active === 'settings' ? 'solid' : 'flat'}
-            color={active === 'settings' ? 'primary' : 'default'}
-            className="bg-black/20 backdrop-blur-sm border border-white/10 text-white hover:bg-white/10"
-            onPress={() => toggle('settings')}
-            aria-label="Toggle settings"
-          >
-            <Cog6ToothIcon className="w-5 h-5" />
-          </Button>
-        </Tooltip>
-      </div>
-
-      {active && (
-        <MenuContainer isOpen={!!active} activeMenu={active as any} onClose={() => setActive(null)}>
-          {active === 'projects' && (
-            <ProjectSwitcherMenu
-              currentProject={currentProject}
-              onProjectSwitch={onProjectSwitch}
-            />
-          )}
-          {active === 'parameters' && (
-            <ParametersMenu hidePresetsControls />
-          )}
-          {active === 'settings' && (
-            <SettingsMenu />
-          )}
-        </MenuContainer>
-      )}
-    </>
-  );
-};
-
-export default SDKMenuSystem;