From 70c47f4855a22ec4babb209add9842ccef47f18f Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 14 Aug 2026 10:11:18 +0700
Subject: [PATCH 1/3] feat(dev): add Word Counter, Case Converter, and Text
 Cleanup

A basic text toolkit sharing one pure lib: live word/character/sentence/
reading-time counts; case conversion (UPPER/lower/Title/Sentence/camel/
Pascal/snake/kebab/CONSTANT); and text cleanup (trim, collapse spaces,
remove blank lines/line breaks, strip HTML, remove accents, dedupe, sort).
EN + ID SEO with how-to for each.
---
 .../plans/2026-08-14-text-toolkit.md          | 21 ++++
 src/islands/dev/CaseConverter.tsx             | 56 +++++++++++
 src/islands/dev/TextCleanup.tsx               | 74 ++++++++++++++
 src/islands/dev/WordCounter.tsx               | 67 +++++++++++++
 src/registry/tool-seo.ts                      | 98 +++++++++++++++++++
 src/registry/tools.ts                         | 35 ++++++-
 src/tools/dev/text.lib.test.ts                | 56 +++++++++++
 src/tools/dev/text.lib.ts                     | 93 ++++++++++++++++++
 8 files changed, 499 insertions(+), 1 deletion(-)
 create mode 100644 docs/superpowers/plans/2026-08-14-text-toolkit.md
 create mode 100644 src/islands/dev/CaseConverter.tsx
 create mode 100644 src/islands/dev/TextCleanup.tsx
 create mode 100644 src/islands/dev/WordCounter.tsx
 create mode 100644 src/tools/dev/text.lib.test.ts
 create mode 100644 src/tools/dev/text.lib.ts

