@game-hub/ui-kit

The shared board chrome of Game Hub, a self-hosted board-game platform: the frames every game's board renders inside, plus the handful of REST calls a game client makes. Pairs with @game-hub/kernel, which owns the contracts and the DTOs.

A game package's ./client should import only these two packages (plus React and its own engine). If it reaches into a host's source tree, it isn't installable.

What's in it

• Chrome — TurnBanner (the role="status" "your turn" frame), ActivityFeed (the 🤖-badged move log; the per-game part is a describe(entry) => string | null closure), GameOver (every game's end screen, with the host's rematch button wired through RematchContext), ActionTip (hover/focus help on an action spot), PanZoom (a dependency-free zoom viewport for a detailed board on a small screen).
• Primitives — Button, Card… (shadcn, copied in and extended in place) and cn.
• Platform rules — seatIdentity, which answers "may this client act right now?" (canDrive) and "what are its seats called?" (myNames). Gate every action affordance on canDrive.
• Transport — getGame, applyAction, unwrap, fail, JSON_HEADERS, apiUrl. The DTOs they return (GamePayload, GameMessage) live in @game-hub/kernel/client.

Using it — the two things a host must do

1. Configure the transport once, at boot, before anything renders:

import { configureTransport } from '@game-hub/ui-kit';

configureTransport({ baseUrl: '' }); // '' when the API is same-origin; '/api' behind a dev proxy

This package deliberately contains no import.meta.env: baking a bundler's build-time constant into a published dist/ is at best fragile and at worst wrong for whoever installs it. A game never calls this — the host does.

2. Teach Tailwind to scan this package. The chrome styles itself with Tailwind v4 utilities and ships no CSS, so it inherits the host's theme rather than fighting it. Tailwind v4's automatic content detection skips node_modules, so without an explicit source its classes are silently pruned and the chrome renders unstyled:

@import 'tailwindcss';
@source '../node_modules/@game-hub'; /* path is relative to this stylesheet */

The host also owns the design tokens the chrome reads — --color-background, --color-foreground, --color-card(-foreground), --color-primary(-foreground), --color-secondary(-foreground), --color-muted(-foreground), --color-accent(-foreground), --color-destructive, --color-border, --color-input, --color-ring, and --radius-{sm,md,lg} — plus the optional .reveal-in entrance animation GameOver uses. Define them in an @theme inline block (see the platform repo's ui/src/index.css for the reference set).

Versioning

Independent of the kernel's, and not the host↔game contract version — that is the kernel's major (KERNEL_CONTRACT_VERSION). This package follows plain semver on its component surface.