Add reproducer for SimilarContentCard thumbnail bug

examples/reproducers/1-similar-content-card-thumbnail/README.md

@@ -0,0 +1,23 @@
+# SimilarContentCard Thumbnail Blur Bug Reproducer
+
+This reproducer demonstrates a bug where `SimilarContentCard` clears the backdrop image (CSS variable `--similar-card-thumb-url`) when the thumbnail is blurred, causing a regression in `SimilarContentCard.test.mjs`.
+
+## Issue
+
+The `SimilarContentCard` component explicitly clears the backdrop image when `shouldBlur` is true to prevent sharp background showing through the blurred image. However, the unit tests expect the backdrop to be set to the fallback image even when blurred.
+
+## How to run
+
+From the repository root:
+
+```bash
+node --import ./tests/test-helpers/setup-localstorage.mjs examples/reproducers/1-similar-content-card-thumbnail/reproduce_issue.js
+```
+
+## Expected Output
+
+The script should fail with an assertion error indicating that the CSS variable is empty instead of the expected URL.
+
+```
+CSS variable should be set to fallback src. Expected url("https://cdn.example.com/fallback.jpg"), got ''
+```

examples/reproducers/1-similar-content-card-thumbnail/reproduce_issue.js

@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import { SimilarContentCard } from "../../../js/ui/components/SimilarContentCard.js";
+import { createUiDom } from "../../../tests/ui/helpers/jsdom-test-helpers.mjs";
+
+console.log("Reproducing issue: Uncached thumbnails should use fallback and retain blur state");
+
+const { document, window, cleanup } = createUiDom();
+try {
+  const fallbackSrc = "https://cdn.example.com/fallback.jpg";
+  const remoteThumb = "https://cdn.example.com/remote.jpg";
+  const cache = new Map();
+
+  const card = new SimilarContentCard({
+    document,
+    video: {
+      id: "video-456",
+      title: "Test Video",
+      thumbnail: remoteThumb,
+      moderation: { blurThumbnail: true },
+    },
+    thumbnailCache: cache,
+    fallbackThumbnailSrc: fallbackSrc,
+  });
+
+  const root = card.getRoot();
+  const img = root.querySelector("img[data-video-thumbnail]");
+  assert(img, "Thumbnail image should exist");
+
+  const cssVar = window.getComputedStyle(root).getPropertyValue("--similar-card-thumb-url").trim();
+  console.log(`CSS Variable: '${cssVar}'`);
+
+  assert.equal(
+    cssVar,
+    `url("${fallbackSrc}")`,
+    `CSS variable should be set to fallback src. Expected url("${fallbackSrc}"), got '${cssVar}'`
+  );
+
+  console.log("Test PASSED (Unexpectedly?)");
+} catch (error) {
+  console.error("Test FAILED (As expected for a reproducer):");
+  console.error(error.message);
+  process.exit(1);
+} finally {
+  cleanup();
+}