@startuml
skinparam backgroundColor #FAFBFF
skinparam componentStyle rectangle
skinparam packageStyle rectangle
skinparam shadowing false
skinparam ArrowColor #0F172A
skinparam DefaultFontName Inter
skinparam DefaultFontSize 12

package "apps/demo/components" as UI #E2E8F0 {
  component "auth-card.tsx\n(passkey state + handlers inline)" as AuthCard #FEE2E2
  component "passkey-controls.tsx" as PasskeyControls #F8FAFC
}

package "athena-auth-js" as SDK #DBEAFE {
  component "passkey-api.ts\n(function helpers)" as PasskeyApi #BFDBFE
  component "passkey.ts\nWebAuthn bridge" as PasskeyBridge #DBEAFE
  component "http.ts" as Http #DBEAFE
}

AuthCard --> PasskeyApi : list/register/auth/rename/delete
AuthCard --> PasskeyBridge : browser credential flow (indirectly mixed)
AuthCard --> PasskeyControls
PasskeyApi --> Http
PasskeyApi --> PasskeyBridge

note right of AuthCard
  High UI coupling:
  component owns passkey lifecycle logic,
  state transitions, and API orchestration.
end note
@enduml
