\n \n \n",[],[143,184],"4ab01807-0374-4c46-9777-95c1ea83e862","app.tsx","aa654110-9d8b-11f1-b42f-1607ee4eb77e","498116fe-9d8a-11f1-9fcc-1607ee4eb77e",["D",1787382110704],"/** @jsxImportSource react */\nimport React, { useState, useEffect, useCallback, useMemo, useRef } from \"react\";\nimport { Ticket, Users, MapPin, Clock, Plus, X, Check, Info, Radio, Globe, Music2, AlertTriangle, Youtube, Headphones, CalendarPlus, Lock, Send } from \"https://esm.sh/lucide-react@0.383.0?external=react\";\n\n// ---- Seed data: Baybeats 2026, 3–6 Sep, Esplanade – Theatres on the Bay ----\n// Times marked TBC weren't published in the preview programme — edit them once confirmed.\nconst SEED_ACTS = [\n // THU 3 SEP\n { id: \"t1\", day: \"THU\", date: \"3 Sep\", stage: \"LiveWire\", time: \"7:30 PM\", act: \"Cancer Game\", genre: \"Metalcore\", origin: \"Macau\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"t2\", day: \"THU\", date: \"3 Sep\", stage: \"LiveWire\", time: \"9:00 PM\", act: \"HYPER SLASH\", genre: \"Otaku-core, electronic-core, heavy metal and punk\", origin: \"China\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"t3\", day: \"THU\", date: \"3 Sep\", stage: \"LiveWire\", time: \"10:30 PM\", act: \"Bilderbuch\", genre: \"Rock, pop, disco, hip-hop and psychedelia\", origin: \"Austria\", duration: \"Closing set, ~60 min (est.)\", ticket: \"walkin\" },\n { id: \"t4\", day: \"THU\", date: \"3 Sep\", stage: \"Arena\", time: \"7:15 PM\", act: \"Soggy Jeans\", genre: \"Indie-emo\", origin: \"Singapore\", duration: \"~40 min (est.)\", ticket: \"walkin\", interested: [\"Zee\"] },\n { id: \"t5\", day: \"THU\", date: \"3 Sep\", stage: \"Arena\", time: \"8:15 PM\", act: \"Mediocre Haircut Crew\", genre: \"Hip-hop\", origin: \"Singapore\", duration: \"~40 min (est.)\", ticket: \"walkin\" },\n { id: \"t6\", day: \"THU\", date: \"3 Sep\", stage: \"Arena\", time: \"8:30 PM\", act: \"enec.e\", genre: \"Shoegaze, indie folk, dream pop\", origin: \"Singapore\", duration: \"~40 min (est.)\", ticket: \"walkin\" },\n { id: \"t7\", day: \"THU\", date: \"3 Sep\", stage: \"Arena\", time: \"10:00 PM\", act: \"Soft Pine\", genre: \"Psychedelic rock and indie pop\", origin: \"Thailand, Bangkok\", duration: \"Closing set, ~50 min (est.)\", ticket: \"walkin\" },\n { id: \"t8\", day: \"THU\", date: \"3 Sep\", stage: \"Chillout\", time: \"6:45 PM\", act: \"Says It All\", genre: \"Pop-punk (acoustic set)\", origin: \"Singapore\", duration: \"30 min (confirmed)\", ticket: \"walkin\" },\n { id: \"t9\", day: \"THU\", date: \"3 Sep\", stage: \"Annexe\", time: \"8:00 PM\", act: \"MUFF\", genre: \"Lush melodic textures, loud guitar riffs (melancholic)\", origin: \"Singapore\", duration: \"~45 min (est.)\", ticket: \"reg\" },\n { id: \"t10\", day: \"THU\", date: \"3 Sep\", stage: \"Annexe\", time: \"9:15 PM\", act: \"Tramhaus\", genre: \"Hypnotic, adrenaline-fueled post-hardcore\", origin: \"Netherlands\", duration: \"~45 min (est.)\", ticket: \"reg\", ticketQty: { Zee: 1 }, interested: [\"Zee\"] },\n\n // FRI 4 SEP\n { id: \"f1\", day: \"FRI\", date: \"4 Sep\", stage: \"Powerhouse²\", time: \"7:30 PM\", act: \"the cabs\", genre: \"Post-rock, math rock\", origin: \"Japan\", duration: \"~45 min (est.)\", ticket: \"reg\", ticketQty: { Sabb: 2 }, interested: [\"Sabb\"] },\n { id: \"f2\", day: \"FRI\", date: \"4 Sep\", stage: \"Powerhouse²\", time: \"9:15 PM\", act: \"The Observatory\", genre: \"Folk electronica to prog and avant rock\", origin: \"Singapore\", duration: \"~50 min (est.)\", ticket: \"reg\" },\n { id: \"f3\", day: \"FRI\", date: \"4 Sep\", stage: \"Powerhouse²\", time: \"11:00 PM\", act: \"Naedr & the Midheaven String Collective\", genre: \"Raw screamo/emo-violence + strings (commissioned collab)\", origin: \"Singapore\", duration: \"Special commission, ~45 min (est.)\", ticket: \"reg\" },\n { id: \"f4\", day: \"FRI\", date: \"4 Sep\", stage: \"Annexe\", time: \"7:15 PM\", act: \"Pretty Girls Cry\", genre: \"Garage rock, emo and math rock\", origin: \"Singapore\", duration: \"~40 min (est.)\", ticket: \"reg\" },\n { id: \"f5\", day: \"FRI\", date: \"4 Sep\", stage: \"Annexe\", time: \"8:45 PM\", act: \"Yangbans\", genre: \"Rock, jazz, funk, hip-hop, R&B, gospel\", origin: \"South Korea\", duration: \"~45 min (est.)\", ticket: \"reg\" },\n { id: \"f6\", day: \"FRI\", date: \"4 Sep\", stage: \"Annexe\", time: \"10:30 PM\", act: \"TOOLS OF THE TRADE\", genre: \"Grindcore\", origin: \"Malaysia, KL\", duration: \"Closing set, ~40 min (est.)\", ticket: \"reg\" },\n { id: \"f7\", day: \"FRI\", date: \"4 Sep\", stage: \"LiveWire\", time: \"7:00 PM\", act: \"FUSE\", genre: \"Hardcore punk\", origin: \"Singapore\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"f8\", day: \"FRI\", date: \"4 Sep\", stage: \"LiveWire\", time: \"8:45 PM\", act: \"Perunggu\", genre: \"Alternative rock\", origin: \"Indonesia\", duration: \"~45 min (est.)\", ticket: \"walkin\", interested: [\"Zee\"] },\n { id: \"f9\", day: \"FRI\", date: \"4 Sep\", stage: \"LiveWire\", time: \"10:30 PM\", act: \"Coaltar of the Deepers\", genre: \"Shoegaze, rock, metal, techno\", origin: \"Japan\", duration: \"Closing set, ~60 min (est.)\", ticket: \"walkin\" },\n { id: \"f10\", day: \"FRI\", date: \"4 Sep\", stage: \"Chillout\", time: \"6:00 PM\", act: \"Kin Leonn\", genre: \"Ambient\", origin: \"Singapore\", duration: \"Ambient set, ~40 min (est.)\", ticket: \"walkin\" },\n { id: \"f11\", day: \"FRI\", date: \"4 Sep\", stage: \"Chillout\", time: \"8:00 PM\", act: \"HOA\", genre: \"\\u201860s British pop and rock\", origin: \"South Korea\", duration: \"~30 min (est.)\", ticket: \"walkin\" },\n\n // SAT 5 SEP\n { id: \"s1\", day: \"SAT\", date: \"5 Sep\", stage: \"Powerhouse²\", time: \"6:45 PM\", act: \"Kin Leonn x pureblue Ensemble\", genre: \"Ambient, electronica and contemporary composition\", origin: \"Singapore\", duration: \"~45 min (est.)\", ticket: \"reg\", ticketQty: { Sabb: 2 }, interested: [\"Sabb\"] },\n { id: \"s2\", day: \"SAT\", date: \"5 Sep\", stage: \"Powerhouse²\", time: \"8:30 PM\", act: \"DAVID BORING\", genre: \"Post-punk, noise rock, no wave, industrial\", origin: \"Hong Kong\", duration: \"~45 min (est.)\", ticket: \"reg\" },\n { id: \"s3\", day: \"SAT\", date: \"5 Sep\", stage: \"Powerhouse²\", time: \"10:15 PM\", act: \"Disco Hue\", genre: \"Synth-pop\", origin: \"Singapore\", duration: \"Closing set, ~50 min (est.)\", ticket: \"reg\" },\n { id: \"s4\", day: \"SAT\", date: \"5 Sep\", stage: \"LiveWire\", time: \"6:45 PM\", act: \"Sweetass\", genre: \"Noise pop, indie rock\", origin: \"Malaysia, KL\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"s5\", day: \"SAT\", date: \"5 Sep\", stage: \"LiveWire\", time: \"8:30 PM\", act: \"Typecast\", genre: \"Rock\", origin: \"Philippines\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"s6\", day: \"SAT\", date: \"5 Sep\", stage: \"LiveWire\", time: \"10:15 PM\", act: \"THE SIGIT\", genre: \"Hard rock, garage rock, psychedelic rock and blues rock\", origin: \"Indonesia\", duration: \"Closing set, ~60 min (est.)\", ticket: \"walkin\", interested: [\"Zee\"] },\n { id: \"s7\", day: \"SAT\", date: \"5 Sep\", stage: \"Annexe\", time: \"5:45 PM\", act: \"Jhen Yue Tang\", genre: \"Taiwanese folk, Beiguan style, rap rhythms with rock & electronic\", origin: \"Taiwan\", duration: \"Ritual performance, ~45 min (est.)\", ticket: \"reg\" },\n { id: \"s8\", day: \"SAT\", date: \"5 Sep\", stage: \"Annexe\", time: \"7:30 PM\", act: \"T-REX\", genre: \"Math rock, jazz fusion, progressive rock and metal\", origin: \"Singapore\", duration: \"~45 min (est.)\", ticket: \"reg\" },\n { id: \"s9\", day: \"SAT\", date: \"5 Sep\", stage: \"Annexe\", time: \"9:15 PM\", act: \"Rắn Cạp Đuôi Collective\", genre: \"Sound art and experimental music\", origin: \"Vietnam\", duration: \"~60 min (confirmed \\u2013 \\\"an hour\\\")\", ticket: \"reg\" },\n { id: \"s10\", day: \"SAT\", date: \"5 Sep\", stage: \"Arena\", time: \"7:15 PM\", act: \"Mediocre Haircut Crew\", genre: \"Hip-hop\", origin: \"Singapore\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"s11\", day: \"SAT\", date: \"5 Sep\", stage: \"Arena\", time: \"9:00 PM\", act: \"Bugs of Phonon\", genre: \"Electronic-infused post-rock\", origin: \"Taiwan\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"s12\", day: \"SAT\", date: \"5 Sep\", stage: \"Arena\", time: \"10:45 PM\", act: \"HOA\", genre: \"Indie rock and \\u201860s pop-rock\", origin: \"South Korea\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"s13\", day: \"SAT\", date: \"5 Sep\", stage: \"Chillout\", time: \"6:00 PM\", act: \"VYLT\", genre: \"Darksynth, horrorsynth and synth metal\", origin: \"Singapore\", duration: \"~30 min (est.)\", ticket: \"walkin\" },\n { id: \"s14\", day: \"SAT\", date: \"5 Sep\", stage: \"Chillout\", time: \"8:00 PM\", act: \"Srirajah Rockers\", genre: \"Roots reggae\", origin: \"Thailand, Bangkok\", duration: \"~30 min (est.)\", ticket: \"walkin\", interested: [\"Zee\"] },\n { id: \"s15\", day: \"SAT\", date: \"5 Sep\", stage: \"Black Room\", time: \"3:00\\u201310:00 PM\", act: \"G.A.S. Attack: Durian Edition (gear market)\", genre: \"Gear market, not a live set\", origin: \"\\u2014\", duration: \"Runs all afternoon/evening\", ticket: \"walkin\" },\n\n // SUN 6 SEP\n { id: \"u1\", day: \"SUN\", date: \"6 Sep\", stage: \"Powerhouse²\", time: \"7:30 PM\", act: \"Subsonic Eye\", genre: \"Indie rock\", origin: \"Singapore\", duration: \"~45 min (est.)\", ticket: \"reg\", ticketQty: { Zee: 2, Sabb: 1 }, interested: [\"Rayyz\"] },\n { id: \"u2\", day: \"SUN\", date: \"6 Sep\", stage: \"Powerhouse²\", time: \"9:15 PM\", act: \"Boris\", genre: \"Sludge, noise, shoegaze, psychedelia\", origin: \"Japan\", duration: \"Closing set, ~60 min (est.)\", ticket: \"reg\", ticketQty: { Sabb: 3 }, interested: [\"Zee\", \"Rayyz\"] },\n { id: \"u3\", day: \"SUN\", date: \"6 Sep\", stage: \"LiveWire\", time: \"6:45 PM\", act: \"Bhayanak Maut\", genre: \"Metal\", origin: \"India\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"u4\", day: \"SUN\", date: \"6 Sep\", stage: \"LiveWire\", time: \"7:00 PM\", act: \"Bulgogi Disco\", genre: \"Indie funk\", origin: \"South Korea\", duration: \"~45 min (est.)\", ticket: \"reg\", ticketQty: { Zee: 1, Rayyz: 2 }, interested: [\"Sabb\"] },\n { id: \"u5\", day: \"SUN\", date: \"6 Sep\", stage: \"LiveWire\", time: \"TBC\", act: \"Dabda\", genre: \"Math rock\", origin: \"South Korea\", duration: \"~40 min (est.)\", ticket: \"walkin\" },\n { id: \"u6\", day: \"SUN\", date: \"6 Sep\", stage: \"LiveWire\", time: \"10:15 PM\", act: \"Tiramisu feat. The Hype Goblins\", genre: \"Art rock\", origin: \"Singapore\", duration: \"Closing set, ~60 min (est.)\", ticket: \"walkin\" },\n { id: \"u7\", day: \"SUN\", date: \"6 Sep\", stage: \"Arena\", time: \"6:45 PM\", act: \"Hidemen\", genre: \"Hip-hop\", origin: \"Singapore\", duration: \"~30 min (est.)\", ticket: \"walkin\" },\n { id: \"u8\", day: \"SUN\", date: \"6 Sep\", stage: \"Arena\", time: \"8:15 PM\", act: \"Stopgap\", genre: \"Indie-rock\", origin: \"Singapore\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"u9\", day: \"SUN\", date: \"6 Sep\", stage: \"Arena\", time: \"9:00 PM\", act: \"Solitude Is Bliss\", genre: \"Psychedelic, shoegaze-tinged alt-rock\", origin: \"Thailand\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"u10\", day: \"SUN\", date: \"6 Sep\", stage: \"Arena\", time: \"10:00 PM\", act: \"LEPYUTIN\", genre: \"Jazz, rock, alternative and psychedelic\", origin: \"Thailand, Bangkok\", duration: \"~45 min (est.)\", ticket: \"walkin\" },\n { id: \"u11\", day: \"SUN\", date: \"6 Sep\", stage: \"Arena\", time: \"10:45 PM\", act: \"Treaks\", genre: \"Techno, noise, post-punk\", origin: \"France\", duration: \"Closing set, ~45 min (est.)\", ticket: \"walkin\" },\n { id: \"u12\", day: \"SUN\", date: \"6 Sep\", stage: \"Chillout\", time: \"6:00 PM\", act: \"T.HIRST (slot 1)\", genre: \"Emo, punk, bass music/electronic\", origin: \"Singapore\", duration: \"30 min (confirmed)\", ticket: \"walkin\" },\n { id: \"u13\", day: \"SUN\", date: \"6 Sep\", stage: \"Chillout\", time: \"8:00 PM\", act: \"T.HIRST (slot 2)\", genre: \"Emo, punk, bass music/electronic\", origin: \"Singapore\", duration: \"30 min (confirmed)\", ticket: \"walkin\" },\n { id: \"u14\", day: \"SUN\", date: \"6 Sep\", stage: \"Black Room\", time: \"3:00\\u201310:00 PM\", act: \"G.A.S. Attack: Durian Edition (gear market)\", genre: \"Gear market, not a live set\", origin: \"\\u2014\", duration: \"Runs all afternoon/evening\", ticket: \"walkin\" },\n];\n\nconst DAYS = [\n { key: \"THU\", label: \"Thu\", date: \"3 Sep\" },\n { key: \"FRI\", label: \"Fri\", date: \"4 Sep\" },\n { key: \"SAT\", label: \"Sat\", date: \"5 Sep\" },\n { key: \"SUN\", label: \"Sun\", date: \"6 Sep\" },\n];\n\nconst TICKET_META = {\n walkin: { label: \"Free \\u00b7 walk in\", color: \"#3fe0c9\" },\n reg: { label: \"Free \\u00b7 registration\", color: \"#ffb84d\" },\n ticketed: { label: \"Ticketed \\u00b7 SISTIC\", color: \"#ff5d6c\" },\n unsure: { label: \"Not sure yet\", color: \"#9691a3\" },\n};\n\nconst STAGE_COLORS = {\n \"LiveWire\": \"#ff5d6c\",\n \"Arena\": \"#ffb84d\",\n \"Chillout\": \"#3fe0c9\",\n \"Powerhouse²\": \"#c792ff\",\n \"Annexe\": \"#d4ff3f\",\n \"Black Room\": \"#9691a3\",\n};\n\nconst DEFAULT_CREW = [\"Zee\", \"Sabb\", \"Rayyz\"];\n// Simple client-side gate on the Tickets tab — good enough to keep it from casual eyes, but\n// not real security (anyone reading this file's source can see the password too).\nconst TICKETS_PASSWORD = \"Music Operandi\";\n\n// This deployment's own backend (see index.ts) persists state in a Val Town SQLite table,\n// so every friend who opens the hosted link reads/writes the same shared record — no\n// per-browser storage involved.\nasync function storageGet() {\n try {\n const res = await fetch(\"/api/state\");\n if (!res.ok) return null;\n const body = await res.json();\n return body && body.data ? { value: JSON.stringify(body.data) } : null;\n } catch (e) {\n return null;\n }\n}\n\nasync function storageSet(payload) {\n try {\n const res = await fetch(\"/api/state\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: payload,\n });\n return res.ok ? { ok: true } : null;\n } catch (e) {\n return null;\n }\n}\n\n// Turns a seed \"date\" like \"3 Sep\" plus a minutes-from-midnight offset into a JS Date\n// (year is fixed to the 2026 festival run). Handles offsets past 1440 (i.e. past midnight).\nfunction actDateTime(dateStr, minutesOfDay) {\n const monthMap = { Jan: 0, Feb: 1, Mar: 2, Apr: 3, May: 4, Jun: 5, Jul: 6, Aug: 7, Sep: 8, Oct: 9, Nov: 10, Dec: 11 };\n const [dayStr, monStr] = (dateStr || \"3 Sep\").split(\" \");\n const day = parseInt(dayStr, 10) + Math.floor(minutesOfDay / 1440);\n const h = Math.floor(minutesOfDay / 60) % 24;\n const m = minutesOfDay % 60;\n return new Date(2026, monthMap[monStr] ?? 8, day, h, m, 0);\n}\n\nfunction pad2(n) {\n return String(n).padStart(2, \"0\");\n}\n\n// Local (floating, Singapore) datetime formatted for both Google Calendar's `dates` param\n// and an .ics VEVENT: YYYYMMDDTHHMMSS\nfunction toCalString(d) {\n return `${d.getFullYear()}${pad2(d.getMonth() + 1)}${pad2(d.getDate())}T${pad2(d.getHours())}${pad2(d.getMinutes())}00`;\n}\n\nfunction buildGoogleCalUrl(act) {\n const interval = getInterval(act);\n if (!interval) return null;\n const start = actDateTime(act.date, interval.start);\n const end = actDateTime(act.date, interval.end);\n const params = new URLSearchParams({\n action: \"TEMPLATE\",\n text: `${act.act} \\u2013 Baybeats 2026`,\n dates: `${toCalString(start)}/${toCalString(end)}`,\n details: [act.genre, act.origin].filter(Boolean).join(\" \\u00b7 \"),\n location: `${act.stage}, Esplanade \\u2013 Theatres on the Bay, Singapore`,\n ctz: \"Asia/Singapore\",\n });\n return `https://calendar.google.com/calendar/render?${params.toString()}`;\n}\n\nfunction buildICS(act) {\n const interval = getInterval(act);\n if (!interval) return null;\n const start = actDateTime(act.date, interval.start);\n const end = actDateTime(act.date, interval.end);\n const now = new Date();\n const desc = [act.genre, act.origin].filter(Boolean).join(\" \\\\, \");\n const lines = [\n \"BEGIN:VCALENDAR\",\n \"VERSION:2.0\",\n \"PRODID:-//Baybeats 2026 Tracker//EN\",\n \"BEGIN:VEVENT\",\n `UID:${act.id}-baybeats2026@tracker`,\n `DTSTAMP:${toCalString(now)}`,\n `DTSTART:${toCalString(start)}`,\n `DTEND:${toCalString(end)}`,\n `SUMMARY:${act.act} \\u2013 Baybeats 2026`,\n `LOCATION:${act.stage}\\\\, Esplanade \\u2013 Theatres on the Bay\\\\, Singapore`,\n `DESCRIPTION:${desc}`,\n \"END:VEVENT\",\n \"END:VCALENDAR\",\n ];\n return lines.join(\"\\r\\n\");\n}\n\nfunction downloadICS(act) {\n const ics = buildICS(act);\n if (!ics) return;\n const blob = new Blob([ics], { type: \"text/calendar;charset=utf-8\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `${act.act.replace(/[^\\w\\- ]/g, \"\").trim() || \"baybeats-act\"}.ics`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n setTimeout(() => URL.revokeObjectURL(url), 2000);\n}\n\nfunction uid() {\n return Math.random().toString(36).slice(2, 9);\n}\n\n// Strips trailing parentheticals like \"(slot 1)\" or \"(gear market)\" so search queries\n// target the artist name itself rather than festival-specific labelling.\nfunction searchableName(act) {\n return act.replace(/\\s*\$[^)]*\$\\s*$/, \"\").trim();\n}\n\n// Parses strings like \"7:30 PM\" or a range \"3:00\\u201310:00 PM\" (uses start time).\n// Unparseable / \"TBC\" values sort to the end of the day.\nfunction parseTimeToMinutes(raw) {\n if (!raw) return Infinity;\n const first = raw.split(/[\\u2013\\u2014-]/)[0].trim(); // take start of a range\n const match = first.match(/(\\d{1,2}):(\\d{2})\\s*(AM|PM)?/i);\n if (!match) return Infinity;\n let [, h, m, ampm] = match;\n h = parseInt(h, 10);\n m = parseInt(m, 10);\n ampm = (ampm || \"PM\").toUpperCase(); // festival sets are virtually all PM\n if (ampm === \"PM\" && h !== 12) h += 12;\n if (ampm === \"AM\" && h === 12) h = 0;\n return h * 60 + m;\n}\n\n// Pulls the first number out of a duration string like \"~45 min (est.)\" or \"30 min (confirmed)\".\nfunction parseDurationMinutes(raw) {\n if (!raw) return null;\n const match = raw.match(/(\\d+)\\s*min/i);\n return match ? parseInt(match[1], 10) : null;\n}\n\n// Returns {start, end} in minutes-from-midnight for an act, or null if it can't be determined\n// (e.g. time is still TBC). Handles explicit ranges like \"3:00\\u201310:00 PM\" (the gear market)\n// as well as a single start time + estimated/confirmed duration.\nfunction getInterval(act) {\n const parts = (act.time || \"\").split(/[\\u2013\\u2014-]/).map((s) => s.trim());\n const start = parseTimeToMinutes(act.time);\n if (start === Infinity) return null;\n if (parts.length === 2 && /\\d/.test(parts[1])) {\n const end = parseTimeToMinutes(parts[1]);\n if (end !== Infinity) return { start, end: end > start ? end : end + 24 * 60 };\n }\n const dur = parseDurationMinutes(act.duration);\n if (dur == null) return null;\n return { start, end: start + dur };\n}\n\nexport default function BaybeatsTracker() {\n const [crew, setCrew] = useState(DEFAULT_CREW);\n const [acts, setActs] = useState(SEED_ACTS);\n const [activeDay, setActiveDay] = useState(\"THU\");\n const [loaded, setLoaded] = useState(false);\n const [saveState, setSaveState] = useState(\"idle\"); // idle | saving | saved | error\n const [showInfo, setShowInfo] = useState(false);\n const [showSummary, setShowSummary] = useState(true);\n const [stageFilter, setStageFilter] = useState([]); // empty = show all stages\n const [ticketsUnlocked, setTicketsUnlocked] = useState(false);\n const [ticketsPasswordInput, setTicketsPasswordInput] = useState(\"\");\n const [ticketsPasswordError, setTicketsPasswordError] = useState(false);\n const lastSyncedRef = useRef(\"\"); // last payload string we know the server has\n const dirtyRef = useRef(false); // true between a local edit and its successful save\n\n // migrate any pre-existing ticketHolders arrays (boolean) into ticketQty maps (counts)\n const migrateActs = (rawActs) =>\n rawActs.map((a) => {\n if (a.ticketQty) return a;\n const qty = {};\n (a.ticketHolders || []).forEach((n) => {\n qty[n] = 1;\n });\n const { ticketHolders, ...rest } = a;\n return { ...rest, ticketQty: qty };\n });\n\n // ---- load from the shared backend on mount ----\n useEffect(() => {\n (async () => {\n try {\n const res = await storageGet();\n if (res && res.value) {\n const parsed = JSON.parse(res.value);\n if (parsed.crew) setCrew(parsed.crew);\n if (parsed.acts) setActs(migrateActs(parsed.acts));\n lastSyncedRef.current = res.value;\n }\n } catch (e) {\n // no existing data yet — seed defaults will be used\n } finally {\n setLoaded(true);\n }\n })();\n }, []);\n\n // ---- persist to the shared backend (debounced) ----\n const persist = useCallback((nextCrew, nextActs) => {\n setSaveState(\"saving\");\n const payload = JSON.stringify({ crew: nextCrew, acts: nextActs });\n storageSet(payload)\n .then((r) => {\n if (r) {\n lastSyncedRef.current = payload;\n setSaveState(\"saved\");\n } else {\n setSaveState(\"error\");\n }\n })\n .catch(() => setSaveState(\"error\"))\n .finally(() => {\n dirtyRef.current = false;\n });\n }, []);\n\n useEffect(() => {\n if (!loaded) return;\n dirtyRef.current = true;\n const t = setTimeout(() => persist(crew, acts), 400);\n return () => clearTimeout(t);\n }, [crew, acts, loaded, persist]);\n\n // ---- poll for other crew members' changes every few seconds ----\n useEffect(() => {\n if (!loaded) return;\n const interval = setInterval(async () => {\n if (dirtyRef.current) return; // don't clobber an edit that hasn't saved yet\n const res = await storageGet();\n if (res && res.value && res.value !== lastSyncedRef.current) {\n try {\n const parsed = JSON.parse(res.value);\n if (parsed.crew) setCrew(parsed.crew);\n if (parsed.acts) setActs(migrateActs(parsed.acts));\n lastSyncedRef.current = res.value;\n } catch (e) {\n // ignore malformed payload, try again next tick\n }\n }\n }, 6000);\n return () => clearInterval(interval);\n }, [loaded]);\n\n\n const updateAct = (id, patch) => {\n setActs((prev) => prev.map((a) => (a.id === id ? { ...a, ...patch } : a)));\n };\n\n const toggleInterested = (id, name) => {\n setActs((prev) =>\n prev.map((a) => {\n if (a.id !== id) return a;\n const list = a.interested || [];\n const has = list.includes(name);\n return { ...a, interested: has ? list.filter((n) => n !== name) : [...list, name] };\n })\n );\n };\n\n // Bumps how many tickets `name` booked for act `id` by `delta`, floored at 0.\n const bumpTicketQty = (id, name, delta) => {\n setActs((prev) =>\n prev.map((a) => {\n if (a.id !== id) return a;\n const qty = { ...(a.ticketQty || {}) };\n const next = Math.max(0, (qty[name] || 0) + delta);\n if (next === 0) delete qty[name];\n else qty[name] = next;\n return { ...a, ticketQty: qty };\n })\n );\n };\n\n // Saves the e-ticket URL that `name` pasted in for act `id`.\n const setTicketLink = (id, name, url) => {\n setActs((prev) =>\n prev.map((a) => {\n if (a.id !== id) return a;\n const links = { ...(a.ticketLinks || {}) };\n if (url) links[name] = url;\n else delete links[name];\n return { ...a, ticketLinks: links };\n })\n );\n };\n\n const addAct = () => {\n const day = DAYS.find((d) => d.key === activeDay);\n if (!day) return; // no-op on the E-Tickets tab, which isn't a real festival day\n setActs((prev) => [\n ...prev,\n {\n id: uid(),\n day: activeDay,\n date: day.date,\n stage: \"LiveWire\",\n time: \"TBC\",\n act: \"New act\",\n genre: \"\",\n origin: \"\",\n duration: \"~45 min (est.)\",\n ticket: \"unsure\",\n ticketQty: {},\n ticketLinks: {},\n interested: [],\n },\n ]);\n };\n\n const removeAct = (id) => setActs((prev) => prev.filter((a) => a.id !== id));\n\n\n const renameCrew = (idx, value) => {\n const old = crew[idx];\n const next = [...crew];\n next[idx] = value;\n setCrew(next);\n // keep name references in act lists / ticket counts / ticket links in sync\n setActs((prev) =>\n prev.map((a) => {\n const renamedQty = { ...(a.ticketQty || {}) };\n if (old in renamedQty) {\n renamedQty[value] = renamedQty[old];\n delete renamedQty[old];\n }\n const renamedLinks = { ...(a.ticketLinks || {}) };\n if (old in renamedLinks) {\n renamedLinks[value] = renamedLinks[old];\n delete renamedLinks[old];\n }\n return {\n ...a,\n ticketQty: renamedQty,\n ticketLinks: renamedLinks,\n interested: (a.interested || []).map((n) => (n === old ? value : n)),\n };\n })\n );\n };\n\n const addCrewMember = () => {\n setCrew((prev) => [...prev, `Friend ${prev.length + 1}`]);\n };\n\n const removeCrewMember = (idx) => {\n const name = crew[idx];\n if (crew.length <= 1) return; // always keep at least one person\n setCrew((prev) => prev.filter((_, i) => i !== idx));\n // scrub that person's tickets/interest/links so they don't linger under a removed name\n setActs((prev) =>\n prev.map((a) => {\n const qty = { ...(a.ticketQty || {}) };\n delete qty[name];\n const links = { ...(a.ticketLinks || {}) };\n delete links[name];\n return {\n ...a,\n ticketQty: qty,\n ticketLinks: links,\n interested: (a.interested || []).filter((n) => n !== name),\n };\n })\n );\n };\n\n const allDayActs = useMemo(\n () =>\n acts\n .filter((a) => a.day === activeDay)\n .sort((a, b) => {\n const timeDiff = parseTimeToMinutes(a.time) - parseTimeToMinutes(b.time);\n if (timeDiff !== 0) return timeDiff;\n return (a.stage || \"\").localeCompare(b.stage || \"\");\n }),\n [acts, activeDay]\n );\n\n // Venue/stage filter applied on top of the day's acts — empty selection shows everything.\n const dayActs = useMemo(\n () => (stageFilter.length === 0 ? allDayActs : allDayActs.filter((a) => stageFilter.includes(a.stage))),\n [allDayActs, stageFilter]\n );\n\n const toggleStageFilter = (stage) => {\n setStageFilter((prev) => (prev.includes(stage) ? prev.filter((s) => s !== stage) : [...prev, stage]));\n };\n\n // Maps act id -> array of other acts (on the same day) whose sets overlap in time,\n // based on start time + duration. Acts with an unparseable/TBC time or duration are skipped.\n const overlapMap = useMemo(() => {\n const withIntervals = allDayActs\n .map((a) => ({ act: a, interval: getInterval(a) }))\n .filter((x) => x.interval);\n const map = {};\n for (let i = 0; i < withIntervals.length; i++) {\n for (let j = i + 1; j < withIntervals.length; j++) {\n const A = withIntervals[i];\n const B = withIntervals[j];\n if (A.act.stage === B.act.stage) continue; // same-stage acts are already sequential, not a clash\n const overlaps = A.interval.start < B.interval.end && B.interval.start < A.interval.end;\n if (overlaps) {\n (map[A.act.id] = map[A.act.id] || []).push(B.act);\n (map[B.act.id] = map[B.act.id] || []).push(A.act);\n }\n }\n }\n return map;\n }, [allDayActs]);\n\n const dayIndexMap = useMemo(() => Object.fromEntries(DAYS.map((d, i) => [d.key, i])), []);\n const chronoKey = useCallback(\n (a) => {\n const t = parseTimeToMinutes(a.time);\n return (dayIndexMap[a.day] ?? 9) * 10000 + (t === Infinity ? 9999 : t);\n },\n [dayIndexMap]\n );\n\n // Who (from the crew) is actually attending each act — either holding a ticket for it or\n // marked as wanting to join. Used to detect when 2+ of you overlap on the same show.\n const attendeesByAct = useMemo(() => {\n const map = {};\n acts.forEach((a) => {\n map[a.id] = crew.filter((name) => (a.ticketQty && a.ticketQty[name] > 0) || (a.interested || []).includes(name));\n });\n return map;\n }, [acts, crew]);\n\n // Acts where 2 or more of the crew overlap — shown as a highlighted \"together\" group,\n // ahead of everyone's separate/solo picks.\n const togetherActs = useMemo(\n () =>\n acts\n .filter((a) => (attendeesByAct[a.id] || []).length >= 2)\n .sort((a, b) => chronoKey(a) - chronoKey(b)),\n [acts, attendeesByAct, chronoKey]\n );\n\n // Cross-day overview per crew member of their SOLO picks only — acts where they're the only\n // one from the crew attending. Overlapping (together) acts are broken out separately above.\n const summaryByPerson = useMemo(() => {\n const result = {};\n crew.forEach((name) => {\n result[name] = acts\n .filter((a) => {\n const has = (a.ticketQty && a.ticketQty[name] > 0) || (a.interested || []).includes(name);\n return has && (attendeesByAct[a.id] || []).length < 2;\n })\n .map((a) => ({ ...a, qty: (a.ticketQty && a.ticketQty[name]) || 0, joining: (a.interested || []).includes(name) }))\n .sort((a, b) => chronoKey(a) - chronoKey(b));\n });\n return result;\n }, [acts, crew, attendeesByAct, chronoKey]);\n\n // Plain-text version of the Together + solo breakdown, formatted for sharing in a chat app.\n const buildSummaryText = () => {\n const dayLabel = (key) => DAYS.find((d) => d.key === key)?.label || key;\n const lines = [\"🎪 BAYBEATS 2026 — Our Lineup\", \"\"];\n\n if (togetherActs.length > 0) {\n lines.push(\"TOGETHER\");\n togetherActs.forEach((a) => {\n const attendees = attendeesByAct[a.id] || [];\n const tags = attendees\n .map((name) => {\n const qty = (a.ticketQty && a.ticketQty[name]) || 0;\n return qty > 0 ? `${name} ×${qty} 🎟` : `${name} 📶`;\n })\n .join(\" · \");\n lines.push(`• ${a.act} — ${dayLabel(a.day)} ${a.date}, ${a.time}, ${a.stage}`);\n lines.push(` ${tags}`);\n });\n lines.push(\"\");\n }\n\n crew.forEach((name) => {\n const rows = summaryByPerson[name] || [];\n lines.push(`${name.toUpperCase()} — solo`);\n if (rows.length === 0) {\n lines.push(\" (no solo shows tracked)\");\n } else {\n rows.forEach((r) => {\n const tag = r.qty > 0 ? `×${r.qty} 🎟` : r.joining ? \"joining 📶\" : \"\";\n lines.push(`• ${r.act} — ${dayLabel(r.day)} ${r.date}, ${r.time}, ${r.stage}${tag ? ` (${tag})` : \"\"}`);\n });\n }\n lines.push(\"\");\n });\n\n return lines.join(\"\\n\").trim();\n };\n\n const [shareState, setShareState] = useState(\"idle\"); // idle | copied\n\n const copySummary = async () => {\n const text = buildSummaryText();\n try {\n await navigator.clipboard.writeText(text);\n setShareState(\"copied\");\n setTimeout(() => setShareState(\"idle\"), 2000);\n } catch (e) {\n const ta = document.createElement(\"textarea\");\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n try {\n document.execCommand(\"copy\");\n setShareState(\"copied\");\n setTimeout(() => setShareState(\"idle\"), 2000);\n } catch (e2) {}\n document.body.removeChild(ta);\n }\n };\n\n const shareToTelegram = () => {\n const text = buildSummaryText();\n const url = `https://t.me/share/url?url=&text=${encodeURIComponent(text)}`;\n window.open(url, \"_blank\", \"noopener,noreferrer\");\n };\n\n const dayCount = (key) => acts.filter((a) => a.day === key).length;\n const ticketTabCount = acts.filter(\n (a) => (a.ticket === \"reg\" || a.ticket === \"ticketed\") && Object.values(a.ticketQty || {}).some((q) => q > 0)\n ).length;\n\n return (\n \n \n\n {/* Header */}\n

