@viji-dev/sdk 1.0.0 → 1.0.2

package/src/components/ui/ParametersMenu.tsx

@@ -1,797 +0,0 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import {
-  Button,
-  Input,
-  Slider,
-  Switch,
-  Select,
-  SelectItem,
-  Card,
-  CardBody,
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  useDisclosure,
-  Spinner,
-  Tooltip,
-} from '@heroui/react';
-import {
-  PlusIcon,
-  PencilIcon,
-  TrashIcon,
-  ArrowLeftIcon,
-} from '@heroicons/react/24/outline';
-import { useSceneSessionStore } from '../../stores/scene-player/scene-session.store';
-import { useInputManagerStore, AudioInputType, VideoInputType } from '../../stores/scene-player/input-manager.store';
-
-
-interface ParametersMenuProps {
-  className?: string;
-  hidePresetsControls?: boolean; // when true, hide presets column and save-as-preset UI (used by editor)
-}
-
-// Removed debouncing - it was making parameter updates slower
-
-// Helper function to convert thumbnail storage keys to URLs
-const getThumbnailUrl = (thumbnail: string): string => {
-  // If it's already a full URL, return as-is
-  if (thumbnail.startsWith('http://') || thumbnail.startsWith('https://')) {
-    return thumbnail;
-  }
-  
-  // If it's a storage key (like 'thumbnails/presets/id/image.webp'), 
-  // we need the backend to provide the CDN base URL
-  // For now, return the original value and let the backend handle URL construction
-  return thumbnail;
-};
-
-const ParametersMenu: React.FC<ParametersMenuProps> = ({ className = '', hidePresetsControls = false }) => {
-  const [isPresetManagementOpen, setIsPresetManagementOpen] = useState(false);
-  const [presetToDelete, setPresetToDelete] = useState<string | null>(null);
-  const [editingPresetId, setEditingPresetId] = useState<string | null>(null);
-  const [editingName, setEditingName] = useState<string>('');
-  const [draggingId, setDraggingId] = useState<string | null>(null);
-  const [orderedIds, setOrderedIds] = useState<string[]>([]);
-  
-  const { isOpen: isDeleteModalOpen, onOpen: onDeleteModalOpen, onClose: onDeleteModalClose } = useDisclosure();
-
-  // Store selectors - using stable selectors to prevent infinite loops
-  const parameters = useSceneSessionStore((state) => state.session?.parameters || {});
-  const parameterGroups = useSceneSessionStore((state) => state.session?.parameterGroups || []);
-  const availablePresets = useSceneSessionStore((state) => state.session?.availablePresets || []);
-  const activePresetId = useSceneSessionStore((state) => state.session?.activePresetId);
-  const hasUnsavedChanges = useSceneSessionStore((state) => state.session?.hasUnsavedChanges || false);
-  const isLoadingPresets = useSceneSessionStore((state) => state.isLoadingPresets);
-  const isSavingPreset = useSceneSessionStore((state) => state.isSavingPreset);
-  const presetError = useSceneSessionStore((state) => state.presetError);
-  const session = useSceneSessionStore((state) => state.session);
-  
-  // Store actions
-  const updateParameters = useSceneSessionStore((state) => state.updateParameters);
-  const applyPreset = useSceneSessionStore((state) => state.applyPreset);
-  const saveCurrentAsPreset = useSceneSessionStore((state) => state.saveCurrentAsPreset);
-  const deletePreset = useSceneSessionStore((state) => state.deletePreset);
-  const loadPresets = useSceneSessionStore((state) => state.loadPresets);
-  const renamePreset = useSceneSessionStore((state) => state.renamePreset);
-  // Note: reorderPresets not implemented in SDK store yet
-  const reorderPresets = () => console.log('reorderPresets not implemented in SDK');
-  
-  // SDK doesn't have authentication - use mock user
-  const currentUser = { id: 'sdk-user', username: 'SDK User' };
-
-  // Input state selectors
-  const inputConfiguration = useInputManagerStore((state) => state.inputConfiguration);
-
-  // Get capabilities from core and input state
-  const getCapabilities = () => {
-    // Compute capabilities based on current input configuration (immediate)
-    const configBasedAudio = inputConfiguration.audio.enabled && inputConfiguration.audio.type !== AudioInputType.NONE;
-    const configBasedVideo = inputConfiguration.video.enabled && inputConfiguration.video.type !== VideoInputType.NONE;
-    const configBasedInteraction = inputConfiguration.interactionEnabled;
-    
-    // Use configuration-based capabilities for immediate UI updates
-    return {
-      hasGeneral: true, // General parameters are always available
-      hasAudio: configBasedAudio, // Use config state for immediate response
-      hasVideo: configBasedVideo, // Use config state for immediate response
-      hasInteraction: configBasedInteraction, // Use config state for immediate response
-    };
-  };
-  
-  // Memoize capabilities to prevent infinite loops - include input state dependencies
-  const capabilities = useMemo(() => getCapabilities(), [
-    session?.coreInstance,
-    inputConfiguration.audio.enabled,
-    inputConfiguration.audio.type,
-    inputConfiguration.video.enabled,
-    inputConfiguration.video.type,
-    inputConfiguration.interactionEnabled
-  ]);
-
-  // Removed excessive debug logging that was causing performance issues on every parameter change
-
-
-  
-  // Memoize parameter structure only (values will be read on-demand)
-  const processedGroups = useMemo(() => parameterGroups.map((group: any) => {
-    const processedParameters: any[] = [];
-    
-    // Only handle object format (Record<string, ParameterDefinition>)
-    if (group.parameters && typeof group.parameters === 'object' && !Array.isArray(group.parameters)) {
-      Object.entries(group.parameters).forEach(([name, param]: [string, any]) => {
-        processedParameters.push({
-          name,
-          definition: param,
-          type: param.type || 'text',
-          min: param.config?.min,
-          max: param.config?.max,
-          step: param.config?.step,
-          options: param.config?.options || param.options,
-          label: param.label || name.replace(/([A-Z])/g, ' $1').replace(/^./, (str: string) => str.toUpperCase()),
-          // Remove value from processing - read it on-demand in render
-        });
-      });
-    }
-    
-    return {
-      ...group,
-      processedParameters,
-    };
-  }), [parameterGroups]); // Removed parameters dependency - huge performance gain!
-
-  // PURE CORE DEMO APPROACH: Only immediate core updates, no store updates
-  const handleParameterChange = useCallback((paramName: string, value: any) => {
-    // 🚀 IMMEDIATE: Update core directly (no await, no constraints) - exactly like the demo
-    if (session?.coreInstance) {
-      session.coreInstance.setParameter(paramName, value);
-    }
-    // No store updates at all - inputs manage their own state naturally
-  }, [session?.coreInstance]);
-
-  // No cleanup needed for immediate updates
-
-  const handleApplyPreset = async (presetId: string) => {
-    try {
-      await applyPreset(presetId);
-    } catch (error) {
-      console.error('Failed to apply preset:', error);
-    }
-  };
-
-  const handleSaveAsPreset = async () => {
-    try {
-      // determine default name: Preset N (next number)
-      const base = 'Preset ';
-      let maxNum = 0;
-      availablePresets.forEach((p: any) => {
-        const m = /^Preset\s+(\d+)$/.exec(p.name.trim());
-        if (m) {
-          const n = parseInt(m[1], 10);
-          if (!Number.isNaN(n)) maxNum = Math.max(maxNum, n);
-        }
-      });
-      const defaultName = `${base}${maxNum + 1}`;
-
-      // SDK doesn't support thumbnail capture yet - skip thumbnails
-      await saveCurrentAsPreset(defaultName);
-    } catch (error) {
-      console.error('Failed to save preset:', error);
-    }
-  };
-
-  const handleDeletePreset = async () => {
-    if (!presetToDelete) return;
-    
-    try {
-      await deletePreset(presetToDelete);
-      setPresetToDelete(null);
-      onDeleteModalClose();
-    } catch (error) {
-      console.error('Failed to delete preset:', error);
-    }
-  };
-
-  const confirmDeletePreset = (presetId: string) => {
-    setPresetToDelete(presetId);
-    onDeleteModalOpen();
-  };
-
-  // Render capabilities info (like in the example)
-  const renderCapabilitiesInfo = () => (
-    <div className="mb-4 p-3 bg-black/30 rounded-lg border border-white/10">
-      <div className="text-white text-sm font-medium mb-2">📊 Active Capabilities</div>
-      <div className="space-y-1 text-xs">
-        <div className={`flex items-center space-x-2 ${capabilities.hasGeneral ? 'text-green-400' : 'text-gray-500'}`}>
-          <span>🔧</span>
-          <span>General: {capabilities.hasGeneral ? 'Always Active' : 'Inactive'}</span>
-        </div>
-        <div className={`flex items-center space-x-2 ${capabilities.hasAudio ? 'text-green-400' : 'text-gray-500'}`}>
-          <span>🎵</span>
-          <span>Audio: {capabilities.hasAudio ? 'Connected' : 'Not Connected'}</span>
-        </div>
-        <div className={`flex items-center space-x-2 ${capabilities.hasVideo ? 'text-green-400' : 'text-gray-500'}`}>
-          <span>📹</span>
-          <span>Video: {capabilities.hasVideo ? 'Connected' : 'Not Connected'}</span>
-        </div>
-        <div className={`flex items-center space-x-2 ${capabilities.hasInteraction ? 'text-green-400' : 'text-gray-500'}`}>
-          <span>🖱️</span>
-          <span>Interaction: {capabilities.hasInteraction ? 'Enabled' : 'Disabled'}</span>
-        </div>
-      </div>
-      <div className="text-white/60 text-xs mt-2">
-        Only parameters for active capabilities are shown below.
-      </div>
-    </div>
-  );
-
-  // Drag-and-drop ordering (HTML5 DnD)
-  useEffect(() => {
-    if (!draggingId) {
-      setOrderedIds(availablePresets.map((p: any) => p.id));
-    }
-  }, [availablePresets, draggingId]);
-
-  const onDragStart = (id: string) => {
-    setDraggingId(id);
-    setOrderedIds(availablePresets.map((p: any) => p.id));
-  };
-  const onDragOver = (e: React.DragEvent, overId: string) => {
-    e.preventDefault();
-    if (!draggingId || draggingId === overId) return;
-    setOrderedIds(prev => {
-      const next = [...prev];
-      const from = next.indexOf(draggingId);
-      const to = next.indexOf(overId);
-      if (from === -1 || to === -1) return prev;
-      next.splice(from, 1);
-      next.splice(to, 0, draggingId);
-      return next;
-    });
-  };
-  const onDrop = () => {
-    if (orderedIds.length > 0) {
-      console.log('Reorder presets - not implemented in SDK yet:', orderedIds);
-      // reorderPresets(orderedIds); // Not implemented yet
-    }
-    setDraggingId(null);
-  };
-
-  const renderParameterControl = (param: any) => {
-    const { name, type, min, max, step, options, label } = param;
-    // Read current value from store or default (inputs will handle their own responsiveness)
-    const value = parameters[name] !== undefined ? parameters[name] : param.definition?.defaultValue;
-
-    switch (type) {
-      case 'slider':
-        return (
-          <div key={`${name}-${value ?? ''}`} className="mb-3">
-            <div className="flex items-center justify-between mb-2">
-              <label className="text-white text-sm">{label || name}</label>
-              <span className="text-white/70 text-xs">{value}</span>
-            </div>
-            <Slider
-              defaultValue={value}
-              onChange={(val: number | number[]) => {
-                const numValue = Array.isArray(val) ? val[0] : val;
-                // Immediate core update for smooth scene response
-                handleParameterChange(name, numValue);
-              }}
-              onChangeEnd={(val: number | number[]) => {
-                const numValue = Array.isArray(val) ? val[0] : val;
-                // Commit to store after interaction ends to avoid UI thrash
-                updateParameters({ [name]: numValue }, true);
-              }}
-              minValue={min ?? 0}
-              maxValue={max ?? 100}
-              step={step ?? 1}
-              className="w-full"
-              color="primary"
-              size="sm"
-              aria-label={label || name}
-            />
-          </div>
-        );
-
-      case 'toggle':
-        return (
-          <div key={`${name}-${value ?? ''}`} className="flex items-center justify-between mb-3">
-            <span className="text-white text-sm">{label || name}</span>
-            <Switch
-              defaultSelected={value}
-              onValueChange={(val) => {
-                handleParameterChange(name, val);
-                updateParameters({ [name]: val }, true);
-              }}
-              color="primary"
-              size="sm"
-            />
-          </div>
-        );
-
-      case 'color':
-        return (
-          <div key={`${name}-${value ?? ''}`} className="mb-3">
-            <label className="text-white text-sm block mb-2">{label || name}</label>
-            <div className="flex items-center space-x-2">
-              <Input
-                type="color"
-                key={`${name}-colorPicker-${value ?? ''}`}
-                defaultValue={value}
-                onChange={(e) => handleParameterChange(name, e.target.value)}
-                onBlur={(e) => updateParameters({ [name]: e.target.value }, true)}
-                className="w-16 h-8"
-                size="sm"
-              />
-              <Input
-                key={`${name}-colorText-${value ?? ''}`}
-                defaultValue={String(value)}
-                onChange={(e) => handleParameterChange(name, e.target.value)}
-                onBlur={(e) => updateParameters({ [name]: e.target.value }, true)}
-                className="flex-1 text-white"
-                size="sm"
-                variant="bordered"
-                classNames={{
-                  input: "text-white",
-                  inputWrapper: "bg-black/20 border-white/20"
-                }}
-              />
-            </div>
-          </div>
-        );
-
-      case 'select':
-        // Only set selectedKeys if the value exists in options to prevent HeroUI warnings
-        const validOptions = options || [];
-        const currentValueStr = String(value);
-        const selectedKeys = validOptions.includes(currentValueStr) ? [currentValueStr] : [];
-        
-        return (
-          <div key={name} className="mb-3">
-            <Select
-              key={`${name}-${validOptions.join('-')}`}
-              label={label || name}
-              selectedKeys={selectedKeys}
-              onSelectionChange={(keys) => {
-                const selectedValue = Array.from(keys)[0];
-                handleParameterChange(name, selectedValue);
-                updateParameters({ [name]: selectedValue }, true);
-              }}
-              className="w-full visualizer-select [&_[data-slot=value]]:!text-white [&_[data-slot=value]]:!opacity-100"
-              size="sm"
-              variant="bordered"
-              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}
-            >
-              {validOptions.map((option: string) => (
-                <SelectItem 
-                  key={option} 
-                  className="text-white data-[hover=true]:bg-white/10"
-
-                >
-                  {option}
-                </SelectItem>
-              ))}
-            </Select>
-          </div>
-        );
-
-      case 'number':
-        return (
-          <div key={`${name}-${value ?? ''}`} className="mb-3">
-            <Input
-              type="number"
-              label={label || name}
-              defaultValue={String(value)}
-              onChange={(e) => handleParameterChange(name, parseFloat(e.target.value) || 0)}
-              onBlur={(e) => updateParameters({ [name]: parseFloat(e.target.value) || 0 }, true)}
-              min={min}
-              max={max}
-              step={step}
-              className="w-full"
-              size="sm"
-              variant="bordered"
-              classNames={{
-                input: "text-white",
-                inputWrapper: "bg-black/20 border-white/20",
-                label: "text-white/80"
-              }}
-            />
-          </div>
-        );
-
-      case 'text':
-      default:
-        return (
-          <div key={`${name}-${value ?? ''}`} className="mb-3">
-            <Input
-              label={label || name}
-              defaultValue={String(value)}
-              onChange={(e) => handleParameterChange(name, e.target.value)}
-              onBlur={(e) => updateParameters({ [name]: e.target.value }, true)}
-              className="w-full"
-              size="sm"
-              variant="bordered"
-              classNames={{
-                input: "text-white",
-                inputWrapper: "bg-black/20 border-white/20",
-                label: "text-white/80"
-              }}
-            />
-          </div>
-        );
-    }
-  };
-
-  // Render parameter group (like in the example)
-  const renderParameterGroup = (group: any) => {
-    if (group.processedParameters.length === 0) return null;
-
-    return (
-      <div key={group.groupName} className="mb-4">
-        <div className="bg-black/40 border border-white/20 rounded-lg">
-          <div className="px-3 py-2 border-b border-white/10 flex items-center justify-between">
-            <span className="text-white font-medium text-sm">{group.groupName}</span>
-            <span className="text-white/60 text-xs">−</span>
-          </div>
-          <div className="p-3 space-y-2">
-            {group.processedParameters.map((param: any) => renderParameterControl(param))}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  if (!session) {
-    return (
-      <div className="p-4 text-center text-white/60">
-        <p>No active scene</p>
-      </div>
-    );
-  }
-
-  if (processedGroups.length === 0) {
-    return (
-      <div className="p-4 text-center text-white/60">
-        <p>Loading parameters...</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`flex h-full ${className}`}>
-      {/* Presets Panel */}
-      {!hidePresetsControls && (
-      <div className={`${isPresetManagementOpen ? 'w-full' : 'w-24'} bg-black/50 border-r border-white/10 transition-all duration-300`}>
-        {isPresetManagementOpen ? (
-          /* Full Preset Management View */
-          <div className="p-4 h-full flex flex-col">
-            {/* Header */}
-            <div className="flex items-center justify-between mb-4">
-              <Button
-                isIconOnly
-                variant="flat"
-                size="sm"
-                className="text-white/60 hover:text-white"
-                onPress={() => setIsPresetManagementOpen(false)}
-              >
-                <ArrowLeftIcon className="w-4 h-4" />
-              </Button>
-              <h3 className="text-white font-medium">Manage Presets</h3>
-              <div className="w-8" /> {/* Spacer */}
-            </div>
-
-            {/* Preset List */}
-            <div className="flex-1 overflow-y-auto space-y-2">
-              {isLoadingPresets ? (
-                <div className="text-center py-8">
-                  <Spinner color="primary" size="sm" />
-                  <p className="text-white/60 text-sm mt-2">Loading presets...</p>
-                </div>
-              ) : presetError ? (
-                <div className="text-center py-8 text-red-400">
-                  <p className="text-sm">Failed to load presets</p>
-                  <p className="text-xs text-white/60 mt-1">{presetError}</p>
-                  <Button
-                    size="sm"
-                    variant="flat"
-                    className="mt-3 bg-white/10 text-white"
-                    onPress={() => session?.sceneId && loadPresets(session.sceneId)}
-                    isLoading={isLoadingPresets}
-                  >
-                    Retry
-                  </Button>
-                </div>
-              ) : availablePresets.length === 0 ? (
-                <div className="text-center py-8 text-white/60">
-                  <p className="text-sm">No presets available</p>
-                  <p className="text-xs mt-1">Create your first preset to get started</p>
-                </div>
-              ) : (
-                (availablePresets as any[])
-                  .slice()
-                  .sort((a: any, b: any) => orderedIds.indexOf(a.id) - orderedIds.indexOf(b.id))
-                  .map((preset: any) => (
-                  <Card
-                    key={preset.id}
-                    className={`w-full bg-white/5 hover:bg-white/10 transition-colors ${
-                      activePresetId === preset.id ? 'ring-1 ring-primary-400' : ''
-                    }`}
-                    isPressable
-                    onPress={() => handleApplyPreset(preset.id)}
-                    draggable
-                    onDragStart={() => onDragStart(preset.id)}
-                    onDragOver={(e) => onDragOver(e, preset.id)}
-                    onDrop={onDrop}
-                  >
-                    <CardBody className="p-3">
-                      <div className="flex items-center justify-between gap-3">
-                        {/* Thumbnail on the left */}
-                        <div className="w-14 h-14 rounded border border-white/10 flex-shrink-0 overflow-hidden bg-viji-pattern">
-                          {preset.thumbnail ? (
-                            <img
-                              src={getThumbnailUrl(preset.thumbnail)}
-                              alt={preset.name}
-                              className="w-full h-full object-cover"
-                              onError={(e) => {
-                                const target = e.currentTarget as HTMLImageElement;
-                                target.style.display = 'none';
-                              }}
-                            />
-                          ) : null}
-                        </div>
-
-                        {/* Title/Name center (click to apply) */}
-                        <div 
-                          className="flex-1 min-w-0"
-                        >
-                          {editingPresetId === preset.id ? (
-                            <Input
-                              size="sm"
-                              variant="bordered"
-                              classNames={{ input: 'text-white', inputWrapper: 'bg-black/20 border-white/20' }}
-                              value={editingName}
-                              autoFocus
-                              onChange={(e) => setEditingName(e.target.value)}
-                              onClick={(e) => e.stopPropagation()}
-                              onBlur={async () => {
-                                const name = editingName.trim();
-                                setEditingPresetId(null);
-                                if (name && name !== preset.name) {
-                                  await renamePreset(preset.id, name);
-                                }
-                              }}
-                              onKeyDown={async (e) => {
-                                if (e.key === 'Enter') {
-                                  const name = editingName.trim();
-                                  (e.target as HTMLInputElement).blur();
-                                  if (name && name !== preset.name) {
-                                    await renamePreset(preset.id, name);
-                                  }
-                                } else if (e.key === 'Escape') {
-                                  setEditingPresetId(null);
-                                }
-                              }}
-                            />
-                          ) : (
-                            <>
-                              <h4 className="text-white text-sm font-medium truncate">{preset.name}</h4>
-                              <p className="text-white/60 text-xs">{new Date(preset.created).toLocaleDateString()}</p>
-                            </>
-                          )}
-                        </div>
-
-                        {/* Actions on the right in one row */}
-                        <div className="flex items-center gap-1 ml-2" onClick={(e) => e.stopPropagation()}>
-                          <Tooltip content="Edit name">
-                            <Button
-                              isIconOnly
-                              size="sm"
-                              variant="flat"
-                              className="text-white/60 hover:text-white min-w-6 h-6"
-                              onPress={() => { setEditingPresetId(preset.id); setEditingName(preset.name); }}
-                            >
-                              <PencilIcon className="w-3 h-3" />
-                            </Button>
-                          </Tooltip>
-                          
-                          <Tooltip content="Delete">
-                            <Button
-                              isIconOnly
-                              size="sm"
-                              variant="flat"
-                              className="text-red-400 hover:text-red-300 min-w-6 h-6"
-                              onPress={() => { confirmDeletePreset(preset.id); }}
-                            >
-                              <TrashIcon className="w-3 h-3" />
-                            </Button>
-                          </Tooltip>
-                        </div>
-                      </div>
-                    </CardBody>
-                  </Card>
-                ))
-              )}
-            </div>
-          </div>
-        ) : (
-          /* Narrow Preset Thumbnails View */
-          <div className="p-2 h-full flex flex-col">
-            {/* Edit Button */}
-            <Tooltip content="Manage Presets" placement="right">
-              <Button
-                isIconOnly
-                variant="flat"
-                size="sm"
-                className="text-white/60 hover:text-white mb-3"
-                onPress={() => setIsPresetManagementOpen(true)}
-              >
-                <PencilIcon className="w-4 h-4" />
-              </Button>
-            </Tooltip>
-
-            {/* Preset Thumbnails */}
-            <div className="flex-1 overflow-y-auto space-y-2">
-              {availablePresets.map((preset: any) => (
-                <Tooltip key={preset.id} content={preset.name} placement="right">
-                  <Card
-                    className={`bg-white/5 hover:bg-white/10 cursor-pointer transition-colors aspect-square ${
-                      activePresetId === preset.id ? 'ring-1 ring-primary-400' : ''
-                    }`}
-                    isPressable
-                    onPress={() => handleApplyPreset(preset.id)}
-                  >
-                    <CardBody className="p-2">
-                      <div className="w-full h-full rounded overflow-hidden bg-viji-pattern">
-                        {preset.thumbnail ? (
-                          <img
-                            src={getThumbnailUrl(preset.thumbnail)}
-                            alt={preset.name}
-                            className="w-full h-full object-cover"
-                            onError={(e) => {
-                              const target = e.currentTarget as HTMLImageElement;
-                              target.style.display = 'none';
-                            }}
-                            onLoad={() => {
-                              console.debug('🖼️ [PRESET] Thumbnail loaded successfully:', {
-                                presetName: preset.name,
-                                originalThumbnail: preset.thumbnail,
-                                resolvedUrl: getThumbnailUrl(preset.thumbnail)
-                              });
-                            }}
-                          />
-                        ) : null}
-                      </div>
-                    </CardBody>
-                  </Card>
-                </Tooltip>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-      )}
-
-      {/* Parameters Panel - Like the example */}
-      {(!isPresetManagementOpen || hidePresetsControls) && (
-        <div className="flex-1 p-4 flex flex-col relative">
-          {processedGroups.length === 0 ? (
-            <div className="text-center py-8 text-white/60">
-              <p className="text-sm">No parameters available</p>
-              <p className="text-xs mt-1">Scene may still be loading...</p>
-            </div>
-          ) : (
-            <div className="flex-1 overflow-y-auto">
-              <div className="space-y-4">
-                {/* Capabilities Info (like in the example) */}
-                {renderCapabilitiesInfo()}
-
-                {/* General Group Parameters (rendered individually, not in a group) */}
-                {(() => {
-                  const generalGroup = processedGroups.find(group => group.groupName === 'general');
-                  if (generalGroup && generalGroup.processedParameters.length > 0) {
-                    return (
-                      <div className="mb-6">
-                        <div className="mb-3 pb-2 border-b border-white/10">
-                          <span className="text-white font-medium text-sm">General Controls</span>
-                        </div>
-                        <div className="space-y-3">
-                          {generalGroup.processedParameters.map(renderParameterControl)}
-                        </div>
-                      </div>
-                    );
-                  }
-                  return null;
-                })()}
-
-                {/* Other Groups (excluding general) */}
-                {processedGroups
-                  .filter((group: any) => group.groupName !== 'general')
-                  .map(renderParameterGroup)}
-              </div>
-            </div>
-          )}
-          {/* Pinned Save Area (non-scrolling) */}
-          {hasUnsavedChanges && !hidePresetsControls && (
-            <div className="p-3">
-              <Button
-                color="primary"
-                variant="flat"
-                className="w-full"
-                startContent={<PlusIcon className="w-4 h-4" />}
-                onPress={handleSaveAsPreset}
-                isDisabled={!currentUser}
-                isLoading={isSavingPreset}
-              >
-                Save as Preset
-              </Button>
-              {!currentUser && (
-                <p className="text-white/60 text-xs text-center mt-2">
-                  Login required to save presets
-                </p>
-              )}
-            </div>
-          )}
-          {isSavingPreset && (
-            <div className="absolute inset-0 z-20 flex items-center justify-center">
-              <Spinner color="primary" size="lg" />
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* No create preset modal (auto-named) */}
-
-      {/* Delete Preset Modal */}
-      {!hidePresetsControls && (
-      <Modal isOpen={isDeleteModalOpen} onClose={onDeleteModalClose}>
-        <ModalContent className="bg-black border border-white/10">
-          <ModalHeader>
-            <h3 className="text-white">Delete Preset</h3>
-          </ModalHeader>
-          <ModalBody>
-            <p className="text-white/80">
-              {(() => {
-                const p = availablePresets.find((x: any) => x.id === presetToDelete);
-                const name = p?.name ? `"${p.name}"` : 'this preset';
-                return `This will permanently delete ${name}. This action cannot be undone.`;
-              })()}
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              variant="flat"
-              onPress={onDeleteModalClose}
-            >
-              Cancel
-            </Button>
-            <Button
-              color="danger"
-              onPress={handleDeletePreset}
-              isLoading={isSavingPreset}
-            >
-              Delete
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-      )}
-    </div>
-  );
-};
-
-export default ParametersMenu;