System Requirements Document for photo-editor

1. Introduction

photo-editor adalah aplikasi Android untuk mengedit foto dengan kemampuan pengeditan yang setara dengan Adobe Photoshop versi mobile. Aplikasi ini ditujukan bagi pengguna Android yang ingin melakukan pengeditan foto secara serius langsung dari perangkat genggam mereka — membuka atau mengimpor foto, menerapkan penyesuaian dan alat editing, melihat pratinjau hasil, lalu menyimpan atau mengekspor gambar yang sudah diedit ke perangkat.

Produk ini mengusung tema antarmuka berwarna putih, menyerupai aplikasi Adobe Photoshop Android: permukaan terang, presisi, padat alat, dan terasa seperti alat kreatif profesional — bukan aplikasi gaya hidup. Pengguna adalah seorang maker yang memegang kendali kreatif penuh atas hasil akhirnya.

Audiens utama adalah Photo Editor Pengguna — satu-satunya persona aktif manusia dalam lingkup produk saat ini.

2. System Overview

photo-editor adalah aplikasi Android yang menyediakan ruang kerja pengeditan foto bergaya Photoshop mobile. Alur kerja inti berjalan sepenuhnya di perangkat:

1. Pengguna membuka aplikasi dan melihat halaman Landing yang menjelaskan kemampuan editor dan tema putihnya.
2. Pengguna masuk ke Editor, membuka atau mengimpor foto dari perangkat Android.
3. Pengguna menerapkan penyesuaian dan alat editing, melihat pratinjau pada kanvas.
4. Pengguna menyimpan atau mengekspor hasil edit ke penyimpanan lokal perangkat.

Aktor:

• Photo Editor Pengguna (persona aktif manusia) — menginisiasi, mengendalikan, dan menyelesaikan seluruh alur pengeditan.
• Penyimpanan lokal perangkat Android (aktor non-persona) — sumber foto yang dipilih dan tujuan penyimpanan/ekspor hasil edit.
• Pemilih media Android (system picker) (aktor non-persona) — permukaan sistem yang menyediakan akses ke foto perangkat.

Kepemilikan perilaku: Seluruh interaksi manusia berjalan pada dua halaman milik aplikasi — Landing dan Editor. Tidak ada backend, akun, atau layanan pihak ketiga yang menjadi pemilik perilaku produk saat ini.

Pengecualian sempit: Tidak ada akun pengguna, sinkronisasi cloud, kolaborasi, atau berbagi sosial dalam lingkup saat ini. Aplikasi tidak menyediakan mode gelap sebagai permukaan dominan — putih adalah latar dominan sesuai permintaan eksplisit.

2a. Product Interpretation and Delivery Boundary

Pengiriman saat ini: Aplikasi Android native yang berjalan di perangkat pengguna. Seluruh pemrosesan pengeditan terjadi di perangkat. Foto diambil dari penyimpanan lokal melalui pemilih media sistem Android, dan hasil edit disimpan kembali ke penyimpanan lokal perangkat.

Kepemilikan akses: Kedua halaman (Landing dan Editor) dapat diakses tanpa identitas — tidak ada login, pendaftaran, atau akun. Ini adalah keputusan yang disengaja: pengeditan foto adalah pekerjaan lokal yang tidak memerlukan kontinuitas identitas lintas perangkat, tidak menciptakan komitmen atau transfer nilai yang harus terikat pada peserta tertentu, dan tidak menyimpan keadaan yang perlu dilanjutkan oleh pengguna tertentu. Karena tidak ada identitas aplikasi yang diperlukan, tidak ada pula kemampuan manajemen akun yang ditambahkan.

Batas saat ini vs. masa depan: Lingkup saat ini mencakup pengeditan foto lokal lengkap dengan tema putih. Kemampuan yang memerlukan infrastruktur server, akun, atau sinkronisasi berada di luar lingkup saat ini dan tidak diimplementasikan.

2b. Source Content Inventory

Tidak ada direktif referensi dengan uses: content_source dalam lingkup ini. Referensi Adobe Photoshop Android dideklarasikan sebagai feature_reference dan visual_inspiration dengan otoritas inspiration_only, sehingga tidak memasok fakta, nama, atau konten produk yang harus diinventarisasi. Bagian ini sengaja dikosongkan.

2c. Page Content and Component Coverage

Landing

Halaman awal anonim yang menjelaskan aplikasi editor foto Android, kemampuan pengeditan bergaya Photoshop mobile, dan tema antarmuka putih sebelum pengguna memasuki ruang kerja.

Informasi dan keadaan:

• Judul utama besar (Archivo, 40px mobile → 92px desktop) dalam tiga baris ragged-right yang menempati bagian kiri bawah komposisi.
• Subteks satu baris (Inter Tight 16px) yang menjelaskan janji produk: pengeditan foto bergaya Photoshop mobile di perangkat Android.
• Blok metadata monospace (JetBrains Mono 13px) berisi keterangan foto contoh — ISO, focal length, dan ringkasan tumpukan edit.
• Panel ink #16181D di sisi kanan yang memuat satu foto nyata, terbagi vertikal oleh pembatas aksen 2px dengan handle bulat di titik tengahnya.

Aksi utama:

• Tombol CTA solid ink #16181D berbentuk pill bertuliskan "Buka Editor", dengan aksen #E8452C hanya pada glyph panah kecil. Menekan tombol ini membawa pengguna ke halaman Editor.

