- Add reorderSlides function to useSlideOperations hook
- Update SlidesSidebar to handle drag-and-drop events
- Make SlideThumbnail components draggable with visual feedback
- Add CSS styles for drag states (dragged, drag-over, drag handle)
- Implement proper slide order management and persistence
- Add visual indicators for drag operations (opacity, transform, borders)
- Disable drag operations when saving to prevent conflicts
This completes the slide reordering feature from the user flows document.
## PWA Implementation
• Add comprehensive service worker for offline caching and app installation
• Implement PWA manifest with app shortcuts and file handling
• Create offline indicator component with update notifications
• Add service worker utilities for cache management and updates
• Update HTML with PWA meta tags and SEO optimization
## Content Standards Enhancement
• Update presentation JSON generator prompt with strict Unicode prohibition
• Add comprehensive content quality checklist for ASCII-only formatting
• Create two example presentations demonstrating proper formatting
• Fix build errors in OfflineIndicator component styling
• Enforce consistent markdown formatting with plain dash bullets
## Features Added
• Install as native app capability on all platforms
• Complete offline functionality after first load
• Automatic background updates with user notifications
• Export/import JSON presentations with proper formatting
• Real-time online/offline status indicators
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
• Add JSON import/export functionality to presentations list
• Fix HTML sanitizer to allow style tags in layout templates
• Add comprehensive SVG attributes for Mermaid diagram markers
• Create LLM prompt generator for presentation JSON format
• Add sample presentation showcasing SlideShare features
• Clean up diagram-slide layout template
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add essential CSS for proper text display in diagram nodes and edges
- Fix foreignObject text container inheritance for proper styling
- Ensure node labels and edge labels are visible with correct fonts
- Add responsive sizing for mobile devices
- Remove complex styling that was causing text clipping issues
- Simplify diagram container styling for better compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement complete Mermaid.js integration for rich diagram rendering
- Add diagram-slide.html layout with title, diagram, and notes slots
- Create diagramProcessor.ts with async rendering and error handling
- Add comprehensive SVG element support to HTML sanitizer
- Implement async template rendering system for diagram processing
- Add SlidePreview component with loading states for better UX
- Support all major Mermaid diagram types (flowchart, sequence, gantt, pie, etc.)
- Add dark theme integration with custom color scheme
- Include diagram-specific styling and responsive design
- Add diagram field editor with syntax highlighting styling
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement code highlighting utility using Highlight.js library
- Add dedicated code-slide layout with proper pre/code structure
- Update HTML sanitizer to allow pre and code elements
- Add comprehensive VS Code dark theme syntax colors
- Fix whitespace preservation in highlighted code blocks
- Support code slot type in template rendering system
- Add code-specific styling and editor improvements
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement safe markdown processing with marked and DOMPurify
- Add markdown-slide layout template with dedicated markdown slots
- Support auto-detection of markdown content in text slots
- Include comprehensive markdown styling (lists, headers, code, quotes, tables)
- Maintain security with HTML sanitization and safe element filtering
- Add markdown documentation to theme creation guidelines
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove view buttons from presentations list (both icon and card actions)
- Delete PresentationViewer component and CSS files
- Remove view route from App.tsx routing
- Streamline presentation actions to Edit, Present, and Delete only
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Increase CSS specificity for layout components in SlideEditor.css to prevent style overrides
- Add .slide-editor parent selector to .layout-preview, .layout-card, .layout-info, .layout-meta, and .layout-rendered
- Replace local color variables with global color system references
- Ensure SlideEditor layout styles are properly applied without conflicts from other stylesheets
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create comprehensive global color system with semantic variables in src/styles/colors.css
- Replace all hardcoded colors across components with CSS custom properties
- Establish semantic color mappings for consistent theming (--text-primary, --bg-secondary, etc.)
- Add complete color scales for gray, slate, blue, red, green, yellow, purple, pink
- Include dark mode color overrides for automatic theme switching
- Update PresentationEditor.css to use global color variables throughout
- Consolidate SlideThumbnail.css styles and optimize using CSS cascades
- Move SlideThumbnail-specific styles from PresentationEditor.css to component file
- Update all UI button components (Button, ActionButton, BackButton) to use color variables
- Modernize Modal, AlertDialog, and ConfirmDialog components with global colors
- Optimize App.css, index.css, and PresentationsList.css color usage
- Reduce CSS bundle size through consolidation and elimination of duplicate styles
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Button Component System
- Create dedicated components/ui/buttons directory with 6 specialized button components:
- Button.tsx: Universal button with variants (primary, secondary, danger, link) and sizes
- ActionButton.tsx: Action buttons matching existing patterns
- BackButton.tsx: Navigation back buttons
- CancelLink.tsx: Cancel/link style buttons
- CloseButton.tsx: Modal/preview close buttons with variants
- NavigationButton.tsx: Presentation navigation buttons
- Update key components to use new button system (SlideEditor, ContentEditor, Modal, AlertDialog, ConfirmDialog)
- Replace inline styled-jsx with proper CSS files for AlertDialog and ConfirmDialog
## Barrel Export Elimination
- Remove all barrel export files violating IMPORT_STANDARDS.md:
- src/themes/index.ts
- src/components/themes/index.ts
- src/components/presentations/index.ts
- src/components/slide-editor/index.ts
- Update 15+ files to use direct imports from themeLoader.ts instead of barrel exports
- Fix function naming conflict in ThemeDetailPage.tsx (loadTheme shadowing)
- Follow project standards: direct imports with .tsx extensions for better Vite performance
## Benefits
- Improved Vite tree shaking and module resolution performance
- Consistent, reusable button system across application
- Adherence to project coding standards and import conventions
- Reduced bundle size through elimination of barrel export overhead
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
- Add PresentationMode component for fullscreen slide viewing
- Support keyboard navigation: arrows/space for slides, escape to exit
- Integrate with existing theme rendering and CSS loading system
- Update PresentationsList Present button to use fullscreen mode
- Add new route /presentations/:presentationId/present
- Fix TypeScript errors in presentation components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## New Feature: Full Screen Slide Preview
- Add SlidePreviewModal component for full screen slide preview in SlideEditor
- ESC key support and temporary hint for user guidance
- Proper aspect ratio handling with theme CSS inheritance
- Modal follows existing UI patterns for consistency
## Import Standards Compliance (31 files updated)
- Fix all imports to use explicit .tsx/.ts extensions per IMPORT_STANDARDS.md
- Eliminate barrel imports in App.tsx for better Vite tree shaking
- Add direct imports with explicit paths across entire codebase
- Preserve CSS imports and external library imports unchanged
## Code Architecture Improvements
- Add comprehensive CSS & Component Architecture Guidelines to CLAUDE.md
- Document modal patterns, aspect ratio handling, and CSS reuse principles
- Reference all coding standards files for consistent development workflow
- Prevent future CSS overcomplication and component duplication
## Performance Optimizations
- Enable Vite tree shaking with proper import structure
- Improve module resolution speed with explicit extensions
- Optimize build performance through direct imports
## Files Changed
- 31 TypeScript/React files with import fixes
- 2 new SlidePreviewModal files (component + CSS)
- Updated project documentation and coding guidelines
- Fixed aspect ratio CSS patterns across components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Major Refactoring
- Broke down large components into focused, reusable pieces
- Reduced NewPresentationPage.tsx from 238 to 172 lines
- Reduced PresentationEditor.tsx from 457 to 261 lines
- Eliminated functions exceeding 50-line guideline
## New Reusable Components
- PresentationDetailsForm: Form inputs for title/description
- AspectRatioSelector: Aspect ratio selection grid
- ThemeSelectionSection: Theme selection wrapper
- CreationActions: Action buttons and selected theme info
- EmptyPresentationState: Empty presentation state display
- SlidesSidebar: Complete sidebar with slides list
- SlideThumbnail: Individual slide thumbnail with actions
- LoadingState: Reusable loading component with spinner
- ErrorState: Reusable error display with retry/back actions
## New Hooks
- useSlideOperations: Custom hook for slide duplicate/delete logic
## Code Quality Improvements
- Replaced browser alert() calls with AlertDialog component
- Updated imports to use direct .tsx extensions per IMPORT_STANDARDS.md
- Eliminated browser confirm() calls in favor of ConfirmDialog system
- Consolidated duplicate loading/error state patterns
- Improved type safety throughout
## Benefits
- Better maintainability through component separation
- Consistent UX with shared UI components
- Code reuse across presentation components
- Compliance with 200-line file guideline
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update default theme CSS for proper content centering and aspect ratio integration
- Add text-align: center to base slide styling for consistent centering
- Implement specific alignment for title, subtitle, and text slots
- Add aspect ratio specific adjustments (different padding and max-width per ratio)
- Create new 2-content-blocks layout with side-by-side equal spacing
- Use CSS Grid for 50/50 split with proper gap and visual separation
- Add responsive design for mobile devices (stacks vertically)
- Include subtle styling to distinguish content blocks
- Improve typography scaling for two-column layout
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Major Features Added:
### Presentation Management
- Complete CRUD operations for presentations (create, read, update, delete)
- IndexedDB storage for offline presentation data
- Comprehensive presentation list view with metadata
- Navigation integration with header menu
### Slide Management
- Full slide editor with layout selection and content editing
- Live preview with theme styling applied
- Speaker notes functionality
- Enhanced layout previews with realistic sample content
- Themed layout selection with proper CSS inheritance
### Aspect Ratio System
- Support for 3 common presentation formats: 16:9, 4:3, 16:10
- Global CSS system baked into theme engine
- Visual aspect ratio selection in presentation creation
- Responsive scaling for different viewing contexts
- Print-optimized styling with proper dimensions
### User Experience Improvements
- Enhanced sample content generation for realistic previews
- Improved navigation with presentation management
- Better form styling and user interaction
- Comprehensive error handling and loading states
- Mobile-responsive design throughout
### Technical Infrastructure
- Complete TypeScript type system for presentations
- Modular component architecture
- CSS aspect ratio classes for theme consistency
- Enhanced template rendering with live updates
- Robust storage utilities with proper error handling
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove iframe previews from theme detail and layout detail pages for cleaner UI
- Replace with informative layout cards showing descriptions and slot type badges
- Fix theme hot reload by switching from custom HMR to full page reload
- Update template renderer to use slot names as demo content
- Add SVG pattern generation for image slots with grid background and slot labels
- Improve demo content for all slot types (code, lists, tables, etc.)
- Clean up HMR listeners and simplify theme change detection
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
