graph TD

    A["🌐 HTTP Request"] --> B["📄 index.php"]
    B --> C["📦 vendor/autoload.php"]

    C --> D["🔧 Nexa::getInstance()"]
    D --> D1["🗂️ loadEnvironmentVariables · .env"]
    D1 --> D2["📋 loadConfiguration()"]
    D2 --> D3["🛠️ initializeRouter()
NexaRequest · NexaDom · assign_vars"]

    D3 --> ENV{"⚙️ APP_ENV?"}
    ENV -->|development| DEV["📊 NexaDebug · header no-cache"]
    ENV -->|production| PROD["⚡ production"]
    DEV --> TATIYE
    PROD --> TATIYE

    TATIYE["🔧 Tatiye()
registerErrorHandlers()"]
    TATIYE --> ROUTES["📍 loadRoutes()
web.php + api.php"]
    ROUTES --> RUN["🚀 run() → router->handle()"]

    RUN --> EARLY{"📁 GET aset statis?
/assets · /modules · /theme …"}
    EARLY -->|ya| STATIC["⚡ dispatchStaticAssetEarly"]
    EARLY -->|tidak| APICHK["🔐 NexaSession checkTimeout
diabaikan untuk /api"]

    APICHK --> SESS{"1️⃣ Session routing?
dashboard · admin"}
    SESS -->|cocok| HANDLER
    SESS -->|tidak| FE{"2️⃣ Frontend routing?
FrontendController · URL dinamis"}
    FE -->|cocok| HANDLER
    FE -->|tidak| REG{"3️⃣ Route terdaftar?
preg_match web.php / api.php"}
    REG -->|cocok| MW["🔐 middleware per route"]
    MW --> HANDLER
    REG -->|tidak| NF["🚫 404 handleNotFound"]

    HANDLER["▶ executeHandler"]
    HANDLER --> HTYPE{"Tipe handler?"}
    HTYPE -->|Controller@method| CTRL["🎮 executeController
new Controller · Reflection param URL"]
    HTYPE -->|Closure| CLOS["⚡ call_user_func"]

    CTRL --> ACT["📱 action method"]
    ACT --> FEAT["Sesuai aksi (opsional):
NexaValidation · NexaForm · NexaRequest"]
    FEAT --> OUT{"Keluaran?"}
    OUT -->|HTML / template| DEVLAY["📱 device: theme · dashboard · mobile · tablet · standalone"]
    OUT -->|JSON| APIOUT["🔌 ApiController · /api/*"]

    DEVLAY --> NEXADOM["🎨 NexaDom
inheritance · assign_vars · layout"]
    NEXADOM --> HTML["🖼️ HTML"]
    CLOS --> RESP
    STATIC --> RESP
    APIOUT --> RESP
    HTML --> RESP["📡 HTTP Response"]
    NF --> RESP

    RESP --> CL{"🌍 Client / channel?"}

    CL -->|"HTML · shell SPA"| CH["🌍 Tiga jalan · Web · Desktop · Mobile"]
    CL -->|"JSON · /api/"| APIR["🔌 payload API ke client"]

    CH --> SPA["📄 index.html → nxdom.js
NX.Tatiye · App.js"]
    APIR --> SPA

    SPA --> NM["📦 NXDOM Native Modules
ES6+ · modul portabel"]

    NM --> G1["🌐 Web"]
    NM --> G2["⚡ Node.js"]
    NM --> G3["🖥️ Electron"]
    NM --> G4["📱 React Native"]

    G1 --> QQ["✅ Alur besar selesai"]
    G2 --> QQ
    G3 --> QQ
    G4 --> QQ

classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:3px
classDef nxmodules fill:#fff8c5,stroke:#bf8700,color:#24292f,stroke-width:2px
classDef nxruntime fill:#f6f8fa,stroke:#656d76,color:#24292f,stroke-width:2px
classDef nxchannel fill:#ddf4ff,stroke:#0969da,color:#0550ae,stroke-width:2px
classDef boot fill:#ddf4ff,stroke:#0969da,color:#0550ae,stroke-width:2px
classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
classDef decision fill:#fff8c5,stroke:#bf8700,color:#24292f
classDef error fill:#ffebee,stroke:#cf222e,color:#24292f
classDef router fill:#dafbe1,stroke:#1a7f37,color:#116329,stroke-width:2px
classDef handler fill:#fbefff,stroke:#8250df,color:#6639ba,stroke-width:2px
classDef template fill:#f9fbe7,stroke:#827717,stroke-width:2px
classDef api fill:#e0f2f1,stroke:#1b5e20,color:#116329

class A,QQ startEnd
class B,C,RUN,ROUTES,TATIYE process
class D,D1,D2,D3,DEV,PROD boot
class ENV,EARLY,SESS,FE,REG,HTYPE,OUT,CL decision
class STATIC,MW,APICHK router
class HANDLER,CTRL,CLOS,ACT,FEAT handler
class DEVLAY,NEXADOM,HTML template
class APIOUT,APIR api
class CH,SPA nxchannel
class NM nxmodules
class G1,G2,G3,G4 nxruntime
class NF error
class RESP startEnd
      

---
config:
  flowchart:
    curve: basis
    padding: 18
    nodeSpacing: 42
    rankSpacing: 48
    htmlLabels: true
  theme: base
  themeVariables:
    fontFamily: system-ui, -apple-system, "Segoe UI", sans-serif
    fontSize: 14px
    lineColor: "#656d76"
---
flowchart TB

    A(["🏗️ Fondasi Backend
NXDOM"])

    subgraph backend["⚙️ Layanan — fondasi yang sama"]
        direction LR
        B["🔌 Backend API
JSON · /api/"]
        C["🌐 Backend Web Apps
PHP · templates/"]
    end

    A --> B
    A --> C

    D(["📡 Tiga jalan ke pengguna"])

    B --> D
    C --> D

    E["🌍 Web · 🖥️ Desktop · 📱 Mobile"]
    D --> E

    F["📦 NXDOM Native Modules
ES6+ · modul portabel"]
    E --> F

    subgraph runtime["⚡ Empat runtime — satu arsitektur"]
        direction LR
        G1["🌐 Web"]
        G2["⚡ Node.js"]
        G3["🖥️ Electron"]
        G4["📱 React Native"]
    end

    F --> G1
    F --> G2
    F --> G3
    F --> G4

    classDef root fill:#0969da,stroke:#0550ae,color:#fff,stroke-width:2px
    classDef api fill:#1a7f37,stroke:#116329,color:#fff
    classDef web fill:#8250df,stroke:#6639ba,color:#fff
    classDef hub fill:#9a6700,stroke:#7d4e00,color:#fff
    classDef channels fill:#ddf4ff,stroke:#0969da,color:#0550ae,stroke-width:2px
    classDef modules fill:#fff8c5,stroke:#bf8700,color:#24292f,stroke-width:2px
    classDef runtime fill:#f6f8fa,stroke:#656d76,color:#24292f,stroke-width:2px

    class A root
    class B api
    class C web
    class D hub
    class E channels
    class F modules
    class G1,G2,G3,G4 runtime

    linkStyle 0,1,2,3,4,5,6,7,8,9 stroke:#0969da,stroke-width:2px