[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_107":108,"_109":110},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","westin","name","untitled-5701","path","frontend/app.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":-5,"_56":-5,"_57":58,"_59":-5,"_60":44,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/westin/untitled-5701/code/frontend/app.tsx","extension","id","96ac16a7-7b11-4f12-9b81-909b258cca53","app.tsx","fileId","8b1e2d7e-6471-11f1-bb88-1607ee4eb77e","parentId","3d823607-05cd-4cbc-bcc1-e699ca14fd5b","branchId","55e33356-43ca-11f1-be01-42b51c65c3df","branchVersion",29,"latest",true,"createdAt",["D",1788888132739],"version",15,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { ChevronLeft, ChevronRight, ChevronDown, RotateCcw, Heart, BookOpen, ArrowLeft } from \"https://esm.sh/lucide-react@0.263.1?deps=react@18.2.0\";\nimport { WORDS } from \"./words.ts\";\n\n// ---------- word logic ----------\n\nfunction mapLetters(result, w1, w2) {\n const avail1 = w1.split(\"\").map((ch, i) => ({ ch, i, used: false }));\n const avail2 = w2.split(\"\").map((ch, i) => ({ ch, i, used: false }));\n const mapping = [];\n for (const ch of result) {\n const from1 = avail1.find(a => !a.used && a.ch === ch);\n const from2 = avail2.find(a => !a.used && a.ch === ch);\n if (from1 && from2) {\n from1.used = true;\n mapping.push({ source: 0, index: from1.i, shared: true, altIndex: from2.i });\n } else if (from1) {\n from1.used = true;\n mapping.push({ source: 0, index: from1.i, shared: false });\n } else if (from2) {\n from2.used = true;\n mapping.push({ source: 1, index: from2.i, shared: false });\n } else {\n mapping.push({ source: -1, index: 0, shared: false });\n }\n }\n return mapping;\n}\n\n// Ranking policy: letters pulled from both words earn score, repeated letters cost it.\n// One repeat outweighs one shared letter, so \"sissy\" sinks below anything spelled with\n// five distinct letters.\nconst SHARED_WEIGHT = 1;\nconst REPEAT_PENALTY = 1.5;\n\nfunction findRecombinations(w1, w2, maxResults = 30) {\n const pool = (w1 + w2).toLowerCase().split(\"\");\n const w1l = w1.toLowerCase(), w2l = w2.toLowerCase();\n const results = [];\n for (const candidate of WORDS) {\n if (candidate === w1l || candidate === w2l) continue;\n const available = [...pool];\n let valid = true;\n for (const ch of candidate) {\n const idx = available.indexOf(ch);\n if (idx === -1) { valid = false; break; }\n available.splice(idx, 1);\n }\n if (!valid) continue;\n const m = mapLetters(candidate, w1l, w2l);\n const fromW1 = m.filter(x => x.source === 0).length;\n const fromW2 = m.filter(x => x.source === 1).length;\n const sharedCount = m.filter(x => x.shared).length;\n if (fromW1 > 0 && fromW2 > 0) {\n const repeats = candidate.length - new Set(candidate).size;\n results.push({\n word: candidate,\n score: sharedCount * SHARED_WEIGHT - repeats * REPEAT_PENALTY,\n diff: Math.abs(fromW1 - fromW2),\n });\n }\n }\n results.sort((a, b) => b.score - a.score || a.diff - b.diff || a.word.localeCompare(b.word));\n return results.map(r => r.word).slice(0, maxResults);\n}\n\n// ---------- persistence ----------\n// Picks live in this val's blob storage, served by the same val at /api/picks.\n\nasync function loadLog() {\n const r = await fetch(\"/api/picks\");\n if (!r.ok) throw new Error(`api responded ${r.status}`);\n const data = await r.json();\n return data && typeof data === \"object\" && !Array.isArray(data) ? data : {};\n}\n\nasync function saveLog(log) {\n try {\n const r = await fetch(\"/api/picks\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(log),\n });\n return { ok: r.ok };\n } catch {\n return { ok: false };\n }\n}\n\nfunction localDateKey(d = new Date()) {\n return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, \"0\")}-${String(d.getDate()).padStart(2, \"0\")}`;\n}\n\nfunction formatDateKey(key) {\n return new Date(key + \"T12:00:00\")\n .toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" })\n .toLowerCase();\n}\n\n// ---------- wire geometry ----------\n\nconst TILE_W = 50;\nconst SRC_GAP = 5;\nconst DST_GAP = 6;\n\nfunction sampleBezier(sx, sy, cx1, cy1, cx2, cy2, ex, ey, t) {\n const u = 1 - t;\n return {\n x: u*u*u*sx + 3*u*u*t*cx1 + 3*u*t*t*cx2 + t*t*t*ex,\n y: u*u*u*sy + 3*u*u*t*cy1 + 3*u*t*t*cy2 + t*t*t*ey,\n };\n}\n\nfunction buildCurvePath(sx, sy, dx, dy, ri, srcIdx, tension) {\n const gap = dy - sy;\n const pull = gap * 0.42 * (1 - 0.5 * tension);\n const drift = ((ri - 2) * 5 + (srcIdx - 2) * 3) * (1 - 0.6 * tension);\n return `M ${sx} ${sy} C ${sx + drift * 0.6} ${sy + pull}, ${dx - drift * 0.4} ${dy - pull}, ${dx} ${dy}`;\n}\n\nfunction buildTwinedPaths(sx1, sy1, sx2, sy2, dx, dy, ri, tension) {\n const steps = 48;\n const twistFreq = 4;\n const twistRadius = 5 * (1 - 0.85 * tension);\n\n const smx = (sx1 + sx2) / 2, smy = (sy1 + sy2) / 2;\n const gap = dy - smy;\n const pull = gap * 0.42 * (1 - 0.5 * tension);\n const drift = (ri - 2) * 4 * (1 - 0.6 * tension);\n const scx1 = smx + drift * 0.5, scy1 = smy + pull;\n const scx2 = dx - drift * 0.3, scy2 = dy - pull;\n\n const spine = [];\n for (let i = 0; i <= steps; i++) {\n const t = i / steps;\n spine.push(sampleBezier(smx, smy, scx1, scy1, scx2, scy2, dx, dy, t));\n }\n\n const pts1 = [], pts2 = [];\n for (let i = 0; i <= steps; i++) {\n const t = i / steps;\n const p = spine[i];\n const prev = spine[Math.max(0, i - 1)];\n const next = spine[Math.min(steps, i + 1)];\n const tdx = next.x - prev.x, tdy = next.y - prev.y;\n const len = Math.sqrt(tdx * tdx + tdy * tdy) || 1;\n const nx = -tdy / len, ny = tdx / len;\n\n const easeIn = Math.min(1, t * 4);\n const easeOut = Math.min(1, (1 - t) * 4);\n const braidBlend = Math.min(easeIn, easeOut);\n\n const angle = t * Math.PI * 2 * twistFreq;\n const offset1 = Math.sin(angle) * twistRadius * braidBlend;\n const offset2 = Math.sin(angle + Math.PI) * twistRadius * braidBlend;\n\n const startBlend = 1 - Math.pow(1 - Math.min(1, t * 3), 2);\n\n const x1 = sx1 + (p.x - sx1) * startBlend;\n const y1 = sy1 + (p.y - sy1) * startBlend;\n const x2 = sx2 + (p.x - sx2) * startBlend;\n const y2 = sy2 + (p.y - sy2) * startBlend;\n\n pts1.push({ x: x1 + nx * offset1, y: y1 + ny * offset1 });\n pts2.push({ x: x2 + nx * offset2, y: y2 + ny * offset2 });\n }\n\n const toSmoothPath = pts => {\n let d = `M ${pts[0].x} ${pts[0].y}`;\n for (let i = 1; i < pts.length - 1; i++) {\n const xc = (pts[i].x + pts[i + 1].x) / 2;\n const yc = (pts[i].y + pts[i + 1].y) / 2;\n d += ` Q ${pts[i].x} ${pts[i].y} ${xc} ${yc}`;\n }\n const last = pts[pts.length - 1];\n d += ` L ${last.x} ${last.y}`;\n return d;\n };\n\n return [toSmoothPath(pts1), toSmoothPath(pts2)];\n}\n\n// ---------- shared timing + palette ----------\n\nconst T = { base: 0.05, stagger: 0.06, draw: 0.28, pipeDelay: 0.16, pipe: 0.32 };\nconst POP_MS = 180;\n\nconst COLOR = {\n jules: \"#E8604F\",\n westin: \"#3D7BC4\",\n shared: \"#8E62B0\",\n ink: \"#3B3530\",\n};\n\nconst C1 = [\"#E8604F\", \"#E45A52\", \"#DF5456\", \"#E2584F\", \"#E65E4D\"];\nconst C2 = [\"#3D7BC4\", \"#4380C9\", \"#3976BE\", \"#4684CD\", \"#3F7DC6\"];\nconst R1 = [\"#C9586E\", \"#C45469\", \"#BF5064\", \"#C65670\", \"#CB5A72\"];\nconst R2 = [\"#5C77BC\", \"#5772B7\", \"#526DB2\", \"#5F7ABF\", \"#5470B5\"];\n\nfunction colorsForWord(word, jules, westin) {\n const m = mapLetters(word, jules, westin);\n return m.map(x => {\n if (x.shared) return COLOR.shared;\n if (x.source === 0) return R1[x.index];\n if (x.source === 1) return R2[x.index];\n return \"#B9AFA3\";\n });\n}\n\n// ---------- wires ----------\n\nfunction WiresSVG({ mapping, srcRow1Ref, srcRow2Ref, dstRowRef, containerRef, animKey, dragOffset, exiting }) {\n const [geo, setGeo] = useState(null);\n\n useEffect(() => {\n const t = setTimeout(() => {\n const c = containerRef.current, r1 = srcRow1Ref.current, r2 = srcRow2Ref.current, rd = dstRowRef.current;\n if (!c || !r1 || !r2 || !rd) return;\n const cr = c.getBoundingClientRect();\n const b1 = r1.getBoundingClientRect();\n const b2 = r2.getBoundingClientRect();\n const bd = rd.getBoundingClientRect();\n setGeo({\n src1: { left: b1.left - cr.left, bottom: b1.bottom - cr.top },\n src2: { left: b2.left - cr.left, bottom: b2.bottom - cr.top },\n dst: { left: bd.left - cr.left, top: bd.top - cr.top },\n key: animKey,\n });\n }, 60);\n return () => clearTimeout(t);\n }, [mapping, animKey, containerRef, srcRow1Ref, srcRow2Ref, dstRowRef]);\n\n const groups = useMemo(() => {\n if (!geo || geo.key !== animKey) return [];\n const tension = Math.min(1, Math.abs(dragOffset) / 90);\n const srcX = (row, i) => row.left + i * (TILE_W + SRC_GAP) + TILE_W / 2;\n const dstX = i => geo.dst.left + i * (TILE_W + DST_GAP) + TILE_W / 2 + dragOffset;\n const dy = geo.dst.top - 2;\n\n const out = [];\n mapping.forEach((m, ri) => {\n const dx = dstX(ri);\n if (m.shared) {\n const [p1, p2] = buildTwinedPaths(\n srcX(geo.src1, m.index), geo.src1.bottom + 2,\n srcX(geo.src2, m.altIndex), geo.src2.bottom + 2,\n dx, dy, ri, tension\n );\n out.push({\n paths: [{ d: p1, color: COLOR.jules }, { d: p2, color: COLOR.westin }],\n delay: ri * T.stagger, key: `${animKey}-${ri}`,\n });\n } else if (m.source !== -1) {\n const row = m.source === 0 ? geo.src1 : geo.src2;\n const d = buildCurvePath(srcX(row, m.index), row.bottom + 2, dx, dy, ri, m.index, tension);\n out.push({\n paths: [{ d, color: m.source === 0 ? COLOR.jules : COLOR.westin }],\n delay: ri * T.stagger, key: `${animKey}-${ri}`,\n });\n }\n });\n return out;\n }, [geo, mapping, animKey, dragOffset]);\n\n return (\n \n );\n}\n\n// ---------- tiles + input ----------\n\nfunction Tile({ letter, color, delay, dimmed, dur = 0.34, anim = \"tileIn\", origin = \"center\" }) {\n return (\n {letter}\n );\n}\n\nfunction MiniWord({ word, jules, westin }) {\n const colors = colorsForWord(word, jules, westin);\n return (\n

