@7365admin1/layer-common 3.2.4 → 3.2.6

package/components/CameraWallTile.vue

@@ -0,0 +1,818 @@
+<template>
+  <div
+    ref="root"
+    class="vms-tile"
+    :class="{ 'vms-tile--dense': dense, 'vms-tile--focused': focused, 'vms-tile--empty': !camera }"
+    :tabindex="camera ? 0 : -1"
+    :aria-label="camera ? `${camera.name || camera._id}, ${view.label}` : 'Empty position'"
+    :aria-current="focused ? 'true' : undefined"
+    @click="camera && $emit('focus', camera)"
+    @dblclick="camera && toggleFullscreen()"
+    @keydown.enter="camera && toggleFullscreen()"
+  >
+    <!--
+      The picture, when there is one to show. This is an embed of the video
+      service's own player page: the stored address IS the live view, and there
+      is no other transport for live web video today.
+
+      The STAGE around it is what zooms: the transform is on our own element,
+      so magnifying the picture needs nothing from inside that page and reaches
+      into no other origin.
+    -->
+    <div
+      v-if="camera && view.showPlayer"
+      class="vms-tile__stage"
+      :style="stageStyle"
+    >
+      <iframe
+        ref="frameEl"
+        :key="camera.host"
+        :src="camera.host"
+        class="vms-tile__frame"
+        :title="`Live view of ${camera.name || 'camera'}`"
+        allowfullscreen
+        referrerpolicy="no-referrer"
+        @load="onPlayerLoad"
+        @error="onPlayerError"
+      />
+    </div>
+
+    <!--
+      THE LAYER THAT MAKES THE TILE A TILE AGAIN.
+
+      An iframe swallows every pointer event that lands on it, so before this
+      existed a click on a tile that was actually showing a picture never
+      reached us: selecting a camera only worked on the tiles with no video in
+      them, which is the opposite of useful. This transparent layer sits over
+      the picture so a click selects, a double-click goes full screen, and —
+      when the server says this camera supports it — a wheel zooms and a drag
+      pans. The player page underneath has no controls of its own to lose.
+    -->
+    <div
+      v-if="camera && view.showPlayer"
+      class="vms-tile__grab"
+      :class="{ 'vms-tile__grab--zoomed': zoom > 1 }"
+      @wheel="onWheel"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerEnd"
+      @pointercancel="onPointerEnd"
+    />
+
+    <!--
+      A tile with nothing to show says so across the whole tile, not in a
+      corner. At nine tiles a supervisor is scanning, and a one-line reason
+      tucked under a black rectangle is exactly the thing that gets missed.
+    -->
+    <div v-if="view.detail" class="vms-tile__overlay">
+      <p class="vms-tile__reason">{{ view.detail }}</p>
+    </div>
+
+    <!-- Chrome sits OVER the picture, never around it. -->
+    <!--
+      THE STATUS WORD IS NEVER DROPPED, AT ANY LAYOUT.
+
+      It used to be: at nine tiles the badge became a bare 7 px dot, on the
+      argument that the word was unreadable at wall-scanning distance. That is
+      a phone's argument. Nine tiles on a desktop wall is the layout a
+      supervisor watches from furthest away and the one where a dying camera is
+      most likely to go unnoticed, so it is the last place to remove the only
+      words that say whether a camera is alive. The type shrinks; the fact
+      stays.
+    -->
+    <div v-if="camera" class="vms-tile__status" :title="view.note || undefined">
+      <span class="vms-tile__dot" :class="`vms-tile__dot--${view.state}`" />
+      <span class="vms-tile__state">{{ view.label }}</span>
+    </div>
+
+    <div v-if="camera" class="vms-tile__chrome">
+      <!-- The NAME wins the fight for room: it is the tile's entire job. -->
+      <span class="vms-tile__name">{{ camera.name || camera._id }}</span>
+      <!--
+        RULE 6: the RECORDER's state, kept apart from the badge above, which is
+        about the player page. At nine tiles it keeps its phrase and loses only
+        the timestamp — a dropped recorder is not a detail to hide on the
+        busiest layout.
+      -->
+      <span
+        v-if="healthLine"
+        class="vms-tile__health"
+        :title="healthTitle"
+      >
+        <span class="vms-tile__dot" :class="`vms-tile__dot--h-${recorder.tone}`" />
+        {{ healthLine }}
+      </span>
+
+      <!--
+        THE ZOOM READOUT AND THE WAY BACK.
+
+        Only drawn once the picture is actually magnified. A supervisor who has
+        zoomed into a corner needs one obvious control out, and needs to be
+        able to tell a magnified picture from a camera that has been moved —
+        hence the "2.0x" reading rather than a bare arrow. In the same row as
+        the name, so it can never sit on top of it.
+      -->
+      <span v-if="zoom > 1" class="vms-tile__zoom">
+        <span class="vms-tile__zoom-level">{{ zoom.toFixed(1) }}x</span>
+        <button
+          type="button"
+          class="vms-tile__zoom-reset"
+          title="Back to the whole picture"
+          @click.stop="resetZoom"
+        >
+          Reset
+        </button>
+      </span>
+    </div>
+
+    <button
+      v-if="camera"
+      type="button"
+      class="vms-tile__expand"
+      title="Fill the screen with this camera"
+      aria-label="Fill the screen with this camera"
+      @click.stop="toggleFullscreen()"
+    >
+      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+        <path
+          d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="square"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+import {
+  capabilityView,
+  clampPan,
+  clampZoom,
+  healthView,
+  LIVE_CONNECT_TIMEOUT_MS,
+  LIVE_FRAME_TIMEOUT_MS,
+  playerOrigin,
+  playerSignal,
+  tileView,
+  zoomStep,
+  type TPlayerState,
+  type TWallCamera,
+  type TWallCameraHealth,
+} from "../utils/camera-wall";
+
+/**
+ * ONE TILE OF THE CAMERA WALL.
+ *
+ * Everything this component decides comes from `utils/camera-wall.ts`; what is
+ * left here is the picture, the chrome over it, and the one thing only a
+ * browser can know — whether the player page ever loaded.
+ *
+ * ## The ceiling, and what the badge is now allowed to claim
+ *
+ * We can tell when the player PAGE loads. We cannot tell when a FRAME decodes:
+ * the page belongs to the video service, not to us, and reaching into another
+ * origin's document is blocked by the browser — correctly.
+ *
+ * That ceiling has not moved. What has changed is that the badge no longer
+ * pretends otherwise. A loaded page earns **"Not confirmed"**, not "Live"; only
+ * a frame the video service itself reports over `postMessage` earns "Live".
+ * The service sends nothing today, so every tile on this estate sits at "Not
+ * confirmed" — which is the true answer. It went in because on the live wall two
+ * cameras rendered a blank rectangle under a green "Live" badge, which is the
+ * one thing a monitoring screen must never do.
+ *
+ * The listener below is inert until the video service emits. The change needed
+ * there is small — jsmpeg already calls back on every decoded frame, so
+ * `parent.postMessage({ event: "frame" }, "*")` from its `onVideoDecode` and
+ * `{ event: "stalled" }` from `onStalled` is the whole of it — but it lives in
+ * another repository and another team's deployment, and is written up in the
+ * PR rather than done here.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    camera: TWallCamera | null;
+    /** Nine tiles: drop the status word, keep the dot. */
+    dense?: boolean;
+    /** Browser connectivity. One dead tile and a dead browser look identical otherwise. */
+    online?: boolean;
+    focused?: boolean;
+    /** The recorder's own state, from the health sweep. Separate fact — rule 6. */
+    health?: TWallCameraHealth | null;
+    /** Recomputed by the wall on its own clock so "4 min ago" does not freeze. */
+    now?: number;
+  }>(),
+  { dense: false, online: true, focused: false, health: null, now: 0 }
+);
+
+defineEmits<{ (e: "focus", camera: TWallCamera): void }>();
+
+const root = ref<HTMLElement | null>(null);
+const frameEl = ref<HTMLIFrameElement | null>(null);
+const player = ref<TPlayerState>("loading");
+let timer: ReturnType<typeof setTimeout> | null = null;
+let frameTimer: ReturnType<typeof setTimeout> | null = null;
+
+const view = computed(() =>
+  tileView(props.camera, { online: props.online, player: player.value })
+);
+
+/* ------------------------------------------------------------------ health */
+
+const recorder = computed(() => healthView(props.health, props.now || Date.now()));
+
+/**
+ * One line, and the last-picture time only when there is one. A tile that has
+ * never served a picture must not read as "last picture: never" — it has its
+ * own reason across the tile already, and repeating it small and grey is noise.
+ */
+const healthLine = computed(() => {
+  if (!props.health) return "";
+  const { label, lastFrame } = recorder.value;
+  // Nine tiles: the phrase stays, the timestamp goes. "Recorder not responding"
+  // is the fact; "· 4 min ago" is the detail, and detail is what a small tile
+  // gives up.
+  return lastFrame && !props.dense ? `${label} · ${lastFrame}` : label;
+});
+
+/**
+ * Everything the line had no room for, on hover. The firmware-and-clock
+ * sentence used to be appended here too; it is gone for the same reason it is
+ * gone from the panel — this screen never showed either value, so explaining
+ * their absence gave the reader nothing to do. See `THealthView`.
+ */
+const healthTitle = computed(() => recorder.value.detail || "");
+
+/* -------------------------------------------------------------------- zoom */
+
+/**
+ * DIGITAL ZOOM — armed by the SERVER, not by this component.
+ *
+ * `digitalZoom` is a capability like any other, and `unknown` counts as no: a
+ * browser talking to an API that predates the descriptor gets no zoom rather
+ * than a gesture that silently does nothing. Nothing here contacts a device —
+ * this crops and enlarges the picture already on the screen — but the rule is
+ * the rule, and honouring it is what keeps zoom and "Move camera" visibly
+ * different things.
+ */
+const canZoom = computed(
+  () => view.value.showPlayer && capabilityView(props.camera, "digitalZoom").available
+);
+
+const zoom = ref(1);
+const pan = ref({ x: 0, y: 0 });
+const frame = ref({ width: 0, height: 0 });
+
+/** Live pointers, by id: two of them is a pinch, one is a drag. */
+const pointers = new Map<number, { x: number; y: number }>();
+let dragFrom = { x: 0, y: 0, pan: { x: 0, y: 0 }, distance: 0, zoom: 1 };
+
+const stageStyle = computed(() => ({
+  transform: `translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value})`,
+}));
+
+function resetZoom() {
+  zoom.value = 1;
+  pan.value = { x: 0, y: 0 };
+}
+
+function measure(el: HTMLElement | null) {
+  if (!el) return;
+  const box = el.getBoundingClientRect();
+  frame.value = { width: box.width, height: box.height };
+}
+
+function setZoom(next: number) {
+  const scale = clampZoom(next);
+  zoom.value = scale;
+  pan.value = clampPan(pan.value, scale, frame.value);
+}
+
+function onWheel(event: WheelEvent) {
+  if (!canZoom.value) return;
+  // At 1x, scrolling DOWN is somebody scrolling the page and must stay that
+  // way — a wall two thirds of the way down a page that traps the wheel is
+  // a page you cannot get past.
+  if (zoom.value <= 1 && event.deltaY > 0) return;
+
+  event.preventDefault();
+  measure(event.currentTarget as HTMLElement);
+  setZoom(zoomStep(zoom.value, event.deltaY));
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (!canZoom.value) return;
+  const el = event.currentTarget as HTMLElement;
+  pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+  measure(el);
+
+  const two = [...pointers.values()];
+  dragFrom = {
+    x: event.clientX,
+    y: event.clientY,
+    pan: { ...pan.value },
+    distance: two.length >= 2 ? Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y) : 0,
+    zoom: zoom.value,
+  };
+
+  // Only capture once there is something to drag. At 1x the tile must keep
+  // behaving like a button: click selects, double-click goes full screen.
+  if (zoom.value > 1 || pointers.size >= 2) el.setPointerCapture?.(event.pointerId);
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!canZoom.value || !pointers.has(event.pointerId)) return;
+  pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+
+  const two = [...pointers.values()];
+  if (two.length >= 2) {
+    // Pinch. The starting distance is re-anchored on every release, because a
+    // second finger lifting mid-pinch otherwise leaves a stale one and the
+    // next move jumps.
+    const distance = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
+    if (dragFrom.distance > 0) setZoom((dragFrom.zoom * distance) / dragFrom.distance);
+    return;
+  }
+
+  if (zoom.value <= 1) return;
+  event.preventDefault();
+  pan.value = clampPan(
+    {
+      x: dragFrom.pan.x + (event.clientX - dragFrom.x),
+      y: dragFrom.pan.y + (event.clientY - dragFrom.y),
+    },
+    zoom.value,
+    frame.value
+  );
+}
+
+function onPointerEnd(event: PointerEvent) {
+  pointers.delete(event.pointerId);
+  dragFrom = { ...dragFrom, distance: 0, zoom: zoom.value, pan: { ...pan.value } };
+}
+
+/**
+ * A tile reused for a different camera must not inherit the previous one's
+ * magnification, and a camera that stops supporting zoom must not stay stuck
+ * in a crop nobody can now reset.
+ */
+watch([() => props.camera?._id, canZoom], () => resetZoom());
+
+/**
+ * The document arrived. That is ALL this proves — the video service answers
+ * with the same player page for a channel that has no camera behind it — so it
+ * buys `page-up` and no more. Only `onPlayerMessage` can reach "Live".
+ */
+function onPlayerLoad() {
+  clearTimer();
+  if (player.value !== "playing") player.value = "page-up";
+}
+
+/** Rare for a cross-origin frame, but free, and unambiguous when it happens. */
+function onPlayerError() {
+  clearTimer();
+  player.value = "failed";
+}
+
+/**
+ * THE ONLY ROUTE TO A GREEN BADGE.
+ *
+ * Two checks before a message is believed, and both matter: the message must
+ * come from the window we embedded (any page can `postMessage` this one), and
+ * it must come from the camera's own origin. An unrecognised payload returns
+ * `null` and leaves the tile exactly where it was — a message we do not
+ * understand must never be able to turn a badge green.
+ */
+function onPlayerMessage(event: MessageEvent) {
+  const origin = playerOrigin(props.camera?.host);
+  if (!origin || event.origin !== origin) return;
+  if (frameEl.value && event.source !== frameEl.value.contentWindow) return;
+
+  const signal = playerSignal(event.data);
+  if (!signal) return;
+
+  clearTimer();
+  if (signal === "playing") {
+    player.value = "playing";
+    // A picture that arrived once and stopped must not stay green. This is the
+    // mobile app's "Live over a nine-second-old still" defect, and the clock is
+    // the only thing standing between us and repeating it.
+    restartFrameClock();
+  } else {
+    clearFrameTimer();
+    player.value = signal === "stalled" ? "stalled" : "failed";
+  }
+}
+
+function clearTimer() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+}
+
+function clearFrameTimer() {
+  if (frameTimer) {
+    clearTimeout(frameTimer);
+    frameTimer = null;
+  }
+}
+
+function restartFrameClock() {
+  clearFrameTimer();
+  frameTimer = setTimeout(() => {
+    if (player.value === "playing") player.value = "stalled";
+  }, LIVE_FRAME_TIMEOUT_MS);
+}
+
+/**
+ * Restart the clock whenever the address changes — a tile reused for a
+ * different camera must not inherit the previous one's verdict, in either
+ * direction.
+ *
+ * The timeout only fires while nothing at all has been heard: a page that
+ * loaded is already at `page-up` and stays there. Sitting on "Not confirmed"
+ * indefinitely is deliberate — declaring a camera dead on a timer, with no
+ * evidence, is the same mistake as declaring it live on a timer.
+ */
+watch(
+  () => props.camera?.host,
+  (host) => {
+    clearTimer();
+    clearFrameTimer();
+    player.value = "loading";
+    if (!host) return;
+    timer = setTimeout(() => {
+      if (player.value === "loading") player.value = "failed";
+    }, LIVE_CONNECT_TIMEOUT_MS);
+  },
+  { immediate: true }
+);
+
+onMounted(() => window.addEventListener("message", onPlayerMessage));
+
+onBeforeUnmount(() => {
+  window.removeEventListener("message", onPlayerMessage);
+  clearTimer();
+  clearFrameTimer();
+});
+
+/** The browser's own fullscreen. Nothing to build, and it survives the F11 key. */
+async function toggleFullscreen() {
+  const el = root.value;
+  if (!el) return;
+  try {
+    if (document.fullscreenElement) await document.exitFullscreen();
+    else await el.requestFullscreen();
+  } catch {
+    // A browser that refuses fullscreen (permissions policy, an iframe, an old
+    // Safari) is not an error worth interrupting a supervisor over — the tile
+    // keeps working exactly as it did.
+  }
+}
+</script>
+
+<style scoped>
+.vms-tile {
+  position: relative;
+  overflow: hidden;
+  background: var(--vms-tile, #101418);
+  border-radius: var(--vms-radius, 3px);
+  outline: none;
+  min-height: 0;
+}
+
+/*
+  THE SELECTED TILE, AND WHY IT IS NOW LOUDER.
+
+  The panel under the wall describes ONE tile. It used to say which by printing
+  the camera's name — directly under a tile already captioned with that name —
+  because the ring here was too quiet to be doing that job: 2 px of #5b9be0
+  disappears against a bright picture, and at nine tiles it was a hairline the
+  eye skipped. So the panel was answering "which one?" in words, and the words
+  read as the name repeated twice.
+
+  Two marks now, and between them they hold at 1x1, 2x2 and 3x3:
+
+  - a **3 px accent ring**, with a 1 px scrim hairline INSIDE it. The hairline is
+    what makes the ring survive a white picture — accent-on-white is a weak edge,
+    accent-on-near-black is not, so the ring carries its own dark backing rather
+    than depending on what the camera happens to be pointing at.
+  - the **name chip underlined in the accent**, which is the same mark the
+    toolbar already uses for a selected tool (`.vms__tool--on`). At 3x3 the ring
+    is 3 px on a ~118 px tile; the underline sits right beside the caption a
+    supervisor is already reading, so identification does not depend on
+    perceiving 3 px from across a room.
+
+  INVENTED VALUES, recorded: the ring is 3 px where it was 2 px. Everything else
+  is existing — `--vms-accent`, `--vms-scrim-solid`, and the toolbar's 2 px
+  underline idiom. No new colour.
+*/
+.vms-tile--focused {
+  box-shadow:
+    inset 0 0 0 3px var(--vms-accent, #5b9be0),
+    inset 0 0 0 4px var(--vms-scrim-solid, rgba(7, 9, 12, 0.82));
+}
+
+.vms-tile--focused .vms-tile__name {
+  box-shadow: inset 0 -2px 0 var(--vms-accent, #5b9be0);
+}
+
+.vms-tile:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--vms-accent, #5b9be0);
+}
+
+.vms-tile--empty {
+  background: transparent;
+  border: 1px dashed var(--vms-line, #232b36);
+}
+
+/*
+  The stage is what the transform is applied to; the tile clips it. No
+  transition: a supervisor dragging a magnified picture expects it under their
+  pointer, and 150 ms of easing on every move reads as lag, not polish.
+*/
+.vms-tile__stage {
+  position: absolute;
+  inset: 0;
+  transform-origin: center center;
+  will-change: transform;
+}
+
+.vms-tile__frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  background: #000;
+}
+
+/*
+  Transparent, and over the picture. It is what gives the tile its clicks back
+  from the iframe; `touch-action: none` is what lets a pinch be a pinch rather
+  than the browser zooming the whole page.
+*/
+.vms-tile__grab {
+  position: absolute;
+  inset: 0;
+  touch-action: none;
+}
+
+.vms-tile__grab--zoomed {
+  cursor: grab;
+}
+
+.vms-tile__grab--zoomed:active {
+  cursor: grabbing;
+}
+
+.vms-tile__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  background: var(--vms-scrim-solid, rgba(7, 9, 12, 0.82));
+  pointer-events: none;
+}
+
+.vms-tile__reason {
+  margin: 0;
+  text-align: center;
+  color: var(--vms-text-dim, #94a0b0);
+  font-size: 12px;
+  line-height: 16px;
+  max-width: 32ch;
+}
+
+.vms-tile--dense .vms-tile__reason {
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.vms-tile__status {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  pointer-events: none;
+}
+
+.vms-tile__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--vms-text-faint, #5c6675);
+  flex: none;
+}
+
+/* State colours only. The chrome itself stays achromatic on purpose. */
+.vms-tile__dot--live {
+  background: #4caf50;
+}
+.vms-tile__dot--connecting {
+  background: #fb8c00;
+}
+/*
+  NOT VERIFIED is deliberately not amber and deliberately not green. Amber is
+  "something is wrong", and nothing is known to be wrong; green is the claim
+  being withdrawn. A hollow ring reads as "no answer here", which is exactly
+  the fact. #7a8697 measures 5.0:1 on a tile — a dot nobody can see is a state
+  nobody knows about.
+*/
+.vms-tile__dot--unverified {
+  background: transparent;
+  box-shadow: inset 0 0 0 2px #7a8697;
+}
+.vms-tile__dot--no-signal,
+.vms-tile__dot--offline {
+  background: #e0241c;
+}
+.vms-tile__dot--unavailable {
+  background: var(--vms-text-faint, #5c6675);
+}
+
+.vms-tile__state {
+  color: var(--vms-text, #e8ecf1);
+  font-size: 11px;
+  line-height: 14px;
+  white-space: nowrap;
+}
+
+/* Nine tiles: smaller and tighter, still a word. */
+.vms-tile--dense .vms-tile__status {
+  top: 4px;
+  right: 4px;
+  gap: 4px;
+  padding: 1px 5px;
+}
+
+.vms-tile--dense .vms-tile__state {
+  font-size: 10px;
+  line-height: 13px;
+}
+
+/*
+  `wrap` is what keeps the promise that the name and the recorder line both
+  survive a narrow tile: on a cramped nine-tile wall the health phrase drops to
+  its own line instead of squeezing the name into an ellipsis.
+*/
+.vms-tile__chrome {
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  bottom: 5px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 3px 6px;
+  pointer-events: none;
+}
+
+.vms-tile--dense .vms-tile__chrome {
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+}
+
+/*
+  The RECORDER's state, and deliberately quieter than the name and the badge:
+  it is a second-order fact a supervisor reads when something looks wrong, not
+  something that should compete with the picture every second it is fine.
+*/
+.vms-tile__health {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: 0 1 auto;
+  min-width: 0;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  color: var(--vms-text-dim, #94a0b0);
+  font-size: 11px;
+  line-height: 15px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vms-tile--dense .vms-tile__health {
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.vms-tile__dot--h-ok {
+  background: #4caf50;
+}
+.vms-tile__dot--h-warn {
+  background: #fb8c00;
+}
+.vms-tile__dot--h-down {
+  background: #e0241c;
+}
+.vms-tile__dot--h-unknown {
+  background: var(--vms-text-faint, #5c6675);
+}
+
+/* --------------------------------------------------------------- the zoom */
+
+.vms-tile__zoom {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  /* Pushed to the far end of the chrome row, opposite the name. */
+  margin-left: auto;
+  flex: none;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  font-size: 11px;
+  line-height: 15px;
+  /* The row is click-through; this one control is not. */
+  pointer-events: auto;
+}
+
+.vms-tile__zoom-level {
+  color: var(--vms-text, #e8ecf1);
+  font-variant-numeric: tabular-nums;
+}
+
+.vms-tile__zoom-reset {
+  background: none;
+  border: none;
+  padding: 2px 2px;
+  color: var(--vms-accent, #5b9be0);
+  font-size: 11px;
+  line-height: 15px;
+  cursor: pointer;
+}
+
+.vms-tile__zoom-reset:focus-visible {
+  outline: 2px solid var(--vms-accent, #5b9be0);
+}
+
+.vms-tile__name {
+  color: var(--vms-text, #e8ecf1);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vms-tile--dense .vms-tile__name {
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.vms-tile__expand {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  color: var(--vms-text, #e8ecf1);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+/* The control is always THERE; it only stops competing with the picture. */
+.vms-tile:hover .vms-tile__expand,
+.vms-tile:focus-within .vms-tile__expand {
+  opacity: 1;
+}
+
+.vms-tile__expand:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--vms-accent, #5b9be0);
+}
+
+/* Fullscreen: the picture takes the whole screen, the chrome stays legible. */
+.vms-tile:fullscreen {
+  border-radius: 0;
+  background: #000;
+}
+</style>