release: v0.17.0 (#677)

See CHANGELOG.md, section [0.17.0] — 2026-09-23.

app/map/map.css

@@ -1,4 +1,6 @@
 /* ── Map Page ──────────────────────────────────────────────── */
+/* Marker, popup and Leaflet control styling is shared with journal map
+   blocks and lives in app/leaflet.css. */
 
 .map-page {
   display: flex;
@@ -52,130 +54,3 @@
   font-family: var(--font-sans);
   font-size: 0.875rem;
 }
-
-/* ── Map Popups ────────────────────────────────────────────── */
-
-.leaflet-popup-content-wrapper {
-  background: var(--bg-primary, #1a1a1a) !important;
-  color: var(--text-primary, #fff) !important;
-  border-radius: var(--radius-md, 4px) !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
-  border: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.15)) !important;
-  padding: 0 !important;
-  overflow: hidden;
-}
-
-.leaflet-popup-tip {
-  background: var(--bg-primary, #1a1a1a) !important;
-  border: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.15)) !important;
-  border-top: none !important;
-  border-left: none !important;
-}
-
-.leaflet-popup-content {
-  margin: 0 !important;
-  min-width: 200px;
-}
-
-.map-popup {
-  font-family: var(--font-sans);
-}
-
-.map-popup__cover {
-  width: 100%;
-  height: 120px;
-  object-fit: cover;
-  display: block;
-}
-
-.map-popup__body {
-  padding: 0.75rem 1rem;
-}
-
-.map-popup__city {
-  font-family: var(--font-serif);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  margin: 0 0 0.125rem;
-  color: var(--text-primary);
-}
-
-.map-popup__country {
-  font-family: var(--font-caption);
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-secondary);
-  margin: 0 0 0.5rem;
-}
-
-.map-popup__count {
-  font-family: var(--font-caption);
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.5rem;
-}
-
-.map-popup__albums {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.map-popup__album-link {
-  font-size: 0.8125rem;
-  color: var(--accent, #e60012);
-  text-decoration: none;
-  transition: opacity 0.15s;
-}
-
-.map-popup__album-link:hover {
-  opacity: 0.7;
-}
-
-/* ── Custom Marker ─────────────────────────────────────────── */
-
-.map-marker {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: var(--accent, #e60012);
-  color: #fff;
-  font-family: var(--font-caption);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  border: 2px solid rgba(255, 255, 255, 0.9);
-  cursor: pointer;
-  transition: transform 0.15s ease;
-}
-
-.map-marker:hover {
-  transform: scale(1.15);
-}
-
-/* ── Leaflet overrides ─────────────────────────────────────── */
-
-.leaflet-control-attribution {
-  background: var(--bg-primary, #1a1a1a) !important;
-  color: var(--text-secondary, #888) !important;
-  font-size: 0.625rem !important;
-  opacity: 0.7;
-}
-
-.leaflet-control-attribution a {
-  color: var(--text-secondary, #888) !important;
-}
-
-.leaflet-control-zoom a {
-  background: var(--bg-primary, #1a1a1a) !important;
-  color: var(--text-primary, #fff) !important;
-  border-color: var(--border-subtle, rgba(128, 128, 128, 0.15)) !important;
-}
-
-.leaflet-control-zoom a:hover {
-  background: var(--bg-secondary, #222) !important;
-}

app/map/page.tsx

@@ -33,8 +33,9 @@ export default function MapPage() {
 
   return (
     <>
-      {/* Leaflet CSS from CDN */}
-      {}
+      {/* LeafletMap emits this too, but only once /api/map has answered; on
+          this page the stylesheet should be in the server HTML so the tiles
+          never render before their CSS. Same href — the browser loads it once. */}
       <link
         rel="stylesheet"
         href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"