From 282a890ebcfa19a292aa9206c62baa2b8db148d7 Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 14 Aug 2026 07:45:07 +0700
Subject: [PATCH 1/3] feat(image): add passport framing guide to Pas Foto

Overlay crown/chin lines and a centered head oval on the preview so users
can frame to standard ID/passport head proportions, with a show/hide
toggle. Guides are preview-only and never appear in the exported PDF.
---
 src/islands/image/PasFoto.tsx        | 38 +++++++++++++++++++++++++++-
 src/tools/image/pas-foto.lib.test.ts | 20 ++++++++++++++-
 src/tools/image/pas-foto.lib.ts      | 29 +++++++++++++++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/src/islands/image/PasFoto.tsx b/src/islands/image/PasFoto.tsx
index 2d3e841..0cfaf4f 100644
--- a/src/islands/image/PasFoto.tsx
+++ b/src/islands/image/PasFoto.tsx
@@ -13,6 +13,7 @@ import {
   cmToPt,
   photoPx,
   sheetLayout,
+  headGuideBox,
   type PhotoSize,
   type Sheet,
 } from '@/tools/image/pas-foto.lib';
@@ -20,6 +21,8 @@ import type { Lang } from '@/i18n/config';
 
 const GAP_CM = 0.2;
 const MARGIN_CM = 0.3;
