fix(street-level): four regressions from the merge review

- The selected sequence is drawn past the per-tile caps again, and its
  highlight takes every loaded part, drawn or not: in a dense tile a
  clicked Mapillary or Panoramax line kept its cones but lost its line.
- photoViewer tries :fullscreen and :popover-open one at a time, each in
  its own try: Safari before 16.4 parses neither, and the fallback threw
  on every flat KartaView or Panoramax photo.
- A lit Street View off Google 3D says it needs the Google 3D map again,
  instead of "every provider is switched off".
- Chips carry their provider colour again (--chip-color, as on main).

Each comes with the test that reproduced it.

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

src/ui/chipGroup.js

@@ -28,6 +28,17 @@ export function syncChipGroup(container, chips = [], { before = null } = {}) {
       `data-toggle-chip chip-${state}${chip.active ? ' active' : ''}`,
     );
     set(button, 'textContent', chip.label);
+    // Optional per-chip colour; CSS decides how it is used.
+    const color = chip.color || '';
+    if ((button.dataset.chipColor || '') !== color) {
+      if (color) {
+        button.style.setProperty('--chip-color', color);
+        button.dataset.chipColor = color;
+      } else {
+        button.style.removeProperty('--chip-color');
+        delete button.dataset.chipColor;
+      }
+    }
     set(button, 'title', chip.title || '');
     set(button, 'disabled', Boolean(chip.disabled));
     attribute(button, 'aria-pressed', String(Boolean(chip.active)));

src/ui/chipGroup.test.mjs

@@ -31,3 +31,24 @@ test('keyed chips retain focus, reflect state, reorder and remove without redund
   syncChipGroup(f.container, []);
   assert.deepEqual(f.container.children, [legend]);
 });
+
+test('a chip colour is set once, changed, and cleared through a CSS variable', () => {
+  const f = railFixture(() => {});
+  const calls = [];
+  syncChipGroup(f.container, [{ id: 'm', label: 'M' }]);
+  const chip = f.container.children[0];
+  chip.style.setProperty = (name, value) => calls.push(['set', name, value]);
+  chip.style.removeProperty = (name) => calls.push(['remove', name]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M' }]);
+  assert.deepEqual(calls, [], 'a chip without a colour never touches style');
+  syncChipGroup(f.container, [{ id: 'm', label: 'M', color: '#05cb63' }]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M', color: '#05cb63' }]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M', color: '#a66bff' }]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M' }]);
+  assert.deepEqual(calls, [
+    ['set', '--chip-color', '#05cb63'],
+    ['set', '--chip-color', '#a66bff'],
+    ['remove', '--chip-color'],
+  ]);
+  assert.equal(chip.dataset.chipColor, undefined);
+});

src/ui/streetLevelControls.test.mjs

@@ -57,7 +57,15 @@ class FakeNode {
         return on;
       },
     };
-    this.style = {};
+    const style = {};
+    this.style = Object.assign(style, {
+      setProperty: (key, value) => {
+        style[key] = value;
+      },
+      removeProperty: (key) => {
+        delete style[key];
+      },
+    });
     Object.defineProperty(this, 'className', {
       get: () => [...names].join(' '),
       set: (value) => {

src/ui/streetLevelPresentation.js

@@ -232,9 +232,12 @@ function presentMeta(state) {
   const providers = state.providers || [];
   if (providers.length === 0) return translateHint(state.coverage.hint);
   if (!state.enabled) return t('Switch Street Level on to draw its coverage.');
+  // A lit source that cannot run on this map is not listed: the core's hint
+  // says which map it needs.
   if (!providers.some((p) => p.on))
-    return t(
-      'Every provider is switched off: light a chip to draw its coverage.',
+    return (
+      translateHint(state.coverage.hint) ||
+      t('Every provider is switched off: light a chip to draw its coverage.')
     );
   // Key-gated with another source ready: say how to use it.
   if (state.keyRequired && state.keyAlternatives?.length)