From c3ba37c825bd18fc5809f4fe8237adb17caf0caa Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 28 Aug 2026 06:13:14 +0700
Subject: [PATCH] feat: add PDF Page Numbers, Social Image Resizer, Image
 Palette & Text Encryption
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four more client-side tools, each with a unit-tested pure lib + EN/ID SEO + Bahasa labels:
- Add Page Numbers to PDF (new addPageNumbers + formatPageLabel, reuses pageNumberXY)
- Social Media Image Resizer (platform presets + cover/contain fitRect; canvas)
- Image Color Palette (frequency-quantized dominant colors → hex; canvas)
- Text Encryption (Web Crypto AES-256-GCM + PBKDF2, encrypt/decrypt with password)
---
 src/islands/dev/TextEncrypt.tsx           |  97 +++++++++++++++
 src/islands/image/ImagePalette.tsx        | 110 +++++++++++++++++
 src/islands/image/SocialResize.tsx        | 128 ++++++++++++++++++++
 src/islands/pdf/PdfPageNumbers.tsx        | 114 ++++++++++++++++++
 src/registry/tool-i18n.ts                 |   4 +
 src/registry/tool-seo.ts                  | 136 ++++++++++++++++++++++
 src/registry/tools.ts                     |  44 +++++++
 src/tools/dev/textcrypt.lib.test.ts       |  31 +++++
 src/tools/dev/textcrypt.lib.ts            |  71 +++++++++++
 src/tools/image/palette.lib.test.ts       |  44 +++++++
 src/tools/image/palette.lib.ts            |  34 ++++++
 src/tools/image/social-resize.lib.test.ts |  41 +++++++
 src/tools/image/social-resize.lib.ts      |  43 +++++++
 src/tools/pdf/layout.lib.test.ts          |  10 +-
 src/tools/pdf/layout.lib.ts               |   5 +
 src/tools/pdf/pdf.lib.ts                  |  30 ++++-
 16 files changed, 940 insertions(+), 2 deletions(-)
 create mode 100644 src/islands/dev/TextEncrypt.tsx
 create mode 100644 src/islands/image/ImagePalette.tsx
 create mode 100644 src/islands/image/SocialResize.tsx
 create mode 100644 src/islands/pdf/PdfPageNumbers.tsx
 create mode 100644 src/tools/dev/textcrypt.lib.test.ts
 create mode 100644 src/tools/dev/textcrypt.lib.ts
 create mode 100644 src/tools/image/palette.lib.test.ts
 create mode 100644 src/tools/image/palette.lib.ts
 create mode 100644 src/tools/image/social-resize.lib.test.ts
 create mode 100644 src/tools/image/social-resize.lib.ts

