Improve toolbox checklists, image browsing, and guide integration

website/src/components/ImageGallery.jsx

@@ -0,0 +1,42 @@
+// Rôle : affiche la collection d'un outil Images dans la galerie de la visionneuse.
+import { useEffect, useRef } from "react";
+
+export function ImageGallery({ images, activeIndex, focusIndex = -1, onSelect, textContent = {} }) {
+  const galleryRef = useRef(null);
+
+  useEffect(() => {
+    if (focusIndex < 0) return;
+    const frame = window.requestAnimationFrame(() => {
+      galleryRef.current?.querySelector(`[data-image-index="${focusIndex}"]`)?.focus();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [focusIndex]);
+
+  return (
+    <div ref={galleryRef} className="image-viewer-gallery themed-scrollbar">
+      {images.map((image, index) => {
+        const position = `${index + 1} / ${images.length}`;
+        const label = image.label || `${textContent.imageAlt || "Image"} ${index + 1}`;
+        return (
+          <button
+            className={`image-viewer-gallery-item nds-card ${index === activeIndex ? "is-active" : ""}`}
+            data-variant="interactive"
+            data-image-index={index}
+            type="button"
+            key={image.id || `${image.dataUrl}-${index}`}
+            onClick={() => onSelect(index)}
+            aria-label={`${textContent.galleryImageAriaLabel || "Afficher en grand"} : ${label}`}
+          >
+            <span className="image-viewer-gallery-frame">
+              <img src={image.dataUrl} alt="" loading="lazy" decoding="async" />
+            </span>
+            <span className="image-viewer-gallery-caption">
+              <strong>{label}</strong>
+              <small>{position}</small>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}