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","label",[157,65],"frontend","pulls","branches",1,"forks","envVars",{"_166":160,"_168":26},"connections",{"_166":26,"_167":26},"count","unfilledCount","emptyCount",{"_32":272,"_13":157,"_63":149,"_42":-5,"_34":35,"_150":160,"_151":86,"_36":273,"_38":26,"_66":269,"_153":-5,"_68":24,"_155":-5,"_189":274,"_17":275},{"_32":267,"_13":259,"_63":254,"_42":149,"_34":35,"_150":160,"_151":86,"_36":268,"_38":26,"_66":269,"_153":-5,"_68":24,"_155":-5,"_189":270,"_17":271},{"_32":260,"_13":261,"_63":262,"_42":254,"_34":35,"_150":160,"_151":86,"_36":263,"_38":26,"_66":67,"_153":264,"_68":24,"_155":-5,"_189":265,"_17":266},{"_32":251,"_13":252,"_63":253,"_42":254,"_34":35,"_150":160,"_151":86,"_36":255,"_38":26,"_66":67,"_153":256,"_68":24,"_155":-5,"_189":257,"_17":258},{"_32":148,"_13":65,"_63":64,"_42":149,"_34":35,"_150":39,"_151":86,"_36":248,"_38":26,"_66":67,"_153":154,"_68":24,"_155":-5,"_189":249,"_17":250},{"_32":240,"_13":241,"_63":242,"_42":149,"_34":35,"_150":112,"_151":86,"_36":243,"_38":244,"_66":67,"_153":245,"_68":24,"_155":-5,"_189":246,"_17":247},{"_32":232,"_13":233,"_63":234,"_42":149,"_34":35,"_150":235,"_151":86,"_36":236,"_38":26,"_66":67,"_153":237,"_68":24,"_155":-5,"_189":238,"_17":239},{"_32":224,"_13":225,"_63":226,"_42":149,"_34":35,"_150":227,"_151":86,"_36":228,"_38":160,"_66":21,"_153":229,"_68":24,"_155":-5,"_189":230,"_17":231},{"_32":215,"_13":216,"_63":217,"_42":149,"_34":35,"_150":218,"_151":86,"_36":219,"_38":220,"_66":67,"_153":221,"_68":24,"_155":-5,"_189":222,"_17":223},{"_32":207,"_13":208,"_63":209,"_42":149,"_34":35,"_150":210,"_151":86,"_36":211,"_38":160,"_66":67,"_153":212,"_68":24,"_155":-5,"_189":213,"_17":214},{"_32":200,"_13":201,"_63":202,"_42":-5,"_34":35,"_150":160,"_151":86,"_36":203,"_38":26,"_66":21,"_153":204,"_68":24,"_155":-5,"_189":205,"_17":206},{"_32":192,"_13":193,"_63":194,"_42":-5,"_34":35,"_150":195,"_151":86,"_36":196,"_38":160,"_66":21,"_153":197,"_68":24,"_155":-5,"_189":198,"_17":199},{"_32":182,"_13":183,"_63":84,"_42":-5,"_34":35,"_150":184,"_151":86,"_36":185,"_38":160,"_66":186,"_153":187,"_68":24,"_155":188,"_189":190,"_17":191},"6e97bad7-8c89-4e07-b9d3-c73ce190618f","index.ts",8,["D",1789341158715],"http","import { Hono } from 'npm:hono@4';\nimport { parseVal, serveImmutableFile } from 'https://esm.town/v/std/utils/index.ts';\nimport { sqlite } from 'https://esm.town/v/std/sqlite/main.ts';\nimport { getOAuthUserData, oauthMiddleware } from 'https://esm.town/v/std/oauth/middleware.ts';\nimport { Root } from './frontend/root.tsx';\n\nconst OWNER = '09d0017f-b431-4bfe-98be-204d22547721';\nconst app = new Hono();\napp.use('*',async(c,next)=>{c.header('X-Robots-Tag','noindex, nofollow, noarchive, nosnippet');c.header('X-Content-Type-Options','nosniff');c.header('Referrer-Policy','strict-origin-when-cross-origin');await next();});\napp.get('/',c=>{c.header('Cache-Control','no-store');return c.html(Root());});\napp.get('/robots.txt',c=>c.text('User-agent: *\\nDisallow: /\\n'));\napp.get('/__immutable/*',c=>serveImmutableFile(c.req.path));\napp.get('/source',c=>c.redirect(parseVal().links.self.val));\napp.use('/api/*',async(c,next)=>{\n c.header('Cache-Control','private, no-store');\n if(!['GET','HEAD'].includes(c.req.method)){\n  if(c.req.header('origin')!==new URL(c.req.url).origin || c.req.header('sec-fetch-site')==='cross-site')return c.json({error:'Please make this change from the guide itself.'},403);\n  if(!c.req.header('content-type')?.startsWith('application/json'))return c.json({error:'Expected JSON.'},415);\n }\n const session=await getOAuthUserData(c.req.raw);\n c.set('viewer',session?.user ? {id:session.user.id,name:session.user.username||'Visitor',isOwner:session.user.id===OWNER}:null);\n if(c.req.method!=='GET'&&!c.get('viewer'))return c.json({error:'Sign in to save or comment.'},401);\n await next();\n});\napp.get('/api/bootstrap',async c=>{\n const viewer=c.get('viewer');\n const [ppl,loc,comments]=await Promise.all([\n  sqlite.execute('SELECT body FROM people ORDER BY rowid'),\n  sqlite.execute('SELECT body FROM places ORDER BY rowid'),\n  sqlite.execute('SELECT id,place_id,user_id,author,text,created_at FROM comments WHERE deleted=0 ORDER BY created_at DESC LIMIT 1000')\n ]);\n const people=ppl.rows.map(r=>{const p=JSON.parse(String(r.body));if(!viewer?.isOwner)delete p.email;return p;});\n const places=loc.rows.map(r=>JSON.parse(String(r.body)));\n const statuses={},notes={},shared={};\n for(const r of comments.rows){(shared[String(r.place_id)]||=[]).push({id:r.id,author:r.author,text:r.text,date:r.created_at,canRemove:viewer?.isOwner||viewer?.id===r.user_id});}\n if(viewer){\n  const [saved,privateNotes]=await Promise.all([\n   sqlite.execute({sql:'SELECT place_id,status FROM notebook WHERE user_id=?',args:[viewer.id]}),\n   sqlite.execute({sql:'SELECT id,place_id,text,created_at FROM private_notes WHERE user_id=? AND deleted=0 ORDER BY created_at',args:[viewer.id]})\n  ]);\n  for(const r of saved.rows)statuses[String(r.place_id)]=r.status;\n  for(const r of privateNotes.rows)(notes[String(r.place_id)]||=[]).push({id:r.id,text:r.text,date:r.created_at});\n }\n return c.json({people,places,statuses,notes,comments:shared,user:viewer});\n});\nasync function body(c){\n const raw=await c.req.text();if(raw.length>6000)throw new Error('That entry is too long.');\n try{return JSON.parse(raw);}catch{throw new Error('Could not read this entry.');}\n}\nconst clean=(v,max)=>{if(typeof v!=='string'||!v.trim()||v.trim().length>max)throw new Error('Please enter text within the allowed length.');return v.trim();};\nasync function placeId(v){const id=clean(v,100);const p=await sqlite.execute({sql:'SELECT id FROM places WHERE id=?',args:[id]});if(!p.rows.length)throw new Error('This place is no longer in the guide.');return id;}\napp.post('/api/status',async c=>{\n const b=await body(c),id=await placeId(b.placeId),user=c.get('viewer');\n if(b.status!==null&&!['saved','visited'].includes(b.status))return c.json({error:'Unknown notebook status.'},400);\n if(b.status===null)await sqlite.execute({sql:'DELETE FROM notebook WHERE user_id=? AND place_id=?',args:[user.id,id]});\n else await sqlite.execute({sql:'INSERT INTO notebook(user_id,place_id,status) VALUES(?,?,?) ON CONFLICT(user_id,place_id) DO UPDATE SET status=excluded.status',args:[user.id,id,b.status]});\n return c.json({ok:true});\n});\napp.post('/api/notes',async c=>{\n const b=await body(c),id=await placeId(b.placeId),text=clean(b.text,2000);\n await sqlite.execute({sql:'INSERT INTO private_notes(id,user_id,place_id,text,created_at) VALUES(?,?,?,?,?)',args:[crypto.randomUUID(),c.get('viewer').id,id,text,new Date().toISOString()]});return c.json({ok:true});\n});\napp.post('/api/notes/remove',async c=>{\n const b=await body(c);await sqlite.execute({sql:'UPDATE private_notes SET deleted=1 WHERE id=? AND user_id=?',args:[clean(b.id,100),c.get('viewer').id]});return c.json({ok:true});\n});\napp.post('/api/comments',async c=>{\n const b=await body(c),id=await placeId(b.placeId),text=clean(b.text,2000),u=c.get('viewer');\n const recent=await sqlite.execute({sql:'SELECT count(*) AS n FROM comments WHERE user_id=? AND created_at>?',args:[u.id,new Date(Date.now()-60000).toISOString()]});\n if(Number(recent.rows[0].n)>=5)return c.json({error:'Give it a moment before adding another comment.'},429);\n await sqlite.execute({sql:'INSERT INTO comments(id,place_id,user_id,author,text,created_at) VALUES(?,?,?,?,?,?)',args:[crypto.randomUUID(),id,u.id,u.name,text,new Date().toISOString()]});return c.json({ok:true});\n});\napp.post('/api/comments/remove',async c=>{\n const b=await body(c),u=c.get('viewer');await sqlite.execute({sql:u.isOwner?'UPDATE comments SET deleted=1 WHERE id=?':'UPDATE comments SET deleted=1 WHERE id=? AND user_id=?',args:u.isOwner?[clean(b.id,100)]:[clean(b.id,100),u.id]});return c.json({ok:true});\n});\napp.post('/api/places',async c=>{\n const u=c.get('viewer');if(!u.isOwner)return c.json({error:'Only Marc can add places to this guide.'},403);\n const b=await body(c),name=clean(b.name,100),text=clean(b.note,2000),category=b.category;\n if(!['Eat','Drink','Explore','Escape','Shop','Essentials'].includes(category))return c.json({error:'Choose a category.'},400);\n const item={id:crypto.randomUUID(),name,category,area:typeof b.area==='string'&&b.area.trim()?clean(b.area,80):'To explore',setting:'Singapore',cuisine:'Marc’s discovery',price:null,lat:null,lng:null,art:category==='Drink'?'cocktail':category==='Escape'?'coast':category==='Explore'?'garden':'shophouse',tags:['Marc’s discovery'],summary:text,notes:[{person:'marc',quote:text}],locationNote:'Location to confirm · use Find on Maps'};\n await sqlite.execute({sql:'INSERT INTO places(id,body) VALUES(?,?)',args:[item.id,JSON.stringify(item)]});return c.json({ok:true,id:item.id});\n});\napp.onError((err,c)=>{const known=/allowed length|entry|no longer in the guide/.test(err.message);if(!known)console.error('Guide API error',err.message);return c.json({error:known?err.message:'The change could not be saved. Please try again.'},known?400:500);});\nexport default oauthMiddleware(app.fetch);\n\r\n","marcs-singapore","children",[],[183],"6de8755a-34ec-43c6-bcd5-4ffa5bb7a443","README.md","01a09cf0-34c2-729a-80d0-523a4f41590f",10,["D",1789341639223],"# In Good Company — Marc’s Singapore\n\nLive guide: https://marcs-singapore.val.run/\n\nA personal collection of Singapore recommendations, with an interactive map, friends’ original advice, a private notebook and shared comments.\n\n## What is live\n\n- 73 entries and 82 attributed recommendations from six personal emails.\n- 30 dining entries, 9 bars, 5 outings, 11 escapes, 13 shops and 5 practical tips.\n- 44 mapped entries: 34 in Singapore and 10 regional destinations. Entries at the same building share a marker with a place chooser.\n- Search, category/person/neighbourhood filters, map/list views, and responsive place details.\n- Val Town sign-in. Private saved/visited lists and notes are scoped to each account. Comments are visible to everyone with the guide link; their author or Marc can remove them. Marc can add places.\n- Recommendation data and user content live in the project’s SQLite database. There is no email account connection or inbox access in the deployed app.\n- Only Marc’s signed-in session receives original Gmail message links. Email addresses, signatures, contact details and unrelated conversations are not published.\n\nThe guide is publicly readable and requests no search-engine indexing, matching the existing launcher’s approach. Noindex is not an access restriction.\n\n## Hosting\n\nVal Town project: marc1/in-good-company\n\nHTTP entry: index.ts. Frontend assets use Val Town’s immutable versioned URLs. The /source route opens the project source. The Sites launcher’s Singapore card now opens the live guide; its other links remain as before.\n\nThe UI uses React 18.2, Twind, and Leaflet 1.9.4. SVG illustrations are decorative original drawings rather than venue photography. The map uses OpenStreetMap tiles with visible attribution. Account sessions use Val Town’s OAuth middleware; tokens never reach the client response.\n\n## Map and content notes\n\nThe map now has a definite responsive height, waits for layout before initializing and refreshes after resizing. This fixes the original zero-height container bug. Pins follow active filters and open the corresponding recommendation.\n\nLocations are approximate building, venue, park or destination points. Chains without a selected branch, online services, and ambiguous locations are left without guessed pins. The location note on each entry explains this; directions and venue websites remain available. Prices and planning tips are attributed to the original email, not presented as live menus or opening hours.\n\nA one-time, cached OpenStreetMap location lookup was performed using an identified client at no more than one request every 1.2 seconds. Geocoding is not called by website visitors. Any future use of the public Nominatim service must follow its [usage policy](https://operations.osmfoundation.org/policies/nominatim/): identify the app, cache responses, stay within the shared request limit, and do not use it for autocomplete.\n\n## Validation\n\n- The production page and data endpoint return HTTP 200; the launcher returns 200 and contains the new guide link.\n- Browser verification: map tiles and pins render; pin selection opens the correct place; search/category filtering updates pins; mobile map height is 358px at a 390px viewport without horizontal overflow; desktop map height is 673px.\n- Production rejects unauthenticated writes (401) and cross-origin writes (403). Client console has no errors. Server logs show only a dependency deprecation warning.\n- Local integration checks exercise the actual production handlers against a temporary SQLite database: private-note and notebook isolation, note removal, comment visibility and moderation, owner-only place creation, and input limits all pass. Platform OAuth is stubbed only in this local test.\n- The live sign-in link reaches the Val Town login page. Completing a signed-in browser session requires the account holder’s login and was not performed during deployment.\n\n## Local maintenance\n\nRun the local preview with node preview-server.cjs and open http://127.0.0.1:4317/. It is read-only and uses the local content/seed.json snapshot. Production user data is never written by this preview.\n\nRun node check-source.cjs for syntax checks and node check-backend.cjs for the integration checks described above. Both run locally; the latter uses a disposable in-memory database.\n\nThe content directory is a local import snapshot with private source references; do not upload it as a public asset or commit it to a public repository. The one-time build/refinement scripts document the import work and are not the production data store. Make future content changes through the app or explicitly scoped SQLite updates; do not rerun the initial seed over newer content.\n",[],[193],"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",[],[201],"c0531813-a150-4576-9cf3-702011a8b2a6","root.tsx","01a09cf0-34c2-729a-80d0-468b7f8659af",6,["D",1789341141643],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from 'npm:hono@4/html';\nimport { immutableFileUrl } from 'https://esm.town/v/std/utils/index.ts';\nexport function Root(){return <>{raw('<!DOCTYPE html>')}<html lang=\"en\"><head>\n <meta charSet=\"UTF-8\"/><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\n <meta name=\"robots\" content=\"noindex, nofollow, noarchive, nosnippet\"/>\n <meta name=\"description\" content=\"Good tables, little detours and places worth sharing. Marc’s Singapore guide, from people he trusts.\"/>\n <title>In Good Company — Marc’s Singapore</title>\n <script src=\"https://cdn.twind.style\" crossOrigin=\"\"/>\n <link rel=\"icon\" href={immutableFileUrl('/frontend/favicon.svg')} type=\"image/svg+xml\"/>\n <link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=\" crossOrigin=\"\"/>\n <script src=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=\" crossOrigin=\"\"/>\n </head><body className=\"m-0 bg-[#f8f6f0] font-sans text-[#253f36] antialiased selection:bg-[#d9e2c7]\">\n <div id=\"root\"><p className=\"p-10 text-center font-serif text-2xl\">Opening the little book…</p></div>\n <noscript>This guide needs JavaScript to show the places and interactive map.</noscript>\n <script src=\"https://esm.town/v/std/catch\"/>\n <script src={immutableFileUrl('/frontend/index.tsx')} type=\"module\"/>\n </body></html></>;}\n\r\n",[],[157,208],"b41317d6-54ed-463d-8837-a15ff6441d7c","index.tsx","01a09cf0-34c2-729a-80d0-43f5040df4b7",26,["D",1789342840325],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, useMemo } from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0';\nimport { categories } from './data.ts';\nimport { CommunityComments } from './CommunityComments.tsx';\nlet people = [];\nimport { MapPanel, mapLocations } from './MapPanel.tsx';\n\nconst cx = (...names) => names.filter(Boolean).join(' ');\nconst button = 'inline-flex items-center justify-center gap-2 rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#a65f3f]';\nconst primary = button + ' bg-[#23483f] text-[#fffdf7] px-5 py-3 text-sm hover:bg-[#315d50]';\nconst secondary = button + ' border border-[#d7dace] bg-[#fffdf7] px-4 py-2.5 text-sm hover:bg-[#eeefe4]';\nconst field = 'w-full border border-[#d8dacd] rounded-xl bg-[#fffdf8] px-4 py-3 text-sm text-[#253f36] focus:outline-none focus:ring-2 focus:ring-[#759686]';\nconst personById = (id) => people.find(p => p.id === id) || { id: 'marc', name: 'Marc', initials: 'M', color: 'bg-[#d6e2d5]' };\nconst gm = (p, location = p) => 'https://www.google.com/maps/search/?api=1&query=' + encodeURIComponent(p.name + ' ' + (location.address || (p.category === 'Escape' ? p.setting : p.setting + ' Singapore')));\nconst mapLabel = p => !mapLocations(p).length ? 'No map pin' : p.locationStatus === 'check' ? 'On map · check address' : p.locationStatus === 'inferred' ? 'On map · likely match' : p.locationStatus === 'example' ? (mapLocations(p).length > 1 ? 'Example branches on map' : 'Example branch on map') : mapLocations(p).length > 1 ? mapLocations(p).length + ' branches on map' : 'On map';\nconst categoryColor = (name) => ({ Eat: '#b56845', Drink: '#806383', Explore: '#467660', Escape: '#427783' }[name] || '#23483f');\n\nfunction Icon({ name, size = 18, className = '' }) {\n  const paths = {\n    search: <><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 5 5\"/></>,\n    compass: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m16 8-2.5 5.5L8 16l2.5-5.5Z\"/></>,\n    eat: <><path d=\"M5 3v7m3-7v7m-6-7v7c0 2 6 2 6 0M5 12v9M18 3c-4 3-4 9 0 9h2V3Zm2 9v9\"/></>,\n    drink: <><path d=\"m3 4 9 10 9-10H3Zm9 10v7m-5 0h10M8 8h8\"/></>,\n    explore: <><path d=\"M19 3C7 3 3 9 6 15c5 6 14-1 13-12ZM4 21 15 9M9 15v-5m0 5h5\"/></>,\n    escape: <><path d=\"M3 17c3-2 4 2 7 0s4 2 7 0 4 2 5 0M4 21c3-2 4 2 7 0s4 2 7 0M12 15V7m0 0C9 2 5 4 4 7c4-2 6 0 8 0Zm0 0c3-5 7-3 8 0-4-2-6 0-8 0Z\"/></>,\n    bookmark: <path d=\"M6 3h12v18l-6-4-6 4Z\"/>,\n    check: <path d=\"m5 12 4 4L20 5\"/>,\n    arrow: <path d=\"M4 12h16m-6-6 6 6-6 6\"/>,\n    diagonal: <path d=\"M6 18 18 6M6 6h12v12\"/>,\n    map: <><path d=\"m3 5 6-2 6 2 6-2v16l-6 2-6-2-6 2V5Zm6-2v16m6-14v16\"/></>,\n    pin: <><path d=\"M19 10c0 5-7 11-7 11S5 15 5 10a7 7 0 1 1 14 0Z\"/><circle cx=\"12\" cy=\"10\" r=\"2\"/></>,\n    list: <><path d=\"M9 5h12M9 12h12M9 19h12M3 5h.01M3 12h.01M3 19h.01\"/></>,\n    note: <><path d=\"M20 13v7H4V4h8m-3 11 1-4L19 2l3 3-9 9Z\"/></>,\n    close: <path d=\"m5 5 14 14M19 5 5 19\"/>,\n    plus: <path d=\"M12 5v14M5 12h14\"/>,\n    people: <><circle cx=\"9\" cy=\"7\" r=\"3\"/><path d=\"M2 21v-3c0-7 14-7 14 0v3m0-17c6 0 6 7 0 7m3 3c3 1 3 4 3 7\"/></>,\n    mail: <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 6 9 7 9-7\"/></>,\n    globe: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9\"/><path d=\"M3 12h18\"/></>,\n    heart: <path d=\"M12 21 3 12C-2 5 7 0 12 7c5-7 14-2 9 5Z\"/>,\n  };\n  return <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={cx('shrink-0', className)} aria-hidden=\"true\">{paths[name] || paths.compass}</svg>;\n}\n\nfunction Rosette({ small = false }) {\n  return <svg width={small ? 24 : 40} height={small ? 24 : 40} viewBox=\"0 0 64 64\" aria-hidden=\"true\"><path d=\"M32 3 38 23 56 12 45 30 63 36 43 40 52 58 34 47 26 63 24 43 5 51 17 34 1 25 22 24 14 6 30 18Z\" fill=\"currentColor\"/><circle cx=\"32\" cy=\"32\" r=\"5\" fill=\"#f8f6f0\"/></svg>;\n}\n\nfunction Avatar({ id, small = false }) {\n  const p = personById(id);\n  return <span title={p.name} className={cx('inline-flex shrink-0 items-center justify-center rounded-full border-2 border-[#fffdf8] font-medium text-[#34473d]', small ? 'h-7 w-7 text-[9px]' : 'h-10 w-10 text-[11px]', p.color)}>{p.initials}</span>;\n}\n\nfunction PeopleStack({ notes, showNames = true }) {\n  return <div className=\"flex items-center gap-2.5\"><div className=\"flex -space-x-2\">{notes.map(n => <Avatar id={n.person} small key={n.person}/>)}</div>{showNames && <span className=\"text-xs text-[#6d756b]\">From <span className=\"text-[#34473d]\">{notes.map(n => personById(n.person).name).join(' & ')}</span></span>}</div>;\n}\n\n// Original, code-native illustrations: atmosphere, not photographs of the venues.\nfunction Illustration({ kind = 'city', className = '' }) {\n  return <svg viewBox={kind === 'city' ? '0 0 620 290' : '0 0 360 210'} className={className} role=\"img\" aria-label={kind === 'city' ? 'An illustrated Singapore, with shophouses, palms and gardens' : 'Decorative ' + kind + ' illustration'}>\n    {kind === 'city' ? <>\n      <circle cx=\"410\" cy=\"111\" r=\"88\" fill=\"#e8dfbd\" opacity=\".65\"/><path d=\"M6 254c90-62 201-35 282-5s216 14 324-20\" fill=\"none\" stroke=\"#c2cec0\" strokeWidth=\"2\"/>\n      <g fill=\"none\" stroke=\"#799083\" strokeWidth=\"1.5\"><path d=\"M354 204v-78h20v78m-13-78v-21h5v21m19 79V98h35v107m-27-98v87m11-87v87m-48-75h14m34-9h9M432 204v-62h32v62m-22-54v46m13-46v46\"/>\n      <path d=\"M342 208h180M470 208v-62h8v62m6 0v-62h8v62m6 0v-62h8v62m-47-65c19 10 40 10 59-2l-6 8h-49Z\" fill=\"#eef0e3\"/>\n      <path d=\"M527 209c0-61 11-82 36-85 18 8 31 47 33 85Zm5 0c1-43 12-72 31-85m-18 85c-1-52 4-69 18-85m-3 85c7-40 8-61 3-85m14 85c4-50-3-70-14-85m-34 68h62m-59-15h55m-51-15h47\"/></g>\n      <g transform=\"translate(44 66)\"><path d=\"M0 176V66l24-19 21 19v110m0 0V47l25-20 24 20v129m0 0V66l24-19 23 19v110\" fill=\"#e2c5a8\" stroke=\"#436353\" strokeWidth=\"1.5\"/>\n      <path d=\"M-6 66h56M39 47h61M88 66h59M0 124h141M45 103h49\" stroke=\"#436353\" strokeWidth=\"2\"/>\n      {[11,29,56,76,105,122].map((x,i)=><g key={x}><path d={`M${x} 91v-14q6-8 11 0v14ZM${x} 117v-17h11v17Z`} fill=\"#f6eddb\" stroke=\"#6f8170\"/>\n      <path d={`M${x+5} 78v12m-3-8h6m-6 22h6m-6 4h6m-6 4h6`} stroke=\"#7d9981\"/></g>)}\n      <path d=\"M12 176v-36q11-17 22 0v36m20 0v-49h32v49m20 0v-36q11-17 23 0v36\" fill=\"#567b65\" stroke=\"#436353\"/>\n      <path d=\"M45 58h49m-49 65h49m-36-65v36h22V58\" stroke=\"#436353\" fill=\"#f6eddb\"/><path d=\"M66 64v24m8-24v24\" stroke=\"#658b73\"/>\n      <path d=\"M-5 134h47m54 0h47\" stroke=\"#436353\" strokeWidth=\"4\"/></g>\n      <g stroke=\"#466652\" fill=\"#768f68\" strokeWidth=\"1.6\"><path d=\"M260 242c-2-51 1-83 7-135m1 2c-14-40-45-23-48-11 20-7 33 1 48 11Zm0 0c13-43 45-30 51-20-24-5-32 9-51 20Zm0 0c-9-24-36-5-37 14 13-14 20-10 37-14Zm0 0c27-19 44 2 45 18-13-16-30-12-45-18Z\"/>\n      <path d=\"M260 246h16m-35 0h-22m26-7c-5-32-22-42-36-28 19 6 17 18 36 28Zm-7 4c-13-15-23-6-23 0m32 0c0-20 15-35 26-22-17 4-12 17-26 22Z\"/></g>\n      <path d=\"M291 219c20-10 26-10 47 0m-38-13c12-6 22-6 34 0\" stroke=\"#a5b6a1\" fill=\"none\"/>\n      <path d=\"m198 34 8-4 8 4m9-10 7-3 7 3\" fill=\"none\" stroke=\"#718772\"/><text x=\"469\" y=\"265\" fill=\"#7d8c7a\" fontSize=\"10\" letterSpacing=\"3\">1° N · 103° E</text>\n    </> : <>\n      <rect width=\"360\" height=\"210\" fill={kind === 'cocktail' ? '#e4dce3' : kind === 'coast' ? '#dde7df' : kind === 'garden' ? '#dfe5ca' : '#ebdfce'}/>\n      <circle cx=\"274\" cy=\"51\" r=\"34\" fill=\"#f7f1dd\" opacity=\".8\"/>\n      {kind === 'shophouse' && <g stroke=\"#5d745c\" strokeWidth=\"1.3\"><path d=\"M65 180V56l38-21 34 21v124m0 0V72l40-22 38 22v108m0 0V51l40-22 35 22v129\" fill=\"#cea88b\"/>\n      <path d=\"M60 57h82m-8 16h85m-7-21h82M65 117h72m0 17h78m0-17h75\" fill=\"none\"/>\n      {[79,109,152,182,230,258].map((x,i)=><g key={x}><path d={`M${x} 98v-20q8-12 16 0v20Z`} fill=\"#f6ecd9\"/><path d={`M${x+8} 80v16m-5-12h10m-10 5h10m-10 4h10`} stroke=\"#7a8f72\"/></g>)}\n      <path d=\"M83 180v-41q15-19 30 0v41m41 0v-31h43v31m36 0v-42q17-23 33 0v42\" fill=\"#65836a\"/><path d=\"M37 181h286\"/>\n      <path d=\"M39 180v-43m0 12c-30-26-6-40 0-10 2-34 30-21 0 10\" fill=\"#67856b\"/></g>}\n      {kind === 'table' && <g stroke=\"#6d7b60\" strokeWidth=\"1.5\" fill=\"none\"><ellipse cx=\"184\" cy=\"132\" rx=\"116\" ry=\"41\" fill=\"#f5eddb\"/><ellipse cx=\"184\" cy=\"132\" rx=\"51\" ry=\"23\"/><ellipse cx=\"184\" cy=\"132\" rx=\"42\" ry=\"17\"/><path d=\"M112 113v37m-5-40v13q5 6 10 0v-13m132 0v43m0-43c-12 8-9 24 0 22M115 167l-9 26m148-26 10 26M93 99V67m-11-22h22l-3 24q-8 11-14 0Zm-8 54h22m162 6V77m-10-18h20l-3 18q-7 8-14 0Zm-6 46h20\"/>\n      <path d=\"M176 130c1-19 18-22 22-7-6 16-17 10-22 7Z\" fill=\"#b3895d\"/><path d=\"m173 126 8-14m10 20 8-10m-16 17 6-9\"/>\n      <path d=\"M192 91V52m0 3c-20-3-17-17-1-7 3-23 19-13 1 7m-4 9c-25-1-12-20 3-8m2 17c24-5 21-19 0-8\"/><path d=\"M180 80h23l-4 23h-14Z\" fill=\"#bfcdab\"/></g>}\n      {kind === 'cocktail' && <g stroke=\"#725c70\" strokeWidth=\"1.7\" fill=\"none\"><path d=\"m120 77 65 61 64-61Zm65 61v46m-34 0h67M137 91h95\" fill=\"#f5eddf\"/><path d=\"m144 97 41 38 41-38Z\" fill=\"#c29b87\"/><path d=\"m183 112 40-64m-45 53 9 5\"/><circle cx=\"217\" cy=\"59\" r=\"16\" fill=\"#bbc6a5\"/><circle cx=\"217\" cy=\"59\" r=\"11\"/><path d=\"M58 167h67m118 0h63M68 156l3-9m215-57 6-8m2 26 8-3M76 58l2 10m-7-5h11\"/></g>}\n      {kind === 'garden' && <g stroke=\"#65795b\" strokeWidth=\"1.3\" fill=\"none\"><path d=\"M40 181c3-97 63-155 115-131 30 17 63 72 64 131Zm10 0c7-83 61-136 105-131m-75 131c10-112 45-131 75-131m-37 131c17-86 36-117 37-131m3 131c19-72 12-113-3-131m36 131c5-69-15-120-36-131M54 144h154M75 104h111M94 75h70\" fill=\"#eff0dd\"/>\n      <path d=\"M272 181v-68m-30-31 10 28 40 0 11-28m-61 0c12 11 43 13 61 0m-65-6c15 12 52 13 70 0m-70 0 7-6h55l8 6M255 85l14 25m21-25-15 25\"/><path d=\"M245 182c0-19-17-20-17-10m55 10c4-25 20-23 20-9M34 183h289\"/></g>}\n      {kind === 'coast' && <g stroke=\"#618675\" strokeWidth=\"1.5\" fill=\"none\"><path d=\"M0 157c80-17 157-18 215-11 74 9 110 28 145 26M0 186c88-21 183-19 271-1m-62-75h100m-85-8h34\"/>\n      <path d=\"M132 158c4-35 1-63-3-91m0 0c-24-24-49-9-47 1 19-8 31-3 47-1Zm0 0c13-33 47-29 50-17-21-5-32 12-50 17Zm0 0c-12-39-40-37-42-25 20-4 28 16 42 25Zm0 0c24-6 45 3 43 20-13-12-25-12-43-20Z\" fill=\"#8aab8c\"/>\n      <path d=\"M44 174c19-9 56-11 81-7m144-23 24-30 29 30Zm10 0v18h34v-18m-34 18h34\" fill=\"#d5c6a5\"/><path d=\"m279 81 7-4 8 4m10-8 7-4 8 4\"/></g>}\n    </>}\n  </svg>;\n}\n\nfunction PlaceCard({ place, selected, status, onSelect, onSave }) {\n  return <article className={cx('group relative min-w-0 rounded-2xl border transition-all', selected ? 'border-[#7b9a85] bg-[#f0f2e6]' : 'border-[#e0e1d5] bg-[#fffdf8] hover:border-[#9aaf9c]')}>\n    <div className=\"flex gap-4 p-4 sm:p-5\">\n      <button onClick={() => onSelect(place)} className=\"shrink-0 self-start w-[86px] sm:w-[106px] overflow-hidden rounded-xl focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#a65f3f]\" aria-label={'View ' + place.name}><Illustration kind={place.art} className=\"h-[108px] w-full object-cover\"/></button>\n      <div className=\"min-w-0 flex-1 pr-5\"><div className=\"mb-2 flex items-center gap-2 text-[10px] uppercase tracking-[.15em] text-[#767d6e]\"><span className=\"font-semibold text-[#a76a49]\">{place.category}</span><span>·</span><span>{place.area}</span></div>\n        <button onClick={() => onSelect(place)} className=\"text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#a65f3f]\"><h3 className=\"font-serif text-[24px] leading-[1.15] tracking-[-.02em] group-hover:text-[#a05f3e]\">{place.name}</h3></button>\n        <p className=\"mt-2 text-xs text-[#6d756b]\">{place.cuisine}{place.price && <span> · {place.price}</span>}</p>\n        <div className=\"mt-3\"><PeopleStack notes={place.notes}/></div><p className=\"mt-2 flex items-center gap-1 text-[9px] text-[#7c8273]\"><Icon name=\"map\" size={11}/>{mapLabel(place)}</p>\n      </div>\n      <button onClick={() => onSave(place.id)} className={cx(button, 'absolute right-3 top-3 h-8 w-8', status ? 'bg-[#dce6d6] text-[#355f49]' : 'text-[#7d8775] hover:bg-[#f0f1e6]')} aria-label={(status ? 'Unsave ' : 'Save ') + place.name} aria-pressed={!!status}><Icon name={status === 'visited' ? 'check' : 'bookmark'} size={16}/></button>\n    </div>\n    <button onClick={() => onSelect(place)} className=\"flex w-full items-center justify-between gap-3 border-t border-[#e5e5d9] px-5 py-3 text-left text-xs text-[#646e60] hover:text-[#23483f]\"><span className=\"overflow-hidden text-ellipsis whitespace-nowrap font-serif italic text-[14px]\">“{place.notes[0].quote}”</span><Icon name=\"arrow\" size={16}/></button>\n  </article>;\n}\n\n\nfunction Dialog({ children, onClose, label, wide = false }) {\n  const ref = useRef(null);\n  useEffect(() => {\n    const dialog = ref.current, before = document.activeElement;\n    dialog.showModal(); const overflow = document.body.style.overflow; document.body.style.overflow = 'hidden';\n    return () => { dialog.close(); document.body.style.overflow = overflow; if (before instanceof HTMLElement) before.focus(); };\n  }, []);\n  return <dialog ref={ref} aria-label={label} onCancel={e => { e.preventDefault(); onClose(); }} onClick={e => { if(e.target === ref.current) onClose(); }} className={cx('fixed m-auto w-[calc(100%_-_24px)] max-h-[90vh] overflow-y-auto rounded-[24px] border border-[#d8ddce] bg-[#faf8f1] p-0 text-[#253f36] shadow-2xl backdrop:bg-[#173c32]/40', wide ? 'max-w-[850px]' : 'max-w-[540px]')}>\n    <button autoFocus onClick={onClose} aria-label=\"Close details\" className={cx(button, 'absolute right-4 top-4 z-20 h-9 w-9 bg-[#fffdf8] shadow-sm hover:bg-[#eceede]')}><Icon name=\"close\"/></button>{children}\n  </dialog>;\n}\n\nfunction PlaceDetail({ place, status, ownNotes, onStatus, onAddNote, onRemoveNote, onClose, user, comments, onComment, onRemoveComment }) {\n  const [draft, setDraft] = useState(''), [busy, setBusy] = useState(false);\n  return <Dialog label={place.name + ' details'} onClose={onClose} wide>\n    <div className=\"grid md:grid-cols-[290px_1fr]\">\n      <aside className=\"border-b md:border-b-0 md:border-r border-[#e1e3d6] bg-[#f0eee3] p-6\">\n        <Illustration kind={place.art} className=\"h-[220px] w-full rounded-xl\"/>\n        <div className=\"mt-6 flex items-center gap-2 text-[10px] uppercase tracking-[.18em]\"><Icon name={place.category.toLowerCase()} size={15}/>{place.category} · {place.area}</div>\n        <h2 className=\"mt-3 font-serif text-[38px] leading-[1.05] tracking-[-.03em]\">{place.name}</h2>\n        <p className=\"mt-3 text-xs text-[#79806e]\">{place.cuisine}</p>\n        <p className=\"mt-5 text-sm leading-relaxed text-[#5d6b5b]\">{place.summary}</p>\n        <div className=\"mt-4 flex flex-wrap gap-2\">{place.tags.map(t => <span key={t} className=\"rounded-full border border-[#d7dacb] px-2.5 py-1 text-[10px]\">{t}</span>)}</div>\n        {place.price && <p className=\"mt-5 text-sm\">{place.price}<span className=\"mt-1 block text-[10px] text-[#7d8273]\">As mentioned in the original email</span></p>}\n        <div className=\"mt-6 grid gap-2\"><button className={status === 'saved' ? primary : secondary} onClick={() => onStatus(place.id, status === 'saved' ? null : 'saved')} aria-pressed={status === 'saved'}><Icon name=\"bookmark\" size={16}/>{status === 'saved' ? 'On my list' : 'Want to go'}</button><button className={status === 'visited' ? primary : secondary} onClick={() => onStatus(place.id, status === 'visited' ? null : 'visited')} aria-pressed={status === 'visited'}><Icon name=\"check\" size={16}/>Been there</button></div>\n        {place.address && !place.locations?.length && <p className=\"mt-5 text-xs leading-relaxed\">{place.address}</p>}\n        {place.locations?.length > 0 && <div className=\"mt-5 space-y-3\">{place.locations.map(location=><a key={location.label} href={gm(place,location)} target=\"_blank\" rel=\"noreferrer\" className=\"block text-xs leading-relaxed\"><span className=\"font-medium underline underline-offset-4\">{location.label}</span><span className=\"mt-1 block text-[#7d8273]\">{location.address}</span></a>)}</div>}\n        <p className=\"mt-4 text-[10px] leading-relaxed text-[#7d8273]\">{place.locationNote}</p>{place.locationSource && <a className=\"mt-2 inline-block text-[10px] underline underline-offset-4\" href={place.locationSource} target=\"_blank\" rel=\"noreferrer\">Address source · checked {place.locationCheckedAt}</a>}<div className=\"mt-5 flex flex-wrap gap-4\">{place.area!=='Online' && <a href={gm(place)} target=\"_blank\" rel=\"noreferrer\" className=\"flex items-center gap-1.5 text-xs underline underline-offset-4\"><Icon name=\"map\" size={14}/>Find on Maps</a>}{place.website && <a href={place.website} target=\"_blank\" rel=\"noreferrer\" className=\"flex items-center gap-1.5 text-xs underline underline-offset-4\"><Icon name=\"diagonal\" size={14}/>Website</a>}</div>\n      </aside>\n      <section className=\"p-6 pt-12 sm:p-8 sm:pt-12\">\n        <p className=\"text-[10px] tracking-[.18em] text-[#9b694b] uppercase\">The word of mouth</p><h3 className=\"mt-2 font-serif text-3xl\">Why it’s in the book.</h3>\n        <div className=\"mt-7 space-y-7\">{place.notes.map((note, i) => { const p = personById(note.person); return <div key={i}>\n          <div className=\"flex items-center gap-3\"><Avatar id={p.id}/><div><p className=\"text-sm font-medium\">{p.name}</p><p className=\"mt-0.5 text-[10px] text-[#808675]\">{p.date ? 'Recommended by email · ' + p.date : 'Added to the guide'}</p></div></div>\n          <blockquote className=\"mt-3 border-l-2 border-[#c9d1b5] pl-4 font-serif text-[20px] leading-relaxed\">“{note.quote}”</blockquote>\n          {note.extra && <p className=\"mt-2 pl-4 text-xs leading-relaxed text-[#76806d]\">{note.extra}</p>}\n          {p.email && <a href={'https://mail.google.com/mail/#all/' + p.email} target=\"_blank\" rel=\"noreferrer\" className=\"ml-4 mt-2 inline-flex items-center gap-1.5 text-[10px] text-[#6d7c65] underline underline-offset-4\"><Icon name=\"mail\" size={12}/>Read original email</a>}\n        </div>; })}</div>\n        <div className=\"mt-8 border-t border-[#e0e3d5] pt-6\"><div className=\"flex items-center justify-between\"><h3 className=\"font-serif text-2xl\">Your notes</h3><span className=\"text-[10px] text-[#808675]\">Private · synced to your account</span></div>\n          {!ownNotes.length && <p className=\"mt-3 text-xs leading-relaxed text-[#808675]\">The table you loved, what to order, who to bring next time.</p>}\n          <div className=\"mt-4 space-y-3\">{ownNotes.map(n => <div key={n.id} className=\"rounded-xl bg-[#eeefe3] p-4\"><div className=\"mb-2 flex items-center justify-between gap-2\"><p className=\"text-[10px] text-[#79836e]\">{user?.name || 'You'} · {new Date(n.date).toLocaleDateString('en-SG', { day:'numeric', month:'short' })}</p><button onClick={() => onRemoveNote(place.id, n.id)} aria-label=\"Remove my note\" className={cx(button, 'h-6 w-6 text-[#7c866e] hover:bg-[#dce3cf]')}><Icon name=\"close\" size={12}/></button></div><p className=\"whitespace-pre-wrap break-words text-sm leading-relaxed\">{n.text}</p></div>)}</div>\n          <form className=\"mt-4\" onSubmit={async e => { e.preventDefault(); setBusy(true); if (await onAddNote(place.id, draft)) setDraft(''); setBusy(false); }}><label htmlFor=\"personal-note\" className=\"sr-only\">Your personal note</label><textarea id=\"personal-note\" className={cx(field, 'min-h-[105px] resize-y')} placeholder=\"Leave a little note for next time…\" value={draft} onChange={e => setDraft(e.target.value)} maxLength={2000} required/><div className=\"mt-3 flex justify-end\"><button type=\"submit\" className={primary} disabled={busy || !draft.trim()}><Icon name=\"plus\" size={14}/>Add my note</button></div></form>\n        </div>\n        <CommunityComments placeId={place.id} comments={comments} user={user} onAdd={onComment} onRemove={onRemoveComment}/>\n      </section>\n    </div>\n  </Dialog>;\n}\n\nfunction AddPlace({ onClose, onAdd }) {\n  const [busy,setBusy]=useState(false);\n  return <Dialog label=\"Add a place\" onClose={onClose}><form className=\"p-7 sm:p-9\" onSubmit={async e => { e.preventDefault(); const data = new FormData(e.currentTarget); setBusy(true); if(await onAdd(data)) onClose(); setBusy(false); }}>\n    <p className=\"text-[10px] uppercase tracking-[.16em] text-[#9e6e4e]\">A new page in the book</p><h2 className=\"mt-3 font-serif text-4xl\">Found a good place?</h2><p className=\"mt-3 text-sm leading-relaxed text-[#7b8271]\">Save the name and what makes it worth a visit.</p>\n    <label className=\"mt-7 block text-xs\">Place name<input name=\"name\" className={cx(field,'mt-2')} placeholder=\"That little place you want to remember\" required maxLength={100}/></label>\n    <div className=\"mt-4 grid grid-cols-2 gap-3\"><label className=\"text-xs\">Category<select className={cx(field,'mt-2')} name=\"category\">{categories.slice(1).map(c => <option key={c.name}>{c.name}</option>)}</select></label><label className=\"text-xs\">Neighbourhood<input name=\"area\" className={cx(field,'mt-2')} placeholder=\"e.g. Tiong Bahru\" maxLength={80}/></label></div>\n    <label className=\"mt-4 block text-xs\">Your recommendation<textarea name=\"note\" className={cx(field,'mt-2 min-h-[110px]')} placeholder=\"Why go? What should I try?\" required maxLength={2000}/></label>\n    <p className=\"mt-4 text-[11px] leading-relaxed text-[#808675]\">This recommendation will be visible to everyone with the guide link. It appears in the list immediately; its map location can be added after verification.</p>\n    <button className={cx(primary,'mt-6 w-full')} type=\"submit\" disabled={busy}><Icon name=\"plus\" size={16}/>Add to my guide</button>\n  </form></Dialog>;\n}\n\nfunction App({initial}) {\n  const [allPlaces,setAllPlaces]=useState(initial.places);\n  const [statuses,setStatuses]=useState(initial.statuses),[notes,setNotes]=useState(initial.notes),[comments,setComments]=useState(initial.comments);\n  const user=initial.user;\n  const custom=allPlaces.filter(p=>p.notes.some(n=>n.person==='marc'));\n  const [loginPrompt,setLoginPrompt]=useState(false);\n  const [category, setCategory] = useState('All places'), [query, setQuery] = useState(''), [person, setPerson] = useState('all'), [area, setArea] = useState('all');\n  const [page, setPage] = useState('Explore'), [view, setView] = useState('split'), [selected, setSelected] = useState(null), [adding, setAdding] = useState(false), [notebookFilter, setNotebookFilter] = useState('saved');\n  const [toast, setToast] = useState('');\n  useEffect(() => { if(!toast) return; const t = setTimeout(() => setToast(''), 4000); return () => clearTimeout(t); }, [toast]);\n  const refresh = async () => {\n    const response=await fetch('/api/bootstrap',{cache:'no-store'});if(!response.ok)throw Error('Could not refresh your guide.');\n    const value=await response.json();setAllPlaces(value.places);setStatuses(value.statuses);setNotes(value.notes);setComments(value.comments);\n  };\n  const change = async (path,body,message) => {\n    if(!user){setLoginPrompt(true);return false;}\n    try {\n      const response=await fetch('/api/'+path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});\n      const value=await response.json();if(!response.ok){if(response.status===401)setLoginPrompt(true);throw Error(value.error || 'Could not save this change.');}\n      await refresh();setToast(message);return true;\n    } catch(error){setToast(error.message || 'Could not save this change.');return false;}\n  };\n  const setStatus=(id,value)=>change('status',{placeId:id,status:value},value==='visited'?'Marked as visited.':value?'Saved to your notebook.':'Removed from your notebook.');\n  const addNote=(id,text)=>change('notes',{placeId:id,text},'Your private note is saved.');\n  const removeNote=(placeId,id)=>change('notes/remove',{id},'Note removed.');\n  const addComment=(placeId,text)=>change('comments',{placeId,text},'Your comment has been shared.');\n  const removeComment=(id)=>change('comments/remove',{id},'Comment removed.');\n  const addPlace=async(data)=>{const done=await change('places',Object.fromEntries(data),'Added to the guide.');if(done){resetFilters();setPage('Explore');}return done;};\n  const resetFilters = () => { setCategory('All places'); setQuery(''); setPerson('all'); setArea('all'); };\n  const selectPlace = (p) => setSelected(p);\n  const filtered = allPlaces.filter(p => (category === 'All places' || p.category === category) && (person === 'all' || p.notes.some(n => n.person === person)) && (area === 'all' || p.area === area) && (!query || [p.name, p.area, p.setting, p.address, ...(p.locations || []).flatMap(l=>[l.label,l.address]), p.cuisine, p.summary, ...p.tags, ...p.notes.map(n => n.quote)].join(' ').toLowerCase().includes(query.toLowerCase())) && (page !== 'My notebook' || (notebookFilter === 'notes' ? (notes[p.id] || []).length : statuses[p.id] === notebookFilter)));\n  const mapped = filtered.filter(p => p.category !== 'Escape' || category === 'Escape');\n  const navigate = (next) => { setPage(next); resetFilters(); };\n  return <>\n    <a href=\"#guide\" className=\"sr-only focus:not-sr-only focus:fixed focus:z-[9999] focus:top-2 focus:left-2 focus:bg-white focus:p-3\">Skip to recommendations</a>\n    <div className=\"border-b border-[#e3e3d6] bg-[#efefe3] px-4 py-2 text-center text-[10px] tracking-[.04em] text-[#78816f]\">A PERSONAL COLLECTION <span className=\"mx-2\">·</span> {allPlaces.length} recommendations from good people <span className=\"hidden sm:inline\">· Always room for one more</span></div>\n    <header className=\"mx-auto flex max-w-[1500px] flex-wrap items-center justify-between gap-4 px-5 py-5 sm:px-10 lg:px-16\">\n      <button onClick={() => navigate('Explore')} className=\"flex items-center gap-3 text-left\" aria-label=\"In Good Company home\"><Rosette/><span><span className=\"block font-serif text-[23px] tracking-[-.04em] leading-none\">in good company</span><span className=\"mt-2 block text-[8px] tracking-[.22em] text-[#808573]\">MARC’S SINGAPORE FIELD GUIDE</span></span></button>\n      <nav aria-label=\"Main navigation\" className=\"order-3 flex w-full justify-center gap-7 text-xs sm:order-none sm:w-auto\">{['Explore','People','My notebook'].map(tab => <button className={cx('relative py-2 transition-colors hover:text-[#a26545]', page === tab ? 'text-[#253f36] font-semibold' : 'text-[#7b8374]')} onClick={() => navigate(tab)} key={tab} aria-current={page === tab ? 'page' : undefined}>{tab}{page === tab && <span className=\"absolute -bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-[#a66e4c]\"/>}</button>)}</nav>\n      <div className=\"flex items-center gap-3\">{user ? <form method=\"POST\" action=\"/auth/logout\"><button className=\"text-[10px] underline underline-offset-4\">Sign out · {user.name}</button></form> : <a href=\"/auth/login\" className=\"text-xs underline underline-offset-4\">Sign in</a>}{user?.isOwner && <button onClick={() => setAdding(true)} aria-label=\"Add a place\" className={cx(secondary,'!px-3 sm:!px-4 !py-2.5 !text-xs')}><Icon name=\"plus\" size={15}/><span className=\"hidden sm:inline\">Add a place</span></button>}</div>\n    </header>\n    <main className=\"mx-auto max-w-[1500px] px-5 sm:px-10 lg:px-16\">\n      {page === 'Explore' && <section className=\"relative grid items-center border-b border-[#dfe1d2] pb-7 pt-9 md:grid-cols-[1.04fr_1fr] md:pb-10 md:pt-10\">\n        <div className=\"relative z-10\"><p className=\"mb-4 text-[9px] uppercase tracking-[.24em] text-[#9a6c4e]\">The little red dot, through familiar eyes</p><h1 className=\"font-serif text-[49px] leading-[.99] tracking-[-.045em] sm:text-[64px] lg:text-[76px]\">Singapore.<br/><span className=\"font-normal italic text-[#57714f]\">In good company.</span></h1><p className=\"mt-6 max-w-[355px] text-[13px] leading-[1.9] text-[#7a8171]\">Good tables, little detours, and places worth sharing.<br className=\"hidden lg:block\"/> A city guide from people I trust.</p><div className=\"mt-7 flex items-center gap-3\"><div className=\"flex -space-x-2\">{people.slice(0,4).map(p => <Avatar key={p.id} id={p.id} small/>)}</div><span className=\"text-[10px] text-[#798270]\">Collected from <strong className=\"font-medium text-[#3d5540]\">6 good people</strong></span><span className=\"h-3 border-l border-[#cbd2bf]\"/><span className=\"text-[10px] text-[#798270]\">Made for wandering</span></div></div>\n        <div className=\"relative hidden md:block\"><Illustration className=\"w-full\"/><p className=\"mr-4 mt-0 text-right font-serif text-sm italic text-[#919880]\">A little book. A whole city.</p></div>\n      </section>}\n      {page === 'People' ? <section id=\"guide\" className=\"py-12\"><p className=\"text-[10px] uppercase tracking-[.22em] text-[#9a6c4e]\">The people behind the places</p><h1 className=\"mt-3 font-serif text-5xl tracking-[-.03em]\">Good taste. Good company.</h1><p className=\"mt-4 text-sm text-[#7a8171]\">Six generous emails, now a little easier to explore.</p><div className=\"mt-9 grid gap-5 sm:grid-cols-2 lg:grid-cols-3\">{people.map(p => <button key={p.id} onClick={() => { setPage('Explore'); resetFilters(); setPerson(p.id); setTimeout(() => document.getElementById('guide')?.scrollIntoView({behavior:'smooth'}), 50); }} className=\"rounded-2xl border border-[#dfe2d4] bg-[#fffdf7] p-7 text-left transition-colors hover:border-[#91a486]\"><div className=\"flex items-center justify-between\"><Avatar id={p.id}/><Icon name=\"diagonal\"/></div><h2 className=\"mt-6 font-serif text-3xl\">{p.name}</h2><p className=\"mt-2 text-xs text-[#7b8372]\">{p.description}</p><p className=\"mt-6 text-[10px] uppercase tracking-[.1em] text-[#9b7153]\">{allPlaces.filter(item => item.notes.some(n => n.person === p.id)).length} recommendations in the guide</p></button>)}</div></section> : <section id=\"guide\" className=\"scroll-mt-4 pb-8 pt-8\">\n        <div className=\"flex flex-wrap items-end justify-between gap-5\"><div><p className=\"mb-2 text-[9px] uppercase tracking-[.2em] text-[#9a6c4e]\">{page === 'My notebook' ? 'Your next time, and your last time' : 'A few places to start'}</p><h2 className=\"font-serif text-[34px] leading-tight tracking-[-.025em]\">{page === 'My notebook' ? 'My little notebook.' : 'Where shall we go?'}</h2></div>\n          <div className=\"flex items-center gap-1 rounded-full border border-[#dce0d1] p-1 text-[11px]\">{[{id:'split',icon:'map',label:'Map & list'},{id:'list',icon:'list',label:'List'}].map(v => <button key={v.id} onClick={() => setView(v.id)} className={cx(button,'px-3 py-2',view === v.id && 'bg-[#e5e9d9]')} aria-pressed={view === v.id}><Icon name={v.icon} size={13}/>{v.label}</button>)}</div>\n        </div>\n        {page === 'My notebook' && <div className=\"mt-6 flex flex-wrap gap-2\">{[{id:'saved',label:'Want to go',icon:'bookmark'},{id:'visited',label:'Been there',icon:'check'},{id:'notes',label:'My notes',icon:'note'}].map(v => <button key={v.id} onClick={() => setNotebookFilter(v.id)} className={cx(secondary,notebookFilter === v.id && '!bg-[#23483f] !text-white')}><Icon name={v.icon} size={14}/>{v.label}</button>)}</div>}\n        <div className=\"mt-6 flex flex-wrap items-center gap-2.5\">{categories.map(c => <button key={c.name} onClick={() => setCategory(c.name)} aria-pressed={category === c.name} className={cx(button,'px-4 py-2.5 text-[11px]', category === c.name ? 'bg-[#23483f] text-white' : 'border border-[#dfe1d3] hover:bg-[#e9ebdd]')}><Icon name={c.icon} size={15}/>{c.name}<span className={cx('ml-1 text-[9px]',category === c.name ? 'text-[#bbceb8]' : 'text-[#8c9481]')}>{c.name === 'All places' ? allPlaces.length : allPlaces.filter(p => p.category === c.name).length}</span></button>)}</div>\n        <div className=\"mt-4 grid gap-3 sm:grid-cols-[1fr_190px_190px]\"><div className=\"relative\"><span className=\"pointer-events-none absolute left-4 top-3.5 text-[#8c957f]\"><Icon name=\"search\" size={16}/></span><input className={cx(field,'!rounded-full !bg-transparent !pl-10 !text-xs')} aria-label=\"Search places\" value={query} onChange={e => setQuery(e.target.value)} placeholder=\"Find a place, a neighbourhood, a little craving…\"/></div><select aria-label=\"Filter by person\" className={cx(field,'!rounded-full !bg-transparent !text-xs')} value={person} onChange={e => setPerson(e.target.value)}><option value=\"all\">From everyone</option>{people.map(p => <option value={p.id} key={p.id}>From {p.name}</option>)}{custom.length > 0 && <option value=\"marc\">My own discoveries</option>}</select><select aria-label=\"Filter by neighbourhood\" className={cx(field,'!rounded-full !bg-transparent !text-xs')} value={area} onChange={e => setArea(e.target.value)}><option value=\"all\">All neighbourhoods</option>{[...new Set(allPlaces.map(p => p.area))].sort().map(a => <option key={a}>{a}</option>)}</select></div>\n        <div className=\"my-5 flex items-center justify-between text-[10px] text-[#87907b]\"><p role=\"status\">{filtered.length} {filtered.length === 1 ? 'place' : 'places'} to {page === 'My notebook' ? 'remember' : 'explore'}{person !== 'all' && ' · recommended by ' + personById(person).name}</p>{category !== 'All places' || person !== 'all' || area !== 'all' || query ? <button onClick={resetFilters} className=\"underline underline-offset-4\">Clear filters</button> : <span>Every place has a person behind it</span>}</div>\n        {filtered.length === 0 ? <div className=\"flex min-h-[360px] flex-col items-center justify-center rounded-2xl border border-dashed border-[#cdd4bf] text-center\"><span className=\"text-[#789073]\"><Icon name={page === 'My notebook' ? 'bookmark' : 'compass'} size={35}/></span><h3 className=\"mt-6 font-serif text-3xl\">{page === 'My notebook' ? 'A little room for discovery.' : 'A different little detour?'}</h3><p className=\"mt-3 max-w-[360px] px-4 text-sm leading-relaxed text-[#7e8872]\">{page === 'My notebook' ? 'Save a place, mark a visit, or leave yourself a note. It will find a home here.' : 'No places match those filters. Try another neighbourhood, person, or craving.'}</p><button className={cx(secondary,'mt-6')} onClick={() => page === 'My notebook' ? navigate('Explore') : resetFilters()}>{page === 'My notebook' ? 'Explore the guide' : 'Clear filters'}<Icon name=\"arrow\" size={15}/></button></div> : <div className={cx('grid min-w-0 grid-cols-1 items-start gap-5 lg:gap-7', view === 'split' ? 'lg:grid-cols-[minmax(0,0.91fr)_minmax(0,1.09fr)]' : '')}>\n          <div className={cx('grid min-w-0 grid-cols-1 gap-4',view === 'list' && 'md:grid-cols-2 xl:grid-cols-3')}>{filtered.map(place => <PlaceCard key={place.id} place={place} selected={selected?.id === place.id} status={statuses[place.id]} onSelect={selectPlace} onSave={id => setStatus(id, statuses[id] ? null : 'saved')}/>)}</div>\n          {view === 'split' && <aside className=\"order-first lg:order-none lg:sticky lg:top-5\"><MapPanel items={mapped} selected={selected?.id} onSelect={selectPlace}/>{mapped.some(p=>!mapLocations(p).length) && <details className=\"mt-3 rounded-xl border border-[#dbe0d2] bg-[#fffdf6] px-4 py-3 text-xs\"><summary className=\"cursor-pointer text-[#65755e]\">{mapped.filter(p=>!mapLocations(p).length).length} recommendations without pins</summary><p className=\"mt-3 text-[11px] leading-relaxed text-[#7c8273]\">Online services and general advice stay in the list. Any location still to confirm is explained here.</p><div className=\"mt-3 space-y-3\">{mapped.filter(p=>!mapLocations(p).length).map(p=><button key={p.id} onClick={()=>selectPlace(p)} className=\"block w-full text-left\"><span className=\"underline underline-offset-4\">{p.name}</span><span className=\"mt-1 block text-[10px] leading-relaxed text-[#7c8273]\">{p.locationNote}</span></button>)}</div></details>}{filtered.some(p => p.category === 'Escape') && category !== 'Escape' && <button className=\"mt-3 flex w-full items-center justify-between rounded-xl border border-[#dbe0d2] bg-[#eef0e4] px-4 py-3 text-xs\" onClick={() => setCategory('Escape')}><span className=\"flex items-center gap-2\"><Icon name=\"escape\" size={16}/>A little further afield: island escapes</span><Icon name=\"arrow\" size={15}/></button>}<p className=\"mt-3 text-center text-[10px] text-[#8c957f]\">A map for wandering. Your friends supply the good advice.</p></aside>}\n        </div>}\n      </section>}\n      <footer className=\"flex flex-wrap items-center justify-between gap-6 border-t border-[#dfe2d1] py-7 text-[#8c947e]\"><div className=\"flex items-center gap-2.5\"><Rosette small/><span className=\"font-serif text-[16px] italic\">Always room for one more good place.</span></div><p className=\"text-[9px]\">A personal collection · Singapore, 2026 <span className=\"mx-2\">/</span><a href=\"/source\" target=\"_blank\" rel=\"noreferrer\" className=\"underline underline-offset-4\">View source</a></p></footer>\n    </main>\n    {selected && <PlaceDetail place={selected} status={statuses[selected.id]} ownNotes={Array.isArray(notes[selected.id]) ? notes[selected.id] : []} onStatus={setStatus} onAddNote={addNote} onRemoveNote={removeNote} onClose={() => setSelected(null)} user={user} comments={comments[selected.id]||[]} onComment={addComment} onRemoveComment={removeComment}/>}\n    {loginPrompt && <Dialog label=\"Sign in to your notebook\" onClose={()=>setLoginPrompt(false)}><div className=\"p-9\"><Rosette/><h2 className=\"mt-5 font-serif text-3xl\">Keep your little discoveries.</h2><p className=\"mt-4 text-sm leading-relaxed text-[#7b8271]\">Sign in with Val Town to save places, sync your private notes, and join the conversation. Everyone can browse the guide.</p><a href=\"/auth/login\" className={cx(primary,'mt-6')}>Continue with Val Town<Icon name=\"arrow\" size={16}/></a></div></Dialog>}\n    {adding && <AddPlace onClose={() => setAdding(false)} onAdd={addPlace}/>}\n    {toast && <div role=\"status\" className=\"fixed bottom-5 left-1/2 z-[9999] w-max max-w-[calc(100%_-_32px)] -translate-x-1/2 rounded-xl bg-[#23483f] px-5 py-3 text-center text-xs text-[#fffdf6] shadow-lg\">{toast}</div>}\n  </>;\n}\n\nconst root=createRoot(document.getElementById('root'));\nasync function start(){\n try{const response=await fetch('/api/bootstrap',{cache:'no-store'});if(!response.ok)throw Error('Please try again in a moment.');const initial=await response.json();people=initial.people;root.render(<App initial={initial}/>);}\n catch(error){root.render(<main className=\"mx-auto max-w-lg p-10 text-center\"><Rosette/><h1 className=\"mt-6 font-serif text-3xl\">The book couldn’t open.</h1><p className=\"mt-4 text-sm\">Please check your connection and try again.</p><button className={cx(primary,'mt-6')} onClick={start}>Try again</button></main>);}\n}\nstart();\n\r\n",[],[157,216],"075cc02f-5a97-4274-9108-1b7116612ca8","favicon.svg","01a09cf0-34c2-729a-80d0-3e7bf856b6c9",5,["D",1789341135464],"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><rect width=\"64\" height=\"64\" rx=\"16\" fill=\"#23483f\"/><path d=\"M32 7l5 17 17-5-12 13 12 13-17-5-5 17-5-17-17 5 12-13L10 19l17 5z\" fill=\"#f3eddd\"/><circle cx=\"32\" cy=\"32\" r=\"5\" fill=\"#c78561\"/></svg>\n\r\n",[],[157,225],"da08d802-45fa-45f1-8417-d8672a4006a9","data.ts","87e65562-afc8-11f1-99ca-1607ee4eb77e",4,["D",1789341123318],"export const categories = [\n  {\n    \"name\": \"All places\",\n    \"icon\": \"compass\"\n  },\n  {\n    \"name\": \"Eat\",\n    \"icon\": \"eat\"\n  },\n  {\n    \"name\": \"Drink\",\n    \"icon\": \"drink\"\n  },\n  {\n    \"name\": \"Explore\",\n    \"icon\": \"explore\"\n  },\n  {\n    \"name\": \"Escape\",\n    \"icon\": \"escape\"\n  },\n  {\n    \"name\": \"Shop\",\n    \"icon\": \"bookmark\"\n  },\n  {\n    \"name\": \"Essentials\",\n    \"icon\": \"compass\"\n  }\n];\n\r\n",[],[157,233],"62235c58-6b39-4fc5-a29e-af5eaa77df31","MapPanel.tsx","81afe8de-afc8-11f1-bc92-1607ee4eb77e",["D",1789343186700],22,"/** @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 const mapLocations = p => (p.locations?.length ? p.locations : [{lat:p.lat,lng:p.lng}]).filter(l=>Number.isFinite(l.lat)&&Number.isFinite(l.lng));\nconst pointsFor = items => items.flatMap(p=>mapLocations(p).map(l=>({...p,lat:l.lat,lng:l.lng,mapLabel:p.name+(l.label?' · '+l.label:'')})));\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=pointsFor(current.current.items);\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 = (shouldFit = true) => {\n        map.current.closePopup();\n        layer.current.clearLayers();\n        const groups=[];\n        for(const p of pointsFor(current.current.items)) {const pixel=map.current.latLngToLayerPoint([p.lat,p.lng]);const group=groups.find(g=>pixel.distanceTo(g.pixel)<44);if(group)group.items.push(p);else groups.push({pixel,items:[p]});}\n        for(const {items:group} of groups) {\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\"/>${group.length>1?`<text x=\"18\" y=\"23\" text-anchor=\"middle\" font-family=\"sans-serif\" font-size=\"13\" font-weight=\"bold\" fill=\"#fffdf6\">${group.length}</text>`:'<circle cx=\"18\" cy=\"18\" r=\"4\" fill=\"#fffdf6\"/>'}</svg>`});\n          const marker=L.marker([p.lat,p.lng],{icon,title:p.mapLabel,alt:p.mapLabel,keyboard:true}).addTo(layer.current);\n          const label=group.map(p=>p.mapLabel).join(' · ');\n          marker.getElement()?.setAttribute('aria-label',label);\n          const tooltip=document.createElement('span');tooltip.textContent=group.length>1?group.length+' nearby places':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='Choose a nearby place';panel.appendChild(title);for(const item of group){const button=document.createElement('button');button.textContent=item.mapLabel;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,{maxHeight:280,maxWidth:280});}\n        }\n        if(shouldFit)fit.current();\n      };\n      map.current.on('zoomend',()=>refresh.current?.(false));\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?.();},[JSON.stringify(items.map(p=>[p.id,p.name,p.category,mapLocations(p)]))]);\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]\">Numbered pins let you choose between nearby places</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    {ready&&!error&&!items.some(p=>mapLocations(p).length)&&<div className=\"absolute left-5 right-5 top-36 z-[400] rounded-xl bg-[#fffdf6] p-4 text-sm leading-relaxed\">These recommendations don’t have a specific map location. Browse the list and follow their website or Maps links.</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=>mapLocations(p).length).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=>mapLocations(p).length).length} {items.filter(p=>mapLocations(p).length).length===1?'recommendation':'recommendations'} · {pointsFor(items).length} {pointsFor(items).length===1?'location':'locations'} mapped</p></div>\n  </div>;\n}\n\r\n",[],[157,241],["D",1789341118025],[],[157,65],"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",[],[157,259,252],"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",[],[157,259,261],"f8ef0ca1-243a-4f38-86ea-0f917aef4eed",["D",1789339382932],"directory",[171,172],[157,259],"154d3cda-4fbe-4594-9f1a-fc3f32d797b7",["D",1789339382932],[170,173,174,175,176,177,178],[157],["D",1789339382932],["D",1789519256886],{"_11":12,"_126":71},{"_11":12,"_121":122,"_70":71,"_30":69,"_123":124,"_125":24},{"_38":112,"_13":16,"_32":35,"_113":73,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_53":-5,"_145":314,"_315":316,"_317":318,"_319":24,"_320":24,"_321":24,"_322":86,"_323":-5,"_324":-7,"_325":-7,"_326":26,"_327":24,"_328":24,"_329":-5,"_330":24,"_331":24,"_332":24,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":16,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

History · CommunityComments.tsx