feat: add "Crop to Content" mode to smart crop tool

Adds a new mode that trims uniform-color borders around the subject,
like GIMP's "Crop to Content." Includes configurable tolerance threshold
and optional pad-to-square with target size for e-commerce workflows.

The original attention-based crop is preserved as "Focus Crop" mode.

Closes #7

apps/api/src/routes/tools/smart-crop.ts

@@ -4,27 +4,67 @@ import { z } from "zod";
 import { createToolRoute } from "../tool-factory.js";
 
 const settingsSchema = z.object({
-  width: z.number().int().positive(),
-  height: z.number().int().positive(),
+  mode: z.enum(["attention", "content"]).default("attention"),
+  // Attention mode: resize to target dimensions using subject detection
+  width: z.number().int().positive().optional(),
+  height: z.number().int().positive().optional(),
+  // Content mode: trim uniform borders, optionally pad to square
+  threshold: z.number().int().min(0).max(255).default(30),
+  padToSquare: z.boolean().default(false),
+  padColor: z.string().default("#ffffff"),
+  targetSize: z.number().int().positive().optional(),
 });
 
 /**
- * Smart crop using Sharp's attention-based strategy.
- * Uses entropy/saliency detection to find the most interesting region.
- * No Python needed.
+ * Smart crop with two modes:
+ * - "attention": Sharp's entropy/saliency detection to crop to the most interesting region
+ * - "content": Trims uniform-color borders (like GIMP's "Crop to Content"),
+ *    optionally pads to a square at a target size
  */
 export function registerSmartCrop(app: FastifyInstance) {
   createToolRoute(app, {
     toolId: "smart-crop",
     settingsSchema,
     process: async (inputBuffer, settings, filename) => {
-      const result = await sharp(inputBuffer)
-        .resize(settings.width, settings.height, {
-          fit: "cover",
-          position: sharp.strategy.attention,
-        })
-        .png()
-        .toBuffer();
+      let result: Buffer;
+
+      if (settings.mode === "content") {
+        // Crop to content: trim uniform borders
+        const pipeline = sharp(inputBuffer).trim({ threshold: settings.threshold });
+        let trimmed = await pipeline.toBuffer({ resolveWithObject: true });
+
+        if (settings.padToSquare || settings.targetSize) {
+          const meta = await sharp(trimmed.data).metadata();
+          const w = meta.width ?? 1;
+          const h = meta.height ?? 1;
+          const target = settings.targetSize || Math.max(w, h);
+          const padR = Math.round(parseInt(settings.padColor.slice(1, 3), 16));
+          const padG = Math.round(parseInt(settings.padColor.slice(3, 5), 16));
+          const padB = Math.round(parseInt(settings.padColor.slice(5, 7), 16));
+
+          trimmed = await sharp(trimmed.data)
+            .resize({
+              width: target,
+              height: target,
+              fit: "contain",
+              background: { r: padR, g: padG, b: padB, alpha: 1 },
+            })
+            .toBuffer({ resolveWithObject: true });
+        }
+
+        result = trimmed.data;
+      } else {
+        // Attention mode: resize to target using subject detection
+        const w = settings.width ?? 1080;
+        const h = settings.height ?? 1080;
+        result = await sharp(inputBuffer)
+          .resize(w, h, {
+            fit: "cover",
+            position: sharp.strategy.attention,
+          })
+          .png()
+          .toBuffer();
+      }
 
       const outputFilename = `${filename.replace(/\.[^.]+$/, "")}_smartcrop.png`;
       return { buffer: result, filename: outputFilename, contentType: "image/png" };

apps/web/src/components/tools/smart-crop-settings.tsx

@@ -1,9 +1,10 @@
-import { Download } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
 import { useFileStore } from "@/stores/file-store";
 
+type Mode = "content" | "attention";
+
 const ASPECT_PRESETS = [
   { label: "1:1 Square", w: 1080, h: 1080 },
   { label: "16:9 Landscape", w: 1920, h: 1080 },
@@ -18,18 +19,47 @@ export interface SmartCropControlsProps {
 }
 
 export function SmartCropControls({ onChange }: SmartCropControlsProps) {
+  const [mode, setMode] = useState<Mode>("content");
+
+  // Attention mode state
   const [width, setWidth] = useState("1080");
   const [height, setHeight] = useState("1080");
   const [preset, setPreset] = useState("1:1 Square");
 
-  const onChangeRef = useRef(onChange);
-  useEffect(() => {
-    onChangeRef.current = onChange;
-  });
+  // Content mode state
+  const [threshold, setThreshold] = useState(30);
+  const [padToSquare, setPadToSquare] = useState(false);
+  const [padColor, setPadColor] = useState("#ffffff");
+  const [targetSize, setTargetSize] = useState("1000");
 
-  useEffect(() => {
-    onChangeRef.current?.({ width: Number(width), height: Number(height) });
-  }, [width, height]);
+  const emit = (overrides: Record<string, unknown> = {}) => {
+    if (mode === "content") {
+      onChange?.({
+        mode: "content",
+        threshold,
+        padToSquare,
+        padColor,
+        ...(padToSquare ? { targetSize: Number(targetSize) } : {}),
+        ...overrides,
+      });
+    } else {
+      onChange?.({
+        mode: "attention",
+        width: Number(width),
+        height: Number(height),
+        ...overrides,
+      });
+    }
+  };
+
+  const handleModeChange = (m: Mode) => {
+    setMode(m);
+    if (m === "content") {
+      onChange?.({ mode: "content", threshold, padToSquare, padColor });
+    } else {
+      onChange?.({ mode: "attention", width: Number(width), height: Number(height) });
+    }
+  };
 
   const handlePreset = (label: string) => {
     setPreset(label);
@@ -37,109 +67,236 @@ export function SmartCropControls({ onChange }: SmartCropControlsProps) {
     if (p && p.w > 0) {
       setWidth(String(p.w));
       setHeight(String(p.h));
+      emit({ width: p.w, height: p.h });
     }
   };
 
   return (
     <div className="space-y-4">
-      {/* Aspect ratio preset */}
+      {/* Mode toggle */}
       <div>
-        <label htmlFor="smart-crop-preset" className="text-sm font-medium text-muted-foreground">
-          Target Aspect Ratio
-        </label>
-        <select
-          id="smart-crop-preset"
-          value={preset}
-          onChange={(e) => handlePreset(e.target.value)}
-          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-        >
-          {ASPECT_PRESETS.map((p) => (
-            <option key={p.label} value={p.label}>
-              {p.label}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* Width / Height */}
-      <div className="flex gap-2">
-        <div className="flex-1">
-          <label htmlFor="smart-crop-width" className="text-xs text-muted-foreground">
-            Width (px)
-          </label>
-          <input
-            id="smart-crop-width"
-            type="number"
-            value={width}
-            onChange={(e) => {
-              setWidth(e.target.value);
-              setPreset("Custom");
-            }}
-            min={1}
-            className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-          />
-        </div>
-        <div className="flex-1">
-          <label htmlFor="smart-crop-height" className="text-xs text-muted-foreground">
-            Height (px)
-          </label>
-          <input
-            id="smart-crop-height"
-            type="number"
-            value={height}
-            onChange={(e) => {
-              setHeight(e.target.value);
-              setPreset("Custom");
-            }}
-            min={1}
-            className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-          />
+        <label className="text-sm font-medium text-muted-foreground">Mode</label>
+        <div className="flex gap-1 mt-1">
+          <button
+            type="button"
+            onClick={() => handleModeChange("content")}
+            className={`flex-1 py-2 text-sm rounded-lg font-medium transition-colors ${
+              mode === "content"
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            Crop to Content
+          </button>
+          <button
+            type="button"
+            onClick={() => handleModeChange("attention")}
+            className={`flex-1 py-2 text-sm rounded-lg font-medium transition-colors ${
+              mode === "attention"
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            Focus Crop
+          </button>
         </div>
       </div>
 
-      {/* Info */}
-      <p className="text-[10px] text-muted-foreground">
-        Uses entropy-based attention detection to find the most interesting region of the image and
-        crops to it.
-      </p>
+      {mode === "content" ? (
+        <>
+          {/* Threshold */}
+          <div>
+            <div className="flex justify-between items-center">
+              <label htmlFor="trim-threshold" className="text-xs text-muted-foreground">
+                Tolerance
+              </label>
+              <span className="text-xs text-muted-foreground tabular-nums">{threshold}</span>
+            </div>
+            <input
+              id="trim-threshold"
+              type="range"
+              min={0}
+              max={128}
+              value={threshold}
+              onChange={(e) => {
+                const v = Number(e.target.value);
+                setThreshold(v);
+                emit({ threshold: v });
+              }}
+              className="w-full mt-1"
+            />
+            <p className="text-[10px] text-muted-foreground mt-0.5">
+              How different a border pixel can be from the edge color and still be trimmed. Higher =
+              more aggressive.
+            </p>
+          </div>
+
+          {/* Pad to square */}
+          <div className="flex items-center gap-2">
+            <input
+              id="pad-square"
+              type="checkbox"
+              checked={padToSquare}
+              onChange={(e) => {
+                setPadToSquare(e.target.checked);
+                emit({ padToSquare: e.target.checked });
+              }}
+              className="rounded border-border"
+            />
+            <label htmlFor="pad-square" className="text-sm text-foreground">
+              Pad to square
+            </label>
+          </div>
+
+          {padToSquare && (
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <label htmlFor="target-size" className="text-xs text-muted-foreground">
+                  Target size (px)
+                </label>
+                <input
+                  id="target-size"
+                  type="number"
+                  value={targetSize}
+                  onChange={(e) => {
+                    setTargetSize(e.target.value);
+                    emit({ targetSize: Number(e.target.value) });
+                  }}
+                  min={1}
+                  className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+                />
+              </div>
+              <div>
+                <label htmlFor="pad-color" className="text-xs text-muted-foreground">
+                  Pad color
+                </label>
+                <input
+                  id="pad-color"
+                  type="color"
+                  value={padColor}
+                  onChange={(e) => {
+                    setPadColor(e.target.value);
+                    emit({ padColor: e.target.value });
+                  }}
+                  className="w-12 h-[34px] mt-0.5 rounded border border-border bg-background cursor-pointer"
+                />
+              </div>
+            </div>
+          )}
+
+          <p className="text-[10px] text-muted-foreground">
+            Trims uniform-color borders around the subject, like GIMP's "Crop to Content." Enable
+            "Pad to square" to produce e-commerce ready images.
+          </p>
+        </>
+      ) : (
+        <>
+          {/* Aspect ratio preset */}
+          <div>
+            <label
+              htmlFor="smart-crop-preset"
+              className="text-sm font-medium text-muted-foreground"
+            >
+              Target Aspect Ratio
+            </label>
+            <select
+              id="smart-crop-preset"
+              value={preset}
+              onChange={(e) => handlePreset(e.target.value)}
+              className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+            >
+              {ASPECT_PRESETS.map((p) => (
+                <option key={p.label} value={p.label}>
+                  {p.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Width / Height */}
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <label htmlFor="smart-crop-width" className="text-xs text-muted-foreground">
+                Width (px)
+              </label>
+              <input
+                id="smart-crop-width"
+                type="number"
+                value={width}
+                onChange={(e) => {
+                  setWidth(e.target.value);
+                  setPreset("Custom");
+                  emit({ width: Number(e.target.value) });
+                }}
+                min={1}
+                className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+              />
+            </div>
+            <div className="flex-1">
+              <label htmlFor="smart-crop-height" className="text-xs text-muted-foreground">
+                Height (px)
+              </label>
+              <input
+                id="smart-crop-height"
+                type="number"
+                value={height}
+                onChange={(e) => {
+                  setHeight(e.target.value);
+                  setPreset("Custom");
+                  emit({ height: Number(e.target.value) });
+                }}
+                min={1}
+                className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+              />
+            </div>
+          </div>
+
+          <p className="text-[10px] text-muted-foreground">
+            Uses entropy-based attention detection to find the most interesting region and crops to
+            it. Good for thumbnails and social media images.
+          </p>
+        </>
+      )}
     </div>
   );
 }
 
 export function SmartCropSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
+  const { processFiles, processAllFiles, processing, error, progress } =
     useToolProcessor("smart-crop");
 
-  const [settings, setSettings] = useState<Record<string, unknown>>({});
+  const [settings, setSettings] = useState<Record<string, unknown>>({
+    mode: "content",
+    threshold: 30,
+    padToSquare: false,
+    padColor: "#ffffff",
+  });
 
   const handleProcess = () => {
-    const w = Number(settings.width);
-    const h = Number(settings.height);
-    if (w > 0 && h > 0) {
-      processFiles(files, { width: w, height: h });
+    if (files.length > 1) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
     }
   };
 
   const hasFile = files.length > 0;
-  const canProcess = Number(settings.width) > 0 && Number(settings.height) > 0;
+  const mode = settings.mode as string;
+  const canProcess =
+    mode === "content" || (Number(settings.width) > 0 && Number(settings.height) > 0);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && canProcess && !processing) handleProcess();
+  };
 
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       <SmartCropControls onChange={setSettings} />
 
-      {/* Error */}
       {error && <p className="text-xs text-red-500">{error}</p>}
 
-      {/* Size info */}
-      {originalSize != null && processedSize != null && (
-        <div className="text-xs text-muted-foreground space-y-0.5">
-          <p>Original: {(originalSize / 1024).toFixed(1)} KB</p>
-          <p>Cropped: {(processedSize / 1024).toFixed(1)} KB</p>
-        </div>
-      )}
-
-      {/* Process button */}
       {processing ? (
         <ProgressCard
           active={processing}
@@ -151,28 +308,14 @@ export function SmartCropSettings() {
         />
       ) : (
         <button
-          type="button"
+          type="submit"
           data-testid="smart-crop-submit"
-          onClick={handleProcess}
           disabled={!hasFile || !canProcess || processing}
           className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
         >
-          Smart Crop
+          {mode === "content" ? "Crop to Content" : "Smart Crop"}
         </button>
       )}
-
-      {/* Download */}
-      {downloadUrl && (
-        <a
-          href={downloadUrl}
-          download
-          data-testid="smart-crop-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
-        >
-          <Download className="h-4 w-4" />
-          Download
-        </a>
-      )}
-    </div>
+    </form>
   );
 }