@trading-game/design-intelligence-layer 0.13.3 → 0.15.0

package/AGENTS.md

@@ -57,7 +57,7 @@ cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-syst
 3. **Design principles and accessibility first** — every screen must reflect the 8 design principles and meet the accessibility standards (WCAG 2.1 AA). Run both checklists before shipping.
 4. **No separate installs** — do not install `lucide-react`, `tailwindcss`, or other bundled dependencies separately.
 5. **After a version bump** — re-copy the rules file into `.cursor/rules/`, check for stale local component copies, and align them with the package.
-6. **Blocks are playground-only** — Blocks (e.g. NavBar) appear in the playground's Blocks tab but are **not** exported from the package. Do not try to import them. To build a block pattern in a consuming project, compose it manually using package components and design tokens. See `guides/design-system-guide/trading-game-ds-guide.md` Section 8.5.
+6. **Blocks are first-class exports** — Blocks (Hero, Auth, FAQ, NavBar, HeaderNavigation, OpenPositions, Result) are exported from the package the same as primitives. Import them by name and pass data via props. See the `## Blocks` section below for the full catalog.
 
 ---
 
@@ -69,3 +69,142 @@ cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-syst
 - Personas: `node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md`
 - Brand voice: `node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md`
 - Full agent rules: `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`
+
+---
+
+## Blocks
+
+The package ships eight opinionated, composed blocks alongside the UI primitives. Each block is a single `import` away and accepts data via props. Variants are modeled as a `variant` / `layout` / `mode` prop on one block, not as separate components.
+
+### `HeroBlock`
+
+Marketing hero section with centred or split-column layout.
+
+```tsx
+import { HeroBlock } from "@trading-game/design-intelligence-layer"
+
+<HeroBlock
+  layout="centered"                                        // "centered" | "split"
+  tagline={{ label: "What's new", suffix: "v2.0" }}
+  heading="Solve your customer's main problem"
+  body="One or two sentences expanding on the value prop."
+  primaryCta={{ label: "Get started", onClick: ... }}
+  secondaryCta={{ label: "Learn more", onClick: ... }}    // split layout only
+/>
+```
+
+### `AuthBlock`
+
+Sign-in / sign-up form with OAuth providers, divider, email input, terms, and cross-link.
+
+```tsx
+import { AuthBlock } from "@trading-game/design-intelligence-layer"
+
+<AuthBlock
+  mode="sign-in"                                          // "sign-in" | "sign-up"
+  logoSrc="/path/to/brand-icon.svg"
+  providers={["google", "telegram", "x"]}                 // default: all three
+  onSubmit={({ email }) => { ... }}
+  crossLinkHref="/auth/signup"
+/>
+```
+
+### `FAQBlock`
+
+Eyebrow + heading + intro + accordion + optional "Need more help" card.
+
+```tsx
+import { FAQBlock } from "@trading-game/design-intelligence-layer"
+
+<FAQBlock
+  layout="desktop"                                        // "desktop" | "mobile"
+  items={[{ value: "q1", question: "...", answer: "..." }, ...]}
+  intro={<>Optional intro paragraph with a <Link>link</Link>.</>}
+  helpCard={{ title: "Need more help?", body: "...", ctaLabel: "Contact us" }}
+/>
+```
+
+### `NavBarBlock`
+
+Responsive marketing nav with brand mark, link buttons, sign-in/up CTAs, and an internal mobile drawer.
+
+```tsx
+import { NavBarBlock } from "@trading-game/design-intelligence-layer"
+
+<NavBarBlock
+  brand={{ fullLogoSrc: "...", iconLogoSrc: "...", alt: "Brand" }}
+  links={[{ label: "Products" }, { label: "Docs" }, ...]}
+  signIn={{ onClick: ... }}
+  signUp={{ onClick: ... }}
+/>
+```
+
+### `HeaderNavigationBlock`
+
+In-app trading header (back · badge · balance · history · action slot). History icon supports an overlaid count badge in `bg-primary`.
+
+```tsx
+import { HeaderNavigationBlock } from "@trading-game/design-intelligence-layer"
+
+<HeaderNavigationBlock
+  onBack={() => router.back()}
+  badge={{ label: "Demo", variant: "fill-warning" }}
+  balance={{ amount: "1000.00", currency: "USDT" }}
+  history={{ count: 5, onClick: openHistorySheet }}        // count 0 hides badge; >99 shows "99+"
+  actions={<SoundToggleButton />}
+/>
+```
+
+### `OpenPositionsBlock`
+
+Responsive Sheet (desktop) / Drawer (mobile) containing a list of game positions. Positions are a discriminated union by `kind`: `"rise-fall" | "swipe" | "box-o" | "digits"`.
+
+```tsx
+import { OpenPositionsBlock, Position } from "@trading-game/design-intelligence-layer"
+
+const positions: Position[] = [
+  { kind: "rise-fall", direction: "Rise", market: "Vol 100", duration: "30 minutes",
+    stake: "1.00 USDT", pnl: "+0.96 USDT", win: true },
+  ...
+]
+
+<OpenPositionsBlock
+  trigger={<Button variant="secondary">Active trades</Button>}
+  positions={positions}
+  sheetTitle="Positions"
+  onViewHistory={openHistoryPage}
+/>
+```
+
+### `ResultBlock`
+
+Universal win/loss result card with animated halo + thumb illustration + contract badge + duration badge + CTA. Thumb icons are bundled inside the package.
+
+```tsx
+import { ResultBlock } from "@trading-game/design-intelligence-layer"
+
+<ResultBlock
+  status="win"                                             // "win" | "loss"
+  amount="10,000.00"
+  currency="USDT"
+  contractLabel="Rise"
+  duration="2 hours"
+  pickedDigit={7}                                          // optional, for Digits contracts
+  ctaMode="next-round"                                     // "next-round" | "go-again" | "conversion"
+/>
+```
+
+### `ResultDialog`
+
+Fixed-width system dialog (title + body + two CTAs). Used for messages like "out of balance".
+
+```tsx
+import { ResultDialog } from "@trading-game/design-intelligence-layer"
+
+<ResultDialog
+  title="You're out of balance."
+  body="Deposit to keep playing or stay in demo mode."
+  primaryLabel="Deposit now"
+  secondaryLabel="Stay in demo"
+/>
+```

