Layouts: settings, forms, flows, auth, public and kiosk

L5. SettingsLayout — sub-nav + sections of rows + sticky Discard/Save + DangerZone (R5, R6, R16, R17)

SettingsLayout({
  header: { title: string; subtitle: string /* scope + "Changes go live when you save." */ };
  tabs?: Tab[];                            // Profile | Security style (≤4)
  subnav?: "auto" | false;                 // auto when ≥5 sections: sticky list 200 (≥1280) / chip row (<1280), scroll-spy
  sections: Array<{ id: string; title?: string; description?: string;
    rows: Array<SettingsRowProps> | ReactNode;
    save?: { dirty: boolean; pending: boolean; error?: string; onDiscard: () => void; onSave: () => void } }>;
  danger?: DangerZoneProps[];
  state: QueryState;
})
SettingsRow({ label: string; helper?: string; control: ReactNode; status?: StatusPill;
  readOnly?: { reason: string }; action?: Action /* independent row action, e.g. "Update password" */ })
DangerZone({ title: string; consequence: string; action: Action & { confirms: true } })

375	768	1280
rows stacked (label/helper above control); sub-nav = chip row; dirty save bar fixed bottom	rows split 220 / rest; chip-row sub-nav	rows split 300 / rest; sub-nav 200 sticky left

Used by: Makerspace settings (S9), Account/MFA, member Account tab, Machine type › Settings tab content, item Details tab content (rows only), API access, Email settings, Modules, Usage & limits, Backup & restore, Data export, Platform settings, Evidence retention.

L6. FormPageLayout — create/edit form + optional live preview (R3, R6 form card)

FormPageLayout({
  back?: { label: string; href: string };
  header: { title: string; subtitle?: string };
  form: ReactNode;                         // Field/Fieldset primitives; optional fields marked "Optional"
  preview?: { label: string /* "PUBLIC PAGE PREVIEW" */; content: ReactNode };
  submit: Action; cancel?: Action;         // "Create X" primary left + "Cancel" text
  width?: "default" | "narrow";            // narrow = 720 single column (tools)
})

375	768	1280
single column; preview collapses into a “Preview” disclosure under the form; submit sticky bottom	preview below form	form 1fr + preview 300 gap 32

Used by: New event / New series, Add item, Create makerspace, New organization, Create bookable space, New API client, Add staff (full page variant), QR tools, staff Scanner, Bulk import, Email template editor.

L7. FlowLayout — step rail + work panel + guarded footer (R8/R28 visual, SpaceWorks wizards)

FlowLayout({
  title: string; subject?: string;         // "Issue request #1042 · Meera Nair"
  steps: Array<{ key: string; label: string; state: "done" | "current" | "todo";
    summary?: string /* captured value, e.g. "BOX-0042" */; required?: boolean; missing?: boolean }>;
  current: string; onStepSelect?: (key: string) => void;   // only done steps selectable
  work: ReactNode;                         // camera block, evidence tile, item steppers
  footer: { back?: Action; next: Action };  // next.disabledReason mandatory when disabled
  onCancel: () => void; leaveGuard?: string;   // confirm copy when evidence captured
  result?: ResultCardProps;                // final step: tone, title, summary rows, actions; replaces work
  error?: CalloutProps;                    // partial-failure danger callout above footer
  compact?: boolean;                       // all steps on one scroll page (expert mode)
  presentation: "task" | "kiosk";          // task: hides sidebar; kiosk: rendered inside L11
})

375	768	1280
full screen; rail → “Step 3 of 5 · Items” bar; camera full width; footer sticky	rail → top stepper; work full width	rail 300 + work panel; footer in work panel

Used by: request issue/return (S3), direct handout (S4), job pickup (HandoverConsole), kiosk handover, offline replay correction, stocktake count session, tenant migration / backup restore wizards, create-makerspace onboarding.

L8. AuthLayout (R11) and CenteredCardLayout (R12–R15)

AuthLayout({
  brand: { headline: string /* the one accent phrase */; showcase?: ReactNode /* aria-hidden */;
    tenant?: TenantBranding /* member auth: tenant colour + logo */ };
  eyebrow?: string; title: string;          // "Welcome back."
  modeSwitch?: { options: [string, string]; value; onChange };   // Sign in | Create account
  social?: ReactNode; dividerLabel?: string; // "or with email"
  form: ReactNode; legal?: ReactNode;
})
CenteredCardLayout({
  media?: { icon: IconName; tone: Tone } | { avatars: [Identity, Identity] } | { banner: Tone };
  eyebrow?: string; title: string; body: ReactNode;   // names the identity in bold
  content?: ReactNode;                     // fields, code boxes, strength meter
  primary: Action; escape?: Action;        // one underlined escape link
  footer?: ReactNode;                      // "Signed in as … · Switch account"
  width?: 440 | 480;
})

	375	768	1280
Auth	form only, 16 gutter; brand hidden	brand → 120 band above form	50/50 split, form 400 wide
Centred	card becomes full-width sheet (no border), logo top	card 440 centred	card 440/480 centred

Used by: staff sign-in, member sign-in/sign-up (Auth); reset password, verify email, MFA challenge, staff/organization invitation accept, change-password gate, access denied, “event not found” (Centred).

L9. PublicLayout (R18–R25 chrome) and PublicDetailLayout (R18, R19, R21, R23)

