{/* Title block — top-left */}

{city.name}

{coordStr}

{/* Landmark — centred, takes remaining space */}

{/* Landmark label */}

{landmarkLabel}

{/* Hairline + footer */}

cityform 9 CM · 1:11000

); } /* ────────────────────────────── Inline coordinate caption */ function CoordCaption({ coords, prefix }) { const c = coords; return ( {prefix && {prefix} · } {c.lat.toFixed(4)}° {c.ns} · {Math.abs(c.lng).toFixed(4)}° {c.ew} ); } /* ────────────────────────────── Top navigation */ function TopNav({ route, go, cartCount }) { const items = [ { id: 'atlas', label: 'Collection' }, { id: 'atelier', label: 'Make yours' }, { id: 'journal', label: 'Journal' }, { id: 'about', label: 'About' }, ]; return (

{items.map(it => ( ))}

); } /* ────────────────────────────── ProductCard Brand Core only — no accent colour. The CITY MARK miniature on the card (when present) is the only place accent lives. */ function ProductCard({ item, onClick, density='standard', variant='photo' }) { return ( ); } /* ────────────────────────────── StyledMap Brand Core — Mist background, Ink linework, Stone secondary. No accent colours used (§3.4 r04). Single cool style. */ function makeRng(seed) { let s = 0; for (let i = 0; i < seed.length; i++) s = (s * 31 + seed.charCodeAt(i)) | 0; return () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; }; } function generateTile(seed) { const rng = makeRng(String(seed)); const roads = []; for (let i = 0; i < 2; i++) { const sx = rng() * 1000, sy = rng() * 1000; const ex = rng() * 1000, ey = rng() * 1000; const cx = (sx + ex)/2 + (rng() - 0.5) * 300; const cy = (sy + ey)/2 + (rng() - 0.5) * 300; roads.push({ d: `M ${sx},${sy} Q ${cx},${cy} ${ex},${ey}`, w: 6 }); } for (let i = 0; i < 8; i++) { const x1 = rng() * 1000, y1 = rng() * 1000; const len = 200 + rng() * 500; const ang = rng() * Math.PI * 2; roads.push({ d: `M ${x1},${y1} L ${x1 + Math.cos(ang) * len},${y1 + Math.sin(ang) * len}`, w: 3 }); } const buildings = []; for (let c = 0; c < 4; c++) { const cx = 150 + rng() * 700, cy = 150 + rng() * 700; const n = 12 + Math.floor(rng() * 16); for (let i = 0; i < n; i++) { const x = cx + (rng() - 0.5) * 320; const y = cy + (rng() - 0.5) * 320; const w = 16 + rng() * 30; const h = 16 + rng() * 30; const r = rng() < 0.3 ? Math.floor(rng() * 4) * 90 : 0; if (x > 20 && y > 20 && x < 970 && y < 970) buildings.push({ x, y, w, h, r }); } } const hasWater = rng() > 0.45; const waterPath = hasWater ? `M ${rng() * 200},0 C ${300 + rng() * 200},${200 + rng() * 200} ${500 + rng() * 200},${300 + rng() * 200} ${800 + rng() * 200},1000` : null; return { roads, buildings, waterPath }; } /* Project the real OSM geometry returned by /api/storefront/area_preview into StyledMap's 0–1000 SVG space. The 2.5 km canvas + metres-per-degree match window.bboxToWGS84 exactly, so the rendered streets line up 1:1 with the draggable bbox overlay. */ function projectArea(area, canvasM = 2500) { if (!area || !area.centre) return null; const CANVAS_M = canvasM; const clat = area.centre.lat, clng = area.centre.lng; const mLat = 111320; const mLng = 111320 * Math.cos(clat * Math.PI / 180) || 1e-6; const P = ([lng, lat]) => [ (((lng - clng) * mLng) / CANVAS_M + 0.5) * 1000, (((clat - lat) * mLat) / CANVAS_M + 0.5) * 1000, ]; const ringToPts = (ring) => ring.map(P).map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' '); const lineToD = (pts) => 'M ' + pts.map(P).map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' L '); const labels = (area.labels || []).map(l => { const [x, y] = P([l.lng, l.lat]); return { text: l.text, x, y, kind: l.kind }; }).filter(l => l.x > -40 && l.x < 1040 && l.y > -20 && l.y < 1020); return { water: (area.water || []).filter(r => r && r.length >= 3).map(ringToPts), buildings: (area.buildings || []).filter(r => r && r.length >= 3).map(ringToPts), roads: (area.roads || []).filter(r => r && r.pts && r.pts.length >= 2) .map(r => ({ d: lineToD(r.pts), w: r.w || 3 })), labels, }; } function StyledMap({ seed = 'sheffield', bbox = null, area = null, cropM = null, onTileClick }) { const tile = React.useMemo(() => generateTile(seed), [seed]); const real = React.useMemo(() => projectArea(area, cropM || 2500), [area, cropM]); const hasReal = !!(real && (real.roads.length || real.buildings.length || real.water.length)); return (

{bbox && (

{['tl','tr','bl','br'].map(c => (

))}

9 CM · 1:11000

)}

); } Object.assign(window, { Icon, Wordmark, Landmark, CitySticker, CoordCaption, TopNav, ProductCard, StyledMap, generateTile, makeRng, projectArea, });