const { useState, useEffect, useRef, useMemo, useCallback } = React; const BASE_URL = ''; const generateAIContent = async (systemPrompt, userText) => { try { // Production: call the same-origin proxy. The Anthropic key lives server-side // (Cloudflare secret) and the endpoint sits behind the email gate — see // functions/api/reflect.js. if (typeof window !== 'undefined' && window.OBE_PRODUCTION) { const res = await fetch('/api/reflect', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ system: systemPrompt, user: userText }), }); if (!res.ok) throw new Error('reflect request failed'); const data = await res.json(); if (!data.text) throw new Error('empty reflection'); return data.text; } // Preview / local design work: keep a mock so no key is needed. if (window.claude && window.claude.complete) { const prompt = systemPrompt + "\n\n" + userText; return await window.claude.complete(prompt); } await new Promise((r) => setTimeout(r, 600)); return "you logged five days this week. that's the whole job, some weeks. you showed up for the small tries and let go when the day asked it of you.\n\nthe heavy moments outnumbered the light ones, but you noticed both — which is the harder thing on tired days.\n\nwhat you call \"enough\" is what I'd call a boundary held. keep going. you're doing the work that doesn't show."; } catch { return "the words aren't coming just now. try again in a little while."; } }; // --- 2. THEME & PALETTE --- // Remapped to Still Orchard palette. Keys preserved so call-sites don't break. // parchment = warm cream/brown neutrals // sage = One Bite (amber-brown ochre, --primary) // berry = Enough (slate-blue, --secondary) // honey = Insight (soft rose, --tertiary) const theme = { parchment: { 50: '#fdf9f0', 100: '#f7f3ea', 200: '#ece8df', 300: '#d4c4b7', 400: '#b8a99a', 500: '#82756a', 600: '#6e6258', 700: '#50453b', 800: '#3a2f24', 900: '#1c1c17' }, ochre: { 50: '#faf2e7', 100: '#f5e4cb', 200: '#f0bd8b', 300: '#d49960', 400: '#9e6e3a', 500: '#7d562d', 600: '#623f18' }, slate: { 50: '#eef3f8', 100: '#cce2f7', 200: '#b3c9dd', 300: '#88a0b3', 400: '#5f7689', 500: '#4c6172', 600: '#34495a' }, rose: { 50: '#fbf0ef', 100: '#f5dcdb', 200: '#eabbba', 300: '#b88e8d', 400: '#5f3e3e', 500: '#553636', 600: '#4a2f2f' } }; // --- Semantic selected-chip styling (Home context panel + Diary Core Context) --- // Unselected chips are untouched. Selected chips carry a semantic tone: // ochre = the child's world (Child Mood, Social Intent) // rose = the parent's self (My Energy) // neutral = structural / unbiased (How Did It Feel, Day Type, Factors, Environment) const SEL_OCHRE = { background: 'rgba(240,189,139,0.14)', border: '0.5px solid rgba(160,104,58,0.35)', color: '#623f18', fontWeight: 600 }; const SEL_ROSE = { background: 'rgba(184,142,141,0.14)', border: '0.5px solid rgba(184,142,141,0.40)', color: '#96615f', fontWeight: 600 }; const SEL_NEUTRAL = { background: 'rgba(130,117,106,0.12)', border: '0.5px solid rgba(107,92,80,0.35)', color: '#3d3028', fontWeight: 600 }; const SEL_CHIP = { energy: SEL_ROSE, // My Energy — the parent's self mood: SEL_OCHRE, // Child Mood — the child's world feel: SEL_NEUTRAL, // How Did It Feel — structural dayType: SEL_NEUTRAL, // Day Type — structural factor: SEL_NEUTRAL // Factors & Environment — structural }; // Social Intent uses a card layout but carries the ochre (child's-world) tone. const SEL_SOCIAL_CARD = { background: 'rgba(240,189,139,0.14)', border: '0.5px solid rgba(160,104,58,0.35)' }; // --- 3. ICONS --- const Icons = { Home: ({ active }) => , Pattern: ({ active }) => , Diary: ({ active }) => , Log: () => , Child: ({ active }) => , Me: ({ active }) => , Coffee: () => , Star: () => , Strawberry: () => , BackArrow: () => , Plus: () => , Edit: () => , Settings: () => , Download: () => }; // --- 4. TAXONOMY CONFIG --- const Taxonomy = { dayTypes: ['School', 'Home', 'Sick Day', 'Weekend', 'Holiday', 'Travel Day', 'Special Event', 'Caregiver Swap'], moods: ['Overtired', 'Wary', 'Assertive', 'Unwell', 'Subdued', 'Restless', 'Hyper', 'Stable', 'Attached', 'Overstimulated', 'Playful', 'Fussy', 'Apathetic', 'Frustrated', 'Curious'], environments: ['Home', 'School', 'Outdoor', 'Park', 'Restaurant', 'Cafe', 'Shopping', 'Hosting', 'Visiting', 'Play Center', 'Transit', 'Car', 'Party', 'Clinic'], factors: ['No Nap', 'Restless Night', 'Routine Shift', 'Separation Anxiety', 'Sensory Sensitivity', 'Parental Unwell', 'Teething', 'Growth Spurt', 'Illness', 'Allergies', 'Peers', 'Safe Food', 'New Food', 'Screen Time', 'Sugar', 'New People', 'New Place', 'Travel', 'Heatwave'] }; // --- Child Mood clusters --- // Child Mood is the one selector long enough to be worth grouping: its 15 chips // split into three felt clusters (bright / stormy / quiet), each under a quiet // italic-serif label, so the parent scans three short groups instead of one // wall. Every chip stays visible and one tap to toggle — grouping costs zero // extra taps. The other selectors (Day Type, factors, environments) stay flat // lists. Used in both render sites (Diary form + feed "+ add context"). const MOOD_GROUPS = [ { label: 'Bright', items: ['Stable', 'Playful', 'Curious', 'Assertive'] }, { label: 'Stormy', items: ['Hyper', 'Restless', 'Overstimulated', 'Frustrated', 'Fussy', 'Overtired'] }, { label: 'Quiet', items: ['Subdued', 'Apathetic', 'Attached', 'Wary', 'Unwell'] }]; // Returns the clusters, appending any mood not yet placed in a cluster as a // final "More" group — so adding a new mood to Taxonomy can never make it // silently disappear from the selector. const clusterize = (all, groups) => { const seen = new Set([].concat.apply([], groups.map((g) => g.items))); const leftover = all.filter((x) => !seen.has(x)); return leftover.length ? groups.concat([{ label: 'More', items: leftover }]) : groups; }; // Renders labeled chip clusters: a quiet italic-serif label sits above each // group's wrap-row of chips. The italic serif (the app's reading voice) reads // clearly distinct from the UPPERCASE Hanken section heading above it. // `renderChip(item)` keeps each call site's own chip styling/handlers. function ChipClusters({ all, groups, intraGap, interGap, renderChip }) { return ( // paddingTop separates the first cluster from the section heading (padding, // not margin, so it can't collapse with the heading's bottom margin). Labels // and chips stay flush with the page's left margin like the other selectors; // the gap below the heading plus the italic label style carry the grouping.
{clusterize(all, groups).map((grp, gi) =>
{grp.label}
{grp.items.map(renderChip)}
)}
); } // --- 5. MOCK DATA --- const getInitialEntries = (childName = 'Sun') => [ { id: 's1', types: ['bite'], childId: 1, sunsMood: ['Playful'], note: 'Ate a piece of cheese at the playdate. The other kids were eating it.', timestamp: new Date(Date.now() - 0.5 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Functional', friction: 'Light', factors: ['Peers'], environment: ['Visit'], socialIntent: 'High', dailyKindness: false }, { id: 's2', types: ['enough'], childId: 1, sunsMood: ['Subdued'], note: 'Too much noise at the cafe. Refused snack, wanted to sit in my lap.', timestamp: new Date(Date.now() - 2.5 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Low', friction: 'Mixed', factors: ['New Place'], environment: ['Cafe'], socialIntent: 'Observer', dailyKindness: false }, { id: 's3', types: ['bite'], childId: 1, sunsMood: ['Curious'], note: 'Quiet breakfast alone. Investigated the oatmeal and ate a few spoons.', timestamp: new Date(Date.now() - 3.5 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Max', friction: 'Light', factors: ['Safe Food'], environment: ['Home'], socialIntent: 'Internal', dailyKindness: false }, { id: 's4', types: ['enough'], childId: 1, sunsMood: ['Frustrated'], note: 'Wanted nothing to do with family dinner. Just pushed peas around.', timestamp: new Date(Date.now() - 5.5 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Low', friction: 'Heavy', factors: ['Routine Shift'], environment: ['Home'], socialIntent: 'Quiet', dailyKindness: true, dailyKindnessNote: 'Had a cup of tea in silence after bedtime.' }, { id: 'b3', types: ['bite'], childId: 1, sunsMood: ['Playful'], note: 'Tried a slice of kiwi! He made a sour face but then asked for another piece. Big win.', timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Max', friction: 'Light', factors: ['Sugar'], environment: ['Home'], dailyKindness: false }, { id: 'e1', types: ['enough'], childId: 1, sunsMood: ['Fussy', 'Overtired'], note: 'Dinner was a disaster. Refused everything except crackers. Letting it go and putting him to bed early.', timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Low', friction: 'Heavy', factors: ['No Nap'], environment: ['Home'], dailyKindness: false }, { id: 'b4', types: ['bite'], childId: 1, sunsMood: ['Curious'], note: 'Ate the carrot sticks at the park today! He saw another kid eating them and just joined in.', timestamp: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Functional', friction: 'Light', factors: ['Peers'], environment: ['Park'], dailyKindness: false }, { id: 'e2', types: ['enough'], childId: 1, sunsMood: ['Restless'], note: 'Too hot today. Just gave him cold fruit and yogurt for dinner. Didn\'t even try the actual meal.', timestamp: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), energy: 'Functional', friction: 'Mixed', factors: ['Heatwave'], environment: ['Home'], dailyKindness: true, dailyKindnessNote: 'Sat in front of the fan for 15 mins.' }, { id: 'b1', types: ['bite'], childId: 1, sunsMood: [], note: 'Broccoli — held it without crying. Didn\'t eat it, but touched it to his lips. A huge sensory win.', timestamp: '2026-04-08T18:00:00Z', energy: 'Functional', friction: 'Light', factors: ['New Food'], environment: [], dailyKindness: false }, { id: 'b2', types: ['bite'], childId: 1, sunsMood: [], note: 'Tofu — swallowed! Disguised it slightly in the soup, but he noticed and still ate it.', timestamp: '2026-04-03T12:00:00Z', energy: 'Max', friction: 'Light', factors: ['New Food'], environment: [], dailyKindness: false }, { id: '1', types: ['bite'], childId: 1, sunsMood: [], note: 'Curry incident at preschool! Ate everything. Teachers were shocked. Peer influence is real. A massive social win.', timestamp: '2026-04-01T12:00:00Z', energy: 'Functional', friction: 'Light', factors: ['Peers', 'New Place'], environment: ['School'], dailyKindness: true, dailyKindnessNote: 'Coffee shop hour for myself.' }, { id: '2', types: ['enough'], childId: 1, sunsMood: [], note: 'Toy cleanup battle. Refused tofu. So tired. We are all done for tonight.', timestamp: '2026-03-25T18:30:00Z', energy: 'Low', friction: 'Heavy', factors: ['No Nap'], environment: ['Home'], dailyKindness: false }, { id: '3', types: ['enough'], childId: 1, sunsMood: [], note: 'Refused chicken. Greek yogurt with raspberries instead. 18g protein. Permission to let go.', timestamp: '2026-03-14T18:00:00Z', energy: 'Functional', friction: 'Mixed', factors: ['Heatwave'], environment: ['Home'], dailyKindness: true, dailyKindnessNote: 'Pilates class.' }, { id: '4', types: ['bite'], childId: 1, sunsMood: [], note: 'Uncle Tetsu strawberry cheesecake! Used his little fork perfectly. A pink spring omen.', timestamp: '2026-03-01T12:00:00Z', energy: 'Max', friction: 'Light', factors: ['Sugar'], environment: ['Home'], dailyKindness: false }, { id: 'k1', types: ['enough'], childId: 1, sunsMood: [], note: '', timestamp: '2026-04-05T10:00:00Z', dailyKindness: true, dailyKindnessNote: 'weekly pilates session — shoulders still hurt but showed up', factors: [] }, { id: 'k2', types: ['bite'], childId: 1, sunsMood: [], note: 'bought a pineapple bun just for me at the cha chaan teng, but Sun ate half of it. a surprising win.', timestamp: '2026-04-05T14:00:00Z', dailyKindness: true, dailyKindnessNote: 'bought a pineapple bun just for me at the cha chaan teng', factors: [] }, { id: 'k3', types: ['enough'], childId: 1, sunsMood: [], note: '', timestamp: '2026-04-09T09:00:00Z', dailyKindness: true, dailyKindnessNote: 'focused strength training — felt my body getting stronger', factors: [] }, { id: 'k4', types: ['enough'], childId: 1, sunsMood: [], note: '', timestamp: '2026-04-10T21:00:00Z', dailyKindness: true, dailyKindnessNote: 'quiet hour to myself after Sun\'s bedtime — just sat still', factors: [] }]. map((e) => ({ ...e, note: e.note.replace(/Sun/g, childName) })); // --- 5. UTILS --- const formatTime = (iso) => new Date(iso).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }).toLowerCase(); // Child names always render sentence-case (uppercase first letter), even inside lowercase narrative copy. const capName = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : s; // --- ACCESSIBILITY: status announcer --- // A single polite live region (rendered once in App, persists across screens) // carries short status messages to screen readers. We update its textContent // imperatively: clear first so re-announcing the same message still fires, then // clear again a moment later so the message doesn't linger in the buffer. let _announceSetTimer = null; let _announceClearTimer = null; const announce = (msg) => { if (typeof document === 'undefined') return; const el = document.getElementById('ob-live-region'); if (!el) return; el.textContent = ''; // Set after a short tick so assistive tech registers a change even when the // new message is identical to the one just cleared. setTimeout (not rAF) so // it still fires when the tab is backgrounded or rendered headlessly. if (_announceSetTimer) clearTimeout(_announceSetTimer); _announceSetTimer = setTimeout(() => {el.textContent = msg;}, 50); if (_announceClearTimer) clearTimeout(_announceClearTimer); _announceClearTimer = setTimeout(() => {if (el.textContent === msg) el.textContent = '';}, 1500); }; // Type-aware "saved" copy, per the entry's One Bite / Enough type. const savedMsg = (types) => types && types.includes('bite') ? 'One bite entry saved.' : types && types.includes('enough') ? 'Enough entry saved.' : 'Entry saved.'; // --- ACCESSIBILITY: modal focus management --- // One reusable hook for every role="dialog" surface. On open it moves focus // into the dialog (first focusable element, else the container itself) and // remembers what was focused before. While open it traps Tab / Shift+Tab inside // the dialog (wrapping at both ends) and closes on Escape. On close (by any // means) it restores focus to the previously-focused element. A small stack // ensures only the topmost dialog handles keys, so a dialog nested inside // another (e.g. the remove-profile confirm inside Settings) behaves correctly. // Usage: const ref = useModalA11y(isOpen, closeFn); then ref on the dialog node. const _modalStack = []; const FOCUSABLE_SEL = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'; function useModalA11y(active, onClose) { const ref = useRef(null); const tokenRef = useRef(null); const closeRef = useRef(onClose); closeRef.current = onClose; if (!tokenRef.current) tokenRef.current = {}; useEffect(() => { if (!active) return; const node = ref.current; if (!node) return; const token = tokenRef.current; const prevFocused = document.activeElement; _modalStack.push(token); const isTop = () => _modalStack[_modalStack.length - 1] === token; const focusables = () => Array.prototype.slice.call(node.querySelectorAll(FOCUSABLE_SEL)). filter((el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement); // Initial focus: first focusable, else the dialog container. const firstEl = focusables()[0]; if (firstEl) {firstEl.focus();} else {node.setAttribute('tabindex', '-1');node.focus();} const onKey = (e) => { if (!isTop()) return; if (e.key === 'Escape') { e.preventDefault(); if (closeRef.current) closeRef.current(); return; } if (e.key !== 'Tab') return; const items = focusables(); if (!items.length) {e.preventDefault();node.focus();return;} const first = items[0], last = items[items.length - 1], a = document.activeElement; if (e.shiftKey) { if (a === first || !node.contains(a)) {e.preventDefault();last.focus();} } else { if (a === last || !node.contains(a)) {e.preventDefault();first.focus();} } }; document.addEventListener('keydown', onKey, true); return () => { document.removeEventListener('keydown', onKey, true); const i = _modalStack.indexOf(token); if (i !== -1) _modalStack.splice(i, 1); if (prevFocused && typeof prevFocused.focus === 'function') prevFocused.focus(); }; }, [active]); return ref; } const getWeekKey = (date = new Date()) => { // Shift time forward by 3 hours. // This makes Sunday 9:00 PM act as Monday 12:00 AM, unlocking the new reflection on Sunday evening. const shiftedTimestamp = new Date(date).getTime() + 3 * 60 * 60 * 1000; const d = new Date(shiftedTimestamp); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7); const week1 = new Date(d.getFullYear(), 0, 4); const weekNum = 1 + Math.round(((d.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7); return `${d.getFullYear()}-W${String(weekNum).padStart(2, '0')}`; }; // Deterministic variant picker. Hashes a seed string (week key + card id) to a // stable index into `variants`, so the same copy holds all week and rotates // when the week key flips — no stored state. Pools are seeded independently // (e.g. "…|win-headline" vs "…|win-body") so headline and body mix freely. const pickVariant = (variants, seed) => { let h = 2166136261; for (let i = 0; i < seed.length; i++) { h ^= seed.charCodeAt(i); h = Math.imul(h, 16777619); } return variants[(h >>> 0) % variants.length]; }; // Maps each factor to one of five reframe "clusters" so the factor card's body // copy can speak to the *kind* of hard the week held. Unmapped factors default // to "routine". const FACTOR_CLUSTERS = { "No Nap": "child-body", "Teething": "child-body", "Growth Spurt": "child-body", "Illness": "child-body", "Restless Night": "child-body", "Allergies": "child-body", "Sensory Sensitivity": "child-body", "Parental Unwell": "parent-state", "Routine Shift": "routine", "Caregiver Swap": "routine", "Travel": "routine", "Peers": "social-sensory", "New People": "social-sensory", "New Place": "social-sensory", "Separation Anxiety": "social-sensory", "Heatwave": "social-sensory", "Screen Time": "social-sensory", "Sugar": "food", "New Food": "food", "Safe Food": "food" }; const formatDate = (iso) => { const d = new Date(iso); const today = new Date(); if (d.toDateString() === today.toDateString()) return 'today'; const yesterday = new Date(today);yesterday.setDate(yesterday.getDate() - 1); if (d.toDateString() === yesterday.toDateString()) return 'yesterday'; return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }).toLowerCase().replace(/,/g, ''); }; const hasType = (entry, typeToCheck) => (entry.types || []).includes(typeToCheck); // Energy level → number of active bars const getEnergyLevel = (level) => { if (level === 'Max') return 3; if (level === 'Functional') return 2; if (level === 'Low') return 1; return 0; }; // Three ascending bars; inherit currentColor so they pick up the chip's text tone function EnergyBars({ level }) { const active = getEnergyLevel(level); const heights = [5, 7.5, 10]; return (