@startuml
skinparam backgroundColor #F8FFFB
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(reduced orchestration)" as AuthCard #DCFCE7
  component "use-passkey-workflow.ts\n(passkey UI workflow hook)" as PasskeyHook #BBF7D0
  component "passkey-controls.tsx" as PasskeyControls #F8FAFC
}

package "athena-auth-js" as SDK #DBEAFE {
  component "passkey-module.ts\nclass PasskeyModule" as PasskeyModule #93C5FD
  component "passkey-types.ts\nview + parsing" as PasskeyTypes #BFDBFE
  component "passkey-api.ts\nfactory + singleton access" as PasskeyApi #BFDBFE
  component "passkey.ts\nWebAuthn bridge" as PasskeyBridge #DBEAFE
  component "http.ts" as Http #DBEAFE
}

AuthCard --> PasskeyHook
PasskeyHook --> PasskeyApi : getPasskeyModule()
PasskeyHook --> PasskeyControls
PasskeyApi --> PasskeyModule
PasskeyModule --> PasskeyTypes
PasskeyModule --> Http
PasskeyModule --> PasskeyBridge

note right of PasskeyModule
  OOP SDK boundary:
  one class encapsulates passkey behavior
  with injected endpoint + credential dependencies.
end note
@enduml