package/README.md

@@ -159,14 +159,24 @@ npm install react react-dom tailwindcss
 
 ## Blocks
 
-Blocks are pre-composed UI patterns built from design system primitives. They are demonstrated in the **Blocks** tab of the development playground and are **not** exported from the npm package — import the underlying components directly if you need to use them.
+Blocks are opinionated, composed UI patterns built from design system primitives — **exported from the package the same as primitives**. Import them by name and pass data via props. Variants (`layout` / `mode` / `status`) live on a single block, not separate components.
+
+```tsx
+import { HeroBlock, ResultBlock, OpenPositionsBlock } from "@trading-game/design-intelligence-layer"
+```
 
 | Block | Variants | Description |
 |---|---|---|
-| NavBar | Desktop, Mobile (closed), Mobile (open) | Landing page top navigation bar. Logo + ghost nav links (Products, Use Cases, Docs, Blog, FAQ) + Sign in / Sign up CTAs. |
-| Hero | Type 1 (Desktop + Mobile), Type 2 | Landing page hero sections. Type 1: tagline pill + heading + body + CTAs left, image right (responsive). Type 2: centred single-column, tagline pill + heading + body + primary CTA with arrow icon, no image. |
-| Sheet Open Positions | Active, Empty | Right-side sheet (desktop) / bottom drawer (mobile) listing open trading positions. Active state shows a scrollable position list with win/loss colouring and a history footer link. Empty state shows an empty state illustration. |
-| Header navigation | — | Product app top header bar. Back navigation button left, account balance + Demo badge centre, history and sound action buttons right. |
+| `HeroBlock` | `layout: "centered" \| "split"` | Marketing hero section. Centred = single-column, no image; split = two-column with image. Tagline pill, heading, body, primary + optional secondary CTA. |
+| `AuthBlock` | `mode: "sign-in" \| "sign-up"` | Auth form — logo lockup, OAuth provider buttons (Google, Telegram, X), divider, email input, terms, primary CTA, footer cross-link. |
+| `FAQBlock` | `layout: "desktop" \| "mobile"` | Eyebrow + heading + intro + accordion + optional "Need more help" card. Items passed as `{ value, question, answer }[]`. |
+| `NavBarBlock` | — (internal mobile-menu state) | Responsive marketing nav — brand logos, link buttons, Sign in / Sign up CTAs, hamburger drawer on mobile. |
+| `HeaderNavigationBlock` | — | In-app trading header. Back · badge · balance · optional history button with `history.count` numeric badge (`bg-primary`; ≥99 → `99+`) · actions slot. |
+| `OpenPositionsBlock` | `Position` discriminated union (`rise-fall` / `swipe` / `box-o` / `digits`) | Responsive Sheet (desktop) / Drawer (mobile) listing open positions. Consumer-provided trigger; default empty state. |
+| `ResultBlock` | `status: "win" \| "loss"`, `ctaMode: "next-round" \| "go-again" \| "conversion"` | Win/loss result card. Animated halo + thumb illustration (bundled inline) + contract badge + duration badge + CTA. |
+| `ResultDialog` | — | Fixed-width system dialog (title + body + two CTAs). For messages like "out of balance" or "on a roll". |
+
+See [`AGENTS.md`](./AGENTS.md#blocks) for full usage examples per block.
 
 ---
 
@@ -215,6 +225,9 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 <Badge variant="default-success" /> // Green
 <Badge variant="default-fail" />    // Red
 
+// Standard (neutral grey chip) — for non-status meta like contract type, duration
+<Badge variant="standard" />
+
 // Fill (tint background)
 <Badge variant="fill" />            // Blue tint
 <Badge variant="fill-success" />    // Green tint
@@ -595,7 +608,15 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
-### Unreleased
+### v0.14.0
+- **New Result block:** Fixed-width (320 px) end-of-round result card with 5 variants — Win/continuing, Loss/continuing, End of demo, Out of balance, On a roll. Thumb-up/down SVG with subtle radial halo + idle motion (float for win, head-shake for loss). Title (`You won!` / `You lost!`), amount headline in semantic colour, contract + duration `standard` Badge pills, and CTA(s). Digit contracts render the picked digit inside the contract pill with a thin vertical divider. Out-of-balance and on-a-roll variants are dialog-only (no thumb / no amount) — title + body + 2 CTAs. Lives under **Blocks → Result** in the playground.
+- **Sheet Open Positions redesign:** Each row now uses a 2-col layout — bet name + stake (left) / PnL + market·duration (right). Dropped per-row asset (`V100`), round number, and digit/multiplier suffix labels (the game is already implied by the sheet/tab title). Abbreviated durations (sec / min / hr / day) and dropped the `Stake ` prefix on amounts. Added an "Edge cases" row demonstrating drawer behavior with 1 item and 30 items.
+- **Section nav sheet — desktop-safe:** The mobile section picker `Sheet` is now conditionally mounted (`{isMobile && …}`) so it can't be triggered at desktop widths where the permanent sidebar is already visible, avoiding redundant overlay layers.
+- **Badge — new `standard` variant:** Neutral grey chip (`bg-subtle` / `text-on-prominent`) for non-status meta like contract type and duration. Existing `default` (solid blue) and all other variants are unchanged.
+- **TicketCard / BoostTicketCard:**
+  - Left content restructured as a 2-column grid so the icon circle scales to match the **label + value height** (was a fixed `size-10` centered against the entire column).
+  - Boost badge now sits in row 2 of column 2 — aligned under the value, not pinned to the card's left edge.
+  - **2-decimal balance formatting:** the `value` prop is now normalised by `formatBalanceValue` before render, so values always display with exactly two decimal places regardless of input (e.g. `$12,450` → `$12,450.00`, `$12,450.5` → `$12,450.50`, `1234` → `1,234.00`). Currency prefix/suffix is preserved.
 - **Token convention — `on-<surface>` foreground pairs:** Added a Material-style paired foreground for every semantic surface so colour roles are self-documenting and resolve robustly across consumer setups (incl. Module Federation, where raw `var()` fallbacks were previously needed). New CSS variables and Tailwind utilities:
   - `--on-primary` (white) / `text-on-primary` — paired with `bg-primary`
   - `--primary-inverse` (white) / `bg-primary-inverse` — inverted primary surface for use on dark/coloured areas