Ayala

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_271":272,"_273":274},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_103":85,"_26":97,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":57,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",12,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","assets/js/picker.js","latestPath","fileId","9c1c9a28-a816-11f1-b2d0-1607ee4eb77e","name","picker.js","fileType","content","// The multi-select grid.\n//\n// Modelled on the iOS Photos selection gesture, using the principles from the\n// apple-design skill: feedback lands on pointer-down (the press state), the\n// selection tracks the finger 1:1 while painting, and the gesture can be\n// reversed or interrupted at any point.\n//\n// Touch needs a short press before painting begins, because the same downward\n// drag is also how you scroll. Once painting starts we block scroll by calling\n// preventDefault on a non-passive touchmove — changing `touch-action` mid\n// gesture would not apply to the gesture already in flight. A mouse has no\n// such conflict, so it paints from the first move.\n\nimport { el, ICON, haptic, capture } from './ui.js';\nimport { fmtBand } from './i18n.js';\n\nconst HOLD_MS = 130; // press before painting begins (touch only)\nconst MOVE_SLOP = 10; // px of movement that still counts as \"held still\"\nconst EDGE = 72; // auto-scroll zone at the top and bottom edges\nconst EDGE_SPEED = 14; // px per frame at the very edge\n\nexport function createPicker({ groups, lang, selected, onChange, showCategory = false }) {\n const sel = selected instanceof Set ? selected : new Set(selected ?? []);\n const cards = new Map(); // id -> element\n // Window-level listeners outlive the grid unless something revokes them, and\n // a new picker is built on every onboarding step render.\n const ac = new AbortController();\n\n const grid = el('div', { class: 'picker' });\n\n const emit = () => onChange?.(sel);\n\n const paint = (id, on) => {\n if (on === sel.has(id)) return false;\n if (on) sel.add(id); else sel.delete(id);\n const node = cards.get(id);\n if (node) {\n node.dataset.on = on ? '1' : '0';\n node.setAttribute('aria-pressed', on ? 'true' : 'false');\n }\n return true;\n };\n\n /* ------------------------------------------------------------- rendering */\n\n for (const g of groups) {\n const gridEl = el('div', { class: 'grid' });\n const head = el('div', { class: 'group__head' },\n el('i', { class: 'dot', style: `--dom: var(--d-${g.domain})` }),\n el('h3', { class: 'group__title' }, g.category),\n el('span', { class: 'group__count' }),\n );\n const allBtn = el('button', { class: 'group__all', type: 'button' });\n head.append(allBtn);\n\n const ids = g.items.map((s) => s.id);\n const refreshHead = () => {\n const n = ids.filter((id) => sel.has(id)).length;\n head.querySelector('.group__count').textContent = `${n}/${ids.length}`;\n allBtn.textContent = n === ids.length ? '—' : '✓';\n allBtn.setAttribute('aria-label', n === ids.length ? 'Clear section' : 'Select section');\n };\n allBtn.addEventListener('click', () => {\n const on = ids.filter((id) => sel.has(id)).length !== ids.length;\n let changed = false;\n for (const id of ids) changed = paint(id, on) || changed;\n if (changed) { refreshHead(); emit(); haptic(); }\n });\n\n for (const [i, s] of g.items.entries()) {\n const card = el('button', {\n type: 'button',\n class: 'card',\n style: `--dom: var(--d-${s.domain}); --i: ${Math.min(i, 12)}`,\n dataset: { id: s.id, on: sel.has(s.id) ? '1' : '0' },\n 'aria-pressed': sel.has(s.id) ? 'true' : 'false',\n },\n showCategory && el('span', { class: 'card__cat' }, s.category[lang] ?? s.category.en),\n el('span', { class: 'card__text' }, s.text[lang] ?? s.text.en),\n el('span', { class: 'card__age' }, fmtBand(s.fromMonths, s.toMonths)),\n el('span', { class: 'card__check', html: ICON.check }),\n );\n cards.set(s.id, card);\n gridEl.append(card);\n }\n\n refreshHead();\n grid.append(el('section', { class: 'group' }, head, gridEl));\n g._refreshHead = refreshHead;\n }\n\n const refreshHeads = () => groups.forEach((g) => g._refreshHead?.());\n\n /* -------------------------------------------------------------- gesture */\n\n let mode = null; // 'on' | 'off' while painting\n let painting = false;\n let pending = null; // { id, x, y, timer, pointerId } before painting starts\n let touched = new Set(); // ids already painted in this gesture\n let autoScroll = 0;\n let rafId = 0;\n\n const cardAt = (x, y) => document.elementFromPoint(x, y)?.closest?.('.card');\n\n const startPaint = (id) => {\n painting = true;\n touched = new Set();\n mode = sel.has(id) ? 'off' : 'on';\n grid.dataset.painting = '1';\n applyAt(id);\n haptic(10);\n };\n\n const applyAt = (id) => {\n if (!id || touched.has(id)) return;\n touched.add(id);\n if (paint(id, mode === 'on')) { refreshHeads(); emit(); haptic(6); }\n };\n\n const stopPaint = () => {\n painting = false;\n mode = null;\n autoScroll = 0;\n delete grid.dataset.painting;\n if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }\n };\n\n const clearPending = () => {\n if (pending?.timer) clearTimeout(pending.timer);\n pending = null;\n };\n\n const tickScroll = () => {\n rafId = 0;\n if (!painting || !autoScroll) return;\n window.scrollBy(0, autoScroll);\n rafId = requestAnimationFrame(tickScroll);\n };\n\n grid.addEventListener('pointerdown', (e) => {\n if (e.button != null && e.button !== 0) return;\n // One gesture at a time. A second finger landing mid-gesture used to\n // overwrite `pending` and orphan the first finger's hold timer, so both\n // cards toggled.\n if (pending || painting) return;\n const card = e.target.closest('.card');\n if (!card || card.classList.contains('card--note')) return;\n const id = card.dataset.id;\n\n if (e.pointerType === 'touch') {\n // Hold briefly, then paint. A tap still toggles on release.\n pending = {\n id, x: e.clientX, y: e.clientY, pointerId: e.pointerId,\n timer: setTimeout(() => { pending = null; startPaint(id); }, HOLD_MS),\n };\n } else {\n e.preventDefault();\n startPaint(id);\n capture(grid, e.pointerId);\n }\n });\n\n grid.addEventListener('pointermove', (e) => {\n if (pending) {\n // Moved before the hold completed — this is a scroll, not a selection.\n if (Math.hypot(e.clientX - pending.x, e.clientY - pending.y) > MOVE_SLOP) clearPending();\n return;\n }\n if (!painting) return;\n applyAt(cardAt(e.clientX, e.clientY)?.dataset.id);\n\n // Ease into an auto-scroll near the edges rather than stopping dead there.\n const top = e.clientY - EDGE;\n const bottom = e.clientY - (window.innerHeight - EDGE);\n autoScroll = top < 0 ? Math.round((top / EDGE) * EDGE_SPEED)\n : bottom > 0 ? Math.round((bottom / EDGE) * EDGE_SPEED) : 0;\n if (autoScroll && !rafId) rafId = requestAnimationFrame(tickScroll);\n });\n\n const end = (e) => {\n if (pending && e?.pointerId !== undefined && e.pointerId !== pending.pointerId) return;\n if (pending) {\n // Released before the hold completed: a plain tap.\n const id = pending.id;\n clearPending();\n if (paint(id, !sel.has(id))) { refreshHeads(); emit(); haptic(); }\n return;\n }\n if (painting) { e?.preventDefault?.(); stopPaint(); }\n };\n\n grid.addEventListener('pointerup', end);\n grid.addEventListener('pointercancel', () => { clearPending(); stopPaint(); });\n window.addEventListener('blur', () => { clearPending(); stopPaint(); }, { signal: ac.signal });\n\n // Non-passive so painting can suppress the page scroll under the finger.\n grid.addEventListener('touchmove', (e) => {\n if (painting) e.preventDefault();\n }, { passive: false });\n\n // The cards are

Diff · v12