[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_262":263,"_264":265},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":53,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",100,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","harbour.tsx","latestPath","fileId","9910b956-554e-11f1-b7b0-ee650bb23af1","name","fileType","script","content","// harbour.jsx — Harbour Today screen\n\nconst { useState, useMemo } = React;\n\n// ─────────────────────────────────────────────────────────────\n// Theme tokens\n// ─────────────────────────────────────────────────────────────\nconst PALETTES = {\n amber: { hue: 50, name: \"Amber\" },\n oxblood: { hue: 25, name: \"Oxblood\" },\n forest: { hue: 160, name: \"Forest\" },\n ink: { hue: 60, name: \"Ink only\", mono: true },\n};\n\nconst TYPE_KITS = {\n editorial: {\n name: \"Editorial\",\n serif: '\"Newsreader\", \"Source Serif Pro\", Georgia, serif',\n sans: '\"Geist\", system-ui, sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, monospace',\n serifFeatures: '\"ss01\" 1',\n bigWeight: 400, bigStretch: 1, bigLetter: \"-0.02em\",\n },\n classic: {\n name: \"Classic\",\n serif: '\"EB Garamond\", \"Garamond\", Georgia, serif',\n sans: '\"Hanken Grotesk\", system-ui, sans-serif',\n mono: '\"IBM Plex Mono\", ui-monospace, monospace',\n serifFeatures: \"normal\",\n bigWeight: 500, bigStretch: 1, bigLetter: \"-0.015em\",\n },\n};\n\nfunction buildTheme({ dark, palette, kit }) {\n const p = PALETTES[palette];\n const t = TYPE_KITS[kit];\n const inkOnly = !!p.mono;\n if (dark) {\n return {\n ...t,\n bg: \"oklch(15% 0.012 60)\", bgDeep: \"oklch(12% 0.012 60)\", bgInset: \"oklch(18% 0.012 60)\",\n ink: \"oklch(94% 0.008 80)\", muted: \"oklch(66% 0.012 80)\", faint: \"oklch(42% 0.012 60)\",\n rule: \"oklch(28% 0.012 60)\", ruleSoft: \"oklch(23% 0.012 60)\",\n accent: inkOnly ? \"oklch(94% 0.008 80)\" : `oklch(72% 0.13 ${p.hue})`,\n accentSoft: inkOnly ? \"oklch(40% 0.008 80)\" : `oklch(40% 0.10 ${p.hue})`,\n dark: true, inkOnly,\n };\n }\n return {\n ...t,\n bg: \"oklch(96.5% 0.012 80)\", bgDeep: \"oklch(93% 0.014 80)\", bgInset: \"oklch(98% 0.008 80)\",\n ink: \"oklch(20% 0.015 60)\", muted: \"oklch(46% 0.013 60)\", faint: \"oklch(74% 0.012 60)\",\n rule: \"oklch(84% 0.014 80)\", ruleSoft: \"oklch(89% 0.012 80)\",\n accent: inkOnly ? \"oklch(28% 0.015 60)\" : `oklch(50% 0.14 ${p.hue})`,\n accentSoft: inkOnly ? \"oklch(60% 0.015 60)\" : `oklch(70% 0.10 ${p.hue})`,\n dark: false, inkOnly,\n };\n}\n\n// ─────────────────────────────────────────────────────────────\n// Atoms\n// ─────────────────────────────────────────────────────────────\nfunction Smallcaps({ children, style, color }) {\n return (\n

\n {children}\n

\n );\n}\n\nfunction Mono({ children, style }) {\n return {children};\n}\n\nfunction Rule({ color, style }) {\n return

;\n}\n\n// Shared fetch wrapper — throws on non-2xx so a failed save can't\n// silently look like success.\nasync function api(url, opts) {\n const res = await fetch(url, opts);\n if (!res.ok) throw new Error(`Save failed (${res.status})`);\n const ct = res.headers.get(\"content-type\") || \"\";\n return ct.includes(\"application/json\") ? res.json() : null;\n}\n\nfunction jsonOpts(method, body) {\n return { method, headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(body) };\n}\n\nfunction TallyRow({ days, accent, faint, gap = 7, h = 22, w = 3, onToggleToday, todayBorder }) {\n return (\n

\n {days.map((on, i) => {\n const isToday = onToggleToday && i === days.length - 1;\n const cellStyle = { width: w, height: h, borderRadius: 0.5, background: on ? accent : \"transparent\", border: on ? \"none\" : `1px solid ${isToday ? (todayBorder || faint) : faint}`, boxSizing: \"border-box\" };\n return isToday ? (\n \n ) : (\n

\n );\n })}\n

