feat(tools): 2.0 phase 5 wave 2 - pdf depth (21 tools) (#220)

apps/web/src/components/tools/booklet-pdf-settings.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type PerSheet = 2 | 4 | 6 | 8;
+
+export function BookletPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["booklet-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("booklet-pdf");
+
+  const [perSheet, setPerSheet] = useState<PerSheet>(2);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { perSheet };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="bk-per-sheet" className="text-xs text-muted-foreground">
+          {s.perSheet}
+        </label>
+        <select
+          id="bk-per-sheet"
+          value={perSheet}
+          onChange={(e) => setPerSheet(Number(e.target.value) as PerSheet)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value={2}>2</option>
+          <option value={4}>4</option>
+          <option value={6}>6</option>
+          <option value={8}>8</option>
+        </select>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="booklet-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function CropPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["crop-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("crop-pdf");
+
+  const [margin, setMargin] = useState(20);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { margin };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="cpdf-margin" className="text-xs text-muted-foreground">
+          {s.margin}
+        </label>
+        <input
+          id="cpdf-margin"
+          type="number"
+          min={0}
+          max={2000}
+          step={1}
+          value={margin}
+          onChange={(e) => setMargin(Number(e.target.value))}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="crop-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/extract-pages-settings.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function ExtractPagesSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["extract-pages"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("extract-pages");
+
+  const [range, setRange] = useState("1-3");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { range };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="ep-range" className="text-xs text-muted-foreground">
+          {s.range}
+        </label>
+        <input
+          id="ep-range"
+          type="text"
+          value={range}
+          onChange={(e) => setRange(e.target.value)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+        <p className="text-[10px] text-muted-foreground mt-0.5">{s.rangeHint}</p>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="extract-pages-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/flatten-pdf-settings.tsx

@@ -0,0 +1,52 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function FlattenPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["flatten-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("flatten-pdf");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="flatten-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/grayscale-pdf-settings.tsx

@@ -0,0 +1,52 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function GrayscalePdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["grayscale-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("grayscale-pdf");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="grayscale-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/html-to-pdf-settings.tsx

@@ -0,0 +1,54 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function HtmlToPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["html-to-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("html-to-pdf");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-[10px] text-muted-foreground">{s.hint}</p>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="html-to-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/linearize-pdf-settings.tsx

@@ -0,0 +1,52 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function LinearizePdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["linearize-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("linearize-pdf");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="linearize-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/markdown-to-pdf-settings.tsx

@@ -0,0 +1,54 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function MarkdownToPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["markdown-to-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("markdown-to-pdf");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-[10px] text-muted-foreground">{s.hint}</p>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="markdown-to-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/nup-pdf-settings.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type PerSheet = 2 | 3 | 4 | 8 | 9 | 12 | 16;
+
+export function NupPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["nup-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("nup-pdf");
+
+  const [perSheet, setPerSheet] = useState<PerSheet>(2);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { perSheet };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="nup-per-sheet" className="text-xs text-muted-foreground">
+          {s.perSheet}
+        </label>
+        <select
+          id="nup-per-sheet"
+          value={perSheet}
+          onChange={(e) => setPerSheet(Number(e.target.value) as PerSheet)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value={2}>2</option>
+          <option value={3}>3</option>
+          <option value={4}>4</option>
+          <option value={8}>8</option>
+          <option value={9}>9</option>
+          <option value={12}>12</option>
+          <option value={16}>16</option>
+        </select>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="nup-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/organize-pdf-settings.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function OrganizePdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["organize-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("organize-pdf");
+
+  const [order, setOrder] = useState("1-z");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { order };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="op-order" className="text-xs text-muted-foreground">
+          {s.order}
+        </label>
+        <input
+          id="op-order"
+          type="text"
+          value={order}
+          onChange={(e) => setOrder(e.target.value)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+        <p className="text-[10px] text-muted-foreground mt-0.5">{s.orderHint}</p>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="organize-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/pdf-metadata-settings.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function PdfMetadataSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["pdf-metadata"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("pdf-metadata");
+
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+  const [subject, setSubject] = useState("");
+  const [keywords, setKeywords] = useState("");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings: Record<string, string> = {};
+    if (title) settings.title = title;
+    if (author) settings.author = author;
+    if (subject) settings.subject = subject;
+    if (keywords) settings.keywords = keywords;
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="pm-title" className="text-xs text-muted-foreground">
+          {s.title}
+        </label>
+        <input
+          id="pm-title"
+          type="text"
+          maxLength={500}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          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="pm-author" className="text-xs text-muted-foreground">
+          {s.author}
+        </label>
+        <input
+          id="pm-author"
+          type="text"
+          maxLength={500}
+          value={author}
+          onChange={(e) => setAuthor(e.target.value)}
+          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="pm-subject" className="text-xs text-muted-foreground">
+          {s.subject}
+        </label>
+        <input
+          id="pm-subject"
+          type="text"
+          maxLength={500}
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          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="pm-keywords" className="text-xs text-muted-foreground">
+          {s.keywords}
+        </label>
+        <input
+          id="pm-keywords"
+          type="text"
+          maxLength={500}
+          value={keywords}
+          onChange={(e) => setKeywords(e.target.value)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="pdf-metadata-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/pdf-page-numbers-settings.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type Position = "bl" | "bc" | "br" | "tl" | "tc" | "tr";
+
+export function PdfPageNumbersSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["pdf-page-numbers"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("pdf-page-numbers");
+
+  const [position, setPosition] = useState<Position>("bc");
+  const [fontSize, setFontSize] = useState(10);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { position, fontSize };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="pn-position" className="text-xs text-muted-foreground">
+          {s.position}
+        </label>
+        <select
+          id="pn-position"
+          value={position}
+          onChange={(e) => setPosition(e.target.value as Position)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value="bl">Bottom Left</option>
+          <option value="bc">Bottom Center</option>
+          <option value="br">Bottom Right</option>
+          <option value="tl">Top Left</option>
+          <option value="tc">Top Center</option>
+          <option value="tr">Top Right</option>
+        </select>
+      </div>
+
+      <div>
+        <label htmlFor="pn-font-size" className="text-xs text-muted-foreground">
+          {s.fontSize}
+        </label>
+        <input
+          id="pn-font-size"
+          type="number"
+          min={6}
+          max={24}
+          step={1}
+          value={fontSize}
+          onChange={(e) => setFontSize(Number(e.target.value))}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="pdf-page-numbers-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/pdf-to-text-settings.tsx

@@ -0,0 +1,52 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function PdfToTextSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["pdf-to-text"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("pdf-to-text");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="pdf-to-text-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/pdf-to-word-settings.tsx

@@ -0,0 +1,54 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function PdfToWordSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["pdf-to-word"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("pdf-to-word");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-[10px] text-muted-foreground">{s.hint}</p>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="pdf-to-word-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/pdfa-convert-settings.tsx

@@ -0,0 +1,52 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function PdfaConvertSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["pdfa-convert"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("pdfa-convert");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="pdfa-convert-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/protect-pdf-settings.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function ProtectPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["protect-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("protect-pdf");
+
+  const [userPassword, setUserPassword] = useState("");
+  const [ownerPassword, setOwnerPassword] = useState("");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings: Record<string, string> = { userPassword };
+    if (ownerPassword) {
+      settings.ownerPassword = ownerPassword;
+    }
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="pp-user-pw" className="text-xs text-muted-foreground">
+          {s.userPassword}
+        </label>
+        <input
+          id="pp-user-pw"
+          type="password"
+          value={userPassword}
+          onChange={(e) => setUserPassword(e.target.value)}
+          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="pp-owner-pw" className="text-xs text-muted-foreground">
+          {s.ownerPassword}
+        </label>
+        <input
+          id="pp-owner-pw"
+          type="password"
+          value={ownerPassword}
+          onChange={(e) => setOwnerPassword(e.target.value)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+        <p className="text-[10px] text-muted-foreground mt-0.5">{s.ownerPasswordHint}</p>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="protect-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing || !userPassword}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/redact-pdf-settings.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function RedactPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["redact-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("redact-pdf");
+
+  const [termsText, setTermsText] = useState("");
+  const [caseSensitive, setCaseSensitive] = useState(false);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const terms = termsText
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+
+  const handleProcess = () => {
+    const settings = { terms, caseSensitive };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="rp-terms" className="text-xs text-muted-foreground">
+          {s.terms}
+        </label>
+        <textarea
+          id="rp-terms"
+          rows={5}
+          value={termsText}
+          onChange={(e) => setTermsText(e.target.value)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+        <p className="text-[10px] text-muted-foreground mt-0.5">{s.termsHint}</p>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input
+          id="rp-case"
+          type="checkbox"
+          checked={caseSensitive}
+          onChange={(e) => setCaseSensitive(e.target.checked)}
+          className="rounded border-border"
+        />
+        <label htmlFor="rp-case" className="text-xs text-muted-foreground">
+          {s.caseSensitive}
+        </label>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="redact-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing || terms.length === 0}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/remove-pages-settings.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function RemovePagesSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["remove-pages"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("remove-pages");
+
+  const [pages, setPages] = useState("2,4-6");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { pages };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="rp-pages" className="text-xs text-muted-foreground">
+          {s.pages}
+        </label>
+        <input
+          id="rp-pages"
+          type="text"
+          value={pages}
+          onChange={(e) => setPages(e.target.value)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+        <p className="text-[10px] text-muted-foreground mt-0.5">{s.pagesHint}</p>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="remove-pages-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/repair-pdf-settings.tsx

@@ -0,0 +1,52 @@
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function RepairPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["repair-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("repair-pdf");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = {};
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="repair-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/unlock-pdf-settings.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+export function UnlockPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["unlock-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("unlock-pdf");
+
+  const [password, setPassword] = useState("");
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { password };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="up-password" className="text-xs text-muted-foreground">
+          {s.password}
+        </label>
+        <input
+          id="up-password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="unlock-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing || !password}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/tools/watermark-pdf-settings.tsx

@@ -0,0 +1,145 @@
+import { useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { format } from "@/lib/format";
+import { useFileStore } from "@/stores/file-store";
+
+type Position = "tl" | "tc" | "tr" | "l" | "c" | "r" | "bl" | "bc" | "br";
+
+export function WatermarkPdfSettings() {
+  const { t } = useTranslation();
+  const s = t.toolSettings["watermark-pdf"];
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("watermark-pdf");
+
+  const [text, setText] = useState("");
+  const [position, setPosition] = useState<Position>("c");
+  const [fontSize, setFontSize] = useState(48);
+  const [opacity, setOpacity] = useState(0.3);
+  const [rotation, setRotation] = useState(45);
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  const handleProcess = () => {
+    const settings = { text, position, fontSize, opacity, rotation };
+    if (hasMultiple) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="wm-text" className="text-xs text-muted-foreground">
+          {s.text}
+        </label>
+        <input
+          id="wm-text"
+          type="text"
+          maxLength={200}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          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="wm-position" className="text-xs text-muted-foreground">
+          {s.position}
+        </label>
+        <select
+          id="wm-position"
+          value={position}
+          onChange={(e) => setPosition(e.target.value as Position)}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        >
+          <option value="tl">Top Left</option>
+          <option value="tc">Top Center</option>
+          <option value="tr">Top Right</option>
+          <option value="l">Left</option>
+          <option value="c">Center</option>
+          <option value="r">Right</option>
+          <option value="bl">Bottom Left</option>
+          <option value="bc">Bottom Center</option>
+          <option value="br">Bottom Right</option>
+        </select>
+      </div>
+
+      <div>
+        <label htmlFor="wm-font-size" className="text-xs text-muted-foreground">
+          {s.fontSize}
+        </label>
+        <input
+          id="wm-font-size"
+          type="number"
+          min={6}
+          max={72}
+          step={1}
+          value={fontSize}
+          onChange={(e) => setFontSize(Number(e.target.value))}
+          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="wm-opacity" className="text-xs text-muted-foreground">
+          {s.opacity}
+        </label>
+        <input
+          id="wm-opacity"
+          type="number"
+          min={0.05}
+          max={1}
+          step={0.05}
+          value={opacity}
+          onChange={(e) => setOpacity(Number(e.target.value))}
+          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="wm-rotation" className="text-xs text-muted-foreground">
+          {s.rotation}
+        </label>
+        <input
+          id="wm-rotation"
+          type="number"
+          min={-180}
+          max={180}
+          step={1}
+          value={rotation}
+          onChange={(e) => setRotation(Number(e.target.value))}
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={s.progressLabel}
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="watermark-pdf-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing || !text}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? format(s.submitBatch, { count: files.length }) : s.submit}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/icon-map.ts

@@ -1,13 +1,16 @@
 import type { LucideIcon } from "lucide-react";
 import {
   AppWindow,
+  Archive,
   AudioLines,
   BookImage,
+  BookOpen,
   Braces,
   CheckCircle2,
   Code,
   Columns2,
   Combine,
+  Contrast,
   Copy,
   Crop,
   Crosshair,
@@ -18,23 +21,31 @@ import {
   EyeOff,
   FileArchive,
   FileAudio,
+  FileCode,
+  FileCode2,
   FileImage,
   FileOutput,
   FilePen,
   FileText,
   FileType,
   FileVideo,
+  FileX,
   Film,
   Focus,
   Frame,
   Globe,
   Grid3x3,
+  Hash,
   Image,
   ImagePlus,
   Info,
   Laugh,
   Layers,
+  Layers2,
   LayoutGrid,
+  ListOrdered,
+  Lock,
+  LockOpen,
   Maximize2,
   Minimize2,
   Palette,
@@ -57,6 +68,7 @@ import {
   Stamp,
   Star,
   Table,
+  Tags,
   TextCursorInput,
   Type,
   Undo2,
@@ -73,13 +85,16 @@ import {
 // Avoids `import * as icons from "lucide-react"` which pulls the entire 1000+ icon library.
 export const ICON_MAP: Record<string, LucideIcon> = {
   AppWindow,
+  Archive,
   AudioLines,
   BookImage,
+  BookOpen,
   Braces,
   CheckCircle2,
   Code,
   Columns2,
   Combine,
+  Contrast,
   Copy,
   Crop,
   Crosshair,
@@ -90,10 +105,13 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   EyeOff,
   FileArchive,
   FileAudio,
+  FileCode,
+  FileCode2,
   FilePen,
   FileImage,
   FileOutput,
   FileVideo,
+  FileX,
   FileText,
   FileType,
   Film,
@@ -101,12 +119,16 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   Frame,
   Globe,
   Grid3x3,
+  Hash,
   Image,
   ImagePlus,
   Info,
   Laugh,
   Layers,
   LayoutGrid,
+  ListOrdered,
+  Lock,
+  LockOpen,
   Maximize2,
   Minimize2,
   Palette,
@@ -139,4 +161,6 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   Wrench,
   Zap,
   ZoomIn,
+  Layers2,
+  Tags,
 };

apps/web/src/lib/tool-display-modes.ts

@@ -109,6 +109,27 @@ export const TOOL_DISPLAY_MODES: Record<string, DisplayMode> = {
   "compress-pdf": "document",
   "rotate-pdf": "document",
   "word-to-pdf": "document",
+  "extract-pages": "document",
+  "remove-pages": "document",
+  "organize-pdf": "document",
+  "protect-pdf": "no-comparison",
+  "unlock-pdf": "document",
+  "repair-pdf": "document",
+  "crop-pdf": "document",
+  "nup-pdf": "document",
+  "booklet-pdf": "document",
+  "watermark-pdf": "document",
+  "pdf-page-numbers": "document",
+  "linearize-pdf": "no-comparison",
+  "grayscale-pdf": "document",
+  "pdfa-convert": "no-comparison",
+  "flatten-pdf": "document",
+  "redact-pdf": "document",
+  "pdf-to-text": "no-comparison",
+  "pdf-to-word": "no-comparison",
+  "pdf-metadata": "no-comparison",
+  "html-to-pdf": "document",
+  "markdown-to-pdf": "document",
 
   // Data tools
   "csv-excel": "no-comparison",

apps/web/src/lib/tool-registry.tsx

@@ -429,6 +429,111 @@ const SplitCsvSettings = lazy(() =>
     default: m.SplitCsvSettings,
   })),
 );
+const ExtractPagesSettings = lazy(() =>
+  import("@/components/tools/extract-pages-settings").then((m) => ({
+    default: m.ExtractPagesSettings,
+  })),
+);
+const RemovePagesSettings = lazy(() =>
+  import("@/components/tools/remove-pages-settings").then((m) => ({
+    default: m.RemovePagesSettings,
+  })),
+);
+const OrganizePdfSettings = lazy(() =>
+  import("@/components/tools/organize-pdf-settings").then((m) => ({
+    default: m.OrganizePdfSettings,
+  })),
+);
+const ProtectPdfSettings = lazy(() =>
+  import("@/components/tools/protect-pdf-settings").then((m) => ({
+    default: m.ProtectPdfSettings,
+  })),
+);
+const UnlockPdfSettings = lazy(() =>
+  import("@/components/tools/unlock-pdf-settings").then((m) => ({
+    default: m.UnlockPdfSettings,
+  })),
+);
+const RepairPdfSettings = lazy(() =>
+  import("@/components/tools/repair-pdf-settings").then((m) => ({
+    default: m.RepairPdfSettings,
+  })),
+);
+const CropPdfSettings = lazy(() =>
+  import("@/components/tools/crop-pdf-settings").then((m) => ({
+    default: m.CropPdfSettings,
+  })),
+);
+const NupPdfSettings = lazy(() =>
+  import("@/components/tools/nup-pdf-settings").then((m) => ({
+    default: m.NupPdfSettings,
+  })),
+);
+const BookletPdfSettings = lazy(() =>
+  import("@/components/tools/booklet-pdf-settings").then((m) => ({
+    default: m.BookletPdfSettings,
+  })),
+);
+const WatermarkPdfSettings = lazy(() =>
+  import("@/components/tools/watermark-pdf-settings").then((m) => ({
+    default: m.WatermarkPdfSettings,
+  })),
+);
+const PdfPageNumbersSettings = lazy(() =>
+  import("@/components/tools/pdf-page-numbers-settings").then((m) => ({
+    default: m.PdfPageNumbersSettings,
+  })),
+);
+const LinearizePdfSettings = lazy(() =>
+  import("@/components/tools/linearize-pdf-settings").then((m) => ({
+    default: m.LinearizePdfSettings,
+  })),
+);
+const GrayscalePdfSettings = lazy(() =>
+  import("@/components/tools/grayscale-pdf-settings").then((m) => ({
+    default: m.GrayscalePdfSettings,
+  })),
+);
+const PdfaConvertSettings = lazy(() =>
+  import("@/components/tools/pdfa-convert-settings").then((m) => ({
+    default: m.PdfaConvertSettings,
+  })),
+);
+const FlattenPdfSettings = lazy(() =>
+  import("@/components/tools/flatten-pdf-settings").then((m) => ({
+    default: m.FlattenPdfSettings,
+  })),
+);
+const RedactPdfSettings = lazy(() =>
+  import("@/components/tools/redact-pdf-settings").then((m) => ({
+    default: m.RedactPdfSettings,
+  })),
+);
+const PdfToTextSettings = lazy(() =>
+  import("@/components/tools/pdf-to-text-settings").then((m) => ({
+    default: m.PdfToTextSettings,
+  })),
+);
+const PdfToWordSettings = lazy(() =>
+  import("@/components/tools/pdf-to-word-settings").then((m) => ({
+    default: m.PdfToWordSettings,
+  })),
+);
+const PdfMetadataSettings = lazy(() =>
+  import("@/components/tools/pdf-metadata-settings").then((m) => ({
+    default: m.PdfMetadataSettings,
+  })),
+);
+const HtmlToPdfSettings = lazy(() =>
+  import("@/components/tools/html-to-pdf-settings").then((m) => ({
+    default: m.HtmlToPdfSettings,
+  })),
+);
+const MarkdownToPdfSettings = lazy(() =>
+  import("@/components/tools/markdown-to-pdf-settings").then((m) => ({
+    default: m.MarkdownToPdfSettings,
+  })),
+);
 
 // ── Color tool wrapper ─────────────────────────────────────────────
 // Color tools share a single component but differ by toolId.
@@ -561,6 +666,31 @@ const ENTRY_CONFIG: ReadonlyArray<[string, RegistryEntryConfig]> = [
   ["rotate-pdf", { accept: ".pdf", Settings: RotatePdfSettings }],
   ["word-to-pdf", { accept: ".docx,.doc,.odt,.rtf,.txt", Settings: WordToPdfSettings }],
 
+  // PDF depth tools (organize, secure, pdfcpu, layout)
+  ["extract-pages", { accept: ".pdf", Settings: ExtractPagesSettings }],
+  ["remove-pages", { accept: ".pdf", Settings: RemovePagesSettings }],
+  ["organize-pdf", { accept: ".pdf", Settings: OrganizePdfSettings }],
+  ["protect-pdf", { accept: ".pdf", Settings: ProtectPdfSettings }],
+  ["unlock-pdf", { accept: ".pdf", Settings: UnlockPdfSettings }],
+  ["repair-pdf", { accept: ".pdf", Settings: RepairPdfSettings }],
+  ["crop-pdf", { accept: ".pdf", Settings: CropPdfSettings }],
+  ["nup-pdf", { accept: ".pdf", Settings: NupPdfSettings }],
+  ["booklet-pdf", { accept: ".pdf", Settings: BookletPdfSettings }],
+  ["watermark-pdf", { accept: ".pdf", Settings: WatermarkPdfSettings }],
+  ["pdf-page-numbers", { accept: ".pdf", Settings: PdfPageNumbersSettings }],
+
+  // PDF convert and optimize tools
+  ["linearize-pdf", { accept: ".pdf", Settings: LinearizePdfSettings }],
+  ["grayscale-pdf", { accept: ".pdf", Settings: GrayscalePdfSettings }],
+  ["pdfa-convert", { accept: ".pdf", Settings: PdfaConvertSettings }],
+  ["flatten-pdf", { accept: ".pdf", Settings: FlattenPdfSettings }],
+  ["redact-pdf", { accept: ".pdf", Settings: RedactPdfSettings }],
+  ["pdf-to-text", { accept: ".pdf", Settings: PdfToTextSettings }],
+  ["pdf-to-word", { accept: ".pdf", Settings: PdfToWordSettings }],
+  ["pdf-metadata", { accept: ".pdf", Settings: PdfMetadataSettings }],
+  ["html-to-pdf", { accept: ".html,.htm", Settings: HtmlToPdfSettings }],
+  ["markdown-to-pdf", { accept: ".md,.markdown", Settings: MarkdownToPdfSettings }],
+
   // Data tools
   ["csv-excel", { accept: ".csv,.xlsx", Settings: CsvExcelSettings }],
   ["csv-json", { accept: ".csv,.json", Settings: CsvJsonSettings }],