@startuml
skinparam backgroundColor #F8FFFB
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(reduced orchestration)" as AuthCard #DCFCE7
  component "passkey-controls.tsx" as PasskeyControls #F8FAFC
}

package "apps/demo/packages/athena-auth-js" as sdk #DBEAFE {
  component "auth-runtime.ts\n(runtime parsing + fallback builders)" as RuntimeHelpers #BFDBFE
  component "passkey-api.ts\n(passkey endpoint orchestration)" as PasskeyApi #93C5FD
  component "passkey.ts\nWebAuthn bridge" as PasskeyBridge #DBEAFE
  component "http.ts\ncallAuthEndpoint" as Http #DBEAFE
  component "utils.ts\nisRecord" as Utils #DBEAFE
}

AuthCard --> RuntimeHelpers : parse diagnostics + fallback metadata
AuthCard --> PasskeyApi : register/auth/list/update/delete
AuthCard --> PasskeyControls : passkey props
PasskeyControls ..> PasskeyApi : uses DemoPasskeyView type (via package export)

RuntimeHelpers --> Utils
PasskeyApi --> Http
PasskeyApi --> PasskeyBridge
PasskeyApi --> Utils

note right of AuthCard
  Reduced component weight:
  UI state remains local,
  helper/aux flow is importable from package.
end note
@enduml
