@gearbox-protocol/ui-kit 3.13.1 → 3.14.0-next.1

package/dist/types/components/graph/graph.d.ts

@@ -108,10 +108,17 @@ export interface GraphProps {
      * between series with different data coverage.
      */
     visibleTimeFrom?: number;
+    /**
+     * When true, all user-initiated zoom and pan interactions are disabled.
+     * The visible time range can only be changed programmatically — e.g. via
+     * range buttons. Specifically disables: mouse-wheel zoom, pinch zoom,
+     * axis drag-to-scale, axis double-click reset, and scroll/drag panning.
+     */
+    disableZoom?: boolean;
 }
 /**
  * Graph component that renders a chart using lightweight-charts library
  * with support for area series, custom tooltips, and vertical line annotations
  * Supports single or multiple series with different colors and legends
  */
-export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, }: GraphProps): React.ReactElement;
+export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, }: GraphProps): React.ReactElement;

package/dist/types/components/layout/main-aside-layout/main-aside-layout.d.ts

@@ -4,14 +4,55 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
     /** Sidebar; rendered to the left or right of the main column (`asidePosition`). */
     aside?: React.ReactNode;
     asidePosition?: "left" | "right";
-    /** Classes for the outer `<aside>` (width, sticky, responsive visibility, etc.). */
+    /** Classes for the outer `<aside>` element. */
     asideClassName?: string;
+    /** Classes for the inner main column `<div>`. */
+    mainClassName?: string;
+    /**
+     * Ref forwarded to the main column `<div>`.
+     * Use for ResizeObserver-based width tracking (e.g. chart resize key).
+     */
+    mainRef?: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Layout variant.
+     *
+     * - `"default"` (default) — simple flex row, aside width controlled via `asideClassName`.
+     *
+     * - `"detail"` — detail page layout (pool / strategy / position detail screens):
+     *   - aside is `420px` at `lg`, `460px` at `xl`
+     *   - aside is **sticky** (`top-4`) from `lg` up to `2449px`
+     *   - aside becomes **fixed** (`top-28 right-32`) at `≥2450px`
+     *   - outer wrapper caps at `calc(80rem + 420px + 1.5rem)` / `calc(80rem + 460px + 1.5rem)`
+     *   - at `≥2450px` the wrapper switches to `display:block` and the main column
+     *     centres itself via `mx-auto` with `max-w-[min(80rem,calc(100vw-460px-8rem))]`
+     *   - pass `asideClassName` to override or augment aside classes (e.g. z-index)
+     */
+    variant?: "default" | "detail";
 }
 /**
- * Main column + optional sidebar in one row. Intended for use **inside** the app shell `Container`:
- * main uses the remaining width (`flex-1 min-w-0`), aside keeps a fixed width.
+ * MainAsideLayout — main column + optional sidebar in one row.
  *
- * On small screens the stack uses `column-reverse` so the sidebar stays above the main column when
- * `asidePosition` is `"right"` (common for pool pages).
+ * Intended for use **inside** the app shell `Container` (or inside `px-4 sm:px-6 lg:px-8` padding):
+ * - main column uses the remaining width (`flex-1 min-w-0`)
+ * - aside keeps a fixed width supplied via `asideClassName`
+ *
+ * On small screens the stack uses `column-reverse` so the sidebar appears above the
+ * main column when `asidePosition` is `"right"` (standard for detail pages).
+ *
+ * ### Default variant
+ * ```tsx
+ * <MainAsideLayout aside={<Panel />} asideClassName="lg:w-[320px]">
+ *   <Content />
+ * </MainAsideLayout>
+ * ```
+ *
+ * ### Detail variant — sticky → fixed aside for pool / strategy / position pages
+ * ```tsx
+ * <MainAsideLayout variant="detail" mainRef={graphRootRef} aside={<Panel />}>
+ *   <Content />
+ * </MainAsideLayout>
+ * ```
+ * This reproduces the `PoolDetailsScreen` two-column layout:
+ * sticky aside below 2450 px viewport, fixed aside above it, correct max-widths.
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/trading-view/trading-view.d.ts

@@ -94,6 +94,13 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
      * so colors stay stable across reloads (same label keeps the same color).
      */
     seriesColorPersistenceKey?: string;
+    /**
+     * When true, all user-initiated zoom and pan interactions are disabled.
+     * The time range can only be changed via the range buttons.
+     * Disables: mouse-wheel zoom, pinch zoom, axis drag, axis double-click reset,
+     * and scroll/drag panning.
+     */
+    disableZoom?: boolean;
 }
 /**
  * TradingView — comprehensive charting component with graph selection and time range controls.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.13.1",
+  "version": "3.14.0-next.1",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",
@@ -71,8 +71,8 @@
     "check": "biome check --write",
     "check:ci": "biome check --diagnostic-level=error",
     "typecheck:ci": "tsc --noEmit",
-    "test": "pnpm exec vitest run",
-    "test:watch": "pnpm exec vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

package/src/styles/base.css

@@ -2,7 +2,6 @@
  * Base styles for @gearbox-protocol/ui-kit
  *
  * This file contains:
- * - Google Fonts import (Rubik)
  * - CSS variables for light/dark themes (:root, .dark)
  * - Base body styles with fallbacks
  * - Scrollbar styles (custom + navbar)
@@ -10,6 +9,10 @@
  * - React-Slick carousel overrides
  * - Liquidation graph styles
  *
+ * Rubik: load from the host app (e.g. `<link>` to Google Fonts in `index.html`).
+ * Do not use `@import url(...fonts...)` here — when this file is bundled after
+ * Tailwind layers, that breaks CSS `@import` ordering for minifiers.
+ *
  * Does NOT contain:
  * - @import "tailwindcss" (import separately)
  * - @theme block (use theme.css for Tailwind v4 utilities)
@@ -19,7 +22,6 @@
  * - For full setup: import globals.css (includes everything)
  * - For modular setup: import base.css + theme.css + tailwindcss separately
  */
-@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
 
 /*
  * Critical fallback styles for browsers without CSS variable support