fix(lint): resolve all biome warnings across API, web, and image-engine

API:
- Replace string concatenation with template literals (batch, pipeline,
  tool-factory, content-aware-resize, passport-photo, remove-background)
- Remove unused imports (teams, color-adjustments, image-enhancement)
- Replace non-null assertions with guard clauses in bg-effects and stitch
- Use optional chaining in docs route

Image-engine:
- Remove unused OutputFormat imports (compress, convert)
- Use local variables instead of reassigning parameters (optimize-for-web, sharpen)

Web:
- Fix useExhaustiveDependencies: remove genuinely redundant deps, add
  biome-ignore comments for intentional patterns (src prop, cleanup fns)
- Replace non-null assertions with null-safe alternatives
- Add accessible titles to inline SVGs (color-settings, image-enhancement-settings)
- Fix noLabelWithoutControl: associate labels via htmlFor/id or use <span>
  (image-to-base64-settings, edit-metadata-settings, qr-generate-settings)
- Replace div[role="button"] with <button> (pdf-to-image-settings)
- Use stable keys instead of array indices (collage-preview, collage-settings)
- Fix noStaticElementInteractions in collage-preview (role="none")
- Remove unused function parameters and imports

apps/api/src/lib/bg-effects.ts

@@ -44,8 +44,8 @@ export async function blurBackground(
  */
 export async function addDropShadow(subjectBuffer: Buffer, opacity: number): Promise<Buffer> {
   const meta = await sharp(subjectBuffer).metadata();
-  const width = meta.width!;
-  const height = meta.height!;
+  if (!meta.width || !meta.height) throw new Error("Cannot read image dimensions");
+  const { width, height } = meta;
   const normalizedOpacity = Math.max(0, Math.min(100, opacity)) / 100;
 
   // Shadow parameters
@@ -121,6 +121,7 @@ export async function createGradientBackground(
  */
 export async function compositeOnColor(subjectBuffer: Buffer, hexColor: string): Promise<Buffer> {
   const meta = await sharp(subjectBuffer).metadata();
+  if (!meta.width || !meta.height) throw new Error("Cannot read image dimensions");
   const hex = hexColor.replace("#", "");
   const r = parseInt(hex.substring(0, 2), 16);
   const g = parseInt(hex.substring(2, 4), 16);
@@ -128,8 +129,8 @@ export async function compositeOnColor(subjectBuffer: Buffer, hexColor: string):
 
   return sharp({
     create: {
-      width: meta.width!,
-      height: meta.height!,
+      width: meta.width,
+      height: meta.height,
       channels: 4,
       background: { r, g, b, alpha: 255 },
     },
@@ -148,8 +149,8 @@ export async function compositeOnImage(
   backgroundBuffer: Buffer,
 ): Promise<Buffer> {
   const meta = await sharp(subjectBuffer).metadata();
-  const width = meta.width!;
-  const height = meta.height!;
+  if (!meta.width || !meta.height) throw new Error("Cannot read image dimensions");
+  const { width, height } = meta;
 
   const resizedBg = await sharp(backgroundBuffer)
     .resize(width, height, { fit: "cover" })
@@ -184,8 +185,8 @@ export async function applyEffects(
   },
 ): Promise<Buffer> {
   const meta = await sharp(subjectBuffer).metadata();
-  const width = meta.width!;
-  const height = meta.height!;
+  if (!meta.width || !meta.height) throw new Error("Cannot read image dimensions");
+  const { width, height } = meta;
   const bgType = settings.backgroundType || "transparent";
 
   // Step 1: Add shadow to the subject (before background compositing)