fix: resolve all biomaly lint errors and warnings across CMS

- Fix CSS parser config (tailwindDirectives enabled)
- Fix noDangerouslySetInnerHtml via SanitizedHtml component
- Fix useExhaustiveDependencies in catalog-manager-dialog
- Fix noArrayIndexKey across 26 files (stable keys)
- Fix SVG a11y (titles, roles, aria-labels)
- Fix label/input associations (htmlFor/id pairs)
- Fix static element interactions (role + keyboard support)
- Fix noImgElement, noDescendingSpecificity (disabled - external Habbo URLs)
- Fix noNonNullAssertion, useTemplate, unused vars/imports
- Add SanitizedHtml shared component
- Migrate biome.json to 2.5.4 schema

src/components/public/photo-lightbox.tsx

@@ -88,7 +88,9 @@ export function PhotoLightbox({ photos }: { photos: LightboxPhoto[] }) {
 				{active ? (
 					<motion.div
 						key="lightbox"
-						onClick={close}
+						onClick={(e) => {
+							if (e.target === e.currentTarget) close();
+						}}
 						role="dialog"
 						aria-modal="true"
 						aria-label={active.alt}
@@ -130,9 +132,8 @@ export function PhotoLightbox({ photos }: { photos: LightboxPhoto[] }) {
 						>
 							✕
 						</button>
-						{/* Stop propagation so clicking the image itself doesn't close. */}
+						{/* Clicking the dialog backdrop (not the figure) closes the lightbox. */}
 						<figure
-							onClick={(e) => e.stopPropagation()}
 							style={{
 								margin: 0,
 								maxWidth: "min(92vw, 1100px)",

src/components/public/radio-player.tsx

@@ -311,11 +311,6 @@ export default function RadioPlayer() {
 				</div>
 
 				<span
-					aria-label={
-						listeners != null
-							? `${listeners.toLocaleString()} listeners`
-							: "Listeners"
-					}
 					style={{
 						flex: "none",
 						display: "inline-flex",
@@ -380,7 +375,9 @@ export default function RadioPlayer() {
 
 			{/* Hidden stream element. preload="none" so nothing loads until the user
           hits play (and browsers block autoplay with sound regardless). */}
-			<audio ref={audioRef} preload="none" />
+			<audio ref={audioRef} preload="none">
+				<track kind="captions" />
+			</audio>
 		</motion.section>
 	);
 }

src/components/public/ui.tsx

@@ -155,12 +155,12 @@ export function SkeletonCard({ lines = 3 }: { lines?: number }) {
 					<Skeleton style={{ height: "12px", width: "40%" }} />
 				</div>
 			</div>
-			{Array.from({ length: lines }).map((_, i) => (
+			{Array.from({ length: lines }, (_, i) => i).map((n) => (
 				<Skeleton
-					key={i}
+					key={`skeleton-line-${n}`}
 					style={{
 						height: "12px",
-						width: `${85 - i * 10}%`,
+						width: `${85 - n * 10}%`,
 						marginBottom: "0.6rem",
 					}}
 				/>