Full-Screen DreamSong Experience

[ProjectLiminality]

Description

Implement full-screen DreamSong interface that opens in new Obsidian leaf, providing expanded story viewing experience. Also includes full-screen button for DreamTalk media files.

Parent Specification: #271 - Dreamweaving Operations Specification

Acceptance Criteria

• Full-screen buttons appear on hover at top-center (same x-coordinate as flip button)
• Full-screen buttons use "maximize" icon from lucide (same styling as flip button)
• DreamTalk full-screen opens media files in new Obsidian leaf using built-in media viewer
• DreamSong full-screen opens expanded story interface in new leaf
• One leaf per DreamNode strategy with proper cleanup
• 100% same DreamSong component (reusable between embedded + full-screen contexts)
• Full-screen DreamSong is scrollable, dynamically generated website from canvas data
• Obsidian leaf management handles proper opening/closing
• Performance optimized with async parsing and component caching

Technical Requirements

Component Architecture

• Extract existing DreamSong component for reusability (embedded + full-screen contexts) ✅
• Shared component renders with context-aware styling (circular mask vs full-screen) ✅
• Same story flow and navigation in both contexts ✅

Full-Screen Button Implementation

• Position: Top-center, same x-coordinate as flip button ✅
• Icon: "maximize" from lucide icon set ✅
• Styling: Consistent with existing flip button styling ✅
• Behavior: Hover state triggers appearance ✅

Leaf Management Strategy

• One leaf per DreamNode: Unique leaf ID based on DreamNode ID ✅
• Media Files: Use Obsidian's built-in media viewer ✅
• DreamSong Interface: Custom leaf type for expanded story experience ✅
• Cleanup: Proper memory management when leaves are closed ✅

Performance Optimization

• Async Canvas Parsing: Parse canvas data asynchronously ✅
• Component Caching: Store parsed components, update only when canvas changes ✅
• Dynamic Website Generation: Function of canvas data with optimal rendering patterns ✅

DreamSong Presentation Refinement

• Dynamic Generation: Canvas data → website-like scrollable interface ✅
• Same Presentation: Identical rendering between embedded and full-screen contexts ✅

Dependencies

• DreamSong interface component from DreamNode Flip Animation & DreamSong Interface #324 (completed) ✅
• Canvas Parser Service from DreamWeaving canvas integration #286 (for story data) ✅
• Obsidian Plugin API for leaf management ✅
• Existing media file handling patterns ✅
• Lucide icon set (maximize icon) ✅

User Experience

DreamTalk Full-Screen ✅

1. User hovers over DreamTalk side → full-screen button appears at top-center
2. Click maximize button → media file opens in new Obsidian leaf
3. Standard Obsidian media viewing experience
4. One leaf per DreamNode (replaces if already open)

DreamSong Full-Screen ✅

1. User hovers over DreamSong side → full-screen button appears at top-center
2. Click maximize button → expanded story interface opens in new leaf
3. Identical story flow as embedded version, but unobscured and scrollable
4. Dynamically generated website experience from canvas data
5. Proper Obsidian integration with leaf management
6. One leaf per DreamNode with automatic cleanup

Technical Approach

Phase 1: Component Extraction & Reusability ✅

• Extract DreamSong component from current embedded implementation
• Create context-aware rendering (embedded vs full-screen)
• Maintain 100% functional parity

Phase 2: Full-Screen Button Implementation ✅

• Add maximize buttons with proper positioning and styling
• Implement hover state management
• Integrate with existing flip button patterns

Phase 3: Leaf Management Implementation ✅

• Create Obsidian leaf management service
• Implement one-leaf-per-node strategy
• Handle media file opening via Obsidian API

Phase 4: DreamSong Presentation Refinement ✅

• Refine canvas-based dynamic website generation
• Implement async parsing and caching optimization
• Ensure scrollable, performant full-screen experience

Definition of Done

• Full-screen buttons implemented with maximize icon and proper positioning
• DreamTalk media files open correctly in Obsidian leaves using built-in viewer
• DreamSong full-screen interface works in separate leaf with identical functionality
• Component reusability confirmed (shared between embedded + full-screen contexts)
• One-leaf-per-DreamNode strategy implemented with proper cleanup
• Performance meets expected thresholds with async parsing and caching
• DreamSong presentation component refined for dynamic website generation
• Implementation complete and tested in both contexts
• Tests passing for leaf management and component reusability
• Documentation updated with usage examples

[ProjectLiminality]

✅ Feature Complete: Full-Screen DreamSong Experience

Implemented Features:

• ✅ DreamTalk media display above DreamSong header in fullscreen view
• ✅ Three-layer architecture (parser/hasher/media-resolver) for maintainability
• ✅ Real-time canvas file change detection with automatic re-parsing
• ✅ Fixed topological sort treating media-text pairs as single units
• ✅ Universal media click navigation to reveal source DreamNodes
• ✅ CSS Modules integration with Vite build system
• ✅ Comprehensive MIME type support (image/, video/, audio/)

Technical Achievements:

• 47 commits successfully merged to epic/6-dreamweaving-operations
• All debug logging cleaned up (🎵 and 🔄 prefixes removed)
• Zero linting errors, comprehensive test coverage maintained
• Clean three-layer service architecture established

Merge Status: ✅ Complete
Branch Status: ✅ Deleted (feature/fullscreen-dreamsong-experience)
Epic Integration: ✅ Ready for Epic 6 continuation