Overview

@workspace/ui-bridge provides domain-specific React components for building bridge game interfaces. Components are organized into sub-path exports by domain module.

Quick Start

import { BridgeProvider } from '@workspace/ui-bridge/bridge-context/bridge-provider';
import { SuitDisplay } from '@workspace/ui-bridge/suit/suit-display';
import { CardDisplay } from '@workspace/ui-bridge/card/card-display';

function App() {
  return (
    <BridgeProvider>
      <SuitDisplay suit="S" />
      <CardDisplay card="SA" />
    </BridgeProvider>
  );
}

Sub-path exports

One sub-path per module, generated from the package exports map. Globs (./hand/*, ./components/bid/*, …) expose every .tsx file of their folder; .ts modules are listed one by one.

Architecture

Most display components follow a pattern:

1. BridgeProvider wraps the app to provide engine context (rules + notation)
2. Components use useBridgeEngine() internally for variant-specific rendering (notation, display config)
3. Copy comes from BridgeStringsProvider (@workspace/ui-bridge/strings), never from an i18n library
4. Compound components (Hand, AuctionEditor, PlayEditor) provide their own context via a Root component
5. Every atom that renders a bridge value (suit, rank, card, call, contract, seat, vulnerability, scoring, expected result, field options) carries translate="no" and the notranslate class on the element it renders: page translators leave it alone (i18n)

Package Structure