Harbour — Today

[{"_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",69,"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","app.tsx","latestPath","fileId","232beb84-554e-11f1-8908-ee650bb23af1","name","fileType","script","content","// app.jsx — App shell: data fetching, device frame, tweaks panel wiring\n\nfunction todayStr() {\n return new Date().toISOString().slice(0, 10);\n}\n\nfunction currentWeekStart() {\n const d = new Date();\n d.setDate(d.getDate() - d.getDay()); // rewind to Sunday\n return d.toISOString().slice(0, 10);\n}\n\nfunction isSunday() {\n return new Date().getDay() === 0;\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 const [items, completions, logs, habits, oneThing, evidence] = await Promise.all([\n fetch(\"/api/checklist/items\").then((r) => r.json()),\n fetch(`/api/checklist/completions?date=${date}`).then((r) => r.json()),\n fetch(`/api/logs?date=${date}`).then((r) => r.json()),\n fetch(\"/api/habits\").then((r) => r.json()),\n fetch(`/api/one-thing?week_start=${weekStart}`).then((r) => r.json()),\n fetch(`/api/evidence?date=${date}`).then((r) => r.json()),\n ]);\n\n // Fetch 7-day completions for each habit in parallel\n const habitCompletions = await Promise.all(\n habits.map((h) =>\n fetch(`/api/habit-completions/${h.id}`).then((r) => r.json())\n ),\n );\n\n // Build completion map: { item_id: done }\n const completionMap = {};\n completions.forEach((c) => {\n completionMap[c.item_id] = !!c.done;\n });\n\n const morning = items\n .filter((i) => i.session === \"morning\")\n .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n const evening = items\n .filter((i) => i.session === \"evening\")\n .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n // Build habits with last-7-days boolean array (oldest → newest)\n const habitsWithDays = habits.map((h, idx) => {\n const rows = habitCompletions[idx];\n const days = Array.from({ length: 7 }, (_, i) => {\n const d = new Date();\n d.setDate(d.getDate() - (6 - i));\n const ds = d.toISOString().slice(0, 10);\n const row = rows.find((r) => r.date === ds);\n return row ? !!row.done : false;\n });\n return { ...h, days };\n });\n\n setAppData({\n date,\n weekStart,\n morning,\n evening,\n logs,\n habits: habitsWithDays,\n oneThing,\n evidence: Array.isArray(evidence) ? evidence : [],\n showSundayPrompt: isSunday() && !oneThing,\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

\n \n \n Loading\n \n

\n \n );\n }\n\n if (loadError) {\n return (\n

\n \n \n Failed to load\n \n \n {loadError}\n \n

\n \n );\n }\n\n const screen = (\n \n );\n\n return (\n

\n {t.showFrame\n ? (\n \n {screen}\n \n )\n : (\n \n {screen}\n

\n )}\n\n \n \n setTweak(\"dark\", v)}\n />\n setTweak(\"showFrame\", v)}\n />\n \n setTweak(\"kit\", v)}\n />\n \n setTweak(\"palette\", v)}\n />\n \n \n );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render();\n","// app.jsx — App shell: data fetching, device frame, tweaks panel wiring\n\nfunction todayStr() {\n return new Date().toISOString().slice(0, 10);\n}\n\nfunction currentWeekStart() {\n const d = new Date();\n d.setDate(d.getDate() - d.getDay()); // rewind to Sunday\n return d.toISOString().slice(0, 10);\n}\n\nfunction isSunday() {\n return new Date().getDay() === 0;\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 const [items, completions, logs, habits, oneThing, evidence] = await Promise.all([\n fetch(\"/api/checklist/items\").then((r) => r.json()),\n fetch(`/api/checklist/completions?date=${date}`).then((r) => r.json()),\n fetch(`/api/logs?date=${date}`).then((r) => r.json()),\n fetch(\"/api/habits\").then((r) => r.json()),\n fetch(`/api/one-thing?week_start=${weekStart}`).then((r) => r.json()),\n fetch(`/api/evidence?date=${date}`).then((r) => r.json()),\n ]);\n\n // Fetch 7-day completions for each habit in parallel\n const habitCompletions = await Promise.all(\n habits.map((h) =>\n fetch(`/api/habit-completions/${h.id}`).then((r) => r.json())\n ),\n );\n\n // Build completion map: { item_id: done }\n const completionMap = {};\n completions.forEach((c) => {\n completionMap[c.item_id] = !!c.done;\n });\n\n const morning = items\n .filter((i) => i.session === \"morning\")\n .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n const evening = items\n .filter((i) => i.session === \"evening\")\n .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n // Build habits with last-7-days (Today) and last-28-days (Habits tab)\n const habitsWithDays = habits.map((h, idx) => {\n const rows = habitCompletions[idx];\n const mk = (len) => Array.from({ length: len }, (_, i) => {\n const d = new Date();\n d.setDate(d.getDate() - (len - 1 - i));\n const ds = d.toISOString().slice(0, 10);\n const row = rows.find((r) => r.date === ds);\n return row ? !!row.done : false;\n });\n return { ...h, days: mk(7), history: mk(28) };\n });\n\n setAppData({\n date,\n weekStart,\n morning,\n evening,\n logs,\n habits: habitsWithDays,\n oneThing,\n evidence: Array.isArray(evidence) ? evidence : [],\n showSundayPrompt: isSunday() && !oneThing,\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

\n \n \n Loading\n \n

\n \n );\n }\n\n if (loadError) {\n return (\n

\n \n \n Failed to load\n \n \n {loadError}\n \n

\n \n );\n }\n\n const screen = (\n \n );\n\n return (\n

\n {t.showFrame\n ? (\n \n {screen}\n \n )\n : (\n \n {screen}\n

\n )}\n\n \n \n setTweak(\"dark\", v)}\n />\n setTweak(\"showFrame\", v)}\n />\n \n setTweak(\"kit\", v)}\n />\n \n setTweak(\"palette\", v)}\n />\n \n \n );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render();\n","createdAt",["D",1781374878534],"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",1789580441083],"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":170,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":171,"_13":172,"_33":34,"_35":37,"_24":25,"_144":-5,"_27":173},{"_43":162,"_32":163,"_30":164,"_138":-5,"_41":42,"_40":165,"_140":25,"_38":166,"_13":167,"_33":34,"_35":168,"_24":25,"_144":-5,"_27":169},{"_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 , 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//

\n// Hello\n// \n// \n// setTweak('fontSize', v)} />\n// setTweak('density', v)} />\n// \n// setTweak('primaryColor', v)} />\n// setTweak('palette', v)} />\n// setTweak('dark', v)} />\n// \n//

\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,\");\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 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 \n \n

\n {title}\n e.stopPropagation()}\n onClick={dismiss}\n >\n ✕\n \n

