Screens: member area and public pages

S16. Member area home and tabs (/member, /member/:tab) ← R1 (home), R26 (card), R16 (account)

Layout: L1 AppShell variant="member" compactNav="bottom-tabs". Home = L2 DashboardLayout (rail = notices). Loans, Bookings, Events, Payments and Inbox = L3 ListLayout. Account = L5 SettingsLayout. The signed-out or not-a-member home = L9 PublicLayout + PublicDetailLayout (the join card as actionCard). The member card full view = L9 width="narrow" with the ticket (P27).

Desktop: member sidebar (logo, space switcher card = makerspace + membership status, nav: Home · Loans · Bookings · Events · Payments · Inbox · Account, bottom: user chip / Sign out)
Mobile:  top bar + bottom tabs: Home · Loans · Bookings · Events · More (Payments, Inbox, Account)

Hi Meera                                                   [■ Start visit ]*  ← presence, when module on
Fab Lab Kochi · Member since March 2026  (Active)
┌ ! Accept the updated waiver (v3) to keep borrowing.                       Read and accept → ┐
┌On loan 2┐┌Due this week 1┐┌Bookings 1┐┌Payments due ₹500┐
Coming up                                         Notices
┌OCT┐ Return Multimeter          Due Fri (Renew)    • Your request #1042 was accepted
┌OCT┐ Woodshop bench 10:00–12:00 (Confirmed)        • Booking confirmed
Your member card ▸ (ticket card with QR — opens the full card)

* “Start visit” / “End visit” maps to the presence session today (“Start 2-hour presence”).

• Navigation is the existing memberTabs(modules). Keep role=tablist semantics on the nav, or convert to links (PLAN Phase 4 decision). Keep the #main-content target.
• Callout priority: waiver acceptance needed, then a payment due, then an overdue loan, then application status (“Your application is waiting for 2 vouches”).
• Not a member / signed out: the home becomes the join page. A R23-style card (“Join Fab Lab Kochi”: policy summary, AdmissionJoin / JoinMembershipCta as the primary, “Have an account? Sign in”) beside a description of what membership gives. InvitationRequestForm and MemberClaimRedemption are secondary links.
• Loans tab: “On loan” rows (due chip, item, Renew if allowed) and a “History” section (MemberHistory). Payments: dues stat cards plus MemberPaymentRows with an inline “Pay” primary pill per row; archived payments as a link row at the bottom. Inbox: MemberNotices and MemberNotifications; empty “No notices need your attention.” Account: the R16 settings rows (profile, two-step sign-in link, MemberCertifications, referrals, directory listing) and the member card.
• Member card (MemberCardPanel) = the R26 ticket: a makerspace header band, a name / member since / role grid, a perforation, the QR, the caption “Show this at the desk. It only holds a private member link.” (verify that statement against the card payload before using it), and “Add to wallet” / “Save card” where supported. Offline note when cached.
• Restoring state: a full-page skeleton of the shell, not “Restoring session…” text.

S17. Public catalogue (/m/:slug) ← R18 (sticky right card) + P10 chips

Layout: L9 PublicLayout width="wide". The slots are filled as follows: aside = ActionCard (the request cart: form = purpose and contact fields, primary = “Send request — n items”, mobileBar); children = the header block, search, the category chips and the product grid (an L3-style body without the app shell).

[logo] Fab Lab Kochi          Catalogue  Events  Machines  Book a space          ( Sign in )
──────────────────────────────────────────────────────────────────────────────────────────
Borrow tools from Fab Lab Kochi                         ┌ Your request ─────────────────┐ 340w sticky
248 tools and kits · members borrow free                │ 2 items                        │
[ Search tools, machines, kits, materials        ⌕ ]   │ Arduino Uno        − 1 +       │
(All)(Electronics)(Woodwork)(Textiles)(3D printing)…    │ Multimeter         − 1 +       │
Sort: Name ▾                                            │ What's it for?  [            ] │
┌card┐┌card┐┌card┐                                     │ [■ Send request — 2 items ]    │
│img │ │img │ │img │  name, availability pill (word),   │ Staff review every request     │
│    │ │    │ │    │  "Add" stepper                      │ before anything is handed over.│
└────┘ └────┘ └────┘                                    │ ( Borrow | Scan a tool )  seg. │
‹ Prev  Page 2 of 11  Next ›                            └────────────────────────────────┘
footer: [logo] Powered by space works · Privacy · Terms