diff --git a/docs/superpowers/plans/2026-08-14-text-toolkit.md b/docs/superpowers/plans/2026-08-14-text-toolkit.md
new file mode 100644
index 0000000..bd3b7e9
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-14-text-toolkit.md
@@ -0,0 +1,21 @@
+# Basic Text Toolkit — Plan
+
+**Date:** 2026-08-14 · Category: Dev · Three focused tools sharing one lib.
+
+Rationale: separate keyword-targeted pages ("word counter" alone is millions of searches/mo) beat one combined page that can only rank for one term.
+
+## Shared lib `src/tools/dev/text.lib.ts` (pure, unit-tested)
+- `countText(text): TextStats` — characters, charactersNoSpaces, words, sentences, paragraphs, lines, readingMinutes (≈200 wpm).
+- Case fns + `CASES` list: upper, lower, Title, Sentence, camel, Pascal, snake, kebab, CONSTANT (tokenizer respects camelCase + separators).
+- Cleanup fns + `CLEANUP_OPS` + `cleanup(text, keys)`: trimLines, collapseSpaces, removeBlankLines, removeLineBreaks, stripHtml, removeAccents (NFD + strip ̀–ͯ), dedupeLines, sortLines.
+
+## Tools (islands, thin)
+- `word-counter` (icon Baseline) → `WordCounter.tsx`: live stats grid + textarea.
+- `case-converter` (icon CaseSensitive) → `CaseConverter.tsx`: input → case buttons → output + copy.
+- `text-cleanup` (icon Brush) → `TextCleanup.tsx`: op checkboxes → live cleaned output + copy/download.
+
+## Registry + SEO
+3 ToolDefs in `tools.ts`; EN + ID SEO for each in `tool-seo.ts` (title/description/intro/howTo/faqs). Bahasa "tool" loanword.
+
+## DoD
+lib unit-tested (20 cases) · EN+ID SEO · vitest+lint+build green · 6 new routes built · develop→main→live verified.
diff --git a/src/islands/dev/CaseConverter.tsx b/src/islands/dev/CaseConverter.tsx
new file mode 100644
index 0000000..eb8c0ac
--- /dev/null
+++ b/src/islands/dev/CaseConverter.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { TextArea } from '@/components/ui/TextArea';
+import { Button } from '@/components/ui/Button';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { CASES } from '@/tools/dev/text.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, { intro: string; input: string; output: string; placeholder: string }> = {
+  en: {
+    intro: 'Convert text between UPPERCASE, lowercase, Title Case, Sentence case, camelCase, snake_case, kebab-case and more. Runs in your browser.',
+    input: 'Text',
+    output: 'Result',
+    placeholder: 'Type or paste your text…',
+  },
+  id: {
+    intro: 'Ubah teks antara UPPERCASE, lowercase, Title Case, Sentence case, camelCase, snake_case, kebab-case, dan lainnya. Berjalan di browser Anda.',
+    input: 'Teks',
+    output: 'Hasil',
+    placeholder: 'Ketik atau tempel teks Anda…',
+  },
+};
+
+export default function CaseConverter({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [text, setText] = useState('');
+  const [output, setOutput] = useState('');
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="space-y-1">
+        <span className="block text-sm font-semibold">{t.input}</span>
+        <TextArea value={text} onChange={e => setText(e.target.value)} rows={6} placeholder={t.placeholder} monospace={false} />
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {CASES.map(c => (
+          <Button key={c.key} variant="secondary" onClick={() => setOutput(c.fn(text))} disabled={!text}>
+            {c.label}
+          </Button>
+        ))}
+      </div>
+
+      {output && (
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold">{t.output}</span>
+            <CopyButton value={output} />
+          </div>
+          <TextArea value={output} readOnly rows={6} monospace={false} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/dev/TextCleanup.tsx b/src/islands/dev/TextCleanup.tsx
new file mode 100644
index 0000000..8ebf03a
--- /dev/null
+++ b/src/islands/dev/TextCleanup.tsx
@@ -0,0 +1,74 @@
+import { useMemo, useState } from 'react';
+import { TextArea } from '@/components/ui/TextArea';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { DownloadTextButton } from '@/components/ui/DownloadTextButton';
+import { CLEANUP_OPS, cleanup } from '@/tools/dev/text.lib';
+import type { Lang } from '@/i18n/config';
+
+const OP_LABELS: Record<Lang, Record<string, string>> = {
+  en: Object.fromEntries(CLEANUP_OPS.map(o => [o.key, o.label])),
+  id: {
+    trimLines: 'Rapikan tiap baris', collapseSpaces: 'Gabungkan spasi berulang',
+    removeBlankLines: 'Hapus baris kosong', removeLineBreaks: 'Hapus jeda baris (gabung)',
+    stripHtml: 'Hapus tag HTML', removeAccents: 'Hapus aksen/diakritik',
+    dedupeLines: 'Hapus baris duplikat', sortLines: 'Urutkan baris A→Z',
+  },
+};
+
+const TR: Record<Lang, { intro: string; input: string; output: string; ops: string; placeholder: string }> = {
+  en: {
+    intro: 'Clean up messy text — trim whitespace, collapse spaces, remove blank lines or line breaks, strip HTML, remove accents, dedupe and sort lines. Runs in your browser.',
+    input: 'Text', output: 'Cleaned', ops: 'Operations', placeholder: 'Paste messy text…',
+  },
+  id: {
+    intro: 'Bersihkan teks berantakan — rapikan spasi, gabungkan spasi, hapus baris kosong atau jeda baris, hapus HTML, hapus aksen, hapus duplikat, dan urutkan baris. Berjalan di browser Anda.',
+    input: 'Teks', output: 'Hasil bersih', ops: 'Operasi', placeholder: 'Tempel teks berantakan…',
+  },
+};
+
+export default function TextCleanup({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [text, setText] = useState('');
+  const [ops, setOps] = useState<string[]>(['trimLines', 'collapseSpaces', 'removeBlankLines']);
+
+  const output = useMemo(() => cleanup(text, ops), [text, ops]);
+  const labels = OP_LABELS[lang] ?? OP_LABELS.en;
+
+  const toggle = (key: string) =>
+    setOps(prev => (prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]));
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="space-y-1">
+        <span className="block text-sm font-semibold">{t.ops}</span>
+        <div className="grid grid-cols-1 gap-1 sm:grid-cols-2">
+          {CLEANUP_OPS.map(o => (
+            <label key={o.key} className="flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={ops.includes(o.key)} onChange={() => toggle(o.key)} className="h-4 w-4 accent-accent" />
+              {labels[o.key]}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid gap-3 lg:grid-cols-2">
+        <div className="space-y-1">
+          <span className="block text-sm font-semibold">{t.input}</span>
+          <TextArea value={text} onChange={e => setText(e.target.value)} rows={12} placeholder={t.placeholder} monospace={false} />
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold">{t.output}</span>
+            <div className="flex gap-2">
+              <DownloadTextButton text={output} filename="cleaned.txt" />
+              <CopyButton value={output} />
+            </div>
+          </div>
+          <TextArea value={output} readOnly rows={12} monospace={false} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/islands/dev/WordCounter.tsx b/src/islands/dev/WordCounter.tsx
new file mode 100644
index 0000000..0bf8237
--- /dev/null
+++ b/src/islands/dev/WordCounter.tsx
@@ -0,0 +1,67 @@
+import { useMemo, useState } from 'react';
+import { TextArea } from '@/components/ui/TextArea';
+import { countText } from '@/tools/dev/text.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string;
+  placeholder: string;
+  words: string;
+  characters: string;
+  charactersNoSpaces: string;
+  sentences: string;
+  paragraphs: string;
+  lines: string;
+  reading: string;
+  min: string;
+}> = {
+  en: {
+    intro: 'Count words, characters, sentences, paragraphs and reading time as you type. Everything runs in your browser — nothing is uploaded.',
+    placeholder: 'Type or paste your text…',
+    words: 'Words', characters: 'Characters', charactersNoSpaces: 'Characters (no spaces)',
+    sentences: 'Sentences', paragraphs: 'Paragraphs', lines: 'Lines', reading: 'Reading time', min: 'min',
+  },
+  id: {
+    intro: 'Hitung kata, karakter, kalimat, paragraf, dan waktu baca saat Anda mengetik. Semuanya berjalan di browser Anda — tidak ada yang diunggah.',
+    placeholder: 'Ketik atau tempel teks Anda…',
+    words: 'Kata', characters: 'Karakter', charactersNoSpaces: 'Karakter (tanpa spasi)',
+    sentences: 'Kalimat', paragraphs: 'Paragraf', lines: 'Baris', reading: 'Waktu baca', min: 'mnt',
+  },
+};
+
+export default function WordCounter({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [text, setText] = useState('');
+  const stats = useMemo(() => countText(text), [text]);
+
+  const readMin = stats.readingMinutes < 1 && stats.words > 0
+    ? '< 1'
+    : String(Math.round(stats.readingMinutes));
+
+  const cards = [
+    { label: t.words, value: stats.words.toLocaleString() },
+    { label: t.characters, value: stats.characters.toLocaleString() },
+    { label: t.charactersNoSpaces, value: stats.charactersNoSpaces.toLocaleString() },
+    { label: t.sentences, value: stats.sentences.toLocaleString() },
+    { label: t.paragraphs, value: stats.paragraphs.toLocaleString() },
+    { label: t.lines, value: stats.lines.toLocaleString() },
+    { label: t.reading, value: `${readMin} ${t.min}` },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-7">
+        {cards.map(c => (
+          <div key={c.label} className="border-2 border-border bg-muted p-3 text-center">
+            <div className="text-2xl font-bold tabular-nums">{c.value}</div>
+            <div className="text-xs text-muted-foreground">{c.label}</div>
+          </div>
+        ))}
+      </div>
+
+      <TextArea value={text} onChange={e => setText(e.target.value)} rows={12} placeholder={t.placeholder} monospace={false} />
+    </div>
+  );
+}
diff --git a/src/registry/tool-seo.ts b/src/registry/tool-seo.ts
index e5c2d6e..bf83152 100644
--- a/src/registry/tool-seo.ts
+++ b/src/registry/tool-seo.ts
@@ -247,6 +247,55 @@ const en: Record<string, ToolSeoContent> = {
       { q: 'Is this official tax advice?', a: 'No. It is a calculation helper. Always confirm the correct rates and articles for your situation with a tax professional.' },
     ],
   },
+  'word-counter': {
+    title: 'Free Word Counter — Count Words, Characters & Reading Time',
+    description: 'A free online word counter: count words, characters (with and without spaces), sentences, paragraphs, lines and reading time as you type. Runs in your browser — nothing is uploaded.',
+    intro: 'This free word counter counts words, characters (with and without spaces), sentences, paragraphs, lines and estimated reading time live as you type or paste. It runs entirely in your browser, so your text is never uploaded — safe for drafts, essays and confidential writing.',
+    howTo: [
+      'Type or paste your text into the box.',
+      'Watch the word and character counts update instantly.',
+      'Check sentences, paragraphs, lines and reading time.',
+    ],
+    faqs: [
+      { q: 'Is my text uploaded to a server?', a: 'No. All counting happens locally in your browser, so your text never leaves your device.' },
+      { q: 'How is reading time estimated?', a: 'Reading time is based on about 200 words per minute, a common average for silent reading.' },
+      { q: 'How are words counted?', a: 'Words are runs of non-whitespace characters separated by spaces, tabs or line breaks — the same way most editors count them.' },
+      { q: 'Does it work offline?', a: 'Yes. GoodWebTools is a PWA, so the counter keeps working with no internet connection.' },
+    ],
+  },
+  'case-converter': {
+    title: 'Free Case Converter — UPPERCASE, lowercase, Title & camelCase',
+    description: 'Convert text between UPPERCASE, lowercase, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case and CONSTANT_CASE. Free and in your browser.',
+    intro: 'This free case converter changes your text between UPPERCASE, lowercase, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case and CONSTANT_CASE. Everything runs in your browser, so your text is never uploaded.',
+    howTo: [
+      'Type or paste your text.',
+      'Click the case you want — UPPER, lower, Title, camel, snake, kebab and more.',
+      'Copy the converted result.',
+    ],
+    faqs: [
+      { q: 'Is my text uploaded?', a: 'No. The conversion runs entirely in your browser; nothing is sent to a server.' },
+      { q: 'What is the difference between camelCase and PascalCase?', a: 'Both join words with no spaces; camelCase starts lowercase (myVariableName) while PascalCase capitalises the first letter too (MyVariableName).' },
+      { q: 'Does snake_case handle spaces and hyphens?', a: 'Yes. The converter splits your text into words on spaces, hyphens, underscores and camelCase boundaries before rejoining in the chosen style.' },
+      { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps working with no connection once loaded.' },
+    ],
+  },
+  'text-cleanup': {
+    title: 'Free Text Cleaner — Remove Line Breaks, Blank Lines & HTML',
+    description: 'Clean up messy text online: trim whitespace, collapse spaces, remove blank lines or line breaks, strip HTML, remove accents, and dedupe or sort lines. Runs in your browser.',
+    intro: 'This free text cleaner tidies messy text: trim each line, collapse repeated spaces, remove blank lines or line breaks, strip HTML tags, remove accents, and remove duplicate or sort lines. Pick the operations you want and it runs entirely in your browser.',
+    howTo: [
+      'Paste your messy text into the box.',
+      'Tick the cleanup operations you want to apply.',
+      'The cleaned text updates live on the right.',
+      'Copy or download the result.',
+    ],
+    faqs: [
+      { q: 'Is my text uploaded?', a: 'No. Every cleanup operation runs locally in your browser; your text never leaves your device.' },
+      { q: 'Can I combine several operations?', a: 'Yes. Tick as many as you like — they are applied in order, so you can trim, collapse spaces and remove blank lines in one pass.' },
+      { q: 'What does "strip HTML" do?', a: 'It removes HTML tags like <b> or <p>, leaving just the readable text.' },
+      { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps working with no connection once loaded.' },
+    ],
+  },
   'compare-lists': {
     title: 'Compare Two Lists — Merge, Dedupe & Diff Lines',
     description: 'Compare two lists of lines online: merge and remove duplicates, subtract one list from another, or find common lines. Free, private and instant — nothing is uploaded.',
@@ -1996,6 +2045,55 @@ const id: Record<string, ToolSeoContent> = {
       { q: 'Apakah ini nasihat pajak resmi?', a: 'Bukan. Ini tool bantu hitung. Selalu konfirmasi tarif dan pasal yang benar untuk situasi Anda dengan profesional pajak.' },
     ],
   },
+  'word-counter': {
+    title: 'Penghitung Kata Gratis — Hitung Kata, Karakter & Waktu Baca',
+    description: 'Penghitung kata online gratis: hitung kata, karakter (dengan dan tanpa spasi), kalimat, paragraf, baris, dan waktu baca saat Anda mengetik. Berjalan di browser Anda — tidak ada yang diunggah.',
+    intro: 'Tool penghitung kata gratis ini menghitung kata, karakter (dengan dan tanpa spasi), kalimat, paragraf, baris, dan perkiraan waktu baca secara langsung saat Anda mengetik atau menempel. Berjalan sepenuhnya di browser Anda, jadi teks tidak pernah diunggah — aman untuk draf, esai, dan tulisan rahasia.',
+    howTo: [
+      'Ketik atau tempel teks Anda ke dalam kotak.',
+      'Lihat jumlah kata dan karakter diperbarui seketika.',
+      'Periksa kalimat, paragraf, baris, dan waktu baca.',
+    ],
+    faqs: [
+      { q: 'Apakah teks saya diunggah ke server?', a: 'Tidak. Semua penghitungan terjadi lokal di browser Anda, jadi teks tidak pernah meninggalkan perangkat.' },
+      { q: 'Bagaimana waktu baca diperkirakan?', a: 'Waktu baca didasarkan pada sekitar 200 kata per menit, rata-rata umum untuk membaca dalam hati.' },
+      { q: 'Bagaimana kata dihitung?', a: 'Kata adalah rangkaian karakter non-spasi yang dipisahkan oleh spasi, tab, atau jeda baris — sama seperti kebanyakan editor menghitungnya.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. GoodWebTools adalah PWA, jadi penghitung tetap berjalan tanpa koneksi internet.' },
+    ],
+  },
+  'case-converter': {
+    title: 'Konverter Case Gratis — UPPERCASE, lowercase, Title & camelCase',
+    description: 'Ubah teks antara UPPERCASE, lowercase, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case, dan CONSTANT_CASE. Gratis dan di browser Anda.',
+    intro: 'Tool konverter case gratis ini mengubah teks Anda antara UPPERCASE, lowercase, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case, dan CONSTANT_CASE. Semuanya berjalan di browser Anda, jadi teks tidak pernah diunggah.',
+    howTo: [
+      'Ketik atau tempel teks Anda.',
+      'Klik case yang Anda inginkan — UPPER, lower, Title, camel, snake, kebab, dan lainnya.',
+      'Salin hasil konversinya.',
+    ],
+    faqs: [
+      { q: 'Apakah teks saya diunggah?', a: 'Tidak. Konversi berjalan sepenuhnya di browser Anda; tidak ada yang dikirim ke server.' },
+      { q: 'Apa beda camelCase dan PascalCase?', a: 'Keduanya menggabungkan kata tanpa spasi; camelCase diawali huruf kecil (myVariableName) sedangkan PascalCase juga mengapitalkan huruf pertama (MyVariableName).' },
+      { q: 'Apakah snake_case menangani spasi dan tanda hubung?', a: 'Ya. Konverter memecah teks menjadi kata pada spasi, tanda hubung, garis bawah, dan batas camelCase sebelum menggabungkannya dalam gaya yang dipilih.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap berjalan tanpa koneksi setelah dimuat.' },
+    ],
+  },
+  'text-cleanup': {
+    title: 'Pembersih Teks Gratis — Hapus Jeda Baris, Baris Kosong & HTML',
+    description: 'Bersihkan teks berantakan online: rapikan spasi, gabungkan spasi, hapus baris kosong atau jeda baris, hapus HTML, hapus aksen, serta hapus duplikat atau urutkan baris. Berjalan di browser Anda.',
+    intro: 'Tool pembersih teks gratis ini merapikan teks berantakan: rapikan tiap baris, gabungkan spasi berulang, hapus baris kosong atau jeda baris, hapus tag HTML, hapus aksen, serta hapus baris duplikat atau urutkan baris. Pilih operasi yang Anda inginkan dan semuanya berjalan di browser Anda.',
+    howTo: [
+      'Tempel teks berantakan Anda ke dalam kotak.',
+      'Centang operasi pembersihan yang ingin diterapkan.',
+      'Teks bersih diperbarui langsung di sebelah kanan.',
+      'Salin atau unduh hasilnya.',
+    ],
+    faqs: [
+      { q: 'Apakah teks saya diunggah?', a: 'Tidak. Setiap operasi pembersihan berjalan lokal di browser Anda; teks tidak pernah meninggalkan perangkat.' },
+      { q: 'Bisakah menggabungkan beberapa operasi?', a: 'Ya. Centang sebanyak yang Anda mau — diterapkan berurutan, jadi Anda bisa merapikan, menggabungkan spasi, dan menghapus baris kosong dalam satu langkah.' },
+      { q: 'Apa fungsi "hapus tag HTML"?', a: 'Menghapus tag HTML seperti <b> atau <p>, menyisakan hanya teks yang dapat dibaca.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap berjalan tanpa koneksi setelah dimuat.' },
+    ],
+  },
   'compare-lists': {
     title: 'Bandingkan Dua Daftar — Gabung, Hapus Duplikat & Diff',
     description: 'Bandingkan dua daftar baris secara online: gabung dan hapus duplikat, kurangi satu daftar dari yang lain, atau temukan baris yang sama. Gratis, privat, instan — tidak ada yang diunggah.',
diff --git a/src/registry/tools.ts b/src/registry/tools.ts
index 4f39758..d76da0f 100644
--- a/src/registry/tools.ts
+++ b/src/registry/tools.ts
@@ -1,4 +1,4 @@
-import { Hash, Braces, Binary, Link, KeyRound, Fingerprint, KeySquare, FileDiff, Table, FileText, QrCode, ScanLine, Clock, Calculator, Palette, FilePlus2, Scissors, RotateCw, FileImage, FileX, Stamp, Image, Replace, Minimize2, Maximize2, Eraser, Archive, Lock, Unlock, Crop, Droplet, PenTool, Combine, ShieldCheck, FileCode, FileCode2, FileCog, FileArchive, FolderArchive, Sparkles, ScanFace, Scaling, Aperture, Wand2, PenLine, Shapes, Film, FileVideo, Music, AudioLines, MonitorPlay, Camera, Code2, Database, Keyboard, Contrast, Eye, ScanText, Receipt, Webcam, Mic, Send, Video, Wrench, Compass, Map, Waypoints, ImageDown, ScrollText, Ghost, FileSpreadsheet, BookOpen, FileType2, FileDown, GitCompare, FileOutput, CalendarClock, ClipboardPaste, PlugZap, Regex, Contact, Wallet, Network, Subtitles, Presentation, SquareUser, WholeWord, Percent } from 'lucide-react';
+import { Hash, Braces, Binary, Link, KeyRound, Fingerprint, KeySquare, FileDiff, Table, FileText, QrCode, ScanLine, Clock, Calculator, Palette, FilePlus2, Scissors, RotateCw, FileImage, FileX, Stamp, Image, Replace, Minimize2, Maximize2, Eraser, Archive, Lock, Unlock, Crop, Droplet, PenTool, Combine, ShieldCheck, FileCode, FileCode2, FileCog, FileArchive, FolderArchive, Sparkles, ScanFace, Scaling, Aperture, Wand2, PenLine, Shapes, Film, FileVideo, Music, AudioLines, MonitorPlay, Camera, Code2, Database, Keyboard, Contrast, Eye, ScanText, Receipt, Webcam, Mic, Send, Video, Wrench, Compass, Map, Waypoints, ImageDown, ScrollText, Ghost, FileSpreadsheet, BookOpen, FileType2, FileDown, GitCompare, FileOutput, CalendarClock, ClipboardPaste, PlugZap, Regex, Contact, Wallet, Network, Subtitles, Presentation, SquareUser, WholeWord, Percent, Baseline, CaseSensitive, Brush } from 'lucide-react';
 import type { ToolDef } from '@/types/tool';
 
 export const tools: ToolDef[] = [
@@ -322,6 +322,39 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/dev/TaxCalculator'),
     status: 'beta'
   },
+  {
+    id: 'word-counter',
+    name: 'Word Counter',
+    category: 'Dev',
+    route: '/tools/word-counter',
+    keywords: ['word counter', 'character count', 'count words', 'letters', 'sentences', 'reading time', 'text'],
+    icon: Baseline,
+    summary: 'Count words, characters, sentences & reading time',
+    load: () => import('@/islands/dev/WordCounter'),
+    status: 'beta'
+  },
+  {
+    id: 'case-converter',
+    name: 'Case Converter',
+    category: 'Dev',
+    route: '/tools/case-converter',
+    keywords: ['case converter', 'uppercase', 'lowercase', 'title case', 'camelcase', 'snake_case', 'kebab-case', 'text'],
+    icon: CaseSensitive,
+    summary: 'Convert text between UPPER, lower, Title, camel, snake & kebab case',
+    load: () => import('@/islands/dev/CaseConverter'),
+    status: 'beta'
+  },
+  {
+    id: 'text-cleanup',
+    name: 'Text Cleanup',
+    category: 'Dev',
+    route: '/tools/text-cleanup',
+    keywords: ['text cleaner', 'remove line breaks', 'remove blank lines', 'trim', 'strip html', 'remove accents', 'dedupe lines', 'sort lines'],
+    icon: Brush,
+    summary: 'Clean up text — trim, strip HTML, remove line breaks, dedupe & sort',
+    load: () => import('@/islands/dev/TextCleanup'),
+    status: 'beta'
+  },
   {
     id: 'cron-expression',
     name: 'Cron Expression',
diff --git a/src/tools/dev/text.lib.test.ts b/src/tools/dev/text.lib.test.ts
new file mode 100644
index 0000000..3349853
--- /dev/null
+++ b/src/tools/dev/text.lib.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import {
+  countText, titleCase, sentenceCase, camelCase, pascalCase, snakeCase, kebabCase, constantCase,
+  trimLines, collapseSpaces, removeBlankLines, removeLineBreaks, stripHtml, removeAccents,
+  dedupeLines, sortLines, cleanup,
+} from './text.lib';
+
+describe('countText', () => {
+  it('counts an empty string as all zero', () => {
+    expect(countText('')).toMatchObject({ characters: 0, words: 0, sentences: 0, paragraphs: 0, lines: 0 });
+  });
+
+  it('counts words and characters', () => {
+    const s = countText('Hello world');
+    expect(s).toMatchObject({ characters: 11, charactersNoSpaces: 10, words: 2, sentences: 1, lines: 1 });
+  });
+
+  it('counts sentences and paragraphs', () => {
+    expect(countText('One. Two! Three?').sentences).toBe(3);
+    expect(countText('para one\n\npara two').paragraphs).toBe(2);
+    expect(countText('a\nb\nc').lines).toBe(3);
+  });
+
+  it('estimates reading time at ~200 wpm', () => {
+    expect(countText(Array(200).fill('w').join(' ')).readingMinutes).toBe(1);
+  });
+});
+
+describe('case conversion', () => {
+  it.each([
+    [titleCase, 'hELLO world', 'Hello World'],
+    [sentenceCase, 'hello world. bye now.', 'Hello world. Bye now.'],
+    [camelCase, 'hello world-foo_bar', 'helloWorldFooBar'],
+    [pascalCase, 'hello world', 'HelloWorld'],
+    [snakeCase, 'helloWorld foo', 'hello_world_foo'],
+    [kebabCase, 'Hello World', 'hello-world'],
+    [constantCase, 'hello world', 'HELLO_WORLD'],
+  ])('%o converts correctly', (fn, input, expected) => {
+    expect((fn as (s: string) => string)(input)).toBe(expected);
+  });
+});
+
+describe('cleanup ops', () => {
+  it('trims lines', () => expect(trimLines('  a  \n  b ')).toBe('a\nb'));
+  it('collapses spaces', () => expect(collapseSpaces('a    b')).toBe('a b'));
+  it('removes blank lines', () => expect(removeBlankLines('a\n\n\nb')).toBe('a\nb'));
+  it('removes line breaks', () => expect(removeLineBreaks('a\nb\nc')).toBe('a b c'));
+  it('strips HTML', () => expect(stripHtml('<p>hi <b>there</b></p>')).toBe('hi there'));
+  it('removes accents', () => expect(removeAccents('café résumé')).toBe('cafe resume'));
+  it('dedupes lines preserving order', () => expect(dedupeLines('a\nb\na\nc\nb')).toBe('a\nb\nc'));
+  it('sorts lines', () => expect(sortLines('c\na\nb')).toBe('a\nb\nc'));
+
+  it('applies ops in order via cleanup()', () => {
+    expect(cleanup('  a  \n\n  a  ', ['trimLines', 'removeBlankLines', 'dedupeLines'])).toBe('a');
+  });
+});
diff --git a/src/tools/dev/text.lib.ts b/src/tools/dev/text.lib.ts
new file mode 100644
index 0000000..6ffcfe9
--- /dev/null
+++ b/src/tools/dev/text.lib.ts
@@ -0,0 +1,93 @@
+/**
+ * Basic text toolkit — counting, case conversion and cleanup. All pure.
+ */
+
+export interface TextStats {
+  characters: number;
+  charactersNoSpaces: number;
+  words: number;
+  sentences: number;
+  paragraphs: number;
+  lines: number;
+  /** Estimated reading time in minutes (≈200 wpm). */
+  readingMinutes: number;
+}
+
+/** Count words, characters, sentences, paragraphs, lines and reading time. */
+export function countText(text: string): TextStats {
+  const trimmed = text.trim();
+  const words = trimmed ? trimmed.split(/\s+/).length : 0;
+  return {
+    characters: text.length,
+    charactersNoSpaces: text.replace(/\s/g, '').length,
+    words,
+    sentences: (text.match(/[^.!?…]+[.!?…]+/g) || []).length || (trimmed ? 1 : 0),
+    paragraphs: text.split(/\n\s*\n/).filter(p => p.trim()).length,
+    lines: text === '' ? 0 : text.split('\n').length,
+    readingMinutes: words / 200,
+  };
+}
+
+// --- Case conversion ----------------------------------------------------------
+
+/** Split into word tokens, respecting camelCase and separators. */
+function tokens(s: string): string[] {
+  return s.match(/[A-Z]{2,}(?=[A-Z][a-z])|[A-Z]?[a-z]+|[A-Z]+|[0-9]+/g) ?? [];
+}
+
+const cap = (w: string) => (w ? w[0].toUpperCase() + w.slice(1).toLowerCase() : w);
+
+export const toUpper = (s: string) => s.toUpperCase();
+export const toLower = (s: string) => s.toLowerCase();
+export const titleCase = (s: string) => s.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());
+export const sentenceCase = (s: string) =>
+  s.toLowerCase().replace(/(^\s*\p{L}|[.!?]\s+\p{L})/gu, c => c.toUpperCase());
+export const camelCase = (s: string) => tokens(s).map((w, i) => (i === 0 ? w.toLowerCase() : cap(w))).join('');
+export const pascalCase = (s: string) => tokens(s).map(cap).join('');
+export const snakeCase = (s: string) => tokens(s).map(w => w.toLowerCase()).join('_');
+export const kebabCase = (s: string) => tokens(s).map(w => w.toLowerCase()).join('-');
+export const constantCase = (s: string) => tokens(s).map(w => w.toUpperCase()).join('_');
+
+export const CASES: { key: string; label: string; fn: (s: string) => string }[] = [
+  { key: 'upper', label: 'UPPERCASE', fn: toUpper },
+  { key: 'lower', label: 'lowercase', fn: toLower },
+  { key: 'title', label: 'Title Case', fn: titleCase },
+  { key: 'sentence', label: 'Sentence case', fn: sentenceCase },
+  { key: 'camel', label: 'camelCase', fn: camelCase },
+  { key: 'pascal', label: 'PascalCase', fn: pascalCase },
+  { key: 'snake', label: 'snake_case', fn: snakeCase },
+  { key: 'kebab', label: 'kebab-case', fn: kebabCase },
+  { key: 'constant', label: 'CONSTANT_CASE', fn: constantCase },
+];
+
+// --- Cleanup ------------------------------------------------------------------
+
+export const trimLines = (s: string) => s.split('\n').map(l => l.trim()).join('\n');
+export const collapseSpaces = (s: string) => s.replace(/[ \t]{2,}/g, ' ');
+export const removeBlankLines = (s: string) => s.split('\n').filter(l => l.trim() !== '').join('\n');
+export const removeLineBreaks = (s: string) => s.replace(/\s*\n\s*/g, ' ').trim();
+export const stripHtml = (s: string) => s.replace(/<[^>]*>/g, '');
+export const removeAccents = (s: string) => s.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+export const dedupeLines = (s: string) => {
+  const seen = new Set<string>();
+  return s.split('\n').filter(l => (seen.has(l) ? false : (seen.add(l), true))).join('\n');
+};
+export const sortLines = (s: string) => s.split('\n').sort((a, b) => a.localeCompare(b)).join('\n');
+
+export const CLEANUP_OPS: { key: string; label: string; fn: (s: string) => string }[] = [
+  { key: 'trimLines', label: 'Trim each line', fn: trimLines },
+  { key: 'collapseSpaces', label: 'Collapse repeated spaces', fn: collapseSpaces },
+  { key: 'removeBlankLines', label: 'Remove blank lines', fn: removeBlankLines },
+  { key: 'removeLineBreaks', label: 'Remove line breaks (join)', fn: removeLineBreaks },
+  { key: 'stripHtml', label: 'Strip HTML tags', fn: stripHtml },
+  { key: 'removeAccents', label: 'Remove accents/diacritics', fn: removeAccents },
+  { key: 'dedupeLines', label: 'Remove duplicate lines', fn: dedupeLines },
+  { key: 'sortLines', label: 'Sort lines A→Z', fn: sortLines },
+];
+
+/** Apply the given cleanup op keys in order. */
+export function cleanup(text: string, opKeys: string[]): string {
+  let out = text;
+  for (const op of CLEANUP_OPS) if (opKeys.includes(op.key)) out = op.fn(out);
+  return out;
+}

From 5abb7fe09cb73740d0983b4b60a975f9ee257175 Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 14 Aug 2026 10:25:32 +0700
Subject: [PATCH 2/3] feat(pdf,image): add Sign PDF, Organize PDF, and Favicon
 Generator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sign PDF: draw or upload a signature and drag it onto a PDF page
  (multi-page), then download the signed file — via pdf-lib embedPng.
- Organize PDF: drag-to-reorder and delete page thumbnails, optional page
  numbers — rebuilds page order with pdf-lib copyPages.
- Favicon Generator: one image → favicon.ico + PNGs + Apple touch icon +
  web manifest + HTML snippet, downloaded as a ZIP.

Pure geometry/manifest helpers unit-tested; EN + ID SEO with how-to for each.
---
 .../plans/2026-08-14-pdf-favicon-sign.md      |  20 ++
 src/islands/image/FaviconGenerator.tsx        | 115 ++++++++
 src/islands/pdf/PdfOrganize.tsx               | 189 +++++++++++++
 src/islands/pdf/PdfSign.tsx                   | 263 ++++++++++++++++++
 src/registry/tool-seo.ts                      | 102 +++++++
 src/registry/tools.ts                         |  35 ++-
 src/tools/image/favicon.lib.test.ts           |  26 ++
 src/tools/image/favicon.lib.ts                |  72 +++++
 src/tools/pdf/layout.lib.test.ts              |  32 +++
 src/tools/pdf/layout.lib.ts                   |  62 +++++
 src/tools/pdf/pdf.lib.ts                      |  51 ++++
 11 files changed, 966 insertions(+), 1 deletion(-)
 create mode 100644 docs/superpowers/plans/2026-08-14-pdf-favicon-sign.md
 create mode 100644 src/islands/image/FaviconGenerator.tsx
 create mode 100644 src/islands/pdf/PdfOrganize.tsx
 create mode 100644 src/islands/pdf/PdfSign.tsx
 create mode 100644 src/tools/image/favicon.lib.test.ts
 create mode 100644 src/tools/image/favicon.lib.ts
 create mode 100644 src/tools/pdf/layout.lib.test.ts
 create mode 100644 src/tools/pdf/layout.lib.ts

diff --git a/docs/superpowers/plans/2026-08-14-pdf-favicon-sign.md b/docs/superpowers/plans/2026-08-14-pdf-favicon-sign.md
new file mode 100644
index 0000000..6ad1d7e
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-14-pdf-favicon-sign.md
@@ -0,0 +1,20 @@
+# Sign PDF + Organize PDF + Favicon Generator — Plan
+
+**Date:** 2026-08-14. One branch/PR/promotion.
+
+## Favicon Generator (Image, icon AppWindow, `favicon-generator`)
+Lib `src/tools/image/favicon.lib.ts`: `buildManifest`/`htmlSnippet` (pure, tested); `generateFavicons(file, name)` → ICO (`imageToIco`) + PNGs (`processImage` per size) + manifest + snippet. Island → Dropzone → preview grid → `createZip` + download.
+
+## Organize PDF (PDF, icon ListOrdered, `pdf-organize`)
+Pure `src/tools/pdf/layout.lib.ts`: `pageNumberXY` (tested). `pdf.lib.ts` gains `organizePdf(file, order, pageNumbers?)` — mupdf-normalize → copy pages in `order` into fresh doc → optional `drawText` page numbers. Island: `openPdfRenderer` thumbnails, native HTML5 drag reorder + delete, page-number controls.
+
+## Sign PDF (PDF, icon FileSignature, `pdf-sign`)
+Pure `layout.lib.ts`: `placementToPdfRect` (top-left ratio → bottom-left rect, y-flip; tested). `pdf.lib.ts` gains `signPdf(file, pngBytes, placements)` — embedPng + drawImage per placement. Island: `signature_pad` draw or PNG upload; drag-to-place over `openPdfRenderer` page; multi-page placements → `signPdf`.
+
+## Notes
+- pdf.lib gotcha honored: copy pages into a fresh `PDFDocument.create()` (never draw on the mupdf-loaded doc).
+- No new DnD dep — native HTML5 drag for reorder.
+- EN + ID SEO for all three (Sign PDF FAQ flags e-signature legality caveat).
+
+## DoD
+libs unit-tested · EN+ID SEO · vitest+lint+build green · 6 new routes · develop→main→live verified.
diff --git a/src/islands/image/FaviconGenerator.tsx b/src/islands/image/FaviconGenerator.tsx
new file mode 100644
index 0000000..ec646ad
--- /dev/null
+++ b/src/islands/image/FaviconGenerator.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { Button } from '@/components/ui/Button';
+import { Alert } from '@/components/ui/Alert';
+import { usePasteImage } from '@/hooks/usePasteImage';
+import { generateFavicons, type FaviconFile } from '@/tools/image/favicon.lib';
+import { createZip } from '@/tools/files/zip.lib';
+import { downloadService } from '@/services/download';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string;
+  drop: string;
+  dropSub: string;
+  working: string;
+  failed: string;
+  result: string;
+  downloadZip: string;
+}> = {
+  en: {
+    intro: 'Turn any image (ideally square, 512×512 or larger) into a complete favicon set — favicon.ico, PNGs, an Apple touch icon and a web manifest. Everything runs in your browser.',
+    drop: 'Drop an image or click to browse',
+    dropSub: 'A square PNG works best · or paste (⌘V)',
+    working: 'Generating favicons…',
+    failed: 'Could not process that image.',
+    result: 'Favicon set',
+    downloadZip: 'Download all (ZIP)',
+  },
+  id: {
+    intro: 'Ubah gambar apa pun (idealnya persegi, 512×512 atau lebih) menjadi set favicon lengkap — favicon.ico, PNG, Apple touch icon, dan web manifest. Semuanya berjalan di browser Anda.',
+    drop: 'Letakkan gambar atau klik untuk memilih',
+    dropSub: 'PNG persegi paling bagus · atau tempel (⌘V)',
+    working: 'Membuat favicon…',
+    failed: 'Tidak dapat memproses gambar itu.',
+    result: 'Set favicon',
+    downloadZip: 'Unduh semua (ZIP)',
+  },
+};
+
+export default function FaviconGenerator({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [files, setFiles] = useState<FaviconFile[]>([]);
+  const [urls, setUrls] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => () => { Object.values(urls).forEach(URL.revokeObjectURL); }, [urls]);
+
+  const onDrop = async (dropped: File[]) => {
+    const file = dropped.find(f => f.type.startsWith('image/'));
+    if (!file) return;
+    setBusy(true);
+    setError('');
+    Object.values(urls).forEach(URL.revokeObjectURL);
+    setFiles([]);
+    setUrls({});
+    try {
+      const out = await generateFavicons(file, 'My Site');
+      const u: Record<string, string> = {};
+      for (const f of out) if (f.size) u[f.name] = URL.createObjectURL(f.blob);
+      setFiles(out);
+      setUrls(u);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  usePasteImage(f => onDrop([f]));
+
+  const downloadZip = async () => {
+    const entries = await Promise.all(
+      files.map(async f => ({ name: f.name, data: new Uint8Array(await f.blob.arrayBuffer()) })),
+    );
+    await downloadService.download(new Blob([createZip(entries)], { type: 'application/zip' }), 'favicons.zip');
+  };
+
+  const previews = files.filter(f => f.size);
+
+  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>
+
+      {busy && <p className="text-sm text-muted-foreground">{t.working}</p>}
+      {error && <Alert variant="error">{error}</Alert>}
+
+      {previews.length > 0 && (
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <span className="text-sm font-semibold">{t.result}</span>
+            <Button onClick={downloadZip}>{t.downloadZip}</Button>
+          </div>
+          <div className="flex flex-wrap items-end gap-4">
+            {previews.map(f => (
+              <div key={f.name} className="flex flex-col items-center gap-1">
+                <div className="flex h-24 w-24 items-center justify-center border-2 border-border bg-[repeating-conic-gradient(#e5e5e5_0_25%,#fff_0_50%)] bg-[length:16px_16px]">
+                  <img src={urls[f.name]} alt={f.name} width={Math.min(f.size!, 96)} height={Math.min(f.size!, 96)} />
+                </div>
+                <span className="text-xs text-muted-foreground">{f.size}×{f.size}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/pdf/PdfOrganize.tsx b/src/islands/pdf/PdfOrganize.tsx
new file mode 100644
index 0000000..7d17fb4
--- /dev/null
+++ b/src/islands/pdf/PdfOrganize.tsx
@@ -0,0 +1,189 @@
+import { useEffect, useRef, 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 { PdfPreview } from '@/components/ui/PdfPreview';
+import { openPdfRenderer } from '@/tools/pdf/render.lib';
+import { organizePdf } 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, {
+  intro: string; drop: string; dropSub: string; loading: string; failed: string;
+  reorderHint: string; pageNumbers: string; position: string; startAt: string;
+  apply: string; working: string; remove: string; empty: string;
+}> = {
+  en: {
+    intro: 'Reorder or delete PDF pages by dragging the thumbnails, and optionally add page numbers. Everything runs in your browser — the PDF is never uploaded.',
+    drop: 'Drop a PDF or click to browse', dropSub: 'Organized on your device',
+    loading: 'Loading pages…', failed: 'Could not open this PDF.',
+    reorderHint: 'Drag pages to reorder · click ✕ to delete',
+    pageNumbers: 'Add page numbers', position: 'Position', startAt: 'Start at',
+    apply: 'Apply & download', working: 'Building…', remove: 'Remove', empty: 'All pages removed — add at least one back.',
+  },
+  id: {
+    intro: 'Susun ulang atau hapus halaman PDF dengan menyeret thumbnail, dan opsional tambahkan nomor halaman. Semuanya berjalan di browser Anda — PDF tidak pernah diunggah.',
+    drop: 'Letakkan PDF atau klik untuk memilih', dropSub: 'Disusun di perangkat Anda',
+    loading: 'Memuat halaman…', failed: 'Tidak dapat membuka PDF ini.',
+    reorderHint: 'Seret halaman untuk menyusun ulang · klik ✕ untuk menghapus',
+    pageNumbers: 'Tambahkan nomor halaman', position: 'Posisi', startAt: 'Mulai dari',
+    apply: 'Terapkan & unduh', working: 'Membuat…', remove: 'Hapus', empty: 'Semua halaman dihapus — tambahkan minimal satu.',
+  },
+};
+
+export default function PdfOrganize({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [file, setFile] = useState<File | null>(null);
+  const [urls, setUrls] = useState<Record<number, string>>({});
+  const [order, setOrder] = useState<number[]>([]);
+  const [numbers, setNumbers] = useState(false);
+  const [position, setPosition] = useState<PageNumberPosition>('bottom-center');
+  const [startAt, setStartAt] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [result, setResult] = useState<Blob | null>(null);
+  const dragFrom = useRef<number | null>(null);
+  const urlsRef = useRef<Record<number, string>>({});
+
+  useEffect(() => { urlsRef.current = urls; }, [urls]);
+  useEffect(() => () => { Object.values(urlsRef.current).forEach(URL.revokeObjectURL); }, []);
+
+  const onDrop = async (files: File[]) => {
+    const f = files.find(x => x.type === 'application/pdf' || x.name.toLowerCase().endsWith('.pdf'));
+    if (!f) return;
+    setFile(f);
+    setResult(null);
+    setError('');
+    setLoading(true);
+    Object.values(urlsRef.current).forEach(URL.revokeObjectURL);
+    setUrls({});
+    setOrder([]);
+    try {
+      const renderer = await openPdfRenderer(await f.arrayBuffer());
+      const next: Record<number, string> = {};
+      for (let i = 1; i <= renderer.pageCount; i++) {
+        const page = await renderer.renderPage(i, 0.4);
+        next[i - 1] = URL.createObjectURL(page.blob);
+      }
+      renderer.destroy();
+      setUrls(next);
+      setOrder(Array.from({ length: renderer.pageCount }, (_, i) => i));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onDropThumb = (toPos: number) => {
+    const from = dragFrom.current;
+    dragFrom.current = null;
+    if (from === null || from === toPos) return;
+    setOrder(prev => {
+      const next = [...prev];
+      const [moved] = next.splice(from, 1);
+      next.splice(toPos, 0, moved);
+      return next;
+    });
+  };
+
+  const removePage = (pos: number) => setOrder(prev => prev.filter((_, i) => i !== pos));
+
+  const apply = async () => {
+    if (!file || order.length === 0) return;
+    setBusy(true);
+    setError('');
+    try {
+      const out = await organizePdf(file, order, numbers
+        ? { enabled: true, position, startAt, fontSize: 11, margin: 24 }
+        : undefined);
+      setResult(out);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  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>
+      )}
+
+      {loading && <p className="text-sm text-muted-foreground">{t.loading}</p>}
+      {error && <Alert variant="error">{error}</Alert>}
+
+      {order.length > 0 && (
+        <>
+          <p className="text-xs text-muted-foreground">{t.reorderHint}</p>
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 lg:grid-cols-6">
+            {order.map((pageIdx, pos) => (
+              <div
+                key={pageIdx}
+                draggable
+                onDragStart={() => { dragFrom.current = pos; }}
+                onDragOver={e => e.preventDefault()}
+                onDrop={() => onDropThumb(pos)}
+                className="relative cursor-move border-2 border-border bg-muted p-1"
+              >
+                <img src={urls[pageIdx]} alt={`page ${pageIdx + 1}`} className="w-full" />
+                <span className="absolute bottom-1 left-1 bg-black/70 px-1 text-xs text-white">{pos + 1}</span>
+                <button
+                  onClick={() => removePage(pos)}
+                  title={t.remove}
+                  className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center bg-red-600 text-xs text-white"
+                >✕</button>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex flex-wrap items-end gap-x-6 gap-y-2">
+            <label className="flex items-center gap-2 text-sm font-semibold">
+              <input type="checkbox" checked={numbers} onChange={e => setNumbers(e.target.checked)} className="h-4 w-4 accent-accent" />
+              {t.pageNumbers}
+            </label>
+            {numbers && (
+              <>
+                <label className="space-y-1 text-sm">
+                  <span className="block font-semibold">{t.position}</span>
+                  <select value={position} onChange={e => setPosition(e.target.value as PageNumberPosition)}
+                    className="border-2 border-border bg-background px-2 py-1.5 text-sm">
+                    {POSITIONS.map(p => <option key={p} value={p}>{p}</option>)}
+                  </select>
+                </label>
+                <label className="space-y-1 text-sm">
+                  <span className="block font-semibold">{t.startAt}</span>
+                  <input type="number" min={0} value={startAt} onChange={e => setStartAt(Number(e.target.value))}
+                    className="w-20 border-2 border-border bg-muted p-2 text-sm" />
+                </label>
+              </>
+            )}
+          </div>
+
+          {order.length === 0 && <Alert variant="error">{t.empty}</Alert>}
+
+          <Button onClick={apply} disabled={busy || order.length === 0}>{busy ? t.working : t.apply}</Button>
+        </>
+      )}
+
+      {result && (
+        <div className="space-y-2">
+          <ResultActions blob={result} filename="organized.pdf" disabled={busy} />
+          <PdfPreview source={result} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/pdf/PdfSign.tsx b/src/islands/pdf/PdfSign.tsx
new file mode 100644
index 0000000..a234b6c
--- /dev/null
+++ b/src/islands/pdf/PdfSign.tsx
@@ -0,0 +1,263 @@
+import { useEffect, useRef, useState } from 'react';
+import SignaturePadLib from 'signature_pad';
+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 { openPdfRenderer, type PdfRenderer } from '@/tools/pdf/render.lib';
+import { signPdf } from '@/tools/pdf/pdf.lib';
+import type { SignPlacement } from '@/tools/pdf/layout.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string; drop: string; dropSub: string; loading: string; failed: string;
+  draw: string; upload: string; clear: string; useSig: string; sigHint: string;
+  page: string; prev: string; next: string; placeHint: string; size: string;
+  addHere: string; placements: (n: number) => string; apply: string; working: string; noSig: string;
+}> = {
+  en: {
+    intro: 'Add your signature to a PDF: draw or upload it, drag it onto the page, and download the signed file. Everything runs in your browser — nothing is uploaded.',
+    drop: 'Drop a PDF or click to browse', dropSub: 'Signed on your device',
+    loading: 'Loading…', failed: 'Something went wrong.',
+    draw: 'Draw', upload: 'Upload PNG', clear: 'Clear', useSig: 'Use this signature',
+    sigHint: 'Draw your signature above, then click “Use this signature”.',
+    page: 'Page', prev: 'Prev', next: 'Next',
+    placeHint: 'Drag the signature to position it, then add it to the page.',
+    size: 'Size', addHere: 'Add to this page',
+    placements: n => `${n} placement${n === 1 ? '' : 's'}`,
+    apply: 'Sign & download', working: 'Signing…', noSig: 'Create a signature first.',
+  },
+  id: {
+    intro: 'Tambahkan tanda tangan ke PDF: gambar atau unggah, seret ke halaman, lalu unduh berkas yang sudah ditandatangani. Semuanya berjalan di browser Anda — tidak ada yang diunggah.',
+    drop: 'Letakkan PDF atau klik untuk memilih', dropSub: 'Ditandatangani di perangkat Anda',
+    loading: 'Memuat…', failed: 'Terjadi kesalahan.',
+    draw: 'Gambar', upload: 'Unggah PNG', clear: 'Bersihkan', useSig: 'Pakai tanda tangan ini',
+    sigHint: 'Gambar tanda tangan Anda di atas, lalu klik “Pakai tanda tangan ini”.',
+    page: 'Halaman', prev: 'Sebelumnya', next: 'Berikutnya',
+    placeHint: 'Seret tanda tangan untuk memosisikannya, lalu tambahkan ke halaman.',
+    size: 'Ukuran', addHere: 'Tambahkan ke halaman ini',
+    placements: n => `${n} penempatan`,
+    apply: 'Tandatangani & unduh', working: 'Menandatangani…', noSig: 'Buat tanda tangan dulu.',
+  },
+};
+
+interface Sig { url: string; bytes: Uint8Array; aspect: number }
+
+function dataUrlToBytes(dataUrl: string): Uint8Array {
+  const b64 = dataUrl.split(',')[1];
+  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;
+}
+
+export default function PdfSign({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [file, setFile] = useState<File | null>(null);
+  const [pageCount, setPageCount] = useState(0);
+  const [pageNum, setPageNum] = useState(1);
+  const [pageUrl, setPageUrl] = useState('');
+  const [mode, setMode] = useState<'draw' | 'upload'>('draw');
+  const [sig, setSig] = useState<Sig | null>(null);
+  const [box, setBox] = useState({ x: 0.3, y: 0.72, w: 0.32 }); // ratios (top-left origin)
+  const [placements, setPlacements] = useState<SignPlacement[]>([]);
+  const [result, setResult] = useState<Blob | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const rendererRef = useRef<PdfRenderer | null>(null);
+  const padCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const padRef = useRef<SignaturePadLib | null>(null);
+  const pageBoxRef = useRef<HTMLDivElement | null>(null);
+  const dragRef = useRef<{ dx: number; dy: number } | null>(null);
+
+  // Attach the signature pad when in draw mode.
+  useEffect(() => {
+    if (mode !== 'draw' || !padCanvasRef.current) return;
+    const canvas = padCanvasRef.current;
+    const ratio = Math.max(window.devicePixelRatio || 1, 1);
+    canvas.width = canvas.offsetWidth * ratio;
+    canvas.height = canvas.offsetHeight * ratio;
+    canvas.getContext('2d')?.scale(ratio, ratio);
+    const pad = new SignaturePadLib(canvas, { penColor: '#111827' });
+    padRef.current = pad;
+    return () => pad.off();
+  }, [mode, file]);
+
+  useEffect(() => () => { rendererRef.current?.destroy(); if (sig) URL.revokeObjectURL(sig.url); }, [sig]);
+
+  const renderPage = async (renderer: PdfRenderer, n: number) => {
+    const page = await renderer.renderPage(n, 1.3);
+    setPageUrl(prev => { if (prev) URL.revokeObjectURL(prev); return URL.createObjectURL(page.blob); });
+  };
+
+  const onDrop = async (files: File[]) => {
+    const f = files.find(x => x.type === 'application/pdf' || x.name.toLowerCase().endsWith('.pdf'));
+    if (!f) return;
+    setFile(f); setResult(null); setError(''); setPlacements([]);
+    try {
+      const renderer = await openPdfRenderer(await f.arrayBuffer());
+      rendererRef.current = renderer;
+      setPageCount(renderer.pageCount);
+      setPageNum(1);
+      await renderPage(renderer, 1);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    }
+  };
+
+  const goPage = async (n: number) => {
+    if (!rendererRef.current || n < 1 || n > pageCount) return;
+    setPageNum(n);
+    await renderPage(rendererRef.current, n);
+  };
+
+  const setSignature = (url: string, bytes: Uint8Array, aspect: number) => {
+    setSig(prev => { if (prev) URL.revokeObjectURL(prev.url); return { url, bytes, aspect }; });
+  };
+
+  const useDrawnSig = () => {
+    const pad = padRef.current;
+    if (!pad || pad.isEmpty()) { setError(t.noSig); return; }
+    setError('');
+    const dataUrl = pad.toDataURL('image/png');
+    const c = padCanvasRef.current!;
+    setSignature(dataUrl, dataUrlToBytes(dataUrl), c.width / c.height);
+  };
+
+  const onUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const bytes = new Uint8Array(await f.arrayBuffer());
+    const url = URL.createObjectURL(f);
+    const img = new Image();
+    img.onload = () => setSignature(url, bytes, img.naturalWidth / img.naturalHeight);
+    img.src = url;
+  };
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    const rect = pageBoxRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    dragRef.current = { dx: e.clientX - (rect.left + box.x * rect.width), dy: e.clientY - (rect.top + box.y * rect.height) };
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragRef.current) return;
+    const rect = pageBoxRef.current!.getBoundingClientRect();
+    const x = (e.clientX - dragRef.current.dx - rect.left) / rect.width;
+    const y = (e.clientY - dragRef.current.dy - rect.top) / rect.height;
+    setBox(b => ({ ...b, x: Math.min(Math.max(x, 0), 1 - b.w), y: Math.min(Math.max(y, 0), 1) }));
+  };
+  const onPointerUp = () => { dragRef.current = null; };
+
+  const addPlacement = () =>
+    setPlacements(p => [...p, { pageIndex: pageNum - 1, xRatio: box.x, yRatio: box.y, wRatio: box.w }]);
+
+  const apply = async () => {
+    if (!file || !sig || placements.length === 0) return;
+    setBusy(true); setError('');
+    try {
+      setResult(await signPdf(file, sig.bytes, placements));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  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>
+      )}
+
+      {error && <Alert variant="error">{error}</Alert>}
+
+      {file && (
+        <div className="grid gap-4 lg:grid-cols-[1fr_320px]">
+          {/* Page with draggable signature */}
+          <div className="space-y-2">
+            {pageUrl && (
+              <div ref={pageBoxRef} className="relative inline-block border-2 border-border">
+                <img src={pageUrl} alt={`page ${pageNum}`} className="block max-h-[70vh] w-auto select-none" draggable={false} />
+                {sig && (
+                  <img
+                    src={sig.url}
+                    alt="signature"
+                    onPointerDown={onPointerDown}
+                    onPointerMove={onPointerMove}
+                    onPointerUp={onPointerUp}
+                    style={{
+                      position: 'absolute',
+                      left: `${box.x * 100}%`,
+                      top: `${box.y * 100}%`,
+                      width: `${box.w * 100}%`,
+                      height: 'auto',
+                      cursor: 'move',
+                      touchAction: 'none',
+                    }}
+                    className="border border-dashed border-accent"
+                    draggable={false}
+                  />
+                )}
+              </div>
+            )}
+            <div className="flex items-center gap-2 text-sm">
+              <Button variant="secondary" onClick={() => goPage(pageNum - 1)} disabled={pageNum <= 1}>{t.prev}</Button>
+              <span>{t.page} {pageNum} / {pageCount}</span>
+              <Button variant="secondary" onClick={() => goPage(pageNum + 1)} disabled={pageNum >= pageCount}>{t.next}</Button>
+            </div>
+          </div>
+
+          {/* Signature panel */}
+          <div className="space-y-3">
+            <div className="flex gap-1">
+              {(['draw', 'upload'] as const).map(m => (
+                <button key={m} onClick={() => setMode(m)} aria-pressed={mode === m}
+                  className={`border-2 px-3 py-1 text-sm font-medium ${mode === m ? 'border-border bg-accent text-accent-foreground shadow-brutal' : 'border-border'}`}>
+                  {m === 'draw' ? t.draw : t.upload}
+                </button>
+              ))}
+            </div>
+
+            {mode === 'draw' ? (
+              <div className="space-y-2">
+                <canvas ref={padCanvasRef} className="h-32 w-full touch-none border-2 border-border bg-white" />
+                <div className="flex gap-2">
+                  <Button variant="ghost" onClick={() => padRef.current?.clear()}>{t.clear}</Button>
+                  <Button onClick={useDrawnSig}>{t.useSig}</Button>
+                </div>
+                <p className="text-xs text-muted-foreground">{t.sigHint}</p>
+              </div>
+            ) : (
+              <input type="file" accept="image/png" onChange={onUpload} className="text-sm" />
+            )}
+
+            {sig && (
+              <div className="space-y-3 border-t-2 border-border pt-3">
+                <p className="text-xs text-muted-foreground">{t.placeHint}</p>
+                <label className="block space-y-1 text-sm">
+                  <span className="font-semibold">{t.size}</span>
+                  <input type="range" min={0.1} max={0.6} step={0.01} value={box.w}
+                    onChange={e => setBox(b => ({ ...b, w: Number(e.target.value) }))} className="w-full accent-accent" />
+                </label>
+                <Button variant="secondary" onClick={addPlacement}>{t.addHere}</Button>
+                <p className="text-sm">{t.placements(placements.length)}</p>
+                <Button onClick={apply} disabled={busy || placements.length === 0}>{busy ? t.working : t.apply}</Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {result && <ResultActions blob={result} filename="signed.pdf" disabled={busy} />}
+    </div>
+  );
+}
diff --git a/src/registry/tool-seo.ts b/src/registry/tool-seo.ts
index bf83152..f46c0dd 100644
--- a/src/registry/tool-seo.ts
+++ b/src/registry/tool-seo.ts
@@ -296,6 +296,57 @@ const en: Record<string, ToolSeoContent> = {
       { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps working with no connection once loaded.' },
     ],
   },
+  'favicon-generator': {
+    title: 'Free Favicon Generator — ICO, PNG & Web Manifest',
+    description: 'Turn any image into a complete favicon set — favicon.ico, PNGs, Apple touch icon and a web manifest — then download them as a ZIP. Runs in your browser, nothing is uploaded.',
+    intro: 'This free favicon generator turns one image into every favicon a website needs: a multi-size favicon.ico, 16/32/48px PNGs, a 180px Apple touch icon, 192/512px Android/PWA icons, plus a site.webmanifest and the HTML snippet to paste into your <head>. Everything is generated in your browser and downloaded as a ZIP — nothing is uploaded.',
+    howTo: [
+      'Drop or paste a square image (512×512 or larger works best).',
+      'The favicon set is generated instantly on your device.',
+      'Preview the sizes, then download the whole set as a ZIP.',
+      'Unzip it into your site root and paste the included HTML snippet.',
+    ],
+    faqs: [
+      { q: 'Is my image uploaded?', a: 'No. All resizing and encoding happen in your browser, so your image never leaves your device.' },
+      { q: 'What files do I get?', a: 'favicon.ico (16/32/48), favicon-16/32/48 PNGs, apple-touch-icon (180px), android-chrome 192 and 512 PNGs, a site.webmanifest and an HTML snippet.' },
+      { q: 'What image should I use?', a: 'A square image at least 512×512 works best so the largest icons stay sharp. Simple, high-contrast art reads best at 16px.' },
+      { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps generating favicons with no connection once loaded.' },
+    ],
+  },
+  'pdf-organize': {
+    title: 'Free Organize PDF — Reorder, Delete Pages & Add Page Numbers',
+    description: 'Organize a PDF in your browser: drag to reorder pages, delete pages, and add page numbers, then download. Nothing is uploaded.',
+    intro: 'This free Organize PDF tool lets you rearrange a PDF by dragging its page thumbnails, delete pages you don’t need, and optionally stamp page numbers — all in your browser. Your PDF is never uploaded, so it stays private.',
+    howTo: [
+      'Drop your PDF — its pages appear as thumbnails.',
+      'Drag pages to reorder them, or click ✕ to delete a page.',
+      'Optionally turn on page numbers and choose their position.',
+      'Click Apply and download the reorganized PDF.',
+    ],
+    faqs: [
+      { q: 'Is my PDF uploaded?', a: 'No. The PDF is rendered and rebuilt entirely in your browser, so it never leaves your device.' },
+      { q: 'Can I delete pages too?', a: 'Yes. Click the ✕ on any page thumbnail to remove it; the rest keep your chosen order.' },
+      { q: 'Where can page numbers go?', a: 'You can place page numbers at the bottom or top, aligned left, center or right, and choose the starting number.' },
+      { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps working with no connection once loaded.' },
+    ],
+  },
+  'pdf-sign': {
+    title: 'Free Sign PDF — Add Your Signature to a PDF Online',
+    description: 'Sign a PDF in your browser: draw or upload your signature, drag it onto the page, and download the signed file. Private — nothing is uploaded.',
+    intro: 'This free Sign PDF tool lets you add a signature to a PDF without printing or scanning. Draw your signature with the mouse or touch, or upload a PNG, then drag it onto the page, size it, and place it on one or more pages. Everything happens in your browser, so your document is never uploaded.',
+    howTo: [
+      'Drop your PDF to open it.',
+      'Draw your signature or upload a transparent PNG, then click “Use this signature”.',
+      'Drag the signature onto the page and adjust its size.',
+      'Add it to the page (repeat for other pages), then click Sign & download.',
+    ],
+    faqs: [
+      { q: 'Is my document uploaded to a server?', a: 'No. The PDF and your signature stay in your browser — signing happens locally and nothing is uploaded, which matters for confidential documents.' },
+      { q: 'Can I sign more than one page?', a: 'Yes. Position the signature and add it to each page you need; all placements are applied when you download.' },
+      { q: 'Can I upload an existing signature image?', a: 'Yes. Upload a PNG (ideally with a transparent background) instead of drawing, and place it the same way.' },
+      { q: 'Is a drawn signature legally binding?', a: 'A drawn or image signature is a simple electronic signature. Whether it is legally sufficient depends on your jurisdiction and the document; check local requirements for important agreements.' },
+    ],
+  },
   'compare-lists': {
     title: 'Compare Two Lists — Merge, Dedupe & Diff Lines',
     description: 'Compare two lists of lines online: merge and remove duplicates, subtract one list from another, or find common lines. Free, private and instant — nothing is uploaded.',
@@ -2094,6 +2145,57 @@ const id: Record<string, ToolSeoContent> = {
       { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap berjalan tanpa koneksi setelah dimuat.' },
     ],
   },
+  'favicon-generator': {
+    title: 'Generator Favicon Gratis — ICO, PNG & Web Manifest',
+    description: 'Ubah gambar apa pun menjadi set favicon lengkap — favicon.ico, PNG, Apple touch icon, dan web manifest — lalu unduh sebagai ZIP. Berjalan di browser Anda, tidak ada yang diunggah.',
+    intro: 'Tool generator favicon gratis ini mengubah satu gambar menjadi semua favicon yang dibutuhkan situs web: favicon.ico multi-ukuran, PNG 16/32/48px, Apple touch icon 180px, ikon Android/PWA 192/512px, ditambah site.webmanifest dan snippet HTML untuk ditempel ke <head>. Semuanya dibuat di browser Anda dan diunduh sebagai ZIP — tidak ada yang diunggah.',
+    howTo: [
+      'Letakkan atau tempel gambar persegi (512×512 atau lebih paling bagus).',
+      'Set favicon dibuat seketika di perangkat Anda.',
+      'Pratinjau ukurannya, lalu unduh seluruh set sebagai ZIP.',
+      'Ekstrak ke root situs Anda dan tempel snippet HTML yang disertakan.',
+    ],
+    faqs: [
+      { q: 'Apakah gambar saya diunggah?', a: 'Tidak. Semua pengubahan ukuran dan encoding terjadi di browser Anda, jadi gambar tidak pernah meninggalkan perangkat.' },
+      { q: 'File apa saja yang saya dapatkan?', a: 'favicon.ico (16/32/48), PNG favicon-16/32/48, apple-touch-icon (180px), PNG android-chrome 192 dan 512, site.webmanifest, dan snippet HTML.' },
+      { q: 'Gambar seperti apa yang sebaiknya dipakai?', a: 'Gambar persegi minimal 512×512 paling bagus agar ikon terbesar tetap tajam. Desain sederhana berkontras tinggi paling terbaca pada 16px.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap membuat favicon tanpa koneksi setelah dimuat.' },
+    ],
+  },
+  'pdf-organize': {
+    title: 'Organize PDF Gratis — Susun Ulang, Hapus Halaman & Nomor Halaman',
+    description: 'Susun PDF di browser Anda: seret untuk menyusun ulang halaman, hapus halaman, dan tambahkan nomor halaman, lalu unduh. Tidak ada yang diunggah.',
+    intro: 'Tool Organize PDF gratis ini memungkinkan Anda menyusun ulang PDF dengan menyeret thumbnail halaman, menghapus halaman yang tidak diperlukan, dan opsional membubuhkan nomor halaman — semua di browser Anda. PDF Anda tidak pernah diunggah, jadi tetap privat.',
+    howTo: [
+      'Letakkan PDF Anda — halamannya muncul sebagai thumbnail.',
+      'Seret halaman untuk menyusun ulang, atau klik ✕ untuk menghapus halaman.',
+      'Opsional aktifkan nomor halaman dan pilih posisinya.',
+      'Klik Terapkan dan unduh PDF yang telah disusun ulang.',
+    ],
+    faqs: [
+      { q: 'Apakah PDF saya diunggah?', a: 'Tidak. PDF dirender dan dibangun ulang sepenuhnya di browser Anda, jadi tidak pernah meninggalkan perangkat.' },
+      { q: 'Bisakah menghapus halaman juga?', a: 'Ya. Klik ✕ pada thumbnail halaman mana pun untuk menghapusnya; sisanya mempertahankan urutan pilihan Anda.' },
+      { q: 'Di mana nomor halaman bisa diletakkan?', a: 'Anda bisa menempatkan nomor halaman di bawah atau atas, rata kiri, tengah, atau kanan, dan memilih nomor awal.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap berjalan tanpa koneksi setelah dimuat.' },
+    ],
+  },
+  'pdf-sign': {
+    title: 'Sign PDF Gratis — Tambahkan Tanda Tangan ke PDF Online',
+    description: 'Tandatangani PDF di browser Anda: gambar atau unggah tanda tangan, seret ke halaman, lalu unduh berkasnya. Privat — tidak ada yang diunggah.',
+    intro: 'Tool Sign PDF gratis ini memungkinkan Anda menambahkan tanda tangan ke PDF tanpa mencetak atau memindai. Gambar tanda tangan dengan mouse atau sentuhan, atau unggah PNG, lalu seret ke halaman, atur ukurannya, dan tempatkan di satu atau beberapa halaman. Semuanya terjadi di browser Anda, jadi dokumen tidak pernah diunggah.',
+    howTo: [
+      'Letakkan PDF Anda untuk membukanya.',
+      'Gambar tanda tangan atau unggah PNG transparan, lalu klik “Pakai tanda tangan ini”.',
+      'Seret tanda tangan ke halaman dan sesuaikan ukurannya.',
+      'Tambahkan ke halaman (ulangi untuk halaman lain), lalu klik Tandatangani & unduh.',
+    ],
+    faqs: [
+      { q: 'Apakah dokumen saya diunggah ke server?', a: 'Tidak. PDF dan tanda tangan Anda tetap di browser — penandatanganan terjadi lokal dan tidak ada yang diunggah, penting untuk dokumen rahasia.' },
+      { q: 'Bisakah menandatangani lebih dari satu halaman?', a: 'Ya. Posisikan tanda tangan dan tambahkan ke tiap halaman yang diperlukan; semua penempatan diterapkan saat Anda mengunduh.' },
+      { q: 'Bisakah mengunggah gambar tanda tangan yang sudah ada?', a: 'Ya. Unggah PNG (idealnya berlatar transparan) alih-alih menggambar, dan tempatkan dengan cara yang sama.' },
+      { q: 'Apakah tanda tangan gambar sah secara hukum?', a: 'Tanda tangan gambar adalah tanda tangan elektronik sederhana. Keabsahannya bergantung pada yurisdiksi dan dokumen Anda; periksa ketentuan setempat untuk perjanjian penting.' },
+    ],
+  },
   'compare-lists': {
     title: 'Bandingkan Dua Daftar — Gabung, Hapus Duplikat & Diff',
     description: 'Bandingkan dua daftar baris secara online: gabung dan hapus duplikat, kurangi satu daftar dari yang lain, atau temukan baris yang sama. Gratis, privat, instan — tidak ada yang diunggah.',
diff --git a/src/registry/tools.ts b/src/registry/tools.ts
index d76da0f..644e22f 100644
--- a/src/registry/tools.ts
+++ b/src/registry/tools.ts
@@ -1,4 +1,4 @@
-import { Hash, Braces, Binary, Link, KeyRound, Fingerprint, KeySquare, FileDiff, Table, FileText, QrCode, ScanLine, Clock, Calculator, Palette, FilePlus2, Scissors, RotateCw, FileImage, FileX, Stamp, Image, Replace, Minimize2, Maximize2, Eraser, Archive, Lock, Unlock, Crop, Droplet, PenTool, Combine, ShieldCheck, FileCode, FileCode2, FileCog, FileArchive, FolderArchive, Sparkles, ScanFace, Scaling, Aperture, Wand2, PenLine, Shapes, Film, FileVideo, Music, AudioLines, MonitorPlay, Camera, Code2, Database, Keyboard, Contrast, Eye, ScanText, Receipt, Webcam, Mic, Send, Video, Wrench, Compass, Map, Waypoints, ImageDown, ScrollText, Ghost, FileSpreadsheet, BookOpen, FileType2, FileDown, GitCompare, FileOutput, CalendarClock, ClipboardPaste, PlugZap, Regex, Contact, Wallet, Network, Subtitles, Presentation, SquareUser, WholeWord, Percent, Baseline, CaseSensitive, Brush } from 'lucide-react';
+import { Hash, Braces, Binary, Link, KeyRound, Fingerprint, KeySquare, FileDiff, Table, FileText, QrCode, ScanLine, Clock, Calculator, Palette, FilePlus2, Scissors, RotateCw, FileImage, FileX, Stamp, Image, Replace, Minimize2, Maximize2, Eraser, Archive, Lock, Unlock, Crop, Droplet, PenTool, Combine, ShieldCheck, FileCode, FileCode2, FileCog, FileArchive, FolderArchive, Sparkles, ScanFace, Scaling, Aperture, Wand2, PenLine, Shapes, Film, FileVideo, Music, AudioLines, MonitorPlay, Camera, Code2, Database, Keyboard, Contrast, Eye, ScanText, Receipt, Webcam, Mic, Send, Video, Wrench, Compass, Map, Waypoints, ImageDown, ScrollText, Ghost, FileSpreadsheet, BookOpen, FileType2, FileDown, GitCompare, FileOutput, CalendarClock, ClipboardPaste, PlugZap, Regex, Contact, Wallet, Network, Subtitles, Presentation, SquareUser, WholeWord, Percent, Baseline, CaseSensitive, Brush, AppWindow, ListOrdered, FileSignature } from 'lucide-react';
 import type { ToolDef } from '@/types/tool';
 
 export const tools: ToolDef[] = [
@@ -355,6 +355,39 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/dev/TextCleanup'),
     status: 'beta'
   },
+  {
+    id: 'favicon-generator',
+    name: 'Favicon Generator',
+    category: 'Image',
+    route: '/tools/favicon-generator',
+    keywords: ['favicon', 'generator', 'ico', 'apple touch icon', 'manifest', 'website icon', 'png'],
+    icon: AppWindow,
+    summary: 'Turn an image into a favicon set (ICO, PNGs, manifest)',
+    load: () => import('@/islands/image/FaviconGenerator'),
+    status: 'beta'
+  },
+  {
+    id: 'pdf-organize',
+    name: 'Organize PDF',
+    category: 'PDF',
+    route: '/tools/pdf-organize',
+    keywords: ['organize pdf', 'reorder pages', 'rearrange', 'delete pages', 'page numbers', 'sort pdf'],
+    icon: ListOrdered,
+    summary: 'Drag to reorder or delete PDF pages and add page numbers',
+    load: () => import('@/islands/pdf/PdfOrganize'),
+    status: 'beta'
+  },
+  {
+    id: 'pdf-sign',
+    name: 'Sign PDF',
+    category: 'PDF',
+    route: '/tools/pdf-sign',
+    keywords: ['sign pdf', 'esign', 'signature', 'e-signature', 'sign document', 'draw signature'],
+    icon: FileSignature,
+    summary: 'Draw or upload a signature and place it on a PDF',
+    load: () => import('@/islands/pdf/PdfSign'),
+    status: 'beta'
+  },
   {
     id: 'cron-expression',
     name: 'Cron Expression',
diff --git a/src/tools/image/favicon.lib.test.ts b/src/tools/image/favicon.lib.test.ts
new file mode 100644
index 0000000..80c6d7a
--- /dev/null
+++ b/src/tools/image/favicon.lib.test.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { buildManifest, htmlSnippet, FAVICON_SIZES } from './favicon.lib';
+
+describe('buildManifest', () => {
+  it('is valid JSON referencing the chrome icons', () => {
+    const m = JSON.parse(buildManifest('My Site'));
+    expect(m.name).toBe('My Site');
+    expect(m.icons.map((i: { sizes: string }) => i.sizes)).toEqual(['192x192', '512x512']);
+    expect(m.display).toBe('standalone');
+  });
+});
+
+describe('htmlSnippet', () => {
+  it('includes the ico, png, apple-touch and manifest links', () => {
+    const s = htmlSnippet();
+    expect(s).toContain('favicon.ico');
+    expect(s).toContain('apple-touch-icon');
+    expect(s).toContain('site.webmanifest');
+  });
+});
+
+describe('FAVICON_SIZES', () => {
+  it('covers the standard sizes', () => {
+    expect(FAVICON_SIZES.map(f => f.size)).toEqual([16, 32, 48, 180, 192, 512]);
+  });
+});
diff --git a/src/tools/image/favicon.lib.ts b/src/tools/image/favicon.lib.ts
new file mode 100644
index 0000000..bed24de
--- /dev/null
+++ b/src/tools/image/favicon.lib.ts
@@ -0,0 +1,72 @@
+/**
+ * Favicon generator — turn one image into a full favicon set (ICO + PNGs +
+ * web manifest + HTML snippet). Browser-only encode; the manifest/snippet
+ * builders are pure.
+ */
+import { processImage } from './canvas.lib';
+import { imageToIco } from './encode.lib';
+
+export const FAVICON_SIZES: { name: string; size: number }[] = [
+  { name: 'favicon-16x16.png', size: 16 },
+  { name: 'favicon-32x32.png', size: 32 },
+  { name: 'favicon-48x48.png', size: 48 },
+  { name: 'apple-touch-icon.png', size: 180 },
+  { name: 'android-chrome-192x192.png', size: 192 },
+  { name: 'android-chrome-512x512.png', size: 512 },
+];
+
+/** Build a site.webmanifest referencing the generated PNGs. */
+export function buildManifest(appName: string): string {
+  return JSON.stringify(
+    {
+      name: appName,
+      short_name: appName,
+      icons: [
+        { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+        { src: '/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
+      ],
+      theme_color: '#ffffff',
+      background_color: '#ffffff',
+      display: 'standalone',
+    },
+    null,
+    2,
+  );
+}
+
+/** The <link> tags to paste into a site's <head>. */
+export function htmlSnippet(): string {
+  return [
+    '<link rel="icon" type="image/x-icon" href="/favicon.ico">',
+    '<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
+    '<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
+    '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">',
+    '<link rel="manifest" href="/site.webmanifest">',
+  ].join('\n');
+}
+
+export interface FaviconFile {
+  name: string;
+  blob: Blob;
+  /** Pixel size for the PNG previews (absent for ico/manifest/snippet). */
+  size?: number;
+}
+
+/** Generate the full favicon set from a source image. */
+export async function generateFavicons(file: File, appName: string): Promise<FaviconFile[]> {
+  const files: FaviconFile[] = [];
+  files.push({ name: 'favicon.ico', blob: await imageToIco(file, [16, 32, 48]) });
+  for (const { name, size } of FAVICON_SIZES) {
+    const { blob } = await processImage(file, { mimeType: 'image/png', width: size, height: size });
+    files.push({ name, blob, size });
+  }
+  files.push({
+    name: 'site.webmanifest',
+    blob: new Blob([buildManifest(appName)], { type: 'application/manifest+json' }),
+  });
+  files.push({
+    name: 'favicon-html-snippet.txt',
+    blob: new Blob([htmlSnippet()], { type: 'text/plain' }),
+  });
+  return files;
+}
diff --git a/src/tools/pdf/layout.lib.test.ts b/src/tools/pdf/layout.lib.test.ts
new file mode 100644
index 0000000..d4c81d2
--- /dev/null
+++ b/src/tools/pdf/layout.lib.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { pageNumberXY, placementToPdfRect } from './layout.lib';
+
+describe('pageNumberXY', () => {
+  it('places bottom-center', () => {
+    expect(pageNumberXY('bottom-center', 600, 800, 20, 12, 30)).toEqual({ x: 290, y: 30 });
+  });
+  it('places bottom-right', () => {
+    expect(pageNumberXY('bottom-right', 600, 800, 20, 12, 30)).toEqual({ x: 550, y: 30 });
+  });
+  it('places top-left (y measured from bottom)', () => {
+    expect(pageNumberXY('top-left', 600, 800, 20, 12, 30)).toEqual({ x: 30, y: 758 });
+  });
+});
+
+describe('placementToPdfRect', () => {
+  it('flips a top-left ratio placement to bottom-left coordinates', () => {
+    // 50%-wide box at (10%,10% from top) on a 600×800 page, square image.
+    const r = placementToPdfRect({ pageIndex: 0, xRatio: 0.1, yRatio: 0.1, wRatio: 0.5 }, 600, 800, 1);
+    expect(r.width).toBe(300);
+    expect(r.height).toBe(300);
+    expect(r.x).toBe(60);
+    // yFromTop = 80, height 300 → y = 800 - 80 - 300 = 420
+    expect(r.y).toBe(420);
+  });
+
+  it('derives height from a wide image aspect', () => {
+    const r = placementToPdfRect({ pageIndex: 0, xRatio: 0, yRatio: 0, wRatio: 1 }, 600, 800, 3);
+    expect(r.width).toBe(600);
+    expect(r.height).toBe(200);
+  });
+});
diff --git a/src/tools/pdf/layout.lib.ts b/src/tools/pdf/layout.lib.ts
new file mode 100644
index 0000000..fee44b1
--- /dev/null
+++ b/src/tools/pdf/layout.lib.ts
@@ -0,0 +1,62 @@
+/**
+ * Pure geometry helpers for the Organize-PDF and Sign-PDF tools. No PDF engine
+ * dependency, so these can be unit-tested in isolation. pdf-lib's coordinate
+ * origin is the bottom-left of the page.
+ */
+
+export type PageNumberPosition =
+  | 'bottom-center' | 'bottom-right' | 'bottom-left'
+  | 'top-center' | 'top-right' | 'top-left';
+
+export interface PageNumberOptions {
+  enabled: boolean;
+  position: PageNumberPosition;
+  startAt: number;
+  fontSize: number; // points
+  margin: number; // points
+}
+
+/** Bottom-left {x,y} for a page-number label of the given rendered width. */
+export function pageNumberXY(
+  position: PageNumberPosition,
+  pageW: number,
+  pageH: number,
+  textWidth: number,
+  fontSize: number,
+  margin: number,
+): { x: number; y: number } {
+  const y = position.startsWith('top') ? pageH - margin - fontSize : margin;
+  let x: number;
+  if (position.endsWith('center')) x = pageW / 2 - textWidth / 2;
+  else if (position.endsWith('right')) x = pageW - margin - textWidth;
+  else x = margin;
+  return { x, y };
+}
+
+/** A signature placement in screen space (top-left origin, page-relative ratios). */
+export interface SignPlacement {
+  pageIndex: number;
+  /** left edge, fraction of page width */
+  xRatio: number;
+  /** top edge, fraction of page height (measured from the top) */
+  yRatio: number;
+  /** width, fraction of page width */
+  wRatio: number;
+}
+
+/**
+ * Convert a top-left-origin ratio placement into a pdf-lib bottom-left rect.
+ * Height is derived from the image aspect ratio (w/h).
+ */
+export function placementToPdfRect(
+  p: SignPlacement,
+  pageW: number,
+  pageH: number,
+  imgAspect: number,
+): { x: number; y: number; width: number; height: number } {
+  const width = p.wRatio * pageW;
+  const height = width / imgAspect;
+  const x = p.xRatio * pageW;
+  const yFromTop = p.yRatio * pageH;
+  return { x, y: pageH - yFromTop - height, width, height };
+}
diff --git a/src/tools/pdf/pdf.lib.ts b/src/tools/pdf/pdf.lib.ts
index 23fa5f8..192aef9 100644
--- a/src/tools/pdf/pdf.lib.ts
+++ b/src/tools/pdf/pdf.lib.ts
@@ -1,4 +1,5 @@
 import { PDFDocument, StandardFonts, degrees, rgb } from 'pdf-lib';
+import { pageNumberXY, placementToPdfRect, type PageNumberOptions, type SignPlacement } 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.
@@ -152,6 +153,56 @@ export async function buildWatermarkPreview(
   return out.save();
 }
 
+/**
+ * Rebuild a PDF with pages in `order` (0-indexed; omit an index to drop that
+ * page), optionally stamping page numbers.
+ */
+export async function organizePdf(
+  file: File,
+  order: number[],
+  pageNumbers?: PageNumberOptions,
+): Promise<Blob> {
+  const src = await loadViaMupdf(file);
+  const out = await PDFDocument.create();
+  const pages = await out.copyPages(src, order);
+  pages.forEach(page => out.addPage(page));
+
+  if (pageNumbers?.enabled) {
+    const font = await out.embedFont(StandardFonts.Helvetica);
+    out.getPages().forEach((page, i) => {
+      const { width, height } = page.getSize();
+      const label = String(pageNumbers.startAt + i);
+      const textWidth = font.widthOfTextAtSize(label, pageNumbers.fontSize);
+      const { x, y } = pageNumberXY(pageNumbers.position, width, height, textWidth, pageNumbers.fontSize, pageNumbers.margin);
+      page.drawText(label, { x, y, size: pageNumbers.fontSize, font, color: rgb(0, 0, 0) });
+    });
+  }
+  return toBlob(await out.save());
+}
+
+/** Stamp a signature PNG onto the given page placements. */
+export async function signPdf(
+  file: File,
+  signaturePng: Uint8Array,
+  placements: SignPlacement[],
+): 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 img = await out.embedPng(signaturePng);
+  const aspect = img.width / img.height;
+  const docPages = out.getPages();
+  for (const placement of placements) {
+    const page = docPages[placement.pageIndex];
+    if (!page) continue;
+    const { width, height } = page.getSize();
+    page.drawImage(img, placementToPdfRect(placement, width, height, aspect));
+  }
+  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();

From 62c349483fb5e4a6f4193de9b7bca93bc816b6fd Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 14 Aug 2026 10:31:32 +0700
Subject: [PATCH 3/3] fix(pdf): extract images now decodes pages so embedded
 images are found

With the pdf.js worker, getOperatorList() does not populate page.objs with
decoded images, so extraction found nothing. Render each page (that has image
XObjects) first to force decoding, then read the objects.
---
 src/tools/pdf/extract-images.lib.ts | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/tools/pdf/extract-images.lib.ts b/src/tools/pdf/extract-images.lib.ts
index 5468618..3d238e4 100644
--- a/src/tools/pdf/extract-images.lib.ts
+++ b/src/tools/pdf/extract-images.lib.ts
@@ -91,23 +91,43 @@ export async function extractPdfImages(data: ArrayBuffer | Uint8Array): Promise<
     pdfjs.OPS.paintImageXObjectRepeat,
   ]);
 
+  // A throwaway canvas used only to force pdf.js to decode each page's images
+  // into page.objs — with the worker, getOperatorList() alone does not.
+  const renderCanvas = document.createElement('canvas');
+  const renderCtx = renderCanvas.getContext('2d');
+
   const results: ExtractedImage[] = [];
   const seen = new Set<string>();
   try {
     for (let p = 1; p <= pdf.numPages; p++) {
       const page = await pdf.getPage(p);
       const ops = await page.getOperatorList();
+
+      const names: string[] = [];
       for (let i = 0; i < ops.fnArray.length; i++) {
         if (!imageOps.has(ops.fnArray[i])) continue;
         const name = ops.argsArray[i]?.[0];
-        if (typeof name !== 'string' || seen.has(name)) continue;
+        if (typeof name === 'string' && !seen.has(name) && !names.includes(name)) names.push(name);
+      }
+      if (names.length === 0) continue;
+
+      // Render the page (at a modest scale) so pdf.js decodes its image
+      // XObjects and populates page.objs; the objects hold full-resolution data.
+      if (renderCtx) {
+        const base = page.getViewport({ scale: 1 });
+        const scale = Math.min(1, 1200 / Math.max(base.width, base.height, 1));
+        const viewport = page.getViewport({ scale });
+        renderCanvas.width = Math.max(1, Math.floor(viewport.width));
+        renderCanvas.height = Math.max(1, Math.floor(viewport.height));
+        await page.render({ canvasContext: renderCtx, viewport, canvas: renderCanvas }).promise;
+      }
+
+      for (const name of names) {
         seen.add(name);
         const obj = await resolveObj(page, name);
         if (!obj) continue;
         const rendered = await objToBlob(obj);
-        if (rendered) {
-          results.push({ name: `image-${results.length + 1}.png`, ...rendered });
-        }
+        if (rendered) results.push({ name: `image-${results.length + 1}.png`, ...rendered });
       }
     }
   } finally {