feat(library,home): lay libraries out as a mosaic, with favourites per category

The library overview and the home shortcut strip showed artwork of three
different shapes — square music covers, 16:9 library backdrops, 2:3 posters —
in grids that pick one box and crop everything to it. The home strip said so
in a comment: it forced `aspect="video"` on music libraries so the row would
line up, which lined it up by cutting the covers down.

Both surfaces are now justified mosaics: rows share one height and each tile is
as wide as its own artwork. `layoutMosaic` is a pure module — it packs tiles
until the height needed to fill the container drops to the target, justifies the
row by absorbing the rounding remainder into its widest tile, and deliberately
leaves the last row unstretched so one leftover tile does not inflate into a
banner. The component supplies only what the DOM knows: the measured container
width, and the artwork's *decoded* aspect ratio (via a new `onNaturalSize` on
CachedImage), committed in one debounced batch so the grid does not reshuffle
once per image as artwork lands.

Favourites gain a tile per category beside the library it belongs to, alongside
the existing cross-library entry. Which collection type maps to which category
is Jellyfin vocabulary, so it is derived in Rust — `SearchScope::for_collection_type`,
stamped onto every `Library` by a new constructor and carried over as an optional
`favoritesScope`. Deriving it in Svelte would have rebuilt the exact leak
`SearchScope::item_types` was extracted to close. A category shows one tile
however many libraries share it, and a library kind favourites do not carve up
(Live TV, channels, books) gets none.

Also corrects the requirements-count test, which the UR-074 commit left one
behind.

Spec: docs/specs/library-mosaic.md
TRACES: UR-075, UR-067 | DR-163, DR-164 | UT-158..UT-162

src/lib/components/library/MosaicTile.svelte

@@ -0,0 +1,90 @@
+<!--
+  One tile of a mosaic: artwork at an exact pixel box, with its label written
+  over the bottom of the image rather than beneath it.
+
+  The label lives on the artwork on purpose — a caption below would add height
+  outside the box the layout computed, and a row whose captions wrap to two
+  lines would no longer line up with its neighbours. Keeping everything inside
+  the box is what lets `layoutMosaic` own the geometry completely.
+
+  TRACES: UR-075 | DR-163
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import CachedImage from "$lib/components/common/CachedImage.svelte";
+
+  interface Props {
+    label: string;
+    width: number;
+    height: number;
+    /** Item whose Primary image is the artwork. Omit for an icon-only tile. */
+    itemId?: string;
+    imageTag?: string | null;
+    /** Drawn instead of artwork — favourites tiles have no image of their own. */
+    icon?: Snippet;
+    /** Tints an icon-only tile so it reads as a destination, not a broken image. */
+    accent?: boolean;
+    onclick?: () => void;
+    /**
+     * Reports the artwork's true aspect ratio once decoded, so the grid can
+     * re-pack against the shape the image actually has.
+     */
+    onRatio?: (ratio: number) => void;
+  }
+
+  let {
+    label,
+    width,
+    height,
+    itemId,
+    imageTag,
+    icon,
+    accent = false,
+    onclick,
+    onRatio,
+  }: Props = $props();
+
+  // Request an image comfortably larger than the box so a wide tile is not
+  // upscaled, without refetching every time the container resizes (CachedImage
+  // keys its fetch on the item, not on this number).
+  const REQUEST_WIDTH = 480;
+</script>
+
+<button
+  type="button"
+  {onclick}
+  aria-label={label}
+  class="group/tile relative overflow-hidden rounded-lg bg-[var(--color-surface)] shadow-md
+         transition-transform duration-200 hover:z-10 hover:scale-[1.03] hover:shadow-2xl
+         focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-jellyfin)]"
+  style="width: {width}px; height: {height}px;"
+>
+  {#if icon}
+    <div
+      class="absolute inset-0 flex items-center justify-center
+             {accent
+        ? 'bg-gradient-to-br from-[var(--color-jellyfin)]/40 to-[var(--color-jellyfin)]/5'
+        : 'bg-[var(--color-surface)]'}"
+    >
+      {@render icon()}
+    </div>
+  {:else if itemId}
+    <CachedImage
+      {itemId}
+      imageType="Primary"
+      tag={imageTag}
+      maxWidth={REQUEST_WIDTH}
+      alt={label}
+      class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover/tile:scale-105"
+      onNaturalSize={(w, h) => onRatio?.(w / h)}
+    />
+  {/if}
+
+  <!-- Legibility wash: only as tall as the caption needs, so artwork stays
+       artwork. -->
+  <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/45 to-transparent pt-6 pb-2 px-2.5">
+    <p class="truncate text-left text-sm font-semibold text-white drop-shadow group-hover/tile:text-[var(--color-jellyfin)] transition-colors">
+      {label}
+    </p>
+  </div>
+</button>