@viji-dev/sdk 1.0.0

package/src/components/SDKPage.tsx

@@ -0,0 +1,337 @@
+import React, { useRef, useState, useEffect } from 'react';
+import CoreContainer from './core/CoreContainer';
+import FPSCounter from './ui/FPSCounter';
+import SDKMenuSystem from './ui/SDKMenuSystem';
+import QuickInputControls from './ui/QuickInputControls';
+import { useSceneSessionStore } from '../stores/scene-player/scene-session.store';
+
+interface Project {
+  id: string;
+  name: string;
+  path: string;
+  mainFile: string;
+  lastModified: Date;
+  sceneType: 'javascript' | 'typescript' | 'shader';
+  isBuilt: boolean;
+}
+
+interface SDKPageProps {
+  sceneCode?: string;
+  onSceneError?: (error: string) => void;
+  currentProject?: Project;
+  onProjectSwitch?: (project: Project) => void;
+  // Note: UI CRUD props removed - onProjectCreate, onProjectDelete, onProjectRename no longer used
+}
+
+const SDKPage: React.FC<SDKPageProps> = ({
+  sceneCode,
+  onSceneError,
+  currentProject,
+  onProjectSwitch,
+}) => {
+  const coreContainerRef = useRef<HTMLDivElement>(null);
+  const lastAppliedCodeRef = useRef<string | null>(null);
+  const lastAppliedHashRef = useRef<string | null>(null);
+
+  // Fast, stable 32-bit FNV-1a hash as hex
+  const hashString = (str: string): string => {
+    let hash = 2166136261; // FNV offset basis
+    for (let i = 0; i < str.length; i++) {
+      hash ^= str.charCodeAt(i);
+      hash = (hash * 16777619) >>> 0; // FNV prime, convert to unsigned 32-bit
+    }
+    return hash.toString(16);
+  };
+  const [showFPS] = useState(false); // TODO: Make this configurable via Settings menu
+  const [resolution] = useState(1.0); // TODO: Make this configurable via Settings menu  
+  const [frameRateMode] = useState<'full' | 'half'>('full'); // TODO: Make this configurable via Settings menu
+
+  // Debug: Log when sceneCode prop changes (simplified - HMR working)
+  useEffect(() => {
+    console.log('🔄 [SDKPage] sceneCode prop changed:', {
+      len: sceneCode?.length || 0,
+      hash: sceneCode ? hashString(sceneCode) : 'none'
+    });
+  }, [sceneCode, currentProject?.id]);
+
+  // Use session store for managing the scene session
+  const { 
+    session, 
+    createSession, 
+    initializeCore,
+    updateSession,
+    clearSession,
+    destroyCore,
+    isInitializingCore,
+    coreReady 
+  } = useSceneSessionStore();
+
+  // Create session when project changes (with race condition prevention)
+  useEffect(() => {
+    let isCurrentEffect = true; // Prevent race conditions
+    
+    const switchProject = async () => {
+      if (!isCurrentEffect) return;
+      
+      if (!currentProject) {
+        if (session) {
+          console.log('🧹 Clearing session - no current project');
+          await clearSession();
+        }
+        return;
+      }
+
+      // Only create new session if project changed and effect is still current
+      if ((!session || session.sceneId !== currentProject.id) && isCurrentEffect) {
+        // Require scene code to be ready for this project before creating session
+        if (!sceneCode || sceneCode.trim().length === 0 || !/function\s+render\s*\(/.test(sceneCode)) {
+          // Wait until valid scene code is provided via props
+          return;
+        }
+        // Clear old session first to properly destroy previous VijiCore instance
+        if (session) {
+          console.log('🧹 Clearing previous session for:', session.sceneId);
+          await clearSession();
+          // Reset hash references when switching projects to prevent false reinit
+          lastAppliedCodeRef.current = null;
+          lastAppliedHashRef.current = null;
+        }
+        
+        // Double check effect is still current after async operations
+        if (!isCurrentEffect) return;
+        
+        // IMPORTANT: Do NOT reset the input manager here. We want inputs to persist across scenes.
+        // Frontend visualizer preserves live input state between scene switches.
+        
+        console.log('🔄 Creating SDK session for new project:', currentProject.name);
+        await createSession(currentProject.id, sceneCode, currentProject.name);
+        console.log('✅ SDK session created successfully for:', currentProject.name);
+      }
+    };
+    
+    switchProject().catch(console.error);
+    
+    // Cleanup function to prevent race conditions
+    return () => {
+      isCurrentEffect = false;
+    };
+  }, [currentProject?.id, session?.sceneId, sceneCode, createSession, clearSession]); // More specific dependencies
+
+  // Update session when scene code changes (only for the active project)
+  useEffect(() => {
+    if (!session || !sceneCode) return;
+    // Avoid applying code from a different project to current session
+    if (!currentProject || session.sceneId !== currentProject.id) return;
+    if (session.sceneCode !== sceneCode) {
+      const prevHash = hashString(session.sceneCode || '');
+      const nextHash = hashString(sceneCode);
+      console.log('🔄 Updating scene code for session:', session.sceneId, {
+        prevLen: session.sceneCode?.length || 0,
+        nextLen: sceneCode.length,
+        changed: session.sceneCode !== sceneCode,
+        prevHash,
+        nextHash,
+        equalsFirstChars: session.sceneCode?.slice(0, 64) === sceneCode.slice(0, 64)
+      });
+      updateSession({ sceneCode });
+    } else {
+      console.log('⏭️ Scene code unchanged (no update applied):', session.sceneId, {
+        len: sceneCode.length
+      });
+    }
+  }, [session?.sceneId, currentProject?.id, sceneCode, updateSession]);
+
+  // When scene code changes for the active project and a core is running, reinitialize core (like Editor refresh)
+  useEffect(() => {
+    const reinit = async () => {
+      console.log('🔄 [SDKPage] Scene code effect triggered:', {
+        hasSession: !!session,
+        hasSceneCode: !!sceneCode,
+        sceneCodeLen: sceneCode?.length || 0,
+        sceneCodeHash: sceneCode ? hashString(sceneCode) : 'none',
+        currentProject: currentProject?.id,
+        sessionSceneId: session?.sceneId,
+        hasCoreInstance: !!session?.coreInstance,
+        coreReady,
+        isInitializing: isInitializingCore
+      });
+
+      if (!session || !sceneCode) return;
+      if (!currentProject || session.sceneId !== currentProject.id) return;
+      if (!session.coreInstance) return;
+      // Avoid race with ongoing initialization; only reinit when core is fully ready
+      if (isInitializingCore || !coreReady) return;
+      // Initial core ready with no applied marker: record and skip
+      if (lastAppliedCodeRef.current === null) {
+        lastAppliedCodeRef.current = session.sceneCode;
+        lastAppliedHashRef.current = hashString(session.sceneCode || '');
+        console.log('🔄 [SDKPage] Initial code recorded:', {
+          len: session.sceneCode?.length || 0,
+          hash: lastAppliedHashRef.current
+        });
+        return;
+      }
+      // Only reinit when new code differs from what core has last applied
+      const newHash = hashString(sceneCode);
+      if (lastAppliedHashRef.current === newHash) {
+        console.log('⏭️ Reinit skipped: code already applied');
+        return;
+      }
+
+      // Only reinitialize if code contains a render function to prevent worker errors
+      if (!/function\s+render\s*\(/.test(sceneCode)) return;
+
+      console.log('♻️ Reinitializing core due to scene code update for:', session.sceneId, {
+        lastAppliedLen: lastAppliedCodeRef.current?.length || 0,
+        newLen: sceneCode.length,
+        lastAppliedHash: lastAppliedHashRef.current,
+        newHash
+      });
+      try {
+        // Mark new code as in-flight to prevent loops
+        lastAppliedCodeRef.current = sceneCode;
+        lastAppliedHashRef.current = newHash;
+        await destroyCore();
+        // initCore effect below will pick up and initialize with new code
+      } catch (e) {
+        console.error('Failed to reinitialize core:', e);
+      }
+    };
+    reinit();
+  }, [sceneCode, currentProject?.id, session?.sceneId, session?.coreInstance, session?.sceneCode, isInitializingCore, coreReady, destroyCore]);
+
+  // Update core config when settings change
+  useEffect(() => {
+    if (session) {
+      updateSession({
+        coreConfig: {
+          resolution,
+          frameRateMode,
+          allowUserInteraction: true
+        }
+      });
+    }
+  }, [session?.sceneId, resolution, frameRateMode, updateSession]); // Only run when session ID or settings change
+
+  // Initialize core when session is ready (with race condition prevention)
+  useEffect(() => {
+    let isCurrentEffect = true; // Prevent race conditions
+    
+    const initCore = async () => {
+      if (!isCurrentEffect) return;
+      
+      // Only initialize if this effect is still current and conditions are met
+      if (!session || !session.sceneCode || session.coreInstance || !coreContainerRef.current) {
+        return;
+      }
+      // Ensure scene code contains a render() function to avoid worker errors
+      if (!/function\s+render\s*\(/.test(session.sceneCode)) {
+        return;
+      }
+      
+      const container = coreContainerRef.current.querySelector('#viji-core-host') as HTMLElement;
+      if (!container) {
+        console.warn('🚫 Skipping Core initialization: container not ready');
+        return;
+      }
+
+      try {
+        console.log('🚀 Initializing core for session:', session.sceneId);
+        await initializeCore(container);
+        
+        if (isCurrentEffect) {
+          console.log('✅ Core initialized successfully for:', session.sceneId);
+          // After successful init, record the code currently running in core
+          try {
+            lastAppliedCodeRef.current = session.sceneCode;
+            lastAppliedHashRef.current = hashString(session.sceneCode || '');
+          } catch {}
+        }
+      } catch (error) {
+        if (isCurrentEffect) {
+          console.error('❌ Failed to initialize core:', error);
+          onSceneError?.(error instanceof Error ? error.message : 'Failed to initialize scene');
+        }
+      }
+    };
+    
+    initCore();
+    
+    // Cleanup function to prevent race conditions
+    return () => {
+      isCurrentEffect = false;
+    };
+  }, [session?.sceneId, session?.sceneCode, session?.coreInstance, initializeCore, onSceneError]); // Re-run when session changes
+
+  // Settings and FPS toggle handlers would be implemented when needed
+  // const handleSettingsChange = (settings: any) => {
+  //   if (settings.resolution !== undefined) setResolution(settings.resolution);
+  //   if (settings.frameRateMode !== undefined) setFrameRateMode(settings.frameRateMode);
+  // };
+  // const handleFPSToggle = (show: boolean) => setShowFPS(show);
+
+  return (
+    <div className="fixed inset-0 bg-black overflow-hidden">
+      {/* Core container - Full screen since no editor sidebar */}
+      <div className="w-full h-full relative">
+        {/* Core host */}
+        <div 
+          ref={coreContainerRef}
+          className="w-full h-full"
+        >
+          {session ? (
+            <CoreContainer
+              session={session}
+              className="w-full h-full"
+              onError={onSceneError}
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-white/60">
+              <div className="text-center">
+                <div className="text-white">No scene loaded</div>
+                <div className="text-sm">Switch to a project to load a scene</div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Overlay: top header with logo */}
+        <div className="absolute top-0 left-0 right-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+          <div className="flex items-center justify-center pointer-events-auto">
+            <div className="bg-black/20 backdrop-blur-sm rounded-lg px-4 py-2 border border-white/10">
+              <div className="flex items-center space-x-2">
+                <div className="w-8 h-8 bg-gradient-to-br from-primary-400 to-primary-600 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">V</span>
+                </div>
+                <span className="text-white font-semibold tracking-wide">Viji SDK</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Menu system - Projects, Parameters, Settings (always visible like in play mode) */}
+        <SDKMenuSystem 
+          currentProject={currentProject}
+          onProjectSwitch={onProjectSwitch}
+        />
+
+              {/* Bottom-right input controls - place directly to avoid full-screen overlay capturing clicks */}
+              <QuickInputControls 
+                className="bottom-4 right-4 z-60"
+                onSetControlsPinned={(pinned) => {
+                  console.log('🔧 Controls pinned:', pinned);
+                }}
+              />
+
+        {/* FPS Counter - bottom center */}
+        <FPSCounter 
+          className="bottom-6 absolute left-1/2 transform -translate-x-1/2" 
+          show={showFPS}
+          coreInstance={session?.coreInstance}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SDKPage;

package/src/components/core/CoreContainer.tsx

@@ -0,0 +1,126 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import type { ScenePlayerSession } from '../../stores/scene-player/scene-session.store';
+
+interface CoreContainerProps {
+  className?: string;
+  session: ScenePlayerSession;
+  onError?: (error: string) => void;
+}
+
+const CoreContainer = forwardRef<HTMLDivElement, CoreContainerProps>(
+  ({ className = '', session, onError }, ref) => {
+    const mountedRef = useRef(false);
+    const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const containerRef = useRef<HTMLDivElement>(null);
+    
+    const scheduleResolutionUpdate = () => {
+      if (!session.coreInstance || !mountedRef.current) return;
+      // Avoid propagating zero-size updates that can destabilize the core
+      const el = containerRef.current;
+      if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      resizeTimeoutRef.current = setTimeout(async () => {
+        const elt = containerRef.current;
+        if (
+          session.coreInstance &&
+          mountedRef.current &&
+          elt &&
+          elt.clientWidth > 0 &&
+          elt.clientHeight > 0
+        ) {
+          try {
+            await session.coreInstance.updateResolution();
+          } catch (error) {
+            console.warn('⚠️ Error updating Core resolution:', error);
+            onError?.('Failed to update scene resolution');
+          }
+        }
+      }, 50);
+    };
+
+    // Handle window resize events with debouncing
+    useEffect(() => {
+      const handleResize = () => scheduleResolutionUpdate();
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
+      };
+    }, [session.coreInstance]);
+
+    // Observe container size changes (e.g., padding changes when editor sidebar resizes)
+    useEffect(() => {
+      if (!containerRef.current) return;
+      if (!(window as any).ResizeObserver) return;
+      const ro = new (window as any).ResizeObserver(() => {
+        scheduleResolutionUpdate();
+      });
+      ro.observe(containerRef.current);
+      return () => {
+        try { ro.disconnect(); } catch {}
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef.current, session.coreInstance]);
+    
+    // Handle core errors
+    useEffect(() => {
+      if (session.coreInstance && mountedRef.current) {
+        // Listen for core errors if the API supports it
+        // This would depend on the actual @viji-dev/core API
+        try {
+          // session.coreInstance.onError?.(onError);
+        } catch (error) {
+          console.warn('Core error handling not available:', error);
+        }
+      }
+    }, [session.coreInstance, onError]);
+    
+    // Track mounting state
+    useEffect(() => {
+      mountedRef.current = true;
+      return () => {
+        mountedRef.current = false;
+      };
+    }, []);
+    
+    return (
+      <div 
+        ref={containerRef}
+        className={`relative bg-black ${className}`}
+        style={{
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        {/* VijiCore Container - React hands control to VijiCore */}
+        <div
+          id="viji-core-host"
+          ref={ref}
+          className="absolute inset-0 bg-black"
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
+          // This div is for VijiCore only - no React children!
+        />
+        
+        {/* Loading Overlay - Managed by React, separate from VijiCore */}
+        {!session.coreInstance && mountedRef.current && session.sceneCode && (
+          <div className="absolute inset-0 flex items-center justify-center text-white/50 pointer-events-none z-10">
+            <div className="text-center">
+              <div className="w-8 h-8 border-2 border-white/20 border-t-white/60 rounded-full animate-spin mx-auto mb-4"></div>
+              <p>Preparing scene...</p>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+CoreContainer.displayName = 'CoreContainer';
+
+export default CoreContainer;

package/src/components/ui/DeviceSelectionList.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect } from 'react';
+import { Button } from '@heroui/react';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { useInputManagerStore } from '../../stores/scene-player/input-manager.store';
+
+interface DeviceSelectionListProps {
+  deviceType: 'audio' | 'video';
+  onDeviceSelect?: (deviceId: string, deviceLabel: string) => void;
+}
+
+const DeviceSelectionList: React.FC<DeviceSelectionListProps> = ({
+  deviceType,
+  onDeviceSelect
+}) => {
+  const {
+    availableDevices,
+    inputConfiguration,
+    refreshAvailableDevices,
+    selectAudioDevice,
+    selectVideoDevice,
+    requestPermissions,
+    syncDevicesFromActiveStreams
+  } = useInputManagerStore();
+
+  const currentDeviceId = deviceType === 'audio' 
+    ? inputConfiguration.audio.deviceId 
+    : inputConfiguration.video.deviceId;
+
+  const devices = deviceType === 'audio' 
+    ? availableDevices.audioDevices 
+    : availableDevices.videoDevices;
+    
+  useEffect(() => {
+    let cancelled = false;
+    const loadDevices = async () => {
+      // Request permissions first to ensure we can see device labels
+      const permissionGranted = await requestPermissions(
+        deviceType === 'audio',
+        deviceType === 'video'
+      );
+      
+      if (!permissionGranted) return;
+      if (cancelled) return;
+      await refreshAvailableDevices();
+      if (cancelled) return;
+      // After enumeration, sync active stream device IDs to ensure first-open highlighting
+      syncDevicesFromActiveStreams();
+    };
+
+    // Slight delay to avoid clashing with popover open focus/aria changes
+    const t = setTimeout(() => { loadDevices().catch(console.error); }, 50);
+    return () => { cancelled = true; clearTimeout(t); };
+  }, [deviceType, requestPermissions, refreshAvailableDevices, syncDevicesFromActiveStreams]);
+
+  // Proactive sync when devices or streams change to keep highlighting correct without reopening
+  useEffect(() => {
+    syncDevicesFromActiveStreams();
+  }, [
+    syncDevicesFromActiveStreams,
+    availableDevices.audioDevices,
+    availableDevices.videoDevices,
+    inputConfiguration.audio.stream,
+    inputConfiguration.video.stream
+  ]);
+
+  // Debug: Track highlight changes
+  useEffect(() => {
+    console.log(`🎯 [HIGHLIGHT] ${deviceType} currentDeviceId changed`, {
+      deviceType,
+      currentDeviceId,
+      devices: devices.map(d => ({ id: d.deviceId, label: d.label })),
+      isMatchAny: devices.some(d => d.deviceId === currentDeviceId)
+    });
+  }, [currentDeviceId, deviceType]);
+
+  const handleDeviceSelect = async (deviceId: string, deviceLabel: string) => {
+    try {
+      if (deviceType === 'audio') {
+        await selectAudioDevice(deviceId, deviceLabel);
+      } else {
+        await selectVideoDevice(deviceId, deviceLabel);
+      }
+      onDeviceSelect?.(deviceId, deviceLabel);
+    } catch (error) {
+      console.error(`❌ [DeviceSelectionList] Failed to select ${deviceType} device:`, error);
+    }
+  };
+
+  if (devices.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-400">
+        <p>No {deviceType} devices found</p>
+        <Button
+          size="sm"
+          variant="flat"
+          className="mt-2 bg-white/10 text-white hover:bg-white/20"
+          onPress={() => refreshAvailableDevices()}
+        >
+          Refresh Devices
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {devices.map((device) => {
+        const isSelected = device.deviceId === currentDeviceId;
+        const deviceName = device.label || `${deviceType} Device`;
+        
+        return (
+          <Button
+            key={device.deviceId}
+            variant="flat"
+            className={`w-full justify-start px-3 py-2 h-auto min-h-0 pointer-events-auto ${
+              isSelected 
+                ? 'bg-white/20 text-white' 
+                : 'bg-transparent text-gray-300 hover:bg-white/10 hover:text-white'
+            }`}
+            onPress={() => handleDeviceSelect(device.deviceId, deviceName)}
+          >
+            <div className="flex items-center w-full">
+              <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>
+              <span className="text-left truncate">{deviceName}</span>
+            </div>
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DeviceSelectionList;

package/src/components/ui/FPSCounter.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface FPSCounterProps {
+  className?: string;
+  show?: boolean;
+  coreInstance?: any;
+}
+
+const FPSCounter: React.FC<FPSCounterProps> = ({ 
+  className = '', 
+  show = false, 
+  coreInstance 
+}) => {
+  const [effectiveRefreshRate, setEffectiveRefreshRate] = useState<number | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const lastUpdateRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (!show) {
+      setEffectiveRefreshRate(null);
+    }
+  }, [show]);
+
+  useEffect(() => {
+    const update = (now: number) => {
+      if (!show) return;
+      // Throttle to ~2 Hz to keep overhead negligible
+      if (now - lastUpdateRef.current < 500) {
+        rafRef.current = requestAnimationFrame(update);
+        return;
+      }
+      lastUpdateRef.current = now;
+      try {
+        const stats = coreInstance?.getStats?.();
+        const value = stats?.frameRate?.effectiveRefreshRate;
+        if (typeof value === 'number' && !Number.isNaN(value)) {
+          setEffectiveRefreshRate(value);
+        } else {
+          setEffectiveRefreshRate(null);
+        }
+      } catch {
+        setEffectiveRefreshRate(null);
+      }
+      rafRef.current = requestAnimationFrame(update);
+    };
+
+    if (show) {
+      rafRef.current = requestAnimationFrame(update);
+      return () => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      };
+    }
+    return;
+  }, [show, coreInstance]);
+
+  if (!show) return null;
+
+  return (
+    <div
+      className={
+        `pointer-events-none absolute left-1/2 transform -translate-x-1/2 z-60 ` +
+        `bg-black/60 backdrop-blur-sm text-white px-3 py-1 rounded-full border border-white/20 ` +
+        `text-xs font-medium ${className}`
+      }
+      aria-label="Frames per second"
+      role="status"
+    >
+      {effectiveRefreshRate !== null ? `${Math.round(effectiveRefreshRate)} FPS` : '— FPS'}
+    </div>
+  );
+};
+
+export default FPSCounter;
+
+
+
+