\n );\n}\n\nfunction HabitHeatmap({ days, accent, faint, todayBorder, onToggleToday }) {\n return (\n

\n {days.map((on, i) => {\n const isToday = i === days.length - 1;\n const cellStyle = { width: \"100%\", aspectRatio: \"1 / 1\", borderRadius: 1, background: on ? accent : \"transparent\", border: on ? \"none\" : `1px solid ${isToday ? (todayBorder || faint) : faint}`, boxSizing: \"border-box\" };\n return isToday ? (\n \n ) : (\n

\n );\n })}\n

\n );\n}\n\nfunction EnergyMeter({ value, max = 5, t, onChange }) {\n return (\n

\n {Array.from({ length: max }).map((_, i) => (\n

\n );\n}\n\nfunction Tick({ checked, onClick, t, size = 18 }) {\n return (\n \n );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Sections\n// ─────────────────────────────────────────────────────────────\nfunction Masthead({ t }) {\n const now = new Date();\n const weekday = now.toLocaleDateString(\"en-US\", { weekday: \"long\" });\n const md = now.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n const h = now.getHours();\n const session = h < 12 ? \"morning\" : h < 17 ? \"afternoon\" : \"evening\";\n return (\n

\n {weekday} · {session}\n {md}\n

\n Harbour\n

\n A quiet log of small, good things.\n

\n );\n}\n\nfunction OneThing({ t, oneThing, weekStart, date, onComplete, onSet }) {\n const [settingNew, setSettingNew] = useState(!oneThing);\n const [newTitle, setNewTitle] = useState(\"\");\n const [newCategory, setNewCategory] = useState(\"\");\n const [suggestions, setSuggestions] = useState([]);\n const [loadingSugg, setLoadingSugg] = useState(false);\n\n React.useEffect(() => { if (!oneThing) setSettingNew(true); }, [oneThing]);\n\n // Load Notion Home List whenever the set-form opens\n React.useEffect(() => {\n if (!settingNew) return;\n setLoadingSugg(true);\n fetch(\"/api/notion/home-list\")\n .then((r) => r.json())\n .then((items) => setSuggestions(Array.isArray(items) ? items : []))\n .catch(() => setSuggestions([]))\n .finally(() => setLoadingSugg(false));\n }, [settingNew]);\n\n const handleSet = async () => {\n if (!newTitle.trim()) return;\n await onSet(newTitle.trim(), newCategory.trim() || undefined);\n setNewTitle(\"\"); setNewCategory(\"\"); setSettingNew(false);\n };\n\n const pickSuggestion = (s) => {\n setNewTitle(s.title);\n setNewCategory(s.category);\n };\n\n const fieldStyle = (size = 22) => ({\n width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n borderBottom: `1px solid ${t.rule}`, padding: \"6px 0 10px\", color: t.ink,\n fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.3, outline: \"none\", resize: \"none\",\n });\n\n if (settingNew) {\n return (\n

\n \n {oneThing ? \"New · one thing\" : \"This week · one thing\"}\n \n\n {/* Notion Home List suggestions — dropdown */}\n {loadingSugg && (\n

\n Loading from Notion…\n

\n )}\n {!loadingSugg && suggestions.length > 0 && (\n

\n From your Home List\n s.title === newTitle) ? newTitle : \"\"}\n onChange={(e) => {\n const item = suggestions.find((s) => s.title === e.target.value);\n if (item) pickSuggestion(item);\n }}\n style={{\n width: \"100%\", boxSizing: \"border-box\",\n background: t.bgInset, border: `1px solid ${t.rule}`,\n color: t.ink, fontFamily: t.sans, fontSize: 13.5,\n padding: \"10px 12px\", cursor: \"pointer\", outline: \"none\", marginBottom: 18,\n }}\n >\n \n {[...new Set(suggestions.map((s) => s.category))].map((cat) => (\n \n {suggestions.filter((s) => s.category === cat).map((s, i) => (\n \n ))}\n \n ))}\n \n

\n )}\n\n

setNewTitle(e.target.value)}\n          placeholder=\"What's the one thing this week?\" rows={2} style={fieldStyle(22)} />\n        <input value={newCategory} onChange={(e) => setNewCategory(e.target.value)}\n          placeholder=\"Category (optional)\"\n          style={{ ...fieldStyle(13), borderBottomColor: t.ruleSoft, marginTop: 12, color: t.muted }} />\n        <div style={{ display: \"flex\", gap: 16, marginTop: 18 }}>\n          <button type=\"button\" onClick={handleSet}\n            style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, letterSpacing: \"0.02em\", padding: \"10px 20px\", cursor: \"pointer\" }}>\n            Set one thing\n          </button>\n          {oneThing && (\n            <button type=\"button\" onClick={() => setSettingNew(false)}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n              cancel\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  if (!oneThing) return null;\n\n  const start  = new Date(weekStart + \"T00:00:00\");\n  const today  = new Date(date + \"T00:00:00\");\n  const dayNum = Math.min(Math.floor((today - start) / 86400000) + 1, 7);\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 14 }}>\n        <Smallcaps color={t.muted}>This week · one thing</Smallcaps>\n        <Smallcaps color={t.faint}><Mono>day {dayNum}/7</Mono></Smallcaps>\n      </div>\n      <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 26, lineHeight: 1.18, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\" }}>\n        {oneThing.title}\n      </div>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, marginTop: 16 }}>\n        {[0,1,2,3,4,5,6].map((i) => (\n          <div key={i} style={{ flex: 1, height: 2, background: i < dayNum ? t.accent : t.rule }} />\n        ))}\n      </div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 8 }}>\n        <span style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted }}>{oneThing.category || \"\"}</span>\n        <div style={{ display: \"flex\", gap: 14 }}>\n          <button type=\"button\" onClick={onComplete}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n            mark complete\n          </button>\n          <button type=\"button\" onClick={() => setSettingNew(true)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n            replace\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction HowWasToday({ t, energy, setEnergy, note, setNote, gratitude, setGratitude, letGo, setLetGo, expanded, setExpanded, onSave, saved }) {\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontWeight: 400, fontSize: 24, color: t.ink, letterSpacing: \"-0.005em\" }}>\n          How was today?\n        </div>\n        <Smallcaps color={t.faint}><Mono>30 sec</Mono></Smallcaps>\n      </div>\n\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 8 }}>\n        <Smallcaps color={t.muted}>Energy</Smallcaps>\n        <span style={{ fontFamily: t.mono, fontSize: 13, color: t.ink, letterSpacing: \"0.04em\" }}>\n          {energy}<span style={{ color: t.faint }}> / 5</span>\n        </span>\n      </div>\n      <EnergyMeter value={energy} t={t} onChange={setEnergy} />\n\n      <div style={{ marginTop: 22 }}>\n        <Smallcaps color={t.muted} style={{ marginBottom: 10 }}>What mattered today</Smallcaps>\n        <textarea value={note} onChange={(e) => setNote(e.target.value)} rows={2}\n          style={{ width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\", borderBottom: `1px solid ${t.rule}`, padding: \"6px 0 10px\", color: t.ink, fontFamily: t.serif, fontStyle: \"italic\", fontSize: 17, lineHeight: 1.45, fontWeight: 400, outline: \"none\", resize: \"none\" }} />\n      </div>\n\n      {expanded && (\n        <div style={{ marginTop: 18, display: \"flex\", flexDirection: \"column\", gap: 14 }}>\n          <Field label=\"One thing I'm grateful for\" t={t} placeholder=\"A small good thing…\"\n            value={gratitude} onChange={(e) => setGratitude(e.target.value)} />\n          <Field label=\"One thing to let go of\" t={t} placeholder=\"Quietly, without judgment…\"\n            value={letGo} onChange={(e) => setLetGo(e.target.value)} />\n        </div>\n      )}\n\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 18, marginTop: 22 }}>\n        <button type=\"button\" onClick={onSave}\n          style={{ appearance: \"none\", background: saved ? \"transparent\" : t.ink, color: saved ? t.muted : t.bg, border: saved ? `1px solid ${t.rule}` : \"none\", fontFamily: t.sans, fontSize: 13.5, fontWeight: 500, letterSpacing: \"0.02em\", padding: \"12px 24px\", cursor: \"pointer\", transition: \"all 160ms\" }}>\n          {saved ? \"✓  Saved\" : \"Log the day\"}\n        </button>\n        <button type=\"button\" onClick={() => setExpanded((x) => !x)}\n          style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13.5, letterSpacing: \"0.02em\", cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n          {expanded ? \"fewer prompts\" : \"two more prompts\"}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction Field({ label, placeholder, t, value, onChange }) {\n  return (\n    <div>\n      <Smallcaps color={t.muted} style={{ marginBottom: 6 }}>{label}</Smallcaps>\n      <input placeholder={placeholder} value={value ?? \"\"} onChange={onChange}\n        style={{ width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\", borderBottom: `1px solid ${t.ruleSoft}`, padding: \"4px 0 8px\", color: t.ink, fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, lineHeight: 1.45, outline: \"none\" }} />\n    </div>\n  );\n}\n\nfunction formatTime(iso) {\n  if (!iso) return \"\";\n  const d = new Date(iso);\n  if (isNaN(d.getTime())) return \"\";\n  let h = d.getHours();\n  const m = d.getMinutes();\n  const ampm = h >= 12 ? \"pm\" : \"am\";\n  h = h % 12 || 12;\n  return `${h}:${String(m).padStart(2, \"0\")} ${ampm}`;\n}\n\nfunction Evidence({ t, items, onAdd, onDelete }) {\n  const [showAdd, setShowAdd]   = useState(false);\n  const [editMode, setEditMode] = useState(false);\n  const [form, setForm]         = useState({ title: \"\", detail: \"\" });\n\n  const fieldStyle = (size = 16, extra = {}) => ({\n    width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n    borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n    fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n  });\n\n  const submitAdd = () => {\n    if (!form.title.trim()) return;\n    onAdd({ title: form.title.trim(), detail: form.detail.trim() || undefined });\n    setForm({ title: \"\", detail: \"\" });\n    setShowAdd(false);\n  };\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 14 }}>\n        <Smallcaps color={t.muted}>Today · evidence</Smallcaps>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n          {items.length > 0 && <Smallcaps color={t.faint}><Mono>{items.length} {items.length === 1 ? \"entry\" : \"entries\"}</Mono></Smallcaps>}\n          {items.length > 0 && (\n            <button type=\"button\" onClick={() => setEditMode((x) => !x)}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n              {editMode ? \"done\" : \"edit\"}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {items.length === 0 && !showAdd && (\n        <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5, marginBottom: 4 }}>\n          Nothing logged yet today.\n        </div>\n      )}\n\n      <div>\n        {items.map((it, i) => (\n          <div key={it.id} style={{ display: \"flex\", alignItems: \"baseline\", gap: 12, padding: \"12px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n            <span style={{ color: t.accent, fontFamily: t.mono, fontSize: 11, width: 10, flexShrink: 0 }}>✓</span>\n            <span style={{ flex: 1, fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, fontWeight: 400, letterSpacing: \"-0.005em\" }}>\n              {it.title}\n              {it.detail && <span style={{ color: t.muted, fontStyle: \"italic\" }}> · {it.detail}</span>}\n            </span>\n            {editMode ? (\n              <button type=\"button\" onClick={() => onDelete(it.id)} aria-label=\"Delete entry\"\n                style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 18, lineHeight: 1, cursor: \"pointer\", padding: \"0 2px\", flexShrink: 0 }}>\n                ×\n              </button>\n            ) : (\n              <Mono style={{ fontSize: 11, color: t.muted, letterSpacing: \"0.04em\" }}>{formatTime(it.logged_at)}</Mono>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {showAdd ? (\n        <div style={{ paddingTop: 16, marginTop: items.length ? 4 : 0, borderTop: items.length ? `1px solid ${t.rule}` : \"none\", display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n          <input autoFocus value={form.title}\n            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}\n            onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n            placeholder=\"What did you do?\" style={fieldStyle(16)} />\n          <input value={form.detail}\n            onChange={(e) => setForm((f) => ({ ...f, detail: e.target.value }))}\n            placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n          <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n            <button type=\"button\" onClick={submitAdd}\n              style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n              Add\n            </button>\n            <button type=\"button\" onClick={() => { setShowAdd(false); setForm({ title: \"\", detail: \"\" }); }}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n              cancel\n            </button>\n          </div>\n        </div>\n      ) : (\n        <button type=\"button\" onClick={() => setShowAdd(true)}\n          style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"14px 0 0\" }}>\n          + Add evidence\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Checklist — with inline editor\n// ─────────────────────────────────────────────────────────────\nfunction Checklist({ t, list, toggle, tab, setTab, counts, editMode, setEditMode, onAdd, onUpdate, onDelete }) {\n  const [editingId, setEditingId] = useState(null);\n  const [editVals, setEditVals]   = useState({});\n  const [showAdd, setShowAdd]     = useState(false);\n  const [addForm, setAddForm]     = useState({ section: \"\", title: \"\", detail: \"\" });\n  // Enter commits AND fires the input's onBlur — this ref stops the\n  // second identical PUT.\n  const commitGuard = React.useRef(false);\n\n  const sections = useMemo(() => [...new Set(list.map((i) => i.section))], [list]);\n\n  const groups = useMemo(() => {\n    const map = new Map();\n    list.forEach((it) => {\n      if (!map.has(it.section)) map.set(it.section, []);\n      map.get(it.section).push(it);\n    });\n    return [...map.entries()];\n  }, [list]);\n\n  const remaining = list.filter((x) => !x.done).length;\n\n  const startEdit = (item) => {\n    commitGuard.current = false;\n    setEditingId(item.id);\n    setEditVals({ title: item.title, detail: item.detail || \"\", section: item.section });\n  };\n\n  const commitEdit = (id) => {\n    if (commitGuard.current) return;\n    commitGuard.current = true;\n    if (editVals.title?.trim()) {\n      onUpdate(id, {\n        title: editVals.title.trim(),\n        detail: editVals.detail?.trim() || null,\n        section: editVals.section?.trim() || \"General\",\n      });\n    }\n    setEditingId(null);\n  };\n\n  const submitAdd = () => {\n    if (!addForm.title.trim()) return;\n    onAdd({ session: tab, section: addForm.section.trim() || \"General\", title: addForm.title.trim(), detail: addForm.detail.trim() || undefined, sort_order: list.length });\n    setAddForm((f) => ({ ...f, title: \"\", detail: \"\" }));\n    setShowAdd(false);\n  };\n\n  const fieldStyle = (size = 16, extra = {}) => ({\n    width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n    borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n    fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n  });\n\n  const linkBtn = (onClick, label, color) => (\n    <button type=\"button\" onClick={onClick}\n      style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: color || t.muted, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n      {label}\n    </button>\n  );\n\n  const tabsRow = (\n    <div style={{ display: \"flex\", gap: 28, marginBottom: 24 }}>\n      {[{ id: \"morning\", label: \"Morning\", count: counts.morning }, { id: \"evening\", label: \"Evening\", count: counts.evening }].map((item) => {\n        const active = tab === item.id;\n        return (\n          <button key={item.id} type=\"button\" onClick={() => setTab(item.id)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", padding: \"6px 0 8px\", cursor: \"pointer\", borderBottom: active ? `1.5px solid ${t.ink}` : `1.5px solid transparent`, color: active ? t.ink : t.muted, display: \"flex\", alignItems: \"baseline\", gap: 8 }}>\n            <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 18, fontWeight: 400, letterSpacing: \"-0.005em\" }}>{item.label}</span>\n            {!editMode && <Mono style={{ fontSize: 11, color: active ? t.muted : t.faint }}>{item.count}</Mono>}\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  return (\n    <div>\n      {/* Header */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 16 }}>\n        <Smallcaps color={t.muted}>Checklist</Smallcaps>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n          {!editMode && list.length > 0 && (\n            <Smallcaps color={t.faint}><Mono>{remaining} to go</Mono></Smallcaps>\n          )}\n          <button type=\"button\"\n            onClick={() => { setEditMode(!editMode); setEditingId(null); setShowAdd(false); }}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n            {editMode ? \"done\" : \"edit\"}\n          </button>\n        </div>\n      </div>\n\n      {tabsRow}\n\n      {/* ── Normal mode ── */}\n      {!editMode && list.length === 0 && (\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5 }}>\n            No {tab} items yet.\n          </span>\n          <button type=\"button\" onClick={() => setEditMode(true)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n            Add items →\n          </button>\n        </div>\n      )}\n\n      {!editMode && list.length > 0 && groups.map(([section, items], gi) => (\n        <div key={section} style={{ marginBottom: gi === groups.length - 1 ? 0 : 28 }}>\n          <Smallcaps color={t.faint} style={{ marginBottom: 12 }}>{section}</Smallcaps>\n          <div>\n            {items.map((it, i) => (\n              <div key={it.id} style={{ display: \"flex\", alignItems: \"flex-start\", gap: 14, padding: \"11px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n                <div style={{ paddingTop: 2 }}>\n                  <Tick checked={it.done} onClick={() => toggle(it.id)} t={t} />\n                </div>\n                <div style={{ flex: 1 }}>\n                  <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, fontWeight: 400, letterSpacing: \"-0.005em\", color: it.done ? t.faint : t.ink, textDecoration: it.done ? \"line-through\" : \"none\", textDecorationThickness: \"0.5px\" }}>\n                    {it.title}\n                  </div>\n                  {it.detail && (\n                    <div style={{ fontFamily: t.sans, fontSize: 12.5, color: it.done ? t.faint : t.muted, marginTop: 3, letterSpacing: \"0.005em\" }}>\n                      {it.detail}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {/* ── Edit mode ── */}\n      {editMode && (\n        <div>\n          {/* Existing items */}\n          {groups.map(([section, items], gi) => (\n            <div key={section} style={{ marginBottom: 24 }}>\n              <Smallcaps color={t.faint} style={{ marginBottom: 10 }}>{section}</Smallcaps>\n              {items.map((it, i) => (\n                <div key={it.id} style={{ borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n                  {editingId === it.id ? (\n                    <div style={{ padding: \"12px 0\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n                      <input autoFocus value={editVals.title}\n                        onChange={(e) => setEditVals((v) => ({ ...v, title: e.target.value }))}\n                        onBlur={() => commitEdit(it.id)}\n                        onKeyDown={(e) => { if (e.key === \"Enter\") { e.preventDefault(); commitEdit(it.id); } if (e.key === \"Escape\") setEditingId(null); }}\n                        placeholder=\"Title\" style={fieldStyle(16)} />\n                      <input value={editVals.detail}\n                        onChange={(e) => setEditVals((v) => ({ ...v, detail: e.target.value }))}\n                        onBlur={() => commitEdit(it.id)}\n                        placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n                      <input value={editVals.section} list=\"hb-section-opts\"\n                        onChange={(e) => setEditVals((v) => ({ ...v, section: e.target.value }))}\n                        onBlur={() => commitEdit(it.id)}\n                        placeholder=\"Section\" style={fieldStyle(11, { color: t.muted, borderBottomColor: t.ruleSoft, letterSpacing: \"0.06em\", textTransform: \"uppercase\" })} />\n                    </div>\n                  ) : (\n                    <div style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"10px 0\" }}>\n                      <div style={{ flex: 1, cursor: \"pointer\" }} onClick={() => startEdit(it)}>\n                        <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{it.title}</div>\n                        {it.detail && <div style={{ fontFamily: t.sans, fontSize: 12.5, color: t.muted, marginTop: 3 }}>{it.detail}</div>}\n                        <div style={{ fontFamily: t.sans, fontSize: 10, color: t.faint, marginTop: 4, letterSpacing: \"0.06em\", textTransform: \"uppercase\" }}>{it.section}</div>\n                      </div>\n                      <button type=\"button\" onClick={() => onDelete(it.id)} aria-label=\"Delete item\"\n                        style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 20, lineHeight: 1, cursor: \"pointer\", padding: \"2px 4px\", flexShrink: 0 }}>\n                        ×\n                      </button>\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n\n          {list.length === 0 && (\n            <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, marginBottom: 20 }}>\n              No {tab} items yet.\n            </div>\n          )}\n\n          {/* Section autocomplete */}\n          <datalist id=\"hb-section-opts\">\n            {sections.map((s) => <option key={s} value={s} />)}\n          </datalist>\n\n          {/* Add item form */}\n          {showAdd ? (\n            <div style={{ paddingTop: 16, borderTop: `1px solid ${t.rule}`, display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n              <input autoFocus value={addForm.title}\n                onChange={(e) => setAddForm((f) => ({ ...f, title: e.target.value }))}\n                onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n                placeholder=\"Title\" style={fieldStyle(16)} />\n              <input value={addForm.detail}\n                onChange={(e) => setAddForm((f) => ({ ...f, detail: e.target.value }))}\n                placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n              <input value={addForm.section} list=\"hb-section-opts\"\n                onChange={(e) => setAddForm((f) => ({ ...f, section: e.target.value }))}\n                placeholder=\"Section\" style={fieldStyle(11, { color: t.muted, borderBottomColor: t.ruleSoft, letterSpacing: \"0.06em\", textTransform: \"uppercase\" })} />\n              <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n                <button type=\"button\" onClick={submitAdd}\n                  style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n                  Add\n                </button>\n                {linkBtn(() => setShowAdd(false), \"cancel\")}\n              </div>\n            </div>\n          ) : (\n            <button type=\"button\"\n              onClick={() => { setShowAdd(true); setAddForm({ section: sections[sections.length - 1] || \"\", title: \"\", detail: \"\" }); }}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"12px 0 0\" }}>\n              + Add item\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Habits({ t, habits, editMode, setEditMode, onToggleToday, onAdd, onUpdate, onDelete, wide }) {\n  const [editingId, setEditingId] = useState(null);\n  const [editVals, setEditVals]   = useState({});\n  const [showAdd, setShowAdd]     = useState(false);\n  const [addForm, setAddForm]     = useState({ name: \"\", note: \"\" });\n  // Enter commits AND fires the input's onBlur — this ref stops the\n  // second identical PUT.\n  const commitGuard = React.useRef(false);\n\n  const fieldStyle = (size = 16, extra = {}) => ({\n    width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n    borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n    fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n  });\n\n  const startEdit = (h) => {\n    commitGuard.current = false;\n    setEditingId(h.id);\n    setEditVals({ name: h.name, note: h.note || \"\" });\n  };\n\n  const commitEdit = (id) => {\n    if (commitGuard.current) return;\n    commitGuard.current = true;\n    if (editVals.name?.trim()) {\n      onUpdate(id, { name: editVals.name.trim(), note: editVals.note?.trim() || null });\n    }\n    setEditingId(null);\n  };\n\n  const submitAdd = () => {\n    if (!addForm.name.trim()) return;\n    onAdd({ name: addForm.name.trim(), note: addForm.note.trim() || undefined, sort_order: habits.length });\n    setAddForm({ name: \"\", note: \"\" });\n    setShowAdd(false);\n  };\n\n  return (\n    <div>\n      {/* Header */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>Habits</Smallcaps>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n          {!editMode && habits.length > 0 && <Smallcaps color={t.faint}><Mono>{wide ? \"last 4 weeks\" : \"last 7 days\"}</Mono></Smallcaps>}\n          <button type=\"button\"\n            onClick={() => { setEditMode(!editMode); setEditingId(null); setShowAdd(false); }}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n            {editMode ? \"done\" : \"edit\"}\n          </button>\n        </div>\n      </div>\n\n      {/* ── Normal mode ── */}\n      {!editMode && habits.length === 0 && (\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5 }}>\n            No habits yet.\n          </span>\n          <button type=\"button\" onClick={() => setEditMode(true)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n            Add habits →\n          </button>\n        </div>\n      )}\n\n      {!editMode && habits.length > 0 && (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 22 }}>\n          {habits.map((h) => {\n            const hist = h.history || h.days;\n            return wide ? (\n              <div key={h.id} style={{ paddingTop: 18, borderTop: `1px solid ${t.ruleSoft}` }}>\n                <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 14 }}>\n                  <div>\n                    <div style={{ fontFamily: t.serif, fontSize: 22, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.1 }}>{h.name}</div>\n                    {h.note && <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 14, color: t.muted, marginTop: 4, lineHeight: 1.4 }}>{h.note}</div>}\n                  </div>\n                  <Mono style={{ fontSize: 10.5, color: t.faint, letterSpacing: \"0.08em\", flexShrink: 0, marginLeft: 12 }}>{hist.filter(Boolean).length} of {hist.length}</Mono>\n                </div>\n                <HabitHeatmap days={hist} accent={t.accent} faint={t.rule} todayBorder={t.accentSoft} onToggleToday={() => onToggleToday(h.id)} />\n              </div>\n            ) : (\n              <div key={h.id} style={{ display: \"grid\", gridTemplateColumns: \"1fr auto\", columnGap: 18, rowGap: 10, paddingTop: 18, borderTop: `1px solid ${t.ruleSoft}` }}>\n                <div>\n                  <div style={{ fontFamily: t.serif, fontSize: 22, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.1 }}>{h.name}</div>\n                  {h.note && <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 14, color: t.muted, marginTop: 4, lineHeight: 1.4 }}>{h.note}</div>}\n                </div>\n                <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"flex-end\", gap: 8 }}>\n                  <TallyRow days={h.days} accent={t.accent} faint={t.rule} todayBorder={t.accentSoft} onToggleToday={() => onToggleToday(h.id)} />\n                  <Mono style={{ fontSize: 10.5, color: t.faint, letterSpacing: \"0.08em\" }}>{h.days.filter(Boolean).length} of 7</Mono>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* ── Edit mode ── */}\n      {editMode && (\n        <div>\n          {habits.map((h, i) => (\n            <div key={h.id} style={{ borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n              {editingId === h.id ? (\n                <div style={{ padding: \"12px 0\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n                  <input autoFocus value={editVals.name}\n                    onChange={(e) => setEditVals((v) => ({ ...v, name: e.target.value }))}\n                    onBlur={() => commitEdit(h.id)}\n                    onKeyDown={(e) => { if (e.key === \"Enter\") { e.preventDefault(); commitEdit(h.id); } if (e.key === \"Escape\") setEditingId(null); }}\n                    placeholder=\"Habit name\" style={fieldStyle(17)} />\n                  <input value={editVals.note}\n                    onChange={(e) => setEditVals((v) => ({ ...v, note: e.target.value }))}\n                    onBlur={() => commitEdit(h.id)}\n                    placeholder=\"Note (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n                </div>\n              ) : (\n                <div style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"12px 0\" }}>\n                  <div style={{ flex: 1, cursor: \"pointer\" }} onClick={() => startEdit(h)}>\n                    <div style={{ fontFamily: t.serif, fontSize: 18, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{h.name}</div>\n                    {h.note && <div style={{ fontFamily: t.sans, fontSize: 12.5, color: t.muted, marginTop: 3 }}>{h.note}</div>}\n                  </div>\n                  <button type=\"button\" onClick={() => onDelete(h.id)} aria-label=\"Delete habit\"\n                    style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 20, lineHeight: 1, cursor: \"pointer\", padding: \"2px 4px\", flexShrink: 0 }}>\n                    ×\n                  </button>\n                </div>\n              )}\n            </div>\n          ))}\n\n          {habits.length === 0 && (\n            <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, marginBottom: 20 }}>\n              No habits yet.\n            </div>\n          )}\n\n          {/* Add habit form */}\n          {showAdd ? (\n            <div style={{ paddingTop: 16, borderTop: habits.length ? `1px solid ${t.rule}` : \"none\", display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n              <input autoFocus value={addForm.name}\n                onChange={(e) => setAddForm((f) => ({ ...f, name: e.target.value }))}\n                onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n                placeholder=\"Habit name\" style={fieldStyle(17)} />\n              <input value={addForm.note}\n                onChange={(e) => setAddForm((f) => ({ ...f, note: e.target.value }))}\n                placeholder=\"Note (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n              <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n                <button type=\"button\" onClick={submitAdd}\n                  style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n                  Add\n                </button>\n                <button type=\"button\" onClick={() => { setShowAdd(false); setAddForm({ name: \"\", note: \"\" }); }}\n                  style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n                  cancel\n                </button>\n              </div>\n            </div>\n          ) : (\n            <button type=\"button\" onClick={() => setShowAdd(true)}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"14px 0 0\" }}>\n              + Add habit\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ColophonQuote({ t }) {\n  return (\n    <div style={{ borderTop: `1px solid ${t.ruleSoft}`, paddingTop: 22, marginTop: 8 }}>\n      <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 16, lineHeight: 1.5, color: t.muted, letterSpacing: \"-0.005em\" }}>\n        \"You do not rise to the level of your goals.<br />\n        You fall to the level of your systems.\"\n      </div>\n      <Smallcaps color={t.faint} style={{ marginTop: 10 }}>— a note to self</Smallcaps>\n    </div>\n  );\n}\n\nfunction TabBar({ t, tab, setTab }) {\n  const items = [\n    { id: \"today\",   label: \"Today\",     icon: \"anchor\" },\n    { id: \"habits\",  label: \"Habits\",    icon: \"flame\"  },\n    { id: \"metrics\", label: \"Metrics\",   icon: \"chart\"  },\n    { id: \"home\",    label: \"Home list\", icon: \"list\"   },\n  ];\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", borderTop: `1px solid ${t.rule}`, padding: \"14px 12px 18px\", background: t.bg }}>\n      {items.map((it) => {\n        const active = it.id === tab;\n        return (\n          <button key={it.id} type=\"button\" onClick={() => setTab(it.id)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 4, cursor: \"pointer\", padding: 4 }}>\n            <TabIcon name={it.icon} color={active ? t.ink : t.faint} />\n            <span style={{ fontFamily: t.serif, fontStyle: active ? \"italic\" : \"normal\", fontSize: 11.5, letterSpacing: \"0.01em\", color: active ? t.ink : t.muted, fontWeight: 400 }}>\n              {it.label}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction TabIcon({ name, color }) {\n  const p = { width: 16, height: 16, viewBox: \"0 0 16 16\", fill: \"none\", stroke: color, strokeWidth: 1.2, strokeLinecap: \"round\", strokeLinejoin: \"round\" };\n  if (name === \"anchor\") return <svg {...p}><circle cx=\"8\" cy=\"3.5\" r=\"1.4\" /><path d=\"M8 5v9\" /><path d=\"M3 11c0 2 2.2 3.5 5 3.5s5-1.5 5-3.5\" /><path d=\"M5.5 7.5h5\" /></svg>;\n  if (name === \"flame\")  return <svg {...p}><path d=\"M8 14c-2.5 0-4-1.6-4-3.6 0-1.5 1-2.5 1.6-3 .2-.2.5-.1.5.2 0 .8.4 1.2.8 1.2.5 0 .8-.4.7-1.2-.2-1.6.4-3.4 1.8-4.4.3-.2.7 0 .6.4-.3 1.4.4 2 1.3 3 .8.9 1.2 1.9 1.2 3 .1 2.4-1.7 4.4-4.5 4.4Z\" /></svg>;\n  if (name === \"chart\")  return <svg {...p}><path d=\"M2.5 11.5 6 7.5l2.5 2 5-5\" /><path d=\"M9.5 4.5h4v4\" /></svg>;\n  return <svg {...p}><path d=\"M5 4h8.5\" /><path d=\"M5 8h8.5\" /><path d=\"M5 12h8.5\" /><circle cx=\"2.6\" cy=\"4\" r=\".7\" fill={color} stroke=\"none\" /><circle cx=\"2.6\" cy=\"8\" r=\".7\" fill={color} stroke=\"none\" /><circle cx=\"2.6\" cy=\"12\" r=\".7\" fill={color} stroke=\"none\" /></svg>;\n}\n\n// ─────────────────────────────────────────────────────────────\n// Screens — shared header + per-tab bodies\n// ─────────────────────────────────────────────────────────────\nfunction ScreenHeader({ t, kicker, title, subtitle }) {\n  return (\n    <div>\n      <Smallcaps color={t.muted}>{kicker}</Smallcaps>\n      <div style={{ fontFamily: t.serif, fontSize: 46, lineHeight: 0.96, fontWeight: t.bigWeight, letterSpacing: t.bigLetter, color: t.ink, marginTop: 14, fontFeatureSettings: t.serifFeatures }}>\n        {title}\n      </div>\n      {subtitle && (\n        <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontWeight: 300, fontSize: 15.5, lineHeight: 1.4, color: t.muted, marginTop: 10 }}>\n          {subtitle}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction PlaceholderNote({ t, children }) {\n  return (\n    <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 16, color: t.faint, lineHeight: 1.6 }}>\n      {children}\n    </div>\n  );\n}\n\nfunction HabitsScreen({ t, habits, onToggleToday, onAdd, onUpdate, onDelete }) {\n  const [editMode, setEditMode] = useState(false);\n  return (\n    <div>\n      <ScreenHeader t={t} kicker=\"Practice · daily\" title=\"Habits\" subtitle=\"The small things, kept — the last four weeks at a glance.\" />\n      <Spacer h={36} />\n      <Habits t={t} habits={habits} editMode={editMode} setEditMode={setEditMode}\n        onToggleToday={onToggleToday} onAdd={onAdd} onUpdate={onUpdate} onDelete={onDelete} wide />\n      <Spacer h={40} />\n    </div>\n  );\n}\n\nfunction formatDate(iso) {\n  if (!iso) return \"\";\n  const d = new Date(iso);\n  if (isNaN(d.getTime())) return \"\";\n  return d.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n\nfunction Sparkline({ t, points, w = 300, h = 56 }) {\n  if (!points.length) return null;\n  const min = 1, max = 5;\n  const x = (fx) => Math.max(0, Math.min(1, fx)) * w;\n  const y = (v) => h - ((Math.max(min, Math.min(max, v)) - min) / (max - min)) * h;\n  return (\n    <svg width=\"100%\" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio=\"none\" style={{ display: \"block\", overflow: \"visible\" }}>\n      <line x1=\"0\" y1={h} x2={w} y2={h} stroke={t.ruleSoft} strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n      {points.length === 1 ? (\n        <circle cx={x(points[0].fx)} cy={y(points[0].v)} r=\"2.5\" fill={t.accent} />\n      ) : (\n        <polyline points={points.map((p) => `${x(p.fx).toFixed(1)},${y(p.v).toFixed(1)}`).join(\" \")}\n          fill=\"none\" stroke={t.accent} strokeWidth=\"1.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n      )}\n    </svg>\n  );\n}\n\nfunction EnergyTrend({ t, energy, days, date }) {\n  // Position points by actual date within the window so gaps in logging\n  // read as gaps, not as adjacent days.\n  const end = Date.parse((date || (energy.length ? energy[energy.length - 1].date : \"\")) + \"T00:00:00Z\");\n  const span = Math.max(1, (days - 1) * 86400000);\n  const start = end - span;\n  const points = energy\n    .map((e) => ({ v: Number(e.energy), fx: (Date.parse(e.date + \"T00:00:00Z\") - start) / span }))\n    .filter((p) => !isNaN(p.v) && isFinite(p.fx));\n  const avg = points.length ? points.reduce((a, p) => a + p.v, 0) / points.length : 0;\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>Energy trend</Smallcaps>\n        <Smallcaps color={t.faint}><Mono>last {days} days</Mono></Smallcaps>\n      </div>\n      {points.length === 0 ? (\n        <PlaceholderNote t={t}>No energy logged yet.</PlaceholderNote>\n      ) : (\n        <React.Fragment>\n          <Sparkline t={t} points={points} />\n          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginTop: 14 }}>\n            <span style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted }}>\n              {points.length} {points.length === 1 ? \"evening\" : \"evenings\"} logged\n            </span>\n            <span style={{ fontFamily: t.mono, fontSize: 13, color: t.ink, letterSpacing: \"0.04em\" }}>\n              avg {avg.toFixed(1)}<span style={{ color: t.faint }}> / 5</span>\n            </span>\n          </div>\n        </React.Fragment>\n      )}\n    </div>\n  );\n}\n\nfunction Stat({ t, value, label }) {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"flex-end\", gap: 3 }}>\n      <Mono style={{ fontSize: 14, color: t.ink, letterSpacing: \"0.02em\" }}>{value}</Mono>\n      <Smallcaps color={t.faint} style={{ fontSize: 9 }}>{label}</Smallcaps>\n    </div>\n  );\n}\n\nfunction HabitConsistency({ t, habits, days }) {\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>Habit consistency</Smallcaps>\n        <Smallcaps color={t.faint}><Mono>last {days} days</Mono></Smallcaps>\n      </div>\n      {habits.length === 0 ? (\n        <PlaceholderNote t={t}>No habits to measure yet.</PlaceholderNote>\n      ) : (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n          {habits.map((h) => (\n            <div key={h.id} style={{ display: \"grid\", gridTemplateColumns: \"1fr auto\", columnGap: 16, paddingTop: 16, borderTop: `1px solid ${t.ruleSoft}`, alignItems: \"baseline\" }}>\n              <div style={{ fontFamily: t.serif, fontSize: 19, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.2 }}>{h.name}</div>\n              <div style={{ display: \"flex\", gap: 20, alignItems: \"baseline\" }}>\n                <Stat t={t} value={h.currentStreak} label=\"now\" />\n                <Stat t={t} value={h.longestStreak} label=\"best\" />\n                <Stat t={t} value={`${h.count}/${days}`} label=\"days\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction OneThingHistory({ t, oneThing }) {\n  const { list, total, completed } = oneThing;\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>One Thing history</Smallcaps>\n        {total > 0 && <Smallcaps color={t.faint}><Mono>{completed} of {total} done</Mono></Smallcaps>}\n      </div>\n      {list.length === 0 ? (\n        <PlaceholderNote t={t}>No completed focuses yet.</PlaceholderNote>\n      ) : (\n        <div>\n          {list.map((o, i) => (\n            <div key={o.id} style={{ display: \"flex\", alignItems: \"baseline\", gap: 12, padding: \"12px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n              <span style={{ color: t.accent, fontFamily: t.mono, fontSize: 11, flexShrink: 0 }}>✓</span>\n              <div style={{ flex: 1 }}>\n                <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{o.title}</div>\n                {o.category && <div style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted, marginTop: 2 }}>{o.category}</div>}\n              </div>\n              <Mono style={{ fontSize: 11, color: t.faint, letterSpacing: \"0.04em\" }}>{formatDate(o.completed_at)}</Mono>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction MetricsScreen({ t, date }) {\n  const [data, setData]   = useState(null);\n  const [error, setError] = useState(null);\n\n  React.useEffect(() => {\n    let alive = true;\n    fetch(`/api/metrics?days=30&today=${date}`)\n      .then((r) => r.json())\n      .then((d) => { if (alive) setData(d); })\n      .catch((e) => { if (alive) setError(e.message); });\n    return () => { alive = false; };\n  }, []);\n\n  return (\n    <div>\n      <ScreenHeader t={t} kicker=\"The long view\" title=\"Metrics\" subtitle=\"Energy, habits, and what mattered — over time.\" />\n      <Spacer h={36} />\n      {error && <PlaceholderNote t={t}>Couldn't load metrics — {error}</PlaceholderNote>}\n      {!error && !data && <PlaceholderNote t={t}>Gathering the last 30 days…</PlaceholderNote>}\n      {data && (\n        <React.Fragment>\n          <EnergyTrend t={t} energy={data.energy} days={data.days} date={date} />\n          <Spacer h={40} /><Rule color={t.rule} /><Spacer h={32} />\n          <HabitConsistency t={t} habits={data.habits} days={data.days} />\n          <Spacer h={40} /><Rule color={t.rule} /><Spacer h={32} />\n          <OneThingHistory t={t} oneThing={data.oneThing} />\n          <Spacer h={40} />\n        </React.Fragment>\n      )}\n    </div>\n  );\n}\n\nfunction HomeScreen({ t, onFocus, onError }) {\n  const [items, setItems] = useState(null);\n  const [error, setError] = useState(null);\n\n  React.useEffect(() => {\n    let alive = true;\n    fetch(\"/api/notion/home-list\")\n      .then((r) => r.json())\n      .then((d) => {\n        if (!alive) return;\n        if (Array.isArray(d)) setItems(d);\n        else setError(d?.error || \"Unexpected response\");\n      })\n      .catch((e) => { if (alive) setError(e.message); });\n    return () => { alive = false; };\n  }, []);\n\n  const checkItem = async (it) => {\n    try {\n      await api(`/api/notion/home-list/${it.id}/check`, { method: \"POST\" });\n      setItems((prev) => (prev || []).filter((x) => x.id !== it.id));\n    } catch (e) { onError(e); }\n  };\n\n  const groups = useMemo(() => {\n    if (!items) return [];\n    const map = new Map();\n    items.forEach((it) => {\n      const cat = it.category || \"Other\";\n      if (!map.has(cat)) map.set(cat, []);\n      map.get(cat).push(it);\n    });\n    return [...map.entries()];\n  }, [items]);\n\n  return (\n    <div>\n      <ScreenHeader t={t} kicker=\"From Notion\" title=\"Home list\" subtitle=\"Check things off, or pick one as this week's focus.\" />\n      <Spacer h={36} />\n      {error && <PlaceholderNote t={t}>Couldn't reach Notion — {error}</PlaceholderNote>}\n      {!error && !items && <PlaceholderNote t={t}>Loading from Notion…</PlaceholderNote>}\n      {items && items.length === 0 && <PlaceholderNote t={t}>Your Home List is all clear.</PlaceholderNote>}\n      {groups.map(([cat, list], gi) => (\n        <div key={cat} style={{ marginBottom: gi === groups.length - 1 ? 0 : 30 }}>\n          <Smallcaps color={t.faint} style={{ marginBottom: 12 }}>{cat}</Smallcaps>\n          <div>\n            {list.map((it, i) => (\n              <div key={it.id} style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"11px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n                <div style={{ paddingTop: 2 }}>\n                  <Tick checked={false} onClick={() => checkItem(it)} t={t} size={16} />\n                </div>\n                <span style={{ flex: 1, fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{it.title}</span>\n                <button type=\"button\" onClick={() => onFocus(it)}\n                  style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: \"2px 0 0\", flexShrink: 0 }}>\n                  focus →\n                </button>\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Screen\n// ─────────────────────────────────────────────────────────────\nfunction HarbourToday({ tweaks, setTweak, data, onDataChange }) {\n  const t = useMemo(\n    () => buildTheme({ dark: tweaks.dark, palette: tweaks.palette, kit: tweaks.kit }),\n    [tweaks.dark, tweaks.palette, tweaks.kit],\n  );\n\n  const eveningLog = data.logs?.evening;\n  const [energy, setEnergy]     = useState(eveningLog?.energy ?? 3);\n  const [note, setNote]         = useState(eveningLog?.note ?? \"\");\n  const [gratitude, setGratitude] = useState(eveningLog?.gratitude ?? \"\");\n  const [letGo, setLetGo]       = useState(eveningLog?.let_go ?? \"\");\n  const [expanded, setExpanded] = useState(!!(eveningLog?.gratitude || eveningLog?.let_go));\n  const [saved, setSaved]       = useState(!!eveningLog);\n  const [tab, setTab]           = useState(\"today\");\n  const [clTab, setClTab]       = useState(\"evening\");\n  const [clEditMode, setClEditMode] = useState(false);\n  const [habitsEditMode, setHabitsEditMode] = useState(false);\n\n  // Transient error banner — surfaced whenever a save fails so the\n  // optimistic UI never silently lies.\n  const [flash, setFlash] = useState(null);\n  const flashTimer = React.useRef(null);\n  const report = (err) => {\n    setFlash(err && err.message ? err.message : \"Something went wrong\");\n    clearTimeout(flashTimer.current);\n    flashTimer.current = setTimeout(() => setFlash(null), 4000);\n  };\n\n  // ── Checklist toggle ────────────────────────────────────────\n  const toggleItem = async (id) => {\n    const list = clTab === \"morning\" ? data.morning : data.evening;\n    const item = list.find((x) => x.id === id);\n    const newDone = !item.done;\n    const key = clTab;\n    try {\n      await api(`/api/checklist/completions/${id}`, jsonOpts(\"PUT\", { done: newDone, date: data.date }));\n      onDataChange((prev) => ({ ...prev, [key]: prev[key].map((x) => x.id === id ? { ...x, done: newDone } : x) }));\n      if (saved) setSaved(false);\n    } catch (e) { report(e); }\n  };\n\n  // ── Checklist CRUD ──────────────────────────────────────────\n  const addItem = async (item) => {\n    try {\n      const newItem = await api(\"/api/checklist/items\", jsonOpts(\"POST\", item));\n      const key = item.session;\n      onDataChange((prev) => ({ ...prev, [key]: [...prev[key], { ...newItem, done: false }] }));\n    } catch (e) { report(e); }\n  };\n\n  const updateItem = async (id, updates) => {\n    try {\n      await api(`/api/checklist/items/${id}`, jsonOpts(\"PUT\", updates));\n      onDataChange((prev) => ({\n        ...prev,\n        morning: prev.morning.map((x) => x.id === id ? { ...x, ...updates } : x),\n        evening: prev.evening.map((x) => x.id === id ? { ...x, ...updates } : x),\n      }));\n    } catch (e) { report(e); }\n  };\n\n  const removeItem = async (id) => {\n    try {\n      await api(`/api/checklist/items/${id}`, { method: \"DELETE\" });\n      onDataChange((prev) => ({\n        ...prev,\n        morning: prev.morning.filter((x) => x.id !== id),\n        evening: prev.evening.filter((x) => x.id !== id),\n      }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Save evening log ────────────────────────────────────────\n  const saveLog = async () => {\n    try {\n      await api(\"/api/logs\", jsonOpts(\"POST\", { date: data.date, session: \"evening\", energy, note, gratitude, let_go: letGo }));\n      setSaved(true);\n    } catch (e) { report(e); }\n  };\n\n  // ── One Thing ───────────────────────────────────────────────\n  const handleCompleteOneThing = async () => {\n    try {\n      await api(`/api/one-thing/${data.oneThing.id}/complete`, jsonOpts(\"PUT\", {}));\n      onDataChange((prev) => ({ ...prev, oneThing: null }));\n    } catch (e) { report(e); }\n  };\n\n  const handleSetOneThing = async (title, category) => {\n    try {\n      const oneThing = await api(\"/api/one-thing\", jsonOpts(\"POST\", { title, category, weekStart: data.weekStart }));\n      onDataChange((prev) => ({ ...prev, oneThing }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Evidence ────────────────────────────────────────────────\n  const addEvidence = async (entry) => {\n    try {\n      const newEntry = await api(\"/api/evidence\", jsonOpts(\"POST\", { ...entry, date: data.date }));\n      onDataChange((prev) => ({ ...prev, evidence: [...(prev.evidence ?? []), newEntry] }));\n    } catch (e) { report(e); }\n  };\n\n  const removeEvidence = async (id) => {\n    try {\n      await api(`/api/evidence/${id}`, { method: \"DELETE\" });\n      onDataChange((prev) => ({ ...prev, evidence: (prev.evidence ?? []).filter((x) => x.id !== id) }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Habits ──────────────────────────────────────────────────\n  const toggleHabitToday = async (id) => {\n    const habit = data.habits.find((h) => h.id === id);\n    if (!habit) return;\n    const newDone = !habit.days[habit.days.length - 1];\n    try {\n      await api(`/api/habit-completions/${id}/${data.date}`, jsonOpts(\"PUT\", { done: newDone }));\n      const flipLast = (arr) => arr.map((v, i) => i === arr.length - 1 ? newDone : v);\n      onDataChange((prev) => ({\n        ...prev,\n        habits: prev.habits.map((h) =>\n          h.id === id ? { ...h, days: flipLast(h.days), history: h.history ? flipLast(h.history) : h.history } : h),\n      }));\n    } catch (e) { report(e); }\n  };\n\n  const addHabit = async (habit) => {\n    try {\n      const newHabit = await api(\"/api/habits\", jsonOpts(\"POST\", habit));\n      onDataChange((prev) => ({ ...prev, habits: [...prev.habits, { ...newHabit, days: Array(7).fill(false), history: Array(28).fill(false) }] }));\n    } catch (e) { report(e); }\n  };\n\n  const updateHabit = async (id, updates) => {\n    try {\n      await api(`/api/habits/${id}`, jsonOpts(\"PUT\", updates));\n      onDataChange((prev) => ({ ...prev, habits: prev.habits.map((h) => h.id === id ? { ...h, ...updates } : h) }));\n    } catch (e) { report(e); }\n  };\n\n  const removeHabit = async (id) => {\n    try {\n      await api(`/api/habits/${id}`, { method: \"DELETE\" });\n      onDataChange((prev) => ({ ...prev, habits: prev.habits.filter((h) => h.id !== id) }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Derived ─────────────────────────────────────────────────\n  const activeList = clTab === \"morning\" ? data.morning : data.evening;\n  const counts = {\n    morning: `${data.morning.filter((x) => x.done).length}/${data.morning.length}`,\n    evening: `${data.evening.filter((x) => x.done).length}/${data.evening.length}`,\n  };\n\n  const cssVars = { \"--hb-bg\": t.bg, \"--hb-ink\": t.ink, \"--hb-muted\": t.muted, \"--hb-rule\": t.rule, \"--hb-accent\": t.accent, \"--hb-mono\": t.mono, \"--hb-serif\": t.serif, \"--hb-sans\": t.sans };\n\n  return (\n    <div style={{ ...cssVars, position: \"relative\", width: \"100%\", height: \"100%\", background: t.bg, color: t.ink, fontFamily: t.sans, display: \"flex\", flexDirection: \"column\", overflow: \"hidden\" }}>\n      {flash && (\n        <div style={{ position: \"absolute\", top: 58, left: 24, right: 24, zIndex: 20, background: t.ink, color: t.bg, fontFamily: t.sans, fontSize: 12.5, padding: \"10px 14px\", textAlign: \"center\" }}>\n          {flash}\n        </div>\n      )}\n      <div style={{ flex: 1, overflowY: \"auto\", overflowX: \"hidden\", padding: \"78px 28px 24px\" }}>\n        {tab === \"today\" && (\n        <React.Fragment>\n        <Masthead t={t} />\n\n        <Spacer h={42} />\n        <OneThing t={t} oneThing={data.oneThing} weekStart={data.weekStart} date={data.date} onComplete={handleCompleteOneThing} onSet={handleSetOneThing} />\n\n        <Spacer h={42} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <HowWasToday t={t} energy={energy}\n          setEnergy={(v) => { setEnergy(v); if (saved) setSaved(false); }}\n          note={note}\n          setNote={(v) => { setNote(v); if (saved) setSaved(false); }}\n          gratitude={gratitude}\n          setGratitude={(v) => { setGratitude(v); if (saved) setSaved(false); }}\n          letGo={letGo}\n          setLetGo={(v) => { setLetGo(v); if (saved) setSaved(false); }}\n          expanded={expanded} setExpanded={setExpanded} onSave={saveLog} saved={saved} />\n\n        <Spacer h={44} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <Evidence t={t} items={data.evidence ?? []} onAdd={addEvidence} onDelete={removeEvidence} />\n\n        <Spacer h={44} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <Checklist t={t} list={activeList} toggle={toggleItem} tab={clTab} setTab={setClTab} counts={counts}\n          editMode={clEditMode} setEditMode={setClEditMode}\n          onAdd={addItem} onUpdate={updateItem} onDelete={removeItem} />\n\n        <Spacer h={44} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <Habits t={t} habits={data.habits} editMode={habitsEditMode} setEditMode={setHabitsEditMode}\n          onToggleToday={toggleHabitToday} onAdd={addHabit} onUpdate={updateHabit} onDelete={removeHabit} />\n\n        <Spacer h={36} />\n        <ColophonQuote t={t} />\n        <Spacer h={40} />\n        </React.Fragment>\n        )}\n\n        {tab === \"habits\" && (\n          <HabitsScreen t={t} habits={data.habits}\n            onToggleToday={toggleHabitToday} onAdd={addHabit} onUpdate={updateHabit} onDelete={removeHabit} />\n        )}\n\n        {tab === \"metrics\" && <MetricsScreen t={t} />}\n\n        {tab === \"home\" && <HomeScreen t={t} />}\n      </div>\n      <TabBar t={t} tab={tab} setTab={setTab} />\n    </div>\n  );\n}\n\nfunction Spacer({ h }) {\n  return <div style={{ height: h }} />;\n}\n\nObject.assign(window, { HarbourToday, buildTheme, PALETTES, TYPE_KITS });\n","// harbour.jsx — Harbour Today screen\n\nconst { useState, useMemo } = React;\n\n// ─────────────────────────────────────────────────────────────\n// Theme tokens\n// ─────────────────────────────────────────────────────────────\nconst PALETTES = {\n  amber:   { hue: 50,  name: \"Amber\" },\n  oxblood: { hue: 25,  name: \"Oxblood\" },\n  forest:  { hue: 160, name: \"Forest\" },\n  ink:     { hue: 60,  name: \"Ink only\", mono: true },\n};\n\nconst TYPE_KITS = {\n  editorial: {\n    name: \"Editorial\",\n    serif: '\"Newsreader\", \"Source Serif Pro\", Georgia, serif',\n    sans:  '\"Geist\", system-ui, sans-serif',\n    mono:  '\"JetBrains Mono\", ui-monospace, monospace',\n    serifFeatures: '\"ss01\" 1',\n    bigWeight: 400, bigStretch: 1, bigLetter: \"-0.02em\",\n  },\n  classic: {\n    name: \"Classic\",\n    serif: '\"EB Garamond\", \"Garamond\", Georgia, serif',\n    sans:  '\"Hanken Grotesk\", system-ui, sans-serif',\n    mono:  '\"IBM Plex Mono\", ui-monospace, monospace',\n    serifFeatures: \"normal\",\n    bigWeight: 500, bigStretch: 1, bigLetter: \"-0.015em\",\n  },\n};\n\nfunction buildTheme({ dark, palette, kit }) {\n  const p = PALETTES[palette];\n  const t = TYPE_KITS[kit];\n  const inkOnly = !!p.mono;\n  if (dark) {\n    return {\n      ...t,\n      bg: \"oklch(15% 0.012 60)\", bgDeep: \"oklch(12% 0.012 60)\", bgInset: \"oklch(18% 0.012 60)\",\n      ink: \"oklch(94% 0.008 80)\", muted: \"oklch(66% 0.012 80)\", faint: \"oklch(42% 0.012 60)\",\n      rule: \"oklch(28% 0.012 60)\", ruleSoft: \"oklch(23% 0.012 60)\",\n      accent: inkOnly ? \"oklch(94% 0.008 80)\" : `oklch(72% 0.13 ${p.hue})`,\n      accentSoft: inkOnly ? \"oklch(40% 0.008 80)\" : `oklch(40% 0.10 ${p.hue})`,\n      dark: true, inkOnly,\n    };\n  }\n  return {\n    ...t,\n    bg: \"oklch(96.5% 0.012 80)\", bgDeep: \"oklch(93% 0.014 80)\", bgInset: \"oklch(98% 0.008 80)\",\n    ink: \"oklch(20% 0.015 60)\", muted: \"oklch(46% 0.013 60)\", faint: \"oklch(74% 0.012 60)\",\n    rule: \"oklch(84% 0.014 80)\", ruleSoft: \"oklch(89% 0.012 80)\",\n    accent: inkOnly ? \"oklch(28% 0.015 60)\" : `oklch(50% 0.14 ${p.hue})`,\n    accentSoft: inkOnly ? \"oklch(60% 0.015 60)\" : `oklch(70% 0.10 ${p.hue})`,\n    dark: false, inkOnly,\n  };\n}\n\n// ─────────────────────────────────────────────────────────────\n// Atoms\n// ─────────────────────────────────────────────────────────────\nfunction Smallcaps({ children, style, color }) {\n  return (\n    <div style={{ fontFamily: \"inherit\", fontSize: 10.5, fontWeight: 500, letterSpacing: \"0.16em\", textTransform: \"uppercase\", color: color || \"currentColor\", ...style }}>\n      {children}\n    </div>\n  );\n}\n\nfunction Mono({ children, style }) {\n  return <span style={{ fontFamily: \"var(--hb-mono)\", fontFeatureSettings: '\"tnum\" 1', ...style }}>{children}</span>;\n}\n\nfunction Rule({ color, style }) {\n  return <div style={{ height: 1, background: color, ...style }} />;\n}\n\n// Shared fetch wrapper — throws on non-2xx so a failed save can't\n// silently look like success.\nasync function api(url, opts) {\n  const res = await fetch(url, opts);\n  if (!res.ok) throw new Error(`Save failed (${res.status})`);\n  const ct = res.headers.get(\"content-type\") || \"\";\n  return ct.includes(\"application/json\") ? res.json() : null;\n}\n\nfunction jsonOpts(method, body) {\n  return { method, headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(body) };\n}\n\nfunction TallyRow({ days, accent, faint, gap = 7, h = 22, w = 3, onToggleToday, todayBorder }) {\n  return (\n    <div style={{ display: \"flex\", alignItems: \"center\", gap }}>\n      {days.map((on, i) => {\n        const isToday = onToggleToday && i === days.length - 1;\n        const cellStyle = { width: w, height: h, borderRadius: 0.5, background: on ? accent : \"transparent\", border: on ? \"none\" : `1px solid ${isToday ? (todayBorder || faint) : faint}`, boxSizing: \"border-box\" };\n        return isToday ? (\n          <button key={i} type=\"button\" onClick={onToggleToday} aria-label=\"Toggle today\" aria-pressed={on}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", padding: \"8px 5px\", margin: \"-8px -5px\", cursor: \"pointer\", display: \"flex\", alignItems: \"center\", lineHeight: 0 }}>\n            <div style={cellStyle} />\n          </button>\n        ) : (\n          <div key={i} style={cellStyle} />\n        );\n      })}\n    </div>\n  );\n}\n\nfunction HabitHeatmap({ days, accent, faint, todayBorder, onToggleToday }) {\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(7, 1fr)\", gap: 4 }}>\n      {days.map((on, i) => {\n        const isToday = i === days.length - 1;\n        const cellStyle = { width: \"100%\", aspectRatio: \"1 / 1\", borderRadius: 1, background: on ? accent : \"transparent\", border: on ? \"none\" : `1px solid ${isToday ? (todayBorder || faint) : faint}`, boxSizing: \"border-box\" };\n        return isToday ? (\n          <button key={i} type=\"button\" onClick={onToggleToday} aria-label=\"Toggle today\" aria-pressed={on}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", padding: 0, cursor: \"pointer\", display: \"block\", width: \"100%\" }}>\n            <div style={cellStyle} />\n          </button>\n        ) : (\n          <div key={i} style={cellStyle} />\n        );\n      })}\n    </div>\n  );\n}\n\nfunction EnergyMeter({ value, max = 5, t, onChange }) {\n  return (\n    <div style={{ display: \"flex\", gap: 6 }}>\n      {Array.from({ length: max }).map((_, i) => (\n        <button key={i} type=\"button\" onClick={() => onChange(i + 1)}\n          style={{ flex: 1, height: 4, padding: 0, background: i < value ? t.accent : t.rule, border: \"none\", borderRadius: 0, cursor: \"pointer\" }}\n          aria-label={`Energy ${i + 1}`}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Tick({ checked, onClick, t, size = 18 }) {\n  return (\n    <button type=\"button\" onClick={onClick} aria-pressed={checked}\n      style={{ width: size, height: size, padding: 0, flex: \"0 0 auto\", background: checked ? t.accent : \"transparent\", border: checked ? `1px solid ${t.accent}` : `1px solid ${t.rule}`, cursor: \"pointer\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", transition: \"background 120ms, border-color 120ms\" }}\n    >\n      {checked && (\n        <svg width={size - 8} height={size - 8} viewBox=\"0 0 10 10\" fill=\"none\">\n          <path d=\"M1.5 5.2 L4 7.5 L8.8 2.4\" stroke={t.bg} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      )}\n    </button>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Sections\n// ─────────────────────────────────────────────────────────────\nfunction Masthead({ t }) {\n  const now = new Date();\n  const weekday = now.toLocaleDateString(\"en-US\", { weekday: \"long\" });\n  const md = now.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n  const h = now.getHours();\n  const session = h < 12 ? \"morning\" : h < 17 ? \"afternoon\" : \"evening\";\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\" }}>\n        <Smallcaps color={t.muted}>{weekday} · {session}</Smallcaps>\n        <Smallcaps color={t.muted}><Mono>{md}</Mono></Smallcaps>\n      </div>\n      <div style={{ fontFamily: t.serif, fontSize: 56, lineHeight: 0.95, fontWeight: t.bigWeight, letterSpacing: t.bigLetter, color: t.ink, marginTop: 14, fontFeatureSettings: t.serifFeatures }}>\n        Harbour\n      </div>\n      <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontWeight: 300, fontSize: 16, lineHeight: 1.4, color: t.muted, marginTop: 10 }}>\n        A quiet log of small, good things.\n      </div>\n    </div>\n  );\n}\n\nfunction OneThing({ t, oneThing, weekStart, date, onComplete, onSet }) {\n  const [settingNew, setSettingNew]   = useState(!oneThing);\n  const [newTitle, setNewTitle]       = useState(\"\");\n  const [newCategory, setNewCategory] = useState(\"\");\n  const [suggestions, setSuggestions] = useState([]);\n  const [loadingSugg, setLoadingSugg] = useState(false);\n\n  React.useEffect(() => { if (!oneThing) setSettingNew(true); }, [oneThing]);\n\n  // Load Notion Home List whenever the set-form opens\n  React.useEffect(() => {\n    if (!settingNew) return;\n    setLoadingSugg(true);\n    fetch(\"/api/notion/home-list\")\n      .then((r) => r.json())\n      .then((items) => setSuggestions(Array.isArray(items) ? items : []))\n      .catch(() => setSuggestions([]))\n      .finally(() => setLoadingSugg(false));\n  }, [settingNew]);\n\n  const handleSet = async () => {\n    if (!newTitle.trim()) return;\n    await onSet(newTitle.trim(), newCategory.trim() || undefined);\n    setNewTitle(\"\"); setNewCategory(\"\"); setSettingNew(false);\n  };\n\n  const pickSuggestion = (s) => {\n    setNewTitle(s.title);\n    setNewCategory(s.category);\n  };\n\n  const fieldStyle = (size = 22) => ({\n    width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n    borderBottom: `1px solid ${t.rule}`, padding: \"6px 0 10px\", color: t.ink,\n    fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.3, outline: \"none\", resize: \"none\",\n  });\n\n  if (settingNew) {\n    return (\n      <div>\n        <Smallcaps color={t.muted} style={{ marginBottom: 14 }}>\n          {oneThing ? \"New · one thing\" : \"This week · one thing\"}\n        </Smallcaps>\n\n        {/* Notion Home List suggestions — dropdown */}\n        {loadingSugg && (\n          <div style={{ fontFamily: t.sans, fontSize: 11.5, color: t.faint, marginBottom: 14, letterSpacing: \"0.04em\" }}>\n            Loading from Notion…\n          </div>\n        )}\n        {!loadingSugg && suggestions.length > 0 && (\n          <div style={{ marginBottom: 20 }}>\n            <Smallcaps color={t.faint} style={{ marginBottom: 10 }}>From your Home List</Smallcaps>\n            <select\n              value={suggestions.find((s) => s.title === newTitle) ? newTitle : \"\"}\n              onChange={(e) => {\n                const item = suggestions.find((s) => s.title === e.target.value);\n                if (item) pickSuggestion(item);\n              }}\n              style={{\n                width: \"100%\", boxSizing: \"border-box\",\n                background: t.bgInset, border: `1px solid ${t.rule}`,\n                color: t.ink, fontFamily: t.sans, fontSize: 13.5,\n                padding: \"10px 12px\", cursor: \"pointer\", outline: \"none\", marginBottom: 18,\n              }}\n            >\n              <option value=\"\">Choose from your Home List…</option>\n              {[...new Set(suggestions.map((s) => s.category))].map((cat) => (\n                <optgroup key={cat} label={cat}>\n                  {suggestions.filter((s) => s.category === cat).map((s, i) => (\n                    <option key={i} value={s.title}>{s.title}</option>\n                  ))}\n                </optgroup>\n              ))}\n            </select>\n          </div>\n        )}\n\n        <textarea value={newTitle} onChange={(e) => setNewTitle(e.target.value)}\n          placeholder=\"What's the one thing this week?\" rows={2} style={fieldStyle(22)} />\n        <input value={newCategory} onChange={(e) => setNewCategory(e.target.value)}\n          placeholder=\"Category (optional)\"\n          style={{ ...fieldStyle(13), borderBottomColor: t.ruleSoft, marginTop: 12, color: t.muted }} />\n        <div style={{ display: \"flex\", gap: 16, marginTop: 18 }}>\n          <button type=\"button\" onClick={handleSet}\n            style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, letterSpacing: \"0.02em\", padding: \"10px 20px\", cursor: \"pointer\" }}>\n            Set one thing\n          </button>\n          {oneThing && (\n            <button type=\"button\" onClick={() => setSettingNew(false)}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n              cancel\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  if (!oneThing) return null;\n\n  const start  = new Date(weekStart + \"T00:00:00\");\n  const today  = new Date(date + \"T00:00:00\");\n  const dayNum = Math.min(Math.floor((today - start) / 86400000) + 1, 7);\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 14 }}>\n        <Smallcaps color={t.muted}>This week · one thing</Smallcaps>\n        <Smallcaps color={t.faint}><Mono>day {dayNum}/7</Mono></Smallcaps>\n      </div>\n      <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 26, lineHeight: 1.18, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\" }}>\n        {oneThing.title}\n      </div>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, marginTop: 16 }}>\n        {[0,1,2,3,4,5,6].map((i) => (\n          <div key={i} style={{ flex: 1, height: 2, background: i < dayNum ? t.accent : t.rule }} />\n        ))}\n      </div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 8 }}>\n        <span style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted }}>{oneThing.category || \"\"}</span>\n        <div style={{ display: \"flex\", gap: 14 }}>\n          <button type=\"button\" onClick={onComplete}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n            mark complete\n          </button>\n          <button type=\"button\" onClick={() => setSettingNew(true)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n            replace\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction HowWasToday({ t, energy, setEnergy, note, setNote, gratitude, setGratitude, letGo, setLetGo, expanded, setExpanded, onSave, saved }) {\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontWeight: 400, fontSize: 24, color: t.ink, letterSpacing: \"-0.005em\" }}>\n          How was today?\n        </div>\n        <Smallcaps color={t.faint}><Mono>30 sec</Mono></Smallcaps>\n      </div>\n\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 8 }}>\n        <Smallcaps color={t.muted}>Energy</Smallcaps>\n        <span style={{ fontFamily: t.mono, fontSize: 13, color: t.ink, letterSpacing: \"0.04em\" }}>\n          {energy}<span style={{ color: t.faint }}> / 5</span>\n        </span>\n      </div>\n      <EnergyMeter value={energy} t={t} onChange={setEnergy} />\n\n      <div style={{ marginTop: 22 }}>\n        <Smallcaps color={t.muted} style={{ marginBottom: 10 }}>What mattered today</Smallcaps>\n        <textarea value={note} onChange={(e) => setNote(e.target.value)} rows={2}\n          style={{ width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\", borderBottom: `1px solid ${t.rule}`, padding: \"6px 0 10px\", color: t.ink, fontFamily: t.serif, fontStyle: \"italic\", fontSize: 17, lineHeight: 1.45, fontWeight: 400, outline: \"none\", resize: \"none\" }} />\n      </div>\n\n      {expanded && (\n        <div style={{ marginTop: 18, display: \"flex\", flexDirection: \"column\", gap: 14 }}>\n          <Field label=\"One thing I'm grateful for\" t={t} placeholder=\"A small good thing…\"\n            value={gratitude} onChange={(e) => setGratitude(e.target.value)} />\n          <Field label=\"One thing to let go of\" t={t} placeholder=\"Quietly, without judgment…\"\n            value={letGo} onChange={(e) => setLetGo(e.target.value)} />\n        </div>\n      )}\n\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 18, marginTop: 22 }}>\n        <button type=\"button\" onClick={onSave}\n          style={{ appearance: \"none\", background: saved ? \"transparent\" : t.ink, color: saved ? t.muted : t.bg, border: saved ? `1px solid ${t.rule}` : \"none\", fontFamily: t.sans, fontSize: 13.5, fontWeight: 500, letterSpacing: \"0.02em\", padding: \"12px 24px\", cursor: \"pointer\", transition: \"all 160ms\" }}>\n          {saved ? \"✓  Saved\" : \"Log the day\"}\n        </button>\n        <button type=\"button\" onClick={() => setExpanded((x) => !x)}\n          style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13.5, letterSpacing: \"0.02em\", cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n          {expanded ? \"fewer prompts\" : \"two more prompts\"}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction Field({ label, placeholder, t, value, onChange }) {\n  return (\n    <div>\n      <Smallcaps color={t.muted} style={{ marginBottom: 6 }}>{label}</Smallcaps>\n      <input placeholder={placeholder} value={value ?? \"\"} onChange={onChange}\n        style={{ width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\", borderBottom: `1px solid ${t.ruleSoft}`, padding: \"4px 0 8px\", color: t.ink, fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, lineHeight: 1.45, outline: \"none\" }} />\n    </div>\n  );\n}\n\nfunction formatTime(iso) {\n  if (!iso) return \"\";\n  const d = new Date(iso);\n  if (isNaN(d.getTime())) return \"\";\n  let h = d.getHours();\n  const m = d.getMinutes();\n  const ampm = h >= 12 ? \"pm\" : \"am\";\n  h = h % 12 || 12;\n  return `${h}:${String(m).padStart(2, \"0\")} ${ampm}`;\n}\n\nfunction Evidence({ t, items, onAdd, onDelete }) {\n  const [showAdd, setShowAdd]   = useState(false);\n  const [editMode, setEditMode] = useState(false);\n  const [form, setForm]         = useState({ title: \"\", detail: \"\" });\n\n  const fieldStyle = (size = 16, extra = {}) => ({\n    width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n    borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n    fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n  });\n\n  const submitAdd = () => {\n    if (!form.title.trim()) return;\n    onAdd({ title: form.title.trim(), detail: form.detail.trim() || undefined });\n    setForm({ title: \"\", detail: \"\" });\n    setShowAdd(false);\n  };\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 14 }}>\n        <Smallcaps color={t.muted}>Today · evidence</Smallcaps>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n          {items.length > 0 && <Smallcaps color={t.faint}><Mono>{items.length} {items.length === 1 ? \"entry\" : \"entries\"}</Mono></Smallcaps>}\n          {items.length > 0 && (\n            <button type=\"button\" onClick={() => setEditMode((x) => !x)}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n              {editMode ? \"done\" : \"edit\"}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {items.length === 0 && !showAdd && (\n        <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5, marginBottom: 4 }}>\n          Nothing logged yet today.\n        </div>\n      )}\n\n      <div>\n        {items.map((it, i) => (\n          <div key={it.id} style={{ display: \"flex\", alignItems: \"baseline\", gap: 12, padding: \"12px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n            <span style={{ color: t.accent, fontFamily: t.mono, fontSize: 11, width: 10, flexShrink: 0 }}>✓</span>\n            <span style={{ flex: 1, fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, fontWeight: 400, letterSpacing: \"-0.005em\" }}>\n              {it.title}\n              {it.detail && <span style={{ color: t.muted, fontStyle: \"italic\" }}> · {it.detail}</span>}\n            </span>\n            {editMode ? (\n              <button type=\"button\" onClick={() => onDelete(it.id)} aria-label=\"Delete entry\"\n                style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 18, lineHeight: 1, cursor: \"pointer\", padding: \"0 2px\", flexShrink: 0 }}>\n                ×\n              </button>\n            ) : (\n              <Mono style={{ fontSize: 11, color: t.muted, letterSpacing: \"0.04em\" }}>{formatTime(it.logged_at)}</Mono>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {showAdd ? (\n        <div style={{ paddingTop: 16, marginTop: items.length ? 4 : 0, borderTop: items.length ? `1px solid ${t.rule}` : \"none\", display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n          <input autoFocus value={form.title}\n            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}\n            onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n            placeholder=\"What did you do?\" style={fieldStyle(16)} />\n          <input value={form.detail}\n            onChange={(e) => setForm((f) => ({ ...f, detail: e.target.value }))}\n            placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n          <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n            <button type=\"button\" onClick={submitAdd}\n              style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n              Add\n            </button>\n            <button type=\"button\" onClick={() => { setShowAdd(false); setForm({ title: \"\", detail: \"\" }); }}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n              cancel\n            </button>\n          </div>\n        </div>\n      ) : (\n        <button type=\"button\" onClick={() => setShowAdd(true)}\n          style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"14px 0 0\" }}>\n          + Add evidence\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Checklist — with inline editor\n// ─────────────────────────────────────────────────────────────\nfunction Checklist({ t, list, toggle, tab, setTab, counts, editMode, setEditMode, onAdd, onUpdate, onDelete }) {\n  const [editingId, setEditingId] = useState(null);\n  const [editVals, setEditVals]   = useState({});\n  const [showAdd, setShowAdd]     = useState(false);\n  const [addForm, setAddForm]     = useState({ section: \"\", title: \"\", detail: \"\" });\n  // Enter commits AND fires the input's onBlur — this ref stops the\n  // second identical PUT.\n  const commitGuard = React.useRef(false);\n\n  const sections = useMemo(() => [...new Set(list.map((i) => i.section))], [list]);\n\n  const groups = useMemo(() => {\n    const map = new Map();\n    list.forEach((it) => {\n      if (!map.has(it.section)) map.set(it.section, []);\n      map.get(it.section).push(it);\n    });\n    return [...map.entries()];\n  }, [list]);\n\n  const remaining = list.filter((x) => !x.done).length;\n\n  const startEdit = (item) => {\n    commitGuard.current = false;\n    setEditingId(item.id);\n    setEditVals({ title: item.title, detail: item.detail || \"\", section: item.section });\n  };\n\n  const commitEdit = (id) => {\n    if (commitGuard.current) return;\n    commitGuard.current = true;\n    if (editVals.title?.trim()) {\n      onUpdate(id, {\n        title: editVals.title.trim(),\n        detail: editVals.detail?.trim() || null,\n        section: editVals.section?.trim() || \"General\",\n      });\n    }\n    setEditingId(null);\n  };\n\n  const submitAdd = () => {\n    if (!addForm.title.trim()) return;\n    onAdd({ session: tab, section: addForm.section.trim() || \"General\", title: addForm.title.trim(), detail: addForm.detail.trim() || undefined, sort_order: list.length });\n    setAddForm((f) => ({ ...f, title: \"\", detail: \"\" }));\n    setShowAdd(false);\n  };\n\n  const fieldStyle = (size = 16, extra = {}) => ({\n    width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n    borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n    fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n  });\n\n  const linkBtn = (onClick, label, color) => (\n    <button type=\"button\" onClick={onClick}\n      style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: color || t.muted, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n      {label}\n    </button>\n  );\n\n  const tabsRow = (\n    <div style={{ display: \"flex\", gap: 28, marginBottom: 24 }}>\n      {[{ id: \"morning\", label: \"Morning\", count: counts.morning }, { id: \"evening\", label: \"Evening\", count: counts.evening }].map((item) => {\n        const active = tab === item.id;\n        return (\n          <button key={item.id} type=\"button\" onClick={() => setTab(item.id)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", padding: \"6px 0 8px\", cursor: \"pointer\", borderBottom: active ? `1.5px solid ${t.ink}` : `1.5px solid transparent`, color: active ? t.ink : t.muted, display: \"flex\", alignItems: \"baseline\", gap: 8 }}>\n            <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 18, fontWeight: 400, letterSpacing: \"-0.005em\" }}>{item.label}</span>\n            {!editMode && <Mono style={{ fontSize: 11, color: active ? t.muted : t.faint }}>{item.count}</Mono>}\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  return (\n    <div>\n      {/* Header */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 16 }}>\n        <Smallcaps color={t.muted}>Checklist</Smallcaps>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n          {!editMode && list.length > 0 && (\n            <Smallcaps color={t.faint}><Mono>{remaining} to go</Mono></Smallcaps>\n          )}\n          <button type=\"button\"\n            onClick={() => { setEditMode(!editMode); setEditingId(null); setShowAdd(false); }}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n            {editMode ? \"done\" : \"edit\"}\n          </button>\n        </div>\n      </div>\n\n      {tabsRow}\n\n      {/* ── Normal mode ── */}\n      {!editMode && list.length === 0 && (\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5 }}>\n            No {tab} items yet.\n          </span>\n          <button type=\"button\" onClick={() => setEditMode(true)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n            Add items →\n          </button>\n        </div>\n      )}\n\n      {!editMode && list.length > 0 && groups.map(([section, items], gi) => (\n        <div key={section} style={{ marginBottom: gi === groups.length - 1 ? 0 : 28 }}>\n          <Smallcaps color={t.faint} style={{ marginBottom: 12 }}>{section}</Smallcaps>\n          <div>\n            {items.map((it, i) => (\n              <div key={it.id} style={{ display: \"flex\", alignItems: \"flex-start\", gap: 14, padding: \"11px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n                <div style={{ paddingTop: 2 }}>\n                  <Tick checked={it.done} onClick={() => toggle(it.id)} t={t} />\n                </div>\n                <div style={{ flex: 1 }}>\n                  <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, fontWeight: 400, letterSpacing: \"-0.005em\", color: it.done ? t.faint : t.ink, textDecoration: it.done ? \"line-through\" : \"none\", textDecorationThickness: \"0.5px\" }}>\n                    {it.title}\n                  </div>\n                  {it.detail && (\n                    <div style={{ fontFamily: t.sans, fontSize: 12.5, color: it.done ? t.faint : t.muted, marginTop: 3, letterSpacing: \"0.005em\" }}>\n                      {it.detail}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {/* ── Edit mode ── */}\n      {editMode && (\n        <div>\n          {/* Existing items */}\n          {groups.map(([section, items], gi) => (\n            <div key={section} style={{ marginBottom: 24 }}>\n              <Smallcaps color={t.faint} style={{ marginBottom: 10 }}>{section}</Smallcaps>\n              {items.map((it, i) => (\n                <div key={it.id} style={{ borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n                  {editingId === it.id ? (\n                    <div style={{ padding: \"12px 0\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n                      <input autoFocus value={editVals.title}\n                        onChange={(e) => setEditVals((v) => ({ ...v, title: e.target.value }))}\n                        onBlur={() => commitEdit(it.id)}\n                        onKeyDown={(e) => { if (e.key === \"Enter\") { e.preventDefault(); commitEdit(it.id); } if (e.key === \"Escape\") setEditingId(null); }}\n                        placeholder=\"Title\" style={fieldStyle(16)} />\n                      <input value={editVals.detail}\n                        onChange={(e) => setEditVals((v) => ({ ...v, detail: e.target.value }))}\n                        onBlur={() => commitEdit(it.id)}\n                        placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n                      <input value={editVals.section} list=\"hb-section-opts\"\n                        onChange={(e) => setEditVals((v) => ({ ...v, section: e.target.value }))}\n                        onBlur={() => commitEdit(it.id)}\n                        placeholder=\"Section\" style={fieldStyle(11, { color: t.muted, borderBottomColor: t.ruleSoft, letterSpacing: \"0.06em\", textTransform: \"uppercase\" })} />\n                    </div>\n                  ) : (\n                    <div style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"10px 0\" }}>\n                      <div style={{ flex: 1, cursor: \"pointer\" }} onClick={() => startEdit(it)}>\n                        <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{it.title}</div>\n                        {it.detail && <div style={{ fontFamily: t.sans, fontSize: 12.5, color: t.muted, marginTop: 3 }}>{it.detail}</div>}\n                        <div style={{ fontFamily: t.sans, fontSize: 10, color: t.faint, marginTop: 4, letterSpacing: \"0.06em\", textTransform: \"uppercase\" }}>{it.section}</div>\n                      </div>\n                      <button type=\"button\" onClick={() => onDelete(it.id)} aria-label=\"Delete item\"\n                        style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 20, lineHeight: 1, cursor: \"pointer\", padding: \"2px 4px\", flexShrink: 0 }}>\n                        ×\n                      </button>\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n\n          {list.length === 0 && (\n            <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, marginBottom: 20 }}>\n              No {tab} items yet.\n            </div>\n          )}\n\n          {/* Section autocomplete */}\n          <datalist id=\"hb-section-opts\">\n            {sections.map((s) => <option key={s} value={s} />)}\n          </datalist>\n\n          {/* Add item form */}\n          {showAdd ? (\n            <div style={{ paddingTop: 16, borderTop: `1px solid ${t.rule}`, display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n              <input autoFocus value={addForm.title}\n                onChange={(e) => setAddForm((f) => ({ ...f, title: e.target.value }))}\n                onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n                placeholder=\"Title\" style={fieldStyle(16)} />\n              <input value={addForm.detail}\n                onChange={(e) => setAddForm((f) => ({ ...f, detail: e.target.value }))}\n                placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n              <input value={addForm.section} list=\"hb-section-opts\"\n                onChange={(e) => setAddForm((f) => ({ ...f, section: e.target.value }))}\n                placeholder=\"Section\" style={fieldStyle(11, { color: t.muted, borderBottomColor: t.ruleSoft, letterSpacing: \"0.06em\", textTransform: \"uppercase\" })} />\n              <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n                <button type=\"button\" onClick={submitAdd}\n                  style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n                  Add\n                </button>\n                {linkBtn(() => setShowAdd(false), \"cancel\")}\n              </div>\n            </div>\n          ) : (\n            <button type=\"button\"\n              onClick={() => { setShowAdd(true); setAddForm({ section: sections[sections.length - 1] || \"\", title: \"\", detail: \"\" }); }}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"12px 0 0\" }}>\n              + Add item\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Habits({ t, habits, editMode, setEditMode, onToggleToday, onAdd, onUpdate, onDelete, wide }) {\n  const [editingId, setEditingId] = useState(null);\n  const [editVals, setEditVals]   = useState({});\n  const [showAdd, setShowAdd]     = useState(false);\n  const [addForm, setAddForm]     = useState({ name: \"\", note: \"\" });\n  // Enter commits AND fires the input's onBlur — this ref stops the\n  // second identical PUT.\n  const commitGuard = React.useRef(false);\n\n  const fieldStyle = (size = 16, extra = {}) => ({\n    width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n    borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n    fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n  });\n\n  const startEdit = (h) => {\n    commitGuard.current = false;\n    setEditingId(h.id);\n    setEditVals({ name: h.name, note: h.note || \"\" });\n  };\n\n  const commitEdit = (id) => {\n    if (commitGuard.current) return;\n    commitGuard.current = true;\n    if (editVals.name?.trim()) {\n      onUpdate(id, { name: editVals.name.trim(), note: editVals.note?.trim() || null });\n    }\n    setEditingId(null);\n  };\n\n  const submitAdd = () => {\n    if (!addForm.name.trim()) return;\n    onAdd({ name: addForm.name.trim(), note: addForm.note.trim() || undefined, sort_order: habits.length });\n    setAddForm({ name: \"\", note: \"\" });\n    setShowAdd(false);\n  };\n\n  return (\n    <div>\n      {/* Header */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>Habits</Smallcaps>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n          {!editMode && habits.length > 0 && <Smallcaps color={t.faint}><Mono>{wide ? \"last 4 weeks\" : \"last 7 days\"}</Mono></Smallcaps>}\n          <button type=\"button\"\n            onClick={() => { setEditMode(!editMode); setEditingId(null); setShowAdd(false); }}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n            {editMode ? \"done\" : \"edit\"}\n          </button>\n        </div>\n      </div>\n\n      {/* ── Normal mode ── */}\n      {!editMode && habits.length === 0 && (\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5 }}>\n            No habits yet.\n          </span>\n          <button type=\"button\" onClick={() => setEditMode(true)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n            Add habits →\n          </button>\n        </div>\n      )}\n\n      {!editMode && habits.length > 0 && (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 22 }}>\n          {habits.map((h) => {\n            const hist = h.history || h.days;\n            return wide ? (\n              <div key={h.id} style={{ paddingTop: 18, borderTop: `1px solid ${t.ruleSoft}` }}>\n                <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 14 }}>\n                  <div>\n                    <div style={{ fontFamily: t.serif, fontSize: 22, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.1 }}>{h.name}</div>\n                    {h.note && <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 14, color: t.muted, marginTop: 4, lineHeight: 1.4 }}>{h.note}</div>}\n                  </div>\n                  <Mono style={{ fontSize: 10.5, color: t.faint, letterSpacing: \"0.08em\", flexShrink: 0, marginLeft: 12 }}>{hist.filter(Boolean).length} of {hist.length}</Mono>\n                </div>\n                <HabitHeatmap days={hist} accent={t.accent} faint={t.rule} todayBorder={t.accentSoft} onToggleToday={() => onToggleToday(h.id)} />\n              </div>\n            ) : (\n              <div key={h.id} style={{ display: \"grid\", gridTemplateColumns: \"1fr auto\", columnGap: 18, rowGap: 10, paddingTop: 18, borderTop: `1px solid ${t.ruleSoft}` }}>\n                <div>\n                  <div style={{ fontFamily: t.serif, fontSize: 22, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.1 }}>{h.name}</div>\n                  {h.note && <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 14, color: t.muted, marginTop: 4, lineHeight: 1.4 }}>{h.note}</div>}\n                </div>\n                <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"flex-end\", gap: 8 }}>\n                  <TallyRow days={h.days} accent={t.accent} faint={t.rule} todayBorder={t.accentSoft} onToggleToday={() => onToggleToday(h.id)} />\n                  <Mono style={{ fontSize: 10.5, color: t.faint, letterSpacing: \"0.08em\" }}>{h.days.filter(Boolean).length} of 7</Mono>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* ── Edit mode ── */}\n      {editMode && (\n        <div>\n          {habits.map((h, i) => (\n            <div key={h.id} style={{ borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n              {editingId === h.id ? (\n                <div style={{ padding: \"12px 0\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n                  <input autoFocus value={editVals.name}\n                    onChange={(e) => setEditVals((v) => ({ ...v, name: e.target.value }))}\n                    onBlur={() => commitEdit(h.id)}\n                    onKeyDown={(e) => { if (e.key === \"Enter\") { e.preventDefault(); commitEdit(h.id); } if (e.key === \"Escape\") setEditingId(null); }}\n                    placeholder=\"Habit name\" style={fieldStyle(17)} />\n                  <input value={editVals.note}\n                    onChange={(e) => setEditVals((v) => ({ ...v, note: e.target.value }))}\n                    onBlur={() => commitEdit(h.id)}\n                    placeholder=\"Note (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n                </div>\n              ) : (\n                <div style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"12px 0\" }}>\n                  <div style={{ flex: 1, cursor: \"pointer\" }} onClick={() => startEdit(h)}>\n                    <div style={{ fontFamily: t.serif, fontSize: 18, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{h.name}</div>\n                    {h.note && <div style={{ fontFamily: t.sans, fontSize: 12.5, color: t.muted, marginTop: 3 }}>{h.note}</div>}\n                  </div>\n                  <button type=\"button\" onClick={() => onDelete(h.id)} aria-label=\"Delete habit\"\n                    style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 20, lineHeight: 1, cursor: \"pointer\", padding: \"2px 4px\", flexShrink: 0 }}>\n                    ×\n                  </button>\n                </div>\n              )}\n            </div>\n          ))}\n\n          {habits.length === 0 && (\n            <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, marginBottom: 20 }}>\n              No habits yet.\n            </div>\n          )}\n\n          {/* Add habit form */}\n          {showAdd ? (\n            <div style={{ paddingTop: 16, borderTop: habits.length ? `1px solid ${t.rule}` : \"none\", display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n              <input autoFocus value={addForm.name}\n                onChange={(e) => setAddForm((f) => ({ ...f, name: e.target.value }))}\n                onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n                placeholder=\"Habit name\" style={fieldStyle(17)} />\n              <input value={addForm.note}\n                onChange={(e) => setAddForm((f) => ({ ...f, note: e.target.value }))}\n                placeholder=\"Note (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n              <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n                <button type=\"button\" onClick={submitAdd}\n                  style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n                  Add\n                </button>\n                <button type=\"button\" onClick={() => { setShowAdd(false); setAddForm({ name: \"\", note: \"\" }); }}\n                  style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n                  cancel\n                </button>\n              </div>\n            </div>\n          ) : (\n            <button type=\"button\" onClick={() => setShowAdd(true)}\n              style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"14px 0 0\" }}>\n              + Add habit\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ColophonQuote({ t }) {\n  return (\n    <div style={{ borderTop: `1px solid ${t.ruleSoft}`, paddingTop: 22, marginTop: 8 }}>\n      <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 16, lineHeight: 1.5, color: t.muted, letterSpacing: \"-0.005em\" }}>\n        \"You do not rise to the level of your goals.<br />\n        You fall to the level of your systems.\"\n      </div>\n      <Smallcaps color={t.faint} style={{ marginTop: 10 }}>— a note to self</Smallcaps>\n    </div>\n  );\n}\n\nfunction TabBar({ t, tab, setTab }) {\n  const items = [\n    { id: \"today\",   label: \"Today\",     icon: \"anchor\" },\n    { id: \"habits\",  label: \"Habits\",    icon: \"flame\"  },\n    { id: \"metrics\", label: \"Metrics\",   icon: \"chart\"  },\n    { id: \"home\",    label: \"Home list\", icon: \"list\"   },\n  ];\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", borderTop: `1px solid ${t.rule}`, padding: \"14px 12px 18px\", background: t.bg }}>\n      {items.map((it) => {\n        const active = it.id === tab;\n        return (\n          <button key={it.id} type=\"button\" onClick={() => setTab(it.id)}\n            style={{ appearance: \"none\", background: \"transparent\", border: \"none\", display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 4, cursor: \"pointer\", padding: 4 }}>\n            <TabIcon name={it.icon} color={active ? t.ink : t.faint} />\n            <span style={{ fontFamily: t.serif, fontStyle: active ? \"italic\" : \"normal\", fontSize: 11.5, letterSpacing: \"0.01em\", color: active ? t.ink : t.muted, fontWeight: 400 }}>\n              {it.label}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction TabIcon({ name, color }) {\n  const p = { width: 16, height: 16, viewBox: \"0 0 16 16\", fill: \"none\", stroke: color, strokeWidth: 1.2, strokeLinecap: \"round\", strokeLinejoin: \"round\" };\n  if (name === \"anchor\") return <svg {...p}><circle cx=\"8\" cy=\"3.5\" r=\"1.4\" /><path d=\"M8 5v9\" /><path d=\"M3 11c0 2 2.2 3.5 5 3.5s5-1.5 5-3.5\" /><path d=\"M5.5 7.5h5\" /></svg>;\n  if (name === \"flame\")  return <svg {...p}><path d=\"M8 14c-2.5 0-4-1.6-4-3.6 0-1.5 1-2.5 1.6-3 .2-.2.5-.1.5.2 0 .8.4 1.2.8 1.2.5 0 .8-.4.7-1.2-.2-1.6.4-3.4 1.8-4.4.3-.2.7 0 .6.4-.3 1.4.4 2 1.3 3 .8.9 1.2 1.9 1.2 3 .1 2.4-1.7 4.4-4.5 4.4Z\" /></svg>;\n  if (name === \"chart\")  return <svg {...p}><path d=\"M2.5 11.5 6 7.5l2.5 2 5-5\" /><path d=\"M9.5 4.5h4v4\" /></svg>;\n  return <svg {...p}><path d=\"M5 4h8.5\" /><path d=\"M5 8h8.5\" /><path d=\"M5 12h8.5\" /><circle cx=\"2.6\" cy=\"4\" r=\".7\" fill={color} stroke=\"none\" /><circle cx=\"2.6\" cy=\"8\" r=\".7\" fill={color} stroke=\"none\" /><circle cx=\"2.6\" cy=\"12\" r=\".7\" fill={color} stroke=\"none\" /></svg>;\n}\n\n// ─────────────────────────────────────────────────────────────\n// Screens — shared header + per-tab bodies\n// ─────────────────────────────────────────────────────────────\nfunction ScreenHeader({ t, kicker, title, subtitle }) {\n  return (\n    <div>\n      <Smallcaps color={t.muted}>{kicker}</Smallcaps>\n      <div style={{ fontFamily: t.serif, fontSize: 46, lineHeight: 0.96, fontWeight: t.bigWeight, letterSpacing: t.bigLetter, color: t.ink, marginTop: 14, fontFeatureSettings: t.serifFeatures }}>\n        {title}\n      </div>\n      {subtitle && (\n        <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontWeight: 300, fontSize: 15.5, lineHeight: 1.4, color: t.muted, marginTop: 10 }}>\n          {subtitle}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction PlaceholderNote({ t, children }) {\n  return (\n    <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 16, color: t.faint, lineHeight: 1.6 }}>\n      {children}\n    </div>\n  );\n}\n\nfunction HabitsScreen({ t, habits, onToggleToday, onAdd, onUpdate, onDelete }) {\n  const [editMode, setEditMode] = useState(false);\n  return (\n    <div>\n      <ScreenHeader t={t} kicker=\"Practice · daily\" title=\"Habits\" subtitle=\"The small things, kept — the last four weeks at a glance.\" />\n      <Spacer h={36} />\n      <Habits t={t} habits={habits} editMode={editMode} setEditMode={setEditMode}\n        onToggleToday={onToggleToday} onAdd={onAdd} onUpdate={onUpdate} onDelete={onDelete} wide />\n      <Spacer h={40} />\n    </div>\n  );\n}\n\nfunction formatDate(iso) {\n  if (!iso) return \"\";\n  const d = new Date(iso);\n  if (isNaN(d.getTime())) return \"\";\n  return d.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n\nfunction Sparkline({ t, points, w = 300, h = 56 }) {\n  if (!points.length) return null;\n  const min = 1, max = 5;\n  const x = (fx) => Math.max(0, Math.min(1, fx)) * w;\n  const y = (v) => h - ((Math.max(min, Math.min(max, v)) - min) / (max - min)) * h;\n  return (\n    <svg width=\"100%\" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio=\"none\" style={{ display: \"block\", overflow: \"visible\" }}>\n      <line x1=\"0\" y1={h} x2={w} y2={h} stroke={t.ruleSoft} strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n      {points.length === 1 ? (\n        <circle cx={x(points[0].fx)} cy={y(points[0].v)} r=\"2.5\" fill={t.accent} />\n      ) : (\n        <polyline points={points.map((p) => `${x(p.fx).toFixed(1)},${y(p.v).toFixed(1)}`).join(\" \")}\n          fill=\"none\" stroke={t.accent} strokeWidth=\"1.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n      )}\n    </svg>\n  );\n}\n\nfunction EnergyTrend({ t, energy, days, date }) {\n  // Position points by actual date within the window so gaps in logging\n  // read as gaps, not as adjacent days.\n  const end = Date.parse((date || (energy.length ? energy[energy.length - 1].date : \"\")) + \"T00:00:00Z\");\n  const span = Math.max(1, (days - 1) * 86400000);\n  const start = end - span;\n  const points = energy\n    .map((e) => ({ v: Number(e.energy), fx: (Date.parse(e.date + \"T00:00:00Z\") - start) / span }))\n    .filter((p) => !isNaN(p.v) && isFinite(p.fx));\n  const avg = points.length ? points.reduce((a, p) => a + p.v, 0) / points.length : 0;\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>Energy trend</Smallcaps>\n        <Smallcaps color={t.faint}><Mono>last {days} days</Mono></Smallcaps>\n      </div>\n      {points.length === 0 ? (\n        <PlaceholderNote t={t}>No energy logged yet.</PlaceholderNote>\n      ) : (\n        <React.Fragment>\n          <Sparkline t={t} points={points} />\n          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginTop: 14 }}>\n            <span style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted }}>\n              {points.length} {points.length === 1 ? \"evening\" : \"evenings\"} logged\n            </span>\n            <span style={{ fontFamily: t.mono, fontSize: 13, color: t.ink, letterSpacing: \"0.04em\" }}>\n              avg {avg.toFixed(1)}<span style={{ color: t.faint }}> / 5</span>\n            </span>\n          </div>\n        </React.Fragment>\n      )}\n    </div>\n  );\n}\n\nfunction Stat({ t, value, label }) {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"flex-end\", gap: 3 }}>\n      <Mono style={{ fontSize: 14, color: t.ink, letterSpacing: \"0.02em\" }}>{value}</Mono>\n      <Smallcaps color={t.faint} style={{ fontSize: 9 }}>{label}</Smallcaps>\n    </div>\n  );\n}\n\nfunction HabitConsistency({ t, habits, days }) {\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>Habit consistency</Smallcaps>\n        <Smallcaps color={t.faint}><Mono>last {days} days</Mono></Smallcaps>\n      </div>\n      {habits.length === 0 ? (\n        <PlaceholderNote t={t}>No habits to measure yet.</PlaceholderNote>\n      ) : (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n          {habits.map((h) => (\n            <div key={h.id} style={{ display: \"grid\", gridTemplateColumns: \"1fr auto\", columnGap: 16, paddingTop: 16, borderTop: `1px solid ${t.ruleSoft}`, alignItems: \"baseline\" }}>\n              <div style={{ fontFamily: t.serif, fontSize: 19, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.2 }}>{h.name}</div>\n              <div style={{ display: \"flex\", gap: 20, alignItems: \"baseline\" }}>\n                <Stat t={t} value={h.currentStreak} label=\"now\" />\n                <Stat t={t} value={h.longestStreak} label=\"best\" />\n                <Stat t={t} value={`${h.count}/${days}`} label=\"days\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction OneThingHistory({ t, oneThing }) {\n  const { list, total, completed } = oneThing;\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n        <Smallcaps color={t.muted}>One Thing history</Smallcaps>\n        {total > 0 && <Smallcaps color={t.faint}><Mono>{completed} of {total} done</Mono></Smallcaps>}\n      </div>\n      {list.length === 0 ? (\n        <PlaceholderNote t={t}>No completed focuses yet.</PlaceholderNote>\n      ) : (\n        <div>\n          {list.map((o, i) => (\n            <div key={o.id} style={{ display: \"flex\", alignItems: \"baseline\", gap: 12, padding: \"12px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n              <span style={{ color: t.accent, fontFamily: t.mono, fontSize: 11, flexShrink: 0 }}>✓</span>\n              <div style={{ flex: 1 }}>\n                <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{o.title}</div>\n                {o.category && <div style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted, marginTop: 2 }}>{o.category}</div>}\n              </div>\n              <Mono style={{ fontSize: 11, color: t.faint, letterSpacing: \"0.04em\" }}>{formatDate(o.completed_at)}</Mono>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction MetricsScreen({ t, date }) {\n  const [data, setData]   = useState(null);\n  const [error, setError] = useState(null);\n\n  React.useEffect(() => {\n    let alive = true;\n    fetch(`/api/metrics?days=30&today=${date}`)\n      .then((r) => r.json())\n      .then((d) => { if (alive) setData(d); })\n      .catch((e) => { if (alive) setError(e.message); });\n    return () => { alive = false; };\n  }, []);\n\n  return (\n    <div>\n      <ScreenHeader t={t} kicker=\"The long view\" title=\"Metrics\" subtitle=\"Energy, habits, and what mattered — over time.\" />\n      <Spacer h={36} />\n      {error && <PlaceholderNote t={t}>Couldn't load metrics — {error}</PlaceholderNote>}\n      {!error && !data && <PlaceholderNote t={t}>Gathering the last 30 days…</PlaceholderNote>}\n      {data && (\n        <React.Fragment>\n          <EnergyTrend t={t} energy={data.energy} days={data.days} date={date} />\n          <Spacer h={40} /><Rule color={t.rule} /><Spacer h={32} />\n          <HabitConsistency t={t} habits={data.habits} days={data.days} />\n          <Spacer h={40} /><Rule color={t.rule} /><Spacer h={32} />\n          <OneThingHistory t={t} oneThing={data.oneThing} />\n          <Spacer h={40} />\n        </React.Fragment>\n      )}\n    </div>\n  );\n}\n\nfunction HomeScreen({ t, onFocus, onError }) {\n  const [items, setItems] = useState(null);\n  const [error, setError] = useState(null);\n\n  React.useEffect(() => {\n    let alive = true;\n    fetch(\"/api/notion/home-list\")\n      .then((r) => r.json())\n      .then((d) => {\n        if (!alive) return;\n        if (Array.isArray(d)) setItems(d);\n        else setError(d?.error || \"Unexpected response\");\n      })\n      .catch((e) => { if (alive) setError(e.message); });\n    return () => { alive = false; };\n  }, []);\n\n  const checkItem = async (it) => {\n    try {\n      await api(`/api/notion/home-list/${it.id}/check`, { method: \"POST\" });\n      setItems((prev) => (prev || []).filter((x) => x.id !== it.id));\n    } catch (e) { onError(e); }\n  };\n\n  const groups = useMemo(() => {\n    if (!items) return [];\n    const map = new Map();\n    items.forEach((it) => {\n      const cat = it.category || \"Other\";\n      if (!map.has(cat)) map.set(cat, []);\n      map.get(cat).push(it);\n    });\n    return [...map.entries()];\n  }, [items]);\n\n  return (\n    <div>\n      <ScreenHeader t={t} kicker=\"From Notion\" title=\"Home list\" subtitle=\"Check things off, or pick one as this week's focus.\" />\n      <Spacer h={36} />\n      {error && <PlaceholderNote t={t}>Couldn't reach Notion — {error}</PlaceholderNote>}\n      {!error && !items && <PlaceholderNote t={t}>Loading from Notion…</PlaceholderNote>}\n      {items && items.length === 0 && <PlaceholderNote t={t}>Your Home List is all clear.</PlaceholderNote>}\n      {groups.map(([cat, list], gi) => (\n        <div key={cat} style={{ marginBottom: gi === groups.length - 1 ? 0 : 30 }}>\n          <Smallcaps color={t.faint} style={{ marginBottom: 12 }}>{cat}</Smallcaps>\n          <div>\n            {list.map((it, i) => (\n              <div key={it.id} style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"11px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n                <div style={{ paddingTop: 2 }}>\n                  <Tick checked={false} onClick={() => checkItem(it)} t={t} size={16} />\n                </div>\n                <span style={{ flex: 1, fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{it.title}</span>\n                <button type=\"button\" onClick={() => onFocus(it)}\n                  style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: \"2px 0 0\", flexShrink: 0 }}>\n                  focus →\n                </button>\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Screen\n// ─────────────────────────────────────────────────────────────\nfunction HarbourToday({ tweaks, setTweak, data, onDataChange }) {\n  const t = useMemo(\n    () => buildTheme({ dark: tweaks.dark, palette: tweaks.palette, kit: tweaks.kit }),\n    [tweaks.dark, tweaks.palette, tweaks.kit],\n  );\n\n  const eveningLog = data.logs?.evening;\n  const [energy, setEnergy]     = useState(eveningLog?.energy ?? 3);\n  const [note, setNote]         = useState(eveningLog?.note ?? \"\");\n  const [gratitude, setGratitude] = useState(eveningLog?.gratitude ?? \"\");\n  const [letGo, setLetGo]       = useState(eveningLog?.let_go ?? \"\");\n  const [expanded, setExpanded] = useState(!!(eveningLog?.gratitude || eveningLog?.let_go));\n  const [saved, setSaved]       = useState(!!eveningLog);\n  const [tab, setTab]           = useState(\"today\");\n  const [clTab, setClTab]       = useState(\"evening\");\n  const [clEditMode, setClEditMode] = useState(false);\n  const [habitsEditMode, setHabitsEditMode] = useState(false);\n\n  // Transient error banner — surfaced whenever a save fails so the\n  // optimistic UI never silently lies.\n  const [flash, setFlash] = useState(null);\n  const flashTimer = React.useRef(null);\n  const report = (err) => {\n    setFlash(err && err.message ? err.message : \"Something went wrong\");\n    clearTimeout(flashTimer.current);\n    flashTimer.current = setTimeout(() => setFlash(null), 4000);\n  };\n\n  // ── Checklist toggle ────────────────────────────────────────\n  const toggleItem = async (id) => {\n    const list = clTab === \"morning\" ? data.morning : data.evening;\n    const item = list.find((x) => x.id === id);\n    const newDone = !item.done;\n    const key = clTab;\n    try {\n      await api(`/api/checklist/completions/${id}`, jsonOpts(\"PUT\", { done: newDone, date: data.date }));\n      onDataChange((prev) => ({ ...prev, [key]: prev[key].map((x) => x.id === id ? { ...x, done: newDone } : x) }));\n      if (saved) setSaved(false);\n    } catch (e) { report(e); }\n  };\n\n  // ── Checklist CRUD ──────────────────────────────────────────\n  const addItem = async (item) => {\n    try {\n      const newItem = await api(\"/api/checklist/items\", jsonOpts(\"POST\", item));\n      const key = item.session;\n      onDataChange((prev) => ({ ...prev, [key]: [...prev[key], { ...newItem, done: false }] }));\n    } catch (e) { report(e); }\n  };\n\n  const updateItem = async (id, updates) => {\n    try {\n      await api(`/api/checklist/items/${id}`, jsonOpts(\"PUT\", updates));\n      onDataChange((prev) => ({\n        ...prev,\n        morning: prev.morning.map((x) => x.id === id ? { ...x, ...updates } : x),\n        evening: prev.evening.map((x) => x.id === id ? { ...x, ...updates } : x),\n      }));\n    } catch (e) { report(e); }\n  };\n\n  const removeItem = async (id) => {\n    try {\n      await api(`/api/checklist/items/${id}`, { method: \"DELETE\" });\n      onDataChange((prev) => ({\n        ...prev,\n        morning: prev.morning.filter((x) => x.id !== id),\n        evening: prev.evening.filter((x) => x.id !== id),\n      }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Save evening log ────────────────────────────────────────\n  const saveLog = async () => {\n    try {\n      await api(\"/api/logs\", jsonOpts(\"POST\", { date: data.date, session: \"evening\", energy, note, gratitude, let_go: letGo }));\n      setSaved(true);\n    } catch (e) { report(e); }\n  };\n\n  // ── One Thing ───────────────────────────────────────────────\n  const handleCompleteOneThing = async () => {\n    try {\n      await api(`/api/one-thing/${data.oneThing.id}/complete`, jsonOpts(\"PUT\", {}));\n      onDataChange((prev) => ({ ...prev, oneThing: null }));\n    } catch (e) { report(e); }\n  };\n\n  const handleSetOneThing = async (title, category) => {\n    try {\n      const oneThing = await api(\"/api/one-thing\", jsonOpts(\"POST\", { title, category, weekStart: data.weekStart }));\n      onDataChange((prev) => ({ ...prev, oneThing }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Evidence ────────────────────────────────────────────────\n  const addEvidence = async (entry) => {\n    try {\n      const newEntry = await api(\"/api/evidence\", jsonOpts(\"POST\", { ...entry, date: data.date }));\n      onDataChange((prev) => ({ ...prev, evidence: [...(prev.evidence ?? []), newEntry] }));\n    } catch (e) { report(e); }\n  };\n\n  const removeEvidence = async (id) => {\n    try {\n      await api(`/api/evidence/${id}`, { method: \"DELETE\" });\n      onDataChange((prev) => ({ ...prev, evidence: (prev.evidence ?? []).filter((x) => x.id !== id) }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Habits ──────────────────────────────────────────────────\n  const toggleHabitToday = async (id) => {\n    const habit = data.habits.find((h) => h.id === id);\n    if (!habit) return;\n    const newDone = !habit.days[habit.days.length - 1];\n    try {\n      await api(`/api/habit-completions/${id}/${data.date}`, jsonOpts(\"PUT\", { done: newDone }));\n      const flipLast = (arr) => arr.map((v, i) => i === arr.length - 1 ? newDone : v);\n      onDataChange((prev) => ({\n        ...prev,\n        habits: prev.habits.map((h) =>\n          h.id === id ? { ...h, days: flipLast(h.days), history: h.history ? flipLast(h.history) : h.history } : h),\n      }));\n    } catch (e) { report(e); }\n  };\n\n  const addHabit = async (habit) => {\n    try {\n      const newHabit = await api(\"/api/habits\", jsonOpts(\"POST\", habit));\n      onDataChange((prev) => ({ ...prev, habits: [...prev.habits, { ...newHabit, days: Array(7).fill(false), history: Array(28).fill(false) }] }));\n    } catch (e) { report(e); }\n  };\n\n  const updateHabit = async (id, updates) => {\n    try {\n      await api(`/api/habits/${id}`, jsonOpts(\"PUT\", updates));\n      onDataChange((prev) => ({ ...prev, habits: prev.habits.map((h) => h.id === id ? { ...h, ...updates } : h) }));\n    } catch (e) { report(e); }\n  };\n\n  const removeHabit = async (id) => {\n    try {\n      await api(`/api/habits/${id}`, { method: \"DELETE\" });\n      onDataChange((prev) => ({ ...prev, habits: prev.habits.filter((h) => h.id !== id) }));\n    } catch (e) { report(e); }\n  };\n\n  // ── Derived ─────────────────────────────────────────────────\n  const activeList = clTab === \"morning\" ? data.morning : data.evening;\n  const counts = {\n    morning: `${data.morning.filter((x) => x.done).length}/${data.morning.length}`,\n    evening: `${data.evening.filter((x) => x.done).length}/${data.evening.length}`,\n  };\n\n  const cssVars = { \"--hb-bg\": t.bg, \"--hb-ink\": t.ink, \"--hb-muted\": t.muted, \"--hb-rule\": t.rule, \"--hb-accent\": t.accent, \"--hb-mono\": t.mono, \"--hb-serif\": t.serif, \"--hb-sans\": t.sans };\n\n  return (\n    <div style={{ ...cssVars, position: \"relative\", width: \"100%\", height: \"100%\", background: t.bg, color: t.ink, fontFamily: t.sans, display: \"flex\", flexDirection: \"column\", overflow: \"hidden\" }}>\n      {flash && (\n        <div style={{ position: \"absolute\", top: 58, left: 24, right: 24, zIndex: 20, background: t.ink, color: t.bg, fontFamily: t.sans, fontSize: 12.5, padding: \"10px 14px\", textAlign: \"center\" }}>\n          {flash}\n        </div>\n      )}\n      <div style={{ flex: 1, overflowY: \"auto\", overflowX: \"hidden\", padding: \"78px 28px 24px\" }}>\n        {tab === \"today\" && (\n        <React.Fragment>\n        <Masthead t={t} />\n\n        <Spacer h={42} />\n        <OneThing t={t} oneThing={data.oneThing} weekStart={data.weekStart} date={data.date} onComplete={handleCompleteOneThing} onSet={handleSetOneThing} />\n\n        <Spacer h={42} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <HowWasToday t={t} energy={energy}\n          setEnergy={(v) => { setEnergy(v); if (saved) setSaved(false); }}\n          note={note}\n          setNote={(v) => { setNote(v); if (saved) setSaved(false); }}\n          gratitude={gratitude}\n          setGratitude={(v) => { setGratitude(v); if (saved) setSaved(false); }}\n          letGo={letGo}\n          setLetGo={(v) => { setLetGo(v); if (saved) setSaved(false); }}\n          expanded={expanded} setExpanded={setExpanded} onSave={saveLog} saved={saved} />\n\n        <Spacer h={44} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <Evidence t={t} items={data.evidence ?? []} onAdd={addEvidence} onDelete={removeEvidence} />\n\n        <Spacer h={44} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <Checklist t={t} list={activeList} toggle={toggleItem} tab={clTab} setTab={setClTab} counts={counts}\n          editMode={clEditMode} setEditMode={setClEditMode}\n          onAdd={addItem} onUpdate={updateItem} onDelete={removeItem} />\n\n        <Spacer h={44} />\n        <Rule color={t.rule} />\n        <Spacer h={32} />\n        <Habits t={t} habits={data.habits} editMode={habitsEditMode} setEditMode={setHabitsEditMode}\n          onToggleToday={toggleHabitToday} onAdd={addHabit} onUpdate={updateHabit} onDelete={removeHabit} />\n\n        <Spacer h={36} />\n        <ColophonQuote t={t} />\n        <Spacer h={40} />\n        </React.Fragment>\n        )}\n\n        {tab === \"habits\" && (\n          <HabitsScreen t={t} habits={data.habits}\n            onToggleToday={toggleHabitToday} onAdd={addHabit} onUpdate={updateHabit} onDelete={removeHabit} />\n        )}\n\n        {tab === \"metrics\" && <MetricsScreen t={t} date={data.date} />}\n\n        {tab === \"home\" && (\n          <HomeScreen t={t} onError={report}\n            onFocus={(it) => { handleSetOneThing(it.title, it.category); setTab(\"today\"); }} />\n        )}\n      </div>\n      <TabBar t={t} tab={tab} setTab={setTab} />\n    </div>\n  );\n}\n\nfunction Spacer({ h }) {\n  return <div style={{ height: h }} />;\n}\n\nObject.assign(window, { HarbourToday, buildTheme, PALETTES, TYPE_KITS });\n","createdAt",["D",1784420612544],"branchVersion","branchId","205d39c6-554e-11f1-a855-ee650bb23af1","id","205aa06c-554e-11f1-a855-ee650bb23af1","Harbour",["D",1779392946380],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","019d0bcc-a320-7399-8f4f-7d3875d937d4","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d0bcc-a321-75bc-84e3-07d236c0ab73","tursoName","205aa06c554e11f1a855ee650bb23af1","tursoHostname","205aa06c554e11f1a855ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789494036282],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",113,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","brenwildt","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zNmFFblZBY3ZoNWhQeXZwUlBUTHZoSkhDeUEifQ","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":257,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":258,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":259,"_82":260,"_84":261,"_86":25},"tree",[200,204,205,206,207,208,209],"files",[200,201,202,203,204,205,206,207,208,209],"counts",{"_189":61,"_190":191,"_192":61,"_193":194,"_195":196},"contents",[128,129,130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":182,"_32":183,"_30":184,"_138":-5,"_41":42,"_40":185,"_140":123,"_38":186,"_13":61,"_33":187,"_35":-5,"_24":25,"_144":-5,"_27":188},{"_43":174,"_32":175,"_30":176,"_138":-5,"_41":42,"_40":177,"_140":25,"_38":178,"_13":179,"_33":20,"_35":180,"_24":25,"_144":-5,"_27":181},{"_43":166,"_32":167,"_30":168,"_138":-5,"_41":42,"_40":169,"_140":25,"_38":170,"_13":171,"_33":34,"_35":172,"_24":25,"_144":-5,"_27":173},{"_43":162,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":163,"_13":164,"_33":34,"_35":37,"_24":25,"_144":-5,"_27":165},{"_43":153,"_32":154,"_30":155,"_138":-5,"_41":42,"_40":156,"_140":25,"_38":157,"_13":158,"_33":159,"_35":160,"_24":25,"_144":-5,"_27":161},{"_43":146,"_32":147,"_30":148,"_138":-5,"_41":42,"_40":149,"_140":123,"_38":150,"_13":142,"_33":34,"_35":151,"_24":25,"_144":-5,"_27":152},{"_43":135,"_32":136,"_30":137,"_138":-5,"_41":42,"_40":139,"_140":123,"_38":141,"_13":142,"_33":34,"_35":143,"_24":25,"_144":-5,"_27":145},"a514c0de-554f-11f1-9c43-ee650bb23af1","tweaks-panel.tsx","ccbd29b0-554e-11f1-9900-ee650bb23af1","parentId",19,"latest",["D",1779393598501],2,"// tweaks-panel.jsx\n// Reusable Tweaks shell + form-control helpers.\n//\n// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,\n// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so\n// individual prototypes don't re-roll it. Ships a consistent set of controls so you\n// don't hand-draw <input type=\"range\">, segmented radios, steppers, etc.\n//\n// Usage (in an HTML file that loads React + Babel):\n//\n//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{\n//     \"primaryColor\": \"#D97757\",\n//     \"palette\": [\"#D97757\", \"#29261b\", \"#f6f4ef\"],\n//     \"fontSize\": 16,\n//     \"density\": \"regular\",\n//     \"dark\": false\n//   }/*EDITMODE-END*/;\n//\n//   function App() {\n//     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);\n//     return (\n//       <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>\n//         Hello\n//         <TweaksPanel>\n//           <TweakSection label=\"Typography\" />\n//           <TweakSlider label=\"Font size\" value={t.fontSize} min={10} max={32} unit=\"px\"\n//                        onChange={(v) => setTweak('fontSize', v)} />\n//           <TweakRadio  label=\"Density\" value={t.density}\n//                        options={['compact', 'regular', 'comfy']}\n//                        onChange={(v) => setTweak('density', v)} />\n//           <TweakSection label=\"Theme\" />\n//           <TweakColor  label=\"Primary\" value={t.primaryColor}\n//                        options={['#D97757', '#2A6FDB', '#1F8A5B', '#7A5AE0']}\n//                        onChange={(v) => setTweak('primaryColor', v)} />\n//           <TweakColor  label=\"Palette\" value={t.palette}\n//                        options={[['#D97757', '#29261b', '#f6f4ef'],\n//                                  ['#475569', '#0f172a', '#f1f5f9']]}\n//                        onChange={(v) => setTweak('palette', v)} />\n//           <TweakToggle label=\"Dark mode\" value={t.dark}\n//                        onChange={(v) => setTweak('dark', v)} />\n//         </TweaksPanel>\n//       </div>\n//     );\n//   }\n//\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst __TWEAKS_STYLE = `\n  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;\n    max-height:calc(100vh - 32px);display:flex;flex-direction:column;\n    transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom right;\n    background:rgba(250,249,247,.78);color:#29261b;\n    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);\n    border:.5px solid rgba(255,255,255,.6);border-radius:14px;\n    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);\n    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}\n  .twk-hd{display:flex;align-items:center;justify-content:space-between;\n    padding:10px 8px 10px 14px;cursor:move;user-select:none}\n  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}\n  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);\n    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}\n  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}\n  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;\n    overflow-y:auto;overflow-x:hidden;min-height:0;\n    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}\n  .twk-body::-webkit-scrollbar{width:8px}\n  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}\n  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;\n    border:2px solid transparent;background-clip:content-box}\n  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);\n    border:2px solid transparent;background-clip:content-box}\n  .twk-row{display:flex;flex-direction:column;gap:5px}\n  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}\n  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;\n    color:rgba(41,38,27,.72)}\n  .twk-lbl>span:first-child{font-weight:500}\n  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}\n\n  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n    color:rgba(41,38,27,.45);padding:10px 0 0}\n  .twk-sect:first-child{padding-top:0}\n\n  .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;\n    border:.5px solid rgba(0,0,0,.1);border-radius:7px;\n    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}\n  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}\n  select.twk-field{padding-right:22px;\n    background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>\");\n    background-repeat:no-repeat;background-position:right 8px center}\n\n  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;\n    border-radius:999px;background:rgba(0,0,0,.12);outline:none}\n  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;\n    width:14px;height:14px;border-radius:50%;background:#fff;\n    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}\n  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;\n    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}\n\n  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;\n    background:rgba(0,0,0,.06);user-select:none}\n  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;\n    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);\n    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}\n  .twk-seg.dragging .twk-seg-thumb{transition:none}\n  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;\n    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;\n    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;\n    overflow-wrap:anywhere}\n\n  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;\n    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}\n  .twk-toggle[data-on=\"1\"]{background:#34c759}\n  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;\n    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}\n  .twk-toggle[data-on=\"1\"] i{transform:translateX(14px)}\n\n  .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:26px;padding:0 0 0 8px;\n    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}\n  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;\n    user-select:none;padding-right:8px}\n  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;\n    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;\n    outline:none;color:inherit;-moz-appearance:textfield}\n  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{\n    -webkit-appearance:none;margin:0}\n  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}\n\n  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;\n    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}\n  .twk-btn:hover{background:rgba(0,0,0,.88)}\n  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}\n  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}\n\n  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;\n    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;\n    background:transparent;flex-shrink:0}\n  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}\n  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}\n  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}\n\n  .twk-chips{display:flex;gap:6px}\n  .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;\n    padding:0;border:0;border-radius:6px;overflow:hidden;cursor:default;\n    box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);\n    transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}\n  .twk-chip:hover{transform:translateY(-1px);\n    box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}\n  .twk-chip[data-on=\"1\"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),\n    0 2px 6px rgba(0,0,0,.15)}\n  .twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;\n    display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}\n  .twk-chip>span>i{flex:1;box-shadow:0 -1px 0 rgba(0,0,0,.1)}\n  .twk-chip>span>i:first-child{box-shadow:none}\n  .twk-chip svg{position:absolute;top:6px;left:6px;width:13px;height:13px;\n    filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}\n`;\n\n// ── useTweaks ───────────────────────────────────────────────────────────────\n// Single source of truth for tweak values. setTweak persists via the host\n// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).\nfunction useTweaks(defaults) {\n  const [values, setValues] = React.useState(defaults);\n  // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a\n  // useState-style call doesn't write a \"[object Object]\" key into the persisted\n  // JSON block.\n  const setTweak = React.useCallback((keyOrEdits, val) => {\n    const edits = typeof keyOrEdits === \"object\" && keyOrEdits !== null\n      ? keyOrEdits\n      : { [keyOrEdits]: val };\n    setValues((prev) => ({ ...prev, ...edits }));\n    window.parent.postMessage({ type: \"__edit_mode_set_keys\", edits }, \"*\");\n    // Same-window signal so in-page listeners (deck-stage rail thumbnails)\n    // can react — the parent message only reaches the host, not peers.\n    window.dispatchEvent(new CustomEvent(\"tweakchange\", { detail: edits }));\n  }, []);\n  return [values, setTweak];\n}\n\n// ── TweaksPanel ─────────────────────────────────────────────────────────────\n// Floating shell. Registers the protocol listener BEFORE announcing\n// availability — if the announce ran first, the host's activate could land\n// before our handler exists and the toolbar toggle would silently no-op.\n// The close button posts __edit_mode_dismissed so the host's toolbar toggle\n// flips off in lockstep; the host echoes __deactivate_edit_mode back which\n// is what actually hides the panel.\nfunction TweaksPanel({ title = \"Tweaks\", noDeckControls = false, children }) {\n  const [open, setOpen] = React.useState(false);\n  const dragRef = React.useRef(null);\n  // Auto-inject a rail toggle when a <deck-stage> is on the page. The\n  // toggle drives the deck's per-viewer _railVisible via window message;\n  // state is mirrored from the same localStorage key the deck reads so\n  // the control reflects reality across reloads. The mechanism is the\n  // message — authors who want custom placement can post it directly\n  // and pass noDeckControls to suppress this one.\n  const hasDeckStage = React.useMemo(\n    () =>\n      typeof document !== \"undefined\" && !!document.querySelector(\"deck-stage\"),\n    [],\n  );\n  // deck-stage enables its rail in connectedCallback, but this panel can\n  // mount before that element has upgraded. The initial read catches the\n  // common case; the listener covers mounting first. (Older deck-stage.js\n  // copies still wait for the host's __omelette_rail_enabled postMessage —\n  // same listener handles those.)\n  const [railEnabled, setRailEnabled] = React.useState(\n    () => hasDeckStage && !!document.querySelector(\"deck-stage\")?._railEnabled,\n  );\n  React.useEffect(() => {\n    if (!hasDeckStage || railEnabled) return undefined;\n    const onMsg = (e) => {\n      if (e.data && e.data.type === \"__omelette_rail_enabled\") {\n        setRailEnabled(true);\n      }\n    };\n    window.addEventListener(\"message\", onMsg);\n    return () => window.removeEventListener(\"message\", onMsg);\n  }, [hasDeckStage, railEnabled]);\n  const [railVisible, setRailVisible] = React.useState(() => {\n    try {\n      return localStorage.getItem(\"deck-stage.railVisible\") !== \"0\";\n    } catch (e) {\n      return true;\n    }\n  });\n  const toggleRail = (on) => {\n    setRailVisible(on);\n    window.postMessage({ type: \"__deck_rail_visible\", on }, \"*\");\n  };\n  const offsetRef = React.useRef({ x: 16, y: 16 });\n  const PAD = 16;\n\n  const clampToViewport = React.useCallback(() => {\n    const panel = dragRef.current;\n    if (!panel) return;\n    const w = panel.offsetWidth, h = panel.offsetHeight;\n    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);\n    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);\n    offsetRef.current = {\n      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),\n      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),\n    };\n    panel.style.right = offsetRef.current.x + \"px\";\n    panel.style.bottom = offsetRef.current.y + \"px\";\n  }, []);\n\n  React.useEffect(() => {\n    if (!open) return;\n    clampToViewport();\n    if (typeof ResizeObserver === \"undefined\") {\n      window.addEventListener(\"resize\", clampToViewport);\n      return () => window.removeEventListener(\"resize\", clampToViewport);\n    }\n    const ro = new ResizeObserver(clampToViewport);\n    ro.observe(document.documentElement);\n    return () => ro.disconnect();\n  }, [open, clampToViewport]);\n\n  React.useEffect(() => {\n    const onMsg = (e) => {\n      const t = e?.data?.type;\n      if (t === \"__activate_edit_mode\") setOpen(true);\n      else if (t === \"__deactivate_edit_mode\") setOpen(false);\n    };\n    window.addEventListener(\"message\", onMsg);\n    window.parent.postMessage({ type: \"__edit_mode_available\" }, \"*\");\n    return () => window.removeEventListener(\"message\", onMsg);\n  }, []);\n\n  const dismiss = () => {\n    setOpen(false);\n    window.parent.postMessage({ type: \"__edit_mode_dismissed\" }, \"*\");\n  };\n\n  const onDragStart = (e) => {\n    const panel = dragRef.current;\n    if (!panel) return;\n    const r = panel.getBoundingClientRect();\n    const sx = e.clientX, sy = e.clientY;\n    const startRight = window.innerWidth - r.right;\n    const startBottom = window.innerHeight - r.bottom;\n    const move = (ev) => {\n      offsetRef.current = {\n        x: startRight - (ev.clientX - sx),\n        y: startBottom - (ev.clientY - sy),\n      };\n      clampToViewport();\n    };\n    const up = () => {\n      window.removeEventListener(\"mousemove\", move);\n      window.removeEventListener(\"mouseup\", up);\n    };\n    window.addEventListener(\"mousemove\", move);\n    window.addEventListener(\"mouseup\", up);\n  };\n\n  if (!open) return null;\n  return (\n    <>\n      <style>{__TWEAKS_STYLE}</style>\n      <div\n        ref={dragRef}\n        className=\"twk-panel\"\n        data-noncommentable=\"\"\n        style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}\n      >\n        <div className=\"twk-hd\" onMouseDown={onDragStart}>\n          <b>{title}</b>\n          <button\n            className=\"twk-x\"\n            aria-label=\"Close tweaks\"\n            onMouseDown={(e) => e.stopPropagation()}\n            onClick={dismiss}\n          >\n            ✕\n          </button>\n        </div>\n        <div className=\"twk-body\">\n          {children}\n          {hasDeckStage && railEnabled && !noDeckControls && (\n            <TweakSection label=\"Deck\">\n              <TweakToggle\n                label=\"Thumbnail rail\"\n                value={railVisible}\n                onChange={toggleRail}\n              />\n            </TweakSection>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n\n// ── Layout helpers ──────────────────────────────────────────────────────────\n\nfunction TweakSection({ label, children }) {\n  return (\n    <>\n      <div className=\"twk-sect\">{label}</div>\n      {children}\n    </>\n  );\n}\n\nfunction TweakRow({ label, value, children, inline = false }) {\n  return (\n    <div className={inline ? \"twk-row twk-row-h\" : \"twk-row\"}>\n      <div className=\"twk-lbl\">\n        <span>{label}</span>\n        {value != null && <span className=\"twk-val\">{value}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n// ── Controls ────────────────────────────────────────────────────────────────\n\nfunction TweakSlider(\n  { label, value, min = 0, max = 100, step = 1, unit = \"\", onChange },\n) {\n  return (\n    <TweakRow label={label} value={`${value}${unit}`}>\n      <input\n        type=\"range\"\n        className=\"twk-slider\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(e) => onChange(Number(e.target.value))}\n      />\n    </TweakRow>\n  );\n}\n\nfunction TweakToggle({ label, value, onChange }) {\n  return (\n    <div className=\"twk-row twk-row-h\">\n      <div className=\"twk-lbl\">\n        <span>{label}</span>\n      </div>\n      <button\n        type=\"button\"\n        className=\"twk-toggle\"\n        data-on={value ? \"1\" : \"0\"}\n        role=\"switch\"\n        aria-checked={!!value}\n        onClick={() => onChange(!value)}\n      >\n        <i />\n      </button>\n    </div>\n  );\n}\n\nfunction TweakRadio({ label, value, options, onChange }) {\n  const trackRef = React.useRef(null);\n  const [dragging, setDragging] = React.useState(false);\n  // The active value is read by pointer-move handlers attached for the lifetime\n  // of a drag — ref it so a stale closure doesn't fire onChange for every move.\n  const valueRef = React.useRef(value);\n  valueRef.current = value;\n\n  // Segments wrap mid-word once per-segment width runs out. The track is\n  // ~248px (280 panel − 28 body pad − 4 seg pad), each button loses 12px\n  // to its own padding, and 11.5px system-ui averages ~6.3px/char — so 2\n  // options fit ~16 chars each, 3 fit ~10. Past that (or >3 options), fall\n  // back to a dropdown rather than wrap.\n  const labelLen = (o) => String(typeof o === \"object\" ? o.label : o).length;\n  const maxLen = options.reduce((m, o) => Math.max(m, labelLen(o)), 0);\n  const fitsAsSegments = maxLen <= ({ 2: 16, 3: 10 }[options.length] ?? 0);\n  if (!fitsAsSegments) {\n    // <select> emits strings — map back to the original option value so the\n    // fallback stays type-preserving (numbers, booleans) like the segment path.\n    const resolve = (s) => {\n      const m = options.find((o) =>\n        String(typeof o === \"object\" ? o.value : o) === s\n      );\n      return m === undefined ? s : typeof m === \"object\" ? m.value : m;\n    };\n    return (\n      <TweakSelect\n        label={label}\n        value={value}\n        options={options}\n        onChange={(s) => onChange(resolve(s))}\n      />\n    );\n  }\n  const opts = options.map((\n    o,\n  ) => (typeof o === \"object\" ? o : { value: o, label: o }));\n  const idx = Math.max(0, opts.findIndex((o) => o.value === value));\n  const n = opts.length;\n\n  const segAt = (clientX) => {\n    const r = trackRef.current.getBoundingClientRect();\n    const inner = r.width - 4;\n    const i = Math.floor(((clientX - r.left - 2) / inner) * n);\n    return opts[Math.max(0, Math.min(n - 1, i))].value;\n  };\n\n  const onPointerDown = (e) => {\n    setDragging(true);\n    const v0 = segAt(e.clientX);\n    if (v0 !== valueRef.current) onChange(v0);\n    const move = (ev) => {\n      if (!trackRef.current) return;\n      const v = segAt(ev.clientX);\n      if (v !== valueRef.current) onChange(v);\n    };\n    const up = () => {\n      setDragging(false);\n      window.removeEventListener(\"pointermove\", move);\n      window.removeEventListener(\"pointerup\", up);\n    };\n    window.addEventListener(\"pointermove\", move);\n    window.addEventListener(\"pointerup\", up);\n  };\n\n  return (\n    <TweakRow label={label}>\n      <div\n        ref={trackRef}\n        role=\"radiogroup\"\n        onPointerDown={onPointerDown}\n        className={dragging ? \"twk-seg dragging\" : \"twk-seg\"}\n      >\n        <div\n          className=\"twk-seg-thumb\"\n          style={{\n            left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,\n            width: `calc((100% - 4px) / ${n})`,\n          }}\n        />\n        {opts.map((o) => (\n          <button\n            key={o.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={o.value === value}\n          >\n            {o.label}\n          </button>\n        ))}\n      </div>\n    </TweakRow>\n  );\n}\n\nfunction TweakSelect({ label, value, options, onChange }) {\n  return (\n    <TweakRow label={label}>\n      <select\n        className=\"twk-field\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      >\n        {options.map((o) => {\n          const v = typeof o === \"object\" ? o.value : o;\n          const l = typeof o === \"object\" ? o.label : o;\n          return <option key={v} value={v}>{l}</option>;\n        })}\n      </select>\n    </TweakRow>\n  );\n}\n\nfunction TweakText({ label, value, placeholder, onChange }) {\n  return (\n    <TweakRow label={label}>\n      <input\n        className=\"twk-field\"\n        type=\"text\"\n        value={value}\n        placeholder={placeholder}\n        onChange={(e) => onChange(e.target.value)}\n      />\n    </TweakRow>\n  );\n}\n\nfunction TweakNumber(\n  { label, value, min, max, step = 1, unit = \"\", onChange },\n) {\n  const clamp = (n) => {\n    if (min != null && n < min) return min;\n    if (max != null && n > max) return max;\n    return n;\n  };\n  const startRef = React.useRef({ x: 0, val: 0 });\n  const onScrubStart = (e) => {\n    e.preventDefault();\n    startRef.current = { x: e.clientX, val: value };\n    const decimals = (String(step).split(\".\")[1] || \"\").length;\n    const move = (ev) => {\n      const dx = ev.clientX - startRef.current.x;\n      const raw = startRef.current.val + dx * step;\n      const snapped = Math.round(raw / step) * step;\n      onChange(clamp(Number(snapped.toFixed(decimals))));\n    };\n    const up = () => {\n      window.removeEventListener(\"pointermove\", move);\n      window.removeEventListener(\"pointerup\", up);\n    };\n    window.addEventListener(\"pointermove\", move);\n    window.addEventListener(\"pointerup\", up);\n  };\n  return (\n    <div className=\"twk-num\">\n      <span className=\"twk-num-lbl\" onPointerDown={onScrubStart}>{label}</span>\n      <input\n        type=\"number\"\n        value={value}\n        min={min}\n        max={max}\n        step={step}\n        onChange={(e) => onChange(clamp(Number(e.target.value)))}\n      />\n      {unit && <span className=\"twk-num-unit\">{unit}</span>}\n    </div>\n  );\n}\n\n// Relative-luminance contrast pick — checkmarks drawn over a swatch need to\n// read on both #111 and #fafafa without per-option configuration. Hex input\n// only (#rgb / #rrggbb); named or rgb()/hsl() colors fall through to \"light\".\nfunction __twkIsLight(hex) {\n  const h = String(hex).replace(\"#\", \"\");\n  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, \"0\");\n  const n = parseInt(x.slice(0, 6), 16);\n  if (Number.isNaN(n)) return true;\n  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n  return r * 299 + g * 587 + b * 114 > 148000;\n}\n\nconst __TwkCheck = ({ light }) => (\n  <svg viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n    <path\n      d=\"M3 7.2 5.8 10 11 4.2\"\n      fill=\"none\"\n      strokeWidth=\"2.2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      stroke={light ? \"rgba(0,0,0,.78)\" : \"#fff\"}\n    />\n  </svg>\n);\n\n// TweakColor — curated color/palette picker. Each option is either a single\n// hex string or an array of 1-5 hex strings; the card adapts — a lone color\n// renders solid, a palette renders colors[0] as the hero (left ~2/3) with the\n// rest stacked in a sharp column on the right. onChange emits the\n// option in the shape it was passed (string stays string, array stays array).\n// Without options it falls back to the native color input for back-compat.\nfunction TweakColor({ label, value, options, onChange }) {\n  if (!options || !options.length) {\n    return (\n      <div className=\"twk-row twk-row-h\">\n        <div className=\"twk-lbl\">\n          <span>{label}</span>\n        </div>\n        <input\n          type=\"color\"\n          className=\"twk-swatch\"\n          value={value}\n          onChange={(e) => onChange(e.target.value)}\n        />\n      </div>\n    );\n  }\n  // Native <input type=color> emits lowercase hex per the HTML spec, so\n  // compare case-insensitively. String() guards JSON.stringify(undefined),\n  // which returns the primitive undefined (no .toLowerCase).\n  const key = (o) => String(JSON.stringify(o)).toLowerCase();\n  const cur = key(value);\n  return (\n    <TweakRow label={label}>\n      <div className=\"twk-chips\" role=\"radiogroup\">\n        {options.map((o, i) => {\n          const colors = Array.isArray(o) ? o : [o];\n          const [hero, ...rest] = colors;\n          const sup = rest.slice(0, 4);\n          const on = key(o) === cur;\n          return (\n            <button\n              key={i}\n              type=\"button\"\n              className=\"twk-chip\"\n              role=\"radio\"\n              aria-checked={on}\n              data-on={on ? \"1\" : \"0\"}\n              aria-label={colors.join(\", \")}\n              title={colors.join(\" · \")}\n              style={{ background: hero }}\n              onClick={() => onChange(o)}\n            >\n              {sup.length > 0 && (\n                <span>\n                  {sup.map((c, j) => <i key={j} style={{ background: c }} />)}\n                </span>\n              )}\n              {on && <__TwkCheck light={__twkIsLight(hero)} />}\n            </button>\n          );\n        })}\n      </div>\n    </TweakRow>\n  );\n}\n\nfunction TweakButton({ label, onClick, secondary = false }) {\n  return (\n    <button\n      type=\"button\"\n      className={secondary ? \"twk-btn secondary\" : \"twk-btn\"}\n      onClick={onClick}\n    >\n      {label}\n    </button>\n  );\n}\n\nObject.assign(window, {\n  useTweaks,\n  TweaksPanel,\n  TweakSection,\n  TweakRow,\n  TweakSlider,\n  TweakToggle,\n  TweakRadio,\n  TweakSelect,\n  TweakText,\n  TweakNumber,\n  TweakColor,\n  TweakButton,\n});","label",[136],"a0b9adc4-554f-11f1-8213-ee650bb23af1","ios-frame.tsx","b6603e6e-554e-11f1-9c43-ee650bb23af1",18,["D",1779393591237],"// iOS.jsx — Simplified iOS 26 (Liquid Glass) device frame\n// Based on the iOS 26 UI Kit + Figma status bar spec. No assets, no deps.\n// Exports: IOSDevice, IOSStatusBar, IOSNavBar, IOSGlassPill, IOSList, IOSListRow, IOSKeyboard\n\n// ─────────────────────────────────────────────────────────────\n// Status bar\n// ─────────────────────────────────────────────────────────────\nfunction IOSStatusBar({ dark = false, time = \"9:41\" }) {\n  const c = dark ? \"#fff\" : \"#000\";\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 154,\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        padding: \"21px 24px 19px\",\n        boxSizing: \"border-box\",\n        position: \"relative\",\n        zIndex: 20,\n        width: \"100%\",\n      }}\n    >\n      <div\n        style={{\n          flex: 1,\n          height: 22,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          paddingTop: 1.5,\n        }}\n      >\n        <span\n          style={{\n            fontFamily: '-apple-system, \"SF Pro\", system-ui',\n            fontWeight: 590,\n            fontSize: 17,\n            lineHeight: \"22px\",\n            color: c,\n          }}\n        >\n          {time}\n        </span>\n      </div>\n      <div\n        style={{\n          flex: 1,\n          height: 22,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: 7,\n          paddingTop: 1,\n          paddingRight: 1,\n        }}\n      >\n        <svg width=\"19\" height=\"12\" viewBox=\"0 0 19 12\">\n          <rect x=\"0\" y=\"7.5\" width=\"3.2\" height=\"4.5\" rx=\"0.7\" fill={c} />\n          <rect x=\"4.8\" y=\"5\" width=\"3.2\" height=\"7\" rx=\"0.7\" fill={c} />\n          <rect x=\"9.6\" y=\"2.5\" width=\"3.2\" height=\"9.5\" rx=\"0.7\" fill={c} />\n          <rect x=\"14.4\" y=\"0\" width=\"3.2\" height=\"12\" rx=\"0.7\" fill={c} />\n        </svg>\n        <svg width=\"17\" height=\"12\" viewBox=\"0 0 17 12\">\n          <path\n            d=\"M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z\"\n            fill={c}\n          />\n          <path\n            d=\"M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z\"\n            fill={c}\n          />\n          <circle cx=\"8.5\" cy=\"10.5\" r=\"1.5\" fill={c} />\n        </svg>\n        <svg width=\"27\" height=\"13\" viewBox=\"0 0 27 13\">\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"23\"\n            height=\"12\"\n            rx=\"3.5\"\n            stroke={c}\n            strokeOpacity=\"0.35\"\n            fill=\"none\"\n          />\n          <rect x=\"2\" y=\"2\" width=\"20\" height=\"9\" rx=\"2\" fill={c} />\n          <path\n            d=\"M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z\"\n            fill={c}\n            fillOpacity=\"0.4\"\n          />\n        </svg>\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Liquid glass pill — blur + tint + shine\n// ─────────────────────────────────────────────────────────────\nfunction IOSGlassPill({ children, dark = false, style = {} }) {\n  return (\n    <div\n      style={{\n        height: 44,\n        minWidth: 44,\n        borderRadius: 9999,\n        position: \"relative\",\n        overflow: \"hidden\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        boxShadow: dark\n          ? \"0 2px 6px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.2)\"\n          : \"0 1px 3px rgba(0,0,0,0.07), 0 3px 10px rgba(0,0,0,0.06)\",\n        ...style,\n      }}\n    >\n      {/* blur + tint */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: 9999,\n          backdropFilter: \"blur(12px) saturate(180%)\",\n          WebkitBackdropFilter: \"blur(12px) saturate(180%)\",\n          background: dark ? \"rgba(120,120,128,0.28)\" : \"rgba(255,255,255,0.5)\",\n        }}\n      />\n      {/* shine */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: 9999,\n          boxShadow: dark\n            ? \"inset 1.5px 1.5px 1px rgba(255,255,255,0.15), inset -1px -1px 1px rgba(255,255,255,0.08)\"\n            : \"inset 1.5px 1.5px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(255,255,255,0.4)\",\n          border: dark\n            ? \"0.5px solid rgba(255,255,255,0.15)\"\n            : \"0.5px solid rgba(0,0,0,0.06)\",\n        }}\n      />\n      <div\n        style={{\n          position: \"relative\",\n          zIndex: 1,\n          display: \"flex\",\n          alignItems: \"center\",\n          padding: \"0 4px\",\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Navigation bar — glass pills + large title\n// ─────────────────────────────────────────────────────────────\nfunction IOSNavBar({ title = \"Title\", dark = false, trailingIcon = true }) {\n  const muted = dark ? \"rgba(255,255,255,0.6)\" : \"#404040\";\n  const text = dark ? \"#fff\" : \"#000\";\n  const pillIcon = (content) => (\n    <IOSGlassPill dark={dark}>\n      <div\n        style={{\n          width: 36,\n          height: 36,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        {content}\n      </div>\n    </IOSGlassPill>\n  );\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 10,\n        paddingTop: 62,\n        paddingBottom: 10,\n        position: \"relative\",\n        zIndex: 5,\n      }}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          padding: \"0 16px\",\n        }}\n      >\n        {/* back chevron */}\n        {pillIcon(\n          <svg\n            width=\"12\"\n            height=\"20\"\n            viewBox=\"0 0 12 20\"\n            fill=\"none\"\n            style={{ marginLeft: -1 }}\n          >\n            <path\n              d=\"M10 2L2 10l8 8\"\n              stroke={muted}\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>,\n        )}\n        {/* trailing ellipsis */}\n        {trailingIcon && pillIcon(\n          <svg width=\"22\" height=\"6\" viewBox=\"0 0 22 6\">\n            <circle cx=\"3\" cy=\"3\" r=\"2.5\" fill={muted} />\n            <circle cx=\"11\" cy=\"3\" r=\"2.5\" fill={muted} />\n            <circle cx=\"19\" cy=\"3\" r=\"2.5\" fill={muted} />\n          </svg>,\n        )}\n      </div>\n      {/* large title */}\n      <div\n        style={{\n          padding: \"0 16px\",\n          fontFamily: \"-apple-system, system-ui\",\n          fontSize: 34,\n          fontWeight: 700,\n          lineHeight: \"41px\",\n          color: text,\n          letterSpacing: 0.4,\n        }}\n      >\n        {title}\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Grouped list (inset card, r:26) + row (52px)\n// ─────────────────────────────────────────────────────────────\nfunction IOSListRow(\n  { title, detail, icon, chevron = true, isLast = false, dark = false },\n) {\n  const text = dark ? \"#fff\" : \"#000\";\n  const sec = dark ? \"rgba(235,235,245,0.6)\" : \"rgba(60,60,67,0.6)\";\n  const ter = dark ? \"rgba(235,235,245,0.3)\" : \"rgba(60,60,67,0.3)\";\n  const sep = dark ? \"rgba(84,84,88,0.65)\" : \"rgba(60,60,67,0.12)\";\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        minHeight: 52,\n        padding: \"0 16px\",\n        position: \"relative\",\n        fontFamily: \"-apple-system, system-ui\",\n        fontSize: 17,\n        letterSpacing: -0.43,\n      }}\n    >\n      {icon && (\n        <div\n          style={{\n            width: 30,\n            height: 30,\n            borderRadius: 7,\n            background: icon,\n            marginRight: 12,\n            flexShrink: 0,\n          }}\n        />\n      )}\n      <div style={{ flex: 1, color: text }}>{title}</div>\n      {detail && <span style={{ color: sec, marginRight: 6 }}>{detail}</span>}\n      {chevron && (\n        <svg width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" style={{ flexShrink: 0 }}>\n          <path\n            d=\"M1 1l6 6-6 6\"\n            stroke={ter}\n            strokeWidth=\"2\"\n            fill=\"none\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n      {!isLast && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: 0,\n            right: 0,\n            left: icon ? 58 : 16,\n            height: 0.5,\n            background: sep,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction IOSList({ header, children, dark = false }) {\n  const hc = dark ? \"rgba(235,235,245,0.6)\" : \"rgba(60,60,67,0.6)\";\n  const bg = dark ? \"#1C1C1E\" : \"#fff\";\n  return (\n    <div>\n      {header && (\n        <div\n          style={{\n            fontFamily: \"-apple-system, system-ui\",\n            fontSize: 13,\n            color: hc,\n            textTransform: \"uppercase\",\n            padding: \"8px 36px 6px\",\n            letterSpacing: -0.08,\n          }}\n        >\n          {header}\n        </div>\n      )}\n      <div\n        style={{\n          background: bg,\n          borderRadius: 26,\n          margin: \"0 16px\",\n          overflow: \"hidden\",\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Device frame\n// ─────────────────────────────────────────────────────────────\nfunction IOSDevice({\n  children,\n  width = 402,\n  height = 874,\n  dark = false,\n  title,\n  keyboard = false,\n}) {\n  return (\n    <div\n      style={{\n        width,\n        height,\n        borderRadius: 48,\n        overflow: \"hidden\",\n        position: \"relative\",\n        background: dark ? \"#000\" : \"#F2F2F7\",\n        boxShadow: \"0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)\",\n        fontFamily: \"-apple-system, system-ui, sans-serif\",\n        WebkitFontSmoothing: \"antialiased\",\n      }}\n    >\n      {/* dynamic island */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 11,\n          left: \"50%\",\n          transform: \"translateX(-50%)\",\n          width: 126,\n          height: 37,\n          borderRadius: 24,\n          background: \"#000\",\n          zIndex: 50,\n        }}\n      />\n      {/* status bar (absolute) */}\n      <div\n        style={{ position: \"absolute\", top: 0, left: 0, right: 0, zIndex: 10 }}\n      >\n        <IOSStatusBar dark={dark} />\n      </div>\n      {/* nav + content */}\n      <div style={{ height: \"100%\", display: \"flex\", flexDirection: \"column\" }}>\n        {title !== undefined && <IOSNavBar title={title} dark={dark} />}\n        <div style={{ flex: 1, overflow: \"auto\" }}>{children}</div>\n        {keyboard && <IOSKeyboard dark={dark} />}\n      </div>\n      {/* home indicator — always on top */}\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: 0,\n          left: 0,\n          right: 0,\n          zIndex: 60,\n          height: 34,\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"flex-end\",\n          paddingBottom: 8,\n          pointerEvents: \"none\",\n        }}\n      >\n        <div\n          style={{\n            width: 139,\n            height: 5,\n            borderRadius: 100,\n            background: dark ? \"rgba(255,255,255,0.7)\" : \"rgba(0,0,0,0.25)\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Keyboard — iOS 26 liquid glass\n// ─────────────────────────────────────────────────────────────\nfunction IOSKeyboard({ dark = false }) {\n  const glyph = dark ? \"rgba(255,255,255,0.7)\" : \"#595959\";\n  const sugg = dark ? \"rgba(255,255,255,0.6)\" : \"#333\";\n  const keyBg = dark ? \"rgba(255,255,255,0.22)\" : \"rgba(255,255,255,0.85)\";\n\n  // special-key icons\n  const icons = {\n    shift: (\n      <svg width=\"19\" height=\"17\" viewBox=\"0 0 19 17\">\n        <path d=\"M9.5 1L1 9.5h4.5V16h8V9.5H18L9.5 1z\" fill={glyph} />\n      </svg>\n    ),\n    del: (\n      <svg width=\"23\" height=\"17\" viewBox=\"0 0 23 17\">\n        <path\n          d=\"M7 1h13a2 2 0 012 2v11a2 2 0 01-2 2H7l-6-7.5L7 1z\"\n          fill=\"none\"\n          stroke={glyph}\n          strokeWidth=\"1.6\"\n          strokeLinejoin=\"round\"\n        />\n        <path\n          d=\"M10 5l7 7M17 5l-7 7\"\n          stroke={glyph}\n          strokeWidth=\"1.6\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    ),\n    ret: (\n      <svg width=\"20\" height=\"14\" viewBox=\"0 0 20 14\">\n        <path\n          d=\"M18 1v6H4m0 0l4-4M4 7l4 4\"\n          fill=\"none\"\n          stroke=\"#fff\"\n          strokeWidth=\"1.8\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    ),\n  };\n\n  const key = (content, { w, flex, ret, fs = 25, k } = {}) => (\n    <div\n      key={k}\n      style={{\n        height: 42,\n        borderRadius: 8.5,\n        flex: flex ? 1 : undefined,\n        width: w,\n        minWidth: 0,\n        background: ret ? \"#08f\" : keyBg,\n        boxShadow: \"0 1px 0 rgba(0,0,0,0.075)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        fontFamily: '-apple-system, \"SF Compact\", system-ui',\n        fontSize: fs,\n        fontWeight: 458,\n        color: ret ? \"#fff\" : glyph,\n      }}\n    >\n      {content}\n    </div>\n  );\n\n  const row = (keys, pad = 0) => (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 6.5,\n        justifyContent: \"center\",\n        padding: `0 ${pad}px`,\n      }}\n    >\n      {keys.map((l) => key(l, { flex: true, k: l }))}\n    </div>\n  );\n\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        zIndex: 15,\n        borderRadius: 27,\n        overflow: \"hidden\",\n        padding: \"11px 0 2px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        boxShadow: dark\n          ? \"0 -2px 20px rgba(0,0,0,0.09)\"\n          : \"0 -1px 6px rgba(0,0,0,0.018), 0 -3px 20px rgba(0,0,0,0.012)\",\n      }}\n    >\n      {/* liquid glass bg — same recipe as nav pills */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: 27,\n          backdropFilter: \"blur(12px) saturate(180%)\",\n          WebkitBackdropFilter: \"blur(12px) saturate(180%)\",\n          background: dark\n            ? \"rgba(120,120,128,0.14)\"\n            : \"rgba(255,255,255,0.25)\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: 27,\n          boxShadow: dark\n            ? \"inset 1.5px 1.5px 1px rgba(255,255,255,0.15)\"\n            : \"inset 1.5px 1.5px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(255,255,255,0.4)\",\n          border: dark\n            ? \"0.5px solid rgba(255,255,255,0.15)\"\n            : \"0.5px solid rgba(0,0,0,0.06)\",\n          pointerEvents: \"none\",\n        }}\n      />\n\n      {/* autocorrect bar */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: 20,\n          alignItems: \"center\",\n          padding: \"8px 22px 13px\",\n          width: \"100%\",\n          boxSizing: \"border-box\",\n          position: \"relative\",\n        }}\n      >\n        {['\"The\"', \"the\", \"to\"].map((w, i) => (\n          <React.Fragment key={i}>\n            {i > 0 && (\n              <div\n                style={{\n                  width: 1,\n                  height: 25,\n                  background: \"#ccc\",\n                  opacity: 0.3,\n                }}\n              />\n            )}\n            <div\n              style={{\n                flex: 1,\n                textAlign: \"center\",\n                fontFamily: \"-apple-system, system-ui\",\n                fontSize: 17,\n                color: sugg,\n                letterSpacing: -0.43,\n                lineHeight: \"22px\",\n              }}\n            >\n              {w}\n            </div>\n          </React.Fragment>\n        ))}\n      </div>\n\n      {/* key layout */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 13,\n          padding: \"0 6.5px\",\n          width: \"100%\",\n          boxSizing: \"border-box\",\n          position: \"relative\",\n        }}\n      >\n        {row([\"q\", \"w\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\"])}\n        {row([\"a\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\"], 20)}\n        <div style={{ display: \"flex\", gap: 14.25, alignItems: \"center\" }}>\n          {key(icons.shift, { w: 45, k: \"shift\" })}\n          <div style={{ display: \"flex\", gap: 6.5, flex: 1 }}>\n            {[\"z\", \"x\", \"c\", \"v\", \"b\", \"n\", \"m\"].map((l) =>\n              key(l, { flex: true, k: l })\n            )}\n          </div>\n          {key(icons.del, { w: 45, k: \"del\" })}\n        </div>\n        <div style={{ display: \"flex\", gap: 6, alignItems: \"center\" }}>\n          {key(\"ABC\", { w: 92.25, fs: 18, k: \"abc\" })}\n          {key(\"\", { flex: true, k: \"space\" })}\n          {key(icons.ret, { w: 92.25, ret: true, k: \"ret\" })}\n        </div>\n      </div>\n\n      {/* bottom spacer (emoji+mic area, icons omitted) */}\n      <div style={{ height: 56, width: \"100%\", position: \"relative\" }} />\n    </div>\n  );\n}\n\nObject.assign(window, {\n  IOSDevice,\n  IOSStatusBar,\n  IOSNavBar,\n  IOSGlassPill,\n  IOSList,\n  IOSListRow,\n  IOSKeyboard,\n});",[147],"612ab148-2625-4eb4-a44d-f218ee759652","index.ts","20a5c902-554e-11f1-a855-ee650bb23af1",84,["D",1784420334276],14,"http","import { Hono } from \"npm:hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport Babel from \"npm:@babel/standalone@7.29.0\";\nimport { initDB } from \"./db/init.ts\";\nimport { checkHomeListItem, getHomeListItems } from \"./db/notion.ts\";\nimport {\n  completeOneThing,\n  createChecklistItem,\n  createEvidence,\n  createHabit,\n  createOneThing,\n  deleteChecklistItem,\n  deleteEvidence,\n  deleteHabit,\n  getAllHabitCompletions,\n  getChecklistItems,\n  getCompletions,\n  getDailyLog,\n  getEnergyHistory,\n  getEvidence,\n  getHabitCompletions,\n  getHabitHistory,\n  getHabits,\n  getOneThing,\n  getOneThingHistory,\n  saveDailyLog,\n  setCompletion,\n  setHabitCompletion,\n  updateChecklistItem,\n  updateEvidence,\n  updateHabit,\n} from \"./db/api.ts\";\n\nawait initDB();\n\nconst app = new Hono();\n\n// ── HTML shell ───────────────────────────────────────────────\n\nconst HTML = `<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<title>Harbour — Today</title>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,300;1,6..72,400;1,6..72,500;1,6..72,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Geist:wght@300;400;500;600&family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&family=IBM+Plex+Mono:wght@300;400;500&display=swap\" />\n<style>\n  html, body {\n    margin: 0;\n    background: #1e1c18;\n    min-height: 100vh;\n    font-family: 'Geist', system-ui, sans-serif;\n    -webkit-font-smoothing: antialiased;\n  }\n  body {\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding: 56px 24px 96px;\n  }\n  #root { width: 100%; max-width: 460px; }\n  *::-webkit-scrollbar { width: 0; height: 0; }\n</style>\n</head>\n<body>\n<div id=\"root\"></div>\n\n<script src=\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\" crossorigin=\"anonymous\"></script>\n<script src=\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\" crossorigin=\"anonymous\"></script>\n\n<script src=\"/ios-frame.js\"></script>\n<script src=\"/tweaks-panel.js\"></script>\n<script src=\"/harbour.js\"></script>\n<script src=\"/app.js\"></script>\n</body>\n</html>`;\n\napp.get(\"/\", (c) => c.html(HTML));\n\n// ── Client modules — JSX compiled server-side, once per isolate ──\n\nconst jsCache = new Map<string, string>();\n\nasync function serveCompiled(filename: string): Promise<Response> {\n  let code = jsCache.get(filename);\n  if (!code) {\n    const src = await readFile(filename, import.meta.url);\n    code = Babel.transform(src, {\n      filename,\n      presets: [[\"typescript\", { isTSX: true, allExtensions: true }], \"react\"],\n    }).code!;\n    jsCache.set(filename, code);\n  }\n  return new Response(code, {\n    headers: { \"content-type\": \"text/javascript; charset=utf-8\" },\n  });\n}\n\napp.get(\"/ios-frame.js\", () => serveCompiled(\"/ios-frame.tsx\"));\napp.get(\"/tweaks-panel.js\", () => serveCompiled(\"/tweaks-panel.tsx\"));\napp.get(\"/harbour.js\", () => serveCompiled(\"/harbour.tsx\"));\napp.get(\"/app.js\", () => serveCompiled(\"/app.tsx\"));\n\n// Legacy raw-JSX routes (kept so an already-open old tab keeps working)\nasync function serveJsx(filename: string): Promise<Response> {\n  const body = await readFile(filename, import.meta.url);\n  return new Response(body, {\n    headers: { \"content-type\": \"text/babel; charset=utf-8\" },\n  });\n}\n\napp.get(\"/ios-frame.jsx\", () => serveJsx(\"/ios-frame.tsx\"));\napp.get(\"/tweaks-panel.jsx\", () => serveJsx(\"/tweaks-panel.tsx\"));\napp.get(\"/harbour.jsx\", () => serveJsx(\"/harbour.tsx\"));\napp.get(\"/app.jsx\", () => serveJsx(\"/app.tsx\"));\n\n// ── Bootstrap — everything the Today screen needs, one round trip ──\n\napp.get(\"/api/bootstrap\", async (c) => {\n  const date = dateParam(c.req.query(\"date\")) ?? today();\n  const weekStart = dateParam(c.req.query(\"weekStart\")) ?? currentWeekStart();\n  const days = Number(c.req.query(\"days\")) || 28;\n  const [items, completions, morning, evening, habits, habitCompletions, oneThing, evidence] =\n    await Promise.all([\n      getChecklistItems(),\n      getCompletions(date),\n      getDailyLog(date, \"morning\"),\n      getDailyLog(date, \"evening\"),\n      getHabits(),\n      getAllHabitCompletions(days, date),\n      getOneThing(weekStart),\n      getEvidence(date),\n    ]);\n  return c.json({\n    date,\n    weekStart,\n    days,\n    items,\n    completions,\n    logs: { morning, evening },\n    habits,\n    habitCompletions,\n    oneThing,\n    evidence,\n  });\n});\n\n// ── Checklist items ──────────────────────────────────────────\n\napp.get(\"/api/checklist/items\", async (c) => {\n  const session = c.req.query(\"session\");\n  const items = await getChecklistItems(session);\n  return c.json(items);\n});\n\napp.post(\"/api/checklist/items\", async (c) => {\n  const body = await c.req.json();\n  const item = await createChecklistItem(body);\n  return c.json(item, 201);\n});\n\napp.put(\"/api/checklist/items/:id\", async (c) => {\n  const body = await c.req.json();\n  await updateChecklistItem(c.req.param(\"id\"), body);\n  return c.json({ ok: true });\n});\n\napp.delete(\"/api/checklist/items/:id\", async (c) => {\n  await deleteChecklistItem(c.req.param(\"id\"));\n  return c.json({ ok: true });\n});\n\n// ── Checklist completions ────────────────────────────────────\n\napp.get(\"/api/checklist/completions\", async (c) => {\n  const date = c.req.query(\"date\") ?? today();\n  const completions = await getCompletions(date);\n  return c.json(completions);\n});\n\napp.put(\"/api/checklist/completions/:itemId\", async (c) => {\n  const { done, date } = await c.req.json();\n  await setCompletion(c.req.param(\"itemId\"), date ?? today(), done);\n  return c.json({ ok: true });\n});\n\n// ── Daily logs ───────────────────────────────────────────────\n\napp.get(\"/api/logs\", async (c) => {\n  const date = c.req.query(\"date\") ?? today();\n  const session = c.req.query(\"session\");\n  if (session) {\n    const log = await getDailyLog(date, session);\n    return c.json(log);\n  }\n  const [morning, evening] = await Promise.all([\n    getDailyLog(date, \"morning\"),\n    getDailyLog(date, \"evening\"),\n  ]);\n  return c.json({ morning, evening });\n});\n\napp.post(\"/api/logs\", async (c) => {\n  const body = await c.req.json();\n  await saveDailyLog(body);\n  return c.json({ ok: true });\n});\n\n// ── Habits ───────────────────────────────────────────────────\n\napp.get(\"/api/habits\", async (c) => {\n  const habits = await getHabits();\n  return c.json(habits);\n});\n\napp.post(\"/api/habits\", async (c) => {\n  const body = await c.req.json();\n  const habit = await createHabit(body);\n  return c.json(habit, 201);\n});\n\napp.put(\"/api/habits/:id\", async (c) => {\n  const body = await c.req.json();\n  await updateHabit(c.req.param(\"id\"), body);\n  return c.json({ ok: true });\n});\n\napp.delete(\"/api/habits/:id\", async (c) => {\n  await deleteHabit(c.req.param(\"id\"));\n  return c.json({ ok: true });\n});\n\n// ── Habit completions ────────────────────────────────────────\n\napp.get(\"/api/habit-completions/:habitId\", async (c) => {\n  const days = Number(c.req.query(\"days\")) || 28;\n  const anchor = dateParam(c.req.query(\"today\"));\n  const completions = await getHabitCompletions(c.req.param(\"habitId\"), days, anchor);\n  return c.json(completions);\n});\n\napp.put(\"/api/habit-completions/:habitId/:date\", async (c) => {\n  const { done } = await c.req.json();\n  await setHabitCompletion(c.req.param(\"habitId\"), c.req.param(\"date\"), done);\n  return c.json({ ok: true });\n});\n\n// ── Metrics ──────────────────────────────────────────────────\n\napp.get(\"/api/metrics\", async (c) => {\n  const days = Number(c.req.query(\"days\")) || 30;\n  const anchor = dateParam(c.req.query(\"today\"));\n  const [energy, habits, oneThing] = await Promise.all([\n    getEnergyHistory(days, anchor),\n    getHabitHistory(days, anchor),\n    getOneThingHistory(20),\n  ]);\n  return c.json({ days, energy, habits, oneThing });\n});\n\n// ── One Thing ────────────────────────────────────────────────\n\napp.get(\"/api/one-thing\", async (c) => {\n  const weekStart = c.req.query(\"week_start\") ?? currentWeekStart();\n  const oneThing = await getOneThing(weekStart);\n  return c.json(oneThing);\n});\n\napp.post(\"/api/one-thing\", async (c) => {\n  const body = await c.req.json();\n  const oneThing = await createOneThing(body);\n  return c.json(oneThing, 201);\n});\n\napp.put(\"/api/one-thing/:id/complete\", async (c) => {\n  await completeOneThing(c.req.param(\"id\"));\n  return c.json({ ok: true });\n});\n\n// ── Evidence ─────────────────────────────────────────────────\n\napp.get(\"/api/evidence\", async (c) => {\n  const date = c.req.query(\"date\") ?? today();\n  const items = await getEvidence(date);\n  return c.json(items);\n});\n\napp.post(\"/api/evidence\", async (c) => {\n  const body = await c.req.json();\n  const item = await createEvidence({ ...body, date: body.date ?? today() });\n  return c.json(item, 201);\n});\n\napp.put(\"/api/evidence/:id\", async (c) => {\n  const body = await c.req.json();\n  await updateEvidence(c.req.param(\"id\"), body);\n  return c.json({ ok: true });\n});\n\napp.delete(\"/api/evidence/:id\", async (c) => {\n  await deleteEvidence(c.req.param(\"id\"));\n  return c.json({ ok: true });\n});\n\n// ── Notion ───────────────────────────────────────────────────\n\napp.get(\"/api/notion/home-list\", async (c) => {\n  try {\n    const items = await getHomeListItems();\n    return c.json(items);\n  } catch (e) {\n    return c.json({ error: e.message }, 500);\n  }\n});\n\napp.post(\"/api/notion/home-list/:blockId/check\", async (c) => {\n  try {\n    await checkHomeListItem(c.req.param(\"blockId\"));\n    return c.json({ ok: true });\n  } catch (e) {\n    return c.json({ error: e.message }, 500);\n  }\n});\n\n// ── Date helpers ─────────────────────────────────────────────\n// UTC fallbacks; real requests carry the client's local date so the\n// day boundary follows the user's timezone.\n\nconst DATE_RE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\nfunction dateParam(v: string | undefined): string | undefined {\n  return v && DATE_RE.test(v) ? v : undefined;\n}\n\nfunction today(): string {\n  return new Date().toISOString().slice(0, 10);\n}\n\nfunction currentWeekStart(): string {\n  const d = new Date();\n  d.setDate(d.getDate() - d.getDay()); // rewind to Sunday\n  return d.toISOString().slice(0, 10);\n}\n\nexport default app.fetch;\n",[154],"564f5681-747d-4c9f-91e5-554575131096",["D",1784420612544],48,[28],"d191cec8-bbdc-463c-982d-6f3ce16a3c03","app.tsx","232beb84-554e-11f1-8908-ee650bb23af1",85,["D",1784420386033],7,"// app.jsx — App shell: data fetching, device frame, tweaks panel wiring\n\n// All dates are LOCAL calendar dates (\"YYYY-MM-DD\"), so the app's day\n// boundary follows the user's timezone — never toISOString(), which\n// would flip to tomorrow at 8pm US Eastern.\nfunction pad2(n) {\n  return String(n).padStart(2, \"0\");\n}\n\nfunction localDateStr(d) {\n  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;\n}\n\nfunction todayStr() {\n  return localDateStr(new Date());\n}\n\nfunction currentWeekStart() {\n  const d = new Date();\n  d.setDate(d.getDate() - d.getDay()); // rewind to Sunday\n  return localDateStr(d);\n}\n\nconst TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {\n  \"dark\": false,\n  \"palette\": \"amber\",\n  \"kit\": \"editorial\",\n  \"showFrame\": true,\n} /*EDITMODE-END*/;\n\nfunction App() {\n  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);\n  const [appData, setAppData] = React.useState(null);\n  const [loading, setLoading] = React.useState(true);\n  const [loadError, setLoadError] = React.useState(null);\n\n  React.useEffect(() => {\n    const date = todayStr();\n    const weekStart = currentWeekStart();\n\n    async function load() {\n      try {\n        // One round trip: the server assembles everything Today needs.\n        const res = await fetch(\n          `/api/bootstrap?date=${date}&weekStart=${weekStart}&days=28`,\n        );\n        if (!res.ok) throw new Error(`Bootstrap failed (${res.status})`);\n        const boot = await res.json();\n\n        // Build completion map: { item_id: done }\n        const completionMap = {};\n        boot.completions.forEach((c) => {\n          completionMap[c.item_id] = !!c.done;\n        });\n\n        const morning = boot.items\n          .filter((i) => i.session === \"morning\")\n          .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n        const evening = boot.items\n          .filter((i) => i.session === \"evening\")\n          .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n        // Group habit completions: { habit_id: { date: done } }\n        const compByHabit = {};\n        boot.habitCompletions.forEach((r) => {\n          if (!compByHabit[r.habit_id]) compByHabit[r.habit_id] = {};\n          compByHabit[r.habit_id][r.date] = !!r.done;\n        });\n\n        // Build habits with last-7-days (Today) and last-28-days (Habits tab)\n        const habitsWithDays = boot.habits.map((h) => {\n          const byDate = compByHabit[h.id] || {};\n          const mk = (len) =>\n            Array.from({ length: len }, (_, i) => {\n              const d = new Date();\n              d.setDate(d.getDate() - (len - 1 - i));\n              return !!byDate[localDateStr(d)];\n            });\n          return { ...h, days: mk(7), history: mk(28) };\n        });\n\n        setAppData({\n          date,\n          weekStart,\n          morning,\n          evening,\n          logs: boot.logs,\n          habits: habitsWithDays,\n          oneThing: boot.oneThing,\n          evidence: Array.isArray(boot.evidence) ? boot.evidence : [],\n        });\n      } catch (e) {\n        setLoadError(e.message);\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    load();\n  }, []);\n\n  const baseBox = {\n    width: 402,\n    height: 874,\n    boxShadow: \"0 40px 80px rgba(0,0,0,0.18)\",\n    overflow: \"hidden\",\n  };\n\n  if (loading) {\n    return (\n      <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n        <div\n          style={{\n            ...baseBox,\n            background: t.dark ? \"#000\" : \"#F2F2F7\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            borderRadius: t.showFrame ? 48 : 0,\n          }}\n        >\n          <span\n            style={{\n              color: \"rgba(100,100,100,0.45)\",\n              fontFamily: \"Geist, system-ui\",\n              fontSize: 13,\n              letterSpacing: \"0.06em\",\n              textTransform: \"uppercase\",\n            }}\n          >\n            Loading\n          </span>\n        </div>\n      </div>\n    );\n  }\n\n  if (loadError) {\n    return (\n      <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n        <div\n          style={{\n            ...baseBox,\n            background: t.dark ? \"#000\" : \"#F2F2F7\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            gap: 10,\n            padding: \"0 40px\",\n            boxSizing: \"border-box\",\n          }}\n        >\n          <span\n            style={{\n              color: \"#c0392b\",\n              fontFamily: \"Geist, system-ui\",\n              fontSize: 13,\n            }}\n          >\n            Failed to load\n          </span>\n          <span\n            style={{\n              color: \"rgba(100,100,100,0.5)\",\n              fontFamily: \"JetBrains Mono, monospace\",\n              fontSize: 11,\n              textAlign: \"center\",\n            }}\n          >\n            {loadError}\n          </span>\n        </div>\n      </div>\n    );\n  }\n\n  const screen = (\n    <HarbourToday\n      tweaks={t}\n      setTweak={setTweak}\n      data={appData}\n      onDataChange={setAppData}\n    />\n  );\n\n  return (\n    <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n      {t.showFrame\n        ? (\n          <IOSDevice width={402} height={874} dark={t.dark}>\n            {screen}\n          </IOSDevice>\n        )\n        : (\n          <div\n            style={{\n              ...baseBox,\n              background: t.dark ? \"#000\" : \"#fff\",\n            }}\n          >\n            {screen}\n          </div>\n        )}\n\n      <TweaksPanel title=\"Tweaks\">\n        <TweakSection label=\"Surface\" />\n        <TweakToggle\n          label=\"Dark mode\"\n          value={t.dark}\n          onChange={(v) => setTweak(\"dark\", v)}\n        />\n        <TweakToggle\n          label=\"Device frame\"\n          value={t.showFrame}\n          onChange={(v) => setTweak(\"showFrame\", v)}\n        />\n        <TweakSection label=\"Type pairing\" />\n        <TweakRadio\n          label=\"Family\"\n          value={t.kit}\n          options={[\"editorial\", \"classic\"]}\n          onChange={(v) => setTweak(\"kit\", v)}\n        />\n        <TweakSection label=\"Accent\" />\n        <TweakRadio\n          label=\"Color\"\n          value={t.palette}\n          options={[\"amber\", \"oxblood\", \"forest\", \"ink\"]}\n          onChange={(v) => setTweak(\"palette\", v)}\n        />\n      </TweaksPanel>\n    </div>\n  );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(<App />);\n",[167],"ec80eb0a-554f-11f1-8ea0-ee650bb23af1","README.md","e42b7fd4-554e-11f1-9a4e-ee650bb23af1",21,["D",1779393718368],3,"# Harbour — Today screen (Val Town project val)\n\nThis is a 5-file Val Town project val implementing the Today screen for Harbour\nin the James Clear–inspired editorial style: Newsreader serif + Geist sans, warm\ncream paper, hairline rules instead of cards, tally marks for habit streaks,\naccent color used as punctuation.\n\n## Files\n\n| File               | Purpose                                                                                                                                        |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| `index.ts`         | Hono HTTP val. Serves the HTML shell at `/` and each JSX module at its own route. This is the val's entry point.                               |\n| `app.tsx`          | React app shell that wires Tweaks into HarbourToday.                                                                                           |\n| `harbour.tsx`      | The Today screen: masthead, one thing, check-in, evidence, checklist, habits, colophon, tab bar.                                               |\n| `ios-frame.tsx`    | iOS 26 device frame chrome (status bar, dynamic island, home indicator).                                                                       |\n| `tweaks-panel.tsx` | Floating Tweaks UI: light/dark, type pairing, accent. Persists state in-page (the host-protocol round-trip only matters inside Claude Design). |\n\n## How to deploy\n\n1. Create a new **project val** in Val Town named `harbour` (or whatever you\n   prefer).\n2. Add a file for each of the five above. Keep the names and extensions as\n   listed — the `index.ts` routing assumes them.\n3. Paste the contents of each file from this folder into the matching file in\n   your val.\n4. Open the val's HTTP endpoint URL. You should see the Today screen in light\n   mode, amber accent, inside an iOS device frame, with a Tweaks panel docked\n   beside it.\n\nThe val needs no env vars and no database access — it's a self-contained static\nReact app served from a single HTTP endpoint. The Babel-in-browser transpile\nhappens on each page load (~200 ms after first paint).\n\n## What's interactive\n\n- **Energy meter** — tap any of the 5 segments to set energy 1–5\n- **Note field** — type your \"what mattered today\" answer\n- **Two more prompts** — expand the check-in to include gratitude + let-go\n- **Log the day** — save button flips to a ✓ Saved state\n- **Morning / Evening tabs** — switch checklist views\n- **Checkboxes** — tap any list item to mark complete; counts update\n- **Bottom tabs** — placeholder for Today / Habits / Metrics / Home list\n- **Tweaks panel** — light/dark, device frame on/off, Editorial vs Classic type,\n  four accent colors\n\n## What's not wired (yet)\n\n- No database persistence — state lives only in component memory and is lost on\n  reload\n- No real \"one thing\" data — placeholder shows \"Schedule the PL 900 exam\"\n- No real habit history — placeholder shows fake 7-day arrays\n- No \"this week's one thing\" tap-to-complete sheet (designed in the prior chat,\n  not yet built)\n- No Sunday reset screen (designed in the prior chat, not yet built)\n- No Habits / Metrics / Home list tabs\n\nThe next pass wires this to your existing `routine_checks` table and adds the\nper-tab screens.\n\n## Notes on the design\n\nThe chat transcript inside the design bundle committed to:\n\n- **Type:** Newsreader (editorial serif, headings + reflective copy) · Geist\n  (sans, UI + body) · JetBrains Mono (times, day counts, energy 3/5)\n- **Palette:** warm cream paper, deep ink, single muted amber accent used as\n  punctuation. Dark mode is a toggle away.\n- **Voice:** small caps section labels, italic serif for moments of reflection,\n  tabular numerals for data\n- **Treatment:** check marks as crossing strokes, streaks as a row of small\n  tally slashes (filled = done, hollow = missed), the \"one thing\" gets a quiet\n  pull-quote treatment instead of a bordered card\n\nThe accent color is intentionally restrained — it appears in roughly one zone\nper screen (a section divider, the active energy segments, the filled streak\nstrokes) and stays out of the way otherwise.",[175],"35bd70dc-590a-11f1-a7fd-ee650bb23af1","db","6cc02321-a6ec-4193-a52b-a798394487fe",23,["D",1779803581118],"directory",[183],"pulls","branches",1,"forks","envVars",{"_197":191,"_199":61},"connections",{"_197":61,"_198":61},"count","unfilledCount","emptyCount",{"_43":182,"_32":183,"_30":184,"_138":-5,"_41":42,"_40":185,"_140":123,"_38":254,"_13":61,"_33":187,"_35":-5,"_24":25,"_144":-5,"_211":255,"_27":256},{"_43":245,"_32":246,"_30":247,"_138":184,"_41":42,"_40":248,"_140":123,"_38":249,"_13":250,"_33":34,"_35":251,"_24":25,"_144":-5,"_211":252,"_27":253},{"_43":237,"_32":238,"_30":239,"_138":184,"_41":42,"_40":240,"_140":123,"_38":241,"_13":191,"_33":34,"_35":242,"_24":25,"_144":-5,"_211":243,"_27":244},{"_43":229,"_32":230,"_30":231,"_138":184,"_41":42,"_40":232,"_140":123,"_38":233,"_13":191,"_33":34,"_35":234,"_24":25,"_144":-5,"_211":235,"_27":236},{"_43":174,"_32":175,"_30":176,"_138":-5,"_41":42,"_40":177,"_140":25,"_38":226,"_13":179,"_33":20,"_35":180,"_24":25,"_144":-5,"_211":227,"_27":228},{"_43":166,"_32":167,"_30":168,"_138":-5,"_41":42,"_40":169,"_140":25,"_38":223,"_13":171,"_33":34,"_35":172,"_24":25,"_144":-5,"_211":224,"_27":225},{"_43":162,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":220,"_13":164,"_33":34,"_35":37,"_24":25,"_144":-5,"_211":221,"_27":222},{"_43":153,"_32":154,"_30":155,"_138":-5,"_41":42,"_40":156,"_140":25,"_38":217,"_13":158,"_33":159,"_35":160,"_24":25,"_144":-5,"_211":218,"_27":219},{"_43":146,"_32":147,"_30":148,"_138":-5,"_41":42,"_40":149,"_140":123,"_38":214,"_13":142,"_33":34,"_35":151,"_24":25,"_144":-5,"_211":215,"_27":216},{"_43":135,"_32":136,"_30":137,"_138":-5,"_41":42,"_40":139,"_140":123,"_38":210,"_13":142,"_33":34,"_35":143,"_24":25,"_144":-5,"_211":212,"_27":213},["D",1779393598501],"children",[],[136],["D",1779393591237],[],[147],["D",1784420334276],[],[154],["D",1784420612544],[],[28],["D",1784420386033],[],[167],["D",1779393718368],[],[175],"e3ee70f0-815c-41d6-810a-368f2836436e","notion.ts","1c2f52c2-6399-11f1-ad67-1607ee4eb77e",83,["D",1784420289927],"// Fetches unchecked tasks from the Notion Home List page.\n// Returns items with their section heading as the category.\n\nconst HOME_LIST_PAGE_ID = \"2598e14d-d93c-80fd-b025-c1d023c57a71\";\nconst NOTION_VERSION = \"2022-06-28\";\n\nexport interface HomeListItem {\n  id: string;\n  title: string;\n  category: string;\n}\n\n// Notion is slow (paginated REST) and gets hit by both the Home tab and\n// the One Thing form, so cache briefly, per isolate.\nlet cache: { at: number; items: HomeListItem[] } | null = null;\nconst CACHE_TTL_MS = 60_000;\n\nfunction notionHeaders(token: string) {\n  return {\n    Authorization: `Bearer ${token}`,\n    \"Notion-Version\": NOTION_VERSION,\n  };\n}\n\nexport async function getHomeListItems(): Promise<HomeListItem[]> {\n  if (cache && Date.now() - cache.at < CACHE_TTL_MS) return cache.items;\n\n  const token = Deno.env.get(\"NOTION_TOKEN\");\n  if (!token) throw new Error(\"NOTION_TOKEN is not set\");\n\n  const items: HomeListItem[] = [];\n  let cursor: string | undefined;\n  // Lives outside the pagination loop so a section heading still applies\n  // to to-dos that land on the next 100-block page.\n  let currentSection = \"\";\n\n  do {\n    const url = new URL(\n      `https://api.notion.com/v1/blocks/${HOME_LIST_PAGE_ID}/children`,\n    );\n    url.searchParams.set(\"page_size\", \"100\");\n    if (cursor) url.searchParams.set(\"start_cursor\", cursor);\n\n    const res = await fetch(url.toString(), { headers: notionHeaders(token) });\n\n    if (!res.ok) {\n      throw new Error(`Notion API error: ${res.status} ${await res.text()}`);\n    }\n\n    const data = await res.json();\n\n    for (const block of data.results) {\n      // Track the current section heading\n      if (block.type === \"heading_2\" || block.type === \"heading_3\") {\n        currentSection = block[block.type].rich_text\n          .map((t: { plain_text: string }) => t.plain_text)\n          .join(\"\")\n          .trim();\n      }\n\n      // Collect unchecked to-do items\n      if (block.type === \"to_do\" && !block.to_do.checked) {\n        const title = block.to_do.rich_text\n          .map((t: { plain_text: string }) => t.plain_text)\n          .join(\"\")\n          .trim();\n        if (title) items.push({ id: block.id, title, category: currentSection });\n      }\n    }\n\n    cursor = data.has_more ? data.next_cursor : undefined;\n  } while (cursor);\n\n  cache = { at: Date.now(), items };\n  return items;\n}\n\nexport async function checkHomeListItem(blockId: string): Promise<void> {\n  const token = Deno.env.get(\"NOTION_TOKEN\");\n  if (!token) throw new Error(\"NOTION_TOKEN is not set\");\n\n  const res = await fetch(`https://api.notion.com/v1/blocks/${blockId}`, {\n    method: \"PATCH\",\n    headers: { ...notionHeaders(token), \"Content-Type\": \"application/json\" },\n    body: JSON.stringify({ to_do: { checked: true } }),\n  });\n\n  if (!res.ok) {\n    throw new Error(`Notion API error: ${res.status} ${await res.text()}`);\n  }\n\n  cache = null;\n}\n",[],[183,230],"4cecb828-cb3e-4c86-ab49-3fd946190d2a","init.ts","35bd42ce-590a-11f1-a7fd-ee650bb23af1",36,["D",1781366569430],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\nexport async function initDB() {\n  await sqlite.batch([\n    // Checklist items — the configured morning/evening routine lists\n    `CREATE TABLE IF NOT EXISTS checklist_items (\n      id          TEXT    PRIMARY KEY,\n      session     TEXT    NOT NULL CHECK(session IN ('morning', 'evening')),\n      section     TEXT    NOT NULL,\n      title       TEXT    NOT NULL,\n      detail      TEXT,\n      sort_order  INTEGER NOT NULL DEFAULT 0\n    )`,\n\n    // Checklist completions — today's state only; old dates are ignored\n    `CREATE TABLE IF NOT EXISTS checklist_completions (\n      item_id  TEXT NOT NULL,\n      date     TEXT NOT NULL,\n      done     INTEGER NOT NULL DEFAULT 0,\n      PRIMARY KEY (item_id, date)\n    )`,\n\n    // Daily logs — at most one row per session (morning/evening) per day\n    // energy is only recorded for evening; morning rows leave it NULL\n    `CREATE TABLE IF NOT EXISTS daily_logs (\n      date      TEXT    NOT NULL,\n      session   TEXT    NOT NULL CHECK(session IN ('morning', 'evening')),\n      energy    INTEGER CHECK(energy IS NULL OR (energy BETWEEN 1 AND 5)),\n      note      TEXT,\n      gratitude TEXT,\n      let_go    TEXT,\n      saved_at  TEXT    NOT NULL,\n      PRIMARY KEY (date, session)\n    )`,\n\n    // Habits — user-configured, soft-deleted via active flag\n    `CREATE TABLE IF NOT EXISTS habits (\n      id         TEXT    PRIMARY KEY,\n      name       TEXT    NOT NULL,\n      note       TEXT,\n      sort_order INTEGER NOT NULL DEFAULT 0,\n      active     INTEGER NOT NULL DEFAULT 1\n    )`,\n\n    // Habit completions — 7-day window; only last 7 days are queried\n    `CREATE TABLE IF NOT EXISTS habit_completions (\n      habit_id  TEXT NOT NULL,\n      date      TEXT NOT NULL,\n      done      INTEGER NOT NULL DEFAULT 0,\n      PRIMARY KEY (habit_id, date)\n    )`,\n\n    // One Thing — weekly focus; multiple rows per week are allowed\n    // (mid-week replacement). Current = most recent uncompleted row\n    // for the current week_start.\n    `CREATE TABLE IF NOT EXISTS one_thing (\n      id           TEXT PRIMARY KEY,\n      title        TEXT NOT NULL,\n      category     TEXT,\n      week_start   TEXT NOT NULL,\n      created_at   TEXT NOT NULL,\n      completed    INTEGER NOT NULL DEFAULT 0,\n      completed_at TEXT\n    )`,\n\n    // Evidence — manual log of small, good things done today.\n    // Entries are created only by the user; nothing auto-logs here.\n    // `date` drives the today query; `logged_at` is the source of the\n    // displayed time (the UI formats it — no display string is stored).\n    `CREATE TABLE IF NOT EXISTS evidence (\n      id         TEXT    PRIMARY KEY,\n      date       TEXT    NOT NULL,\n      title      TEXT    NOT NULL,\n      detail     TEXT,\n      logged_at  TEXT    NOT NULL,\n      sort_order INTEGER NOT NULL DEFAULT 0\n    )`,\n\n    `CREATE INDEX IF NOT EXISTS idx_evidence_date ON evidence(date)`,\n  ]);\n}\n",[],[183,238],"e2ebc8fe-a966-4c98-8aff-867a54d6b90d","api.ts","83654a08-590a-11f1-a27d-ee650bb23af1",82,["D",1784420275130],11,"import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// std/sqlite's execute binds parameters only via the object form\n// ({ sql, args }); the positional form silently drops args. Wrap it\n// once here so every call site can pass (sql, args) safely.\nfunction exec(sql: string, args: unknown[] = []) {\n  return sqlite.execute({ sql, args });\n}\n\n// ── Checklist Items ──────────────────────────────────────────\n\nexport async function getChecklistItems(session?: string) {\n  const result = session\n    ? await exec(\n        \"SELECT * FROM checklist_items WHERE session = ? ORDER BY sort_order\",\n        [session],\n      )\n    : await exec(\n        \"SELECT * FROM checklist_items ORDER BY session, sort_order\",\n      );\n  return result.rows.map(toObj(result.columns));\n}\n\nexport async function createChecklistItem(item: {\n  session: string;\n  section: string;\n  title: string;\n  detail?: string;\n  sort_order?: number;\n}) {\n  const id = crypto.randomUUID();\n  await exec(\n    \"INSERT INTO checklist_items (id, session, section, title, detail, sort_order) VALUES (?, ?, ?, ?, ?, ?)\",\n    [id, item.session, item.section, item.title, item.detail ?? null, item.sort_order ?? 0],\n  );\n  return { id, ...item };\n}\n\nexport async function updateChecklistItem(\n  id: string,\n  updates: { section?: string; title?: string; detail?: string; sort_order?: number },\n) {\n  if (!Object.keys(updates).length) return;\n  const fields = Object.keys(updates).map((k) => `${k} = ?`).join(\", \");\n  await exec(\n    `UPDATE checklist_items SET ${fields} WHERE id = ?`,\n    [...Object.values(updates), id],\n  );\n}\n\nexport async function deleteChecklistItem(id: string) {\n  await exec(\"DELETE FROM checklist_completions WHERE item_id = ?\", [id]);\n  await exec(\"DELETE FROM checklist_items WHERE id = ?\", [id]);\n}\n\n// ── Checklist Completions ────────────────────────────────────\n\nexport async function getCompletions(date: string) {\n  const result = await exec(\n    \"SELECT item_id, done FROM checklist_completions WHERE date = ?\",\n    [date],\n  );\n  return result.rows.map(toObj(result.columns));\n}\n\nexport async function setCompletion(itemId: string, date: string, done: boolean) {\n  await exec(\n    `INSERT INTO checklist_completions (item_id, date, done) VALUES (?, ?, ?)\n     ON CONFLICT(item_id, date) DO UPDATE SET done = excluded.done`,\n    [itemId, date, done ? 1 : 0],\n  );\n}\n\n// ── Daily Logs ───────────────────────────────────────────────\n\nexport async function getDailyLog(date: string, session: string) {\n  const result = await exec(\n    \"SELECT * FROM daily_logs WHERE date = ? AND session = ?\",\n    [date, session],\n  );\n  return result.rows.length ? toObj(result.columns)(result.rows[0]) : null;\n}\n\nexport async function saveDailyLog(log: {\n  date: string;\n  session: string;\n  energy?: number;\n  note?: string;\n  gratitude?: string;\n  let_go?: string;\n}) {\n  const saved_at = new Date().toISOString();\n  await exec(\n    `INSERT INTO daily_logs (date, session, energy, note, gratitude, let_go, saved_at)\n     VALUES (?, ?, ?, ?, ?, ?, ?)\n     ON CONFLICT(date, session) DO UPDATE SET\n       energy     = excluded.energy,\n       note       = excluded.note,\n       gratitude  = excluded.gratitude,\n       let_go     = excluded.let_go,\n       saved_at   = excluded.saved_at`,\n    [\n      log.date,\n      log.session,\n      log.energy ?? null,\n      log.note ?? null,\n      log.gratitude ?? null,\n      log.let_go ?? null,\n      saved_at,\n    ],\n  );\n}\n\n// ── Habits ───────────────────────────────────────────────────\n\nexport async function getHabits() {\n  const result = await exec(\n    \"SELECT * FROM habits WHERE active = 1 ORDER BY sort_order\",\n  );\n  return result.rows.map(toObj(result.columns));\n}\n\nexport async function createHabit(habit: {\n  name: string;\n  note?: string;\n  sort_order?: number;\n}) {\n  const id = crypto.randomUUID();\n  await exec(\n    \"INSERT INTO habits (id, name, note, sort_order) VALUES (?, ?, ?, ?)\",\n    [id, habit.name, habit.note ?? null, habit.sort_order ?? 0],\n  );\n  return { id, ...habit };\n}\n\nexport async function updateHabit(\n  id: string,\n  updates: { name?: string; note?: string; sort_order?: number },\n) {\n  if (!Object.keys(updates).length) return;\n  const fields = Object.keys(updates).map((k) => `${k} = ?`).join(\", \");\n  await exec(\n    `UPDATE habits SET ${fields} WHERE id = ?`,\n    [...Object.values(updates), id],\n  );\n}\n\nexport async function deleteHabit(id: string) {\n  // Soft delete — preserves completion history\n  await exec(\"UPDATE habits SET active = 0 WHERE id = ?\", [id]);\n}\n\n// ── Habit Completions ────────────────────────────────────────\n\n// UTC fallback for when the client doesn't send its local date. All\n// range queries anchor on the caller-supplied `today` so the app's day\n// boundary follows the user's timezone, not the server's.\nfunction utcToday() {\n  return new Date().toISOString().slice(0, 10);\n}\n\nexport async function getHabitCompletions(habitId: string, days = 28, today = utcToday()) {\n  const result = await exec(\n    `SELECT date, done FROM habit_completions\n     WHERE habit_id = ? AND date >= date(?, ?)\n     ORDER BY date`,\n    [habitId, today, `-${days - 1} days`],\n  );\n  return result.rows.map(toObj(result.columns));\n}\n\nexport async function getAllHabitCompletions(days = 28, today = utcToday()) {\n  const result = await exec(\n    `SELECT habit_id, date, done FROM habit_completions\n     WHERE date >= date(?, ?)\n     ORDER BY date`,\n    [today, `-${days - 1} days`],\n  );\n  return result.rows.map(toObj(result.columns));\n}\n\nexport async function setHabitCompletion(habitId: string, date: string, done: boolean) {\n  await exec(\n    `INSERT INTO habit_completions (habit_id, date, done) VALUES (?, ?, ?)\n     ON CONFLICT(habit_id, date) DO UPDATE SET done = excluded.done`,\n    [habitId, date, done ? 1 : 0],\n  );\n}\n\n// ── One Thing ────────────────────────────────────────────────\n\nexport async function getOneThing(weekStart: string) {\n  const result = await exec(\n    `SELECT * FROM one_thing\n     WHERE week_start = ? AND completed = 0\n     ORDER BY created_at DESC\n     LIMIT 1`,\n    [weekStart],\n  );\n  return result.rows.length ? toObj(result.columns)(result.rows[0]) : null;\n}\n\nexport async function createOneThing(item: {\n  title: string;\n  category?: string;\n  weekStart: string;\n}) {\n  const id = crypto.randomUUID();\n  const created_at = new Date().toISOString();\n  await exec(\n    \"INSERT INTO one_thing (id, title, category, week_start, created_at) VALUES (?, ?, ?, ?, ?)\",\n    [id, item.title, item.category ?? null, item.weekStart, created_at],\n  );\n  return { id, ...item, created_at, completed: 0 };\n}\n\nexport async function completeOneThing(id: string) {\n  await exec(\n    \"UPDATE one_thing SET completed = 1, completed_at = ? WHERE id = ?\",\n    [new Date().toISOString(), id],\n  );\n}\n\n// ── Evidence ─────────────────────────────────────────────────\n\nexport async function getEvidence(date: string) {\n  const result = await exec(\n    \"SELECT * FROM evidence WHERE date = ? ORDER BY logged_at\",\n    [date],\n  );\n  return result.rows.map(toObj(result.columns));\n}\n\nexport async function createEvidence(item: {\n  date: string;\n  title: string;\n  detail?: string;\n  sort_order?: number;\n}) {\n  const id = crypto.randomUUID();\n  const logged_at = new Date().toISOString();\n  await exec(\n    \"INSERT INTO evidence (id, date, title, detail, logged_at, sort_order) VALUES (?, ?, ?, ?, ?, ?)\",\n    [id, item.date, item.title, item.detail ?? null, logged_at, item.sort_order ?? 0],\n  );\n  return { id, ...item, logged_at };\n}\n\nexport async function updateEvidence(\n  id: string,\n  updates: { title?: string; detail?: string },\n) {\n  if (!Object.keys(updates).length) return;\n  const fields = Object.keys(updates).map((k) => `${k} = ?`).join(\", \");\n  await exec(\n    `UPDATE evidence SET ${fields} WHERE id = ?`,\n    [...Object.values(updates), id],\n  );\n}\n\nexport async function deleteEvidence(id: string) {\n  await exec(\"DELETE FROM evidence WHERE id = ?\", [id]);\n}\n\n// ── Metrics ──────────────────────────────────────────────────\n\nexport async function getEnergyHistory(days = 30, today = utcToday()) {\n  const result = await exec(\n    `SELECT date, energy FROM daily_logs\n     WHERE session = 'evening' AND energy IS NOT NULL\n       AND date >= date(?, ?)\n     ORDER BY date`,\n    [today, `-${days - 1} days`],\n  );\n  return result.rows.map(toObj(result.columns));\n}\n\nexport async function getHabitHistory(days = 30, today = utcToday()) {\n  const habitsRes = await exec(\n    \"SELECT id, name, note FROM habits WHERE active = 1 ORDER BY sort_order\",\n  );\n  const habits = habitsRes.rows.map(toObj(habitsRes.columns));\n\n  const compRes = await exec(\n    `SELECT habit_id, date FROM habit_completions\n     WHERE done = 1 AND date >= date(?, ?)\n     ORDER BY date`,\n    [today, `-${days - 1} days`],\n  );\n  const comps = compRes.rows.map(toObj(compRes.columns));\n\n  const byHabit: Record<string, string[]> = {};\n  for (const c of comps) {\n    (byHabit[c.habit_id] ??= []).push(c.date as string);\n  }\n\n  return habits.map((h) => {\n    const dates = byHabit[h.id as string] ?? [];\n    return {\n      ...h,\n      count: dates.length,\n      currentStreak: currentStreak(dates, today),\n      longestStreak: longestStreak(dates),\n    };\n  });\n}\n\nexport async function getOneThingHistory(limit = 20) {\n  const listRes = await exec(\n    `SELECT id, title, category, week_start, completed_at FROM one_thing\n     WHERE completed = 1 AND completed_at IS NOT NULL\n     ORDER BY completed_at DESC\n     LIMIT ?`,\n    [limit],\n  );\n  const list = listRes.rows.map(toObj(listRes.columns));\n\n  const statRes = await exec(\n    \"SELECT COUNT(*) AS total, SUM(completed) AS completed FROM one_thing\",\n  );\n  const stat = toObj(statRes.columns)(statRes.rows[0]);\n  return {\n    list,\n    total: Number(stat.total) || 0,\n    completed: Number(stat.completed) || 0,\n  };\n}\n\n// Streak helpers — dates are \"YYYY-MM-DD\" strings in UTC, matching how\n// completions are keyed everywhere else.\nfunction ymd(d: Date) {\n  return d.toISOString().slice(0, 10);\n}\n\nfunction currentStreak(dates: string[], today = utcToday()) {\n  const set = new Set(dates);\n  const probe = new Date(today + \"T00:00:00Z\");\n  // Don't penalize an as-yet-unlogged today: if today isn't marked,\n  // start counting back from yesterday.\n  if (!set.has(ymd(probe))) probe.setUTCDate(probe.getUTCDate() - 1);\n  let streak = 0;\n  while (set.has(ymd(probe))) {\n    streak++;\n    probe.setUTCDate(probe.getUTCDate() - 1);\n  }\n  return streak;\n}\n\nfunction longestStreak(dates: string[]) {\n  const sorted = [...new Set(dates)].sort();\n  let longest = 0, run = 0;\n  let prev: number | null = null;\n  for (const ds of sorted) {\n    const t = new Date(ds + \"T00:00:00Z\").getTime();\n    if (prev !== null && Math.round((t - prev) / 86400000) === 1) run++;\n    else run = 1;\n    if (run > longest) longest = run;\n    prev = t;\n  }\n  return longest;\n}\n\n// ── Helper ───────────────────────────────────────────────────\n\nfunction toObj(columns: string[]) {\n  return (row: unknown[]) =>\n    Object.fromEntries(columns.map((col, i) => [col, row[i]]));\n}\n",[],[183,246],["D",1779803581118],[201,202,203],[183],["D",1779392946380],["D",1789494036282],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_125":295,"_296":297,"_298":299,"_300":25,"_301":25,"_302":25,"_303":123,"_304":-5,"_305":-7,"_306":-7,"_307":61,"_308":25,"_309":25,"_310":-5,"_311":25,"_312":25,"_313":25,"_314":-5},"ENV",{"_266":267,"_268":269,"_270":88,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v100