// onboarding.jsx β€” first-run flow // Curated species libraries (the search filters these; custom adds an "Other" entry) const PET_LIBRARY = [ { em: '🐱', lbl: 'Cat', tint: 'sand', aliases: 'kitten feline kitty' }, { em: 'πŸ•', lbl: 'Dog', tint: 'honey', aliases: 'puppy canine pup' }, { em: '🐹', lbl: 'Guinea pig', tint: 'terra', aliases: 'cavy piggy' }, { em: '🐰', lbl: 'Rabbit', tint: 'sand', aliases: 'bunny hare' }, { em: '🐭', lbl: 'Hamster', tint: 'honey', aliases: 'syrian dwarf' }, { em: 'πŸ€', lbl: 'Rat', tint: 'sand', aliases: 'fancy dumbo' }, { em: '🐿️', lbl: 'Chinchilla', tint: 'sand', aliases: 'chin' }, { em: 'πŸ¦”', lbl: 'Hedgehog', tint: 'honey', aliases: 'african pygmy' }, { em: '🐦', lbl: 'Bird', tint: 'pond', aliases: 'budgie parakeet canary cockatiel' }, { em: '🦜', lbl: 'Parrot', tint: 'forest', aliases: 'macaw cockatoo amazon' }, { em: '🐟', lbl: 'Fish', tint: 'pond', aliases: 'betta goldfish guppy tetra' }, { em: '🐒', lbl: 'Turtle', tint: 'forest', aliases: 'tortoise terrapin' }, { em: '🦎', lbl: 'Lizard', tint: 'sage', aliases: 'gecko bearded dragon iguana' }, { em: '🐍', lbl: 'Snake', tint: 'forest', aliases: 'python ball corn' }, { em: '🐸', lbl: 'Frog', tint: 'sage', aliases: 'toad tree' }, { em: 'πŸ¦‹', lbl: 'Invertebrate',tint: 'terra', aliases: 'tarantula stick crab snail axolotl' }, ]; const PLANT_LIBRARY = [ { em: '🌱', lbl: 'Monstera', tint: 'forest', aliases: 'deliciosa swiss cheese adansonii' }, { em: '🌿', lbl: 'Fern', tint: 'sage', aliases: 'maidenhair boston bird nest' }, { em: 'πŸͺ΄', lbl: 'Snake plant', tint: 'olive', aliases: 'sansevieria mother in law' }, { em: 'πŸƒ', lbl: 'Pothos', tint: 'sage', aliases: 'devils ivy golden marble queen' }, { em: '🌡', lbl: 'Cactus', tint: 'desert', aliases: 'barrel pincushion saguaro' }, { em: '🌴', lbl: 'Palm', tint: 'sage', aliases: 'parlor areca majesty' }, { em: '🌳', lbl: 'Fiddle leaf', tint: 'forest', aliases: 'fig ficus lyrata' }, { em: 'πŸͺ·', lbl: 'Peace lily', tint: 'forest', aliases: 'spathiphyllum' }, { em: '🌼', lbl: 'Orchid', tint: 'terra', aliases: 'phalaenopsis moth' }, { em: '🌸', lbl: 'Flower', tint: 'terra', aliases: 'rose tulip violet primrose geranium' }, { em: 'πŸ…', lbl: 'Vegetable', tint: 'terra', aliases: 'tomato pepper lettuce kale' }, { em: '🌾', lbl: 'Herb', tint: 'sage', aliases: 'basil mint rosemary thyme oregano' }, { em: '🌴', lbl: 'Ponytail palm', tint: 'olive', aliases: 'beaucarnea recurvata palm' }, { em: '🌺', lbl: 'Hibiscus', tint: 'terra', aliases: '' }, { em: 'πŸ₯‘', lbl: 'Avocado', tint: 'sage', aliases: 'pit stone' }, { em: 'πŸ€', lbl: 'Other', tint: 'forest', aliases: 'succulent jade aloe spider zz' }, ]; const PICKER_PAGE_SIZE = 12; const FULL_PET_LIBRARY_DATA = ` dog|Dog puppy|Puppy cat|Cat rabbit|Rabbit guinea pig|Guinea Pig syrian hamster|Syrian Hamster dwarf hamster|Dwarf Hamster rat|Rat mouse|Mouse ferret|Ferret gerbil|Mongolian Gerbil budgerigar|Budgerigar cockatiel|Cockatiel canary|Canary bearded dragon|Bearded Dragon leopard gecko|Leopard Gecko crested gecko|Crested Gecko corn snake|Corn Snake ball python|Ball Python red-eared slider|Red-Eared Slider axolotl|Axolotl african dwarf frog|African Dwarf Frog betta|Siamese Fighting Fish fancy goldfish|Fancy Goldfish neon tetra|Neon Tetra guppy|Guppy corydoras|Corydoras Catfish cherry shrimp|Red Cherry Shrimp mystery snail|Mystery Snail chicken|Chicken molly|Molly platy|Platy zebra danio|Zebra Danio otocinclus|Otocinclus angelfish|Freshwater Angelfish bristlenose pleco|Bristlenose Pleco kuhli loach|Kuhli Loach chinchilla|Chinchilla lovebird|Lovebird russian tortoise|Russian Tortoise green-cheeked conure|Green-cheeked Conure hedgehog|African Pygmy Hedgehog sulcata tortoise|Sulcata Tortoise sugar glider|Sugar Glider coturnix quail|Coturnix Quail hermit crab|Land Hermit Crab chilean rose tarantula|Chilean Rose Tarantula german blue ram|German Blue Ram labrador retriever|Labrador Retriever golden retriever|Golden Retriever french bulldog|French Bulldog german shepherd|German Shepherd poodle|Poodle dachshund|Dachshund beagle|Beagle chihuahua|Chihuahua border collie|Border Collie cocker spaniel|Cocker Spaniel jack russell terrier|Jack Russell Terrier shih tzu|Shih Tzu yorkshire terrier|Yorkshire Terrier domestic shorthair cat|Domestic Shorthair domestic longhair cat|Domestic Longhair maine coon|Maine Coon ragdoll|Ragdoll siamese|Siamese persian|Persian british shorthair|British Shorthair bengal cat|Bengal sphynx cat|Sphynx norwegian forest cat|Norwegian Forest Cat degu|Degu miniature pig|Miniature Pig horse|Horse pony|Pony donkey|Donkey goat|Goat sheep|Sheep duck|Domestic duck goose|Domestic goose zebra finch|Zebra finch society finch|Society finch parrotlet|Pacific parrotlet african grey parrot|African grey parrot amazon parrot|Amazon parrot dove|Ringneck dove pigeon|Domestic pigeon cardinal tetra|Cardinal Tetra swordtail|Swordtail cherry barb|Cherry Barb dwarf gourami|Dwarf Gourami discus|Discus clownfish|Clownfish koi|Koi nerite snail|Nerite Snail gargoyle gecko|Gargoyle Gecko blue-tongued skink|Blue-Tongued Skink green anole|Green Anole panther chameleon|Panther Chameleon king snake|Kingsnake milk snake|Milk Snake garter snake|Common Garter Snake boa constrictor|Boa Constrictor musk turtle|Common Musk Turtle greek tortoise|Greek Tortoise white's tree frog|White's Tree Frog pacman frog|Pacman Frog jumping spider|Regal Jumping Spider `; const FULL_PLANT_LIBRARY_DATA = ` pothos|Golden Pothos monstera|Monstera snake plant|Snake Plant peace lily|Peace Lily zz plant|ZZ Plant heartleaf philodendron|Heartleaf Philodendron spider plant|Spider Plant rubber plant|Rubber Plant fiddle leaf fig|Fiddle Leaf Fig corn plant|Corn Plant lily|Lily sago palm|Sago Palm dieffenbachia|Dieffenbachia oleander|Oleander azalea|Azalea basil|Basil mint|Mint rosemary|Rosemary thyme|Thyme parsley|Parsley tomato|Tomato lettuce|Lettuce bell pepper|Bell Pepper jade plant|Jade Plant aloe vera|Aloe Vera echeveria|Echeveria christmas cactus|Christmas Cactus lavender|Lavender rose|Rose geranium|Geranium (Zonal) calathea|Calathea pilea peperomioides|Chinese Money Plant hoya|Wax Plant syngonium|Arrowhead Vine alocasia|Alocasia 'Polly' peperomia|Peperomia boston fern|Boston Fern anthurium|Anthurium schefflera|Dwarf Umbrella Tree orchid|Moth Orchid oregano|Oregano strawberry|Strawberry daffodil|Daffodil tulip|Tulip hyacinth|Hyacinth croton|Croton bird of paradise|Bird of Paradise weeping fig|Weeping Fig string of pearls|String of Pearls hydrangea|Hydrangea chives|Chives prayer plant|Prayer Plant marble queen pothos|Marble Queen Pothos monstera adansonii|Monstera Adansonii philodendron brasil|Philodendron Brasil philodendron birkin|Philodendron Birkin philodendron xanadu|Philodendron Xanadu string of hearts|String of Hearts hoya kerrii|Sweetheart Hoya african violet|African Violet rex begonia|Rex Begonia nerve plant|Nerve Plant polka dot plant|Polka Dot Plant chinese evergreen|Chinese Evergreen dracaena marginata|Dragon Tree yucca cane|Yucca Cane parlor palm|Parlor Palm areca palm|Areca Palm kentia palm|Kentia Palm maidenhair fern|Maidenhair fern staghorn fern|Staghorn fern asparagus fern|Asparagus fern air plant|Air plant easter cactus|Easter cactus kalanchoe|Kalanchoe haworthia|Haworthia burro's tail|Burro's tail ponytail palm|Ponytail palm cilantro|Cilantro / Coriander sage|Sage crocus|Spring Crocus dahlia|Dahlia petunia|Petunia marigold|Marigold zinnia|Zinnia sunflower|Sunflower coneflower|Purple Coneflower black-eyed susan|Black-eyed Susan peony|Peony iris|Bearded Iris chrysanthemum|Chrysanthemum pansy|Pansy impatiens|Impatiens fuchsia|Fuchsia bougainvillea|Bougainvillea clematis|Clematis wisteria|Wisteria jasmine|Jasmine gardenia|Gardenia hibiscus|Tropical hibiscus rhododendron|Rhododendron camellia|Camellia boxwood|Boxwood hosta|Hosta coleus|Coleus heuchera|Heuchera fountain grass|Fountain Grass (verify exact species) bamboo|Bamboo (verify exact species) `; function iconKeyForPickerKey(key) { return String(key || '') .toLowerCase() .replace(/['’]/g, '') .replace(/[^a-z0-9]+/g, '_') .replace(/^_+|_+$/g, ''); } function parseFullLibrary(data, kind) { const tints = kind === 'pet' ? ['sand', 'honey', 'terra', 'pond', 'forest', 'sage'] : ['forest', 'sage', 'olive', 'terra', 'desert']; return data.trim().split('\n').map((line, index) => { const [key, lbl] = line.split('|'); return { key, lbl, iconKey: iconKeyForPickerKey(key), em: kind === 'pet' ? '🐾' : '🌿', tint: tints[index % tints.length], aliases: key, }; }); } function mergeLibraries(common, full) { const seen = new Set(common.map((s) => String(s.lbl || '').toLowerCase())); return [ ...common.map((s) => ({ ...s, key: s.key || String(s.lbl || '').toLowerCase() })), ...full.filter((s) => { const label = String(s.lbl || '').toLowerCase(); if (seen.has(label)) return false; seen.add(label); return true; }), ]; } const FULL_PET_LIBRARY = mergeLibraries(PET_LIBRARY, parseFullLibrary(FULL_PET_LIBRARY_DATA, 'pet')); const FULL_PLANT_LIBRARY = mergeLibraries(PLANT_LIBRARY, parseFullLibrary(FULL_PLANT_LIBRARY_DATA, 'plant')); function libraryFor(kind) { return kind === 'pet' ? FULL_PET_LIBRARY : FULL_PLANT_LIBRARY; } // ─── Step 0: welcome ───────────────────────────────────────────────────── function OnbWelcome({ onNext, onDemo }) { return (