diff --git a/src/islands/dev/TextEncrypt.tsx b/src/islands/dev/TextEncrypt.tsx
new file mode 100644
index 0000000..625822d
--- /dev/null
+++ b/src/islands/dev/TextEncrypt.tsx
@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { Lock, Unlock } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { TextArea } from '@/components/ui/TextArea';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { encryptText, decryptText } from '@/tools/dev/textcrypt.lib';
+import type { Lang } from '@/i18n/config';
+
+type Mode = 'encrypt' | 'decrypt';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Encrypt a message with a password (AES-256) so only someone with the password can read it — then share the scrambled text safely. All in your browser; the password never leaves your device.',
+    encrypt: 'Encrypt', decrypt: 'Decrypt', password: 'Password',
+    inEnc: 'Message to encrypt', inDec: 'Encrypted text to decrypt',
+    outEnc: 'Encrypted text', outDec: 'Decrypted message',
+    run: 'Encrypt', runDec: 'Decrypt', copy: 'Copy',
+    needPw: 'Enter a password.', failEnc: 'Could not encrypt.', failDec: 'Wrong password or invalid text.',
+    placeholderEnc: 'Type a secret message…', placeholderDec: 'Paste the encrypted text…',
+  },
+  id: {
+    intro: 'Enkripsi pesan dengan kata sandi (AES-256) agar hanya yang punya kata sandi bisa membacanya — lalu bagikan teks teracak dengan aman. Semua di browser Anda; kata sandi tidak pernah keluar dari perangkat.',
+    encrypt: 'Enkripsi', decrypt: 'Dekripsi', password: 'Kata sandi',
+    inEnc: 'Pesan untuk dienkripsi', inDec: 'Teks terenkripsi untuk didekripsi',
+    outEnc: 'Teks terenkripsi', outDec: 'Pesan terdekripsi',
+    run: 'Enkripsi', runDec: 'Dekripsi', copy: 'Salin',
+    needPw: 'Masukkan kata sandi.', failEnc: 'Tidak dapat mengenkripsi.', failDec: 'Kata sandi salah atau teks tidak valid.',
+    placeholderEnc: 'Ketik pesan rahasia…', placeholderDec: 'Tempel teks terenkripsi…',
+  },
+};
+
+export default function TextEncrypt({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [mode, setMode] = useState<Mode>('encrypt');
+  const [text, setText] = useState('');
+  const [password, setPassword] = useState('');
+  const [out, setOut] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const run = async () => {
+    if (!password) { setError(t.needPw); return; }
+    setBusy(true); setError(''); setOut('');
+    try {
+      setOut(mode === 'encrypt' ? await encryptText(text, password) : await decryptText(text, password));
+    } catch {
+      setError(mode === 'encrypt' ? t.failEnc : t.failDec);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const switchMode = (m: Mode) => { setMode(m); setOut(''); setError(''); };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="flex gap-1">
+        <button onClick={() => switchMode('encrypt')} aria-pressed={mode === 'encrypt'}
+          className={`flex items-center gap-2 border-2 px-4 py-2 text-sm font-bold uppercase tracking-wide ${mode === 'encrypt' ? 'border-border bg-accent text-accent-foreground shadow-brutal' : 'border-border'}`}>
+          <Lock className="h-4 w-4" />{t.encrypt}
+        </button>
+        <button onClick={() => switchMode('decrypt')} aria-pressed={mode === 'decrypt'}
+          className={`flex items-center gap-2 border-2 px-4 py-2 text-sm font-bold uppercase tracking-wide ${mode === 'decrypt' ? 'border-border bg-accent text-accent-foreground shadow-brutal' : 'border-border'}`}>
+          <Unlock className="h-4 w-4" />{t.decrypt}
+        </button>
+      </div>
+
+      <div className="space-y-1">
+        <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{mode === 'encrypt' ? t.inEnc : t.inDec}</span>
+        <TextArea value={text} onChange={e => setText(e.target.value)} rows={5}
+          placeholder={mode === 'encrypt' ? t.placeholderEnc : t.placeholderDec} className="font-mono text-sm" />
+      </div>
+
+      <label className="block space-y-1">
+        <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.password}</span>
+        <input type="password" value={password} onChange={e => setPassword(e.target.value)} autoComplete="off"
+          className="w-full border-2 border-border bg-muted p-2 text-sm" />
+      </label>
+
+      <Button onClick={run} disabled={busy || !text.trim()}>{busy ? '…' : (mode === 'encrypt' ? t.run : t.runDec)}</Button>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
+      {out && (
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{mode === 'encrypt' ? t.outEnc : t.outDec}</span>
+            <CopyButton value={out} label={t.copy} />
+          </div>
+          <textarea readOnly value={out} rows={5} className="w-full break-all border-2 border-border bg-muted p-2 font-mono text-sm" />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/image/ImagePalette.tsx b/src/islands/image/ImagePalette.tsx
new file mode 100644
index 0000000..38fcb81
--- /dev/null
+++ b/src/islands/image/ImagePalette.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { extractPalette, type Swatch } from '@/tools/image/palette.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Extract the dominant color palette from any image — get the hex codes for design, CSS or moodboards. Runs in your browser; nothing is uploaded.',
+    drop: 'Drop an image or click to browse', dropSub: 'PNG, JPG, WebP, GIF…',
+    colors: 'Colors', count: 'Number of colors', copyAll: 'Copy all hex', copy: 'Copy', failed: 'Could not read this image.',
+  },
+  id: {
+    intro: 'Ekstrak palet warna dominan dari gambar apa pun — dapatkan kode hex untuk desain, CSS, atau moodboard. Berjalan di browser Anda; tidak ada yang diunggah.',
+    drop: 'Letakkan gambar atau klik untuk memilih', dropSub: 'PNG, JPG, WebP, GIF…',
+    colors: 'Warna', count: 'Jumlah warna', copyAll: 'Salin semua hex', copy: 'Salin', failed: 'Tidak dapat membaca gambar ini.',
+  },
+};
+
+export default function ImagePalette({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState('');
+  const [swatches, setSwatches] = useState<Swatch[]>([]);
+  const [k, setK] = useState(6);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const run = async (file: File, count: number) => {
+    setBusy(true); setError('');
+    try {
+      const bmp = await createImageBitmap(file);
+      const scale = Math.min(1, 400 / Math.max(bmp.width, bmp.height));
+      const w = Math.max(1, Math.round(bmp.width * scale));
+      const h = Math.max(1, Math.round(bmp.height * scale));
+      const canvas = document.createElement('canvas');
+      canvas.width = w; canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('canvas');
+      ctx.drawImage(bmp, 0, 0, w, h);
+      bmp.close?.();
+      const { data } = ctx.getImageData(0, 0, w, h);
+      setSwatches(extractPalette(data, count, 1));
+    } catch {
+      setError(t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDrop = (files: File[]) => {
+    const img = files.find(f => f.type.startsWith('image/'));
+    if (!img) return;
+    setFile(img);
+    setPreview(prev => { if (prev) URL.revokeObjectURL(prev); return URL.createObjectURL(img); });
+    void run(img, k);
+  };
+
+  const changeK = (n: number) => {
+    setK(n);
+    if (file) void run(file, n);
+  };
+
+  const allHex = swatches.map(s => s.hex).join(', ');
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
+        <div className="space-y-1">
+          <p className="text-lg font-bold">{t.drop}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSub}</p>
+        </div>
+      </Dropzone>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
+      {preview && (
+        <div className="flex flex-wrap items-start gap-4">
+          <img src={preview} alt="" className="max-h-48 w-auto border-2 border-border object-contain" />
+          <label className="text-sm">
+            <span className="mr-2 font-semibold">{t.count}</span>
+            <select value={k} onChange={e => changeK(Number(e.target.value))} className="border-2 border-border bg-muted p-1">
+              {[4, 6, 8, 10, 12].map(n => <option key={n} value={n}>{n}</option>)}
+            </select>
+          </label>
+        </div>
+      )}
+
+      {swatches.length > 0 && !busy && (
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.colors}</span>
+            <CopyButton value={allHex} label={t.copyAll} />
+          </div>
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+            {swatches.map(s => (
+              <div key={s.hex} className="flex items-center gap-2 border-2 border-border bg-muted p-2">
+                <span className="h-9 w-9 shrink-0 border-2 border-border" style={{ backgroundColor: s.hex }} />
+                <span className="font-mono text-sm uppercase">{s.hex}</span>
+                <span className="ml-auto"><CopyButton value={s.hex} label={t.copy} /></span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/image/SocialResize.tsx b/src/islands/image/SocialResize.tsx
new file mode 100644
index 0000000..3e1cfbc
--- /dev/null
+++ b/src/islands/image/SocialResize.tsx
@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react';
+import { Download } from 'lucide-react';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { Button } from '@/components/ui/Button';
+import { downloadService } from '@/services/download';
+import { encodeCanvas, formatBytes } from '@/tools/image/canvas.lib';
+import { SOCIAL_PRESETS, fitRect, type FitMode } from '@/tools/image/social-resize.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Resize an image to exact social-media dimensions — Instagram, TikTok, YouTube, Facebook, X and LinkedIn. Done in your browser, nothing uploaded.',
+    drop: 'Drop an image or click to browse', dropSub: 'It will be resized to the size you pick',
+    preset: 'Size', fit: 'Fit', cover: 'Crop to fill', contain: 'Fit (with background)', bg: 'Background',
+    download: 'Download', failed: 'Could not process this image.', result: 'Result',
+  },
+  id: {
+    intro: 'Ubah ukuran gambar ke dimensi media sosial yang tepat — Instagram, TikTok, YouTube, Facebook, X, dan LinkedIn. Dilakukan di browser Anda, tanpa unggah.',
+    drop: 'Letakkan gambar atau klik untuk memilih', dropSub: 'Akan diubah ke ukuran yang Anda pilih',
+    preset: 'Ukuran', fit: 'Penyesuaian', cover: 'Potong penuh', contain: 'Muat (dengan latar)', bg: 'Latar',
+    download: 'Unduh', failed: 'Tidak dapat memproses gambar ini.', result: 'Hasil',
+  },
+};
+
+export default function SocialResize({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [file, setFile] = useState<File | null>(null);
+  const [presetId, setPresetId] = useState(SOCIAL_PRESETS[0].id);
+  const [fit, setFit] = useState<FitMode>('cover');
+  const [bg, setBg] = useState('#ffffff');
+  const [result, setResult] = useState<Blob | null>(null);
+  const [resultUrl, setResultUrl] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const preset = SOCIAL_PRESETS.find(p => p.id === presetId) ?? SOCIAL_PRESETS[0];
+
+  useEffect(() => () => { if (resultUrl) URL.revokeObjectURL(resultUrl); }, [resultUrl]);
+
+  const run = async (f: File, dstW: number, dstH: number, mode: FitMode, background: string) => {
+    setBusy(true); setError('');
+    try {
+      const bmp = await createImageBitmap(f);
+      const canvas = document.createElement('canvas');
+      canvas.width = dstW; canvas.height = dstH;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('canvas');
+      if (mode === 'contain') { ctx.fillStyle = background; ctx.fillRect(0, 0, dstW, dstH); }
+      const r = fitRect(bmp.width, bmp.height, dstW, dstH, mode);
+      ctx.drawImage(bmp, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+      bmp.close?.();
+      const blob = await encodeCanvas(canvas, 'image/png');
+      setResult(blob);
+      setResultUrl(prev => { if (prev) URL.revokeObjectURL(prev); return URL.createObjectURL(blob); });
+    } catch {
+      setError(t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const rerun = (f = file, id = presetId, mode = fit, background = bg) => {
+    const p = SOCIAL_PRESETS.find(x => x.id === id) ?? SOCIAL_PRESETS[0];
+    if (f) void run(f, p.w, p.h, mode, background);
+  };
+
+  const onDrop = (files: File[]) => {
+    const img = files.find(f => f.type.startsWith('image/'));
+    if (!img) return;
+    setFile(img);
+    rerun(img, presetId, fit, bg);
+  };
+
+  const download = () => {
+    if (!result || !file) return;
+    downloadService.download(result, file.name.replace(/\.[^.]+$/, '') + `-${preset.w}x${preset.h}.png`);
+  };
+
+  const input = 'h-9 border-2 border-border bg-muted px-2 text-sm';
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
+        <div className="space-y-1">
+          <p className="text-lg font-bold">{t.drop}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSub}</p>
+        </div>
+      </Dropzone>
+
+      <div className="flex flex-wrap items-end gap-3 text-sm">
+        <label className="flex flex-col gap-1">
+          <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.preset}</span>
+          <select value={presetId} onChange={e => { setPresetId(e.target.value); rerun(file, e.target.value, fit, bg); }} className={input}>
+            {SOCIAL_PRESETS.map(p => <option key={p.id} value={p.id}>{p.label} — {p.w}×{p.h}</option>)}
+          </select>
+        </label>
+        <label className="flex flex-col gap-1">
+          <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.fit}</span>
+          <select value={fit} onChange={e => { const m = e.target.value as FitMode; setFit(m); rerun(file, presetId, m, bg); }} className={input}>
+            <option value="cover">{t.cover}</option>
+            <option value="contain">{t.contain}</option>
+          </select>
+        </label>
+        {fit === 'contain' && (
+          <label className="flex flex-col gap-1">
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.bg}</span>
+            <input type="color" value={bg} onChange={e => { setBg(e.target.value); rerun(file, presetId, fit, e.target.value); }} className="h-9 w-14 border-2 border-border" />
+          </label>
+        )}
+      </div>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
+      {result && resultUrl && !busy && (
+        <div className="space-y-2">
+          <div className="flex flex-wrap items-center gap-3 text-sm">
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
+            <span className="font-mono text-muted-foreground">{preset.w}×{preset.h} · {formatBytes(result.size)}</span>
+          </div>
+          <img src={resultUrl} alt="" className="max-h-[60vh] w-auto max-w-full border-2 border-border" />
+          <Button onClick={download}><Download className="h-4 w-4" />{t.download}</Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/pdf/PdfPageNumbers.tsx b/src/islands/pdf/PdfPageNumbers.tsx
new file mode 100644
index 0000000..a951c60
--- /dev/null
+++ b/src/islands/pdf/PdfPageNumbers.tsx
@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { Button } from '@/components/ui/Button';
+import { Alert } from '@/components/ui/Alert';
+import { ResultActions } from '@/components/ui/ResultActions';
+import { addPageNumbers } from '@/tools/pdf/pdf.lib';
+import type { PageNumberPosition } from '@/tools/pdf/layout.lib';
+import type { Lang } from '@/i18n/config';
+
+const POSITIONS: PageNumberPosition[] = ['bottom-center', 'bottom-right', 'bottom-left', 'top-center', 'top-right', 'top-left'];
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Add page numbers to a PDF — choose the position and format, and download the numbered file. Runs in your browser; nothing is uploaded.',
+    drop: 'Drop a PDF or click to browse', dropSub: 'Numbered on your device',
+    position: 'Position', format: 'Format', startAt: 'Start at', size: 'Font size',
+    apply: 'Add page numbers', working: 'Adding…', failed: 'Could not add page numbers.',
+    'bottom-center': 'Bottom center', 'bottom-right': 'Bottom right', 'bottom-left': 'Bottom left',
+    'top-center': 'Top center', 'top-right': 'Top right', 'top-left': 'Top left',
+  },
+  id: {
+    intro: 'Tambahkan nomor halaman ke PDF — pilih posisi dan format, lalu unduh berkas bernomor. Berjalan di browser Anda; tidak ada yang diunggah.',
+    drop: 'Letakkan PDF atau klik untuk memilih', dropSub: 'Dinomori di perangkat Anda',
+    position: 'Posisi', format: 'Format', startAt: 'Mulai dari', size: 'Ukuran font',
+    apply: 'Tambahkan nomor halaman', working: 'Menambahkan…', failed: 'Tidak dapat menambahkan nomor halaman.',
+    'bottom-center': 'Bawah tengah', 'bottom-right': 'Bawah kanan', 'bottom-left': 'Bawah kiri',
+    'top-center': 'Atas tengah', 'top-right': 'Atas kanan', 'top-left': 'Atas kiri',
+  },
+};
+
+const FORMATS = ['{n}', '{n} / {total}', 'Page {n} of {total}', '- {n} -'];
+
+export default function PdfPageNumbers({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [file, setFile] = useState<File | null>(null);
+  const [position, setPosition] = useState<PageNumberPosition>('bottom-center');
+  const [template, setTemplate] = useState(FORMATS[0]);
+  const [startAt, setStartAt] = useState(1);
+  const [fontSize, setFontSize] = useState(12);
+  const [result, setResult] = useState<Blob | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const onDrop = (files: File[]) => {
+    const f = files.find(x => x.type === 'application/pdf' || x.name.toLowerCase().endsWith('.pdf'));
+    if (!f) return;
+    setFile(f); setResult(null); setError('');
+  };
+
+  const apply = async () => {
+    if (!file) return;
+    setBusy(true); setError(''); setResult(null);
+    try {
+      setResult(await addPageNumbers(file, { position, template, startAt, fontSize, margin: 28 }));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const input = 'h-9 border-2 border-border bg-muted px-2 text-sm';
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      {!file && (
+        <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
+          <div className="space-y-1">
+            <p className="text-lg font-bold">{t.drop}</p>
+            <p className="text-sm text-muted-foreground">{t.dropSub}</p>
+          </div>
+        </Dropzone>
+      )}
+
+      {file && (
+        <>
+          <p className="text-sm text-muted-foreground"><span className="font-bold text-foreground">{file.name}</span></p>
+          <div className="flex flex-wrap items-end gap-3 text-sm">
+            <label className="flex flex-col gap-1">
+              <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.position}</span>
+              <select value={position} onChange={e => setPosition(e.target.value as PageNumberPosition)} className={input}>
+                {POSITIONS.map(p => <option key={p} value={p}>{t[p]}</option>)}
+              </select>
+            </label>
+            <label className="flex flex-col gap-1">
+              <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.format}</span>
+              <select value={template} onChange={e => setTemplate(e.target.value)} className={input}>
+                {FORMATS.map(f => <option key={f} value={f}>{f}</option>)}
+              </select>
+            </label>
+            <label className="flex flex-col gap-1">
+              <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.startAt}</span>
+              <input type="number" min={0} value={startAt} onChange={e => setStartAt(Math.max(0, Number(e.target.value)))} className={`${input} w-20`} />
+            </label>
+            <label className="flex flex-col gap-1">
+              <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.size}</span>
+              <input type="number" min={6} max={48} value={fontSize} onChange={e => setFontSize(Math.max(6, Number(e.target.value)))} className={`${input} w-20`} />
+            </label>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={apply} disabled={busy}>{busy ? t.working : t.apply}</Button>
+            <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>Clear</Button>
+          </div>
+        </>
+      )}
+
+      {error && <Alert variant="error">{error}</Alert>}
+      {result && <ResultActions blob={result} filename={(file?.name.replace(/\.pdf$/i, '') || 'numbered') + '-numbered.pdf'} disabled={busy} />}
+    </div>
+  );
+}
diff --git a/src/registry/tool-i18n.ts b/src/registry/tool-i18n.ts
index 07cbb44..f2b4b03 100644
--- a/src/registry/tool-i18n.ts
+++ b/src/registry/tool-i18n.ts
@@ -27,6 +27,10 @@ const ID_LABELS: Record<string, { name: string; summary: string }> = {
   "regex-tester": { name: "Regex Tester", summary: "Uji regex dengan penyorotan langsung dan kode per bahasa" },
   "qris-decoder": { name: "QRIS Decoder", summary: "Decode kode pembayaran QRIS — merchant, NMID, kota, nominal" },
   "hash-text": { name: "Hash Teks", summary: "Hash MD5, SHA-1/256/512 dan CRC32 dari teks apa pun" },
+  "pdf-page-numbers": { name: "Tambah Nomor Halaman PDF", summary: "Tambahkan nomor halaman ke PDF, dengan posisi & format" },
+  "social-image-resize": { name: "Pengubah Ukuran Gambar Sosial", summary: "Ubah ukuran gambar ke ukuran Instagram/YouTube/TikTok" },
+  "image-palette": { name: "Palet Warna Gambar", summary: "Ekstrak palet warna dominan (hex) dari gambar" },
+  "text-encrypt": { name: "Enkripsi Teks", summary: "Enkripsi/dekripsi pesan dengan kata sandi (AES-256)" },
   "cidr-calculator": { name: "Kalkulator CIDR", summary: "Kalkulator subnet IPv4 — network, broadcast, mask, rentang host" },
   "minifier": { name: "Minifier HTML/CSS/JS", summary: "Minify HTML, CSS dan JavaScript di browser Anda" },
   "subtitle-editor": { name: "Editor Subtitle (SRT/VTT)", summary: "Edit, atur ulang waktu dan konversi subtitle SRT dan WebVTT" },
diff --git a/src/registry/tool-seo.ts b/src/registry/tool-seo.ts
index e3b6b6a..f8af28c 100644
--- a/src/registry/tool-seo.ts
+++ b/src/registry/tool-seo.ts
@@ -77,6 +77,74 @@ const en: Record<string, ToolSeoContent> = {
       { q: 'What is the difference between a static and dynamic QRIS?', a: 'A static QRIS (initiation method 11) has no fixed amount — the payer types it in. A dynamic QRIS (12) encodes a specific amount, usually generated per transaction. The decoder shows which one you have.' },
     ],
   },
+  'pdf-page-numbers': {
+    title: 'Add Page Numbers to PDF — Free, in Your Browser',
+    description: 'Add page numbers to a PDF online — choose position (corner or center) and format like "Page 1 of 10", then download. Nothing is uploaded; runs in your browser.',
+    intro: 'This free tool stamps page numbers onto every page of a PDF. Pick the position and a format such as plain numbers or "Page 1 of 10", set the starting number and font size, and download the numbered PDF. It all happens in your browser, so your document is never uploaded.',
+    howTo: [
+      'Drop a PDF onto the box or click to browse.',
+      'Choose the position (e.g. bottom center) and a number format.',
+      'Optionally set the starting number and font size.',
+      'Click Add page numbers and download the result.',
+    ],
+    faqs: [
+      { q: 'Is my PDF uploaded?', a: 'No. Page numbers are added in your browser, so the file never leaves your device.' },
+      { q: 'Can I write "Page 1 of 10"?', a: 'Yes. Choose the "Page {n} of {total}" format and the tool fills in the current page and the total automatically.' },
+      { q: 'Can I start numbering from a different number?', a: 'Yes. Set the "Start at" value — useful when the first pages are a cover or table of contents.' },
+      { q: 'Where can I place the numbers?', a: 'Any of six positions: bottom or top, left, center or right.' },
+    ],
+  },
+  'social-image-resize': {
+    title: 'Social Media Image Resizer — Instagram, YouTube, TikTok Sizes',
+    description: 'Resize an image to exact social-media dimensions — Instagram post/story, YouTube thumbnail, Facebook cover, X and LinkedIn — in your browser. Nothing uploaded.',
+    intro: 'This free resizer crops or fits your image to the exact pixel size each platform wants — Instagram posts and stories, YouTube thumbnails, Facebook covers, X posts and LinkedIn banners. Choose crop-to-fill or fit-with-background, and it renders in your browser without uploading anything.',
+    howTo: [
+      'Drop an image onto the box or click to browse.',
+      'Pick a target size (e.g. Instagram Post 1080×1080 or YouTube Thumbnail 1280×720).',
+      'Choose Crop to fill or Fit with a background color.',
+      'Download the resized PNG.',
+    ],
+    faqs: [
+      { q: 'Is my image uploaded?', a: 'No. Resizing happens entirely in your browser via canvas — the image never leaves your device.' },
+      { q: 'What is the difference between crop and fit?', a: 'Crop to fill scales the image to cover the whole frame and trims the overflow. Fit shrinks the whole image to fit and fills the empty space with a background color you choose.' },
+      { q: 'Which platforms are covered?', a: 'Instagram (post, portrait, story), TikTok story, YouTube thumbnail, Facebook cover, X/Twitter post and LinkedIn banner — with their standard pixel sizes.' },
+      { q: 'What format is the output?', a: 'A PNG at the exact target dimensions, ready to upload.' },
+    ],
+  },
+  'image-palette': {
+    title: 'Image Color Palette Extractor — Get Hex Codes from a Photo',
+    description: 'Extract the dominant color palette and hex codes from any image — for design, CSS and moodboards. Runs in your browser; nothing is uploaded.',
+    intro: 'This tool pulls the dominant colors out of any image and gives you their hex codes, so you can build a palette for a design, website or moodboard. It analyzes the image in your browser and never uploads it.',
+    howTo: [
+      'Drop an image onto the box or click to browse.',
+      'The dominant colors appear as swatches with their hex codes.',
+      'Change the number of colors if you want a larger or smaller palette.',
+      'Click Copy on a swatch, or copy all the hex codes at once.',
+    ],
+    faqs: [
+      { q: 'Is my image uploaded?', a: 'No. The colors are extracted in your browser — the image never leaves your device.' },
+      { q: 'How are the colors chosen?', a: 'The tool samples the image, groups near-identical shades together, and ranks them by how often they appear, so the most dominant colors come first.' },
+      { q: 'Can I get more or fewer colors?', a: 'Yes. Pick how many colors you want (from 4 up to 12) and the palette updates.' },
+      { q: 'What can I do with the hex codes?', a: 'Paste them into CSS, a design tool, or a moodboard — they are standard hex color values.' },
+    ],
+  },
+  'text-encrypt': {
+    title: 'Text Encryption — Encrypt a Message with a Password (AES)',
+    description: 'Encrypt and decrypt a message with a password using AES-256, entirely in your browser. Share the scrambled text safely — the password never leaves your device.',
+    intro: 'This tool encrypts a message with a password using AES-256 (with a key derived via PBKDF2), so only someone who knows the password can read it. Encrypt a note to paste into an email or chat, or decrypt one you received. Everything runs in your browser and the password is never sent anywhere.',
+    howTo: [
+      'Choose Encrypt (or Decrypt to reverse it).',
+      'Type or paste your message.',
+      'Enter a password — share it with the recipient through a separate channel.',
+      'Click Encrypt and copy the scrambled text; the recipient pastes it here, enters the password, and clicks Decrypt.',
+    ],
+    faqs: [
+      { q: 'Is my message or password sent anywhere?', a: 'No. Encryption and decryption happen entirely in your browser using the Web Crypto API — neither the message nor the password ever leaves your device.' },
+      { q: 'What encryption does it use?', a: 'AES-256-GCM with a key derived from your password via PBKDF2 (SHA-256, 150,000 iterations) and a random salt and IV per message.' },
+      { q: 'What happens if I lose the password?', a: 'The message cannot be recovered — there is no backdoor. Keep the password safe and share it securely.' },
+      { q: 'How do I share the password?', a: 'Send it through a different channel from the encrypted text (e.g. text the password, email the ciphertext) so an interceptor never has both.' },
+    ],
+  },
   'hash-text': {
     title: 'Free Text Hash Generator — MD5, SHA-256, SHA-512, CRC32',
     description: 'Generate MD5, SHA-1, SHA-256, SHA-512 and CRC32 hashes of any text online. Instant, in your browser — nothing is uploaded.',
@@ -3278,6 +3346,74 @@ const id: Record<string, ToolSeoContent> = {
       { q: 'Apa beda QRIS statis dan dinamis?', a: 'QRIS statis (metode inisiasi 11) tidak memiliki nominal tetap — pembayar mengetiknya sendiri. QRIS dinamis (12) memuat nominal tertentu, biasanya dibuat per transaksi. Decoder menunjukkan tipe yang Anda miliki.' },
     ],
   },
+  'pdf-page-numbers': {
+    title: 'Tambah Nomor Halaman ke PDF — Gratis, di Browser Anda',
+    description: 'Tambahkan nomor halaman ke PDF online — pilih posisi (sudut atau tengah) dan format seperti "Page 1 of 10", lalu unduh. Tidak ada yang diunggah; berjalan di browser Anda.',
+    intro: 'Tool gratis ini mencap nomor halaman ke setiap halaman PDF. Pilih posisi dan format seperti angka biasa atau "Page 1 of 10", atur nomor awal dan ukuran font, lalu unduh PDF bernomor. Semua terjadi di browser Anda, jadi dokumen tidak pernah diunggah.',
+    howTo: [
+      'Jatuhkan PDF ke kotak atau klik untuk memilih.',
+      'Pilih posisi (mis. bawah tengah) dan format nomor.',
+      'Opsional, atur nomor awal dan ukuran font.',
+      'Klik Tambahkan nomor halaman dan unduh hasilnya.',
+    ],
+    faqs: [
+      { q: 'Apakah PDF saya diunggah?', a: 'Tidak. Nomor halaman ditambahkan di browser Anda, jadi berkas tidak pernah keluar dari perangkat.' },
+      { q: 'Bisa menulis "Page 1 of 10"?', a: 'Bisa. Pilih format "Page {n} of {total}" dan tool mengisi halaman saat ini dan totalnya otomatis.' },
+      { q: 'Bisa mulai penomoran dari angka lain?', a: 'Bisa. Atur nilai "Mulai dari" — berguna saat halaman pertama adalah sampul atau daftar isi.' },
+      { q: 'Di mana nomor bisa ditempatkan?', a: 'Enam posisi: bawah atau atas, kiri, tengah, atau kanan.' },
+    ],
+  },
+  'social-image-resize': {
+    title: 'Pengubah Ukuran Gambar Media Sosial — Instagram, YouTube, TikTok',
+    description: 'Ubah ukuran gambar ke dimensi media sosial yang tepat — post/story Instagram, thumbnail YouTube, sampul Facebook, X, dan LinkedIn — di browser Anda. Tanpa unggah.',
+    intro: 'Pengubah ukuran gratis ini memotong atau memuat gambar Anda ke ukuran piksel persis yang diinginkan tiap platform — post dan story Instagram, thumbnail YouTube, sampul Facebook, post X, dan banner LinkedIn. Pilih potong-penuh atau muat-dengan-latar, dan tool merendernya di browser Anda tanpa mengunggah apa pun.',
+    howTo: [
+      'Jatuhkan gambar ke kotak atau klik untuk memilih.',
+      'Pilih ukuran target (mis. Post Instagram 1080×1080 atau Thumbnail YouTube 1280×720).',
+      'Pilih Potong penuh atau Muat dengan warna latar.',
+      'Unduh PNG yang telah diubah ukurannya.',
+    ],
+    faqs: [
+      { q: 'Apakah gambar saya diunggah?', a: 'Tidak. Pengubahan ukuran terjadi sepenuhnya di browser Anda via canvas — gambar tidak pernah keluar dari perangkat.' },
+      { q: 'Apa beda potong dan muat?', a: 'Potong penuh menskalakan gambar untuk menutupi seluruh bingkai dan memangkas kelebihannya. Muat mengecilkan seluruh gambar agar pas dan mengisi ruang kosong dengan warna latar pilihan Anda.' },
+      { q: 'Platform apa yang didukung?', a: 'Instagram (post, potret, story), story TikTok, thumbnail YouTube, sampul Facebook, post X/Twitter, dan banner LinkedIn — dengan ukuran piksel standarnya.' },
+      { q: 'Format keluarannya apa?', a: 'PNG pada dimensi target yang tepat, siap diunggah.' },
+    ],
+  },
+  'image-palette': {
+    title: 'Ekstraktor Palet Warna Gambar — Ambil Kode Hex dari Foto',
+    description: 'Ekstrak palet warna dominan dan kode hex dari gambar apa pun — untuk desain, CSS, dan moodboard. Berjalan di browser Anda; tidak ada yang diunggah.',
+    intro: 'Tool ini menarik warna dominan dari gambar apa pun dan memberi Anda kode hex-nya, sehingga Anda bisa membuat palet untuk desain, situs web, atau moodboard. Tool menganalisis gambar di browser Anda dan tidak pernah mengunggahnya.',
+    howTo: [
+      'Jatuhkan gambar ke kotak atau klik untuk memilih.',
+      'Warna dominan muncul sebagai swatch dengan kode hex-nya.',
+      'Ubah jumlah warna jika ingin palet lebih besar atau kecil.',
+      'Klik Salin pada swatch, atau salin semua kode hex sekaligus.',
+    ],
+    faqs: [
+      { q: 'Apakah gambar saya diunggah?', a: 'Tidak. Warna diekstrak di browser Anda — gambar tidak pernah keluar dari perangkat.' },
+      { q: 'Bagaimana warna dipilih?', a: 'Tool mengambil sampel gambar, mengelompokkan warna yang hampir identik, dan memeringkatnya berdasarkan seberapa sering muncul, jadi warna paling dominan didahulukan.' },
+      { q: 'Bisa dapat lebih banyak atau sedikit warna?', a: 'Bisa. Pilih berapa warna yang Anda inginkan (dari 4 hingga 12) dan palet diperbarui.' },
+      { q: 'Apa yang bisa dilakukan dengan kode hex?', a: 'Tempel ke CSS, tool desain, atau moodboard — ini nilai warna hex standar.' },
+    ],
+  },
+  'text-encrypt': {
+    title: 'Enkripsi Teks — Enkripsi Pesan dengan Kata Sandi (AES)',
+    description: 'Enkripsi dan dekripsi pesan dengan kata sandi memakai AES-256, sepenuhnya di browser Anda. Bagikan teks teracak dengan aman — kata sandi tidak pernah keluar dari perangkat.',
+    intro: 'Tool ini mengenkripsi pesan dengan kata sandi memakai AES-256 (dengan kunci yang diturunkan via PBKDF2), sehingga hanya yang tahu kata sandi bisa membacanya. Enkripsi catatan untuk ditempel ke email atau chat, atau dekripsi yang Anda terima. Semua berjalan di browser Anda dan kata sandi tidak pernah dikirim ke mana pun.',
+    howTo: [
+      'Pilih Enkripsi (atau Dekripsi untuk membaliknya).',
+      'Ketik atau tempel pesan Anda.',
+      'Masukkan kata sandi — bagikan ke penerima lewat jalur terpisah.',
+      'Klik Enkripsi dan salin teks teracak; penerima menempelnya di sini, memasukkan kata sandi, dan klik Dekripsi.',
+    ],
+    faqs: [
+      { q: 'Apakah pesan atau kata sandi saya dikirim ke mana pun?', a: 'Tidak. Enkripsi dan dekripsi terjadi sepenuhnya di browser Anda memakai Web Crypto API — baik pesan maupun kata sandi tidak pernah keluar dari perangkat.' },
+      { q: 'Enkripsi apa yang dipakai?', a: 'AES-256-GCM dengan kunci yang diturunkan dari kata sandi Anda via PBKDF2 (SHA-256, 150.000 iterasi) serta salt dan IV acak untuk tiap pesan.' },
+      { q: 'Bagaimana jika saya lupa kata sandi?', a: 'Pesan tidak bisa dipulihkan — tidak ada backdoor. Simpan kata sandi dengan aman dan bagikan secara aman.' },
+      { q: 'Bagaimana cara membagikan kata sandi?', a: 'Kirim lewat jalur berbeda dari teks terenkripsi (mis. SMS kata sandi, email ciphertext) agar penyadap tidak pernah punya keduanya.' },
+    ],
+  },
   'hash-text': {
     title: 'Generator Hash Teks Gratis — MD5, SHA-256, SHA-512, CRC32',
     description: 'Buat hash MD5, SHA-1, SHA-256, SHA-512, dan CRC32 dari teks apa pun secara online. Seketika, di browser Anda — tidak ada yang diunggah.',
diff --git a/src/registry/tools.ts b/src/registry/tools.ts
index c96d787..3b9ac4c 100644
--- a/src/registry/tools.ts
+++ b/src/registry/tools.ts
@@ -223,6 +223,17 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/dev/HashText'),
     status: 'beta'
   },
+  {
+    id: 'text-encrypt',
+    name: 'Text Encryption',
+    category: 'Dev',
+    route: '/tools/text-encrypt',
+    keywords: ['encrypt text', 'text encryption', 'encrypt message', 'aes', 'password encrypt', 'decrypt text', 'secure message', 'encrypt online'],
+    icon: Lock,
+    summary: 'Encrypt/decrypt a message with a password (AES-256)',
+    load: () => import('@/islands/dev/TextEncrypt'),
+    status: 'beta'
+  },
   {
     id: 'cidr-calculator',
     name: 'CIDR Calculator',
@@ -1015,6 +1026,17 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/pdf/PdfFill'),
     status: 'beta'
   },
+  {
+    id: 'pdf-page-numbers',
+    name: 'Add Page Numbers to PDF',
+    category: 'PDF',
+    route: '/tools/pdf-page-numbers',
+    keywords: ['add page numbers to pdf', 'pdf page numbers', 'number pdf pages', 'paginate pdf', 'page numbering', 'bates'],
+    icon: ListOrdered,
+    summary: 'Add page numbers to a PDF, positioned and formatted',
+    load: () => import('@/islands/pdf/PdfPageNumbers'),
+    status: 'beta'
+  },
   {
     id: 'pdf-redact',
     name: 'Redact PDF',
@@ -1488,6 +1510,28 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/image/ImageResize'),
     status: 'stable'
   },
+  {
+    id: 'social-image-resize',
+    name: 'Social Media Image Resizer',
+    category: 'Image',
+    route: '/tools/social-image-resize',
+    keywords: ['social media image resizer', 'instagram size', 'youtube thumbnail size', 'story size', 'facebook cover', 'twitter image', 'linkedin banner', 'resize for social'],
+    icon: Scaling,
+    summary: 'Resize images to exact Instagram/YouTube/TikTok sizes',
+    load: () => import('@/islands/image/SocialResize'),
+    status: 'beta'
+  },
+  {
+    id: 'image-palette',
+    name: 'Image Color Palette',
+    category: 'Image',
+    route: '/tools/image-palette',
+    keywords: ['color palette from image', 'extract colors', 'image colors', 'dominant colors', 'color picker from image', 'hex codes', 'palette generator'],
+    icon: Palette,
+    summary: 'Extract the dominant color palette (hex) from an image',
+    load: () => import('@/islands/image/ImagePalette'),
+    status: 'beta'
+  },
   {
     id: 'image-annotate',
     name: 'Image Annotator',
diff --git a/src/tools/dev/textcrypt.lib.test.ts b/src/tools/dev/textcrypt.lib.test.ts
new file mode 100644
index 0000000..1020d0b
--- /dev/null
+++ b/src/tools/dev/textcrypt.lib.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { encryptText, decryptText } from './textcrypt.lib';
+
+describe('encryptText / decryptText', () => {
+  it('round-trips a message', async () => {
+    const secret = 'Meet at the docks — bring the plans. 🕵️';
+    const blob = await encryptText(secret, 'correct horse');
+    expect(blob).not.toContain(secret);
+    expect(await decryptText(blob, 'correct horse')).toBe(secret);
+  });
+
+  it('produces different ciphertext each time (random salt/iv)', async () => {
+    const a = await encryptText('hello', 'pw');
+    const b = await encryptText('hello', 'pw');
+    expect(a).not.toBe(b);
+  });
+
+  it('fails with the wrong password', async () => {
+    const blob = await encryptText('hello', 'right');
+    await expect(decryptText(blob, 'wrong')).rejects.toThrow();
+  });
+
+  it('rejects corrupt or too-short payloads', async () => {
+    await expect(decryptText('not base64 @@@', 'pw')).rejects.toThrow();
+    await expect(decryptText('AAAA', 'pw')).rejects.toThrow();
+  });
+
+  it('requires a password', async () => {
+    await expect(encryptText('x', '')).rejects.toThrow();
+  });
+});
diff --git a/src/tools/dev/textcrypt.lib.ts b/src/tools/dev/textcrypt.lib.ts
new file mode 100644
index 0000000..82e7faa
--- /dev/null
+++ b/src/tools/dev/textcrypt.lib.ts
@@ -0,0 +1,71 @@
+/**
+ * Password-based text encryption with the Web Crypto API — AES-GCM with a key
+ * derived via PBKDF2 (SHA-256). Pure and testable: the output is a self-
+ * contained Base64 blob of salt + IV + ciphertext, so decryption needs only the
+ * blob and the password. No key or plaintext ever leaves the browser.
+ */
+
+const PBKDF2_ITERATIONS = 150_000;
+const SALT_BYTES = 16;
+const IV_BYTES = 12;
+
+function bytesToBase64(bytes: Uint8Array): string {
+  let bin = '';
+  for (const b of bytes) bin += String.fromCharCode(b);
+  return btoa(bin);
+}
+
+function base64ToBytes(b64: string): Uint8Array {
+  const bin = atob(b64);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+async function deriveKey(password: string, salt: Uint8Array): Promise<CryptoKey> {
+  const enc = new TextEncoder();
+  const baseKey = await crypto.subtle.importKey('raw', enc.encode(password), 'PBKDF2', false, ['deriveKey']);
+  return crypto.subtle.deriveKey(
+    { name: 'PBKDF2', salt, iterations: PBKDF2_ITERATIONS, hash: 'SHA-256' },
+    baseKey,
+    { name: 'AES-GCM', length: 256 },
+    false,
+    ['encrypt', 'decrypt'],
+  );
+}
+
+/** Encrypt `plain` with `password`; returns a Base64 blob (salt + IV + ciphertext). */
+export async function encryptText(plain: string, password: string): Promise<string> {
+  if (!password) throw new Error('Password required');
+  const salt = crypto.getRandomValues(new Uint8Array(SALT_BYTES));
+  const iv = crypto.getRandomValues(new Uint8Array(IV_BYTES));
+  const key = await deriveKey(password, salt);
+  const ct = new Uint8Array(await crypto.subtle.encrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    new TextEncoder().encode(plain),
+  ));
+  const blob = new Uint8Array(salt.length + iv.length + ct.length);
+  blob.set(salt, 0);
+  blob.set(iv, salt.length);
+  blob.set(ct, salt.length + iv.length);
+  return bytesToBase64(blob);
+}
+
+/** Decrypt a Base64 blob produced by {@link encryptText}. Throws on wrong password/corrupt data. */
+export async function decryptText(payload: string, password: string): Promise<string> {
+  if (!password) throw new Error('Password required');
+  let blob: Uint8Array;
+  try {
+    blob = base64ToBytes(payload.trim());
+  } catch {
+    throw new Error('Not valid encrypted text');
+  }
+  if (blob.length <= SALT_BYTES + IV_BYTES) throw new Error('Not valid encrypted text');
+  const salt = blob.slice(0, SALT_BYTES);
+  const iv = blob.slice(SALT_BYTES, SALT_BYTES + IV_BYTES);
+  const ct = blob.slice(SALT_BYTES + IV_BYTES);
+  const key = await deriveKey(password, salt);
+  const pt = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ct);
+  return new TextDecoder().decode(pt);
+}
diff --git a/src/tools/image/palette.lib.test.ts b/src/tools/image/palette.lib.test.ts
new file mode 100644
index 0000000..dc5d6a8
--- /dev/null
+++ b/src/tools/image/palette.lib.test.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { extractPalette, rgbToHex } from './palette.lib';
+
+describe('rgbToHex', () => {
+  it('pads channels', () => {
+    expect(rgbToHex(255, 0, 16)).toBe('#ff0010');
+    expect(rgbToHex(0, 0, 0)).toBe('#000000');
+  });
+});
+
+/** Build RGBA data with `n` opaque pixels of one color. */
+function pixels(color: [number, number, number], n: number): number[] {
+  const out: number[] = [];
+  for (let i = 0; i < n; i++) out.push(color[0], color[1], color[2], 255);
+  return out;
+}
+
+describe('extractPalette', () => {
+  it('ranks colors by frequency', () => {
+    const data = new Uint8ClampedArray([
+      ...pixels([240, 0, 0], 10), // red — most common
+      ...pixels([0, 240, 0], 4),  // green
+      ...pixels([0, 0, 240], 1),  // blue
+    ]);
+    const p = extractPalette(data, 3, 1);
+    expect(p[0].hex).toBe('#f00000');
+    expect(p[0].count).toBe(10);
+    expect(p.map(s => s.hex)).toEqual(['#f00000', '#00f000', '#0000f0']);
+  });
+
+  it('quantizes near-identical shades into one bucket', () => {
+    const data = new Uint8ClampedArray([...pixels([241, 1, 1], 5), ...pixels([255, 15, 15], 5)]);
+    const p = extractPalette(data, 5, 1);
+    expect(p).toHaveLength(1);
+    expect(p[0].count).toBe(10);
+  });
+
+  it('skips transparent pixels', () => {
+    const data = new Uint8ClampedArray([240, 0, 0, 0, 0, 240, 0, 255]);
+    const p = extractPalette(data, 5, 1);
+    expect(p).toHaveLength(1);
+    expect(p[0].hex).toBe('#00f000');
+  });
+});
diff --git a/src/tools/image/palette.lib.ts b/src/tools/image/palette.lib.ts
new file mode 100644
index 0000000..7201b23
--- /dev/null
+++ b/src/tools/image/palette.lib.ts
@@ -0,0 +1,34 @@
+/** Pure dominant-color extraction for the Image Palette tool. */
+
+export interface Swatch {
+  hex: string;
+  /** Sampled pixel count landing in this color bucket. */
+  count: number;
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  const h = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${h(r)}${h(g)}${h(b)}`;
+}
+
+/**
+ * Extract the `k` most common colors from RGBA pixel data. Colors are quantized
+ * to 4 bits per channel (buckets of 16) so near-identical shades group together,
+ * then ranked by frequency. Every `step`-th pixel is sampled for speed.
+ */
+export function extractPalette(data: Uint8ClampedArray, k = 6, step = 4): Swatch[] {
+  const counts = new Map<number, number>();
+  const stride = 4 * Math.max(1, step);
+  for (let i = 0; i + 3 < data.length; i += stride) {
+    if (data[i + 3] < 128) continue; // skip mostly-transparent pixels
+    const r = data[i] & 0xf0;
+    const g = data[i + 1] & 0xf0;
+    const b = data[i + 2] & 0xf0;
+    const key = (r << 16) | (g << 8) | b;
+    counts.set(key, (counts.get(key) ?? 0) + 1);
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, k)
+    .map(([key, count]) => ({ hex: rgbToHex((key >> 16) & 0xff, (key >> 8) & 0xff, key & 0xff), count }));
+}
diff --git a/src/tools/image/social-resize.lib.test.ts b/src/tools/image/social-resize.lib.test.ts
new file mode 100644
index 0000000..e87006b
--- /dev/null
+++ b/src/tools/image/social-resize.lib.test.ts
@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+import { fitRect, SOCIAL_PRESETS } from './social-resize.lib';
+
+describe('fitRect cover', () => {
+  it('crops the sides of a wide source', () => {
+    // 2000×1000 (2:1) into 1000×1000 (1:1) → crop width to 1000.
+    const r = fitRect(2000, 1000, 1000, 1000, 'cover');
+    expect(r.sw).toBe(1000);
+    expect(r.sh).toBe(1000);
+    expect(r.sx).toBe(500);
+    expect(r.sy).toBe(0);
+    expect(r).toMatchObject({ dx: 0, dy: 0, dw: 1000, dh: 1000 });
+  });
+  it('crops top/bottom of a tall source', () => {
+    // 1000×1000 into 1600×900 (16:9) → crop height.
+    const r = fitRect(1000, 1000, 1600, 900, 'cover');
+    expect(r.sw).toBe(1000);
+    expect(r.sh).toBeCloseTo(562.5, 1);
+    expect(r.sy).toBeCloseTo(218.75, 1);
+  });
+});
+
+describe('fitRect contain', () => {
+  it('letterboxes a square into a wide target', () => {
+    const r = fitRect(1000, 1000, 1600, 900, 'contain');
+    expect(r.dw).toBe(900);
+    expect(r.dh).toBe(900);
+    expect(r.dx).toBe(350);
+    expect(r.dy).toBe(0);
+  });
+});
+
+describe('SOCIAL_PRESETS', () => {
+  it('has sane dimensions', () => {
+    expect(SOCIAL_PRESETS.length).toBeGreaterThan(4);
+    for (const p of SOCIAL_PRESETS) {
+      expect(p.w).toBeGreaterThan(0);
+      expect(p.h).toBeGreaterThan(0);
+    }
+  });
+});
diff --git a/src/tools/image/social-resize.lib.ts b/src/tools/image/social-resize.lib.ts
new file mode 100644
index 0000000..83a299f
--- /dev/null
+++ b/src/tools/image/social-resize.lib.ts
@@ -0,0 +1,43 @@
+/** Platform presets + fit geometry for the Social-Media Image Resizer (pure). */
+
+export interface SocialPreset { id: string; label: string; w: number; h: number }
+
+export const SOCIAL_PRESETS: SocialPreset[] = [
+  { id: 'ig-square', label: 'Instagram Post (1:1)', w: 1080, h: 1080 },
+  { id: 'ig-portrait', label: 'Instagram Portrait (4:5)', w: 1080, h: 1350 },
+  { id: 'story', label: 'Instagram / TikTok Story (9:16)', w: 1080, h: 1920 },
+  { id: 'yt-thumb', label: 'YouTube Thumbnail (16:9)', w: 1280, h: 720 },
+  { id: 'fb-cover', label: 'Facebook Cover', w: 1640, h: 924 },
+  { id: 'x-post', label: 'X / Twitter Post (16:9)', w: 1600, h: 900 },
+  { id: 'li-banner', label: 'LinkedIn Banner (4:1)', w: 1584, h: 396 },
+];
+
+export type FitMode = 'cover' | 'contain';
+
+export interface DrawRect {
+  sx: number; sy: number; sw: number; sh: number; // source crop
+  dx: number; dy: number; dw: number; dh: number; // destination box
+}
+
+/**
+ * Compute source-crop and destination-draw rectangles to fit a source image
+ * into a target size. `cover` crops to fill (centered); `contain` letterboxes
+ * the whole image (centered).
+ */
+export function fitRect(srcW: number, srcH: number, dstW: number, dstH: number, mode: FitMode): DrawRect {
+  const sAspect = srcW / srcH;
+  const dAspect = dstW / dstH;
+
+  if (mode === 'cover') {
+    let sw = srcW, sh = srcH;
+    if (sAspect > dAspect) sw = srcH * dAspect; // too wide → crop sides
+    else sh = srcW / dAspect;                    // too tall → crop top/bottom
+    return { sx: (srcW - sw) / 2, sy: (srcH - sh) / 2, sw, sh, dx: 0, dy: 0, dw: dstW, dh: dstH };
+  }
+
+  // contain
+  let dw = dstW, dh = dstH;
+  if (sAspect > dAspect) dh = dstW / sAspect; // fit width, letterbox top/bottom
+  else dw = dstH * sAspect;                   // fit height, letterbox sides
+  return { sx: 0, sy: 0, sw: srcW, sh: srcH, dx: (dstW - dw) / 2, dy: (dstH - dh) / 2, dw, dh };
+}
diff --git a/src/tools/pdf/layout.lib.test.ts b/src/tools/pdf/layout.lib.test.ts
index 37daa36..d2a1b10 100644
--- a/src/tools/pdf/layout.lib.test.ts
+++ b/src/tools/pdf/layout.lib.test.ts
@@ -1,5 +1,13 @@
 import { describe, it, expect } from 'vitest';
-import { pageNumberXY, placementToPdfRect, textPlacementToPdf } from './layout.lib';
+import { pageNumberXY, placementToPdfRect, textPlacementToPdf, formatPageLabel } from './layout.lib';
+
+describe('formatPageLabel', () => {
+  it('substitutes {n} and {total}', () => {
+    expect(formatPageLabel('{n}', 3, 10)).toBe('3');
+    expect(formatPageLabel('Page {n} of {total}', 3, 10)).toBe('Page 3 of 10');
+    expect(formatPageLabel('{n} / {total}', 1, 5)).toBe('1 / 5');
+  });
+});
 
 describe('pageNumberXY', () => {
   it('places bottom-center', () => {
diff --git a/src/tools/pdf/layout.lib.ts b/src/tools/pdf/layout.lib.ts
index bbba3d5..c4f8f09 100644
--- a/src/tools/pdf/layout.lib.ts
+++ b/src/tools/pdf/layout.lib.ts
@@ -44,6 +44,11 @@ export interface SignPlacement {
   wRatio: number;
 }
 
+/** Fill a page-number template, e.g. "Page {n} of {total}" → "Page 3 of 10". */
+export function formatPageLabel(template: string, n: number, total: number): string {
+  return template.replace(/\{n\}/g, String(n)).replace(/\{total\}/g, String(total));
+}
+
 /** A line of typed text placed on a page (top-left origin, page-relative ratios). */
 export interface TextPlacement {
   pageIndex: number;
diff --git a/src/tools/pdf/pdf.lib.ts b/src/tools/pdf/pdf.lib.ts
index 5a2c41d..bfffd8c 100644
--- a/src/tools/pdf/pdf.lib.ts
+++ b/src/tools/pdf/pdf.lib.ts
@@ -1,5 +1,5 @@
 import { PDFDocument, StandardFonts, degrees, rgb } from 'pdf-lib';
-import { pageNumberXY, placementToPdfRect, textPlacementToPdf, type PageNumberOptions, type SignPlacement, type TextPlacement } from './layout.lib';
+import { pageNumberXY, placementToPdfRect, textPlacementToPdf, formatPageLabel, type PageNumberOptions, type PageNumberPosition, type SignPlacement, type TextPlacement } from './layout.lib';
 
 // Loading/parsing existing PDFs is handled by the mupdf engine (in a worker) —
 // it parses the wide range of real-world PDFs that pdf-lib's parser rejects.
@@ -244,6 +244,34 @@ export async function fillPdfText(
   return toBlob(await out.save());
 }
 
+export interface PageNumberFormat {
+  position: PageNumberPosition;
+  startAt: number;
+  fontSize: number;
+  margin: number;
+  /** Template with {n} and {total}, e.g. "{n}" or "Page {n} of {total}". */
+  template: string;
+}
+
+/** Stamp page numbers onto every page using the given format. */
+export async function addPageNumbers(file: File, fmt: PageNumberFormat): Promise<Blob> {
+  const src = await loadViaMupdf(file);
+  const out = await PDFDocument.create();
+  const pages = await out.copyPages(src, src.getPageIndices());
+  pages.forEach(page => out.addPage(page));
+
+  const font = await out.embedFont(StandardFonts.Helvetica);
+  const total = out.getPageCount();
+  out.getPages().forEach((page, i) => {
+    const { width, height } = page.getSize();
+    const label = formatPageLabel(fmt.template, fmt.startAt + i, total);
+    const textWidth = font.widthOfTextAtSize(label, fmt.fontSize);
+    const { x, y } = pageNumberXY(fmt.position, width, height, textWidth, fmt.fontSize, fmt.margin);
+    page.drawText(label, { x, y, size: fmt.fontSize, font, color: rgb(0, 0, 0) });
+  });
+  return toBlob(await out.save());
+}
+
 /** Build a PDF from images (one image per page, page sized to the image). */
 export async function imagesToPdf(images: File[]): Promise<Blob> {
   const out = await PDFDocument.create();