+
+ 4. Select a Theme
+
+ {STORY_DATA.themes.map((t) => (
+
+ ))}
+
+
+
+ 5. Story Length
+
+ {STORY_DATA.length.map((l) => (
+
+ ))}
+
+
+
+ Make My Story
+
+
+
+
+
+
+
+ {/* Story Panel (covers screen height, no separate story page) */}
+
+
+ Your Story
+
+ {(() => {
+ const displayed = displayedText;
+ if (!displayed) {
+ return "Click “Make My Story” to generate a bedtime story.";
+ }
+ const pieces: React.ReactNode[] = [];
+ let last = 0;
+ for (let i = 0; i < ranges.length; i++) {
+ const { start, end } = ranges[i];
+ if (start > last) {
+ pieces.push({displayed.slice(last, start)});
+ }
+ pieces.push(
+ {
+ chunkRefs.current[i] = el;
+ }}
+ className={i === currentChunkIdx ? "bg-yellow-200" : ""}
+ >
+ {displayed.slice(start, end)}
+ ,
+ );
+ last = end;
+ }
+ if (last < displayed.length) {
+ pieces.push({displayed.slice(last)});
+ }
+ return pieces;
+ })()}
+
+ {isLoading && (
+
+ {isSpeaking ? "Generating and speaking..." : "Generating..."}
+
+ )}
+ {generatedStory && !isLoading && isTTSReady && !isSpeaking && (
+
+
+ )}
+ Story finished.
+