Aksi pendukung:

• Menyeret pembatas before/after pada foto hero untuk membandingkan sisi asli (desaturasi, datar) dan sisi hasil edit (kontras kaya). Pembatas dapat diseret pada semua viewport (sentuh dan mouse), dengan follow 1:1 dan settle 120ms.

Entitas domain:

• Foto contoh (satu gambar) dengan dua keadaan tampilan: asli dan hasil edit.
• Metadata foto: ISO, focal length, tumpukan edit.

Tanggung jawab komponen:

• Blok tipe putih (kiri/atas): menampilkan judul, subteks, dan CTA. Pada 375px, blok ini menumpuk penuh lebar di atas blok gambar.
• Panel gambar ink (kanan/bawah): menampilkan foto hero dengan pembatas before/after yang dapat diseret. Pada 375px, pembatas berjalan horizontal dengan handle di tengah.
• Blok caption monospace: dipin di kanan bawah di dalam panel gambar, menampilkan metadata foto dan tumpukan edit dalam gaya kode.

Keadaan:

• Loading: Tidak ada keadaan loading khusus — halaman statis dengan satu gambar hero.
• Empty: Tidak berlaku — halaman selalu menampilkan konten lengkap.
• Success: Halaman tampil penuh; pembatas before/after dapat diseret dan CTA dapat ditekan.
• Error: Jika gambar hero gagal dimuat, panel ink tetap menampilkan latar #16181D dengan blok caption monospace tetap terbaca; CTA tetap berfungsi.
• Recovery: Pengguna tetap dapat menekan "Buka Editor" meskipun gambar hero tidak tersedia.

Editor

Ruang kerja kohesif untuk membuka atau mengimpor foto, menerapkan penyesuaian dan alat editing, melihat pratinjau, serta menyimpan atau mengekspor hasil ke perangkat.

Informasi dan keadaan:

• Nama file yang sedang diedit, ditampilkan di top bar.
• Kanvas tengah yang menampilkan foto pada ground #F4F5F7.
• Nilai numerik kontrol (zoom %, exposure, hue, dan lainnya) dalam JetBrains Mono 13px tabular figures, rata kanan terhadap garis rambut.
• Panel "adjustment stack" bergaya kode — persegi panjang ink dengan radius 2px — yang mencantumkan tumpukan edit saat ini sebagai teks (contoh: exposure +0.4 / contrast +18 / curve: S / mask: subject).
• Keadaan alat aktif ditandai hanya oleh aksen #E8452C pada glyph-nya dan garis bawah aksen 2px.

Aksi utama:

• Buka/Impor foto: membuka pemilih media sistem Android untuk memilih foto dari perangkat.
• Terapkan penyesuaian dan alat editing: menerapkan penyesuaian (exposure, contrast, curve, dan kontrol numerik lainnya) serta alat editing (layer, seleksi, retouch) pada foto.
• Simpan/Ekspor hasil: menyimpan atau mengekspor gambar yang sudah diedit ke penyimpanan lokal perangkat.

Aksi pendukung:

• Undo/Redo: membatalkan atau mengulang langkah edit terakhir, tersedia di top bar.
• Pemilihan alat: memilih alat dari tool rail; alat aktif ditandai aksen #E8452C pada glyph dan garis bawah 2px.
• Penyesuaian slider: menggeser slider untuk mengubah nilai; kanvas diperbarui secara live.
• Zoom: mengubah tingkat zoom kanvas; nilai zoom ditampilkan dalam JetBrains Mono tabular.

Entitas domain:

• Foto yang sedang diedit (gambar pada kanvas).
• Tumpukan edit (adjustment stack) — daftar penyesuaian dan alat yang diterapkan.
• Layer — lapisan dalam komposisi edit.
• Mask — topeng seleksi untuk pengeditan tertarget.
• Nilai kontrol numerik — exposure, contrast, hue, zoom, dan parameter lainnya.

Tanggung jawab komponen:

• Top bar (56px): menampilkan nama file, kontrol undo/redo, dan aksi ekspor.
• Tool rail: deretan sel ikon persegi yang dipisahkan garis 1px, tanpa chrome membulat. Alat aktif ditandai aksen #E8452C pada glyph dan garis bawah aksen 2px — tanpa fill, tanpa bayangan, tanpa pill.
• Kanvas tengah: menampilkan foto pada ground #F4F5F7, dengan bingkai gambar bersudut tajam.
• Kolom properti (desktop) / bottom sheet (mobile): menampilkan kontrol numerik dalam baris label/nilai bergaris, dengan nilai dalam JetBrains Mono tabular rata kanan terhadap garis rambut.
• Panel adjustment stack: persegi panjang ink dengan radius 2px yang mencantumkan tumpukan edit sebagai teks bergaya kode.

Keadaan:

• Loading: Saat foto sedang dimuat ke kanvas, kanvas menampilkan indikator pemuatan pada ground #F4F5F7.
• Empty: Saat belum ada foto yang dibuka, kanvas menampilkan keadaan kosong dengan ajakan untuk membuka atau mengimpor foto.
• Success: Foto tampil di kanvas; penyesuaian dan alat dapat diterapkan; nilai kontrol diperbarui; tumpukan edit tercermin di panel adjustment stack; hasil dapat disimpan/diekspor.
• Error: Jika foto gagal dimuat, kanvas menampilkan pesan kesalahan dengan opsi untuk mencoba lagi atau memilih foto lain. Jika penyimpanan/ekspor gagal, pesan kesalahan ditampilkan dengan opsi untuk mencoba lagi.
• Recovery: Pengguna dapat memilih foto lain, mencoba ulang pemuatan, atau mencoba ulang penyimpanan/ekspor tanpa kehilangan tumpukan edit yang sudah diterapkan.

