From 93c588b23969fd5cb7e3659e5ae76ae411fb8ccd Mon Sep 17 00:00:00 2001
From: Siddharth Kumar Sah <siddharth123sk@gmail.com>
Date: Tue, 14 Apr 2026 22:15:37 +0800
Subject: [PATCH] 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                |  17 +--
 apps/api/src/routes/batch.ts                  |   2 +-
 apps/api/src/routes/docs.ts                   |   2 +-
 apps/api/src/routes/pipeline.ts               |   4 +-
 apps/api/src/routes/teams.ts                  |   2 +-
 apps/api/src/routes/tool-factory.ts           |   2 +-
 .../api/src/routes/tools/color-adjustments.ts |   1 -
 .../src/routes/tools/content-aware-resize.ts  |   2 +-
 .../api/src/routes/tools/image-enhancement.ts |   1 -
 apps/api/src/routes/tools/passport-photo.ts   |   2 +-
 .../api/src/routes/tools/remove-background.ts |   2 +-
 apps/api/src/routes/tools/stitch.ts           |   5 +-
 .../src/components/common/image-viewer.tsx    |   1 +
 .../components/common/multi-image-viewer.tsx  |   5 +-
 .../src/components/tools/collage-preview.tsx  |   5 +-
 .../src/components/tools/collage-settings.tsx |   4 +-
 .../src/components/tools/color-settings.tsx   |   7 +-
 .../tools/edit-metadata-settings.tsx          |   8 +-
 .../src/components/tools/favicon-settings.tsx |   1 +
 .../tools/find-duplicates-settings.tsx        |   1 +
 .../components/tools/gif-tools-settings.tsx   |   1 -
 .../tools/image-enhancement-settings.tsx      |   4 +-
 .../tools/image-to-base64-results.tsx         |   2 +-
 .../tools/image-to-base64-settings.tsx        |  17 ++-
 .../tools/image-to-pdf-settings.tsx           |   1 +
 .../tools/passport-photo-settings.tsx         |   5 +
 .../tools/pdf-to-image-settings.tsx           |  15 +--
 .../src/components/tools/pipeline-builder.tsx |  37 +++---
 .../components/tools/qr-generate-preview.tsx  |   3 +-
 .../components/tools/qr-generate-settings.tsx | 123 ++++++++++++++----
 .../components/tools/remove-bg-settings.tsx   |   4 +-
 .../web/src/components/tools/split-canvas.tsx |  11 +-
 .../src/components/tools/split-settings.tsx   |   1 +
 .../src/components/tools/upscale-settings.tsx |   2 +-
 apps/web/src/pages/change-password-page.tsx   |   2 +-
 .../image-engine/src/operations/compress.ts   |   2 +-
 .../image-engine/src/operations/convert.ts    |   2 +-
 .../src/operations/optimize-for-web.ts        |  14 +-
 .../image-engine/src/operations/sharpen.ts    |   9 +-
 39 files changed, 212 insertions(+), 117 deletions(-)

