@viji-dev/sdk 1.0.0

package/src/components/ui/SettingsMenu.tsx

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

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

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

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