@trading-game/design-intelligence-layer 0.17.1 → 0.17.3

package/README.md

@@ -123,8 +123,8 @@ npm install react react-dom tailwindcss
 | Field | `Field, FieldLabel, FieldDescription, FieldError, FieldGroup` |
 | Form | `Form, FormItem, FormLabel, FormControl, FormField, FormMessage` |
 | Hover Card | `HoverCard, HoverCardTrigger, HoverCardContent` |
-| Input | `Input` |
-| Input Group | `InputGroup, InputGroupAddon, InputGroupButton, InputGroupText` |
+| Input | `Input` — variants: `default` (light surfaces), `inverse` (dark sunken fill + white text, for use on `bg-primary` / brand-coloured surfaces). |
+| Input Group | `InputGroup, InputGroupAddon, InputGroupButton, InputGroupText` — variants: `default`, `inverse` (propagates to nested `InputGroupInput` / `InputGroupAddon` / `InputGroupText` via context). |
 | Input OTP | `InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator` — Variants: OTP 4 digits, OTP 6 digits, OTP 6 split, OTP 8 digits, OTP 6 separated |
 | Item | `Item, ItemMedia, ItemContent, ItemTitle, ItemDescription` |
 | Kbd | `Kbd, KbdGroup` |
@@ -186,11 +186,14 @@ See [`AGENTS.md`](./AGENTS.md#blocks) for full usage examples per block.
 ## Button variants and sizes
 
 ```tsx
-<Button variant="primary" />           // Blue filled — main CTA (light surfaces)
-<Button variant="primary-inverse" />   // White filled + blue text — main CTA on dark/coloured surfaces
-<Button variant="secondary" />         // Black outline — secondary actions (light surfaces)
-<Button variant="secondary-inverse" /> // White outline + white text — secondary actions on dark/coloured surfaces
-<Button variant="tertiary" />          // Text only — minimal (light surfaces)
+<Button variant="primary" />                  // Blue filled — main CTA (light surfaces)
+<Button variant="primary-inverse" />          // White filled + blue text — main CTA on dark/coloured surfaces
+<Button variant="primary-shimmer" />          // Same as `primary` + sweeping diagonal shimmer (headline CTAs that need to draw the eye)
+<Button variant="primary-inverse-shimmer" />  // Same as `primary-inverse` + brand-blue shimmer over the white surface
+<Button variant="secondary" />                // Black outline — secondary actions (light surfaces)
+<Button variant="secondary-inverse" />        // White outline + white text — secondary actions on dark/coloured surfaces
+<Button variant="tertiary" />                 // Text only — minimal (light surfaces)
+<Button variant="tertiary-inverse" />         // Text only + white text — minimal on dark/coloured surfaces
 
 // Sizes
 <Button size="lg" />      // 48px height (default)
@@ -236,7 +239,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" />    // Yellow tint — status/warning
-<Badge variant="fill-credit" />     // Deep peach (#FDCA8A) + bold deep-amber (#521900) text — Welcome credit / bonus labels
+<Badge variant="fill-credit" />     // Frosted-glass surface (`--semantic-boost-surface` = `oklch(1 0 0 / 0.22)`) + white text + `backdrop-blur-md` — Welcome credit / bonus chip. Only readable on coloured surfaces (e.g. a brand-blue hero card); blends into white surfaces by design.
 <Badge variant="fill-demo" />       // Peach surface + red-orange text — demo/test-mode flags
 
 // Outline (black border, secondary-hover on hover)
@@ -712,6 +715,21 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 ## Changelog
 
 ### Unreleased
+- **Button — new `tertiary-inverse` variant:** mirror of `tertiary` (transparent + text-only) but recoloured for use on dark / brand-coloured surfaces — `bg-transparent text-on-primary hover:bg-on-primary/[0.10]`. Pair with any size including `icon-*` (icon-only square). Same `variant` × `size` orthogonality as every other Button variant.
+- **Input — new `variant="inverse"`:** sunken dark fill + white text recipe for use on `bg-primary` (and other coloured surfaces) where the default frosted-white fill blends into the chrome. 25 %-white border, `bg-input-inverse-surface` fill (35 % black), white text, 45 %-white placeholder, white selection. On focus the border solidifies to 100 % white with a 40 %-white ring. `variant="default"` (the existing look) is unchanged — no existing call site moves visually.
+- **InputGroup — new `variant="inverse"`:** mirrors the Input variant. A new `InputGroupVariantContext` propagates the variant down so `InputGroupInput`, `InputGroupAddon`, and `InputGroupText` all pick up the inverse styling automatically (addon icons / suffix text swap to `text-on-primary/70`). Override per-instance via `className` (e.g. `border-transparent` for the borderless wallet-address treatment).
+- **New token — `--input-inverse-surface`:** added in both `src/styles.css` and `app/globals.css` (component-token layer, references the existing primitive palette). Mapped via `@theme inline` to `--color-input-inverse-surface` so it's exposed as `bg-input-inverse-surface` to consumers. Tune the dark-fill shade once, propagates everywhere.
+- **Form-control consistency pass — radius unified to `rounded-xs` (4 px):** `Input`, `InputGroup`, and `Select` (trigger) moved from `rounded-sm` (6 px) → `rounded-xs` (4 px), matching `Button` across every size. Form controls placed in a row (`<Input>` + `<Select>` + `<Button>`) now share identical heights *and* identical corner radii.
+- **Form-control consistency pass — resting shadows removed:** `Input` and `InputGroup` dropped their `shadow-xs` resting drop-shadow so they sit flat alongside the shadowless `Select` and `Button`. Overlay shadows (Dialog, Popover, Tooltip, etc.) are untouched — only the skeuomorphic raised-surface shadow on form inputs is gone.
+- **InputGroup — addon-side padding no longer mirrors:** previously, an inline-end addon would also reduce the input's *left* padding to `pl-2` "for visual symmetry," squeezing text to the field's left edge. Now only the side an addon is attached to reduces its inset; the opposite side keeps the natural Input `pl-3` / `pr-3` (12 px). Fixes the suffix-text input ("0.00 ... USD") looking flush-left compared to the prefix-icon row.
+- **Component playground — Button section split into two columns:** the showcase Button page now renders default-surface variants on the left and `bg-primary`-surface inverse variants on the right, side-by-side, with row-by-row alignment so each (regular ↔ inverse) pair sits on the same y-line. Stacks vertically below `lg:` (1024 px) with the inverse half dropping below the default half. Inverse rows previously sat in individual `bg-primary` wrappers — now a single shared blue panel.
+- **Component playground — Input / InputGroup inverse showcases:** both sections gain a `variant="inverse"` row demonstrating the new variant on `bg-primary`. Plus a standalone `/input-on-blue` route with longer-form exploration (default vs inverse; borderless wallet-address mock; real-world sign-in row).
+- **Component playground — `/tertiary-inverse` route:** standalone page demonstrating the new Button `tertiary-inverse` variant at every `icon-*` size and labeled size on a brand-blue surface.
+- **OpenPositionsBlock — double-divider fix:** the block was rendering both its own manual `<div className="h-px ...">` between rows AND the new ItemGroup `::after` auto-divider, producing two hairlines per gap. The manual divs are removed; the ItemGroup auto-divider now handles spacing. _Migration note for consumers:_ if you wrap your own `<Item>` rows in an `<ItemGroup>` and were manually injecting dividers between them, drop the manual dividers — or pass `divider={false}` on the `<ItemGroup>` to opt out and keep your own. The same cleanup landed in the demo app's Sheet "List" showcase.
+- **Button — two new shimmer variants for headline CTAs:** `primary-shimmer` and `primary-inverse-shimmer`. Same surface tokens as their non-shimmer cousins, plus `relative overflow-hidden` to anchor an absolutely-positioned shimmer overlay. The overlay sweeps a diagonal (`110deg`) gradient driven by a new `button-shimmer` keyframe — two quick back-to-back sweeps every cycle, then a ~3 s pause off-screen, so it reads as an occasional glint rather than a continuous loader. Peak opacity is tuned per-surface (white at 32 % over brand blue; brand-blue at 22 % over white) and falls off into transparent edges. Suppressed automatically when the button is `loading` or `disabled`.
+- **Button — `button-shimmer` keyframe:** new `@keyframes button-shimmer` in both `src/styles.css` and `app/globals.css`. Pattern: `0%, 10% → 30%, 100%` translateX, with an opacity fade at the seam between the two sweeps so the reset between flashes is invisible.
+- **Badge — `fill-credit` is now a frosted glass chip:** `bg-semantic-boost-surface` was repurposed from the old peach (`#FDCA8A`) to `oklch(1 0 0 / 0.22)` — a translucent white surface that composes over whatever sits behind it. Paired with `backdrop-blur-md` and `text-on-primary` (white). Custom `!font-bold` / `!text-xs` overrides removed — the variant now only sets surface tokens, so font weight / size match every other badge (`font-semibold`, `text-xs` from the base). Border override removed too. The variant is intentionally invisible on white surfaces — designed to live on coloured surfaces (e.g. a brand-blue hero card / wallet card), matching the wallet mock's `.c-hero-wc`.
+- **Item — auto-divider in `ItemGroup`:** new `divider` prop (default `true`) adds a 1 px `bg-border-subtle` divider between consecutive default-variant `Item`s. The line is drawn via `::after` (not a border on the item itself), sitting in a 4 px `gap-1` between items with `inset-x-4` so it aligns with the item content padding. The last item's `::after` is suppressed; non-default variants (`outline`, `muted`) are untouched. Pass `divider={false}` to opt out for flush items or manual `<ItemSeparator />` usage.
 - **Tooltip — black surface by default:** `variant="default"` switched from brand-blue to black (`bg-prominent-inverse` + `text-on-prominent-inverse`). The arrow follows. `variant="inverse"` (white) is unchanged. Default primitive now bakes in `max-w-xs whitespace-normal`, so consumers no longer pass these classes.
 - **Tooltip — keyboard-shortcut breathing room:** when the tooltip contains a `Kbd` (detected via `:has([data-slot=kbd])`), padding bumps to `px-3.5 py-2` and child elements get `space-y-1.5` so the title / kbd-row pair doesn't crowd.
 - **Switch — pill + white circle knob:** track switched from `rounded-[6px]` to `rounded-full`, thumb from `rounded-[3px]` to `rounded-full`. Thumb is always `bg-prominent` (white) in both states. Checked track: `bg-primary`. Unchecked track: `bg-input`. No API change.

package/dist/index.cjs

@@ -530,10 +530,20 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         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-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
+        // Primary Shimmer — same surface as `primary` plus a sweeping
+        // white shimmer overlay (same animation as the TicketCard deposit
+        // stub). Use for headline CTAs that need to draw the eye.
+        "primary-shimmer": "relative overflow-hidden bg-primary text-on-primary hover:bg-primary-hover",
+        // Primary Inverse Shimmer — same surface as `primary-inverse` plus
+        // a sweeping brand-blue shimmer (white shimmer would be invisible
+        // on the white surface). For headline CTAs on dark/coloured pages.
+        "primary-inverse-shimmer": "relative overflow-hidden 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-primary-inverse text-on-prominent-inverse hover:bg-primary-inverse/10",
-        tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]"
+        tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]",
+        // Tertiary Inverse — transparent + white text/icon; for use on dark/coloured surfaces
+        "tertiary-inverse": "bg-transparent text-on-primary hover:bg-on-primary/[0.10]"
       },
       size: {
         lg: "h-12 w-fit gap-3 rounded-xs px-6 py-[14px] text-base [&_svg:not([class*='size-'])]:size-4",
@@ -564,6 +574,13 @@ var spinnerSizeMap = {
   "icon-sm": "size-3.5",
   "icon-xs": "size-3"
 };
+var shimmerGradients = {
+  // 110° tilts the bright band forward so the sweep reads as a diagonal
+  // shine. Three stops around 50% (soft → mid → soft) shape the highlight
+  // like a polished-metal gleam without going too bright at the peak.
+  "primary-shimmer": "linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.10) 60%, transparent 80%)",
+  "primary-inverse-shimmer": "linear-gradient(110deg, transparent 20%, rgba(35,35,255,0.07) 40%, rgba(35,35,255,0.14) 50%, rgba(35,35,255,0.07) 60%, transparent 80%)"
+};
 function Button(_a) {
   var _b = _a, {
     className,
@@ -581,7 +598,7 @@ function Button(_a) {
     "children"
   ]);
   const Comp = asChild ? import_radix_ui2.Slot.Root : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Comp,
     __spreadProps(__spreadValues({
       "data-slot": "button",
@@ -594,10 +611,20 @@ function Button(_a) {
       ),
       "aria-busy": loading || void 0
     }, props), {
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
-      ] }) : children
+      children: [
+        variant && shimmerGradients[variant] && !loading && !props.disabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 [animation:button-shimmer_4s_linear_infinite]",
+            style: { background: shimmerGradients[variant] }
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
+        ] }) : children
+      ]
     })
   );
 }
