# `@jamunlabs/gameu-shell-v1`

Shell stylesheets for the gameu platform.

This package ships **two CSS files** that style the gameu platform's
two main shell surfaces:

- **`src/lobby.css`** — TV lobby chrome (page grid, QR card, peer
  strip, game-tile carousel, tile state badges, TV toasts).
- **`src/controller.css`** — V2 phone-controller chrome (page-init
  reset, halftone body bg, gesture-pad surface, status banner, root
  layout).

They live together because the design is one design — same palette,
same fonts, same lightning-bolt corner accents, same halftone
background. A redesign of "the gameu look" almost always touches both
files; keeping them in one repo dir + one publish cycle removes
friction.

This package does **not** ship design tokens or universal primitives
— those live in [`@jamunlabs/gameu-sdk`'s `gameu-theme-v1.css`](https://www.npmjs.com/package/@jamunlabs/gameu-sdk).
The token CSS file (`--gameu-navy`, `--gameu-yellow`, fonts, …) **must
be loaded first**; this package's classes reference those custom
properties and will render unstyled without them.

## Usage

The TV lobby loads only `lobby.css`:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jamunlabs/gameu-sdk@latest/src/gameu-theme-v1.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jamunlabs/gameu-shell-v1@latest/src/lobby.css">
```

The phone controller loads only `controller.css`:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jamunlabs/gameu-sdk@latest/src/gameu-theme-v1.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jamunlabs/gameu-shell-v1@latest/src/controller.css">
```

Or via the `exports` map:

```js
import "@jamunlabs/gameu-shell-v1/lobby";       // = src/lobby.css
import "@jamunlabs/gameu-shell-v1/controller";  // = src/controller.css
```

The gameu host serves both files locally for production deployments:

```html
<link rel="stylesheet" href="/lib/gameu-theme-v1.css">
<link rel="stylesheet" href="/lib/lobby-v1.css">       <!-- TV lobby -->
<link rel="stylesheet" href="/lib/controller-v1.css">  <!-- phone controller -->
```

The `/lib/` URLs intentionally use the `-v1` major-version suffix
matching the package name, so a future breaking redesign can ship at
`/lib/lobby-v2.css` / `/lib/controller-v2.css` from a sibling
`gameu-shell-v2` package side-by-side.

## Why one package?

Earlier this work was split across two packages
(`@jamunlabs/gameu-lobby-css-v1` and `@jamunlabs/gameu-controller-css-v1`
— both deprecated; do not use). They were merged because:

- The design is one design. Edits to "the gameu look" rarely touch
  only one surface — they touch both. Keeping the stylesheets
  side-by-side means a designer sees the full visual language in
  one repo dir.
- Two-package version coordination ("which one do I bump first?")
  was friction without benefit. One publish cycle, one source of
  truth.
- File layout still lets consumers `<link>` only what they need
  (TV-only kiosk loads only `lobby.css`; phone-only loads only
  `controller.css`).

## Versioning

The major version is in the **package name** (`-v1`) so a future
breaking redesign can ship as `@jamunlabs/gameu-shell-v2` side-by-
side, letting consumers migrate at their own pace. Within `-v1`,
semver applies (patch = bug fix, minor = new classes, major rename
→ consider whether you actually want a new `-v2` package).

Per the in-tree CI gate, any PR that touches either file in
`packages/gameu-shell/src/` must also bump `package.json#version`.
This keeps jsdelivr's `@latest` cache flips meaningful.

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md).