Harbour — Today

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_241":242,"_243":244},"routes/_app.x.$handle.$name",{"_103":102,"_32":50,"_111":93,"_27":58,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_21":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":128,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_36":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":60,"_61":-5,"_62":25,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",23,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","db","latestPath","fileId","6cc02321-a6ec-4193-a52b-a798394487fe","name","fileType","directory","content","createdAt",["D",1779803581118],"branchVersion","branchId","205d39c6-554e-11f1-a855-ee650bb23af1",{"_30":43,"_32":44,"_33":45,"_35":46,"_36":47,"_38":14,"_39":40,"_24":25},"db/init.ts","35bd42ce-590a-11f1-a7fd-ee650bb23af1","init.ts","script","import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\nexport async function initDB() {\n await sqlite.batch([\n // Checklist items — the configured morning/evening routine lists\n `CREATE TABLE IF NOT EXISTS checklist_items (\n id TEXT PRIMARY KEY,\n session TEXT NOT NULL CHECK(session IN ('morning', 'evening')),\n section TEXT NOT NULL,\n title TEXT NOT NULL,\n detail TEXT,\n sort_order INTEGER NOT NULL DEFAULT 0\n )`,\n\n // Checklist completions — today's state only; old dates are ignored\n `CREATE TABLE IF NOT EXISTS checklist_completions (\n item_id TEXT NOT NULL,\n date TEXT NOT NULL,\n done INTEGER NOT NULL DEFAULT 0,\n PRIMARY KEY (item_id, date)\n )`,\n\n // Daily logs — at most one row per session (morning/evening) per day\n // energy is only recorded for evening; morning rows leave it NULL\n `CREATE TABLE IF NOT EXISTS daily_logs (\n date TEXT NOT NULL,\n session TEXT NOT NULL CHECK(session IN ('morning', 'evening')),\n energy INTEGER CHECK(energy IS NULL OR (energy BETWEEN 1 AND 5)),\n note TEXT,\n gratitude TEXT,\n let_go TEXT,\n saved_at TEXT NOT NULL,\n PRIMARY KEY (date, session)\n )`,\n\n // Habits — user-configured, soft-deleted via active flag\n `CREATE TABLE IF NOT EXISTS habits (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n note TEXT,\n sort_order INTEGER NOT NULL DEFAULT 0,\n active INTEGER NOT NULL DEFAULT 1\n )`,\n\n // Habit completions — 7-day window; only last 7 days are queried\n `CREATE TABLE IF NOT EXISTS habit_completions (\n habit_id TEXT NOT NULL,\n date TEXT NOT NULL,\n done INTEGER NOT NULL DEFAULT 0,\n PRIMARY KEY (habit_id, date)\n )`,\n\n // One Thing — weekly focus; multiple rows per week are allowed\n // (mid-week replacement). Current = most recent uncompleted row\n // for the current week_start.\n `CREATE TABLE IF NOT EXISTS one_thing (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n category TEXT,\n week_start TEXT NOT NULL,\n created_at TEXT NOT NULL,\n completed INTEGER NOT NULL DEFAULT 0,\n completed_at TEXT\n )`,\n ]);\n}\n",["D",1779803581118],"id","205aa06c-554e-11f1-a855-ee650bb23af1","Harbour",["D",1779392946380],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","019d0bcc-a320-7399-8f4f-7d3875d937d4","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d0bcc-a321-75bc-84e3-07d236c0ab73","tursoName","205aa06c554e11f1a855ee650bb23af1","tursoHostname","205aa06c554e11f1a855ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789494036282],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_110":106},"org",{"_103":102,"_104":-5,"_105":106,"_18":60,"_107":108,"_109":25},"branch",{"_13":92,"_32":93,"_48":40,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":50,"_101":102},"isOwned",113,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","brenwildt","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zNmFFblZBY3ZoNWhQeXZwUlBUTHZoSkhDeUEifQ","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_48":49,"_32":50,"_36":236,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":60,"_61":-5,"_62":25,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":237,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":238,"_87":239,"_89":240,"_91":25},"tree",[202,204,205,206,207,208,209],"files",[202,203,204,205,206,207,208,209],"counts",{"_191":66,"_192":193,"_194":66,"_195":196,"_197":198},"contents",[133,134,135,136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_48":188,"_32":28,"_30":31,"_143":-5,"_39":40,"_38":14,"_145":128,"_36":189,"_13":66,"_33":34,"_35":-5,"_24":25,"_149":-5,"_27":190},{"_48":181,"_32":182,"_30":183,"_143":-5,"_39":40,"_38":184,"_145":25,"_36":185,"_13":163,"_33":21,"_35":186,"_24":25,"_149":-5,"_27":187},{"_48":174,"_32":175,"_30":176,"_143":-5,"_39":40,"_38":177,"_145":25,"_36":178,"_13":147,"_33":45,"_35":179,"_24":25,"_149":-5,"_27":180},{"_48":167,"_32":168,"_30":169,"_143":-5,"_39":40,"_38":170,"_145":25,"_36":171,"_13":147,"_33":45,"_35":172,"_24":25,"_149":-5,"_27":173},{"_48":158,"_32":159,"_30":160,"_143":-5,"_39":40,"_38":161,"_145":25,"_36":162,"_13":163,"_33":164,"_35":165,"_24":25,"_149":-5,"_27":166},{"_48":151,"_32":152,"_30":153,"_143":-5,"_39":40,"_38":154,"_145":128,"_36":155,"_13":147,"_33":45,"_35":156,"_24":25,"_149":-5,"_27":157},{"_48":140,"_32":141,"_30":142,"_143":-5,"_39":40,"_38":144,"_145":128,"_36":146,"_13":147,"_33":45,"_35":148,"_24":25,"_149":-5,"_27":150},"a514c0de-554f-11f1-9c43-ee650bb23af1","tweaks-panel.tsx","ccbd29b0-554e-11f1-9900-ee650bb23af1","parentId",19,"latest",["D",1779393598501],2,"// tweaks-panel.jsx\n// Reusable Tweaks shell + form-control helpers.\n//\n// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,\n// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so\n// individual prototypes don't re-roll it. Ships a consistent set of controls so you\n// don't hand-draw , segmented radios, steppers, etc.\n//\n// Usage (in an HTML file that loads React + Babel):\n//\n// const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{\n// \"primaryColor\": \"#D97757\",\n// \"palette\": [\"#D97757\", \"#29261b\", \"#f6f4ef\"],\n// \"fontSize\": 16,\n// \"density\": \"regular\",\n// \"dark\": false\n// }/*EDITMODE-END*/;\n//\n// function App() {\n// const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);\n// return (\n//

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

\n// );\n// }\n//\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst __TWEAKS_STYLE = `\n .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;\n max-height:calc(100vh - 32px);display:flex;flex-direction:column;\n transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom right;\n background:rgba(250,249,247,.78);color:#29261b;\n -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);\n border:.5px solid rgba(255,255,255,.6);border-radius:14px;\n box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);\n font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}\n .twk-hd{display:flex;align-items:center;justify-content:space-between;\n padding:10px 8px 10px 14px;cursor:move;user-select:none}\n .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}\n .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);\n width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}\n .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}\n .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;\n overflow-y:auto;overflow-x:hidden;min-height:0;\n scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}\n .twk-body::-webkit-scrollbar{width:8px}\n .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}\n .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;\n border:2px solid transparent;background-clip:content-box}\n .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);\n border:2px solid transparent;background-clip:content-box}\n .twk-row{display:flex;flex-direction:column;gap:5px}\n .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}\n .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;\n color:rgba(41,38,27,.72)}\n .twk-lbl>span:first-child{font-weight:500}\n .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}\n\n .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n color:rgba(41,38,27,.45);padding:10px 0 0}\n .twk-sect:first-child{padding-top:0}\n\n .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;\n border:.5px solid rgba(0,0,0,.1);border-radius:7px;\n background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}\n .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}\n select.twk-field{padding-right:22px;\n background-image:url(\"data:image/svg+xml;utf8,\");\n background-repeat:no-repeat;background-position:right 8px center}\n\n .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;\n border-radius:999px;background:rgba(0,0,0,.12);outline:none}\n .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;\n width:14px;height:14px;border-radius:50%;background:#fff;\n border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}\n .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;\n background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}\n\n .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;\n background:rgba(0,0,0,.06);user-select:none}\n .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;\n background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);\n transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}\n .twk-seg.dragging .twk-seg-thumb{transition:none}\n .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;\n background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;\n border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;\n overflow-wrap:anywhere}\n\n .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;\n background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}\n .twk-toggle[data-on=\"1\"]{background:#34c759}\n .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;\n background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}\n .twk-toggle[data-on=\"1\"] i{transform:translateX(14px)}\n\n .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:26px;padding:0 0 0 8px;\n border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}\n .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;\n user-select:none;padding-right:8px}\n .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;\n font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;\n outline:none;color:inherit;-moz-appearance:textfield}\n .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{\n -webkit-appearance:none;margin:0}\n .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}\n\n .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;\n background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}\n .twk-btn:hover{background:rgba(0,0,0,.88)}\n .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}\n .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}\n\n .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;\n border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;\n background:transparent;flex-shrink:0}\n .twk-swatch::-webkit-color-swatch-wrapper{padding:0}\n .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}\n .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}\n\n .twk-chips{display:flex;gap:6px}\n .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;\n padding:0;border:0;border-radius:6px;overflow:hidden;cursor:default;\n box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);\n transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}\n .twk-chip:hover{transform:translateY(-1px);\n box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}\n .twk-chip[data-on=\"1\"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),\n 0 2px 6px rgba(0,0,0,.15)}\n .twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;\n display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}\n .twk-chip>span>i{flex:1;box-shadow:0 -1px 0 rgba(0,0,0,.1)}\n .twk-chip>span>i:first-child{box-shadow:none}\n .twk-chip svg{position:absolute;top:6px;left:6px;width:13px;height:13px;\n filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}\n`;\n\n// ── useTweaks ───────────────────────────────────────────────────────────────\n// Single source of truth for tweak values. setTweak persists via the host\n// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).\nfunction useTweaks(defaults) {\n const [values, setValues] = React.useState(defaults);\n // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a\n // useState-style call doesn't write a \"[object Object]\" key into the persisted\n // JSON block.\n const setTweak = React.useCallback((keyOrEdits, val) => {\n const edits = typeof keyOrEdits === \"object\" && keyOrEdits !== null\n ? keyOrEdits\n : { [keyOrEdits]: val };\n setValues((prev) => ({ ...prev, ...edits }));\n window.parent.postMessage({ type: \"__edit_mode_set_keys\", edits }, \"*\");\n // Same-window signal so in-page listeners (deck-stage rail thumbnails)\n // can react — the parent message only reaches the host, not peers.\n window.dispatchEvent(new CustomEvent(\"tweakchange\", { detail: edits }));\n }, []);\n return [values, setTweak];\n}\n\n// ── TweaksPanel ─────────────────────────────────────────────────────────────\n// Floating shell. Registers the protocol listener BEFORE announcing\n// availability — if the announce ran first, the host's activate could land\n// before our handler exists and the toolbar toggle would silently no-op.\n// The close button posts __edit_mode_dismissed so the host's toolbar toggle\n// flips off in lockstep; the host echoes __deactivate_edit_mode back which\n// is what actually hides the panel.\nfunction TweaksPanel({ title = \"Tweaks\", noDeckControls = false, children }) {\n const [open, setOpen] = React.useState(false);\n const dragRef = React.useRef(null);\n // Auto-inject a rail toggle when a is on the page. The\n // toggle drives the deck's per-viewer _railVisible via window message;\n // state is mirrored from the same localStorage key the deck reads so\n // the control reflects reality across reloads. The mechanism is the\n // message — authors who want custom placement can post it directly\n // and pass noDeckControls to suppress this one.\n const hasDeckStage = React.useMemo(\n () =>\n typeof document !== \"undefined\" && !!document.querySelector(\"deck-stage\"),\n [],\n );\n // deck-stage enables its rail in connectedCallback, but this panel can\n // mount before that element has upgraded. The initial read catches the\n // common case; the listener covers mounting first. (Older deck-stage.js\n // copies still wait for the host's __omelette_rail_enabled postMessage —\n // same listener handles those.)\n const [railEnabled, setRailEnabled] = React.useState(\n () => hasDeckStage && !!document.querySelector(\"deck-stage\")?._railEnabled,\n );\n React.useEffect(() => {\n if (!hasDeckStage || railEnabled) return undefined;\n const onMsg = (e) => {\n if (e.data && e.data.type === \"__omelette_rail_enabled\") {\n setRailEnabled(true);\n }\n };\n window.addEventListener(\"message\", onMsg);\n return () => window.removeEventListener(\"message\", onMsg);\n }, [hasDeckStage, railEnabled]);\n const [railVisible, setRailVisible] = React.useState(() => {\n try {\n return localStorage.getItem(\"deck-stage.railVisible\") !== \"0\";\n } catch (e) {\n return true;\n }\n });\n const toggleRail = (on) => {\n setRailVisible(on);\n window.postMessage({ type: \"__deck_rail_visible\", on }, \"*\");\n };\n const offsetRef = React.useRef({ x: 16, y: 16 });\n const PAD = 16;\n\n const clampToViewport = React.useCallback(() => {\n const panel = dragRef.current;\n if (!panel) return;\n const w = panel.offsetWidth, h = panel.offsetHeight;\n const maxRight = Math.max(PAD, window.innerWidth - w - PAD);\n const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);\n offsetRef.current = {\n x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),\n y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),\n };\n panel.style.right = offsetRef.current.x + \"px\";\n panel.style.bottom = offsetRef.current.y + \"px\";\n }, []);\n\n React.useEffect(() => {\n if (!open) return;\n clampToViewport();\n if (typeof ResizeObserver === \"undefined\") {\n window.addEventListener(\"resize\", clampToViewport);\n return () => window.removeEventListener(\"resize\", clampToViewport);\n }\n const ro = new ResizeObserver(clampToViewport);\n ro.observe(document.documentElement);\n return () => ro.disconnect();\n }, [open, clampToViewport]);\n\n React.useEffect(() => {\n const onMsg = (e) => {\n const t = e?.data?.type;\n if (t === \"__activate_edit_mode\") setOpen(true);\n else if (t === \"__deactivate_edit_mode\") setOpen(false);\n };\n window.addEventListener(\"message\", onMsg);\n window.parent.postMessage({ type: \"__edit_mode_available\" }, \"*\");\n return () => window.removeEventListener(\"message\", onMsg);\n }, []);\n\n const dismiss = () => {\n setOpen(false);\n window.parent.postMessage({ type: \"__edit_mode_dismissed\" }, \"*\");\n };\n\n const onDragStart = (e) => {\n const panel = dragRef.current;\n if (!panel) return;\n const r = panel.getBoundingClientRect();\n const sx = e.clientX, sy = e.clientY;\n const startRight = window.innerWidth - r.right;\n const startBottom = window.innerHeight - r.bottom;\n const move = (ev) => {\n offsetRef.current = {\n x: startRight - (ev.clientX - sx),\n y: startBottom - (ev.clientY - sy),\n };\n clampToViewport();\n };\n const up = () => {\n window.removeEventListener(\"mousemove\", move);\n window.removeEventListener(\"mouseup\", up);\n };\n window.addEventListener(\"mousemove\", move);\n window.addEventListener(\"mouseup\", up);\n };\n\n if (!open) return null;\n return (\n <>\n \n \n

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

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

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

{label}

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

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

\n {children}\n

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

\n {label}\n

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

\n );\n}\n\nfunction TweakRadio({ label, value, options, onChange }) {\n const trackRef = React.useRef(null);\n const [dragging, setDragging] = React.useState(false);\n // The active value is read by pointer-move handlers attached for the lifetime\n // of a drag — ref it so a stale closure doesn't fire onChange for every move.\n const valueRef = React.useRef(value);\n valueRef.current = value;\n\n // Segments wrap mid-word once per-segment width runs out. The track is\n // ~248px (280 panel − 28 body pad − 4 seg pad), each button loses 12px\n // to its own padding, and 11.5px system-ui averages ~6.3px/char — so 2\n // options fit ~16 chars each, 3 fit ~10. Past that (or >3 options), fall\n // back to a dropdown rather than wrap.\n const labelLen = (o) => String(typeof o === \"object\" ? o.label : o).length;\n const maxLen = options.reduce((m, o) => Math.max(m, labelLen(o)), 0);\n const fitsAsSegments = maxLen <= ({ 2: 16, 3: 10 }[options.length] ?? 0);\n if (!fitsAsSegments) {\n // \n \n );\n}\n\nfunction TweakText({ label, value, placeholder, onChange }) {\n return (\n \n onChange(e.target.value)}\n />\n \n );\n}\n\nfunction TweakNumber(\n { label, value, min, max, step = 1, unit = \"\", onChange },\n) {\n const clamp = (n) => {\n if (min != null && n < min) return min;\n if (max != null && n > max) return max;\n return n;\n };\n const startRef = React.useRef({ x: 0, val: 0 });\n const onScrubStart = (e) => {\n e.preventDefault();\n startRef.current = { x: e.clientX, val: value };\n const decimals = (String(step).split(\".\")[1] || \"\").length;\n const move = (ev) => {\n const dx = ev.clientX - startRef.current.x;\n const raw = startRef.current.val + dx * step;\n const snapped = Math.round(raw / step) * step;\n onChange(clamp(Number(snapped.toFixed(decimals))));\n };\n const up = () => {\n window.removeEventListener(\"pointermove\", move);\n window.removeEventListener(\"pointerup\", up);\n };\n window.addEventListener(\"pointermove\", move);\n window.addEventListener(\"pointerup\", up);\n };\n return (\n
\n {label}\n onChange(clamp(Number(e.target.value)))}\n />\n {unit && {unit}}\n
\n );\n}\n\n// Relative-luminance contrast pick — checkmarks drawn over a swatch need to\n// read on both #111 and #fafafa without per-option configuration. Hex input\n// only (#rgb / #rrggbb); named or rgb()/hsl() colors fall through to \"light\".\nfunction __twkIsLight(hex) {\n const h = String(hex).replace(\"#\", \"\");\n const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, \"0\");\n const n = parseInt(x.slice(0, 6), 16);\n if (Number.isNaN(n)) return true;\n const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n return r * 299 + g * 587 + b * 114 > 148000;\n}\n\nconst __TwkCheck = ({ light }) => (\n \n);\n\n// TweakColor — curated color/palette picker. Each option is either a single\n// hex string or an array of 1-5 hex strings; the card adapts — a lone color\n// renders solid, a palette renders colors[0] as the hero (left ~2/3) with the\n// rest stacked in a sharp column on the right. onChange emits the\n// option in the shape it was passed (string stays string, array stays array).\n// Without options it falls back to the native color input for back-compat.\nfunction TweakColor({ label, value, options, onChange }) {\n if (!options || !options.length) {\n return (\n
\n
\n {label}\n
\n onChange(e.target.value)}\n />\n
\n );\n }\n // Native emits lowercase hex per the HTML spec, so\n // compare case-insensitively. String() guards JSON.stringify(undefined),\n // which returns the primitive undefined (no .toLowerCase).\n const key = (o) => String(JSON.stringify(o)).toLowerCase();\n const cur = key(value);\n return (\n \n
\n {options.map((o, i) => {\n const colors = Array.isArray(o) ? o : [o];\n const [hero, ...rest] = colors;\n const sup = rest.slice(0, 4);\n const on = key(o) === cur;\n return (\n onChange(o)}\n >\n {sup.length > 0 && (\n \n {sup.map((c, j) => )}\n \n )}\n {on && <__TwkCheck light={__twkIsLight(hero)} />}\n \n );\n })}\n
\n \n );\n}\n\nfunction TweakButton({ label, onClick, secondary = false }) {\n return (\n \n {label}\n \n );\n}\n\nObject.assign(window, {\n useTweaks,\n TweaksPanel,\n TweakSection,\n TweakRow,\n TweakSlider,\n TweakToggle,\n TweakRadio,\n TweakSelect,\n TweakText,\n TweakNumber,\n TweakColor,\n TweakButton,\n});","label",[141],"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});",[152],"a00c5ea6-587b-11f1-a8da-ee650bb23af1","index.ts","20a5c902-554e-11f1-a855-ee650bb23af1",22,["D",1779742341443],3,"http","// Harbour — Today screen\n// Val Town HTTP val that serves the James Clear-inspired Today screen.\n//\n// This is a multi-file project val. The structure is:\n//\n// index.ts ← this file (Hono app + the HTML shell)\n// ios-frame.tsx ← iOS device chrome\n// tweaks-panel.tsx← floating Tweaks UI (light/dark, accent, type kit)\n// harbour.tsx ← the Today screen itself\n// app.tsx ← React app that wires Tweaks into HarbourToday\n//\n// The JSX files are served verbatim as text/babel; the browser's\n// @babel/standalone transpiles them on load. This preserves the\n// design bundle authored in Claude Design with no build step.\n\nimport { Hono } from \"npm:hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\nconst HTML = `\n\n\n\nHarbour — Today\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n`;\n\napp.get(\"/\", (c) => c.html(HTML));\n\n// Each JSX module is a sibling .tsx file in this project val,\n// served verbatim as text/babel. readFile(path, import.meta.url)\n// is Val Town's helper for reading a file relative to the current val.\n\nasync function serveJsx(filename: string): Promise {\n const body = await readFile(filename, import.meta.url);\n return new Response(body, {\n headers: { \"content-type\": \"text/babel; charset=utf-8\" },\n });\n}\n\napp.get(\"/ios-frame.jsx\", () => serveJsx(\"/ios-frame.tsx\"));\napp.get(\"/tweaks-panel.jsx\", () => serveJsx(\"/tweaks-panel.tsx\"));\napp.get(\"/harbour.jsx\", () => serveJsx(\"/harbour.tsx\"));\napp.get(\"/app.jsx\", () => serveJsx(\"/app.tsx\"));\n\nexport default app.fetch;",[159],"9540270c-554f-11f1-a8c0-ee650bb23af1","harbour.tsx","9910b956-554e-11f1-b7b0-ee650bb23af1",16,["D",1779393571963],"// harbour.jsx — Harbour Today screen in the spirit of James Clear:\n// editorial typography, paper-and-ink palette, tally marks as data,\n// hairlines instead of cards, color used as punctuation only.\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,\n bigStretch: 1,\n 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,\n bigStretch: 1,\n 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)\",\n bgDeep: \"oklch(12% 0.012 60)\",\n bgInset: \"oklch(18% 0.012 60)\",\n ink: \"oklch(94% 0.008 80)\",\n muted: \"oklch(66% 0.012 80)\",\n faint: \"oklch(42% 0.012 60)\",\n rule: \"oklch(28% 0.012 60)\",\n 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,\n inkOnly,\n };\n }\n return {\n ...t,\n bg: \"oklch(96.5% 0.012 80)\",\n bgDeep: \"oklch(93% 0.014 80)\",\n bgInset: \"oklch(98% 0.008 80)\",\n ink: \"oklch(20% 0.015 60)\",\n muted: \"oklch(46% 0.013 60)\",\n faint: \"oklch(74% 0.012 60)\",\n rule: \"oklch(84% 0.014 80)\",\n 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,\n 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 (\n \n {children}\n \n );\n}\n\nfunction Rule({ color, style }) {\n return
;\n}\n\n// Tally-mark streak: 7 small vertical strokes; filled = done, faint = missed\nfunction TallyRow({ days, accent, faint, gap = 7, h = 22, w = 3 }) {\n return (\n
\n {days.map((on, i) => (\n \n ))}\n
\n );\n}\n\n// 5-segment energy meter — thin rules\nfunction EnergyMeter({ value, max = 5, t, onChange }) {\n return (\n
\n {Array.from({ length: max }).map((_, i) => {\n const on = i < value;\n return (\n onChange(i + 1)}\n style={{\n flex: 1,\n height: 4,\n padding: 0,\n background: on ? t.accent : t.rule,\n border: \"none\",\n borderRadius: 0,\n cursor: \"pointer\",\n }}\n aria-label={`Energy ${i + 1}`}\n />\n );\n })}\n
\n );\n}\n\n// Custom checkbox: small square; filled with hairline ✓ when checked\nfunction Tick({ checked, onClick, t, size = 18 }) {\n return (\n \n {checked && (\n \n )}\n \n );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Sections\n// ─────────────────────────────────────────────────────────────\nfunction Masthead({ t }) {\n return (\n
\n \n Tuesday · evening\n \n Mar 4\n \n
\n \n Harbour\n
\n \n A quiet log of small, good things.\n \n \n );\n}\n\nfunction OneThing({ t }) {\n return (\n
\n \n This week · one thing\n \n day 2/7\n \n
\n \n Schedule the PL 900 exam.\n \n \n {[0, 1, 2, 3, 4, 5, 6].map((i) => (\n \n ))}\n \n \n \n Professional development\n \n \n opens · 5 days left\n \n \n \n );\n}\n\nfunction HowWasToday(\n { t, energy, setEnergy, note, setNote, expanded, setExpanded, onSave, saved },\n) {\n return (\n
\n \n \n How was today?\n
\n \n 30 sec\n \n \n\n \n Energy\n \n {energy}\n / 5\n \n \n \n\n
\n \n What mattered today\n \n setNote(e.target.value)}\n rows={2}\n style={{\n width: \"100%\",\n boxSizing: \"border-box\",\n background: \"transparent\",\n border: \"none\",\n borderBottom: `1px solid ${t.rule}`,\n padding: \"6px 0 10px\",\n color: t.ink,\n fontFamily: t.serif,\n fontStyle: \"italic\",\n fontSize: 17,\n lineHeight: 1.45,\n fontWeight: 400,\n outline: \"none\",\n resize: \"none\",\n }}\n />\n
\n\n {expanded && (\n \n \n \n \n )}\n\n \n \n {saved ? \"✓ Saved\" : \"Log the day\"}\n \n setExpanded((x) => !x)}\n style={{\n appearance: \"none\",\n background: \"transparent\",\n border: \"none\",\n color: t.muted,\n fontFamily: t.sans,\n fontSize: 13.5,\n letterSpacing: \"0.02em\",\n cursor: \"pointer\",\n textDecoration: \"underline\",\n textUnderlineOffset: 4,\n textDecorationColor: t.rule,\n padding: 0,\n }}\n >\n {expanded ? \"fewer prompts\" : \"two more prompts\"}\n \n \n \n );\n}\n\nfunction Field({ label, placeholder, t }) {\n return (\n
\n {label}\n \n
\n );\n}\n\nfunction Evidence({ t, items }) {\n return (\n
\n \n Today · evidence\n \n {items.length} entries\n \n
\n
\n {items.map((it, i) => (\n \n \n ✓\n \n \n {it.title}\n {it.detail && (\n \n · {it.detail}\n \n )}\n \n \n {it.time}\n \n
\n ))}\n \n \n );\n}\n\nfunction Checklist({ t, list, toggle, tab, setTab, counts }) {\n // group by section\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 return (\n
\n \n Checklist\n \n {remaining} to go\n \n
\n\n {/* Tabs as quiet underlined labels */}\n
\n {[\n { id: \"morning\", label: \"Morning\", count: counts.morning },\n { id: \"evening\", label: \"Evening\", count: counts.evening },\n ].map((item) => {\n const active = tab === item.id;\n return (\n setTab(item.id)}\n style={{\n appearance: \"none\",\n background: \"transparent\",\n border: \"none\",\n padding: \"6px 0 8px\",\n cursor: \"pointer\",\n borderBottom: active\n ? `1.5px solid ${t.ink}`\n : `1.5px solid transparent`,\n color: active ? t.ink : t.muted,\n display: \"flex\",\n alignItems: \"baseline\",\n gap: 8,\n }}\n >\n \n {item.label}\n \n \n {item.count}\n \n \n );\n })}\n
\n\n {groups.map(([section, items], gi) => (\n \n \n {section}\n \n
\n {items.map((it, i) => (\n \n
\n toggle(it.id)} t={t} />\n
\n
\n \n {it.title}\n
\n {it.detail && (\n \n {it.detail}\n
\n )}\n \n \n ))}\n \n \n ))}\n \n );\n}\n\nfunction Habits({ t, habits }) {\n return (\n
\n \n Habits\n \n last 7 days\n \n
\n\n
\n {habits.map((h) => (\n \n
\n \n {h.name}\n
\n \n {h.note}\n
\n \n \n \n \n {h.days.filter(Boolean).length} of 7\n \n \n \n ))}\n \n \n );\n}\n\nfunction ColophonQuote({ t }) {\n return (\n \n \n “You do not rise to the level of your goals.
\n You fall to the level of your systems.”\n \n \n — a note to self\n \n \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 \n {items.map((it) => {\n const active = it.id === tab;\n return (\n setTab(it.id)}\n style={{\n appearance: \"none\",\n background: \"transparent\",\n border: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: 4,\n cursor: \"pointer\",\n padding: 4,\n }}\n >\n \n \n {it.label}\n \n \n );\n })}\n \n );\n}\n\nfunction TabIcon({ name, color }) {\n const props = {\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n stroke: color,\n strokeWidth: 1.2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n };\n if (name === \"anchor\") {\n return (\n \n );\n }\n if (name === \"flame\") {\n return (\n \n );\n }\n if (name === \"chart\") {\n return (\n \n );\n }\n return ( // list\n \n );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Screen\n// ─────────────────────────────────────────────────────────────\nfunction HarbourToday({ tweaks, setTweak }) {\n const t = useMemo(\n () =>\n buildTheme({\n dark: tweaks.dark,\n palette: tweaks.palette,\n kit: tweaks.kit,\n }),\n [tweaks.dark, tweaks.palette, tweaks.kit],\n );\n\n const [energy, setEnergy] = useState(3);\n const [note, setNote] = useState(\n \"Tomorrow scan done before dinner for once.\",\n );\n const [expanded, setExpanded] = useState(false);\n const [saved, setSaved] = useState(false);\n const [tab, setTab] = useState(\"today\");\n const [clTab, setClTab] = useState(\"evening\");\n\n const [evening, setEvening] = useState([\n {\n id: \"e1\",\n section: \"At pickup\",\n title: \"Photo of daycare board\",\n detail: null,\n done: true,\n },\n {\n id: \"e2\",\n section: \"Launch pad\",\n title: \"Pack daycare clothes\",\n detail: \"set out by the door\",\n done: true,\n },\n {\n id: \"e3\",\n section: \"Launch pad\",\n title: \"Prep lunches & snacks\",\n detail: \"after kitchen cleanup\",\n done: false,\n },\n {\n id: \"e4\",\n section: \"Launch pad\",\n title: \"Tomorrow scan\",\n detail: \"phone in hand · 3 events tomorrow\",\n done: false,\n },\n {\n id: \"e5\",\n section: \"Launch pad\",\n title: \"Check coffee supply\",\n detail: \"by the coffee maker\",\n done: false,\n },\n ]);\n const [morning, setMorning] = useState([\n {\n id: \"m1\",\n section: \"Wake\",\n title: \"Drink a glass of water\",\n detail: \"before phone\",\n done: true,\n },\n {\n id: \"m2\",\n section: \"Wake\",\n title: \"Make the bed\",\n detail: null,\n done: true,\n },\n {\n id: \"m3\",\n section: \"Move\",\n title: \"5 min stretch\",\n detail: \"kitchen floor\",\n done: true,\n },\n {\n id: \"m4\",\n section: \"Move\",\n title: \"Walk outside\",\n detail: \"before coffee\",\n done: true,\n },\n {\n id: \"m5\",\n section: \"Read\",\n title: \"Two pages\",\n detail: \"whatever's on the nightstand\",\n done: true,\n },\n {\n id: \"m6\",\n section: \"Read\",\n title: \"Write down the One Thing\",\n detail: null,\n done: true,\n },\n ]);\n\n const activeList = clTab === \"morning\" ? morning : evening;\n const setActive = clTab === \"morning\" ? setMorning : setEvening;\n const toggleItem = (id) => {\n setActive((list) =>\n list.map((x) => x.id === id ? { ...x, done: !x.done } : x)\n );\n if (saved) setSaved(false);\n };\n\n const counts = {\n morning: `${morning.filter((x) => x.done).length}/${morning.length}`,\n evening: `${evening.filter((x) => x.done).length}/${evening.length}`,\n };\n\n const evidence = [\n { title: \"Read 4 pages\", detail: null, time: \"9:08 pm\" },\n { title: \"Walk\", detail: \"22 min\", time: \"8:12 pm\" },\n { title: \"Launch pad\", detail: \"photo, clothes\", time: \"7:45 pm\" },\n ];\n\n const habits = [\n {\n name: \"Exercise\",\n note: \"Started a quiet routine after dinner.\",\n days: [true, true, true, false, true, true, false],\n },\n {\n name: \"Reading\",\n note: \"Opened the book before the screen.\",\n days: [true, true, false, true, true, true, true],\n },\n ];\n\n // expose tokens as CSS vars for any non-React fallback\n const cssVars = {\n \"--hb-bg\": t.bg,\n \"--hb-ink\": t.ink,\n \"--hb-muted\": t.muted,\n \"--hb-rule\": t.rule,\n \"--hb-accent\": t.accent,\n \"--hb-mono\": t.mono,\n \"--hb-serif\": t.serif,\n \"--hb-sans\": t.sans,\n };\n\n return (\n \n {/* Scrollable body */}\n \n \n\n \n \n\n \n \n \n {\n setEnergy(v);\n if (saved) setSaved(false);\n }}\n note={note}\n setNote={(v) => {\n setNote(v);\n if (saved) setSaved(false);\n }}\n expanded={expanded}\n setExpanded={setExpanded}\n onSave={() => setSaved(true)}\n saved={saved}\n />\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n );\n}\n\nfunction Spacer({ h }) {\n return
;\n}\n\nObject.assign(window, { HarbourToday, buildTheme, PALETTES, TYPE_KITS });",[168],"9abb01ca-554f-11f1-a1cf-ee650bb23af1","app.tsx","232beb84-554e-11f1-8908-ee650bb23af1",17,["D",1779393581172],"// app.jsx — App shell: device frame + tweaks panel wiring\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\n const screen = ;\n\n return (\n
\n {t.showFrame\n ? (\n \n {screen}\n \n )\n : (\n \n {screen}\n
\n )}\n\n \n \n setTweak(\"dark\", v)}\n />\n setTweak(\"showFrame\", v)}\n />\n\n \n setTweak(\"kit\", v)}\n />\n\n \n setTweak(\"palette\", v)}\n />\n \n
\n );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render();",[175],"ec80eb0a-554f-11f1-8ea0-ee650bb23af1","README.md","e42b7fd4-554e-11f1-9a4e-ee650bb23af1",21,["D",1779393718368],"# Harbour — Today screen (Val Town project val)\n\nThis is a 5-file Val Town project val implementing the Today screen for Harbour\nin the James Clear–inspired editorial style: Newsreader serif + Geist sans, warm\ncream paper, hairline rules instead of cards, tally marks for habit streaks,\naccent color used as punctuation.\n\n## Files\n\n| File | Purpose |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| `index.ts` | Hono HTTP val. Serves the HTML shell at `/` and each JSX module at its own route. This is the val's entry point. |\n| `app.tsx` | React app shell that wires Tweaks into HarbourToday. |\n| `harbour.tsx` | The Today screen: masthead, one thing, check-in, evidence, checklist, habits, colophon, tab bar. |\n| `ios-frame.tsx` | iOS 26 device frame chrome (status bar, dynamic island, home indicator). |\n| `tweaks-panel.tsx` | Floating Tweaks UI: light/dark, type pairing, accent. Persists state in-page (the host-protocol round-trip only matters inside Claude Design). |\n\n## How to deploy\n\n1. Create a new **project val** in Val Town named `harbour` (or whatever you\n prefer).\n2. Add a file for each of the five above. Keep the names and extensions as\n listed — the `index.ts` routing assumes them.\n3. Paste the contents of each file from this folder into the matching file in\n your val.\n4. Open the val's HTTP endpoint URL. You should see the Today screen in light\n mode, amber accent, inside an iOS device frame, with a Tweaks panel docked\n beside it.\n\nThe val needs no env vars and no database access — it's a self-contained static\nReact app served from a single HTTP endpoint. The Babel-in-browser transpile\nhappens on each page load (~200 ms after first paint).\n\n## What's interactive\n\n- **Energy meter** — tap any of the 5 segments to set energy 1–5\n- **Note field** — type your \"what mattered today\" answer\n- **Two more prompts** — expand the check-in to include gratitude + let-go\n- **Log the day** — save button flips to a ✓ Saved state\n- **Morning / Evening tabs** — switch checklist views\n- **Checkboxes** — tap any list item to mark complete; counts update\n- **Bottom tabs** — placeholder for Today / Habits / Metrics / Home list\n- **Tweaks panel** — light/dark, device frame on/off, Editorial vs Classic type,\n four accent colors\n\n## What's not wired (yet)\n\n- No database persistence — state lives only in component memory and is lost on\n reload\n- No real \"one thing\" data — placeholder shows \"Schedule the PL 900 exam\"\n- No real habit history — placeholder shows fake 7-day arrays\n- No \"this week's one thing\" tap-to-complete sheet (designed in the prior chat,\n not yet built)\n- No Sunday reset screen (designed in the prior chat, not yet built)\n- No Habits / Metrics / Home list tabs\n\nThe next pass wires this to your existing `routine_checks` table and adds the\nper-tab screens.\n\n## Notes on the design\n\nThe chat transcript inside the design bundle committed to:\n\n- **Type:** Newsreader (editorial serif, headings + reflective copy) · Geist\n (sans, UI + body) · JetBrains Mono (times, day counts, energy 3/5)\n- **Palette:** warm cream paper, deep ink, single muted amber accent used as\n punctuation. Dark mode is a toggle away.\n- **Voice:** small caps section labels, italic serif for moments of reflection,\n tabular numerals for data\n- **Treatment:** check marks as crossing strokes, streaks as a row of small\n tally slashes (filled = done, hollow = missed), the \"one thing\" gets a quiet\n pull-quote treatment instead of a bordered card\n\nThe accent color is intentionally restrained — it appears in roughly one zone\nper screen (a section divider, the active energy segments, the filled streak\nstrokes) and stays out of the way otherwise.",[182],"35bd70dc-590a-11f1-a7fd-ee650bb23af1",["D",1779803581118],[28],"pulls","branches",1,"forks","envVars",{"_199":193,"_201":66},"connections",{"_199":66,"_200":66},"count","unfilledCount","emptyCount",{"_48":188,"_32":28,"_30":31,"_143":-5,"_39":40,"_38":14,"_145":128,"_36":233,"_13":66,"_33":34,"_35":-5,"_24":25,"_149":-5,"_211":234,"_27":235},{"_48":229,"_32":44,"_30":43,"_143":31,"_39":40,"_38":14,"_145":25,"_36":230,"_13":66,"_33":45,"_35":46,"_24":25,"_149":-5,"_211":231,"_27":232},{"_48":181,"_32":182,"_30":183,"_143":-5,"_39":40,"_38":184,"_145":25,"_36":226,"_13":163,"_33":21,"_35":186,"_24":25,"_149":-5,"_211":227,"_27":228},{"_48":174,"_32":175,"_30":176,"_143":-5,"_39":40,"_38":177,"_145":25,"_36":223,"_13":147,"_33":45,"_35":179,"_24":25,"_149":-5,"_211":224,"_27":225},{"_48":167,"_32":168,"_30":169,"_143":-5,"_39":40,"_38":170,"_145":25,"_36":220,"_13":147,"_33":45,"_35":172,"_24":25,"_149":-5,"_211":221,"_27":222},{"_48":158,"_32":159,"_30":160,"_143":-5,"_39":40,"_38":161,"_145":25,"_36":217,"_13":163,"_33":164,"_35":165,"_24":25,"_149":-5,"_211":218,"_27":219},{"_48":151,"_32":152,"_30":153,"_143":-5,"_39":40,"_38":154,"_145":128,"_36":214,"_13":147,"_33":45,"_35":156,"_24":25,"_149":-5,"_211":215,"_27":216},{"_48":140,"_32":141,"_30":142,"_143":-5,"_39":40,"_38":144,"_145":128,"_36":210,"_13":147,"_33":45,"_35":148,"_24":25,"_149":-5,"_211":212,"_27":213},["D",1779393598501],"children",[],[141],["D",1779393591237],[],[152],["D",1779742341443],[],[159],["D",1779393571963],[],[168],["D",1779393581172],[],[175],["D",1779393718368],[],[182],"35bd4224-590a-11f1-a7fd-ee650bb23af1",["D",1779803581118],[],[28,44],["D",1779803581118],[203],[28],["D",1779392946380],["D",1789494036282],{"_103":102,"_110":106},{"_103":102,"_104":-5,"_105":106,"_18":60,"_107":108,"_109":25},{"_13":92,"_32":93,"_48":40,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":50,"_101":102},"ctx",{"_85":-5,"_130":274,"_275":276,"_277":278,"_279":25,"_280":25,"_281":25,"_282":128,"_283":-5,"_284":-7,"_285":-7,"_286":66,"_287":25,"_288":25,"_289":-5,"_290":25,"_291":25,"_292":25,"_293":-5},"ENV",{"_245":246,"_247":248,"_249":93,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273},"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"]

Diff · v23