\n {/* Header */}\n

\n 📚 Bedtime Story Generator\n

\n \n \n

\n \n {/* Main content */}\n

\n {isLoading && (\n

\n \n \n \n

Creating your story...

\n )}\n \n {currentView === \"generator\" && (\n {\n setCurrentStory(story);\n setCurrentView(\"viewer\");\n }}\n setIsLoading={setIsLoading}\n />\n )}\n \n {currentView === \"gallery\" && (\n \n )}\n \n {currentView === \"viewer\" && currentStory && (\n {\n if (currentStory.id) {\n setCurrentView(\"gallery\");\n } else {\n setCurrentView(\"generator\");\n }\n }}\n onSave={saveStory}\n onShare={() => shareStory(currentStory)}\n onDelete={currentStory.id ? () => deleteStory(currentStory.id!) : undefined}\n />\n )}\n

\n \n {/* Footer */}\n \n

\n );\n};",[],[236,242,248],{"_102":255,"_95":256,"_155":257,"_157":243,"_158":136,"_159":135,"_160":161,"_104":258,"_99":32,"_163":181,"_165":259,"_166":22,"_167":-5,"_168":260,"_98":261},"46009b46-abfd-11f0-8c49-0224a6c84d84","StoryGallery.tsx","0199f674-ccb7-77ca-b3e4-c3a859454066",["D",1760776473707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Story } from \"../../shared/types.ts\";\n\ninterface StoryGalleryProps {\n stories: Story[];\n onViewStory: (story: Story) => void;\n onDeleteStory: (id: number) => Promise;\n isLoading: boolean;\n}\n\nexport const StoryGallery: React.FC = ({ \n stories, \n onViewStory,\n onDeleteStory,\n isLoading\n}) => {\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleDateString(undefined, {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n };\n \n const handleDelete = async (e: React.MouseEvent, id: number) => {\n e.stopPropagation();\n await onDeleteStory(id);\n };\n \n return (\n

My Bedtime Stories

\n \n {isLoading ? (\n

\n \n \n \n

\n ) : stories.length === 0 ? (\n

📚

No stories yet!

Create your first bedtime story to see it here.

\n ) : (\n

\n {stories.map((story) => (\n

onViewStory(story)}\n >\n

\n handleDelete(e, story.id!)}\n className=\"bg-red-500 text-white rounded-full p-2 hover:bg-red-600 transition-colors\"\n title=\"Delete story\"\n >\n 🗑️\n \n

\n \n

{story.title}

\n \n

\n {story.animalEmoji}\n {story.animalName}\n

\n \n

\n {story.activityEmoji}\n

\n \n

\n {story.styleEmoji}\n

\n \n

\n Created on {formatDate(story.createdAt)}\n

\n ))}\n

\n )}\n

