Harbour — Today

\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});","deleted","label",[116],"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});",[134],"d047ddcf-a62b-4c14-a9a7-c4c6ea1d00eb","index.ts","20a5c902-554e-11f1-a855-ee650bb23af1",112,["D",1784424381890],17,"http","import { Hono } from \"npm:hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport Babel from \"npm:@babel/standalone@7.29.0\";\nimport { initDB } from \"./db/init.ts\";\nimport { checkHomeListItem, getHomeListItems } from \"./db/notion.ts\";\nimport {\n completeOneThing,\n createChecklistItem,\n createEvidence,\n createHabit,\n createOneThing,\n deleteChecklistItem,\n deleteEvidence,\n deleteHabit,\n getAllHabitCompletions,\n getChecklistItems,\n getCompletions,\n getDailyLog,\n getEnergyHistory,\n getEvidence,\n getHabitCompletions,\n getHabitHistory,\n getHabits,\n getOneThing,\n getOneThingHistory,\n saveDailyLog,\n setCompletion,\n setHabitCompletion,\n updateChecklistItem,\n updateEvidence,\n updateHabit,\n} from \"./db/api.ts\";\n\nawait initDB();\n\nconst app = new Hono();\n\n// ── HTML shell ───────────────────────────────────────────────\n\nconst HTML = `\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\n\n\n`;\n\napp.get(\"/\", (c) => c.html(HTML));\n\n// ── Client modules — JSX compiled server-side, once per isolate ──\n\nconst jsCache = new Map();\n\nasync function serveCompiled(filename: string): Promise {\n let code = jsCache.get(filename);\n if (!code) {\n const src = await readFile(filename, import.meta.url);\n code = Babel.transform(src, {\n filename,\n presets: [[\"typescript\", { isTSX: true, allExtensions: true }], \"react\"],\n }).code!;\n jsCache.set(filename, code);\n }\n return new Response(code, {\n headers: { \"content-type\": \"text/javascript; charset=utf-8\" },\n });\n}\n\napp.get(\"/ios-frame.js\", () => serveCompiled(\"/ios-frame.tsx\"));\napp.get(\"/tweaks-panel.js\", () => serveCompiled(\"/tweaks-panel.tsx\"));\napp.get(\"/harbour.js\", () => serveCompiled(\"/harbour.tsx\"));\napp.get(\"/app.js\", () => serveCompiled(\"/app.tsx\"));\n\n// Legacy raw-JSX routes (kept so an already-open old tab keeps working)\nasync function serveJsx(filename: string): Promise {\n const body = await readFile(filename, import.meta.url);\n return new Response(body, {\n headers: { \"content-type\": \"text/babel; charset=utf-8\" },\n });\n}\n\napp.get(\"/ios-frame.jsx\", () => serveJsx(\"/ios-frame.tsx\"));\napp.get(\"/tweaks-panel.jsx\", () => serveJsx(\"/tweaks-panel.tsx\"));\napp.get(\"/harbour.jsx\", () => serveJsx(\"/harbour.tsx\"));\napp.get(\"/app.jsx\", () => serveJsx(\"/app.tsx\"));\n\n// ── Bootstrap — everything the Today screen needs, one round trip ──\n\napp.get(\"/api/bootstrap\", async (c) => {\n const date = dateParam(c.req.query(\"date\")) ?? today();\n const weekStart = dateParam(c.req.query(\"weekStart\")) ?? currentWeekStart();\n const days = Number(c.req.query(\"days\")) || 28;\n const [items, completions, morning, evening, habits, habitCompletions, oneThing, evidence] =\n await Promise.all([\n getChecklistItems(),\n getCompletions(date),\n getDailyLog(date, \"morning\"),\n getDailyLog(date, \"evening\"),\n getHabits(),\n getAllHabitCompletions(days, date),\n getOneThing(weekStart),\n getEvidence(date),\n ]);\n return c.json({\n date,\n weekStart,\n days,\n items,\n completions,\n logs: { morning, evening },\n habits,\n habitCompletions,\n oneThing,\n evidence,\n });\n});\n\n// ── Checklist items ──────────────────────────────────────────\n\napp.get(\"/api/checklist/items\", async (c) => {\n const session = c.req.query(\"session\");\n const items = await getChecklistItems(session);\n return c.json(items);\n});\n\napp.post(\"/api/checklist/items\", async (c) => {\n const body = await c.req.json();\n const item = await createChecklistItem(body);\n return c.json(item, 201);\n});\n\napp.put(\"/api/checklist/items/:id\", async (c) => {\n const body = await c.req.json();\n await updateChecklistItem(c.req.param(\"id\"), body);\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/checklist/items/:id\", async (c) => {\n await deleteChecklistItem(c.req.param(\"id\"));\n return c.json({ ok: true });\n});\n\n// ── Checklist completions ────────────────────────────────────\n\napp.get(\"/api/checklist/completions\", async (c) => {\n const date = c.req.query(\"date\") ?? today();\n const completions = await getCompletions(date);\n return c.json(completions);\n});\n\napp.put(\"/api/checklist/completions/:itemId\", async (c) => {\n const { done, date } = await c.req.json();\n await setCompletion(c.req.param(\"itemId\"), date ?? today(), done);\n return c.json({ ok: true });\n});\n\n// ── Daily logs ───────────────────────────────────────────────\n\napp.get(\"/api/logs\", async (c) => {\n const date = c.req.query(\"date\") ?? today();\n const session = c.req.query(\"session\");\n if (session) {\n const log = await getDailyLog(date, session);\n return c.json(log);\n }\n const [morning, evening] = await Promise.all([\n getDailyLog(date, \"morning\"),\n getDailyLog(date, \"evening\"),\n ]);\n return c.json({ morning, evening });\n});\n\napp.post(\"/api/logs\", async (c) => {\n const body = await c.req.json();\n await saveDailyLog(body);\n return c.json({ ok: true });\n});\n\n// ── Habits ───────────────────────────────────────────────────\n\napp.get(\"/api/habits\", async (c) => {\n const habits = await getHabits();\n return c.json(habits);\n});\n\napp.post(\"/api/habits\", async (c) => {\n const body = await c.req.json();\n const habit = await createHabit(body);\n return c.json(habit, 201);\n});\n\napp.put(\"/api/habits/:id\", async (c) => {\n const body = await c.req.json();\n await updateHabit(c.req.param(\"id\"), body);\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/habits/:id\", async (c) => {\n await deleteHabit(c.req.param(\"id\"));\n return c.json({ ok: true });\n});\n\n// ── Habit completions ────────────────────────────────────────\n\napp.get(\"/api/habit-completions/:habitId\", async (c) => {\n const days = Number(c.req.query(\"days\")) || 28;\n const anchor = dateParam(c.req.query(\"today\"));\n const completions = await getHabitCompletions(c.req.param(\"habitId\"), days, anchor);\n return c.json(completions);\n});\n\napp.put(\"/api/habit-completions/:habitId/:date\", async (c) => {\n const { done } = await c.req.json();\n await setHabitCompletion(c.req.param(\"habitId\"), c.req.param(\"date\"), done);\n return c.json({ ok: true });\n});\n\n// ── Metrics ──────────────────────────────────────────────────\n\napp.get(\"/api/metrics\", async (c) => {\n const days = Number(c.req.query(\"days\")) || 30;\n const anchor = dateParam(c.req.query(\"today\"));\n const [energy, habits, oneThing] = await Promise.all([\n getEnergyHistory(days, anchor),\n getHabitHistory(days, anchor),\n getOneThingHistory(20),\n ]);\n return c.json({ days, energy, habits, oneThing });\n});\n\n// ── One Thing ────────────────────────────────────────────────\n\napp.get(\"/api/one-thing\", async (c) => {\n const weekStart = c.req.query(\"week_start\") ?? currentWeekStart();\n const oneThing = await getOneThing(weekStart);\n return c.json(oneThing);\n});\n\napp.post(\"/api/one-thing\", async (c) => {\n const body = await c.req.json();\n const oneThing = await createOneThing(body);\n return c.json(oneThing, 201);\n});\n\napp.put(\"/api/one-thing/:id/complete\", async (c) => {\n await completeOneThing(c.req.param(\"id\"));\n return c.json({ ok: true });\n});\n\n// ── Evidence ─────────────────────────────────────────────────\n\napp.get(\"/api/evidence\", async (c) => {\n const date = c.req.query(\"date\") ?? today();\n const items = await getEvidence(date);\n return c.json(items);\n});\n\napp.post(\"/api/evidence\", async (c) => {\n const body = await c.req.json();\n const item = await createEvidence({ ...body, date: body.date ?? today() });\n return c.json(item, 201);\n});\n\napp.put(\"/api/evidence/:id\", async (c) => {\n const body = await c.req.json();\n await updateEvidence(c.req.param(\"id\"), body);\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/evidence/:id\", async (c) => {\n await deleteEvidence(c.req.param(\"id\"));\n return c.json({ ok: true });\n});\n\n// ── Notion ───────────────────────────────────────────────────\n\napp.get(\"/api/notion/home-list\", async (c) => {\n try {\n const items = await getHomeListItems();\n return c.json(items);\n } catch (e) {\n return c.json({ error: e.message }, 500);\n }\n});\n\napp.post(\"/api/notion/home-list/:blockId/check\", async (c) => {\n try {\n await checkHomeListItem(c.req.param(\"blockId\"));\n return c.json({ ok: true });\n } catch (e) {\n return c.json({ error: e.message }, 500);\n }\n});\n\n// ── Date helpers ─────────────────────────────────────────────\n// UTC fallbacks; real requests carry the client's local date so the\n// day boundary follows the user's timezone.\n\nconst DATE_RE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\nfunction dateParam(v: string | undefined): string | undefined {\n return v && DATE_RE.test(v) ? v : undefined;\n}\n\nfunction today(): string {\n return new Date().toISOString().slice(0, 10);\n}\n\nfunction currentWeekStart(): string {\n const d = new Date();\n d.setDate(d.getDate() - d.getDay()); // rewind to Sunday\n return d.toISOString().slice(0, 10);\n}\n\nexport default app.fetch;\n",[141],"9f3e8adc-2605-4585-a90c-350c87881ddd","harbour.tsx","9910b956-554e-11f1-b7b0-ee650bb23af1",111,["D",1784424122722],51,"// harbour.jsx — Harbour Today screen\n\nconst { useState, useMemo } = React;\n\n// ─────────────────────────────────────────────────────────────\n// Theme tokens\n// ─────────────────────────────────────────────────────────────\nconst PALETTES = {\n amber: { hue: 50, name: \"Amber\" },\n oxblood: { hue: 25, name: \"Oxblood\" },\n forest: { hue: 160, name: \"Forest\" },\n ink: { hue: 60, name: \"Ink only\", mono: true },\n};\n\nconst TYPE_KITS = {\n editorial: {\n name: \"Editorial\",\n serif: '\"Newsreader\", \"Source Serif Pro\", Georgia, serif',\n sans: '\"Geist\", system-ui, sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, monospace',\n serifFeatures: '\"ss01\" 1',\n bigWeight: 400, bigStretch: 1, bigLetter: \"-0.02em\",\n },\n classic: {\n name: \"Classic\",\n serif: '\"EB Garamond\", \"Garamond\", Georgia, serif',\n sans: '\"Hanken Grotesk\", system-ui, sans-serif',\n mono: '\"IBM Plex Mono\", ui-monospace, monospace',\n serifFeatures: \"normal\",\n bigWeight: 500, bigStretch: 1, bigLetter: \"-0.015em\",\n },\n};\n\nfunction buildTheme({ dark, palette, kit }) {\n const p = PALETTES[palette];\n const t = TYPE_KITS[kit];\n const inkOnly = !!p.mono;\n if (dark) {\n return {\n ...t,\n bg: \"oklch(15% 0.012 60)\", bgDeep: \"oklch(12% 0.012 60)\", bgInset: \"oklch(18% 0.012 60)\",\n ink: \"oklch(94% 0.008 80)\", muted: \"oklch(66% 0.012 80)\", faint: \"oklch(42% 0.012 60)\",\n rule: \"oklch(28% 0.012 60)\", ruleSoft: \"oklch(23% 0.012 60)\",\n accent: inkOnly ? \"oklch(94% 0.008 80)\" : `oklch(72% 0.13 ${p.hue})`,\n accentSoft: inkOnly ? \"oklch(40% 0.008 80)\" : `oklch(40% 0.10 ${p.hue})`,\n dark: true, inkOnly,\n };\n }\n return {\n ...t,\n bg: \"oklch(96.5% 0.012 80)\", bgDeep: \"oklch(93% 0.014 80)\", bgInset: \"oklch(98% 0.008 80)\",\n ink: \"oklch(20% 0.015 60)\", muted: \"oklch(46% 0.013 60)\", faint: \"oklch(74% 0.012 60)\",\n rule: \"oklch(84% 0.014 80)\", ruleSoft: \"oklch(89% 0.012 80)\",\n accent: inkOnly ? \"oklch(28% 0.015 60)\" : `oklch(50% 0.14 ${p.hue})`,\n accentSoft: inkOnly ? \"oklch(60% 0.015 60)\" : `oklch(70% 0.10 ${p.hue})`,\n dark: false, inkOnly,\n };\n}\n\n// ─────────────────────────────────────────────────────────────\n// Atoms\n// ─────────────────────────────────────────────────────────────\nfunction Smallcaps({ children, style, color }) {\n return (\n
\n {children}\n
\n );\n}\n\nfunction Mono({ children, style }) {\n return {children};\n}\n\nfunction Rule({ color, style }) {\n return
;\n}\n\n// Shared fetch wrapper — throws on non-2xx so a failed save can't\n// silently look like success.\nasync function api(url, opts) {\n const res = await fetch(url, opts);\n if (!res.ok) throw new Error(`Save failed (${res.status})`);\n const ct = res.headers.get(\"content-type\") || \"\";\n return ct.includes(\"application/json\") ? res.json() : null;\n}\n\nfunction jsonOpts(method, body) {\n return { method, headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(body) };\n}\n\nfunction TallyRow({ days, accent, faint, gap = 7, h = 22, w = 3, onToggleToday, todayBorder }) {\n return (\n
\n {days.map((on, i) => {\n const isToday = onToggleToday && i === days.length - 1;\n const cellStyle = { width: w, height: h, borderRadius: 0.5, background: on ? accent : \"transparent\", border: on ? \"none\" : `1px solid ${isToday ? (todayBorder || faint) : faint}`, boxSizing: \"border-box\" };\n return isToday ? (\n \n ) : (\n
\n );\n })}\n
\n );\n}\n\nfunction HabitHeatmap({ days, accent, faint, todayBorder, onToggleToday }) {\n return (\n
\n {days.map((on, i) => {\n const isToday = i === days.length - 1;\n const cellStyle = { width: \"100%\", aspectRatio: \"1 / 1\", borderRadius: 1, background: on ? accent : \"transparent\", border: on ? \"none\" : `1px solid ${isToday ? (todayBorder || faint) : faint}`, boxSizing: \"border-box\" };\n return isToday ? (\n \n ) : (\n
\n );\n })}\n
\n );\n}\n\nfunction EnergyMeter({ value, max = 5, t, onChange }) {\n return (\n
\n {Array.from({ length: max }).map((_, i) => (\n
\n );\n}\n\nfunction Tick({ checked, onClick, t, size = 18 }) {\n return (\n \n );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Sections\n// ─────────────────────────────────────────────────────────────\nfunction Masthead({ t }) {\n const now = new Date();\n const weekday = now.toLocaleDateString(\"en-US\", { weekday: \"long\" });\n const md = now.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n const h = now.getHours();\n const session = h < 12 ? \"morning\" : h < 17 ? \"afternoon\" : \"evening\";\n return (\n
\n
\n {weekday} · {session}\n {md}\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 // Enter commits AND fires the input's onBlur — this ref stops the\n // second identical PUT.\n const commitGuard = React.useRef(false);\n\n const sections = useMemo(() => [...new Set(list.map((i) => i.section))], [list]);\n\n const groups = useMemo(() => {\n const map = new Map();\n list.forEach((it) => {\n if (!map.has(it.section)) map.set(it.section, []);\n map.get(it.section).push(it);\n });\n return [...map.entries()];\n }, [list]);\n\n const remaining = list.filter((x) => !x.done).length;\n\n const startEdit = (item) => {\n commitGuard.current = false;\n setEditingId(item.id);\n setEditVals({ title: item.title, detail: item.detail || \"\", section: item.section });\n };\n\n const commitEdit = (id) => {\n if (commitGuard.current) return;\n commitGuard.current = true;\n if (editVals.title?.trim()) {\n onUpdate(id, {\n title: editVals.title.trim(),\n detail: editVals.detail?.trim() || null,\n section: editVals.section?.trim() || \"General\",\n });\n }\n setEditingId(null);\n };\n\n const submitAdd = () => {\n if (!addForm.title.trim()) return;\n onAdd({ session: tab, section: addForm.section.trim() || \"General\", title: addForm.title.trim(), detail: addForm.detail.trim() || undefined, sort_order: list.length });\n setAddForm((f) => ({ ...f, title: \"\", detail: \"\" }));\n setShowAdd(false);\n };\n\n const fieldStyle = (size = 16, extra = {}) => ({\n width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n });\n\n const linkBtn = (onClick, label, color) => (\n <button type=\"button\" onClick={onClick}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: color || t.muted, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n {label}\n </button>\n );\n\n const tabsRow = (\n <div style={{ display: \"flex\", gap: 28, marginBottom: 24 }}>\n {[{ id: \"morning\", label: \"Morning\", count: counts.morning }, { id: \"evening\", label: \"Evening\", count: counts.evening }].map((item) => {\n const active = tab === item.id;\n return (\n <button key={item.id} type=\"button\" onClick={() => setTab(item.id)}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", padding: \"6px 0 8px\", cursor: \"pointer\", borderBottom: active ? `1.5px solid ${t.ink}` : `1.5px solid transparent`, color: active ? t.ink : t.muted, display: \"flex\", alignItems: \"baseline\", gap: 8 }}>\n <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 18, fontWeight: 400, letterSpacing: \"-0.005em\" }}>{item.label}</span>\n {!editMode && <Mono style={{ fontSize: 11, color: active ? t.muted : t.faint }}>{item.count}</Mono>}\n </button>\n );\n })}\n </div>\n );\n\n return (\n <div>\n {/* Header */}\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 16 }}>\n <Smallcaps color={t.muted}>Checklist</Smallcaps>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n {!editMode && list.length > 0 && (\n <Smallcaps color={t.faint}><Mono>{remaining} to go</Mono></Smallcaps>\n )}\n <button type=\"button\"\n onClick={() => { setEditMode(!editMode); setEditingId(null); setShowAdd(false); }}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n {editMode ? \"done\" : \"edit\"}\n </button>\n </div>\n </div>\n\n {tabsRow}\n\n {/* ── Normal mode ── */}\n {!editMode && list.length === 0 && (\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5 }}>\n No {tab} items yet.\n </span>\n <button type=\"button\" onClick={() => setEditMode(true)}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n Add items →\n </button>\n </div>\n )}\n\n {!editMode && list.length > 0 && groups.map(([section, items], gi) => (\n <div key={section} style={{ marginBottom: gi === groups.length - 1 ? 0 : 28 }}>\n <Smallcaps color={t.faint} style={{ marginBottom: 12 }}>{section}</Smallcaps>\n <div>\n {items.map((it, i) => (\n <div key={it.id} style={{ display: \"flex\", alignItems: \"flex-start\", gap: 14, padding: \"11px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n <div style={{ paddingTop: 2 }}>\n <Tick checked={it.done} onClick={() => toggle(it.id)} t={t} />\n </div>\n <div style={{ flex: 1 }}>\n <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, fontWeight: 400, letterSpacing: \"-0.005em\", color: it.done ? t.faint : t.ink, textDecoration: it.done ? \"line-through\" : \"none\", textDecorationThickness: \"0.5px\" }}>\n {it.title}\n </div>\n {it.detail && (\n <div style={{ fontFamily: t.sans, fontSize: 12.5, color: it.done ? t.faint : t.muted, marginTop: 3, letterSpacing: \"0.005em\" }}>\n {it.detail}\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n ))}\n\n {/* ── Edit mode ── */}\n {editMode && (\n <div>\n {/* Existing items */}\n {groups.map(([section, items], gi) => (\n <div key={section} style={{ marginBottom: 24 }}>\n <Smallcaps color={t.faint} style={{ marginBottom: 10 }}>{section}</Smallcaps>\n {items.map((it, i) => (\n <div key={it.id} style={{ borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n {editingId === it.id ? (\n <div style={{ padding: \"12px 0\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n <input autoFocus value={editVals.title}\n onChange={(e) => setEditVals((v) => ({ ...v, title: e.target.value }))}\n onBlur={() => commitEdit(it.id)}\n onKeyDown={(e) => { if (e.key === \"Enter\") { e.preventDefault(); commitEdit(it.id); } if (e.key === \"Escape\") setEditingId(null); }}\n placeholder=\"Title\" style={fieldStyle(16)} />\n <input value={editVals.detail}\n onChange={(e) => setEditVals((v) => ({ ...v, detail: e.target.value }))}\n onBlur={() => commitEdit(it.id)}\n placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n <input value={editVals.section} list=\"hb-section-opts\"\n onChange={(e) => setEditVals((v) => ({ ...v, section: e.target.value }))}\n onBlur={() => commitEdit(it.id)}\n placeholder=\"Section\" style={fieldStyle(11, { color: t.muted, borderBottomColor: t.ruleSoft, letterSpacing: \"0.06em\", textTransform: \"uppercase\" })} />\n </div>\n ) : (\n <div style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"10px 0\" }}>\n <div style={{ flex: 1, cursor: \"pointer\" }} onClick={() => startEdit(it)}>\n <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{it.title}</div>\n {it.detail && <div style={{ fontFamily: t.sans, fontSize: 12.5, color: t.muted, marginTop: 3 }}>{it.detail}</div>}\n <div style={{ fontFamily: t.sans, fontSize: 10, color: t.faint, marginTop: 4, letterSpacing: \"0.06em\", textTransform: \"uppercase\" }}>{it.section}</div>\n </div>\n <button type=\"button\" onClick={() => onDelete(it.id)} aria-label=\"Delete item\"\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 20, lineHeight: 1, cursor: \"pointer\", padding: \"2px 4px\", flexShrink: 0 }}>\n ×\n </button>\n </div>\n )}\n </div>\n ))}\n </div>\n ))}\n\n {list.length === 0 && (\n <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, marginBottom: 20 }}>\n No {tab} items yet.\n </div>\n )}\n\n {/* Section autocomplete */}\n <datalist id=\"hb-section-opts\">\n {sections.map((s) => <option key={s} value={s} />)}\n </datalist>\n\n {/* Add item form */}\n {showAdd ? (\n <div style={{ paddingTop: 16, borderTop: `1px solid ${t.rule}`, display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n <input autoFocus value={addForm.title}\n onChange={(e) => setAddForm((f) => ({ ...f, title: e.target.value }))}\n onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n placeholder=\"Title\" style={fieldStyle(16)} />\n <input value={addForm.detail}\n onChange={(e) => setAddForm((f) => ({ ...f, detail: e.target.value }))}\n placeholder=\"Detail (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n <input value={addForm.section} list=\"hb-section-opts\"\n onChange={(e) => setAddForm((f) => ({ ...f, section: e.target.value }))}\n placeholder=\"Section\" style={fieldStyle(11, { color: t.muted, borderBottomColor: t.ruleSoft, letterSpacing: \"0.06em\", textTransform: \"uppercase\" })} />\n <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n <button type=\"button\" onClick={submitAdd}\n style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n Add\n </button>\n {linkBtn(() => setShowAdd(false), \"cancel\")}\n </div>\n </div>\n ) : (\n <button type=\"button\"\n onClick={() => { setShowAdd(true); setAddForm({ section: sections[sections.length - 1] || \"\", title: \"\", detail: \"\" }); }}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"12px 0 0\" }}>\n + Add item\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n\nfunction Habits({ t, habits, editMode, setEditMode, onToggleToday, onAdd, onUpdate, onDelete, wide }) {\n const [editingId, setEditingId] = useState(null);\n const [editVals, setEditVals] = useState({});\n const [showAdd, setShowAdd] = useState(false);\n const [addForm, setAddForm] = useState({ name: \"\", note: \"\" });\n // Enter commits AND fires the input's onBlur — this ref stops the\n // second identical PUT.\n const commitGuard = React.useRef(false);\n\n const fieldStyle = (size = 16, extra = {}) => ({\n width: \"100%\", boxSizing: \"border-box\", background: \"transparent\", border: \"none\",\n borderBottom: `1px solid ${t.rule}`, padding: \"3px 0 6px\", color: t.ink,\n fontFamily: t.serif, fontStyle: \"italic\", fontSize: size, lineHeight: 1.4, outline: \"none\", ...extra,\n });\n\n const startEdit = (h) => {\n commitGuard.current = false;\n setEditingId(h.id);\n setEditVals({ name: h.name, note: h.note || \"\" });\n };\n\n const commitEdit = (id) => {\n if (commitGuard.current) return;\n commitGuard.current = true;\n if (editVals.name?.trim()) {\n onUpdate(id, { name: editVals.name.trim(), note: editVals.note?.trim() || null });\n }\n setEditingId(null);\n };\n\n const submitAdd = () => {\n if (!addForm.name.trim()) return;\n onAdd({ name: addForm.name.trim(), note: addForm.note.trim() || undefined, sort_order: habits.length });\n setAddForm({ name: \"\", note: \"\" });\n setShowAdd(false);\n };\n\n return (\n <div>\n {/* Header */}\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n <Smallcaps color={t.muted}>Habits</Smallcaps>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>\n {!editMode && habits.length > 0 && <Smallcaps color={t.faint}><Mono>{wide ? \"last 4 weeks\" : \"last 7 days\"}</Mono></Smallcaps>}\n <button type=\"button\"\n onClick={() => { setEditMode(!editMode); setEditingId(null); setShowAdd(false); }}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: editMode ? t.ink : t.muted, fontFamily: t.sans, fontSize: 11.5, fontWeight: editMode ? 500 : 400, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0, letterSpacing: \"0.04em\" }}>\n {editMode ? \"done\" : \"edit\"}\n </button>\n </div>\n </div>\n\n {/* ── Normal mode ── */}\n {!editMode && habits.length === 0 && (\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n <span style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, lineHeight: 1.5 }}>\n No habits yet.\n </span>\n <button type=\"button\" onClick={() => setEditMode(true)}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: 0 }}>\n Add habits →\n </button>\n </div>\n )}\n\n {!editMode && habits.length > 0 && (\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: 22 }}>\n {habits.map((h) => {\n const hist = h.history || h.days;\n return wide ? (\n <div key={h.id} style={{ paddingTop: 18, borderTop: `1px solid ${t.ruleSoft}` }}>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 14 }}>\n <div>\n <div style={{ fontFamily: t.serif, fontSize: 22, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.1 }}>{h.name}</div>\n {h.note && <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 14, color: t.muted, marginTop: 4, lineHeight: 1.4 }}>{h.note}</div>}\n </div>\n <Mono style={{ fontSize: 10.5, color: t.faint, letterSpacing: \"0.08em\", flexShrink: 0, marginLeft: 12 }}>{hist.filter(Boolean).length} of {hist.length}</Mono>\n </div>\n <HabitHeatmap days={hist} accent={t.accent} faint={t.rule} todayBorder={t.accentSoft} onToggleToday={() => onToggleToday(h.id)} />\n </div>\n ) : (\n <div key={h.id} style={{ display: \"grid\", gridTemplateColumns: \"1fr auto\", columnGap: 18, rowGap: 10, paddingTop: 18, borderTop: `1px solid ${t.ruleSoft}` }}>\n <div>\n <div style={{ fontFamily: t.serif, fontSize: 22, fontWeight: 400, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.1 }}>{h.name}</div>\n {h.note && <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 14, color: t.muted, marginTop: 4, lineHeight: 1.4 }}>{h.note}</div>}\n </div>\n <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"flex-end\", gap: 8 }}>\n <TallyRow days={h.days} accent={t.accent} faint={t.rule} todayBorder={t.accentSoft} onToggleToday={() => onToggleToday(h.id)} />\n <Mono style={{ fontSize: 10.5, color: t.faint, letterSpacing: \"0.08em\" }}>{h.days.filter(Boolean).length} of 7</Mono>\n </div>\n </div>\n );\n })}\n </div>\n )}\n\n {/* ── Edit mode ── */}\n {editMode && (\n <div>\n {habits.map((h, i) => (\n <div key={h.id} style={{ borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n {editingId === h.id ? (\n <div style={{ padding: \"12px 0\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n <input autoFocus value={editVals.name}\n onChange={(e) => setEditVals((v) => ({ ...v, name: e.target.value }))}\n onBlur={() => commitEdit(h.id)}\n onKeyDown={(e) => { if (e.key === \"Enter\") { e.preventDefault(); commitEdit(h.id); } if (e.key === \"Escape\") setEditingId(null); }}\n placeholder=\"Habit name\" style={fieldStyle(17)} />\n <input value={editVals.note}\n onChange={(e) => setEditVals((v) => ({ ...v, note: e.target.value }))}\n onBlur={() => commitEdit(h.id)}\n placeholder=\"Note (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n </div>\n ) : (\n <div style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"12px 0\" }}>\n <div style={{ flex: 1, cursor: \"pointer\" }} onClick={() => startEdit(h)}>\n <div style={{ fontFamily: t.serif, fontSize: 18, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{h.name}</div>\n {h.note && <div style={{ fontFamily: t.sans, fontSize: 12.5, color: t.muted, marginTop: 3 }}>{h.note}</div>}\n </div>\n <button type=\"button\" onClick={() => onDelete(h.id)} aria-label=\"Delete habit\"\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.faint, fontFamily: t.sans, fontSize: 20, lineHeight: 1, cursor: \"pointer\", padding: \"2px 4px\", flexShrink: 0 }}>\n ×\n </button>\n </div>\n )}\n </div>\n ))}\n\n {habits.length === 0 && (\n <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 15, color: t.faint, marginBottom: 20 }}>\n No habits yet.\n </div>\n )}\n\n {/* Add habit form */}\n {showAdd ? (\n <div style={{ paddingTop: 16, borderTop: habits.length ? `1px solid ${t.rule}` : \"none\", display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n <input autoFocus value={addForm.name}\n onChange={(e) => setAddForm((f) => ({ ...f, name: e.target.value }))}\n onKeyDown={(e) => { if (e.key === \"Enter\") submitAdd(); if (e.key === \"Escape\") setShowAdd(false); }}\n placeholder=\"Habit name\" style={fieldStyle(17)} />\n <input value={addForm.note}\n onChange={(e) => setAddForm((f) => ({ ...f, note: e.target.value }))}\n placeholder=\"Note (optional)\" style={fieldStyle(13, { color: t.muted, borderBottomColor: t.ruleSoft })} />\n <div style={{ display: \"flex\", gap: 14, marginTop: 4 }}>\n <button type=\"button\" onClick={submitAdd}\n style={{ appearance: \"none\", background: t.ink, color: t.bg, border: \"none\", fontFamily: t.sans, fontSize: 13, fontWeight: 500, padding: \"8px 18px\", cursor: \"pointer\" }}>\n Add\n </button>\n <button type=\"button\" onClick={() => { setShowAdd(false); setAddForm({ name: \"\", note: \"\" }); }}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: 0 }}>\n cancel\n </button>\n </div>\n </div>\n ) : (\n <button type=\"button\" onClick={() => setShowAdd(true)}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.muted, fontFamily: t.sans, fontSize: 13, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.rule, padding: \"14px 0 0\" }}>\n + Add habit\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n\nfunction ColophonQuote({ t }) {\n return (\n <div style={{ borderTop: `1px solid ${t.ruleSoft}`, paddingTop: 22, marginTop: 8 }}>\n <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 16, lineHeight: 1.5, color: t.muted, letterSpacing: \"-0.005em\" }}>\n \"You do not rise to the level of your goals.<br />\n You fall to the level of your systems.\"\n </div>\n <Smallcaps color={t.faint} style={{ marginTop: 10 }}>— a note to self</Smallcaps>\n </div>\n );\n}\n\nfunction TabBar({ t, tab, setTab }) {\n const items = [\n { id: \"today\", label: \"Today\", icon: \"anchor\" },\n { id: \"habits\", label: \"Habits\", icon: \"flame\" },\n { id: \"metrics\", label: \"Metrics\", icon: \"chart\" },\n { id: \"home\", label: \"Home list\", icon: \"list\" },\n ];\n return (\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", borderTop: `1px solid ${t.rule}`, padding: \"14px 12px calc(18px + env(safe-area-inset-bottom))\", background: t.bg }}>\n {items.map((it) => {\n const active = it.id === tab;\n return (\n <button key={it.id} type=\"button\" onClick={() => setTab(it.id)}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 4, cursor: \"pointer\", padding: 4 }}>\n <TabIcon name={it.icon} color={active ? t.ink : t.faint} />\n <span style={{ fontFamily: t.serif, fontStyle: active ? \"italic\" : \"normal\", fontSize: 11.5, letterSpacing: \"0.01em\", color: active ? t.ink : t.muted, fontWeight: 400 }}>\n {it.label}\n </span>\n </button>\n );\n })}\n </div>\n );\n}\n\nfunction TabIcon({ name, color }) {\n const p = { width: 16, height: 16, viewBox: \"0 0 16 16\", fill: \"none\", stroke: color, strokeWidth: 1.2, strokeLinecap: \"round\", strokeLinejoin: \"round\" };\n if (name === \"anchor\") return <svg {...p}><circle cx=\"8\" cy=\"3.5\" r=\"1.4\" /><path d=\"M8 5v9\" /><path d=\"M3 11c0 2 2.2 3.5 5 3.5s5-1.5 5-3.5\" /><path d=\"M5.5 7.5h5\" /></svg>;\n if (name === \"flame\") return <svg {...p}><path d=\"M8 14c-2.5 0-4-1.6-4-3.6 0-1.5 1-2.5 1.6-3 .2-.2.5-.1.5.2 0 .8.4 1.2.8 1.2.5 0 .8-.4.7-1.2-.2-1.6.4-3.4 1.8-4.4.3-.2.7 0 .6.4-.3 1.4.4 2 1.3 3 .8.9 1.2 1.9 1.2 3 .1 2.4-1.7 4.4-4.5 4.4Z\" /></svg>;\n if (name === \"chart\") return <svg {...p}><path d=\"M2.5 11.5 6 7.5l2.5 2 5-5\" /><path d=\"M9.5 4.5h4v4\" /></svg>;\n return <svg {...p}><path d=\"M5 4h8.5\" /><path d=\"M5 8h8.5\" /><path d=\"M5 12h8.5\" /><circle cx=\"2.6\" cy=\"4\" r=\".7\" fill={color} stroke=\"none\" /><circle cx=\"2.6\" cy=\"8\" r=\".7\" fill={color} stroke=\"none\" /><circle cx=\"2.6\" cy=\"12\" r=\".7\" fill={color} stroke=\"none\" /></svg>;\n}\n\n// ─────────────────────────────────────────────────────────────\n// Screens — shared header + per-tab bodies\n// ─────────────────────────────────────────────────────────────\nfunction ScreenHeader({ t, kicker, title, subtitle }) {\n return (\n <div>\n <Smallcaps color={t.muted}>{kicker}</Smallcaps>\n <div style={{ fontFamily: t.serif, fontSize: 46, lineHeight: 0.96, fontWeight: t.bigWeight, letterSpacing: t.bigLetter, color: t.ink, marginTop: 14, fontFeatureSettings: t.serifFeatures }}>\n {title}\n </div>\n {subtitle && (\n <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontWeight: 300, fontSize: 15.5, lineHeight: 1.4, color: t.muted, marginTop: 10 }}>\n {subtitle}\n </div>\n )}\n </div>\n );\n}\n\nfunction PlaceholderNote({ t, children }) {\n return (\n <div style={{ fontFamily: t.serif, fontStyle: \"italic\", fontSize: 16, color: t.faint, lineHeight: 1.6 }}>\n {children}\n </div>\n );\n}\n\nfunction HabitsScreen({ t, habits, onToggleToday, onAdd, onUpdate, onDelete }) {\n const [editMode, setEditMode] = useState(false);\n return (\n <div>\n <ScreenHeader t={t} kicker=\"Practice · daily\" title=\"Habits\" subtitle=\"The small things, kept — the last four weeks at a glance.\" />\n <Spacer h={36} />\n <Habits t={t} habits={habits} editMode={editMode} setEditMode={setEditMode}\n onToggleToday={onToggleToday} onAdd={onAdd} onUpdate={onUpdate} onDelete={onDelete} wide />\n <Spacer h={40} />\n </div>\n );\n}\n\nfunction formatDate(iso) {\n if (!iso) return \"\";\n const d = new Date(iso);\n if (isNaN(d.getTime())) return \"\";\n return d.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n\nfunction Sparkline({ t, points, w = 300, h = 56 }) {\n if (!points.length) return null;\n const min = 1, max = 5;\n const x = (fx) => Math.max(0, Math.min(1, fx)) * w;\n const y = (v) => h - ((Math.max(min, Math.min(max, v)) - min) / (max - min)) * h;\n return (\n <svg width=\"100%\" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio=\"none\" style={{ display: \"block\", overflow: \"visible\" }}>\n <line x1=\"0\" y1={h} x2={w} y2={h} stroke={t.ruleSoft} strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n {points.length === 1 ? (\n <circle cx={x(points[0].fx)} cy={y(points[0].v)} r=\"2.5\" fill={t.accent} />\n ) : (\n <polyline points={points.map((p) => `${x(p.fx).toFixed(1)},${y(p.v).toFixed(1)}`).join(\" \")}\n fill=\"none\" stroke={t.accent} strokeWidth=\"1.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n )}\n </svg>\n );\n}\n\nfunction EnergyTrend({ t, energy, days, date }) {\n // Position points by actual date within the window so gaps in logging\n // read as gaps, not as adjacent days.\n const end = Date.parse((date || (energy.length ? energy[energy.length - 1].date : \"\")) + \"T00:00:00Z\");\n const span = Math.max(1, (days - 1) * 86400000);\n const start = end - span;\n const points = energy\n .map((e) => ({ v: Number(e.energy), fx: (Date.parse(e.date + \"T00:00:00Z\") - start) / span }))\n .filter((p) => !isNaN(p.v) && isFinite(p.fx));\n const avg = points.length ? points.reduce((a, p) => a + p.v, 0) / points.length : 0;\n return (\n <div>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n <Smallcaps color={t.muted}>Energy trend</Smallcaps>\n <Smallcaps color={t.faint}><Mono>last {days} days</Mono></Smallcaps>\n </div>\n {points.length === 0 ? (\n <PlaceholderNote t={t}>No energy logged yet.</PlaceholderNote>\n ) : (\n <React.Fragment>\n <Sparkline t={t} points={points} />\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginTop: 14 }}>\n <span style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted }}>\n {points.length} {points.length === 1 ? \"evening\" : \"evenings\"} logged\n </span>\n <span style={{ fontFamily: t.mono, fontSize: 13, color: t.ink, letterSpacing: \"0.04em\" }}>\n avg {avg.toFixed(1)}<span style={{ color: t.faint }}> / 5</span>\n </span>\n </div>\n </React.Fragment>\n )}\n </div>\n );\n}\n\nfunction Stat({ t, value, label }) {\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"flex-end\", gap: 3 }}>\n <Mono style={{ fontSize: 14, color: t.ink, letterSpacing: \"0.02em\" }}>{value}</Mono>\n <Smallcaps color={t.faint} style={{ fontSize: 9 }}>{label}</Smallcaps>\n </div>\n );\n}\n\nfunction HabitConsistency({ t, habits, days }) {\n return (\n <div>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n <Smallcaps color={t.muted}>Habit consistency</Smallcaps>\n <Smallcaps color={t.faint}><Mono>last {days} days</Mono></Smallcaps>\n </div>\n {habits.length === 0 ? (\n <PlaceholderNote t={t}>No habits to measure yet.</PlaceholderNote>\n ) : (\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n {habits.map((h) => (\n <div key={h.id} style={{ display: \"grid\", gridTemplateColumns: \"1fr auto\", columnGap: 16, paddingTop: 16, borderTop: `1px solid ${t.ruleSoft}`, alignItems: \"baseline\" }}>\n <div style={{ fontFamily: t.serif, fontSize: 19, color: t.ink, letterSpacing: \"-0.005em\", lineHeight: 1.2 }}>{h.name}</div>\n <div style={{ display: \"flex\", gap: 20, alignItems: \"baseline\" }}>\n <Stat t={t} value={h.currentStreak} label=\"now\" />\n <Stat t={t} value={h.longestStreak} label=\"best\" />\n <Stat t={t} value={`${h.count}/${days}`} label=\"days\" />\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction OneThingHistory({ t, oneThing }) {\n const { list, total, completed } = oneThing;\n return (\n <div>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"baseline\", marginBottom: 18 }}>\n <Smallcaps color={t.muted}>One Thing history</Smallcaps>\n {total > 0 && <Smallcaps color={t.faint}><Mono>{completed} of {total} done</Mono></Smallcaps>}\n </div>\n {list.length === 0 ? (\n <PlaceholderNote t={t}>No completed focuses yet.</PlaceholderNote>\n ) : (\n <div>\n {list.map((o, i) => (\n <div key={o.id} style={{ display: \"flex\", alignItems: \"baseline\", gap: 12, padding: \"12px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n <span style={{ color: t.accent, fontFamily: t.mono, fontSize: 11, flexShrink: 0 }}>✓</span>\n <div style={{ flex: 1 }}>\n <div style={{ fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{o.title}</div>\n {o.category && <div style={{ fontFamily: t.sans, fontSize: 11.5, color: t.muted, marginTop: 2 }}>{o.category}</div>}\n </div>\n <Mono style={{ fontSize: 11, color: t.faint, letterSpacing: \"0.04em\" }}>{formatDate(o.completed_at)}</Mono>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction MetricsScreen({ t, date }) {\n const [data, setData] = useState(null);\n const [error, setError] = useState(null);\n\n React.useEffect(() => {\n let alive = true;\n fetch(`/api/metrics?days=30&today=${date}`)\n .then((r) => r.json())\n .then((d) => { if (alive) setData(d); })\n .catch((e) => { if (alive) setError(e.message); });\n return () => { alive = false; };\n }, []);\n\n return (\n <div>\n <ScreenHeader t={t} kicker=\"The long view\" title=\"Metrics\" subtitle=\"Energy, habits, and what mattered — over time.\" />\n <Spacer h={36} />\n {error && <PlaceholderNote t={t}>Couldn't load metrics — {error}</PlaceholderNote>}\n {!error && !data && <PlaceholderNote t={t}>Gathering the last 30 days…</PlaceholderNote>}\n {data && (\n <React.Fragment>\n <EnergyTrend t={t} energy={data.energy} days={data.days} date={date} />\n <Spacer h={40} /><Rule color={t.rule} /><Spacer h={32} />\n <HabitConsistency t={t} habits={data.habits} days={data.days} />\n <Spacer h={40} /><Rule color={t.rule} /><Spacer h={32} />\n <OneThingHistory t={t} oneThing={data.oneThing} />\n <Spacer h={40} />\n </React.Fragment>\n )}\n </div>\n );\n}\n\nfunction HomeScreen({ t, onFocus, onError }) {\n const [items, setItems] = useState(null);\n const [error, setError] = useState(null);\n\n React.useEffect(() => {\n let alive = true;\n fetch(\"/api/notion/home-list\")\n .then((r) => r.json())\n .then((d) => {\n if (!alive) return;\n if (Array.isArray(d)) setItems(d);\n else setError(d?.error || \"Unexpected response\");\n })\n .catch((e) => { if (alive) setError(e.message); });\n return () => { alive = false; };\n }, []);\n\n const checkItem = async (it) => {\n try {\n await api(`/api/notion/home-list/${it.id}/check`, { method: \"POST\" });\n setItems((prev) => (prev || []).filter((x) => x.id !== it.id));\n } catch (e) { onError(e); }\n };\n\n const groups = useMemo(() => {\n if (!items) return [];\n const map = new Map();\n items.forEach((it) => {\n const cat = it.category || \"Other\";\n if (!map.has(cat)) map.set(cat, []);\n map.get(cat).push(it);\n });\n return [...map.entries()];\n }, [items]);\n\n return (\n <div>\n <ScreenHeader t={t} kicker=\"From Notion\" title=\"Home list\" subtitle=\"Check things off, or pick one as this week's focus.\" />\n <Spacer h={36} />\n {error && <PlaceholderNote t={t}>Couldn't reach Notion — {error}</PlaceholderNote>}\n {!error && !items && <PlaceholderNote t={t}>Loading from Notion…</PlaceholderNote>}\n {items && items.length === 0 && <PlaceholderNote t={t}>Your Home List is all clear.</PlaceholderNote>}\n {groups.map(([cat, list], gi) => (\n <div key={cat} style={{ marginBottom: gi === groups.length - 1 ? 0 : 30 }}>\n <Smallcaps color={t.faint} style={{ marginBottom: 12 }}>{cat}</Smallcaps>\n <div>\n {list.map((it, i) => (\n <div key={it.id} style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, padding: \"11px 0\", borderTop: i === 0 ? \"none\" : `1px solid ${t.ruleSoft}` }}>\n <div style={{ paddingTop: 2 }}>\n <Tick checked={false} onClick={() => checkItem(it)} t={t} size={16} />\n </div>\n <span style={{ flex: 1, fontFamily: t.serif, fontSize: 17, lineHeight: 1.3, color: t.ink, letterSpacing: \"-0.005em\" }}>{it.title}</span>\n <button type=\"button\" onClick={() => onFocus(it)}\n style={{ appearance: \"none\", background: \"transparent\", border: \"none\", color: t.accent, fontFamily: t.sans, fontSize: 11.5, cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 4, textDecorationColor: t.accentSoft, padding: \"2px 0 0\", flexShrink: 0 }}>\n focus →\n </button>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Screen\n// ─────────────────────────────────────────────────────────────\nfunction HarbourToday({ tweaks, setTweak, data, onDataChange, standalone }) {\n const t = useMemo(\n () => buildTheme({ dark: tweaks.dark, palette: tweaks.palette, kit: tweaks.kit }),\n [tweaks.dark, tweaks.palette, tweaks.kit],\n );\n\n const eveningLog = data.logs?.evening;\n const [energy, setEnergy] = useState(eveningLog?.energy ?? 3);\n const [note, setNote] = useState(eveningLog?.note ?? \"\");\n const [gratitude, setGratitude] = useState(eveningLog?.gratitude ?? \"\");\n const [letGo, setLetGo] = useState(eveningLog?.let_go ?? \"\");\n const [expanded, setExpanded] = useState(!!(eveningLog?.gratitude || eveningLog?.let_go));\n const [saved, setSaved] = useState(!!eveningLog);\n const [tab, setTab] = useState(\"today\");\n const [clTab, setClTab] = useState(\"evening\");\n const [clEditMode, setClEditMode] = useState(false);\n const [habitsEditMode, setHabitsEditMode] = useState(false);\n\n // Transient error banner — surfaced whenever a save fails so the\n // optimistic UI never silently lies.\n const [flash, setFlash] = useState(null);\n const flashTimer = React.useRef(null);\n const report = (err) => {\n setFlash(err && err.message ? err.message : \"Something went wrong\");\n clearTimeout(flashTimer.current);\n flashTimer.current = setTimeout(() => setFlash(null), 4000);\n };\n\n // ── Checklist toggle ────────────────────────────────────────\n const toggleItem = async (id) => {\n const list = clTab === \"morning\" ? data.morning : data.evening;\n const item = list.find((x) => x.id === id);\n const newDone = !item.done;\n const key = clTab;\n try {\n await api(`/api/checklist/completions/${id}`, jsonOpts(\"PUT\", { done: newDone, date: data.date }));\n onDataChange((prev) => ({ ...prev, [key]: prev[key].map((x) => x.id === id ? { ...x, done: newDone } : x) }));\n if (saved) setSaved(false);\n } catch (e) { report(e); }\n };\n\n // ── Checklist CRUD ──────────────────────────────────────────\n const addItem = async (item) => {\n try {\n const newItem = await api(\"/api/checklist/items\", jsonOpts(\"POST\", item));\n const key = item.session;\n onDataChange((prev) => ({ ...prev, [key]: [...prev[key], { ...newItem, done: false }] }));\n } catch (e) { report(e); }\n };\n\n const updateItem = async (id, updates) => {\n try {\n await api(`/api/checklist/items/${id}`, jsonOpts(\"PUT\", updates));\n onDataChange((prev) => ({\n ...prev,\n morning: prev.morning.map((x) => x.id === id ? { ...x, ...updates } : x),\n evening: prev.evening.map((x) => x.id === id ? { ...x, ...updates } : x),\n }));\n } catch (e) { report(e); }\n };\n\n const removeItem = async (id) => {\n try {\n await api(`/api/checklist/items/${id}`, { method: \"DELETE\" });\n onDataChange((prev) => ({\n ...prev,\n morning: prev.morning.filter((x) => x.id !== id),\n evening: prev.evening.filter((x) => x.id !== id),\n }));\n } catch (e) { report(e); }\n };\n\n // ── Save evening log ────────────────────────────────────────\n const saveLog = async () => {\n try {\n await api(\"/api/logs\", jsonOpts(\"POST\", { date: data.date, session: \"evening\", energy, note, gratitude, let_go: letGo }));\n setSaved(true);\n } catch (e) { report(e); }\n };\n\n // ── One Thing ───────────────────────────────────────────────\n const handleCompleteOneThing = async () => {\n try {\n await api(`/api/one-thing/${data.oneThing.id}/complete`, jsonOpts(\"PUT\", {}));\n onDataChange((prev) => ({ ...prev, oneThing: null }));\n } catch (e) { report(e); }\n };\n\n const handleSetOneThing = async (title, category) => {\n try {\n const oneThing = await api(\"/api/one-thing\", jsonOpts(\"POST\", { title, category, weekStart: data.weekStart }));\n onDataChange((prev) => ({ ...prev, oneThing }));\n } catch (e) { report(e); }\n };\n\n // ── Evidence ────────────────────────────────────────────────\n const addEvidence = async (entry) => {\n try {\n const newEntry = await api(\"/api/evidence\", jsonOpts(\"POST\", { ...entry, date: data.date }));\n onDataChange((prev) => ({ ...prev, evidence: [...(prev.evidence ?? []), newEntry] }));\n } catch (e) { report(e); }\n };\n\n const removeEvidence = async (id) => {\n try {\n await api(`/api/evidence/${id}`, { method: \"DELETE\" });\n onDataChange((prev) => ({ ...prev, evidence: (prev.evidence ?? []).filter((x) => x.id !== id) }));\n } catch (e) { report(e); }\n };\n\n // ── Habits ──────────────────────────────────────────────────\n const toggleHabitToday = async (id) => {\n const habit = data.habits.find((h) => h.id === id);\n if (!habit) return;\n const newDone = !habit.days[habit.days.length - 1];\n try {\n await api(`/api/habit-completions/${id}/${data.date}`, jsonOpts(\"PUT\", { done: newDone }));\n const flipLast = (arr) => arr.map((v, i) => i === arr.length - 1 ? newDone : v);\n onDataChange((prev) => ({\n ...prev,\n habits: prev.habits.map((h) =>\n h.id === id ? { ...h, days: flipLast(h.days), history: h.history ? flipLast(h.history) : h.history } : h),\n }));\n } catch (e) { report(e); }\n };\n\n const addHabit = async (habit) => {\n try {\n const newHabit = await api(\"/api/habits\", jsonOpts(\"POST\", habit));\n onDataChange((prev) => ({ ...prev, habits: [...prev.habits, { ...newHabit, days: Array(7).fill(false), history: Array(28).fill(false) }] }));\n } catch (e) { report(e); }\n };\n\n const updateHabit = async (id, updates) => {\n try {\n await api(`/api/habits/${id}`, jsonOpts(\"PUT\", updates));\n onDataChange((prev) => ({ ...prev, habits: prev.habits.map((h) => h.id === id ? { ...h, ...updates } : h) }));\n } catch (e) { report(e); }\n };\n\n const removeHabit = async (id) => {\n try {\n await api(`/api/habits/${id}`, { method: \"DELETE\" });\n onDataChange((prev) => ({ ...prev, habits: prev.habits.filter((h) => h.id !== id) }));\n } catch (e) { report(e); }\n };\n\n // ── Derived ─────────────────────────────────────────────────\n const activeList = clTab === \"morning\" ? data.morning : data.evening;\n const counts = {\n morning: `${data.morning.filter((x) => x.done).length}/${data.morning.length}`,\n evening: `${data.evening.filter((x) => x.done).length}/${data.evening.length}`,\n };\n\n const cssVars = { \"--hb-bg\": t.bg, \"--hb-ink\": t.ink, \"--hb-muted\": t.muted, \"--hb-rule\": t.rule, \"--hb-accent\": t.accent, \"--hb-mono\": t.mono, \"--hb-serif\": t.serif, \"--hb-sans\": t.sans };\n\n return (\n <div style={{ ...cssVars, position: \"relative\", width: \"100%\", height: \"100%\", background: t.bg, color: t.ink, fontFamily: t.sans, display: \"flex\", flexDirection: \"column\", overflow: \"hidden\" }}>\n {flash && (\n <div style={{ position: \"absolute\", top: 58, left: 24, right: 24, zIndex: 20, background: t.ink, color: t.bg, fontFamily: t.sans, fontSize: 12.5, padding: \"10px 14px\", textAlign: \"center\" }}>\n {flash}\n </div>\n )}\n <div style={{ flex: 1, overflowY: \"auto\", overflowX: \"hidden\", padding: standalone ? \"max(env(safe-area-inset-top), 20px) 28px 24px\" : \"78px 28px 24px\" }}>\n {tab === \"today\" && (\n <React.Fragment>\n <Masthead t={t} />\n\n <Spacer h={42} />\n <OneThing t={t} oneThing={data.oneThing} weekStart={data.weekStart} date={data.date} onComplete={handleCompleteOneThing} onSet={handleSetOneThing} />\n\n <Spacer h={42} />\n <Rule color={t.rule} />\n <Spacer h={32} />\n <HowWasToday t={t} energy={energy}\n setEnergy={(v) => { setEnergy(v); if (saved) setSaved(false); }}\n note={note}\n setNote={(v) => { setNote(v); if (saved) setSaved(false); }}\n gratitude={gratitude}\n setGratitude={(v) => { setGratitude(v); if (saved) setSaved(false); }}\n letGo={letGo}\n setLetGo={(v) => { setLetGo(v); if (saved) setSaved(false); }}\n expanded={expanded} setExpanded={setExpanded} onSave={saveLog} saved={saved} />\n\n <Spacer h={44} />\n <Rule color={t.rule} />\n <Spacer h={32} />\n <Evidence t={t} items={data.evidence ?? []} onAdd={addEvidence} onDelete={removeEvidence} />\n\n <Spacer h={44} />\n <Rule color={t.rule} />\n <Spacer h={32} />\n <Checklist t={t} list={activeList} toggle={toggleItem} tab={clTab} setTab={setClTab} counts={counts}\n editMode={clEditMode} setEditMode={setClEditMode}\n onAdd={addItem} onUpdate={updateItem} onDelete={removeItem} />\n\n <Spacer h={44} />\n <Rule color={t.rule} />\n <Spacer h={32} />\n <Habits t={t} habits={data.habits} editMode={habitsEditMode} setEditMode={setHabitsEditMode}\n onToggleToday={toggleHabitToday} onAdd={addHabit} onUpdate={updateHabit} onDelete={removeHabit} />\n\n <Spacer h={36} />\n <ColophonQuote t={t} />\n <Spacer h={40} />\n </React.Fragment>\n )}\n\n {tab === \"habits\" && (\n <HabitsScreen t={t} habits={data.habits}\n onToggleToday={toggleHabitToday} onAdd={addHabit} onUpdate={updateHabit} onDelete={removeHabit} />\n )}\n\n {tab === \"metrics\" && <MetricsScreen t={t} date={data.date} />}\n\n {tab === \"home\" && (\n <HomeScreen t={t} onError={report}\n onFocus={(it) => { handleSetOneThing(it.title, it.category); setTab(\"today\"); }} />\n )}\n </div>\n <TabBar t={t} tab={tab} setTab={setTab} />\n </div>\n );\n}\n\nfunction Spacer({ h }) {\n return <div style={{ height: h }} />;\n}\n\nObject.assign(window, { HarbourToday, buildTheme, PALETTES, TYPE_KITS });\n",[150],"1478d6c6-f716-48ca-98bc-6a998eb2a47e","app.tsx","232beb84-554e-11f1-8908-ee650bb23af1",["D",1784424395827],13,"// app.jsx — App shell: data fetching, device frame, tweaks panel wiring\n\n// All dates are LOCAL calendar dates (\"YYYY-MM-DD\"), so the app's day\n// boundary follows the user's timezone — never toISOString(), which\n// would flip to tomorrow at 8pm US Eastern.\nfunction pad2(n) {\n return String(n).padStart(2, \"0\");\n}\n\nfunction localDateStr(d) {\n return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;\n}\n\nfunction todayStr() {\n return localDateStr(new Date());\n}\n\nfunction currentWeekStart() {\n const d = new Date();\n d.setDate(d.getDate() - d.getDay()); // rewind to Sunday\n return localDateStr(d);\n}\n\nconst TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {\n \"dark\": false,\n \"palette\": \"amber\",\n \"kit\": \"editorial\",\n \"showFrame\": true,\n} /*EDITMODE-END*/;\n\nfunction App() {\n const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);\n const [appData, setAppData] = React.useState(null);\n const [loading, setLoading] = React.useState(true);\n const [loadError, setLoadError] = React.useState(null);\n\n React.useEffect(() => {\n const date = todayStr();\n const weekStart = currentWeekStart();\n\n async function load() {\n try {\n // One round trip: the server assembles everything Today needs.\n const res = await fetch(\n `/api/bootstrap?date=${date}&weekStart=${weekStart}&days=28`,\n );\n if (!res.ok) throw new Error(`Bootstrap failed (${res.status})`);\n const boot = await res.json();\n\n // Build completion map: { item_id: done }\n const completionMap = {};\n boot.completions.forEach((c) => {\n completionMap[c.item_id] = !!c.done;\n });\n\n const morning = boot.items\n .filter((i) => i.session === \"morning\")\n .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n const evening = boot.items\n .filter((i) => i.session === \"evening\")\n .map((i) => ({ ...i, done: completionMap[i.id] ?? false }));\n\n // Group habit completions: { habit_id: { date: done } }\n const compByHabit = {};\n boot.habitCompletions.forEach((r) => {\n if (!compByHabit[r.habit_id]) compByHabit[r.habit_id] = {};\n compByHabit[r.habit_id][r.date] = !!r.done;\n });\n\n // Build habits with last-7-days (Today) and last-28-days (Habits tab)\n const habitsWithDays = boot.habits.map((h) => {\n const byDate = compByHabit[h.id] || {};\n const mk = (len) =>\n Array.from({ length: len }, (_, i) => {\n const d = new Date();\n d.setDate(d.getDate() - (len - 1 - i));\n return !!byDate[localDateStr(d)];\n });\n return { ...h, days: mk(7), history: mk(28) };\n });\n\n setAppData({\n date,\n weekStart,\n morning,\n evening,\n logs: boot.logs,\n habits: habitsWithDays,\n oneThing: boot.oneThing,\n evidence: Array.isArray(boot.evidence) ? boot.evidence : [],\n });\n } catch (e) {\n setLoadError(e.message);\n } finally {\n setLoading(false);\n }\n }\n\n load();\n }, []);\n\n // Launched from the iOS/Android home screen, the app runs \"standalone\":\n // the OS draws the real status bar and home indicator. In that mode we skip\n // the simulated device frame (whose fake status bar would otherwise duplicate\n // the real one) and let the screen fill the whole viewport. In a normal\n // browser tab or the desktop preview we keep the 402×874 device mock.\n const [standalone] = React.useState(\n () =>\n typeof window !== \"undefined\" &&\n ((window.matchMedia &&\n window.matchMedia(\"(display-mode: standalone)\").matches) ||\n window.navigator.standalone === true),\n );\n\n // The CSS `@media (display-mode: standalone)` rule can't be relied on across\n // iOS versions, so once JS confirms we're standalone we drive the full-bleed\n // body layout directly. Without this the home-screen app keeps the centering\n // padding and the content sits pushed down under a dark band at the top.\n React.useEffect(() => {\n if (!standalone) return;\n document.body.style.padding = \"0\";\n document.body.style.alignItems = \"stretch\";\n const root = document.getElementById(\"root\");\n if (root) root.style.maxWidth = \"none\";\n // Paint the page — and the strip iOS keeps behind the status bar in\n // \"default\" mode — with the app's own surface color, so the cream reaches\n // all the way to the top instead of the dark backdrop used behind the\n // desktop device frame. Adapts to the current theme.\n const surface = typeof buildTheme === \"function\"\n ? buildTheme({ dark: t.dark, palette: t.palette, kit: t.kit }).bg\n : t.dark ? \"#151310\" : \"#f4efe6\";\n document.documentElement.style.background = surface;\n document.body.style.background = surface;\n const themeMeta = document.querySelector('meta[name=\"theme-color\"]');\n if (themeMeta) {\n themeMeta.setAttribute(\"content\", t.dark ? \"#151310\" : \"#f4efe6\");\n }\n }, [standalone, t.dark, t.palette, t.kit]);\n\n const baseBox = standalone\n ? { width: \"100%\", height: \"100dvh\", overflow: \"hidden\" }\n : {\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: standalone ? 0 : 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 standalone={standalone}\n />\n );\n\n return (\n <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\" }}>\n {standalone\n ? (\n <div\n style={{\n ...baseBox,\n background: t.dark ? \"#000\" : \"#fff\",\n }}\n >\n {screen}\n </div>\n )\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",[158],"8ead2f61-6701-4472-a001-2fc877b1f23d","README.md","e42b7fd4-554e-11f1-9a4e-ee650bb23af1",101,["D",1784421173236],4,"# Harbour\n\nA personal daily-tracking app in a James Clear–inspired editorial style:\nNewsreader serif + Geist sans, warm cream paper, hairline rules instead of\ncards, tally marks for habit streaks, accent color used as punctuation.\n\nFour screens, fully persistent, phone-first (rendered inside an iOS device\nframe on desktop):\n\n- **Today** — the daily ritual. This week's One Thing (pickable from the\n Notion Home List), the evening check-in (energy 1–5, \"what mattered\n today\", optional gratitude + let-go prompts), an evidence log of small\n good things, morning/evening checklists, and a 7-day habit strip with\n tap-to-toggle for today.\n- **Habits** — the fuller surface: a 4-week heatmap per habit (today\n tappable), plus add / rename / note / delete. Deletes are soft, so\n history survives.\n- **Metrics** — the long view: a 30-day energy sparkline (points positioned\n by actual date, so gaps read as gaps), per-habit consistency (current\n streak / best streak / days out of 30), and completed One Thing history\n with a set-vs-done rate.\n- **Home list** — the Notion Home List grouped by section. Checking an item\n off writes back to the real Notion page; \"focus →\" promotes an item to\n this week's One Thing and jumps to Today.\n\n## Files\n\n| File | Purpose |\n| ------------------ | ---------------------------------------------------------------------------------------------------------- |\n| `index.ts` | Hono HTTP val (entry point). HTML shell at `/`, server-compiled client JS at `/*.js`, all `/api/*` routes. |\n| `app.tsx` | App shell: one-round-trip bootstrap fetch, loading/error states, device frame + Tweaks wiring. |\n| `harbour.tsx` | All UI: theme tokens, atoms, sections, the four screens, and every data handler (optimistic + error-safe). |\n| `db/init.ts` | SQLite schema (idempotent `CREATE TABLE IF NOT EXISTS`, runs at cold start). |\n| `db/api.ts` | All SQLite reads/writes, including the metrics read-models (streaks, energy history, One Thing history). |\n| `db/notion.ts` | Notion Home List: cached fetch of unchecked to-dos + check-off write-back. |\n| `ios-frame.tsx` | iOS device frame chrome (status bar, dynamic island, home indicator). |\n| `tweaks-panel.tsx` | Floating Tweaks UI: light/dark, device frame on/off, Editorial vs Classic type, four accent colors. |\n\n## Architecture notes\n\n- **No bundler, no client Babel.** The `.tsx` client modules are transpiled\n **server-side** with `@babel/standalone` — once per isolate, cached in\n memory, invalidated automatically on deploy — and served as plain JS to\n production React UMD builds. First paint is fast even on a phone.\n- **One-round-trip boot.** `GET /api/bootstrap?date=&weekStart=&days=28`\n assembles everything the Today screen needs (checklists + completions,\n logs, habits + 28 days of completions, One Thing, evidence) in a single\n response.\n- **Local-date correctness.** All dates are the *client's* local calendar\n date (`YYYY-MM-DD`), passed to the server, which anchors every range\n query and streak calculation on it. The app's day never flips early\n because a server somewhere is on UTC. Week starts Sunday.\n- **Optimistic but honest.** Every write goes through a shared `api()`\n helper that throws on non-2xx; failures surface as a transient banner\n instead of silently pretending the save worked.\n- **Notion.** `db/notion.ts` pages through the Home List page's blocks\n (section headings tracked across pages), returns unchecked to-dos with\n their block ids, and caches results for 60s per isolate. Check-off is a\n `PATCH` on the to-do block, which also invalidates the cache. Requires\n the `NOTION_TOKEN` env var:\n 👉 Add NOTION_TOKEN here: https://www.val.town/x/brenwildt/Harbour/environment-variables?key=NOTION_TOKEN\n\n## Data model (SQLite)\n\n- `checklist_items(id, session, section, title, detail, sort_order)`\n- `checklist_completions(item_id, date, done)` — PK (item_id, date)\n- `daily_logs(date, session, energy, note, gratitude, let_go, saved_at)` — PK (date, session)\n- `habits(id, name, note, sort_order, active)` — soft delete via `active`\n- `habit_completions(habit_id, date, done)` — PK (habit_id, date)\n- `one_thing(id, title, category, week_start, created_at, completed, completed_at)`\n- `evidence(id, date, title, detail, logged_at, sort_order)`\n\n## API\n\n- `GET /api/bootstrap` — everything Today needs, one call\n- `GET/POST/PUT/DELETE /api/checklist/items[/:id]`, `GET/PUT /api/checklist/completions[/:itemId]`\n- `GET/POST /api/logs`\n- `GET/POST/PUT/DELETE /api/habits[/:id]`\n- `GET /api/habit-completions/:habitId?days=&today=`, `PUT /api/habit-completions/:habitId/:date`\n- `GET /api/metrics?days=&today=` → `{days, energy, habits, oneThing}`\n- `GET/POST /api/one-thing`, `PUT /api/one-thing/:id/complete`\n- `GET/POST/PUT/DELETE /api/evidence[/:id]`\n- `GET /api/notion/home-list`, `POST /api/notion/home-list/:blockId/check`\n\nRange endpoints accept a `today=YYYY-MM-DD` anchor from the client; without\nit they fall back to server UTC.\n\n## Notes on the design\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.\n",[165],"35bd70dc-590a-11f1-a7fd-ee650bb23af1","db","6cc02321-a6ec-4193-a52b-a798394487fe",23,["D",1779803581118],"directory",[173],"pulls","branches",1,"forks","envVars",{"_187":181,"_189":40},"connections",{"_187":40,"_188":40},"count","unfilledCount","emptyCount",{"_18":172,"_20":173,"_117":174,"_119":-5,"_120":69,"_121":175,"_123":103,"_22":244,"_66":40,"_126":177,"_128":-5,"_130":26,"_131":-5,"_201":245,"_86":246},{"_18":235,"_20":236,"_117":237,"_119":174,"_120":69,"_121":238,"_123":103,"_22":239,"_66":240,"_126":127,"_128":241,"_130":26,"_131":-5,"_201":242,"_86":243},{"_18":227,"_20":228,"_117":229,"_119":174,"_120":69,"_121":230,"_123":103,"_22":231,"_66":181,"_126":127,"_128":232,"_130":26,"_131":-5,"_201":233,"_86":234},{"_18":219,"_20":220,"_117":221,"_119":174,"_120":69,"_121":222,"_123":103,"_22":223,"_66":181,"_126":127,"_128":224,"_130":26,"_131":-5,"_201":225,"_86":226},{"_18":164,"_20":165,"_117":166,"_119":-5,"_120":69,"_121":167,"_123":103,"_22":216,"_66":169,"_126":96,"_128":170,"_130":26,"_131":-5,"_201":217,"_86":218},{"_18":157,"_20":158,"_117":159,"_119":-5,"_120":69,"_121":67,"_123":103,"_22":213,"_66":161,"_126":127,"_128":162,"_130":26,"_131":-5,"_201":214,"_86":215},{"_18":149,"_20":150,"_117":151,"_119":-5,"_120":69,"_121":152,"_123":103,"_22":210,"_66":154,"_126":127,"_128":155,"_130":26,"_131":-5,"_201":211,"_86":212},{"_18":140,"_20":141,"_117":142,"_119":-5,"_120":69,"_121":143,"_123":103,"_22":207,"_66":145,"_126":146,"_128":147,"_130":26,"_131":-5,"_201":208,"_86":209},{"_18":133,"_20":134,"_117":135,"_119":-5,"_120":69,"_121":136,"_123":103,"_22":204,"_66":125,"_126":127,"_128":138,"_130":26,"_131":-5,"_201":205,"_86":206},{"_18":115,"_20":116,"_117":118,"_119":-5,"_120":69,"_121":122,"_123":103,"_22":200,"_66":125,"_126":127,"_128":129,"_130":26,"_131":-5,"_201":202,"_86":203},["D",1779393598501],"children",[],[116],["D",1779393591237],[],[134],["D",1784424381890],[],[141],["D",1784424122722],[],[150],["D",1784424395827],[],[158],["D",1784421173236],[],[165],"e3ee70f0-815c-41d6-810a-368f2836436e","notion.ts","1c2f52c2-6399-11f1-ad67-1607ee4eb77e",83,["D",1784420289927],"// Fetches unchecked tasks from the Notion Home List page.\n// Returns items with their section heading as the category.\n\nconst HOME_LIST_PAGE_ID = \"2598e14d-d93c-80fd-b025-c1d023c57a71\";\nconst NOTION_VERSION = \"2022-06-28\";\n\nexport interface HomeListItem {\n id: string;\n title: string;\n category: string;\n}\n\n// Notion is slow (paginated REST) and gets hit by both the Home tab and\n// the One Thing form, so cache briefly, per isolate.\nlet cache: { at: number; items: HomeListItem[] } | null = null;\nconst CACHE_TTL_MS = 60_000;\n\nfunction notionHeaders(token: string) {\n return {\n Authorization: `Bearer ${token}`,\n \"Notion-Version\": NOTION_VERSION,\n };\n}\n\nexport async function getHomeListItems(): Promise<HomeListItem[]> {\n if (cache && Date.now() - cache.at < CACHE_TTL_MS) return cache.items;\n\n const token = Deno.env.get(\"NOTION_TOKEN\");\n if (!token) throw new Error(\"NOTION_TOKEN is not set\");\n\n const items: HomeListItem[] = [];\n let cursor: string | undefined;\n // Lives outside the pagination loop so a section heading still applies\n // to to-dos that land on the next 100-block page.\n let currentSection = \"\";\n\n do {\n const url = new URL(\n `https://api.notion.com/v1/blocks/${HOME_LIST_PAGE_ID}/children`,\n );\n url.searchParams.set(\"page_size\", \"100\");\n if (cursor) url.searchParams.set(\"start_cursor\", cursor);\n\n const res = await fetch(url.toString(), { headers: notionHeaders(token) });\n\n if (!res.ok) {\n throw new Error(`Notion API error: ${res.status} ${await res.text()}`);\n }\n\n const data = await res.json();\n\n for (const block of data.results) {\n // Track the current section heading\n if (block.type === \"heading_2\" || block.type === \"heading_3\") {\n currentSection = block[block.type].rich_text\n .map((t: { plain_text: string }) => t.plain_text)\n .join(\"\")\n .trim();\n }\n\n // Collect unchecked to-do items\n if (block.type === \"to_do\" && !block.to_do.checked) {\n const title = block.to_do.rich_text\n .map((t: { plain_text: string }) => t.plain_text)\n .join(\"\")\n .trim();\n if (title) items.push({ id: block.id, title, category: currentSection });\n }\n }\n\n cursor = data.has_more ? data.next_cursor : undefined;\n } while (cursor);\n\n cache = { at: Date.now(), items };\n return items;\n}\n\nexport async function checkHomeListItem(blockId: string): Promise<void> {\n const token = Deno.env.get(\"NOTION_TOKEN\");\n if (!token) throw new Error(\"NOTION_TOKEN is not set\");\n\n const res = await fetch(`https://api.notion.com/v1/blocks/${blockId}`, {\n method: \"PATCH\",\n headers: { ...notionHeaders(token), \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ to_do: { checked: true } }),\n });\n\n if (!res.ok) {\n throw new Error(`Notion API error: ${res.status} ${await res.text()}`);\n }\n\n cache = null;\n}\n",[],[173,220],"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",[],[173,228],"e2ebc8fe-a966-4c98-8aff-867a54d6b90d","api.ts","83654a08-590a-11f1-a27d-ee650bb23af1",82,["D",1784420275130],11,"import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// std/sqlite's execute binds parameters only via the object form\n// ({ sql, args }); the positional form silently drops args. Wrap it\n// once here so every call site can pass (sql, args) safely.\nfunction exec(sql: string, args: unknown[] = []) {\n return sqlite.execute({ sql, args });\n}\n\n// ── Checklist Items ──────────────────────────────────────────\n\nexport async function getChecklistItems(session?: string) {\n const result = session\n ? await exec(\n \"SELECT * FROM checklist_items WHERE session = ? ORDER BY sort_order\",\n [session],\n )\n : await exec(\n \"SELECT * FROM checklist_items ORDER BY session, sort_order\",\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function createChecklistItem(item: {\n session: string;\n section: string;\n title: string;\n detail?: string;\n sort_order?: number;\n}) {\n const id = crypto.randomUUID();\n await exec(\n \"INSERT INTO checklist_items (id, session, section, title, detail, sort_order) VALUES (?, ?, ?, ?, ?, ?)\",\n [id, item.session, item.section, item.title, item.detail ?? null, item.sort_order ?? 0],\n );\n return { id, ...item };\n}\n\nexport async function updateChecklistItem(\n id: string,\n updates: { section?: string; title?: string; detail?: string; sort_order?: number },\n) {\n if (!Object.keys(updates).length) return;\n const fields = Object.keys(updates).map((k) => `${k} = ?`).join(\", \");\n await exec(\n `UPDATE checklist_items SET ${fields} WHERE id = ?`,\n [...Object.values(updates), id],\n );\n}\n\nexport async function deleteChecklistItem(id: string) {\n await exec(\"DELETE FROM checklist_completions WHERE item_id = ?\", [id]);\n await exec(\"DELETE FROM checklist_items WHERE id = ?\", [id]);\n}\n\n// ── Checklist Completions ────────────────────────────────────\n\nexport async function getCompletions(date: string) {\n const result = await exec(\n \"SELECT item_id, done FROM checklist_completions WHERE date = ?\",\n [date],\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function setCompletion(itemId: string, date: string, done: boolean) {\n await exec(\n `INSERT INTO checklist_completions (item_id, date, done) VALUES (?, ?, ?)\n ON CONFLICT(item_id, date) DO UPDATE SET done = excluded.done`,\n [itemId, date, done ? 1 : 0],\n );\n}\n\n// ── Daily Logs ───────────────────────────────────────────────\n\nexport async function getDailyLog(date: string, session: string) {\n const result = await exec(\n \"SELECT * FROM daily_logs WHERE date = ? AND session = ?\",\n [date, session],\n );\n return result.rows.length ? toObj(result.columns)(result.rows[0]) : null;\n}\n\nexport async function saveDailyLog(log: {\n date: string;\n session: string;\n energy?: number;\n note?: string;\n gratitude?: string;\n let_go?: string;\n}) {\n const saved_at = new Date().toISOString();\n await exec(\n `INSERT INTO daily_logs (date, session, energy, note, gratitude, let_go, saved_at)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n ON CONFLICT(date, session) DO UPDATE SET\n energy = excluded.energy,\n note = excluded.note,\n gratitude = excluded.gratitude,\n let_go = excluded.let_go,\n saved_at = excluded.saved_at`,\n [\n log.date,\n log.session,\n log.energy ?? null,\n log.note ?? null,\n log.gratitude ?? null,\n log.let_go ?? null,\n saved_at,\n ],\n );\n}\n\n// ── Habits ───────────────────────────────────────────────────\n\nexport async function getHabits() {\n const result = await exec(\n \"SELECT * FROM habits WHERE active = 1 ORDER BY sort_order\",\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function createHabit(habit: {\n name: string;\n note?: string;\n sort_order?: number;\n}) {\n const id = crypto.randomUUID();\n await exec(\n \"INSERT INTO habits (id, name, note, sort_order) VALUES (?, ?, ?, ?)\",\n [id, habit.name, habit.note ?? null, habit.sort_order ?? 0],\n );\n return { id, ...habit };\n}\n\nexport async function updateHabit(\n id: string,\n updates: { name?: string; note?: string; sort_order?: number },\n) {\n if (!Object.keys(updates).length) return;\n const fields = Object.keys(updates).map((k) => `${k} = ?`).join(\", \");\n await exec(\n `UPDATE habits SET ${fields} WHERE id = ?`,\n [...Object.values(updates), id],\n );\n}\n\nexport async function deleteHabit(id: string) {\n // Soft delete — preserves completion history\n await exec(\"UPDATE habits SET active = 0 WHERE id = ?\", [id]);\n}\n\n// ── Habit Completions ────────────────────────────────────────\n\n// UTC fallback for when the client doesn't send its local date. All\n// range queries anchor on the caller-supplied `today` so the app's day\n// boundary follows the user's timezone, not the server's.\nfunction utcToday() {\n return new Date().toISOString().slice(0, 10);\n}\n\nexport async function getHabitCompletions(habitId: string, days = 28, today = utcToday()) {\n const result = await exec(\n `SELECT date, done FROM habit_completions\n WHERE habit_id = ? AND date >= date(?, ?)\n ORDER BY date`,\n [habitId, today, `-${days - 1} days`],\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function getAllHabitCompletions(days = 28, today = utcToday()) {\n const result = await exec(\n `SELECT habit_id, date, done FROM habit_completions\n WHERE date >= date(?, ?)\n ORDER BY date`,\n [today, `-${days - 1} days`],\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function setHabitCompletion(habitId: string, date: string, done: boolean) {\n await exec(\n `INSERT INTO habit_completions (habit_id, date, done) VALUES (?, ?, ?)\n ON CONFLICT(habit_id, date) DO UPDATE SET done = excluded.done`,\n [habitId, date, done ? 1 : 0],\n );\n}\n\n// ── One Thing ────────────────────────────────────────────────\n\nexport async function getOneThing(weekStart: string) {\n const result = await exec(\n `SELECT * FROM one_thing\n WHERE week_start = ? AND completed = 0\n ORDER BY created_at DESC\n LIMIT 1`,\n [weekStart],\n );\n return result.rows.length ? toObj(result.columns)(result.rows[0]) : null;\n}\n\nexport async function createOneThing(item: {\n title: string;\n category?: string;\n weekStart: string;\n}) {\n const id = crypto.randomUUID();\n const created_at = new Date().toISOString();\n await exec(\n \"INSERT INTO one_thing (id, title, category, week_start, created_at) VALUES (?, ?, ?, ?, ?)\",\n [id, item.title, item.category ?? null, item.weekStart, created_at],\n );\n return { id, ...item, created_at, completed: 0 };\n}\n\nexport async function completeOneThing(id: string) {\n await exec(\n \"UPDATE one_thing SET completed = 1, completed_at = ? WHERE id = ?\",\n [new Date().toISOString(), id],\n );\n}\n\n// ── Evidence ─────────────────────────────────────────────────\n\nexport async function getEvidence(date: string) {\n const result = await exec(\n \"SELECT * FROM evidence WHERE date = ? ORDER BY logged_at\",\n [date],\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function createEvidence(item: {\n date: string;\n title: string;\n detail?: string;\n sort_order?: number;\n}) {\n const id = crypto.randomUUID();\n const logged_at = new Date().toISOString();\n await exec(\n \"INSERT INTO evidence (id, date, title, detail, logged_at, sort_order) VALUES (?, ?, ?, ?, ?, ?)\",\n [id, item.date, item.title, item.detail ?? null, logged_at, item.sort_order ?? 0],\n );\n return { id, ...item, logged_at };\n}\n\nexport async function updateEvidence(\n id: string,\n updates: { title?: string; detail?: string },\n) {\n if (!Object.keys(updates).length) return;\n const fields = Object.keys(updates).map((k) => `${k} = ?`).join(\", \");\n await exec(\n `UPDATE evidence SET ${fields} WHERE id = ?`,\n [...Object.values(updates), id],\n );\n}\n\nexport async function deleteEvidence(id: string) {\n await exec(\"DELETE FROM evidence WHERE id = ?\", [id]);\n}\n\n// ── Metrics ──────────────────────────────────────────────────\n\nexport async function getEnergyHistory(days = 30, today = utcToday()) {\n const result = await exec(\n `SELECT date, energy FROM daily_logs\n WHERE session = 'evening' AND energy IS NOT NULL\n AND date >= date(?, ?)\n ORDER BY date`,\n [today, `-${days - 1} days`],\n );\n return result.rows.map(toObj(result.columns));\n}\n\nexport async function getHabitHistory(days = 30, today = utcToday()) {\n const habitsRes = await exec(\n \"SELECT id, name, note FROM habits WHERE active = 1 ORDER BY sort_order\",\n );\n const habits = habitsRes.rows.map(toObj(habitsRes.columns));\n\n const compRes = await exec(\n `SELECT habit_id, date FROM habit_completions\n WHERE done = 1 AND date >= date(?, ?)\n ORDER BY date`,\n [today, `-${days - 1} days`],\n );\n const comps = compRes.rows.map(toObj(compRes.columns));\n\n const byHabit: Record<string, string[]> = {};\n for (const c of comps) {\n (byHabit[c.habit_id] ??= []).push(c.date as string);\n }\n\n return habits.map((h) => {\n const dates = byHabit[h.id as string] ?? [];\n return {\n ...h,\n count: dates.length,\n currentStreak: currentStreak(dates, today),\n longestStreak: longestStreak(dates),\n };\n });\n}\n\nexport async function getOneThingHistory(limit = 20) {\n const listRes = await exec(\n `SELECT id, title, category, week_start, completed_at FROM one_thing\n WHERE completed = 1 AND completed_at IS NOT NULL\n ORDER BY completed_at DESC\n LIMIT ?`,\n [limit],\n );\n const list = listRes.rows.map(toObj(listRes.columns));\n\n const statRes = await exec(\n \"SELECT COUNT(*) AS total, SUM(completed) AS completed FROM one_thing\",\n );\n const stat = toObj(statRes.columns)(statRes.rows[0]);\n return {\n list,\n total: Number(stat.total) || 0,\n completed: Number(stat.completed) || 0,\n };\n}\n\n// Streak helpers — dates are \"YYYY-MM-DD\" strings in UTC, matching how\n// completions are keyed everywhere else.\nfunction ymd(d: Date) {\n return d.toISOString().slice(0, 10);\n}\n\nfunction currentStreak(dates: string[], today = utcToday()) {\n const set = new Set(dates);\n const probe = new Date(today + \"T00:00:00Z\");\n // Don't penalize an as-yet-unlogged today: if today isn't marked,\n // start counting back from yesterday.\n if (!set.has(ymd(probe))) probe.setUTCDate(probe.getUTCDate() - 1);\n let streak = 0;\n while (set.has(ymd(probe))) {\n streak++;\n probe.setUTCDate(probe.getUTCDate() - 1);\n }\n return streak;\n}\n\nfunction longestStreak(dates: string[]) {\n const sorted = [...new Set(dates)].sort();\n let longest = 0, run = 0;\n let prev: number | null = null;\n for (const ds of sorted) {\n const t = new Date(ds + \"T00:00:00Z\").getTime();\n if (prev !== null && Math.round((t - prev) / 86400000) === 1) run++;\n else run = 1;\n if (run > longest) longest = run;\n prev = t;\n }\n return longest;\n}\n\n// ── Helper ───────────────────────────────────────────────────\n\nfunction toObj(columns: string[]) {\n return (row: unknown[]) =>\n Object.fromEntries(columns.map((col, i) => [col, row[i]]));\n}\n",[],[173,236],["D",1779803581118],[191,192,193],[173],["D",1779392946380],["D",1789494036282],{"_16":17,"_84":80},{"_16":17,"_78":-5,"_79":80,"_33":34,"_81":82,"_83":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":21,"_77":17},"ctx",{"_59":-5,"_105":285,"_286":287,"_288":289,"_290":26,"_291":26,"_292":26,"_293":103,"_294":-5,"_295":-7,"_296":-7,"_297":40,"_298":26,"_299":26,"_300":-5,"_301":26,"_302":26,"_303":26,"_304":-5},"ENV",{"_256":257,"_258":259,"_260":68,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284},"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>

Search