@trading-game/design-intelligence-layer 0.13.2 → 0.14.0

package/README.md

@@ -165,8 +165,9 @@ Blocks are pre-composed UI patterns built from design system primitives. They ar
 |---|---|---|
 | 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. |
+| Sheet Open Positions | Active (Rise-Fall, Swipe, Box-O, Digits), Empty, Edge cases (1 item, 30 items) | Right-side sheet (desktop) / bottom drawer (mobile) listing open trading positions. Each row shows bet name + stake (left) and PnL + market·duration (right). The drawer hugs its content with `max-h-[80vh]`; long lists scroll internally with header and footer pinned. |
 | Header navigation | — | Product app top header bar. Back navigation button left, account balance + Demo badge centre, history and sound action buttons right. |
+| Result | Win · continuing, Loss · continuing, End of demo, Out of balance, On a roll | Fixed-width (320 px) end-of-round result card. Thumb-up/down SVG with subtle radial halo + idle motion; `Bust.` / `Called it.` title becomes `You won!` / `You lost!`; amount headline; contract + duration `standard` Badge pills; primary + (optionally) secondary CTA. Out-of-balance and on-a-roll are dialog-style variants with no icon — just title + body + 2 CTAs. |
 
 ---
 
@@ -215,6 +216,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 +599,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

package/dist/index.cjs

@@ -947,6 +947,8 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
       variant: {
         // Default (solid)
         default: "bg-primary text-on-primary [a&]:hover:bg-primary/90",
+        // Standard (neutral chip — for non-status meta like contract type, duration)
+        standard: "bg-subtle text-on-prominent [a&]:hover:bg-subtle/80",
         "default-success": "bg-semantic-win text-on-semantic-win [a&]:hover:bg-semantic-win/90",
         "default-fail": "bg-semantic-loss text-on-semantic-loss [a&]:hover:bg-semantic-loss/90",
         "default-warning": "bg-semantic-warning text-on-semantic-warning [a&]:hover:bg-semantic-warning/90",
@@ -6650,6 +6652,18 @@ function TabsContent(_a) {
 // components/ui/ticket-card.tsx
 var import_lucide_react23 = require("lucide-react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
+function formatBalanceValue(raw) {
+  const match = raw.match(/^(\D*)([\d,]+(?:\.\d+)?)(\D*)$/);
+  if (!match) return raw;
+  const [, prefix = "", numericPart, suffix = ""] = match;
+  const parsed = Number.parseFloat(numericPart.replace(/,/g, ""));
+  if (Number.isNaN(parsed)) return raw;
+  const formatted = parsed.toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  return `${prefix}${formatted}${suffix}`;
+}
 function TicketCard({
   className,
   icon,
@@ -6667,7 +6681,7 @@ function TicketCard({
       /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex h-11 flex-col justify-center gap-1 whitespace-nowrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: formatBalanceValue(value) }),
           currency && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
             " ",
             /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
@@ -6733,43 +6747,67 @@ function BoostTicketCard({
   boostInfo,
   boostInfoSide = "top",
   boostInfoAlign = "center",
+  boostInfoTitle,
+  boostInfoCloseLabel,
   compact = false
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative flex w-full items-stretch justify-between rounded-sm bg-subtle", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex flex-1 items-center overflow-hidden py-4", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-2 whitespace-nowrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
-            currency && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
-            ] })
+    (() => {
+      const boostBadge = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-boost", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Rocket, { className: "!size-3.5", strokeWidth: 2 }),
+        "Boost: ",
+        boostAmount,
+        " ",
+        boostCurrency,
+        boostInfo && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Tooltip2, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "More info about boost",
+              className: "inline-flex shrink-0 items-center justify-center rounded-full text-on-semantic-boost outline-none transition-opacity hover:opacity-70 focus-visible:opacity-70 focus-visible:ring-2 focus-visible:ring-on-semantic-boost/40 cursor-pointer",
+              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Info, { className: "!size-3.5", strokeWidth: 2 })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipContent, { side: boostInfoSide, align: boostInfoAlign, title: boostInfoTitle, closeLabel: boostInfoCloseLabel, variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
+        ] }) })
+      ] });
+      const labelValue = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: formatBalanceValue(value) }),
+          currency && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-boost", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Rocket, { className: "!size-3.5", strokeWidth: 2 }),
-          "Boost: ",
-          boostAmount,
-          " ",
-          boostCurrency,
-          boostInfo && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Tooltip2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              "button",
-              {
-                type: "button",
-                "aria-label": "More info about boost",
-                className: "inline-flex shrink-0 items-center justify-center rounded-full text-on-semantic-boost outline-none transition-opacity hover:opacity-70 focus-visible:opacity-70 focus-visible:ring-2 focus-visible:ring-on-semantic-boost/40 cursor-pointer",
-                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Info, { className: "!size-3.5", strokeWidth: 2 })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipContent, { side: boostInfoSide, align: boostInfoAlign, variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
-          ] }) })
         ] })
-      ] })
-    ] }),
+      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex flex-1 items-center overflow-hidden py-4", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
+        compact ? (
+          /* Mobile / compact: badge stacked under the value */
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-2 whitespace-nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-col gap-1", children: labelValue }),
+            boostBadge
+          ] })
+        ) : (
+          /* Desktop: badge inline next to the value (16px gap = gap-4) */
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-1 whitespace-nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: formatBalanceValue(value) }),
+                currency && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
+                ] })
+              ] }),
+              boostBadge
+            ] })
+          ] })
+        )
+      ] });
+    })(),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[-12px] z-10 size-6 rounded-full bg-prominent" }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] bottom-[-12px] z-10 size-6 rounded-full bg-prominent" }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(