\n {word.split(\"\").map((l, i) => (\n {l}\n ))}\n

\n );\n}\n\nfunction WordInput({ label, value, onChange, accent, bg }) {\n const inputRef = useRef(null);\n const [focused, setFocused] = useState(false);\n return (\n

\n {label}\n

inputRef.current?.focus()}>\n setFocused(true)}\n onBlur={() => setFocused(false)}\n onChange={e => onChange(e.target.value.replace(/[^a-zA-Z]/g, \"\").slice(0, 5))}\n style={{\n position: \"absolute\", top: 0, left: 0, width: \"100%\", height: \"100%\",\n opacity: 0, fontSize: 24, zIndex: 2, caretColor: \"transparent\", cursor: \"pointer\",\n }}\n />\n {[...Array(5)].map((_, i) => {\n const filled = !!value[i];\n const isActive = focused && value.length === i;\n return (\n

\n {filled && {value[i]}}\n

\n );\n })}\n

\n );\n}\n\n// ---------- word stats ----------\n\nfunction Chip({ children, color = \"#9C8F80\", bg = \"#F5F0E7\" }) {\n return (\n {children}\n );\n}\n\nconst NO_LETTERS = none;\n\nfunction LetterChips({ letters, colorFor }) {\n if (letters.length === 0) return NO_LETTERS;\n return letters.map(ch => (\n {ch}\n ));\n}\n\n// Each echo carries its own tally of how often the letter turned up in the week's\n// keeps, ordered heaviest first. The tile warms as the count climbs.\nconst ECHO_TIERS = [\n { bg: \"#F3EEE4\", fg: \"#A99C8A\" },\n { bg: \"#F1E7D6\", fg: \"#9C8560\" },\n { bg: \"#F3E3CF\", fg: \"#B08248\" },\n];\n\nfunction EchoChips({ echo }) {\n if (echo.length === 0) return NO_LETTERS;\n return echo.map(({ ch, n }) => {\n const tier = ECHO_TIERS[Math.min(n, 3) - 1];\n return (\n \n {ch}\n ×{n}\n \n );\n });\n}\n\nfunction StatRow({ label, children }) {\n return (\n