PublicLayout({
  makerspace: { name: string; logo?: string; slug: string; branding?: TenantBranding };
  nav: Array<{ label: string; href: string }>;     // only modules that are on
  headerAction?: Action;                   // "Sign in" or the page primary when no action card
  liveStatus?: StatusPill;                 // "● Live · updates automatically"
  width: "wide" /*1110*/ | "default" /*960*/ | "narrow" /*600*/;
  breadcrumb?: Array<{ label: string; href?: string }>;
  aside?: ActionCardProps;                 // sticky right card (catalogue cart)
  children: ReactNode;
  footer: { credit: "Powered by space works"; links: Action[] };
})
PublicDetailLayout({                       // always rendered inside PublicLayout width="wide"
  cover?: { src: string; alt: "" };
  chips: Chip[]; title: string; tagline?: string;
  facts: Array<{ identity: Identity; primary: string; secondary?: string }>;  // date block, venue block
  sections: Array<{ id: string; label: string; content: ReactNode }>;         // anchor tabs
  actionCard: ActionCardProps;
  host?: { identity: Identity; name: string; href: string };
})
type ActionCardProps = { title: string; summary?: ReactNode /* counts + bar, avatars */;
  form?: ReactNode; primary?: Action; secondary?: Action[]; note?: string;
  state: "open" | "closed" | "done"; doneContent?: ReactNode;
  mobileBar: { summary: string; label: string } };

375	768	1280
action card → sticky bottom bar opening a sheet; chips scroll; title 36	action card below title block (static); title 48	main 545–760 + sticky card 318–340

Used by: catalogue (PublicLayout + aside), item detail, public event, events list, programme, session, feedback (narrow), running order (narrow, liveStatus), ticket (narrow), public machines, public bookings, public stats, organization page, about/landing.

L10. KioskLayout — full screen, large targets (R27, R28)

KioskLayout({
  context: { identity: Identity; title: string; subtitle: string };   // "Door check-in · Station 1"
  connection: { online: boolean; queued?: number };
  progress?: { done: number; of: number; label: string };            // "3 / 5 checked in"
  headerActions: Action[];                 // Full screen, Lock station
  mode: "lock" | "ready" | "work";
  lock?: { title: string; helper: string; pinLength: number; onSubmit: (pin: string) => void;
    pending: boolean; error?: string; disabledReason?: string };
  ready?: { primary: Action };             // "Start operator shift"
  work?: { capture: ReactNode /* camera */; panel: ReactNode /* result card or FlowLayout kiosk */;
    recent?: ReactNode };
  idleCountdown?: { seconds: number; onKeep: () => void };
  confirmLock?: { pendingCount: number; onDiscard: () => void; onKeep: () => void };
})

375 (phone door station)	768 (portrait tablet)	1280 (landscape tablet/desktop)
PIN: boxes above keypad, single column; work: camera 50 vh top, panel below	same stacked; keys 96×72	PIN two-column; work: camera left 1fr + panel 1fr

All targets ≥56 px, text ≥18, no hover-only affordances. Used by: kiosk handover station, event door check-in station, public desk kiosk, ScannerPage (standalone).

1A.11 Pattern → screen-type → layout map (shared with ux-screens-longtail.md)

Screen type	Layout	Reference	Patterns it composes	SpaceWorks screens (examples)
Dashboard home	L1 + L2 DashboardLayout	R1, R2	P2 eyebrow header, P5 banner, P4 stats, P6 rows, P12 rail	Staff Home, member Home, organizations home, Platform dashboard
List + stats	L1 + L3 ListLayout	R2, R4	P2, P5, P4, P8 tabs, P6 rows or P14/§5.1 table, P17 empty, P30 undo	Requests, Inventory, Members, Events, Bookings, Audit, Payments, every long-tail table tab
Detail with tabs	L1 + L4 DetailLayout (page or drawer)	R7–R10	P3, P7, P4, P13 aside, P5 CTA card, P16	Request, item, machine type, machine, event, series, space, member, role
Settings rows	L1 + L5 SettingsLayout	R5, R6, R16, R17	P15, P16, P5 panel, P19, P24	Makerspace settings, account, API access, modules, backups, exports
Create / tool form	L1 + L6 FormPageLayout	R3, R6	P18 preview, P19 cards, P17 dropzone	New event/item/makerspace/space/client, QR tools, bulk import, template editor
Wizard / flow	L7 FlowLayout (task mode over L1, or inside L10)	R8, R28 (visual)	P21 camera, evidence tile (§5.2), P29 result card	Issue/return, direct handout, job pickup, stocktake session, restore/migration
Scanner / kiosk	L10 KioskLayout	R27, R28	P28 PIN, P29 station, P30 undo, P5 panel	Kiosk station, door check-in, desk kiosk, scanner page
Public list	L9 PublicLayout	R18 chrome, R20	P6 rows, P10 chips, P9 segmented	Catalogue (with aside cart), events list, machines, bookings
Public detail	L9 + PublicDetailLayout	R18, R19, R21, R23	P25, P10, action card	Event page, item page, session, speaker, organization page
Public narrow task	L9 width="narrow"	R24, R25, R26	P26, P27	Feedback, running order, ticket, self-checkout result
Auth	L8 AuthLayout	R11	P22, P9	Staff sign-in, member sign-in/up
Centred task card	L8 CenteredCardLayout	R12–R15	P23	Reset, verify, MFA, invitations, access denied, not found

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