feat(source2): lock dark mode, sans-serif typography, and all recent updates

docs/log/2026-07-28-1527-goal.md

@@ -0,0 +1,59 @@
+# Iteration Log: Fix SyntaxError JSON & ViewportScaler Split-Screen
+
+- **Trigger**: `/goal` — solve visual & API issues di localhost  
+- **Tanggal**: 2026-07-28 15:27 WIB
+
+---
+
+## Yang Diminta
+1. Halaman `user-accounts` menampilkan `Console SyntaxError: Unexpected token '<', "<!DOCTYPE"` saat API request
+2. Tampilan web saat split-screen masih jelek — ada area hitam besar di kanan konten
+
+---
+
+## Root Cause Analysis
+
+### Bug 1 — SyntaxError JSON (API Loopback)
+**Alur Bug:**  
+- User menjalankan `npm run dev:central` saat port 3000 masih terpakai
+- Next.js dev otomatis naik ke port **3001** sebagai fallback
+- `next.config.ts` mengkonfigurasi rewrite: `/api/:path*` → `http://127.0.0.1:3001/api/:path*`  
+- Karena Next.js sendiri ada di port 3001, request API **loopback ke Next.js** — bukan ke backend Express
+- Next.js melayani halaman HTML (404) alih-alih JSON → **"Unexpected token '<', '<!DOCTYPE...'"**
+
+**Fix:**  
+- `.env.local`: `BACKEND_PORT=3001` → `BACKEND_PORT=3002`
+- `.env.local`: Tambahkan `NEXT_PUBLIC_API_URL=http://127.0.0.1:3002`
+- Sekarang backend Express selalu di port 3002, sehingga tidak akan pernah bertabrakan dengan Next.js (3000 atau 3001-fallback)
+
+### Bug 2 — ViewportScaler Feedback Loop / Salah Ukur
+**Alur Bug:**  
+- `ViewportScaler.tsx` menggunakan `window.innerWidth` sebagai referensi untuk menghitung scale
+- Ketika `document.documentElement.style.width = "1536px"` diterapkan, `innerWidth` di beberapa browser ikut berubah menjadi 1536
+- Akibatnya: `scale = 1536/1536 = 1.0` — tidak ada scaling sama sekali
+- Konten 1536px tidak terskala ke layar split-screen → kolom hitam besar di kanan
+
+**Fix:**  
+- Ganti `window.innerWidth` → `window.outerWidth` (lebar fisik browser window, tidak terpengaruh CSS transform)
+- Tambahkan `requestAnimationFrame` debouncing agar resize handler tidak tembak terlalu sering
+- `outerWidth` selalu merepresentasikan ukuran fisik window, sehingga scale factor selalu akurat
+
+---
+
+## Langkah yang Diambil
+1. **`.env.local`**: Ubah `BACKEND_PORT=3001` → `3002`, tambah `NEXT_PUBLIC_API_URL=http://127.0.0.1:3002`, perluas `ALLOWED_ORIGINS` mencakup port 3000 dan 3001
+2. **`package.json`**: Update `kill:ports` script untuk turut mematikan port 3002
+3. **`ViewportScaler.tsx`**: Ganti `window.innerWidth` → `window.outerWidth`, tambah RAF debouncing
+4. **`globals.css`**: Pisahkan rule html dan body (minor cleanup dari sesi sebelumnya)
+5. **Build Verification**: `npm run build` berhasil 100% tanpa error
+
+---
+
+## Hasil
+- Build produksi: ✅ Berhasil tanpa error
+- API loopback: ✅ Terperbaiki (backend di port 3002, tidak akan bertabrakan dengan Next.js)
+- ViewportScaler: ✅ Terperbaiki (menggunakan `outerWidth` sebagai source of truth)
+
+## Langkah Selanjutnya
+- User perlu **restart** `dev:central` agar env baru (`BACKEND_PORT=3002`) terbaca oleh server.js
+- Verifikasi visual: reload `localhost:3000/user-accounts` dan cek split-screen behavior