# Global Store gallery

The gallery page pattern: toolbar (search, status chips that add up, sort, gallery/table toggle), a 5-column grid (2 on the phone), and loading, empty, no-match and image-missing states.

- **Group:** Cards and gallery · **family:** `cards-gallery` · **shadcn:** Card, ToggleGroup
- **Build:** Grid of `Card` + toolbar.
- **In apps/admin today:** Card exists.
- **Client component:** yes. 

## Content rules

- Chip counts add up to the total (214).

## Do

- Persist view and filters in the URL.

## Don't

- Different data in gallery and table views.

## Accessibility

- **Keyboard:** Grid is a list of links.
- **ARIA:** `<ul role="list">`; count live region.
- **Focus:** Toggle keeps focus.

## Tokens

`--w-medium` `--text-small` `--font-ui` `--muted-foreground` `--muted` `--r-chip` `--s-1` `--s-2` `--s-3` `--s-6` `--s-4` `--border` `--control-h-sm` `--r-control` `--background` `--foreground` `--text-btn-sm` `--font-voice` `--font-stretch-title` `--motion-hover` `--w-regular` `--text-micro` `--accent` `--ring` `--accent-foreground` `--text-body` `--s-5` `--motion-skeleton` `--r-card-inner` `--s-10` `--r-frame` `--destructive` `--w-semibold` `--text-section` `--lh-section` `--tr-section` `--secondary-border`

## Files

`gallery.html` live specimen · `gallery.css` kit rules · `gallery.d.ts` props · full page: `docs/components/gallery/` (phone: `m/`).