\n {/* Stats */}\n

🎯

{activities.length}

Activities Logged

⏱️

{totalMinutes}

Total Minutes

👦

{children.size}

Children Tracked

🏆

{maxDuration}

Longest Block (min)

\n\n

\n {/* Time by child + activity list */}\n

\n {byChild.size > 0 && (\n

\n Time by Child\n

\n {[...byChild.entries()].map(([child, minutes]) => (\n

\n {child}\n {minutes} min\n

\n ))}\n

\n )}\n\n

\n Activity Log\n

\n {activities.length === 0 ? (\n

🎯

No activities logged yet

\n ) : (\n activities.map((a) => (\n

{a.activity_name}

{a.child_name} · {a.duration_minutes} min · {a.date}

\n {a.category && {a.category}}\n \n

\n ))\n )}\n

\n\n {/* Add activity form */}\n

\n Log Activity\n

\n Child Name\n setForm({ ...form, child_name: e.target.value })} placeholder=\"e.g., Maya\" />\n

\n Activity\n setForm({ ...form, activity_name: e.target.value })} placeholder=\"e.g., Soccer practice\" />\n

\n Minutes\n setForm({ ...form, duration_minutes: Number(e.target.value) })} />\n

\n Date\n setForm({ ...form, date: e.target.value })} />\n

\n Category (optional)\n setForm({ ...form, category: e.target.value })} placeholder=\"e.g., Sports, Music\" />\n

\n \n

\n );\n}\n",[],[200,207,214],{"_105":222,"_97":223,"_162":224,"_164":208,"_165":147,"_166":225,"_168":169,"_107":226,"_102":33,"_171":184,"_173":227,"_174":22,"_175":-5,"_176":228,"_100":229},"75aa224c-2054-11f1-bb38-42dde27851f2","BarChart.tsx","75aa22e2-2054-11f1-bb38-42dde27851f2",17,["D",1773568254842],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface BarChartProps {\n data: { label: string; value: number; color?: string }[];\n title?: string;\n height?: number;\n}\n\nconst COLORS = [\"#4F46E5\", \"#0EA5E9\", \"#10B981\", \"#F59E0B\", \"#EF4444\", \"#7C4DFF\"];\n\nexport default function BarChart({ data, title, height = 180 }: BarChartProps) {\n const max = Math.max(...data.map((d) => d.value), 1);\n\n if (data.length === 0) {\n return (\n

\n {title &&

{title}

}\n

No data yet

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

\n {title &&

{title}

}\n

\n {data.map((d, i) => {\n const barHeight = (d.value / max) * (height - 30);\n const color = d.color || COLORS[i % COLORS.length];\n return (\n

\n {d.value}\n \n \n {d.label}\n \n

\n );\n })}\n

\n );\n}\n",[],[200,207,223],{"_105":231,"_97":232,"_162":233,"_164":208,"_165":147,"_166":234,"_168":169,"_107":235,"_102":33,"_171":184,"_173":236,"_174":22,"_175":-5,"_176":237,"_100":238},"758b88e6-2054-11f1-8ac4-42dde27851f2","Calendar.tsx","758b89c2-2054-11f1-8ac4-42dde27851f2",12,["D",1773568254653],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport * as api from \"../api.ts\";\nimport type { CalendarEvent } from \"../../shared/types.ts\";\n\nconst CATEGORY_COLORS: Record = {\n kids: \"#E91E63\",\n family: \"#7C4DFF\",\n personal: \"#FF9800\",\n health: \"#4CAF50\",\n};\n\nconst DAY_HEADERS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\nfunction formatDate(d: Date): string {\n return d.toISOString().split(\"T\")[0];\n}\n\nfunction getDaysInMonth(year: number, month: number) {\n return new Date(year, month + 1, 0).getDate();\n}\n\nfunction getFirstDayOfMonth(year: number, month: number) {\n return new Date(year, month, 1).getDay();\n}\n\nexport default function Calendar() {\n const [events, setEvents] = useState([]);\n const [selectedDate, setSelectedDate] = useState(formatDate(new Date()));\n const [viewYear, setViewYear] = useState(new Date().getFullYear());\n const [viewMonth, setViewMonth] = useState(new Date().getMonth());\n const [showModal, setShowModal] = useState(false);\n const [form, setForm] = useState({ title: \"\", start_time: \"\", end_time: \"\", category: \"family\" as string, notes: \"\" });\n\n useEffect(() => {\n api.fetchEvents().then(setEvents).catch(console.error);\n }, []);\n\n const todayStr = formatDate(new Date());\n const daysInMonth = getDaysInMonth(viewYear, viewMonth);\n const firstDay = getFirstDayOfMonth(viewYear, viewMonth);\n const prevDays = getDaysInMonth(viewYear, viewMonth - 1);\n\n const cells: { date: string; day: number; otherMonth: boolean }[] = [];\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const d = prevDays - i;\n const m = viewMonth === 0 ? 11 : viewMonth - 1;\n const y = viewMonth === 0 ? viewYear - 1 : viewYear;\n cells.push({ date: `${y}-${String(m + 1).padStart(2, \"0\")}-${String(d).padStart(2, \"0\")}`, day: d, otherMonth: true });\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n cells.push({\n date: `${viewYear}-${String(viewMonth + 1).padStart(2, \"0\")}-${String(d).padStart(2, \"0\")}`,\n day: d,\n otherMonth: false,\n });\n }\n\n // Next month padding\n const remaining = 42 - cells.length;\n for (let d = 1; d <= remaining; d++) {\n const m = viewMonth === 11 ? 0 : viewMonth + 1;\n const y = viewMonth === 11 ? viewYear + 1 : viewYear;\n cells.push({ date: `${y}-${String(m + 1).padStart(2, \"0\")}-${String(d).padStart(2, \"0\")}`, day: d, otherMonth: true });\n }\n\n const eventsForDate = (date: string) => events.filter((e) => e.date === date);\n const selectedEvents = eventsForDate(selectedDate);\n\n const prevMonth = () => {\n if (viewMonth === 0) { setViewYear(viewYear - 1); setViewMonth(11); }\n else setViewMonth(viewMonth - 1);\n };\n\n const nextMonth = () => {\n if (viewMonth === 11) { setViewYear(viewYear + 1); setViewMonth(0); }\n else setViewMonth(viewMonth + 1);\n };\n\n const handleAdd = async () => {\n if (!form.title.trim()) return;\n const created = await api.createEvent({ ...form, date: selectedDate } as any);\n setEvents([created, ...events]);\n setForm({ title: \"\", start_time: \"\", end_time: \"\", category: \"family\", notes: \"\" });\n setShowModal(false);\n };\n\n const handleDelete = async (id: number) => {\n await api.deleteEvent(id);\n setEvents(events.filter((e) => e.id !== id));\n };\n\n const monthLabel = new Date(viewYear, viewMonth).toLocaleDateString(\"en-US\", { month: \"long\", year: \"numeric\" });\n\n return (\n

\n {/* Month navigation */}\n

\n \n

{monthLabel}

\n \n

\n\n

\n {/* Calendar grid */}\n

\n {DAY_HEADERS.map((d) => (\n

{d}

\n ))}\n {cells.map((cell, i) => (\n setSelectedDate(cell.date)}\n >\n

{cell.day}

\n {eventsForDate(cell.date).map((ev, j) => (\n

\n ))}\n

\n\n {/* Category legend */}\n

\n {Object.entries(CATEGORY_COLORS).map(([cat, color]) => (\n

\n {cat}\n

\n ))}\n

\n\n {/* Sidebar: selected date events */}\n

\n {new Date(selectedDate + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })}\n \n

\n\n {selectedEvents.length === 0 ? (\n

\n No events this day\n

\n ) : (\n selectedEvents.map((ev) => (\n

{ev.title}

\n {ev.start_time && {ev.start_time}}\n {ev.start_time && ev.end_time && - {ev.end_time}}\n {\" · \"}\n {ev.category}\n

\n {ev.notes &&

{ev.notes}

}\n

\n \n

\n ))\n )}\n

\n\n {/* Add Event Modal */}\n {showModal && (\n

setShowModal(false)}>\n

e.stopPropagation()}>\n

\n Add Event\n \n

\n Title\n setForm({ ...form, title: e.target.value })} placeholder=\"Event title\" />\n

\n Start Time\n setForm({ ...form, start_time: e.target.value })} />\n

\n End Time\n setForm({ ...form, end_time: e.target.value })} />\n

\n Category\n \n

\n Notes\n