Welcome to Tendlet

A warm place for everything that
breathes or grows under your roof.
{onDemo && ( )}
Takes about a minute.
); } // ─── Step 1: name ──────────────────────────────────────────────────────── function OnbName({ name, setName, onNext, onBack, step, total }) { return (

First β€” what should we call you?

A small thing, but Tendlet feels warmer with a name.
setName(e.target.value)} placeholder="Maya, Sam, Alex…" />
); } // ─── Step 2: add multiple folk ─────────────────────────────────────────── function OnbAddFolk({ folks, setFolks, onNext, onBack, step, total }) { const [mode, setMode] = React.useState('list'); // list | picker | naming const [draft, setDraft] = React.useState(null); // { kind, species, em, tint, name } const [kindFilter, setKindFilter] = React.useState('pet'); const [query, setQuery] = React.useState(''); const [page, setPage] = React.useState(0); const lib = libraryFor(kindFilter); const q = query.trim().toLowerCase(); const filtered = q ? lib.filter((s) => s.lbl.toLowerCase().includes(q) || (s.aliases || '').toLowerCase().includes(q)) : lib; const noMatch = q && filtered.length === 0; const pageCount = Math.max(1, Math.ceil(filtered.length / PICKER_PAGE_SIZE)); const safePage = Math.min(page, pageCount - 1); const pageStart = safePage * PICKER_PAGE_SIZE; const pageItems = filtered.slice(pageStart, pageStart + PICKER_PAGE_SIZE); React.useEffect(() => { setPage(0); }, [kindFilter, query]); const pickSpecies = (s) => { setDraft({ kind: kindFilter, species: s.lbl, em: s.em, tint: s.tint, iconKey: s.iconKey, careKey: s.key, name: '' }); setMode('meet'); }; const pickCustom = () => { const labeled = query.trim().replace(/\b\w/g, (c) => c.toUpperCase()); setDraft({ kind: kindFilter, species: labeled || 'Custom', em: 'β€’', tint: kindFilter === 'pet' ? 'sand' : 'sage', name: '', custom: true }); setMode('meet'); }; const saveDraft = () => { setFolks((arr) => [...arr, { ...draft, id: `o-${Date.now()}` }]); setDraft(null); setQuery(''); setMode('list'); }; const removeFolk = (id) => setFolks((arr) => arr.filter((f) => f.id !== id)); // ── List view (start screen β€” what they've added) ── if (mode === 'list') { const empty = folks.length === 0; return (

