// Story Weaver — screens, overlays, and modals // Library · Creator · Settings · Reader · Weaving · ApiKeyModal · AddLinkModal // Driven by the `t` theme object defined in app.jsx. const { useState, useEffect, useRef } = React; // ─── Icons ──────────────────────────────────────────────────── function Icon({ name, size = 22, stroke = 2 }) { const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }; const paths = { library: <>, sparkles: <>, settings: <>, search: <>, star: <>, close: <>, chevron: <>, book: <>, plus: <>, moon: <>, wand: <>, link: <>, trash: <>, pencil: <>, cake: <>, image: <>, 'cloud-up': <>, 'cloud-dn': <>, eye: <>, 'eye-off': <>, check: <>, play: <>, pause: <>, }; return {paths[name]}; } // ─── Star rating ────────────────────────────────────────────── function StarRating({ value, max = 5, size = 12, color, mutedColor, onRate }) { return (
{Array.from({ length: max }).map((_, i) => ( { e.stopPropagation(); onRate(i + 1); } : undefined} > ))}
); } // ─── Bottom nav ─────────────────────────────────────────────── function BottomNav({ t, tab, onChange }) { const items = [ { id: 'library', icon: 'library', label: 'Library' }, { id: 'create', icon: 'sparkles', label: 'Create' }, { id: 'settings', icon: 'settings', label: 'Me' }, ]; if (t.navStyle === 'pill') { return (
{items.map((it) => { const active = tab === it.id; return ( ); })}
); } if (t.navStyle === 'dock') { return (
{items.map((it) => { const active = tab === it.id; return ( ); })}
); } return (
{items.map((it) => { const active = tab === it.id; return ( ); })}
); } // ─── Library ────────────────────────────────────────────────── function Library({ t, items, onOpen, onDelete, onEditLink, onRate, childName }) { const [query, setQuery] = useState(''); const [category, setCategory] = useState('All'); const filtered = items.filter(s => { const matchQuery = !query || s.title.toLowerCase().includes(query.toLowerCase()) || (s.category && s.category.toLowerCase().includes(query.toLowerCase())); const matchCat = category === 'All' || (category === 'Stories' && s.type === 'story') || (category === 'Linked' && s.type === 'link'); return matchQuery && matchCat; }); const search = (
setQuery(e.target.value)} placeholder="Find a story…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', color: t.text, fontFamily: t.fontBody, fontWeight: 500, fontSize: 15, }} />
); return (
For {childName}

{t.libraryGreeting || "Tonight's\nstories"}

{search}
{['All', 'Stories', 'Linked'].map((c) => { const active = category === c; return ( ); })}
{t.layout === 'editorial' ? ( ) : t.layout === 'pinterest' ? ( ) : ( )}
); } // ─── Card meta ──────────────────────────────────────────────── function StoryMeta({ t, story, compact, onRate }) { return (
{story.title}
onRate(story.id, n) : undefined} /> {story.type === 'link' ? '· Gemini Storybook' : `· ${story.category}`}
); } // ─── Story card with overflow controls ─────────────────────── function StoryCard({ t, item, onOpen, onDelete, onEditLink, onRate, coverH = 210 }) { return (
{onEditLink && ( )} {onDelete && ( )}
); } function SimpleGrid({ t, stories, onOpen, onDelete, onEditLink, onRate }) { return (
{stories.map(s => ( ))}
); } function PinterestGrid({ t, stories, onOpen, onDelete, onEditLink, onRate }) { return (
{stories.map((s, i) => { const tall = i % 3 !== 1; const h = tall ? 260 : 200; const rowSpan = Math.ceil((h + 80) / 12); return (
); })}
); } function EditorialGrid({ t, stories, onOpen, onDelete, onEditLink, onRate }) { const [hero, ...rest] = stories; if (!hero) return null; return (
{onEditLink && ( )} {onDelete && ( )}
{rest.map(s => ( ))}
); } // ─── Creator ────────────────────────────────────────────────── function Creator({ t, onWeave, onAddLink, context, setContext, vocab, setVocab, pages, setPages, tone, setTone, storyStyle, setStoryStyle, character, setCharacter, childName }) { const [vocabInput, setVocabInput] = useState(''); const addVocab = (e) => { if ((e.key === ',' || e.key === 'Enter' || e.key === ' ') && vocabInput.trim()) { e.preventDefault(); const w = vocabInput.trim().replace(/,$/, ''); if (w && !vocab.includes(w)) setVocab([...vocab, w]); setVocabInput(''); } }; const fieldBox = { background: t.glass, border: `1px solid ${t.glassBorder}`, backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', borderRadius: t.navStyle === 'dock' ? 22 : 18, padding: 16, }; const labelStyle = { fontFamily: t.fontBody, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: t.textMuted, marginBottom: 10, display: 'block', }; return (
Create

Weave a story

{/* Chooser cards */}
Bespoke tale
AI-generated story
{/* Context */}