{label}

\n {children}\n

\n );\n}\n\nfunction WordStats({ stats, open, onToggle, dimmed }) {\n const {\n keepCount, lastKeptKey, pairCount, lastPairKey, fresh, echo, weekDays,\n doubled, vowels, letterColor,\n } = stats;\n const colorFor = ch => letterColor[ch] || COLOR.shared;\n const plural = (n, w) => `${n} ${w}${n === 1 ? \"\" : \"s\"}`;\n const note = { fontSize: 12.5, color: \"#8E8375\", fontWeight: 500, lineHeight: 1.45 };\n\n return (\n

\n \n\n

\n\n \n \n {keepCount === 0\n ? \"never kept before\"\n : `kept ${keepCount === 1 ? \"once\" : plural(keepCount, \"time\")} · last ${formatDateKey(lastKeptKey)}`}\n \n \n\n {pairCount > 0 && (\n \n these two words also met on {formatDateKey(lastPairKey)}\n \n )}\n\n \n \n \n\n \n \n \n\n \n {doubled.length === 0\n ? no repeats\n : double {doubled.join(\" & \").toUpperCase()}}\n {plural(vowels, \"vowel\")}\n \n\n

\n {weekDays === 0\n ? \"nothing kept in the last 7 days to compare against\"\n : `echo counts are uses across ${plural(weekDays, \"word\")} kept in the last 7 days`}\n

\n );\n}\n\n// ---------- main ----------\n\nexport default function WordRecombulator() {\n const [word1, setWord1] = useState(\"\");\n const [word2, setWord2] = useState(\"\");\n const [results, setResults] = useState([]);\n const [currentIdx, setCurrentIdx] = useState(0);\n const [phase, setPhase] = useState(\"input\"); // input | results | history\n const [dragX, setDragX] = useState(0);\n const [dragging, setDragging] = useState(false);\n const [animKey, setAnimKey] = useState(0);\n const [navigated, setNavigated] = useState(false);\n const [exiting, setExiting] = useState(0);\n const [log, setLog] = useState(null); // null = loading, {} = loaded\n const [hintFlash, setHintFlash] = useState(\"\");\n const [statsOpen, setStatsOpen] = useState(false);\n const startXRef = useRef(0);\n const exitTimerRef = useRef(null);\n const flashTimerRef = useRef(null);\n const wireContainerRef = useRef(null);\n const trackRef = useRef(null);\n const srcRow1Ref = useRef(null);\n const srcRow2Ref = useRef(null);\n const dstRowRef = useRef(null);\n\n const [storageMode, setStorageMode] = useState(\"checking\"); // checking | ok | session\n\n useEffect(() => {\n (async () => {\n try {\n const initial = await loadLog();\n setStorageMode(\"ok\");\n setLog(initial);\n } catch (e) {\n console.error(\"failed to load picks:\", e);\n setStorageMode(\"session\");\n setLog({});\n }\n })();\n return () => { clearTimeout(exitTimerRef.current); clearTimeout(flashTimerRef.current); };\n }, []);\n\n const todayKey = localDateKey();\n const todaysPick = log?.[todayKey];\n\n const currentWord = results[currentIdx] || \"\";\n const mapping = useMemo(() => {\n if (!currentWord || !word1 || !word2) return [];\n return mapLetters(currentWord, word1.toLowerCase(), word2.toLowerCase());\n }, [currentWord, word1, word2]);\n\n const usedInW1 = useMemo(() => new Set(mapping.filter(m => m.source === 0).map(m => m.index)), [mapping]);\n const usedInW2 = useMemo(() => {\n const s = new Set(mapping.filter(m => m.source === 1).map(m => m.index));\n mapping.filter(m => m.shared).forEach(m => s.add(m.altIndex));\n return s;\n }, [mapping]);\n\n const resultTileColors = useMemo(() =>\n mapping.map(m => {\n if (m.shared) return COLOR.shared;\n if (m.source === 0) return R1[m.index];\n return R2[m.index];\n }), [mapping]);\n\n // Stats for the word on screen, measured against the 7 days of keeps before today.\n const wordStats = useMemo(() => {\n if (!currentWord || !log || mapping.length === 0) return null;\n\n const letters = currentWord.split(\"\");\n const distinct = [...new Set(letters)];\n\n // colour each distinct letter the way its tile is coloured\n const letterColor = {};\n letters.forEach((ch, i) => {\n if (!(ch in letterColor)) letterColor[ch] = resultTileColors[i] || COLOR.shared;\n });\n\n const entries = Object.entries(log).filter(([, e]) => e && typeof e.word === \"string\");\n\n const keeps = entries\n .filter(([k, e]) => k !== todayKey && e.word === currentWord)\n .sort((a, b) => b[0].localeCompare(a[0]));\n\n const pairs = entries\n .filter(([k, e]) => k !== todayKey && e.jules === word1.toLowerCase() && e.westin === word2.toLowerCase())\n .sort((a, b) => b[0].localeCompare(a[0]));\n\n const weekStart = new Date();\n weekStart.setDate(weekStart.getDate() - 7);\n const weekStartKey = localDateKey(weekStart);\n const weekWords = entries.filter(([k]) => k >= weekStartKey && k < todayKey);\n const weekUses = {};\n weekWords.forEach(([, e]) => e.word.split(\"\").forEach(ch => {\n weekUses[ch] = (weekUses[ch] || 0) + 1;\n }));\n\n const counts = {};\n letters.forEach(ch => { counts[ch] = (counts[ch] || 0) + 1; });\n\n return {\n keepCount: keeps.length,\n lastKeptKey: keeps[0]?.[0] ?? null,\n pairCount: pairs.length,\n lastPairKey: pairs[0]?.[0] ?? null,\n weekDays: weekWords.length,\n fresh: distinct.filter(ch => !weekUses[ch]),\n echo: distinct\n .filter(ch => weekUses[ch])\n .map(ch => ({ ch, n: weekUses[ch] }))\n .sort((a, b) => b.n - a.n),\n doubled: distinct.filter(ch => counts[ch] > 1),\n vowels: letters.filter(ch => \"aeiou\".includes(ch)).length,\n letterColor,\n };\n }, [currentWord, log, mapping, resultTileColors, todayKey, word1, word2]);\n\n const isKept = todaysPick && todaysPick.word === currentWord;\n\n const flash = (text) => {\n setHintFlash(text);\n clearTimeout(flashTimerRef.current);\n flashTimerRef.current = setTimeout(() => setHintFlash(\"\"), 1800);\n };\n\n const toggleKeep = async () => {\n if (log === null || !currentWord) return;\n let next;\n if (isKept) {\n next = { ...log };\n delete next[todayKey];\n setLog(next);\n } else {\n next = {\n ...log,\n [todayKey]: { word: currentWord, jules: word1.toLowerCase(), westin: word2.toLowerCase(), ts: Date.now() },\n };\n setLog(next);\n flash(storageMode === \"session\" ? \"kept · this session only\" : `kept for ${formatDateKey(todayKey)}`);\n }\n if (storageMode !== \"ok\") return; // session mode: in-memory only, no error churn\n const res = await saveLog(next);\n if (!res.ok) {\n flash(\"couldn't sync — check connection, then tap again\");\n }\n };\n\n const handleGenerate = () => {\n if (word1.length !== 5 || word2.length !== 5) return;\n setResults(findRecombinations(word1, word2, 30));\n setCurrentIdx(0);\n setAnimKey(k => k + 1);\n setNavigated(false);\n setExiting(0);\n setPhase(\"results\");\n };\n\n const commitTo = useCallback((targetIdx, dir) => {\n if (exiting) return;\n if (targetIdx < 0 || targetIdx >= results.length || targetIdx === currentIdx) return;\n setExiting(dir);\n setNavigated(true);\n setDragging(false);\n exitTimerRef.current = setTimeout(() => {\n setCurrentIdx(targetIdx);\n setAnimKey(k => k + 1);\n setDragX(0);\n setExiting(0);\n }, POP_MS);\n }, [exiting, results.length, currentIdx]);\n\n const nav = useCallback((dir) => commitTo(currentIdx + dir, dir), [commitTo, currentIdx]);\n const seek = (idx) => commitTo(idx, idx > currentIdx ? 1 : -1);\n\n const onPD = e => {\n if (exiting) return;\n e.currentTarget.setPointerCapture?.(e.pointerId);\n setDragging(true);\n startXRef.current = e.clientX || 0;\n setDragX(0);\n };\n const onPM = e => { if (dragging && !exiting) setDragX((e.clientX || 0) - startXRef.current); };\n const onPU = () => {\n if (!dragging) return;\n setDragging(false);\n if (dragX < -50) nav(1);\n else if (dragX > 50) nav(-1);\n else setDragX(0);\n };\n\n useEffect(() => {\n const h = e => {\n if (phase !== \"results\") return;\n if (e.key === \"ArrowLeft\") nav(-1);\n if (e.key === \"ArrowRight\") nav(1);\n };\n window.addEventListener(\"keydown\", h);\n return () => window.removeEventListener(\"keydown\", h);\n }, [phase, nav]);\n\n const isValid = word1.length === 5 && word2.length === 5;\n const atStart = currentIdx === 0;\n const atEnd = currentIdx === results.length - 1;\n const rubber = (dragX > 0 && atStart) || (dragX < 0 && atEnd) ? 0.12 : 0.4;\n const dragOffset = dragX * rubber;\n\n const n = results.length;\n const thumbPct = n > 0 ? Math.max(100 / n, 14) : 100;\n const thumbLeft = n > 1 ? (currentIdx / (n - 1)) * (100 - thumbPct) : 0;\n\n const rowTransform = exiting ? `translateX(${exiting * -110}px)` : `translateX(${dragOffset}px)`;\n const rowTransition = dragging\n ? \"none\"\n : exiting\n ? `transform ${POP_MS / 1000}s cubic-bezier(0.5, 0, 0.9, 0.4), opacity ${POP_MS / 1000}s ease-in`\n : \"transform 0.35s cubic-bezier(0.22,1,0.36,1)\";\n\n // last 30 days of picks, newest first\n const historyEntries = useMemo(() => {\n if (!log) return [];\n const cutoff = new Date();\n cutoff.setDate(cutoff.getDate() - 30);\n const cutoffKey = localDateKey(cutoff);\n return Object.entries(log)\n .filter(([k]) => k >= cutoffKey)\n .sort((a, b) => b[0].localeCompare(a[0]))\n .slice(0, 30);\n }, [log]);\n\n return (\n <>\n \n\n

\n \n\n

Jules' & Westin's

Word Recombulator

\n\n

\n {phase === \"input\" && (\n

\n \n

\n \n \n

\n )}\n\n {phase === \"results\" && (\n

\n\n

\n {word1.split(\"\").map((l, i) => (\n \n ))}\n

jules

\n {word2.split(\"\").map((l, i) => (\n \n ))}\n

westin

\n\n

\n\n {results.length > 0 ? (\n

\n {currentWord.split(\"\").map((l, i) => (\n \n ))}\n

\n ) : (\n

\n No real words in this mix — head back and try a different pair.\n

\n )}\n\n {results.length > 0 && mapping.length > 0 && (\n \n )}\n

\n\n {wordStats && (\n setStatsOpen(o => !o)} dimmed={!!exiting} />\n )}\n\n {results.length > 0 && (\n

\n \n\n {n <= 10 ? (\n

\n {results.map((_, i) => (\n

seek(i)} style={{\n width: i === currentIdx ? 20 : 7, height: 7, borderRadius: 4,\n background: i === currentIdx ? COLOR.ink : \"#DCD3C6\",\n transition: \"all 0.35s cubic-bezier(0.22,1,0.36,1)\", cursor: \"pointer\",\n }} />\n ))}\n

\n ) : (\n

{\n const r = trackRef.current.getBoundingClientRect();\n const frac = (e.clientX - r.left) / r.width;\n seek(Math.min(n - 1, Math.max(0, Math.round(frac * (n - 1)))));\n }} style={{\n width: 132, height: 18, display: \"flex\", alignItems: \"center\", cursor: \"pointer\", position: \"relative\",\n }}>\n

\n )}\n\n \n\n \n

\n\n

\n {currentIdx + 1} / {n}\n \n · {hintFlash || \"swipe to browse\"}\n \n

\n )}\n

\n )}\n\n {phase === \"history\" && (\n

\n the last 30 days\n

\n {storageMode === \"session\" && (\n

\n couldn't reach storage — words are kept for this session only\n

\n )}\n

\n {log === null ? (\n

loading…

\n ) : historyEntries.length === 0 ? (\n

\n Nothing kept yet — find a word you both love and tap the ♥ to save it for the day.\n

\n ) : (\n historyEntries.map(([dateKey, entry], idx) => (\n

\n {dateKey === todayKey ? \"today\" : formatDateKey(dateKey)}\n

\n \n

\n {entry.jules}\n + \n {entry.westin}\n

\n ))\n )}\n

\n )}\n

\n\n

\n {phase === \"results\" && (\n \n )}\n {phase !== \"history\" && (\n \n )}\n {phase === \"history\" && (\n \n )}\n view source\n

\n \n );\n}\n","deleted",false,"label",[47,24],"frontend","55e27a7e-43ca-11f1-be01-42b51c65c3df",["D",1777467172855],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","ac1750db-9cb7-4b30-b1f7-7ca96002784b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019dd94b-d844-700d-ae1d-28d3e51028bd","tursoName","55e27a7e43ca11f1be0142b51c65c3df","tursoHostname","55e27a7e43ca11f1be0142b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789495880338],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_106":102},"org",{"_9":10,"_99":100,"_101":102,"_57":58,"_103":104,"_105":44},"branch",{"_37":32,"_11":90,"_22":30,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Westin Lohne","avatar","https://avatars.githubusercontent.com/u/961423?v=4","tier","free","canRestrictVals","profileImageUrl","ctx",{"_83":-5,"_140":141,"_142":143,"_144":145,"_146":44,"_147":44,"_148":44,"_149":34,"_150":-5,"_151":-7,"_152":-7,"_153":64,"_154":44,"_155":44,"_156":-5,"_157":44,"_158":44,"_159":44,"_160":-5},"ENV",{"_111":112,"_113":114,"_115":90,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]