Add image upload functionality for slide editing

- Create ImageUploadField component with file upload and URL input
- Support base64 encoding for local IndexedDB storage
- Add image preview, replacement, and removal functionality
- Update SlideEditor to use ImageUploadField for image slots
- Include file validation (5MB limit, image types only)
- Add responsive design and error handling
- Integrate with existing theme system and slot detection

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

USERFLOWS.md

@@ -45,6 +45,7 @@
 - [x] User can edit presentation notes
 - [x] Changes auto-save to presentation
 - [ ] User can edit slide content without preview if desired by clicking inside content slot areas
+- [ ] When template has an image slot, slide editor allows user to upload an image (that will be stored based64 encoded in indexdb)
 
 ### Remove Slide
 - [x] User can delete slides from presentation
@@ -52,11 +53,16 @@
 - [x] Slide order adjusts automatically
 
 ### Preview Slides
-- [ ] User can preview individual slides
+- [x] User can preview individual slides
-- [ ] User can view slides in presentation mode
-- [ ] User can navigate between slides in preview
 
 ### Slide Order Management
 - [ ] User can reorder slides via drag-and-drop
 - [ ] User can see slide order visually in editor
 - [ ] Slide order automatically saves when changed
+
+## Flow #3 - Present to oudience
+- [x] User can start presentation mode from presentation editor
+- [x] User can navigate slides in presentation mode
+- [x] User can exit presentation mode
+- [ ] User can see slide notes in presenter view
+- [ ] User can control slide transitions and animations

public/themes-manifest.json

@@ -12,5 +12,5 @@
       "hasMasterSlide": true
     }
   },
-  "generated": "2025-08-21T11:51:03.695Z"
+  "generated": "2025-08-21T14:43:50.916Z"
 }

public/themes/default/layouts/image-slide.html

