@trading-game/design-intelligence-layer 1.0.5 → 1.0.7

package/dist/index.d.cts

@@ -337,7 +337,22 @@ declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawe
 declare function DrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
 declare function DrawerClose({ ...props }: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React$1.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
+declare function DrawerContent({ className, children, dismiss, ...props }: React$1.ComponentProps<typeof Drawer$1.Content> & {
+    /**
+     * How the drawer offers to close.
+     *
+     * `"handle"` (default, unchanged) is the drag pill, shown only on the
+     * bottom direction. `"close"` swaps it for the same control Dialog and
+     * Sheet use — `NavigationButton size="sm"` around a `size-4` icon, a 32px
+     * circle on a 16px glyph — and shows it in every direction.
+     *
+     * The button sits in flow on its own row, not absolutely positioned, so
+     * nothing shares its line and the header always starts below it. `p-4 pb-0`
+     * puts it 16px from the top and right edges, matching the header's own
+     * padding.
+     */
+    dismiss?: "handle" | "close";
+}): react_jsx_runtime.JSX.Element;
 declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerTitle({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
@@ -810,7 +825,7 @@ interface SlideToConfirmProps extends Omit<React$1.ComponentProps<"div">, "onDra
 declare function SlideToConfirm({ onConfirm, label, confirmedLabel, disabled, confirmed: controlledConfirmed, className, ...props }: SlideToConfirmProps): react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
-    /** Uppercase label above the amount, e.g. "Stake (USDT)". */
+    /** Sentence-case caption above the amount, e.g. "Stake (USDT)". */
     label?: React$1.ReactNode;
     value?: number;
     defaultValue?: number;
@@ -1117,7 +1132,7 @@ interface GameLoadingBlockProps {
     label?: string;
     /** When true, swaps the label for a "taking longer" message. */
     delayed?: boolean;
-    /** Plays the zoom-out reveal and hides the bar. */
+    /** Plays the reveal and hides the bar. */
     exiting?: boolean;
     /** Fires once the exit animation finishes. */
     onExitEnd?: () => void;
@@ -1128,20 +1143,35 @@ interface GameLoadingBlockProps {
      */
     contained?: boolean;
     /**
-     * Optional backdrop image (e.g. the app's `dot-pattern.webp`) for a
-     * pixel-perfect match with the game shell. Omit to use the token-derived
-     * dotted backdrop.
+     * The product mark, as a URL to a transparent PNG or SVG. This block ships
+     * in the package, so it cannot reach into a consuming app's asset folder —
+     * pass the theme-matched file (`chmp-trd-logo-brand-light.png` in light,
+     * `…-dark.png` in dark). The same URL draws the resting mark *and* cuts the
+     * hole the reveal grows, so both always agree. Omit it and the reveal
+     * degrades to a plain fade with no mark.
+     */
+    logoSrc?: string;
+    /**
+     * Optional backdrop image for a pixel-perfect match with the game shell.
+     * Replaces the token-derived tinted canvas; the mark is still knocked out
+     * of it, so the reveal works either way.
      */
     backgroundImageUrl?: string;
     className?: string;
 }
 /**
- * Determinate loading splash for game entry: dotted brand backdrop, monogram,
- * and a progress bar with a shimmer that keeps signalling life while a stage
- * is held. Exits with a zoom-out reveal, or a plain fade under
- * `prefers-reduced-motion`.
+ * Determinate loading splash for game entry: the tinted-canvas backdrop, the
+ * product mark, and a progress bar whose shimmer keeps signalling life while a
+ * stage is held.
+ *
+ * The exit is a knock-out reveal. The mark is cut out of the backdrop as a
+ * hole, and only that hole grows — the backdrop itself never moves, so its
+ * gradient and dot grid stay put instead of appearing to zoom. The backdrop
+ * fades across the same beat, so the app bleeds through from about a third of
+ * the way in rather than arriving all at once. Under
+ * `prefers-reduced-motion` the whole thing is a plain fade.
  */
-declare function GameLoadingBlock({ progress, label, delayed, exiting, onExitEnd, contained, backgroundImageUrl, className, }: GameLoadingBlockProps): react_jsx_runtime.JSX.Element;
+declare function GameLoadingBlock({ progress, label, delayed, exiting, onExitEnd, contained, logoSrc, backgroundImageUrl, className, }: GameLoadingBlockProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 

package/dist/index.d.ts

@@ -337,7 +337,22 @@ declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawe
 declare function DrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
 declare function DrawerClose({ ...props }: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React$1.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
+declare function DrawerContent({ className, children, dismiss, ...props }: React$1.ComponentProps<typeof Drawer$1.Content> & {
+    /**
+     * How the drawer offers to close.
+     *
+     * `"handle"` (default, unchanged) is the drag pill, shown only on the
+     * bottom direction. `"close"` swaps it for the same control Dialog and
+     * Sheet use — `NavigationButton size="sm"` around a `size-4` icon, a 32px
+     * circle on a 16px glyph — and shows it in every direction.
+     *
+     * The button sits in flow on its own row, not absolutely positioned, so
+     * nothing shares its line and the header always starts below it. `p-4 pb-0`
+     * puts it 16px from the top and right edges, matching the header's own
+     * padding.
+     */
+    dismiss?: "handle" | "close";
+}): react_jsx_runtime.JSX.Element;
 declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerTitle({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
@@ -810,7 +825,7 @@ interface SlideToConfirmProps extends Omit<React$1.ComponentProps<"div">, "onDra
 declare function SlideToConfirm({ onConfirm, label, confirmedLabel, disabled, confirmed: controlledConfirmed, className, ...props }: SlideToConfirmProps): react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
-    /** Uppercase label above the amount, e.g. "Stake (USDT)". */
+    /** Sentence-case caption above the amount, e.g. "Stake (USDT)". */
     label?: React$1.ReactNode;
     value?: number;
     defaultValue?: number;
@@ -1117,7 +1132,7 @@ interface GameLoadingBlockProps {
     label?: string;
     /** When true, swaps the label for a "taking longer" message. */
     delayed?: boolean;
-    /** Plays the zoom-out reveal and hides the bar. */
+    /** Plays the reveal and hides the bar. */
     exiting?: boolean;
     /** Fires once the exit animation finishes. */
     onExitEnd?: () => void;
@@ -1128,20 +1143,35 @@ interface GameLoadingBlockProps {
      */
     contained?: boolean;
     /**
-     * Optional backdrop image (e.g. the app's `dot-pattern.webp`) for a
-     * pixel-perfect match with the game shell. Omit to use the token-derived
-     * dotted backdrop.
+     * The product mark, as a URL to a transparent PNG or SVG. This block ships
+     * in the package, so it cannot reach into a consuming app's asset folder —
+     * pass the theme-matched file (`chmp-trd-logo-brand-light.png` in light,
+     * `…-dark.png` in dark). The same URL draws the resting mark *and* cuts the
+     * hole the reveal grows, so both always agree. Omit it and the reveal
+     * degrades to a plain fade with no mark.
+     */
+    logoSrc?: string;
+    /**
+     * Optional backdrop image for a pixel-perfect match with the game shell.
+     * Replaces the token-derived tinted canvas; the mark is still knocked out
+     * of it, so the reveal works either way.
      */
     backgroundImageUrl?: string;
     className?: string;
 }
 /**
- * Determinate loading splash for game entry: dotted brand backdrop, monogram,
- * and a progress bar with a shimmer that keeps signalling life while a stage
- * is held. Exits with a zoom-out reveal, or a plain fade under
- * `prefers-reduced-motion`.
+ * Determinate loading splash for game entry: the tinted-canvas backdrop, the
+ * product mark, and a progress bar whose shimmer keeps signalling life while a
+ * stage is held.
+ *
+ * The exit is a knock-out reveal. The mark is cut out of the backdrop as a
+ * hole, and only that hole grows — the backdrop itself never moves, so its
+ * gradient and dot grid stay put instead of appearing to zoom. The backdrop
+ * fades across the same beat, so the app bleeds through from about a third of
+ * the way in rather than arriving all at once. Under
+ * `prefers-reduced-motion` the whole thing is a plain fade.
  */
-declare function GameLoadingBlock({ progress, label, delayed, exiting, onExitEnd, contained, backgroundImageUrl, className, }: GameLoadingBlockProps): react_jsx_runtime.JSX.Element;
+declare function GameLoadingBlock({ progress, label, delayed, exiting, onExitEnd, contained, logoSrc, backgroundImageUrl, className, }: GameLoadingBlockProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 

package/dist/index.js

@@ -162,7 +162,7 @@ var buttonVariants = cva(
     variants: {
       variant: {
         // Primary brand blue (#2323FF)
-        primary: "bg-background-brand-default text-text-on-brand-static hover:bg-background-brand-hover active:bg-background-brand-pressed active:opacity-100 disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))] disabled:text-text-disabled-default",
+        primary: "bg-background-brand-default text-text-on-brand-static hover:bg-background-brand-hover active:bg-background-brand-pressed active:opacity-100 disabled:opacity-(--opacity-disabled)",
         // Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
         // On-brand family — for buttons standing on a brand-coloured surface
         // (NOT theme inverses): white pill with primary ink, white outline,
@@ -181,7 +181,7 @@ var buttonVariants = cva(
         // (white-alpha-32 = 1.84:1 on brand, against 1.71:1 here) so both
         // read as the same quiet edge. Its contrast is higher only because it
         // has no fill behind it — there, the border IS the button.
-        secondary: "bg-background-primary-surface border-[1.5px] border-border-control-default text-text-prominent-default hover:bg-background-secondary-surface disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))] disabled:border-border-disabled-default disabled:text-text-disabled-default",
+        secondary: "button-disabled-secondary bg-background-primary-surface border-[1.5px] border-border-control-default text-text-prominent-default hover:bg-background-secondary-surface",
         // Secondary Inverse — white border + white text; for use on dark/coloured surfaces
         "secondary-on-brand": "bg-transparent border-[1.5px] border-(--primitive-white-alpha-32) text-text-on-brand-static hover:bg-(--primitive-white-alpha-8) disabled:border-(--primitive-white-alpha-16) disabled:text-text-on-brand-disabled-default",
         tertiary: "bg-transparent text-text-prominent-default hover:bg-background-hover-default disabled:text-text-disabled-default",
@@ -192,7 +192,7 @@ var buttonVariants = cva(
         // hover/pressed via the state-layer glazes stacked over the solid
         // fill); `frosted-on-brand` is the white frost for coloured/art
         // surfaces (hover thickens the frost, press thins it).
-        frosted: "bg-background-brand-selected text-text-brand-selected active:opacity-100 hover:[background-image:linear-gradient(var(--background-hover-default),var(--background-hover-default))] active:[background-image:linear-gradient(var(--background-pressed-default),var(--background-pressed-default))] disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))] disabled:text-text-disabled-default",
+        frosted: "bg-background-brand-selected text-text-brand-selected active:opacity-100 hover:[background-image:linear-gradient(var(--background-hover-default),var(--background-hover-default))] active:[background-image:linear-gradient(var(--background-pressed-default),var(--background-pressed-default))] disabled:opacity-(--opacity-disabled-frosted)",
         "frosted-on-brand": "bg-(--primitive-white-alpha-24) backdrop-blur-md text-text-on-brand-static hover:bg-(--primitive-white-alpha-32) active:bg-(--primitive-white-alpha-16) active:opacity-100 disabled:bg-(--primitive-white-alpha-8) disabled:text-text-on-brand-disabled-default",
         /* @deprecated aliases — shimmer became the `shimmer` boolean prop;
            the inverse names became the on-brand family; `glass` became
@@ -2465,7 +2465,7 @@ function Checkbox(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn(
-        "peer size-4 shrink-0 rounded-2xs border border-border-default-default bg-background-primary-surface transition-colors outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:border-border-default-default disabled:text-text-disabled-default data-[state=checked]:border-transparent data-[state=checked]:bg-background-brand-default data-[state=checked]:text-text-on-brand-static",
+        "peer size-4 shrink-0 rounded-2xs border border-border-default-default bg-background-primary-surface transition-colors outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:opacity-(--opacity-disabled) data-[state=checked]:border-transparent data-[state=checked]:bg-background-brand-default data-[state=checked]:text-text-on-brand-static",
         className
       )
     }, props), {
@@ -3014,6 +3014,7 @@ function ContextMenuShortcut(_a) {
 }
 
 // components/ui/drawer.tsx
+import { XIcon as XIcon2 } from "lucide-react";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function Drawer(_a) {
@@ -3052,10 +3053,12 @@ function DrawerOverlay(_a) {
 function DrawerContent(_a) {
   var _b = _a, {
     className,
-    children
+    children,
+    dismiss = "handle"
   } = _b, props = __objRest(_b, [
     "className",
-    "children"
+    "children",
+    "dismiss"
   ]);
   return /* @__PURE__ */ jsxs15(DrawerPortal, { "data-slot": "drawer-portal", children: [
     /* @__PURE__ */ jsx23(DrawerOverlay, {}),
@@ -3073,7 +3076,15 @@ function DrawerContent(_a) {
         )
       }, props), {
         children: [
-          /* @__PURE__ */ jsx23("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-border-default-default group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          dismiss === "handle" ? /* @__PURE__ */ jsx23("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-border-default-default group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }) : /* @__PURE__ */ jsx23("div", { className: "flex shrink-0 justify-end p-4 pb-0", children: /* @__PURE__ */ jsx23(DrawerPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx23(
+            NavigationButton,
+            {
+              "data-slot": "drawer-close",
+              size: "sm",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx23(XIcon2, { className: "size-4" })
+            }
+          ) }) }),
           children
         ]
       })
@@ -4761,7 +4772,7 @@ function NativeSelect(_a) {
             "data-slot": "native-select",
             "data-size": resolvedSize,
             className: cn(
-              "w-full min-w-0 appearance-none rounded-xs border border-border-default-default bg-background-primary-surface px-3 pr-9 text-text-prominent-default transition-[color,box-shadow] outline-none selection:bg-background-brand-default selection:text-text-on-brand-static disabled:pointer-events-none disabled:cursor-not-allowed disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))]",
+              "w-full min-w-0 appearance-none rounded-xs border border-border-default-default bg-background-primary-surface px-3 pr-9 text-text-prominent-default transition-[color,box-shadow] outline-none disabled:text-text-disabled-default selection:bg-background-brand-default selection:text-text-on-brand-static disabled:pointer-events-none disabled:cursor-not-allowed disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))]",
               "focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-soft",
               sizeClasses[resolvedSize],
               className
@@ -4771,7 +4782,7 @@ function NativeSelect(_a) {
         /* @__PURE__ */ jsx37(
           ChevronDownIcon4,
           {
-            className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-icon-subtle-default select-none",
+            className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-icon-subtle-default select-none group-has-[select:disabled]/native-select:text-icon-disabled-default",
             "aria-hidden": "true",
             "data-slot": "native-select-icon"
           }
@@ -5483,7 +5494,7 @@ function RadioGroupItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-border-default-default bg-background-primary-surface transition-[color,box-shadow] outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong data-[state=checked]:border-border-brand-selected disabled:cursor-not-allowed disabled:border-border-default-default disabled:text-text-disabled-default aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft",
+        "aspect-square size-4 shrink-0 rounded-full border border-border-default-default bg-background-primary-surface transition-[color,box-shadow] outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong data-[state=checked]:border-border-brand-selected disabled:cursor-not-allowed disabled:opacity-(--opacity-disabled) aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft",
         className
       )
     }, props), {
@@ -5610,7 +5621,7 @@ function ScrollBar(_a) {
 }
 
 // components/ui/sheet.tsx
-import { XIcon as XIcon2 } from "lucide-react";
+import { XIcon as XIcon3 } from "lucide-react";
 import { Dialog as SheetPrimitive } from "radix-ui";
 import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 function Sheet(_a) {
@@ -5682,7 +5693,7 @@ function SheetContent(_a) {
               size: "sm",
               "aria-label": "Close",
               className: "absolute top-4 right-4",
-              children: /* @__PURE__ */ jsx46(XIcon2, { className: "size-4" })
+              children: /* @__PURE__ */ jsx46(XIcon3, { className: "size-4" })
             }
           ) })
         ]
@@ -7022,11 +7033,18 @@ function Stepper({
     }
   }, [currentValue, decimalPlaces, isFocused]);
   function commit(next) {
-    const clamped = clamp(next, min, max);
-    const rounded = decimalPlaces > 0 ? parseFloat(clamped.toFixed(decimalPlaces)) : Math.round(clamped);
-    if (!isControlled) setInternalValue(rounded);
-    setDisplayString(formatValue(rounded, decimalPlaces));
-    onValueChange == null ? void 0 : onValueChange(rounded);
+    let committed;
+    if (next <= min) {
+      committed = min;
+    } else if (next >= max) {
+      committed = max;
+    } else {
+      const rounded = decimalPlaces > 0 ? parseFloat(next.toFixed(decimalPlaces)) : Math.round(next);
+      committed = clamp(rounded, min, max);
+    }
+    if (!isControlled) setInternalValue(committed);
+    setDisplayString(formatValue(committed, decimalPlaces));
+    onValueChange == null ? void 0 : onValueChange(committed);
   }
   function handleDecrement() {
     commit(currentValue - step);
@@ -7072,7 +7090,11 @@ function Stepper({
       "data-slot": "stepper",
       "data-disabled": disabled || void 0,
       className: cn(
-        "flex w-full items-center justify-between gap-4",
+        // Two rows: the label spans the control, then the -/value/+ row sits
+        // under it with a 4px gap. The label is deliberately NOT inside the
+        // value column — nesting it there makes the buttons centre against the
+        // label+value stack, which drops them below the number.
+        "flex w-full flex-col gap-1",
         // No opacity here on purpose. The +/- are Buttons and already carry
         // their own disabled treatment; dimming the wrapper too multiplied
         // with theirs (24% × 24% ≈ 6%) and made them all but invisible.
@@ -7081,63 +7103,72 @@ function Stepper({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx53(
-          Button,
+        label != null && /* @__PURE__ */ jsx53(
+          "span",
           {
-            type: "button",
-            variant: "frosted",
-            size: "icon-lg",
-            onClick: handleDecrement,
-            disabled: disabled || currentValue <= min,
-            "aria-label": "Decrease value",
-            children: /* @__PURE__ */ jsx53(Minus, {})
+            "data-slot": "stepper-label",
+            className: cn(
+              "type-stepper-stake-label text-center",
+              disabled ? "text-text-disabled-default" : "text-text-subtle-default"
+            ),
+            children: label
           }
         ),
-        /* @__PURE__ */ jsxs31("div", { className: "flex min-w-0 flex-col items-center", children: [
-          label != null && /* @__PURE__ */ jsx53(
-            "span",
-            {
-              className: cn(
-                "type-stepper-stake-label",
-                disabled ? "text-text-disabled-default" : "text-text-subtle-default"
-              ),
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsx53(
-            "input",
-            {
-              type: "text",
-              inputMode: "decimal",
-              role: "spinbutton",
-              "aria-valuemin": min === -Infinity ? void 0 : min,
-              "aria-valuemax": max === Infinity ? void 0 : max,
-              "aria-valuenow": currentValue,
-              "aria-label": ariaLabel,
-              value: displayString,
-              onChange: handleInputChange,
-              onBlur: handleBlur,
-              onFocus: handleFocus,
-              onKeyDown: handleKeyDown,
-              disabled,
-              placeholder,
-              id,
-              name,
-              size: Math.max(displayString.length, 1),
-              className: "type-stepper-stake-amount w-full min-w-0 border-0 bg-transparent text-center text-text-prominent-default outline-none disabled:text-text-disabled-default [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx53(
-          Button,
+        /* @__PURE__ */ jsxs31(
+          "div",
           {
-            type: "button",
-            variant: "frosted",
-            size: "icon-lg",
-            onClick: handleIncrement,
-            disabled: disabled || currentValue >= max,
-            "aria-label": "Increase value",
-            children: /* @__PURE__ */ jsx53(Plus, {})
+            "data-slot": "stepper-row",
+            className: "flex w-full items-center justify-between gap-4",
+            children: [
+              /* @__PURE__ */ jsx53(
+                Button,
+                {
+                  type: "button",
+                  variant: "frosted",
+                  size: "icon-lg",
+                  onClick: handleDecrement,
+                  disabled: disabled || currentValue <= min,
+                  "aria-label": "Decrease value",
+                  children: /* @__PURE__ */ jsx53(Minus, {})
+                }
+              ),
+              /* @__PURE__ */ jsx53(
+                "input",
+                {
+                  type: "text",
+                  inputMode: "decimal",
+                  role: "spinbutton",
+                  "aria-valuemin": min === -Infinity ? void 0 : min,
+                  "aria-valuemax": max === Infinity ? void 0 : max,
+                  "aria-valuenow": currentValue,
+                  "aria-label": ariaLabel,
+                  value: displayString,
+                  onChange: handleInputChange,
+                  onBlur: handleBlur,
+                  onFocus: handleFocus,
+                  onKeyDown: handleKeyDown,
+                  disabled,
+                  placeholder,
+                  id,
+                  name,
+                  size: Math.max(displayString.length, 1),
+                  "data-slot": "stepper-value",
+                  className: "type-stepper-stake-amount min-w-0 flex-1 border-0 bg-transparent text-center text-text-prominent-default outline-none disabled:text-text-disabled-default [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                }
+              ),
+              /* @__PURE__ */ jsx53(
+                Button,
+                {
+                  type: "button",
+                  variant: "frosted",
+                  size: "icon-lg",
+                  onClick: handleIncrement,
+                  disabled: disabled || currentValue >= max,
+                  "aria-label": "Increase value",
+                  children: /* @__PURE__ */ jsx53(Plus, {})
+                }
+              )
+            ]
           }
         )
       ]
@@ -7367,7 +7398,7 @@ function Switch(_a) {
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent p-[3px] transition-all outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:border-border-default-default disabled:text-text-disabled-default data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-background-brand-default data-[state=unchecked]:bg-border-default-default",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent p-[3px] transition-all outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:opacity-(--opacity-disabled) data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-background-brand-default data-[state=unchecked]:bg-border-default-default",
         className
       )
     }, props), {
@@ -7603,7 +7634,7 @@ import { cva as cva15 } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var toggleVariants = cva15(
-  "type-toggle inline-flex items-center justify-center gap-2 rounded-md border border-border-default-default bg-background-primary-surface text-text-prominent-default whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-background-secondary-surface active:bg-background-secondary-wash focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:pointer-events-none disabled:border-border-default-default disabled:text-text-disabled-default aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft data-[state=on]:border-transparent data-[state=on]:bg-background-brand-default data-[state=on]:text-text-on-brand-static [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "type-toggle inline-flex items-center justify-center gap-2 rounded-md border border-border-default-default bg-background-primary-surface text-text-prominent-default whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-background-secondary-surface active:bg-background-secondary-wash focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:pointer-events-none disabled:opacity-(--opacity-disabled) aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft data-[state=on]:border-transparent data-[state=on]:bg-background-brand-default data-[state=on]:text-text-on-brand-static [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       size: {
@@ -8300,7 +8331,6 @@ function useSmoothProgress({
   const label = done && progress >= 99.5 ? readyLabel : (_b = (_a = checkpoints[idx]) == null ? void 0 : _a.label) != null ? _b : readyLabel;
   return { progress, label, delayed, complete: done && progress >= 100 };
 }
-var MONOGRAM_D = "M513.51,265.27l12.26-58.98H183.8l-12.26,58.98h105.29l-46.92,225.76,29.68-.85c1.65-.05,40.84-1.34,87-18.36,64.47-23.76,111.8-66.23,136.88-122.83l15.77-35.6h-139.02l-12.26,58.98h58.44l-6.31,6.26c-3.16,3.14-6.56,6.2-10.11,9.12-14.15,11.63-31.27,21.29-50.86,28.7-10.01,3.79-20.64,6.97-31.57,9.45l-5.55,1.26,33.65-161.89h177.86Z";
 function GameLoadingBlock({
   progress = 0,
   label = "",
@@ -8308,6 +8338,7 @@ function GameLoadingBlock({
   exiting = false,
   onExitEnd,
   contained = false,
+  logoSrc,
   backgroundImageUrl,
   className
 }) {
@@ -8321,13 +8352,15 @@ function GameLoadingBlock({
   React23.useEffect(() => {
     if (!exiting) return;
     const raf = requestAnimationFrame(() => setGo(true));
-    const timer = setTimeout(() => onExitEnd == null ? void 0 : onExitEnd(), reduced ? 240 : 520);
+    const timer = setTimeout(() => onExitEnd == null ? void 0 : onExitEnd(), reduced ? 240 : 700);
     return () => {
       cancelAnimationFrame(raf);
       clearTimeout(timer);
     };
   }, [exiting, reduced, onExitEnd]);
   const isAbsolute = exiting || contained;
+  const punched = Boolean(logoSrc);
+  const animate = exiting && go && !reduced;
   return /* @__PURE__ */ jsxs40(
     "div",
     {
@@ -8336,39 +8369,51 @@ function GameLoadingBlock({
       "aria-label": "Loading game",
       "data-slot": "game-loading-block",
       className: cn(
-        "z-50 inset-0 flex flex-col items-center justify-center gap-8 overflow-hidden",
+        "z-50 inset-0 overflow-hidden",
         isAbsolute ? "absolute" : "fixed",
-        // Token-derived dotted brand backdrop; skipped when a real image is passed.
-        !backgroundImageUrl && "game-loader-backdrop",
-        backgroundImageUrl && "bg-primary bg-cover bg-center bg-no-repeat",
-        exiting && (reduced ? "transition-opacity duration-200" : "transition-opacity duration-[180ms] delay-[260ms]"),
-        exiting && go ? "opacity-0" : "opacity-100",
+        // Reduced motion, and the no-mark fallback, fade the whole layer.
+        exiting && (reduced || !punched) && "transition-opacity duration-200",
+        exiting && go && (reduced || !punched) ? "opacity-0" : "opacity-100",
         className
       ),
-      style: backgroundImageUrl ? { backgroundImage: `url(${backgroundImageUrl})` } : void 0,
       children: [
         /* @__PURE__ */ jsx67(
-          "svg",
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "game-loading-backdrop",
+            className: cn(
+              "game-loader-field",
+              punched && "game-loader-punch",
+              animate && punched && "game-loader-field-exit"
+            ),
+            style: __spreadValues(__spreadValues({}, logoSrc ? { "--game-loader-mark": `url(${logoSrc})` } : null), backgroundImageUrl ? {
+              backgroundImage: `url(${backgroundImageUrl})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat"
+            } : null)
+          }
+        ),
+        logoSrc && /* @__PURE__ */ jsx67(
+          "img",
           {
-            width: "120",
-            height: "120",
-            viewBox: "0 0 697.31 697.31",
-            xmlns: "http://www.w3.org/2000/svg",
+            src: logoSrc,
+            alt: "",
             "aria-hidden": "true",
-            className: cn("game-loader-mark fill-on-primary", exiting && go && !reduced && "game-loader-mark-exit"),
-            children: /* @__PURE__ */ jsx67("path", { d: MONOGRAM_D })
+            className: cn("game-loader-mark", animate && "game-loader-mark-exit")
           }
         ),
-        !exiting && /* @__PURE__ */ jsxs40("div", { className: "flex w-[200px] flex-col items-start gap-3.5", children: [
-          /* @__PURE__ */ jsx67("div", { className: "relative h-2 w-full overflow-hidden rounded-xs bg-on-primary/25", children: /* @__PURE__ */ jsx67(
+        !exiting && /* @__PURE__ */ jsxs40("div", { className: "absolute bottom-10 left-1/2 flex w-[200px] -translate-x-1/2 flex-col items-start gap-3.5", children: [
+          /* @__PURE__ */ jsx67("div", { className: "relative h-2 w-full overflow-hidden rounded-xs bg-background-secondary-surface", children: /* @__PURE__ */ jsx67(
             "div",
             {
-              className: "absolute inset-y-0 left-0 overflow-hidden rounded-xs bg-on-primary",
+              className: "absolute inset-y-0 left-0 overflow-hidden rounded-xs bg-background-brand-default",
               style: { width: `${progress}%` },
               children: /* @__PURE__ */ jsx67("span", { "aria-hidden": "true", className: "game-loader-shimmer absolute inset-y-0 left-[-60%] w-[60%]" })
             }
           ) }),
-          /* @__PURE__ */ jsx67("span", { className: "caption text-on-primary/90", children: delayed ? "Taking longer than usual\u2026" : label })
+          /* @__PURE__ */ jsx67("span", { className: "caption text-text-subtle-default", children: delayed ? "Taking longer than usual\u2026" : label })
         ] })
       ]
     }