\n 25TH EDITION · ESPLANADE\n

\n BAYBEATS 2026\n

\n 3–6 SEP · THEATRES ON THE BAY\n

\n setShowInfo((v) => !v)}\n className=\"shrink-0 rounded-full p-2\"\n style={{ background: \"var(--panel)\", border: \"1px solid var(--line)\" }}\n aria-label=\"About this tracker\"\n >\n \n \n

\n\n {showInfo && (\n \n This tracker is shared — anyone with the link sees the same live data. Tap a crew name under\n an act to mark who's holding a ticket or who wants to join. Times marked TBC weren't in the\n preview lineup announcement — edit them once the full esplanade.com/baybeats programme confirms.\n Outdoor stages (LiveWire, Arena, Chillout) are free walk-in; Annexe & Powerhouse² are free\n but need registration, and a few may be ticketed via SISTIC — check the ticket tag per act.\n Acts outlined in orange, with a \"Clashes with…\" note, overlap in time with a set on another\n stage based on start time + duration — useful for spotting which acts you'll have to pick between.\n Each act also has \"Preview on YouTube / Spotify\" — these open a search for that band on each\n platform so you can scout their past songs before deciding who to catch live.\n \"Google Calendar\" opens a pre-filled event to save straight to Gmail's calendar; \"Apple Calendar\"\n downloads a .ics file you can open on iPhone/Mac to add it there. Both use each act's time,\n duration and stage automatically — acts still marked TBC need a confirmed time first.\n Shows where 2+ of you overlap are pulled into a highlighted \"Together\" box above everyone's\n separate picks. There's also a 🎫 Tickets tab for pasting each person's e-ticket link per\n act — it's password-protected (ask whoever set it up for the password). Use \"add friend\"\n next to the crew names if more people are joining.\n

\n )}\n\n {/* crew names */}\n

