@trading-game/design-intelligence-layer 0.16.6 → 0.16.8

package/README.md

@@ -100,9 +100,10 @@ npm install react react-dom tailwindcss
 | Accordion | `Accordion, AccordionItem, AccordionTrigger, AccordionContent` |
 | Alert | `Alert` — dismissible status notification. Variants: `info`, `warning`, `danger`, `success`. Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`, `action`, `actions`, `onDismiss`. |
 | Alert Dialog | `AlertDialog, AlertDialogTrigger, AlertDialogContent, ...` |
+| Aspect Ratio | `AspectRatio` |
 | Avatar | `Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup` |
 | Badge | `Badge, badgeVariants` |
-| Banner | `Banner` — dismissible promotional surface. Single visual treatment (light-blue diagonal gradient). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |
+| Banner | `Banner` — dismissible promotional surface on a tinted primary surface. Brand-blue circular `IconBadge` (40 px) with a swappable `glyph` (or pass `icon` to override the badge entirely). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |
 | Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |
 | Button | `Button, buttonVariants` |
 | Calendar | `Calendar, CalendarDayButton` |
@@ -110,6 +111,7 @@ npm install react react-dom tailwindcss
 | Carousel | `Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext` |
 | Chart | `ChartContainer, ChartTooltip, ChartLegend, ChartStyle` |
 | Checkbox | `Checkbox` |
+| Chip | `Chip` — pill-shaped, toggle-able selection chip (e.g. game filters). Selected state takes `bg-primary/[0.08]` + `text-primary`; unselected uses outline + `text-on-prominent`. |
 | Collapsible | `Collapsible, CollapsibleTrigger, CollapsibleContent` |
 | Combobox | `Combobox, ComboboxInput, ComboboxContent, ComboboxItem, ...` |
 | Command | `Command, CommandDialog, CommandInput, CommandList, ...` |
@@ -234,8 +236,8 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 <Badge variant="fill-success" />    // Green tint
 <Badge variant="fill-fail" />       // Red tint
 <Badge variant="fill-warning" />    // Yellow tint — status/warning
-<Badge variant="fill-credit" />     // Light peach — credit/bonus labels
-<Badge variant="fill-demo" />       // Red-orange tint — demo/test-mode flags
+<Badge variant="fill-credit" />     // Deep peach (#FDCA8A) + bold deep-amber (#521900) text — Welcome credit / bonus labels
+<Badge variant="fill-demo" />       // Peach surface + red-orange text — demo/test-mode flags
 
 // Outline (black border, secondary-hover on hover)
 <Badge variant="outline" />
@@ -335,8 +337,8 @@ Dismissible **promotional / marketing** surface — for feature launches, offers
 ```
 
 **Visual:**
-- Surface: 135° diagonal gradient `#EBEBFF → #FFFFFF` with `border-primary/20` light-blue edge.
-- Default icon: 40px brand-blue square (4px corners, matches the trading.game logo) with a white `Gift` glyph. Swap just the glyph via the `glyph` prop (e.g. `<Sparkles className="size-5" />`); replace the entire badge via the `icon` prop; or `icon={null}` to omit the column entirely.
+- Surface: tinted primary surface — `bg-primary/[0.08]` with `border-primary/[0.16]` edge, `rounded-md`.
+- Default icon: 40 px brand-blue **circle** (`rounded-full bg-primary`) with a white `Gift` glyph inside. Swap just the glyph via the `glyph` prop (e.g. `<Sparkles className="size-5" />`); replace the entire badge via the `icon` prop; or `icon={null}` to omit the column entirely.
 - Default action button: `Button variant="secondary"` size `sm` for every slot (inline `action` and both `actions[]` in card). Pass `<Button>` elements explicitly to override variant/size.
 - Title supports `<b>` children styled with `text-primary` for in-line brand-blue accent.
 - Close X (32px) hovers to `bg-secondary-hover`.
