@trading-game/design-intelligence-layer 0.12.4 → 0.13.1

package/README.md

@@ -149,7 +149,7 @@ npm install react react-dom tailwindcss
 | Table | `Table, TableHeader, TableBody, TableRow, TableHead, TableCell` |
 | Tabs | `Tabs, TabsList, TabsTrigger, TabsContent` |
 | Textarea | `Textarea` |
-| Ticket Card | `TicketCard`, `CreditTicketCard` |
+| Ticket Card | `TicketCard`, `BoostTicketCard` |
 | Toast | `Toaster` |
 | Toggle | `Toggle, toggleVariants` |
 | Toggle Group | `ToggleGroup, ToggleGroupItem` |
@@ -220,7 +220,7 @@ 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" />    // Orange tint
-<Badge variant="fill-credit" />     // Amber-orange tint — credit/bonus labels (pair with TicketPlus icon)
+<Badge variant="fill-boost" />      // Amber-orange tint — boost/bonus labels (pair with a Rocket icon)
 
 // Outline (black border, secondary-hover on hover)
 <Badge variant="outline" />
@@ -288,6 +288,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | Tailwind class | CSS variable | Value | Usage |
 |---|---|---|---|
 | `bg-prominent` | `--prominent` | `#FFFFFF` | Page background |
+| `bg-prominent-inverse` | `--prominent-inverse` | `#000000` | Dark surface for use on light pages (e.g. toasts) |
 | `bg-card` | `--card` | `#FFFFFF` | Card/panel surface |
 | `bg-popover` | `--popover` | `#FFFFFF` | Popover/dropdown surface |
 | `bg-subtle` | `--subtle` | `#F5F5F5` | Subtle tinted surface |
@@ -296,24 +297,33 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `bg-tabs-active` | `--tabs-active` | `#FFFFFF` | Active / selected tab pill |
 | `bg-primary` | `--primary` | `#2323FF` | Brand blue — CTAs |
 | `bg-primary-hover` | `--primary-hover` | `#0B0BD2` | Primary button hover (darker blue) |
+| `bg-primary-inverse` | `--primary-inverse` | `#FFFFFF` | Inverted primary surface — white bg for use on dark/coloured areas |
 | `bg-secondary-hover` | `--secondary-hover` | `#EEEEEE` | Outline/secondary hover (light grey) |
 | `bg-semantic-win` | `--semantic-win` | green | Profit / positive state |
 | `bg-semantic-loss` | `--semantic-loss` | red | Loss / negative state |
-| `bg-semantic-credit` | `--semantic-credit` | `#F9840F` amber-orange | Credit / bonus badge background |
+| `bg-semantic-boost` | `--semantic-boost` | `#F9840F` amber-orange | Boost / bonus badge background |
 
 ### Text tokens
 
+> **Naming convention:** every surface (bg) token has a paired `text-on-<surface>` foreground (text/icon) token. Always use the pair together — `bg-primary` + `text-on-primary`, `bg-semantic-win` + `text-on-semantic-win`, etc. — for guaranteed legibility regardless of theme.
+
 | Tailwind class | Value | Usage |
 |---|---|---|
-| `text-on-prominent` | `#000000` | Primary text on light backgrounds |
-| `text-on-prominent-static-inverse` | `#FFFFFF` | Always white — for text on dark/primary backgrounds |
-| `text-on-subtle` | mid grey | Secondary / supporting text |
+| `text-on-prominent` | `#000000` | Text on `bg-prominent` (default body text on light surfaces) |
+| `text-on-prominent-inverse` | `#FFFFFF` | Text on `bg-prominent-inverse` (e.g. toast title/description) |
+| `text-on-subtle` | mid grey | Text on `bg-subtle` (secondary / supporting text) |
 | `text-on-disabled` | `#BBBBBB` | Disabled / inactive text |
