Screens: sign-in, invitations, kiosk and the rest

S20. Staff sign-in (LoginPanel) ← R11

Layout: L8 AuthLayout. The slots are filled as follows: brand.headline = the accent phrase; brand.showcase = floating SpaceWorks object cards; eyebrow = Staff console or Front desk; title = “Welcome back.”; social; form = Username and Password; no modeSwitch.

• Split screen. Left: the space works horizontal logo; the headline “Welcome back.”; an eyebrow above it, “Staff console” or “Front desk” (for guestOnly); social buttons first when configured, then the divider “or with your username”; the labels “Username” and “Password” (test pins); “Forgot?” on the password label row (only when emailEnabled); a show-password toggle; the full-width primary “Sign in” with a spinner and “Signing in…”. The error appears as an inline danger text under the fields with role=alert. If password sign-in is off: “This deployment signs staff in through an identity provider.” with the IdP buttons only.
• Right brand panel: a tinted panel with the one Unbounded accent phrase (“Less searching. More making.”). Three floating product cards drawn from real SpaceWorks objects (a due-date chip card “Multimeter · due back Fri”, “Request #1042 · Ready for handover”, and a chip “✓ Return photo attached”). Decorative only, so aria-hidden.
• No segmented Sign in / Create account (staff accounts are invited).
• Mobile: the brand panel collapses to a 120 px band above the form or is hidden.

S21. Member sign-in / sign-up (MemberAuthPanel) ← R11, R12, R13

Layout: L8 AuthLayout with brand.tenant. The slots are filled as follows: modeSwitch when self-serve. Verify, MFA and reset = L8 CenteredCardLayout (media.icon, content = code boxes or the strength meter).

• Split screen as in S20, but the makerspace’s branding takes the right panel (tenant colour, logo, the welcome line from branding). The segmented control Sign in | Create account appears only when selfServeAccounts; otherwise the muted line “This space doesn’t run self sign-up. Ask a staff member to add you.”
• Sign-up fields: Name, Email, Password (with the R12 strength meter and rule list), Phone · Optional. Helper under Create account: “One account works at every makerspace you join.”
• Verify email = a R13 centred card (envelope tile): “Check your email”, “We sent a code to meera@…”, a 6-box code input (the P28 digit boxes at 46×56 with autocomplete=one-time-code on a single hidden input for paste), primary “Verify email”, link “Resend code” (with a countdown).
• MFA (MfaFlow) uses the same centred card with code boxes and “Use a recovery code instead”. Reset password (PasswordRecoveryFlow, ResetPasswordPage) = R12 exactly.

S22. Invitation accept (StaffInvitationAcceptPage, OrganizationInvitationRedeemPage) ← R14, R15

Layout: L8 CenteredCardLayout width=480. The slots are filled as follows: media.avatars for a staff invite or media.banner for an organization invite; content = the password field plus the MFA disclosure; primary = “Accept invitation”; footer = account hint.

              ┌──────────────────────────────────────┐
              │        [FK][PO]  (tile + avatar)      │
              │   You've been invited to join          │
              │        Fab Lab Kochi                    │
              │        (as Inventory Manager)           │
              │ You'll manage this space's inventory.   │
              │ Password                                │
              │ [                                   👁] │
              │ ▸ My account uses two-step sign-in      │ (reveals code field)
              │ [■■■■■■■ Accept invitation ■■■■■■■■]   │
              │ Already have an account? Use its        │
              │ current password.                       │
              └──────────────────────────────────────┘

• The makerspace name and role need invite-preview data. The token is in the URL hash and the page fetches nothing today. Flag: without a preview endpoint, show “You’ve been invited to join a makerspace on space works” and drop the role pill. Do not guess.
• The MFA code field moves behind a disclosure (progressive), with the current label preserved inside.
• Success: a centred success card “You’re in.” plus a “Sign in” primary (today a link).
• Invalid or used token: “This invite link has already been used or has expired. Ask the person who invited you for a new one.”
• An organization invite uses the R15 banner variant (organization colour band) with the scope sentence.

S23. Kiosk station (/kiosk/:stationToken, KioskStationPage) ← R27, R28

Layout: L10 KioskLayout. The slots are filled as follows: mode lock → ready → work; lock.pinLength=8; work.capture = KioskOnlineScanner; work.panel = L7 FlowLayout presentation="kiosk" (the handover) or the result card; confirmLock = the pending-work discard dialog; idleCountdown. The offline queue renders in work.panel as a table plus a panel callout.

• Locked: the R27 layout. Makerspace tile, the context line “Fab Lab Kochi · Handover station”, the title “Enter the station PIN”, the helper “Ask a manager for the 8-digit PIN. It unlocks this device only.”, 8 digit boxes (the current PIN is exactly 8 digits) plus the keypad, and “Unlock station” disabled until 8. The keypad must not break hardware-keyboard entry (one hidden numeric input drives the boxes). Offline-locked: the same screen with the CTA replaced by “Reconnect to unlock this station” and an “Offline” pill.
• Unlocked, no operator: a centred card “Station ready”, the station name and kind, and the primary “Start operator shift” (disabled offline, with the reason).
• Working: the R28 layout. Header: station name, “Fab Lab Kochi · Handover station”, right side shows the queue count (“2 waiting”), an “● Online” / “● Offline · 3 queued” pill, “Full screen” (icon button) and “Lock station” (outline). Body: camera left (KioskOnlineScanner), right = the current handover (KioskOnlineHandover) as the S3 steps in large-touch mode, or the result card after each scan (green success, red “Not this station’s item” error, yellow “Queued offline · will sync”). Recent list under the result.
• Offline queue mode (KioskOfflineHandover): a P5 panel callout “Offline. Handovers are encrypted on this device and sync when you reconnect.” with a “Retry now” button. The queue is a P14 table (status pill per command: Queued, Syncing, Failed and needs review).
• Lock with pending work = a danger dialog, not inline text: “Discard local work and lock? This clears 3 encrypted handovers and their photos from this device. This can’t be undone.” Buttons “Keep working” (primary) and “Discard and lock” (red outline). The safe option is the primary.
• Idle reset shows a 10 s countdown overlay (“Locking for privacy in 10… Tap to keep working”) before locking when no work is pending.
• Event door station (/event-check-in/:stationToken) = R27 then R28 one-to-one.

S24. Remaining staff tabs (Phase 6 sweep), pattern assignment

Pointer only. The long tail is specified in depth in research/ux-screens-longtail.md, which must use the layout names from §1A.11. The assignments below are the default layout per tab.

Tab	Layout · pattern
notifications (Inbox)	L3 · P12 rows grouped by day, unread dot, “Mark all read” outline, filter tabs All / Unread; empty “You’re all caught up.”
handover (Job pickups)	L3 + L7 · S2 row pattern: tabs Ready / Collected; inline “Hand over” opens HandoverConsole in S3 task mode (photo rules as today).
payments	L3 · Stat cards (Outstanding, Collected this month, Awaiting settlement), tabs Outstanding / Settled / Refunds, P14 table with inline “Record payment…” (SettlementDialog); never Undo (append-only receipts; corrections are amends).
ledger, transfers, stocktake, needsfix, tobuy, containers, categories	L3 (stocktake session = L7) · Dense-table adaptation (§5.1) with PageHeader plus one primary each: “+ New transfer”, “Start stocktake”, “+ Add to list”, “+ New container”, “+ New category”; needsfix rows get inline “Back in stock” / “Write off…”.
qr, scanner, bulk	L6 width="narrow" · Tool pages: centred 720 column, P21 camera block for the scanner, P18 dropzone for bulk import with a validation preview table.
warranty, devices	L3 + L4 drawer · Table plus drawer detail with P15 rows.
cards (Member cards)	L3 · Camera scan block plus the card list; the scan result as a P29 result card.
accountability	L3 · Table of borrowers with restriction status pills; row menu Restrict… / Restore.
organized, organization-analytics, organizations	L2 / L3 / L4-report · R1 org cards for organizations; organized events reuse S11 rows; analytics reuses S14.
emailtemplates, email-logs, api	L6 / L3 / L5 · R6 patterns (form card, empty state, code/accordion) for api; logs as a P14 table with status pills; templates as a list plus an editor page with a live preview (P18).
exports, backups, migration, usage, modules, platform*	L5 (restore/migration runs = L7) · P15 settings rows plus P16 danger cards for restore/purge; jobs show progress rows (JobTray).

Part of Space Works UX spec, published from docs/ux-spec.md. Edit it there.