@@ -4,7 +4,7 @@
   </h1>
   <div class="slot image-container" data-slot="image" data-placeholder="Click to add image" data-accept="image/*">
     {{#image}}
-      <img src="{{image}}" alt="{{imageAlt}}" />
+      <img id="main-image" src="{{image}}" alt="{{imageAlt}}" />
     {{/image}}
   </div>
   <input type="text" class="slot image-alt" data-slot="image-alt" data-placeholder="Image description" data-hidden="true">

public/themes/default/style.css

@@ -69,7 +69,9 @@
   /* Ensure slot content inherits proper centering */
   text-align: inherit;
 }
-
+#main-image {
+  scale: .7;
+}
 .slot:hover,
 .slot.editing {
   border-color: var(--theme-accent);

src/App.tsx

@@ -5,6 +5,7 @@ import { LayoutDetailPage } from './components/themes/LayoutDetailPage.tsx';
 import { LayoutPreviewPage } from './components/themes/LayoutPreviewPage.tsx';
 import { NewPresentationPage } from './components/presentations/NewPresentationPage.tsx';
 import { PresentationViewer } from './components/presentations/PresentationViewer.tsx';
+import { PresentationMode } from './components/presentations/PresentationMode.tsx';
 import { PresentationEditor } from './components/presentations/PresentationEditor.tsx';
 import { SlideEditor } from './components/presentations/SlideEditor.tsx';
 import { PresentationsList } from './components/presentations/PresentationsList.tsx';
@@ -25,6 +26,7 @@ function App() {
             <Route path="/presentations/new" element={<NewPresentationPage />} />
             <Route path="/presentations/:presentationId/edit/slides/:slideNumber" element={<PresentationEditor />} />
             <Route path="/presentations/:presentationId/view/slides/:slideNumber" element={<PresentationViewer />} />
+            <Route path="/presentations/:presentationId/present/:slideNumber" element={<PresentationMode />} />
             <Route path="/presentations/:presentationId/slide/:slideId/edit" element={<SlideEditor />} />
             <Route path="/themes" element={<ThemeBrowser />} />
             <Route path="/themes/:themeId" element={<ThemeDetailPage />} />

src/components/presentations/PresentationMode.css

@@ -0,0 +1,176 @@
+/* Fullscreen presentation mode styles */
+.presentation-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.presentation-mode.loading,
+.presentation-mode.error {
+  flex-direction: column;
+  background: #1a1a1a;
+  color: #fff;
+}
+
+.presentation-mode .loading-spinner {
+  font-size: 1.2rem;
+  padding: 2rem;
+  text-align: center;
+}
+
+.presentation-mode .error-content {
+  text-align: center;
+  max-width: 600px;
+  padding: 2rem;
+}
+
+.presentation-mode .error-content h2 {
+  margin: 0 0 1rem 0;
+  font-size: 2rem;
+  font-weight: 300;
+}
+
+.presentation-mode .error-content p {
+  margin: 0 0 2rem 0;
+  font-size: 1.1rem;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+.presentation-mode .exit-button {
+  background: #fff;
+  color: #000;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.presentation-mode .exit-button:hover {
+  background: #f0f0f0;
+}
+
+/* Fullscreen slide container */
+.presentation-mode.fullscreen {
+  background: #000;
+}
+
+.presentation-mode .slide-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.presentation-mode .slide-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  background: #fff;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Aspect ratio classes for slides */
+.presentation-mode .slide-content.aspect-16-9 {
+  aspect-ratio: 16/9;
+  width: min(90vw, calc(90vh * 16/9));
+}
+
+.presentation-mode .slide-content.aspect-4-3 {
+  aspect-ratio: 4/3;
+  width: min(90vw, calc(90vh * 4/3));
+}
+
+.presentation-mode .slide-content.aspect-16-10 {
+  aspect-ratio: 16/10;
+  width: min(90vw, calc(90vh * 16/10));
+}
+
+/* Navigation indicator */
+.presentation-mode .navigation-indicator {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
+  color: #fff;
+  padding: 1rem 2rem;
+  border-radius: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.presentation-mode:hover .navigation-indicator {
+  opacity: 1;
+}
+
+.presentation-mode .slide-counter {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.presentation-mode .navigation-hints {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+.presentation-mode .navigation-hints span {
+  white-space: nowrap;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .presentation-mode .navigation-indicator {
+    bottom: 1rem;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9rem;
+  }
+  
+  .presentation-mode .navigation-hints {
+    flex-direction: column;
+    gap: 0.25rem;
+    text-align: center;
+  }
+  
+  .presentation-mode .slide-content {
+    max-width: 95vw;
+    max-height: 95vh;
+  }
+}
+
+/* Hide scrollbars in presentation mode */
+.presentation-mode * {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.presentation-mode *::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+/* Ensure theme styles work in fullscreen */
+.presentation-mode .slide-content > * {
+  width: 100%;
+  height: 100%;
+}

src/components/presentations/PresentationMode.tsx

@@ -0,0 +1,260 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import type { Presentation, SlideContent } from '../../types/presentation.ts';
+import type { Theme } from '../../types/theme.ts';
+import { getPresentationById } from '../../utils/presentationStorage.ts';
+import { getTheme } from '../../themes/index.ts';
+import { renderTemplateWithSampleData } from '../../utils/templateRenderer.ts';
+import { sanitizeSlideTemplate } from '../../utils/htmlSanitizer.ts';
+import { loggers } from '../../utils/logger.ts';
+import './PresentationMode.css';
+
+export const PresentationMode: React.FC = () => {
+  const { presentationId, slideNumber } = useParams<{ 
+    presentationId: string; 
+    slideNumber: string; 
+  }>();
+  const navigate = useNavigate();
+  
+  const [presentation, setPresentation] = useState<Presentation | null>(null);
+  const [theme, setTheme] = useState<Theme | null>(null);
+  const [currentSlideIndex, setCurrentSlideIndex] = useState(
+    slideNumber ? parseInt(slideNumber, 10) - 1 : 0
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Navigate to specific slide and update URL
+  const goToSlide = (slideIndex: number) => {
+    if (!presentation) return;
+    
+    const clampedIndex = Math.max(0, Math.min(slideIndex, presentation.slides.length - 1));
+    setCurrentSlideIndex(clampedIndex);
+    navigate(`/presentations/${presentationId}/present/${clampedIndex + 1}`, { replace: true });
+  };
+  
+  // Keyboard navigation handler
+  const handleKeyPress = useCallback((event: KeyboardEvent) => {
+    if (!presentation || presentation.slides.length === 0) return;
+    
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'Space':
+      case 'Enter':
+        event.preventDefault();
+        goToSlide(currentSlideIndex + 1);
+        break;
+        
+      case 'ArrowLeft':
+        event.preventDefault();
+        goToSlide(currentSlideIndex - 1);
+        break;
+        
+      case 'Home':
+        event.preventDefault();
+        goToSlide(0);
+        break;
+        
+      case 'End':
+        event.preventDefault();
+        goToSlide(presentation.slides.length - 1);
+        break;
+        
+      case 'Escape':
+        event.preventDefault();
+        exitPresentationMode();
+        break;
+        
+      default:
+        // Handle number keys for direct slide navigation
+        const slideNum = parseInt(event.key);
+        if (slideNum >= 1 && slideNum <= presentation.slides.length) {
+          event.preventDefault();
+          goToSlide(slideNum - 1);
+        }
+        break;
+    }
+  }, [presentation, currentSlideIndex, goToSlide]);
+  
+  // Sync current slide index with URL parameter
+  useEffect(() => {
+    if (slideNumber) {
+      const newIndex = parseInt(slideNumber, 10) - 1;
+      if (newIndex >= 0 && newIndex !== currentSlideIndex) {
+        setCurrentSlideIndex(newIndex);
+      }
+    }
+  }, [slideNumber]);
+  
+  // Set up keyboard listeners
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  
+  // Load presentation and theme
+  useEffect(() => {
+    const loadPresentationAndTheme = async () => {
+      if (!presentationId) {
+        setError('No presentation ID provided');
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        
+        // Load presentation
+        const presentationData = await getPresentationById(presentationId);
+        if (!presentationData) {
+          setError(`Presentation not found: ${presentationId}`);
+          return;
+        }
+        
+        setPresentation(presentationData);
+        
+        // Load theme
+        const themeData = await getTheme(presentationData.metadata.theme);
+        if (!themeData) {
+          setError(`Theme not found: ${presentationData.metadata.theme}`);
+          return;
+        }
+        
+        setTheme(themeData);
+        
+        // Load theme CSS
+        const cssLink = document.getElementById('presentation-theme-css') as HTMLLinkElement;
+        const cssPath = `${themeData.basePath}/${themeData.cssFile}`;
+        if (cssLink) {
+          cssLink.href = cssPath;
+        } else {
+          const newCssLink = document.createElement('link');
+          newCssLink.id = 'presentation-theme-css';
+          newCssLink.rel = 'stylesheet';
+          newCssLink.href = cssPath;
+          document.head.appendChild(newCssLink);
+        }
+        
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load presentation');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadPresentationAndTheme();
+    
+    // Cleanup theme CSS on unmount
+    return () => {
+      const cssLink = document.getElementById('presentation-theme-css');
+      if (cssLink) {
+        cssLink.remove();
+      }
+    };
+  }, [presentationId]);
+  
+  const exitPresentationMode = () => {
+    navigate(`/presentations/${presentationId}/view/slides/${currentSlideIndex + 1}`);
+  };
+  
+  const renderSlideContent = (slide: SlideContent): string => {
+    if (!theme) return '';
+    
+    const layout = theme.layouts.find(l => l.id === slide.layoutId);
+    if (!layout) {
+      loggers.ui.warn(`Layout ${slide.layoutId} not found in theme ${theme.name}`);
+      return '<div class="error">Layout not found</div>';
+    }
+    
+    let renderedTemplate = layout.htmlTemplate;
+    
+    // Replace template variables with slide content
+    Object.entries(slide.content).forEach(([slotId, content]) => {
+      const regex = new RegExp(`\\{\\{${slotId}\\}\\}`, 'g');
+      renderedTemplate = renderedTemplate.replace(regex, content);
+    });
+    
+    // Handle conditional blocks and clean up remaining variables
+    renderedTemplate = renderTemplateWithSampleData(renderedTemplate, layout);
+    
+    return sanitizeSlideTemplate(renderedTemplate);
+  };
+  
+  if (loading) {
+    return (
+      <div className="presentation-mode loading">
+        <div className="loading-spinner">Loading presentation...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="presentation-mode error">
+        <div className="error-content">
+          <h2>Error Loading Presentation</h2>
+          <p>{error}</p>
+          <button onClick={exitPresentationMode} className="exit-button">
+            Exit Presentation Mode
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!presentation || !theme) {
+    return (
+      <div className="presentation-mode error">
+        <div className="error-content">
+          <h2>Presentation Not Found</h2>
+          <button onClick={exitPresentationMode} className="exit-button">
+            Exit Presentation Mode
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (presentation.slides.length === 0) {
+    return (
+      <div className="presentation-mode error">
+        <div className="error-content">
+          <h2>No Slides Available</h2>
+          <p>This presentation is empty.</p>
+          <button onClick={exitPresentationMode} className="exit-button">
+            Exit Presentation Mode
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const currentSlide = presentation.slides[currentSlideIndex];
+  const totalSlides = presentation.slides.length;
+  const renderedSlideContent = renderSlideContent(currentSlide);
+
+  return (
+    <div className="presentation-mode fullscreen">
+      <div className="slide-container">
+        <div 
+          className={`slide-content ${presentation.metadata.aspectRatio ? `aspect-${presentation.metadata.aspectRatio.replace(':', '-')}` : 'aspect-16-9'}`}
+          dangerouslySetInnerHTML={{ __html: renderedSlideContent }}
+        />
+      </div>
+      
+      {/* Navigation indicator */}
+      <div className="navigation-indicator">
+        <span className="slide-counter">
+          {currentSlideIndex + 1} / {totalSlides}
+        </span>
+        
+        <div className="navigation-hints">
+          <span>← → Space: Navigate</span>
+          <span>Esc: Exit</span>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/presentations/PresentationViewer.tsx

@@ -4,7 +4,6 @@ import type { Presentation } from '../../types/presentation.ts';
 import type { Theme } from '../../types/theme.ts';
 import { getPresentationById } from '../../utils/presentationStorage.ts';
 import { getTheme } from '../../themes/index.ts';
-import { loggers } from '../../utils/logger.ts';
 import './PresentationViewer.css';
 
 export const PresentationViewer: React.FC = () => {
@@ -86,8 +85,8 @@ export const PresentationViewer: React.FC = () => {
   };
 
   const enterPresentationMode = () => {
-    // TODO: Implement full-screen presentation mode
+    if (!presentation) return;
-    loggers.ui.info('Full-screen presentation mode requested - feature to be implemented');
+    navigate(`/presentations/${presentationId}/present/${currentSlideIndex + 1}`);
   };
 
   if (loading) {

src/components/presentations/PresentationsList.tsx

@@ -213,10 +213,7 @@ export const PresentationsList: React.FC = () => {
                     <button
                       type="button"
                       className="card-action secondary"
-                      onClick={() => {
+                      onClick={() => navigate(`/presentations/${presentation.metadata.id}/present/1`)}
-                        // TODO: Implement presentation mode
-                        alert('Presentation mode coming soon!');
-                      }}
                     >
                       Present
                     </button>

src/components/presentations/SlideEditor.css

@@ -727,3 +727,14 @@
     min-height: 200px;
   }
 }
+
+/* Image slot field integration */
+.content-field .image-slot-field {
+  margin-top: 0.5rem;
+  border: 1px solid #e2e8f0;
+  background: white;
+}
+
+.content-field .image-slot-field:focus-within {
+  border-color: #3b82f6;
+}

src/components/presentations/SlideEditor.tsx

@@ -8,6 +8,7 @@ import { renderTemplateWithSampleData } from '../../utils/templateRenderer.ts';
 import { sanitizeSlideTemplate } from '../../utils/htmlSanitizer.ts';
 import { loggers } from '../../utils/logger.ts';
 import { SlidePreviewModal } from './SlidePreviewModal.tsx';
+import { ImageUploadField } from '../ui/ImageUploadField.tsx';
 import './SlideEditor.css';
 
 export const SlideEditor: React.FC = () => {
@@ -328,7 +329,15 @@ export const SlideEditor: React.FC = () => {
                         {slot.required && <span className="required">*</span>}
                       </label>
                       
-                      {slot.type === 'text' && slot.id.includes('content') ? (
+                      {slot.type === 'image' ? (
+                        <ImageUploadField
+                          id={slot.id}
+                          value={slideContent[slot.id] || ''}
+                          onChange={(value) => updateSlotContent(slot.id, value)}
+                          placeholder={slot.placeholder || `Upload image or enter URL for ${slot.id}`}
+                          className="image-slot-field"
+                        />
+                      ) : slot.type === 'text' && slot.id.includes('content') ? (
                         <textarea
                           id={slot.id}
                           value={slideContent[slot.id] || ''}
@@ -340,7 +349,7 @@ export const SlideEditor: React.FC = () => {
                       ) : (
                         <input
                           id={slot.id}
-                          type={slot.type === 'image' ? 'url' : 'text'}
+                          type="text"
                           value={slideContent[slot.id] || ''}
                           onChange={(e) => updateSlotContent(slot.id, e.target.value)}
                           placeholder={slot.placeholder || `Enter ${slot.id}`}
@@ -348,7 +357,7 @@ export const SlideEditor: React.FC = () => {
                         />
                       )}
                       
-                      {slot.placeholder && (
+                      {slot.placeholder && slot.type !== 'image' && (
                         <p className="field-hint">{slot.placeholder}</p>
                       )}
                     </div>

src/components/presentations/SlidePreviewModal.css

@@ -5,11 +5,14 @@
   right: 0;
   bottom: 0;
   z-index: 9999;
-  background: rgba(0, 0, 0, 0.95);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  padding: 0;
+}
+
+.slide-preview-modal.theme-background {
+  background: var(--theme-background, #000000);
 }
 
 .preview-hint {
@@ -94,29 +97,37 @@
 }
 
 .slide-preview-wrapper .slide-container {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  box-shadow: none;
-  border-radius: 0.5rem;
+  border-radius: 0;
   overflow: hidden;
   background: white;
 }
 
-/* Aspect ratio handling - matching SlideEditor pattern */
+/* Full screen aspect ratio handling - maintain proper aspect ratio */
+.slide-preview-wrapper .slide-container {
+  position: relative;
+}
+
 .slide-preview-wrapper .slide-container.aspect-16-9 {
   aspect-ratio: 16 / 9;
-  width: min(90vw, calc(90vh * 16/9));
+  width: min(100vw, calc(100vh * 16 / 9));
+  height: min(100vh, calc(100vw * 9 / 16));
 }
 
 .slide-preview-wrapper .slide-container.aspect-4-3 {
   aspect-ratio: 4 / 3;
-  width: min(90vw, calc(90vh * 4/3));
+  width: min(100vw, calc(100vh * 4 / 3));
+  height: min(100vh, calc(100vw * 3 / 4));
 }
 
 .slide-preview-wrapper .slide-container.aspect-16-10 {
   aspect-ratio: 16 / 10;
-  width: min(90vw, calc(90vh * 16/10));
+  width: min(100vw, calc(100vh * 16 / 10));
+  height: min(100vh, calc(100vw * 10 / 16));
 }
 
 .slide-preview-wrapper .slide-container.aspect-1-1 {
   aspect-ratio: 1 / 1;
-  width: min(90vw, 90vh);
+  width: min(100vw, 100vh);
+  height: min(100vh, 100vw);
 }

src/components/presentations/SlidePreviewModal.tsx

@@ -79,7 +79,7 @@ export const SlidePreviewModal: React.FC<SlidePreviewModalProps> = ({
   };
 
   return (
-    <div className="slide-preview-modal" onClick={handleOverlayClick}>
+    <div className="slide-preview-modal theme-background" onClick={handleOverlayClick}>
       {/* ESC hint */}
       {showHint && (
         <div className="preview-hint">

src/components/ui/ImageUploadField.css

@@ -0,0 +1,258 @@
+/* Image Upload Field Styles */
+.image-upload-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+  background: #f9fafb;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.image-upload-field:hover {
+  border-color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.image-upload-field:focus-within {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+/* Image Preview */
+.image-preview {
+  position: relative;
+  max-width: 100%;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.image-preview img {
+  width: 100%;
+  height: auto;
+  max-height: 300px;
+  object-fit: contain;
+  display: block;
+  background: #fff;
+}
+
+.remove-image-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 1.2rem;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.remove-image-button:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+/* Upload Area */
+.upload-area {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 1rem 0;
+}
+
+.upload-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.upload-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.upload-button.primary {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.upload-button.primary:hover:not(:disabled) {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.upload-button.secondary {
+  background: #f3f4f6;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.upload-button.secondary:hover:not(:disabled) {
+  background: #e5e7eb;
+  border-color: #9ca3af;
+}
+
+.upload-button.small {
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+}
+
+.upload-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.upload-divider {
+  color: #6b7280;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.url-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  transition: border-color 0.2s ease;
+  background: white;
+}
+
+.url-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 1px #3b82f6;
+}
+
+.url-input.small {
+  padding: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.url-input::placeholder {
+  color: #9ca3af;
+}
+
+/* Image Controls (when image is loaded) */
+.image-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+/* Error Message */
+.upload-error {
+  color: #ef4444;
+  font-size: 0.8rem;
+  font-weight: 500;
+  padding: 0.5rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+}
+
+/* Help Text */
+.upload-help {
+  color: #6b7280;
+  font-size: 0.75rem;
+  text-align: center;
+  margin-top: 0.25rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .image-upload-field {
+    padding: 0.75rem;
+  }
+  
+  .upload-controls {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .upload-divider {
+    order: -1;
+  }
+  
+  .upload-button {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .image-controls {
+    align-items: stretch;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .image-upload-field {
+    border-color: #4b5563;
+    background: #111827;
+    color: #f9fafb;
+  }
+  
+  .image-upload-field:hover {
+    border-color: #6b7280;
+    background: #1f2937;
+  }
+  
+  .image-upload-field:focus-within {
+    border-color: #60a5fa;
+    background: #1e3a8a;
+  }
+  
+  .url-input {
+    background: #1f2937;
+    border-color: #4b5563;
+    color: #f9fafb;
+  }
+  
+  .url-input:focus {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 1px #60a5fa;
+  }
+  
+  .upload-button.secondary {
+    background: #374151;
+    color: #f9fafb;
+    border-color: #4b5563;
+  }
+  
+  .upload-button.secondary:hover:not(:disabled) {
+    background: #4b5563;
+    border-color: #6b7280;
+  }
+  
+  .image-controls {
+    border-top-color: #4b5563;
+  }
+  
+  .upload-error {
+    background: #7f1d1d;
+    border-color: #991b1b;
+    color: #fecaca;
+  }
+}

src/components/ui/ImageUploadField.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useRef } from 'react';
+import './ImageUploadField.css';
+
+interface ImageUploadFieldProps {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export const ImageUploadField: React.FC<ImageUploadFieldProps> = ({
+  id,
+  value,
+  onChange,
+  placeholder = "Click to upload image or enter URL",
+  className = ""
+}) => {
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      setError('Please select a valid image file');
+      return;
+    }
+
+    // Validate file size (max 5MB)
+    const maxSizeInBytes = 5 * 1024 * 1024; // 5MB
+    if (file.size > maxSizeInBytes) {
+      setError('Image file must be smaller than 5MB');
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      setError(null);
+
+      // Convert file to base64
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const base64 = e.target?.result as string;
+        onChange(base64);
+        setIsUploading(false);
+      };
+      reader.onerror = () => {
+        setError('Failed to read image file');
+        setIsUploading(false);
+      };
+      reader.readAsDataURL(file);
+
+    } catch (err) {
+      setError('Failed to upload image');
+      setIsUploading(false);
+    }
+  };
+
+  const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+    setError(null);
+  };
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleRemoveImage = () => {
+    onChange('');
+    setError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const isImageUrl = value && (value.startsWith('data:image/') || value.startsWith('http'));
+
+  return (
+    <div className={`image-upload-field ${className}`}>
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileSelect}
+        style={{ display: 'none' }}
+      />
+
+      {/* Image preview */}
+      {isImageUrl && (
+        <div className="image-preview">
+          <img
+            src={value}
+            alt="Preview"
+            onError={() => setError('Invalid image URL')}
+          />
+          <button
+            type="button"
+            className="remove-image-button"
+            onClick={handleRemoveImage}
+            title="Remove image"
+          >
+            ×
+          </button>
+        </div>
+      )}
+
+      {/* Upload/URL input area */}
+      {!isImageUrl && (
+        <div className="upload-area">
+          <div className="upload-controls">
+            <button
+              type="button"
+              className="upload-button primary"
+              onClick={handleUploadClick}
+              disabled={isUploading}
+            >
+              {isUploading ? 'Uploading...' : '📁 Upload Image'}
+            </button>
+            <span className="upload-divider">or</span>
+          </div>
+          
+          <input
+            id={id}
+            type="url"
+            value={value && !value.startsWith('data:image/') ? value : ''}
+            onChange={handleUrlChange}
+            placeholder={placeholder}
+            className="url-input"
+          />
+        </div>
+      )}
+
+      {/* Replace image controls when image is loaded */}
+      {isImageUrl && (
+        <div className="image-controls">
+          <button
+            type="button"
+            className="upload-button secondary small"
+            onClick={handleUploadClick}
+            disabled={isUploading}
+          >
+            {isUploading ? 'Uploading...' : '📁 Replace'}
+          </button>
+          
+          <input
+            type="url"
+            value={value && !value.startsWith('data:image/') ? value : ''}
+            onChange={handleUrlChange}
+            placeholder="Or enter image URL"
+            className="url-input small"
+          />
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <div className="upload-error">
+          {error}
+        </div>
+      )}
+
+      {/* Help text */}
+      <div className="upload-help">
+        Supported formats: JPG, PNG, GIF, WebP (max 5MB)
+      </div>
+    </div>
+  );
+};