Now, your folk.

Add as many as you like β€” pets and plants both live here together. You can edit details later.
{empty ? ( ) : ( <>
Added so far Β· {folks.length}
{folks.map((f) => (
{f.name || unnamed}
{f.species} Β· {f.kind === 'pet' ? 'animal' : 'plant'}
))}
)}
); } // ── Picker (species + search) ── if (mode === 'picker') { return (
setMode('list')} />

What did you bring home?

setQuery(e.target.value)} placeholder={kindFilter === 'pet' ? 'Search: betta, axolotl, ferret…' : 'Search: pothos, basil, succulent…'} /> {query && ( )}
{pageItems.map((s) => ( ))}
{filtered.length > PICKER_PAGE_SIZE && (
{pageStart + 1}-{Math.min(pageStart + PICKER_PAGE_SIZE, filtered.length)} of {filtered.length}
)} {noMatch && ( )} {!noMatch && (
Don't see it? setQuery(query || 'custom')}>Try searching β€” or type any species name and we'll add it as custom.
)}
); } // ── Meet (between species pick + naming) ── if (mode === 'meet') { return (
setMode('picker')} />
); } // ── Naming (after meet) ── if (mode === 'naming') { return (
setMode('picker')} />
{draft.kind === 'pet' ? 'Animal' : 'Plant'}{draft.custom ? ' Β· custom' : ''}

