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

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

package "Local Helper Block\ninside auth-card.tsx" as LocalHelpers #FDE68A {
  component "parseSocialRuntime" as ParseSocial
  component "parsePasskeyList" as ParsePasskeys
  component "isRuntimeInterferenceError" as RuntimeDetect
  component "register/authenticate/\nrename/delete passkey flows" as PasskeyFlows
}

package "apps/demo/packages/athena-auth-js" as sdk #DBEAFE {
  component "http.ts\ncallAuthEndpoint" as Http
  component "passkey.ts\nWebAuthn bridge" as PasskeyBridge
}

AuthCard --> LocalHelpers : owns + executes helper logic
AuthCard --> Http : direct calls
AuthCard --> PasskeyBridge : direct calls
AuthCard --> PasskeyControls : passkey props + local type

PasskeyFlows --> Http
PasskeyFlows --> PasskeyBridge
ParsePasskeys --> PasskeyControls : local DemoPasskeyView shape

note right of AuthCard
  High coupling:
  UI state + parsing + API orchestration
  all concentrated in one file.
end note
@enduml