diff --git a/apps/api/src/lib/bg-effects.ts b/apps/api/src/lib/bg-effects.ts
index 42ceca3f..12fd84f9 100644
--- a/apps/api/src/lib/bg-effects.ts
+++ b/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)
diff --git a/apps/api/src/routes/batch.ts b/apps/api/src/routes/batch.ts
index ab8ae24f..8e9d8c40 100644
--- a/apps/api/src/routes/batch.ts
+++ b/apps/api/src/routes/batch.ts
@@ -153,7 +153,7 @@ export async function registerBatchRoutes(app: FastifyInstance): Promise<void> {
                 processBuffer = await decodeHeic(processBuffer);
                 // Update extension to match decoded format (HEIC/HEIF → PNG)
                 const ext = processFilename.match(/\.[^.]+$/)?.[0];
-                if (ext) processFilename = processFilename.slice(0, -ext.length) + ".png";
+                if (ext) processFilename = `${processFilename.slice(0, -ext.length)}.png`;
               }
               if (!skipPreprocess) {
                 processBuffer = await autoOrient(processBuffer);
diff --git a/apps/api/src/routes/docs.ts b/apps/api/src/routes/docs.ts
index 0187dde8..040d31e4 100644
--- a/apps/api/src/routes/docs.ts
+++ b/apps/api/src/routes/docs.ts
@@ -81,7 +81,7 @@ function generateLlmsFullTxt(spec: OpenAPISpec): string {
     for (const [method, op] of Object.entries(methods)) {
       const tag = op.tags?.[0] || "Other";
       if (!tagGroups.has(tag)) tagGroups.set(tag, []);
-      tagGroups.get(tag)!.push({ method: method.toUpperCase(), path, op });
+      tagGroups.get(tag)?.push({ method: method.toUpperCase(), path, op });
     }
   }
 
diff --git a/apps/api/src/routes/pipeline.ts b/apps/api/src/routes/pipeline.ts
index d57c42b2..9241a02c 100644
--- a/apps/api/src/routes/pipeline.ts
+++ b/apps/api/src/routes/pipeline.ts
@@ -106,7 +106,7 @@ export async function registerPipelineRoutes(app: FastifyInstance): Promise<void
         fileBuffer = await decodeHeic(fileBuffer);
         // Update filename extension to match the decoded format
         const ext = filename.match(/\.[^.]+$/)?.[0];
-        if (ext) filename = filename.slice(0, -ext.length) + ".png";
+        if (ext) filename = `${filename.slice(0, -ext.length)}.png`;
       } catch (err) {
         return reply.status(422).send({
           error: "Failed to decode HEIC file. Ensure libheif-examples is installed.",
@@ -513,7 +513,7 @@ export async function registerPipelineRoutes(app: FastifyInstance): Promise<void
             if (validation.format === "heif") {
               currentBuffer = await decodeHeic(currentBuffer);
               const ext = currentFilename.match(/\.[^.]+$/)?.[0];
-              if (ext) currentFilename = currentFilename.slice(0, -ext.length) + ".png";
+              if (ext) currentFilename = `${currentFilename.slice(0, -ext.length)}.png`;
             }
 
             // Normalize EXIF orientation
diff --git a/apps/api/src/routes/teams.ts b/apps/api/src/routes/teams.ts
index 3e26c59f..81b42fd4 100644
--- a/apps/api/src/routes/teams.ts
+++ b/apps/api/src/routes/teams.ts
@@ -11,7 +11,7 @@ import { randomUUID } from "node:crypto";
 import { eq, sql } from "drizzle-orm";
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 import { db, schema } from "../db/index.js";
-import { requireAdmin, requireAuth } from "../plugins/auth.js";
+import { requireAdmin } from "../plugins/auth.js";
 
 function validateTeamName(name: unknown): string | null {
   if (typeof name !== "string") return "Team name is required";
diff --git a/apps/api/src/routes/tool-factory.ts b/apps/api/src/routes/tool-factory.ts
index af7e9750..d1ee9db5 100644
--- a/apps/api/src/routes/tool-factory.ts
+++ b/apps/api/src/routes/tool-factory.ts
@@ -156,7 +156,7 @@ export function createToolRoute<T>(app: FastifyInstance, config: ToolRouteConfig
         try {
           fileBuffer = await decodeHeic(fileBuffer);
           const ext = filename.match(/\.[^.]+$/)?.[0];
-          if (ext) filename = filename.slice(0, -ext.length) + ".png";
+          if (ext) filename = `${filename.slice(0, -ext.length)}.png`;
         } catch (err) {
           return reply.status(422).send({
             error: "Failed to decode HEIC file. Ensure libheif-examples is installed.",
diff --git a/apps/api/src/routes/tools/color-adjustments.ts b/apps/api/src/routes/tools/color-adjustments.ts
index 74af43b1..5fa2e751 100644
--- a/apps/api/src/routes/tools/color-adjustments.ts
+++ b/apps/api/src/routes/tools/color-adjustments.ts
@@ -1,7 +1,6 @@
 import {
   brightness as adjustBrightness,
   contrast as adjustContrast,
-  saturation as adjustSaturation,
   sharpen as adjustSharpen,
   colorChannels,
   grayscale,
diff --git a/apps/api/src/routes/tools/content-aware-resize.ts b/apps/api/src/routes/tools/content-aware-resize.ts
index 213d7d4c..a80359de 100644
--- a/apps/api/src/routes/tools/content-aware-resize.ts
+++ b/apps/api/src/routes/tools/content-aware-resize.ts
@@ -65,7 +65,7 @@ export function registerContentAwareResize(app: FastifyInstance) {
         try {
           fileBuffer = await decodeHeic(fileBuffer);
           const ext = filename.match(/\.[^.]+$/)?.[0];
-          if (ext) filename = filename.slice(0, -ext.length) + ".png";
+          if (ext) filename = `${filename.slice(0, -ext.length)}.png`;
         } catch (err) {
           return reply.status(422).send({
             error: "Failed to decode HEIC/HEIF file",
diff --git a/apps/api/src/routes/tools/image-enhancement.ts b/apps/api/src/routes/tools/image-enhancement.ts
index 1d54dd77..8dfa802e 100644
--- a/apps/api/src/routes/tools/image-enhancement.ts
+++ b/apps/api/src/routes/tools/image-enhancement.ts
@@ -4,7 +4,6 @@ import sharp from "sharp";
 import { z } from "zod";
 import { autoOrient } from "../../lib/auto-orient.js";
 import { validateImageBuffer } from "../../lib/file-validation.js";
-import { sanitizeFilename } from "../../lib/filename.js";
 import { decodeHeic } from "../../lib/heic-converter.js";
 import { resolveOutputFormat } from "../../lib/output-format.js";
 import { createToolRoute } from "../tool-factory.js";
diff --git a/apps/api/src/routes/tools/passport-photo.ts b/apps/api/src/routes/tools/passport-photo.ts
index 3c6ef4e4..179eaaa9 100644
--- a/apps/api/src/routes/tools/passport-photo.ts
+++ b/apps/api/src/routes/tools/passport-photo.ts
@@ -160,7 +160,7 @@ export function registerPassportPhoto(app: FastifyInstance) {
         if (validation.format === "heif") {
           fileBuffer = await decodeHeic(fileBuffer);
           const ext = filename.match(/\.[^.]+$/)?.[0];
-          if (ext) filename = filename.slice(0, -ext.length) + ".png";
+          if (ext) filename = `${filename.slice(0, -ext.length)}.png`;
         }
 
         // Auto-orient to fix EXIF rotation
diff --git a/apps/api/src/routes/tools/remove-background.ts b/apps/api/src/routes/tools/remove-background.ts
index 60f4f656..846c9bdd 100644
--- a/apps/api/src/routes/tools/remove-background.ts
+++ b/apps/api/src/routes/tools/remove-background.ts
@@ -83,7 +83,7 @@ export function registerRemoveBackground(app: FastifyInstance) {
         if (validation.format === "heif") {
           fileBuffer = await decodeHeic(fileBuffer);
           const ext = filename.match(/\.[^.]+$/)?.[0];
-          if (ext) filename = filename.slice(0, -ext.length) + ".png";
+          if (ext) filename = `${filename.slice(0, -ext.length)}.png`;
         }
 
         // Auto-orient to fix EXIF rotation
diff --git a/apps/api/src/routes/tools/stitch.ts b/apps/api/src/routes/tools/stitch.ts
index a0951471..025bec58 100644
--- a/apps/api/src/routes/tools/stitch.ts
+++ b/apps/api/src/routes/tools/stitch.ts
@@ -205,8 +205,9 @@ export function registerStitch(app: FastifyInstance) {
 
       if (settings.cornerRadius > 0) {
         const meta = await sharp(result).metadata();
-        const w = meta.width!;
-        const h = meta.height!;
+        if (!meta.width || !meta.height) throw new Error("Cannot read image dimensions");
+        const w = meta.width;
+        const h = meta.height;
         const r = Math.min(settings.cornerRadius, Math.floor(Math.min(w, h) / 2));
 
         const mask = Buffer.from(
diff --git a/apps/web/src/components/common/image-viewer.tsx b/apps/web/src/components/common/image-viewer.tsx
index 4216d281..f6eb10e5 100644
--- a/apps/web/src/components/common/image-viewer.tsx
+++ b/apps/web/src/components/common/image-viewer.tsx
@@ -90,6 +90,7 @@ export function ImageViewer({
   }, []);
 
   // Reset state on src change
+  // biome-ignore lint/correctness/useExhaustiveDependencies: src is a prop that triggers state reset
   useEffect(() => {
     setZoom(DEFAULT_ZOOM);
     setFitMode("fit");
diff --git a/apps/web/src/components/common/multi-image-viewer.tsx b/apps/web/src/components/common/multi-image-viewer.tsx
index 30fdbcc7..7ad221bb 100644
--- a/apps/web/src/components/common/multi-image-viewer.tsx
+++ b/apps/web/src/components/common/multi-image-viewer.tsx
@@ -46,7 +46,10 @@ export function MultiImageViewer() {
   const hasNext = selectedIndex < entries.length - 1;
 
   const hasProcessed = !!currentEntry.processedUrl;
-  const isPreviewable = hasProcessed && canBrowserPreview(currentEntry.processedUrl!);
+  const isPreviewable =
+    hasProcessed && currentEntry.processedUrl
+      ? canBrowserPreview(currentEntry.processedUrl)
+      : false;
   const displayUrl = currentEntry.processedPreviewUrl ?? currentEntry.processedUrl;
 
   const processedFilename = currentEntry.processedUrl
diff --git a/apps/web/src/components/tools/collage-preview.tsx b/apps/web/src/components/tools/collage-preview.tsx
index 5cc5ea97..b1cb0eaa 100644
--- a/apps/web/src/components/tools/collage-preview.tsx
+++ b/apps/web/src/components/tools/collage-preview.tsx
@@ -149,7 +149,7 @@ function CollageCanvas({ template }: { template: CollageTemplate }) {
   return (
     <div
       className="flex-1 flex items-center justify-center p-4 min-h-0 overflow-auto"
-      role="presentation"
+      role="none"
       onClick={() => store.setSelectedCell(null)}
       onKeyDown={(e) => e.key === "Escape" && store.setSelectedCell(null)}
     >
@@ -178,7 +178,7 @@ function CollageCanvas({ template }: { template: CollageTemplate }) {
 
             return (
               <CollageCell
-                key={`${template.id}-${i}`}
+                key={`${template.id}-${cell.gridColumn}-${cell.gridRow}`}
                 cellIndex={i}
                 image={img}
                 transform={transform}
@@ -290,6 +290,7 @@ function CollageCell({
   );
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: cell requires drag/zoom interactions incompatible with button element
     <div
       ref={cellRef}
       role="button"
diff --git a/apps/web/src/components/tools/collage-settings.tsx b/apps/web/src/components/tools/collage-settings.tsx
index b58df24b..d8d3a291 100644
--- a/apps/web/src/components/tools/collage-settings.tsx
+++ b/apps/web/src/components/tools/collage-settings.tsx
@@ -406,9 +406,9 @@ function TemplateDiagram({ template, size }: { template: CollageTemplate; size:
       role="img"
       aria-label={template.label}
     >
-      {rects.map((r, i) => (
+      {rects.map((r) => (
         <rect
-          key={`${template.id}-${i}`}
+          key={`${template.id}-${r.x}-${r.y}-${r.w}-${r.h}`}
           x={padding + r.x}
           y={padding + r.y}
           width={r.w}
diff --git a/apps/web/src/components/tools/color-settings.tsx b/apps/web/src/components/tools/color-settings.tsx
index 81766e76..00d05a44 100644
--- a/apps/web/src/components/tools/color-settings.tsx
+++ b/apps/web/src/components/tools/color-settings.tsx
@@ -14,7 +14,7 @@ interface ColorControlsProps {
 }
 
 export function ColorControls({
-  toolId,
+  toolId: _toolId,
   settings: initialSettings,
   onChange,
   onPreviewFilter,
@@ -117,8 +117,6 @@ export function ColorControls({
     contrast,
     exposure,
     saturation,
-    temperature,
-    tint,
     hue,
     sharpness,
     hasChannelChanges,
@@ -150,6 +148,7 @@ export function ColorControls({
       {/* Hidden SVG filters for live preview */}
       {hasTempTint && (
         <svg width="0" height="0" style={{ position: "absolute" }}>
+          <title>Temperature and tint color filter</title>
           <filter id="ashim-temp-tint-filter" colorInterpolationFilters="sRGB">
             <feColorMatrix
               type="matrix"
@@ -160,6 +159,7 @@ export function ColorControls({
       )}
       {hasChannelChanges && (
         <svg width="0" height="0" style={{ position: "absolute" }}>
+          <title>Color channel filter</title>
           <filter id="ashim-channel-filter" colorInterpolationFilters="sRGB">
             <feColorMatrix
               type="matrix"
@@ -170,6 +170,7 @@ export function ColorControls({
       )}
       {sharpness > 0 && (
         <svg width="0" height="0" style={{ position: "absolute" }}>
+          <title>Sharpen filter</title>
           <filter id="ashim-sharpen-filter" colorInterpolationFilters="sRGB">
             <feConvolveMatrix
               order="3"
diff --git a/apps/web/src/components/tools/edit-metadata-settings.tsx b/apps/web/src/components/tools/edit-metadata-settings.tsx
index 73251d3f..0a3ac490 100644
--- a/apps/web/src/components/tools/edit-metadata-settings.tsx
+++ b/apps/web/src/components/tools/edit-metadata-settings.tsx
@@ -536,8 +536,14 @@ export function EditMetadataSettings() {
                 </p>
                 <div className="flex gap-2 items-end">
                   <div className="space-y-1">
-                    <label className="text-xs font-medium text-foreground">Direction</label>
+                    <label
+                      htmlFor="em-date-shift-direction"
+                      className="text-xs font-medium text-foreground"
+                    >
+                      Direction
+                    </label>
                     <select
+                      id="em-date-shift-direction"
                       value={form.dateShiftDirection}
                       onChange={(e) => setField("dateShiftDirection", e.target.value as "+" | "-")}
                       className="px-2.5 py-1.5 rounded-md border border-input bg-background text-sm"
diff --git a/apps/web/src/components/tools/favicon-settings.tsx b/apps/web/src/components/tools/favicon-settings.tsx
index 82fa5f4f..074c5720 100644
--- a/apps/web/src/components/tools/favicon-settings.tsx
+++ b/apps/web/src/components/tools/favicon-settings.tsx
@@ -45,6 +45,7 @@ export function FaviconSettings() {
     setProcessing(false);
   };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: cleanup uses only stable refs and state setters
   const handleProcess = useCallback(() => {
     if (files.length === 0) return;
 
diff --git a/apps/web/src/components/tools/find-duplicates-settings.tsx b/apps/web/src/components/tools/find-duplicates-settings.tsx
index cbb5280b..30980372 100644
--- a/apps/web/src/components/tools/find-duplicates-settings.tsx
+++ b/apps/web/src/components/tools/find-duplicates-settings.tsx
@@ -30,6 +30,7 @@ export function FindDuplicatesSettings() {
   const [error, setError] = useState<string | null>(null);
 
   // Reset scan results when files change
+  // biome-ignore lint/correctness/useExhaustiveDependencies: files is a store value that triggers reset when changed
   useEffect(() => {
     resetDuplicates();
     setError(null);
diff --git a/apps/web/src/components/tools/gif-tools-settings.tsx b/apps/web/src/components/tools/gif-tools-settings.tsx
index 7ee0eeab..d4c0931b 100644
--- a/apps/web/src/components/tools/gif-tools-settings.tsx
+++ b/apps/web/src/components/tools/gif-tools-settings.tsx
@@ -147,7 +147,6 @@ export function GifToolsControls({ settings: initialSettings, onChange }: GifToo
     width,
     height,
     percentage,
-    lockAspect,
     colors,
     dither,
     effort,
diff --git a/apps/web/src/components/tools/image-enhancement-settings.tsx b/apps/web/src/components/tools/image-enhancement-settings.tsx
index 1f23baf0..94c52581 100644
--- a/apps/web/src/components/tools/image-enhancement-settings.tsx
+++ b/apps/web/src/components/tools/image-enhancement-settings.tsx
@@ -127,7 +127,7 @@ interface ImageEnhancementControlsProps {
 }
 
 export function ImageEnhancementControls({
-  settings: initialSettings,
+  settings: _initialSettings,
   onChange,
   onPreviewFilter,
 }: ImageEnhancementControlsProps) {
@@ -245,6 +245,7 @@ export function ImageEnhancementControls({
       {/* Hidden SVG filters for preview */}
       {toggles.whiteBalance && Math.abs(tempAdj) > 0.02 && (
         <svg width="0" height="0" style={{ position: "absolute" }}>
+          <title>White balance temperature filter</title>
           <filter id="ashim-enhance-temp-filter" colorInterpolationFilters="sRGB">
             <feColorMatrix
               type="matrix"
@@ -255,6 +256,7 @@ export function ImageEnhancementControls({
       )}
       {toggles.sharpness && sharpAdj > 0.02 && (
         <svg width="0" height="0" style={{ position: "absolute" }}>
+          <title>Sharpen filter</title>
           <filter id="ashim-enhance-sharpen-filter" colorInterpolationFilters="sRGB">
             <feConvolveMatrix
               order="3"
diff --git a/apps/web/src/components/tools/image-to-base64-results.tsx b/apps/web/src/components/tools/image-to-base64-results.tsx
index 0ccb6625..f7614554 100644
--- a/apps/web/src/components/tools/image-to-base64-results.tsx
+++ b/apps/web/src/components/tools/image-to-base64-results.tsx
@@ -90,7 +90,7 @@ function CopyButton({ text, label }: { text: string; label?: string }) {
 
 function FileResult({ result }: { result: Base64Result }) {
   const [activeTab, setActiveTab] = useState<TabId>("datauri");
-  const tab = TABS.find((t) => t.id === activeTab)!;
+  const tab = TABS.find((t) => t.id === activeTab) ?? TABS[0];
   const output = tab.generate(result);
 
   const handleDownload = useCallback(() => {
diff --git a/apps/web/src/components/tools/image-to-base64-settings.tsx b/apps/web/src/components/tools/image-to-base64-settings.tsx
index 21c3faf5..efe52a7c 100644
--- a/apps/web/src/components/tools/image-to-base64-settings.tsx
+++ b/apps/web/src/components/tools/image-to-base64-settings.tsx
@@ -74,7 +74,7 @@ export function ImageToBase64Settings() {
     <div className="space-y-4">
       {/* Output Format */}
       <div>
-        <label className="text-xs font-medium text-muted-foreground">Output Image Format</label>
+        <span className="text-xs font-medium text-muted-foreground">Output Image Format</span>
         <p className="text-[10px] text-muted-foreground/70 mb-1.5">
           Convert before encoding to control MIME type and size
         </p>
@@ -100,10 +100,13 @@ export function ImageToBase64Settings() {
       {showQuality && (
         <div>
           <div className="flex items-center justify-between">
-            <label className="text-xs font-medium text-muted-foreground">Quality</label>
+            <label htmlFor="b64-quality" className="text-xs font-medium text-muted-foreground">
+              Quality
+            </label>
             <span className="text-xs font-mono text-foreground">{quality}%</span>
           </div>
           <input
+            id="b64-quality"
             type="range"
             min={1}
             max={100}
@@ -119,8 +122,11 @@ export function ImageToBase64Settings() {
 
       {/* Max Width */}
       <div>
-        <label className="text-xs font-medium text-muted-foreground">Max Width (px)</label>
+        <label htmlFor="b64-max-width" className="text-xs font-medium text-muted-foreground">
+          Max Width (px)
+        </label>
         <input
+          id="b64-max-width"
           type="number"
           min={0}
           value={maxWidth}
@@ -132,8 +138,11 @@ export function ImageToBase64Settings() {
 
       {/* Max Height */}
       <div>
-        <label className="text-xs font-medium text-muted-foreground">Max Height (px)</label>
+        <label htmlFor="b64-max-height" className="text-xs font-medium text-muted-foreground">
+          Max Height (px)
+        </label>
         <input
+          id="b64-max-height"
           type="number"
           min={0}
           value={maxHeight}
diff --git a/apps/web/src/components/tools/image-to-pdf-settings.tsx b/apps/web/src/components/tools/image-to-pdf-settings.tsx
index f869f791..8e638c84 100644
--- a/apps/web/src/components/tools/image-to-pdf-settings.tsx
+++ b/apps/web/src/components/tools/image-to-pdf-settings.tsx
@@ -140,6 +140,7 @@ export function ImageToPdfSettings() {
     setProcessing(false);
   };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: cleanup uses only stable refs and state setters
   const handleProcess = useCallback(() => {
     if (files.length === 0) return;
 
diff --git a/apps/web/src/components/tools/passport-photo-settings.tsx b/apps/web/src/components/tools/passport-photo-settings.tsx
index 5403be2c..7098bc7a 100644
--- a/apps/web/src/components/tools/passport-photo-settings.tsx
+++ b/apps/web/src/components/tools/passport-photo-settings.tsx
@@ -522,6 +522,11 @@ export function PassportPhotoSettings() {
     documentType,
     bgColor,
     maxFileSizeKb,
+    dpi,
+    zoom,
+    isCustom,
+    customWidthMm,
+    customHeightMm,
     adjustX,
     adjustY,
     setGenerating,
diff --git a/apps/web/src/components/tools/pdf-to-image-settings.tsx b/apps/web/src/components/tools/pdf-to-image-settings.tsx
index 5612b72d..d16424e2 100644
--- a/apps/web/src/components/tools/pdf-to-image-settings.tsx
+++ b/apps/web/src/components/tools/pdf-to-image-settings.tsx
@@ -70,19 +70,12 @@ export function PdfToImageSettings() {
     <div className="space-y-4">
       {/* PDF upload area */}
       {!store.file ? (
-        <div
-          role="button"
-          tabIndex={0}
+        <button
+          type="button"
           onDragOver={(e) => e.preventDefault()}
           onDrop={handleDrop}
           onClick={() => fileInputRef.current?.click()}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              fileInputRef.current?.click();
-            }
-          }}
-          className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors"
+          className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors w-full"
         >
           <FileUp className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
           <p className="text-sm text-muted-foreground">Drop a PDF here or click to select</p>
@@ -93,7 +86,7 @@ export function PdfToImageSettings() {
             className="hidden"
             onChange={(e) => handleFileChange(e.target.files)}
           />
-        </div>
+        </button>
       ) : (
         <div className="flex items-center gap-2 p-3 rounded-lg bg-muted">
           <div className="flex-1 min-w-0">
diff --git a/apps/web/src/components/tools/pipeline-builder.tsx b/apps/web/src/components/tools/pipeline-builder.tsx
index bc4ca1e8..9c895138 100644
--- a/apps/web/src/components/tools/pipeline-builder.tsx
+++ b/apps/web/src/components/tools/pipeline-builder.tsx
@@ -95,15 +95,18 @@ function SortableStep({
         className="flex items-center gap-2 p-3 w-full text-left"
       >
         {/* Drag handle */}
-        <span
-          {...attributes}
-          {...listeners}
-          className="cursor-grab active:cursor-grabbing p-0.5 rounded hover:bg-muted text-muted-foreground"
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-        >
-          <GripVertical className="h-4 w-4" />
-        </span>
+        {
+          // biome-ignore lint/a11y/noStaticElementInteractions: dnd-kit drag handle spreads its own event handlers
+          <span
+            {...attributes}
+            {...listeners}
+            className="cursor-grab active:cursor-grabbing p-0.5 rounded hover:bg-muted text-muted-foreground"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <GripVertical className="h-4 w-4" />
+          </span>
+        }
 
         {/* Step number badge */}
         <span className="w-6 h-6 rounded-full bg-primary/10 text-primary text-xs font-semibold flex items-center justify-center shrink-0">
@@ -122,27 +125,18 @@ function SortableStep({
         <span className="flex-1" />
 
         {/* Remove button */}
-        <span
-          role="button"
-          tabIndex={0}
+        <button
+          type="button"
           onClick={(e) => {
             e.stopPropagation();
             onRemove();
           }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.stopPropagation();
-              onRemove();
-            }
-          }}
           title="Remove"
           className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
         >
           <X className="h-4 w-4" />
-        </span>
+        </button>
       </button>
-
-      {/* Inline settings panel */}
       <div className={isExpanded ? "border-t border-border p-3 bg-muted/10 space-y-3" : "hidden"}>
         <PipelineStepSettings
           toolId={step.toolId}
@@ -150,6 +144,7 @@ function SortableStep({
           onChange={onUpdateSettings}
         />
       </div>
+      ;
     </div>
   );
 }
diff --git a/apps/web/src/components/tools/qr-generate-preview.tsx b/apps/web/src/components/tools/qr-generate-preview.tsx
index d09d90d1..487c7d07 100644
--- a/apps/web/src/components/tools/qr-generate-preview.tsx
+++ b/apps/web/src/components/tools/qr-generate-preview.tsx
@@ -92,6 +92,7 @@ export function QrGeneratePreview() {
   ]);
 
   // Create QR instance on mount
+  // biome-ignore lint/correctness/useExhaustiveDependencies: options is intentionally excluded to only create QR instance once on mount
   useEffect(() => {
     const qr = new QRCodeStyling(options as never);
     qrRef.current = qr;
@@ -99,7 +100,7 @@ export function QrGeneratePreview() {
       clearChildren(containerRef.current);
       qr.append(containerRef.current);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []);
 
   // Update QR on state changes (debounced)
   useEffect(() => {
diff --git a/apps/web/src/components/tools/qr-generate-settings.tsx b/apps/web/src/components/tools/qr-generate-settings.tsx
index 7a835f48..b2ddd42b 100644
--- a/apps/web/src/components/tools/qr-generate-settings.tsx
+++ b/apps/web/src/components/tools/qr-generate-settings.tsx
@@ -80,8 +80,11 @@ function UrlForm() {
   const { textData, setTextData } = useQrStore();
   return (
     <div>
-      <label className="text-xs text-muted-foreground">URL</label>
+      <label htmlFor="qr-url" className="text-xs text-muted-foreground">
+        URL
+      </label>
       <input
+        id="qr-url"
         type="url"
         value={textData}
         onChange={(e) => setTextData(e.target.value)}
@@ -97,8 +100,11 @@ function TextForm() {
   const { textData, setTextData } = useQrStore();
   return (
     <div>
-      <label className="text-xs text-muted-foreground">Text</label>
+      <label htmlFor="qr-text" className="text-xs text-muted-foreground">
+        Text
+      </label>
       <textarea
+        id="qr-text"
         value={textData}
         onChange={(e) => setTextData(e.target.value)}
         placeholder="Enter any text..."
@@ -115,8 +121,11 @@ function WifiForm() {
   return (
     <div className="space-y-2">
       <div>
-        <label className="text-xs text-muted-foreground">Network Name (SSID)</label>
+        <label htmlFor="qr-wifi-ssid" className="text-xs text-muted-foreground">
+          Network Name (SSID)
+        </label>
         <input
+          id="qr-wifi-ssid"
           type="text"
           value={wifiData.ssid}
           onChange={(e) => setWifiData({ ssid: e.target.value })}
@@ -125,8 +134,11 @@ function WifiForm() {
         />
       </div>
       <div>
-        <label className="text-xs text-muted-foreground">Password</label>
+        <label htmlFor="qr-wifi-password" className="text-xs text-muted-foreground">
+          Password
+        </label>
         <input
+          id="qr-wifi-password"
           type="text"
           value={wifiData.password}
           onChange={(e) => setWifiData({ password: e.target.value })}
@@ -135,8 +147,11 @@ function WifiForm() {
         />
       </div>
       <div>
-        <label className="text-xs text-muted-foreground">Encryption</label>
+        <label htmlFor="qr-wifi-encryption" className="text-xs text-muted-foreground">
+          Encryption
+        </label>
         <select
+          id="qr-wifi-encryption"
           value={wifiData.encryption}
           onChange={(e) => setWifiData({ encryption: e.target.value as "WPA" | "WEP" | "nopass" })}
           className={INPUT_CLASS}
@@ -163,8 +178,11 @@ function VCardForm() {
   const { vcardData, setVcardData } = useQrStore();
   const field = (label: string, key: keyof typeof vcardData, placeholder: string) => (
     <div key={key}>
-      <label className="text-xs text-muted-foreground">{label}</label>
+      <label htmlFor={`qr-vcard-${key}`} className="text-xs text-muted-foreground">
+        {label}
+      </label>
       <input
+        id={`qr-vcard-${key}`}
         type="text"
         value={vcardData[key]}
         onChange={(e) => setVcardData({ [key]: e.target.value })}
@@ -193,8 +211,11 @@ function EmailForm() {
   return (
     <div className="space-y-2">
       <div>
-        <label className="text-xs text-muted-foreground">To</label>
+        <label htmlFor="qr-email-to" className="text-xs text-muted-foreground">
+          To
+        </label>
         <input
+          id="qr-email-to"
           type="email"
           value={emailData.to}
           onChange={(e) => setEmailData({ to: e.target.value })}
@@ -203,8 +224,11 @@ function EmailForm() {
         />
       </div>
       <div>
-        <label className="text-xs text-muted-foreground">Subject</label>
+        <label htmlFor="qr-email-subject" className="text-xs text-muted-foreground">
+          Subject
+        </label>
         <input
+          id="qr-email-subject"
           type="text"
           value={emailData.subject}
           onChange={(e) => setEmailData({ subject: e.target.value })}
@@ -213,8 +237,11 @@ function EmailForm() {
         />
       </div>
       <div>
-        <label className="text-xs text-muted-foreground">Body</label>
+        <label htmlFor="qr-email-body" className="text-xs text-muted-foreground">
+          Body
+        </label>
         <textarea
+          id="qr-email-body"
           value={emailData.body}
           onChange={(e) => setEmailData({ body: e.target.value })}
           placeholder="Email body..."
@@ -230,8 +257,11 @@ function PhoneForm() {
   const { phoneData, setPhoneData } = useQrStore();
   return (
     <div>
-      <label className="text-xs text-muted-foreground">Phone Number</label>
+      <label htmlFor="qr-phone" className="text-xs text-muted-foreground">
+        Phone Number
+      </label>
       <input
+        id="qr-phone"
         type="tel"
         value={phoneData}
         onChange={(e) => setPhoneData(e.target.value)}
@@ -247,8 +277,11 @@ function SmsForm() {
   return (
     <div className="space-y-2">
       <div>
-        <label className="text-xs text-muted-foreground">Phone Number</label>
+        <label htmlFor="qr-sms-phone" className="text-xs text-muted-foreground">
+          Phone Number
+        </label>
         <input
+          id="qr-sms-phone"
           type="tel"
           value={smsData.phone}
           onChange={(e) => setSmsData({ phone: e.target.value })}
@@ -257,8 +290,11 @@ function SmsForm() {
         />
       </div>
       <div>
-        <label className="text-xs text-muted-foreground">Message</label>
+        <label htmlFor="qr-sms-message" className="text-xs text-muted-foreground">
+          Message
+        </label>
         <textarea
+          id="qr-sms-message"
           value={smsData.message}
           onChange={(e) => setSmsData({ message: e.target.value })}
           placeholder="Your message..."
@@ -405,7 +441,7 @@ export function QrGenerateSettings() {
       <CollapsibleSection title="Style" defaultOpen>
         <div className="space-y-3">
           <div>
-            <label className="text-xs text-muted-foreground mb-1.5 block">Dot Pattern</label>
+            <span className="text-xs text-muted-foreground mb-1.5 block">Dot Pattern</span>
             <div className="grid grid-cols-3 gap-1.5">
               {DOT_TYPES.map(({ value, label }) => (
                 <PillButton
@@ -419,7 +455,7 @@ export function QrGenerateSettings() {
             </div>
           </div>
           <div>
-            <label className="text-xs text-muted-foreground mb-1.5 block">Corner Square</label>
+            <span className="text-xs text-muted-foreground mb-1.5 block">Corner Square</span>
             <div className="grid grid-cols-2 gap-1.5">
               {CORNER_SQUARE_TYPES.map(({ value, label }) => (
                 <PillButton
@@ -433,7 +469,7 @@ export function QrGenerateSettings() {
             </div>
           </div>
           <div>
-            <label className="text-xs text-muted-foreground mb-1.5 block">Corner Dot</label>
+            <span className="text-xs text-muted-foreground mb-1.5 block">Corner Dot</span>
             <div className="grid grid-cols-3 gap-1.5">
               {CORNER_DOT_TYPES.map(({ value, label }) => (
                 <PillButton
@@ -453,7 +489,7 @@ export function QrGenerateSettings() {
       <CollapsibleSection title="Colors">
         <div className="space-y-3">
           <div>
-            <label className="text-xs text-muted-foreground">Dot Color</label>
+            <span className="text-xs text-muted-foreground">Dot Color</span>
             <div className="flex items-center gap-2 mt-0.5">
               <input
                 type="color"
@@ -487,8 +523,11 @@ export function QrGenerateSettings() {
             <div className="space-y-2 pl-2 border-l-2 border-primary/20 ml-1">
               <div className="flex gap-2">
                 <div className="flex-1">
-                  <label className="text-[10px] text-muted-foreground">From</label>
+                  <label htmlFor="qr-gradient-from" className="text-[10px] text-muted-foreground">
+                    From
+                  </label>
                   <input
+                    id="qr-gradient-from"
                     type="color"
                     value={store.dotGradientColor1}
                     onChange={(e) => store.setDotGradientColor1(e.target.value)}
@@ -496,8 +535,11 @@ export function QrGenerateSettings() {
                   />
                 </div>
                 <div className="flex-1">
-                  <label className="text-[10px] text-muted-foreground">To</label>
+                  <label htmlFor="qr-gradient-to" className="text-[10px] text-muted-foreground">
+                    To
+                  </label>
                   <input
+                    id="qr-gradient-to"
                     type="color"
                     value={store.dotGradientColor2}
                     onChange={(e) => store.setDotGradientColor2(e.target.value)}
@@ -522,12 +564,18 @@ export function QrGenerateSettings() {
               {store.dotGradientType === "linear" && (
                 <div>
                   <div className="flex justify-between items-center">
-                    <label className="text-[10px] text-muted-foreground">Rotation</label>
+                    <label
+                      htmlFor="qr-gradient-rotation"
+                      className="text-[10px] text-muted-foreground"
+                    >
+                      Rotation
+                    </label>
                     <span className="text-[10px] font-mono text-foreground">
                       {store.dotGradientRotation}&deg;
                     </span>
                   </div>
                   <input
+                    id="qr-gradient-rotation"
                     type="range"
                     min={0}
                     max={360}
@@ -543,7 +591,7 @@ export function QrGenerateSettings() {
 
           <div>
             <div className="flex items-center justify-between">
-              <label className="text-xs text-muted-foreground">Background</label>
+              <span className="text-xs text-muted-foreground">Background</span>
               <label className="flex items-center gap-1 text-[10px] text-muted-foreground cursor-pointer">
                 <input
                   type="checkbox"
@@ -586,8 +634,14 @@ export function QrGenerateSettings() {
           {store.useCustomCornerColors && (
             <div className="flex gap-2">
               <div className="flex-1">
-                <label className="text-[10px] text-muted-foreground">Corner Square</label>
+                <label
+                  htmlFor="qr-corner-square-color"
+                  className="text-[10px] text-muted-foreground"
+                >
+                  Corner Square
+                </label>
                 <input
+                  id="qr-corner-square-color"
                   type="color"
                   value={store.cornerSquareColor}
                   onChange={(e) => store.setCornerSquareColor(e.target.value)}
@@ -595,8 +649,11 @@ export function QrGenerateSettings() {
                 />
               </div>
               <div className="flex-1">
-                <label className="text-[10px] text-muted-foreground">Corner Dot</label>
+                <label htmlFor="qr-corner-dot-color" className="text-[10px] text-muted-foreground">
+                  Corner Dot
+                </label>
                 <input
+                  id="qr-corner-dot-color"
                   type="color"
                   value={store.cornerDotColor}
                   onChange={(e) => store.setCornerDotColor(e.target.value)}
@@ -651,12 +708,15 @@ export function QrGenerateSettings() {
             <>
               <div>
                 <div className="flex justify-between items-center">
-                  <label className="text-xs text-muted-foreground">Logo Size</label>
+                  <label htmlFor="qr-logo-size" className="text-xs text-muted-foreground">
+                    Logo Size
+                  </label>
                   <span className="text-xs font-mono text-foreground">
                     {Math.round(store.logoSize * 100)}%
                   </span>
                 </div>
                 <input
+                  id="qr-logo-size"
                   type="range"
                   min={0.1}
                   max={0.5}
@@ -668,10 +728,13 @@ export function QrGenerateSettings() {
               </div>
               <div>
                 <div className="flex justify-between items-center">
-                  <label className="text-xs text-muted-foreground">Logo Margin</label>
+                  <label htmlFor="qr-logo-margin" className="text-xs text-muted-foreground">
+                    Logo Margin
+                  </label>
                   <span className="text-xs font-mono text-foreground">{store.logoMargin}px</span>
                 </div>
                 <input
+                  id="qr-logo-margin"
                   type="range"
                   min={0}
                   max={20}
@@ -699,7 +762,7 @@ export function QrGenerateSettings() {
       <CollapsibleSection title="Download" defaultOpen>
         <div className="space-y-3">
           <div>
-            <label className="text-xs text-muted-foreground mb-1.5 block">Format</label>
+            <span className="text-xs text-muted-foreground mb-1.5 block">Format</span>
             <div className="grid grid-cols-2 gap-1.5">
               {DOWNLOAD_FORMATS.map(({ value, label, desc }) => (
                 <button
@@ -729,10 +792,13 @@ export function QrGenerateSettings() {
 
           <div>
             <div className="flex justify-between items-center">
-              <label className="text-xs text-muted-foreground">Size</label>
+              <label htmlFor="qr-size" className="text-xs text-muted-foreground">
+                Size
+              </label>
               <span className="text-xs font-mono text-foreground">{store.size}px</span>
             </div>
             <input
+              id="qr-size"
               type="range"
               min={200}
               max={2000}
@@ -744,8 +810,11 @@ export function QrGenerateSettings() {
           </div>
 
           <div>
-            <label className="text-xs text-muted-foreground">Error Correction</label>
+            <label htmlFor="qr-error-correction" className="text-xs text-muted-foreground">
+              Error Correction
+            </label>
             <select
+              id="qr-error-correction"
               value={store.errorCorrection}
               onChange={(e) => store.setErrorCorrection(e.target.value as "L" | "M" | "Q" | "H")}
               className={INPUT_CLASS}
diff --git a/apps/web/src/components/tools/remove-bg-settings.tsx b/apps/web/src/components/tools/remove-bg-settings.tsx
index e3e459a6..b01ddb59 100644
--- a/apps/web/src/components/tools/remove-bg-settings.tsx
+++ b/apps/web/src/components/tools/remove-bg-settings.tsx
@@ -82,7 +82,7 @@ export interface RemoveBgControlsProps {
   onChange: (settings: Record<string, unknown>) => void;
 }
 
-export function RemoveBgControls({ settings, onChange }: RemoveBgControlsProps) {
+export function RemoveBgControls({ settings: _settings, onChange }: RemoveBgControlsProps) {
   const [subject, setSubject] = useState<SubjectType>("people");
   const [quality, setQuality] = useState<Quality>("balanced");
   const [isPassport, setIsPassport] = useState(true);
@@ -543,7 +543,7 @@ export function RemoveBgSettings({ onBgPreview }: RemoveBgSettingsProps = {}) {
   const [bgJobId, setBgJobId] = useState<string | null>(null);
   const [bgFilename, setBgFilename] = useState<string | null>(null);
   const [bgOriginalUrl, setBgOriginalUrl] = useState<string | null>(null);
-  const [effectsDownloadUrl, setEffectsDownloadUrl] = useState<string | null>(null);
+  const [_effectsDownloadUrl, setEffectsDownloadUrl] = useState<string | null>(null);
   const [applyingEffects, setApplyingEffects] = useState(false);
   const [effectsError, setEffectsError] = useState<string | null>(null);
 
diff --git a/apps/web/src/components/tools/split-canvas.tsx b/apps/web/src/components/tools/split-canvas.tsx
index b21f0d20..f157f344 100644
--- a/apps/web/src/components/tools/split-canvas.tsx
+++ b/apps/web/src/components/tools/split-canvas.tsx
@@ -54,6 +54,7 @@ export function SplitCanvas() {
   }, [setImageDimensions, updateDisplaySize]);
 
   // Reset error when blob URL changes (e.g., HEIC decoded preview ready)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: src is a prop that triggers state reset
   useEffect(() => {
     setLoadError(false);
     setDisplaySize(null);
@@ -67,6 +68,7 @@ export function SplitCanvas() {
   }, [updateDisplaySize]);
 
   // Re-measure when grid changes (in case image dimensions affect tile-size calculation)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: grid.columns and grid.rows trigger re-measurement of display
   useEffect(() => {
     updateDisplaySize();
   }, [grid.columns, grid.rows, updateDisplaySize]);
@@ -188,10 +190,11 @@ export function SplitCanvas() {
             viewBox="0 0 100 100"
             preserveAspectRatio="none"
           >
+            <title>Split grid overlay</title>
             {/* Vertical lines */}
-            {colPositions.map((x, i) => (
+            {colPositions.map((x) => (
               <line
-                key={`v-${i}`}
+                key={`v-${x}`}
                 x1={x}
                 y1={0}
                 x2={x}
@@ -202,9 +205,9 @@ export function SplitCanvas() {
               />
             ))}
             {/* Horizontal lines */}
-            {rowPositions.map((y, i) => (
+            {rowPositions.map((y) => (
               <line
-                key={`h-${i}`}
+                key={`h-${y}`}
                 x1={0}
                 y1={y}
                 x2={100}
diff --git a/apps/web/src/components/tools/split-settings.tsx b/apps/web/src/components/tools/split-settings.tsx
index 22eee7b3..8a410116 100644
--- a/apps/web/src/components/tools/split-settings.tsx
+++ b/apps/web/src/components/tools/split-settings.tsx
@@ -77,6 +77,7 @@ export function SplitSettings() {
       ? `Tiles will be very small (${tileDims.width}x${tileDims.height}px)`
       : null;
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: files is a store value that triggers reset when changed
   useEffect(() => {
     setTiles([]);
     setZipBlobUrl(null);
diff --git a/apps/web/src/components/tools/upscale-settings.tsx b/apps/web/src/components/tools/upscale-settings.tsx
index afade430..c9a7a62b 100644
--- a/apps/web/src/components/tools/upscale-settings.tsx
+++ b/apps/web/src/components/tools/upscale-settings.tsx
@@ -188,7 +188,7 @@ export function UpscaleControls({ settings: initialSettings, onChange }: Upscale
 }
 
 export function UpscaleSettings() {
-  const { files, entries } = useFileStore();
+  const { files } = useFileStore();
   const {
     processFiles,
     processAllFiles,
diff --git a/apps/web/src/pages/change-password-page.tsx b/apps/web/src/pages/change-password-page.tsx
index f8fd7cc9..72b9fa7b 100644
--- a/apps/web/src/pages/change-password-page.tsx
+++ b/apps/web/src/pages/change-password-page.tsx
@@ -1,4 +1,4 @@
-import { type FormEvent, useRef, useState } from "react";
+import { type FormEvent, useState } from "react";
 import { formatHeaders } from "@/lib/api";
 
 /**
diff --git a/packages/image-engine/src/operations/compress.ts b/packages/image-engine/src/operations/compress.ts
index c523f910..e999fe8f 100644
--- a/packages/image-engine/src/operations/compress.ts
+++ b/packages/image-engine/src/operations/compress.ts
@@ -1,5 +1,5 @@
 import sharp from "sharp";
-import type { CompressOptions, OutputFormat, Sharp } from "../types.js";
+import type { CompressOptions, Sharp } from "../types.js";
 
 const FORMAT_MAP: Record<string, string> = {
   jpg: "jpeg",
diff --git a/packages/image-engine/src/operations/convert.ts b/packages/image-engine/src/operations/convert.ts
index c1564744..7cd39aac 100644
--- a/packages/image-engine/src/operations/convert.ts
+++ b/packages/image-engine/src/operations/convert.ts
@@ -1,4 +1,4 @@
-import type { ConvertOptions, OutputFormat, Sharp } from "../types.js";
+import type { ConvertOptions, Sharp } from "../types.js";
 
 /**
  * Maps user-facing format names to Sharp format strings.
diff --git a/packages/image-engine/src/operations/optimize-for-web.ts b/packages/image-engine/src/operations/optimize-for-web.ts
index 998be208..ac671086 100644
--- a/packages/image-engine/src/operations/optimize-for-web.ts
+++ b/packages/image-engine/src/operations/optimize-for-web.ts
@@ -10,9 +10,11 @@ export async function optimizeForWeb(image: Sharp, options: OptimizeForWebOption
     stripMetadata = true,
   } = options;
 
+  let pipeline = image;
+
   // Step 1: Resize if max dimensions are set
   if (maxWidth || maxHeight) {
-    image = image.resize({
+    pipeline = pipeline.resize({
       width: maxWidth,
       height: maxHeight,
       fit: "inside",
@@ -24,19 +26,19 @@ export async function optimizeForWeb(image: Sharp, options: OptimizeForWebOption
   // Sharp strips metadata by default on output, so we only need to act
   // when the user wants to KEEP metadata.
   if (!stripMetadata) {
-    image = image.withMetadata();
+    pipeline = pipeline.withMetadata();
   }
 
   // Step 3: Convert to target format with optimized settings
   switch (format) {
     case "webp":
-      return image.webp({ quality, effort: 4 });
+      return pipeline.webp({ quality, effort: 4 });
     case "jpeg":
-      return image.jpeg({ quality, progressive, mozjpeg: true });
+      return pipeline.jpeg({ quality, progressive, mozjpeg: true });
     case "avif":
-      return image.avif({ quality, effort: 4 });
+      return pipeline.avif({ quality, effort: 4 });
     case "png":
-      return image.png({ compressionLevel: 9, palette: true });
+      return pipeline.png({ compressionLevel: 9, palette: true });
     default:
       throw new Error(`Unsupported format: ${format}`);
   }
diff --git a/packages/image-engine/src/operations/sharpen.ts b/packages/image-engine/src/operations/sharpen.ts
index d7182fdf..50a65427 100644
--- a/packages/image-engine/src/operations/sharpen.ts
+++ b/packages/image-engine/src/operations/sharpen.ts
@@ -27,20 +27,21 @@ export async function sharpenAdvanced(
   const { method, denoise } = options;
 
   // Optional noise reduction pre-pass
+  let pipeline = image;
   if (denoise && denoise !== "off") {
     const kernelSize = DENOISE_KERNEL[denoise];
     if (kernelSize) {
-      image = image.median(kernelSize);
+      pipeline = pipeline.median(kernelSize);
     }
   }
 
   switch (method) {
     case "adaptive":
-      return sharpenAdaptive(image, options);
+      return sharpenAdaptive(pipeline, options);
     case "unsharp-mask":
-      return sharpenUnsharpMask(image, options);
+      return sharpenUnsharpMask(pipeline, options);
     case "high-pass":
-      return sharpenHighPass(image, options);
+      return sharpenHighPass(pipeline, options);
     default:
       throw new Error(`Unknown sharpening method: ${method}`);
   }