• Shared PublicShell (PLAN §3.4): a R18 48 px header with the makerspace brand, then nav links (only the modules that are on), then a “Sign in” outline pill.
• The category sidebar becomes a chip row (scrollable) at <1280 and stays a left list at ≥1280 if there are more than 8 categories.
• Request panel = the R18/R23 sticky card. Its counts and title change with state: empty (“Nothing added yet. Tap Add on any tool.”), with items, submitted (a success state in the card: “Request sent. We’ll email you when it’s ready.”, plus the public token link). The Borrow/Scan switch is a P9 segmented control. Access-policy copy (the three variants in PublicRequestPanel) stays verbatim in meaning, as the card’s helper.
• Disabled requests: the card says “This makerspace shows its inventory but doesn’t take requests online.” with no primary.
• Mobile: the card becomes a sticky bottom bar (“2 items · Review request”) that opens a bottom sheet with the same content.
• Never expose locations, box IDs, QR, evidence or hidden counts. The availability pill shows exact_count only when allowed, else the status word.

S18. Public item detail (/items/:itemId) ← R21 (detail with right rail) + R18 sticky card

Layout: L9 PublicLayout + PublicDetailLayout. The slots are filled as follows: cover = item image; chips = category and kit; sections = Description and Borrowing terms; actionCard = availability, “Add to request”, “Notify me”. Not-found = L8 CenteredCardLayout.

Fab Lab Kochi / Catalogue / Arduino Uno R3            (breadcrumb)
[ image 16:10, r16 ]                                  ┌ (Available) ────────────────┐
(Electronics)(Kit)                                    │ 3 available  (only if exact)│
Arduino Uno R3   (48 bold)                            │ [■ Add to request ]         │
description…                                          │ ( Notify me when it's back )│ (when unavailable + feature)
Borrowing terms (grey inset box)                      └─────────────────────────────┘

• “Add to request” adds to the same cart (shared useInventoryCart state) and links back to the catalogue with the card open. Today the page says “Request from the catalogue”. This is a behaviour improvement within the frontend; flag it for approval.
• Not found: a centred card “This item isn’t in the public catalogue.” with “Back to the catalogue”.

S19. Public event page (/events/:publicToken) ← R18, R19, R23, plus R26 confirmation

Layout: L9 PublicLayout + PublicDetailLayout. The slots are filled as follows: facts = date chip block and venue block; sections = About / Schedule / Speakers / Venue / FAQ (only non-empty ones); actionCard = Join card (form inline when short), with state open/closed/done; host. The events list = L9 + L3-style rows. Feedback, ticket and running order = L9 width="narrow".

• The layout is exactly P25. Map the existing pieces: image as cover, title, starts_at and location in the date and venue blocks, category and tags as meta chips, description, and EventPrice folded into the CTA label (“Register — ₹200”, “Register — it’s free”, “Join waitlist”, “Apply”).
• Registration form placement: inside the sticky card when the form is short (no custom_form and no ticket choice, the R23 pattern); otherwise the card CTA opens a modal or sheet with EventRegistrationForm (tickets, promo, custom fields).
• “Add to calendar” and “Share” are the two outline half-buttons in the card. The share error becomes a toast (“Couldn’t share. Link copied instead.” when the clipboard fallback succeeds).
• Closed: the card shows “Registration is closed” plus the cutoff time, with no primary. Not found: a centred card.
• After registering: a confirmation state in the card, then a link to the ticket page (R26) if tickets or check-in exist.
• Events list (/events): P6 date-chip rows grouped by series (series eyebrow), with search and filters (Free, Registration open) as chips and the calendar view as a segmented toggle (List | Calendar). The inline “Register” expand-in-place becomes a link to the event page (one primary per page; forms live on the event page).
• Feedback page (/events/:token/feedback) = R25 exactly.

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