Mobile & field

The field-work surfaces: ScanPage (a camera / barcode viewport with a recent-scans aside), OfflineSyncPage (a connectivity banner + sync queue) and QuickCapturePage (a focused single-entry form). Built for fast, on-the-go data capture.

The camera / connectivity work is client-only and rides caller-passed slots, so each page shell stays server-safe.

ScanPage

A capture page: a camera/barcode viewport with a result/recent-scans aside and a manual-entry fallback footer, over the DocumentLayout.

Scan check-in

Camera live

Point a check-in code at the camera

No code handy?

<ScanPage> — caller-passed camera viewport (the scanner island) · StatTile + recent-scans Feed + self-service CheckinQr aside · manual-lookup footer

scanner (required): The camera / barcode viewport (→ DocumentLayout viewer). getUserMedia / camera work is client-only, so it rides this caller slot.
aside / asideWidth: Result / recent-scans / self-service rail (e.g. a StatTile + Feed + CheckinQr); default 320px.
footer: Manual-entry fallback band below the viewport. Server-safe shell.

OfflineSyncPage

A connectivity/sync page: a degraded banner + a stat summary over status cards (queue, conflicts, connection), with the sync history below.

Sync status

Offline

Pending

7

queued changes

Synced

1,204

this session

Failed

1+1

needs retry

Last sync

8 minutes ago

before going offline

<OfflineSyncPage> — TitleBar · DegradedBanner + stat band · status widget grid · sync-history Timeline

banner / summary: banner is a connectivity banner (a @phauna/ds <DegradedBanner>); summary is a StatGrid (pending / synced / failed / last-sync).
widgets / minWidth / children: widgets[] are status cards in the responsive grid (queue, conflicts, connection; minWidth default 280px); children is the sync history / log (e.g. a Timeline).
footer: Footer slot. Server-safe.

QuickCapturePage

A fast-entry page: a centered focused capture form with a recent-captures rail, over the RecordPage.

<QuickCapturePage> — centered capture column (Textarea + TagPicker + Save) · recent-captures Feed rail, EmptyState when cleared

capture (required): The focused capture form — input + submit (→ RecordPage main, caller-passed).
recent / asideWidth / maxWidth: recent is the recent-captures rail (→ RecordPage aside, e.g. a Feed + EmptyState; default 340px); maxWidth centers the form (default true).
footer: Footer slot. Server-safe shell.