@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.2

package/dist/types/components/composites/tx-preview/confirm/dialog/transactionConfirmPhase.d.ts

@@ -0,0 +1,4 @@
+export type TransactionConfirmPhase = "confirm" | "awaiting_receipt" | "success" | "failure";
+export interface TransactionConfirmSubmittedTx {
+    readonly hash: `0x${string}`;
+}

package/dist/types/components/composites/tx-preview/confirm/execution/TransactionConfirmExecuteButton.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../../../../buttons/button/button';
+export interface TransactionConfirmExecuteButtonProps extends ButtonProps {
+    readonly isLoading?: boolean;
+}
+export declare function TransactionConfirmExecuteButton({ isLoading, disabled, children, width, size, ...rest }: TransactionConfirmExecuteButtonProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/execution/index.d.ts

@@ -0,0 +1 @@
+export * from './TransactionConfirmExecuteButton';

package/dist/types/components/composites/tx-preview/confirm/index.d.ts

@@ -0,0 +1,5 @@
+export * from './amounts';
+export * from './dialog';
+export * from './execution';
+export * from './result';
+export * from './stepper';

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmFailureResult.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface TransactionConfirmFailureResultProps {
+    readonly title: React.ReactNode;
+    readonly description: React.ReactNode;
+    readonly footerAction?: React.ReactNode;
+    readonly iconSize?: number;
+}
+/**
+ * Failure result follows the shell's confirm layout: the main content scrolls
+ * while `footerAction` remains outside the scroll container.
+ */
+export declare function TransactionConfirmFailureResult({ title, description, footerAction, iconSize, }: TransactionConfirmFailureResultProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmSuccessIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function TransactionConfirmSuccessIcon(): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmSuccessResult.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface TransactionConfirmSuccessResultProps {
+    readonly icon?: React.ReactNode;
+    readonly headline: React.ReactNode;
+    readonly subtitle: React.ReactNode;
+    readonly txHashRow?: React.ReactNode;
+    /** Extra scrollable body below the subtitle (e.g. summary tables). */
+    readonly footerAction?: React.ReactNode;
+}
+/**
+ * Success result follows the shell's confirm layout: the main content scrolls
+ * while `footerAction` remains outside the scroll container.
+ */
+export declare function TransactionConfirmSuccessResult({ icon, headline, subtitle, txHashRow, footerAction, }: TransactionConfirmSuccessResultProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmTxHashRow.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface TransactionConfirmTxHashRowProps {
+    readonly txHashLink: React.ReactNode;
+    readonly addToWalletLink?: React.ReactNode;
+}
+export declare function TransactionConfirmTxHashRow({ txHashLink, addToWalletLink, }: TransactionConfirmTxHashRowProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/result/constants.d.ts

@@ -0,0 +1,18 @@
+export declare class TransactionConfirmSuccessResultTest {
+    static root: string;
+    static headline: string;
+    static subtitle: string;
+    static footer: string;
+}
+export declare class TransactionConfirmFailureResultTest {
+    static root: string;
+    static footer: string;
+}
+export declare class TransactionConfirmTxHashRowTest {
+    static root: string;
+    static txHashLink: string;
+    static addToWallet: string;
+}
+export declare class TransactionConfirmExecuteButtonTest {
+    static root: string;
+}

package/dist/types/components/composites/tx-preview/confirm/result/index.d.ts

@@ -0,0 +1,5 @@
+export * from './constants';
+export * from './TransactionConfirmFailureResult';
+export * from './TransactionConfirmSuccessIcon';
+export * from './TransactionConfirmSuccessResult';
+export * from './TransactionConfirmTxHashRow';

package/dist/types/components/composites/tx-preview/confirm/stepper/ProgressStepper.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { StepStatus } from './transactionExecutionStepTypes';
+export interface ProgressStepperStep {
+    /** Stable identity used as the React key. */
+    readonly id: string;
+    readonly label: React.ReactNode;
+    readonly status: StepStatus;
+    /**
+     * Marker centered on the connector that precedes this step — e.g. a delay
+     * clock shown between "Request" and "Withdraw". Ignored on the first step.
+     */
+    readonly connectorMarker?: React.ReactNode;
+    /** Render the connector that precedes this step as dashed. */
+    readonly connectorDashed?: boolean;
+}
+/**
+ * Visual tone of the reached (completed + active) track.
+ * - `foreground`: solid white dots and connectors (default).
+ * - `muted`: grey `gray-50` track; the active dot stays white, completed dots
+ *   and reached connectors render in `gray-50`.
+ */
+export type ProgressStepperTone = "foreground" | "muted";
+export interface ProgressStepperProps {
+    readonly steps: ReadonlyArray<ProgressStepperStep>;
+    readonly tone?: ProgressStepperTone;
+    readonly className?: string;
+}
+/**
+ * Generic progress stepper: a row of dots + labels joined by connectors.
+ *
+ * Each connector is two half-lines living in the same row as the dot, so the
+ * lines butt directly against the 9px dots. Supports an optional per-connector
+ * `marker` (centered on the connector midpoint, e.g. a waiting clock) and a
+ * `dashed` connector style. The reached track color follows `tone`.
+ */
+export declare function ProgressStepper({ steps, tone, className, }: ProgressStepperProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/stepper/constants.d.ts

@@ -0,0 +1,3 @@
+export declare class ProgressStepperTest {
+    static root: string;
+}

package/dist/types/components/composites/tx-preview/confirm/stepper/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './ProgressStepper';
+export * from './transactionExecutionStepTypes';

package/dist/types/components/composites/tx-preview/confirm/stepper/transactionExecutionStepTypes.d.ts

@@ -0,0 +1,10 @@
+export type TransactionExecutionStepId = "approve" | "auth" | "execute";
+export type TransactionExecutionPrerequisiteStepId = Exclude<TransactionExecutionStepId, "execute">;
+export type StepStatus = "completed" | "active" | "upcoming";
+export type TransactionExecutionStepLabelKey = "approve" | "approveBatch" | "auth" | "execute";
+export interface TransactionExecutionStepView {
+    id: TransactionExecutionStepId;
+    labelKey: TransactionExecutionStepLabelKey;
+    status: StepStatus;
+}
+export declare function shouldShowTransactionProgressStepper(steps: ReadonlyArray<Pick<TransactionExecutionStepView, "id">>): boolean;

package/dist/types/components/composites/tx-preview/index.d.ts

@@ -0,0 +1 @@
+export * from './confirm';

package/dist/types/components/compound-apy/compound-apy.d.ts

@@ -1,110 +1,34 @@
-import { PoolAPYPointsTip } from '../pool-apy-tooltip';
-import { LocaleKeys } from '../../locale';
-import { TokenMetaInfo } from '../../types/common';
-/**
- * For GEAR token, use the logo symbol instead of the standard token icon.
- * The standard gear.svg has a white background circle that looks bad on dark themes.
- */
-export declare function getRewardTokenSymbol(token: TokenMetaInfo | undefined, rewardTokenSymbol: string | undefined): import('../token-icon').SymbolOrIcon | undefined;
-export interface PoolBaseAPY {
-    type: "supplyAPY" | "tokenYield";
-    apy: number;
-}
-export interface ExtraRewardApy {
-    apy: number;
-    rewardToken: string;
-    rewardTokenSymbol: string;
-}
-export interface ExternalAPYData {
-    /**
-     * The total value including external APY
-     */
-    totalValue: number;
-    /**
-     * The external APY value
-     */
-    value?: number;
-    /**
-     * The external APY value (backward compatibility alias for value)
-     * @deprecated Use value instead
-     */
-    apy?: number;
-    /**
-     * Name/label of the external APY source
-     */
-    name: string;
-    /**
-     * Localization key for the external APY tooltip
-     * Will be rendered with FormattedMessageTyped with values: { name, value }
-     */
-    tooltip?: LocaleKeys;
-}
+import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
 export interface CompoundAPYProps {
     /**
-     * Total APY value (already in percent form, e.g., 5 for 5%)
-     */
-    totalAPY: number;
-    /**
-     * Whether the total APY is loading (backward compatibility)
-     */
-    totalAPYLoading?: boolean;
-    /**
-     * Base APY array with different types
-     */
-    baseAPY: Array<PoolBaseAPY>;
-    /**
-     * Extra/rewards APY array
+     * SDK `ApyBreakdown`. When undefined, renders an em-dash placeholder.
+     * Display-only: values are final; the component does not look up rates.
      */
-    extraAPY: Array<ExtraRewardApy>;
+    apy: ApyBreakdown | undefined;
     /**
-     * External APY data (e.g., from external protocols)
+     * Strategy-only plain leverage multiplier (e.g. `13.6` for 13.6x).
+     * Forwarded to {@link YieldBreakdownTooltip}.
      */
-    externalAPY?: ExternalAPYData;
+    maxLeverage?: Leverage;
     /**
-     * Pool points data (backward compatibility)
+     * Strategy collateral yield for Base / Incentive rows in the tooltip.
      */
-    points?: Array<PoolAPYPointsTip>;
+    collateralApy?: ApyBreakdown;
+    /** Strategy base borrow cost in bps. */
+    borrowApy?: Bps;
+    /** Strategy additional (quota) borrow cost in bps. */
+    additionalBorrowApy?: Bps;
     /**
-     * APY data from 7 days ago (backward compatibility)
-     */
-    apy7DAgo?: {
-        baseAPY?: Array<PoolBaseAPY>;
-        totalAPY?: number;
-        totalAPYLoading?: boolean;
-    };
-    /**
-     * Token list for displaying token symbols in tooltips
-     */
-    tokensList?: Record<string, TokenMetaInfo>;
-    /**
-     * Number of decimal places
+     * Number of decimal places for the total APY string.
      * @default 2
      */
     decimals?: number;
-    /**
-     * Custom className
-     */
     className?: string;
 }
 /**
- * CompoundAPY component for displaying breakdown of APY with base, extra, and external components.
- *
- * Renders an APY string with an info icon, cascading reward token icons, and points icons.
- * When APY >= 0.001 and not loading, wraps content in PoolAPYTooltip for detailed breakdown.
+ * Compound APY display fed by an SDK `ApyBreakdown`.
  *
- * @example
- * ```tsx
- * <CompoundAPY
- *   totalAPY={15}
- *   baseAPY={[{ type: "supplyAPY", apy: 10 }]}
- *   extraAPY={[{ apy: 3, rewardToken: "0x...", rewardTokenSymbol: "GEAR" }]}
- *   externalAPY={{
- *     totalValue: 15,
- *     value: 2,
- *     name: "Curve",
- *     tooltip: "External APY from Curve"
- *   }}
- * />
- * ```
+ * No `tokensList`, no external APY, no 7D history, no "soon" points state.
+ * For the legacy percent-based API see {@link CompoundAPYLegacy}.
  */
-export declare function CompoundAPY({ totalAPY, totalAPYLoading, baseAPY, extraAPY, externalAPY: externalAPYProp, points, apy7DAgo, tokensList, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundAPY({ apy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/confirm-menu/confirm-menu.d.ts

@@ -2,8 +2,10 @@ import * as React from "react";
 export interface ConfirmMenuProps {
     /** Title text or element shown in the header */
     title: React.ReactNode;
-    /** Callback when the close button is clicked */
-    onClose: () => void;
+    /** Optional badge or addon rendered after the title (e.g. LP pill). */
+    titleAddon?: React.ReactNode;
+    /** Callback when the close button is clicked. Omit to hide the close control. */
+    onClose?: () => void;
     /** Additional CSS class applied to the root element */
     className?: string;
 }

package/dist/types/components/detailed-page-title/detailed-page-title-explorer-dropdown.d.ts

@@ -2,7 +2,7 @@ import { ExplorerLink } from '../explorer-links-dropdown';
 import * as React from "react";
 export interface DetailedPageTitleExplorerDropdownProps {
     /** List of explorer links to show in the dropdown */
-    explorerLinks?: Array<ExplorerLink>;
+    explorerLinks?: ReadonlyArray<ExplorerLink>;
     /** Optional class name for the trigger */
     className?: string;
     title?: React.ReactNode;

package/dist/types/components/detailed-page-title/index.d.ts

@@ -1,3 +1,2 @@
-export * from './detailed-page-title';
 export * from './detailed-page-title-copy-button';
 export * from './detailed-page-title-explorer-dropdown';

package/dist/types/components/dialog/dialog-container.d.ts

@@ -1,9 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const dialogContainerVariants: (props?: ({
-    padding?: boolean | "xl" | "md" | null | undefined;
-    colorTheme?: "default" | "box" | "modal" | "transparent" | null | undefined;
-    maxWidth?: "full" | "sm" | "lg" | "xl" | "2xl" | "md" | null | undefined;
+    padding?: boolean | "md" | "xl" | null | undefined;
+    colorTheme?: "default" | "modal" | "transparent" | "box" | null | undefined;
+    maxWidth?: "full" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
     sticky?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface DialogContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogContainerVariants> {

package/dist/types/components/disabled-wrap/disabled-wrap.d.ts

@@ -0,0 +1,6 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface DisabledWrapProps extends HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+}
+/** Dims and disables pointer events on its children when `disabled`. */
+export declare function DisabledWrap({ disabled, className, ...props }: DisabledWrapProps): React.ReactElement;

package/dist/types/components/disabled-wrap/index.d.ts

@@ -0,0 +1 @@
+export * from './disabled-wrap';

package/dist/types/components/edit-input/edit-input.d.ts

@@ -3,7 +3,7 @@ import { Input } from '../input';
 import { TextButton } from '../text-button';
 import * as React from "react";
 declare const editLabelHeightVariants: (props?: ({
-    labelHeight?: "xs" | "sm" | "lg" | "md" | null | undefined;
+    labelHeight?: "sm" | "md" | "lg" | "xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Variants = VariantProps<typeof editLabelHeightVariants>;
 export interface EditInputProps extends Omit<React.ComponentProps<typeof Input>, "onChange" | "label" | "size"> {

package/dist/types/components/explorer-links-dropdown/explorer-links-dropdown.d.ts

@@ -1,82 +1,13 @@
-import * as React from "react";
+import type * as React from "react";
 /**
- * Explorer link definition
+ * One explorer destination. The consumer builds the URL — kit does not map
+ * chain IDs to explorers.
  */
 export interface ExplorerLink {
-    /**
-     * Display name for the explorer
-     */
+    /** Display name for the explorer. */
     name: string;
-    /**
-     * URL to the explorer
-     */
+    /** Full URL to open. */
     url: string;
-    /**
-     * Optional icon
-     */
+    /** Optional icon. */
     icon?: React.ReactNode;
 }
-export interface ExplorerLinksDropdownProps {
-    /**
-     * Custom explorer links (overrides chain-based detection)
-     */
-    explorerLinks?: ExplorerLink[];
-    /**
-     * Whether the dropdown is open (controlled)
-     */
-    opened?: boolean;
-    /**
-     * Alignment of the dropdown
-     */
-    opens?: "left" | "right";
-    /**
-     * Callback when dropdown closes
-     */
-    onClose?: () => void;
-    /**
-     * Trigger element
-     */
-    title?: React.ReactNode;
-    /**
-     * Address to link to
-     */
-    address?: `0x${string}`;
-    /**
-     * Transaction hash to link to
-     */
-    txHash?: string;
-    /**
-     * Chain ID for explorer detection
-     * @default 1
-     */
-    chainId?: number;
-    /**
-     * Additional CSS class
-     */
-    className?: string;
-    /**
-     * Children (alternative trigger)
-     */
-    children?: React.ReactNode;
-}
-/**
- * ExplorerLinksDropdown — dropdown with links to various block explorers
- *
- * @example
- * ```tsx
- * // For an address
- * <ExplorerLinksDropdown
- *   address="0x..."
- *   chainId={1}
- *   title={<Button variant="ghost">View on Explorer</Button>}
- * />
- *
- * // For a transaction
- * <ExplorerLinksDropdown
- *   txHash="0x..."
- *   chainId={42161}
- *   title="View Transaction"
- * />
- * ```
- */
-export declare function ExplorerLinksDropdown({ explorerLinks, opened, opens, onClose, title, address, txHash, chainId, className, children, }: ExplorerLinksDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/filter/variants.d.ts

@@ -1,3 +1,3 @@
 export declare const filterBlockVariants: (props?: ({
-    variant?: "default" | "ghost" | "outlined" | "elevated" | null | undefined;
+    variant?: "default" | "outlined" | "ghost" | "elevated" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { GraphProps } from './graph';
 import * as React from "react";
 declare const graphViewVariants: (props?: ({
-    variant?: "default" | "ghost" | "outlined" | "elevated" | null | undefined;
+    variant?: "default" | "outlined" | "ghost" | "elevated" | null | undefined;
     size?: "full" | "default" | "sm" | "lg" | "xl" | null | undefined;
     padding?: "none" | "default" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,7 +1,9 @@
-import { ChartOptions, DeepPartial, Time } from 'lightweight-charts';
+import { ChartOptions, DeepPartial, LineStyle, LineWidth, Time, LineStyle as LineStyleEnum } from 'lightweight-charts';
 import { Point, YMeasureUnits } from './formatters';
 import { GraphTooltipProps } from './graph-tooltip';
 import * as React from "react";
+export type SeriesPriceScaleId = "left" | "right";
+export type SeriesChartType = "area" | "line";
 export interface SeriesConfig {
     data: Array<Point>;
     label: string;
@@ -14,6 +16,12 @@ export interface SeriesConfig {
     /** Lower gradient of the area fill */
     bottomColor?: string;
     yMeasureUnit?: YMeasureUnits;
+    /** Price scale when `dualYAxis` is enabled on Graph. */
+    priceScaleId?: SeriesPriceScaleId;
+    /** Render as line (no fill) instead of area. */
+    seriesType?: SeriesChartType;
+    /** Line dash style (line series only). */
+    lineStyle?: LineStyle;
 }
 export type VerticalLineOptions = Partial<{
     color: string;
@@ -23,7 +31,56 @@ export type VerticalLineOptions = Partial<{
     labelBackgroundColor: string;
     labelTextColor: string;
     showLabel: boolean;
+    /**
+     * Text shown only on hover of the line's badge (not rendered inline). Use it
+     * for a longer explanation while the badge itself shows just the value.
+     */
+    tooltipText: string;
 }>;
+/**
+ * Horizontal reference line drawn at a fixed Y (price) value, e.g. a
+ * liquidation price level. Rendered as a native lightweight-charts price line
+ * attached to a series, so it tracks the series' price scale and does not
+ * affect autoscale or tooltips.
+ */
+export interface PriceLineConfig {
+    /** Y value (price) where the horizontal line is drawn. */
+    price: number;
+    /**
+     * Label of the series to attach the line to. When omitted, the line is
+     * attached to the first series that has data (its price scale is used).
+     */
+    seriesLabel?: string;
+    /** Line color. Defaults to the destructive theme color. */
+    color?: string;
+    /** Text shown next to the line on the price axis. */
+    title?: string;
+    /** Line thickness (1–4). Default 1. */
+    lineWidth?: LineWidth;
+    /** Line dash style. Default dashed. */
+    lineStyle?: LineStyleEnum;
+    /** Whether to render the value label on the price axis. Default true. */
+    axisLabelVisible?: boolean;
+}
+/**
+ * Shaded horizontal band drawn between two Y (price) values across the full
+ * width of the chart — e.g. a liquidation "danger zone" below a health-factor
+ * threshold. Rendered behind the series as a lightweight-charts primitive, so
+ * it tracks the series' price scale and does not affect tooltips.
+ */
+export interface PriceZoneConfig {
+    /** Upper price bound. Omit to extend the band to the top of the pane. */
+    priceTop?: number;
+    /** Lower price bound. Omit to extend the band to the bottom of the pane. */
+    priceBottom?: number;
+    /** Fill color — use a translucent value. Defaults to a translucent destructive tint. */
+    color?: string;
+    /**
+     * Label of the series whose price scale the band is drawn against. When
+     * omitted, the first series with data is used.
+     */
+    seriesLabel?: string;
+}
 /**
  * Returns formatted label and value strings for a vertical line tooltip.
  * Used by Graph and by tests.
@@ -32,6 +89,19 @@ export declare function getVerticalLineTooltipContent(opts: VerticalLineOptions,
     labelText: string;
     valueStr: string;
 };
+/** Gap (px) kept between a vertical-line badge and the chart edge. */
+export declare const VERTICAL_LINE_LABEL_EDGE_PADDING = 4;
+/**
+ * Positions a vertical-line badge so it stays centered on its line while never
+ * overflowing the chart. When the badge would clip an edge it is nudged inward
+ * just enough to fit — it keeps `translateX(-50%)` so it stays visually anchored
+ * to the line instead of flipping fully to one side (which looks detached and
+ * crowds neighboring badges).
+ *
+ * `labelWidth` is the measured badge width; until it is known the badge is
+ * simply centered on the line.
+ */
+export declare function getVerticalLineLabelStyle(x: number, containerWidth: number, labelWidth?: number): Pick<React.CSSProperties, "left" | "transform">;
 /**
  * Step-forward interpolation: find the last data point with
  * `time <= crosshairTime` and return its value.
@@ -70,6 +140,17 @@ export interface GraphProps {
         xCoordinate: Time;
         options?: VerticalLineOptions;
     }>;
+    /**
+     * Horizontal reference lines drawn at fixed Y (price) values, e.g. a
+     * liquidation price level. Each line is attached to a series' price scale.
+     */
+    priceLineOptions?: Array<PriceLineConfig>;
+    /**
+     * Shaded horizontal bands (e.g. a liquidation danger zone) drawn behind the
+     * series. Each zone is attached to a series' price scale; finite bounds are
+     * included in the Y autoscale so the band stays visible.
+     */
+    zoneOptions?: Array<PriceZoneConfig>;
     /**
      * Number of decimal places for current value display.
      * If 0, rounds to whole numbers. Default is 4.
@@ -82,6 +163,17 @@ export interface GraphProps {
      * own scale and fills the chart independently.
      */
     useSharedPriceScale?: boolean;
+    /**
+     * When true, renders left and right Y axes using each series'
+     * `priceScaleId` ("left" | "right"). Ignores per-series hidden scales.
+     */
+    dualYAxis?: boolean;
+    /** Preferred default price scale when both left and right are visible. */
+    defaultVisiblePriceScaleId?: SeriesPriceScaleId;
+    /** Optional label for the left Y axis (dualYAxis mode). */
+    leftPriceScaleTitle?: string;
+    /** Optional label for the right Y axis (dualYAxis mode). */
+    rightPriceScaleTitle?: string;
     /**
      * When true (default), shows the current value and date in the top-left corner
      * in single-series mode. Set to false to hide.
@@ -115,10 +207,28 @@ export interface GraphProps {
      * axis drag-to-scale, axis double-click reset, and scroll/drag panning.
      */
     disableZoom?: boolean;
+    /**
+     * When true, the floating value tooltip is not pinned to the latest data
+     * point by default in multi-scale (separate Y axes) mode. The tooltip still
+     * appears while hovering the chart. Has no effect in single/shared-scale
+     * mode, where the default tooltip is already hidden.
+     */
+    hideDefaultTooltip?: 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, disableZoom, }: GraphProps): React.ReactElement;
+export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, priceLineOptions, zoneOptions, currentValueDecimals, useSharedPriceScale, dualYAxis, defaultVisiblePriceScaleId, leftPriceScaleTitle, rightPriceScaleTitle: _rightPriceScaleTitle, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, hideDefaultTooltip, }: GraphProps): React.ReactElement;
+export interface GraphLegendProps {
+    series: Array<SeriesConfig>;
+    onUnselect?: (label: string) => void;
+    /**
+     * When true, the legend is laid out inline (no absolute positioning) so it
+     * can be placed in a toolbar/header slot. When false (default), it overlays
+     * the top-left corner of the chart.
+     */
+    inline?: boolean;
+}
+export declare function GraphLegend({ series, onUnselect, inline, }: GraphLegendProps): React.ReactElement;

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

@@ -1,6 +1,6 @@
 export * from './default-config';
 export { getXFormatter, getXFormatters, getYFormatter, type Point as GraphPoint, type XFormatters, type XMeasureUnits, type YMeasureUnits, } from './formatters';
-export { DEFAULT_SERIES_COLORS, Graph, type GraphProps, getSeriesColorPalette, getVerticalLineTooltipContent, type SeriesColorPalette, type SeriesConfig, type VerticalLineOptions, } from './graph';
+export { DEFAULT_SERIES_COLORS, Graph, GraphLegend, type GraphLegendProps, type GraphProps, getSeriesColorPalette, getVerticalLineLabelStyle, getVerticalLineTooltipContent, type PriceLineConfig, type PriceZoneConfig, type SeriesColorPalette, type SeriesConfig, type VerticalLineOptions, } from './graph';
 export * from './graph-current-value';
 export * from './graph-tooltip';
 export * from './graph-view';