@viji-dev/sdk 1.0.0

package/src/components/ui/ParametersMenu.tsx

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