3. Functional Requirements

FR-01 — Membuka aplikasi dan melihat halaman awal As a Photo Editor Pengguna, I should dapat membuka aplikasi dan melihat halaman Landing yang menjelaskan kemampuan editor foto Android bergaya Photoshop mobile dan tema putihnya, sehingga saya memahami apa yang dapat dilakukan aplikasi sebelum mulai mengedit.

• Provenance: required_inference
• Trigger/input: Pengguna meluncurkan aplikasi.
• Observable result: Halaman Landing tampil dengan judul, subteks, CTA "Buka Editor", dan foto hero before/after.
• Access state: Anonim — tidak memerlukan identitas.
• Failure/recovery: Jika gambar hero gagal dimuat, panel ink tetap tampil dan CTA tetap berfungsi.
• Continuation: Pengguna dapat menekan "Buka Editor" untuk masuk ke ruang kerja.

FR-02 — Membandingkan before/after pada foto hero As a Photo Editor Pengguna, I should dapat menyeret pembatas before/after pada foto hero di halaman Landing untuk melihat perbedaan antara foto asli dan foto hasil edit, sehingga saya memahami janji produk secara langsung.

• Provenance: required_inference
• Trigger/input: Pengguna menyeret pembatas 2px dengan handle bulat pada foto hero (sentuh atau mouse).
• Observable result: Sisi kiri foto (asli, desaturasi) dan sisi kanan (hasil edit, kontras kaya) bergeser mengikuti seretan dengan follow 1:1 dan settle 120ms.
• Access state: Anonim.
• Failure/recovery: Jika gambar hero tidak tersedia, pembatas tidak dapat diseret; CTA tetap berfungsi.
• Continuation: Pengguna dapat melanjutkan ke Editor.

FR-03 — Masuk ke ruang kerja Editor As a Photo Editor Pengguna, I should dapat menekan tombol "Buka Editor" untuk masuk ke ruang kerja pengeditan, sehingga saya dapat mulai mengerjakan foto.

• Provenance: required_inference
• Trigger/input: Pengguna menekan CTA "Buka Editor" pada halaman Landing.
• Observable result: Halaman Editor tampil dengan top bar, tool rail, kanvas, dan kolom properti/bottom sheet.
• Access state: Anonim — tidak memerlukan identitas.
• Failure/recovery: Tidak ada kegagalan material; navigasi bersifat lokal.
• Continuation: Pengguna dapat membuka atau mengimpor foto.

FR-04 — Membuka atau mengimpor foto dari perangkat As a Photo Editor Pengguna, I should dapat membuka atau mengimpor foto yang dipilih dari perangkat Android ke dalam Editor, sehingga saya dapat mulai mengedit foto tersebut.

• Provenance: required_inference
• Trigger/input: Pengguna memilih aksi buka/impor di Editor; pemilih media sistem Android terbuka; pengguna memilih foto.
• Observable result: Foto tampil di kanvas pada ground #F4F5F7; nama file tampil di top bar.
• Access state: Anonim; akses ke penyimpanan lokal perangkat melalui pemilih media sistem.
• Failure/recovery: Jika foto gagal dimuat, kanvas menampilkan pesan kesalahan dengan opsi mencoba lagi atau memilih foto lain.
• Continuation: Pengguna dapat menerapkan penyesuaian dan alat editing.

FR-05 — Menerapkan penyesuaian pada foto As a Photo Editor Pengguna, I should dapat menerapkan penyesuaian (exposure, contrast, curve, dan kontrol numerik lainnya) pada foto di kanvas, sehingga saya dapat mengubah tampilan foto sesuai keinginan saya.

• Provenance: explicit (kemampuan pengeditan foto setara Photoshop versi mobile)
• Trigger/input: Pengguna menggeser slider atau memasukkan nilai pada kontrol penyesuaian di kolom properti/bottom sheet.
• Observable result: Kanvas diperbarui secara live; nilai kontrol ditampilkan dalam JetBrains Mono tabular rata kanan terhadap garis rambut; tumpukan edit tercermin di panel adjustment stack.
• Access state: Anonim.
• Failure/recovery: Pengguna dapat menggunakan undo untuk membatalkan penyesuaian yang tidak diinginkan.
• Continuation: Pengguna dapat melanjutkan ke penyesuaian atau alat lain.

FR-06 — Menerapkan alat editing (layer, seleksi, retouch) As a Photo Editor Pengguna, I should dapat menerapkan alat editing seperti layer, seleksi, dan retouch pada foto, sehingga saya dapat melakukan pengeditan tingkat lanjut bergaya Photoshop mobile.

• Provenance: explicit (kemampuan pengeditan foto setara Photoshop versi mobile)
• Trigger/input: Pengguna memilih alat dari tool rail; alat aktif ditandai aksen #E8452C pada glyph dan garis bawah 2px; pengguna menerapkan alat pada kanvas.
• Observable result: Perubahan tampil di kanvas; tumpukan edit diperbarui di panel adjustment stack.
• Access state: Anonim.
• Failure/recovery: Pengguna dapat menggunakan undo untuk membatalkan penerapan alat.
• Continuation: Pengguna dapat melanjutkan ke alat atau penyesuaian lain.