setForm({ ...form, notes: e.target.value })} placeholder=\"Optional notes\" />\n            </div>\n            <div className=\"modal-footer\">\n              <button className=\"btn btn-secondary\" onClick={() => setShowModal(false)}>Cancel</button>\n              <button className=\"btn btn-primary\" onClick={handleAdd}>Save Event</button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[200,207,232],{"_105":240,"_97":241,"_162":242,"_164":208,"_165":147,"_166":146,"_168":169,"_107":243,"_102":33,"_171":184,"_173":244,"_174":22,"_175":-5,"_176":245,"_100":246},"763c2084-2054-11f1-87ee-42dde27851f2","Dashboard.tsx","763c214c-2054-11f1-87ee-42dde27851f2",["D",1773568254513],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport * as api from \"../api.ts\";\nimport type { DashboardStats } from \"../../shared/types.ts\";\nimport PieChart from \"./PieChart.tsx\";\nimport BarChart from \"./BarChart.tsx\";\nimport ProgressChart from \"./ProgressChart.tsx\";\n\ntype Page = \"dashboard\" | \"calendar\" | \"todos\" | \"meals\" | \"grocery\" | \"reminders\" | \"activities\";\n\ninterface Props {\n  onNavigate: (page: Page) => void;\n}\n\nexport default function Dashboard({ onNavigate }: Props) {\n  const [stats, setStats] = useState<DashboardStats | null>(null);\n\n  useEffect(() => {\n    api.fetchDashboard().then(setStats).catch(console.error);\n  }, []);\n\n  if (!stats) {\n    return (\n      <div style={{ display: \"flex\", justifyContent: \"center\", padding: 48 }}>\n        <div className=\"spinner\" />\n      </div>\n    );\n  }\n\n  const todoPct = stats.todosTotal > 0 ? Math.round((stats.todosCompleted / stats.todosTotal) * 100) : 0;\n\n  const activityChartData = stats.activityByChild.map((a) => ({\n    label: a.label,\n    value: Math.round(a.value / 60 * 10) / 10, // to hours\n  }));\n\n  return (\n    <div>\n      {/* Stat Cards */}\n      <div className=\"stats-grid\">\n        <div className=\"stat-card\" onClick={() => onNavigate(\"todos\")}>\n          <div className=\"stat-icon\" style={{ background: \"var(--primary-lighter)\", color: \"var(--primary)\" }}>✅</div>\n          <div className=\"stat-value\">{stats.todosCompleted}/{stats.todosTotal}</div>\n          <div className=\"stat-label\">Tasks Done</div>\n        </div>\n        <div className=\"stat-card\" onClick={() => onNavigate(\"meals\")}>\n          <div className=\"stat-icon\" style={{ background: \"var(--success-light)\", color: \"var(--success)\" }}>🍽️</div>\n          <div className=\"stat-value\">{stats.mealsPlanned}</div>\n          <div className=\"stat-label\">Meals Planned</div>\n        </div>\n        <div className=\"stat-card\" onClick={() => onNavigate(\"activities\")}>\n          <div className=\"stat-icon\" style={{ background: \"var(--info-light)\", color: \"var(--info)\" }}>🎯</div>\n          <div className=\"stat-value\">{stats.activitiesLogged}</div>\n          <div className=\"stat-label\">Activities</div>\n        </div>\n        <div className=\"stat-card\" onClick={() => onNavigate(\"reminders\")}>\n          <div className=\"stat-icon\" style={{ background: \"var(--warning-light)\", color: \"var(--warning)\" }}>⏰</div>\n          <div className=\"stat-value\">{stats.remindersPending}</div>\n          <div className=\"stat-label\">Pending Reminders</div>\n        </div>\n      </div>\n\n      {/* Charts */}\n      <div className=\"grid-3\" style={{ marginBottom: 24 }}>\n        <div className=\"card\">\n          <PieChart data={stats.mealCategories} title=\"Meal Categories\" />\n        </div>\n        <div className=\"card\">\n          <BarChart data={activityChartData} title=\"Activity Time (hours)\" />\n        </div>\n        <div className=\"card\">\n          <ProgressChart value={stats.todosCompleted} total={stats.todosTotal} title=\"Todo Progress\" />\n        </div>\n      </div>\n\n      {/* Quick actions */}\n      <div className=\"grid-2\" style={{ marginBottom: 24 }}>\n        <div className=\"card\">\n          <div className=\"card-header\">\n            <span className=\"card-title\">Upcoming Reminders</span>\n          </div>\n          {stats.upcomingReminders.length === 0 ? (\n            <div style={{ color: \"var(--text-muted)\", fontSize: 14 }}>No pending reminders</div>\n          ) : (\n            stats.upcomingReminders.map((r) => (\n              <div key={r.id} className=\"item-row\" style={{ padding: \"8px 0\" }}>\n                <div className=\"item-main\">\n                  <div className=\"item-title\">{r.title}</div>\n                  <div className=\"item-meta\">{r.date} {r.time && `at ${r.time}`}</div>\n                </div>\n                <span className=\"pill pill-warning\">Pending</span>\n              </div>\n            ))\n          )}\n        </div>\n        <div className=\"card\">\n          <div className=\"card-header\">\n            <span className=\"card-title\">Quick Actions</span>\n          </div>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 8 }}>\n            <button className=\"btn btn-secondary\" onClick={() => onNavigate(\"todos\")}>+ Add Task</button>\n            <button className=\"btn btn-secondary\" onClick={() => onNavigate(\"meals\")}>+ Plan Meal</button>\n            <button className=\"btn btn-secondary\" onClick={() => onNavigate(\"grocery\")}>+ Grocery Item</button>\n            <button className=\"btn btn-secondary\" onClick={() => onNavigate(\"reminders\")}>+ Reminder</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[200,207,241],{"_105":248,"_97":249,"_162":250,"_164":208,"_165":147,"_166":251,"_168":169,"_107":252,"_102":33,"_171":184,"_173":253,"_174":22,"_175":-5,"_176":254,"_100":255},"75a55a82-2054-11f1-9c6e-42dde27851f2","Grocery.tsx","75a55b36-2054-11f1-9c6e-42dde27851f2",16,["D",1773568254821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport * as api from \"../api.ts\";\nimport type { GroceryItem } from \"../../shared/types.ts\";\n\nexport default function Grocery() {\n  const [items, setItems] = useState<GroceryItem[]>([]);\n  const [form, setForm] = useState({ name: \"\", category: \"Produce\", quantity: \"1\" });\n\n  useEffect(() => {\n    api.fetchGrocery().then(setItems).catch(console.error);\n  }, []);\n\n  const purchased = items.filter((i) => i.purchased).length;\n  const needed = items.filter((i) => !i.purchased).length;\n  const departments = new Map<string, number>();\n  items.forEach((i) => departments.set(i.category, (departments.get(i.category) || 0) + 1));\n\n  const handleAdd = async () => {\n    if (!form.name.trim()) return;\n    const item = await api.createGrocery({ ...form, purchased: false } as any);\n    setItems([item, ...items]);\n    setForm({ name: \"\", category: \"Produce\", quantity: \"1\" });\n  };\n\n  const handleToggle = async (item: GroceryItem) => {\n    const updated = await api.updateGrocery(item.id, { purchased: !item.purchased });\n    setItems(items.map((i) => (i.id === item.id ? updated : i)));\n  };\n\n  const handleDelete = async (id: number) => {\n    await api.deleteGrocery(id);\n    setItems(items.filter((i) => i.id !== id));\n  };\n\n  return (\n    <div>\n      {/* Stats */}\n      <div className=\"stats-grid\">\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--primary-lighter)\", color: \"var(--primary)\" }}>📋</div>\n          <div className=\"stat-value\">{items.length}</div>\n          <div className=\"stat-label\">Items Listed</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--success-light)\", color: \"var(--success)\" }}>✓</div>\n          <div className=\"stat-value\">{purchased}</div>\n          <div className=\"stat-label\">Picked Up</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--warning-light)\", color: \"var(--warning)\" }}>🛒</div>\n          <div className=\"stat-value\">{needed}</div>\n          <div className=\"stat-label\">Still Needed</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--info-light)\", color: \"var(--info)\" }}>🏪</div>\n          <div className=\"stat-value\">{departments.size}</div>\n          <div className=\"stat-label\">Departments</div>\n        </div>\n      </div>\n\n      <div className=\"grid-2\">\n        {/* Item list */}\n        <div className=\"card\">\n          <div className=\"card-header\">\n            <span className=\"card-title\">Shopping List</span>\n          </div>\n          {items.length === 0 ? (\n            <div className=\"empty-state\">\n              <div className=\"empty-icon\">🛒</div>\n              <div className=\"empty-text\">Your grocery list is empty</div>\n            </div>\n          ) : (\n            items.map((item) => (\n              <div key={item.id} className=\"item-row\" style={{ opacity: item.purchased ? 0.5 : 1 }}>\n                <div className=\"item-main\">\n                  <div className={`item-title ${item.purchased ? \"completed-text\" : \"\"}`}>{item.name}</div>\n                </div>\n                <span className=\"pill pill-neutral\">{item.quantity}</span>\n                <span className=\"pill pill-info\">{item.category}</span>\n                <button\n                  className={`btn btn-sm ${item.purchased ? \"btn-ghost\" : \"btn-success\"}`}\n                  onClick={() => handleToggle(item)}\n                >\n                  {item.purchased ? \"Undo\" : \"Bought\"}\n                </button>\n                <button className=\"btn btn-ghost btn-icon btn-sm\" onClick={() => handleDelete(item.id)}>✕</button>\n              </div>\n            ))\n          )}\n        </div>\n\n        {/* Add + departments */}\n        <div>\n          <div className=\"card\" style={{ marginBottom: 16 }}>\n            <div className=\"card-header\">\n              <span className=\"card-title\">Add Item</span>\n            </div>\n            <div className=\"form-group\">\n              <label className=\"form-label\">Item Name</label>\n              <input className=\"form-input\" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder=\"e.g., Milk\" onKeyDown={(e) => e.key === \"Enter\" && handleAdd()} />\n            </div>\n            <div className=\"form-row\">\n              <div className=\"form-group\">\n                <label className=\"form-label\">Quantity</label>\n                <input className=\"form-input\" value={form.quantity} onChange={(e) => setForm({ ...form, quantity: e.target.value })} />\n              </div>\n              <div className=\"form-group\">\n                <label className=\"form-label\">Category</label>\n                <input className=\"form-input\" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} placeholder=\"Produce\" />\n              </div>\n            </div>\n            <button className=\"btn btn-primary\" style={{ width: \"100%\", marginTop: 8 }} onClick={handleAdd}>Add Item</button>\n          </div>\n\n          {departments.size > 0 && (\n            <div className=\"card\">\n              <div className=\"card-header\">\n                <span className=\"card-title\">Departments</span>\n              </div>\n              <div className=\"dept-grid\">\n                {[...departments.entries()].map(([dept, count]) => (\n                  <div key={dept} className=\"dept-card\">\n                    <div className=\"dept-count\">{count}</div>\n                    <div className=\"dept-name\">{dept}</div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[200,207,249],{"_105":257,"_97":258,"_162":259,"_164":208,"_165":147,"_166":260,"_168":169,"_107":261,"_102":33,"_171":184,"_173":262,"_174":22,"_175":-5,"_176":263,"_100":264},"759d74f2-2054-11f1-8ac4-42dde27851f2","Layout.tsx","759d75ce-2054-11f1-8ac4-42dde27851f2",15,["D",1773568254756],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { UserInfo } from \"../../shared/types.ts\";\n\ntype Page = \"dashboard\" | \"calendar\" | \"todos\" | \"meals\" | \"grocery\" | \"reminders\" | \"activities\";\n\ninterface NavItem {\n  id: Page;\n  label: string;\n  icon: string;\n}\n\nconst NAV_ITEMS: NavItem[] = [\n  { id: \"dashboard\", label: \"Dashboard\", icon: \"📊\" },\n  { id: \"calendar\", label: \"Calendar\", icon: \"📅\" },\n  { id: \"todos\", label: \"To-Do List\", icon: \"✅\" },\n  { id: \"meals\", label: \"Meal Plan\", icon: \"🍽️\" },\n  { id: \"grocery\", label: \"Grocery\", icon: \"🛒\" },\n  { id: \"reminders\", label: \"Reminders\", icon: \"⏰\" },\n  { id: \"activities\", label: \"Activities\", icon: \"🎯\" },\n];\n\nconst PAGE_TITLES: Record<Page, string> = {\n  dashboard: \"Dashboard\",\n  calendar: \"Calendar\",\n  todos: \"To-Do List\",\n  meals: \"Meal Planner\",\n  grocery: \"Grocery List\",\n  reminders: \"Reminders\",\n  activities: \"Activities\",\n};\n\ninterface Props {\n  user: UserInfo;\n  currentPage: Page;\n  onNavigate: (page: Page) => void;\n  children: any;\n}\n\nexport default function Layout({ user, currentPage, onNavigate, children }: Props) {\n  const [sidebarOpen, setSidebarOpen] = useState(false);\n\n  const today = new Date();\n  const dateStr = today.toLocaleDateString(\"en-US\", {\n    weekday: \"long\",\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n\n  const initials = (user.username || user.email || \"U\")\n    .split(/[@\\s]/)\n    .filter(Boolean)\n    .map((s) => s[0].toUpperCase())\n    .slice(0, 2)\n    .join(\"\");\n\n  return (\n    <div className=\"app-layout\">\n      <div className={`sidebar-overlay ${sidebarOpen ? \"open\" : \"\"}`} onClick={() => setSidebarOpen(false)} />\n\n      <aside className={`sidebar ${sidebarOpen ? \"open\" : \"\"}`}>\n        <div className=\"sidebar-logo\">\n          <div className=\"sidebar-logo-icon\">🏠</div>\n          Family Hub\n        </div>\n\n        <nav className=\"sidebar-nav\">\n          <div className=\"nav-section-label\">Menu</div>\n          {NAV_ITEMS.map((item) => (\n            <button\n              key={item.id}\n              className={`nav-item ${currentPage === item.id ? \"active\" : \"\"}`}\n              onClick={() => { onNavigate(item.id); setSidebarOpen(false); }}\n            >\n              <span className=\"nav-icon\">{item.icon}</span>\n              {item.label}\n            </button>\n          ))}\n        </nav>\n\n        <div className=\"sidebar-footer\">\n          <div className=\"user-card\">\n            <div className=\"user-avatar\">\n              {user.profileImageUrl\n                ? <img src={user.profileImageUrl} alt=\"\" />\n                : initials}\n            </div>\n            <div className=\"user-info\">\n              <div className=\"user-name\">{user.username || user.email}</div>\n              <div className=\"user-role\">Family Manager</div>\n            </div>\n          </div>\n          <a href=\"/auth/logout\" className=\"logout-btn\">Sign Out</a>\n        </div>\n      </aside>\n\n      <div className=\"main-content\">\n        <header className=\"top-bar\">\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: \"12px\" }}>\n            <button className=\"mobile-menu-btn\" onClick={() => setSidebarOpen(true)}>☰</button>\n            <h1>{PAGE_TITLES[currentPage]}</h1>\n          </div>\n          <span className=\"top-bar-date\">{dateStr}</span>\n        </header>\n        <div className=\"page-content\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[200,207,258],{"_105":266,"_97":267,"_162":268,"_164":208,"_165":147,"_166":269,"_168":169,"_107":270,"_102":33,"_171":184,"_173":271,"_174":22,"_175":-5,"_176":272,"_100":273},"7633efc2-2054-11f1-b32a-42dde27851f2","Meals.tsx","7633f076-2054-11f1-b32a-42dde27851f2",26,["D",1773568254460],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport * as api from \"../api.ts\";\nimport type { Meal } from \"../../shared/types.ts\";\nimport { DAY_NAMES, MEAL_TYPES } from \"../../shared/constants.ts\";\n\nexport default function Meals() {\n  const [meals, setMeals] = useState<Meal[]>([]);\n  const [form, setForm] = useState({\n    day_of_week: 1,\n    meal_type: \"lunch\" as string,\n    name: \"\",\n    category: \"\",\n  });\n\n  useEffect(() => {\n    api.fetchMeals().then(setMeals).catch(console.error);\n  }, []);\n\n  const mealsByDay = DAY_NAMES.map((_, i) => meals.filter((m) => m.day_of_week === i));\n\n  const categories = new Map<string, number>();\n  meals.forEach((m) => {\n    if (m.category) categories.set(m.category, (categories.get(m.category) || 0) + 1);\n  });\n\n  const topCategory = [...categories.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] || \"—\";\n  const weekendMeals = meals.filter((m) => m.day_of_week === 0 || m.day_of_week === 6).length;\n\n  const handleAdd = async () => {\n    if (!form.name.trim()) return;\n    const meal = await api.createMeal({\n      ...form,\n      week_start: \"\",\n    } as any);\n    setMeals([meal, ...meals]);\n    setForm({ ...form, name: \"\", category: \"\" });\n  };\n\n  const handleDelete = async (id: number) => {\n    await api.deleteMeal(id);\n    setMeals(meals.filter((m) => m.id !== id));\n  };\n\n  return (\n    <div>\n      {/* Stats */}\n      <div className=\"stats-grid\">\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--primary-lighter)\", color: \"var(--primary)\" }}>🍽️</div>\n          <div className=\"stat-value\">{meals.length}</div>\n          <div className=\"stat-label\">Meals Planned</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--success-light)\", color: \"var(--success)\" }}>⭐</div>\n          <div className=\"stat-value\" style={{ fontSize: 20 }}>{topCategory}</div>\n          <div className=\"stat-label\">Top Category</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--warning-light)\", color: \"var(--warning)\" }}>📅</div>\n          <div className=\"stat-value\">{weekendMeals}</div>\n          <div className=\"stat-label\">Weekend Meals</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--info-light)\", color: \"var(--info)\" }}>🎨</div>\n          <div className=\"stat-value\">{categories.size}</div>\n          <div className=\"stat-label\">Categories</div>\n        </div>\n      </div>\n\n      {/* Weekly grid */}\n      <div className=\"grid-7\" style={{ marginBottom: 24 }}>\n        {DAY_NAMES.map((day, i) => (\n          <div key={i} className=\"meal-day-card\">\n            <div className=\"meal-day-header\">\n              <span>{day.slice(0, 3)}</span>\n              <span className=\"pill pill-neutral\">{mealsByDay[i].length}</span>\n            </div>\n            {mealsByDay[i].map((m) => (\n              <div key={m.id} className=\"meal-item\">\n                <div className=\"meal-item-info\">\n                  <span className=\"meal-type-badge\">{m.meal_type}</span>\n                  <span>{m.name}</span>\n                </div>\n                <button\n                  className=\"btn btn-ghost btn-icon btn-sm\"\n                  style={{ padding: 0, minWidth: 20, fontSize: 12 }}\n                  onClick={() => handleDelete(m.id)}\n                >✕</button>\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n\n      <div className=\"grid-2\">\n        {/* Add meal form */}\n        <div className=\"card\">\n          <div className=\"card-header\">\n            <span className=\"card-title\">Add Meal</span>\n          </div>\n          <div className=\"form-row\">\n            <div className=\"form-group\">\n              <label className=\"form-label\">Day</label>\n              <select className=\"form-select\" value={form.day_of_week} onChange={(e) => setForm({ ...form, day_of_week: Number(e.target.value) })}>\n                {DAY_NAMES.map((d, i) => <option key={i} value={i}>{d}</option>)}\n              </select>\n            </div>\n            <div className=\"form-group\">\n              <label className=\"form-label\">Meal Type</label>\n              <select className=\"form-select\" value={form.meal_type} onChange={(e) => setForm({ ...form, meal_type: e.target.value })}>\n                {MEAL_TYPES.map((t) => <option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>)}\n              </select>\n            </div>\n          </div>\n          <div className=\"form-group\">\n            <label className=\"form-label\">Meal Name</label>\n            <input className=\"form-input\" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder=\"e.g., Chicken Stir Fry\" />\n          </div>\n          <div className=\"form-group\">\n            <label className=\"form-label\">Category</label>\n            <input className=\"form-input\" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} placeholder=\"e.g., Healthy, Quick, Batch\" />\n          </div>\n          <button className=\"btn btn-primary\" style={{ width: \"100%\", marginTop: 8 }} onClick={handleAdd}>Add Meal</button>\n        </div>\n\n        {/* Category breakdown */}\n        <div className=\"card\" style={{ alignSelf: \"start\" }}>\n          <div className=\"card-header\">\n            <span className=\"card-title\">Category Breakdown</span>\n          </div>\n          {categories.size === 0 ? (\n            <div style={{ color: \"var(--text-muted)\", fontSize: 14 }}>No categories yet</div>\n          ) : (\n            <div className=\"dept-grid\">\n              {[...categories.entries()].map(([cat, count]) => (\n                <div key={cat} className=\"dept-card\">\n                  <div className=\"dept-count\">{count}</div>\n                  <div className=\"dept-name\">{cat}</div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[200,207,267],{"_105":275,"_97":276,"_162":277,"_164":208,"_165":147,"_166":278,"_168":169,"_107":279,"_102":33,"_171":184,"_173":280,"_174":22,"_175":-5,"_176":281,"_100":282},"75840756-2054-11f1-95c3-42dde27851f2","PieChart.tsx","7584081e-2054-11f1-95c3-42dde27851f2",11,["D",1773568254560],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface PieChartProps {\n  data: { label: string; value: number; color: string }[];\n  size?: number;\n  title?: string;\n}\n\nexport default function PieChart({ data, size = 180, title }: PieChartProps) {\n  const total = data.reduce((sum, d) => sum + d.value, 0);\n  if (total === 0) {\n    return (\n      <div style={{ textAlign: \"center\", padding: \"20px\", color: \"var(--text-muted)\" }}>\n        {title && <div style={{ fontWeight: 600, marginBottom: 8 }}>{title}</div>}\n        <div>No data yet</div>\n      </div>\n    );\n  }\n\n  const cx = size / 2;\n  const cy = size / 2;\n  const r = size / 2 - 10;\n  const innerR = r * 0.55;\n\n  let startAngle = -90;\n  const slices = data.map((d) => {\n    const angle = (d.value / total) * 360;\n    const start = startAngle;\n    startAngle += angle;\n    return { ...d, start, angle };\n  });\n\n  function polarToCartesian(centerX: number, centerY: number, radius: number, angleDeg: number) {\n    const rad = (angleDeg * Math.PI) / 180;\n    return { x: centerX + radius * Math.cos(rad), y: centerY + radius * Math.sin(rad) };\n  }\n\n  function arcPath(startDeg: number, angleDeg: number, outerR: number, innerRadius: number) {\n    const s1 = polarToCartesian(cx, cy, outerR, startDeg);\n    const e1 = polarToCartesian(cx, cy, outerR, startDeg + angleDeg);\n    const s2 = polarToCartesian(cx, cy, innerRadius, startDeg + angleDeg);\n    const e2 = polarToCartesian(cx, cy, innerRadius, startDeg);\n    const large = angleDeg > 180 ? 1 : 0;\n    return [\n      `M ${s1.x} ${s1.y}`,\n      `A ${outerR} ${outerR} 0 ${large} 1 ${e1.x} ${e1.y}`,\n      `L ${s2.x} ${s2.y}`,\n      `A ${innerRadius} ${innerRadius} 0 ${large} 0 ${e2.x} ${e2.y}`,\n      \"Z\",\n    ].join(\" \");\n  }\n\n  return (\n    <div>\n      {title && <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 12 }}>{title}</div>}\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 20 }}>\n        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n          {slices.map((s, i) => (\n            <path\n              key={i}\n              d={arcPath(s.start, s.angle, r, innerR)}\n              fill={s.color}\n              style={{ transition: \"opacity 0.2s\" }}\n              onMouseEnter={(e) => (e.currentTarget.style.opacity = \"0.8\")}\n              onMouseLeave={(e) => (e.currentTarget.style.opacity = \"1\")}\n            />\n          ))}\n          <text x={cx} y={cy - 6} textAnchor=\"middle\" fontSize=\"22\" fontWeight=\"700\" fill=\"var(--text)\">\n            {total}\n          </text>\n          <text x={cx} y={cy + 14} textAnchor=\"middle\" fontSize=\"11\" fill=\"var(--text-secondary)\">\n            total\n          </text>\n        </svg>\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n          {data.map((d, i) => (\n            <div key={i} style={{ display: \"flex\", alignItems: \"center\", gap: 8, fontSize: 13 }}>\n              <div style={{ width: 10, height: 10, borderRadius: 3, background: d.color, flexShrink: 0 }} />\n              <span style={{ color: \"var(--text-secondary)\" }}>{d.label}</span>\n              <span style={{ fontWeight: 600 }}>{d.value}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[200,207,276],{"_105":284,"_97":285,"_162":286,"_164":208,"_165":147,"_166":287,"_168":169,"_107":288,"_102":33,"_171":184,"_173":289,"_174":22,"_175":-5,"_176":290,"_100":291},"757f6836-2054-11f1-8ac4-42dde27851f2","ProgressChart.tsx","757f68fe-2054-11f1-8ac4-42dde27851f2",10,["D",1773568254540],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ProgressChartProps {\n  value: number;\n  total: number;\n  title?: string;\n  color?: string;\n}\n\nexport default function ProgressChart({ value, total, title, color = \"var(--primary)\" }: ProgressChartProps) {\n  const pct = total > 0 ? Math.round((value / total) * 100) : 0;\n  const size = 140;\n  const strokeWidth = 10;\n  const r = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * r;\n  const offset = circumference - (pct / 100) * circumference;\n\n  return (\n    <div style={{ textAlign: \"center\" }}>\n      {title && <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 12 }}>{title}</div>}\n      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={r}\n          fill=\"none\"\n          stroke=\"var(--border-light)\"\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={r}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          strokeLinecap=\"round\"\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n          style={{ transition: \"stroke-dashoffset 0.8s ease\" }}\n        />\n        <text x={size / 2} y={size / 2 - 8} textAnchor=\"middle\" fontSize=\"24\" fontWeight=\"700\" fill=\"var(--text)\">\n          {pct}%\n        </text>\n        <text x={size / 2} y={size / 2 + 12} textAnchor=\"middle\" fontSize=\"12\" fill=\"var(--text-secondary)\">\n          {value}/{total}\n        </text>\n      </svg>\n      <div style={{ fontSize: 12, color: \"var(--text-secondary)\", marginTop: 4 }}>tasks completed</div>\n    </div>\n  );\n}\n",[],[200,207,285],{"_105":293,"_97":294,"_162":295,"_164":208,"_165":147,"_166":296,"_168":169,"_107":297,"_102":33,"_171":184,"_173":298,"_174":22,"_175":-5,"_176":299,"_100":300},"75997a46-2054-11f1-8852-42dde27851f2","Reminders.tsx","75997c6c-2054-11f1-8852-42dde27851f2",14,["D",1773568254709],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport * as api from \"../api.ts\";\nimport type { Reminder } from \"../../shared/types.ts\";\n\nexport default function Reminders() {\n  const [reminders, setReminders] = useState<Reminder[]>([]);\n  const [form, setForm] = useState({ title: \"\", date: \"\", time: \"\" });\n\n  useEffect(() => {\n    api.fetchReminders().then(setReminders).catch(console.error);\n  }, []);\n\n  const todayStr = new Date().toISOString().split(\"T\")[0];\n  const pending = reminders.filter((r) => !r.completed).length;\n  const completed = reminders.filter((r) => r.completed).length;\n  const todayPending = reminders.filter((r) => !r.completed && r.date === todayStr).length;\n\n  const handleAdd = async () => {\n    if (!form.title.trim() || !form.date) return;\n    const reminder = await api.createReminder({ ...form, completed: false } as any);\n    setReminders([reminder, ...reminders]);\n    setForm({ title: \"\", date: \"\", time: \"\" });\n  };\n\n  const handleToggle = async (r: Reminder) => {\n    const updated = await api.updateReminder(r.id, { completed: !r.completed });\n    setReminders(reminders.map((rem) => (rem.id === r.id ? updated : rem)));\n  };\n\n  const handleDelete = async (id: number) => {\n    await api.deleteReminder(id);\n    setReminders(reminders.filter((r) => r.id !== id));\n  };\n\n  return (\n    <div>\n      {/* Stats */}\n      <div className=\"stats-grid\">\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--warning-light)\", color: \"var(--warning)\" }}>🔔</div>\n          <div className=\"stat-value\">{pending}</div>\n          <div className=\"stat-label\">Upcoming</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--success-light)\", color: \"var(--success)\" }}>✓</div>\n          <div className=\"stat-value\">{completed}</div>\n          <div className=\"stat-label\">Completed</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--primary-lighter)\", color: \"var(--primary)\" }}>📋</div>\n          <div className=\"stat-value\">{reminders.length}</div>\n          <div className=\"stat-label\">Total</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--danger-light)\", color: \"var(--danger)\" }}>📌</div>\n          <div className=\"stat-value\">{todayPending}</div>\n          <div className=\"stat-label\">Due Today</div>\n        </div>\n      </div>\n\n      <div className=\"grid-2\">\n        {/* Reminder list */}\n        <div className=\"card\">\n          <div className=\"card-header\">\n            <span className=\"card-title\">Reminders</span>\n          </div>\n          {reminders.length === 0 ? (\n            <div className=\"empty-state\">\n              <div className=\"empty-icon\">⏰</div>\n              <div className=\"empty-text\">No reminders set</div>\n            </div>\n          ) : (\n            reminders.map((r) => (\n              <div key={r.id} className=\"item-row\" style={{ opacity: r.completed ? 0.5 : 1 }}>\n                <div className=\"item-main\">\n                  <div className={`item-title ${r.completed ? \"completed-text\" : \"\"}`}>{r.title}</div>\n                  <div className=\"item-meta\">\n                    <span className=\"pill pill-warning\" style={{ marginRight: 4 }}>{r.date}</span>\n                    {r.time && <span className=\"pill pill-info\">{r.time}</span>}\n                  </div>\n                </div>\n                <span className={`pill ${r.completed ? \"pill-success\" : \"pill-danger\"}`}>\n                  {r.completed ? \"Done\" : \"Pending\"}\n                </span>\n                <button\n                  className={`btn btn-sm ${r.completed ? \"btn-ghost\" : \"btn-success\"}`}\n                  onClick={() => handleToggle(r)}\n                >\n                  {r.completed ? \"Reopen\" : \"Complete\"}\n                </button>\n                <button className=\"btn btn-ghost btn-icon btn-sm\" onClick={() => handleDelete(r.id)}>✕</button>\n              </div>\n            ))\n          )}\n        </div>\n\n        {/* Add reminder form */}\n        <div className=\"card\" style={{ alignSelf: \"start\" }}>\n          <div className=\"card-header\">\n            <span className=\"card-title\">Create Reminder</span>\n          </div>\n          <div className=\"form-group\">\n            <label className=\"form-label\">Title</label>\n            <input className=\"form-input\" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} placeholder=\"e.g., Submit permission slip\" />\n          </div>\n          <div className=\"form-row\">\n            <div className=\"form-group\">\n              <label className=\"form-label\">Date</label>\n              <input type=\"date\" className=\"form-input\" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />\n            </div>\n            <div className=\"form-group\">\n              <label className=\"form-label\">Time</label>\n              <input type=\"time\" className=\"form-input\" value={form.time} onChange={(e) => setForm({ ...form, time: e.target.value })} />\n            </div>\n          </div>\n          <button className=\"btn btn-primary\" style={{ width: \"100%\", marginTop: 8 }} onClick={handleAdd}>Add Reminder</button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[200,207,294],{"_105":302,"_97":303,"_162":304,"_164":208,"_165":147,"_166":305,"_168":169,"_107":306,"_102":33,"_171":184,"_173":307,"_174":22,"_175":-5,"_176":308,"_100":309},"756d9f84-2054-11f1-b0fc-42dde27851f2","Todos.tsx","756da038-2054-11f1-b0fc-42dde27851f2",9,["D",1773568254449],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport * as api from \"../api.ts\";\nimport type { Todo } from \"../../shared/types.ts\";\n\nconst PRIORITY_STYLES: Record<string, { bg: string; color: string }> = {\n  high: { bg: \"var(--danger-light)\", color: \"#DC2626\" },\n  medium: { bg: \"var(--warning-light)\", color: \"#D97706\" },\n  low: { bg: \"var(--border-light)\", color: \"var(--text-secondary)\" },\n};\n\nexport default function Todos() {\n  const [todos, setTodos] = useState<Todo[]>([]);\n  const [title, setTitle] = useState(\"\");\n  const [priority, setPriority] = useState<\"low\" | \"medium\" | \"high\">(\"medium\");\n\n  useEffect(() => {\n    api.fetchTodos().then(setTodos).catch(console.error);\n  }, []);\n\n  const completed = todos.filter((t) => t.completed).length;\n  const total = todos.length;\n  const pct = total > 0 ? Math.round((completed / total) * 100) : 0;\n  const highOpen = todos.filter((t) => !t.completed && t.priority === \"high\").length;\n  const lowOpen = todos.filter((t) => !t.completed && t.priority === \"low\").length;\n\n  const handleAdd = async () => {\n    if (!title.trim()) return;\n    const todo = await api.createTodo({\n      title: title.trim(),\n      priority,\n      completed: false,\n      due_date: \"\",\n    });\n    setTodos([todo, ...todos]);\n    setTitle(\"\");\n    setPriority(\"medium\");\n  };\n\n  const handleToggle = async (todo: Todo) => {\n    const updated = await api.updateTodo(todo.id, { completed: !todo.completed });\n    setTodos(todos.map((t) => (t.id === todo.id ? updated : t)));\n  };\n\n  const handleDelete = async (id: number) => {\n    await api.deleteTodo(id);\n    setTodos(todos.filter((t) => t.id !== id));\n  };\n\n  return (\n    <div>\n      {/* Stats */}\n      <div className=\"stats-grid\">\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--primary-lighter)\", color: \"var(--primary)\" }}>📊</div>\n          <div className=\"stat-value\">{pct}%</div>\n          <div className=\"stat-label\">Completion ({completed}/{total})</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--danger-light)\", color: \"var(--danger)\" }}>🔥</div>\n          <div className=\"stat-value\">{highOpen}</div>\n          <div className=\"stat-label\">Needs Attention</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--success-light)\", color: \"var(--success)\" }}>⚡</div>\n          <div className=\"stat-value\">{lowOpen}</div>\n          <div className=\"stat-label\">Quick Wins</div>\n        </div>\n        <div className=\"stat-card\">\n          <div className=\"stat-icon\" style={{ background: \"var(--info-light)\", color: \"var(--info)\" }}>📋</div>\n          <div className=\"stat-value\">{total}</div>\n          <div className=\"stat-label\">Total Tasks</div>\n        </div>\n      </div>\n\n      {/* Progress bar */}\n      <div className=\"card\" style={{ marginBottom: 16 }}>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\", fontSize: 13, fontWeight: 500, marginBottom: 4 }}>\n          <span>Progress</span>\n          <span>{pct}%</span>\n        </div>\n        <div className=\"progress-bar\">\n          <div className=\"progress-fill\" style={{ width: `${pct}%` }} />\n        </div>\n      </div>\n\n      <div className=\"grid-2\">\n        {/* Task list */}\n        <div className=\"card\">\n          <div className=\"card-header\">\n            <span className=\"card-title\">Tasks</span>\n            <span style={{ fontSize: 13, color: \"var(--text-secondary)\" }}>{todos.length} items</span>\n          </div>\n          {todos.length === 0 ? (\n            <div className=\"empty-state\">\n              <div className=\"empty-icon\">✅</div>\n              <div className=\"empty-text\">No tasks yet. Add one to get started!</div>\n            </div>\n          ) : (\n            todos.map((todo) => {\n              const ps = PRIORITY_STYLES[todo.priority] || PRIORITY_STYLES.low;\n              return (\n                <div key={todo.id} className=\"item-row\">\n                  <div\n                    className={`checkbox ${todo.completed ? \"checked\" : \"\"}`}\n                    onClick={() => handleToggle(todo)}\n                  >\n                    {todo.completed && \"✓\"}\n                  </div>\n                  <div className=\"item-main\">\n                    <div className={`item-title ${todo.completed ? \"completed-text\" : \"\"}`}>{todo.title}</div>\n                  </div>\n                  <span className=\"pill\" style={{ background: ps.bg, color: ps.color }}>{todo.priority}</span>\n                  <span className={`pill ${todo.completed ? \"pill-success\" : \"pill-info\"}`}>\n                    {todo.completed ? \"Done\" : \"In progress\"}\n                  </span>\n                  <button className=\"btn btn-ghost btn-icon btn-sm\" onClick={() => handleDelete(todo.id)}>✕</button>\n                </div>\n              );\n            })\n          )}\n        </div>\n\n        {/* Add task form */}\n        <div className=\"card\" style={{ alignSelf: \"start\" }}>\n          <div className=\"card-header\">\n            <span className=\"card-title\">Add Task</span>\n          </div>\n          <div className=\"form-group\">\n            <label className=\"form-label\">Task</label>\n            <input\n              className=\"form-input\"\n              value={title}\n              onChange={(e) => setTitle(e.target.value)}\n              placeholder=\"What needs to be done?\"\n              onKeyDown={(e) => e.key === \"Enter\" && handleAdd()}\n            />\n          </div>\n          <div className=\"form-group\">\n            <label className=\"form-label\">Priority</label>\n            <select className=\"form-select\" value={priority} onChange={(e) => setPriority(e.target.value as any)}>\n              <option value=\"high\">High</option>\n              <option value=\"medium\">Medium</option>\n              <option value=\"low\">Low</option>\n            </select>\n          </div>\n          <button className=\"btn btn-primary\" style={{ width: \"100%\", marginTop: 8 }} onClick={handleAdd}>\n            Add Task\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[200,207,303],[200,207],{"_105":312,"_97":313,"_162":314,"_164":201,"_165":147,"_166":315,"_168":169,"_107":316,"_102":33,"_171":184,"_173":317,"_174":22,"_175":-5,"_176":318,"_100":319},"755b8088-2054-11f1-99b7-42dde27851f2","App.tsx","755b8178-2054-11f1-99b7-42dde27851f2",5,["D",1773568254340],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport * as api from \"./api.ts\";\nimport type { UserInfo } from \"../shared/types.ts\";\nimport Layout from \"./components/Layout.tsx\";\nimport Dashboard from \"./components/Dashboard.tsx\";\nimport Calendar from \"./components/Calendar.tsx\";\nimport Todos from \"./components/Todos.tsx\";\nimport Meals from \"./components/Meals.tsx\";\nimport Grocery from \"./components/Grocery.tsx\";\nimport Reminders from \"./components/Reminders.tsx\";\nimport Activities from \"./components/Activities.tsx\";\n\ntype Page = \"dashboard\" | \"calendar\" | \"todos\" | \"meals\" | \"grocery\" | \"reminders\" | \"activities\";\n\nexport default function App() {\n  const [user, setUser] = useState<UserInfo | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [currentPage, setCurrentPage] = useState<Page>(\"dashboard\");\n\n  useEffect(() => {\n    api.fetchUser()\n      .then((data) => {\n        if (data.email) setUser(data);\n      })\n      .catch(() => {})\n      .finally(() => setLoading(false));\n  }, []);\n\n  if (loading) {\n    return (\n      <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\", minHeight: \"100vh\" }}>\n        <div className=\"spinner\" />\n      </div>\n    );\n  }\n\n  if (!user) {\n    return (\n      <div className=\"login-screen\">\n        <div className=\"login-card\">\n          <div className=\"login-logo\">🏠</div>\n          <h1 className=\"login-title\">Family Hub</h1>\n          <p className=\"login-subtitle\">\n            Your family's command center — calendar, meals, tasks, and more.\n          </p>\n          <a href=\"/auth/login\" className=\"login-btn\">\n            Sign in with Val Town\n          </a>\n        </div>\n      </div>\n    );\n  }\n\n  const renderPage = () => {\n    switch (currentPage) {\n      case \"dashboard\": return <Dashboard onNavigate={setCurrentPage} />;\n      case \"calendar\": return <Calendar />;\n      case \"todos\": return <Todos />;\n      case \"meals\": return <Meals />;\n      case \"grocery\": return <Grocery />;\n      case \"reminders\": return <Reminders />;\n      case \"activities\": return <Activities />;\n    }\n  };\n\n  return (\n    <Layout user={user} currentPage={currentPage} onNavigate={setCurrentPage}>\n      {renderPage()}\n    </Layout>\n  );\n}\n",[],[200,313],{"_105":321,"_97":322,"_162":323,"_164":201,"_165":147,"_166":324,"_168":169,"_107":325,"_102":33,"_171":184,"_173":326,"_174":22,"_175":-5,"_176":327,"_100":328},"756726b8-2054-11f1-ac09-42dde27851f2","api.ts","75672762-2054-11f1-ac09-42dde27851f2",8,["D",1773568254416],"// All API fetch wrappers\n\nimport type {\n  CalendarEvent,\n  Todo,\n  Meal,\n  GroceryItem,\n  Reminder,\n  Activity,\n  DashboardStats,\n  UserInfo,\n} from \"../shared/types.ts\";\n\nasync function request<T>(path: string, options?: RequestInit): Promise<T> {\n  const res = await fetch(path, {\n    ...options,\n    headers: { \"Content-Type\": \"application/json\", ...options?.headers },\n  });\n  if (!res.ok) {\n    const err = await res.json().catch(() => ({ error: res.statusText }));\n    throw new Error(err.error || res.statusText);\n  }\n  return res.json();\n}\n\n// User\nexport const fetchUser = () => request<UserInfo>(\"/api/user\");\n\n// Dashboard\nexport const fetchDashboard = () => request<DashboardStats>(\"/api/dashboard\");\n\n// Events\nexport const fetchEvents = () => request<CalendarEvent[]>(\"/api/events\");\nexport const createEvent = (data: Omit<CalendarEvent, \"id\" | \"user_email\">) =>\n  request<CalendarEvent>(\"/api/events\", { method: \"POST\", body: JSON.stringify(data) });\nexport const updateEvent = (id: number, data: Partial<CalendarEvent>) =>\n  request<CalendarEvent>(`/api/events/${id}`, { method: \"PATCH\", body: JSON.stringify(data) });\nexport const deleteEvent = (id: number) =>\n  request(`/api/events/${id}`, { method: \"DELETE\" });\n\n// Todos\nexport const fetchTodos = () => request<Todo[]>(\"/api/todos\");\nexport const createTodo = (data: Omit<Todo, \"id\" | \"user_email\">) =>\n  request<Todo>(\"/api/todos\", { method: \"POST\", body: JSON.stringify(data) });\nexport const updateTodo = (id: number, data: Partial<Todo>) =>\n  request<Todo>(`/api/todos/${id}`, { method: \"PATCH\", body: JSON.stringify(data) });\nexport const deleteTodo = (id: number) =>\n  request(`/api/todos/${id}`, { method: \"DELETE\" });\n\n// Meals\nexport const fetchMeals = () => request<Meal[]>(\"/api/meals\");\nexport const createMeal = (data: Omit<Meal, \"id\" | \"user_email\">) =>\n  request<Meal>(\"/api/meals\", { method: \"POST\", body: JSON.stringify(data) });\nexport const updateMeal = (id: number, data: Partial<Meal>) =>\n  request<Meal>(`/api/meals/${id}`, { method: \"PATCH\", body: JSON.stringify(data) });\nexport const deleteMeal = (id: number) =>\n  request(`/api/meals/${id}`, { method: \"DELETE\" });\n\n// Grocery\nexport const fetchGrocery = () => request<GroceryItem[]>(\"/api/grocery\");\nexport const createGrocery = (data: Omit<GroceryItem, \"id\" | \"user_email\">) =>\n  request<GroceryItem>(\"/api/grocery\", { method: \"POST\", body: JSON.stringify(data) });\nexport const updateGrocery = (id: number, data: Partial<GroceryItem>) =>\n  request<GroceryItem>(`/api/grocery/${id}`, { method: \"PATCH\", body: JSON.stringify(data) });\nexport const deleteGrocery = (id: number) =>\n  request(`/api/grocery/${id}`, { method: \"DELETE\" });\n\n// Reminders\nexport const fetchReminders = () => request<Reminder[]>(\"/api/reminders\");\nexport const createReminder = (data: Omit<Reminder, \"id\" | \"user_email\">) =>\n  request<Reminder>(\"/api/reminders\", { method: \"POST\", body: JSON.stringify(data) });\nexport const updateReminder = (id: number, data: Partial<Reminder>) =>\n  request<Reminder>(`/api/reminders/${id}`, { method: \"PATCH\", body: JSON.stringify(data) });\nexport const deleteReminder = (id: number) =>\n  request(`/api/reminders/${id}`, { method: \"DELETE\" });\n\n// Activities\nexport const fetchActivities = () => request<Activity[]>(\"/api/activities\");\nexport const createActivity = (data: Omit<Activity, \"id\" | \"user_email\">) =>\n  request<Activity>(\"/api/activities\", { method: \"POST\", body: JSON.stringify(data) });\nexport const updateActivity = (id: number, data: Partial<Activity>) =>\n  request<Activity>(`/api/activities/${id}`, { method: \"PATCH\", body: JSON.stringify(data) });\nexport const deleteActivity = (id: number) =>\n  request(`/api/activities/${id}`, { method: \"DELETE\" });\n",[],[200,322],{"_105":330,"_97":331,"_162":332,"_164":201,"_165":147,"_166":333,"_168":169,"_107":334,"_102":33,"_171":335,"_173":336,"_174":22,"_175":-5,"_176":337,"_100":338},"75640a32-2054-11f1-a273-42dde27851f2","index.html","75640af0-2054-11f1-a273-42dde27851f2",7,["D",1773568254386],"file","<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Family Hub</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n    <style>\n      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n      :root {\n        --primary: #4F46E5;\n        --primary-light: #818CF8;\n        --primary-lighter: #EEF2FF;\n        --secondary: #0EA5E9;\n        --secondary-light: #E0F2FE;\n        --accent: #F59E0B;\n        --accent-light: #FEF3C7;\n        --success: #10B981;\n        --success-light: #D1FAE5;\n        --warning: #F59E0B;\n        --warning-light: #FEF3C7;\n        --danger: #EF4444;\n        --danger-light: #FEE2E2;\n        --info: #3B82F6;\n        --info-light: #DBEAFE;\n\n        --bg: #F8FAFC;\n        --surface: #FFFFFF;\n        --surface-hover: #F1F5F9;\n        --text: #0F172A;\n        --text-secondary: #64748B;\n        --text-muted: #94A3B8;\n        --border: #E2E8F0;\n        --border-light: #F1F5F9;\n\n        --sidebar-bg: #1E293B;\n        --sidebar-text: #CBD5E1;\n        --sidebar-active: #4F46E5;\n        --sidebar-hover: #334155;\n\n        --radius: 12px;\n        --radius-sm: 8px;\n        --radius-lg: 16px;\n        --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);\n        --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);\n        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);\n        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);\n        --transition: all 0.15s ease;\n\n        --sidebar-width: 260px;\n      }\n\n      body {\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n        background: var(--bg);\n        color: var(--text);\n        line-height: 1.5;\n        min-height: 100vh;\n      }\n\n      /* Layout */\n      .app-layout {\n        display: flex;\n        min-height: 100vh;\n      }\n\n      .sidebar {\n        width: var(--sidebar-width);\n        background: var(--sidebar-bg);\n        color: var(--sidebar-text);\n        display: flex;\n        flex-direction: column;\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        z-index: 50;\n        transition: transform 0.3s ease;\n      }\n\n      .sidebar-logo {\n        padding: 24px 20px;\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        border-bottom: 1px solid rgba(255,255,255,0.08);\n      }\n\n      .sidebar-logo-icon {\n        width: 36px;\n        height: 36px;\n        background: var(--primary);\n        border-radius: 10px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 18px;\n      }\n\n      .sidebar-nav {\n        flex: 1;\n        padding: 12px 8px;\n        overflow-y: auto;\n      }\n\n      .nav-section-label {\n        padding: 16px 12px 6px;\n        font-size: 11px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: rgba(255,255,255,0.35);\n      }\n\n      .nav-item {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 10px 12px;\n        border-radius: var(--radius-sm);\n        cursor: pointer;\n        transition: var(--transition);\n        font-size: 14px;\n        font-weight: 500;\n        color: var(--sidebar-text);\n        border: none;\n        background: none;\n        width: 100%;\n        text-align: left;\n      }\n\n      .nav-item:hover { background: var(--sidebar-hover); color: #fff; }\n      .nav-item.active { background: var(--sidebar-active); color: #fff; }\n\n      .nav-icon {\n        width: 20px;\n        text-align: center;\n        font-size: 16px;\n        flex-shrink: 0;\n      }\n\n      .sidebar-footer {\n        padding: 16px;\n        border-top: 1px solid rgba(255,255,255,0.08);\n      }\n\n      .user-card {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 8px;\n        border-radius: var(--radius-sm);\n      }\n\n      .user-avatar {\n        width: 36px;\n        height: 36px;\n        border-radius: 50%;\n        background: var(--primary);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 600;\n        font-size: 14px;\n        color: #fff;\n        overflow: hidden;\n      }\n\n      .user-avatar img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .user-info {\n        flex: 1;\n        min-width: 0;\n      }\n\n      .user-name {\n        font-size: 13px;\n        font-weight: 600;\n        color: #fff;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .user-role {\n        font-size: 11px;\n        color: var(--sidebar-text);\n      }\n\n      .logout-btn {\n        display: block;\n        margin-top: 8px;\n        padding: 6px 12px;\n        border-radius: var(--radius-sm);\n        background: rgba(255,255,255,0.08);\n        color: var(--sidebar-text);\n        font-size: 12px;\n        text-align: center;\n        text-decoration: none;\n        transition: var(--transition);\n      }\n\n      .logout-btn:hover {\n        background: rgba(255,255,255,0.15);\n        color: #fff;\n      }\n\n      .main-content {\n        flex: 1;\n        margin-left: var(--sidebar-width);\n        min-height: 100vh;\n      }\n\n      .top-bar {\n        background: var(--surface);\n        border-bottom: 1px solid var(--border);\n        padding: 16px 32px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: sticky;\n        top: 0;\n        z-index: 40;\n      }\n\n      .top-bar h1 {\n        font-size: 20px;\n        font-weight: 700;\n      }\n\n      .top-bar-date {\n        font-size: 13px;\n        color: var(--text-secondary);\n      }\n\n      .page-content {\n        padding: 24px 32px;\n        max-width: 1400px;\n      }\n\n      .mobile-menu-btn {\n        display: none;\n        background: none;\n        border: none;\n        font-size: 24px;\n        cursor: pointer;\n        color: var(--text);\n        padding: 4px;\n      }\n\n      .sidebar-overlay {\n        display: none;\n        position: fixed;\n        inset: 0;\n        background: rgba(0,0,0,0.5);\n        z-index: 45;\n      }\n\n      /* Cards */\n      .card {\n        background: var(--surface);\n        border: 1px solid var(--border);\n        border-radius: var(--radius);\n        padding: 20px;\n        box-shadow: var(--shadow-sm);\n      }\n\n      .card-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: 16px;\n      }\n\n      .card-title {\n        font-size: 16px;\n        font-weight: 600;\n      }\n\n      /* Stat cards */\n      .stats-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n      }\n\n      .stat-card {\n        background: var(--surface);\n        border: 1px solid var(--border);\n        border-radius: var(--radius);\n        padding: 20px;\n        cursor: pointer;\n        transition: var(--transition);\n      }\n\n      .stat-card:hover {\n        box-shadow: var(--shadow-md);\n        transform: translateY(-1px);\n      }\n\n      .stat-icon {\n        width: 40px;\n        height: 40px;\n        border-radius: 10px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 20px;\n        margin-bottom: 12px;\n      }\n\n      .stat-value {\n        font-size: 28px;\n        font-weight: 700;\n        line-height: 1;\n        margin-bottom: 4px;\n      }\n\n      .stat-label {\n        font-size: 13px;\n        color: var(--text-secondary);\n        font-weight: 500;\n      }\n\n      /* Grid layouts */\n      .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }\n      .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n      .grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }\n\n      /* Buttons */\n      .btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        padding: 8px 16px;\n        border-radius: var(--radius-sm);\n        font-size: 14px;\n        font-weight: 500;\n        border: none;\n        cursor: pointer;\n        transition: var(--transition);\n        font-family: inherit;\n        line-height: 1.5;\n      }\n\n      .btn-primary { background: var(--primary); color: #fff; }\n      .btn-primary:hover { background: #4338CA; }\n      .btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }\n      .btn-secondary:hover { background: var(--surface-hover); }\n      .btn-success { background: var(--success); color: #fff; }\n      .btn-success:hover { opacity: 0.9; }\n      .btn-danger { background: var(--danger); color: #fff; }\n      .btn-danger:hover { opacity: 0.9; }\n      .btn-ghost { background: transparent; color: var(--text-secondary); }\n      .btn-ghost:hover { background: var(--surface-hover); color: var(--text); }\n      .btn-sm { padding: 4px 10px; font-size: 13px; }\n      .btn-icon { padding: 6px; min-width: 32px; }\n\n      /* Pills / Badges */\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        padding: 2px 10px;\n        border-radius: 100px;\n        font-size: 12px;\n        font-weight: 500;\n        line-height: 1.6;\n      }\n\n      .pill-primary { background: var(--primary-lighter); color: var(--primary); }\n      .pill-success { background: var(--success-light); color: #059669; }\n      .pill-warning { background: var(--warning-light); color: #D97706; }\n      .pill-danger { background: var(--danger-light); color: #DC2626; }\n      .pill-info { background: var(--info-light); color: #2563EB; }\n      .pill-neutral { background: var(--border-light); color: var(--text-secondary); }\n\n      /* Forms */\n      .form-group { margin-bottom: 12px; }\n\n      .form-label {\n        display: block;\n        font-size: 13px;\n        font-weight: 500;\n        color: var(--text-secondary);\n        margin-bottom: 4px;\n      }\n\n      .form-input, .form-select, .form-textarea {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid var(--border);\n        border-radius: var(--radius-sm);\n        font-size: 14px;\n        font-family: inherit;\n        background: var(--surface);\n        color: var(--text);\n        transition: var(--transition);\n      }\n\n      .form-input:focus, .form-select:focus, .form-textarea:focus {\n        outline: none;\n        border-color: var(--primary);\n        box-shadow: 0 0 0 3px rgba(79,70,229,0.1);\n      }\n\n      .form-textarea { resize: vertical; min-height: 80px; }\n\n      .form-row {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 12px;\n      }\n\n      /* Item rows */\n      .item-row {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 12px 16px;\n        border-bottom: 1px solid var(--border-light);\n        transition: var(--transition);\n      }\n\n      .item-row:last-child { border-bottom: none; }\n      .item-row:hover { background: var(--surface-hover); }\n\n      .item-main { flex: 1; min-width: 0; }\n\n      .item-title {\n        font-size: 14px;\n        font-weight: 500;\n      }\n\n      .item-meta {\n        font-size: 12px;\n        color: var(--text-secondary);\n        margin-top: 2px;\n      }\n\n      .item-actions {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        flex-shrink: 0;\n      }\n\n      /* Checkbox */\n      .checkbox {\n        width: 20px;\n        height: 20px;\n        border: 2px solid var(--border);\n        border-radius: 6px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: var(--transition);\n        flex-shrink: 0;\n        background: var(--surface);\n      }\n\n      .checkbox.checked {\n        background: var(--primary);\n        border-color: var(--primary);\n        color: #fff;\n      }\n\n      .completed-text { text-decoration: line-through; color: var(--text-muted); }\n\n      /* Progress bar */\n      .progress-bar {\n        height: 8px;\n        background: var(--border-light);\n        border-radius: 100px;\n        overflow: hidden;\n        margin: 12px 0;\n      }\n\n      .progress-fill {\n        height: 100%;\n        background: linear-gradient(90deg, var(--primary), var(--primary-light));\n        border-radius: 100px;\n        transition: width 0.5s ease;\n      }\n\n      /* Modal */\n      .modal-overlay {\n        position: fixed;\n        inset: 0;\n        background: rgba(0,0,0,0.4);\n        backdrop-filter: blur(4px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 100;\n        padding: 20px;\n      }\n\n      .modal {\n        background: var(--surface);\n        border-radius: var(--radius-lg);\n        padding: 24px;\n        width: 100%;\n        max-width: 480px;\n        box-shadow: var(--shadow-lg);\n        max-height: 90vh;\n        overflow-y: auto;\n      }\n\n      .modal-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: 20px;\n      }\n\n      .modal-title {\n        font-size: 18px;\n        font-weight: 600;\n      }\n\n      .modal-footer {\n        display: flex;\n        justify-content: flex-end;\n        gap: 8px;\n        margin-top: 20px;\n      }\n\n      /* Calendar */\n      .calendar-grid {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        gap: 1px;\n        background: var(--border);\n        border-radius: var(--radius);\n        overflow: hidden;\n      }\n\n      .calendar-header-cell {\n        background: var(--surface-hover);\n        padding: 10px;\n        text-align: center;\n        font-size: 12px;\n        font-weight: 600;\n        text-transform: uppercase;\n        color: var(--text-secondary);\n      }\n\n      .calendar-cell {\n        background: var(--surface);\n        min-height: 88px;\n        padding: 8px;\n        cursor: pointer;\n        transition: var(--transition);\n        position: relative;\n      }\n\n      .calendar-cell:hover { background: var(--surface-hover); }\n      .calendar-cell.other-month { opacity: 0.35; }\n      .calendar-cell.today { box-shadow: inset 0 0 0 2px var(--primary); }\n      .calendar-cell.selected { background: var(--primary-lighter); }\n\n      .calendar-date {\n        font-size: 13px;\n        font-weight: 500;\n        margin-bottom: 4px;\n      }\n\n      .event-dots {\n        display: flex;\n        gap: 3px;\n        flex-wrap: wrap;\n      }\n\n      .event-dot {\n        width: 7px;\n        height: 7px;\n        border-radius: 50%;\n      }\n\n      /* Category colors */\n      .cat-kids { background: #E91E63; }\n      .cat-family { background: #7C4DFF; }\n      .cat-personal { background: #FF9800; }\n      .cat-health { background: #4CAF50; }\n\n      /* Meal grid */\n      .meal-day-card {\n        background: var(--surface);\n        border: 1px solid var(--border);\n        border-radius: var(--radius);\n        padding: 12px;\n        min-height: 120px;\n      }\n\n      .meal-day-header {\n        font-size: 13px;\n        font-weight: 600;\n        margin-bottom: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .meal-item {\n        font-size: 12px;\n        padding: 4px 8px;\n        background: var(--border-light);\n        border-radius: var(--radius-sm);\n        margin-bottom: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .meal-item-info {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .meal-type-badge {\n        font-size: 10px;\n        font-weight: 600;\n        text-transform: uppercase;\n        color: var(--text-muted);\n      }\n\n      /* Department / category cards */\n      .dept-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n        gap: 8px;\n        margin-top: 16px;\n      }\n\n      .dept-card {\n        background: var(--border-light);\n        border-radius: var(--radius-sm);\n        padding: 12px;\n        text-align: center;\n      }\n\n      .dept-count {\n        font-size: 24px;\n        font-weight: 700;\n        color: var(--primary);\n      }\n\n      .dept-name {\n        font-size: 12px;\n        color: var(--text-secondary);\n        margin-top: 2px;\n      }\n\n      /* Activity bars */\n      .activity-bar-container { margin-bottom: 12px; }\n\n      .activity-bar-label {\n        display: flex;\n        justify-content: space-between;\n        font-size: 13px;\n        font-weight: 500;\n        margin-bottom: 4px;\n      }\n\n      .activity-bar-track {\n        height: 24px;\n        background: var(--border-light);\n        border-radius: var(--radius-sm);\n        overflow: hidden;\n      }\n\n      .activity-bar-fill {\n        height: 100%;\n        background: linear-gradient(90deg, var(--primary), var(--secondary));\n        border-radius: var(--radius-sm);\n        transition: width 0.5s ease;\n      }\n\n      /* Login screen */\n      .login-screen {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-height: 100vh;\n        background: linear-gradient(135deg, #1E293B 0%, #334155 100%);\n      }\n\n      .login-card {\n        background: var(--surface);\n        border-radius: var(--radius-lg);\n        padding: 48px;\n        text-align: center;\n        max-width: 420px;\n        width: 100%;\n        box-shadow: var(--shadow-lg);\n      }\n\n      .login-logo {\n        width: 64px;\n        height: 64px;\n        background: var(--primary);\n        border-radius: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 28px;\n        margin: 0 auto 24px;\n        color: #fff;\n      }\n\n      .login-title {\n        font-size: 28px;\n        font-weight: 700;\n        margin-bottom: 8px;\n      }\n\n      .login-subtitle {\n        color: var(--text-secondary);\n        margin-bottom: 32px;\n        font-size: 15px;\n      }\n\n      .login-btn {\n        display: block;\n        width: 100%;\n        padding: 12px;\n        background: var(--primary);\n        color: #fff;\n        border: none;\n        border-radius: var(--radius);\n        font-size: 15px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: var(--transition);\n        text-decoration: none;\n        font-family: inherit;\n      }\n\n      .login-btn:hover { background: #4338CA; }\n\n      /* Loading spinner */\n      .spinner {\n        width: 40px;\n        height: 40px;\n        border: 3px solid var(--border);\n        border-top-color: var(--primary);\n        border-radius: 50%;\n        animation: spin 0.8s linear infinite;\n      }\n\n      @keyframes spin { to { transform: rotate(360deg); } }\n\n      /* Empty state */\n      .empty-state {\n        text-align: center;\n        padding: 48px 20px;\n        color: var(--text-secondary);\n      }\n\n      .empty-icon { font-size: 48px; margin-bottom: 12px; }\n      .empty-text { font-size: 15px; }\n\n      /* Scrollbar */\n      ::-webkit-scrollbar { width: 6px; height: 6px; }\n      ::-webkit-scrollbar-track { background: transparent; }\n      ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }\n      ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }\n\n      /* Responsive */\n      @media (max-width: 1200px) {\n        .stats-grid { grid-template-columns: repeat(2, 1fr); }\n        .grid-3 { grid-template-columns: repeat(2, 1fr); }\n      }\n\n      @media (max-width: 768px) {\n        .sidebar { transform: translateX(-100%); }\n        .sidebar.open { transform: translateX(0); }\n        .sidebar-overlay.open { display: block; }\n        .main-content { margin-left: 0; }\n        .mobile-menu-btn { display: block; }\n        .top-bar { padding: 12px 16px; }\n        .page-content { padding: 16px; }\n        .stats-grid { grid-template-columns: 1fr; }\n        .grid-2, .grid-3 { grid-template-columns: 1fr; }\n        .grid-7 { grid-template-columns: repeat(3, 1fr); }\n        .form-row { grid-template-columns: 1fr; }\n        .login-card { padding: 32px 24px; }\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\">\n      import \"./frontend/index.tsx\";\n    </script>\n  </body>\n</html>\n",[],[200,331],{"_105":340,"_97":341,"_162":342,"_164":201,"_165":147,"_166":343,"_168":169,"_107":344,"_102":33,"_171":184,"_173":345,"_174":22,"_175":-5,"_176":346,"_100":347},"75616d4a-2054-11f1-87ee-42dde27851f2","index.tsx","75616e6c-2054-11f1-87ee-42dde27851f2",6,["D",1773568254344],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(<App />);\n",[],[200,341],[200],{"_105":350,"_97":351,"_162":352,"_164":-5,"_165":147,"_166":353,"_168":169,"_107":354,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":355,"_100":374},"753d0950-2054-11f1-9cb0-42dde27851f2","shared","753d0a18-2054-11f1-9cb0-42dde27851f2",3,["D",1773568254136],[356,365],{"_105":357,"_97":358,"_162":359,"_164":352,"_165":147,"_166":360,"_168":169,"_107":361,"_102":33,"_171":184,"_173":362,"_174":22,"_175":-5,"_176":363,"_100":364},"75d070f0-2054-11f1-9c6e-42dde27851f2","constants.ts","75d071e0-2054-11f1-9c6e-42dde27851f2",22,["D",1773568255102],"// Table name prefix for all family hub tables\nexport const TABLE_PREFIX = \"mom_v1_\";\n\nexport const TABLES = {\n  events: `${TABLE_PREFIX}events`,\n  todos: `${TABLE_PREFIX}todos`,\n  meals: `${TABLE_PREFIX}meals`,\n  groceries: `${TABLE_PREFIX}groceries`,\n  reminders: `${TABLE_PREFIX}reminders`,\n  activities: `${TABLE_PREFIX}activities`,\n} as const;\n\nexport const DAY_NAMES = [\n  \"Sunday\",\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n] as const;\n\nexport const MEAL_TYPES = [\"breakfast\", \"lunch\", \"dinner\", \"snack\"] as const;\n\nexport const EVENT_CATEGORIES = [\"kids\", \"family\", \"personal\", \"health\"] as const;\n\nexport const CATEGORY_COLORS: Record<string, string> = {\n  kids: \"#E91E63\",\n  family: \"#7C4DFF\",\n  personal: \"#FF9800\",\n  health: \"#4CAF50\",\n};\n\nexport const MEAL_CATEGORY_COLORS: Record<string, string> = {\n  Healthy: \"#4CAF50\",\n  Quick: \"#FF9800\",\n  Batch: \"#2196F3\",\n  Treat: \"#E91E63\",\n  Prep: \"#7C4DFF\",\n};\n",[],[351,358],{"_105":366,"_97":367,"_162":368,"_164":352,"_165":147,"_166":369,"_168":169,"_107":370,"_102":33,"_171":184,"_173":371,"_174":22,"_175":-5,"_176":372,"_100":373},"75c7f4ac-2054-11f1-9c6e-42dde27851f2","types.ts","75c7f574-2054-11f1-9c6e-42dde27851f2",21,["D",1773568255047],"// All TypeScript interfaces for Family Hub\n\nexport interface CalendarEvent {\n  id: number;\n  user_email: string;\n  title: string;\n  date: string; // YYYY-MM-DD\n  start_time: string;\n  end_time: string;\n  category: \"kids\" | \"family\" | \"personal\" | \"health\";\n  notes: string;\n}\n\nexport interface Todo {\n  id: number;\n  user_email: string;\n  title: string;\n  priority: \"low\" | \"medium\" | \"high\";\n  completed: boolean;\n  due_date: string; // YYYY-MM-DD\n}\n\nexport interface Meal {\n  id: number;\n  user_email: string;\n  week_start: string; // YYYY-MM-DD\n  day_of_week: number; // 0=Sunday, 1=Monday, ..., 6=Saturday\n  meal_type: \"breakfast\" | \"lunch\" | \"dinner\" | \"snack\";\n  name: string;\n  category: string;\n}\n\nexport interface GroceryItem {\n  id: number;\n  user_email: string;\n  name: string;\n  category: string;\n  quantity: string;\n  purchased: boolean;\n}\n\nexport interface Reminder {\n  id: number;\n  user_email: string;\n  title: string;\n  date: string; // YYYY-MM-DD\n  time: string; // HH:MM\n  completed: boolean;\n}\n\nexport interface Activity {\n  id: number;\n  user_email: string;\n  child_name: string;\n  activity_name: string;\n  duration_minutes: number;\n  date: string; // YYYY-MM-DD\n  category: string;\n}\n\nexport interface DashboardStats {\n  todosTotal: number;\n  todosCompleted: number;\n  mealsPlanned: number;\n  activitiesLogged: number;\n  remindersPending: number;\n  upcomingReminders: Reminder[];\n  mealCategories: { label: string; value: number; color: string }[];\n  activityByChild: { label: string; value: number }[];\n}\n\nexport interface UserInfo {\n  email: string | null;\n  username: string | null;\n  profileImageUrl: string | null;\n}\n",[],[351,367],[351],{"_105":376,"_97":377,"_162":378,"_164":-5,"_165":147,"_166":379,"_168":169,"_107":380,"_102":33,"_171":335,"_173":381,"_174":22,"_175":-5,"_176":382,"_100":383},"75e5f182-2054-11f1-95c3-42dde27851f2",".vtignore","75e5f24a-2054-11f1-95c3-42dde27851f2",25,["D",1773568255208],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[377],{"_105":385,"_97":386,"_162":387,"_164":-5,"_165":147,"_166":388,"_168":169,"_107":389,"_102":33,"_171":335,"_173":390,"_174":22,"_175":-5,"_176":391,"_100":392},"75d7fe38-2054-11f1-9cb0-42dde27851f2","AGENTS.md","75d7fef6-2054-11f1-9cb0-42dde27851f2",23,["D",1773568255113],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n  return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n  // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n  // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n  messages: [\n    { role: \"user\", content: \"Say hello in a creative way\" },\n  ],\n  model: \"gpt-4o-mini\",\n  max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n  subject: \"Hi\",  \n  text: \"Hi\", \n  html: \"<h1>Hi</h1>\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name);     // Project name\nconsole.log(projectVal.version);  // Version number\nconsole.log(projectVal.branch);   // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `<img src=\"https://maxm-imggenurl.web.val.run/the-description-of-your-image\" />`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `<script src=\"https://esm.town/v/std/catch\"></script>` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `<script src=\"https://cdn.twind.style\" crossorigin></script>` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│   ├── database/\n│   │   ├── migrations.ts    # Schema definitions\n│   │   ├── queries.ts       # DB query functions\n│   │   └── README.md\n│   └── routes/              # Route modules\n│       ├── [route].ts\n│       └── static.ts        # Static file serving\n│   ├── index.ts             # Main entry point\n│   └── README.md\n├── frontend/\n│   ├── components/\n│   │   ├── App.tsx\n│   │   └── [Component].tsx\n│   ├── favicon.svg\n│   ├── index.html           # Main HTML template\n│   ├── index.tsx            # Frontend JS entry point\n│   ├── README.md\n│   └── style.css\n├── README.md\n└── shared/\n    ├── README.md\n    └── utils.ts             # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n  ```ts\n  import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n  \n  // serve all files in frontend/ and shared/\n  app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n  app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n  \n  // For index.html, often you'll want to bootstrap with initial data\n  app.get(\"/\", async c => {\n    let html = await readFile(\"/frontend/index.html\", import.meta.url);\n    \n    // Inject data to avoid extra round-trips\n    const initialData = await fetchInitialData();\n    const dataScript = `<script>\n      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};\n    </script>`;\n    \n    html = html.replace(\"</head>\", `${dataScript}</head>`);\n    return c.html(html);\n  });\n  ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n  ```ts\n  // Unwrap Hono errors to see original error details\n  app.onError((err, c) => {\n    throw err;\n  });\n  ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n   - Val Town runs on Deno in a serverless context, not Node.js\n   - Code in `shared/` must work in both frontend and backend environments\n   - Cannot use `Deno` keyword in shared code\n   - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n   - Limited support for ALTER TABLE operations\n   - Create new tables with updated schemas and copy data when needed\n   - Always run table creation before querying\n\n3. **React Configuration:**\n   - All React dependencies must be pinned to 18.2.0\n   - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n   - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n   - Val Town only supports text files, not binary\n   - Use the provided utilities to read files across branches and forks\n   - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n   - `fetch` handler is the entry point for HTTP vals\n   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[386],{"_105":394,"_97":101,"_162":395,"_164":-5,"_165":147,"_166":396,"_168":169,"_107":397,"_102":33,"_171":398,"_173":399,"_174":22,"_175":400,"_176":401,"_100":402},"75de1642-2054-11f1-9c6e-42dde27851f2","75de170a-2054-11f1-9c6e-42dde27851f2",24,["D",1773568255154],"http","import { Hono } from \"https://esm.sh/hono@4\";\nimport { oauthMiddleware, getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nimport {\n  initDatabase,\n  listEvents, createEvent, updateEvent, deleteEvent,\n  listTodos, createTodo, updateTodo, deleteTodo,\n  listMeals, createMeal, updateMeal, deleteMeal,\n  listGroceries, createGrocery, updateGrocery, deleteGrocery,\n  listReminders, createReminder, updateReminder, deleteReminder,\n  listActivities, createActivity, updateActivity, deleteActivity,\n} from \"./backend/database.ts\";\nimport { getDashboardStats } from \"./backend/dashboard.ts\";\n\nawait initDatabase();\n\ntype Variables = { userEmail: string | null };\n\nconst app = new Hono<{ Variables: Variables }>();\n\napp.onError((err) => { throw err; });\n\n// Auth middleware\napp.use(\"*\", async (c, next) => {\n  if (c.req.path.startsWith(\"/auth/\")) return next();\n\n  let email: string | null = null;\n  try {\n    const session = await getOAuthUserData(c.req.raw);\n    email = session?.user?.email ?? null;\n  } catch {\n    email = null;\n  }\n\n  if (!email && c.req.path.startsWith(\"/api/\")) {\n    return c.json({ error: \"Unauthorized\" }, 401);\n  }\n\n  c.set(\"userEmail\", email);\n  await next();\n});\n\n// Serve frontend & shared files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// User info\napp.get(\"/api/user\", async (c) => {\n  try {\n    const session = await getOAuthUserData(c.req.raw);\n    return c.json({\n      email: session?.user?.email ?? null,\n      username: session?.user?.username ?? null,\n      profileImageUrl: session?.user?.profileImageUrl ?? null,\n    });\n  } catch {\n    return c.json({ email: null, username: null, profileImageUrl: null });\n  }\n});\n\n// Dashboard\napp.get(\"/api/dashboard\", async (c) => {\n  const email = c.get(\"userEmail\") as string;\n  const stats = await getDashboardStats(email);\n  return c.json(stats);\n});\n\n// --- CRUD helper to reduce boilerplate ---\nfunction registerCrud(\n  path: string,\n  listFn: (email: string) => Promise<any[]>,\n  createFn: (email: string, data: any) => Promise<any>,\n  updateFn: (email: string, id: number, data: any) => Promise<any>,\n  deleteFn: (email: string, id: number) => Promise<boolean>,\n) {\n  app.get(`/api/${path}`, async (c) => {\n    const email = c.get(\"userEmail\") as string;\n    return c.json(await listFn(email));\n  });\n\n  app.post(`/api/${path}`, async (c) => {\n    const email = c.get(\"userEmail\") as string;\n    const body = await c.req.json();\n    const item = await createFn(email, body);\n    return c.json(item, 201);\n  });\n\n  app.patch(`/api/${path}/:id`, async (c) => {\n    const email = c.get(\"userEmail\") as string;\n    const id = parseInt(c.req.param(\"id\"));\n    const updates = await c.req.json();\n    const item = await updateFn(email, id, updates);\n    if (!item) return c.json({ error: \"Not found\" }, 404);\n    return c.json(item);\n  });\n\n  app.delete(`/api/${path}/:id`, async (c) => {\n    const email = c.get(\"userEmail\") as string;\n    const id = parseInt(c.req.param(\"id\"));\n    const success = await deleteFn(email, id);\n    if (!success) return c.json({ error: \"Not found\" }, 404);\n    return c.json({ success: true });\n  });\n}\n\nregisterCrud(\"events\", listEvents, createEvent, updateEvent, deleteEvent);\nregisterCrud(\"todos\", listTodos, createTodo, updateTodo, deleteTodo);\nregisterCrud(\"meals\", listMeals, createMeal, updateMeal, deleteMeal);\nregisterCrud(\"grocery\", listGroceries, createGrocery, updateGrocery, deleteGrocery);\nregisterCrud(\"reminders\", listReminders, createReminder, updateReminder, deleteReminder);\nregisterCrud(\"activities\", listActivities, createActivity, updateActivity, deleteActivity);\n\n// Serve HTML\napp.get(\"/\", async (c) => {\n  const html = await readFile(\"/frontend/index.html\", import.meta.url);\n  return c.html(html);\n});\n\nexport default oauthMiddleware(app.fetch);\n","arfan-family-hub",[],[101],{"_105":404,"_97":405,"_162":406,"_164":-5,"_165":147,"_166":407,"_168":169,"_107":408,"_102":33,"_171":335,"_173":409,"_174":22,"_175":-5,"_176":410,"_100":411},"75b45f1e-2054-11f1-9c6e-42dde27851f2","deno.json","75b45fe6-2054-11f1-9c6e-42dde27851f2",18,["D",1773568254875],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": true,\n    \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"include\": [\"deno:/https/esm.town/**/*\"],\n    \"rules\": {\n      \"exclude\": [\"no-explicit-any\"]\n    }\n  },\n  \"node_modules_dir\": false,\n  \"experimental\": {\n    \"unstable-node-globals\": true,\n    \"unstable-temporal\": true,\n    \"unstable-worker-options\": true,\n    \"unstable-sloppy-imports\": true\n  }\n}",[],[405],"files",[159,178,188,198,205,212,221,230,239,247,256,265,274,283,292,301,311,320,329,339,349,356,365,375,384,393,403],"counts",{"_416":33,"_417":202,"_418":33,"_419":420,"_423":424},"pulls","branches","forks","envVars",{"_421":33,"_422":33},"count","emptyCount","connections",{"_421":33,"_425":33},"unfilledCount","contents",[],{"_105":394,"_165":147,"_162":395,"_97":101,"_173":399,"_171":398,"_102":33,"_164":-5,"_107":429,"_166":396,"_175":400,"_100":430},["D",1773568255154],[101],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_95":96,"_97":98,"_99":45,"_102":-7,"_100":101,"_103":439,"_157":444,"_412":553,"_335":554,"_426":557,"_558":-5,"_559":-5,"_560":-5,"_561":-5,"_562":563,"_419":-5},{"_105":106,"_97":98,"_107":440,"_109":-5,"_110":22,"_111":112,"_113":74,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":-5,"_120":33,"_16":121,"_122":123,"_124":125,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":441,"_139":442,"_144":443,"_156":22},["D",1773567842966],{"_95":96,"_137":138},{"_95":96,"_141":138,"_14":115,"_142":143},{"_102":146,"_97":45,"_105":147,"_148":106,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":98,"_155":96},[445,457,525,537,541,545,549],{"_105":160,"_97":161,"_162":163,"_164":-5,"_165":147,"_166":167,"_168":169,"_107":446,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":447,"_100":456},["D",1773568254036],[448,452],{"_105":179,"_97":180,"_162":181,"_164":163,"_165":147,"_166":182,"_168":169,"_107":449,"_102":33,"_171":184,"_173":185,"_174":22,"_175":-5,"_176":450,"_100":451},["D",1773568254941],[],[161,180],{"_105":189,"_97":190,"_162":191,"_164":163,"_165":147,"_166":192,"_168":169,"_107":453,"_102":33,"_171":184,"_173":194,"_174":22,"_175":-5,"_176":454,"_100":455},["D",1773568254961],[],[161,190],[161],{"_105":199,"_97":200,"_162":201,"_164":-5,"_165":147,"_166":202,"_168":169,"_107":458,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":459,"_100":524},["D",1773568253909],[460,508,512,516,520],{"_105":206,"_97":207,"_162":208,"_164":201,"_165":147,"_166":209,"_168":169,"_107":461,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":462,"_100":507},["D",1773568254245],[463,467,471,475,479,483,487,491,495,499,503],{"_105":213,"_97":214,"_162":215,"_164":208,"_165":147,"_166":216,"_168":169,"_107":464,"_102":33,"_171":184,"_173":218,"_174":22,"_175":-5,"_176":465,"_100":466},["D",1773568254681],[],[200,207,214],{"_105":222,"_97":223,"_162":224,"_164":208,"_165":147,"_166":225,"_168":169,"_107":468,"_102":33,"_171":184,"_173":227,"_174":22,"_175":-5,"_176":469,"_100":470},["D",1773568254842],[],[200,207,223],{"_105":231,"_97":232,"_162":233,"_164":208,"_165":147,"_166":234,"_168":169,"_107":472,"_102":33,"_171":184,"_173":236,"_174":22,"_175":-5,"_176":473,"_100":474},["D",1773568254653],[],[200,207,232],{"_105":240,"_97":241,"_162":242,"_164":208,"_165":147,"_166":146,"_168":169,"_107":476,"_102":33,"_171":184,"_173":244,"_174":22,"_175":-5,"_176":477,"_100":478},["D",1773568254513],[],[200,207,241],{"_105":248,"_97":249,"_162":250,"_164":208,"_165":147,"_166":251,"_168":169,"_107":480,"_102":33,"_171":184,"_173":253,"_174":22,"_175":-5,"_176":481,"_100":482},["D",1773568254821],[],[200,207,249],{"_105":257,"_97":258,"_162":259,"_164":208,"_165":147,"_166":260,"_168":169,"_107":484,"_102":33,"_171":184,"_173":262,"_174":22,"_175":-5,"_176":485,"_100":486},["D",1773568254756],[],[200,207,258],{"_105":266,"_97":267,"_162":268,"_164":208,"_165":147,"_166":269,"_168":169,"_107":488,"_102":33,"_171":184,"_173":271,"_174":22,"_175":-5,"_176":489,"_100":490},["D",1773568254460],[],[200,207,267],{"_105":275,"_97":276,"_162":277,"_164":208,"_165":147,"_166":278,"_168":169,"_107":492,"_102":33,"_171":184,"_173":280,"_174":22,"_175":-5,"_176":493,"_100":494},["D",1773568254560],[],[200,207,276],{"_105":284,"_97":285,"_162":286,"_164":208,"_165":147,"_166":287,"_168":169,"_107":496,"_102":33,"_171":184,"_173":289,"_174":22,"_175":-5,"_176":497,"_100":498},["D",1773568254540],[],[200,207,285],{"_105":293,"_97":294,"_162":295,"_164":208,"_165":147,"_166":296,"_168":169,"_107":500,"_102":33,"_171":184,"_173":298,"_174":22,"_175":-5,"_176":501,"_100":502},["D",1773568254709],[],[200,207,294],{"_105":302,"_97":303,"_162":304,"_164":208,"_165":147,"_166":305,"_168":169,"_107":504,"_102":33,"_171":184,"_173":307,"_174":22,"_175":-5,"_176":505,"_100":506},["D",1773568254449],[],[200,207,303],[200,207],{"_105":312,"_97":313,"_162":314,"_164":201,"_165":147,"_166":315,"_168":169,"_107":509,"_102":33,"_171":184,"_173":317,"_174":22,"_175":-5,"_176":510,"_100":511},["D",1773568254340],[],[200,313],{"_105":321,"_97":322,"_162":323,"_164":201,"_165":147,"_166":324,"_168":169,"_107":513,"_102":33,"_171":184,"_173":326,"_174":22,"_175":-5,"_176":514,"_100":515},["D",1773568254416],[],[200,322],{"_105":330,"_97":331,"_162":332,"_164":201,"_165":147,"_166":333,"_168":169,"_107":517,"_102":33,"_171":335,"_173":336,"_174":22,"_175":-5,"_176":518,"_100":519},["D",1773568254386],[],[200,331],{"_105":340,"_97":341,"_162":342,"_164":201,"_165":147,"_166":343,"_168":169,"_107":521,"_102":33,"_171":184,"_173":345,"_174":22,"_175":-5,"_176":522,"_100":523},["D",1773568254344],[],[200,341],[200],{"_105":350,"_97":351,"_162":352,"_164":-5,"_165":147,"_166":353,"_168":169,"_107":526,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":527,"_100":536},["D",1773568254136],[528,532],{"_105":357,"_97":358,"_162":359,"_164":352,"_165":147,"_166":360,"_168":169,"_107":529,"_102":33,"_171":184,"_173":362,"_174":22,"_175":-5,"_176":530,"_100":531},["D",1773568255102],[],[351,358],{"_105":366,"_97":367,"_162":368,"_164":352,"_165":147,"_166":369,"_168":169,"_107":533,"_102":33,"_171":184,"_173":371,"_174":22,"_175":-5,"_176":534,"_100":535},["D",1773568255047],[],[351,367],[351],{"_105":376,"_97":377,"_162":378,"_164":-5,"_165":147,"_166":379,"_168":169,"_107":538,"_102":33,"_171":335,"_173":381,"_174":22,"_175":-5,"_176":539,"_100":540},["D",1773568255208],[],[377],{"_105":385,"_97":386,"_162":387,"_164":-5,"_165":147,"_166":388,"_168":169,"_107":542,"_102":33,"_171":335,"_173":390,"_174":22,"_175":-5,"_176":543,"_100":544},["D",1773568255113],[],[386],{"_105":394,"_97":101,"_162":395,"_164":-5,"_165":147,"_166":396,"_168":169,"_107":546,"_102":33,"_171":398,"_173":399,"_174":22,"_175":400,"_176":547,"_100":548},["D",1773568255154],[],[101],{"_105":404,"_97":405,"_162":406,"_164":-5,"_165":147,"_166":407,"_168":169,"_107":550,"_102":33,"_171":335,"_173":409,"_174":22,"_175":-5,"_176":551,"_100":552},["D",1773568254875],[],[405],[445,448,452,457,460,463,467,471,475,479,483,487,491,495,499,503,508,512,516,520,525,528,532,537,541,545,549],{"_105":394,"_165":147,"_162":395,"_97":101,"_173":399,"_171":398,"_102":33,"_164":-5,"_107":555,"_166":396,"_175":400,"_100":556},["D",1773568255154],[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]
</article></body></html>