@@ -1128,7 +1155,7 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
         "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-boost-surface border-transparent text-on-semantic-boost !text-xs !font-bold",
+        "fill-credit": "bg-semantic-boost-surface backdrop-blur-md text-on-primary",
         // Demo / test-mode flag — opaque light-peach surface + red-orange text.
         // Uses --semantic-demo-surface (a solid color-mix of demo @ 10% with white)
         // so the badge looks identical on any background.
@@ -1180,7 +1207,7 @@ var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SURFACE_CLASSES = "w-full rounded-sm border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
 function IconBadge({ glyph }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xs bg-primary text-on-primary", children: glyph });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: glyph });
 }
 function Banner(_a) {
   var _b = _a, {
@@ -2276,16 +2303,31 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var inputVariants = (0, import_class_variance_authority5.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-primary",
-    "file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-on-prominent",
-    "placeholder:text-on-subtle",
+    "w-full min-w-0 rounded-xs border font-body transition-[color,box-shadow] outline-none",
+    "file:inline-flex file:border-0 file:bg-transparent file:font-medium",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-    "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08]"
+    "focus-visible:ring-[3px]"
   ].join(" "),
   {
     variants: {
+      // `default` is the light-surface treatment; `inverse` is the sunken
+      // dark-fill treatment for coloured surfaces (e.g. bg-primary).
+      variant: {
+        default: [
+          "border-border-subtle bg-white/5 text-on-prominent",
+          "file:text-on-prominent",
+          "placeholder:text-on-subtle",
+          "selection:bg-primary selection:text-on-primary",
+          "focus-visible:border-primary focus-visible:ring-primary/[0.08]"
+        ].join(" "),
+        inverse: [
+          "border-on-primary/25 bg-input-inverse-surface text-on-primary",
+          "file:text-on-primary",
+          "placeholder:text-on-primary/45",
+          "selection:bg-on-primary selection:text-primary",
+          "focus-visible:border-on-primary focus-visible:ring-on-primary/40"
+        ].join(" ")
+      },
       size: {
         sm: "h-8 px-3 py-1 text-xs file:h-6 file:text-xs",
         md: "h-10 px-3 py-1 text-sm file:h-7 file:text-sm",
@@ -2293,6 +2335,7 @@ var inputVariants = (0, import_class_variance_authority5.cva)(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -2301,10 +2344,12 @@ function Input(_a) {
   var _b = _a, {
     className,
     type,
+    variant = "default",
     size = "md"
   } = _b, props = __objRest(_b, [
     "className",
     "type",
+    "variant",
     "size"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -2312,8 +2357,9 @@ function Input(_a) {
     __spreadValues({
       type,
       "data-slot": "input",
+      "data-variant": variant,
       "data-size": size,
-      className: cn(inputVariants({ size }), className)
+      className: cn(inputVariants({ variant, size }), className)
     }, props)
   );
 }
@@ -2337,24 +2383,36 @@ function Textarea(_a) {
 // components/ui/input-group.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var InputGroupSizeContext = React6.createContext("md");
+var InputGroupVariantContext = React6.createContext("default");
 var inputGroupVariants = (0, import_class_variance_authority6.cva)(
   [
-    "group/input-group relative flex w-full items-center rounded-sm border border-border-subtle bg-white/5",
-    "shadow-xs transition-[color,box-shadow] outline-none min-w-0 has-[>textarea]:h-auto",
-    // Reduce input padding on the addon side, and mirror it on the opposite side for visual symmetry.
+    "group/input-group relative flex w-full items-center rounded-xs border",
+    "transition-[color,box-shadow] outline-none min-w-0 has-[>textarea]:h-auto",
+    // Reduce input padding only on the side an addon is attached to; the
+    // opposite side keeps the natural Input padding (pl-3 / pr-3 = 12 px).
     "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-    "has-[>[data-align=inline-start]]:[&>input]:pr-2",
     "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-    "has-[>[data-align=inline-end]]:[&>input]:pl-2",
     "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
     "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-    // Focus state.
-    "has-[[data-slot=input-group-control]:focus-visible]:border-primary has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-primary/[0.08]",
+    // Focus ring (size; colour comes from the variant).
+    "has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
     // Error state.
     "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20"
   ].join(" "),
   {
     variants: {
+      // `default` is the light-surface treatment; `inverse` is the sunken
+      // dark-fill treatment for coloured surfaces (mirrors `Input`).
+      variant: {
+        default: [
+          "border-border-subtle bg-white/5",
+          "has-[[data-slot=input-group-control]:focus-visible]:border-primary has-[[data-slot=input-group-control]:focus-visible]:ring-primary/[0.08]"
+        ].join(" "),
+        inverse: [
+          "border-on-primary/25 bg-input-inverse-surface",
+          "has-[[data-slot=input-group-control]:focus-visible]:border-on-primary has-[[data-slot=input-group-control]:focus-visible]:ring-on-primary/40"
+        ].join(" ")
+      },
       size: {
         sm: "h-8",
         md: "h-10",
@@ -2362,6 +2420,7 @@ var inputGroupVariants = (0, import_class_variance_authority6.cva)(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -2369,24 +2428,35 @@ var inputGroupVariants = (0, import_class_variance_authority6.cva)(
 function InputGroup(_a) {
   var _b = _a, {
     className,
+    variant = "default",
     size = "md"
   } = _b, props = __objRest(_b, [
     "className",
+    "variant",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "div",
-    __spreadValues({
-      "data-slot": "input-group",
-      "data-size": size,
-      role: "group",
-      className: cn(inputGroupVariants({ size }), className)
-    }, props)
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    InputGroupVariantContext.Provider,
+    {
+      value: variant,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        __spreadValues({
+          "data-slot": "input-group",
+          "data-variant": variant,
+          "data-size": size,
+          role: "group",
+          className: cn(inputGroupVariants({ variant, size }), className)
+        }, props)
+      ) })
+    }
+  );
 }
 var inputGroupAddonVariants = (0, import_class_variance_authority6.cva)(
   [
     "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 font-medium text-on-subtle select-none",
+    // Swap addon text/icon colour when inside an inverse group.
+    "group-data-[variant=inverse]/input-group:text-on-primary/70",
     "group-data-[disabled=true]/input-group:opacity-50",
     "[&>kbd]:rounded-[calc(var(--radius)-5px)]",
     // Size-responsive text and icon sizing.
@@ -2481,6 +2551,8 @@ function InputGroupText(_a) {
     __spreadValues({
       className: cn(
         "flex items-center gap-2 text-on-subtle",
+        // Swap text/icon colour when inside an inverse group.
+        "group-data-[variant=inverse]/input-group:text-on-primary/70",
         "group-data-[size=sm]/input-group:text-xs group-data-[size=sm]/input-group:[&_svg:not([class*='size-'])]:size-3.5",
         "group-data-[size=md]/input-group:text-sm group-data-[size=md]/input-group:[&_svg:not([class*='size-'])]:size-4",
         "group-data-[size=lg]/input-group:text-sm group-data-[size=lg]/input-group:[&_svg:not([class*='size-'])]:size-4",
@@ -2493,18 +2565,23 @@ function InputGroupText(_a) {
 function InputGroupInput(_a) {
   var _b = _a, {
     className,
-    size: sizeProp
+    size: sizeProp,
+    variant: variantProp
   } = _b, props = __objRest(_b, [
     "className",
-    "size"
+    "size",
+    "variant"
   ]);
   const groupSize = React6.useContext(InputGroupSizeContext);
+  const groupVariant = React6.useContext(InputGroupVariantContext);
   const size = sizeProp != null ? sizeProp : groupSize;
+  const variant = variantProp != null ? variantProp : groupVariant;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Input,
     __spreadValues({
       "data-slot": "input-group-control",
       size,
+      variant,
       className: cn(
         "h-full flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0",
         className
@@ -4311,13 +4388,37 @@ var import_class_variance_authority9 = require("class-variance-authority");
 var import_radix_ui18 = require("radix-ui");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function ItemGroup(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className,
+    divider = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "divider"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     __spreadValues({
       role: "list",
       "data-slot": "item-group",
-      className: cn("group/item-group flex flex-col", className)
+      "data-divider": divider ? "true" : void 0,
+      className: cn(
+        "group/item-group flex flex-col",
+        // Divider mode: 4 px gap between items + a 1 px line drawn via
+        // ::after on each non-last default item, sitting in that gap.
+        // Item itself stays border-free — the line is a separate visual
+        // element rather than an outline on the item.
+        divider && [
+          "gap-1",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:relative",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:content-['']",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:absolute",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:-bottom-0.5",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:inset-x-4",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:h-px",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:bg-border-subtle"
+        ],
+        className
+      )
     }, props)
   );
 }
@@ -4385,8 +4486,8 @@ var itemMediaVariants = (0, import_class_variance_authority9.cva)(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "size-8 rounded-sm border bg-subtle [&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
+        icon: "size-8 rounded-full border bg-subtle [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover"
       }
     },
     defaultVariants: {
@@ -5479,7 +5580,7 @@ function SelectTrigger(_a) {
       "data-readonly": readOnly ? "" : void 0,
       disabled: readOnly || props.disabled,
       className: cn(
-        "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-prominent appearance-none whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=sm]:h-8 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=sm]:text-xs data-[size=md]:h-10 data-[size=md]:px-3 data-[size=md]:py-1 data-[size=md]:text-sm data-[size=lg]:h-12 data-[size=lg]:px-4 data-[size=lg]:py-2 data-[size=lg]:text-base *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
+        "flex w-fit items-center justify-between gap-2 rounded-xs border border-input bg-prominent appearance-none whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=sm]:h-8 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=sm]:text-xs data-[size=md]:h-10 data-[size=md]:px-3 data-[size=md]:py-1 data-[size=md]:text-sm data-[size=lg]:h-12 data-[size=lg]:px-4 data-[size=lg]:py-2 data-[size=lg]:text-base *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
         className
       )
     }, props), {
@@ -7790,7 +7891,6 @@ function NavBarBlock({ brand, links, signIn, signUp }) {
 }
 
 // components/blocks/open-positions-block.tsx
-var React18 = __toESM(require("react"), 1);
 var import_lucide_react30 = require("lucide-react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function OpenPositionsBlock({
@@ -7832,10 +7932,7 @@ function PositionsList({
   onViewHistory
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ItemGroup, { className: "min-h-0 overflow-y-auto", children: positions.map((pos, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(React18.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PositionRow, { position: pos }),
-      i < positions.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-px mx-4 bg-border-subtle" })
-    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ItemGroup, { className: "min-h-0 overflow-y-auto", children: positions.map((pos, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PositionRow, { position: pos }, i)) }),
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Separator, {}),
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "shrink-0 flex justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" }) })
   ] });