---
description: Gallery UI interaction and component standards for client screens
globs: client/src/**/*.{tsx,css}
alwaysApply: false
---

# UI interaction standards

Follow [Documentation/ui-interaction-and-component-standards.md](Documentation/ui-interaction-and-component-standards.md) (MUST / SHOULD / MAY). Do not invent a second nav, toast, or CSS framework.

## MUST

- Drill-down via `HomePage` `View` state. Nested screens get an explicit Back; do not rely on the browser Back button.
- **Back to Timeline** → `goToTimelineHome()` (clears hall, resets year range). **Back to Gallery** → same hall session (camera/wing kept).
- Hide actions the user cannot `can()`; do not leave buttons that 403.
- Visitor chrome strings in `locales/{en,ru}`. Movement colours via `utils/movementColor.ts`. Timeline zoom/pan via `utils/timelineView.ts`.
- Loading: `GalleryLoadingMarker`. Errors/empty states: visible copy, not a blank canvas.
- Modals: `role="dialog"`, visible close, Escape. No nested modals. Destructive actions confirm first.
- Colocated CSS; museum gold `#c9a96e` / navy `/ Georgia`. No MUI/Ant Design.

## SHOULD

- Reuse `CatalogSearchBar`, `CuratorLoginModal`, `ArtistFilterModal`, `PaintingLightbox`, `DebugSearchResultsModal`, `DebugUploadButton`.
- Curator filters above the table; expensive work behind an explicit button.
- Update the standards doc when changing Back, search, layout query, or loading behaviour.