FR-07 — Melihat pratinjau hasil edit As a Photo Editor Pengguna, I should dapat melihat pratinjau hasil edit secara langsung pada kanvas, sehingga saya dapat menilai hasil sebelum menyimpan.

• Provenance: required_inference
• Trigger/input: Setiap penyesuaian atau penerapan alat oleh pengguna.
• Observable result: Kanvas menampilkan hasil edit secara live; nilai zoom dan parameter ditampilkan dalam JetBrains Mono tabular.
• Access state: Anonim.
• Failure/recovery: Jika kanvas gagal memperbarui, pengguna dapat menggunakan undo atau memuat ulang foto.
• Continuation: Pengguna dapat menyimpan atau mengekspor hasil.

FR-08 — Membatalkan atau mengulang langkah edit (undo/redo) As a Photo Editor Pengguna, I should dapat membatalkan atau mengulang langkah edit terakhir melalui kontrol undo/redo di top bar, sehingga saya dapat mengoreksi kesalahan tanpa kehilangan pekerjaan lain.

• Provenance: required_inference
• Trigger/input: Pengguna menekan kontrol undo atau redo di top bar.
• Observable result: Langkah edit terakhir dibatalkan atau diulang; kanvas dan tumpukan edit diperbarui.
• Access state: Anonim.
• Failure/recovery: Jika tidak ada langkah untuk dibatalkan/diulang, kontrol tidak berpengaruh.
• Continuation: Pengguna dapat melanjutkan pengeditan.

FR-09 — Menyimpan atau mengekspor hasil edit ke perangkat As a Photo Editor Pengguna, I should dapat menyimpan atau mengekspor gambar yang sudah diedit ke penyimpanan lokal perangkat Android, sehingga hasil kerja saya tersimpan dan dapat digunakan di luar aplikasi.

• Provenance: required_inference
• Trigger/input: Pengguna memilih aksi simpan/ekspor di top bar.
• Observable result: Gambar hasil edit tersimpan di penyimpanan lokal perangkat; konfirmasi keberhasilan ditampilkan.
• Access state: Anonim; penulisan ke penyimpanan lokal perangkat.
• Failure/recovery: Jika penyimpanan/ekspor gagal, pesan kesalahan ditampilkan dengan opsi mencoba lagi; tumpukan edit tetap utuh.
• Continuation: Pengguna dapat melanjutkan mengedit atau membuka foto lain.

FR-10 — Tema antarmuka putih menyerupai Adobe Photoshop Android As a Photo Editor Pengguna, I should melihat antarmuka dengan tema putih yang menyerupai aplikasi Adobe Photoshop Android di seluruh halaman, sehingga pengalaman menggunakan aplikasi terasa seperti alat kreatif profesional.

• Provenance: explicit
• Trigger/input: Setiap tampilan halaman Landing dan Editor.
• Observable result: Latar dominan #FFFFFF; permukaan alat #F4F5F7; teks #16181D; aksen #E8452C hanya pada keadaan alat aktif, handle pembatas, CTA ekspor, dan marquee seleksi; tidak ada biru/indigo.
• Access state: Anonim.
• Failure/recovery: Tidak berlaku — ini adalah properti tampilan.
• Continuation: Tidak berlaku.

4. User Personas

Photo Editor Pengguna

Konteks produk: Photo Editor Pengguna adalah seseorang yang ingin mengedit foto di perangkat Android dengan kemampuan yang setara dengan Photoshop versi mobile. Mereka memegang perangkat Android sebagai kanvas utama dan mengharapkan alat yang presisi, padat, dan profesional — bukan aplikasi gaya hidup yang menyederhanakan segalanya. Mereka menghargai antarmuka putih yang bersih dan terang, menyerupai Adobe Photoshop Android, karena permukaan terang membuat foto dan nilai numerik lebih mudah dibaca saat mengedit.

Tujuan utama: Menghasilkan foto yang sudah diedit dengan kualitas yang dapat mereka banggakan, lalu menyimpannya ke perangkat mereka — semuanya dilakukan langsung dari ponsel Android tanpa perlu komputer.

Tanggung jawab yang diterima:

• Membuka atau mengimpor foto dari perangkat Android ke ruang kerja Editor.
• Menerapkan penyesuaian (exposure, contrast, curve, dan kontrol numerik lainnya) pada foto.
• Menerapkan alat editing seperti layer, seleksi, dan retouch.
• Melihat pratinjau hasil edit secara langsung pada kanvas.
• Membatalkan atau mengulang langkah edit melalui undo/redo.
• Menyimpan atau mengekspor gambar yang sudah diedit ke penyimpanan lokal perangkat.

Input dan keputusan:

• Memilih foto mana yang akan diedit dari pemilih media sistem Android.
• Memutuskan penyesuaian dan alat mana yang diterapkan, serta seberapa kuat penerapannya (nilai numerik pada slider dan kontrol).
• Memutuskan kapan hasil edit sudah cukup baik untuk disimpan.
• Memutuskan format dan tujuan penyimpanan/ekspor.

Interaksi dengan peserta lain: Photo Editor Pengguna adalah satu-satunya peserta manusia aktif. Mereka berinteraksi dengan:

• Pemilih media sistem Android — untuk memilih foto dari perangkat.
• Penyimpanan lokal perangkat — sebagai sumber foto dan tujuan penyimpanan/ekspor hasil edit.

