[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_256":257,"_258":259},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_108":89,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":24,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/CommunityComments.tsx","latestPath","fileId","84be88a0-afc8-11f1-81e5-1607ee4eb77e","name","CommunityComments.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useState} from 'https://esm.sh/react@18.2.0';\nexport function CommunityComments({placeId,comments,user,onAdd,onRemove}){\n const [draft,setDraft]=useState(''),[busy,setBusy]=useState(false);\n return

Around the table.

Tips and comments, shared with everyone who visits the guide.

\n {!comments.length&&

Be the first to add a little local knowledge.

}\n

{comments.map(n=>

{n.author} · {new Date(n.date).toLocaleDateString('en-SG',{day:'numeric',month:'short',year:'numeric'})}

{n.canRemove&&}

{n.text}

)}

\n {user ?

{e.preventDefault();setBusy(true);if(await onAdd(placeId,draft))setDraft('');setBusy(false);}}>Your comment

setDraft(e.target.value)} placeholder=\"What should we order? Any tips for a first visit?\"/><button type=\"submit\" disabled={busy||!draft.trim()} className=\"mt-3 rounded-full bg-[#23483f] px-5 py-3 text-xs text-[#fffdf7] disabled:opacity-50\">{busy?'Sharing…':'Share comment'}</button></form> : <a href=\"/auth/login\" className=\"mt-5 inline-flex rounded-full border border-[#d8dacd] px-4 py-3 text-xs\">Sign in to join the conversation →</a>}\n </section>;\n}\n\r\n","createdAt",["D",1789341118025],"branchVersion","branchId","486e705c-045f-4c65-82da-a04d3d617ab8","id","6ce853b8-4cca-404e-8de5-b08044ea87f6","in-good-company",["D",1789339382932],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Marc’s Singapore guide, from people he trusts","imageUrl","09d0017f-b431-4bfe-98be-204d22547721","pinnedFileId","01a09cf0-34c2-729a-80d0-57a4a755a616","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019eb420-ab29-777b-a6b0-b715c4bf52ff","tursoName","6ce853b84cca404e8de5b08044ea87f6","tursoHostname","6ce853b84cca404e8de5b08044ea87f6-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",37,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","marc1","handle","displayName","Marc","avatar","https://lh3.googleusercontent.com/a/ACg8ocLUz6whQ8rM9wDF8thCZsGM5Haat5v2fLvGtdw-mkhsa2Q22u96KA=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":251,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":252,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":253,"_83":254,"_85":255,"_87":24},"tree",[173,182,183,184],"files",[173,174,175,176,177,178,179,180,181,182,183,184],"counts",{"_163":62,"_164":137,"_165":62,"_166":167,"_168":169},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":157,"_31":158,"_29":159,"_136":-5,"_40":41,"_39":137,"_138":58,"_37":160,"_13":62,"_33":161,"_35":-5,"_23":24,"_142":-5,"_26":162},{"_42":151,"_31":152,"_29":153,"_136":-5,"_40":41,"_39":137,"_138":58,"_37":154,"_13":62,"_33":20,"_35":155,"_23":24,"_142":-5,"_26":156},{"_42":145,"_31":146,"_29":147,"_136":-5,"_40":41,"_39":137,"_138":24,"_37":148,"_13":62,"_33":20,"_35":149,"_23":24,"_142":-5,"_26":150},{"_42":134,"_31":135,"_29":56,"_136":-5,"_40":41,"_39":137,"_138":24,"_37":139,"_13":62,"_33":140,"_35":141,"_23":24,"_142":143,"_26":144},"42c8596a-4e17-432f-b170-d5e31600197b","index.ts","parentId",1,"latest",["D",1789339382932],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label","marcs-singapore",[135],"5941fab0-5960-4860-ac36-945b8a6d3ae5","README.md","01a09cf0-34c2-729a-80d0-523a4f41590f",["D",1789339382932],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[146],"70b7f9ca-25ae-4893-8dc3-0d3b6e8d5732","CHANGELOG.md","01a09cf0-34c2-729a-80d0-4da036befce7",["D",1789339382932],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[152],"154d3cda-4fbe-4594-9f1a-fc3f32d797b7","frontend","01a09cf0-34c2-729a-80d0-4b01cdf4ec4a",["D",1789339382932],"directory",[158],"pulls","branches","forks","envVars",{"_170":137,"_172":62},"connections",{"_170":62,"_171":62},"count","unfilledCount","emptyCount",{"_42":157,"_31":158,"_29":159,"_136":-5,"_40":41,"_39":137,"_138":58,"_37":248,"_13":62,"_33":161,"_35":-5,"_23":24,"_142":-5,"_186":249,"_26":250},{"_42":244,"_31":236,"_29":231,"_136":159,"_40":41,"_39":137,"_138":58,"_37":245,"_13":62,"_33":161,"_35":-5,"_23":24,"_142":-5,"_186":246,"_26":247},{"_42":237,"_31":238,"_29":239,"_136":231,"_40":41,"_39":137,"_138":58,"_37":240,"_13":62,"_33":34,"_35":241,"_23":24,"_142":-5,"_186":242,"_26":243},{"_42":228,"_31":229,"_29":230,"_136":231,"_40":41,"_39":137,"_138":58,"_37":232,"_13":62,"_33":34,"_35":233,"_23":24,"_142":-5,"_186":234,"_26":235},{"_42":224,"_31":32,"_29":30,"_136":159,"_40":41,"_39":14,"_138":58,"_37":225,"_13":62,"_33":34,"_35":36,"_23":24,"_142":-5,"_186":226,"_26":227},{"_42":216,"_31":217,"_29":218,"_136":159,"_40":41,"_39":219,"_138":24,"_37":220,"_13":62,"_33":34,"_35":221,"_23":24,"_142":-5,"_186":222,"_26":223},{"_42":209,"_31":210,"_29":211,"_136":159,"_40":41,"_39":137,"_138":24,"_37":212,"_13":62,"_33":20,"_35":213,"_23":24,"_142":-5,"_186":214,"_26":215},{"_42":202,"_31":203,"_29":204,"_136":159,"_40":41,"_39":137,"_138":24,"_37":205,"_13":62,"_33":34,"_35":206,"_23":24,"_142":-5,"_186":207,"_26":208},{"_42":195,"_31":196,"_29":197,"_136":159,"_40":41,"_39":137,"_138":24,"_37":198,"_13":62,"_33":34,"_35":199,"_23":24,"_142":-5,"_186":200,"_26":201},{"_42":151,"_31":152,"_29":153,"_136":-5,"_40":41,"_39":137,"_138":58,"_37":192,"_13":62,"_33":20,"_35":155,"_23":24,"_142":-5,"_186":193,"_26":194},{"_42":145,"_31":146,"_29":147,"_136":-5,"_40":41,"_39":137,"_138":24,"_37":189,"_13":62,"_33":20,"_35":149,"_23":24,"_142":-5,"_186":190,"_26":191},{"_42":134,"_31":135,"_29":56,"_136":-5,"_40":41,"_39":137,"_138":24,"_37":185,"_13":62,"_33":140,"_35":141,"_23":24,"_142":143,"_186":187,"_26":188},["D",1789339382932],"children",[],[135],["D",1789339382932],[],[146],["D",1789339382932],[],[152],"ec878c5c-e1f3-4cf0-b79a-0869f8b749a5","root.tsx","01a09cf0-34c2-729a-80d0-468b7f8659af",["D",1789339382932],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[158,196],"be7ba080-15b4-4af1-b4ed-301f12b762cd","index.tsx","01a09cf0-34c2-729a-80d0-43f5040df4b7",["D",1789339382932],"/** @jsxImportSource 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 = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[158,203],"b5b655a0-301d-4930-a79a-8554bba089c3","favicon.svg","01a09cf0-34c2-729a-80d0-3e7bf856b6c9",["D",1789339382932],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[158,210],"1de6cecd-81b0-4e54-b9b3-58b26663adc0","MapPanel.tsx","81afe8de-afc8-11f1-bc92-1607ee4eb77e",2,["D",1789341112646],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from 'https://esm.sh/react@18.2.0';\n\nconst color = c => ({Eat:'#b56845',Drink:'#806383',Explore:'#467660',Escape:'#427783',Shop:'#9b7c45',Essentials:'#777b69'}[c] || '#23483f');\nexport function MapPanel({ items, selected, onSelect }) {\n  const node = useRef(null), map = useRef(null), layer = useRef(null), current = useRef({items,onSelect});\n  const refresh = useRef(null), fit = useRef(null);\n  const [error,setError] = useState(false), [ready,setReady] = useState(false);\n  current.current = { items, onSelect };\n  useEffect(() => {\n    const element = node.current;\n    let frame = 0, disposed = false;\n    const init = () => {\n      if(disposed || element.clientHeight < 100 || element.clientWidth < 100) return;\n      if(map.current) { map.current.invalidateSize({pan:false}); fit.current?.(); return; }\n      const L = window.L;\n      if(!L) { setError(true); return; }\n      map.current = L.map(element, {zoomControl:false,scrollWheelZoom:false,zoomSnap:0.25}).setView([1.29,103.85],13);\n      L.control.zoom({position:'bottomright'}).addTo(map.current);\n      map.current.getPane('tilePane').classList.add('grayscale','opacity-70');\n      const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom:19,attribution:'© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>'}).addTo(map.current);\n      let failures=0;\n      tiles.on('tileerror',()=>{if(++failures>=3)setError(true);});\n      tiles.on('tileload',()=>{failures=0;setError(false);});\n      layer.current = L.layerGroup().addTo(map.current);\n      fit.current = () => {\n        const points=current.current.items.filter(p=>Number.isFinite(p.lat)&&Number.isFinite(p.lng));\n        if(points.length) map.current.fitBounds(L.latLngBounds(points.map(p=>[p.lat,p.lng])),{padding:[40,64],maxZoom:15,animate:false});\n        else map.current.setView([1.29,103.85],13);\n      };\n      refresh.current = () => {\n        layer.current.clearLayers();\n        const groups=new Map();\n        for(const p of current.current.items) {if(Number.isFinite(p.lat)&&Number.isFinite(p.lng)){const key=p.lat+','+p.lng;if(!groups.has(key))groups.set(key,[]);groups.get(key).push(p);}}\n        for(const group of groups.values()) {\n          const p=group[0];\n          const icon=L.divIcon({className:'guide-pin',iconSize:[36,44],iconAnchor:[18,40],html:`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 44\" width=\"36\" height=\"44\"><path d=\"M18 41C14 34 3 27 3 18a15 15 0 0 1 30 0c0 9-11 16-15 23Z\" fill=\"${color(p.category)}\" stroke=\"#fffdf6\" stroke-width=\"2.5\"/><circle cx=\"18\" cy=\"18\" r=\"4\" fill=\"#fffdf6\"/></svg>`});\n          const marker=L.marker([p.lat,p.lng],{icon,title:p.name,alt:p.name,keyboard:true}).addTo(layer.current);\n          const label=group.map(p=>p.name).join(' · ');\n          marker.getElement()?.setAttribute('aria-label',label);\n          const tooltip=document.createElement('span');tooltip.textContent=label;\n          marker.bindTooltip(tooltip,{direction:'top',offset:[0,-35]});\n          if(group.length===1)marker.on('click',()=>current.current.onSelect(p));\n          else {const panel=document.createElement('div');const title=document.createElement('p');title.textContent='At this location';panel.appendChild(title);for(const item of group){const button=document.createElement('button');button.textContent=item.name;button.className='block rounded-lg p-2 text-left text-sm underline';button.addEventListener('click',()=>current.current.onSelect(item));panel.appendChild(button);}marker.bindPopup(panel);}\n        }\n        fit.current();\n      };\n      refresh.current();setReady(true);\n    };\n    // Wait for real layout: Leaflet otherwise writes position:relative onto an\n    // initially unstyled absolute element, collapsing its height permanently.\n    const observer=new ResizeObserver(()=>{cancelAnimationFrame(frame);frame=requestAnimationFrame(init);});\n    observer.observe(element);frame=requestAnimationFrame(init);\n    return ()=>{disposed=true;cancelAnimationFrame(frame);observer.disconnect();map.current?.remove();map.current=null;layer.current=null;refresh.current=null;fit.current=null;};\n  },[]);\n  useEffect(()=>{refresh.current?.();},[items.map(p=>p.id+':'+p.lat+':'+p.lng).join('|')]);\n  return <div className=\"relative h-[360px] sm:h-[440px] lg:h-[675px] overflow-hidden rounded-2xl border border-[#d6dccd] bg-[#e5e9d9]\">\n    <div ref={node} className=\"relative z-0 h-full w-full bg-[#e2e7da]\" aria-label=\"Interactive map of the recommendations\"/>\n    <div className=\"pointer-events-none absolute left-4 top-4 z-[400] rounded-xl border border-[#d8ded1] bg-[#fffdf6] px-4 py-3 shadow-sm\"><p className=\"text-xs font-medium\">Your Singapore, mapped</p><p className=\"mt-1 text-[10px] text-[#7c8273]\">Select a pin to read the recommendation</p></div>\n    <button onClick={()=>{map.current?.invalidateSize({pan:false});fit.current?.();}} className=\"absolute right-3 top-[88px] z-[400] rounded-full border border-[#d8ded1] bg-[#fffdf6] px-3 py-2 text-[11px] shadow-sm\" aria-label=\"Show all map pins\">Show all pins</button>\n    {(!ready||error)&&<div role=\"status\" className=\"absolute left-5 right-5 top-36 z-[400] rounded-xl bg-[#fffdf6] p-4 text-sm\">{error?'Map imagery couldn’t load. You can still browse places and use their “Find on Maps” links.':'Opening your map…'}</div>}\n    <div className=\"absolute bottom-7 left-3 z-[400] rounded-lg border border-[#d8ded1] bg-[#fffdf6] px-3 py-2\"><div className=\"flex flex-wrap gap-2 text-[10px] text-[#626e5f]\">{[...new Set(items.filter(p=>p.lat!==null).map(p=>p.category))].map(c=><span className=\"flex items-center gap-1\" key={c}><svg width=\"7\" height=\"7\" aria-hidden=\"true\"><circle cx=\"3.5\" cy=\"3.5\" r=\"3.5\" fill={color(c)}/></svg>{c}</span>)}</div><p className=\"mt-1 text-[9px] text-[#7e8476]\">{items.filter(p=>Number.isFinite(p.lat)).length} places mapped · select a pin for details</p></div>\n  </div>;\n}\n\r\n",[],[158,217],"7d42bfc2-bc1a-4a2c-8fb3-f8dc3ae74043",["D",1789341118025],[],[158,32],"4d701b77-0e2b-47eb-bb79-bd0fc0b66f85","Counter.tsx","01a09cf0-34c2-729a-80d0-35bcc6e728bb","01a09cf0-34c2-729a-80d0-39804dfb5eb8",["D",1789339382932],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[158,236,229],"components","2c808f47-024e-4eea-a07e-f34cdc078c62","App.tsx","01a09cf0-34c2-729a-80d0-30e65aa6bbb2",["D",1789339382932],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n  return (\n    <div class=\"max-w-md mx-auto mt-12\">\n      <h1 class=\"text-3xl font-bold mb-6\">React + Hono Starter</h1>\n      <Counter />\n      <p class=\"mt-8 text-sm text-gray-500\">\n        <a href=\"/source\" class=\"underline hover:text-gray-700\">View source</a>\n      </p>\n    </div>\n  );\n}\n",[],[158,236,238],"f8ef0ca1-243a-4f38-86ea-0f917aef4eed",["D",1789339382932],[175,176],[158,236],["D",1789339382932],[174,177,178,179,180,181],[158],["D",1789339382932],["D",1789519256886],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"ctx",{"_81":-5,"_127":289,"_290":291,"_292":293,"_294":24,"_295":24,"_296":24,"_297":58,"_298":-5,"_299":-7,"_300":-7,"_301":62,"_302":24,"_303":24,"_304":-5,"_305":24,"_306":24,"_307":24,"_308":-5},"ENV",{"_260":261,"_262":263,"_264":89,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288},"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"]
</article></body></html>

Diff · v3