/* VendorScreen — vendor detail. Slides up over MapScreen. */ function TierBadge({ tier, dark }) { // tier label: U0..U4 with descriptive name. NEVER color-coded — same hue ladder. // Tier name ladder (consumer surface). Presence-intensity framing — never // good/bad/best. The U-prefix and numeric aura are internal API vocabulary. const names = ['Listed', 'Spark', 'Glow', 'Bright', 'Beacon']; const name = names[tier] ?? names[0]; return (
{name}
); } function VendorScreen({ vendor: v, onClose, onPlaceOrder, cart, setCart, dark, preset, reducedMotion, intensity, frameId }) { const liveTicket = useTickingMinute(v.ticket || 0); const liveQueue = useTickingMinute(v.queue || 0, 16000); const [following, setFollowing] = React.useState(false); const [staleSec, setStaleSec] = React.useState(8); React.useEffect(() => { const id = setInterval(() => setStaleSec(s => s + 1), 1000); return () => clearInterval(id); }, []); const cartCount = Object.values(cart).reduce((a, b) => a + b, 0); const cartTotal = (v.menu || []).reduce((sum, m) => sum + (cart[m.name] || 0) * m.price, 0); return (
{/* Hero — image slot on user-fillable image; warm color block fallback */}
{/* Tonal warm overlay for legibility */}
{/* Status bar spacer */}
{/* Top controls */}
{/* Caption strip at bottom of hero */}
{v.photoCaption || ''}
{v.kind}
{/* Main card — pulls up over the hero */}
{/* Identity row */}

{v.name}

{v.cuisine} · {v.priceTier} · {v.neighborhood} · {v.walkMin} min walk
{/* Live signals — chip rail */}
Right now
{v.stale ? `stale · checked ${staleSec * 7 + 26}m ago` : `checked ${staleSec}s ago`}
{v.accepting && !v.paused ? } label="Accepting orders" stale={v.stale} /> : v.paused ? : } {v.ticket > 0 && ( } label="Ticket" value={bucketTicketCompact(liveTicket)} stale={v.stale}/> )} {v.queue > 0 && ( } label="Queue" value={`${liveQueue}`} stale={v.stale}/> )} {v.onSite === 'on-site' && } label="On-site" stale={v.stale}/>} {v.onSite === 'delayed' && } label="Delayed" stale={v.stale}/>} {v.onSite === 'not-here' && } {v.onSite === 'moved' && } {v.pickupNext && v.pickupNext !== '—' && ( )}
{v.soldOut?.length > 0 && (
Sold out today: {v.soldOut.join(', ')}
)}
{/* Menu (or unscored note) */} {v.menu && v.menu.length > 0 ? (
Today's menu
{v.menu.map((m, i) => ( setCart(c => ({ ...c, [m.name]: (c[m.name] || 0) + 1 }))} onRemove={() => setCart(c => { const n = { ...c, [m.name]: Math.max(0, (c[m.name] || 0) - 1) }; if (n[m.name] === 0) delete n[m.name]; return n; })} dark={dark} /> ))}
) : v.tier === 0 ? (
No aura yet — that's okay.
Aura is earned by operating, not paid for. This vendor is on the map because they're here. Once orders, ticket times, and identity-anchored reviews come in, they'll start to glow.
) : null} {/* Foodie posts — identity-anchored reviews */} {v.posts && v.posts.length > 0 && (
From foodies you might trust
{v.posts.map((p, i) => ( ))}
)} {/* Footer note */}
{v.handle} · wheresthefood.app/{v.id}
Aura is earned, not bought, never weaponized.
{/* Sticky order bar */} {v.menu && v.menu.length > 0 && (
{v.accepting && !v.paused && (
Less Lines · More Eating
)}
)}
); } function SectionHeader({ children }) { return (
{children}
); } function MenuItem({ item, count, onAdd, onRemove, dark }) { const sold = item.soldOut; return (
{item.name} {sold && · sold out}
{item.desc && (
{item.desc}
)}
${item.price.toFixed(2)}
{!sold && ( count === 0 ? ( ) : (
{count}
) )}
); } function Post({ p, dark }) { const initials = p.who.split(' ').map(w => w[0]).join('').slice(0, 2); const tones = ['#C2682E', '#7E8C4A', '#8B5232', '#D49A2B', '#5A6E48', '#3E4A55']; const tone = tones[Math.abs(hashString(p.who)) % tones.length]; return (
{initials}
{p.who}
{p.when}
{p.role}
{p.note}
); } function hashString(s) { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return h; } window.VendorScreen = VendorScreen;