# Legatus UI — QMF Module (`@qmf/legatus`)

Legatus **backend** lives at `legatus.quizzman.com` (REST, WebSocket, events).  
Legatus **UI** is a first-class **QMF plugin** served from `ui.quizzman.com`.

## Architecture

```text
legatus.quizzman.com          ui.quizzman.com/qmf/dist/legatus/
├── REST /api/v1              ├── legatus.min.js   (standalone)
├── WebSocket /api/v1/ws        ├── legatus.esm.js
└── (no UI assets)              └── legatus.css
```

## Embed (recommended — QMF)

```html
<link rel="stylesheet" href="https://ui.quizzman.com/qmf/dist/tokens.css">
<script src="https://ui.quizzman.com/qmf/dist/qmf.min.js"></script>
```

```js
QMF.use(createLegatusPlugin({
  endpoint: 'https://legatus.quizzman.com',
  mountTo: '#header-actions',
}));
QMF.init({ appId: 'wiki' });

// Or after init:
QMF.Legatus.mount('#header-actions');
QMF.Legatus.on('notification', (n) => console.log(n));
```

## Embed (standalone script)

```html
<link rel="stylesheet" href="https://ui.quizzman.com/qmf/dist/legatus/legatus.css">
<script src="https://ui.quizzman.com/qmf/dist/legatus/legatus.min.js"></script>
<legatus-bell></legatus-bell>
<script>
  Legatus.init({
    endpoint: 'https://legatus.quizzman.com',
    tokenProvider: () => localStorage.getItem('access_token'),
  });
</script>
```

## Custom elements

| Element | Role |
|---------|------|
| `<legatus-bell>` | Badge + dropdown / mobile bottom sheet |
| `<legatus-center>` | Full inbox |
| `<legatus-toasts>` | Toast host (auto-mounted) |

## Package

Source: `/opt/QMF/packages/legatus`  
Build: `cd packages/legatus && npm run build` (or via `node scripts/build-cdn.mjs`)

## Deprecation

`/sdk/*` on `legatus.quizzman.com` redirects to `ui.quizzman.com/qmf/dist/legatus/*`.  
Do not ship UI from the API host.