TrafficIQ — Real-Time Traffic & Routes

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_215":216,"_217":218},"routes/_app.x.$handle.$name",{"_101":100,"_37":49,"_109":91,"_32":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_26":-5,"_121":-5,"_122":-5,"_123":30,"_124":125,"_126":63,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":30},"version",9,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","4218a9cb-9af9-4c40-bea9-a2856eabd1b8","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":26,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","487a9470-34d9-11f1-9c0b-42b51c65c3df","name","App.tsx","fileType","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\nimport MapView from \"./MapView.tsx\";\nimport Sidebar from \"./Sidebar.tsx\";\n\nexport type Coords = { lat: number; lon: number };\nexport type Incident = {\n type: string; lat: number; lon: number;\n description: string; severity: number; delay: number;\n id?: string;\n};\nexport type Route = {\n summary: { lengthInMeters: number; travelTimeInSeconds: number; trafficDelayInSeconds: number; arrivalTime: string };\n label: string; delayMinutes: number; selected?: boolean;\n};\nexport type FlowData = {\n currentSpeed: number; freeFlowSpeed: number;\n currentTravelTime: number; freeFlowTravelTime: number;\n confidence: number; roadClosure: boolean;\n};\n\nexport type AppTab = \"traffic\" | \"routes\" | \"incidents\";\n\nexport default function App() {\n const [userLocation, setUserLocation] = useState(null);\n const [mapCenter, setMapCenter] = useState({ lat: 40.7128, lon: -74.006 }); // Default NYC\n const [incidents, setIncidents] = useState([]);\n const [flowData, setFlowData] = useState(null);\n const [routes, setRoutes] = useState([]);\n const [selectedRoute, setSelectedRoute] = useState(0);\n const [destination, setDestination] = useState(null);\n const [destName, setDestName] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [incidentsLoading, setIncidentsLoading] = useState(false);\n const [activeTab, setActiveTab] = useState(\"traffic\");\n const [toast, setToast] = useState(\"\");\n const [mapBounds, setMapBounds] = useState<[number, number, number, number] | null>(null);\n const [simulated, setSimulated] = useState(false);\n const refreshRef = useRef(null);\n\n const showToast = useCallback((msg: string) => {\n setToast(msg);\n setTimeout(() => setToast(\"\"), 3000);\n }, []);\n\n // Get user location\n useEffect(() => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (pos) => {\n const loc = { lat: pos.coords.latitude, lon: pos.coords.longitude };\n setUserLocation(loc);\n setMapCenter(loc);\n fetchFlow(loc);\n },\n () => {\n showToast(\"📍 Location unavailable — using New York City as default\");\n fetchFlow({ lat: 40.7128, lon: -74.006 });\n },\n { enableHighAccuracy: true }\n );\n }\n }, []);\n\n // Auto-refresh incidents every 60s\n useEffect(() => {\n if (mapBounds) {\n fetchIncidents(mapBounds);\n refreshRef.current = setInterval(() => fetchIncidents(mapBounds), 60000);\n }\n return () => clearInterval(refreshRef.current);\n }, [mapBounds]);\n\n const fetchFlow = async (coords: Coords) => {\n try {\n const res = await fetch(`/api/flow?lat=${coords.lat}&lon=${coords.lon}`);\n const data = await res.json();\n if (data.flowSegmentData) {\n setFlowData(data.flowSegmentData);\n if (data.simulated) setSimulated(true);\n }\n } catch (e) { /* silent */ }\n };\n\n const fetchIncidents = async (bbox: [number, number, number, number]) => {\n setIncidentsLoading(true);\n try {\n const bboxStr = `${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}`;\n const res = await fetch(`/api/incidents?bbox=${bboxStr}`);\n const data = await res.json();\n if (data.incidents) {\n setIncidents(data.incidents.map((inc: any, i: number) => ({ ...inc, id: `inc-${i}` })));\n if (data.simulated) setSimulated(true);\n }\n } catch (e) { /* silent */ } finally {\n setIncidentsLoading(false);\n }\n };\n\n const fetchRoutes = async () => {\n const origin = userLocation || mapCenter;\n if (!destination) { showToast(\"📍 Click the map to set a destination first\"); return; }\n setLoading(true);\n setActiveTab(\"routes\");\n try {\n const res = await fetch(\"/api/route\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ origin, destination }),\n });\n const data = await res.json();\n if (data.routes) {\n setRoutes(data.routes);\n setSelectedRoute(0);\n if (data.simulated) setSimulated(true);\n showToast(`🗺️ Found ${data.routes.length} routes — best option highlighted`);\n }\n } catch (e) {\n showToast(\"❌ Could not calculate routes\");\n } finally { setLoading(false); }\n };\n\n const handleMapBoundsChange = useCallback((bounds: [number, number, number, number]) => {\n setMapBounds(bounds);\n }, []);\n\n const handleMapClick = useCallback((coords: Coords) => {\n setDestination(coords);\n setDestName(`${coords.lat.toFixed(4)}, ${coords.lon.toFixed(4)}`);\n showToast(\"📌 Destination set — click 'Get Routes' to navigate\");\n }, [showToast]);\n\n const handleCenterOnUser = useCallback(() => {\n if (userLocation) {\n setMapCenter(userLocation);\n fetchFlow(userLocation);\n showToast(\"📍 Centered on your location\");\n } else {\n showToast(\"❌ Location not available\");\n }\n }, [userLocation, showToast]);\n\n return (\n