@@ -693,6 +695,24 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
+### v0.16.7 (current)
+- **Credit badge readability pass:** `<Badge variant="fill-credit">` and the credit pill inside `CreditTicketCard` now sit on a deeper peach surface and use a bold deep-amber text for crisper read on the grey `bg-subtle` ticket card and on white / brand-blue surfaces alike. Token chain: `--primitive-amber-100` (#FEEBD9) → `--primitive-amber-300` (#FDCA8A) and `--primitive-amber-800` (#713813) → `--primitive-amber-900` (#521900). `--semantic-boost-surface` and `--on-semantic-boost` are repointed automatically. Variant class also bumps to `!font-bold`.
+- **CreditTicketCard — responsive compact layout:** Compact variant now keeps the credit badge inline next to the value when there's room and only wraps to a second line when balance + badge would overflow into the deposit stub (`flex-wrap` on the value/badge row, with `whitespace-nowrap` on the value so the number itself never splits). Non-compact keeps the existing inline behavior.
+- **Banner — brand `IconBadge` is now a circle:** The 40 px brand-blue icon badge (visible when the consumer passes a `glyph` prop) is now `rounded-full` instead of `rounded-xs`. No API change.
+- **Tooltip — `max-w-xs` + `whitespace-normal` built into the primitive:** Desktop tooltips now cap at 320 px by default with natural-word wrapping; consumers no longer need to pass these classes. Mobile drawers (the responsive Tooltip mode) keep the full sheet width — the consumer `className` is no longer applied to the drawer's inner content wrapper, so passing `max-w-xs` on `TooltipContent` for desktop tuning no longer leaks into and shrinks the mobile drawer text.
+- **Naming note:** the v0.14.0 entry below claimed a `fill-credit` → `fill-boost` and `CreditTicketCard` → `BoostTicketCard` rename. **Those renames were not landed** — the current shipped names are still `fill-credit`, `CreditTicketCard`, and `--semantic-boost-surface` / `--on-semantic-boost` (the boost tokens stayed, the variant/component names didn't get renamed alongside them).
+
+### v0.16.5 — v0.16.6
+- **New `Chip` component:** Pill-shaped toggle-able selection chip — `bg-primary/[0.08]` + `text-primary` when selected, outline + `text-on-prominent` when unselected. Used for game filters (All games, Rise & Fall, Swipe, Box-O, Digits) and similar mutually-exclusive selectors.
+- **FAQ block — two-column layout:** `FAQBlock` gained a two-column variant on desktop.
+- **Demo + block logos** repointed at the new `.webp` brand assets (`/assets/icon.webp`, `/assets/tg-logo-full.webp`).
+- **Open Positions block** — "View transaction history" footer link renamed to "View trade history".
+
+### v0.16.1 — v0.16.4
+- **New `Banner` component:** Promotional surface (separate from `Alert`, which is now status-only). Default variant places a brand-blue 40 px circular `IconBadge` (consumer-swappable via `glyph`) on a tinted primary surface. Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable).
+- **`fill-demo` Badge variant:** Opaque peach surface (color-mix of demo @ 10% with prominent) + red-orange `--semantic-demo` text — for demo / test-mode account flags. Works identically on any background.
+- **Alert slimmed to status-only:** `default` and `brand` variants removed — use `Banner` for promotional / marketing surfaces.
+
 ### 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.
@@ -712,15 +732,16 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 - **Internal sweep:** all internal components (Button, Badge, Tooltip, Toast, Checkbox, Avatar, Input, NativeSelect, TicketCard, BoostTicketCard, sidebar mini-avatar) now use the explicit `on-<surface>` foregrounds — no more catch-all `text-on-prominent-static-inverse`.
 - **Backwards-compat aliases preserved:** `--on-prominent-static-inverse` (→ `var(--on-prominent-inverse)`) and `--surface-inverse-static` (→ `var(--primary-inverse)`) remain defined in CSS so existing consumer code referencing them via raw `var()` (e.g. `var(--on-prominent-static-inverse, #fff)`) keeps working. The Tailwind utility `text-on-prominent-static-inverse` is also still emitted, but new code should pick the explicit paired token.
 - **Sonner → Toast rename:** The toast wrapper file moved from `components/ui/sonner.tsx` to `components/ui/toast.tsx`. The wrapper component is still `Toaster`, and `toast` is now re-exported from this module so consumers no longer need `import { toast } from "sonner"` directly. Import path: `@trading-game/design-intelligence-layer` (was `... from "sonner"`).
-- **`fill-credit` → `fill-boost` Badge variant rename:** The amber-orange badge variant for bonus labels is now `fill-boost` (uses `bg-semantic-boost/16` + `text-on-semantic-boost`). The CSS tokens were correspondingly renamed: `--semantic-credit` → `--semantic-boost`, `--semantic-credit-text` → `--on-semantic-boost`. **Breaking change** for consumers that referenced these by name.
-- **`CreditTicketCard` → `BoostTicketCard` rename:** Component, props (`creditAmount` → `boostAmount`, `creditCurrency` → `boostCurrency`), and badge text (`"Credit: …"` → `"Boost: …"`) all renamed for consistency. The boost badge now uses a leading `Rocket` icon and a trailing `Info` icon (replacing the prior `TicketPlus`). **Breaking change.**
+- **Boost token rename (kept):** `--semantic-credit` → `--semantic-boost` and `--semantic-credit-text` → `--on-semantic-boost`. The boost surface and on-boost text tokens are the current shipped names. **Breaking change** for consumers that referenced the legacy `--semantic-credit*` names directly.
+- **~~`fill-credit` → `fill-boost` Badge variant rename~~ — _not landed_.** The Badge variant for credit/bonus labels is still `fill-credit` (see current v0.16.7 entry above). The intended rename was rolled back during release.
+- **~~`CreditTicketCard` → `BoostTicketCard` rename~~ — _not landed_.** The component is still `CreditTicketCard`. Props remain `badgeIcon`, `badgeLabel`, `badgeValue`, `badgeCurrency`, etc. (see current entry above).
 - **Button `primary-inverse` / `secondary-inverse`:** Now built from the new `bg-primary-inverse` / `text-on-primary-inverse` / `border-primary-inverse` / `text-on-prominent-inverse` tokens. Visually identical to before, but the underlying class names are different.
 - **Toast — action button visual fix:** The toast action button (the inverse-coloured "Undo" pill) now uses `primary-inverse` colouring (white bg + blue text) to match the dark toast surface, instead of the previous `bg-primary` (blue on dark — low hierarchy / wrong surface-context).
 
 ### v0.12.0
-- **New semantic tokens — credit:** _(superseded — see Unreleased above for the `boost` rename)_ `--semantic-credit` (`#F9840F` amber-orange) and `--semantic-credit-text` (`#713813` dark amber) added to both `src/styles.css` and `app/globals.css`. Tailwind utilities: `bg-semantic-credit`, `text-semantic-credit-text`.
-- **Badge — `fill-credit` variant:** _(superseded — now `fill-boost`)_ Variant for credit/bonus labels — `bg-semantic-credit/16` background with `text-semantic-credit-text` foreground. Pair with a `TicketPlus` icon. Badge base class no longer applies `tracking-wide`; letter spacing is default on all badge variants.
-- **New `CreditTicketCard` component:** _(superseded — now `BoostTicketCard`)_ Exported alongside `TicketCard`. Renders the same ticket shell (notches, tear-line, shimmer stub) but with a variable-height card body and an inline `<Badge variant="fill-credit">` below the value for credit/bonus display. Props: `icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `creditAmount` (default `"0.00"`), `creditCurrency` (default `"USDT"`), `compact`.
+- **New semantic tokens — credit/boost:** `--semantic-boost` (`#F9840F` amber-orange) and `--on-semantic-boost` (`#521900` deep amber, updated in v0.16.7 — was `#713813`) live in both `src/styles.css` and `app/globals.css`. Tailwind utilities: `bg-semantic-boost`, `text-on-semantic-boost`, plus `bg-semantic-boost-surface` for the tinted pill background.
+- **Badge — `fill-credit` variant:** Variant for credit/bonus labels — `bg-semantic-boost-surface` background with `text-on-semantic-boost` foreground. Pair with a `Gift` or `TicketPlus` icon. Badge base class no longer applies `tracking-wide`; letter spacing is default on all badge variants. _(Visual updated in v0.16.7 — see entry above.)_
+- **`CreditTicketCard` component:** Exported alongside `TicketCard`. Renders the same ticket shell (notches, tear-line, shimmer stub) but with a variable-height card body and an inline `<Badge variant="fill-credit">` next to or below the value for credit/bonus display. Props include `icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `badgeIcon`, `badgeLabel`, `badgeValue`, `badgeCurrency`, `badgeInfo`, `compact`.
 - **`TicketCard` — `compact` prop:** New boolean prop (default `false`). When `true`, reduces left-content padding from `px-4 gap-4` to `px-2 gap-2` for mobile layouts.
 - **`TicketCard` — welcome-credit props removed:** `welcomeCredit`, `freeCredit` (deprecated alias), `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`, `creditFullWidth`, and the `Progress`-based credit bar have been removed. Use `CreditTicketCard` for the credit use case.
 - **`tracking-wide` / `tracking-widest` removed from several components:** Badge base class, `Link` base class, `PaginationLink`, `CommandShortcut`, `ContextMenuShortcut`, `DropdownMenuShortcut`, and `MenubarShortcut` no longer apply letter-spacing overrides. All render with default tracking.