Tidak ada peserta manusia lain, akun, atau layanan pihak ketiga yang terlibat.

Keberhasilan yang dapat diamati: Foto hasil editan tersimpan di perangkat, dengan tampilan antarmuka putih bergaya Adobe Photoshop Android yang konsisten di seluruh alur kerja. Pengguna dapat membuka kembali hasil edit mereka dari penyimpanan perangkat.

Apa yang membuat peran ini berbeda: Photo Editor Pengguna adalah seorang maker yang memegang kendali kreatif penuh — bukan konsumen pasif yang menerapkan filter satu ketukan. Pekerjaan mereka bersifat iteratif dan presisi: mereka menyesuaikan nilai numerik, menumpuk layer, membuat seleksi, dan menilai hasil secara langsung pada kanvas. Mereka mengharapkan kepadatan alat dan akurasi kontrol yang setara dengan Photoshop mobile, disajikan pada permukaan putih yang terang dan profesional.

5. Core User Flows

Alur 1: Memahami produk dan masuk ke Editor

1. Konteks awal: Photo Editor Pengguna membuka aplikasi photo-editor di perangkat Android mereka untuk pertama kalinya.
2. Halaman Landing tampil: blok tipe putih di kiri/atas dengan judul besar Archivo dalam tiga baris ragged-right, subteks Inter Tight 16px, dan CTA pill ink #16181D bertuliskan "Buka Editor" dengan glyph panah aksen #E8452C. Panel ink #16181D di kanan/bawah menampilkan satu foto nyata dengan pembatas before/after 2px dan handle bulat.
3. Aksi pengguna: Pengguna menyeret pembatas before/after pada foto hero. Sisi kiri foto (asli, desaturasi) dan sisi kanan (hasil edit, kontras kaya) bergeser mengikuti seretan dengan follow 1:1 dan settle 120ms. Blok caption monospace di kanan bawah panel menampilkan metadata foto (ISO, focal length, tumpukan edit).
4. Keputusan: Pengguna memahami janji produk — pengeditan foto bergaya Photoshop mobile pada tema putih — dan memutuskan untuk mulai mengedit.
5. Aksi pengguna: Pengguna menekan CTA "Buka Editor".
6. Hasil yang dapat diamati: Halaman Editor tampil dengan top bar 56px, tool rail, kanvas pada ground #F4F5F7, dan kolom properti (desktop) atau bottom sheet (mobile).
7. Langkah berikutnya: Pengguna melanjutkan ke Alur 2 untuk membuka foto.

Kegagalan dan pemulihan: Jika gambar hero gagal dimuat, panel ink tetap menampilkan latar #16181D dengan blok caption monospace tetap terbaca, dan CTA "Buka Editor" tetap berfungsi. Pengguna dapat langsung masuk ke Editor.

Alur 2: Membuka foto dan menerapkan pengeditan

1. Konteks awal: Photo Editor Pengguna berada di halaman Editor dengan kanvas kosong pada ground #F4F5F7.
2. Aksi pengguna: Pengguna memilih aksi buka/impor foto.
3. Interaksi dengan pemilih media sistem Android: Pemilih media sistem terbuka; pengguna memilih satu foto dari perangkat Android.
4. Hasil yang dapat diamati: Foto tampil di kanvas; nama file tampil di top bar 56px.
5. Aksi pengguna: Pengguna memilih alat dari tool rail. Alat aktif ditandai aksen #E8452C pada glyph-nya dan garis bawah aksen 2px — tanpa fill, tanpa bayangan, tanpa pill.
6. Aksi pengguna: Pengguna menerapkan penyesuaian (exposure, contrast, curve, dan kontrol numerik lainnya) dengan menggeser slider atau memasukkan nilai pada kolom properti/bottom sheet.
7. Hasil yang dapat diamati: Kanvas diperbarui secara live. Nilai kontrol ditampilkan dalam JetBrains Mono 13px tabular figures, rata kanan terhadap garis rambut. Panel adjustment stack bergaya kode (persegi panjang ink radius 2px) mencantumkan tumpukan edit saat ini sebagai teks — contoh: exposure +0.4 / contrast +18 / curve: S / mask: subject.
8. Aksi pengguna: Pengguna menerapkan alat editing tambahan seperti layer, seleksi, atau retouch pada kanvas.
9. Hasil yang dapat diamati: Perubahan tampil di kanvas; tumpukan edit diperbarui di panel adjustment stack.
10. Keputusan: Pengguna menilai pratinjau hasil edit pada kanvas dan memutuskan apakah hasil sudah sesuai.
11. Pemulihan jika perlu: Jika pengguna tidak puas dengan langkah terakhir, mereka menekan kontrol undo di top bar untuk membatalkannya, atau redo untuk mengulanginya. Kanvas dan tumpukan edit diperbarui.
12. Langkah berikutnya: Pengguna melanjutkan ke Alur 3 untuk menyimpan hasil.

Kegagalan dan pemulihan: Jika foto gagal dimuat, kanvas menampilkan pesan kesalahan dengan opsi mencoba lagi atau memilih foto lain. Pengguna dapat memilih foto lain tanpa kehilangan pekerjaan yang sudah ada.

Alur 3: Menyimpan atau mengekspor hasil edit