\n );\n};",[],[236,242,256],{"_102":263,"_95":264,"_155":265,"_157":243,"_158":136,"_159":135,"_160":161,"_104":266,"_99":32,"_163":181,"_165":267,"_166":22,"_167":-5,"_168":268,"_98":269},"46009efc-abfd-11f0-8c49-0224a6c84d84","StoryGenerator.tsx","0199f674-ccb7-77ca-b3e4-c6b7614aa91e",["D",1760776473707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { \n animalOptions, \n colorOptions, \n activityOptions, \n styleOptions,\n StoryOptions,\n Story\n} from \"../../shared/types.ts\";\n\ninterface StoryGeneratorProps {\n onStoryGenerated: (story: Story) => void;\n setIsLoading: (isLoading: boolean) => void;\n}\n\nexport const StoryGenerator: React.FC = ({ \n onStoryGenerated,\n setIsLoading\n}) => {\n const [selectedAnimal, setSelectedAnimal] = useState(null);\n const [selectedColor, setSelectedColor] = useState(null);\n const [selectedActivity, setSelectedActivity] = useState(null);\n const [selectedStyle, setSelectedStyle] = useState(null);\n \n const getSelectedAnimalEmoji = () => {\n const animal = animalOptions.find(a => a.name === selectedAnimal);\n return animal ? animal.emoji : \"\";\n };\n \n const getSelectedActivityEmoji = () => {\n const activity = activityOptions.find(a => a.name === selectedActivity);\n return activity ? activity.emoji : \"\";\n };\n \n const getSelectedStyleEmoji = () => {\n const style = styleOptions.find(s => s.name === selectedStyle);\n return style ? style.emoji : \"\";\n };\n \n const handleGenerateStory = async () => {\n if (!selectedAnimal || !selectedColor || !selectedActivity || !selectedStyle) {\n alert(\"Please select all options to generate a story!\");\n return;\n }\n \n const options: StoryOptions = {\n animal: selectedAnimal,\n animalEmoji: getSelectedAnimalEmoji(),\n color: selectedColor,\n activity: selectedActivity,\n activityEmoji: getSelectedActivityEmoji(),\n style: selectedStyle,\n styleEmoji: getSelectedStyleEmoji()\n };\n \n setIsLoading(true);\n \n try {\n const response = await fetch(\"/api/stories/generate\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(options),\n });\n \n const data = await response.json();\n \n if (data.success && data.story) {\n onStoryGenerated(data.story);\n } else {\n alert(\"Failed to generate story. Please try again.\");\n }\n } catch (error) {\n console.error(\"Error generating story:\", error);\n alert(\"An error occurred while generating the story. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n \n const renderSelectionSection = (\n title: string,\n emoji: string,\n options: { name: string; emoji: string }[],\n selectedValue: string | null,\n setSelectedValue: (value: string) => void\n ) => (\n

\n {emoji} {title}\n

\n {options.map((option) => (\n setSelectedValue(option.name)}\n className={`emoji-btn bg-white rounded-lg p-4 shadow-md flex flex-col items-center justify-center ${\n selectedValue === option.name ? \"selected\" : \"\"\n }`}\n >\n {option.emoji}\n {option.name}\n \n ))}\n

