@startuml
skinparam backgroundColor #FFFFFF
skinparam defaultFontColor #000000
skinparam ArrowColor #1F2937
skinparam RectangleBorderColor #111827
skinparam RectangleFontColor #000000
skinparam PackageBorderColor #111827
skinparam PackageFontColor #000000
skinparam NoteBorderColor #111827
skinparam NoteFontColor #000000
left to right direction

package "Demo Next.js App (After)" {
  rectangle "Auth UI\n(auth-card, session-panel, settings)" as ui_auth #DCFCE7
  rectangle "Endpoint Lab\nCatalog-driven suite + single runner" as ui_lab #BBF7D0
  rectangle "Runtime Context Form\nGenerated from placeholders" as ui_ctx #ECFCCB
}

package "athena-auth-js (After)" {
  rectangle "auth-endpoint-catalog.ts\nAll Athena v2 auth endpoint specs" as pkg_catalog #D1FAE5
  rectangle "client.ts\nBrowser-safe auth bindings wrapper" as pkg_client #A7F3D0
  rectangle "http.ts\nDirect fetch transport\n(base URL + tenant headers)" as pkg_http #86EFAC
}

cloud "Auth API\n/api/auth/*" as api #E5E7EB

ui_auth --> pkg_client : signIn/signUp/signOut/getSession
ui_lab --> pkg_catalog : load all endpoint specs
ui_lab --> ui_ctx : fill required context fields
ui_lab --> pkg_http : execute endpoint templates
pkg_client --> pkg_http : endpoint method wrappers
pkg_http --> api : GET/POST requests

note right of pkg_catalog
Every endpoint in the Athena v2 catalog is
exposed in the matrix and can run through
shared context + template resolution.
end note

note right of pkg_http
No browser runtime dependency on Node-only
SDK entrypoints; requests stay browser-safe.
end note
@enduml