AuctionSequence
Four-column auction sequence table (dealer first).
Compound table of an auction's calls, four columns keyed by player (dealer first), each call shown as a BidToken chip. Structure and semantics (column order, seat of each call, current-call marker) come from the AuctionSeq primitive (@workspace/ui-bridge/primitives/auction-sequence); this layer wires its labels from the Strings Provider (usePositionStrings, useBidStrings, useNarratorStrings, useTableStrings) and owns the grid and the header.
The header shows each player's short code (the full name stays in title), the dealer marked with a ● and vulnerable players tinted. Short codes default to usePositionStrings().short; pass shortLabels for locale-specific codes (e.g. French "O"). The surface is color-neutral: the consumer sets the background and text color via className on Root.
import { AuctionSequence } from '@workspace/ui-bridge/auction/auction-sequence';
<AuctionSequence.Root auction={auction} vulnerability="NONE">
<AuctionSequence.Header />
<AuctionSequence.Grid />
</AuctionSequence.Root>For the common case, AuctionSequenceView assembles Root > Header + Grid and forwards the Grid props:
import { AuctionSequenceView } from '@workspace/ui-bridge/auction/auction-sequence';
<AuctionSequenceView auction={auction} rows={{ max: 6 }} stickToBottom vulnerability="NS" />Demo
Compound API
| Component | Description |
|---|---|
AuctionSequence.Root | Context + layout wrapper; takes the data props below |
AuctionSequence.Header | Player columns (dealer first) |
AuctionSequence.Grid | The calls, flowing into the four columns |
AuctionSequenceView | Default assembly: Root > Header + Grid |
Root props
| Prop | Type | Description |
|---|---|---|
auction | Auction | The auction to render; auction.first is the first column and first to bid |
vulnerability | Vulnerability | Vulnerable players are tinted in the header |
shortLabels | Record<Player, string> | Header short codes (default usePositionStrings().short) |
className | string | Surface classes (background, text color, padding) |
Grid props
| Prop | Type | Description |
|---|---|---|
rows | { min?: number; max?: number } | Height bound in rows: min is a hard floor (default 1), max caps the height and scrolls beyond |
stickToBottom | boolean | Keeps the last call in view as calls stream in or the zone resizes |
className | string | Grid classes |
Suit icons
Each call is a BidToken, which sizes its suit symbol to its font (1em). An app that plugs its own icon set through SuitIconsProvider can ship bare SVGs (no width, height or size class): the token gives them their size.