[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","marc1","name","in-good-company","path","frontend/index.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/marc1/in-good-company/code/frontend/index.tsx","extension","id","b41317d6-54ed-463d-8837-a15ff6441d7c","index.tsx","fileId","01a09cf0-34c2-729a-80d0-43f5040df4b7","parentId","01a09cf0-34c2-729a-80d0-4b01cdf4ec4a","branchId","486e705c-045f-4c65-82da-a04d3d617ab8","branchVersion",26,"latest",true,"createdAt",["D",1789342840325],"version",7,"fileType","script","content","/** @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: <>,\n compass: <>,\n eat: <>,\n drink: <>,\n explore: <>,\n escape: <>,\n bookmark: ,\n check: ,\n arrow: ,\n diagonal: ,\n map: <>,\n pin: <>,\n list: <>,\n note: <>,\n close: ,\n plus: ,\n people: <>,\n mail: <>,\n globe: <>,\n heart: ,\n };\n return ;\n}\n\nfunction Rosette({ small = false }) {\n return ;\n}\n\nfunction Avatar({ id, small = false }) {\n const p = personById(id);\n return {p.initials};\n}\n\nfunction PeopleStack({ notes, showNames = true }) {\n return

{notes.map(n => )}

{showNames && From {notes.map(n => personById(n.person).name).join(' & ')}}

;\n}\n\n// Original, code-native illustrations: atmosphere, not photographs of the venues.\nfunction Illustration({ kind = 'city', className = '' }) {\n return ;\n}\n\nfunction PlaceCard({ place, selected, status, onSelect, onSave }) {\n return

\n \n

{place.category}·{place.area}

\n \n

{place.cuisine}{place.price && · {place.price}}

{mapLabel(place)}

\n \n

;\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 ;\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

{place.name}

Why it’s in the book.

Your notes