@viji-dev/sdk 1.0.0 → 1.0.2

package/src/components/SDKPage.tsx

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

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

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

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