Commit Graph

12 Commits

Author SHA1 Message Date
69be84e5ab Fix TypeScript compilation errors
- Remove deprecated marked options (sanitize, headerIds, mangle)
- Fix undefined codeExample and diagramExample references in templateRenderer
- Replace with additional markdown sample content
- Ensure clean TypeScript build with no errors

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 21:20:09 -05:00
84b2d233a7 Add JavaScript syntax highlighting with Highlight.js
- 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>
2025-08-21 21:18:11 -05:00
655e324c88 Add secure markdown support to slide templates
- 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>
2025-08-21 20:43:26 -05:00
3d0f6dd25e Fix TypeScript build errors and improve navigation consistency
- Replace hardcoded navigation routes with history-based navigation (navigate(-1))
- Convert presentation deletion to use shared ConfirmDialog/AlertDialog components
- Consolidate button components throughout the application
- Fix TypeScript unused import errors from button component consolidation
- Convert enums to const assertions to fix erasableSyntaxOnly compatibility
- Hide theme browsing features with "coming soon" comments
- Improve AppHeader routing with regex patterns instead of manual parsing

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 12:34:11 -05:00
1008bd4bca Implement slide preview and fix import standards project-wide
## 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>
2025-08-21 06:52:56 -05:00
8376e77df7 Refactor presentation components following coding guidelines
## 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>
2025-08-21 06:23:45 -05:00
d88ae6dcc3 Fix all ESLint errors and improve code quality
- Fix unused variable errors by removing unused parameters or using proper destructuring
- Fix 'prefer-const' violations by replacing 'let' with 'const' where appropriate
- Fix lexical declaration errors in switch cases by adding proper block scoping
- Replace explicit 'any' type with proper TypeScript interface for DOMPurify config
- Fix React hooks dependency warnings in useDialog hook
- Remove unused imports and variables throughout codebase

Specific fixes:
- Replace '_' parameters with proper destructuring syntax ([, value])
- Add block scopes to switch case statements in templateRenderer.ts
- Improve type safety in htmlSanitizer.ts with explicit DOMPurify interface
- Fix useCallback dependencies in useDialog hook
- Remove unused 'placeholder' parameter in generateSampleDataForSlot

All 15 ESLint errors have been resolved, improving code maintainability and consistency.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:50:23 -05:00
d0e70f81e7 Major code quality improvements: Fix XSS vulnerabilities and replace browser dialogs
Security Fixes:
- Add DOMPurify HTML sanitization for all dangerouslySetInnerHTML usage
- Create comprehensive HTML sanitization utility with configurable security levels
- Implement safe template rendering for slide content and layouts
- Add input validation for image sources and dangerous attributes

UI/UX Improvements:
- Replace browser alert() and confirm() with proper React modal components
- Create reusable Modal, AlertDialog, and ConfirmDialog components
- Add useDialog hook for easy dialog state management
- Implement proper accessibility with keyboard navigation and focus management
- Add smooth animations and responsive design for dialogs

Components Added:
- src/utils/htmlSanitizer.ts - Comprehensive HTML sanitization
- src/components/ui/Modal.tsx - Base modal component
- src/components/ui/AlertDialog.tsx - Alert dialog component
- src/components/ui/ConfirmDialog.tsx - Confirmation dialog component
- src/hooks/useDialog.ts - Dialog state management hook

Updated Components:
- SlideEditor.tsx - Now uses sanitized HTML rendering
- LayoutPreviewPage.tsx - Now uses sanitized HTML rendering
- PresentationEditor.tsx - Now uses React dialogs instead of browser dialogs

Benefits:
✅ Eliminates XSS vulnerabilities from unsafe HTML rendering
✅ Provides consistent, accessible user interface
✅ Improves user experience with proper modal dialogs
✅ Maintains security while preserving slide formatting capabilities
✅ Follows React best practices for component composition

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:41:15 -05:00
9b0b16969f feat: implement complete presentation management system with aspect ratio support
## 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>
2025-08-20 16:34:00 -05:00
98958b2cb3 Remove iframe previews and improve theme hot reload with SVG demo content
- 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>
2025-08-20 14:11:51 -05:00
15d3789bb4 Add full-screen layout preview route and fix iframe sandbox issue
- Create LayoutPreviewPage component for full-screen layout previews
- Add preview route /themes/:themeId/layouts/:layoutId/preview to App routing
- Update theme components with preview links and improved navigation
- Fix iframe sandbox error by adding allow-scripts permission
- Enhance template renderer with layout metadata support
- Replace PostCSS with regex-only CSS parsing for browser compatibility
- Add comprehensive standards documentation for code quality
- Clean up CSS slot indicators to be always visible with descriptions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 13:48:13 -05:00
6e6c09b5ba Add comprehensive theme routing and browsing system
- Add React Router with theme browser, theme detail, and layout detail pages
- Implement manifest-based theme discovery for better performance
- Add Welcome component as home page with feature overview
- Fix layout and styling issues with proper CSS centering
- Implement introspective theme browsing (dynamically discover colors/variables)
- Add layout preview system with iframe scaling
- Create comprehensive theme detail page with color palette display
- Fix TypeScript errors and build issues
- Remove hardcoded theme assumptions in favor of dynamic discovery

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 10:17:55 -05:00