@viji-dev/sdk 1.0.0 → 1.0.1

package/src/components/ui/SettingsMenu.tsx

@@ -1,346 +0,0 @@
-import React from 'react';
-import { 
-  Card, 
-  CardBody, 
-  Switch, 
-  Select, 
-  SelectItem, 
-  Button,
-  Divider,
-  Chip
-} from '@heroui/react';
-import { 
-  CogIcon, 
-  ComputerDesktopIcon,
-  EyeIcon,
-  ClockIcon 
-} from '@heroicons/react/24/outline';
-import { useSceneSessionStore } from '../../stores/scene-player/scene-session.store';
-
-interface SettingsMenuProps {
-  className?: string;
-}
-
-const SettingsMenu: React.FC<SettingsMenuProps> = ({ className = '' }) => {
-  const showFPS = useSceneSessionStore((s) => s.uiPreferences?.showFPSCounter ?? false);
-  
-  // Store selectors
-  const session = useSceneSessionStore((state) => state.session);
-  const updateCoreConfig = useSceneSessionStore((state) => state.updateCoreConfig);
-  const setShowFPSCounter = useSceneSessionStore((state) => state.setShowFPSCounter);
-  
-  // Get current settings from core config
-  const currentResolution = (session?.coreConfig as any)?.resolution ?? 1.0;
-  const currentFrameRateMode = session?.coreConfig?.frameRateMode || 'full';
-
-  const handleResolutionChange = async (resolution: string) => {
-    const resolutionValue = parseFloat(resolution);
-    try {
-      await updateCoreConfig({ resolution: resolutionValue });
-    } catch (error) {
-      console.error('Failed to update resolution:', error);
-    }
-  };
-
-  const handleFrameRateChange = async (frameRateMode: string) => {
-    try {
-      await updateCoreConfig({ frameRateMode: frameRateMode as 'full' | 'half' });
-    } catch (error) {
-      console.error('Failed to update frame rate:', error);
-    }
-  };
-
-  const handleShowFPSChange = (show: boolean) => {
-    setShowFPSCounter(show);
-  };
-
-  const getResolutionLabel = (resolution: number) => {
-    switch (resolution) {
-      case 1.0:
-        return 'Full (1.0x)';
-      case 0.5:
-        return 'Half (0.5x)';
-      case 0.75:
-        return 'High (0.75x)';
-      case 0.25:
-        return 'Low (0.25x)';
-      default:
-        return `Custom (${resolution}x)`;
-    }
-  };
-
-  const getFrameRateLabel = (mode: string) => {
-    switch (mode) {
-      case 'full':
-        return 'Full (60 FPS)';
-      case 'half':
-        return 'Half (30 FPS)';
-      default:
-        return mode;
-    }
-  };
-
-  const resolutionOptions = [
-    { value: '1.0', label: 'Full Resolution', description: '100% of canvas size (recommended)' },
-    { value: '0.75', label: 'High Resolution', description: '75% of canvas size' },
-    { value: '0.5', label: 'Half Resolution', description: '50% of canvas size' },
-    { value: '0.25', label: 'Low Resolution', description: '25% of canvas size' },
-  ];
-
-  const frameRateOptions = [
-    { value: 'full', label: 'Full Frame Rate', description: '60 FPS (smooth)' },
-    { value: 'half', label: 'Half Frame Rate', description: '30 FPS (battery saving)' },
-  ];
-  
-  // Ensure the selected keys match available options
-  const selectedResolutionKey = resolutionOptions.find(opt => parseFloat(opt.value) === currentResolution)?.value || '1.0';
-  const selectedFrameRateKey = frameRateOptions.find(opt => opt.value === currentFrameRateMode)?.value || 'full';
-
-  if (!session) {
-    return (
-      <div className="p-4 text-center text-white/60">
-        <p>No active scene</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`h-full p-4 overflow-y-auto ${className}`}>
-      {/* Render Settings Section */}
-      <div className="space-y-6">
-        <Card className="bg-white/5">
-          <CardBody className="p-4">
-            <div className="flex items-center space-x-2 mb-4">
-              <ComputerDesktopIcon className="w-5 h-5 text-primary-400" />
-              <h3 className="text-white font-medium">Render Settings</h3>
-            </div>
-
-            <div className="space-y-4">
-              {/* Resolution Setting */}
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <label className="text-white text-sm font-medium">
-                    Resolution
-                  </label>
-                  <Chip 
-                    size="sm" 
-                    variant="flat" 
-                    color="primary"
-                    className="text-xs"
-                  >
-                    {getResolutionLabel(currentResolution)}
-                  </Chip>
-                </div>
-                
-                <Select
-                  selectedKeys={[selectedResolutionKey]}
-                  onSelectionChange={(keys) => {
-                    const selectedValue = Array.from(keys)[0];
-                    if (selectedValue) {
-                      handleResolutionChange(selectedValue as string);
-                    }
-                  }}
-                  variant="bordered"
-                  size="sm"
-                  className="w-full visualizer-select [&_[data-slot=value]]:!text-white [&_[data-slot=value]]:!opacity-100"
-                  placeholder="Select resolution"
-                  aria-label="Resolution setting"
-                  classNames={{
-                    trigger: "bg-black/20 border-white/20 text-white data-[hover=true]:bg-black/30",
-                    label: "text-white/80",
-                    value: "!text-white !opacity-100",
-                    innerWrapper: "text-white",
-                    selectorIcon: "text-white/60",
-                    listbox: "bg-black/90",
-                    popoverContent: "bg-black/90 border border-white/20"
-                  }}
-                  style={{
-                    // @ts-ignore - Force override HeroUI CSS variables
-                    "--nextui-content1": "white",
-                    "--nextui-content1-foreground": "white",
-                    "--nextui-foreground": "white"
-                  } as any}
-                >
-                  {resolutionOptions.map((option) => (
-                    <SelectItem 
-                      key={option.value}
-                      textValue={option.label}
-                      className="text-white data-[hover=true]:bg-white/10"
-
-                    >
-                      <div className="flex flex-col">
-                        <span className="text-sm font-medium text-white">{option.label}</span>
-                        <span className="text-xs text-white/60">{option.description}</span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </Select>
-                
-                <p className="text-xs text-white/60 mt-1">
-                  Lower resolution multiplier improves performance but reduces visual quality
-                </p>
-              </div>
-
-              {/* Frame Rate Setting */}
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <label className="text-white text-sm font-medium">
-                    Frame Rate
-                  </label>
-                  <Chip 
-                    size="sm" 
-                    variant="flat" 
-                    color="secondary"
-                    className="text-xs"
-                  >
-                    {getFrameRateLabel(currentFrameRateMode)}
-                  </Chip>
-                </div>
-                
-                <Select
-                  selectedKeys={[selectedFrameRateKey]}
-                  onSelectionChange={(keys) => {
-                    const selectedValue = Array.from(keys)[0];
-                    if (selectedValue) {
-                      handleFrameRateChange(selectedValue as string);
-                    }
-                  }}
-                  variant="bordered"
-                  size="sm"
-                  className="w-full visualizer-select [&_[data-slot=value]]:!text-white [&_[data-slot=value]]:!opacity-100"
-                  placeholder="Select frame rate"
-                  aria-label="Frame rate setting"
-                  classNames={{
-                    trigger: "bg-black/20 border-white/20 text-white data-[hover=true]:bg-black/30",
-                    label: "text-white/80",
-                    value: "!text-white !opacity-100",
-                    innerWrapper: "text-white",
-                    selectorIcon: "text-white/60",
-                    listbox: "bg-black/90",
-                    popoverContent: "bg-black/90 border border-white/20"
-                  }}
-                  style={{
-                    // @ts-ignore - Force override HeroUI CSS variables
-                    "--nextui-content1": "white",
-                    "--nextui-content1-foreground": "white",
-                    "--nextui-foreground": "white"
-                  } as any}
-                >
-                  {frameRateOptions.map((option) => (
-                    <SelectItem 
-                      key={option.value}
-                      textValue={option.label}
-                      className="text-white data-[hover=true]:bg-white/10"
-
-                    >
-                      <div className="flex flex-col">
-                        <span className="text-sm font-medium text-white">{option.label}</span>
-                        <span className="text-xs text-white/60">{option.description}</span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </Select>
-                
-                <p className="text-xs text-white/60 mt-1">
-                  Half frame rate reduces CPU usage and extends battery life
-                </p>
-              </div>
-            </div>
-          </CardBody>
-        </Card>
-
-        {/* Interface Settings Section */}
-        <Card className="bg-white/5">
-          <CardBody className="p-4">
-            <div className="flex items-center space-x-2 mb-4">
-              <EyeIcon className="w-5 h-5 text-secondary-400" />
-              <h3 className="text-white font-medium">Interface Settings</h3>
-            </div>
-
-            <div className="space-y-4">
-              {/* Show FPS Setting */}
-              <div className="flex items-center justify-between">
-                <div className="flex-1">
-                  <div className="flex items-center space-x-2">
-                    <ClockIcon className="w-4 h-4 text-white/60" />
-                    <label className="text-white text-sm font-medium">
-                      Show FPS Counter
-                    </label>
-                  </div>
-                  <p className="text-xs text-white/60 mt-1">
-                    Display real-time frames per second in the bottom center
-                  </p>
-                </div>
-                <Switch
-                  isSelected={showFPS}
-                  onValueChange={handleShowFPSChange}
-                  color="secondary"
-                  size="sm"
-                />
-              </div>
-            </div>
-          </CardBody>
-        </Card>
-
-        {/* Performance Info Section */}
-        <Card className="bg-white/5">
-          <CardBody className="p-4">
-            <div className="flex items-center space-x-2 mb-4">
-              <CogIcon className="w-5 h-5 text-success-400" />
-              <h3 className="text-white font-medium">Performance Info</h3>
-            </div>
-
-            <div className="space-y-3">
-              <div className="flex justify-between text-sm">
-                <span className="text-white/60">Current Resolution:</span>
-                <span className="text-white">{getResolutionLabel(currentResolution)}</span>
-              </div>
-              
-              <div className="flex justify-between text-sm">
-                <span className="text-white/60">Frame Rate Mode:</span>
-                <span className="text-white">{getFrameRateLabel(currentFrameRateMode)}</span>
-              </div>
-              
-              <div className="flex justify-between text-sm">
-                <span className="text-white/60">Core Status:</span>
-                <span className="text-white">
-                  {session.coreInstance ? 'Active' : 'Inactive'}
-                </span>
-              </div>
-
-              <Divider className="my-3" />
-              
-              <div className="text-xs text-white/40">
-                <p>Settings are applied immediately and affect performance.</p>
-                <p className="mt-1">Lower settings recommended for older devices.</p>
-              </div>
-            </div>
-          </CardBody>
-        </Card>
-
-        {/* Reset to Defaults */}
-        <div className="pt-4">
-          <Button
-            variant="flat"
-            size="sm"
-            className="w-full text-white/60 hover:text-white"
-            onPress={async () => {
-              try {
-                await updateCoreConfig({
-                  frameRateMode: 'full'
-                });
-                setShowFPSCounter(false);
-              } catch (error) {
-                console.error('Failed to reset settings:', error);
-              }
-            }}
-          >
-            Reset to Defaults
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SettingsMenu; 

package/src/components/ui/SimpleInputControls.tsx

@@ -1,137 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Chip } from '@heroui/react';
-import { 
-  VideoCameraIcon, 
-  MicrophoneIcon, 
-  CursorArrowRaysIcon,
-  VideoCameraSlashIcon,
-  NoSymbolIcon
-} from '@heroicons/react/24/outline';
-
-interface SimpleInputControlsProps {
-  className?: string;
-}
-
-const SimpleInputControls: React.FC<SimpleInputControlsProps> = ({ className = '' }) => {
-  const [audioInput, setAudioInput] = useState<'none' | 'microphone'>('none');
-  const [videoInput, setVideoInput] = useState<'none' | 'camera'>('none');
-  const [interactionEnabled, setInteractionEnabled] = useState(true);
-
-  const handleAudioToggle = () => {
-    setAudioInput(audioInput === 'none' ? 'microphone' : 'none');
-  };
-
-  const handleVideoToggle = () => {
-    setVideoInput(videoInput === 'none' ? 'camera' : 'none');
-  };
-
-  const handleInteractionToggle = () => {
-    setInteractionEnabled(!interactionEnabled);
-  };
-
-  const getAudioIcon = () => {
-    return audioInput === 'microphone' ? MicrophoneIcon : NoSymbolIcon;
-  };
-
-  const getVideoIcon = () => {
-    return videoInput === 'camera' ? VideoCameraIcon : VideoCameraSlashIcon;
-  };
-
-  const getInteractionIcon = () => {
-    return CursorArrowRaysIcon;
-  };
-
-  return (
-    <div className={`flex flex-col space-y-2 pointer-events-auto ${className}`}>
-      {/* Audio Input Button */}
-      <div className="flex flex-col items-center">
-        <Button
-          isIconOnly
-          variant="flat"
-          className={`
-            w-12 h-12 bg-black/40 backdrop-blur-sm border border-white/20 
-            hover:bg-white/10 transition-all duration-200
-            ${audioInput === 'microphone' ? 'border-primary-500 bg-primary-500/20' : ''}
-          `}
-          onPress={handleAudioToggle}
-          aria-label={audioInput === 'microphone' ? 'Disable microphone' : 'Enable microphone'}
-        >
-          {React.createElement(getAudioIcon(), { 
-            className: `w-5 h-5 ${audioInput === 'microphone' ? 'text-primary-400' : 'text-white/60'}` 
-          })}
-        </Button>
-        {audioInput === 'microphone' && (
-          <Chip 
-            size="sm" 
-            variant="flat" 
-            color="primary"
-            className="text-xs mt-1"
-          >
-            Mic
-          </Chip>
-        )}
-      </div>
-
-      {/* Video Input Button */}
-      <div className="flex flex-col items-center">
-        <Button
-          isIconOnly
-          variant="flat"
-          className={`
-            w-12 h-12 bg-black/40 backdrop-blur-sm border border-white/20 
-            hover:bg-white/10 transition-all duration-200
-            ${videoInput === 'camera' ? 'border-primary-500 bg-primary-500/20' : ''}
-          `}
-          onPress={handleVideoToggle}
-          aria-label={videoInput === 'camera' ? 'Disable camera' : 'Enable camera'}
-        >
-          {React.createElement(getVideoIcon(), { 
-            className: `w-5 h-5 ${videoInput === 'camera' ? 'text-primary-400' : 'text-white/60'}` 
-          })}
-        </Button>
-        {videoInput === 'camera' && (
-          <Chip 
-            size="sm" 
-            variant="flat" 
-            color="primary"
-            className="text-xs mt-1"
-          >
-            Cam
-          </Chip>
-        )}
-      </div>
-
-      {/* Interaction Toggle Button */}
-      <div className="flex flex-col items-center">
-        <Button
-          isIconOnly
-          variant="flat"
-          className={`
-            w-12 h-12 bg-black/40 backdrop-blur-sm border border-white/20 
-            hover:bg-white/10 transition-all duration-200
-            ${interactionEnabled ? 'border-primary-500 bg-primary-500/20' : ''}
-          `}
-          onPress={handleInteractionToggle}
-          aria-label={interactionEnabled ? 'Disable interactions' : 'Enable interactions'}
-        >
-          {React.createElement(getInteractionIcon(), { 
-            className: `w-5 h-5 ${interactionEnabled ? 'text-primary-400' : 'text-white/60'}` 
-          })}
-        </Button>
-        {interactionEnabled && (
-          <Chip 
-            size="sm" 
-            variant="flat" 
-            color="primary"
-            className="text-xs mt-1"
-          >
-            Interactive
-          </Chip>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SimpleInputControls;
-

package/src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './styles/globals.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)