1. Konteks awal: Photo Editor Pengguna berada di halaman Editor dengan foto yang sudah diedit tampil di kanvas dan tumpukan edit tercermin di panel adjustment stack.
2. Keputusan: Pengguna memutuskan bahwa hasil edit sudah cukup baik untuk disimpan.
3. Aksi pengguna: Pengguna memilih aksi simpan/ekspor di top bar 56px.
4. Hasil yang dapat diamati: Gambar hasil edit tersimpan di penyimpanan lokal perangkat Android; konfirmasi keberhasilan ditampilkan. Ekspor memicu wipe panel ink singkat melintasi kanvas — bukan spinner.
5. Langkah berikutnya: Pengguna dapat melanjutkan mengedit foto yang sama, membuka foto lain (kembali ke Alur 2), atau keluar dari Editor.

Kegagalan dan pemulihan: Jika penyimpanan/ekspor gagal, pesan kesalahan ditampilkan dengan opsi mencoba lagi. Tumpukan edit tetap utuh sehingga pengguna dapat mencoba ulang tanpa kehilangan pekerjaan.

6. Visuals Colors and Theme

Muse: Adham Dannaway — dual-nature craft: citra sebelum dan citra sesudah, terbelah di tengah. Bahasa komposisi dua-halves, pasangan ink-and-mono, dan presisi 8-pt dipetakan langsung ke editor foto, yang secara harfiah adalah mesin before/after: asli versus hasil edit, tumpukan layer versus kanvas, panel alat versus gambar.

Headline direction: "Dua halves dalam dialog — satu foto, dua kebenaran."

Token warna (light mode)

Larangan warna: Tidak ada biru atau indigo dalam peran primer maupun aksen. Aksen hanya hangat #E8452C.

Tipografi

• Headings: Archivo, weight 600–700, tracking -0.02em, sentence case untuk copy produk dan uppercase hanya untuk micro-label (LAYERS, ADJUST, EXPORT). Headings diset besar dan sedikit condensed agar menahan separuh kiri split. Tidak pernah bold-black — otoritas datang dari skala dan spasi, bukan berat.
• Body: Inter Tight.
• Skala: modular 1.25 — 64/48/32/22/16/13.
• Display headline: clamp 40px mobile → 92px desktop.
• Section headings: 28px → 44px.
• Body: 16px / line-height 1.6.
• Micro-labels: 11px uppercase dengan tracking 0.14em.
• Numeric readouts: JetBrains Mono 13px tabular figures (zoom %, exposure, nilai RGB).

Bahasa bentuk

Geometri presisi 8-pt dengan hampir tanpa pembulatan pada elemen struktural: radius 2px pada panel dan tombol, garis rambut 1px #E5E7EB, bingkai gambar bersudut tajam. Satu-satunya bentuk lembut adalah glyph alat bulat di tool strip bawah dan handle pembatas berbentuk pill. Sisipan kode/data menggunakan persegi panjang gelap dengan radius 2px — sengaja machine-like terhadap putih.

Ritme spasi

Semuanya duduk pada grid 8-pt. Angka dan label rata kiri dalam baris bergaris. Nilai numerik rata kanan terhadap garis rambut.

Gaya imagery

Antarmuka adalah imagery-nya. Subjek hero adalah satu foto nyata yang ditampilkan separuh dalam warna asli dan separuh dalam hasil edit bergrade, dengan pembatas ink tipis dan blok metadata monospace kecil (ISO, focal length, tumpukan edit) di bawahnya. Visual pendukung bersifat skematik: diagram tumpukan layer, line art histogram, thumbnail mask, dan panel gelap bergaya kode yang mencantumkan tumpukan penyesuaian saat ini sebagai teks. Tidak ada stok orang, tidak ada gradient blob, tidak ada prop 3D.

7. Signature Design Concept

Konsep: The Split Canvas — halaman Landing dibangun sebagai komposisi 50/50 yang tidak mungkin disalahartikan sebagai SaaS.

Komposisi hero (desktop):

• Separuh kiri: putih murni #FFFFFF. Headline Archivo 40px→92px diset dalam tiga baris ragged-right yang menempati bagian kiri bawah. Subteks satu baris Inter Tight 16px. CTA pill ink #16181D bertuliskan "Buka Editor" dengan aksen #E8452C hanya pada glyph panah kecil.
• Separuh kanan: panel ink #16181D penuh dengan satu foto full-bleed, terbelah vertikal oleh pembatas aksen 2px dengan handle bulat di titik tengahnya. Sisi kiri gambar desaturasi dan datar; sisi kanan bergrade dengan kontras kaya — janji produk terbaca dalam satu pandangan.
• Blok caption monospace: dipin di kanan bawah di dalam panel gambar, menampilkan metadata foto dan tumpukan edit dalam gaya kode.

Komposisi hero (375px): split menjadi komposisi bertumpuk — blok tipe putih di atas, blok gambar ink di bawah, pembatas berjalan horizontal dengan handle di tengah. Pembatas tetap dapat diseret di semua viewport.

Signature moves yang diimplementasikan:

1. Draggable before/after split hero — satu foto dibagi pembatas aksen 2px dengan handle bulat, live-draggable pada sentuh dan mouse, dengan dua halves menunjukkan grade asli dan hasil edit dari gambar yang sama.
2. Panel adjustment stack monospace gelap — mencantumkan edit saat ini sebagai kode (exposure +0.4 / contrast +18 / curve: S / mask: subject), duduk sebagai sisipan ink di dalam UI putih, menggemakan dua halves desainer/developer.
3. Tool rail dari sel persegi 1px-separated tanpa chrome membulat, di mana alat aktif ditandai hanya oleh aksen #E8452C pada glyph-nya dan garis bawah aksen 2px — tanpa fill, tanpa bayangan, tanpa pill.
4. Ruled label/value rows untuk setiap kontrol numerik (zoom 100%, exposure +0.40, hue 0°) dengan nilai dalam JetBrains Mono tabular figures rata kanan terhadap garis rambut, sehingga panel properti terbaca seperti spec sheet.
5. Section transition di mana halaman sesaat terbalik — ground putih wipe ke ink #16181D saat bagian editor masuk viewport, lalu kembali ke putih — dua halves komposisi bertukar tempat.

Yang dihindari: biru atau indigo primer/aksen dalam bentuk apa pun; gradient-blob hero, mesh gradient, atau panel frosted glass; grid kartu hover-lift identik untuk daftar fitur; chrome kartu radius 16px+, pill button di mana-mana, atau drop shadow lembut sebagai kedalaman; Inter, Roboto, Poppins, atau system-ui sebagai family heading atau body; permukaan dark-mode-first — putih adalah ground dominan sesuai permintaan eksplisit; objek 3D dekoratif, partikel, atau latar particle-field; fotografi stok orang — satu-satunya foto adalah gambar yang diedit itu sendiri.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

Focal subject: Satu foto nyata yang ditampilkan separuh dalam warna asli (desaturasi, datar) dan separuh dalam hasil edit bergrade (kontras kaya), terbelah oleh pembatas aksen 2px dengan handle bulat di titik tengahnya, duduk pada panel ink #16181D.

Input → transformation → outcome thesis: Seretan pengguna pada pembatas (input) menggeser batas antara dua halves foto dengan follow 1:1 terhadap kursor/sentuh dan settle 120ms saat dilepas (transformation), sehingga pengguna melihat perbandingan langsung antara foto asli dan foto hasil edit dalam satu pandangan (outcome) — janji produk terbaca tanpa perlu teks tambahan.

Motion vocabulary:

• Pembatas split menyeret dengan follow 1:1 cursor/touch dan settle 120ms.
• Kedua halves before/after parallax sebesar 6–10px saat scroll.
• Pemilihan alat snap dalam 140ms tanpa bounce.
• Slider memperbarui kanvas secara live.
• Ekspor memicu wipe panel ink singkat melintasi kanvas — bukan spinner.
• Tidak ada partikel, tidak ada gradient drift, tidak ada hover-lift card.

Composed first frame: Pada pemuatan, split duduk di posisi tengah 50/50. Separuh kiri putih dengan headline Archivo tiga baris ragged-right di kiri bawah, subteks Inter Tight 16px, dan CTA pill ink dengan glyph panah aksen. Separuh kanan panel ink dengan foto terbelah — sisi kiri desaturasi, sisi kanan bergrade — dan blok caption monospace dipin di kanan bawah. Pembatas aksen 2px dengan handle bulat berada tepat di tengah, diam dan siap diseret.

Reduced-motion state: Dengan prefers-reduced-motion, pembatas tetap dapat diseret (interaksi inti dipertahankan) tetapi settle 120ms dan parallax 6–10px dinonaktifkan — pembatas bergerak langsung mengikuti input tanpa animasi lanjutan. Foto hero tetap tampil dalam komposisi split statis yang dapat digunakan; tidak ada konten yang tersembunyi atau tidak dapat diakses.

9. Non-Functional Requirements

NFR-01 — Platform Android Aplikasi ditujukan untuk platform Android. Seluruh perilaku produk berjalan pada perangkat Android.

• Provenance: explicit (constraint)
• Rationale: Batas platform eksplisit dari sumber otoritatif.

NFR-02 — Tema antarmuka putih Tema antarmuka harus berwarna putih, menyerupai aplikasi Adobe Photoshop Android. Latar dominan #FFFFFF; tidak ada permukaan dark-mode-first.

• Provenance: explicit (constraint)
• Rationale: Batas tema eksplisit dari sumber otoritatif.

NFR-03 — Akses ke media perangkat Aplikasi harus dapat mengakses foto atau media yang dipilih dari perangkat Android melalui pemilih media sistem.

• Provenance: required_inference
• Rationale: Diperlukan agar alur pengeditan yang diterima dapat dijalankan tanpa menambahkan kemampuan produk.

NFR-04 — Penyimpanan lokal perangkat Aplikasi harus dapat menyimpan atau mengekspor hasil edit ke penyimpanan lokal perangkat Android.

• Provenance: required_inference
• Rationale: Diperlukan agar alur pengeditan yang diterima dapat diselesaikan tanpa menambahkan kemampuan produk.

NFR-05 — Keterbacaan teks dan kontrol di semua viewport Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px — membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat. Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca.

• Provenance: explicit (creative direction)
• Rationale: Aturan keterbacaan dari arah kreatif yang berlaku di seluruh proyek.

NFR-06 — Dukungan reduced-motion Dengan prefers-reduced-motion, aplikasi harus menyediakan pengaturan statis yang dapat digunakan: pembatas before/after tetap dapat diseret tanpa animasi settle dan parallax, dan setiap item tetap dapat dibawa sepenuhnya ke dalam tampilan.

• Provenance: explicit (creative direction)
• Rationale: Aturan aksesibilitas gerak dari arah kreatif.

