@startuml
title Settings Surface Rendering (After)
skinparam backgroundColor #FFFFFF
skinparam defaultFontColor #111111
skinparam shadowing false
skinparam ArrowColor #111111
skinparam componentStyle rectangle
skinparam component {
  BackgroundColor #FFFFFF
  BorderColor #111111
  FontColor #111111
}
skinparam rectangle {
  BackgroundColor #FFFFFF
  BorderColor #111111
  FontColor #111111
}
skinparam note {
  BackgroundColor #FFFFFF
  BorderColor #111111
  FontColor #111111
}

actor "User" as User
component "AccountSettingsView\n/settings" as View
component "Render mode selector\n(dialog | inline)" as ModeSelector
component "AthenaAuthAccountSettingsDialog\n(renderMode + open state)" as SettingsComponent
component "Dialog lifecycle\ntrigger, overlay, close" as DialogFlow
component "athena-auth-js\nsession + list-accounts" as SDK
component "Athena Auth API" as API

User --> View : open /settings
User --> ModeSelector : choose mode
View --> SettingsComponent : pass renderMode + open
SettingsComponent --> DialogFlow : dialog mode only
User --> DialogFlow : open / close / escape / backdrop
View --> SDK : load session/accounts
SDK --> API : GET get-session/list-accounts

note right of SettingsComponent
Configurable rendering:
- inline (integrated)
- dialog (open/close)
end note

@enduml