\n \n\n

\n \n

\n \n \n

\n\n {toast &&

{toast}

}\n

\n );\n}\n\nfunction TopBar({ onCenterUser, hasLocation }: { onCenterUser: () => void; hasLocation: boolean }) {\n return (\n

\n 🚦\n TrafficIQ\n

\n \n view source\n

\n );\n}\n\nfunction MapLegend() {\n return (\n

Traffic Flow

Free flow

Moderate

Slow

Stop & Go

Incidents

🚨 Accident

🚧 Road Works

⚠️ Hazard / Jam

\n );\n}\n","createdAt",["D",1775824325366],"branchVersion","branchId","abefd5de-34d8-11f1-b7f0-42b51c65c3df","id","abec1fac-34d8-11f1-b7f0-42b51c65c3df","TrafficIQ",["D",1775824062714],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Real-time traffic monitoring, incidents & smart route planning","imageUrl","ef159460-245e-11f0-8391-8dd03738580d","pinnedFileId","abf410d6-34d8-11f1-b7f0-42b51c65c3df","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","d751e982-0bf9-41c3-b996-d1ea784cce5b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_19":59,"_105":106,"_107":30},"branch",{"_13":90,"_37":91,"_47":46,"_92":48,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":49,"_99":100},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","bartimeaus","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ3TXgxN3hDUUVWU0lnN0xVQXI5bUVncVZYcyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_37":49,"_42":211,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":212,"_85":213,"_87":214,"_89":30},"tree",[162,168],"files",[162,163,164,165,166,167,168],"counts",{"_151":67,"_152":153,"_154":67,"_155":156,"_157":158},"contents",[131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":144,"_37":145,"_35":146,"_135":-5,"_45":46,"_44":147,"_137":63,"_42":148,"_13":67,"_39":149,"_40":-5,"_29":30,"_142":-5,"_32":150},{"_47":133,"_37":134,"_35":61,"_135":-5,"_45":46,"_44":136,"_137":63,"_42":138,"_13":139,"_39":140,"_40":141,"_29":30,"_142":-5,"_32":143},"17c9b3f6-34d9-11f1-ac14-42b51c65c3df","main.ts","parentId",3,"latest",["D",1775824243673],2,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve frontend\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\", import.meta.url));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Source route\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Traffic API Proxy ───────────────────────────────────────────────────────\n// TomTom free tier key provided by user via env, or fallback to demo\nconst TOMTOM_KEY = Deno.env.get(\"TOMTOM_API_KEY\") || \"\";\n\n// Flow segment data – real-time speed for a lat/lon point\napp.get(\"/api/flow\", async (c) => {\n const lat = c.req.query(\"lat\");\n const lon = c.req.query(\"lon\");\n if (!lat || !lon) return c.json({ error: \"lat/lon required\" }, 400);\n\n if (!TOMTOM_KEY) {\n // Return simulated data if no API key\n return c.json(simulateFlow(parseFloat(lat), parseFloat(lon)));\n }\n\n const url =\n `https://api.tomtom.com/traffic/services/4/flowSegmentData/absolute/10/json?point=${lat},${lon}&key=${TOMTOM_KEY}`;\n try {\n const res = await fetch(url);\n const data = await res.json();\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Traffic API error\" }, 500);\n }\n});\n\n// Traffic incidents in a bounding box\napp.get(\"/api/incidents\", async (c) => {\n const bbox = c.req.query(\"bbox\"); // minLon,minLat,maxLon,maxLat\n if (!bbox) return c.json({ error: \"bbox required\" }, 400);\n\n if (!TOMTOM_KEY) {\n return c.json(simulateIncidents(bbox));\n }\n\n const [minLon, minLat, maxLon, maxLat] = bbox.split(\",\");\n const url =\n `https://api.tomtom.com/traffic/services/5/incidentDetails?bbox=${minLon},${minLat},${maxLon},${maxLat}&fields={incidents{type,geometry{type,coordinates},properties{iconCategory,magnitudeOfDelay,events{description,code,iconCategory},startTime,endTime,from,to,length,delay,roadNumbers,timeValidity}}}&language=en-GB&key=${TOMTOM_KEY}`;\n try {\n const res = await fetch(url);\n const data = await res.json();\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Incidents API error\" }, 500);\n }\n});\n\n// Route calculation with traffic\napp.post(\"/api/route\", async (c) => {\n const body = await c.req.json();\n const { origin, destination } = body;\n if (!origin || !destination) return c.json({ error: \"origin/destination required\" }, 400);\n\n if (!TOMTOM_KEY) {\n return c.json(simulateRoute(origin, destination));\n }\n\n const locations = `${origin.lat},${origin.lon}:${destination.lat},${destination.lon}`;\n const url =\n `https://api.tomtom.com/routing/1/calculateRoute/${locations}/json?traffic=true&travelMode=car&routeType=fastest&key=${TOMTOM_KEY}`;\n try {\n const res = await fetch(url);\n const data = await res.json();\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Routing API error\" }, 500);\n }\n});\n\n// ─── Simulation helpers (used when no API key) ───────────────────────────────\nfunction simulateFlow(lat: number, lon: number) {\n const currentSpeed = Math.floor(20 + Math.random() * 80);\n const freeFlowSpeed = 90;\n return {\n flowSegmentData: {\n currentSpeed,\n freeFlowSpeed,\n currentTravelTime: Math.floor(60 + Math.random() * 120),\n freeFlowTravelTime: 45,\n confidence: 0.95,\n roadClosure: false,\n },\n simulated: true,\n };\n}\n\nfunction simulateIncidents(bbox: string) {\n const [minLon, minLat, maxLon, maxLat] = bbox.split(\",\").map(parseFloat);\n const incidents = [];\n const types = [\"ACCIDENT\", \"JAM\", \"ROAD_WORK\", \"HAZARD\", \"ROAD_CLOSURE\"];\n const descriptions = [\n \"Multi-vehicle collision blocking right lane\",\n \"Heavy congestion, expect 20min delay\",\n \"Road works — lane closed ahead\",\n \"Debris on road — caution advised\",\n \"Road closed for emergency repairs\",\n \"Accident cleared, residual delays\",\n \"Slow traffic due to broken-down vehicle\",\n \"Traffic lights out, police directing\",\n ];\n const count = Math.floor(2 + Math.random() * 5);\n for (let i = 0; i < count; i++) {\n const lat = minLat + Math.random() * (maxLat - minLat);\n const lon = minLon + Math.random() * (maxLon - minLon);\n const type = types[Math.floor(Math.random() * types.length)];\n incidents.push({\n type,\n lat,\n lon,\n description: descriptions[Math.floor(Math.random() * descriptions.length)],\n severity: Math.floor(1 + Math.random() * 4),\n delay: Math.floor(Math.random() * 30),\n });\n }\n return { incidents, simulated: true };\n}\n\nfunction simulateRoute(origin: any, destination: any) {\n return {\n routes: [\n {\n summary: {\n lengthInMeters: 12500,\n travelTimeInSeconds: 1320,\n trafficDelayInSeconds: 240,\n departureTime: new Date().toISOString(),\n arrivalTime: new Date(Date.now() + 1320 * 1000).toISOString(),\n },\n legs: [{ points: [] }],\n label: \"Fastest route\",\n delayMinutes: 4,\n },\n {\n summary: {\n lengthInMeters: 15800,\n travelTimeInSeconds: 1080,\n trafficDelayInSeconds: 60,\n departureTime: new Date().toISOString(),\n arrivalTime: new Date(Date.now() + 1080 * 1000).toISOString(),\n },\n legs: [{ points: [] }],\n label: \"Alternative via bypass\",\n delayMinutes: 1,\n },\n ],\n simulated: true,\n };\n}\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","label",[134],"180adc8c-34d9-11f1-99b5-42b51c65c3df","frontend","180add72-34d9-11f1-99b5-42b51c65c3df",4,["D",1775824244104],"directory",[145],"pulls","branches",1,"forks","envVars",{"_159":67,"_161":67},"connections",{"_159":67,"_160":67},"count","unfilledCount","emptyCount",{"_47":144,"_37":145,"_35":146,"_135":-5,"_45":46,"_44":147,"_137":63,"_42":208,"_13":67,"_39":149,"_40":-5,"_29":30,"_142":-5,"_170":209,"_32":210},{"_47":203,"_37":202,"_35":198,"_135":146,"_45":46,"_44":204,"_137":63,"_42":205,"_13":67,"_39":149,"_40":-5,"_29":30,"_142":-5,"_170":206,"_32":207},{"_47":197,"_37":38,"_35":36,"_135":198,"_45":46,"_44":14,"_137":30,"_42":199,"_13":67,"_39":26,"_40":41,"_29":30,"_142":-5,"_170":200,"_32":201},{"_47":189,"_37":190,"_35":191,"_135":146,"_45":46,"_44":192,"_137":63,"_42":193,"_13":67,"_39":26,"_40":194,"_29":30,"_142":-5,"_170":195,"_32":196},{"_47":181,"_37":182,"_35":183,"_135":146,"_45":46,"_44":184,"_137":30,"_42":185,"_13":67,"_39":26,"_40":186,"_29":30,"_142":-5,"_170":187,"_32":188},{"_47":173,"_37":174,"_35":175,"_135":146,"_45":46,"_44":176,"_137":63,"_42":177,"_13":67,"_39":26,"_40":178,"_29":30,"_142":-5,"_170":179,"_32":180},{"_47":133,"_37":134,"_35":61,"_135":-5,"_45":46,"_44":136,"_137":63,"_42":169,"_13":139,"_39":140,"_40":141,"_29":30,"_142":-5,"_170":171,"_32":172},["D",1775824243673],"children",[],[134],"344f9a4a-34d9-11f1-be1d-42b51c65c3df","style.css","344f9aea-34d9-11f1-be1d-42b51c65c3df",6,["D",1775824291529],"/* ─── Reset & Base ─────────────────────────────────── */\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --bg: #0f1117;\n --surface: #1a1d27;\n --surface2: #22263a;\n --accent: #3b82f6;\n --accent2: #06b6d4;\n --green: #22c55e;\n --yellow: #facc15;\n --orange: #f97316;\n --red: #ef4444;\n --text: #e2e8f0;\n --text-muted: #94a3b8;\n --border: #2d3353;\n --radius: 12px;\n --shadow: 0 4px 24px rgba(0,0,0,0.4);\n}\n\nhtml, body, #root { height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); }\n\n/* ─── Layout ───────────────────────────────────────── */\n.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }\n\n.topbar {\n display: flex; align-items: center; gap: 12px;\n padding: 10px 16px;\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n z-index: 1000; flex-shrink: 0;\n}\n\n.topbar .logo { display: flex; align-items: center; gap: 8px; }\n.topbar .logo-icon { font-size: 22px; }\n.topbar .logo-text { font-size: 18px; font-weight: 700; background: linear-gradient(135deg,#3b82f6,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }\n\n.topbar .search-bar {\n flex: 1; max-width: 480px;\n display: flex; align-items: center; gap: 6px;\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 8px; padding: 6px 12px;\n}\n.topbar .search-bar input {\n background: none; border: none; outline: none;\n color: var(--text); font-size: 13px; flex: 1;\n}\n.topbar .search-bar input::placeholder { color: var(--text-muted); }\n\n.topbar .btn {\n padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer;\n font-size: 13px; font-weight: 600; transition: all 0.15s;\n}\n.btn-primary { background: var(--accent); color: #fff; }\n.btn-primary:hover { background: #2563eb; }\n.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }\n.btn-secondary:hover { background: var(--border); }\n.btn-sm { padding: 5px 11px; font-size: 12px; }\n\n.topbar .spacer { flex: 1; }\n.topbar .source-link { color: var(--text-muted); font-size: 12px; text-decoration: none; }\n.topbar .source-link:hover { color: var(--accent2); }\n\n/* ─── Main area ────────────────────────────────────── */\n.main { display: flex; flex: 1; overflow: hidden; }\n\n/* ─── Sidebar ──────────────────────────────────────── */\n.sidebar {\n width: 320px; flex-shrink: 0;\n background: var(--surface);\n border-right: 1px solid var(--border);\n display: flex; flex-direction: column;\n overflow: hidden; z-index: 500;\n}\n\n.sidebar-tabs {\n display: flex; border-bottom: 1px solid var(--border);\n flex-shrink: 0;\n}\n.tab-btn {\n flex: 1; padding: 10px 4px; background: none; border: none;\n color: var(--text-muted); font-size: 12px; font-weight: 600;\n cursor: pointer; transition: all 0.15s;\n border-bottom: 2px solid transparent;\n}\n.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }\n.tab-btn:hover:not(.active) { color: var(--text); background: var(--surface2); }\n\n.sidebar-content { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }\n\n/* ─── Cards ────────────────────────────────────────── */\n.card {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: var(--radius); padding: 12px;\n}\n.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }\n.card-title { font-size: 13px; font-weight: 600; color: var(--text); }\n.card-icon { font-size: 16px; }\n\n/* ─── Status Badge ─────────────────────────────────── */\n.badge {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;\n}\n.badge-green { background: rgba(34,197,94,0.15); color: var(--green); }\n.badge-yellow { background: rgba(250,204,21,0.15); color: var(--yellow); }\n.badge-orange { background: rgba(249,115,22,0.15); color: var(--orange); }\n.badge-red { background: rgba(239,68,68,0.15); color: var(--red); }\n.badge-blue { background: rgba(59,130,246,0.15); color: var(--accent); }\n\n/* ─── Traffic Flow Card ────────────────────────────── */\n.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.flow-item { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 10px; }\n.flow-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }\n.flow-value { font-size: 18px; font-weight: 700; margin-top: 2px; }\n.flow-unit { font-size: 11px; color: var(--text-muted); }\n\n/* ─── Speed Bar ────────────────────────────────────── */\n.speed-bar-container { margin-top: 10px; }\n.speed-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }\n.speed-bar-track { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }\n.speed-bar-fill { height: 100%; border-radius: 10px; transition: width 0.6s ease; }\n\n/* ─── Incidents ────────────────────────────────────── */\n.incident-item {\n display: flex; gap: 10px; align-items: flex-start;\n padding: 10px; background: var(--surface2); border: 1px solid var(--border);\n border-radius: 10px; cursor: pointer; transition: border-color 0.15s;\n}\n.incident-item:hover { border-color: var(--accent); }\n.incident-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }\n.incident-body { flex: 1; min-width: 0; }\n.incident-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }\n.incident-desc { font-size: 12px; color: var(--text); margin: 2px 0; line-height: 1.4; }\n.incident-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }\n\n/* ─── Routes ───────────────────────────────────────── */\n.route-card {\n border: 2px solid var(--border); border-radius: var(--radius);\n padding: 12px; cursor: pointer; transition: all 0.15s;\n background: var(--surface2);\n}\n.route-card:hover { border-color: var(--accent); }\n.route-card.selected { border-color: var(--accent); background: rgba(59,130,246,0.08); }\n.route-card.best { border-color: var(--green); }\n.route-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }\n.route-name { font-size: 13px; font-weight: 700; }\n.route-stats { display: flex; gap: 12px; margin-top: 6px; }\n.route-stat { display: flex; flex-direction: column; }\n.route-stat-val { font-size: 16px; font-weight: 700; }\n.route-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }\n.route-delay { display: flex; align-items: center; gap: 4px; font-size: 12px; }\n\n/* ─── Route form ───────────────────────────────────── */\n.route-form { display: flex; flex-direction: column; gap: 8px; }\n.route-input-group { position: relative; }\n.route-input-group .dot {\n position: absolute; left: 10px; top: 50%; transform: translateY(-50%);\n width: 10px; height: 10px; border-radius: 50%;\n}\n.dot-origin { background: var(--accent); }\n.dot-dest { background: var(--red); }\n.route-input-group input {\n width: 100%; background: var(--surface2); border: 1px solid var(--border);\n border-radius: 8px; padding: 8px 12px 8px 28px; color: var(--text);\n font-size: 13px; outline: none; transition: border-color 0.15s;\n}\n.route-input-group input:focus { border-color: var(--accent); }\n.route-input-group input::placeholder { color: var(--text-muted); }\n\n/* ─── Location pill ────────────────────────────────── */\n.location-pill {\n display: flex; align-items: center; gap: 6px;\n background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3);\n border-radius: 20px; padding: 4px 10px; font-size: 12px;\n}\n.location-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse 2s infinite; }\n@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }\n\n/* ─── Map ──────────────────────────────────────────── */\n.map-wrapper { flex: 1; position: relative; }\n#map { width: 100%; height: 100%; background: #1a1a2e; }\n\n/* Map overlays */\n.map-fab {\n position: absolute; z-index: 1000;\n background: var(--surface); border: 1px solid var(--border);\n border-radius: 10px; padding: 8px 12px;\n display: flex; align-items: center; gap: 6px;\n font-size: 12px; cursor: pointer; box-shadow: var(--shadow);\n transition: all 0.15s;\n}\n.map-fab:hover { background: var(--surface2); }\n.map-fab-tl { top: 12px; left: 12px; }\n.map-fab-tr { top: 12px; right: 12px; }\n.map-fab-bl { bottom: 40px; left: 12px; }\n\n.map-legend {\n position: absolute; bottom: 40px; right: 12px; z-index: 1000;\n background: var(--surface); border: 1px solid var(--border);\n border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow);\n min-width: 130px;\n}\n.legend-title { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }\n.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 3px 0; }\n.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }\n\n/* ─── Loader ───────────────────────────────────────── */\n.loader { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n\n/* ─── Scrollbar ────────────────────────────────────── */\n::-webkit-scrollbar { width: 4px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }\n\n/* ─── Notification toast ───────────────────────────── */\n.toast {\n position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);\n background: var(--surface2); border: 1px solid var(--accent);\n border-radius: 10px; padding: 10px 18px;\n font-size: 13px; font-weight: 500; z-index: 9999;\n box-shadow: 0 4px 20px rgba(59,130,246,0.3);\n animation: toastIn 0.3s ease;\n}\n@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }\n\n/* ─── Info banner ──────────────────────────────────── */\n.info-banner {\n background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.25);\n border-radius: 8px; padding: 8px 12px; font-size: 11px; color: var(--accent2);\n display: flex; gap: 6px; align-items: flex-start;\n}\n\n/* ─── Responsive ───────────────────────────────────── */\n@media (max-width: 640px) {\n .sidebar { width: 100%; max-height: 45vh; border-right: none; border-top: 1px solid var(--border); order: 2; }\n .main { flex-direction: column; }\n .map-wrapper { order: 1; flex: 1; }\n}\n",[],[145,174],"369162f2-34d9-11f1-be1f-42b51c65c3df","index.tsx","369163ce-34d9-11f1-be1f-42b51c65c3df",7,["D",1775824295313],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[145,182],"1bd5fda6-34d9-11f1-a30a-42b51c65c3df","index.html","1bd5fe46-34d9-11f1-a30a-42b51c65c3df",5,["D",1775824250317],"\n\n\n \n \n TrafficIQ — Real-Time Traffic & Routes\n\n \n \n \n \n\n \n \n\n\n

\n \n\n\n",[],[145,190],"487a93a8-34d9-11f1-9c0b-42b51c65c3df","37b57740-34d9-11f1-be1d-42b51c65c3df",["D",1775824325366],[],[145,202,38],"components","37b5765a-34d9-11f1-be1d-42b51c65c3df",8,["D",1775824297232],[164],[145,202],["D",1775824244104],[163,165,166,167],[145],["D",1775824062714],{"_101":100,"_108":104},{"_101":100,"_102":-5,"_103":104,"_19":59,"_105":106,"_107":30},{"_13":90,"_37":91,"_47":46,"_92":48,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":49,"_99":100},"ctx",{"_83":-5,"_128":248,"_249":250,"_251":252,"_253":30,"_254":30,"_255":30,"_256":63,"_257":-5,"_258":-7,"_259":-7,"_260":67,"_261":30,"_262":30,"_263":-5,"_264":30,"_265":30,"_266":30,"_267":-5},"ENV",{"_219":220,"_221":222,"_223":91,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247},"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 · v9