-
-| `text-primary` | `#2323FF` | Brand blue inline text |
-| `text-semantic-win` | green | Profit / positive text |
-| `text-semantic-loss` | red | Loss / negative text |
-| `text-semantic-credit-text` | `#713813` dark amber | Credit / bonus badge foreground |
+| `text-on-primary` | `#FFFFFF` | Text on `bg-primary` (e.g. primary button label, tooltip text) |
+| `text-on-primary-inverse` | `#2323FF` | Text on `bg-primary-inverse` (e.g. primary-inverse button label) |
+| `text-on-semantic-win` | `#FFFFFF` | Text on `bg-semantic-win` (e.g. success badge label) |
+| `text-on-semantic-loss` | `#FFFFFF` | Text on `bg-semantic-loss` (e.g. fail badge label) |
+| `text-on-semantic-warning` | `#FFFFFF` | Text on `bg-semantic-warning` (e.g. warning badge label) |
+| `text-on-semantic-boost` | `#713813` dark amber | Text on `bg-semantic-boost` (e.g. boost badge label) |
+| `text-primary` | `#2323FF` | Brand blue inline text (use as a foreground over neutral surfaces) |
+| `text-semantic-win` | green | Profit / positive inline text |
+| `text-semantic-loss` | red | Loss / negative inline text |
+
+> **Deprecated:** `text-on-prominent-static-inverse` and the matching `--on-prominent-static-inverse` CSS variable are still defined for backwards-compat with external code that references them via raw `var()`. Internal components no longer use them. For new code, pick the explicit `text-on-<surface>` paired with the actual background.
 
 ### Border & focus tokens
 
@@ -514,7 +524,7 @@ See node_modules/@trading-game/design-intelligence-layer/README.md for complete
 |---|---|---|
 | `bg-gray-100` | `bg-subtle` | Raw Tailwind palette — use tokens |
 | `bg-white` | `bg-prominent` or `bg-card` | Not a semantic token |
-| `text-white` | `text-on-prominent-static-inverse` | Use the semantic inverse token |
+| `text-white` | `text-on-<surface>` (e.g. `text-on-primary`, `text-on-prominent-inverse`, `text-on-semantic-win`) | Pick the paired foreground for the actual background |
 | `text-black` | `text-on-prominent` | Not a semantic token |
 | `text-gray-400` | `text-on-disabled` | Use the disabled text token |
 | `bg-black/50` | `bg-overlay` | Overlay has its own token |