\n {children}\n {hasDeckStage && railEnabled && !noDeckControls && (\n \n \n \n )}\n

\n \n \n );\n}\n\n// ── Layout helpers ──────────────────────────────────────────────────────────\n\nfunction TweakSection({ label, children }) {\n return (\n <>\n

{label}

\n {children}\n \n );\n}\n\nfunction TweakRow({ label, value, children, inline = false }) {\n return (\n

\n {label}\n {value != null && {value}}\n

\n {children}\n

\n );\n}\n\n// ── Controls ────────────────────────────────────────────────────────────────\n\nfunction TweakSlider(\n { label, value, min = 0, max = 100, step = 1, unit = \"\", onChange },\n) {\n return (\n \n onChange(Number(e.target.value))}\n />\n \n );\n}\n\nfunction TweakToggle({ label, value, onChange }) {\n return (\n

\n {label}\n

\n onChange(!value)}\n >\n \n \n

\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 // \n \n );\n}\n\nfunction TweakText({ label, value, placeholder, onChange }) {\n return (\n \n onChange(e.target.value)}\n />\n \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
\n {label}\n onChange(clamp(Number(e.target.value)))}\n />\n {unit && {unit}}\n
\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 \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
\n
\n {label}\n
\n onChange(e.target.value)}\n />\n
\n );\n }\n // Native 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 \n
\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 onChange(o)}\n >\n {sup.length > 0 && (\n \n {sup.map((c, j) => )}\n \n )}\n {on && <__TwkCheck light={__twkIsLight(hero)} />}\n \n );\n })}\n
\n \n );\n}\n\nfunction TweakButton({ label, onClick, secondary = false }) {\n return (\n \n {label}\n \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 \n \n \n {time}\n \n \n \n \n \n \n \n \n );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Liquid glass pill — blur + tint + shine\n// ─────────────────────────────────────────────────────────────\nfunction IOSGlassPill({ children, dark = false, style = {} }) {\n return (\n \n {/* blur + tint */}\n \n {/* shine */}\n \n \n {children}\n \n \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 \n \n {content}\n \n \n );\n return (\n \n \n {/* back chevron */}\n {pillIcon(\n \n \n ,\n )}\n {/* trailing ellipsis */}\n {trailingIcon && pillIcon(\n ,\n )}\n \n {/* large title */}\n \n {title}\n \n \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 \n {icon && (\n \n )}\n
{title}
\n {detail && {detail}}\n {chevron && (\n \n )}\n {!isLast && (\n \n )}\n \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
\n {header && (\n \n {header}\n
\n )}\n \n {children}\n \n \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 \n {/* dynamic island */}\n \n {/* status bar (absolute) */}\n \n \n \n {/* nav + content */}\n
\n {title !== undefined && }\n
{children}
\n {keyboard && }\n
\n {/* home indicator — always on top */}\n \n \n \n \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 \n ),\n del: (\n \n ),\n ret: (\n \n ),\n };\n\n const key = (content, { w, flex, ret, fs = 25, k } = {}) => (\n \n {content}\n \n );\n\n const row = (keys, pad = 0) => (\n \n {keys.map((l) => key(l, { flex: true, k: l }))}\n \n );\n\n return (\n \n {/* liquid glass bg — same recipe as nav pills */}\n \n \n\n {/* autocorrect bar */}\n \n {['\"The\"', \"the\", \"to\"].map((w, i) => (\n \n {i > 0 && (\n \n )}\n \n {w}\n \n \n ))}\n \n\n {/* key layout */}\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
\n {key(icons.shift, { w: 45, k: \"shift\" })}\n
\n {[\"z\", \"x\", \"c\", \"v\", \"b\", \"n\", \"m\"].map((l) =>\n key(l, { flex: true, k: l })\n )}\n
\n {key(icons.del, { w: 45, k: \"del\" })}\n
\n
\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
\n \n\n {/* bottom spacer (emoji+mic area, icons omitted) */}\n
\n
\n );\n}\n\nObject.assign(window, {\n IOSDevice,\n IOSStatusBar,\n IOSNavBar,\n IOSGlassPill,\n IOSList,\n IOSListRow,\n IOSKeyboard,\n});",[147],"975a7ded-0f6b-4772-8e78-27f50a9ba5d2","index.ts","20a5c902-554e-11f1-a855-ee650bb23af1",68,["D",1781374869786],13,"http","import { Hono } from \"npm:hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { initDB } from \"./db/init.ts\";\nimport { getHomeListItems } from \"./db/notion.ts\";\nimport {\n completeOneThing,\n createChecklistItem,\n createEvidence,\n createHabit,\n createOneThing,\n deleteChecklistItem,\n deleteEvidence,\n deleteHabit,\n getChecklistItems,\n getCompletions,\n getDailyLog,\n getEvidence,\n getHabitCompletions,\n getHabitHistory,\n getHabits,\n getEnergyHistory,\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 = `\n\n\n\nHarbour — Today\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n`;\n\napp.get(\"/\", (c) => c.html(HTML));\n\n// ── JSX modules ──────────────────────────────────────────────\n\nasync function serveJsx(filename: string): Promise {\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// ── 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 completions = await getHabitCompletions(c.req.param(\"habitId\"), days);\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 [energy, habits, oneThing] = await Promise.all([\n getEnergyHistory(days),\n getHabitHistory(days),\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\n// ── Date helpers ─────────────────────────────────────────────\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],"2293514d-04ac-4ba0-98d2-e78c66df0fd8","harbour.tsx","9910b956-554e-11f1-b7b0-ee650bb23af1",66,["D",1781374853616],26,"// 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\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 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 return (\n
\n
\n Tuesday · evening\n Mar 4\n
\n
\n Harbour\n
\n
\n A quiet log of small, good things.\n
\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\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 setEditingId(item.id);\n setEditVals({ title: item.title, detail: item.detail || \"\", section: item.section });\n };\n\n const commitEdit = (id) => {\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 }) {\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\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 setEditingId(h.id);\n setEditVals({ name: h.name, note: h.note || \"\" });\n };\n\n const commitEdit = (id) => {\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>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 <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 </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.\" />\n <Spacer h={36} />\n <Habits t={t} habits={habits} editMode={editMode} setEditMode={setEditMode}\n onToggleToday={onToggleToday} onAdd={onAdd} onUpdate={onUpdate} onDelete={onDelete} />\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, values, w = 300, h = 56 }) {\n if (!values.length) return null;\n const min = 1, max = 5;\n const n = values.length;\n const x = (i) => (n === 1 ? w / 2 : (i / (n - 1)) * w);\n const y = (v) => h - ((Math.max(min, Math.min(max, v)) - min) / (max - min)) * h;\n const pts = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(\" \");\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 <polyline points={pts} fill=\"none\" stroke={t.accent} strokeWidth=\"1.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n </svg>\n );\n}\n\nfunction EnergyTrend({ t, energy, days }) {\n const vals = energy.map((e) => Number(e.energy)).filter((v) => !isNaN(v));\n const avg = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.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 {vals.length === 0 ? (\n <PlaceholderNote t={t}>No energy logged yet.</PlaceholderNote>\n ) : (\n <React.Fragment>\n <Sparkline t={t} values={vals} />\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 {vals.length} {vals.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 }) {\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\")\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} />\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 }) {\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 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=\"Everything you might pick as a 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={i} style={{ display: \"flex\", alignItems: \"baseline\", gap: 12, padding: \"11px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n <span style={{ display: \"inline-block\", width: 5, height: 5, borderRadius: \"50%\", background: t.accentSoft, flexShrink: 0, transform: \"translateY(-3px)\" }} />\n <span style={{ flex: 1, fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{it.title}</span>\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 // ── 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 await fetch(`/api/checklist/completions/${id}`, {\n method: \"PUT\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ done: newDone, date: data.date }),\n });\n const key = clTab;\n onDataChange((prev) => ({ ...prev, [key]: prev[key].map((x) => x.id === id ? { ...x, done: newDone } : x) }));\n if (saved) setSaved(false);\n };\n\n // ── Checklist CRUD ──────────────────────────────────────────\n const addItem = async (item) => {\n const res = await fetch(\"/api/checklist/items\", {\n method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(item),\n });\n const newItem = await res.json();\n const key = item.session;\n onDataChange((prev) => ({ ...prev, [key]: [...prev[key], { ...newItem, done: false }] }));\n };\n\n const updateItem = async (id, updates) => {\n await fetch(`/api/checklist/items/${id}`, {\n method: \"PUT\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(updates),\n });\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 };\n\n const removeItem = async (id) => {\n await fetch(`/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 };\n\n // ── Save evening log ────────────────────────────────────────\n const saveLog = async () => {\n await fetch(\"/api/logs\", {\n method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ date: data.date, session: \"evening\", energy, note, gratitude, let_go: letGo }),\n });\n setSaved(true);\n };\n\n // ── One Thing ───────────────────────────────────────────────\n const handleCompleteOneThing = async () => {\n await fetch(`/api/one-thing/${data.oneThing.id}/complete`, {\n method: \"PUT\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({}),\n });\n onDataChange((prev) => ({ ...prev, oneThing: null }));\n };\n\n const handleSetOneThing = async (title, category) => {\n const res = await fetch(\"/api/one-thing\", {\n method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, category, weekStart: data.weekStart }),\n });\n const oneThing = await res.json();\n onDataChange((prev) => ({ ...prev, oneThing, showSundayPrompt: false }));\n };\n\n // ── Evidence ────────────────────────────────────────────────\n const addEvidence = async (entry) => {\n const res = await fetch(\"/api/evidence\", {\n method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ ...entry, date: data.date }),\n });\n const newEntry = await res.json();\n onDataChange((prev) => ({ ...prev, evidence: [...(prev.evidence ?? []), newEntry] }));\n };\n\n const removeEvidence = async (id) => {\n await fetch(`/api/evidence/${id}`, { method: \"DELETE\" });\n onDataChange((prev) => ({ ...prev, evidence: (prev.evidence ?? []).filter((x) => x.id !== id) }));\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[6];\n await fetch(`/api/habit-completions/${id}/${data.date}`, {\n method: \"PUT\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ done: newDone }),\n });\n onDataChange((prev) => ({\n ...prev,\n habits: prev.habits.map((h) =>\n h.id === id ? { ...h, days: h.days.map((v, i) => i === 6 ? newDone : v) } : h),\n }));\n };\n\n const addHabit = async (habit) => {\n const res = await fetch(\"/api/habits\", {\n method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(habit),\n });\n const newHabit = await res.json();\n onDataChange((prev) => ({ ...prev, habits: [...prev.habits, { ...newHabit, days: Array(7).fill(false) }] }));\n };\n\n const updateHabit = async (id, updates) => {\n await fetch(`/api/habits/${id}`, {\n method: \"PUT\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(updates),\n });\n onDataChange((prev) => ({ ...prev, habits: prev.habits.map((h) => h.id === id ? { ...h, ...updates } : h) }));\n };\n\n const removeHabit = async (id) => {\n await fetch(`/api/habits/${id}`, { method: \"DELETE\" });\n onDataChange((prev) => ({ ...prev, habits: prev.habits.filter((h) => h.id !== id) }));\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, width: \"100%\", height: \"100%\", background: t.bg, color: t.ink, fontFamily: t.sans, display: \"flex\", flexDirection: \"column\", overflow: \"hidden\" }}>\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",[163],"5ee0161b-f57a-4111-80df-619e6cc0388d",["D",1781374878534],6,[28],"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":25,"_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":25,"_38":233,"_13":61,"_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":170,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":223,"_13":172,"_33":34,"_35":37,"_24":25,"_144":-5,"_211":224,"_27":225},{"_43":162,"_32":163,"_30":164,"_138":-5,"_41":42,"_40":165,"_140":25,"_38":220,"_13":167,"_33":34,"_35":168,"_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",1781374869786],[],[154],["D",1781374853616],[],[163],["D",1781374878534],[],[28],["D",1779393718368],[],[175],"d3d86088-6737-4722-b1fe-a55da85d06da","notion.ts","1c2f52c2-6399-11f1-ad67-1607ee4eb77e",29,["D",1780964467906],"// 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 title: string;\n category: string;\n}\n\nexport async function getHomeListItems(): Promise<HomeListItem[]> {\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\n // Page through all blocks (Notion returns max 100 per request)\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(), {\n headers: {\n Authorization: `Bearer ${token}`,\n \"Notion-Version\": NOTION_VERSION,\n },\n });\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 let currentSection = \"\";\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({ title, category: currentSection });\n }\n }\n\n cursor = data.has_more ? data.next_cursor : undefined;\n } while (cursor);\n\n return items;\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],"2b51150f-05ca-44c3-84da-e61edaaac623","api.ts","83654a08-590a-11f1-a27d-ee650bb23af1",67,["D",1781374863113],5,"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 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 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\nexport async function getHabitCompletions(habitId: string, days = 28) {\n const result = await exec(\n `SELECT date, done FROM habit_completions\n WHERE habit_id = ? AND date >= date('now', ?)\n ORDER BY date`,\n [habitId, `-${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 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) {\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('now', ?)\n ORDER BY date`,\n [`-${days - 1} days`],\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function getHabitHistory(days = 30) {\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('now', ?)\n ORDER BY date`,\n [`-${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),\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[]) {\n const set = new Set(dates);\n const probe = new Date();\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",1789580441083],{"_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","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v69