@freegamestore/games 0.16.0 → 0.19.0

package/README.md

@@ -2,7 +2,7 @@
 
 Shared React UI primitives for games on **freegamestore.online**. Brand-consistent layout, scroll-free viewport lock, touch-friendly controls, and synthesized sound effects.
 
-**Version:** 0.14.0
+**Version:** 0.19.0
 
 ## Installation
 
@@ -14,6 +14,50 @@ pnpm add @freegamestore/games
 
 Peer dependency: React 19+.
 
+## Styling (Tailwind 4 on tokens)
+
+The components are styled with **Tailwind utilities on the platform tokens**
+([ADR-001](https://github.com/freegamestore-online/platform/blob/main/docs/adr/001-tailwind-on-fgs-tokens.md)).
+The package ships class names, not CSS, so **your game compiles them**. In the
+game's `web/src/index.css`, directly after `@import "tailwindcss"`:
+
+```css
+@import "tailwindcss";
+@import "@freegamestore/games/theme.css";
+@source "../node_modules/@freegamestore/games/dist";
+
+@theme inline {
+  --color-paper: var(--paper);
+  --color-panel: var(--panel);
+  --color-ink: var(--ink);
+  --color-muted: var(--muted);
+  --color-line: var(--line);
+  --color-accent: var(--accent);
+  --color-danger: var(--danger);
+  --font-display: "Fraunces", serif;
+}
+```
+
+- `@source` makes Tailwind scan this package's `dist` for the classes the
+  components use. Without it the SDK renders unstyled.
+- `theme.css` adds what the components need beyond the token mapping: the
+  `animate-fgs-*` animations and their keyframes (it replaces the CSS the
+  components used to inject), `accent-ink`, `accent-soft` and the `fgs` radius
+  and text sizes. Durations and easings read the `--motion-*` tokens.
+- The `@theme inline` block is the token mapping every `template-game-*` carries.
+  A game on the templates already has it.
+- Floating UI (`GameModal`, `GameConfirm`, `StartScreen`, `GameResultScreen`)
+  sits on the opaque `bg-panel` surface. Only the scrim behind it is translucent.
+- Nothing is injected at runtime. The `*_CSS` strings (`CONFETTI_CSS`,
+  `SCORE_POP_CSS`, `RESULT_SCREEN_CSS`, `START_SCREEN_CSS`) are removed in 0.19.0;
+  `GAME_TOKENS_CSS` stays as the documented token helper.
+- Inline `style` remains only for values computed at runtime (confetti piece
+  positions, score-popup coordinates, stagger indexes), each marked
+  `// Dynamic: …`. `src/styling.test.ts` fails on anything else.
+- Hooks for tests and overrides are `data-fgs="…"` attributes
+  (`result`, `confetti`, `start`, `start-artwork`, `score-popup`). The old
+  `fgs-*` class names are gone.
+
 ## Quick Start
 
 ```tsx
@@ -21,7 +65,7 @@ import { GameShell, GameTopbar } from '@freegamestore/games'
 
 export default function App() {
   return (
-    <GameShell topbar={<GameTopbar title="Chess" score={42} />}>
+    <GameShell topbar={<GameTopbar title="Chess" />}>
       {/* your game canvas / DOM */}
     </GameShell>
   )
@@ -35,7 +79,7 @@ export default function App() {
 Root layout wrapper. Locks the game to `100svh`, prevents document scroll, disables text selection and touch callout. Every game wraps its content in this.
 
 ```tsx
-<GameShell topbar={<GameTopbar title="Tetris" score={42} />}>
+<GameShell topbar={<GameTopbar title="Tetris" />}>
   <MyGame />
 </GameShell>
 ```
@@ -50,8 +94,11 @@ Root layout wrapper. Locks the game to `100svh`, prevents document scroll, disab
 The single allowed topbar. Same font, padding, and color tokens across every game.
 
 ```tsx
-// Simple: just a score
-<GameTopbar title="Tetris" score={42} />
+// Simple: just the title. The score pill is hidden by default (#348)
+<GameTopbar title="Tetris" />
+
+// Opt in to the live score pill
+<GameTopbar title="Tetris" score={42} showScore />
 
 // Custom stats + play/pause controls
 <GameTopbar
@@ -71,8 +118,9 @@ The single allowed topbar. Same font, padding, and color tokens across every gam
 | Prop | Type | Description |
 |------|------|-------------|
 | `title` | `string?` | Game name, left side |
-| `score` | `number?` | Convenience for single-score games |
-| `stats` | `GameTopbarStat[]?` | Custom stat lineup (replaces `score`) |
+| `score` | `number?` | Live score, shown only when `showScore` is set |
+| `showScore` | `boolean?` | Show the live score pill. Off by default (#348) |
+| `stats` | `GameTopbarStat[]?` | Custom stat lineup (lives, level, time) |
 | `actions` | `ReactNode?` | Right-side buttons (max 2) |
 | `rules` | `ReactNode?` | Game instructions — shows info icon, opens overlay on tap |
 | `onPlayPause` | `() => void?` | Renders play/pause icon button |
@@ -84,7 +132,7 @@ The single allowed topbar. Same font, padding, and color tokens across every gam
 Sign-in / avatar widget for the topbar `actions` slot. Shows "Sign in" when signed out, avatar + dropdown when signed in.
 
 ```tsx
-<GameTopbar title="Chess" score={42} actions={<GameAuth />} />
+<GameTopbar title="Chess" actions={<GameAuth />} />
 ```
 
 No props — uses `useAuth` internally.
@@ -149,6 +197,49 @@ Standard game-over overlay with score, high score, and play again button.
 | `onPlayAgain` | `() => void` | Play again handler |
 | `children` | `ReactNode?` | Extra content below the score |
 
+
+### GameResultScreen
+
+An animated result screen for a finished level or game. A win shows falling confetti and an accent title. A loss shows the card alone. The action is focused when the screen opens. Use `GameOverScreen` for a plain game-over card. `GameResultScreen` is the animated version.
+
+```tsx
+<GameResultScreen
+  tone={won ? 'win' : 'lose'}
+  eyebrow="Level 4"
+  title={won ? 'Level 4 cleared!' : 'Game over'}
+  message={won ? undefined : 'Your tray filled up.'}
+  stats={[
+    { label: 'Score', value: score.toLocaleString() },
+    { label: 'Moves', value: moves },
+  ]}
+  badge={newBest ? 'New best!' : undefined}
+  action={won ? { label: 'Next level', onClick: next } : { label: 'Play again', onClick: restart }}
+>
+  <Leaderboard {...leaderboard} />
+</GameResultScreen>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `tone` | `'win' \| 'lose'` | `win` shows confetti and the accent title colour |
+| `eyebrow` | `string?` | Small line above the title, such as the level name |
+| `title` | `string` | The headline |
+| `message` | `string?` | One line under the title |
+| `stats` | `{ label, value }[]?` | Stat rows in a two-column grid. `value` may be a number |
+| `badge` | `ReactNode?` | Highlight line under the stats, such as "New best!" |
+| `action` | `{ label, onClick }` | The primary button. It is focused when the screen opens |
+| `children` | `ReactNode?` | Extra content between the badge and the action |
+
+The screen covers the viewport and has `role="dialog"`. Motion is the
+`animate-fgs-*` utilities from `theme.css` (see [Styling](#styling-tailwind-4-on-tokens)),
+which stop under `prefers-reduced-motion`, and the confetti is hidden for players
+who ask for less motion. Its colours come from the platform tokens and its
+durations from the `--motion-*` tokens in [TOKENS.md](./TOKENS.md), with the
+light-theme fallbacks in `theme.css`.
+
+`Confetti` is exported on its own, for a game that wants the celebration
+somewhere else.
+
 ### GameConfirm
 
 Confirm/cancel dialog built on GameModal.
@@ -234,6 +325,13 @@ const { topScores, recentScores, submitScore, loading, refresh } = useLeaderboar
 const { ok, rank } = await submitScore(1200)
 ```
 
+Pass `period` (a UTC day, `YYYY-MM-DD`) for a per-day board, such as a daily puzzle. Omit it for the all-time board:
+
+```tsx
+const today = new Date().toISOString().slice(0, 10)
+const { topScores, submitScore } = useLeaderboard('tile-match', { period: today })
+```
+
 ### useGameSounds
 
 Synthesized sound effects via Web Audio API. Zero audio files. All sounds auto-respect the mute toggle.

package/TOKENS.md

@@ -0,0 +1,132 @@
+# Design tokens
+
+`@freegamestore/games` defines the brand, typography, shape and motion tokens
+that every FreeGameStore game uses. They are lifted from the Mosaic Rush pilot,
+which is the first game built on them. The source is `src/tokens.ts`. This file
+is the reference.
+
+## Where the values live
+
+| Layer | Where | What it does |
+|---|---|---|
+| Definitions | `src/tokens.ts` | Exports the values as TypeScript constants and builds `GAME_TOKENS_CSS`. |
+| Consumption | SDK components | Read `var(--paper)` and the other tokens inline, with a fallback for each. |
+| Injection | Each game | Adds `GAME_TOKENS_CSS` to its stylesheet. Nothing is injected on import, because the package is `sideEffects: false`. |
+
+Before this package defined them, the brand colours (`--paper`, `--ink`,
+`--accent`, `--panel`, `--line`, `--muted`) were defined only in each game's own
+`index.css`. Components in the SDK used them with fallbacks, so a game that
+did not define them still rendered. Defining them here gives every game the
+same values.
+
+## Using the tokens
+
+Add the stylesheet once, at the top of the game:
+
+```tsx
+import { GAME_TOKENS_CSS } from '@freegamestore/games';
+
+// In the root component:
+<style>{GAME_TOKENS_CSS}</style>
+```
+
+Or copy `GAME_TOKENS_CSS` into `index.css`, which is what Mosaic Rush does.
+Then use the tokens in your own CSS:
+
+```css
+.card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  font-family: var(--font-display);
+  transition: transform var(--motion-fast) var(--motion-ease-out);
+}
+```
+
+The dark theme applies under `data-theme="dark"` on `<html>`.
+`GameThemeToggle` sets that attribute. The theme follows the system preference
+until the player picks one.
+
+## Colours
+
+Light values are the defaults on `:root`. The dark values override only the
+tokens that differ, under `:root[data-theme="dark"]`.
+
+| Token | Light | Dark | Use |
+|---|---|---|---|
+| `--paper` | `#ffffff` | `#0f0f0f` | Page and board background. |
+| `--ink` | `#1a1a1a` | `#f5f5f5` | Primary text. |
+| `--muted` | `#6b7280` | `#9ca3af` | Secondary text and captions. |
+| `--line` | `#e5e7eb` | `#2d2d2d` | Hairline borders on empty surfaces. |
+| `--line-strong` | `#d1d5db` | `#404040` | Borders on buttons and toggles. |
+| `--panel` | `#f9fafb` | `#1a1a1a` | Raised cards and overlays. |
+| `--glass` | `rgba(255, 255, 255, 0.8)` | `rgba(15, 15, 15, 0.8)` | Frosted overlay surfaces. |
+| `--dock` | `#ffffff` | `#1a1a1a` | Bottom dock. |
+| `--success` | `#16a34a` | `#22c55e` | Success status. |
+| `--warning` | `#d97706` | `#fbbf24` | Warning status. |
+| `--error` | `#dc2626` | `#ef4444` | Error status. |
+| `--accent` | `#2563eb` | `#2563eb` | Primary actions and highlights. The same in both themes. |
+| `--accent-soft` | `#eff6ff` | `#1a2e26` | Quiet fill behind accent text, such as badges. |
+| `--accent-ink` | `#2563eb` | `#60a5fa` | Accent used as text. Lighter in dark mode so it passes AA. |
+
+Ink, muted and accent-ink each meet WCAG AA (4.5:1) on `--paper` in both themes.
+`src/tokens.test.ts` checks this.
+
+Use `--accent` for fills, such as buttons, and `--accent-ink` for accent text.
+`--accent` on a dark surface does not pass AA as text.
+
+## Typography
+
+Only display headings and score values use the display face. Body text keeps the
+platform's default sizes.
+
+| Token | Value | Use |
+|---|---|---|
+| `--font-display` | `"Fraunces", Georgia, serif` | Titles and score values. |
+| `--font-body` | `"Manrope", system-ui, sans-serif` | Everything else. |
+| `--text-stat` | `1.25rem` | Score and stat values. |
+| `--text-title` | `clamp(2rem, 9vw, 2.6rem)` | Overlay titles. |
+| `--text-display` | `clamp(2.25rem, 11vw, 3.25rem)` | The start-screen title. |
+
+The brand fonts (Manrope and Fraunces) are the only ones allowed. The compliance
+suite checks for them.
+
+## Shape
+
+| Token | Value | Use |
+|---|---|---|
+| `--radius` | `1.25rem` | Corner radius for cards and overlays. |
+
+## Motion
+
+Every animation reads its duration and easing from these tokens, so one change
+affects the whole game.
+
+| Token | Value | Use |
+|---|---|---|
+| `--motion-fast` | `120ms` | Presses and pops. |
+| `--motion-base` | `240ms` | Standard transitions. |
+| `--motion-slow` | `420ms` | Larger entrances and overlays. |
+| `--motion-ease-out` | `cubic-bezier(0.2, 0.9, 0.3, 1)` | Default ease-out. |
+| `--motion-ease-spring` | `cubic-bezier(0.2, 0.9, 0.3, 1.3)` | Overshooting pops. |
+| `--motion-duration` | `var(--motion-fast)`, so `120ms` | Default duration for a control transition, such as a press. Reduced motion sets it to `0ms`. |
+| `--motion-easing` | `var(--motion-ease-out)` | Default easing for a control transition. |
+
+### Reduced motion
+
+Under `prefers-reduced-motion: reduce`, the three durations are set to `0ms`.
+Animations finish at once and only the final state shows. The easings do not
+change.
+
+Animations that depend on a duration then finish instantly. Any animation that
+is pure decoration should also be disabled explicitly, as Mosaic Rush does for
+its confetti and float effects.
+
+## Compatibility
+
+- Adding these tokens changes no existing export. The SDK components keep their
+  fallbacks.
+- Games that already define `--paper` and the others in their own `index.css`
+  keep working as long as their own stylesheet loads after the tokens, so its declarations win.
+- The store-site aliases from Mosaic Rush (`--bg`, `--surface`, `--border`) are
+  not part of this package.

package/dist/Confetti.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+/** The default palette: the four status-and-accent colours, following the theme. */
+export declare const CONFETTI_COLOURS: readonly string[];
+export interface ConfettiProps {
+    /** Colours cycled across the pieces. Default: the accent and the status colours. */
+    colours?: readonly string[];
+}
+/**
+ * Falling confetti for a win. Each piece's position, drift, spin and timing
+ * come from its index, so the render is the same every time. Renders nothing
+ * under prefers-reduced-motion.
+ *
+ * The falling motion is the `animate-fgs-confetti` utility from the SDK's
+ * `theme.css`. Only the per-piece values below are inline, because they are
+ * computed from the piece's index.
+ */
+export declare function Confetti({ colours }: ConfettiProps): React.JSX.Element | null;
+//# sourceMappingURL=Confetti.d.ts.map

package/dist/Confetti.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.d.ts","sourceRoot":"","sources":["../src/Confetti.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AASpC,oFAAoF;AACpF,eAAO,MAAM,gBAAgB,EAAE,SAAS,MAAM,EAK7C,CAAC;AASF,MAAM,WAAW,aAAa;IAC5B,oFAAoF;IACpF,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAA0B,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA4BhG"}

package/dist/Confetti.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LIGHT_COLOURS } from './tokens.js';
+/** Number of falling pieces. */
+const PIECES = 30;
+/** A CSS variable with a fallback taken from the #209 light tokens. */
+const v = (name, fallback) => `var(--${name}, ${fallback})`;
+/** The default palette: the four status-and-accent colours, following the theme. */
+export const CONFETTI_COLOURS = [
+    v('accent', LIGHT_COLOURS.accent),
+    v('success', LIGHT_COLOURS.success),
+    v('warning', LIGHT_COLOURS.warning),
+    v('danger', LIGHT_COLOURS.error),
+];
+/** True when the player has asked for less motion. False on the server, where there is no window. */
+function prefersReducedMotion() {
+    return typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        : false;
+}
+/**
+ * Falling confetti for a win. Each piece's position, drift, spin and timing
+ * come from its index, so the render is the same every time. Renders nothing
+ * under prefers-reduced-motion.
+ *
+ * The falling motion is the `animate-fgs-confetti` utility from the SDK's
+ * `theme.css`. Only the per-piece values below are inline, because they are
+ * computed from the piece's index.
+ */
+export function Confetti({ colours = CONFETTI_COLOURS }) {
+    if (prefersReducedMotion())
+        return null;
+    return (_jsx("div", { "data-fgs": "confetti", className: "pointer-events-none absolute inset-0 z-0 overflow-hidden motion-reduce:hidden", "aria-hidden": "true", children: Array.from({ length: PIECES }, (_, i) => (_jsx("span", { "data-fgs": "confetti-piece", className: "absolute -top-3 left-(--x) h-[0.8rem] w-2 animate-fgs-confetti rounded-[2px] bg-(--colour) nth-[3n]:size-[0.6rem] nth-[3n]:rounded-full", 
+            // Dynamic: position, drift, spin, timing and colour all come from the piece index.
+            style: {
+                '--x': `${(i * 37) % 100}%`,
+                '--drift': `${((i * 53) % 41) - 20}px`,
+                '--spin': `${((i * 97) % 720) - 360}deg`,
+                '--delay': `${(i % 7) * 70}ms`,
+                '--duration': `${1500 + (i % 5) * 200}ms`,
+                '--colour': colours[i % colours.length],
+            } }, i))) }));
+}
+//# sourceMappingURL=Confetti.js.map

package/dist/Confetti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.js","sourceRoot":"","sources":["../src/Confetti.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,gCAAgC;AAChC,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,uEAAuE;AACvE,MAAM,CAAC,GAAG,CAAC,IAAY,EAAE,QAAgB,EAAE,EAAE,CAAC,SAAS,IAAI,KAAK,QAAQ,GAAG,CAAC;AAE5E,oFAAoF;AACpF,MAAM,CAAC,MAAM,gBAAgB,GAAsB;IACjD,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC;IACjC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC;IACnC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC;IACnC,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,KAAK,CAAC;CACjC,CAAC;AAEF,qGAAqG;AACrG,SAAS,oBAAoB;IAC3B,OAAO,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;QAC7E,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;QAC/D,CAAC,CAAC,KAAK,CAAC;AACZ,CAAC;AAOD;;;;;;;;GAQG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,GAAG,gBAAgB,EAAiB;IACpE,IAAI,oBAAoB,EAAE;QAAE,OAAO,IAAI,CAAC;IACxC,OAAO,CACL,0BACW,UAAU,EACnB,SAAS,EAAC,+EAA+E,iBAC7E,MAAM,YAEjB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxC,2BAEW,gBAAgB,EACzB,SAAS,EAAC,yIAAyI;YACnJ,mFAAmF;YACnF,KAAK,EACH;gBACE,KAAK,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,GAAG,GAAG;gBAC3B,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI;gBACtC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK;gBACxC,SAAS,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI;gBAC9B,YAAY,EAAE,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI;gBACzC,UAAU,EAAE,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;aACjB,IAZrB,CAAC,CAcN,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/GameAuth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameAuth.d.ts","sourceRoot":"","sources":["../src/GameAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;;;GAMG;AACH,wBAAgB,QAAQ,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAsK5C"}
+{"version":3,"file":"GameAuth.d.ts","sourceRoot":"","sources":["../src/GameAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAQpC;;;;;;GAMG;AACH,wBAAgB,QAAQ,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAsE5C"}

package/dist/GameAuth.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useAuth } from './useAuth.js';
+/** Shared by the sign-in and avatar buttons: bare, 44px minimum touch target. */
+const BARE_BUTTON = 'm-0 inline-flex min-h-11 min-w-11 cursor-pointer touch-manipulation items-center justify-center border-0 bg-transparent p-0 [-webkit-tap-highlight-color:transparent]';
 /**
  * Sign-in / avatar widget for the GameTopbar `actions` slot.
  *
@@ -27,100 +29,16 @@ export function GameAuth() {
     if (loading)
         return _jsx("div", {});
     if (user === null) {
-        return (_jsx("button", { onClick: signIn, style: {
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontFamily: '"Manrope", system-ui, sans-serif',
-                fontSize: '0.7rem',
-                fontWeight: 600,
-                color: 'var(--muted, #6b7280)',
-                padding: 0,
-                margin: 0,
-                // 44px minimum touch target
-                minWidth: '44px',
-                minHeight: '44px',
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                WebkitTapHighlightColor: 'transparent',
-                touchAction: 'manipulation',
-            }, children: "Sign in" }));
+        return (_jsx("button", { onClick: signIn, className: `${BARE_BUTTON} text-[0.7rem] font-semibold text-muted`, children: "Sign in" }));
     }
     const firstName = user.name.split(' ')[0] ?? user.name;
     // Google accounts without a profile picture have an empty avatar URL;
     // render an initial-letter circle instead of a broken <img>.
     const avatarUrl = user.avatar?.trim();
     const initial = (firstName.charAt(0) || '?').toUpperCase();
-    return (_jsxs("div", { ref: ref, style: { position: 'relative' }, children: [_jsxs("button", { onClick: () => setOpen((v) => !v), style: {
-                    background: 'none',
-                    border: 'none',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: '0.35rem',
-                    padding: 0,
-                    margin: 0,
-                    minWidth: '44px',
-                    minHeight: '44px',
-                    justifyContent: 'center',
-                    WebkitTapHighlightColor: 'transparent',
-                    touchAction: 'manipulation',
-                }, children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", width: 24, height: 24, style: {
-                            width: '24px',
-                            height: '24px',
-                            borderRadius: '50%',
-                            objectFit: 'cover',
-                            flexShrink: 0,
-                        } })) : (_jsx("span", { "aria-hidden": "true", style: {
-                            width: '24px',
-                            height: '24px',
-                            borderRadius: '50%',
-                            flexShrink: 0,
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            background: 'var(--accent, #6b7280)',
-                            color: '#fff',
-                            fontFamily: '"Manrope", system-ui, sans-serif',
-                            fontSize: '0.65rem',
-                            fontWeight: 700,
-                            lineHeight: 1,
-                        }, children: initial })), _jsx("span", { style: {
-                            fontFamily: '"Manrope", system-ui, sans-serif',
-                            fontSize: '0.7rem',
-                            fontWeight: 600,
-                            color: 'var(--ink, #1a1a1a)',
-                            whiteSpace: 'nowrap',
-                        }, children: firstName })] }), open && (_jsx("div", { style: {
-                    position: 'absolute',
-                    top: '100%',
-                    right: 0,
-                    marginTop: '0.25rem',
-                    background: 'var(--panel, #fff)',
-                    border: '1px solid var(--line, #e5e5e5)',
-                    borderRadius: '0.5rem',
-                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-                    zIndex: 100,
-                    minWidth: '7rem',
-                }, children: _jsx("button", { onClick: () => {
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs("button", { onClick: () => setOpen((v) => !v), className: `${BARE_BUTTON} gap-[0.35rem]`, children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", width: 24, height: 24, className: "size-6 shrink-0 rounded-full object-cover" })) : (_jsx("span", { "aria-hidden": "true", className: "inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-accent text-[0.65rem] font-bold leading-none text-white", children: initial })), _jsx("span", { className: "whitespace-nowrap text-[0.7rem] font-semibold text-ink", children: firstName })] }), open && (_jsx("div", { className: "absolute right-0 top-full z-[100] mt-1 min-w-28 rounded-lg border border-line bg-panel shadow-[0_4px_12px_rgb(0_0_0/0.1)]", children: _jsx("button", { onClick: () => {
                         setOpen(false);
                         signOut();
-                    }, style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        width: '100%',
-                        background: 'none',
-                        border: 'none',
-                        cursor: 'pointer',
-                        fontFamily: '"Manrope", system-ui, sans-serif',
-                        fontSize: '0.7rem',
-                        fontWeight: 600,
-                        color: 'var(--ink, #1a1a1a)',
-                        padding: '0.5rem 0.75rem',
-                        minHeight: '44px',
-                        WebkitTapHighlightColor: 'transparent',
-                        touchAction: 'manipulation',
-                    }, children: "Sign out" }) }))] }));
+                    }, className: "flex min-h-11 w-full cursor-pointer touch-manipulation items-center border-0 bg-transparent px-3 py-2 text-[0.7rem] font-semibold text-ink [-webkit-tap-highlight-color:transparent]", children: "Sign out" }) }))] }));
 }
 //# sourceMappingURL=GameAuth.js.map

package/dist/GameAuth.js.map

@@ -1 +1 @@
-{"version":3,"file":"GameAuth.js","sourceRoot":"","sources":["../src/GameAuth.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GameAuth.js","sourceRoot":"","sources":["../src/GameAuth.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,iFAAiF;AACjF,MAAM,WAAW,GACf,uKAAuK,CAAC;AAE1K;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC;IACrD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,OAAO,GAAG,CAAC,CAAa,EAAE,EAAE;YAChC,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC3D,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAI,OAAO;QAAE,OAAO,eAAO,CAAC;IAE5B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAClB,OAAO,CACL,iBAAQ,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW,yCAAyC,wBAElF,CACV,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;IACvD,sEAAsE;IACtE,6DAA6D;IAC7D,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;IAE3D,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,UAAU,aACjC,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,WAAW,gBAAgB,aACjF,SAAS,CAAC,CAAC,CAAC,CACX,cACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAC,2CAA2C,GACrD,CACH,CAAC,CAAC,CAAC,CACF,8BACc,MAAM,EAClB,SAAS,EAAC,iIAAiI,YAE1I,OAAO,GACH,CACR,EACD,eAAM,SAAS,EAAC,wDAAwD,YAAE,SAAS,GAAQ,IACpF,EAER,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,2HAA2H,YACxI,iBACE,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;wBACf,OAAO,EAAE,CAAC;oBACZ,CAAC,EACD,SAAS,EAAC,sLAAsL,yBAGzL,GACL,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/GameButton.d.ts

@@ -15,7 +15,8 @@ export interface GameButtonProps {
 }
 /**
  * Prescribed game button. Touch-friendly (min 44px target), brand-consistent
- * styling. Three variants, three sizes — all opinionated, nothing custom.
+ * styling. Four variants, three sizes — all opinionated, nothing custom.
+ * Utilities on the platform tokens; the press feedback is `active:scale`.
  */
 export declare function GameButton({ children, variant, size, onClick, disabled, block, }: GameButtonProps): React.JSX.Element;
 //# sourceMappingURL=GameButton.d.ts.map

package/dist/GameButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameButton.d.ts","sourceRoot":"","sources":["../src/GameButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7E,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,yEAAyE;IACzE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA0BD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,QAAgB,EAChB,KAAa,GACd,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8DrC"}
+{"version":3,"file":"GameButton.d.ts","sourceRoot":"","sources":["../src/GameButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7E,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,yEAAyE;IACzE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAeD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,QAAgB,EAChB,KAAa,GACd,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAerC"}

package/dist/GameButton.js

@@ -1,76 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const SIZE = {
-    sm: {
-        minHeight: '2.75rem',
-        padding: '0.5rem 1rem',
-        fontSize: '0.85rem',
-        borderRadius: '0.625rem',
-    },
-    md: {
-        minHeight: '3rem',
-        padding: '0.625rem 1.25rem',
-        fontSize: '0.9rem',
-        borderRadius: '0.75rem',
-    },
-    lg: {
-        minHeight: '3.5rem',
-        padding: '0.75rem 1.75rem',
-        fontSize: '1rem',
-        borderRadius: '0.875rem',
-    },
+    sm: 'min-h-11 px-4 py-2 text-[0.85rem] rounded-[0.625rem]',
+    md: 'min-h-12 px-5 py-[0.625rem] text-[0.9rem] rounded-xl',
+    lg: 'min-h-14 px-7 py-3 text-base rounded-[0.875rem]',
+};
+const VARIANT = {
+    primary: 'bg-accent text-white',
+    secondary: 'bg-panel text-ink ring-1 ring-inset ring-line',
+    ghost: 'bg-transparent text-muted',
+    danger: 'bg-danger text-white',
 };
 /**
  * Prescribed game button. Touch-friendly (min 44px target), brand-consistent
- * styling. Three variants, three sizes — all opinionated, nothing custom.
+ * styling. Four variants, three sizes — all opinionated, nothing custom.
+ * Utilities on the platform tokens; the press feedback is `active:scale`.
  */
 export function GameButton({ children, variant = 'primary', size = 'md', onClick, disabled = false, block = false, }) {
-    const s = SIZE[size];
-    const base = {
-        display: block ? 'flex' : 'inline-flex',
-        width: block ? '100%' : undefined,
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '0.5rem',
-        minHeight: s.minHeight,
-        padding: s.padding,
-        fontSize: s.fontSize,
-        fontFamily: '"Manrope", system-ui, sans-serif',
-        fontWeight: 700,
-        lineHeight: 1,
-        borderRadius: s.borderRadius,
-        border: 'none',
-        cursor: disabled ? 'default' : 'pointer',
-        opacity: disabled ? 0.4 : 1,
-        transition: 'transform 120ms ease, opacity 120ms ease',
-        WebkitTapHighlightColor: 'transparent',
-        touchAction: 'manipulation',
-    };
-    const variantStyles = {
-        primary: {
-            background: 'var(--accent, #10b981)',
-            color: '#fff',
-        },
-        secondary: {
-            background: 'var(--panel, #f5f3f0)',
-            color: 'var(--ink, #1a1a1a)',
-            boxShadow: 'inset 0 0 0 1px var(--line, #e5e5e5)',
-        },
-        ghost: {
-            background: 'transparent',
-            color: 'var(--muted, #6b7280)',
-        },
-        danger: {
-            background: '#dc2626',
-            color: '#ffffff',
-        },
-    };
-    return (_jsx("button", { style: { ...base, ...variantStyles[variant] }, onClick: disabled ? undefined : onClick, disabled: disabled, onPointerDown: (e) => {
-            if (!disabled)
-                e.currentTarget.style.transform = 'scale(0.96)';
-        }, onPointerUp: (e) => {
-            e.currentTarget.style.transform = '';
-        }, onPointerLeave: (e) => {
-            e.currentTarget.style.transform = '';
-        }, children: children }));
+    const layout = block ? 'flex w-full' : 'inline-flex';
+    const state = disabled
+        ? 'cursor-default opacity-40'
+        : 'cursor-pointer enabled:active:scale-[0.96]';
+    return (_jsx("button", { className: `${layout} ${SIZE[size]} ${VARIANT[variant]} ${state} touch-manipulation items-center justify-center gap-2 border-0 font-bold leading-none transition-[transform,opacity] duration-[120ms] [-webkit-tap-highlight-color:transparent]`, onClick: disabled ? undefined : onClick, disabled: disabled, children: children }));
 }
 //# sourceMappingURL=GameButton.js.map

package/dist/GameButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"GameButton.js","sourceRoot":"","sources":["../src/GameButton.tsx"],"names":[],"mappings":";AAkBA,MAAM,IAAI,GAGN;IACF,EAAE,EAAE;QACF,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,aAAa;QACtB,QAAQ,EAAE,SAAS;QACnB,YAAY,EAAE,UAAU;KACzB;IACD,EAAE,EAAE;QACF,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,kBAAkB;QAC3B,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,SAAS;KACxB;IACD,EAAE,EAAE;QACF,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,iBAAiB;QAC1B,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,UAAU;KACzB;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,GACG;IAChB,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAErB,MAAM,IAAI,GAAwB;QAChC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa;QACvC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACjC,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,GAAG,EAAE,QAAQ;QACb,SAAS,EAAE,CAAC,CAAC,SAAS;QACtB,OAAO,EAAE,CAAC,CAAC,OAAO;QAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ;QACpB,UAAU,EAAE,kCAAkC;QAC9C,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,CAAC;QACb,YAAY,EAAE,CAAC,CAAC,YAAY;QAC5B,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3B,UAAU,EAAE,0CAA0C;QACtD,uBAAuB,EAAE,aAAa;QACtC,WAAW,EAAE,cAAc;KAC5B,CAAC;IAEF,MAAM,aAAa,GAAmD;QACpE,OAAO,EAAE;YACP,UAAU,EAAE,wBAAwB;YACpC,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE;YACT,UAAU,EAAE,uBAAuB;YACnC,KAAK,EAAE,qBAAqB;YAC5B,SAAS,EAAE,sCAAsC;SAClD;QACD,KAAK,EAAE;YACL,UAAU,EAAE,aAAa;YACzB,KAAK,EAAE,uBAAuB;SAC/B;QACD,MAAM,EAAE;YACN,UAAU,EAAE,SAAS;YACrB,KAAK,EAAE,SAAS;SACjB;KACF,CAAC;IAEF,OAAO,CACL,iBACE,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC,EAAE,EAC7C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACvC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;YACnB,IAAI,CAAC,QAAQ;gBAAG,CAAC,CAAC,aAA6B,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,CAAC;QAClF,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,CAAC,CAAC,aAA6B,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QACxD,CAAC,EACD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;YACnB,CAAC,CAAC,aAA6B,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QACxD,CAAC,YAEA,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"GameButton.js","sourceRoot":"","sources":["../src/GameButton.tsx"],"names":[],"mappings":";AAkBA,MAAM,IAAI,GAAmC;IAC3C,EAAE,EAAE,sDAAsD;IAC1D,EAAE,EAAE,sDAAsD;IAC1D,EAAE,EAAE,iDAAiD;CACtD,CAAC;AAEF,MAAM,OAAO,GAAsC;IACjD,OAAO,EAAE,sBAAsB;IAC/B,SAAS,EAAE,+CAA+C;IAC1D,KAAK,EAAE,2BAA2B;IAClC,MAAM,EAAE,sBAAsB;CAC/B,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,GACG;IAChB,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;IACrD,MAAM,KAAK,GAAG,QAAQ;QACpB,CAAC,CAAC,2BAA2B;QAC7B,CAAC,CAAC,4CAA4C,CAAC;IAEjD,OAAO,CACL,iBACE,SAAS,EAAE,GAAG,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,KAAK,iLAAiL,EAChP,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACvC,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/dist/GameConfirm.d.ts

@@ -12,5 +12,5 @@ export interface GameConfirmProps {
  * Confirm/cancel dialog for games. Built on GameModal.
  * Use for: quit game, restart, delete save, etc.
  */
-export declare function GameConfirm({ open, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, variant, }: GameConfirmProps): import("react/jsx-runtime").JSX.Element;
+export declare function GameConfirm({ open, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, variant, }: GameConfirmProps): import("react").JSX.Element;
 //# sourceMappingURL=GameConfirm.d.ts.map