Harbour — Today

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_257":258,"_259":260},"routes/_app.x.$handle.$name",{"_97":96,"_31":44,"_105":87,"_26":52,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":24},"version",29,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","db/notion.ts","latestPath","fileId","1c2f52c2-6399-11f1-ad67-1607ee4eb77e","name","notion.ts","fileType","script","content","// 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 {\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","createdAt",["D",1780964467906],"branchVersion","branchId","205d39c6-554e-11f1-a855-ee650bb23af1","id","205aa06c-554e-11f1-a855-ee650bb23af1","Harbour",["D",1779392946380],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","019d0bcc-a320-7399-8f4f-7d3875d937d4","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d0bcc-a321-75bc-84e3-07d236c0ab73","tursoName","205aa06c554e11f1a855ee650bb23af1","tursoHostname","205aa06c554e11f1a855ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789494036282],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":24},"branch",{"_13":86,"_31":87,"_42":41,"_88":43,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":44,"_95":96},"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",{"_42":43,"_31":44,"_37":252,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":253,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":254,"_81":255,"_83":256,"_85":24},"tree",[201,205,206,207,208,209,210],"files",[201,202,203,204,205,206,207,208,209,210],"counts",{"_190":60,"_191":192,"_193":60,"_194":195,"_196":197},"contents",[127,128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":183,"_31":184,"_29":185,"_137":-5,"_40":41,"_39":186,"_139":122,"_37":187,"_13":60,"_33":188,"_35":-5,"_23":24,"_143":-5,"_26":189},{"_42":176,"_31":177,"_29":178,"_137":-5,"_40":41,"_39":179,"_139":24,"_37":180,"_13":173,"_33":20,"_35":181,"_23":24,"_143":-5,"_26":182},{"_42":168,"_31":169,"_29":170,"_137":-5,"_40":41,"_39":171,"_139":24,"_37":172,"_13":173,"_33":34,"_35":174,"_23":24,"_143":-5,"_26":175},{"_42":161,"_31":162,"_29":163,"_137":-5,"_40":41,"_39":164,"_139":24,"_37":165,"_13":157,"_33":34,"_35":166,"_23":24,"_143":-5,"_26":167},{"_42":152,"_31":153,"_29":154,"_137":-5,"_40":41,"_39":155,"_139":24,"_37":156,"_13":157,"_33":158,"_35":159,"_23":24,"_143":-5,"_26":160},{"_42":145,"_31":146,"_29":147,"_137":-5,"_40":41,"_39":148,"_139":122,"_37":149,"_13":141,"_33":34,"_35":150,"_23":24,"_143":-5,"_26":151},{"_42":134,"_31":135,"_29":136,"_137":-5,"_40":41,"_39":138,"_139":122,"_37":140,"_13":141,"_33":34,"_35":142,"_23":24,"_143":-5,"_26":144},"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",[135],"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});",[146],"99a00268-590a-11f1-b54d-ee650bb23af1","index.ts","20a5c902-554e-11f1-a855-ee650bb23af1",25,["D",1779803748672],4,"http","import { Hono } from \"npm:hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { initDB } from \"./db/init.ts\";\nimport {\n completeOneThing,\n createChecklistItem,\n createHabit,\n createOneThing,\n deleteChecklistItem,\n deleteHabit,\n getChecklistItems,\n getCompletions,\n getDailyLog,\n getHabitCompletions,\n getHabits,\n getOneThing,\n saveDailyLog,\n setCompletion,\n setHabitCompletion,\n updateChecklistItem,\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 completions = await getHabitCompletions(c.req.param(\"habitId\"));\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// ── 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// ── 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",[153],"7016c9f2-590c-11f1-aee0-ee650bb23af1","harbour.tsx","9910b956-554e-11f1-b7b0-ee650bb23af1",28,["D",1779804538003],"// 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 }) {\n return (\n
\n {days.map((on, i) => (\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\n React.useEffect(() => { if (!oneThing) setSettingNew(true); }, [oneThing]);\n\n const handleSet = () => {\n if (!newTitle.trim()) return;\n onSet(newTitle.trim(), newCategory.trim() || undefined);\n setNewTitle(\"\"); setNewCategory(\"\"); setSettingNew(false);\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 setNewTitle(e.target.value)} placeholder=\"What's the one thing this week?\" rows={2} style={fieldStyle(22)} />\n <input value={newCategory} onChange={(e) => setNewCategory(e.target.value)} 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 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, 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 <Field label=\"One thing to let go of\" t={t} placeholder=\"Quietly, without judgment…\" />\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 }) {\n return (\n <div>\n <Smallcaps color={t.muted} style={{ marginBottom: 6 }}>{label}</Smallcaps>\n <input placeholder={placeholder}\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 Evidence({ t, items }) {\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 <Smallcaps color={t.faint}><Mono>{items.length} entries</Mono></Smallcaps>\n </div>\n <div>\n {items.map((it, i) => (\n <div key={i} 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 <Mono style={{ fontSize: 11, color: t.muted, letterSpacing: \"0.04em\" }}>{it.time}</Mono>\n </div>\n ))}\n </div>\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 }) {\n if (habits.length === 0) {\n return (\n <div>\n <Smallcaps color={t.muted} style={{ marginBottom: 14 }}>Habits</Smallcaps>\n <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5 }}>\n No habits configured yet.\n </div>\n </div>\n );\n }\n return (\n <div>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n <Smallcaps color={t.muted}>Habits</Smallcaps>\n <Smallcaps color={t.faint}><Mono>last 7 days</Mono></Smallcaps>\n </div>\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} />\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 </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// 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 [expanded, setExpanded] = useState(false);\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\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 }),\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 // ── 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 // Evidence — placeholder until evidence log is built\n const evidence = [\n { title: \"Read 4 pages\", detail: null, time: \"9:08 pm\" },\n { title: \"Walk\", detail: \"22 min\", time: \"8:12 pm\" },\n { title: \"Launch pad\", detail: \"photo, clothes\", time: \"7:45 pm\" },\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 <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 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={evidence} />\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} />\n\n <Spacer h={36} />\n <ColophonQuote t={t} />\n <Spacer h={40} />\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",[162],"2810c4c4-590b-11f1-96bb-ee650bb23af1","app.tsx","232beb84-554e-11f1-8908-ee650bb23af1",26,["D",1779803987669],3,"// 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] = 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 ]);\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 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 <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n <div\n style={{\n ...baseBox,\n background: t.dark ? \"#000\" : \"#F2F2F7\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n borderRadius: t.showFrame ? 48 : 0,\n }}\n >\n <span\n style={{\n color: \"rgba(100,100,100,0.45)\",\n fontFamily: \"Geist, system-ui\",\n fontSize: 13,\n letterSpacing: \"0.06em\",\n textTransform: \"uppercase\",\n }}\n >\n Loading\n </span>\n </div>\n </div>\n );\n }\n\n if (loadError) {\n return (\n <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n <div\n style={{\n ...baseBox,\n background: t.dark ? \"#000\" : \"#F2F2F7\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: 10,\n padding: \"0 40px\",\n boxSizing: \"border-box\",\n }}\n >\n <span\n style={{\n color: \"#c0392b\",\n fontFamily: \"Geist, system-ui\",\n fontSize: 13,\n }}\n >\n Failed to load\n </span>\n <span\n style={{\n color: \"rgba(100,100,100,0.5)\",\n fontFamily: \"JetBrains Mono, monospace\",\n fontSize: 11,\n textAlign: \"center\",\n }}\n >\n {loadError}\n </span>\n </div>\n </div>\n );\n }\n\n const screen = (\n <HarbourToday\n tweaks={t}\n setTweak={setTweak}\n data={appData}\n onDataChange={setAppData}\n />\n );\n\n return (\n <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n {t.showFrame\n ? (\n <IOSDevice width={402} height={874} dark={t.dark}>\n {screen}\n </IOSDevice>\n )\n : (\n <div\n style={{\n ...baseBox,\n background: t.dark ? \"#000\" : \"#fff\",\n }}\n >\n {screen}\n </div>\n )}\n\n <TweaksPanel title=\"Tweaks\">\n <TweakSection label=\"Surface\" />\n <TweakToggle\n label=\"Dark mode\"\n value={t.dark}\n onChange={(v) => setTweak(\"dark\", v)}\n />\n <TweakToggle\n label=\"Device frame\"\n value={t.showFrame}\n onChange={(v) => setTweak(\"showFrame\", v)}\n />\n <TweakSection label=\"Type pairing\" />\n <TweakRadio\n label=\"Family\"\n value={t.kit}\n options={[\"editorial\", \"classic\"]}\n onChange={(v) => setTweak(\"kit\", v)}\n />\n <TweakSection label=\"Accent\" />\n <TweakRadio\n label=\"Color\"\n value={t.palette}\n options={[\"amber\", \"oxblood\", \"forest\", \"ink\"]}\n onChange={(v) => setTweak(\"palette\", v)}\n />\n </TweaksPanel>\n </div>\n );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(<App />);\n",[169],"ec80eb0a-554f-11f1-8ea0-ee650bb23af1","README.md","e42b7fd4-554e-11f1-9a4e-ee650bb23af1",21,["D",1779393718368],"# 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.",[177],"35bd70dc-590a-11f1-a7fd-ee650bb23af1","db","6cc02321-a6ec-4193-a52b-a798394487fe",23,["D",1779803581118],"directory",[184],"pulls","branches",1,"forks","envVars",{"_198":192,"_200":60},"connections",{"_198":60,"_199":60},"count","unfilledCount","emptyCount",{"_42":183,"_31":184,"_29":185,"_137":-5,"_40":41,"_39":186,"_139":122,"_37":249,"_13":60,"_33":188,"_35":-5,"_23":24,"_143":-5,"_212":250,"_26":251},{"_42":241,"_31":242,"_29":243,"_137":185,"_40":41,"_39":244,"_139":24,"_37":245,"_13":60,"_33":34,"_35":246,"_23":24,"_143":-5,"_212":247,"_26":248},{"_42":234,"_31":235,"_29":236,"_137":185,"_40":41,"_39":186,"_139":24,"_37":237,"_13":60,"_33":34,"_35":238,"_23":24,"_143":-5,"_212":239,"_26":240},{"_42":230,"_31":32,"_29":30,"_137":185,"_40":41,"_39":14,"_139":24,"_37":231,"_13":60,"_33":34,"_35":36,"_23":24,"_143":-5,"_212":232,"_26":233},{"_42":176,"_31":177,"_29":178,"_137":-5,"_40":41,"_39":179,"_139":24,"_37":227,"_13":173,"_33":20,"_35":181,"_23":24,"_143":-5,"_212":228,"_26":229},{"_42":168,"_31":169,"_29":170,"_137":-5,"_40":41,"_39":171,"_139":24,"_37":224,"_13":173,"_33":34,"_35":174,"_23":24,"_143":-5,"_212":225,"_26":226},{"_42":161,"_31":162,"_29":163,"_137":-5,"_40":41,"_39":164,"_139":24,"_37":221,"_13":157,"_33":34,"_35":166,"_23":24,"_143":-5,"_212":222,"_26":223},{"_42":152,"_31":153,"_29":154,"_137":-5,"_40":41,"_39":155,"_139":24,"_37":218,"_13":157,"_33":158,"_35":159,"_23":24,"_143":-5,"_212":219,"_26":220},{"_42":145,"_31":146,"_29":147,"_137":-5,"_40":41,"_39":148,"_139":122,"_37":215,"_13":141,"_33":34,"_35":150,"_23":24,"_143":-5,"_212":216,"_26":217},{"_42":134,"_31":135,"_29":136,"_137":-5,"_40":41,"_39":138,"_139":122,"_37":211,"_13":141,"_33":34,"_35":142,"_23":24,"_143":-5,"_212":213,"_26":214},["D",1779393598501],"children",[],[135],["D",1779393591237],[],[146],["D",1779803748672],[],[153],["D",1779804538003],[],[162],["D",1779803987669],[],[169],["D",1779393718368],[],[177],"d3d86088-6737-4722-b1fe-a55da85d06da",["D",1780964467906],[],[184,32],"35bd4224-590a-11f1-a7fd-ee650bb23af1","init.ts","35bd42ce-590a-11f1-a7fd-ee650bb23af1",["D",1779803581118],"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}\n",[],[184,235],"8365494a-590a-11f1-a27d-ee650bb23af1","api.ts","83654a08-590a-11f1-a27d-ee650bb23af1",24,["D",1779803711408],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// ── Checklist Items ──────────────────────────────────────────\n\nexport async function getChecklistItems(session?: string) {\n const result = session\n ? await sqlite.execute(\n \"SELECT * FROM checklist_items WHERE session = ? ORDER BY sort_order\",\n [session],\n )\n : await sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\n `UPDATE checklist_items SET ${fields} WHERE id = ?`,\n [...Object.values(updates), id],\n );\n}\n\nexport async function deleteChecklistItem(id: string) {\n await sqlite.execute(\"DELETE FROM checklist_completions WHERE item_id = ?\", [id]);\n await sqlite.execute(\"DELETE FROM checklist_items WHERE id = ?\", [id]);\n}\n\n// ── Checklist Completions ────────────────────────────────────\n\nexport async function getCompletions(date: string) {\n const result = await sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\"UPDATE habits SET active = 0 WHERE id = ?\", [id]);\n}\n\n// ── Habit Completions ────────────────────────────────────────\n\nexport async function getHabitCompletions(habitId: string) {\n const result = await sqlite.execute(\n `SELECT date, done FROM habit_completions\n WHERE habit_id = ? AND date >= date('now', '-6 days')\n ORDER BY date`,\n [habitId],\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function setHabitCompletion(habitId: string, date: string, done: boolean) {\n await sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\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 sqlite.execute(\n \"UPDATE one_thing SET completed = 1, completed_at = ? WHERE id = ?\",\n [new Date().toISOString(), id],\n );\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",[],[184,242],["D",1779803581118],[202,203,204],[184],["D",1779392946380],["D",1789494036282],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":24},{"_13":86,"_31":87,"_42":41,"_88":43,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":44,"_95":96},"ctx",{"_79":-5,"_124":290,"_291":292,"_293":294,"_295":24,"_296":24,"_297":24,"_298":122,"_299":-5,"_300":-7,"_301":-7,"_302":60,"_303":24,"_304":24,"_305":-5,"_306":24,"_307":24,"_308":24,"_309":-5},"ENV",{"_261":262,"_263":264,"_265":87,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"] </article></body></html>

Diff · v29