feat(street-level): Google Street View as the second imagery provider

Google Street View registers beside Mapillary as provider `google`. It runs
on the Maps JavaScript API with the browser GOOGLE_MAPS_API_KEY, loaded on
first use (mapsLoader.js), and uses Google's own StreetViewPanorama as its
viewer adapter, emitting provider-neutral poses (address and month in the
caption, a link to Google Maps, steps along Google's arrows, FOLLOW on
Google 3D). Its chip starts off because every panorama is billed to the
key; the share option is `g`.

Google offers no coverage layer for other maps, so the provider draws
none: with it on, a click on bare ground at street zoom opens its nearest
Google-collected outdoor panorama (groundClick.js). A key Google refuses
reads KEY REJECTED and fails a pending open at once; a lookup Google never
answers fails after 10 s.

Core: providers may declare `groundClick` and `defaultOn`; poses may carry
`capturedAtPrecision` and `title`; the coverage line keeps every
provider's hint; opening one provider's image releases another's
prewarmed viewer; FIT/FILL hides for viewers without render modes. CSP
script-src admits https://maps.googleapis.com. The browser gate gains two
Street View steps (the keyed one skips as 'no Google key' in CI).

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/ui/streetLevelControls.js

@@ -577,6 +577,9 @@ export class StreetLevelControls {
       el.renderButtons,
       (button) => button.dataset.slRender === viewer.renderMode,
     );
+    // Google's viewer always fills its frame: no FIT/FILL to offer.
+    const renderGroup = el.renderButtons[0]?.parentElement;
+    if (renderGroup) setProp(renderGroup, 'hidden', !viewer.renderModes);
     if (!viewer.open) return;
     setProp(el.imageBy, 'textContent', viewer.captionLeft);
     setProp(el.imageWhen, 'textContent', viewer.captionRight);

src/ui/streetLevelPresentation.js

@@ -44,10 +44,11 @@ function presentSince(days, now) {
   };
 }
 
-function formatDate(ms) {
+/** YYYY-MM-DD, or YYYY-MM for a provider that dates images by month. */
+function formatDate(ms, precision = 'day') {
   if (!Number.isFinite(ms)) return '';
   try {
-    return new Date(ms).toISOString().slice(0, 10);
+    return new Date(ms).toISOString().slice(0, precision === 'month' ? 7 : 10);
   } catch {
     return '';
   }
@@ -104,12 +105,17 @@ function presentViewer(state) {
   if (street.isPano) right.push('360°');
   if (Number.isFinite(street.bearing))
     right.push(`${Math.round(street.bearing)}°`);
-  if (street.capturedAt) right.push(formatDate(street.capturedAt));
+  if (street.capturedAt)
+    right.push(formatDate(street.capturedAt, street.capturedAtPrecision));
+  const left = [];
+  if (street.title) left.push(street.title);
+  if (street.creator) left.push(`Image by ${street.creator}`);
   return {
     open: street.open === true,
     loading: street.loading === true && !street.imageId,
     renderMode: street.renderMode === 'fill' ? 'fill' : 'letterbox',
-    captionLeft: street.creator ? `Image by ${street.creator}` : '',
+    renderModes: street.renderModes !== false,
+    captionLeft: left.join(' · '),
     captionRight: right.join(' · '),
     link: street.externalUrl || null,
     linkLabel: street.providerLabel ? `${street.providerLabel} ↗` : '',
@@ -130,9 +136,15 @@ function presentMeta(state) {
     return state.sequence.loading
       ? 'Loading this sequence…'
       : `${state.sequence.images.toLocaleString()} images in this sequence · Esc clears`;
+  const hint = state.coverage.hint || '';
   if (state.coverage.count > 0)
-    return `${state.coverage.count.toLocaleString()} sequences in view · click a line for its photos`;
-  return state.coverage.hint || '';
+    return [
+      `${state.coverage.count.toLocaleString()} sequences in view · click a line for its photos`,
+      hint,
+    ]
+      .filter(Boolean)
+      .join(' · ');
+  return hint;
 }
 
 /** @param {{now?: number}} [options] Clock for the SINCE readout. */

src/ui/streetLevelPresentation.test.mjs

@@ -388,3 +388,49 @@ test('FOLLOW is disabled off Google 3D and says where to switch', () => {
   );
   assert.equal(closed.viewer.follow.disabled, true, 'nothing to follow');
 });
+
+test('a Street View caption names the place, dates it by month, and offers no FIT/FILL', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      street: {
+        open: true,
+        providerId: 'google',
+        providerName: 'Google Street View',
+        providerLabel: 'STREET VIEW',
+        imageId: 'pano-1',
+        title: '1014 10th St',
+        creator: 'Google',
+        capturedAt: Date.UTC(2023, 0, 1),
+        capturedAtPrecision: 'month',
+        bearing: 0,
+        isPano: true,
+        renderModes: false,
+        externalUrl:
+          'https://www.google.com/maps/@?api=1&map_action=pano&pano=pano-1',
+      },
+    }),
+  );
+  assert.equal(view.viewer.captionLeft, '1014 10th St · Image by Google');
+  assert.equal(view.viewer.captionRight, '360° · 0° · 2023-01');
+  assert.equal(view.viewer.linkLabel, 'STREET VIEW ↗');
+  assert.equal(view.viewer.renderModes, false);
+});
+
+test('the meta line keeps the sequence count and adds the other providers’ hints', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      coverage: {
+        loading: false,
+        count: 2514,
+        hint: 'click a street to open Street View',
+        error: null,
+      },
+    }),
+  );
+  assert.equal(
+    view.meta,
+    `${(2514).toLocaleString()} sequences in view · click a line for its photos · click a street to open Street View`,
+  );
+});

src/ui/styles/street-level.css

@@ -207,6 +207,10 @@ button.sl-status:focus-visible {
   border-radius: 999px;
 }
 
+.sl-seg[hidden] {
+  display: none;
+}
+
 .sl-seg-btn {
   font-family: var(--font-mono);
   font-size: var(--sl-text-small);