@gearbox-protocol/ui-kit 3.14.0-next.4 → 3.14.0-next.41

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

@@ -0,0 +1,12 @@
+import { Operation, PoolSimulationResult } from '@gearbox-protocol/sdk/preview';
+import { default as React } from 'react';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../../types';
+export interface OperationPreviewContentProps {
+    sdk: GearboxSDKLike;
+    operation: Operation;
+    simulation: PoolSimulationResult | undefined;
+    isSimulating: boolean;
+    wallet: Address;
+}
+export declare function OperationPreviewContent({ sdk, operation, simulation, isSimulating, wallet, }: OperationPreviewContentProps): React.ReactElement;

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

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

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface TransactionConfirmFailureResultProps {
+    readonly title: React.ReactNode;
+    readonly description: React.ReactNode;
+    readonly footerAction?: React.ReactNode;
+    readonly iconSize?: number;
+}
+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,8 @@
+import { default as React } from 'react';
+export interface TransactionConfirmSuccessResultProps {
+    readonly headline: React.ReactNode;
+    readonly subtitle: React.ReactNode;
+    readonly txHashRow?: React.ReactNode;
+    readonly footerAction?: React.ReactNode;
+}
+export declare function TransactionConfirmSuccessResult({ 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,29 @@
+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;
+}
+export interface ProgressStepperProps {
+    readonly steps: ReadonlyArray<ProgressStepperStep>;
+    readonly className?: string;
+}
+/**
+ * Generic progress stepper: a row of dots + labels joined by connectors.
+ *
+ * Layout mirrors {@link TransactionProgressStepper} exactly — each connector is
+ * two half-lines living in the same row as the dot, so the lines butt directly
+ * against the 9px dots. On top of that it supports an optional per-connector
+ * `marker` (centered on the connector midpoint, e.g. a waiting clock) and a
+ * `dashed` connector style, which `TransactionProgressStepper` does not.
+ */
+export declare function ProgressStepper({ steps, className, }: ProgressStepperProps): React.ReactElement;

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { TransactionExecutionStepView } from './transactionExecutionStepTypes';
+export interface TransactionProgressStepperProps {
+    readonly steps: ReadonlyArray<TransactionExecutionStepView>;
+    readonly renderLabel: (step: TransactionExecutionStepView) => React.ReactNode;
+}
+export declare function TransactionProgressStepper({ steps, renderLabel, }: TransactionProgressStepperProps): React.ReactElement;

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

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

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

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './ProgressStepper';
+export * from './TransactionProgressStepper';
+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/confirm/summary/PoolOperationConfirmDetails.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface PoolOperationConfirmDetailsProps {
+    readonly apyLabel?: React.ReactNode;
+    readonly apy?: React.ReactNode;
+    readonly apyLoading?: boolean;
+    readonly poolTvlLabel: React.ReactNode;
+    readonly poolTvl: React.ReactNode;
+    readonly poolUtilizationLabel: React.ReactNode;
+    readonly poolUtilization: React.ReactNode;
+    readonly curatorLabel: React.ReactNode;
+    readonly curatorValue: React.ReactNode;
+    readonly poolLabel: React.ReactNode;
+    readonly poolContractValue: React.ReactNode;
+}
+export declare function PoolOperationConfirmDetails({ apyLabel, apy, apyLoading, poolTvlLabel, poolTvl, poolUtilizationLabel, poolUtilization, curatorLabel, curatorValue, poolLabel, poolContractValue, }: PoolOperationConfirmDetailsProps): React.ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './PoolOperationConfirmDetails';

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

@@ -0,0 +1,17 @@
+/**
+ * Transaction preview + confirm flow (WIP).
+ *
+ * Intentionally NOT re-exported from the main `@gearbox-protocol/ui-kit` entry or
+ * `components/composites/index.ts`. The module is still in development; its final
+ * scope, API shape, and completion timeline are not settled yet.
+ *
+ * Consumers should import only via `@gearbox-protocol/ui-kit/tx-preview` (and documented
+ * deep subpaths). Merging into the root ui-kit barrel is a separate decision once
+ * the module is stable.
+ */
+export * from './components';
+export * from './confirm';
+export * from './operations';
+export * from './state-change';
+export * from './types';
+export * from './utils';

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

@@ -0,0 +1,15 @@
+import { Operation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface OperationBodyProps {
+    sdk: GearboxSDKLike;
+    operation: Operation;
+    /** Wallet whose transfers are highlighted; populated after simulation. */
+    wallet: Address;
+}
+/**
+ * Renders the body of the outer operation (rows only, no card chrome).
+ * Currently handles pool deposit/redeem; credit-facade operations
+ * ({@link OuterFacadeOperation}) are a future branch.
+ */
+export declare function OperationBody({ sdk, operation, wallet }: OperationBodyProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,21 @@
+import { Operation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface OperationsCardProps {
+    sdk: GearboxSDKLike;
+    transaction: Operation;
+    wallet: Address;
+}
+/**
+ * Whether a dedicated custom operation view exists for the parsed transaction.
+ * Drives both whether {@link OperationsCard} renders and whether the raw
+ * transaction card starts expanded. Currently only pool operations have a view.
+ */
+export declare function hasOperationView(tx: Operation): boolean;
+/**
+ * Collapsible card (open by default) for a decoded transaction. Renders the
+ * outer operation in its content. Pool operations have no inner operations, so
+ * the card body is just the operation rows; credit-facade operations will later
+ * render their {@link InnerOperation}s as nested non-collapsible cards here.
+ */
+export declare function OperationsCard({ sdk, transaction, wallet, }: OperationsCardProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import { PoolDepositOperation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface PoolDepositViewProps {
+    sdk: GearboxSDKLike;
+    operation: PoolDepositOperation;
+    /** Wallet whose transfers are highlighted; populated after simulation. */
+    wallet: Address;
+}
+/** Human-readable body of a Gearbox pool deposit operation (rows only). */
+export declare function PoolDepositView({ sdk, operation, wallet, }: PoolDepositViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { Address } from 'viem';
+import { TokenInfo } from '../utils';
+export interface PoolRowProps {
+    pool: TokenInfo;
+    address: Address;
+}
+/** Pool row: shows the pool's human label plus the copyable pool address. */
+export declare function PoolRow({ pool, address }: PoolRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { PoolRedeemOperation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface PoolWithdrawViewProps {
+    sdk: GearboxSDKLike;
+    operation: PoolRedeemOperation;
+    /** Wallet whose transfers are highlighted; populated after simulation. */
+    wallet: Address;
+}
+/** Human-readable body of a Gearbox pool withdraw (redeem) operation (rows only). */
+export declare function PoolWithdrawView({ sdk, operation, wallet, }: PoolWithdrawViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export * from './OperationBody';
+export * from './OperationsCard';
+export * from './PoolDepositView';
+export * from './PoolRow';
+export * from './PoolWithdrawView';

package/dist/types/components/composites/tx-preview/state-change/BalanceChangeGroup.d.ts

@@ -0,0 +1,11 @@
+import { AddressBalanceChanges } from '@gearbox-protocol/sdk/preview';
+import { AddressLabels } from '../components';
+import { GearboxSDKLike } from '../types';
+export interface BalanceChangeGroupProps {
+    sdk: GearboxSDKLike;
+    group: AddressBalanceChanges;
+    /** Resolved labels for the involved addresses (drives the group divider). */
+    labels: AddressLabels;
+}
+/** One labeled section of balance changes for a single address. */
+export declare function BalanceChangeGroup({ sdk, group, labels, }: BalanceChangeGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/composites/tx-preview/state-change/BalanceChangeRow.d.ts

@@ -0,0 +1,14 @@
+import { TokenBalanceChange } from '@gearbox-protocol/sdk/preview';
+import { GearboxSDKLike } from '../types';
+export interface BalanceChangeRowProps {
+    sdk: GearboxSDKLike;
+    change: TokenBalanceChange;
+}
+/**
+ * One token balance change as three grid cells (the parent group owns the shared
+ * grid template so columns line up across rows): the token (symbol + name,
+ * left-aligned and flexible), the struck-through before value with an arrow to
+ * the after value, and the signed diff in brackets. The whole row is colored
+ * green for a positive delta and red for a negative one.
+ */
+export declare function BalanceChangeRow({ sdk, change }: BalanceChangeRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/composites/tx-preview/state-change/PoolStateChangeCard.d.ts

@@ -0,0 +1,18 @@
+import { AddressBalanceChanges, PoolOperation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface PoolStateChangeCardProps {
+    sdk: GearboxSDKLike;
+    /** The decoded pool deposit/redeem operation. */
+    operation: PoolOperation;
+    /** Balance changes grouped by watched address (from a successful simulation). */
+    balanceChanges: AddressBalanceChanges[];
+    /** Wallet whose balances are highlighted. */
+    wallet: Address;
+}
+/**
+ * Pool-specific state-change content: balance changes grouped by address (wallet
+ * and, when distinct, the recipient). Renders content only; the surrounding card
+ * chrome, loading, and error handling live in {@link StateChangeCard}.
+ */
+export declare function PoolStateChangeCard({ sdk, operation, balanceChanges, wallet, }: PoolStateChangeCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/composites/tx-preview/state-change/StateChangeCard.d.ts

@@ -0,0 +1,21 @@
+import { Operation, PoolSimulationResult } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface StateChangeCardProps {
+    sdk: GearboxSDKLike;
+    /** Parsed operation that drives which specific state-change card is shown. */
+    data: Operation;
+    /** Stage-2 simulation outcome; `undefined` while it is loading. */
+    simulation: PoolSimulationResult | undefined;
+    /** Whether the simulation is still running. */
+    isLoading: boolean;
+    /** Wallet whose balances/transfers are highlighted. */
+    wallet: Address;
+}
+/**
+ * Parent card for transaction state changes. Owns the common logic (collapsible
+ * card shell, loading skeleton, card-styled error, and no-data handling) and
+ * decides which specific state-change card to render: pool balance changes,
+ * credit account changes (not yet supported), or the decoded revert reason.
+ */
+export declare function StateChangeCard({ sdk, data, simulation, isLoading, wallet, }: StateChangeCardProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,4 @@
+export * from './BalanceChangeGroup';
+export * from './BalanceChangeRow';
+export * from './PoolStateChangeCard';
+export * from './StateChangeCard';

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

@@ -0,0 +1,19 @@
+import { Address } from 'viem';
+/**
+ * Minimal SDK surface for tx-preview UI + hooks.
+ * Satisfied by verify OnchainSDK and client preview SDK instances.
+ */
+export interface GearboxSDKLike {
+    chainId: number;
+    tokensMeta: {
+        get(address: Address): {
+            symbol?: string;
+            decimals?: number;
+            name?: string;
+        } | undefined;
+    };
+    readonly plugins: {
+        adapters: unknown;
+    };
+    client: unknown;
+}

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

@@ -0,0 +1,16 @@
+import { PoolOperation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { AddressLabels } from '../components';
+import { GearboxSDKLike } from '../types';
+/**
+ * Builds the UI label map for a pool deposit/redeem operation.
+ *
+ * "Our" addresses (wallet, receiver, redeem owner) are flagged `ours: true`; the
+ * pool is labeled with its name and flagged `ours: false`. When the receiver /
+ * owner coincides with the wallet, it is labeled "Your wallet".
+ *
+ * Note: the `ours` flag is a UI-only concept and is derived locally here; it is
+ * intentionally decoupled from the simulation watch set in the SDK preview
+ * `simulate` module.
+ */
+export declare function buildPoolOperationLabels(sdk: GearboxSDKLike, op: PoolOperation, wallet: Address): AddressLabels;

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

@@ -0,0 +1,2 @@
+export * from './addressLabels';
+export * from './poolTokenInfo';

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

@@ -0,0 +1,14 @@
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface TokenInfo {
+    symbol: string;
+    decimals: number;
+    /** Human-readable token/pool name, when available. */
+    name?: string;
+}
+/**
+ * Resolves a token's symbol, decimals and name from `sdk.tokensMeta`, falling
+ * back to a shortened address / 18 decimals when the token is not in the
+ * registry. For pools, the diesel-token meta carries the pool name.
+ */
+export declare function resolveToken(sdk: GearboxSDKLike, address: Address): TokenInfo;

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/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';

package/dist/types/components/help-tip/help-tip.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const iconColorVariants: (props?: ({
-    iconColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
-    iconHoverColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconHoverColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface HelpTipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "title"> {
     /** Tooltip popup content (what appears when hovering the icon). */

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

@@ -13,6 +13,7 @@ export * from './avatar';
 export * from './badge';
 export * from './base-link';
 export * from './block-sync';
+export * from './block-sync-pill';
 export * from './breadcrumbs';
 export * from './button-checkbox';
 export * from './buttons';