\n \n {crew.map((name, idx) => (\n

\n renameCrew(idx, e.target.value)}\n className=\"bb-mono text-xs px-2 py-1 rounded outline-none\"\n style={{ background: \"var(--panel)\", border: \"1px solid var(--line)\", color: \"var(--text)\", width: \"80px\", minWidth: \"60px\" }}\n />\n {crew.length > 1 && (\n removeCrewMember(idx)}\n className=\"opacity-50 hover:opacity-100\"\n aria-label={`Remove ${name}`}\n >\n \n \n )}\n

\n ))}\n \n add friend\n \n \n {saveState === \"saving\" ? \"saving…\" : saveState === \"saved\" ? \"synced\" : saveState === \"error\" ? \"save failed\" : \"\"}\n \n

\n\n {/* per-person overview: every show they're joining and/or have tickets for, across all 4 days */}\n

\n setShowSummary((v) => !v)}\n className=\"flex items-center gap-1.5 bb-mono text-[11px]\"\n style={{ color: \"var(--lime)\" }}\n >\n {showSummary ? \"−\" : \"+\"} YOUR LINEUP SO FAR\n \n

\n \n {shareState === \"copied\" ? \"Copied ✓\" : \"Copy summary\"}\n \n \n Telegram\n \n

\n {showSummary && (\n

\n {togetherActs.length > 0 && (\n

\n 🎪 TOGETHER — shows where 2+ of you overlap\n

\n {togetherActs.map((a) => {\n const attendees = attendeesByAct[a.id] || [];\n return (\n \n

\n \n {a.act}\n \n \n {attendees.length === crew.length ? \"everyone\" : `${attendees.length}`}\n \n

\n {a.date}\n ·\n {a.time}\n ·\n {a.stage}\n

\n {attendees.map((name) => {\n const qty = (a.ticketQty && a.ticketQty[name]) || 0;\n return (\n \n {name}\n {qty > 0 ? ` \\u00d7${qty}` : \" \\ud83d\\udcf6\"}\n \n );\n })}\n

\n );\n })}\n

\n )}\n\n

\n {crew.map((name) => {\n const rows = summaryByPerson[name] || [];\n return (\n

\n \n {name}\n \n \n {rows.length} solo show{rows.length === 1 ? \"\" : \"s\"}\n \n

\n {rows.length === 0 ? (\n

\n No solo shows tracked\n

\n ) : (\n

\n {rows.map((r) => (\n

{r.act}

\n {r.date}\n ·\n {r.time}\n ·\n {r.stage}\n {r.qty > 0 && (\n \n · x{r.qty}\n \n )}\n {r.joining && (\n \n · joining\n \n )}\n

\n ))}\n

\n )}\n

\n );\n })}\n

\n )}\n \n \n\n {/* Day tabs */}\n

\n {DAYS.map((d) => {\n const active = d.key === activeDay;\n return (\n setActiveDay(d.key)}\n className=\"bb-display px-4 py-2 rounded-t-lg shrink-0\"\n style={{\n background: active ? \"var(--panel)\" : \"transparent\",\n color: active ? \"var(--lime)\" : \"var(--muted)\",\n border: active ? \"1px solid var(--line)\" : \"1px solid transparent\",\n borderBottom: active ? \"1px solid var(--panel)\" : \"1px solid transparent\",\n marginBottom: \"-1px\",\n fontSize: \"18px\",\n }}\n >\n {d.label.toUpperCase()} {d.date}\n \n {dayCount(d.key)}\n \n \n );\n })}\n setActiveDay(\"TICKETS\")}\n className=\"bb-display px-4 py-2 rounded-t-lg shrink-0\"\n style={{\n background: activeDay === \"TICKETS\" ? \"var(--panel)\" : \"transparent\",\n color: activeDay === \"TICKETS\" ? \"var(--lime)\" : \"var(--muted)\",\n border: activeDay === \"TICKETS\" ? \"1px solid var(--line)\" : \"1px solid transparent\",\n borderBottom: activeDay === \"TICKETS\" ? \"1px solid var(--panel)\" : \"1px solid transparent\",\n marginBottom: \"-1px\",\n fontSize: \"18px\",\n }}\n >\n 🎫 TICKETS\n \n {ticketTabCount}\n \n \n

\n\n {/* Act list */}\n {activeDay !== \"TICKETS\" && (\n

\n {/* venue filter — sift the day's acts down to one or more stages */}\n

\n \n {Object.keys(STAGE_COLORS).map((stage) => {\n const on = stageFilter.includes(stage);\n const stageHasActs = allDayActs.some((a) => a.stage === stage);\n if (!stageHasActs) return null;\n return (\n toggleStageFilter(stage)}\n className=\"bb-chip bb-mono text-[11px] px-2.5 py-1.5 rounded-full\"\n style={{\n background: on ? STAGE_COLORS[stage] : \"transparent\",\n color: on ? \"#151220\" : STAGE_COLORS[stage],\n border: `1px solid ${STAGE_COLORS[stage]}`,\n }}\n >\n {stage}\n \n );\n })}\n {stageFilter.length > 0 && (\n setStageFilter([])}\n className=\"bb-mono text-[11px] px-2 py-1.5\"\n style={{ color: \"var(--muted)\", textDecoration: \"underline\" }}\n >\n clear\n \n )}\n

\n {dayActs.map((a) => {\n const meta = TICKET_META[a.ticket] || TICKET_META.unsure;\n const clashes = overlapMap[a.id] || [];\n const hasClash = clashes.length > 0;\n return (\n \n {hasClash && (\n \n \n \n Clashes with {clashes.map((c) => `${c.act} (${c.stage})`).join(\", \")}\n \n

\n )}\n

\n updateAct(a.id, { act: e.target.value })}\n className=\"bb-display text-xl w-full outline-none bg-transparent\"\n style={{ color: \"var(--text)\" }}\n />\n

\n \n \n updateAct(a.id, { time: e.target.value })}\n className=\"bg-transparent outline-none w-16\"\n style={{ color: \"var(--text)\" }}\n />\n \n \n \n updateAct(a.id, { stage: e.target.value })}\n className=\"bg-transparent outline-none\"\n style={{ color: STAGE_COLORS[a.stage] || \"var(--text)\" }}\n >\n {Object.keys(STAGE_COLORS).map((s) => (\n \n ))}\n \n \n updateAct(a.id, { duration: e.target.value })}\n className=\"bg-transparent outline-none flex-1 min-w-[120px]\"\n style={{ color: \"var(--muted)\" }}\n />\n

\n \n \n updateAct(a.id, { origin: e.target.value })}\n placeholder=\"origin\"\n className=\"bg-transparent outline-none w-28\"\n style={{ color: \"var(--text)\" }}\n />\n \n \n \n updateAct(a.id, { genre: e.target.value })}\n placeholder=\"genre\"\n className=\"bg-transparent outline-none flex-1\"\n style={{ color: \"var(--text)\" }}\n />\n \n

\n \n

\n\n {/* ticket type selector */}\n

\n updateAct(a.id, { ticket: e.target.value })}\n className=\"bb-mono text-[11px] px-2 py-1.5 rounded-full outline-none\"\n style={{ background: \"transparent\", border: `1px solid ${meta.color}`, color: meta.color }}\n >\n {Object.entries(TICKET_META).map(([k, v]) => (\n \n ))}\n \n

\n\n {/* preview past songs — links out to search results, no embedded/fabricated tracks */}\n {a.act !== \"G.A.S. Attack: Durian Edition (gear market)\" && (\n

\n \n Preview on YouTube\n \n \n Preview on Spotify\n \n

\n )}\n\n {/* add to calendar — Google (web link) and Apple/other (.ics download) */}\n {(() => {\n const canSchedule = !!getInterval(a);\n const gcalUrl = canSchedule ? buildGoogleCalUrl(a) : null;\n return (\n

\n {canSchedule ? (\n <>\n \n Google Calendar\n \n downloadICS(a)}\n className=\"bb-chip flex items-center gap-1.5 bb-mono text-[11px] px-2.5 py-1.5 rounded-full\"\n style={{ border: \"1px solid var(--line)\", color: \"var(--muted)\" }}\n >\n Apple Calendar (.ics)\n \n \n ) : (\n \n Set the exact time to enable \"add to calendar\"\n \n )}\n

\n );\n })()}\n\n {/* ticket quantities per crew member — only relevant when the act actually needs a\n ticket or registration, so free walk-in stages don't clutter the card */}\n {(a.ticket === \"reg\" || a.ticket === \"ticketed\") && (\n

\n \n \n tickets booked{\" \"}\n \n ({Object.values(a.ticketQty || {}).reduce((sum, n) => sum + n, 0)})\n \n \n

\n {crew.map((name) => {\n const qty = (a.ticketQty || {})[name] || 0;\n const on = qty > 0;\n return (\n \n \n {name}\n \n bumpTicketQty(a.id, name, -1)}\n disabled={qty === 0}\n className=\"bb-chip w-7 h-7 rounded-full flex items-center justify-center bb-mono text-sm leading-none\"\n style={{\n background: on ? \"#151220\" : \"var(--panel)\",\n color: on ? \"var(--lime)\" : \"var(--muted)\",\n opacity: qty === 0 ? 0.4 : 1,\n }}\n aria-label={`Remove one ${name} ticket`}\n >\n −\n \n \n {qty}\n \n bumpTicketQty(a.id, name, 1)}\n className=\"bb-chip w-7 h-7 rounded-full flex items-center justify-center bb-mono text-sm leading-none\"\n style={{ background: on ? \"#151220\" : \"var(--panel)\", color: on ? \"var(--lime)\" : \"var(--muted)\" }}\n aria-label={`Add one ${name} ticket`}\n >\n +\n \n

\n );\n })}\n

\n \n )}\n\n {/* who wants to join (non-ticketed / free stages) */}\n

\n \n {crew.map((name) => {\n const on = (a.interested || []).includes(name);\n return (\n toggleInterested(a.id, name)}\n className=\"bb-chip bb-mono text-[11px] px-2 py-1.5 rounded-full\"\n style={{\n background: on ? \"#c792ff\" : \"transparent\",\n color: on ? \"#151220\" : \"var(--muted)\",\n border: `1px solid ${on ? \"#c792ff\" : \"var(--line)\"}`,\n }}\n >\n {name}\n \n );\n })}\n

\n {(a.ticket === \"reg\" || a.ticket === \"ticketed\") && (\n <>\n \n tickets booked · \n \n )}\n \n wants to join\n

\n \n );\n })}\n\n \n ADD ACT / EVENT FOR {DAYS.find((d) => d.key === activeDay)?.label.toUpperCase()}\n \n \n )}\n\n {/* E-Tickets tab: paste each person's e-ticket / SISTIC link per act, for quick access at the gate */}\n {activeDay === \"TICKETS\" && !ticketsUnlocked && (\n

\n \n

\n This tab is password-protected. Ask whoever set it up for the password.\n

\n {\n e.preventDefault();\n if (ticketsPasswordInput === TICKETS_PASSWORD) {\n setTicketsUnlocked(true);\n setTicketsPasswordError(false);\n setTicketsPasswordInput(\"\");\n } else {\n setTicketsPasswordError(true);\n }\n }}\n className=\"flex items-center gap-2\"\n >\n {\n setTicketsPasswordInput(e.target.value);\n setTicketsPasswordError(false);\n }}\n placeholder=\"Password\"\n className=\"bb-mono text-[11px] px-2.5 py-1.5 rounded outline-none\"\n style={{ background: \"var(--panel-2)\", border: `1px solid ${ticketsPasswordError ? \"#ff5d6c\" : \"var(--line)\"}`, color: \"var(--text)\" }}\n />\n \n Unlock\n \n \n {ticketsPasswordError && (\n

\n Wrong password — try again.\n

\n )}\n

\n )}\n {activeDay === \"TICKETS\" && ticketsUnlocked && (\n

\n Paste each person's e-ticket link (SISTIC confirmation, registration QR, etc.) here so\n everyone can find it fast at the gate. Only acts someone has booked tickets/registration\n for show up below.\n

\n {acts\n .filter((a) => (a.ticket === \"reg\" || a.ticket === \"ticketed\") && Object.values(a.ticketQty || {}).some((q) => q > 0))\n .sort((a, b) => chronoKey(a) - chronoKey(b))\n .map((a) => {\n const holders = crew.filter((name) => (a.ticketQty && a.ticketQty[name]) > 0);\n return (\n

\n \n {a.act}\n \n \n {a.date} · {a.time} · {a.stage}\n \n

\n {holders.map((name) => {\n const url = (a.ticketLinks || {})[name] || \"\";\n return (\n

\n \n {name}\n \n setTicketLink(a.id, name, e.target.value)}\n placeholder=\"paste e-ticket link…\"\n className=\"bb-mono text-[11px] flex-1 min-w-0 px-2 py-1.5 rounded outline-none\"\n style={{ background: \"var(--panel)\", border: \"1px solid var(--line)\", color: \"var(--text)\" }}\n />\n {url ? (\n \n Open\n \n ) : (\n \n no link yet\n \n )}\n

\n );\n })}\n

\n );\n })}\n {acts.filter((a) => (a.ticket === \"reg\" || a.ticket === \"ticketed\") && Object.values(a.ticketQty || {}).some((q) => q > 0)).length === 0 && (\n

\n No tickets booked yet — once you mark ticket quantities on a Free · registration or\n Ticketed act, it'll show up here for its e-ticket link.\n

\n )}\n

\n )}\n \n );\n}",[],[143,199,192],"components","5b0a23b4-7674-4ebd-98db-3efd33266236",32,["D",1787335974843],2,[162],[143,199],["D",1787334931624],[161,163,164],[143],["D",1787235890768],["D",1789521041830],{"_11":12,"_93":89},{"_11":12,"_86":87,"_88":89,"_29":42,"_90":91,"_92":23},{"_75":76,"_13":16,"_30":77,"_78":31,"_79":-5,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":14,"_85":12},"ctx",{"_68":-5,"_111":247,"_248":249,"_250":251,"_252":23,"_253":23,"_254":23,"_255":46,"_256":-5,"_257":-7,"_258":-7,"_259":25,"_260":23,"_261":23,"_262":-5,"_263":23,"_264":23,"_265":23,"_266":-5},"ENV",{"_218":219,"_220":221,"_222":16,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246},"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"]

History · frontend/Components/App.tsx