From 114a176c0ed78800976c427304d0b5fc43779e71 Mon Sep 17 00:00:00 2001
From: Kresna <kresna@usetada.com>
Date: Sun, 2 Aug 2026 14:42:01 +0700
Subject: [PATCH] feat(i18n): localize all 19 Dev tool UIs to Bahasa (wave 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each Dev island now accepts the lang prop ToolHost forwards and renders Bahasa on
/id/ via a local TR:{en,id} dictionary (LegacyLetter pattern). Covers JSON
formatter/compare/converters (+ shared BiConverter), Base64, URL, JWT, UUID,
password, hash, text-diff, CSV↔JSON, markdown, QR gen/read, timestamp, base &
color convert. Logic untouched; brand/format/acronym terms kept; no 'alat'.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ubfx4XocHcECaL8twp9zsr
---
 src/components/dev/BiConverter.tsx | 39 +++++++++++--
 src/islands/dev/Base64.tsx         | 50 +++++++++++++---
 src/islands/dev/BaseConvert.tsx    | 32 +++++++++--
 src/islands/dev/ColorConvert.tsx   | 31 ++++++++--
 src/islands/dev/CsvJson.tsx        | 57 ++++++++++++++----
 src/islands/dev/HashFile.tsx       | 43 ++++++++++++--
 src/islands/dev/JsonCompare.tsx    | 71 ++++++++++++++++++-----
 src/islands/dev/JsonFormat.tsx     | 55 ++++++++++++++----
 src/islands/dev/JsonToml.tsx       |  4 +-
 src/islands/dev/JsonXml.tsx        |  4 +-
 src/islands/dev/JsonYaml.tsx       |  4 +-
 src/islands/dev/JwtDecode.tsx      | 58 ++++++++++++++++---
 src/islands/dev/Markdown.tsx       | 28 +++++++--
 src/islands/dev/PasswordGen.tsx    | 52 ++++++++++++++---
 src/islands/dev/QrGen.tsx          | 57 ++++++++++++++----
 src/islands/dev/QrRead.tsx         | 37 ++++++++++--
 src/islands/dev/TextDiff.tsx       | 71 ++++++++++++++++++-----
 src/islands/dev/Timestamp.tsx      | 92 ++++++++++++++++++++++++------
 src/islands/dev/UrlEncode.tsx      | 42 +++++++++++---
 src/islands/dev/UuidGen.tsx        | 15 +++--
 20 files changed, 692 insertions(+), 150 deletions(-)

diff --git a/src/components/dev/BiConverter.tsx b/src/components/dev/BiConverter.tsx
index 8bdb4a5..3cb81e6 100644
--- a/src/components/dev/BiConverter.tsx
+++ b/src/components/dev/BiConverter.tsx
@@ -6,6 +6,30 @@ import { Alert } from '@/components/ui/Alert';
 import { LoadFileButton, fileExt } from '@/components/ui/LoadFileButton';
 import { CodeBlock, type CodeLanguage } from '@/components/ui/CodeBlock';
 import { DownloadTextButton } from '@/components/ui/DownloadTextButton';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  loadFile: (left: string, right: string) => string;
+  input: string;
+  clear: string;
+  result: string;
+  conversionFailed: string;
+}> = {
+  en: {
+    loadFile: (left, right) => `Load ${left} / ${right} file`,
+    input: 'Input',
+    clear: 'Clear',
+    result: 'Result',
+    conversionFailed: 'Conversion failed',
+  },
+  id: {
+    loadFile: (left, right) => `Muat file ${left} / ${right}`,
+    input: 'Input',
+    clear: 'Bersihkan',
+    result: 'Hasil',
+    conversionFailed: 'Konversi gagal',
+  },
+};
 
 const MIME_BY_EXT: Record<string, string> = {
   json: 'application/json',
@@ -31,12 +55,15 @@ export interface BiConverterProps {
   rightExts?: string[];
   /** highlight.js language for the right-hand format's output (left is JSON). */
   rightLang?: CodeLanguage;
+  /** UI language; defaults to English. */
+  lang?: Lang;
 }
 
 type Mode = 'toRight' | 'toLeft';
 
 /** A two-way text converter: paste input, pick a direction, copy the result. */
-export function BiConverter({ leftLabel, rightLabel, toRight, toLeft, placeholder, fileAccept, rightExts = [], rightLang = 'plaintext' }: BiConverterProps) {
+export function BiConverter({ leftLabel, rightLabel, toRight, toLeft, placeholder, fileAccept, rightExts = [], rightLang = 'plaintext', lang = 'en' }: BiConverterProps) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('');
   const [output, setOutput] = useState('');
   const [error, setError] = useState('');
@@ -53,7 +80,7 @@ export function BiConverter({ leftLabel, rightLabel, toRight, toLeft, placeholde
       setOutput(next === 'toRight' ? toRight(source) : toLeft(source));
     } catch (e) {
       setOutput('');
-      setError(e instanceof Error ? e.message : 'Conversion failed');
+      setError(e instanceof Error ? e.message : t.conversionFailed);
     }
   };
 
@@ -80,11 +107,11 @@ export function BiConverter({ leftLabel, rightLabel, toRight, toLeft, placeholde
     <div className="space-y-4">
       {fileAccept && (
         <div className="flex justify-end">
-          <LoadFileButton onLoad={loadFile} accept={fileAccept} label={`Load ${leftLabel} / ${rightLabel} file`} />
+          <LoadFileButton onLoad={loadFile} accept={fileAccept} label={t.loadFile(leftLabel, rightLabel)} />
         </div>
       )}
       <TextArea
-        label="Input"
+        label={t.input}
         value={input}
         onChange={e => onInput(e.target.value)}
         placeholder={placeholder}
@@ -99,7 +126,7 @@ export function BiConverter({ leftLabel, rightLabel, toRight, toLeft, placeholde
           {rightLabel} → {leftLabel}
         </Button>
         <Button variant="ghost" onClick={clear}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -108,7 +135,7 @@ export function BiConverter({ leftLabel, rightLabel, toRight, toLeft, placeholde
       {output && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Result</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.result}</span>
             <div className="flex gap-2">
               <DownloadTextButton
                 text={output}
diff --git a/src/islands/dev/Base64.tsx b/src/islands/dev/Base64.tsx
index 11f6602..0521d33 100644
--- a/src/islands/dev/Base64.tsx
+++ b/src/islands/dev/Base64.tsx
@@ -4,10 +4,44 @@ import { Button } from '@/components/ui/Button';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { Alert } from '@/components/ui/Alert';
 import { encodeBase64, decodeBase64 } from '@/tools/dev/base64.lib';
+import type { Lang } from '@/i18n/config';
 
 type Mode = 'encode' | 'decode';
 
-export default function Base64() {
+const TR: Record<Lang, {
+  inputLabel: string;
+  placeholder: string;
+  encode: string;
+  decode: string;
+  clear: string;
+  invalidBase64: string;
+  encodingFailed: string;
+  result: string;
+}> = {
+  en: {
+    inputLabel: 'Input',
+    placeholder: 'Text to encode, or Base64 to decode',
+    encode: 'Encode →',
+    decode: '← Decode',
+    clear: 'Clear',
+    invalidBase64: 'Invalid Base64 input',
+    encodingFailed: 'Encoding failed',
+    result: 'Result',
+  },
+  id: {
+    inputLabel: 'Input',
+    placeholder: 'Teks untuk di-encode, atau Base64 untuk di-decode',
+    encode: 'Encode →',
+    decode: '← Decode',
+    clear: 'Bersihkan',
+    invalidBase64: 'Input Base64 tidak valid',
+    encodingFailed: 'Encoding gagal',
+    result: 'Hasil',
+  },
+};
+
+export default function Base64({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('');
   const [output, setOutput] = useState('');
   const [error, setError] = useState('');
@@ -24,7 +58,7 @@ export default function Base64() {
       setOutput(mode === 'encode' ? encodeBase64(source) : decodeBase64(source));
     } catch {
       setOutput('');
-      setError(mode === 'decode' ? 'Invalid Base64 input' : 'Encoding failed');
+      setError(mode === 'decode' ? t.invalidBase64 : t.encodingFailed);
     }
   };
 
@@ -43,10 +77,10 @@ export default function Base64() {
   return (
     <div className="space-y-4">
       <TextArea
-        label="Input"
+        label={t.inputLabel}
         value={input}
         onChange={e => handleInputChange(e.target.value)}
-        placeholder="Text to encode, or Base64 to decode"
+        placeholder={t.placeholder}
         monospace={false}
       />
 
@@ -56,17 +90,17 @@ export default function Base64() {
           aria-pressed={activeMode === 'encode'}
           onClick={() => run('encode')}
         >
-          Encode →
+          {t.encode}
         </Button>
         <Button
           variant={activeMode === 'decode' ? 'primary' : 'secondary'}
           aria-pressed={activeMode === 'decode'}
           onClick={() => run('decode')}
         >
-          ← Decode
+          {t.decode}
         </Button>
         <Button variant="ghost" onClick={clear}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -75,7 +109,7 @@ export default function Base64() {
       {output && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Result</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.result}</span>
             <CopyButton value={output} />
           </div>
           <pre className="max-h-[20rem] overflow-auto whitespace-pre-wrap break-all rounded-lg border border-border bg-muted/40 p-3 text-sm">
diff --git a/src/islands/dev/BaseConvert.tsx b/src/islands/dev/BaseConvert.tsx
index 9e1f068..0a10990 100644
--- a/src/islands/dev/BaseConvert.tsx
+++ b/src/islands/dev/BaseConvert.tsx
@@ -2,8 +2,29 @@ import { useState } from 'react';
 import { TextArea } from '@/components/ui/TextArea';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { Alert } from '@/components/ui/Alert';
+import type { Lang } from '@/i18n/config';
 import { parseInBase } from '@/tools/dev/base-convert.lib';
 
+const TR: Record<Lang, {
+  value: string;
+  placeholder: string;
+  inputBase: string;
+  invalid: (base: number) => string;
+}> = {
+  en: {
+    value: 'Value',
+    placeholder: 'Enter a number',
+    inputBase: 'Input base',
+    invalid: (base) => `Not a valid base-${base} number.`,
+  },
+  id: {
+    value: 'Nilai',
+    placeholder: 'Masukkan angka',
+    inputBase: 'Basis input',
+    invalid: (base) => `Bukan angka basis-${base} yang valid.`,
+  },
+};
+
 const INPUT_BASES = [
   { base: 2, label: 'Binary (2)' },
   { base: 8, label: 'Octal (8)' },
@@ -18,7 +39,8 @@ const OUTPUT_BASES = [
   { base: 16, label: 'Hex' },
 ];
 
-export default function BaseConvert() {
+export default function BaseConvert({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('255');
   const [inputBase, setInputBase] = useState(10);
 
@@ -30,16 +52,16 @@ export default function BaseConvert() {
       <div className="flex flex-wrap items-end gap-4">
         <div className="min-w-[12rem] flex-1">
           <TextArea
-            label="Value"
+            label={t.value}
             value={input}
             onChange={e => setInput(e.target.value)}
-            placeholder="Enter a number"
+            placeholder={t.placeholder}
             rows={1}
           />
         </div>
         <label className="space-y-1.5 text-sm">
           <span className="block font-bold uppercase tracking-wide text-muted-foreground">
-            Input base
+            {t.inputBase}
           </span>
           <select
             value={inputBase}
@@ -55,7 +77,7 @@ export default function BaseConvert() {
         </label>
       </div>
 
-      {invalid && <Alert variant="error">Not a valid base-{inputBase} number.</Alert>}
+      {invalid && <Alert variant="error">{t.invalid(inputBase)}</Alert>}
 
       {parsed !== null && (
         <div className="divide-y-2 divide-border border-2 border-border">
diff --git a/src/islands/dev/ColorConvert.tsx b/src/islands/dev/ColorConvert.tsx
index 402b381..9e8a0af 100644
--- a/src/islands/dev/ColorConvert.tsx
+++ b/src/islands/dev/ColorConvert.tsx
@@ -2,8 +2,27 @@ import { useState } from 'react';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { Alert } from '@/components/ui/Alert';
 import { parseColor, toHex, toHsl } from '@/tools/dev/color.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function ColorConvert() {
+const TR: Record<Lang, { color: string; pick: string; invalid: string; preview: string; placeholder: string }> = {
+  en: {
+    color: 'Color',
+    pick: 'Pick',
+    invalid: 'Enter a hex (#rrggbb) or rgb(r, g, b) color.',
+    preview: 'Color preview',
+    placeholder: '#7c3aed or rgb(124, 58, 237)',
+  },
+  id: {
+    color: 'Warna',
+    pick: 'Pilih',
+    invalid: 'Masukkan warna hex (#rrggbb) atau rgb(r, g, b).',
+    preview: 'Pratinjau warna',
+    placeholder: '#7c3aed atau rgb(124, 58, 237)',
+  },
+};
+
+export default function ColorConvert({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('#7c3aed');
 
   const rgb = parseColor(input);
@@ -22,18 +41,18 @@ export default function ColorConvert() {
       <div className="flex flex-wrap items-end gap-4">
         <label className="min-w-[12rem] flex-1 space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Color
+            {t.color}
           </span>
           <input
             value={input}
             onChange={e => setInput(e.target.value)}
-            placeholder="#7c3aed or rgb(124, 58, 237)"
+            placeholder={t.placeholder}
             className="w-full border-2 border-border bg-muted px-3 py-2 font-mono text-sm outline-none focus:shadow-brutal-sm"
           />
         </label>
         <label className="space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Pick
+            {t.pick}
           </span>
           <input
             type="color"
@@ -44,14 +63,14 @@ export default function ColorConvert() {
         </label>
       </div>
 
-      {invalid && <Alert variant="error">Enter a hex (#rrggbb) or rgb(r, g, b) color.</Alert>}
+      {invalid && <Alert variant="error">{t.invalid}</Alert>}
 
       {rgb && (
         <div className="flex flex-col gap-4 sm:flex-row">
           <div
             className="h-28 w-full border-2 border-border shadow-brutal sm:w-40"
             style={{ backgroundColor: toHex(rgb) }}
-            aria-label="Color preview"
+            aria-label={t.preview}
           />
           <div className="flex-1 divide-y-2 divide-border border-2 border-border">
             {rows.map(([label, value]) => (
diff --git a/src/islands/dev/CsvJson.tsx b/src/islands/dev/CsvJson.tsx
index 183c02f..71162e6 100644
--- a/src/islands/dev/CsvJson.tsx
+++ b/src/islands/dev/CsvJson.tsx
@@ -7,6 +7,42 @@ import { LoadFileButton, fileExt } from '@/components/ui/LoadFileButton';
 import { CodeBlock } from '@/components/ui/CodeBlock';
 import { DownloadTextButton } from '@/components/ui/DownloadTextButton';
 import { csvToJson, jsonToCsv, parseCsv } from '@/tools/dev/csv.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  loadFile: string;
+  input: string;
+  delimiter: string;
+  delimiters: Record<string, string>;
+  clear: string;
+  conversionFailed: string;
+  result: string;
+  tablePreview: string;
+  previewNote: (shown: number, total: number) => string;
+}> = {
+  en: {
+    loadFile: 'Load .csv / .json file',
+    input: 'Input',
+    delimiter: 'Delimiter',
+    delimiters: { ',': 'Comma ,', ';': 'Semicolon ;', '\t': 'Tab ⇥', '|': 'Pipe |' },
+    clear: 'Clear',
+    conversionFailed: 'Conversion failed',
+    result: 'Result',
+    tablePreview: 'Table preview',
+    previewNote: (shown, total) => ` (first ${shown} of ${total} rows)`,
+  },
+  id: {
+    loadFile: 'Muat file .csv / .json',
+    input: 'Input',
+    delimiter: 'Delimiter',
+    delimiters: { ',': 'Koma ,', ';': 'Titik koma ;', '\t': 'Tab ⇥', '|': 'Pipe |' },
+    clear: 'Bersihkan',
+    conversionFailed: 'Konversi gagal',
+    result: 'Hasil',
+    tablePreview: 'Pratinjau tabel',
+    previewNote: (shown, total) => ` (${shown} baris pertama dari ${total} baris)`,
+  },
+};
 
 const PREVIEW_ROWS = 100;
 
@@ -19,7 +55,8 @@ const DELIMITERS: { label: string; value: string }[] = [
   { label: 'Pipe |', value: '|' },
 ];
 
-export default function CsvJson() {
+export default function CsvJson({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('');
   const [output, setOutput] = useState('');
   const [error, setError] = useState('');
@@ -37,7 +74,7 @@ export default function CsvJson() {
       setOutput(mode === 'toJson' ? csvToJson(source, delim) : jsonToCsv(source, delim));
     } catch (e) {
       setOutput('');
-      setError(e instanceof Error ? e.message : 'Conversion failed');
+      setError(e instanceof Error ? e.message : t.conversionFailed);
     }
   };
 
@@ -84,11 +121,11 @@ export default function CsvJson() {
         <LoadFileButton
           onLoad={loadFile}
           accept=".csv,.tsv,.json,.txt,text/csv,application/json,text/plain"
-          label="Load .csv / .json file"
+          label={t.loadFile}
         />
       </div>
       <TextArea
-        label="Input"
+        label={t.input}
         value={input}
         onChange={e => handleInputChange(e.target.value)}
         placeholder={'name,age\nAlice,30\nBob,25'}
@@ -97,7 +134,7 @@ export default function CsvJson() {
 
       <div className="space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Delimiter
+          {t.delimiter}
         </span>
         <div className="flex flex-wrap gap-2">
           {DELIMITERS.map(d => (
@@ -107,7 +144,7 @@ export default function CsvJson() {
               aria-pressed={delimiter === d.value}
               onClick={() => changeDelimiter(d.value)}
             >
-              {d.label}
+              {t.delimiters[d.value] ?? d.label}
             </Button>
           ))}
         </div>
@@ -129,7 +166,7 @@ export default function CsvJson() {
           JSON → CSV
         </Button>
         <Button variant="ghost" onClick={clear}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -138,7 +175,7 @@ export default function CsvJson() {
       {output && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Result</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.result}</span>
             <div className="flex gap-2">
               <DownloadTextButton
                 text={output}
@@ -155,8 +192,8 @@ export default function CsvJson() {
       {previewHeader.length > 0 && (
         <div className="space-y-2">
           <span className="text-sm font-medium text-muted-foreground">
-            Table preview
-            {previewBody.length > PREVIEW_ROWS && ` (first ${PREVIEW_ROWS} of ${previewBody.length} rows)`}
+            {t.tablePreview}
+            {previewBody.length > PREVIEW_ROWS && t.previewNote(PREVIEW_ROWS, previewBody.length)}
           </span>
           <div className="max-h-[30rem] overflow-auto border-2 border-border">
             <table className="w-full border-collapse text-sm">
diff --git a/src/islands/dev/HashFile.tsx b/src/islands/dev/HashFile.tsx
index a3aacad..a972931 100644
--- a/src/islands/dev/HashFile.tsx
+++ b/src/islands/dev/HashFile.tsx
@@ -10,8 +10,39 @@ import { Alert } from '@/components/ui/Alert';
 import { HASH_ALGORITHMS, type HashAlgorithm } from '@/tools/dev/hash.lib';
 import type { HashWorkerAPI } from '@/tools/dev/hash.worker';
 import HashWorker from '@/tools/dev/hash.worker?worker';
+import type { Lang } from '@/i18n/config';
 
-export default function HashFile() {
+const TR: Record<
+  Lang,
+  {
+    dropTitle: string;
+    readyHint: string;
+    loadingHint: string;
+    algorithm: string;
+    hashing: string;
+    hashFailed: (msg: string) => string;
+  }
+> = {
+  en: {
+    dropTitle: 'Drop file here or click to browse',
+    readyHint: 'Hashed in a worker, streamed in chunks — handles large files',
+    loadingHint: 'Loading engine…',
+    algorithm: 'Algorithm',
+    hashing: 'Hashing…',
+    hashFailed: msg => 'Hashing failed: ' + msg,
+  },
+  id: {
+    dropTitle: 'Letakkan file di sini atau klik untuk menjelajah',
+    readyHint: 'Di-hash dalam worker, dialirkan per potongan — menangani file besar',
+    loadingHint: 'Memuat engine…',
+    algorithm: 'Algorithm',
+    hashing: 'Melakukan hashing…',
+    hashFailed: msg => 'Hashing gagal: ' + msg,
+  },
+};
+
+export default function HashFile({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [algorithm, setAlgorithm] = useState<HashAlgorithm>('sha-256');
   const [hash, setHash] = useState('');
@@ -46,7 +77,7 @@ export default function HashFile() {
       const digest = await workerApi.hashFile(target, algo, proxy((p: number) => setProgress(p)));
       setHash(digest);
     } catch (e) {
-      setError('Hashing failed: ' + (e instanceof Error ? e.message : String(e)));
+      setError(t.hashFailed(e instanceof Error ? e.message : String(e)));
     } finally {
       setProcessing(false);
     }
@@ -71,15 +102,15 @@ export default function HashFile() {
     <div className="space-y-6">
       <Dropzone onDrop={onDrop} accept="*/*" multiple={false}>
         <div className="space-y-2">
-          <p className="text-lg font-bold">Drop file here or click to browse</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
           <p className="text-sm text-muted-foreground">
-            {ready ? 'Hashed in a worker, streamed in chunks — handles large files' : 'Loading engine…'}
+            {ready ? t.readyHint : t.loadingHint}
           </p>
         </div>
       </Dropzone>
 
       <div className="space-y-1.5">
-        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Algorithm</span>
+        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.algorithm}</span>
         <div className="flex flex-wrap gap-2">
           {HASH_ALGORITHMS.map(a => (
             <Button
@@ -95,7 +126,7 @@ export default function HashFile() {
         </div>
       </div>
 
-      {processing && <ProgressBar percent={progress} label="Hashing…" />}
+      {processing && <ProgressBar percent={progress} label={t.hashing} />}
 
       {error && <Alert variant="error">{error}</Alert>}
 
diff --git a/src/islands/dev/JsonCompare.tsx b/src/islands/dev/JsonCompare.tsx
index 723066f..99904f5 100644
--- a/src/islands/dev/JsonCompare.tsx
+++ b/src/islands/dev/JsonCompare.tsx
@@ -2,6 +2,48 @@ import { useState, useEffect } from 'react';
 import { TextArea } from '@/components/ui/TextArea';
 import { Alert } from '@/components/ui/Alert';
 import { CheckCircle2, XCircle } from 'lucide-react';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  intro: string;
+  ignoreOrder: string;
+  firstJson: string;
+  secondJson: string;
+  validJson: string;
+  invalidJson: string;
+  equal: string;
+  equalDesc: string;
+  notEqual: string;
+  found: (n: number) => string;
+  differences: string;
+}> = {
+  en: {
+    intro: "Deep compare two JSON objects. Property order doesn't matter — only structure and values.",
+    ignoreOrder: 'Ignore array order (treat arrays as sets)',
+    firstJson: 'First JSON',
+    secondJson: 'Second JSON',
+    validJson: '✓ Valid JSON',
+    invalidJson: 'Invalid JSON',
+    equal: 'Equal',
+    equalDesc: 'Both JSON objects are structurally identical',
+    notEqual: 'Not Equal',
+    found: (n) => `Found ${n} difference${n !== 1 ? 's' : ''}`,
+    differences: 'Differences',
+  },
+  id: {
+    intro: 'Bandingkan dua objek JSON secara mendalam. Urutan properti tidak berpengaruh — hanya struktur dan nilai.',
+    ignoreOrder: 'Abaikan urutan array (perlakukan array sebagai himpunan)',
+    firstJson: 'JSON Pertama',
+    secondJson: 'JSON Kedua',
+    validJson: '✓ JSON valid',
+    invalidJson: 'JSON tidak valid',
+    equal: 'Sama',
+    equalDesc: 'Kedua objek JSON identik secara struktural',
+    notEqual: 'Tidak Sama',
+    found: (n) => `Ditemukan ${n} perbedaan`,
+    differences: 'Perbedaan',
+  },
+};
 
 // Deep equality check ignoring object property order
 function deepEqual(a: any, b: any, ignoreArrayOrder: boolean = true): boolean {
@@ -126,7 +168,8 @@ function findDifferences(a: any, b: any, ignoreArrayOrder: boolean = true, path:
   return diffs;
 }
 
-export default function JsonCompare() {
+export default function JsonCompare({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [leftJson, setLeftJson] = useState('');
   const [rightJson, setRightJson] = useState('');
   const [leftParsed, setLeftParsed] = useState<any>(null);
@@ -158,7 +201,7 @@ export default function JsonCompare() {
         parsedLeft = JSON.parse(left);
         setLeftParsed(parsedLeft);
       } catch (e) {
-        setLeftError(e instanceof Error ? e.message : 'Invalid JSON');
+        setLeftError(e instanceof Error ? e.message : t.invalidJson);
         return;
       }
     }
@@ -169,7 +212,7 @@ export default function JsonCompare() {
         parsedRight = JSON.parse(right);
         setRightParsed(parsedRight);
       } catch (e) {
-        setRightError(e instanceof Error ? e.message : 'Invalid JSON');
+        setRightError(e instanceof Error ? e.message : t.invalidJson);
         return;
       }
     }
@@ -208,7 +251,7 @@ export default function JsonCompare() {
     <div className="space-y-4">
       <div className="border-2 border-border bg-muted p-4">
         <p className="text-sm text-muted-foreground">
-          Deep compare two JSON objects. Property order doesn't matter — only structure and values.
+          {t.intro}
         </p>
       </div>
 
@@ -221,14 +264,14 @@ export default function JsonCompare() {
           className="h-4 w-4 rounded border-border bg-background text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
         />
         <label htmlFor="ignore-array-order" className="text-sm text-foreground cursor-pointer">
-          Ignore array order (treat arrays as sets)
+          {t.ignoreOrder}
         </label>
       </div>
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div className="space-y-2">
           <TextArea
-            label="First JSON"
+            label={t.firstJson}
             value={leftJson}
             onChange={e => handleLeftChange(e.target.value)}
             rows={12}
@@ -237,13 +280,13 @@ export default function JsonCompare() {
           />
           {leftError && <Alert variant="error">{leftError}</Alert>}
           {leftParsed !== null && !leftError && (
-            <div className="text-xs text-green-600 dark:text-green-400">✓ Valid JSON</div>
+            <div className="text-xs text-green-600 dark:text-green-400">{t.validJson}</div>
           )}
         </div>
 
         <div className="space-y-2">
           <TextArea
-            label="Second JSON"
+            label={t.secondJson}
             value={rightJson}
             onChange={e => handleRightChange(e.target.value)}
             rows={12}
@@ -252,7 +295,7 @@ export default function JsonCompare() {
           />
           {rightError && <Alert variant="error">{rightError}</Alert>}
           {rightParsed !== null && !rightError && (
-            <div className="text-xs text-green-600 dark:text-green-400">✓ Valid JSON</div>
+            <div className="text-xs text-green-600 dark:text-green-400">{t.validJson}</div>
           )}
         </div>
       </div>
@@ -264,9 +307,9 @@ export default function JsonCompare() {
             <div className="flex items-center gap-3 rounded-lg border-2 border-green-500 bg-green-500/10 p-4">
               <CheckCircle2 className="h-6 w-6 text-green-600 dark:text-green-400" />
               <div>
-                <div className="font-bold text-green-600 dark:text-green-400">Equal</div>
+                <div className="font-bold text-green-600 dark:text-green-400">{t.equal}</div>
                 <div className="text-sm text-green-600/80 dark:text-green-400/80">
-                  Both JSON objects are structurally identical
+                  {t.equalDesc}
                 </div>
               </div>
             </div>
@@ -275,9 +318,9 @@ export default function JsonCompare() {
               <div className="flex items-center gap-3 rounded-lg border-2 border-red-500 bg-red-500/10 p-4">
                 <XCircle className="h-6 w-6 text-red-600 dark:text-red-400" />
                 <div>
-                  <div className="font-bold text-red-600 dark:text-red-400">Not Equal</div>
+                  <div className="font-bold text-red-600 dark:text-red-400">{t.notEqual}</div>
                   <div className="text-sm text-red-600/80 dark:text-red-400/80">
-                    Found {differences.length} difference{differences.length !== 1 ? 's' : ''}
+                    {t.found(differences.length)}
                   </div>
                 </div>
               </div>
@@ -285,7 +328,7 @@ export default function JsonCompare() {
               {/* Differences List */}
               <div className="rounded-lg border border-border bg-muted/40 p-4">
                 <div className="mb-2 text-sm font-bold uppercase tracking-wide text-muted-foreground">
-                  Differences
+                  {t.differences}
                 </div>
                 <ul className="space-y-1 text-sm">
                   {differences.map((diff, idx) => (
diff --git a/src/islands/dev/JsonFormat.tsx b/src/islands/dev/JsonFormat.tsx
index 3ad7b05..d62073d 100644
--- a/src/islands/dev/JsonFormat.tsx
+++ b/src/islands/dev/JsonFormat.tsx
@@ -6,6 +6,7 @@ import { Alert } from '@/components/ui/Alert';
 import { LoadFileButton } from '@/components/ui/LoadFileButton';
 import { CodeBlock } from '@/components/ui/CodeBlock';
 import { DownloadTextButton } from '@/components/ui/DownloadTextButton';
+import type { Lang } from '@/i18n/config';
 
 type Mode = 'format2' | 'format4' | 'minify';
 
@@ -15,13 +16,45 @@ const MODE_INDENT: Record<Mode, number> = {
   minify: 0,
 };
 
-const MODE_LABELS: { mode: Mode; label: string }[] = [
-  { mode: 'format2', label: 'Format (2 spaces)' },
-  { mode: 'format4', label: 'Format (4 spaces)' },
-  { mode: 'minify', label: 'Minify' },
-];
+const TR: Record<Lang, {
+  loadFile: string;
+  inputLabel: string;
+  format2: string;
+  format4: string;
+  minify: string;
+  clear: string;
+  invalidJson: string;
+  result: string;
+}> = {
+  en: {
+    loadFile: 'Load .json file',
+    inputLabel: 'Input JSON',
+    format2: 'Format (2 spaces)',
+    format4: 'Format (4 spaces)',
+    minify: 'Minify',
+    clear: 'Clear',
+    invalidJson: 'Invalid JSON',
+    result: 'Result',
+  },
+  id: {
+    loadFile: 'Muat file .json',
+    inputLabel: 'Input JSON',
+    format2: 'Format (2 spasi)',
+    format4: 'Format (4 spasi)',
+    minify: 'Minify',
+    clear: 'Bersihkan',
+    invalidJson: 'JSON tidak valid',
+    result: 'Hasil',
+  },
+};
 
-export default function JsonFormat() {
+export default function JsonFormat({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const MODE_LABELS: { mode: Mode; label: string }[] = [
+    { mode: 'format2', label: t.format2 },
+    { mode: 'format4', label: t.format4 },
+    { mode: 'minify', label: t.minify },
+  ];
   const [input, setInput] = useState('');
   const [output, setOutput] = useState('');
   const [error, setError] = useState('');
@@ -39,7 +72,7 @@ export default function JsonFormat() {
       setOutput(JSON.stringify(parsed, null, MODE_INDENT[mode]));
     } catch (e) {
       setOutput('');
-      setError(e instanceof Error ? e.message : 'Invalid JSON');
+      setError(e instanceof Error ? e.message : t.invalidJson);
     }
   };
 
@@ -65,10 +98,10 @@ export default function JsonFormat() {
   return (
     <div className="space-y-4">
       <div className="flex justify-end">
-        <LoadFileButton onLoad={loadFile} accept=".json,application/json,.txt,text/plain" label="Load .json file" />
+        <LoadFileButton onLoad={loadFile} accept=".json,application/json,.txt,text/plain" label={t.loadFile} />
       </div>
       <TextArea
-        label="Input JSON"
+        label={t.inputLabel}
         value={input}
         onChange={e => handleInputChange(e.target.value)}
         placeholder='{"hello": "world"}'
@@ -87,7 +120,7 @@ export default function JsonFormat() {
           </Button>
         ))}
         <Button variant="ghost" onClick={clear}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -96,7 +129,7 @@ export default function JsonFormat() {
       {output && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Result</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.result}</span>
             <div className="flex gap-2">
               <DownloadTextButton text={output} filename="formatted.json" mime="application/json" />
               <CopyButton value={output} />
diff --git a/src/islands/dev/JsonToml.tsx b/src/islands/dev/JsonToml.tsx
index f4f2b64..564d75f 100644
--- a/src/islands/dev/JsonToml.tsx
+++ b/src/islands/dev/JsonToml.tsx
@@ -1,9 +1,11 @@
 import { BiConverter } from '@/components/dev/BiConverter';
 import { jsonToToml, tomlToJson } from '@/tools/dev/toml.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function JsonToml() {
+export default function JsonToml({ lang = 'en' }: { lang?: Lang }) {
   return (
     <BiConverter
+      lang={lang}
       leftLabel="JSON"
       rightLabel="TOML"
       toRight={jsonToToml}
diff --git a/src/islands/dev/JsonXml.tsx b/src/islands/dev/JsonXml.tsx
index 8f1e16f..e76de1a 100644
--- a/src/islands/dev/JsonXml.tsx
+++ b/src/islands/dev/JsonXml.tsx
@@ -1,9 +1,11 @@
 import { BiConverter } from '@/components/dev/BiConverter';
 import { jsonToXml, xmlToJson } from '@/tools/dev/xml.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function JsonXml() {
+export default function JsonXml({ lang = 'en' }: { lang?: Lang }) {
   return (
     <BiConverter
+      lang={lang}
       leftLabel="JSON"
       rightLabel="XML"
       toRight={jsonToXml}
diff --git a/src/islands/dev/JsonYaml.tsx b/src/islands/dev/JsonYaml.tsx
index 7995788..1e8006f 100644
--- a/src/islands/dev/JsonYaml.tsx
+++ b/src/islands/dev/JsonYaml.tsx
@@ -1,9 +1,11 @@
 import { BiConverter } from '@/components/dev/BiConverter';
 import { jsonToYaml, yamlToJson } from '@/tools/dev/yaml.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function JsonYaml() {
+export default function JsonYaml({ lang = 'en' }: { lang?: Lang }) {
   return (
     <BiConverter
+      lang={lang}
       leftLabel="JSON"
       rightLabel="YAML"
       toRight={jsonToYaml}
diff --git a/src/islands/dev/JwtDecode.tsx b/src/islands/dev/JwtDecode.tsx
index a038338..cc3165e 100644
--- a/src/islands/dev/JwtDecode.tsx
+++ b/src/islands/dev/JwtDecode.tsx
@@ -5,8 +5,48 @@ import { CopyButton } from '@/components/ui/CopyButton';
 import { Alert } from '@/components/ui/Alert';
 import { CodeBlock } from '@/components/ui/CodeBlock';
 import { decodeJwt } from '@/tools/dev/jwt.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function JwtDecode() {
+const TR: Record<Lang, {
+  jwt: string;
+  decode: string;
+  clear: string;
+  errInvalid: string;
+  errDecode: string;
+  notePre: string;
+  noteNot: string;
+  notePost: string;
+  header: string;
+  payload: string;
+}> = {
+  en: {
+    jwt: 'JWT',
+    decode: 'Decode',
+    clear: 'Clear',
+    errInvalid: 'Not a valid JWT — expected at least two dot-separated segments.',
+    errDecode: 'Failed to decode token segments.',
+    notePre: 'Decoding only — the signature is ',
+    noteNot: 'not',
+    notePost: ' verified. Nothing leaves your browser.',
+    header: 'Header',
+    payload: 'Payload',
+  },
+  id: {
+    jwt: 'JWT',
+    decode: 'Dekode',
+    clear: 'Bersihkan',
+    errInvalid: 'Bukan JWT yang valid — diharapkan setidaknya dua segmen yang dipisahkan titik.',
+    errDecode: 'Gagal mendekode segmen token.',
+    notePre: 'Hanya mendekode — tanda tangan ',
+    noteNot: 'tidak',
+    notePost: ' diverifikasi. Tidak ada data yang meninggalkan browser Anda.',
+    header: 'Header',
+    payload: 'Payload',
+  },
+};
+
+export default function JwtDecode({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('');
   const [header, setHeader] = useState('');
   const [payload, setPayload] = useState('');
@@ -21,7 +61,7 @@ export default function JwtDecode() {
 
     const parts = token.split('.');
     if (parts.length < 2) {
-      setError('Not a valid JWT — expected at least two dot-separated segments.');
+      setError(t.errInvalid);
       return;
     }
     try {
@@ -29,14 +69,14 @@ export default function JwtDecode() {
       setHeader(header);
       setPayload(payload);
     } catch {
-      setError('Failed to decode token segments.');
+      setError(t.errDecode);
     }
   };
 
   return (
     <div className="space-y-4">
       <TextArea
-        label="JWT"
+        label={t.jwt}
         value={input}
         onChange={e => setInput(e.target.value)}
         placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0In0.signature"
@@ -44,14 +84,14 @@ export default function JwtDecode() {
       />
 
       <div className="flex flex-wrap gap-2">
-        <Button onClick={decode}>Decode</Button>
+        <Button onClick={decode}>{t.decode}</Button>
         <Button variant="ghost" onClick={() => { setInput(''); setHeader(''); setPayload(''); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Decoding only — the signature is <strong>not</strong> verified. Nothing leaves your browser.
+        {t.notePre}<strong>{t.noteNot}</strong>{t.notePost}
       </p>
 
       {error && <Alert variant="error">{error}</Alert>}
@@ -59,7 +99,7 @@ export default function JwtDecode() {
       {header && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Header</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.header}</span>
             <CopyButton value={header} />
           </div>
           <CodeBlock code={header} language="json" />
@@ -69,7 +109,7 @@ export default function JwtDecode() {
       {payload && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Payload</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.payload}</span>
             <CopyButton value={payload} />
           </div>
           <CodeBlock code={payload} language="json" />
diff --git a/src/islands/dev/Markdown.tsx b/src/islands/dev/Markdown.tsx
index 59b197f..7cfd971 100644
--- a/src/islands/dev/Markdown.tsx
+++ b/src/islands/dev/Markdown.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
+import type { Lang } from '@/i18n/config';
 
 /**
  * The ESM default export can be either a ready sanitizer or a factory that
@@ -18,7 +19,7 @@ function resolvePurifier(): { sanitize: (html: string) => string } | null {
   return null;
 }
 
-const SAMPLE = `# Hello, Markdown
+const SAMPLE_EN = `# Hello, Markdown
 
 Type on the **left**, see the preview on the **right**.
 
@@ -29,8 +30,25 @@ Type on the **left**, see the preview on the **right**.
 > Everything renders locally — nothing is uploaded.
 `;
 
-export default function Markdown() {
-  const [input, setInput] = useState(SAMPLE);
+const SAMPLE_ID = `# Halo, Markdown
+
+Ketik di **kiri**, lihat pratinjau di **kanan**.
+
+- Daftar
+- [Tautan](https://example.com)
+- \`inline code\`
+
+> Semuanya dirender secara lokal — tidak ada yang diunggah.
+`;
+
+const TR: Record<Lang, { markdown: string; preview: string; sample: string }> = {
+  en: { markdown: 'Markdown', preview: 'Preview', sample: SAMPLE_EN },
+  id: { markdown: 'Markdown', preview: 'Pratinjau', sample: SAMPLE_ID },
+};
+
+export default function Markdown({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
+  const [input, setInput] = useState(t.sample);
   const [html, setHtml] = useState('');
 
   // marked + DOMPurify run browser-only (DOMPurify needs a DOM). Computing in
@@ -45,7 +63,7 @@ export default function Markdown() {
     <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
       <label className="block space-y-1.5">
         <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Markdown
+          {t.markdown}
         </span>
         <textarea
           value={input}
@@ -57,7 +75,7 @@ export default function Markdown() {
 
       <div className="space-y-1.5">
         <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Preview
+          {t.preview}
         </span>
         <div
           className="markdown-preview h-[32rem] overflow-auto border-2 border-border bg-muted p-4"
diff --git a/src/islands/dev/PasswordGen.tsx b/src/islands/dev/PasswordGen.tsx
index dd6974c..5507674 100644
--- a/src/islands/dev/PasswordGen.tsx
+++ b/src/islands/dev/PasswordGen.tsx
@@ -10,8 +10,42 @@ import {
   type SetKey,
   type Options,
 } from '@/tools/dev/password.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function PasswordGen() {
+const TR: Record<Lang, {
+  regenerate: string;
+  strength: string;
+  minChars: string;
+  maxChars: string;
+  length: string;
+  minNumbers: string;
+  minSpecial: string;
+  avoidAmbiguous: string;
+}> = {
+  en: {
+    regenerate: 'Regenerate',
+    strength: 'Strength',
+    minChars: 'Min chars',
+    maxChars: 'Max chars',
+    length: 'Length',
+    minNumbers: 'Min numbers',
+    minSpecial: 'Min special',
+    avoidAmbiguous: 'Avoid ambiguous characters',
+  },
+  id: {
+    regenerate: 'Buat ulang',
+    strength: 'Kekuatan',
+    minChars: 'Min karakter',
+    maxChars: 'Maks karakter',
+    length: 'Panjang',
+    minNumbers: 'Min angka',
+    minSpecial: 'Min karakter khusus',
+    avoidAmbiguous: 'Hindari karakter ambigu',
+  },
+};
+
+export default function PasswordGen({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [minLength, setMinLength] = useState(8);
   const [maxLength, setMaxLength] = useState(32);
   const [length, setLength] = useState(16);
@@ -52,20 +86,20 @@ export default function PasswordGen() {
     <div className="space-y-5">
       <div className="flex items-center gap-3 border-2 border-border bg-muted p-3 shadow-brutal-sm">
         <code className="flex-1 break-all text-lg">{password || '—'}</code>
-        <Button variant="ghost" onClick={regenerate} aria-label="Regenerate">
+        <Button variant="ghost" onClick={regenerate} aria-label={t.regenerate}>
           <RefreshCw className="h-4 w-4" />
         </Button>
         <CopyButton value={password} />
       </div>
 
       <div className="flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">Strength</span>
+        <span className="text-muted-foreground">{t.strength}</span>
         <span className={`font-bold uppercase ${strength.color}`}>{strength.label}</span>
       </div>
 
       <div className="flex flex-wrap items-end gap-4">
         <label className="space-y-1 text-sm">
-          <span className="block text-muted-foreground">Min chars</span>
+          <span className="block text-muted-foreground">{t.minChars}</span>
           <input
             type="number"
             min={1}
@@ -76,7 +110,7 @@ export default function PasswordGen() {
           />
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block text-muted-foreground">Max chars</span>
+          <span className="block text-muted-foreground">{t.maxChars}</span>
           <input
             type="number"
             min={minLength}
@@ -90,7 +124,7 @@ export default function PasswordGen() {
 
       <div className="space-y-2">
         <div className="flex items-center justify-between text-sm">
-          <span className="text-muted-foreground">Length</span>
+          <span className="text-muted-foreground">{t.length}</span>
           <span className="font-bold">{length}</span>
         </div>
         <input
@@ -122,7 +156,7 @@ export default function PasswordGen() {
 
       <div className="flex flex-wrap items-end gap-4">
         <label className="space-y-1 text-sm">
-          <span className="block text-muted-foreground">Min numbers</span>
+          <span className="block text-muted-foreground">{t.minNumbers}</span>
           <input
             type="number"
             min={0}
@@ -134,7 +168,7 @@ export default function PasswordGen() {
           />
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block text-muted-foreground">Min special</span>
+          <span className="block text-muted-foreground">{t.minSpecial}</span>
           <input
             type="number"
             min={0}
@@ -154,7 +188,7 @@ export default function PasswordGen() {
           onChange={() => setAvoidAmbiguous(prev => !prev)}
           className="accent-accent"
         />
-        Avoid ambiguous characters
+        {t.avoidAmbiguous}
       </label>
     </div>
   );
diff --git a/src/islands/dev/QrGen.tsx b/src/islands/dev/QrGen.tsx
index 0593102..1ec1095 100644
--- a/src/islands/dev/QrGen.tsx
+++ b/src/islands/dev/QrGen.tsx
@@ -7,9 +7,45 @@ import { CopyImageButton } from '@/components/ui/CopyImageButton';
 import { EditInAnnotatorButton } from '@/components/ui/EditInAnnotatorButton';
 import { downloadService } from '@/services/download';
 import { canvasSupportsType } from '@/tools/image/encode.lib';
+import type { Lang } from '@/i18n/config';
 
 type ErrorLevel = 'L' | 'M' | 'Q' | 'H';
 
+const TR: Record<Lang, {
+  textOrUrl: string;
+  errorCorrection: string;
+  levelLow: string;
+  levelMedium: string;
+  levelQuartile: string;
+  levelHigh: string;
+  download: string;
+  tooLong: string;
+  noQr: string;
+}> = {
+  en: {
+    textOrUrl: 'Text or URL',
+    errorCorrection: 'Error correction',
+    levelLow: 'Low (~7%)',
+    levelMedium: 'Medium (~15%)',
+    levelQuartile: 'Quartile (~25%)',
+    levelHigh: 'High (~30%)',
+    download: 'Download',
+    tooLong: 'Text too long for a QR code',
+    noQr: 'No QR code yet.',
+  },
+  id: {
+    textOrUrl: 'Teks atau URL',
+    errorCorrection: 'Koreksi kesalahan',
+    levelLow: 'Rendah (~7%)',
+    levelMedium: 'Sedang (~15%)',
+    levelQuartile: 'Kuartil (~25%)',
+    levelHigh: 'Tinggi (~30%)',
+    download: 'Unduh',
+    tooLong: 'Teks terlalu panjang untuk kode QR',
+    noQr: 'Belum ada kode QR.',
+  },
+};
+
 interface Format {
   key: string;
   label: string;
@@ -29,7 +65,8 @@ const FORMATS: Format[] = [
 
 const QR_WIDTH = 320;
 
-export default function QrGen() {
+export default function QrGen({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [text, setText] = useState('https://goodwebtools.com');
   const [level, setLevel] = useState<ErrorLevel>('M');
   const [avifOk, setAvifOk] = useState(false);
@@ -54,7 +91,7 @@ export default function QrGen() {
       canvas,
       text,
       { errorCorrectionLevel: level, width: QR_WIDTH, margin: 2 },
-      err => setError(err ? 'Text too long for a QR code' : '')
+      err => setError(err ? t.tooLong : '')
     );
   }, [text, level]);
 
@@ -95,7 +132,7 @@ export default function QrGen() {
   const toPngBlob = () =>
     new Promise<Blob>((resolve, reject) => {
       const canvas = canvasRef.current;
-      if (!canvas) return reject(new Error('No QR code yet.'));
+      if (!canvas) return reject(new Error(t.noQr));
       canvas.toBlob(b => (b ? resolve(b) : reject(new Error('encode'))), 'image/png');
     });
 
@@ -103,7 +140,7 @@ export default function QrGen() {
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
       <div className="space-y-4">
         <label className="block space-y-1.5">
-          <span className="text-sm font-medium text-muted-foreground">Text or URL</span>
+          <span className="text-sm font-medium text-muted-foreground">{t.textOrUrl}</span>
           <textarea
             value={text}
             onChange={e => setText(e.target.value)}
@@ -113,16 +150,16 @@ export default function QrGen() {
         </label>
 
         <label className="block space-y-1.5">
-          <span className="text-sm font-medium text-muted-foreground">Error correction</span>
+          <span className="text-sm font-medium text-muted-foreground">{t.errorCorrection}</span>
           <select
             value={level}
             onChange={e => setLevel(e.target.value as ErrorLevel)}
             className="w-full rounded-lg border border-border bg-muted/40 p-2 text-sm outline-none focus:border-accent"
           >
-            <option value="L">Low (~7%)</option>
-            <option value="M">Medium (~15%)</option>
-            <option value="Q">Quartile (~25%)</option>
-            <option value="H">High (~30%)</option>
+            <option value="L">{t.levelLow}</option>
+            <option value="M">{t.levelMedium}</option>
+            <option value="Q">{t.levelQuartile}</option>
+            <option value="H">{t.levelHigh}</option>
           </select>
         </label>
 
@@ -144,7 +181,7 @@ export default function QrGen() {
               aria-expanded={menuOpen}
             >
               <Download className="h-4 w-4" />
-              Download
+              {t.download}
               <ChevronDown className={`h-3.5 w-3.5 transition-transform ${menuOpen ? 'rotate-180' : ''}`} />
             </Button>
 
diff --git a/src/islands/dev/QrRead.tsx b/src/islands/dev/QrRead.tsx
index ca18622..e22e077 100644
--- a/src/islands/dev/QrRead.tsx
+++ b/src/islands/dev/QrRead.tsx
@@ -4,6 +4,30 @@ import { Dropzone } from '@/components/ui/Dropzone';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { Alert } from '@/components/ui/Alert';
 import { usePasteImage } from '@/hooks/usePasteImage';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  noQrFound: string;
+  cannotRead: string;
+  dropPrompt: string;
+  decodedLocally: string;
+  decodedContent: string;
+}> = {
+  en: {
+    noQrFound: 'No QR code found in this image.',
+    cannotRead: 'Could not read the image file.',
+    dropPrompt: 'Drop a QR image or click to browse',
+    decodedLocally: 'Decoded entirely in your browser · or paste (⌘V)',
+    decodedContent: 'Decoded content',
+  },
+  id: {
+    noQrFound: 'Tidak ada kode QR yang ditemukan pada gambar ini.',
+    cannotRead: 'Tidak dapat membaca file gambar.',
+    dropPrompt: 'Letakkan gambar QR atau klik untuk menelusuri',
+    decodedLocally: 'Didekode sepenuhnya di browser Anda · atau tempel (⌘V)',
+    decodedContent: 'Konten hasil dekode',
+  },
+};
 
 async function decodeImage(file: File): Promise<string | null> {
   const bitmap = await createImageBitmap(file);
@@ -18,7 +42,8 @@ async function decodeImage(file: File): Promise<string | null> {
   return result?.data ?? null;
 }
 
-export default function QrRead() {
+export default function QrRead({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [value, setValue] = useState('');
   const [error, setError] = useState('');
 
@@ -31,10 +56,10 @@ export default function QrRead() {
       if (decoded) {
         setValue(decoded);
       } else {
-        setError('No QR code found in this image.');
+        setError(t.noQrFound);
       }
     } catch {
-      setError('Could not read the image file.');
+      setError(t.cannotRead);
     }
   };
 
@@ -46,8 +71,8 @@ export default function QrRead() {
     <div className="space-y-4">
       <Dropzone onDrop={handleFile} accept="image/*" multiple={false}>
         <div className="space-y-2">
-          <p className="text-lg">Drop a QR image or click to browse</p>
-          <p className="text-sm text-muted-foreground">Decoded entirely in your browser · or paste (⌘V)</p>
+          <p className="text-lg">{t.dropPrompt}</p>
+          <p className="text-sm text-muted-foreground">{t.decodedLocally}</p>
         </div>
       </Dropzone>
 
@@ -56,7 +81,7 @@ export default function QrRead() {
       {value && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Decoded content</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.decodedContent}</span>
             <CopyButton value={value} />
           </div>
           <div className="rounded-lg border border-border bg-muted/40 p-3 text-sm break-all">
diff --git a/src/islands/dev/TextDiff.tsx b/src/islands/dev/TextDiff.tsx
index 18a4638..e591b51 100644
--- a/src/islands/dev/TextDiff.tsx
+++ b/src/islands/dev/TextDiff.tsx
@@ -5,6 +5,48 @@ import { CopyButton } from '@/components/ui/CopyButton';
 import { LoadFileButton } from '@/components/ui/LoadFileButton';
 import { DownloadTextButton } from '@/components/ui/DownloadTextButton';
 import { diffLines, type DiffRow, type RowType } from '@/tools/dev/diff.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  loadOriginal: string;
+  loadChanged: string;
+  original: string;
+  changed: string;
+  compare: string;
+  clear: string;
+  originalOnly: (n: number) => string;
+  changedOnly: (n: number) => string;
+  unchanged: string;
+  unified: string;
+  split: string;
+}> = {
+  en: {
+    loadOriginal: 'Load original file',
+    loadChanged: 'Load changed file',
+    original: 'Original',
+    changed: 'Changed',
+    compare: 'Compare',
+    clear: 'Clear',
+    originalOnly: (n) => `Original only (${n})`,
+    changedOnly: (n) => `Changed only (${n})`,
+    unchanged: 'unchanged (both)',
+    unified: 'Unified',
+    split: 'Split',
+  },
+  id: {
+    loadOriginal: 'Muat file asli',
+    loadChanged: 'Muat file yang diubah',
+    original: 'Asli',
+    changed: 'Diubah',
+    compare: 'Bandingkan',
+    clear: 'Bersihkan',
+    originalOnly: (n) => `Hanya di asli (${n})`,
+    changedOnly: (n) => `Hanya di yang diubah (${n})`,
+    unchanged: 'tidak berubah (keduanya)',
+    unified: 'Gabungan',
+    split: 'Terpisah',
+  },
+};
 
 const rowStyles: Record<RowType, string> = {
   equal: 'text-muted-foreground',
@@ -19,7 +61,8 @@ const TEXT_ACCEPT =
 
 type ViewMode = 'unified' | 'split';
 
-export default function TextDiff() {
+export default function TextDiff({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [left, setLeft] = useState('');
   const [right, setRight] = useState('');
   const [rows, setRows] = useState<DiffRow[] | null>(null);
@@ -55,10 +98,10 @@ export default function TextDiff() {
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div className="space-y-2">
           <div className="flex justify-end">
-            <LoadFileButton onLoad={loadLeft} accept={TEXT_ACCEPT} label="Load original file" />
+            <LoadFileButton onLoad={loadLeft} accept={TEXT_ACCEPT} label={t.loadOriginal} />
           </div>
           <TextArea
-            label="Original"
+            label={t.original}
             value={left}
             onChange={e => setLeft(e.target.value)}
             rows={12}
@@ -67,10 +110,10 @@ export default function TextDiff() {
         </div>
         <div className="space-y-2">
           <div className="flex justify-end">
-            <LoadFileButton onLoad={loadRight} accept={TEXT_ACCEPT} label="Load changed file" />
+            <LoadFileButton onLoad={loadRight} accept={TEXT_ACCEPT} label={t.loadChanged} />
           </div>
           <TextArea
-            label="Changed"
+            label={t.changed}
             value={right}
             onChange={e => setRight(e.target.value)}
             rows={12}
@@ -80,9 +123,9 @@ export default function TextDiff() {
       </div>
 
       <div className="flex flex-wrap gap-2">
-        <Button onClick={() => compareWith(left, right)}>Compare</Button>
+        <Button onClick={() => compareWith(left, right)}>{t.compare}</Button>
         <Button variant="ghost" onClick={() => { setLeft(''); setRight(''); setRows(null); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -92,13 +135,13 @@ export default function TextDiff() {
             {/* Spell out which side each color/prefix belongs to. */}
             <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
               <span className="rounded-sm bg-red-500/10 px-1.5 text-red-600 dark:text-red-400">
-                <span className="font-mono font-bold">−</span> Original only ({removed})
+                <span className="font-mono font-bold">−</span> {t.originalOnly(removed)}
               </span>
               <span className="rounded-sm bg-green-500/10 px-1.5 text-green-600 dark:text-green-400">
-                <span className="font-mono font-bold">+</span> Changed only ({added})
+                <span className="font-mono font-bold">+</span> {t.changedOnly(added)}
               </span>
               <span className="text-muted-foreground">
-                <span className="font-mono">·</span> unchanged (both)
+                <span className="font-mono">·</span> {t.unchanged}
               </span>
             </div>
             <div className="flex items-center gap-3">
@@ -112,7 +155,7 @@ export default function TextDiff() {
                       : 'text-muted-foreground hover:text-foreground'
                   }`}
                 >
-                  Unified
+                  {t.unified}
                 </button>
                 <button
                   onClick={() => setViewMode('split')}
@@ -122,7 +165,7 @@ export default function TextDiff() {
                       : 'text-muted-foreground hover:text-foreground'
                   }`}
                 >
-                  Split
+                  {t.split}
                 </button>
               </div>
               <div className="flex gap-2">
@@ -150,7 +193,7 @@ export default function TextDiff() {
               {/* Left side - Original */}
               <div className="max-h-[30rem] overflow-auto bg-background">
                 <div className="sticky top-0 bg-red-500/20 px-3 py-1 text-xs font-bold text-red-700 dark:text-red-300 border-b border-border">
-                  Original
+                  {t.original}
                 </div>
                 <pre className="text-sm leading-relaxed">
                   {rows.map((row, index) => (
@@ -172,7 +215,7 @@ export default function TextDiff() {
               {/* Right side - Changed */}
               <div className="max-h-[30rem] overflow-auto bg-background">
                 <div className="sticky top-0 bg-green-500/20 px-3 py-1 text-xs font-bold text-green-700 dark:text-green-300 border-b border-border">
-                  Changed
+                  {t.changed}
                 </div>
                 <pre className="text-sm leading-relaxed">
                   {rows.map((row, index) => (
diff --git a/src/islands/dev/Timestamp.tsx b/src/islands/dev/Timestamp.tsx
index 48a6bcd..3224c40 100644
--- a/src/islands/dev/Timestamp.tsx
+++ b/src/islands/dev/Timestamp.tsx
@@ -3,6 +3,7 @@ import { TextArea } from '@/components/ui/TextArea';
 import { Button } from '@/components/ui/Button';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { Alert } from '@/components/ui/Alert';
+import type { Lang } from '@/i18n/config';
 import {
   describeDate,
   parseTimestamp,
@@ -15,7 +16,64 @@ import {
 
 const TIME_ZONES = listTimeZones();
 
-export default function Timestamp() {
+const TR: Record<Lang, {
+  inputLabel: string;
+  convert: string;
+  now: string;
+  orPick: string;
+  local: string;
+  utc: string;
+  clear: string;
+  parseError: string;
+  detectedPrefix: string;
+  convertToTz: string;
+  rowUnixSeconds: string;
+  rowUnixMillis: string;
+  rowIso: string;
+  rowUtc: string;
+  rowLocal: string;
+  rowIn: (tz: string) => string;
+}> = {
+  en: {
+    inputLabel: 'Unix timestamp or date string',
+    convert: 'Convert',
+    now: 'Now',
+    orPick: 'Or pick date & time',
+    local: 'Local',
+    utc: 'UTC',
+    clear: 'Clear',
+    parseError: 'Could not parse that as a date or Unix timestamp.',
+    detectedPrefix: 'Detected numeric input as',
+    convertToTz: 'Convert to time zone',
+    rowUnixSeconds: 'Unix (seconds)',
+    rowUnixMillis: 'Unix (millis)',
+    rowIso: 'ISO 8601',
+    rowUtc: 'UTC',
+    rowLocal: 'Local',
+    rowIn: (tz) => `In ${tz}`,
+  },
+  id: {
+    inputLabel: 'Timestamp Unix atau string tanggal',
+    convert: 'Konversi',
+    now: 'Sekarang',
+    orPick: 'Atau pilih tanggal & waktu',
+    local: 'Lokal',
+    utc: 'UTC',
+    clear: 'Bersihkan',
+    parseError: 'Tidak dapat mengurai itu sebagai tanggal atau timestamp Unix.',
+    detectedPrefix: 'Input numerik terdeteksi sebagai',
+    convertToTz: 'Konversi ke zona waktu',
+    rowUnixSeconds: 'Unix (detik)',
+    rowUnixMillis: 'Unix (milidetik)',
+    rowIso: 'ISO 8601',
+    rowUtc: 'UTC',
+    rowLocal: 'Lokal',
+    rowIn: (tz) => `Di ${tz}`,
+  },
+};
+
+export default function Timestamp({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('');
   const [date, setDate] = useState<Date | null>(null);
   const [timeZone, setTimeZone] = useState(() => getLocalTimeZone());
@@ -43,7 +101,7 @@ export default function Timestamp() {
     if (!trimmed) return;
     const parsed = parseTimestamp(trimmed);
     if (parsed === null) {
-      setError('Could not parse that as a date or Unix timestamp.');
+      setError(t.parseError);
       return;
     }
     setDate(parsed);
@@ -61,19 +119,19 @@ export default function Timestamp() {
   const rows: [string, string][] =
     date && described
       ? [
-          ['Unix (seconds)', String(described.unixSeconds)],
-          ['Unix (millis)', String(described.unixMillis)],
-          ['ISO 8601', described.iso],
-          ['UTC', described.utc],
-          ['Local', described.local],
-          [`In ${timeZone}`, formatInTimeZone(date, timeZone)],
+          [t.rowUnixSeconds, String(described.unixSeconds)],
+          [t.rowUnixMillis, String(described.unixMillis)],
+          [t.rowIso, described.iso],
+          [t.rowUtc, described.utc],
+          [t.rowLocal, described.local],
+          [t.rowIn(timeZone), formatInTimeZone(date, timeZone)],
         ]
       : [];
 
   return (
     <div className="space-y-4">
       <TextArea
-        label="Unix timestamp or date string"
+        label={t.inputLabel}
         value={input}
         onChange={e => setInput(e.target.value)}
         placeholder="1720000000 (s · ms · µs · ns)  ·  2026-07-12  ·  Jul 12 2026 10:00"
@@ -81,15 +139,15 @@ export default function Timestamp() {
       />
 
       <div className="flex flex-wrap items-end gap-3">
-        <Button onClick={convert}>Convert</Button>
+        <Button onClick={convert}>{t.convert}</Button>
         <Button variant="secondary" onClick={now}>
-          Now
+          {t.now}
         </Button>
 
         {/* Pick a specific date & time, interpreted as local or UTC. */}
         <div className="space-y-1">
           <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">
-            Or pick date &amp; time
+            {t.orPick}
           </span>
           <div className="flex flex-wrap items-stretch gap-2">
             <input
@@ -106,7 +164,7 @@ export default function Timestamp() {
                 aria-pressed={pickerZone === 'local'}
                 className={`px-3 text-sm font-bold ${pickerZone === 'local' ? 'bg-accent text-accent-foreground' : 'bg-muted'}`}
               >
-                Local
+                {t.local}
               </button>
               <button
                 type="button"
@@ -114,14 +172,14 @@ export default function Timestamp() {
                 aria-pressed={pickerZone === 'utc'}
                 className={`border-l-2 border-border px-3 text-sm font-bold ${pickerZone === 'utc' ? 'bg-accent text-accent-foreground' : 'bg-muted'}`}
               >
-                UTC
+                {t.utc}
               </button>
             </div>
           </div>
         </div>
 
         <Button variant="ghost" onClick={() => { setInput(''); setDate(null); setError(''); setDetectedUnit(''); setPickerValue(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -129,7 +187,7 @@ export default function Timestamp() {
 
       {detectedUnit && (
         <p className="text-sm text-muted-foreground">
-          Detected numeric input as{' '}
+          {t.detectedPrefix}{' '}
           <span className="font-bold text-foreground">Unix {detectedUnit}</span>.
         </p>
       )}
@@ -138,7 +196,7 @@ export default function Timestamp() {
         <>
           <label className="flex flex-wrap items-center gap-2 text-sm">
             <span className="font-bold uppercase tracking-wide text-muted-foreground">
-              Convert to time zone
+              {t.convertToTz}
             </span>
             <select
               value={timeZone}
diff --git a/src/islands/dev/UrlEncode.tsx b/src/islands/dev/UrlEncode.tsx
index bc5ac89..9294cb2 100644
--- a/src/islands/dev/UrlEncode.tsx
+++ b/src/islands/dev/UrlEncode.tsx
@@ -3,10 +3,38 @@ import { TextArea } from '@/components/ui/TextArea';
 import { Button } from '@/components/ui/Button';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { Alert } from '@/components/ui/Alert';
+import type { Lang } from '@/i18n/config';
 
 type Mode = 'encode' | 'decode';
 
-export default function UrlEncode() {
+const TR: Record<Lang, {
+  inputLabel: string;
+  encode: string;
+  decode: string;
+  clear: string;
+  invalidInput: string;
+  result: string;
+}> = {
+  en: {
+    inputLabel: 'Input',
+    encode: 'Encode →',
+    decode: '← Decode',
+    clear: 'Clear',
+    invalidInput: 'Invalid input for URL decoding',
+    result: 'Result',
+  },
+  id: {
+    inputLabel: 'Input',
+    encode: 'Encode →',
+    decode: '← Decode',
+    clear: 'Bersihkan',
+    invalidInput: 'Input tidak valid untuk decoding URL',
+    result: 'Hasil',
+  },
+};
+
+export default function UrlEncode({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [input, setInput] = useState('');
   const [output, setOutput] = useState('');
   const [error, setError] = useState('');
@@ -23,7 +51,7 @@ export default function UrlEncode() {
       setOutput(mode === 'encode' ? encodeURIComponent(source) : decodeURIComponent(source));
     } catch {
       setOutput('');
-      setError('Invalid input for URL decoding');
+      setError(t.invalidInput);
     }
   };
 
@@ -42,7 +70,7 @@ export default function UrlEncode() {
   return (
     <div className="space-y-4">
       <TextArea
-        label="Input"
+        label={t.inputLabel}
         value={input}
         onChange={e => handleInputChange(e.target.value)}
         placeholder="https://example.com/?q=hello world"
@@ -55,17 +83,17 @@ export default function UrlEncode() {
           aria-pressed={activeMode === 'encode'}
           onClick={() => run('encode')}
         >
-          Encode →
+          {t.encode}
         </Button>
         <Button
           variant={activeMode === 'decode' ? 'primary' : 'secondary'}
           aria-pressed={activeMode === 'decode'}
           onClick={() => run('decode')}
         >
-          ← Decode
+          {t.decode}
         </Button>
         <Button variant="ghost" onClick={clear}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -74,7 +102,7 @@ export default function UrlEncode() {
       {output && (
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-muted-foreground">Result</span>
+            <span className="text-sm font-medium text-muted-foreground">{t.result}</span>
             <CopyButton value={output} />
           </div>
           <pre className="max-h-[20rem] overflow-auto whitespace-pre-wrap break-all rounded-lg border border-border bg-muted/40 p-3 text-sm">
diff --git a/src/islands/dev/UuidGen.tsx b/src/islands/dev/UuidGen.tsx
index 3602e14..73d4c68 100644
--- a/src/islands/dev/UuidGen.tsx
+++ b/src/islands/dev/UuidGen.tsx
@@ -1,8 +1,15 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/Button';
 import { CopyButton } from '@/components/ui/CopyButton';
+import type { Lang } from '@/i18n/config';
 
-export default function UuidGen() {
+const TR: Record<Lang, { count: string; generate: string; copyAll: string }> = {
+  en: { count: 'Count', generate: 'Generate', copyAll: 'Copy all' },
+  id: { count: 'Jumlah', generate: 'Buat', copyAll: 'Salin semua' },
+};
+
+export default function UuidGen({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [count, setCount] = useState(5);
   const [uuids, setUuids] = useState<string[]>([]);
 
@@ -16,7 +23,7 @@ export default function UuidGen() {
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-3">
         <label className="flex items-center gap-2 text-sm">
-          <span className="text-muted-foreground">Count</span>
+          <span className="text-muted-foreground">{t.count}</span>
           <input
             type="number"
             min={1}
@@ -26,8 +33,8 @@ export default function UuidGen() {
             className="w-24 rounded-lg border border-border bg-muted/40 px-2 py-1.5 text-sm outline-none focus:border-accent"
           />
         </label>
-        <Button onClick={generate}>Generate</Button>
-        {uuids.length > 0 && <CopyButton value={uuids.join('\n')} label="Copy all" />}
+        <Button onClick={generate}>{t.generate}</Button>
+        {uuids.length > 0 && <CopyButton value={uuids.join('\n')} label={t.copyAll} />}
       </div>
 
       {uuids.length > 0 && (