\n );\n \n const renderColorSelection = () => (\n

\n 🎨 Choose a Color\n

\n {colorOptions.map((color) => (\n

\n setSelectedColor(color.name)}\n className={`color-btn ${selectedColor === color.name ? \"selected\" : \"\"} ${\n color.name === \"Rainbow\" ? \"rainbow-btn\" : \"\"\n }`}\n style={{ backgroundColor: color.name !== \"Rainbow\" ? color.hex : undefined }}\n title={color.name}\n >\n {color.name}\n

\n ))}\n

\n );\n \n return (\n

Create Your Bedtime Story

\n \n {renderSelectionSection(\n \"Choose an Animal\",\n \"🦊\",\n animalOptions,\n selectedAnimal,\n setSelectedAnimal\n )}\n \n {renderColorSelection()}\n \n {renderSelectionSection(\n \"Choose an Activity\",\n \"🎡\",\n activityOptions,\n selectedActivity,\n setSelectedActivity\n )}\n \n {renderSelectionSection(\n \"Choose a Story Style\",\n \"📖\",\n styleOptions,\n selectedStyle,\n setSelectedStyle\n )}\n \n

\n \n ✨ Generate My Story ✨\n \n

\n );\n};",[],[236,242,264],{"_102":271,"_95":272,"_155":273,"_157":243,"_158":136,"_159":135,"_160":161,"_104":274,"_99":32,"_163":181,"_165":275,"_166":22,"_167":-5,"_168":276,"_98":277},"4600a37a-abfd-11f0-8c49-0224a6c84d84","StoryViewer.tsx","0199f674-ccb7-77ca-b3e4-cb3d7ca4c1ff",["D",1760776473707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Story } from \"../../shared/types.ts\";\n\ninterface StoryViewerProps {\n story: Story;\n onBack: () => void;\n onSave: (story: Omit) => Promise;\n onShare: () => void;\n onDelete?: () => Promise;\n}\n\nexport const StoryViewer: React.FC = ({ \n story, \n onBack, \n onSave,\n onShare,\n onDelete\n}) => {\n const [isSaving, setIsSaving] = useState(false);\n const [isDeleting, setIsDeleting] = useState(false);\n \n const handleSave = async () => {\n if (story.id) {\n // Story is already saved\n return;\n }\n \n setIsSaving(true);\n try {\n const success = await onSave(story);\n if (success) {\n alert(\"Story saved successfully!\");\n } else {\n alert(\"Failed to save story. Please try again.\");\n }\n } catch (error) {\n console.error(\"Error saving story:\", error);\n alert(\"An error occurred while saving the story. Please try again.\");\n } finally {\n setIsSaving(false);\n }\n };\n \n const handleDelete = async () => {\n if (!onDelete) return;\n \n setIsDeleting(true);\n try {\n await onDelete();\n } catch (error) {\n console.error(\"Error deleting story:\", error);\n } finally {\n setIsDeleting(false);\n }\n };\n \n // Format the story content with paragraph breaks\n const formatContent = (content: string) => {\n return content.split(\"\\n\").map((paragraph, index) => (\n

{paragraph}

\n ));\n };\n \n return (\n

\n {/* Story header */}\n

\n \n ← Back\n \n \n

\n {!story.id && (\n \n {isSaving ? \"Saving...\" : \"Save Story\"}\n \n )}\n \n \n Share\n \n \n {onDelete && (\n \n {isDeleting ? \"Deleting...\" : \"Delete\"}\n \n )}\n

\n \n

{story.title}

\n \n

\n {story.animalEmoji}\n {story.animalName} the {story.color} {story.animal}\n

\n \n

\n {story.activityEmoji}\n {story.activity}\n

\n \n

\n {story.styleEmoji}\n {story.style} story\n

\n \n {/* Story content */}\n

\n {formatContent(story.content)}\n

\n \n

\n {story.animalName} the {story.color} {story.animal.toLowerCase()} {story.activity.toLowerCase()}\n

\n );\n};",[],[236,242,272],[236,242],{"_102":280,"_95":281,"_155":282,"_157":237,"_158":136,"_159":135,"_160":161,"_104":283,"_99":32,"_163":284,"_165":285,"_166":22,"_167":-5,"_168":286,"_98":287},"4600ae06-abfd-11f0-8c49-0224a6c84d84","index.html","0199f674-ccb7-77ca-b3e4-d2978c00abee",["D",1760776473707],"file","\n\n\n \n \n Bedtime Story Generator\n \n \n \n \n\n\n

\n \n\n",[],[236,281],{"_102":289,"_95":290,"_155":291,"_157":237,"_158":136,"_159":135,"_160":161,"_104":292,"_99":32,"_163":181,"_165":293,"_166":22,"_167":-5,"_168":294,"_98":295},"4600b11c-abfd-11f0-8c49-0224a6c84d84","index.tsx","0199f674-ccb7-77ca-b3e4-d5f077e96b6c",["D",1760776473707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\n// Render the app\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();",[],[236,290],[236],{"_102":298,"_95":299,"_155":300,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":301,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":302,"_98":311},"4600b720-abfd-11f0-8c49-0224a6c84d84","shared","0199f674-ccb7-77ca-b3e4-e35b94307e41",["D",1760776473707],[303],{"_102":304,"_95":305,"_155":306,"_157":300,"_158":136,"_159":135,"_160":161,"_104":307,"_99":32,"_163":181,"_165":308,"_166":22,"_167":-5,"_168":309,"_98":310},"4600b3ec-abfd-11f0-8c49-0224a6c84d84","types.ts","0199f674-ccb7-77ca-b3e4-dc4c5d0dbde7",["D",1760776473707],"// Shared types for the bedtime story generator\n\nexport interface Story {\n id?: number;\n title: string;\n content: string;\n animal: string;\n animalEmoji: string;\n animalName: string;\n color: string;\n activity: string;\n activityEmoji: string;\n style: string;\n styleEmoji: string;\n imageUrl: string;\n createdAt: string;\n}\n\nexport interface StoryOptions {\n animal: string;\n animalEmoji: string;\n color: string;\n activity: string;\n activityEmoji: string;\n style: string;\n styleEmoji: string;\n}\n\nexport interface AnimalOption {\n name: string;\n emoji: string;\n}\n\nexport interface ActivityOption {\n name: string;\n emoji: string;\n}\n\nexport interface StyleOption {\n name: string;\n emoji: string;\n}\n\nexport interface ColorOption {\n name: string;\n hex: string;\n}\n\n// Options for story generation\nexport const animalOptions: AnimalOption[] = [\n { name: \"Fox\", emoji: \"🦊\" },\n { name: \"Bear\", emoji: \"🐻\" },\n { name: \"Rabbit\", emoji: \"🐰\" },\n { name: \"Elephant\", emoji: \"🐘\" },\n { name: \"Lion\", emoji: \"🦁\" },\n { name: \"Monkey\", emoji: \"🐵\" },\n { name: \"Penguin\", emoji: \"🐧\" },\n { name: \"Koala\", emoji: \"🐨\" },\n { name: \"Tiger\", emoji: \"🐯\" },\n { name: \"Panda\", emoji: \"🐼\" },\n];\n\nexport const colorOptions: ColorOption[] = [\n { name: \"Red\", hex: \"#FF5252\" },\n { name: \"Blue\", hex: \"#4FC3F7\" },\n { name: \"Green\", hex: \"#66BB6A\" },\n { name: \"Purple\", hex: \"#AB47BC\" },\n { name: \"Yellow\", hex: \"#FFEB3B\" },\n { name: \"Pink\", hex: \"#F06292\" },\n { name: \"Orange\", hex: \"#FF9800\" },\n { name: \"Teal\", hex: \"#26A69A\" },\n { name: \"Brown\", hex: \"#8D6E63\" },\n { name: \"Rainbow\", hex: \"rainbow\" },\n];\n\nexport const activityOptions: ActivityOption[] = [\n { name: \"Going to the park\", emoji: \"🏞️\" },\n { name: \"Playing in a band\", emoji: \"🎸\" },\n { name: \"Having a picnic\", emoji: \"🧺\" },\n { name: \"Riding a rollercoaster\", emoji: \"🎢\" },\n { name: \"Swimming in the ocean\", emoji: \"🌊\" },\n { name: \"Flying a kite\", emoji: \"🪁\" },\n { name: \"Exploring a cave\", emoji: \"🕳️\" },\n { name: \"Building a treehouse\", emoji: \"🌳\" },\n { name: \"Visiting a museum\", emoji: \"🏛️\" },\n { name: \"Camping in the forest\", emoji: \"⛺\" },\n];\n\nexport const styleOptions: StyleOption[] = [\n { name: \"Spooky\", emoji: \"👻\" },\n { name: \"Funny\", emoji: \"😂\" },\n { name: \"Adventurous\", emoji: \"🗺️\" },\n { name: \"Magical\", emoji: \"✨\" },\n { name: \"Educational\", emoji: \"📚\" },\n { name: \"Silly\", emoji: \"🤪\" },\n { name: \"Heartwarming\", emoji: \"❤️\" },\n { name: \"Mysterious\", emoji: \"🔍\" },\n { name: \"Superhero\", emoji: \"🦸\" },\n { name: \"Fantasy\", emoji: \"🧚\" },\n];\n\n// Cute animal name generators\nconst animalAdjectives = [\n \"Fluffy\", \"Bouncy\", \"Sparkly\", \"Giggly\", \"Snuggly\", \n \"Wiggly\", \"Bubbly\", \"Twinkly\", \"Cuddly\", \"Fuzzy\",\n \"Happy\", \"Silly\", \"Jumpy\", \"Zippy\", \"Poppy\"\n];\n\nconst animalNameSuffixes = [\n \"Whiskers\", \"Paws\", \"Toes\", \"Nose\", \"Ears\", \n \"Tail\", \"Tummy\", \"Cheeks\", \"Spots\", \"Stripes\",\n \"Fluff\", \"Bounce\", \"Hop\", \"Wiggle\", \"Giggle\"\n];\n\nexport function generateCuteAnimalName(): string {\n const adjective = animalAdjectives[Math.floor(Math.random() * animalAdjectives.length)];\n const suffix = animalNameSuffixes[Math.floor(Math.random() * animalNameSuffixes.length)];\n return `${adjective} ${suffix}`;\n}",[],[299,305],[299],{"_102":313,"_95":314,"_155":315,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":316,"_99":32,"_163":284,"_165":317,"_166":22,"_167":-5,"_168":318,"_98":319},"4600b874-abfd-11f0-8c49-0224a6c84d84","README.md","0199f674-ccb7-77ca-b3e4-e7245aeb59ac",["D",1760776473707],"# Bedtime Story Generator for Kids\n\nA fun and interactive app for generating bedtime stories for children.\n\n## Features\n\n- 🦊 Choose an animal character with emojis\n- 🌈 Pick a color for your animal\n- 🎡 Select an activity (park, band, picnic, rollercoaster)\n- 👻 Choose a story style (spooky, funny, adventurous)\n- 🖼️ AI-generated illustrations for each story\n- 💾 Save stories to revisit later\n- 🗂️ Gallery to browse all your saved stories\n- 📱 Share stories with friends and family\n- 🎨 Playful, kid-friendly UI\n\n## Project Structure\n\n- `/backend` - API routes, database, and story generation\n- `/frontend` - UI components, emoji selectors, and gallery\n- `/shared` - Shared types and utilities\n\n## How to Use\n\n1. Select an animal, color, activity, and story style using the emoji buttons\n2. Click \"Generate Story\" to create a unique bedtime story\n3. Save your story to the gallery\n4. Browse and share your saved stories",[],[314],"files",[152,170,176,185,194,200,209,215,224,234,240,246,254,262,270,279,288,297,303,312],"counts",{"_324":32,"_325":135,"_326":32,"_327":328},"pulls","branches","forks","envVars",{"_329":32,"_330":32},"count","emptyCount","contents",[333,336,339,342],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":334,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":335},["D",1760776473707],[154],{"_102":235,"_95":236,"_155":237,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":337,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":338},["D",1760776473707],[236],{"_102":298,"_95":299,"_155":300,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":340,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":341},["D",1760776473707],[299],{"_102":313,"_95":314,"_155":315,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":343,"_99":32,"_163":284,"_165":317,"_166":22,"_167":-5,"_98":344},["D",1760776473707],[314],"upstreamProject",{"_102":144,"_95":96,"_110":347,"_111":-5,"_108":109,"_23":348},"A fun and interactive app for generating bedtime stories",{"_93":349,"_128":350},"dthyresson","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yY2VObmZYclBVbjhpdnlQQkROeEIycWViSTYifQ","upstreamBranch",{"_102":139,"_104":353,"_354":355,"_95":43,"_137":144,"_99":141,"_138":-5,"_140":-5,"_356":357,"_106":-5,"_149":22,"_108":109,"_148":349,"_16":146,"_147":96},["D",1747779697366],"updatedAt",["D",1747780107230],"lockfileKey","1756341872068-esm.town_v_dthyresson_bedtime-story-time@14-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":364,"_369":32,"_370":32,"_371":372,"_378":22,"_379":368,"_380":381,"_384":-5},{"_102":103,"_95":96,"_104":365,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":366,"_130":367,"_133":368,"_149":22},["D",1760776473707],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},"ahead","behind","diff",{"_373":374,"_166":375,"_376":377},"added",[],[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_102":139,"_104":382,"_354":383,"_95":43,"_137":144,"_99":141,"_138":-5,"_140":-5,"_356":357,"_106":-5,"_149":22,"_108":109,"_148":349,"_16":146,"_147":96},["D",1747779697366],["D",1747780107230],"pull","actionData","errors"]

notforme

bedtime-story-time

Mergenotforme/mainintodthyresson/main