@@ -585,10 +595,26 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
+### Unreleased
+- **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
+  - `--on-primary-inverse` (blue) / `text-on-primary-inverse` — paired with `bg-primary-inverse`
+  - `--prominent-inverse` (black) / `bg-prominent-inverse` — dark surface for use on light pages (e.g. toasts)
+  - `--on-prominent-inverse` (white) / `text-on-prominent-inverse` — paired with `bg-prominent-inverse`
+  - `--on-semantic-win` / `--on-semantic-loss` / `--on-semantic-warning` (all white) and `--on-semantic-boost` (dark amber) — paired with the matching `bg-semantic-*` surfaces.
+- **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.**
+- **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:** `--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:** New `fill-credit` 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:** 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:** _(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`.
 - **`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.

package/dist/index.cjs

@@ -87,6 +87,7 @@ __export(index_exports, {
   AvatarGroupCount: () => AvatarGroupCount,
   AvatarImage: () => AvatarImage,
   Badge: () => Badge,
+  BoostTicketCard: () => BoostTicketCard,
   Breadcrumb: () => Breadcrumb,
   BreadcrumbEllipsis: () => BreadcrumbEllipsis,
   BreadcrumbItem: () => BreadcrumbItem,
@@ -158,7 +159,6 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
-  CreditTicketCard: () => CreditTicketCard,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -374,6 +374,7 @@ __export(index_exports, {
   navigationButtonVariants: () => navigationButtonVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
   tabsListVariants: () => tabsListVariants,
+  toast: () => import_sonner.toast,
   toggleVariants: () => toggleVariants,
   useComboboxAnchor: () => useComboboxAnchor,
   useDirection: () => useDirection,
@@ -579,12 +580,12 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
     variants: {
       variant: {
         // Primary brand blue (#2323FF)
-        primary: "bg-primary text-on-prominent-static-inverse hover:bg-primary-hover",
+        primary: "bg-primary text-on-primary hover:bg-primary-hover",
         // Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
-        "primary-inverse": "bg-on-prominent-static-inverse text-primary hover:bg-on-prominent-static-inverse/80",
+        "primary-inverse": "bg-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
         secondary: "bg-transparent border-[1.5px] border-border-prominent text-on-prominent hover:bg-secondary-hover",
         // Secondary Inverse — white border + white text; for use on dark/coloured surfaces
-        "secondary-inverse": "bg-transparent border-[1.5px] border-on-prominent-static-inverse text-on-prominent-static-inverse hover:bg-on-prominent-static-inverse/10",
+        "secondary-inverse": "bg-transparent border-[1.5px] border-primary-inverse text-on-prominent-inverse hover:bg-primary-inverse/10",
         tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]"
       },
       size: {
@@ -894,7 +895,7 @@ function AvatarBadge(_a) {
     __spreadValues({
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-prominent-static-inverse ring-2 ring-prominent select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-primary ring-2 ring-prominent select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -945,16 +946,16 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
     variants: {
       variant: {
         // Default (solid)
-        default: "bg-primary text-on-prominent-static-inverse [a&]:hover:bg-primary/90",
-        "default-success": "bg-semantic-win text-on-prominent-static-inverse [a&]:hover:bg-semantic-win/90",
-        "default-fail": "bg-semantic-loss text-on-prominent-static-inverse [a&]:hover:bg-semantic-loss/90",
-        "default-warning": "bg-semantic-warning text-on-prominent-static-inverse [a&]:hover:bg-semantic-warning/90",
+        default: "bg-primary text-on-primary [a&]:hover:bg-primary/90",
+        "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",
         // Fill (tint)
         fill: "bg-primary/10 border-transparent text-primary",
         "fill-success": "bg-semantic-win/10 border-transparent text-semantic-win",
         "fill-fail": "bg-semantic-loss/10 border-transparent text-semantic-loss",
         "fill-warning": "bg-semantic-warning/10 border-transparent text-semantic-warning",
-        "fill-credit": "bg-semantic-credit/16 border-transparent text-semantic-credit-text !text-xs !font-semibold",
+        "fill-boost": "bg-semantic-boost/16 border-transparent text-on-semantic-boost !text-xs !font-semibold",
         // Ghost (transparent)
         ghost: "bg-transparent border-transparent text-primary [a&]:hover:bg-secondary-hover [a&]:hover:text-primary",
         "ghost-success": "bg-transparent border-transparent text-semantic-win [a&]:hover:bg-semantic-win/10 [a&]:hover:text-semantic-win",
@@ -1836,7 +1837,7 @@ function Checkbox(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn(
-        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-prominent-static-inverse",
+        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-primary",
         className
       )
     }, props), {
@@ -1894,7 +1895,7 @@ var inputVariants = (0, import_class_variance_authority4.cva)(
   [
     "w-full min-w-0 rounded-sm border border-border-subtle bg-white/5",
     "text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none",
-    "selection:bg-primary selection:text-on-prominent-static-inverse",
+    "selection:bg-primary selection:text-on-primary",
     "file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-on-prominent",
     "placeholder:text-on-subtle",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
@@ -4449,7 +4450,7 @@ function NativeSelect(_a) {
             "data-slot": "native-select",
             "data-size": size,
             className: cn(
-              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
+              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-primary placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
               "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
               className
             )
@@ -5370,7 +5371,7 @@ function SheetDescription(_a) {
 }
 
 // components/ui/sidebar.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_lucide_react20 = require("lucide-react");
 var import_radix_ui30 = require("radix-ui");
@@ -5406,8 +5407,10 @@ function Skeleton(_a) {
 }
 
 // components/ui/tooltip.tsx
+var React9 = __toESM(require("react"), 1);
 var import_radix_ui29 = require("radix-ui");
 var import_jsx_runtime49 = require("react/jsx-runtime");
+var TooltipModeContext = React9.createContext("tooltip");
 function TooltipProvider(_a) {
   var _b = _a, {
     delayDuration = 0
@@ -5423,36 +5426,71 @@ function TooltipProvider(_a) {
   );
 }
 function Tooltip2(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Root, __spreadValues({ "data-slot": "tooltip" }, props));
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  const isMobile = useIsMobile();
+  const mode = isMobile ? "drawer" : "tooltip";
+  if (mode === "drawer") {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipModeContext.Provider, { value: "drawer", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Drawer, { children }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipModeContext.Provider, { value: "tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Root, __spreadProps(__spreadValues({ "data-slot": "tooltip" }, props), { children })) });
 }
 function TooltipTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  const mode = React9.useContext(TooltipModeContext);
+  if (mode === "drawer") {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DrawerTrigger, __spreadProps(__spreadValues({ "data-slot": "tooltip-trigger" }, props), { children }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Trigger, __spreadProps(__spreadValues({ "data-slot": "tooltip-trigger" }, props), { children }));
 }
 function TooltipContent(_a) {
   var _b = _a, {
     className,
     sideOffset = 6,
+    variant = "default",
+    title = "Title",
+    closeLabel = "Label",
     children
   } = _b, props = __objRest(_b, [
     "className",
     "sideOffset",
+    "variant",
+    "title",
+    "closeLabel",
     "children"
   ]);
+  const mode = React9.useContext(TooltipModeContext);
+  if (mode === "drawer") {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DrawerContent, { "data-slot": "tooltip-content", "data-variant": variant, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DrawerTitle, { className: "px-5 pt-2 text-left text-base font-bold text-on-prominent", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("px-5 pt-2 pb-2 text-sm font-medium text-on-prominent", className), children }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DrawerFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DrawerClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { variant: "primary", size: "md", children: closeLabel }) }) })
+    ] });
+  }
+  const surfaceClasses = variant === "inverse" ? "bg-prominent text-on-prominent shadow-sm" : "bg-primary text-on-primary";
+  const arrowClasses = variant === "inverse" ? "fill-prominent" : "fill-primary";
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     import_radix_ui29.Tooltip.Content,
     __spreadProps(__spreadValues({
       "data-slot": "tooltip-content",
+      "data-variant": variant,
       sideOffset,
       className: cn(
-        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary border-0 px-3 py-1.5 text-xs font-medium text-balance text-on-prominent-static-inverse fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md border-0 px-3 py-1.5 text-sm font-medium text-balance fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        surfaceClasses,
         className
       )
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Arrow, { className: "fill-primary" })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Arrow, { className: arrowClasses })
       ]
     })
   ) });
@@ -5466,9 +5504,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React9.createContext(null);
+var SidebarContext = React10.createContext(null);
 function useSidebar() {
-  const context = React9.useContext(SidebarContext);
+  const context = React10.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -5491,10 +5529,10 @@ function SidebarProvider(_a) {
     "children"
   ]);
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React9.useState(false);
-  const [_open, _setOpen] = React9.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React10.useState(false);
+  const [_open, _setOpen] = React10.useState(defaultOpen);
   const open = openProp != null ? openProp : _open;
-  const setOpen = React9.useCallback(
+  const setOpen = React10.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -5506,10 +5544,10 @@ function SidebarProvider(_a) {
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React9.useCallback(() => {
+  const toggleSidebar = React10.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -5520,7 +5558,7 @@ function SidebarProvider(_a) {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React9.useMemo(
+  const contextValue = React10.useMemo(
     () => ({
       state,
       open,
@@ -6098,7 +6136,7 @@ function SidebarMenuSubButton(_a) {
 }
 
 // components/ui/slider.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_radix_ui31 = require("radix-ui");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function Slider(_a) {
@@ -6115,7 +6153,7 @@ function Slider(_a) {
     "min",
     "max"
   ]);
-  const _values = React10.useMemo(
+  const _values = React11.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -6164,7 +6202,7 @@ function Slider(_a) {
   );
 }
 
-// components/ui/sonner.tsx
+// components/ui/toast.tsx
 var import_lucide_react21 = require("lucide-react");
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
@@ -6190,15 +6228,15 @@ var Toaster = (_a) => {
       },
       toastOptions: {
         classNames: {
-          toast: "!bg-[var(--on-prominent)] !border-none",
-          title: "!text-[var(--on-prominent-static-inverse)] !font-display !font-bold",
-          description: "!text-[var(--on-prominent-static-inverse)] !opacity-60 !font-body",
-          actionButton: "!bg-[var(--primary)] !text-[var(--on-prominent-static-inverse)]"
+          toast: "!bg-[var(--prominent-inverse)] !border-none",
+          title: "!text-[var(--on-prominent-inverse)] !font-display !font-bold",
+          description: "!text-[var(--on-prominent-inverse)] !opacity-60 !font-body",
+          actionButton: "!bg-[var(--primary-inverse)] !text-[var(--on-primary-inverse)]"
         }
       },
       style: {
-        "--normal-bg": "var(--on-prominent)",
-        "--normal-text": "var(--on-prominent-static-inverse)",
+        "--normal-bg": "var(--prominent-inverse)",
+        "--normal-text": "var(--on-prominent-inverse)",
         "--normal-border": "transparent",
         "--border-radius": "var(--radius)"
       }
@@ -6207,7 +6245,7 @@ var Toaster = (_a) => {
 };
 
 // components/ui/stepper.tsx
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_lucide_react22 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function clamp(value, min, max) {
@@ -6243,16 +6281,16 @@ function Stepper({
 }) {
   const { container, buttonSize, iconClass } = stepperSizeConfig[size];
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React11.useState(
+  const [internalValue, setInternalValue] = React12.useState(
     clamp(defaultValue, min, max)
   );
   const currentValue = isControlled ? controlledValue : internalValue;
   const decimalPlaces = getDecimalPlaces(step);
-  const [displayString, setDisplayString] = React11.useState(
+  const [displayString, setDisplayString] = React12.useState(
     formatValue(currentValue, decimalPlaces)
   );
-  const [isFocused, setIsFocused] = React11.useState(false);
-  React11.useEffect(() => {
+  const [isFocused, setIsFocused] = React12.useState(false);
+  React12.useEffect(() => {
     if (!isFocused) {
       setDisplayString(formatValue(currentValue, decimalPlaces));
     }
@@ -6674,14 +6712,14 @@ function TicketCard({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-prominent-static-inverse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-primary", children: stubLabel })
         ]
       }
     )
   ] }) });
 }
-function CreditTicketCard({
+function BoostTicketCard({
   className,
   icon,
   label,
@@ -6690,8 +6728,9 @@ function CreditTicketCard({
   stubLabel,
   onStubClick,
   stubDisabled = false,
-  creditAmount = "0.00",
-  creditCurrency = "USDT",
+  boostAmount = "0.00",
+  boostCurrency = "USDT",
+  boostInfo,
   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: [
@@ -6708,12 +6747,24 @@ function CreditTicketCard({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.TicketPlus, { className: "!size-3.5", strokeWidth: 2 }),
-          "Credit: ",
-          creditAmount,
+        /* @__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,
           " ",
-          creditCurrency
+          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: "top", variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
+          ] }) })
         ] })
       ] })
     ] }),
@@ -6754,8 +6805,8 @@ function CreditTicketCard({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-prominent-static-inverse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-primary", children: stubLabel })
         ]
       }
     )
@@ -6807,10 +6858,10 @@ function Toggle(_a) {
 }
 
 // components/ui/toggle-group.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_radix_ui35 = require("radix-ui");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var ToggleGroupContext = React12.createContext({
+var ToggleGroupContext = React13.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -6858,7 +6909,7 @@ function ToggleGroupItem(_a) {
     "variant",
     "size"
   ]);
-  const context = React12.useContext(ToggleGroupContext);
+  const context = React13.useContext(ToggleGroupContext);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     import_radix_ui35.ToggleGroup.Item,
     __spreadProps(__spreadValues({
@@ -6909,6 +6960,7 @@ function ToggleGroupItem(_a) {
   AvatarGroupCount,
   AvatarImage,
   Badge,
+  BoostTicketCard,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -6980,7 +7032,6 @@ function ToggleGroupItem(_a) {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-  CreditTicketCard,
   Dialog,
   DialogClose,
   DialogContent,
@@ -7196,6 +7247,7 @@ function ToggleGroupItem(_a) {
   navigationButtonVariants,
   navigationMenuTriggerStyle,
   tabsListVariants,
+  toast,
   toggleVariants,
   useComboboxAnchor,
   useDirection,