{draft.species}

setDraft({ ...draft, name: e.target.value })} placeholder={draft.kind === 'pet' ? 'Luna, Mochi, Koda…' : 'Echo, Fern, Sprout…'} />
Add a photo (optional)
You can do this later from their card.
); } } // ─── Step 3: family ────────────────────────────────────────────────────── function OnbFamily({ onNext, onBack, step, total }) { const [emails, setEmails] = React.useState([]); const [draft, setDraft] = React.useState(''); const add = () => { if (draft.trim()) { setEmails([...emails, draft.trim()]); setDraft(''); } }; return (

Tend together?

Invite a partner, roommate or family β€” anyone who helps care for your folk. They'll see today's tasks and can check things off too.
setDraft(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && add()} placeholder="alex@tendlet.app" style={{ flex: 1 }} />
{emails.length > 0 && (
{emails.map((e, i) => (
{e[0]?.toUpperCase()}
{e}
Invite pending
))}
)}
Plants need water whether you're home or not. Shared accounts mean one missed reminder isn't a missed watering.
); } // ─── Step 4: notifications ─────────────────────────────────────────────── function OnbReminders({ onNext, onBack, step, total }) { const [picks, setPicks] = React.useState({ morning: true, evening: true, lowSupply: true, photo: false }); const anyOn = Object.values(picks).some(Boolean); const T = ({ id, t, d, time }) => ( ); return (

Gentle reminders.

No buzzes when you're sleeping. No nags when you're at work. You set the rhythm.
); } // ─── Step 5: done ──────────────────────────────────────────────────────── function OnbDone({ name, folks, onFinish }) { return (

Welcome, {name || 'friend'}.

You're tending {folks.length} living {folks.length === 1 ? 'thing' : 'things'}. {folks.length > 0 && <> We've drafted a starting routine for {folks.length === 1 ? folks[0].name || 'them' : 'each of them'}.}
{folks.slice(0, 8).map((f, i) => (
))}
Your first kindness
"Say hello." β€” Tendlet
); } // ─── Shared header (progress dots + back) ──────────────────────────────── function OnbHeader({ step, total, onBack }) { return (
{[...Array(total)].map((_, i) => (
))}
); } // ─── Main onboarding orchestrator ──────────────────────────────────────── function OnboardingFlow({ onComplete, onDemo }) { const [step, setStep] = React.useState(0); const [name, setName] = React.useState(''); const [folks, setFolks] = React.useState([]); const TOTAL = 5; // welcome doesn't count as a dot const next = () => setStep((s) => s + 1); const back = () => setStep((s) => Math.max(0, s - 1)); if (step === 0) return ; if (step === 1) return ; if (step === 2) return ; if (step === 3) return ; if (step === 4) return ; if (step === 5) return onComplete({ name, folks })} />; } Object.assign(window, { OnboardingFlow, PET_LIBRARY, PLANT_LIBRARY, FULL_PET_LIBRARY, FULL_PLANT_LIBRARY, PICKER_PAGE_SIZE, libraryFor });