From 5f131458d503a0420b1f453340fcbdff1ebbb2ce Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 28 Aug 2026 06:37:24 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20add=20Code=20Beautifier,=20vCard?=
 =?UTF-8?q?=E2=86=94CSV,=20NPWP=20Validator=20&=20Photo=20Collage?=
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:
- Code Beautifier (Prettier standalone, per-language lazy chunks; prettier-* chunks globIgnored from PWA precache)
- vCard <-> CSV contacts converter (RFC-4180 CSV parse + vCard 3.0)
- NPWP Validator/Formatter (Indonesian tax ID, 15/16-digit structural check)
- Photo Collage Maker (grid layout + center-crop, canvas)
---
 astro.config.mjs                        |  10 ++
 src/islands/dev/CodeBeautify.tsx        |  69 ++++++++++++
 src/islands/dev/NpwpTool.tsx            |  60 +++++++++++
 src/islands/dev/VcardCsv.tsx            |  96 +++++++++++++++++
 src/islands/image/PhotoCollage.tsx      | 134 +++++++++++++++++++++++
 src/registry/tool-i18n.ts               |   4 +
 src/registry/tool-seo.ts                | 136 ++++++++++++++++++++++++
 src/registry/tools.ts                   |  44 ++++++++
 src/tools/dev/code-beautify.lib.test.ts |  17 +++
 src/tools/dev/code-beautify.lib.ts      |  58 ++++++++++
 src/tools/dev/npwp.lib.test.ts          |  36 +++++++
 src/tools/dev/npwp.lib.ts               |  56 ++++++++++
 src/tools/dev/vcard.lib.test.ts         |  51 +++++++++
 src/tools/dev/vcard.lib.ts              | 106 ++++++++++++++++++
 src/tools/image/collage.lib.test.ts     |  26 +++++
 src/tools/image/collage.lib.ts          |  22 ++++
 16 files changed, 925 insertions(+)
 create mode 100644 src/islands/dev/CodeBeautify.tsx
 create mode 100644 src/islands/dev/NpwpTool.tsx
 create mode 100644 src/islands/dev/VcardCsv.tsx
 create mode 100644 src/islands/image/PhotoCollage.tsx
 create mode 100644 src/tools/dev/code-beautify.lib.test.ts
 create mode 100644 src/tools/dev/code-beautify.lib.ts
 create mode 100644 src/tools/dev/npwp.lib.test.ts
 create mode 100644 src/tools/dev/npwp.lib.ts
 create mode 100644 src/tools/dev/vcard.lib.test.ts
 create mode 100644 src/tools/dev/vcard.lib.ts
 create mode 100644 src/tools/image/collage.lib.test.ts
 create mode 100644 src/tools/image/collage.lib.ts

diff --git a/astro.config.mjs b/astro.config.mjs
index fbfe074..b8dc891 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -59,6 +59,15 @@ export default defineConfig({
           manualChunks(id) {
             if (id.includes('node_modules/epubjs')) return 'epubjs';
             if (id.includes('node_modules/jszip')) return 'jszip';
+            // Prettier (Code Beautifier) is large and lazily-imported per language.
+            // Give every prettier chunk a stable `prettier-` prefix so it can be
+            // kept out of the PWA precache via globIgnores while still code-split
+            // per language plugin (loaded on demand, not in the island chunk).
+            if (id.includes('node_modules/prettier/plugins/')) {
+              const m = id.match(/plugins\/([a-z0-9]+)/i);
+              return m ? `prettier-${m[1]}` : 'prettier-plugin';
+            }
+            if (id.includes('node_modules/prettier/')) return 'prettier-standalone';
           },
         },
       },