NFR-07 — Tidak ada biru atau indigo Tidak ada biru atau indigo dalam peran primer maupun aksen. Aksen hanya hangat #E8452C.

• Provenance: explicit (creative direction)
• Rationale: Larangan eksplisit dari arah kreatif; template SaaS indigo/blue-on-white dilarang untuk proyek ini.

10. Tech Stack

Platform: Aplikasi Android native.

Bahasa dan framework: Tidak ditentukan secara eksplisit oleh pengguna. [Default — not specified by user] Implementasi Android native menggunakan Kotlin dengan Jetpack Compose untuk UI deklaratif, sesuai dengan kebutuhan antarmuka padat alat dan pembaruan kanvas live.

Penyimpanan: Penyimpanan lokal perangkat Android untuk membaca foto yang dipilih dan menyimpan/mengekspor hasil edit. [Default — not specified by user] Tidak ada backend atau basis data server — seluruh pemrosesan dan penyimpanan bersifat lokal di perangkat.

Pemrosesan gambar: [Default — not specified by user] Pustaka pemrosesan gambar di perangkat untuk menerapkan penyesuaian, layer, seleksi, dan retouch pada kanvas.

Tipografi: Archivo (headings), Inter Tight (body), JetBrains Mono (numeric readouts) — sesuai arah kreatif.

Catatan arsitektur: Karena tidak ada backend, akun, atau layanan pihak ketiga yang menjadi pemilik perilaku produk, tidak ada docker-compose.yml, kontainer, atau layanan server yang diperlukan untuk lingkup saat ini. Seluruh perilaku berjalan di dalam aplikasi Android.

11. Assumptions and Constraints

Asumsi:

1. Akses media melalui pemilih sistem — Aplikasi mengakses foto perangkat melalui pemilih media sistem Android, bukan melalui izin penyimpanan penuh. Ini adalah mekanisme standar Android untuk memilih media dan tidak menambahkan kemampuan produk. [Assumption — required_inference]

2. Penyimpanan lokal sebagai tujuan ekspor — Hasil edit disimpan ke penyimpanan lokal perangkat. Tidak ada sinkronisasi cloud atau berbagi eksternal dalam lingkup saat ini. [Assumption — required_inference]

3. Satu foto per sesi edit — Editor bekerja pada satu foto pada satu waktu, sesuai dengan model kerja Photoshop mobile. [Assumption — required_inference]

4. Tidak ada identitas aplikasi — Karena pengeditan foto adalah pekerjaan lokal yang tidak memerlukan kontinuitas identitas lintas perangkat dan tidak menciptakan komitmen atau transfer nilai yang harus terikat pada peserta tertentu, tidak ada akun atau login. [Assumption — required_inference]

Batasan:

1. Platform Android — Aplikasi ditujukan untuk platform Android. (explicit)

2. Tema putih — Tema antarmuka harus berwarna putih, menyerupai aplikasi Adobe Photoshop Android. (explicit)

3. Tidak ada biru atau indigo — Aksen hanya hangat #E8452C; template SaaS indigo/blue-on-white dilarang. (explicit, creative direction)

4. Tidak ada permukaan dark-mode-first — Putih adalah ground dominan. (explicit, creative direction)

5. Tidak ada fotografi stok orang — Satu-satunya foto adalah gambar yang diedit itu sendiri. (explicit, creative direction)

6. Tidak ada objek 3D dekoratif atau partikel — Hero dimensionality adalah layered_2d, bukan WebGL. (explicit, creative direction)

7. Referensi Adobe Photoshop Android bersifat inspiration_only — Referensi ini memasok dimensi gaya visual dan kemampuan editing saja; tidak memasok nama produk, copy, fakta, atau kemampuan yang harus disalin. (explicit, reference directive)

12. Glossary

Photo Editor Pengguna — Persona aktif manusia tunggal dalam produk; pengguna Android yang mengedit foto dengan kemampuan bergaya Photoshop mobile.

Editor — Halaman ruang kerja kohesif untuk membuka/mengimpor foto, menerapkan penyesuaian dan alat editing, melihat pratinjau, serta menyimpan/mengekspor hasil.

Landing — Halaman awal anonim yang menjelaskan aplikasi editor foto Android, kemampuan pengeditan bergaya Photoshop mobile, dan tema antarmuka putih sebelum pengguna memasuki ruang kerja.

Adjustment stack — Daftar penyesuaian dan alat yang diterapkan pada foto, ditampilkan sebagai teks bergaya kode pada panel ink radius 2px.

Before/after split — Komposisi hero di mana satu foto terbelah oleh pembatas aksen 2px dengan handle bulat, menunjukkan sisi asli (desaturasi) dan sisi hasil edit (kontras kaya).

Tool rail — Deretan sel ikon persegi yang dipisahkan garis 1px, tanpa chrome membulat; alat aktif ditandai aksen #E8452C pada glyph dan garis bawah 2px.

Ruled label/value rows — Baris kontrol numerik dengan label rata kiri dan nilai dalam JetBrains Mono tabular figures rata kanan terhadap garis rambut.

Ink panel — Permukaan gelap #16181D yang membawa panel split, top bar, kontrol primer, dan sisipan kode/data.

Pemilih media sistem Android — Permukaan sistem Android yang menyediakan akses ke foto perangkat; aktor non-persona.

Penyimpanan lokal perangkat — Penyimpanan pada perangkat Android yang menjadi sumber foto dan tujuan penyimpanan/ekspor hasil edit; aktor non-persona.