diff --git a/ActivityCorner.tsx b/ActivityCorner.tsx new file mode 100644 index 0000000..9202066 --- /dev/null +++ b/ActivityCorner.tsx @@ -0,0 +1,500 @@ +import React, { useState, useRef, useEffect } from 'react'; +import confetti from 'canvas-confetti'; +import { + Brush, + Trash2, + Download, + Sparkles, + Heart, + Wind, + HelpCircle, + Shuffle, + Check +} from 'lucide-react'; +import { KINDNESS_CHALLENGES, DISCUSSION_PROMPTS, COLOR_PALETTE } from '../data/storyData'; +import { soundManager } from '../utils/audio'; + +interface ActivityCornerProps { + isBedtimeMode: boolean; +} + +export const ActivityCorner: React.FC = ({ isBedtimeMode }) => { + // Canvas State + const canvasRef = useRef(null); + const [isDrawing, setIsDrawing] = useState(false); + const [brushColor, setBrushColor] = useState('#60a5fa'); + const [brushSize, setBrushSize] = useState(18); + const [activeTab, setActiveTab] = useState<'canvas' | 'kindness' | 'breathing' | 'discussion'>('canvas'); + + // Kindness State + const [challengeIndex, setChallengeIndex] = useState(0); + const [completedChallenges, setCompletedChallenges] = useState([]); + + // Breathing State + const [breathPhase, setBreathPhase] = useState<'Inhale (Gather Soft Mist)' | 'Hold (Glow with Warmth)' | 'Exhale (Rain Gentle Kindness)'>('Inhale (Gather Soft Mist)'); + const [isBreathingActive, setIsBreathingActive] = useState(false); + + // Initialize Canvas background + useEffect(() => { + const canvas = canvasRef.current; + if (canvas) { + const ctx = canvas.getContext('2d'); + if (ctx) { + ctx.fillStyle = isBedtimeMode ? '#1e1b4b' : '#f0f9ff'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + } + } + }, [isBedtimeMode, activeTab]); + + // Breathing Cycle loop + useEffect(() => { + let timer: ReturnType; + if (isBreathingActive) { + const phases: ('Inhale (Gather Soft Mist)' | 'Hold (Glow with Warmth)' | 'Exhale (Rain Gentle Kindness)')[] = [ + 'Inhale (Gather Soft Mist)', + 'Hold (Glow with Warmth)', + 'Exhale (Rain Gentle Kindness)' + ]; + let idx = 0; + setBreathPhase(phases[0]); + + timer = setInterval(() => { + idx = (idx + 1) % phases.length; + setBreathPhase(phases[idx]); + if (idx === 0) soundManager.playChime(); + if (idx === 2) soundManager.playRain(); + }, 4000); + } + return () => clearInterval(timer); + }, [isBreathingActive]); + + // Canvas drawing handlers + const startDrawing = (e: React.MouseEvent | React.TouchEvent) => { + const canvas = canvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + setIsDrawing(true); + const rect = canvas.getBoundingClientRect(); + const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX; + const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY; + + const x = (clientX - rect.left) * (canvas.width / rect.width); + const y = (clientY - rect.top) * (canvas.height / rect.height); + + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + ctx.strokeStyle = brushColor; + ctx.lineWidth = brushSize; + }; + + const draw = (e: React.MouseEvent | React.TouchEvent) => { + if (!isDrawing) return; + const canvas = canvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const rect = canvas.getBoundingClientRect(); + const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX; + const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY; + + const x = (clientX - rect.left) * (canvas.width / rect.width); + const y = (clientY - rect.top) * (canvas.height / rect.height); + + ctx.lineTo(x, y); + ctx.stroke(); + }; + + const stopDrawing = () => { + setIsDrawing(false); + }; + + const clearCanvas = () => { + soundManager.playFlutter(); + const canvas = canvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + ctx.fillStyle = isBedtimeMode ? '#1e1b4b' : '#f0f9ff'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + }; + + const downloadCanvas = () => { + soundManager.playPop(); + const canvas = canvasRef.current; + if (!canvas) return; + const link = document.createElement('a'); + link.download = 'pip-cloud-creation.png'; + link.href = canvas.toDataURL(); + link.click(); + }; + + // Kindness handlers + const handleShuffleKindness = () => { + soundManager.playPop(); + setChallengeIndex((prev) => (prev + 1) % KINDNESS_CHALLENGES.length); + }; + + const handleCompleteChallenge = (id: number) => { + soundManager.playStarCelebration(); + setCompletedChallenges((prev) => [...prev, id]); + confetti({ + particleCount: 50, + spread: 60, + origin: { y: 0.6 } + }); + }; + + const currentChallenge = KINDNESS_CHALLENGES[challengeIndex]; + const isChallengeDone = completedChallenges.includes(currentChallenge.id); + + return ( +
+
+ {/* Header */} +
+
+ + Interactive Activity Studio + + + Creativity β€’ Kindness β€’ Mindfulness β€’ Family Discussion + +
+

+ Pip & Caelum's Creative Meadow +

+

+ Hands-on interactive experiences designed to extend the storybook's lessons of kindness, self-acceptance, and imaginative problem-solving into real-world family life. +

+ + {/* Activity Category Tabs */} +
+ + + + +
+
+ + {/* TAB 1: Paint Your Cloud Canvas */} + {activeTab === 'canvas' && ( +
+
+
+

+ 🎨 Paint Your Whispering Cloud Creature +

+

+ Use Pip's berry pigments to swirl fluffy clouds, raindrops, and flowers! +

+
+ + {/* Canvas Controls */} +
+ {/* Palette picker */} +
+ {COLOR_PALETTE.map((c) => ( +
+ + {/* Brush Size */} +
+ Size: + setBrushSize(parseInt(e.target.value))} + className="w-20 accent-amber-500" + /> +
+ + {/* Clear */} + + + {/* Download */} + +
+
+ + {/* Drawing Canvas Board */} +
+ +
+

+ Tip: Draw a cloud body, then paint little blushing pink cheeks and golden rainbow drops! +

+
+ )} + + {/* TAB 2: Kindness Challenge */} + {activeTab === 'kindness' && ( +
+
+
+ {currentChallenge.icon} +
+ +
+ + Daily Mission β€’ {currentChallenge.difficulty} + +

+ {currentChallenge.title} +

+

+ "{currentChallenge.description}" +

+
+ +
+ + + +
+ +
+ You have completed {completedChallenges.length} of {KINDNESS_CHALLENGES.length} kindness challenges! +
+
+
+ )} + + {/* TAB 3: Bedtime Cloud Breathing */} + {activeTab === 'breathing' && ( +
+
+
+ + Mindfulness & Bedtime Regulation + +

+ Caelum's Gentle Cloud Breath +

+

+ Help little bodies settle for sleep or calm down after high-energy emotions. +

+
+ + {/* Rhythmic Expanding/Contracting Breathing Ring */} +
+
+
+ ☁️ + + {isBreathingActive ? breathPhase : 'Ready to Breathe'} + +
+
+
+ +
+ +
+ +

+ Follow the cloud: Breathe in peace, hold warm love, breathe out gentle rain. +

+
+
+ )} + + {/* TAB 4: Family & Educator Discussion Prompts */} + {activeTab === 'discussion' && ( +
+
+ +
+

+ Parent, Caregiver & Teacher Circle-Time Guide +

+

+ Open-ended questions to deepen comprehension and emotional connection +

+
+
+ +
+ {DISCUSSION_PROMPTS.map((prompt, i) => ( +
+
+ + {prompt.category} + + + Q{i + 1} + +
+ +

+ "{prompt.question}" +

+ +
+ + Caregiver Guidance: + + {prompt.guide} +
+
+ ))} +
+
+ )} +
+
+ ); +}; diff --git a/ArtDirectionView.tsx b/ArtDirectionView.tsx new file mode 100644 index 0000000..99ccf19 --- /dev/null +++ b/ArtDirectionView.tsx @@ -0,0 +1,319 @@ +import React, { useState } from 'react'; +import { + Palette, + Copy, + Check, + Sun, + Smile, + CheckCircle2, + Brush +} from 'lucide-react'; +import { COLOR_PALETTE, ART_DIRECTION_GUIDE, CHARACTERS } from '../data/storyData'; +import { soundManager } from '../utils/audio'; + +interface ArtDirectionViewProps { + isBedtimeMode: boolean; +} + +export const ArtDirectionView: React.FC = ({ isBedtimeMode }) => { + const [copiedHex, setCopiedHex] = useState(null); + const [customStyle, setCustomStyle] = useState('digital-gouache'); + const [customSubject, setCustomSubject] = useState('Pip holding his willow brush looking at Caelum'); + const [customMood, setCustomMood] = useState('Warm golden twilight'); + + const handleCopyHex = (hex: string) => { + soundManager.playPop(); + navigator.clipboard.writeText(hex); + setCopiedHex(hex); + setTimeout(() => setCopiedHex(null), 2000); + }; + + const generatedCustomPrompt = `Whimsical children's picture book illustration of ${customSubject}. ${customMood}, in ${customStyle === 'digital-gouache' ? 'soft digital gouache and textured watercolor' : customStyle === 'classic-pastel' ? 'classic soft oil pastel with hand-drawn colored pencil contours' : 'dreamy storybook gouache with visible paper tooth grain'}. Color palette featuring ${COLOR_PALETTE.map(c => c.name).slice(0, 3).join(', ')}. Friendly character expressions, gentle magical atmosphere, heartwarming children's literature style.`; + + return ( +
+
+ {/* Header */} +
+
+ + Art & Visual Direction Bible + + + {ART_DIRECTION_GUIDE.styleName} + +
+

+ Color Palette, Expressions & Artistic Philosophy +

+

+ Detailed art notes crafted so that any illustrator or AI visual model can render consistent, heartwarming, award-winning storybook spreads. +

+
+ + {/* Master Color Palette Section */} +
+
+
+ +

+ Master Storybook Color Palette +

+
+ + Click any swatch to copy Hex + +
+ +
+ {COLOR_PALETTE.map((swatch) => ( +
handleCopyHex(swatch.hex)} + className="p-4 rounded-2xl border border-stone-200 dark:border-indigo-800 bg-stone-50 dark:bg-indigo-950/40 hover:shadow-md cursor-pointer transition-all group" + > +
+
+
+

+ {swatch.name} +

+
+ {swatch.hex} + {copiedHex === swatch.hex ? ( + + ) : ( + + )} +
+
+
+ +
+

+ Usage: {swatch.usage} +

+

+ Mood: {swatch.mood} +

+
+
+ ))} +
+
+ + {/* Character Expression & Anatomy Guidelines */} +
+
+ +

+ Character Expression & Visual Identity Rules +

+
+ +
+ {CHARACTERS.map((char) => ( +
+
+
+ {char.avatarEmoji} +
+

+ {char.name} +

+ + {char.role} + +
+
+ + {char.species} + +
+ +
+

+ Key Visual Markers: {char.appearance} +

+

+ Signature Gesture / Quirk: {char.quirk} +

+

+ Emotional Color Transition: {char.name === 'Pip' ? 'Quills ripple like grass when inspired; scarf flaps cheerfully.' : char.name === 'Caelum' ? 'Shifts from misty slate-gray (timid) to soft lavender (shy) to radiant sunset gold and rosΓ© (confident).' : char.name === 'Barnaby' ? 'Eyes crinkle warmly into crescents; spectacles catch amber rim-light.' : 'Wings flutter in excited loops; chest puffs with sky-blue pride.'} +

+
+
+ ))} +
+ + {/* Golden Rules Box */} +
+
+ Core Principles for the Children's Illustrator +
+
+
+ + No Harsh Black Outlines: Use deep sepia, indigo, or forest bark for line work. +
+
+ + Tactile Paper Texture: Retain visible rag-paper tooth and watercolor bloom edges. +
+
+ + Gentle Scale & Proximity: Caelum hovers close to the grass to invite cuddles. +
+
+
+
+ + {/* Lighting Keys Across The Story */} +
+
+ +

+ Lighting & Atmospheric Keys Across Acts +

+
+ +
+ {ART_DIRECTION_GUIDE.lightingKeys.map((key, idx) => ( +
+
+ + {key.scene} + + + {key.colorTemp} + +
+

+ {key.mood} +

+

+ {key.description} +

+
+ ))} +
+
+ + {/* Interactive Storybook Prompt Builder */} +
+
+ +
+

+ Interactive Illustration Prompt Builder +

+

+ Generate new children's book scene prompts matching this art bible +

+
+
+ +
+
+ + setCustomSubject(e.target.value)} + className="w-full px-3 py-2 text-sm rounded-xl border border-stone-300 dark:border-indigo-700 bg-stone-50 dark:bg-indigo-950 text-stone-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500" + /> +
+ +
+ + +
+ +
+ + +
+
+ +
+
+ + Generated Artist / AI Prompt: + + +
+

+ "{generatedCustomPrompt}" +

+
+
+
+
+ ); +}; diff --git a/Navbar.tsx b/Navbar.tsx new file mode 100644 index 0000000..1daf0e6 --- /dev/null +++ b/Navbar.tsx @@ -0,0 +1,228 @@ +import React from 'react'; +import { + BookOpen, + Film, + Palette, + Users, + Sparkles, + Printer, + Volume2, + VolumeX, + Moon, + Sun, + Layers, + BookMarked +} from 'lucide-react'; +import { soundManager } from '../utils/audio'; + +export type NavTab = + | 'reader' + | 'storyboard' + | 'art' + | 'characters' + | 'adaptability' + | 'publishing' + | 'activities'; + +export type AgeGroup = 'toddler' | 'pictureBook' | 'earlyReader'; + +interface NavbarProps { + activeTab: NavTab; + setActiveTab: (tab: NavTab) => void; + ageGroup: AgeGroup; + setAgeGroup: (age: AgeGroup) => void; + isBedtimeMode: boolean; + setIsBedtimeMode: (val: boolean) => void; + soundEnabled: boolean; + setSoundEnabled: (val: boolean) => void; + onOpenPitchDeck: () => void; +} + +export const Navbar: React.FC = ({ + activeTab, + setActiveTab, + ageGroup, + setAgeGroup, + isBedtimeMode, + setIsBedtimeMode, + soundEnabled, + setSoundEnabled, + onOpenPitchDeck, +}) => { + const tabs = [ + { id: 'reader' as NavTab, label: 'Story Reader', icon: BookOpen, badge: 'Live Book' }, + { id: 'storyboard' as NavTab, label: 'Storyboard', icon: Film, badge: '5 Scenes' }, + { id: 'art' as NavTab, label: 'Art Direction', icon: Palette, badge: 'Palette & Style' }, + { id: 'characters' as NavTab, label: 'Characters', icon: Users, badge: 'Cast' }, + { id: 'adaptability' as NavTab, label: 'Age Editions', icon: Layers, badge: '3 Ages' }, + { id: 'publishing' as NavTab, label: 'Format & Pitch', icon: BookMarked, badge: 'Specs' }, + { id: 'activities' as NavTab, label: 'Activity Corner', icon: Sparkles, badge: 'Creative' }, + ]; + + const handleTabClick = (tabId: NavTab) => { + soundManager.playPop(); + setActiveTab(tabId); + }; + + const handleSoundToggle = () => { + const newState = !soundEnabled; + setSoundEnabled(newState); + soundManager.enabled = newState; + if (newState) soundManager.playChime(); + }; + + const handleBedtimeToggle = () => { + soundManager.playHarp(); + setIsBedtimeMode(!isBedtimeMode); + }; + + return ( +
+ {/* Top Banner with Brand and Controls */} +
+ {/* Brand */} +
handleTabClick('reader')} + className="flex items-center gap-2.5 cursor-pointer group" + > +
+ πŸ¦” +
+
+
+ + Pip & the Whispering Cloud + + + Storybook Studio + +
+

+ Heartwarming Children's Story & Concept Architecture +

+
+
+ + {/* Global Toolbar Controls */} +
+ {/* Age Adaptability Selector */} +
+ Edition: + + + +
+ + {/* Bedtime / Day Toggle */} + + + {/* Sound FX Toggle */} + + + {/* Pitch Deck / Presentation Button */} + +
+
+ + {/* Navigation Sub-Tabs */} +
+ +
+
+ ); +}; diff --git a/PitchDeckModal.tsx b/PitchDeckModal.tsx new file mode 100644 index 0000000..d6860e0 --- /dev/null +++ b/PitchDeckModal.tsx @@ -0,0 +1,217 @@ +import React from 'react'; +import { + X, + Printer, + Award, + Heart, + BookOpen, + Palette, + Smile +} from 'lucide-react'; +import { BOOK_METADATA, CHARACTERS, COLOR_PALETTE } from '../data/storyData'; +import { soundManager } from '../utils/audio'; + +interface PitchDeckModalProps { + isOpen: boolean; + onClose: () => void; +} + +export const PitchDeckModal: React.FC = ({ isOpen, onClose }) => { + if (!isOpen) return null; + + const handlePrint = () => { + soundManager.playPop(); + window.print(); + }; + + return ( +
+
+ {/* Modal Top Bar */} +
+
+ πŸ¦” +
+

+ Children's Picture Book Concept & Editorial Pitch Deck +

+

+ Ready for literary agent submission, publisher pitch, or team review +

+
+
+ +
+ + +
+
+ + {/* Printable Pitch Content */} +
+ {/* Header Banner */} +
+ + Children's Picture Book Concept Pitch + +

+ {BOOK_METADATA.title} +

+

+ "{BOOK_METADATA.subtitle}" +

+

+ {BOOK_METADATA.logline} +

+ +
+ + 🎯 Target Age: {BOOK_METADATA.targetAge} + + + πŸ“„ Format: {BOOK_METADATA.pageCount} + + + πŸ“ Word Count: ~{BOOK_METADATA.wordCountPictureBook} + +
+
+ + {/* Core Themes */} +
+

+ + Core Thematic Pillars +

+
+ {BOOK_METADATA.primaryThemes.map((th, i) => ( +
+

+ {th.title} +

+

+ {th.desc} +

+
+ ))} +
+
+ + {/* Storyboard Synopsis: Beginning, Middle, End */} +
+

+ + Storyboard Narrative Arc (3-Act Structure) +

+ +
+
+ + Act I: The Beginning (Scenes 1–2) + +

+ The Hollow Oak Workshop & Meeting Caelum on Clover Hill +

+

+ Pip, a gentle hedgehog who captures nature's pigments in acorn cups, follows a curious whisper of mist to Clover Hill. He meets Caelum, an adorable baby cloud drooping close to the clover, ashamed because he can only make quiet murmurs instead of grand storm thunder. Pip validates Caelum's feelings and promises they will find his purpose together. +

+
+ +
+ + Act II: The Middle & Climax (Scenes 3–4) + +

+ The Meadow Art Trials & The Rainbow Blossom Shower +

+

+ Joined by wise old Barnaby Bear and spirited Squeak the bluebird, Pip tries creative thinking. When force and noise don't work, Pip paints colorful berry pigments directly onto the cloud's vapor. Caelum giggles, the gray knot of worry dissolves, and he releases not a scary downpour, but a warm, shimmering rainbow shower that revives the thirsty wildflowers. +

+
+ +
+ + Act III: The End & Resolution (Scene 5) + +

+ Twilight Constellations & Sweet Dreams +

+

+ Night descends in velvet indigo. Pip drinks honey chamomile tea on his treehouse porch while Caelum curves gently around the crescent moon as a silver scarf of mist. Safe, accepted, and deeply loved, both friends settle into peaceful sleep, knowing true kindness doesn't need to roar. +

+
+
+
+ + {/* Character Ensemble */} +
+

+ + Core Character Cast +

+
+ {CHARACTERS.map((char) => ( +
+
+ {char.avatarEmoji} + {char.name} + ({char.role}) +
+

+ {char.tagline} +

+
+ ))} +
+
+ + {/* Art Direction & Color Palette Summary */} +
+

+ + Visual Art Direction & Color Palette +

+

+ Medium: Soft digital gouache and watercolor texture with visible paper tooth grain, friendly rounded contours, and glowing golden-hour lighting keys. +

+
+ {COLOR_PALETTE.map((c) => ( +
+ + {c.name} +
+ ))} +
+
+ + {/* Publishing Recommendation */} +
+

+ + Publisher Recommendation & Commercial Strategy +

+

+ Recommended as a 32-page premium hardcover picture book (10x10 inches) with spot-UV varnish on rain droplets, paired with a companion Interactive Audio App edition for accessible tablet read-alouds. High franchise potential for early reader spin-offs (The Bramblewood Chronicles) and sensory board book editions for toddlers. +

+
+ + {/* Footer sign-off */} +
+ Concept created with thoughtful children's literature pacing, Social-Emotional Learning integration, and warm humanized storytelling. +
+
+
+
+ ); +}; diff --git a/StoryboardView.tsx b/StoryboardView.tsx new file mode 100644 index 0000000..8b2cb4e --- /dev/null +++ b/StoryboardView.tsx @@ -0,0 +1,398 @@ +import React, { useState } from 'react'; +import { + MapPin, + Users, + MessageCircle, + Activity, + Eye, + Copy, + Check, + Sparkles, + Camera +} from 'lucide-react'; +import { SCENES } from '../data/storyData'; +import { soundManager } from '../utils/audio'; + +interface StoryboardViewProps { + isBedtimeMode: boolean; + selectedSceneId?: number; +} + +export const StoryboardView: React.FC = ({ + isBedtimeMode, + selectedSceneId, +}) => { + const [filterAct, setFilterAct] = useState<'all' | 'beginning' | 'middle' | 'end'>('all'); + const [activeSceneId, setActiveSceneId] = useState(selectedSceneId || 1); + const [copiedText, setCopiedText] = useState(null); + + const filteredScenes = filterAct === 'all' + ? SCENES + : SCENES.filter(s => s.act === filterAct); + + const currentScene = SCENES.find(s => s.id === activeSceneId) || SCENES[0]; + + const handleCopyPrompt = (text: string) => { + soundManager.playPop(); + navigator.clipboard.writeText(text); + setCopiedText(text); + setTimeout(() => setCopiedText(null), 2500); + }; + + return ( +
+
+ {/* Header & Concept Pitch */} +
+
+
+
+ + Visual Narrative Architecture + + + 5 Key Visual Beats (Act I, II, III) + +
+

+ Complete Storyboard & Scene Bible +

+

+ Every frame pairs narrative intent with rigorous art direction: environmental settings, natural dialogue, physical actions, camera perspectives, and exact color palettes. +

+
+ + {/* Act Filter Tabs */} +
+ + + + +
+
+
+ + {/* Storyboard Navigation Thumbnails */} +
+ {filteredScenes.map((sc) => { + const isSelected = activeSceneId === sc.id; + return ( +
{ + soundManager.playPop(); + setActiveSceneId(sc.id); + }} + className={`p-3 rounded-2xl cursor-pointer border transition-all text-left group ${ + isSelected + ? 'bg-amber-100/90 dark:bg-indigo-900 border-amber-400 dark:border-indigo-600 shadow-md ring-2 ring-amber-400/40' + : 'bg-white dark:bg-slate-900/80 border-stone-200 dark:border-indigo-900 hover:bg-amber-50/60 dark:hover:bg-indigo-900/50' + }`} + > +
+ {sc.title} + + Scene {sc.id} + + + {sc.act} + +
+

+ {sc.title} +

+

+ {sc.subtitle} +

+
+ ); + })} +
+ + {/* Detailed Scene Storyboard Inspector */} +
+ {/* Top Bar with Scene Header */} +
+
+
+ + Act: {currentScene.act.toUpperCase()} + + + Scene #{currentScene.id} of {SCENES.length} + +
+

+ {currentScene.title} +

+

+ "{currentScene.subtitle}" +

+
+ +
+ Key Palette: +
+ {currentScene.artNotes.palette.map((color, idx) => ( +
+ ))} +
+
+
+ +
+ {/* Visual Frame & Illustration Prompt Column (5 cols) */} +
+ {/* Scene Frame Rendering */} +
+ {currentScene.imageAlt} +
+ + Frame #{currentScene.id} Preview + +
+ + {/* Illustration Prompt Box */} +
+
+ + + Illustration Prompt (AI / Artist Bible) + + +
+

+ "{currentScene.illustrationPrompt}" +

+
+ + {/* Art Direction Specs */} +
+
+ + Visual Direction Parameters +
+ +
+
+ + Camera Perspective: + +

+ {currentScene.artNotes.cameraAngle} +

+
+ +
+ + Lighting & Atmosphere: + +

+ {currentScene.artNotes.lighting} +

+
+ +
+ + Focal Point: + +

+ {currentScene.artNotes.focalPoint} +

+
+ +
+ + Character Expressions: + +

+ {currentScene.artNotes.expressions} +

+
+
+
+
+ + {/* Script & Stage Direction Storyboard Column (7 cols) */} +
+ {/* Setting */} +
+
+ + Scene Setting & Environment +
+
+ {currentScene.setting} +
+
+ + {/* Characters Present */} +
+
+ + Characters on Stage +
+
+ {currentScene.characters.map((charName) => ( + + {charName === 'Pip' ? 'πŸ¦”' : charName === 'Caelum' ? '☁️' : charName === 'Barnaby' ? '🐻' : '🐦'} + {charName} + + ))} +
+
+ + {/* Script & Dialogue */} +
+
+ + Spoken Dialogue & Tone +
+ +
+ {currentScene.dialogue.map((dlg, i) => ( +
+
+ + {dlg.speaker}: + +

+ "{dlg.text}" +

+
+ + 🎭 Tone: {dlg.tone} + +
+ ))} +
+
+ + {/* Key Physical Actions & Choreography */} +
+
+ + Key Physical Actions (Beat by Beat) +
+ +
+ {currentScene.keyActions.map((action, i) => ( +
+ + {i + 1} + +

+ {action} +

+
+ ))} +
+
+ + {/* Director's & Illustrator's Intent */} +
+
+ + Director's Core Intention & Emotional Beat +
+

+ "{currentScene.directorNotes}" +

+
+
+
+
+
+
+ ); +};