Atomic design

Frontend UI uses Astro with atomic design.

Boundary Decision

Frontend is a static presentation shell. It renders backend contract data and collects structured user input. It must not own business feature slices, reservation policy, pricing policy, settlement calculation, RBAC decisions, or workflow state transitions.

src/features/** is migration debt, not target architecture. New frontend work must not add feature folders or import from feature folders. Existing files in src/features/** must move toward:

• src/ui/atoms, src/ui/molecules, src/ui/organisms, or src/ui/templates for display and interaction shell code.
• src/ui/**/*-store.ts for Nanostores-backed client state.
• src/lib/*-client.ts for typed backend API wrappers.

Backend contracts own all authoritative decisions. Frontend may format labels, show disabled states supplied by backend, and submit commands. It must not derive whether an actor may act, whether an amount is payable, whether a settlement is ready, or which reservation transition is allowed.

Reservation/payment/settlement E2E proof is invalid if the browser succeeds by using frontend feature code to fill a backend gap. The page must consume backend-owned projections for capability, schedule, charge, payout, settlement, audit, and closeout state.

Layers

• atoms: primitive controls.
• molecules: small composed controls.
• organisms: task-flow sections.
• templates: page layouts.
• pages: routes and page assembly.

There is no frontend feature-slice layer. Feature slices belong to backend domain/application folders and contract APIs. Frontend pages compose atomic layers and pass backend-provided view state through props.

*.feature-ui.tsx quarantine is closed. Reusable or routed UI must live in atoms, molecules, organisms, templates, or pages. Existing feature view-models are temporary migration adapters only and must not grow.

Interactive business state must be Nanostores-backed. React local/context state is blocked for business flows; use *-store.ts Nanostores modules instead. Astro page scripts may bind DOM nodes, but they must not own reservation, payment, document-center, or workflow state through ad hoc module variables or local component state.

Repeated anchor-style commands are atoms. Use a shared link button atom for shell CTAs and role workflow actions so visual behavior and accessible labels stay consistent.