@@ -142,6 +151,7 @@ export default defineConfig({
           '**/terser*.js',
           '**/csso*.js',
           '**/zxing*.js',
+          '**/prettier-*.js',
           'og/*.png',
         ],
         runtimeCaching: [
diff --git a/src/islands/dev/CodeBeautify.tsx b/src/islands/dev/CodeBeautify.tsx
new file mode 100644
index 0000000..e98c3a2
--- /dev/null
+++ b/src/islands/dev/CodeBeautify.tsx
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { TextArea } from '@/components/ui/TextArea';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { beautify, BEAUTIFY_LANGS, type BeautifyLang } from '@/tools/dev/code-beautify.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Beautify and format code — JavaScript, TypeScript, CSS, HTML, JSON, Markdown and YAML — with Prettier, entirely in your browser. Nothing is uploaded.',
+    language: 'Language', input: 'Input', output: 'Output', run: 'Beautify', copy: 'Copy',
+    placeholder: 'Paste your code…', failed: 'Could not format — check the syntax.',
+  },
+  id: {
+    intro: 'Percantik dan format kode — JavaScript, TypeScript, CSS, HTML, JSON, Markdown, dan YAML — dengan Prettier, sepenuhnya di browser Anda. Tidak ada yang diunggah.',
+    language: 'Bahasa', input: 'Masukan', output: 'Keluaran', run: 'Percantik', copy: 'Salin',
+    placeholder: 'Tempel kode Anda…', failed: 'Tidak dapat memformat — periksa sintaksnya.',
+  },
+};
+
+export default function CodeBeautify({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [codeLang, setCodeLang] = useState<BeautifyLang>('js');
+  const [src, setSrc] = useState('const greet=(name)=>{return "hi "+name}\nconsole.log(greet("world"))');
+  const [out, setOut] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const run = async () => {
+    setBusy(true); setError(''); setOut('');
+    try {
+      setOut(await beautify(src, codeLang));
+    } catch {
+      setError(t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <label className="flex items-center gap-2 text-sm">
+        <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.language}</span>
+        <select value={codeLang} onChange={e => setCodeLang(e.target.value as BeautifyLang)} className="h-9 border-2 border-border bg-muted px-2">
+          {BEAUTIFY_LANGS.map(l => <option key={l.id} value={l.id}>{l.label}</option>)}
+        </select>
+      </label>
+
+      <div className="grid gap-3 lg:grid-cols-2">
+        <div className="space-y-1">
+          <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.input}</span>
+          <TextArea value={src} onChange={e => setSrc(e.target.value)} rows={14} placeholder={t.placeholder} className="font-mono text-sm" />
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.output}</span>
+            <CopyButton value={out} label={t.copy} disabled={!out} />
+          </div>
+          <textarea readOnly value={out} rows={14} className="w-full border-2 border-border bg-muted p-2 font-mono text-sm" />
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      <Button onClick={run} disabled={busy || !src.trim()}>{busy ? '…' : t.run}</Button>
+    </div>
+  );
+}
diff --git a/src/islands/dev/NpwpTool.tsx b/src/islands/dev/NpwpTool.tsx
new file mode 100644
index 0000000..dc6d339
--- /dev/null
+++ b/src/islands/dev/NpwpTool.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { analyzeNpwp } from '@/tools/dev/npwp.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Validate and format an Indonesian NPWP (taxpayer ID). Type the number and it checks the length and formats a 15-digit NPWP. Runs in your browser.',
+    label: 'NPWP number', formatted: 'Formatted', type: 'Type',
+    valid: 'Valid', invalid: 'Invalid — an NPWP has 15 digits (legacy) or 16 (NIK-based).',
+    legacy: 'Legacy 15-digit NPWP', nik: '16-digit (NIK-based) NPWP',
+  },
+  id: {
+    intro: 'Validasi dan format NPWP (Nomor Pokok Wajib Pajak) Indonesia. Ketik nomornya dan tool memeriksa panjang serta memformat NPWP 15 digit. Berjalan di browser Anda.',
+    label: 'Nomor NPWP', formatted: 'Terformat', type: 'Jenis',
+    valid: 'Valid', invalid: 'Tidak valid — NPWP terdiri dari 15 digit (lama) atau 16 (berbasis NIK).',
+    legacy: 'NPWP lama 15 digit', nik: 'NPWP 16 digit (berbasis NIK)',
+  },
+};
+
+export default function NpwpTool({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [value, setValue] = useState('09.254.294.3-407.000');
+  const info = analyzeNpwp(value);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <label className="block space-y-1">
+        <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.label}</span>
+        <input value={value} onChange={e => setValue(e.target.value)} inputMode="numeric"
+          className="w-full border-2 border-border bg-muted p-2 font-mono text-lg tabular-nums" />
+      </label>
+
+      {value.trim() && (
+        info.valid ? (
+          <div className="space-y-3 border-2 border-border bg-lime-200 p-4 text-black shadow-brutal dark:bg-lime-900/40 dark:text-white">
+            <div className="text-sm font-bold uppercase tracking-wide">✓ {t.valid} · {info.kind === 'legacy-15' ? t.legacy : t.nik}</div>
+            <div className="flex flex-wrap items-center gap-3">
+              <div>
+                <div className="text-[11px] font-bold uppercase tracking-wide opacity-80">{t.formatted}</div>
+                <div className="font-mono text-2xl font-black tabular-nums">{info.formatted}</div>
+              </div>
+              <CopyButton value={info.formatted} label="Copy" />
+            </div>
+            {info.taxpayerType && (
+              <div>
+                <div className="text-[11px] font-bold uppercase tracking-wide opacity-80">{t.type}</div>
+                <div className="text-sm">{info.taxpayerType}</div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="border-2 border-border bg-yellow-300 p-3 text-sm font-medium text-black shadow-brutal-sm">{t.invalid}</div>
+        )
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/dev/VcardCsv.tsx b/src/islands/dev/VcardCsv.tsx
new file mode 100644
index 0000000..5b44d2c
--- /dev/null
+++ b/src/islands/dev/VcardCsv.tsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { ArrowLeftRight, Download } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { TextArea } from '@/components/ui/TextArea';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { downloadService } from '@/services/download';
+import { parseVcards, buildVcards, contactsToCsv, csvToContacts } from '@/tools/dev/vcard.lib';
+import type { Lang } from '@/i18n/config';
+
+type Dir = 'v2c' | 'c2v';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Convert contacts between vCard (.vcf) and CSV — export your phone contacts to a spreadsheet, or build a .vcf to import. Runs in your browser; nothing is uploaded.',
+    v2c: 'vCard → CSV', c2v: 'CSV → vCard', swap: 'Swap', drop: 'Drop a .vcf/.csv file or paste below',
+    input: 'Input', output: 'Output', convert: 'Convert', copy: 'Copy', download: 'Download', count: (n: number) => `${n} contact${n === 1 ? '' : 's'}`,
+  },
+  id: {
+    intro: 'Konversi kontak antara vCard (.vcf) dan CSV — ekspor kontak ponsel ke spreadsheet, atau buat .vcf untuk diimpor. Berjalan di browser Anda; tidak ada yang diunggah.',
+    v2c: 'vCard → CSV', c2v: 'CSV → vCard', swap: 'Tukar', drop: 'Letakkan file .vcf/.csv atau tempel di bawah',
+    input: 'Masukan', output: 'Keluaran', convert: 'Konversi', copy: 'Salin', download: 'Unduh', count: (n: number) => `${n} kontak`,
+  },
+};
+
+export default function VcardCsv({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [dir, setDir] = useState<Dir>('v2c');
+  const [src, setSrc] = useState('');
+  const [out, setOut] = useState('');
+  const [count, setCount] = useState(0);
+
+  const convert = () => {
+    if (dir === 'v2c') {
+      const contacts = parseVcards(src);
+      setOut(contactsToCsv(contacts));
+      setCount(contacts.length);
+    } else {
+      const contacts = csvToContacts(src);
+      setOut(buildVcards(contacts));
+      setCount(contacts.length);
+    }
+  };
+
+  const swap = () => { setDir(d => (d === 'v2c' ? 'c2v' : 'v2c')); setSrc(out || src); setOut(''); setCount(0); };
+
+  const onDrop = async (files: File[]) => {
+    const f = files[0];
+    if (!f) return;
+    setSrc(await f.text());
+    setOut('');
+  };
+
+  const download = () => {
+    if (!out) return;
+    const name = dir === 'v2c' ? 'contacts.csv' : 'contacts.vcf';
+    const mime = dir === 'v2c' ? 'text/csv' : 'text/vcard';
+    downloadService.download(new Blob([out], { type: mime }), name);
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="border-2 border-border bg-accent px-3 py-1.5 text-sm font-bold uppercase tracking-wide text-accent-foreground shadow-brutal-sm">
+          {dir === 'v2c' ? t.v2c : t.c2v}
+        </span>
+        <Button variant="ghost" onClick={swap}><ArrowLeftRight className="h-4 w-4" />{t.swap}</Button>
+      </div>
+
+      <Dropzone onDrop={onDrop} accept=".vcf,.csv,text/vcard,text/csv" multiple={false}>
+        <p className="text-sm font-bold">{t.drop}</p>
+      </Dropzone>
+
+      <div className="grid gap-3 lg:grid-cols-2">
+        <div className="space-y-1">
+          <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.input}</span>
+          <TextArea value={src} onChange={e => setSrc(e.target.value)} rows={10} className="font-mono text-xs" />
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.output}{count > 0 && ` · ${t.count(count)}`}</span>
+            <CopyButton value={out} label={t.copy} disabled={!out} />
+          </div>
+          <textarea readOnly value={out} rows={10} className="w-full border-2 border-border bg-muted p-2 font-mono text-xs" />
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Button onClick={convert} disabled={!src.trim()}>{t.convert}</Button>
+        <Button variant="secondary" onClick={download} disabled={!out}><Download className="h-4 w-4" />{t.download}</Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/islands/image/PhotoCollage.tsx b/src/islands/image/PhotoCollage.tsx
new file mode 100644
index 0000000..e3afe8b
--- /dev/null
+++ b/src/islands/image/PhotoCollage.tsx
@@ -0,0 +1,134 @@
+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 { gridLayout } from '@/tools/image/collage.lib';
+import { fitRect } from '@/tools/image/social-resize.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, Record<string, string>> = {
+  en: {
+    intro: 'Combine several photos into one collage on a grid — pick the columns, gap and background, then download. Made in your browser; nothing is uploaded.',
+    drop: 'Drop photos or click to browse', dropSub: 'Add 2 or more images',
+    cols: 'Columns', gap: 'Gap', bg: 'Background', size: 'Output width', make: 'Make collage', making: 'Building…',
+    download: 'Download', result: 'Collage', clear: 'Clear', failed: 'Could not build the collage.',
+  },
+  id: {
+    intro: 'Gabungkan beberapa foto menjadi satu kolase pada grid — pilih kolom, jarak, dan latar, lalu unduh. Dibuat di browser Anda; tidak ada yang diunggah.',
+    drop: 'Letakkan foto atau klik untuk memilih', dropSub: 'Tambahkan 2 gambar atau lebih',
+    cols: 'Kolom', gap: 'Jarak', bg: 'Latar', size: 'Lebar output', make: 'Buat kolase', making: 'Membuat…',
+    download: 'Unduh', result: 'Kolase', clear: 'Bersihkan', failed: 'Tidak dapat membuat kolase.',
+  },
+};
+
+export default function PhotoCollage({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [files, setFiles] = useState<File[]>([]);
+  const [cols, setCols] = useState(2);
+  const [gap, setGap] = useState(16);
+  const [bg, setBg] = useState('#ffffff');
+  const [width, setWidth] = useState(1080);
+  const [result, setResult] = useState<Blob | null>(null);
+  const [resultUrl, setResultUrl] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => () => { if (resultUrl) URL.revokeObjectURL(resultUrl); }, [resultUrl]);
+
+  const onDrop = (dropped: File[]) => {
+    const imgs = dropped.filter(f => f.type.startsWith('image/'));
+    if (imgs.length === 0) return;
+    setFiles(prev => [...prev, ...imgs]);
+    setResult(null);
+  };
+
+  const make = async () => {
+    if (files.length === 0) return;
+    setBusy(true); setError('');
+    try {
+      const bitmaps = await Promise.all(files.map(f => createImageBitmap(f)));
+      const rows = Math.ceil(bitmaps.length / cols);
+      // Derive a square-ish cell from the first image's aspect for the height.
+      const cellW = (width - gap * (cols + 1)) / cols;
+      const avgAspect = bitmaps.reduce((s, b) => s + b.width / b.height, 0) / bitmaps.length;
+      const cellH = cellW / avgAspect;
+      const height = Math.round(cellH * rows + gap * (rows + 1));
+
+      const canvas = document.createElement('canvas');
+      canvas.width = width; canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('canvas');
+      ctx.fillStyle = bg;
+      ctx.fillRect(0, 0, width, height);
+
+      const cells = gridLayout(bitmaps.length, cols, width, height, gap);
+      cells.forEach(cell => {
+        const b = bitmaps[cell.index];
+        const r = fitRect(b.width, b.height, cell.w, cell.h, 'cover');
+        ctx.drawImage(b, r.sx, r.sy, r.sw, r.sh, cell.x + r.dx, cell.y + r.dy, r.dw, r.dh);
+      });
+      bitmaps.forEach(b => b.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 download = () => { if (result) downloadService.download(result, 'collage.png'); };
+  const clear = () => { setFiles([]); setResult(null); setError(''); };
+
+  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>
+        <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>
+
+      {files.length > 0 && (
+        <p className="text-sm text-muted-foreground">{files.length} · {files.map(f => f.name).join(', ')}</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.cols}</span>
+          <select value={cols} onChange={e => setCols(Number(e.target.value))} className={input}>{[1, 2, 3, 4, 5].map(n => <option key={n} value={n}>{n}</option>)}</select></label>
+        <label className="flex flex-col gap-1"><span className="font-bold uppercase tracking-wide text-muted-foreground">{t.gap}</span>
+          <input type="number" min={0} max={100} value={gap} onChange={e => setGap(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={200} max={4000} step={20} value={width} onChange={e => setWidth(Math.max(200, Number(e.target.value)))} className={`${input} w-24`} /></label>
+        <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)} className="h-9 w-14 border-2 border-border" /></label>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Button onClick={make} disabled={busy || files.length === 0}>{busy ? t.making : t.make}</Button>
+        <Button variant="ghost" onClick={clear}>{t.clear}</Button>
+      </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">{formatBytes(result.size)}</span>
+          </div>
+          <img src={resultUrl} alt="" className="max-h-[70vh] 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/registry/tool-i18n.ts b/src/registry/tool-i18n.ts
index f2b4b03..3237ef4 100644
--- a/src/registry/tool-i18n.ts
+++ b/src/registry/tool-i18n.ts
@@ -33,6 +33,9 @@ const ID_LABELS: Record<string, { name: string; summary: string }> = {
   "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" },
+  "code-beautify": { name: "Beautifier Kode", summary: "Format JS, TS, CSS, HTML, JSON, Markdown & YAML dengan Prettier" },
+  "vcard-csv": { name: "vCard ↔ CSV", summary: "Konversi kontak antara vCard (.vcf) dan CSV" },
+  "npwp-validator": { name: "Validator NPWP", summary: "Validasi dan format NPWP (nomor pajak) Indonesia" },
   "subtitle-editor": { name: "Editor Subtitle (SRT/VTT)", summary: "Edit, atur ulang waktu dan konversi subtitle SRT dan WebVTT" },
   "voice-recorder": { name: "Perekam Suara", summary: "Rekam audio mikrofon dan unduh" },
   "white-noise": { name: "White Noise & Hujan", summary: "Buat white, pink atau brown noise & suara hujan untuk fokus atau tidur" },
@@ -150,6 +153,7 @@ const ID_LABELS: Record<string, { name: string; summary: string }> = {
   "image-crop": { name: "Pemotong Gambar", summary: "Potong gambar dengan menyeret seleksi" },
   "image-watermark": { name: "Watermark Gambar", summary: "Tambahkan watermark teks ke gambar" },
   "meme-generator": { name: "Pembuat Meme", summary: "Tambahkan teks klasik atas/bawah ke gambar" },
+  "photo-collage": { name: "Pembuat Kolase Foto", summary: "Gabungkan beberapa foto menjadi satu kolase grid" },
   "color-blindness-sim": { name: "Simulator Buta Warna", summary: "Pratinjau gambar seperti terlihat dengan gangguan penglihatan warna" },
   "scan-deskew": { name: "Luruskan & Potong Scan", summary: "Luruskan dan potong foto dokumen (koreksi perspektif)" },
   "image-stamp": { name: "Stempel Gambar", summary: "Bubuhkan tanda CONFIDENTIAL, PAID, dan status lain ke gambar" },
diff --git a/src/registry/tool-seo.ts b/src/registry/tool-seo.ts
index f8af28c..604d153 100644
--- a/src/registry/tool-seo.ts
+++ b/src/registry/tool-seo.ts
@@ -179,6 +179,57 @@ const en: Record<string, ToolSeoContent> = {
       { q: 'Does it support IPv6?', a: 'This calculator focuses on IPv4 subnetting. IPv6 support may come later.' },
     ],
   },
+  'code-beautify': {
+    title: 'Code Beautifier — Format JS, CSS, HTML & JSON (Prettier)',
+    description: 'Beautify and format code — JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML — with Prettier, entirely in your browser. Nothing is uploaded.',
+    intro: 'This free code beautifier tidies and formats your code using Prettier. Choose the language, paste your code, and get a cleanly formatted version with consistent indentation — it all runs in your browser, so your code is never uploaded.',
+    howTo: [
+      'Choose the language (JavaScript, TypeScript, CSS, HTML, JSON, Markdown, or YAML).',
+      'Paste your code into the input box.',
+      'Click Beautify to format it.',
+      'Copy the formatted result.',
+    ],
+    faqs: [
+      { q: 'Is my code uploaded?', a: 'No. Formatting runs entirely in your browser using Prettier — your code never leaves your device.' },
+      { q: 'Which languages are supported?', a: 'JavaScript, TypeScript, CSS, SCSS, HTML, JSON, Markdown and YAML.' },
+      { q: 'What formatter does it use?', a: 'Prettier, the industry-standard code formatter, running fully client-side.' },
+      { q: 'Why did formatting fail?', a: 'Prettier needs parseable code. If there is a syntax error, fix it first and try again.' },
+    ],
+  },
+  'vcard-csv': {
+    title: 'vCard ↔ CSV Converter — Contacts (.vcf) & Spreadsheet',
+    description: 'Convert contacts between vCard (.vcf) and CSV — export phone contacts to a spreadsheet, or build a .vcf to import. Runs in your browser; nothing is uploaded.',
+    intro: 'This tool converts contacts between vCard (.vcf) and CSV both ways. Export contact cards from your phone into a spreadsheet, or turn a CSV list into a .vcf to import back. All conversion happens in your browser.',
+    howTo: [
+      'Choose a direction — vCard → CSV or CSV → vCard (use Swap to flip).',
+      'Drop a .vcf/.csv file or paste its contents into the input box.',
+      'Click Convert.',
+      'Copy the result or download it as a file.',
+    ],
+    faqs: [
+      { q: 'Are my contacts uploaded?', a: 'No. Conversion runs in your browser — your contacts never leave your device, which is ideal for personal data.' },
+      { q: 'Which fields are converted?', a: 'Name, email, phone, organization, title and URL — the most common contact subset.' },
+      { q: 'Will the CSV open in Excel/Google Sheets?', a: 'Yes. The CSV output uses a standard header row so it opens directly in any spreadsheet app.' },
+      { q: 'Which vCard version is produced?', a: 'vCard 3.0, which is widely accepted by phones and contact apps.' },
+    ],
+  },
+  'npwp-validator': {
+    title: 'NPWP Validator — Check & Format an Indonesian Tax ID',
+    description: 'Validate and format an Indonesian NPWP (taxpayer ID) — check the digit length and format a 15-digit NPWP to XX.XXX.XXX.X-XXX.XXX. In your browser.',
+    intro: 'This free tool validates and formats an Indonesian NPWP. Type the number and it checks whether the length is correct (15-digit legacy or 16-digit NIK-based) and formats a 15-digit NPWP into the standard XX.XXX.XXX.X-XXX.XXX form. Everything runs in your browser.',
+    howTo: [
+      'Type or paste the NPWP number (with or without dots and dashes).',
+      'The tool checks its validity instantly.',
+      'See the formatted NPWP and the taxpayer type.',
+      'Copy the formatted number.',
+    ],
+    faqs: [
+      { q: 'Is my data sent anywhere?', a: 'No. Validation happens entirely in your browser — nothing is uploaded.' },
+      { q: 'How is an NPWP validated?', a: 'An NPWP has no public check digit, so the tool validates it structurally: 15 digits (legacy NPWP) or 16 digits (NIK-based since 2024).' },
+      { q: 'What do the first two digits mean?', a: 'On a 15-digit NPWP, the first two digits indicate the taxpayer type (e.g. corporate, individual, branch). The tool shows it when recognized.' },
+      { q: 'Does it format my NPWP?', a: 'Yes. A 15-digit NPWP is formatted to XX.XXX.XXX.X-XXX.XXX; a 16-digit number is shown as-is.' },
+    ],
+  },
   'minifier': {
     title: 'Free HTML, CSS & JS Minifier — Shrink Code Online',
     description: 'Minify HTML, CSS and JavaScript to reduce file size, right in your browser. Fast, private — nothing is uploaded.',
@@ -2462,6 +2513,23 @@ const en: Record<string, ToolSeoContent> = {
       { q: 'Does it work offline?', a: 'Yes. GoodWebTools is a PWA, so once loaded the simulator works with no internet connection.' },
     ],
   },
+  'photo-collage': {
+    title: 'Free Photo Collage Maker — Combine Photos into a Grid',
+    description: 'Combine several photos into one grid collage — pick the columns, gap and background, then download a PNG. Made in your browser; nothing is uploaded.',
+    intro: 'This free photo collage maker arranges several images into a neat grid. Add your photos, choose the number of columns, the gap and a background color, and it renders them into a single image in your browser — nothing is uploaded.',
+    howTo: [
+      'Drop several photos onto the box (or click to select multiple).',
+      'Choose the number of columns, the gap, output width and background color.',
+      'Click Make collage.',
+      'Preview and download the PNG.',
+    ],
+    faqs: [
+      { q: 'Are my photos uploaded?', a: 'No. The collage is built in your browser via canvas — the photos never leave your device.' },
+      { q: 'How many photos can I combine?', a: 'As many as you like — the tool arranges them into a grid with the number of columns you choose.' },
+      { q: 'How are the photos cropped?', a: 'Each photo is cropped to fill its cell (center crop), so the grid stays tidy without stretching.' },
+      { q: 'What format is the output?', a: 'A PNG at the width you set; the height adjusts to the number of rows.' },
+    ],
+  },
   'meme-generator': {
     title: 'Free Meme Generator — Add Top & Bottom Text to Images',
     description: 'Make a meme in seconds: drop an image, add top and bottom captions in the classic bold outlined style, and download the PNG. Free and private — nothing is uploaded.',
@@ -3448,6 +3516,57 @@ const id: Record<string, ToolSeoContent> = {
       { q: 'Apakah mendukung IPv6?', a: 'Kalkulator ini fokus pada subnetting IPv4. Dukungan IPv6 mungkin ditambahkan nanti.' },
     ],
   },
+  'code-beautify': {
+    title: 'Beautifier Kode — Format JS, CSS, HTML & JSON (Prettier)',
+    description: 'Percantik dan format kode — JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML — dengan Prettier, sepenuhnya di browser Anda. Tidak ada yang diunggah.',
+    intro: 'Beautifier kode gratis ini merapikan dan memformat kode Anda memakai Prettier. Pilih bahasa, tempel kode, dan dapatkan versi yang terformat rapi dengan indentasi konsisten — semua berjalan di browser Anda, jadi kode Anda tidak pernah diunggah.',
+    howTo: [
+      'Pilih bahasa (JavaScript, TypeScript, CSS, HTML, JSON, Markdown, atau YAML).',
+      'Tempel kode Anda ke kotak masukan.',
+      'Klik Percantik untuk memformatnya.',
+      'Salin hasil yang terformat.',
+    ],
+    faqs: [
+      { q: 'Apakah kode saya diunggah?', a: 'Tidak. Pemformatan berjalan sepenuhnya di browser Anda memakai Prettier — kode Anda tidak pernah keluar dari perangkat.' },
+      { q: 'Bahasa apa yang didukung?', a: 'JavaScript, TypeScript, CSS, SCSS, HTML, JSON, Markdown, dan YAML.' },
+      { q: 'Formatter apa yang dipakai?', a: 'Prettier, formatter kode standar industri, berjalan sepenuhnya di sisi klien.' },
+      { q: 'Kenapa memformat bisa gagal?', a: 'Prettier perlu kode yang bisa di-parse. Jika ada kesalahan sintaks, perbaiki dulu lalu coba lagi.' },
+    ],
+  },
+  'vcard-csv': {
+    title: 'Konverter vCard ↔ CSV — Ubah Kontak (.vcf) & Spreadsheet',
+    description: 'Konversi kontak antara vCard (.vcf) dan CSV — ekspor kontak ponsel ke spreadsheet, atau buat .vcf untuk diimpor. Berjalan di browser Anda; tidak ada yang diunggah.',
+    intro: 'Tool ini mengonversi kontak antara vCard (.vcf) dan CSV dua arah. Ekspor kartu kontak dari ponsel ke spreadsheet, atau ubah daftar CSV menjadi .vcf untuk diimpor kembali. Semua konversi terjadi di browser Anda.',
+    howTo: [
+      'Pilih arah — vCard → CSV atau CSV → vCard (pakai Tukar untuk membalik).',
+      'Jatuhkan file .vcf/.csv atau tempel isinya ke kotak masukan.',
+      'Klik Konversi.',
+      'Salin hasilnya atau unduh sebagai file.',
+    ],
+    faqs: [
+      { q: 'Apakah kontak saya diunggah?', a: 'Tidak. Konversi berjalan di browser Anda — kontak Anda tidak pernah keluar dari perangkat, cocok untuk data pribadi.' },
+      { q: 'Field apa yang dikonversi?', a: 'Nama, email, telepon, organisasi, jabatan, dan URL — subset kontak yang paling umum.' },
+      { q: 'CSV bisa dibuka di Excel/Google Sheets?', a: 'Ya. Keluaran CSV memakai baris header standar sehingga langsung terbuka di aplikasi spreadsheet mana pun.' },
+      { q: 'Versi vCard apa yang dibuat?', a: 'vCard 3.0, yang diterima secara luas oleh ponsel dan aplikasi kontak.' },
+    ],
+  },
+  'npwp-validator': {
+    title: 'Validator NPWP — Cek & Format Nomor NPWP Online',
+    description: 'Validasi dan format NPWP (Nomor Pokok Wajib Pajak) Indonesia — periksa panjang digit dan format NPWP 15 digit ke XX.XXX.XXX.X-XXX.XXX. Di browser Anda.',
+    intro: 'Tool gratis ini memvalidasi dan memformat NPWP Indonesia. Ketik nomornya dan tool memeriksa apakah panjangnya benar (15 digit lama atau 16 digit berbasis NIK) dan memformat NPWP 15 digit ke bentuk baku XX.XXX.XXX.X-XXX.XXX. Semua di browser Anda.',
+    howTo: [
+      'Ketik atau tempel nomor NPWP (dengan atau tanpa titik dan strip).',
+      'Tool langsung memeriksa validitasnya.',
+      'Lihat NPWP yang terformat dan jenis wajib pajaknya.',
+      'Salin nomor terformat.',
+    ],
+    faqs: [
+      { q: 'Apakah data saya dikirim ke mana pun?', a: 'Tidak. Validasi terjadi sepenuhnya di browser Anda — tidak ada yang diunggah.' },
+      { q: 'Bagaimana NPWP divalidasi?', a: 'NPWP tidak punya digit pemeriksa publik, jadi tool memvalidasi secara struktural: 15 digit (NPWP lama) atau 16 digit (berbasis NIK sejak 2024).' },
+      { q: 'Apa arti dua digit pertama?', a: 'Pada NPWP 15 digit, dua digit pertama menandai jenis wajib pajak (mis. badan, orang pribadi, cabang). Tool menampilkannya bila dikenali.' },
+      { q: 'Apakah tool memformat NPWP saya?', a: 'Ya. NPWP 15 digit diformat ke XX.XXX.XXX.X-XXX.XXX; nomor 16 digit ditampilkan apa adanya.' },
+    ],
+  },
   'minifier': {
     title: 'Minifier HTML, CSS & JS Gratis — Perkecil Kode Online',
     description: 'Minify HTML, CSS, dan JavaScript untuk memperkecil ukuran berkas, langsung di browser Anda. Cepat, privat — tidak ada yang diunggah.',
@@ -5731,6 +5850,23 @@ const id: Record<string, ToolSeoContent> = {
       { q: 'Apakah bekerja offline?', a: 'Ya. GoodWebTools adalah PWA, jadi setelah dimuat simulator bekerja tanpa koneksi internet.' },
     ],
   },
+  'photo-collage': {
+    title: 'Pembuat Kolase Foto — Gabungkan Foto ke Satu Grid',
+    description: 'Gabungkan beberapa foto menjadi satu kolase pada grid — atur kolom, jarak, dan latar, lalu unduh PNG. Dibuat di browser Anda; tidak ada yang diunggah.',
+    intro: 'Pembuat kolase foto gratis ini menyusun beberapa gambar ke dalam grid rapi. Tambahkan foto Anda, pilih jumlah kolom, jarak, dan warna latar, lalu tool merendernya menjadi satu gambar di browser Anda — tidak ada yang diunggah.',
+    howTo: [
+      'Jatuhkan beberapa foto ke kotak (atau klik untuk memilih beberapa).',
+      'Pilih jumlah kolom, jarak, lebar output, dan warna latar.',
+      'Klik Buat kolase.',
+      'Pratinjau dan unduh PNG.',
+    ],
+    faqs: [
+      { q: 'Apakah foto saya diunggah?', a: 'Tidak. Kolase dibuat di browser Anda via canvas — foto tidak pernah keluar dari perangkat.' },
+      { q: 'Berapa banyak foto yang bisa saya gabungkan?', a: 'Sebanyak yang Anda mau — tool menyusunnya di grid dengan jumlah kolom yang Anda pilih.' },
+      { q: 'Bagaimana foto dipangkas?', a: 'Tiap foto dipotong untuk mengisi selnya (crop tengah), sehingga grid tetap rapi tanpa peregangan.' },
+      { q: 'Format keluarannya apa?', a: 'PNG pada lebar yang Anda tentukan; tingginya menyesuaikan jumlah baris.' },
+    ],
+  },
   'meme-generator': {
     title: 'Pembuat Meme Gratis — Tambah Teks Atas & Bawah pada Gambar',
     description: 'Buat meme dalam hitungan detik: letakkan gambar, tambahkan teks atas dan bawah dengan gaya tebal bergaris klasik, lalu unduh PNG. Gratis dan privat — tidak ada yang diunggah.',
diff --git a/src/registry/tools.ts b/src/registry/tools.ts
index 3b9ac4c..09b7fab 100644
--- a/src/registry/tools.ts
+++ b/src/registry/tools.ts
@@ -256,6 +256,39 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/dev/Minifier'),
     status: 'beta'
   },
+  {
+    id: 'code-beautify',
+    name: 'Code Beautifier',
+    category: 'Dev',
+    route: '/tools/code-beautify',
+    keywords: ['code beautifier', 'code formatter', 'prettier', 'format code', 'beautify javascript', 'beautify css', 'beautify html', 'format json', 'pretty print'],
+    icon: Braces,
+    summary: 'Format JS, TS, CSS, HTML, JSON, Markdown & YAML with Prettier',
+    load: () => import('@/islands/dev/CodeBeautify'),
+    status: 'beta'
+  },
+  {
+    id: 'vcard-csv',
+    name: 'vCard ↔ CSV',
+    category: 'Dev',
+    route: '/tools/vcard-csv',
+    keywords: ['vcard to csv', 'csv to vcard', 'vcf to csv', 'convert contacts', 'export contacts', 'contacts spreadsheet', 'phone contacts'],
+    icon: Contact,
+    summary: 'Convert contacts between vCard (.vcf) and CSV',
+    load: () => import('@/islands/dev/VcardCsv'),
+    status: 'beta'
+  },
+  {
+    id: 'npwp-validator',
+    name: 'NPWP Validator',
+    category: 'Dev',
+    route: '/tools/npwp-validator',
+    keywords: ['npwp', 'validasi npwp', 'format npwp', 'cek npwp', 'nomor pokok wajib pajak', 'npwp validator', 'tax id indonesia'],
+    icon: Landmark,
+    summary: 'Validate and format an Indonesian NPWP (tax ID)',
+    load: () => import('@/islands/dev/NpwpTool'),
+    status: 'beta'
+  },
   {
     id: 'subtitle-editor',
     name: 'Subtitle Editor (SRT/VTT)',
@@ -1576,6 +1609,17 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/image/MemeGenerator'),
     status: 'beta'
   },
+  {
+    id: 'photo-collage',
+    name: 'Photo Collage Maker',
+    category: 'Image',
+    route: '/tools/photo-collage',
+    keywords: ['photo collage', 'collage maker', 'picture collage', 'combine photos', 'photo grid', 'image collage', 'merge photos grid'],
+    icon: Grid3x3,
+    summary: 'Combine several photos into one grid collage',
+    load: () => import('@/islands/image/PhotoCollage'),
+    status: 'beta'
+  },
   {
     id: 'color-blindness-sim',
     name: 'Color Blindness Simulator',
diff --git a/src/tools/dev/code-beautify.lib.test.ts b/src/tools/dev/code-beautify.lib.test.ts
new file mode 100644
index 0000000..7235314
--- /dev/null
+++ b/src/tools/dev/code-beautify.lib.test.ts
@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { beautify } from './code-beautify.lib';
+
+describe('beautify', () => {
+  it('formats JavaScript', async () => {
+    expect(await beautify('const x=1', 'js')).toBe('const x = 1;\n');
+  });
+  it('formats CSS', async () => {
+    expect(await beautify('a{color:red}', 'css')).toBe('a {\n  color: red;\n}\n');
+  });
+  it('formats JSON', async () => {
+    expect(await beautify('{"a":1,"b":2}', 'json')).toBe('{ "a": 1, "b": 2 }\n');
+  });
+  it('rejects invalid syntax', async () => {
+    await expect(beautify('const = ', 'js')).rejects.toThrow();
+  });
+});
diff --git a/src/tools/dev/code-beautify.lib.ts b/src/tools/dev/code-beautify.lib.ts
new file mode 100644
index 0000000..27b0da1
--- /dev/null
+++ b/src/tools/dev/code-beautify.lib.ts
@@ -0,0 +1,58 @@
+/**
+ * Code beautifier backed by Prettier's standalone build. Prettier and its
+ * language plugins are dynamic-imported (and per-language) so they stay out of
+ * the island's initial chunk and only load when actually used.
+ */
+
+export type BeautifyLang = 'js' | 'ts' | 'css' | 'scss' | 'html' | 'json' | 'markdown' | 'yaml';
+
+export const BEAUTIFY_LANGS: { id: BeautifyLang; label: string }[] = [
+  { id: 'js', label: 'JavaScript' },
+  { id: 'ts', label: 'TypeScript' },
+  { id: 'css', label: 'CSS' },
+  { id: 'scss', label: 'SCSS' },
+  { id: 'html', label: 'HTML' },
+  { id: 'json', label: 'JSON' },
+  { id: 'markdown', label: 'Markdown' },
+  { id: 'yaml', label: 'YAML' },
+];
+
+const PARSER: Record<BeautifyLang, string> = {
+  js: 'babel', ts: 'typescript', css: 'css', scss: 'scss',
+  html: 'html', json: 'json', markdown: 'markdown', yaml: 'yaml',
+};
+
+// Prettier v3 plugins are passed as their whole module namespace.
+async function loadPlugins(lang: BeautifyLang): Promise<unknown[]> {
+  const babel = () => import('prettier/plugins/babel');
+  const estree = () => import('prettier/plugins/estree');
+  const postcss = () => import('prettier/plugins/postcss');
+  const html = () => import('prettier/plugins/html');
+  const typescript = () => import('prettier/plugins/typescript');
+  const markdown = () => import('prettier/plugins/markdown');
+  const yaml = () => import('prettier/plugins/yaml');
+
+  switch (lang) {
+    case 'js':
+    case 'json':
+      return [await babel(), await estree()];
+    case 'ts':
+      return [await typescript(), await estree(), await babel()];
+    case 'css':
+    case 'scss':
+      return [await postcss()];
+    case 'html':
+      return [await html(), await babel(), await estree(), await postcss()];
+    case 'markdown':
+      return [await markdown()];
+    case 'yaml':
+      return [await yaml()];
+  }
+}
+
+/** Format `code` for the given language. Throws on unparseable input. */
+export async function beautify(code: string, lang: BeautifyLang): Promise<string> {
+  const prettier = await import('prettier/standalone');
+  const plugins = await loadPlugins(lang);
+  return prettier.format(code, { parser: PARSER[lang], plugins, tabWidth: 2, semi: true });
+}
diff --git a/src/tools/dev/npwp.lib.test.ts b/src/tools/dev/npwp.lib.test.ts
new file mode 100644
index 0000000..ac176a4
--- /dev/null
+++ b/src/tools/dev/npwp.lib.test.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { npwpDigits, formatNpwp, analyzeNpwp } from './npwp.lib';
+
+describe('npwpDigits', () => {
+  it('strips punctuation', () => {
+    expect(npwpDigits('09.254.294.3-407.000')).toBe('092542943407000');
+  });
+});
+
+describe('formatNpwp', () => {
+  it('formats 15 digits', () => {
+    expect(formatNpwp('092542943407000')).toBe('09.254.294.3-407.000');
+  });
+  it('returns other lengths as plain digits', () => {
+    expect(formatNpwp('123')).toBe('123');
+  });
+});
+
+describe('analyzeNpwp', () => {
+  it('recognizes a legacy 15-digit NPWP with taxpayer type', () => {
+    const r = analyzeNpwp('09.254.294.3-407.000');
+    expect(r.valid).toBe(true);
+    expect(r.kind).toBe('legacy-15');
+    expect(r.formatted).toBe('09.254.294.3-407.000');
+    expect(r.taxpayerType).toContain('lainnya');
+  });
+  it('recognizes a 16-digit NIK-based NPWP', () => {
+    const r = analyzeNpwp('3201234567890123');
+    expect(r.valid).toBe(true);
+    expect(r.kind).toBe('nik-16');
+  });
+  it('rejects other lengths', () => {
+    expect(analyzeNpwp('12345').valid).toBe(false);
+    expect(analyzeNpwp('12345').kind).toBe('invalid');
+  });
+});
diff --git a/src/tools/dev/npwp.lib.ts b/src/tools/dev/npwp.lib.ts
new file mode 100644
index 0000000..8570b06
--- /dev/null
+++ b/src/tools/dev/npwp.lib.ts
@@ -0,0 +1,56 @@
+/**
+ * Pure NPWP (Indonesian taxpayer ID) formatting + validation.
+ *
+ * The legacy NPWP is 15 digits, displayed as `XX.XXX.XXX.X-XXX.XXX`. Since 2024
+ * individual taxpayers use their 16-digit NIK as the NPWP. There is no public
+ * check digit, so validation is structural (digit count).
+ */
+
+export interface NpwpInfo {
+  valid: boolean;
+  digits: string;
+  formatted: string;
+  kind: 'legacy-15' | 'nik-16' | 'invalid';
+  /** Taxpayer-type code (first two digits of a legacy NPWP), if applicable. */
+  taxpayerType?: string;
+}
+
+const TAXPAYER_TYPES: Record<string, string> = {
+  '01': 'Badan (corporate)',
+  '02': 'Pengusaha (entrepreneur)',
+  '04': 'Wajib Pajak Orang Pribadi (individual)',
+  '05': 'Karyawan / bendaharawan',
+  '06': 'Wajib Pajak Orang Pribadi (individual)',
+  '07': 'Wajib Pajak Orang Pribadi (individual)',
+  '08': 'Wajib Pajak Orang Pribadi (individual)',
+  '09': 'Joint operation / lainnya',
+  '31': 'Cabang (branch)',
+};
+
+/** Strip everything but digits. */
+export function npwpDigits(input: string): string {
+  return input.replace(/\D/g, '');
+}
+
+/** Format a 15-digit legacy NPWP as `XX.XXX.XXX.X-XXX.XXX`; other lengths returned as-is. */
+export function formatNpwp(input: string): string {
+  const d = npwpDigits(input);
+  if (d.length !== 15) return d;
+  return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}.${d.slice(8, 9)}-${d.slice(9, 12)}.${d.slice(12, 15)}`;
+}
+
+/** Validate and describe an NPWP input. */
+export function analyzeNpwp(input: string): NpwpInfo {
+  const digits = npwpDigits(input);
+  if (digits.length === 15) {
+    const type = digits.slice(0, 2);
+    return {
+      valid: true, digits, formatted: formatNpwp(digits), kind: 'legacy-15',
+      taxpayerType: TAXPAYER_TYPES[type] ?? 'Kode tidak dikenal',
+    };
+  }
+  if (digits.length === 16) {
+    return { valid: true, digits, formatted: digits, kind: 'nik-16' };
+  }
+  return { valid: false, digits, formatted: digits, kind: 'invalid' };
+}
diff --git a/src/tools/dev/vcard.lib.test.ts b/src/tools/dev/vcard.lib.test.ts
new file mode 100644
index 0000000..8f92ed5
--- /dev/null
+++ b/src/tools/dev/vcard.lib.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { parseVcards, buildVcards, contactsToCsv, csvToContacts, parseCsv } from './vcard.lib';
+
+const VCF = `BEGIN:VCARD
+VERSION:3.0
+FN:Ada Lovelace
+ORG:Analytical Engines
+TITLE:Mathematician
+TEL;TYPE=CELL:+1 555 0100
+EMAIL:ada@example.com
+URL:https://example.com
+END:VCARD`;
+
+describe('parseVcards', () => {
+  it('extracts the common fields', () => {
+    const [c] = parseVcards(VCF);
+    expect(c).toEqual({
+      name: 'Ada Lovelace', org: 'Analytical Engines', title: 'Mathematician',
+      phone: '+1 555 0100', email: 'ada@example.com', url: 'https://example.com',
+    });
+  });
+  it('parses multiple cards', () => {
+    expect(parseVcards(VCF + '\n' + VCF)).toHaveLength(2);
+  });
+});
+
+describe('round-trip', () => {
+  it('vCard → CSV → contacts preserves fields', () => {
+    const contacts = parseVcards(VCF);
+    const csv = contactsToCsv(contacts);
+    expect(csv.split('\n')[0]).toBe('name,email,phone,org,title,url');
+    expect(csvToContacts(csv)).toEqual(contacts);
+  });
+  it('contacts → vCard → contacts preserves fields', () => {
+    const contacts = parseVcards(VCF);
+    expect(parseVcards(buildVcards(contacts))).toEqual(contacts);
+  });
+});
+
+describe('parseCsv', () => {
+  it('handles quotes, escaped quotes and commas', () => {
+    expect(parseCsv('a,b\n"x,y","z""q"')).toEqual([['a', 'b'], ['x,y', 'z"q']]);
+  });
+});
+
+describe('contactsToCsv escaping', () => {
+  it('quotes values with commas', () => {
+    const csv = contactsToCsv([{ name: 'Doe, John', email: '', phone: '', org: '', title: '', url: '' }]);
+    expect(csv.split('\n')[1]).toBe('"Doe, John",,,,,');
+  });
+});
diff --git a/src/tools/dev/vcard.lib.ts b/src/tools/dev/vcard.lib.ts
new file mode 100644
index 0000000..e7bc216
--- /dev/null
+++ b/src/tools/dev/vcard.lib.ts
@@ -0,0 +1,106 @@
+/** Pure vCard ⇄ CSV conversion for a contacts subset. */
+
+export interface Contact {
+  name: string;
+  email: string;
+  phone: string;
+  org: string;
+  title: string;
+  url: string;
+}
+
+export const CONTACT_FIELDS: (keyof Contact)[] = ['name', 'email', 'phone', 'org', 'title', 'url'];
+
+function emptyContact(): Contact {
+  return { name: '', email: '', phone: '', org: '', title: '', url: '' };
+}
+
+/** Parse one-or-more VCARD blocks into contacts. */
+export function parseVcards(vcf: string): Contact[] {
+  const out: Contact[] = [];
+  const blocks = vcf.split(/BEGIN:VCARD/i).slice(1);
+  for (const block of blocks) {
+    const body = block.split(/END:VCARD/i)[0];
+    const c = emptyContact();
+    for (const raw of body.split(/\r?\n/)) {
+      const line = raw.trim();
+      const idx = line.indexOf(':');
+      if (idx < 0) continue;
+      const base = line.slice(0, idx).toUpperCase().split(';')[0];
+      const val = line.slice(idx + 1).trim();
+      if (base === 'FN') c.name = val;
+      else if (base === 'N' && !c.name) c.name = val.split(';').filter(Boolean).reverse().join(' ');
+      else if (base === 'EMAIL' && !c.email) c.email = val;
+      else if (base === 'TEL' && !c.phone) c.phone = val;
+      else if (base === 'ORG' && !c.org) c.org = val.replace(/;/g, ' ').trim();
+      else if (base === 'TITLE') c.title = val;
+      else if (base === 'URL') c.url = val;
+    }
+    if (CONTACT_FIELDS.some(f => c[f])) out.push(c);
+  }
+  return out;
+}
+
+/** Serialize contacts as vCard 3.0. */
+export function buildVcards(contacts: Contact[]): string {
+  return contacts.map(c => {
+    const lines = ['BEGIN:VCARD', 'VERSION:3.0'];
+    if (c.name) { lines.push(`FN:${c.name}`); lines.push(`N:${c.name};;;;`); }
+    if (c.org) lines.push(`ORG:${c.org}`);
+    if (c.title) lines.push(`TITLE:${c.title}`);
+    if (c.phone) lines.push(`TEL:${c.phone}`);
+    if (c.email) lines.push(`EMAIL:${c.email}`);
+    if (c.url) lines.push(`URL:${c.url}`);
+    lines.push('END:VCARD');
+    return lines.join('\n');
+  }).join('\n');
+}
+
+const escapeCsv = (s: string) => (/[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s);
+
+/** Contacts → CSV with a fixed header row. */
+export function contactsToCsv(contacts: Contact[]): string {
+  const header = CONTACT_FIELDS.join(',');
+  const rows = contacts.map(c => CONTACT_FIELDS.map(f => escapeCsv(c[f])).join(','));
+  return [header, ...rows].join('\n');
+}
+
+/** Minimal RFC-4180 CSV row parser (handles quotes, escaped quotes, newlines). */
+export function parseCsv(text: string): string[][] {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = '';
+  let inQuotes = false;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') { field += '"'; i++; }
+        else inQuotes = false;
+      } else field += ch;
+    } else if (ch === '"') inQuotes = true;
+    else if (ch === ',') { row.push(field); field = ''; }
+    else if (ch === '\n' || ch === '\r') {
+      if (ch === '\r' && text[i + 1] === '\n') i++;
+      row.push(field); field = '';
+      rows.push(row); row = [];
+    } else field += ch;
+  }
+  if (field !== '' || row.length > 0) { row.push(field); rows.push(row); }
+  return rows.filter(r => r.some(c => c !== ''));
+}
+
+/** CSV → contacts, mapping columns by the header names. */
+export function csvToContacts(csv: string): Contact[] {
+  const rows = parseCsv(csv);
+  if (rows.length === 0) return [];
+  const header = rows[0].map(h => h.trim().toLowerCase());
+  return rows.slice(1).map(r => {
+    const c = emptyContact();
+    header.forEach((h, i) => {
+      const key = CONTACT_FIELDS.find(f => f === h);
+      if (key) c[key] = (r[i] ?? '').trim();
+    });
+    return c;
+  }).filter(c => CONTACT_FIELDS.some(f => c[f]));
+}
diff --git a/src/tools/image/collage.lib.test.ts b/src/tools/image/collage.lib.test.ts
new file mode 100644
index 0000000..8ed0fea
--- /dev/null
+++ b/src/tools/image/collage.lib.test.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { gridLayout } from './collage.lib';
+
+describe('gridLayout', () => {
+  it('places a 2×2 grid with even gaps', () => {
+    const cells = gridLayout(4, 2, 420, 420, 20);
+    // cellW = (420 - 20*3)/2 = 180
+    expect(cells).toHaveLength(4);
+    expect(cells[0]).toEqual({ index: 0, x: 20, y: 20, w: 180, h: 180 });
+    expect(cells[1]).toMatchObject({ x: 220, y: 20 });
+    expect(cells[2]).toMatchObject({ x: 20, y: 220 });
+    expect(cells[3]).toMatchObject({ x: 220, y: 220 });
+  });
+
+  it('handles a partial last row (uniform cell size)', () => {
+    const cells = gridLayout(3, 2, 420, 420, 20); // 2 cols, 2 rows
+    expect(cells).toHaveLength(3);
+    expect(cells[0].h).toBeCloseTo(180, 5);
+    expect(cells[2]).toMatchObject({ x: 20 }); // starts a new row
+  });
+
+  it('returns empty for non-positive inputs', () => {
+    expect(gridLayout(0, 2, 100, 100, 10)).toEqual([]);
+    expect(gridLayout(4, 0, 100, 100, 10)).toEqual([]);
+  });
+});
diff --git a/src/tools/image/collage.lib.ts b/src/tools/image/collage.lib.ts
new file mode 100644
index 0000000..90a7bc8
--- /dev/null
+++ b/src/tools/image/collage.lib.ts
@@ -0,0 +1,22 @@
+/** Pure grid-layout math for the Photo Collage tool. */
+
+export interface Cell { index: number; x: number; y: number; w: number; h: number }
+
+/**
+ * Lay out `count` cells in a grid of `cols` columns within a `width`×`height`
+ * canvas, separated (and bordered) by `gap` pixels. The last row may be partly
+ * empty but cells keep a uniform size.
+ */
+export function gridLayout(count: number, cols: number, width: number, height: number, gap: number): Cell[] {
+  if (count <= 0 || cols <= 0) return [];
+  const rows = Math.ceil(count / cols);
+  const cellW = (width - gap * (cols + 1)) / cols;
+  const cellH = (height - gap * (rows + 1)) / rows;
+  const cells: Cell[] = [];
+  for (let i = 0; i < count; i++) {
+    const r = Math.floor(i / cols);
+    const c = i % cols;
+    cells.push({ index: i, x: gap + c * (cellW + gap), y: gap + r * (cellH + gap), w: cellW, h: cellH });
+  }
+  return cells;
+}