+// Framing-guide geometry in a 0–100 viewBox (drawn only on the preview).
+const GUIDE = headGuideBox(100, 100);
 const BG_PRESETS = [
   { color: '#e02424', label: 'Merah' },
   { color: '#1e50e0', label: 'Biru' },
@@ -45,6 +48,8 @@ const TR: Record<Lang, {
   genFailed: string;
   copies: (n: number) => string;
   reset: string;
+  guide: string;
+  guideHint: string;
 }> = {
   en: {
     intro: 'Make a print-ready ID photo (pas foto): remove the background, pick a color and size, and download a PDF that tiles copies onto a photo sheet — ready to print. Everything runs in your browser.',
@@ -65,6 +70,8 @@ const TR: Record<Lang, {
     genFailed: 'Could not generate the PDF.',
     copies: (n) => `${n} copies per sheet`,
     reset: 'Clear',
+    guide: 'Show framing guide',
+    guideHint: 'Align the crown and chin to the dashed lines for a passport-style crop.',
   },
   id: {
     intro: 'Buat pas foto siap cetak: hapus latar belakang, pilih warna dan ukuran, lalu unduh PDF berisi banyak salinan dalam satu lembar foto — siap dicetak. Semuanya berjalan di browser Anda.',
@@ -85,6 +92,8 @@ const TR: Record<Lang, {
     genFailed: 'Tidak dapat membuat PDF.',
     copies: (n) => `${n} salinan per lembar`,
     reset: 'Bersihkan',
+    guide: 'Tampilkan panduan bingkai',
+    guideHint: 'Sejajarkan puncak kepala dan dagu ke garis putus-putus untuk hasil gaya paspor.',
   },
 };
 
@@ -98,6 +107,7 @@ export default function PasFoto({ lang = 'en' }: { lang?: Lang }) {
   const [sheet, setSheet] = useState<Sheet>(SHEETS[0]); // 4R
   const [zoom, setZoom] = useState(1);
   const [offsetY, setOffsetY] = useState(0); // -0.5 .. 0.5 of frame height
+  const [showGuide, setShowGuide] = useState(true);
   const [busy, setBusy] = useState(false);
   const [stage, setStage] = useState('');
   const [percent, setPercent] = useState(0);
@@ -276,8 +286,34 @@ export default function PasFoto({ lang = 'en' }: { lang?: Lang }) {
           {/* Preview */}
           <div className="space-y-2">
             <div className="flex justify-center border-2 border-border bg-muted p-3">
-              <canvas ref={previewRef} className="h-auto max-h-[60vh] w-auto border border-border" />
+              <div className="relative inline-block border border-border">
+                <canvas ref={previewRef} className="block h-auto max-h-[60vh] w-auto" />
+                {showGuide && (
+                  <svg
+                    viewBox="0 0 100 100"
+                    preserveAspectRatio="none"
+                    className="pointer-events-none absolute inset-0 h-full w-full"
+                  >
+                    {/* Dark halo behind, light line on top → visible on any background. */}
+                    <g fill="none" stroke="rgba(0,0,0,0.45)" strokeWidth={1.4}>
+                      <line x1={0} y1={GUIDE.crownY} x2={100} y2={GUIDE.crownY} />
+                      <line x1={0} y1={GUIDE.chinY} x2={100} y2={GUIDE.chinY} />
+                      <ellipse cx={GUIDE.cx} cy={GUIDE.cy} rx={GUIDE.rx} ry={GUIDE.ry} />
+                    </g>
+                    <g fill="none" stroke="rgba(255,255,255,0.95)" strokeWidth={0.5} strokeDasharray="2 2">
+                      <line x1={0} y1={GUIDE.crownY} x2={100} y2={GUIDE.crownY} />
+                      <line x1={0} y1={GUIDE.chinY} x2={100} y2={GUIDE.chinY} />
+                      <ellipse cx={GUIDE.cx} cy={GUIDE.cy} rx={GUIDE.rx} ry={GUIDE.ry} />
+                    </g>
+                  </svg>
+                )}
+              </div>
             </div>
+            <label className="flex items-center gap-2 text-sm font-semibold">
+              <input type="checkbox" checked={showGuide} onChange={e => setShowGuide(e.target.checked)} className="h-4 w-4 accent-accent" />
+              {t.guide}
+            </label>
+            {showGuide && <p className="text-xs text-muted-foreground">{t.guideHint}</p>}
             <label className="block space-y-1 text-sm">
               <span className="flex justify-between font-semibold"><span>{t.zoom}</span><span>{zoom.toFixed(2)}×</span></span>
               <input type="range" min={0.5} max={2} step={0.01} value={zoom}
diff --git a/src/tools/image/pas-foto.lib.test.ts b/src/tools/image/pas-foto.lib.test.ts
index da6d921..584ee1d 100644
--- a/src/tools/image/pas-foto.lib.test.ts
+++ b/src/tools/image/pas-foto.lib.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { cmToPt, photoPx, sheetLayout, PHOTO_SIZES, SHEETS } from './pas-foto.lib';
+import { cmToPt, photoPx, sheetLayout, headGuideBox, PHOTO_SIZES, SHEETS } from './pas-foto.lib';
 
 describe('cmToPt', () => {
   it('converts cm to PDF points', () => {
@@ -50,6 +50,24 @@ describe('sheetLayout', () => {
   });
 });
 
+describe('headGuideBox', () => {
+  it('places crown, chin and a centered head oval for a 100x100 frame', () => {
+    const g = headGuideBox(100, 100);
+    expect(g.crownY).toBeCloseTo(8, 5);
+    expect(g.chinY).toBeCloseTo(85, 5);
+    expect(g.cx).toBeCloseTo(50, 5);
+    expect(g.rx).toBeCloseTo(26, 5); // widthRatio 0.52 → diameter 52 → radius 26
+    expect(g.ry).toBeCloseTo(38.5, 5); // (85-8)/2
+    expect(g.cy).toBeCloseTo(46.5, 5); // (8+85)/2
+  });
+
+  it('scales with the frame size', () => {
+    const g = headGuideBox(300, 400);
+    expect(g.crownY).toBeCloseTo(32, 5); // 0.08 * 400
+    expect(g.cx).toBeCloseTo(150, 5);
+  });
+});
+
 describe('constants', () => {
   it('exposes the three standard photo sizes', () => {
     expect(PHOTO_SIZES.map(s => s.id)).toEqual(['2x3', '3x4', '4x6']);
diff --git a/src/tools/image/pas-foto.lib.ts b/src/tools/image/pas-foto.lib.ts
index 08cca05..029a83d 100644
--- a/src/tools/image/pas-foto.lib.ts
+++ b/src/tools/image/pas-foto.lib.ts
@@ -48,6 +48,35 @@ export function cmToPt(cm: number): number {
   return cm * CM_TO_PT;
 }
 
+/**
+ * Framing guide proportions for an ID/passport-style photo, as fractions of
+ * the frame height (crown/chin) and width (head oval). Roughly the ICAO/
+ * passport convention: the head fills most of the frame, with a little
+ * headroom above the crown. Guides are advisory — shown on the preview only.
+ */
+export const HEAD_GUIDE = { crown: 0.08, chin: 0.85, widthRatio: 0.52 };
+
+/** Guide geometry (crown/chin lines + centered head oval) for a W×H frame. */
+export function headGuideBox(w: number, h: number): {
+  crownY: number;
+  chinY: number;
+  cx: number;
+  cy: number;
+  rx: number;
+  ry: number;
+} {
+  const crownY = HEAD_GUIDE.crown * h;
+  const chinY = HEAD_GUIDE.chin * h;
+  return {
+    crownY,
+    chinY,
+    cx: w / 2,
+    cy: (crownY + chinY) / 2,
+    rx: (HEAD_GUIDE.widthRatio * w) / 2,
+    ry: (chinY - crownY) / 2,
+  };
+}
+
 /** Pixel dimensions of one photo at the given print DPI. */
 export function photoPx(wCm: number, hCm: number, dpi: number = DPI): { w: number; h: number } {
   return {

From cb87fd058fbe34ba3f09bdda4e6e9f8f92f4b532 Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 14 Aug 2026 07:45:07 +0700
Subject: [PATCH 2/3] fix(analytics): fire Google Ads page-view conversion once
 per session

Gate the conversion behind a sessionStorage flag so a single visitor
browsing multiple tools registers one conversion per visit instead of one
per SPA route change.
---
 src/layouts/Base.astro | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 298c8b0..c058ecf 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -169,8 +169,15 @@ const jsonLdBlocks = [siteJsonLd, ...(Array.isArray(jsonLd) ? jsonLd : jsonLd ?
           window.gtag = window.gtag || function () { window.dataLayer.push(arguments); };
           window.gtag('js', new Date());
           window.gtag('config', 'AW-18373579775');
-          // Page-view conversion — fire on first load and on every SPA navigation.
+          // Page-view conversion — count once per visit. The listener stays on
+          // astro:page-load so a first navigation still fires, but the
+          // sessionStorage flag stops a single visitor browsing multiple tools
+          // from registering a conversion per SPA route change.
           function fireConversion() {
+            try {
+              if (sessionStorage.getItem('gwt-ads-conv')) return;
+              sessionStorage.setItem('gwt-ads-conv', '1');
+            } catch (e) { /* private mode: fall through and fire */ }
             window.gtag('event', 'conversion', { send_to: 'AW-18373579775/4BVPCOXG99wcEP-nmrlE' });
           }
           fireConversion();

From 1a08cb97b8c3fca707cfba9bd7f55f1c26612386 Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Fri, 14 Aug 2026 08:09:05 +0700
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20add=207=20tools=20=E2=80=94=20hash?=
 =?UTF-8?q?=20text,=20minifier,=20PPTX=20viewer,=20subtitle=20editor,=20vo?=
 =?UTF-8?q?ice=20recorder,=20PDF=20image=20extract,=20CIDR=20calc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hash Text (Dev): MD5/SHA-1/256/512/CRC32 of pasted text via hash-wasm.
- CIDR Calculator (Dev): IPv4 subnet math — network/broadcast/mask/host range.
- HTML/CSS/JS Minifier (Dev): csso + terser (dynamic) + a safe HTML collapser.
- Subtitle Editor (Media): parse, retime and convert SRT <-> WebVTT.
- Voice Recorder (Media): mic capture via the shared useAudioRecorder hook.
- Extract Images from PDF (PDF): embedded image objects via pdf.js.
- PPTX Viewer (Documents): lightweight OOXML slide text + image reader.

All client-side. Pure libs unit-tested; EN + ID SEO with how-to for each.
---
 astro.config.mjs                              |   2 +
 .../plans/2026-08-14-tools-batch-7.md         |  36 +++
 package-lock.json                             |  47 +++-
 package.json                                  |   2 +
 src/islands/dev/CidrCalculator.tsx            |  97 +++++++
 src/islands/dev/HashText.tsx                  |  68 +++++
 src/islands/dev/Minifier.tsx                  | 111 ++++++++
 src/islands/documents/PptxViewer.tsx          | 112 +++++++++
 src/islands/media/SubtitleEditor.tsx          | 117 +++++++++
 src/islands/media/VoiceRecorder.tsx           | 114 +++++++++
 src/islands/pdf/PdfExtractImages.tsx          | 114 +++++++++
 src/registry/tool-seo.ts                      | 236 ++++++++++++++++++
 src/registry/tools.ts                         |  79 +++++-
 src/tools/dev/cidr.lib.test.ts                |  44 ++++
 src/tools/dev/cidr.lib.ts                     |  86 +++++++
 src/tools/dev/hash-text.lib.test.ts           |  25 ++
 src/tools/dev/hash-text.lib.ts                |  35 +++
 src/tools/dev/minify.lib.test.ts              |  40 +++
 src/tools/dev/minify.lib.ts                   |  48 ++++
 src/tools/documents/pptx.lib.test.ts          |  49 ++++
 src/tools/documents/pptx.lib.ts               | 101 ++++++++
 src/tools/media/subtitle.lib.test.ts          |  62 +++++
 src/tools/media/subtitle.lib.ts               |  78 ++++++
 src/tools/pdf/extract-images.lib.test.ts      |  13 +
 src/tools/pdf/extract-images.lib.ts           | 118 +++++++++
 src/types/csso.d.ts                           |   3 +
 26 files changed, 1827 insertions(+), 10 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-08-14-tools-batch-7.md
 create mode 100644 src/islands/dev/CidrCalculator.tsx
 create mode 100644 src/islands/dev/HashText.tsx
 create mode 100644 src/islands/dev/Minifier.tsx
 create mode 100644 src/islands/documents/PptxViewer.tsx
 create mode 100644 src/islands/media/SubtitleEditor.tsx
 create mode 100644 src/islands/media/VoiceRecorder.tsx
 create mode 100644 src/islands/pdf/PdfExtractImages.tsx
 create mode 100644 src/tools/dev/cidr.lib.test.ts
 create mode 100644 src/tools/dev/cidr.lib.ts
 create mode 100644 src/tools/dev/hash-text.lib.test.ts
 create mode 100644 src/tools/dev/hash-text.lib.ts
 create mode 100644 src/tools/dev/minify.lib.test.ts
 create mode 100644 src/tools/dev/minify.lib.ts
 create mode 100644 src/tools/documents/pptx.lib.test.ts
 create mode 100644 src/tools/documents/pptx.lib.ts
 create mode 100644 src/tools/media/subtitle.lib.test.ts
 create mode 100644 src/tools/media/subtitle.lib.ts
 create mode 100644 src/tools/pdf/extract-images.lib.test.ts
 create mode 100644 src/tools/pdf/extract-images.lib.ts
 create mode 100644 src/types/csso.d.ts

diff --git a/astro.config.mjs b/astro.config.mjs
index e8701e7..16c02d5 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -135,6 +135,8 @@ export default defineConfig({
           '**/html2canvas*.js',
           '**/heic-to*.js',
           '**/libheif*.js',
+          '**/terser*.js',
+          '**/csso*.js',
           'og/*.png',
         ],
         runtimeCaching: [
diff --git a/docs/superpowers/plans/2026-08-14-tools-batch-7.md b/docs/superpowers/plans/2026-08-14-tools-batch-7.md
new file mode 100644
index 0000000..4ceabfb
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-14-tools-batch-7.md
@@ -0,0 +1,36 @@
+# Seven-Tool Batch — Spec + Plan
+
+**Date:** 2026-08-14. One branch (`feat/tools-batch-7`), one PR → develop, bundled prod promotion.
+
+All client-side. Each tool: pure lib (+ Vitest) where there's real logic, thin island, registry entry, **EN + ID SEO with howTo**. Bahasa uses "tool" loanword.
+
+## Global Constraints
+- Commit under personal noreply identity; no AI-attribution trailers; no absolute machine paths.
+- Heavy deps dynamic-imported in the lib + chunk added to `workbox.globIgnores`.
+- New tools `status: 'beta'`.
+
+## Tools
+
+### 1. CIDR Calculator (`cidr-calculator`, Dev, icon `Network`)
+Pure lib `src/tools/dev/cidr.lib.ts`: `parseCidr('192.168.1.0/24')` → network, broadcast, netmask, wildcard, first/last host, host count, /prefix. IPv4. Unit-tested (parse, edge /31 /32, invalid). Island: input → summary rows + Copy.
+
+### 2. Hash Text (`hash-text`, Dev, icon `Hash`)
+Lib `src/tools/dev/hash-text.lib.ts`: `hashText(text, algo)` via `hash-wasm` one-shot (md5/sha1/sha256/sha512/crc32), `ALGORITHMS` list. Dynamic-import hash-wasm. Tested with a known vector (`sha256('abc')`). Island: textarea → all-algos or selected → rows + Copy.
+
+### 3. SRT/VTT Editor (`subtitle-editor`, Media, icon `Subtitles`)
+Lib `src/tools/media/subtitle.lib.ts`: `parseSubtitles(text)` (auto-detect SRT vs VTT) → `Cue[] = {index,start,end,text}`; `toSrt(cues)`, `toVtt(cues)`, `formatTimestamp`. Unit-tested (round-trip, cross-convert, malformed tolerance). Island: paste/upload → editable cue list + convert + download .srt/.vtt.
+
+### 4. HTML/CSS/JS Minifier (`minifier`, Dev, icon `Minimize2`)
+Lib `src/tools/dev/minify.lib.ts`: `minifyCss(css)` (csso, dynamic), `minifyJs(js)` (terser, dynamic, async), `minifyHtml(html)` (hand-rolled: strip comments, collapse inter-tag whitespace, preserve `<pre>/<textarea>/<script>/<style>`). HTML minifier unit-tested (pure). Add `**/terser*.js`, `**/csso*.js` to globIgnores. Island: language tabs (HTML/CSS/JS) → minify → output + size delta + Copy/Download.
+
+### 5. Voice Recorder (`voice-recorder`, Media, icon `Mic`)
+Island `src/islands/media/VoiceRecorder.tsx` consumes existing `useAudioRecorder` hook: record → timer → `<audio controls>` playback (with the `duration=Infinity` seek fix) → download `recording.webm`. No new lib (hook already tested). Permission errors via `Alert`.
+
+### 6. Extract Images from PDF (`pdf-extract-images`, PDF, icon `FileImage`)
+Lib `src/tools/pdf/extract-images.lib.ts`: via `pdfjs-dist` — `getOperatorList` per page, collect `OPS.paintImageXObject` names, resolve `page.objs.get(name)` → draw to canvas → PNG blob; dedupe by name. Returns `{name, blob, width, height}[]`. Dynamic-import pdfjs (already globIgnored region). Island: Dropzone(pdf) → grid of images, per-image download + ZIP-all (`downloadService.downloadZip`). Pure helpers (dedupe/name) unit-tested; pdfjs path smoke-only.
+
+### 7. PPTX Viewer (`pptx-viewer`, Documents, icon `Presentation`)
+Lib `src/tools/documents/pptx.lib.ts` mirroring `odt.lib`: `fflate.unzipSync` → read `ppt/slides/slideN.xml` (ordered via `ppt/presentation.xml` / slide rels), parse with `DOMParser`, extract text runs (`a:t`) + basic structure into a safe HTML string per slide (escaped); map `ppt/media/*` for images (best-effort). Honest fidelity: text + images + layout order, NOT pixel-perfect rendering. Unit-tested (parse a synthetic minimal pptx built with fflate `zipSync`). Island mirrors `OdtViewer`: dynamic-import lib, render slides via `dangerouslySetInnerHTML` into styled slide frames, slide nav, Print.
+
+## Verify + Ship
+Per tool: failing test → implement → pass. Then full `vitest + lint + build` green; both `/tools/<id>/` and `/id/` built for all 7. One PR → develop → merge → promote develop→main (bundles PR #206 + these 7) → verify each live URL.
diff --git a/package-lock.json b/package-lock.json
index bb74b72..7af50c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "astro": "^4.16.19",
         "cmdk": "^0.2.1",
         "comlink": "^4.4.2",
+        "csso": "^5.0.5",
         "docx": "^9.7.1",
         "docx-preview": "^0.4.0",
         "dompurify": "^3.4.12",
@@ -70,6 +71,7 @@
         "smol-toml": "^1.7.0",
         "sql-formatter": "^15.8.2",
         "tailwindcss": "^3.4.19",
+        "terser": "^5.50.0",
         "turndown": "^7.2.4",
         "upscaler": "^1.0.0",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
@@ -4344,7 +4346,6 @@
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -9298,7 +9299,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cac": {
@@ -10028,6 +10028,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/cssstyle": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
@@ -19107,7 +19140,6 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -19118,7 +19150,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -19685,10 +19716,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.49.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.49.0.tgz",
-      "integrity": "sha512-SNiDnXyHSrxVcIOtVbULzcTmniUiwcV7Nwdyj1twVubeTmbjoa8p69KKDpfkdoOavuM4/GRm1+ykI8qqnavHoA==",
-      "dev": true,
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.50.0.tgz",
+      "integrity": "sha512-CN9BVxWhgS/hRxtUMjtC2uRWSTcSfQFHMDWma6sKKfIivCD91sM+FOPfvwoaRMqCSrUpe1nv3jDamd9eEQ4y+w==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -19707,7 +19737,6 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/text-segmentation": {
diff --git a/package.json b/package.json
index c355dde..de0fbcd 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "astro": "^4.16.19",
     "cmdk": "^0.2.1",
     "comlink": "^4.4.2",
+    "csso": "^5.0.5",
     "docx": "^9.7.1",
     "docx-preview": "^0.4.0",
     "dompurify": "^3.4.12",
@@ -110,6 +111,7 @@
     "smol-toml": "^1.7.0",
     "sql-formatter": "^15.8.2",
     "tailwindcss": "^3.4.19",
+    "terser": "^5.50.0",
     "turndown": "^7.2.4",
     "upscaler": "^1.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
diff --git a/src/islands/dev/CidrCalculator.tsx b/src/islands/dev/CidrCalculator.tsx
new file mode 100644
index 0000000..45fc3e6
--- /dev/null
+++ b/src/islands/dev/CidrCalculator.tsx
@@ -0,0 +1,97 @@
+import { useMemo, useState } from 'react';
+import { Alert } from '@/components/ui/Alert';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { parseCidr, type CidrInfo } from '@/tools/dev/cidr.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string;
+  label: string;
+  invalid: string;
+  rows: Record<keyof Omit<CidrInfo, 'prefix'>, string>;
+  hosts: string;
+}> = {
+  en: {
+    intro: 'Enter an IPv4 address with a CIDR prefix (e.g. 192.168.1.0/24) to see the network, broadcast, mask, host range and count. Everything is computed in your browser.',
+    label: 'IPv4 address / CIDR',
+    invalid: 'Enter a valid IPv4 address and prefix, e.g. 10.0.0.0/24.',
+    rows: {
+      address: 'Address', netmask: 'Netmask', wildcard: 'Wildcard mask', network: 'Network address',
+      broadcast: 'Broadcast address', firstHost: 'First usable host', lastHost: 'Last usable host',
+      totalHosts: 'Total addresses', usableHosts: 'Usable hosts', ipClass: 'Class',
+    },
+    hosts: 'hosts',
+  },
+  id: {
+    intro: 'Masukkan alamat IPv4 dengan prefix CIDR (mis. 192.168.1.0/24) untuk melihat network, broadcast, mask, rentang host, dan jumlahnya. Semua dihitung di browser Anda.',
+    label: 'Alamat IPv4 / CIDR',
+    invalid: 'Masukkan alamat IPv4 dan prefix yang valid, mis. 10.0.0.0/24.',
+    rows: {
+      address: 'Alamat', netmask: 'Netmask', wildcard: 'Wildcard mask', network: 'Alamat network',
+      broadcast: 'Alamat broadcast', firstHost: 'Host pertama', lastHost: 'Host terakhir',
+      totalHosts: 'Total alamat', usableHosts: 'Host tersedia', ipClass: 'Kelas',
+    },
+    hosts: 'host',
+  },
+};
+
+const ORDER: (keyof Omit<CidrInfo, 'prefix'>)[] = [
+  'address', 'network', 'broadcast', 'netmask', 'wildcard',
+  'firstHost', 'lastHost', 'usableHosts', 'totalHosts', 'ipClass',
+];
+
+export default function CidrCalculator({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [value, setValue] = useState('192.168.1.0/24');
+
+  const parsed = useMemo(() => {
+    try {
+      return { info: parseCidr(value) };
+    } catch {
+      return { error: true as const };
+    }
+  }, [value]);
+
+  const info = 'info' in parsed ? parsed.info : undefined;
+  const copyText = info
+    ? ORDER.map(k => `${t.rows[k]}: ${info[k]}`).join('\n')
+    : '';
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <label className="block space-y-1">
+        <span className="block text-sm font-semibold">{t.label}</span>
+        <input
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          spellCheck={false}
+          className="w-full border-2 border-border bg-muted p-3 font-mono text-sm"
+          placeholder="192.168.1.0/24"
+        />
+      </label>
+
+      {value.trim() && !info && <Alert variant="error">{t.invalid}</Alert>}
+
+      {info && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold">/{info.prefix}</span>
+            <CopyButton value={copyText} />
+          </div>
+          <div className="divide-y divide-border border-2 border-border">
+            {ORDER.map(k => (
+              <div key={k} className="flex flex-wrap items-baseline gap-x-3 px-3 py-2 text-sm">
+                <span className="w-40 shrink-0 font-medium text-muted-foreground">{t.rows[k]}</span>
+                <span className="break-all font-mono">
+                  {info[k]}{(k === 'totalHosts' || k === 'usableHosts') ? ` ${t.hosts}` : ''}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/dev/HashText.tsx b/src/islands/dev/HashText.tsx
new file mode 100644
index 0000000..397d480
--- /dev/null
+++ b/src/islands/dev/HashText.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { TextArea } from '@/components/ui/TextArea';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { HASH_ALGOS, hashAll, type HashAlgo } from '@/tools/dev/hash-text.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, { intro: string; input: string; placeholder: string; empty: string; uppercase: string }> = {
+  en: {
+    intro: 'Generate MD5, SHA-1, SHA-256, SHA-512 and CRC32 hashes of any text, instantly and entirely in your browser — nothing is uploaded.',
+    input: 'Text to hash',
+    placeholder: 'Type or paste text…',
+    empty: 'Enter some text to see its hashes.',
+    uppercase: 'Uppercase',
+  },
+  id: {
+    intro: 'Buat hash MD5, SHA-1, SHA-256, SHA-512, dan CRC32 dari teks apa pun, seketika dan sepenuhnya di browser Anda — tidak ada yang diunggah.',
+    input: 'Teks untuk di-hash',
+    placeholder: 'Ketik atau tempel teks…',
+    empty: 'Masukkan teks untuk melihat hash-nya.',
+    uppercase: 'Huruf besar',
+  },
+};
+
+export default function HashText({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [text, setText] = useState('');
+  const [hashes, setHashes] = useState<Record<HashAlgo, string> | null>(null);
+  const [upper, setUpper] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!text) { setHashes(null); return; }
+    hashAll(text).then(h => { if (!cancelled) setHashes(h); });
+    return () => { cancelled = true; };
+  }, [text]);
+
+  const format = (h: string) => (upper ? h.toUpperCase() : h);
+
+  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={5} placeholder={t.placeholder} />
+      </div>
+
+      <label className="flex items-center gap-2 text-sm font-semibold">
+        <input type="checkbox" checked={upper} onChange={e => setUpper(e.target.checked)} className="h-4 w-4 accent-accent" />
+        {t.uppercase}
+      </label>
+
+      {!hashes && <p className="text-sm text-muted-foreground">{t.empty}</p>}
+
+      {hashes && (
+        <div className="divide-y divide-border border-2 border-border">
+          {HASH_ALGOS.map(a => (
+            <div key={a.key} className="flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-2 text-sm">
+              <span className="w-24 shrink-0 font-bold">{a.label}</span>
+              <span className="min-w-0 flex-1 break-all font-mono text-muted-foreground">{format(hashes[a.key])}</span>
+              <CopyButton value={format(hashes[a.key])} />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/dev/Minifier.tsx b/src/islands/dev/Minifier.tsx
new file mode 100644
index 0000000..181c5eb
--- /dev/null
+++ b/src/islands/dev/Minifier.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { TextArea } from '@/components/ui/TextArea';
+import { Button } from '@/components/ui/Button';
+import { Alert } from '@/components/ui/Alert';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { DownloadTextButton } from '@/components/ui/DownloadTextButton';
+import { minifyHtml, minifyCss, minifyJs, type MinifyLang } from '@/tools/dev/minify.lib';
+import type { Lang } from '@/i18n/config';
+
+const LANGS: { key: MinifyLang; label: string; ext: string; mime: string }[] = [
+  { key: 'html', label: 'HTML', ext: 'html', mime: 'text/html' },
+  { key: 'css', label: 'CSS', ext: 'css', mime: 'text/css' },
+  { key: 'js', label: 'JavaScript', ext: 'js', mime: 'text/javascript' },
+];
+
+const TR: Record<Lang, {
+  intro: string;
+  input: string;
+  minify: string;
+  working: string;
+  output: string;
+  saved: (pct: number, from: number, to: number) => string;
+  failed: string;
+}> = {
+  en: {
+    intro: 'Minify HTML, CSS or JavaScript to shrink file size — runs entirely in your browser, nothing is uploaded.',
+    input: 'Source',
+    minify: 'Minify',
+    working: 'Minifying…',
+    output: 'Minified',
+    saved: (pct, from, to) => `${from} → ${to} bytes · saved ${pct}%`,
+    failed: 'Could not minify — check the syntax.',
+  },
+  id: {
+    intro: 'Minify HTML, CSS, atau JavaScript untuk memperkecil ukuran berkas — berjalan sepenuhnya di browser Anda, tidak ada yang diunggah.',
+    input: 'Sumber',
+    minify: 'Minify',
+    working: 'Memproses…',
+    output: 'Hasil minify',
+    saved: (pct, from, to) => `${from} → ${to} bytes · hemat ${pct}%`,
+    failed: 'Tidak dapat minify — periksa sintaksnya.',
+  },
+};
+
+export default function Minifier({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [kind, setKind] = useState<MinifyLang>('css');
+  const [input, setInput] = useState('');
+  const [output, setOutput] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const active = LANGS.find(l => l.key === kind)!;
+
+  const run = async () => {
+    setBusy(true);
+    setError('');
+    setOutput('');
+    try {
+      const out = kind === 'html' ? minifyHtml(input) : kind === 'css' ? await minifyCss(input) : await minifyJs(input);
+      setOutput(out);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const fromBytes = new Blob([input]).size;
+  const toBytes = new Blob([output]).size;
+  const pct = fromBytes > 0 && output ? Math.round((1 - toBytes / fromBytes) * 100) : 0;
+
+  const segClass = (a: boolean) =>
+    `border-2 px-3 py-1 text-sm font-medium transition-all ${a ? 'border-border bg-accent text-accent-foreground shadow-brutal' : 'border-border hover:shadow-brutal'}`;
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <div className="flex flex-wrap gap-1">
+        {LANGS.map(l => (
+          <button key={l.key} onClick={() => { setKind(l.key); setOutput(''); setError(''); }}
+            aria-pressed={kind === l.key} className={segClass(kind === l.key)}>{l.label}</button>
+        ))}
+      </div>
+
+      <div className="space-y-1">
+        <span className="block text-sm font-semibold">{t.input}</span>
+        <TextArea value={input} onChange={e => setInput(e.target.value)} rows={8} spellCheck={false} />
+      </div>
+
+      <Button onClick={run} disabled={!input.trim() || busy}>{busy ? t.working : t.minify}</Button>
+
+      {error && <Alert variant="error">{error}</Alert>}
+
+      {output && (
+        <div className="space-y-2">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <span className="text-sm font-semibold">{t.output}</span>
+            <span className="text-sm font-bold text-green-600 dark:text-green-400">{t.saved(pct, fromBytes, toBytes)}</span>
+            <div className="flex gap-2">
+              <DownloadTextButton text={output} filename={`minified.${active.ext}`} mime={active.mime} />
+              <CopyButton value={output} />
+            </div>
+          </div>
+          <TextArea value={output} readOnly rows={8} spellCheck={false} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/documents/PptxViewer.tsx b/src/islands/documents/PptxViewer.tsx
new file mode 100644
index 0000000..974c7d5
--- /dev/null
+++ b/src/islands/documents/PptxViewer.tsx
@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { Alert } from '@/components/ui/Alert';
+import type { PptxDoc } from '@/tools/documents/pptx.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string;
+  drop: string;
+  dropSub: string;
+  loading: string;
+  failed: string;
+  slide: string;
+  empty: string;
+  note: string;
+}> = {
+  en: {
+    intro: 'Open and read PowerPoint (.pptx) slides in your browser — text and images, slide by slide. The file is never uploaded.',
+    drop: 'Drop a .pptx file or click to browse',
+    dropSub: 'Opened on your device',
+    loading: 'Opening presentation…',
+    failed: 'Could not open this file. Make sure it is a .pptx presentation.',
+    slide: 'Slide',
+    empty: '(no text on this slide)',
+    note: 'This is a lightweight text-and-image viewer, not a pixel-perfect renderer.',
+  },
+  id: {
+    intro: 'Buka dan baca slide PowerPoint (.pptx) di browser Anda — teks dan gambar, slide demi slide. File tidak pernah diunggah.',
+    drop: 'Letakkan file .pptx atau klik untuk memilih',
+    dropSub: 'Dibuka di perangkat Anda',
+    loading: 'Membuka presentasi…',
+    failed: 'Tidak dapat membuka file ini. Pastikan berupa presentasi .pptx.',
+    slide: 'Slide',
+    empty: '(tidak ada teks pada slide ini)',
+    note: 'Ini penampil teks-dan-gambar ringan, bukan renderer yang presisi piksel.',
+  },
+};
+
+export default function PptxViewer({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [doc, setDoc] = useState<PptxDoc | null>(null);
+  const [mediaUrls, setMediaUrls] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => () => { Object.values(mediaUrls).forEach(URL.revokeObjectURL); }, [mediaUrls]);
+
+  const onDrop = async (files: File[]) => {
+    const file = files.find(f => f.name.toLowerCase().endsWith('.pptx'));
+    if (!file) return;
+    setBusy(true);
+    setError('');
+    Object.values(mediaUrls).forEach(URL.revokeObjectURL);
+    setDoc(null);
+    setMediaUrls({});
+    try {
+      const { parsePptx } = await import('@/tools/documents/pptx.lib');
+      const parsed = parsePptx(new Uint8Array(await file.arrayBuffer()));
+      const urls: Record<string, string> = {};
+      for (const [key, bytes] of Object.entries(parsed.media)) {
+        urls[key] = URL.createObjectURL(new Blob([bytes]));
+      }
+      setDoc(parsed);
+      setMediaUrls(urls);
+    } 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>
+
+      <Dropzone onDrop={onDrop} accept=".pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation" 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.loading}</p>}
+      {error && <Alert variant="error">{error}</Alert>}
+
+      {doc && (
+        <div className="space-y-4">
+          <p className="text-xs text-muted-foreground">{t.note}</p>
+          {doc.slides.map((slide, i) => (
+            <div key={i} className="space-y-3 border-2 border-border bg-white p-6 text-black shadow-sm dark:bg-neutral-100">
+              <div className="text-xs font-bold uppercase tracking-wide text-neutral-500">{t.slide} {i + 1}</div>
+              {slide.paragraphs.length > 0 ? (
+                slide.paragraphs.map((p, pi) => (
+                  <p key={pi} className={pi === 0 ? 'text-lg font-bold' : 'text-sm'}>{p}</p>
+                ))
+              ) : (
+                <p className="text-sm italic text-neutral-400">{t.empty}</p>
+              )}
+              {slide.images.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {slide.images.map((key, ii) => (
+                    mediaUrls[key] ? <img key={ii} src={mediaUrls[key]} alt="" className="max-h-48 border border-neutral-300" /> : null
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/media/SubtitleEditor.tsx b/src/islands/media/SubtitleEditor.tsx
new file mode 100644
index 0000000..5ef342c
--- /dev/null
+++ b/src/islands/media/SubtitleEditor.tsx
@@ -0,0 +1,117 @@
+import { useMemo, useState } from 'react';
+import { TextArea } from '@/components/ui/TextArea';
+import { Button } from '@/components/ui/Button';
+import { CopyButton } from '@/components/ui/CopyButton';
+import { DownloadTextButton } from '@/components/ui/DownloadTextButton';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { parseSubtitles, toSrt, toVtt, shiftCues } from '@/tools/media/subtitle.lib';
+import type { Lang } from '@/i18n/config';
+
+const EXAMPLE = `1
+00:00:01,000 --> 00:00:04,000
+Welcome to GoodWebTools
+
+2
+00:00:05,000 --> 00:00:08,500
+Edit, retime and convert subtitles`;
+
+const TR: Record<Lang, {
+  intro: string;
+  drop: string;
+  source: string;
+  cues: (n: number) => string;
+  shift: string;
+  applyShift: string;
+  srt: string;
+  vtt: string;
+  example: string;
+}> = {
+  en: {
+    intro: 'Edit, retime and convert subtitles between SRT and WebVTT — paste or drop a .srt/.vtt file. Everything stays in your browser.',
+    drop: 'Drop a .srt or .vtt file, or paste below',
+    source: 'Subtitle source (SRT or VTT)',
+    cues: n => `${n} ${n === 1 ? 'cue' : 'cues'} parsed`,
+    shift: 'Shift all (seconds)',
+    applyShift: 'Apply shift',
+    srt: 'SRT output',
+    vtt: 'WebVTT output',
+    example: 'Load example',
+  },
+  id: {
+    intro: 'Edit, atur ulang waktu, dan konversi subtitle antara SRT dan WebVTT — tempel atau letakkan file .srt/.vtt. Semuanya tetap di browser Anda.',
+    drop: 'Letakkan file .srt atau .vtt, atau tempel di bawah',
+    source: 'Sumber subtitle (SRT atau VTT)',
+    cues: n => `${n} cue ter-parse`,
+    shift: 'Geser semua (detik)',
+    applyShift: 'Terapkan geser',
+    srt: 'Keluaran SRT',
+    vtt: 'Keluaran WebVTT',
+    example: 'Muat contoh',
+  },
+};
+
+export default function SubtitleEditor({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [input, setInput] = useState('');
+  const [shift, setShift] = useState(0);
+
+  const cues = useMemo(() => parseSubtitles(input), [input]);
+  const srt = useMemo(() => toSrt(cues), [cues]);
+  const vtt = useMemo(() => toVtt(cues), [cues]);
+
+  const onDrop = async (files: File[]) => {
+    if (files[0]) setInput(await files[0].text());
+  };
+
+  const applyShift = () => {
+    if (cues.length) setInput(toSrt(shiftCues(cues, shift)));
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <Dropzone onDrop={onDrop} accept=".srt,.vtt,text/plain" multiple={false}>
+        <p className="text-sm">{t.drop}</p>
+      </Dropzone>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-semibold">{t.source}</span>
+          <button type="button" onClick={() => setInput(EXAMPLE)} className="text-sm text-accent underline">
+            {t.example}
+          </button>
+        </div>
+        <TextArea value={input} onChange={e => setInput(e.target.value)} rows={8} spellCheck={false} />
+        <p className="text-xs text-muted-foreground">{t.cues(cues.length)}</p>
+      </div>
+
+      <div className="flex flex-wrap items-end gap-2">
+        <label className="space-y-1 text-sm">
+          <span className="block font-semibold">{t.shift}</span>
+          <input type="number" step={0.1} value={shift} onChange={e => setShift(Number(e.target.value))}
+            className="w-28 border-2 border-border bg-muted p-2 text-sm" />
+        </label>
+        <Button variant="secondary" onClick={applyShift} disabled={!cues.length}>{t.applyShift}</Button>
+      </div>
+
+      {cues.length > 0 && (
+        <div className="grid gap-4 lg:grid-cols-2">
+          {[{ label: t.srt, text: srt, name: 'subtitles.srt', mime: 'text/plain' },
+            { label: t.vtt, text: vtt, name: 'subtitles.vtt', mime: 'text/vtt' }].map(o => (
+            <div key={o.name} className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-semibold">{o.label}</span>
+                <div className="flex gap-2">
+                  <DownloadTextButton text={o.text} filename={o.name} mime={o.mime} />
+                  <CopyButton value={o.text} />
+                </div>
+              </div>
+              <TextArea value={o.text} readOnly rows={8} spellCheck={false} />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/islands/media/VoiceRecorder.tsx b/src/islands/media/VoiceRecorder.tsx
new file mode 100644
index 0000000..5abf6f1
--- /dev/null
+++ b/src/islands/media/VoiceRecorder.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from 'react';
+import { Mic, Square } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Alert } from '@/components/ui/Alert';
+import { downloadService } from '@/services/download';
+import { useAudioRecorder } from '@/hooks/useAudioRecorder';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string;
+  start: string;
+  stop: string;
+  recording: string;
+  download: string;
+  again: string;
+  hint: string;
+}> = {
+  en: {
+    intro: 'Record audio from your microphone and download it — the recording never leaves your browser.',
+    start: 'Start recording',
+    stop: 'Stop',
+    recording: 'Recording',
+    download: 'Download',
+    again: 'Record again',
+    hint: 'Your browser will ask for microphone permission the first time.',
+  },
+  id: {
+    intro: 'Rekam audio dari mikrofon Anda lalu unduh — rekaman tidak pernah meninggalkan browser Anda.',
+    start: 'Mulai rekam',
+    stop: 'Berhenti',
+    recording: 'Merekam',
+    download: 'Unduh',
+    again: 'Rekam lagi',
+    hint: 'Browser akan meminta izin mikrofon saat pertama kali.',
+  },
+};
+
+function clock(total: number): string {
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+
+export default function VoiceRecorder({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const { recording, seconds, blob, error, start, stop, reset } = useAudioRecorder();
+  const [url, setUrl] = useState('');
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const urlRef = useRef('');
+
+  useEffect(() => {
+    if (!blob) return;
+    if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+    const u = URL.createObjectURL(blob);
+    urlRef.current = u;
+    setUrl(u);
+  }, [blob]);
+
+  useEffect(() => () => { if (urlRef.current) URL.revokeObjectURL(urlRef.current); }, []);
+
+  // MediaRecorder blobs report duration=Infinity, which freezes the seek bar;
+  // seeking once to a huge time forces the browser to compute a real duration.
+  const fixDuration = () => {
+    const el = audioRef.current;
+    if (el && el.duration === Infinity) {
+      el.currentTime = 1e101;
+      el.ontimeupdate = () => { el.ontimeupdate = null; el.currentTime = 0; };
+    }
+  };
+
+  const ext = blob?.type.includes('mp4') ? 'm4a' : blob?.type.includes('ogg') ? 'ogg' : 'webm';
+  const download = () => { if (blob) downloadService.download(blob, `recording.${ext}`); };
+
+  const recordAgain = () => {
+    if (urlRef.current) { URL.revokeObjectURL(urlRef.current); urlRef.current = ''; }
+    setUrl('');
+    reset();
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      {error && <Alert variant="error">{error.message}</Alert>}
+
+      <div className="flex flex-col items-center gap-4 border-2 border-border bg-muted p-8">
+        {recording ? (
+          <>
+            <div className="flex items-center gap-2 text-lg font-bold text-red-600 dark:text-red-400">
+              <span className="h-3 w-3 animate-pulse rounded-full bg-red-600 dark:bg-red-400" />
+              {t.recording} · {clock(seconds)}
+            </div>
+            <Button onClick={stop}><Square className="h-4 w-4" /> {t.stop}</Button>
+          </>
+        ) : !blob ? (
+          <>
+            <Button onClick={start}><Mic className="h-4 w-4" /> {t.start}</Button>
+            <p className="text-xs text-muted-foreground">{t.hint}</p>
+          </>
+        ) : (
+          <div className="w-full space-y-3">
+            {url && (
+              <audio ref={audioRef} controls src={url} onLoadedMetadata={fixDuration} className="w-full" />
+            )}
+            <div className="flex flex-wrap justify-center gap-2">
+              <Button onClick={download}>{t.download} (.{ext})</Button>
+              <Button variant="ghost" onClick={recordAgain}>{t.again}</Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/islands/pdf/PdfExtractImages.tsx b/src/islands/pdf/PdfExtractImages.tsx
new file mode 100644
index 0000000..325927d
--- /dev/null
+++ b/src/islands/pdf/PdfExtractImages.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { Dropzone } from '@/components/ui/Dropzone';
+import { Button } from '@/components/ui/Button';
+import { Alert } from '@/components/ui/Alert';
+import { downloadService } from '@/services/download';
+import { extractPdfImages, type ExtractedImage } from '@/tools/pdf/extract-images.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string;
+  drop: string;
+  dropSub: string;
+  working: string;
+  none: string;
+  found: (n: number) => string;
+  downloadAll: string;
+  failed: string;
+}> = {
+  en: {
+    intro: 'Pull the embedded images out of a PDF and download them individually or as a ZIP. Everything runs in your browser — the PDF is never uploaded.',
+    drop: 'Drop a PDF or click to browse',
+    dropSub: 'Extracted on your device',
+    working: 'Extracting images…',
+    none: 'No embedded images were found in this PDF.',
+    found: n => `${n} ${n === 1 ? 'image' : 'images'} found`,
+    downloadAll: 'Download all as ZIP',
+    failed: 'Could not read this PDF.',
+  },
+  id: {
+    intro: 'Ambil gambar yang tertanam di dalam PDF dan unduh satu per satu atau sebagai ZIP. Semuanya berjalan di browser Anda — PDF tidak pernah diunggah.',
+    drop: 'Letakkan PDF atau klik untuk memilih',
+    dropSub: 'Diekstrak di perangkat Anda',
+    working: 'Mengekstrak gambar…',
+    none: 'Tidak ada gambar tertanam yang ditemukan di PDF ini.',
+    found: n => `${n} gambar ditemukan`,
+    downloadAll: 'Unduh semua sebagai ZIP',
+    failed: 'Tidak dapat membaca PDF ini.',
+  },
+};
+
+export default function PdfExtractImages({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [images, setImages] = useState<ExtractedImage[]>([]);
+  const [urls, setUrls] = useState<string[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [done, setDone] = useState(false);
+
+  useEffect(() => () => { urls.forEach(u => URL.revokeObjectURL(u)); }, [urls]);
+
+  const onDrop = async (files: File[]) => {
+    const file = files.find(f => f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf'));
+    if (!file) return;
+    setBusy(true);
+    setError('');
+    setDone(false);
+    urls.forEach(u => URL.revokeObjectURL(u));
+    setImages([]);
+    setUrls([]);
+    try {
+      const data = await file.arrayBuffer();
+      const found = await extractPdfImages(data);
+      setImages(found);
+      setUrls(found.map(i => URL.createObjectURL(i.blob)));
+      setDone(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t.failed);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const downloadAll = () =>
+    downloadService.downloadZip(images.map(i => ({ blob: i.blob, filename: i.name })), 'pdf-images.zip');
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t.intro}</p>
+
+      <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>
+
+      {busy && <p className="text-sm text-muted-foreground">{t.working}</p>}
+      {error && <Alert variant="error">{error}</Alert>}
+      {done && images.length === 0 && <p className="text-sm text-muted-foreground">{t.none}</p>}
+
+      {images.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.found(images.length)}</span>
+            <Button onClick={downloadAll}>{t.downloadAll}</Button>
+          </div>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+            {images.map((img, i) => (
+              <div key={img.name} className="space-y-1 border-2 border-border p-2">
+                <img src={urls[i]} alt={img.name} className="h-32 w-full bg-white object-contain" />
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-muted-foreground">{img.width}×{img.height}</span>
+                  <button onClick={() => downloadService.download(img.blob, img.name)} className="text-accent underline">
+                    ↓
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/registry/tool-seo.ts b/src/registry/tool-seo.ts
index 553aa17..0d63771 100644
--- a/src/registry/tool-seo.ts
+++ b/src/registry/tool-seo.ts
@@ -77,6 +77,124 @@ const en: Record<string, ToolSeoContent> = {
       { q: 'What is the difference between a static and dynamic QRIS?', a: 'A static QRIS (initiation method 11) has no fixed amount — the payer types it in. A dynamic QRIS (12) encodes a specific amount, usually generated per transaction. The decoder shows which one you have.' },
     ],
   },
+  'hash-text': {
+    title: 'Free Text Hash Generator — MD5, SHA-256, SHA-512, CRC32',
+    description: 'Generate MD5, SHA-1, SHA-256, SHA-512 and CRC32 hashes of any text online. Instant, in your browser — nothing is uploaded.',
+    intro: 'This free text hash generator computes MD5, SHA-1, SHA-256, SHA-512 and CRC32 digests of whatever you type or paste, updating live. Hashing runs entirely on your device, so your text is never uploaded.',
+    howTo: [
+      'Type or paste your text into the box.',
+      'See every hash (MD5, SHA-1, SHA-256, SHA-512, CRC32) computed instantly.',
+      'Toggle uppercase if you need upper-case hex.',
+      'Click a copy button to grab any digest.',
+    ],
+    faqs: [
+      { q: 'Is my text sent to a server?', a: 'No. Hashing happens locally in your browser via WebAssembly, so your text never leaves your device.' },
+      { q: 'Which hash algorithms are supported?', a: 'MD5, SHA-1, SHA-256, SHA-512 and CRC32. MD5 and SHA-1 are shown for compatibility but are not secure for passwords.' },
+      { q: 'Can I hash passwords with this?', a: 'You can, but a raw hash is not a safe way to store passwords — use a salted, slow KDF like bcrypt or Argon2 for that.' },
+      { q: 'Does it work offline?', a: 'Yes. GoodWebTools is a PWA, so once loaded it keeps hashing with no connection.' },
+    ],
+  },
+  'cidr-calculator': {
+    title: 'Free CIDR / Subnet Calculator — Network, Broadcast, Hosts',
+    description: 'An online IPv4 CIDR subnet calculator: enter an address like 192.168.1.0/24 to get the network, broadcast, netmask, wildcard and usable host range. Runs in your browser.',
+    intro: 'This free CIDR calculator takes an IPv4 address and prefix (e.g. 192.168.1.0/24) and works out the network and broadcast addresses, subnet and wildcard masks, first and last usable host, host count and address class — instantly, entirely in your browser.',
+    howTo: [
+      'Enter an IPv4 address with a CIDR prefix, e.g. 10.0.0.0/24.',
+      'Read the network, broadcast, netmask and wildcard mask.',
+      'Check the first/last usable host and the host count.',
+      'Copy the full breakdown with one click.',
+    ],
+    faqs: [
+      { q: 'What does /24 mean?', a: 'The number after the slash is the CIDR prefix — how many leading bits are the network portion. /24 means the first 24 bits are the network, leaving 8 bits (256 addresses, 254 usable hosts).' },
+      { q: 'How are /31 and /32 handled?', a: 'A /32 is a single host. A /31 is a two-address point-to-point link (RFC 3021), so both addresses are usable — the calculator accounts for both.' },
+      { q: 'Is my input uploaded?', a: 'No. All calculations run locally in your browser; nothing is sent anywhere.' },
+      { q: 'Does it support IPv6?', a: 'This calculator focuses on IPv4 subnetting. IPv6 support may come later.' },
+    ],
+  },
+  '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.',
+    intro: 'This free minifier strips comments and unnecessary whitespace from HTML, and fully minifies CSS (with csso) and JavaScript (with terser) to shrink file size. Everything runs on your device, so your code is never uploaded.',
+    howTo: [
+      'Pick HTML, CSS or JavaScript.',
+      'Paste your source code into the box.',
+      'Click Minify to compress it.',
+      'See how many bytes you saved, then copy or download the result.',
+    ],
+    faqs: [
+      { q: 'Is my code uploaded to a server?', a: 'No. Minification runs entirely in your browser, so your code stays on your device.' },
+      { q: 'What libraries power it?', a: 'CSS is minified with csso and JavaScript with terser (both running in your browser). HTML uses a safe whitespace/comment collapser that preserves the contents of pre, textarea, script and style.' },
+      { q: 'Will minifying break my JavaScript?', a: 'terser is a robust, widely used minifier, but always test the output. Invalid input syntax will produce an error rather than broken code.' },
+      { q: 'Does it work offline?', a: 'Yes — as a PWA it keeps working without a connection once loaded.' },
+    ],
+  },
+  'subtitle-editor': {
+    title: 'Free Subtitle Editor — Convert & Retime SRT and VTT',
+    description: 'Edit, retime and convert subtitles between SRT and WebVTT online. Paste or drop a .srt/.vtt file — everything stays in your browser.',
+    intro: 'This free subtitle tool lets you edit, shift the timing of, and convert subtitles between SRT and WebVTT (.vtt). Paste the text or drop a file, adjust it, and download in either format — all in your browser, nothing uploaded.',
+    howTo: [
+      'Paste your subtitles or drop a .srt / .vtt file.',
+      'Edit the text directly, and set a shift (in seconds) to retime every cue.',
+      'See the live SRT and WebVTT output side by side.',
+      'Copy or download the format you need.',
+    ],
+    faqs: [
+      { q: 'Are my subtitle files uploaded?', a: 'No. Parsing, editing and conversion all happen in your browser; your files never leave your device.' },
+      { q: 'What is the difference between SRT and VTT?', a: 'Both are text subtitle formats. WebVTT (used by HTML5 video) starts with a WEBVTT header and uses a dot in timestamps; SRT uses a comma and numbered cues. The tool converts between them.' },
+      { q: 'How does the time shift work?', a: 'Enter a positive or negative number of seconds and apply it to move every cue earlier or later — handy when subtitles are out of sync.' },
+      { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps working with no connection.' },
+    ],
+  },
+  'voice-recorder': {
+    title: 'Free Online Voice Recorder — Record Audio in Your Browser',
+    description: 'Record audio from your microphone and download it, right in your browser. Private — the recording never leaves your device.',
+    intro: 'This free voice recorder captures audio from your microphone and lets you play it back and download it. Recording happens entirely in your browser, so nothing is ever uploaded.',
+    howTo: [
+      'Click Start recording and allow microphone access.',
+      'Speak — a timer shows the elapsed time.',
+      'Click Stop when you are done.',
+      'Play it back, then download the audio file.',
+    ],
+    faqs: [
+      { q: 'Is my recording uploaded anywhere?', a: 'No. The audio is captured and kept in your browser only, and downloaded straight to your device — nothing is uploaded.' },
+      { q: 'What audio format do I get?', a: 'Your browser records to WebM/Opus on most browsers, or MP4/AAC on Safari. The download uses the matching extension.' },
+      { q: 'Why does it ask for microphone permission?', a: 'Recording requires access to your microphone. The browser asks the first time; you can allow or block it in your site settings.' },
+      { q: 'Does it work offline?', a: 'Yes. As a PWA it records without a connection once loaded.' },
+    ],
+  },
+  'pdf-extract-images': {
+    title: 'Free Extract Images from PDF — Save Embedded Pictures',
+    description: 'Pull the embedded images out of a PDF and download them individually or as a ZIP. Runs in your browser — the PDF is never uploaded.',
+    intro: 'This free tool extracts the images embedded inside a PDF (not page screenshots) and lets you download them one by one or all together as a ZIP. It runs entirely in your browser, so your PDF is never uploaded.',
+    howTo: [
+      'Drop a PDF file, or click to browse.',
+      'Wait a moment while the embedded images are extracted on your device.',
+      'Preview the images that were found.',
+      'Download any image, or grab them all as a ZIP.',
+    ],
+    faqs: [
+      { q: 'Is my PDF uploaded?', a: 'No. The PDF is parsed locally in your browser with pdf.js; it never leaves your device.' },
+      { q: 'Does this extract original images or page screenshots?', a: 'It extracts the actual embedded image objects from the PDF. To turn whole pages into images instead, use the PDF to Image tool.' },
+      { q: 'Why do some PDFs return no images?', a: 'A PDF made purely of vector graphics or text has no embedded raster images to extract, so nothing is found.' },
+      { q: 'Does it work offline?', a: 'Yes. As a PWA it keeps working without a connection once loaded.' },
+    ],
+  },
+  'pptx-viewer': {
+    title: 'Free PPTX Viewer — Open PowerPoint Slides Online',
+    description: 'Open and read PowerPoint (.pptx) slides in your browser — text and images, slide by slide. The file is never uploaded.',
+    intro: 'This free PPTX viewer opens PowerPoint presentations and shows each slide’s text and images, slide by slide, without PowerPoint or an account. It is a lightweight text-and-image viewer (not a pixel-perfect renderer) and runs entirely in your browser, so your file is never uploaded.',
+    howTo: [
+      'Drop a .pptx file, or click to browse.',
+      'The presentation opens on your device.',
+      'Scroll through the slides to read the text and view the images.',
+    ],
+    faqs: [
+      { q: 'Is my presentation uploaded?', a: 'No. The .pptx is unzipped and read locally in your browser; it never leaves your device.' },
+      { q: 'Does it render slides exactly like PowerPoint?', a: 'No — it is a lightweight viewer that surfaces each slide’s text and embedded images in order. It is great for reading and reviewing content, not for pixel-perfect layout.' },
+      { q: 'Can it open .ppt (old format)?', a: 'It reads the modern .pptx (OOXML) format. The legacy binary .ppt format is not supported.' },
+      { 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.',
@@ -1656,6 +1774,124 @@ const id: Record<string, ToolSeoContent> = {
       { q: 'Apa beda QRIS statis dan dinamis?', a: 'QRIS statis (metode inisiasi 11) tidak memiliki nominal tetap — pembayar mengetiknya sendiri. QRIS dinamis (12) memuat nominal tertentu, biasanya dibuat per transaksi. Decoder menunjukkan tipe yang Anda miliki.' },
     ],
   },
+  'hash-text': {
+    title: 'Generator Hash Teks Gratis — MD5, SHA-256, SHA-512, CRC32',
+    description: 'Buat hash MD5, SHA-1, SHA-256, SHA-512, dan CRC32 dari teks apa pun secara online. Seketika, di browser Anda — tidak ada yang diunggah.',
+    intro: 'Tool generator hash teks gratis ini menghitung digest MD5, SHA-1, SHA-256, SHA-512, dan CRC32 dari teks yang Anda ketik atau tempel, diperbarui langsung. Proses hashing berjalan sepenuhnya di perangkat Anda, jadi teks tidak pernah diunggah.',
+    howTo: [
+      'Ketik atau tempel teks Anda ke dalam kotak.',
+      'Lihat setiap hash (MD5, SHA-1, SHA-256, SHA-512, CRC32) dihitung seketika.',
+      'Aktifkan huruf besar bila butuh hex huruf besar.',
+      'Klik tombol salin untuk mengambil digest mana pun.',
+    ],
+    faqs: [
+      { q: 'Apakah teks saya dikirim ke server?', a: 'Tidak. Hashing terjadi lokal di browser Anda via WebAssembly, jadi teks tidak pernah meninggalkan perangkat.' },
+      { q: 'Algoritma hash apa yang didukung?', a: 'MD5, SHA-1, SHA-256, SHA-512, dan CRC32. MD5 dan SHA-1 ditampilkan untuk kompatibilitas tetapi tidak aman untuk kata sandi.' },
+      { q: 'Bisakah untuk hash kata sandi?', a: 'Bisa, tetapi hash mentah bukan cara aman menyimpan kata sandi — gunakan KDF ber-salt dan lambat seperti bcrypt atau Argon2 untuk itu.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. GoodWebTools adalah PWA, jadi setelah dimuat tetap bisa menghitung hash tanpa koneksi.' },
+    ],
+  },
+  'cidr-calculator': {
+    title: 'Kalkulator CIDR / Subnet Gratis — Network, Broadcast, Host',
+    description: 'Kalkulator subnet CIDR IPv4 online: masukkan alamat seperti 192.168.1.0/24 untuk mendapatkan network, broadcast, netmask, wildcard, dan rentang host. Berjalan di browser Anda.',
+    intro: 'Tool kalkulator CIDR gratis ini mengambil alamat IPv4 dan prefix (mis. 192.168.1.0/24) lalu menghitung alamat network dan broadcast, netmask dan wildcard mask, host pertama dan terakhir, jumlah host, serta kelas alamat — seketika, sepenuhnya di browser Anda.',
+    howTo: [
+      'Masukkan alamat IPv4 dengan prefix CIDR, mis. 10.0.0.0/24.',
+      'Baca network, broadcast, netmask, dan wildcard mask.',
+      'Periksa host pertama/terakhir dan jumlah host.',
+      'Salin seluruh rincian dengan satu klik.',
+    ],
+    faqs: [
+      { q: 'Apa arti /24?', a: 'Angka setelah garis miring adalah prefix CIDR — berapa bit awal yang menjadi bagian network. /24 berarti 24 bit pertama adalah network, menyisakan 8 bit (256 alamat, 254 host tersedia).' },
+      { q: 'Bagaimana /31 dan /32 ditangani?', a: 'Sebuah /32 adalah host tunggal. Sebuah /31 adalah tautan point-to-point dua alamat (RFC 3021), jadi kedua alamat dapat dipakai — kalkulator memperhitungkannya.' },
+      { q: 'Apakah input saya diunggah?', a: 'Tidak. Semua perhitungan berjalan lokal di browser Anda; tidak ada yang dikirim ke mana pun.' },
+      { q: 'Apakah mendukung IPv6?', a: 'Kalkulator ini fokus pada subnetting IPv4. Dukungan IPv6 mungkin ditambahkan nanti.' },
+    ],
+  },
+  '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.',
+    intro: 'Tool minifier gratis ini menghapus komentar dan spasi tak perlu dari HTML, serta memampatkan CSS (dengan csso) dan JavaScript (dengan terser) untuk memperkecil ukuran berkas. Semuanya berjalan di perangkat Anda, jadi kode Anda tidak pernah diunggah.',
+    howTo: [
+      'Pilih HTML, CSS, atau JavaScript.',
+      'Tempel kode sumber Anda ke dalam kotak.',
+      'Klik Minify untuk memampatkannya.',
+      'Lihat berapa byte yang dihemat, lalu salin atau unduh hasilnya.',
+    ],
+    faqs: [
+      { q: 'Apakah kode saya diunggah ke server?', a: 'Tidak. Minifikasi berjalan sepenuhnya di browser Anda, jadi kode tetap di perangkat Anda.' },
+      { q: 'Library apa yang dipakai?', a: 'CSS di-minify dengan csso dan JavaScript dengan terser (keduanya berjalan di browser Anda). HTML memakai pemadat spasi/komentar yang aman dan mempertahankan isi pre, textarea, script, dan style.' },
+      { q: 'Apakah minify bisa merusak JavaScript saya?', a: 'terser adalah minifier tangguh yang banyak dipakai, tetapi selalu uji hasilnya. Sintaks input yang tidak valid akan menghasilkan pesan error, bukan kode rusak.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya — sebagai PWA tetap berjalan tanpa koneksi setelah dimuat.' },
+    ],
+  },
+  'subtitle-editor': {
+    title: 'Editor Subtitle Gratis — Konversi & Atur Ulang SRT dan VTT',
+    description: 'Edit, atur ulang waktu, dan konversi subtitle antara SRT dan WebVTT online. Tempel atau letakkan file .srt/.vtt — semuanya tetap di browser Anda.',
+    intro: 'Tool subtitle gratis ini memungkinkan Anda mengedit, menggeser waktu, dan mengonversi subtitle antara SRT dan WebVTT (.vtt). Tempel teks atau letakkan file, sesuaikan, lalu unduh dalam format mana pun — semuanya di browser Anda, tidak ada yang diunggah.',
+    howTo: [
+      'Tempel subtitle Anda atau letakkan file .srt / .vtt.',
+      'Edit teks langsung, dan atur geser (dalam detik) untuk mengatur ulang setiap cue.',
+      'Lihat keluaran SRT dan WebVTT langsung berdampingan.',
+      'Salin atau unduh format yang Anda butuhkan.',
+    ],
+    faqs: [
+      { q: 'Apakah file subtitle saya diunggah?', a: 'Tidak. Parsing, pengeditan, dan konversi semua terjadi di browser Anda; file Anda tidak pernah meninggalkan perangkat.' },
+      { q: 'Apa beda SRT dan VTT?', a: 'Keduanya format subtitle teks. WebVTT (dipakai video HTML5) diawali header WEBVTT dan memakai titik pada timestamp; SRT memakai koma dan cue bernomor. Tool mengonversi antar keduanya.' },
+      { q: 'Bagaimana cara kerja geser waktu?', a: 'Masukkan angka detik positif atau negatif lalu terapkan untuk memajukan atau memundurkan setiap cue — berguna saat subtitle tidak sinkron.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap berjalan tanpa koneksi.' },
+    ],
+  },
+  'voice-recorder': {
+    title: 'Perekam Suara Online Gratis — Rekam Audio di Browser',
+    description: 'Rekam audio dari mikrofon Anda dan unduh, langsung di browser. Privat — rekaman tidak pernah meninggalkan perangkat Anda.',
+    intro: 'Tool perekam suara gratis ini menangkap audio dari mikrofon Anda lalu memungkinkan Anda memutarnya kembali dan mengunduhnya. Perekaman terjadi sepenuhnya di browser Anda, jadi tidak ada yang pernah diunggah.',
+    howTo: [
+      'Klik Mulai rekam dan izinkan akses mikrofon.',
+      'Bicara — timer menunjukkan waktu yang berjalan.',
+      'Klik Berhenti saat selesai.',
+      'Putar kembali, lalu unduh berkas audionya.',
+    ],
+    faqs: [
+      { q: 'Apakah rekaman saya diunggah?', a: 'Tidak. Audio ditangkap dan disimpan di browser Anda saja, lalu diunduh langsung ke perangkat — tidak ada yang diunggah.' },
+      { q: 'Format audio apa yang saya dapatkan?', a: 'Browser Anda merekam ke WebM/Opus di sebagian besar browser, atau MP4/AAC di Safari. Unduhan memakai ekstensi yang sesuai.' },
+      { q: 'Mengapa meminta izin mikrofon?', a: 'Perekaman membutuhkan akses ke mikrofon. Browser menanyakannya pertama kali; Anda bisa mengizinkan atau memblokirnya di pengaturan situs.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap merekam tanpa koneksi setelah dimuat.' },
+    ],
+  },
+  'pdf-extract-images': {
+    title: 'Ekstrak Gambar dari PDF Gratis — Simpan Gambar Tertanam',
+    description: 'Ambil gambar yang tertanam di dalam PDF dan unduh satu per satu atau sebagai ZIP. Berjalan di browser Anda — PDF tidak pernah diunggah.',
+    intro: 'Tool gratis ini mengekstrak gambar yang tertanam di dalam PDF (bukan tangkapan halaman) dan memungkinkan Anda mengunduhnya satu per satu atau sekaligus sebagai ZIP. Berjalan sepenuhnya di browser Anda, jadi PDF Anda tidak pernah diunggah.',
+    howTo: [
+      'Letakkan berkas PDF, atau klik untuk memilih.',
+      'Tunggu sebentar saat gambar tertanam diekstrak di perangkat Anda.',
+      'Pratinjau gambar yang ditemukan.',
+      'Unduh gambar mana pun, atau ambil semuanya sebagai ZIP.',
+    ],
+    faqs: [
+      { q: 'Apakah PDF saya diunggah?', a: 'Tidak. PDF di-parse lokal di browser Anda dengan pdf.js; tidak pernah meninggalkan perangkat.' },
+      { q: 'Apakah ini mengekstrak gambar asli atau tangkapan halaman?', a: 'Ini mengekstrak objek gambar asli yang tertanam di PDF. Untuk mengubah seluruh halaman menjadi gambar, gunakan tool PDF to Image.' },
+      { q: 'Mengapa beberapa PDF tidak menghasilkan gambar?', a: 'PDF yang murni grafik vektor atau teks tidak memiliki gambar raster tertanam untuk diekstrak, jadi tidak ada yang ditemukan.' },
+      { q: 'Apakah bekerja offline?', a: 'Ya. Sebagai PWA tetap berjalan tanpa koneksi setelah dimuat.' },
+    ],
+  },
+  'pptx-viewer': {
+    title: 'Penampil PPTX Gratis — Buka Slide PowerPoint Online',
+    description: 'Buka dan baca slide PowerPoint (.pptx) di browser Anda — teks dan gambar, slide demi slide. File tidak pernah diunggah.',
+    intro: 'Tool penampil PPTX gratis ini membuka presentasi PowerPoint dan menampilkan teks serta gambar tiap slide, slide demi slide, tanpa PowerPoint atau akun. Ini penampil teks-dan-gambar ringan (bukan renderer presisi piksel) dan berjalan sepenuhnya di browser Anda, jadi file Anda tidak pernah diunggah.',
+    howTo: [
+      'Letakkan berkas .pptx, atau klik untuk memilih.',
+      'Presentasi terbuka di perangkat Anda.',
+      'Gulir melalui slide untuk membaca teks dan melihat gambar.',
+    ],
+    faqs: [
+      { q: 'Apakah presentasi saya diunggah?', a: 'Tidak. Berkas .pptx di-unzip dan dibaca lokal di browser Anda; tidak pernah meninggalkan perangkat.' },
+      { q: 'Apakah merender slide persis seperti PowerPoint?', a: 'Tidak — ini penampil ringan yang menyajikan teks dan gambar tertanam tiap slide secara berurutan. Bagus untuk membaca dan meninjau konten, bukan untuk tata letak presisi piksel.' },
+      { q: 'Bisakah membuka .ppt (format lama)?', a: 'Tool membaca format modern .pptx (OOXML). Format biner .ppt lama tidak didukung.' },
+      { 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 70a79b9..186f46a 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 } 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 } from 'lucide-react';
 import type { ToolDef } from '@/types/tool';
 
 export const tools: ToolDef[] = [
@@ -212,6 +212,83 @@ export const tools: ToolDef[] = [
     load: () => import('@/islands/dev/QrisDecoder'),
     status: 'beta'
   },
+  {
+    id: 'hash-text',
+    name: 'Hash Text',
+    category: 'Dev',
+    route: '/tools/hash-text',
+    keywords: ['hash', 'text', 'md5', 'sha', 'sha256', 'sha512', 'crc32', 'checksum', 'digest'],
+    icon: Hash,
+    summary: 'MD5, SHA-1/256/512 and CRC32 hashes of any text',
+    load: () => import('@/islands/dev/HashText'),
+    status: 'beta'
+  },
+  {
+    id: 'cidr-calculator',
+    name: 'CIDR Calculator',
+    category: 'Dev',
+    route: '/tools/cidr-calculator',
+    keywords: ['cidr', 'subnet', 'netmask', 'ip', 'ipv4', 'network', 'broadcast', 'calculator'],
+    icon: Network,
+    summary: 'IPv4 subnet calculator — network, broadcast, mask, host range',
+    load: () => import('@/islands/dev/CidrCalculator'),
+    status: 'beta'
+  },
+  {
+    id: 'minifier',
+    name: 'HTML/CSS/JS Minifier',
+    category: 'Dev',
+    route: '/tools/minifier',
+    keywords: ['minify', 'minifier', 'html', 'css', 'js', 'javascript', 'compress', 'uglify'],
+    icon: Minimize2,
+    summary: 'Minify HTML, CSS and JavaScript in your browser',
+    load: () => import('@/islands/dev/Minifier'),
+    status: 'beta'
+  },
+  {
+    id: 'subtitle-editor',
+    name: 'Subtitle Editor (SRT/VTT)',
+    category: 'Media',
+    route: '/tools/subtitle-editor',
+    keywords: ['subtitle', 'srt', 'vtt', 'webvtt', 'caption', 'convert', 'retime', 'editor'],
+    icon: Subtitles,
+    summary: 'Edit, retime and convert SRT and WebVTT subtitles',
+    load: () => import('@/islands/media/SubtitleEditor'),
+    status: 'beta'
+  },
+  {
+    id: 'voice-recorder',
+    name: 'Voice Recorder',
+    category: 'Media',
+    route: '/tools/voice-recorder',
+    keywords: ['voice', 'recorder', 'audio', 'microphone', 'record', 'mic', 'dictaphone'],
+    icon: Mic,
+    summary: 'Record microphone audio and download it',
+    load: () => import('@/islands/media/VoiceRecorder'),
+    status: 'beta'
+  },
+  {
+    id: 'pdf-extract-images',
+    name: 'Extract Images from PDF',
+    category: 'PDF',
+    route: '/tools/pdf-extract-images',
+    keywords: ['pdf', 'extract', 'images', 'image', 'pictures', 'embedded', 'export'],
+    icon: FileImage,
+    summary: 'Pull embedded images out of a PDF',
+    load: () => import('@/islands/pdf/PdfExtractImages'),
+    status: 'beta'
+  },
+  {
+    id: 'pptx-viewer',
+    name: 'PPTX Viewer',
+    category: 'Documents',
+    route: '/tools/pptx-viewer',
+    keywords: ['pptx', 'powerpoint', 'slides', 'presentation', 'viewer', 'open', 'office'],
+    icon: Presentation,
+    summary: 'Open and read PowerPoint slides in your browser',
+    load: () => import('@/islands/documents/PptxViewer'),
+    status: 'beta'
+  },
   {
     id: 'cron-expression',
     name: 'Cron Expression',
diff --git a/src/tools/dev/cidr.lib.test.ts b/src/tools/dev/cidr.lib.test.ts
new file mode 100644
index 0000000..91efcff
--- /dev/null
+++ b/src/tools/dev/cidr.lib.test.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { parseCidr } from './cidr.lib';
+
+describe('parseCidr', () => {
+  it('computes a /24 network', () => {
+    const r = parseCidr('192.168.1.10/24');
+    expect(r.network).toBe('192.168.1.0');
+    expect(r.broadcast).toBe('192.168.1.255');
+    expect(r.netmask).toBe('255.255.255.0');
+    expect(r.wildcard).toBe('0.0.0.255');
+    expect(r.firstHost).toBe('192.168.1.1');
+    expect(r.lastHost).toBe('192.168.1.254');
+    expect(r.totalHosts).toBe(256);
+    expect(r.usableHosts).toBe(254);
+    expect(r.prefix).toBe(24);
+    expect(r.ipClass).toBe('C');
+  });
+
+  it('handles a /32 single host', () => {
+    const r = parseCidr('10.0.0.5/32');
+    expect(r.network).toBe('10.0.0.5');
+    expect(r.broadcast).toBe('10.0.0.5');
+    expect(r.usableHosts).toBe(1);
+    expect(r.ipClass).toBe('A');
+  });
+
+  it('handles a /31 point-to-point link', () => {
+    const r = parseCidr('10.0.0.0/31');
+    expect(r.usableHosts).toBe(2);
+    expect(r.firstHost).toBe('10.0.0.0');
+    expect(r.lastHost).toBe('10.0.0.1');
+  });
+
+  it('handles a /16 and defaults missing prefix to /32', () => {
+    expect(parseCidr('172.16.5.4/16').netmask).toBe('255.255.0.0');
+    expect(parseCidr('8.8.8.8').prefix).toBe(32);
+  });
+
+  it('rejects invalid input', () => {
+    expect(() => parseCidr('999.1.1.1/24')).toThrow();
+    expect(() => parseCidr('1.2.3.4/33')).toThrow();
+    expect(() => parseCidr('not-an-ip')).toThrow();
+  });
+});
diff --git a/src/tools/dev/cidr.lib.ts b/src/tools/dev/cidr.lib.ts
new file mode 100644
index 0000000..634ed54
--- /dev/null
+++ b/src/tools/dev/cidr.lib.ts
@@ -0,0 +1,86 @@
+/**
+ * IPv4 CIDR / subnet calculator — pure, framework-free.
+ */
+
+export interface CidrInfo {
+  address: string;
+  prefix: number;
+  netmask: string;
+  wildcard: string;
+  network: string;
+  broadcast: string;
+  firstHost: string;
+  lastHost: string;
+  totalHosts: number;
+  usableHosts: number;
+  ipClass: string;
+}
+
+function ipToInt(ip: string): number {
+  const parts = ip.split('.');
+  if (parts.length !== 4) throw new Error(`Invalid IPv4 address: ${ip}`);
+  let n = 0;
+  for (const p of parts) {
+    if (!/^\d{1,3}$/.test(p)) throw new Error(`Invalid octet: ${p}`);
+    const v = Number(p);
+    if (v > 255) throw new Error(`Octet out of range: ${p}`);
+    n = (n << 8) | v;
+  }
+  return n >>> 0;
+}
+
+function intToIp(n: number): string {
+  return [(n >>> 24) & 255, (n >>> 16) & 255, (n >>> 8) & 255, n & 255].join('.');
+}
+
+function classOf(firstOctet: number): string {
+  if (firstOctet < 128) return 'A';
+  if (firstOctet < 192) return 'B';
+  if (firstOctet < 224) return 'C';
+  if (firstOctet < 240) return 'D (multicast)';
+  return 'E (reserved)';
+}
+
+/** Parse an IPv4 address with optional /prefix (defaults to /32). */
+export function parseCidr(input: string): CidrInfo {
+  const trimmed = input.trim();
+  const [addr, prefixStr = '32'] = trimmed.split('/');
+  if (!/^\d{1,2}$/.test(prefixStr)) throw new Error(`Invalid prefix: ${prefixStr}`);
+  const prefix = Number(prefixStr);
+  if (prefix > 32) throw new Error('Prefix must be between 0 and 32.');
+
+  const ip = ipToInt(addr);
+  const netmask = prefix === 0 ? 0 : (0xffffffff << (32 - prefix)) >>> 0;
+  const wildcard = ~netmask >>> 0;
+  const network = (ip & netmask) >>> 0;
+  const broadcast = (network | wildcard) >>> 0;
+
+  const totalHosts = 2 ** (32 - prefix);
+  let usableHosts: number;
+  let firstHost: number;
+  let lastHost: number;
+  if (prefix >= 31) {
+    // /31 = point-to-point (2 usable), /32 = single host.
+    usableHosts = prefix === 31 ? 2 : 1;
+    firstHost = network;
+    lastHost = broadcast;
+  } else {
+    usableHosts = totalHosts - 2;
+    firstHost = (network + 1) >>> 0;
+    lastHost = (broadcast - 1) >>> 0;
+  }
+
+  return {
+    address: intToIp(ip),
+    prefix,
+    netmask: intToIp(netmask),
+    wildcard: intToIp(wildcard),
+    network: intToIp(network),
+    broadcast: intToIp(broadcast),
+    firstHost: intToIp(firstHost),
+    lastHost: intToIp(lastHost),
+    totalHosts,
+    usableHosts,
+    ipClass: classOf((ip >>> 24) & 255),
+  };
+}
diff --git a/src/tools/dev/hash-text.lib.test.ts b/src/tools/dev/hash-text.lib.test.ts
new file mode 100644
index 0000000..e589abe
--- /dev/null
+++ b/src/tools/dev/hash-text.lib.test.ts
@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { hashText, hashAll } from './hash-text.lib';
+
+describe('hashText', () => {
+  it('computes known digests for "abc"', async () => {
+    expect(await hashText('abc', 'md5')).toBe('900150983cd24fb0d6963f7d28e17f72');
+    expect(await hashText('abc', 'sha1')).toBe('a9993e364706816aba3e25717850c26c9cd0d89d');
+    expect(await hashText('abc', 'sha256')).toBe(
+      'ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad',
+    );
+    expect(await hashText('abc', 'crc32')).toBe('352441c2');
+  });
+
+  it('hashes empty string without error', async () => {
+    expect(await hashText('', 'sha256')).toBe(
+      'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855',
+    );
+  });
+
+  it('hashAll returns every algorithm', async () => {
+    const all = await hashAll('abc');
+    expect(Object.keys(all).sort()).toEqual(['crc32', 'md5', 'sha1', 'sha256', 'sha512']);
+    expect(all.md5).toBe('900150983cd24fb0d6963f7d28e17f72');
+  });
+});
diff --git a/src/tools/dev/hash-text.lib.ts b/src/tools/dev/hash-text.lib.ts
new file mode 100644
index 0000000..aaddb28
--- /dev/null
+++ b/src/tools/dev/hash-text.lib.ts
@@ -0,0 +1,35 @@
+/**
+ * Text hashing via hash-wasm (MD5, SHA-1/256/512, CRC32) — dynamic-imported
+ * so the wasm stays out of the island chunk.
+ */
+
+export type HashAlgo = 'md5' | 'sha1' | 'sha256' | 'sha512' | 'crc32';
+
+export const HASH_ALGOS: { key: HashAlgo; label: string }[] = [
+  { key: 'md5', label: 'MD5' },
+  { key: 'sha1', label: 'SHA-1' },
+  { key: 'sha256', label: 'SHA-256' },
+  { key: 'sha512', label: 'SHA-512' },
+  { key: 'crc32', label: 'CRC32' },
+];
+
+/** Hash a string with the given algorithm, returning a lowercase hex digest. */
+export async function hashText(text: string, algo: HashAlgo): Promise<string> {
+  const wasm = await import('hash-wasm');
+  const fns: Record<HashAlgo, (data: string) => Promise<string>> = {
+    md5: wasm.md5,
+    sha1: wasm.sha1,
+    sha256: wasm.sha256,
+    sha512: wasm.sha512,
+    crc32: wasm.crc32,
+  };
+  return fns[algo](text);
+}
+
+/** Hash a string with every supported algorithm at once. */
+export async function hashAll(text: string): Promise<Record<HashAlgo, string>> {
+  const entries = await Promise.all(
+    HASH_ALGOS.map(async a => [a.key, await hashText(text, a.key)] as const),
+  );
+  return Object.fromEntries(entries) as Record<HashAlgo, string>;
+}
diff --git a/src/tools/dev/minify.lib.test.ts b/src/tools/dev/minify.lib.test.ts
new file mode 100644
index 0000000..318bfd5
--- /dev/null
+++ b/src/tools/dev/minify.lib.test.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { minifyHtml, minifyCss, minifyJs } from './minify.lib';
+
+describe('minifyHtml', () => {
+  it('collapses whitespace and strips comments', () => {
+    const out = minifyHtml('<div>   <p>Hi</p>  <!-- note -->  </div>');
+    expect(out).toBe('<div><p>Hi</p></div>');
+  });
+
+  it('preserves <pre> and <script> contents', () => {
+    const html = '<pre>a\n  b</pre>\n<script>const x = 1 ;</script>';
+    const out = minifyHtml(html);
+    expect(out).toContain('<pre>a\n  b</pre>');
+    expect(out).toContain('const x = 1 ;');
+  });
+
+  it('does not corrupt digit runs in text', () => {
+    expect(minifyHtml('<p>item 5 done</p>')).toBe('<p>item 5 done</p>');
+  });
+
+  it('keeps IE conditional comments', () => {
+    const out = minifyHtml('<!--[if IE]><p>x</p><![endif]-->');
+    expect(out).toContain('[if IE]');
+  });
+});
+
+describe('minifyCss', () => {
+  it('removes whitespace', async () => {
+    const out = await minifyCss('a {\n  color: red;\n  margin: 0;\n}');
+    expect(out).toBe('a{color:red;margin:0}');
+  });
+});
+
+describe('minifyJs', () => {
+  it('shrinks and mangles', async () => {
+    const out = await minifyJs('function add(first, second) {\n  return first + second;\n}\n');
+    expect(out.length).toBeLessThan(40);
+    expect(out).toContain('return');
+  });
+});
diff --git a/src/tools/dev/minify.lib.ts b/src/tools/dev/minify.lib.ts
new file mode 100644
index 0000000..067f246
--- /dev/null
+++ b/src/tools/dev/minify.lib.ts
@@ -0,0 +1,48 @@
+/**
+ * Client-side minifiers. CSS via csso and JS via terser (both dynamic-imported
+ * so they stay out of the island chunk). HTML is a conservative hand-rolled
+ * whitespace/comment collapser that preserves whitespace-sensitive elements.
+ */
+
+export type MinifyLang = 'html' | 'css' | 'js';
+
+/** Minify CSS with csso. */
+export async function minifyCss(css: string): Promise<string> {
+  const csso = await import('csso');
+  return csso.minify(css).css;
+}
+
+/** Minify JavaScript with terser. */
+export async function minifyJs(js: string): Promise<string> {
+  const { minify } = await import('terser');
+  const out = await minify(js, { format: { comments: false } });
+  return out.code ?? '';
+}
+
+// Control-char sentinels that won't collide with real text or be treated as
+// whitespace by the collapse steps.
+const OPEN = '
';
+const CLOSE = '';
+
+/**
+ * Minify HTML: strip comments (keeping IE conditionals), collapse whitespace
+ * between and within tags, but leave the contents of <pre>, <textarea>,
+ * <script> and <style> untouched.
+ */
+export function minifyHtml(html: string): string {
+  const kept: string[] = [];
+
+  // Protect whitespace-sensitive / code blocks.
+  let out = html.replace(
+    /<(pre|textarea|script|style)\b[^>]*>[\s\S]*?<\/\1>/gi,
+    m => `${OPEN}${kept.push(m) - 1}${CLOSE}`,
+  );
+
+  // Drop comments except downlevel IE conditionals.
+  out = out.replace(/<!--(?!\s*\[if)[\s\S]*?-->/g, '');
+  // Collapse whitespace between tags and runs of whitespace inside text.
+  out = out.replace(/>\s+</g, '><').replace(/\s{2,}/g, ' ').trim();
+
+  // Restore protected blocks.
+  return out.replace(new RegExp(`${OPEN}(\\d+)${CLOSE}`, 'g'), (_, i) => kept[Number(i)]);
+}
diff --git a/src/tools/documents/pptx.lib.test.ts b/src/tools/documents/pptx.lib.test.ts
new file mode 100644
index 0000000..958766c
--- /dev/null
+++ b/src/tools/documents/pptx.lib.test.ts
@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { zipSync, strToU8 } from 'fflate';
+import { parsePptx } from './pptx.lib';
+
+const NS = 'xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"';
+
+function slideXml(paras: string[], embed?: string): string {
+  const body = paras
+    .map(p => `<a:p><a:r><a:t>${p}</a:t></a:r></a:p>`)
+    .join('');
+  const pic = embed ? `<p:pic><a:blip r:embed="${embed}"/></p:pic>` : '';
+  return `<?xml version="1.0"?><p:sld ${NS}>${body}${pic}</p:sld>`;
+}
+
+describe('parsePptx', () => {
+  it('reads ordered slide text', () => {
+    const bytes = zipSync({
+      'ppt/slides/slide1.xml': strToU8(slideXml(['Hello', 'World'])),
+      'ppt/slides/slide2.xml': strToU8(slideXml(['Second slide'])),
+    });
+    const doc = parsePptx(bytes);
+    expect(doc.slides).toHaveLength(2);
+    expect(doc.slides[0].paragraphs).toEqual(['Hello', 'World']);
+    expect(doc.slides[1].paragraphs).toEqual(['Second slide']);
+  });
+
+  it('resolves an embedded image via slide rels', () => {
+    const bytes = zipSync({
+      'ppt/slides/slide1.xml': strToU8(slideXml(['With image'], 'rId2')),
+      'ppt/slides/_rels/slide1.xml.rels': strToU8(
+        `<?xml version="1.0"?><Relationships><Relationship Id="rId2" Target="../media/image1.png"/></Relationships>`,
+      ),
+      'ppt/media/image1.png': new Uint8Array([1, 2, 3]),
+    });
+    const doc = parsePptx(bytes);
+    expect(doc.slides[0].images).toEqual(['ppt/media/image1.png']);
+    expect(doc.media['ppt/media/image1.png']).toBeDefined();
+  });
+
+  it('orders slides numerically, not lexically', () => {
+    const bytes = zipSync({
+      'ppt/slides/slide2.xml': strToU8(slideXml(['two'])),
+      'ppt/slides/slide10.xml': strToU8(slideXml(['ten'])),
+      'ppt/slides/slide1.xml': strToU8(slideXml(['one'])),
+    });
+    const doc = parsePptx(bytes);
+    expect(doc.slides.map(s => s.paragraphs[0])).toEqual(['one', 'two', 'ten']);
+  });
+});
diff --git a/src/tools/documents/pptx.lib.ts b/src/tools/documents/pptx.lib.ts
new file mode 100644
index 0000000..8f9134b
--- /dev/null
+++ b/src/tools/documents/pptx.lib.ts
@@ -0,0 +1,101 @@
+/**
+ * Minimal, dependency-light PPTX (OOXML) reader — pulls slide text and image
+ * references out of a .pptx zip. It is a lightweight viewer, not a
+ * pixel-perfect renderer: it surfaces each slide's text paragraphs (in order)
+ * and its embedded images, which covers the common "what's in these slides"
+ * need without a heavyweight rendering engine.
+ */
+import { unzipSync, strFromU8 } from 'fflate';
+
+export interface PptxSlide {
+  /** Text paragraphs on the slide, in document order. */
+  paragraphs: string[];
+  /** Media keys (into `PptxDoc.media`) for images on the slide. */
+  images: string[];
+}
+
+export interface PptxDoc {
+  slides: PptxSlide[];
+  /** Raw bytes of every ppt/media/* entry, keyed by path. */
+  media: Record<string, Uint8Array>;
+}
+
+function slideNumber(name: string): number {
+  return Number(name.match(/slide(\d+)\.xml$/)?.[1] ?? 0);
+}
+
+function decodeXml(s: string): string {
+  return s
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&apos;/g, "'")
+    .replace(/&#(\d+);/g, (_, n) => String.fromCodePoint(Number(n)))
+    .replace(/&#x([0-9a-fA-F]+);/g, (_, n) => String.fromCodePoint(parseInt(n, 16)))
+    .replace(/&amp;/g, '&');
+}
+
+/**
+ * Pull each paragraph's text out of a slide XML. Uses regex rather than
+ * DOMParser so it behaves identically in the browser and under test, and
+ * needs no DOM. OOXML nests `<a:t>` text runs inside `<a:p>` paragraphs.
+ */
+function extractParagraphs(xml: string): string[] {
+  const out: string[] = [];
+  for (const pm of xml.matchAll(/<(?:[a-zA-Z]+:)?p\b[^>]*>([\s\S]*?)<\/(?:[a-zA-Z]+:)?p>/g)) {
+    const runs = Array.from(pm[1].matchAll(/<(?:[a-zA-Z]+:)?t\b[^>]*>([\s\S]*?)<\/(?:[a-zA-Z]+:)?t>/g));
+    const text = runs.map(m => decodeXml(m[1])).join('');
+    if (text.trim()) out.push(text);
+  }
+  return out;
+}
+
+function parseRels(xml: string): Record<string, string> {
+  const map: Record<string, string> = {};
+  for (const tag of xml.match(/<Relationship\b[^>]*>/g) ?? []) {
+    const id = tag.match(/Id="([^"]+)"/)?.[1];
+    const target = tag.match(/Target="([^"]+)"/)?.[1];
+    if (id && target) map[id] = target;
+  }
+  return map;
+}
+
+/** Resolve a slide-relative rels target (e.g. "../media/image1.png") to a zip key. */
+function normalizeMedia(target: string): string {
+  const cleaned = target.replace(/^\.\//, '');
+  if (cleaned.startsWith('../')) return `ppt/${cleaned.slice(3)}`;
+  if (cleaned.startsWith('/')) return cleaned.slice(1);
+  return `ppt/slides/${cleaned}`;
+}
+
+/** Parse a .pptx file's bytes into ordered slides + media. */
+export function parsePptx(bytes: Uint8Array): PptxDoc {
+  const files = unzipSync(bytes);
+
+  const media: Record<string, Uint8Array> = {};
+  for (const [name, data] of Object.entries(files)) {
+    if (name.startsWith('ppt/media/')) media[name] = data;
+  }
+
+  const slideNames = Object.keys(files)
+    .filter(n => /^ppt\/slides\/slide\d+\.xml$/.test(n))
+    .sort((a, b) => slideNumber(a) - slideNumber(b));
+
+  const slides: PptxSlide[] = slideNames.map(name => {
+    const xml = strFromU8(files[name]);
+    const paragraphs = extractParagraphs(xml);
+
+    const relsName = name.replace(/^ppt\/slides\/(slide\d+)\.xml$/, 'ppt/slides/_rels/$1.xml.rels');
+    const rels = files[relsName] ? parseRels(strFromU8(files[relsName])) : {};
+    const embeds = Array.from(xml.matchAll(/r:embed="([^"]+)"/g)).map(m => m[1]);
+    const images = embeds
+      .map(id => rels[id])
+      .filter((tgt): tgt is string => Boolean(tgt))
+      .map(normalizeMedia)
+      .filter(key => key in media);
+
+    return { paragraphs, images };
+  });
+
+  return { slides, media };
+}
diff --git a/src/tools/media/subtitle.lib.test.ts b/src/tools/media/subtitle.lib.test.ts
new file mode 100644
index 0000000..43b5852
--- /dev/null
+++ b/src/tools/media/subtitle.lib.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest';
+import { parseSubtitles, parseTimestamp, formatTimestamp, toSrt, toVtt, shiftCues } from './subtitle.lib';
+
+const SRT = `1
+00:00:01,000 --> 00:00:04,000
+Hello world
+
+2
+00:00:05,500 --> 00:00:08,000
+Second line
+across two rows`;
+
+const VTT = `WEBVTT
+
+00:00:01.000 --> 00:00:04.000
+Hello world`;
+
+describe('timestamps', () => {
+  it('parses both SRT and VTT separators', () => {
+    expect(parseTimestamp('00:00:01,500')).toBeCloseTo(1.5, 3);
+    expect(parseTimestamp('00:01:02.250')).toBeCloseTo(62.25, 3);
+  });
+  it('formats with the requested separator', () => {
+    expect(formatTimestamp(1.5, ',')).toBe('00:00:01,500');
+    expect(formatTimestamp(62.25, '.')).toBe('00:01:02,250'.replace(',', '.'));
+  });
+});
+
+describe('parseSubtitles', () => {
+  it('parses SRT into cues', () => {
+    const cues = parseSubtitles(SRT);
+    expect(cues).toHaveLength(2);
+    expect(cues[0]).toEqual({ start: 1, end: 4, text: 'Hello world' });
+    expect(cues[1].text).toBe('Second line\nacross two rows');
+  });
+
+  it('parses WebVTT (skipping the header)', () => {
+    const cues = parseSubtitles(VTT);
+    expect(cues).toHaveLength(1);
+    expect(cues[0].text).toBe('Hello world');
+  });
+
+  it('skips malformed blocks', () => {
+    expect(parseSubtitles('not a cue\n\nalso not')).toHaveLength(0);
+  });
+});
+
+describe('serialization', () => {
+  it('round-trips SRT', () => {
+    expect(parseSubtitles(toSrt(parseSubtitles(SRT)))).toEqual(parseSubtitles(SRT));
+  });
+  it('converts SRT to VTT with dot separators and a header', () => {
+    const vtt = toVtt(parseSubtitles(SRT));
+    expect(vtt.startsWith('WEBVTT')).toBe(true);
+    expect(vtt).toContain('00:00:01.000 --> 00:00:04.000');
+  });
+  it('shifts cue timing', () => {
+    const shifted = shiftCues(parseSubtitles(SRT), 2);
+    expect(shifted[0].start).toBe(3);
+    expect(shiftCues(parseSubtitles(SRT), -100)[0].start).toBe(0);
+  });
+});
diff --git a/src/tools/media/subtitle.lib.ts b/src/tools/media/subtitle.lib.ts
new file mode 100644
index 0000000..37f45a4
--- /dev/null
+++ b/src/tools/media/subtitle.lib.ts
@@ -0,0 +1,78 @@
+/**
+ * SRT / WebVTT subtitle parsing, conversion and re-timing — pure.
+ */
+
+export interface Cue {
+  start: number; // seconds
+  end: number; // seconds
+  text: string;
+}
+
+/** Parse "HH:MM:SS,mmm" or "HH:MM:SS.mmm" (or "MM:SS.mmm") to seconds. */
+export function parseTimestamp(ts: string): number {
+  const m = ts.trim().match(/^(?:(\d+):)?(\d{1,2}):(\d{1,2})[.,](\d{1,3})$/);
+  if (!m) throw new Error(`Invalid timestamp: ${ts}`);
+  const [, h = '0', min, s, ms] = m;
+  return Number(h) * 3600 + Number(min) * 60 + Number(s) + Number(ms.padEnd(3, '0')) / 1000;
+}
+
+/** Format seconds as a timestamp; `sep` is ',' for SRT or '.' for VTT. */
+export function formatTimestamp(seconds: number, sep: ',' | '.' = ','): string {
+  const total = Math.max(0, Math.round(seconds * 1000));
+  const ms = total % 1000;
+  const s = Math.floor(total / 1000) % 60;
+  const m = Math.floor(total / 60000) % 60;
+  const h = Math.floor(total / 3600000);
+  const p = (n: number, w = 2) => String(n).padStart(w, '0');
+  return `${p(h)}:${p(m)}:${p(s)}${sep}${p(ms, 3)}`;
+}
+
+/** Parse SRT or WebVTT text into cues (format auto-detected). Skips bad blocks. */
+export function parseSubtitles(input: string): Cue[] {
+  const text = input.replace(/\r\n/g, '\n').replace(/^\uFEFF/, '');
+  const body = text.replace(/^WEBVTT[^\n]*\n/, '');
+  const blocks = body.split(/\n\s*\n/);
+  const cues: Cue[] = [];
+  for (const block of blocks) {
+    const lines = block.split('\n').filter(l => l.trim() !== '');
+    const arrowIdx = lines.findIndex(l => l.includes('-->'));
+    if (arrowIdx === -1) continue;
+    const times = lines[arrowIdx].split('-->');
+    if (times.length < 2) continue;
+    try {
+      const start = parseTimestamp(times[0]);
+      const end = parseTimestamp(times[1].trim().split(/\s+/)[0]);
+      const cueText = lines.slice(arrowIdx + 1).join('\n').trim();
+      cues.push({ start, end, text: cueText });
+    } catch {
+      // Skip malformed cue.
+    }
+  }
+  return cues;
+}
+
+/** Serialize cues to SRT. */
+export function toSrt(cues: Cue[]): string {
+  return cues
+    .map((c, i) =>
+      `${i + 1}\n${formatTimestamp(c.start, ',')} --> ${formatTimestamp(c.end, ',')}\n${c.text}`,
+    )
+    .join('\n\n') + '\n';
+}
+
+/** Serialize cues to WebVTT. */
+export function toVtt(cues: Cue[]): string {
+  const body = cues
+    .map(c => `${formatTimestamp(c.start, '.')} --> ${formatTimestamp(c.end, '.')}\n${c.text}`)
+    .join('\n\n');
+  return `WEBVTT\n\n${body}\n`;
+}
+
+/** Shift every cue by `offset` seconds (clamped at zero). */
+export function shiftCues(cues: Cue[], offset: number): Cue[] {
+  return cues.map(c => ({
+    start: Math.max(0, c.start + offset),
+    end: Math.max(0, c.end + offset),
+    text: c.text,
+  }));
+}
diff --git a/src/tools/pdf/extract-images.lib.test.ts b/src/tools/pdf/extract-images.lib.test.ts
new file mode 100644
index 0000000..055aa13
--- /dev/null
+++ b/src/tools/pdf/extract-images.lib.test.ts
@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { rgbToRgba } from './extract-images.lib';
+
+describe('rgbToRgba', () => {
+  it('expands RGB pixels to opaque RGBA', () => {
+    const rgb = new Uint8Array([10, 20, 30, 40, 50, 60]); // 2 pixels
+    expect(Array.from(rgbToRgba(rgb, 2))).toEqual([10, 20, 30, 255, 40, 50, 60, 255]);
+  });
+
+  it('returns the right length', () => {
+    expect(rgbToRgba(new Uint8Array(300), 100)).toHaveLength(400);
+  });
+});
diff --git a/src/tools/pdf/extract-images.lib.ts b/src/tools/pdf/extract-images.lib.ts
new file mode 100644
index 0000000..5468618
--- /dev/null
+++ b/src/tools/pdf/extract-images.lib.ts
@@ -0,0 +1,118 @@
+/**
+ * Extract embedded raster images from a PDF using pdf.js — pulls the image
+ * XObjects referenced by each page (not page renders). Browser-only; the pure
+ * pixel helper is unit-tested.
+ */
+
+export interface ExtractedImage {
+  name: string;
+  blob: Blob;
+  width: number;
+  height: number;
+}
+
+/** Expand packed RGB (3 bytes/pixel) to RGBA (4 bytes/pixel, opaque). */
+export function rgbToRgba(rgb: Uint8Array | Uint8ClampedArray, pixels: number): Uint8ClampedArray {
+  const out = new Uint8ClampedArray(pixels * 4);
+  for (let i = 0; i < pixels; i++) {
+    out[i * 4] = rgb[i * 3];
+    out[i * 4 + 1] = rgb[i * 3 + 1];
+    out[i * 4 + 2] = rgb[i * 3 + 2];
+    out[i * 4 + 3] = 255;
+  }
+  return out;
+}
+
+interface PdfImageObj {
+  width?: number;
+  height?: number;
+  kind?: number;
+  data?: Uint8Array | Uint8ClampedArray;
+  bitmap?: ImageBitmap;
+}
+
+const RGBA_32BPP = 3;
+
+async function objToBlob(obj: PdfImageObj): Promise<{ blob: Blob; width: number; height: number } | null> {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+
+  if (obj.bitmap) {
+    canvas.width = obj.bitmap.width;
+    canvas.height = obj.bitmap.height;
+    ctx.drawImage(obj.bitmap, 0, 0);
+  } else if (obj.data && obj.width && obj.height) {
+    const { width, height, data } = obj;
+    const pixels = width * height;
+    let rgba: Uint8ClampedArray;
+    if (obj.kind === RGBA_32BPP || data.length === pixels * 4) {
+      rgba = Uint8ClampedArray.from(data);
+    } else if (data.length === pixels * 3) {
+      rgba = rgbToRgba(data, pixels);
+    } else {
+      return null; // unsupported packing (e.g. 1bpp mask)
+    }
+    canvas.width = width;
+    canvas.height = height;
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(rgba);
+    ctx.putImageData(imageData, 0, 0);
+  } else {
+    return null;
+  }
+
+  const blob = await new Promise<Blob | null>(res => canvas.toBlob(res, 'image/png'));
+  return blob ? { blob, width: canvas.width, height: canvas.height } : null;
+}
+
+function resolveObj(page: { objs: { has(n: string): boolean; get(n: string, cb?: (o: unknown) => void): unknown } }, name: string): Promise<PdfImageObj | null> {
+  return new Promise(resolve => {
+    const done = (o: unknown) => resolve((o as PdfImageObj) ?? null);
+    try {
+      if (page.objs.has(name)) { resolve(page.objs.get(name) as PdfImageObj); return; }
+    } catch { /* not ready — fall through to callback */ }
+    page.objs.get(name, done);
+    setTimeout(() => resolve(null), 5000);
+  });
+}
+
+/** Extract every embedded raster image from the PDF bytes. */
+export async function extractPdfImages(data: ArrayBuffer | Uint8Array): Promise<ExtractedImage[]> {
+  const pdfjs = await import('pdfjs-dist');
+  const PdfjsWorker = (await import('pdfjs-dist/build/pdf.worker.min.mjs?worker')).default;
+  const worker = new PdfjsWorker();
+  pdfjs.GlobalWorkerOptions.workerPort = worker;
+
+  const loadingTask = pdfjs.getDocument({ data });
+  const pdf = await loadingTask.promise;
+  const imageOps = new Set<number>([
+    pdfjs.OPS.paintImageXObject,
+    pdfjs.OPS.paintImageXObjectRepeat,
+  ]);
+
+  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();
+      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;
+        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 });
+        }
+      }
+    }
+  } finally {
+    loadingTask.destroy();
+    worker.terminate();
+  }
+  return results;
+}
diff --git a/src/types/csso.d.ts b/src/types/csso.d.ts
new file mode 100644
index 0000000..fe20b8c
--- /dev/null
+++ b/src/types/csso.d.ts
@@ -0,0 +1,3 @@
+declare module 'csso' {
+  export function minify(source: string, options?: Record<string, unknown>): { css: string };
+}