@gearbox-protocol/ui-kit 4.0.0-next.3 → 4.0.0-next.31

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

@@ -1,3 +1,4 @@
+import { TokenAmount } from '@gearbox-protocol/sdk/model';
 import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
 import { TokenTemplateProps } from '../../../../token-template';
@@ -5,25 +6,57 @@ declare const rootVariants: (props?: ({
     position?: "first" | "last" | "inBetween" | "solo" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TransactionConfirmAmountFieldProps extends VariantProps<typeof rootVariants> {
+type PrimarySlot = {
+    readonly value: TokenTemplateProps["value"];
+    readonly token?: TokenTemplateProps["token"];
+} | {
+    node: React.ReactNode;
+};
+type SecondarySlot = {
+    readonly valueUSD?: bigint | number;
+} | {
+    node: React.ReactNode;
+};
+/**
+ * Either hand over the SDK's {@link TokenAmount} whole, or fill the two slots
+ * yourself. The slot form stays for the `node` escape hatch and for callers
+ * that have no `TokenAmount` to give.
+ */
+type AmountSource = {
+    /**
+     * Value, token and the USD caption all read off one SDK amount.
+     * `null` means unavailable and renders like any other absent value.
+     */
+    readonly amount: TokenAmount | null;
+    readonly primaryAmount?: undefined;
+    readonly secondaryAmount?: undefined;
+} | {
+    readonly amount?: undefined;
+    readonly primaryAmount: PrimarySlot;
+    readonly secondaryAmount?: SecondarySlot;
+};
+export type TransactionConfirmAmountFieldProps = VariantProps<typeof rootVariants> & AmountSource & {
     readonly label: React.ReactNode;
-    readonly primaryAmount: {
-        readonly value: TokenTemplateProps["value"];
-        readonly token?: TokenTemplateProps["token"];
-    } | {
-        node: React.ReactNode;
-    };
-    readonly secondaryAmount?: {
-        readonly valueUSD?: bigint | number;
-    } | {
-        node: React.ReactNode;
-    };
     readonly loading?: boolean;
     readonly maxLength?: number;
     readonly approximate?: {
         isApproximate?: boolean;
         approximateSymbol?: string;
     };
-}
-export declare function TransactionConfirmAmountField({ label, primaryAmount, secondaryAmount, loading, position, size, maxLength, approximate, }: TransactionConfirmAmountFieldProps): React.ReactElement;
+};
+/**
+ * One SDK amount already carries all three things the field shows: the number,
+ * its token and the dollar value. Callers used to take it apart and hand the
+ * pieces back through two props; passing `amount` lets them stop.
+ *
+ * Takes the whole prop union so the slot form is picked by the discriminant
+ * rather than by a cast — `amount` is `TokenAmount | null`, never `undefined`,
+ * so a caller holding `TokenAmount | undefined` has to say `?? null` and
+ * cannot land here with nothing at all.
+ */
+export declare function resolveAmountSlots(source: AmountSource): {
+    readonly primaryAmount: PrimarySlot;
+    readonly secondaryAmount: SecondarySlot | undefined;
+};
+export declare function TransactionConfirmAmountField(props: TransactionConfirmAmountFieldProps): React.ReactElement;
 export {};

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

@@ -1,2 +1,2 @@
 export * from './constants';
-export * from './TransactionConfirmAmountField';
+export { TransactionConfirmAmountField, type TransactionConfirmAmountFieldProps, } from './TransactionConfirmAmountField';

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

@@ -1,23 +1,27 @@
 import { default as React } from 'react';
-import { TransactionExecutionStepView } from '../stepper/transactionExecutionStepTypes';
-import { TransactionConfirmPhase } from './transactionConfirmPhase';
-export interface TransactionConfirmShellProps {
-    readonly phase?: TransactionConfirmPhase;
-    readonly header?: React.ReactNode;
-    readonly preview: React.ReactNode;
-    readonly previewLoading?: boolean;
-    readonly previewError?: Error | null;
-    readonly previewErrorTitle?: string;
-    readonly previewClassName?: string;
-    readonly execution: React.ReactNode;
-    readonly progressSteps?: ReadonlyArray<TransactionExecutionStepView>;
-    readonly renderProgressStepLabel?: (step: TransactionExecutionStepView) => React.ReactNode;
-    readonly result?: React.ReactNode;
-    readonly className?: string;
-    readonly "data-testid"?: string;
-}
+import { TransactionConfirmShellProps } from './transactionConfirmShellTypes';
 /**
+ * The one card every transaction confirmation renders, on every surface.
  *
- * Base shell component
+ * Callers describe *what the card shows* (`body`) and *how it is framed*
+ * (`mode`); everything else is decided here. This replaces the former
+ * `TransactionConfirmPageView` / `TransactionConfirmModalView` pair, which
+ * differed only in the frame yet each restated the whole prop list.
+ *
+ * Two traps from that pair are closed here rather than left to callers.
+ *
+ * The modal's height clamp is composed with `className` instead of being
+ * replaced by it, so a caller adding a class no longer drops the viewport
+ * clamp and the flex context the scrollable preview depends on by accident.
+ * `cn` is tailwind-merge, so a utility deliberately targeting the same
+ * property still wins — though arbitrary-property syntax such as
+ * `[max-height:50vh]` sits in a different group and will not displace it.
+ *
+ * And a `placeholder` or `error` body pins the phase to `confirm`, so those
+ * two can never be asked for a result view they were never given. Note the
+ * limit of that guarantee: a `ready` body driven to a terminal phase without a
+ * `result` still draws a header and nothing else, exactly as the views it
+ * replaces did. Requiring both halves of `result` is what keeps the promise
+ * whole once a caller opts into one.
  */
-export declare function TransactionConfirmShell({ phase, header, preview, previewLoading, previewError, previewErrorTitle, previewClassName, execution, progressSteps, renderProgressStepLabel, result, className, "data-testid": dataTestId, }: TransactionConfirmShellProps): React.ReactElement;
+export declare function TransactionConfirmShell(props: TransactionConfirmShellProps): React.ReactElement | null;

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

@@ -1,5 +1,5 @@
 export * from './computeTransactionConfirmDialogLayout';
 export * from './constants';
-export * from './TransactionConfirmModalView';
-export * from './TransactionConfirmPageView';
+export * from './TransactionConfirmShell';
 export * from './transactionConfirmPhase';
+export * from './transactionConfirmShellTypes';

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

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

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

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+import { ProgressStepperStep } from '../stepper/ProgressStepper';
+import { TransactionConfirmPhase } from './transactionConfirmPhase';
+/**
+ * How the card is framed. The body is identical in both: `page` drops the card
+ * into page flow, `dialog` puts the same card inside a modal.
+ */
+export type TransactionConfirmShellMode = "page" | "dialog";
+/**
+ * Pre-labelled, ready-to-render steps. The slot no longer restricts step ids
+ * to the execution union: session-plan steppers (agreement/approve/confirm
+ * plus a delayed request/complete tail) carry their own ids and labels, and
+ * visibility is the caller's decision — omit the slot to hide the stepper.
+ */
+export type TransactionConfirmShellStepper = ReadonlyArray<ProgressStepperStep>;
+/**
+ * Shown instead of preview and execution once the phase is terminal.
+ *
+ * Both halves are required on purpose: supplying `result` at all is the
+ * caller's promise that either terminal phase can be rendered. A flow that
+ * cannot fail says so with an explicit `failure: null` rather than by omission,
+ * which would leave `phase: "failure"` with nothing to draw.
+ */
+export interface TransactionConfirmShellResult {
+    readonly success: React.ReactNode;
+    readonly failure: React.ReactNode;
+}
+/**
+ * What the card is showing.
+ *
+ * A discriminated union rather than a handful of loose flags: a caller cannot
+ * ask for a preview and an error at once, and does not have to spell out the
+ * props that mean "nothing here". `placeholder` and `error` also pin the card
+ * to the `confirm` phase, so neither can ask for a result view it did not
+ * supply — the failure mode that produced an empty card before.
+ */
+export type TransactionConfirmShellBody = 
+/**
+ * Nothing to show yet: a spinner and a caption, drawn here so no consumer
+ * has to assemble one. Distinct from `ready`'s `previewLoading`, which is a
+ * skeleton over a preview that already exists.
+ */
+{
+    readonly kind: "loading";
+} | {
+    readonly kind: "error";
+    /**
+     * Required: the discriminant already says the card failed, so the object
+     * has to be there. A caller holding `Error | null` picks this body only
+     * once it has one, and `placeholder` or `ready` while it does not.
+     */
+    readonly error: Error;
+    /** Heading above the error line. Defaults to this library's own copy. */
+    readonly title?: string;
+} | {
+    readonly kind: "ready";
+    readonly preview: React.ReactNode;
+    readonly execution?: React.ReactNode;
+    readonly stepper?: TransactionConfirmShellStepper;
+    readonly result?: TransactionConfirmShellResult;
+    /** This library's skeleton over the preview slot, for a live refetch. */
+    readonly previewLoading?: boolean;
+};
+interface TransactionConfirmShellBase {
+    readonly phase?: TransactionConfirmPhase;
+    readonly title: React.ReactNode;
+    readonly titleAddon?: React.ReactNode;
+    /** Drop the addon once the phase is terminal. */
+    readonly hideTitleAddonOnResult?: boolean;
+    readonly body: TransactionConfirmShellBody;
+    /** Merged onto the outer card; it never replaces the frame's own classes. */
+    readonly className?: string;
+    /**
+     * The scrollable preview column. Defaults to
+     * {@link transactionConfirmPreviewScrollVariants}; compose with it rather
+     * than replacing it, so later changes to the base still carry over.
+     */
+    readonly previewClassName?: string;
+    /** Outer card. The inner content keeps {@link TransactionConfirmDialogTest.root}. */
+    readonly "data-testid"?: string;
+    readonly shellTestId?: string;
+}
+export interface TransactionConfirmShellProps extends TransactionConfirmShellBase {
+    readonly mode: TransactionConfirmShellMode;
+    /** `dialog` only: the modal renders nothing while closed. Ignored on `page`. */
+    readonly open?: boolean;
+    /**
+     * Omit to hide the close control — that is how a surface without one, such
+     * as a verification page, opts out. A `dialog` without it cannot be
+     * dismissed, so pass one unless that is genuinely what you want.
+     *
+     * `mode` is deliberately a plain field rather than a discriminant that would
+     * make this required for dialogs: consumers carry the mode in a variable and
+     * a union would force every one of them to branch at the call site.
+     */
+    readonly onClose?: () => void;
+}
+export {};

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

@@ -17,12 +17,24 @@ export interface CompoundAPYProps {
     /** Strategy base borrow cost in bps. */
     borrowApy?: Bps;
     /** Strategy additional (quota) borrow cost in bps. */
-    additionalBorrowApy?: Bps;
+    quotaRate?: Bps;
     /**
      * Number of decimal places for the total APY string.
      * @default 2
      */
     decimals?: number;
+    /**
+     * Whether the figure carries the yield breakdown on hover.
+     *
+     * Off where the number is already explained — a badge that states one rate
+     * and stops, or a figure something else already wraps in a tooltip of its
+     * own. The incentives icon stays either way; only the hover goes.
+     *
+     * @default true
+     */
+    tooltip?: boolean;
+    /** When `"7d"`, tooltip labels carry the averaging-window suffix. */
+    period?: "7d";
     className?: string;
 }
 /**
@@ -31,4 +43,4 @@ export interface CompoundAPYProps {
  * 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({ apy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundAPY({ apy, maxLeverage, collateralApy, borrowApy, quotaRate, decimals, tooltip, period, className, }: CompoundAPYProps): import("react").JSX.Element;

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

@@ -1,6 +1,6 @@
 import type * as React from "react";
 declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
 export { DialogFooter };

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

@@ -1,6 +1,6 @@
 import type * as React from "react";
 declare const DialogHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
 export { DialogHeader };

package/dist/types/components/dropdown-menu/dropdown-menu-shortcut.d.ts

@@ -1,6 +1,6 @@
 import type * as React from "react";
 declare const DropdownMenuShortcut: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
     displayName: string;
 };
 export { DropdownMenuShortcut };

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

@@ -1,7 +1,7 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import type * as React from "react";
 declare const DropdownMenu: {
-    ({ modal, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    ({ modal, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
     displayName: string;
 };
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -36,5 +36,5 @@ export interface EditInputProps extends Omit<React.ComponentProps<typeof Input>,
  * EditInput — inline editable field: view mode (TextButton + label) or edit mode (Input + arrow submit).
  * Matches interface EditInput structure and styles.
  */
-export declare function EditInput({ label, value, onChange, onSubmit, onEditModeChange, textButtonProps, inputSize, colorTheme, placeholder, inputMode, autoComplete, autoCorrect, type, spellCheck, className, onKeyDown: onKeyDownProp, ...restProps }: EditInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditInput({ label, value, onChange, onSubmit, onEditModeChange, textButtonProps, inputSize, colorTheme, placeholder, inputMode, autoComplete, autoCorrect, type, spellCheck, className, onKeyDown: onKeyDownProp, ...restProps }: EditInputProps): React.JSX.Element;
 export {};

package/dist/types/components/filter/filter-modal.d.ts

@@ -120,4 +120,4 @@ export interface FilterModalProps<T> {
      */
     showSearch?: boolean;
 }
-export declare function FilterModal<T>({ title, state, modalShow, onOpen, onClose, onReset, options, tabbedOptions, onSelect, className, optionsClassName, resetLabel, applyLabel, showApplyButton, showSearch, }: FilterModalProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FilterModal<T>({ title, state, modalShow, onOpen, onClose, onReset, options, tabbedOptions, onSelect, className, optionsClassName, resetLabel, applyLabel, showApplyButton, showSearch, }: FilterModalProps<T>): React.JSX.Element;

package/dist/types/components/formatted-number/formatted-number.d.ts

@@ -18,4 +18,4 @@ export interface FormattedNumberStringProps extends React.HTMLAttributes<HTMLSpa
  * FormattedNumberString — displays a number with optional compact decimal (zeros as repeat count) and tooltip with full value.
  * Matches interface FormattedNumber structure and styles.
  */
-export declare function FormattedNumberString({ value, decimalPartLength, hideZerosIfMore, className, ...props }: FormattedNumberStringProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormattedNumberString({ value, decimalPartLength, hideZerosIfMore, className, ...props }: FormattedNumberStringProps): React.JSX.Element;

package/dist/types/components/graph/default-config.d.ts

@@ -2,6 +2,29 @@ import { AreaSeriesPartialOptions, ChartOptions, DeepPartial } from 'lightweight
 import { VertLineOptions } from './plugins/vertical-line';
 export declare const DEFAULT_AREA_SERIES: AreaSeriesPartialOptions;
 export declare const DEFAULT_VERTICAL_LINE: Partial<VertLineOptions>;
+/** Matches UI `text-sm` so axis tick labels read with the rest of the chrome. */
+export declare const AXIS_FONT_SIZE = 14;
+/**
+ * Price-scale tick density. Higher → more space between labels (fewer ticks).
+ * Lightweight-charts defaults to 2.5, which packs ~12 labels onto a 460px pane.
+ */
+export declare const AXIS_TICK_MARK_DENSITY = 5;
+/**
+ * Pixel inset so a tick sitting on the pane edge is drawn fully inside the
+ * canvas (half the font plus a couple of pixels of breathing room).
+ */
+export declare const AXIS_EDGE_LABEL_PADDING_PX: number;
+/**
+ * Extra air above the top tick so the label does not sit flush with the
+ * chart frame. Larger than the bottom inset because the top edge has no
+ * time-axis chrome to separate it from the container.
+ */
+export declare const AXIS_TOP_LABEL_PADDING_PX: number;
+/**
+ * Horizontal inset so a centred date label (`dd MMM`, ~50px) sits fully
+ * inside the time-scale canvas with a few pixels of air on each side.
+ */
+export declare const AXIS_TIME_EDGE_PADDING_PX = 40;
 /**
  * Gets the default chart options with resolved CSS colors
  * Call this at runtime to ensure CSS variables are properly resolved

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

@@ -22,17 +22,26 @@ export interface AdaptiveYAxisFormatterOptions {
      */
     yScaleMin?: number;
 }
+/**
+ * Compact unit on an already-formatted axis tick. Generic `"token"` / `"none"`
+ * stay bare so charts without a real unit don't render a placeholder.
+ */
+export declare function withYAxisUnit(label: string, unit: YMeasureUnits): string;
+/**
+ * Ratio units (`base / quote`) stay off axis ticks, the crosshair pill, and
+ * tooltip values — the pair belongs in the series title, not after the number.
+ */
+export declare function isRatioUnit(unit: YMeasureUnits): boolean;
 /**
  * Creates an adaptive Y-axis formatter that determines precision dynamically
  * based on visible range to ensure unique labels on the axis.
  * Data point values (like current price label) are shown with full precision.
  * Returns both the formatter and update functions.
  */
-export declare function createAdaptiveYAxisFormatter(initialValues: number[], _unit: YMeasureUnits, options?: AdaptiveYAxisFormatterOptions): {
+export declare function createAdaptiveYAxisFormatter(initialValues: number[], unit: YMeasureUnits, options?: AdaptiveYAxisFormatterOptions): {
     formatter: (price: number) => string;
     tickmarksFormatter: (prices: number[]) => string[];
     updateVisibleRange: (visibleValues: number[]) => void;
-    updateLastValues: (lastValues: number[]) => void;
 };
 export type XMeasureUnits = "time" | "%";
 type XFormatter = (time: Time, symbol: XMeasureUnits | 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" | "outlined" | "ghost" | "elevated" | null | undefined;
+    variant?: "default" | "outlined" | "ghost" | "elevated" | "plain" | 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

@@ -6,6 +6,12 @@ export type SeriesPriceScaleId = "left" | "right";
 export type SeriesChartType = "area" | "line";
 export interface SeriesConfig {
     data: Array<Point>;
+    /**
+     * Stable chart-instance key. Prefer this over `label` so renaming the legend
+     * (e.g. interpolating leverage into the title) updates the existing series
+     * instead of destroying it — which shuffles `seriesRefs` and breaks tooltips.
+     */
+    id?: string;
     label: string;
     /** Line color (area stroke). Alias: prefer `lineColor` for clarity; if both set, `lineColor` wins. */
     color?: string;
@@ -23,6 +29,8 @@ export interface SeriesConfig {
     /** Line dash style (line series only). */
     lineStyle?: LineStyle;
 }
+/** Chart-instance key: stable `id` when set, otherwise the display `label`. */
+export declare function seriesIdentity(series: Pick<SeriesConfig, "id" | "label">): string;
 export type VerticalLineOptions = Partial<{
     color: string;
     labelText: string;
@@ -30,6 +38,10 @@ export type VerticalLineOptions = Partial<{
     width: number;
     labelBackgroundColor: string;
     labelTextColor: string;
+    /**
+     * Time-axis (bottom) badge. Independent of the top overlay, which renders
+     * whenever `labelText`, `value`, or `tooltipText` is set.
+     */
     showLabel: boolean;
     /**
      * Text shown only on hover of the line's badge (not rendered inline). Use it
@@ -47,8 +59,8 @@ 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).
+     * `id` (preferred) or display `label` of the series to attach the line to.
+     * When omitted, the line is attached to the first series that has data.
      */
     seriesLabel?: string;
     /** Line color. Defaults to the destructive theme color. */
@@ -76,8 +88,8 @@ export interface PriceZoneConfig {
     /** 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.
+     * `id` (preferred) or display `label` of the series whose price scale the
+     * band is drawn against. When omitted, the first series with data is used.
      */
     seriesLabel?: string;
 }

package/dist/types/components/graph/y-axis-scale.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Nice Y-axis range: a tick step from the same 1 / 2 / 2.5 / 5 × 10^n family
+ * that lightweight-charts uses, with min/max snapped onto that grid so the
+ * first and last labels sit on the pane edges.
+ */
+export interface PickTickSpanArgs {
+    min: number;
+    max: number;
+    scaleHeightPx: number;
+    fontSizePx: number;
+    tickMarkDensity: number;
+    minMove: number;
+}
+export interface NiceAxisRangeArgs {
+    min: number;
+    max: number;
+    /** Hard floor (e.g. `yScaleMin`, or 0 when the series never goes negative). */
+    floor?: number;
+    scaleHeightPx: number;
+    fontSizePx: number;
+    tickMarkDensity: number;
+    minMove?: number;
+    /** Pixel inset lightweight-charts will add via AutoscaleInfo.margins.below. */
+    edgePaddingPx?: number;
+    /** Pixel inset for AutoscaleInfo.margins.above. Defaults to `edgePaddingPx`. */
+    edgePaddingTopPx?: number;
+}
+export interface NiceAxisRange {
+    min: number;
+    max: number;
+    step: number;
+}
+/**
+ * Smallest price increment the scale should resolve. One thousandth of the
+ * data span, snapped down to a power of ten — coarse enough to stay stable,
+ * fine enough not to cap the tick step the way a hardcoded `0.01` does on
+ * narrow ratio charts.
+ */
+export declare function pickMinMove(range: number): number;
+/**
+ * Tick step lightweight-charts would pick for this visible range.
+ */
+export declare function pickTickSpan({ min, max, scaleHeightPx, fontSizePx, tickMarkDensity, minMove, }: PickTickSpanArgs): number;
+/**
+ * Expand `[min, max]` onto the tick grid so both edges are labelled, matching
+ * the step the library will use once pixel edge-padding is applied.
+ */
+export declare function niceAxisRange({ min: rawMin, max: rawMax, floor, scaleHeightPx, fontSizePx, tickMarkDensity, minMove: minMoveArg, edgePaddingPx, edgePaddingTopPx, }: NiceAxisRangeArgs): NiceAxisRange;

package/dist/types/components/health-factor/health-factor.d.ts

@@ -41,4 +41,4 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
  * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```
  */
-export declare function HealthFactor({ value, debt, decimals, zone, zoneType, className, ...props }: HealthFactorProps): import("react/jsx-runtime").JSX.Element;
+export declare function HealthFactor({ value, debt, decimals, zone, zoneType, className, ...props }: HealthFactorProps): React.JSX.Element;

package/dist/types/components/hf-indicator/hf-indicator.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type HFIndicatorSize = "sm" | "md";
+export interface HFIndicatorProps {
+    /** Pre-formatted health factor, e.g. `"1.05"`. */
+    readonly value: string;
+    /** `md` stands alone on a screen; `sm` fits a one-row banner. */
+    readonly size?: HFIndicatorSize;
+}
+/**
+ * Concentric rings around a health-factor value. Presentation only: the number
+ * arrives formatted, and the colour does not follow it — every caller so far
+ * renders this because the factor is already low.
+ *
+ * The box is the outermost ring, so the component occupies exactly what it
+ * paints and a caller can place it like any other block.
+ */
+export declare function HFIndicator({ value, size, }: HFIndicatorProps): React.ReactElement;

package/dist/types/components/hf-indicator/index.d.ts

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

package/dist/types/components/icons/fa-icon.d.ts

@@ -1,2 +1,2 @@
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
-export declare function FaIcon({ className, ...props }: FontAwesomeIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function FaIcon({ className, ...props }: FontAwesomeIconProps): import("react").JSX.Element;

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

@@ -6,7 +6,7 @@ export * from './assets-list-cell';
 export * from './badge';
 export * from './base';
 export * from './base-link';
-export * from './block-sync-pill';
+export * from './base-table';
 export * from './breadcrumbs';
 export * from './breakpoint-provider';
 export * from './buttons';
@@ -14,6 +14,7 @@ export * from './cards';
 export * from './checkbox';
 export * from './checkbox-item';
 export * from './client-adapters';
+export * from './collateral-allocation-tooltip';
 export * from './composites';
 export * from './compound-apy';
 export * from './confirm-menu';
@@ -33,8 +34,10 @@ export * from './guard';
 export * from './head-cell';
 export * from './health-factor';
 export * from './help-tip';
+export * from './hf-indicator';
 export * from './icon-button';
 export * from './icons';
+export * from './infinite-scroll';
 export * from './input';
 export * from './label';
 export * from './layout';
@@ -44,13 +47,16 @@ export * from './loader';
 export * from './loading';
 export * from './loading-bar';
 export * from './modal';
+export * from './name-cell';
 export * from './navbar-logo';
 export * from './navigation-context';
 export * from './points-icon';
 export * from './pool-points-indicator';
+export * from './radio-group';
 export * from './rounded-image';
 export * from './rwa-feature';
 export * from './rwa-styles';
+export * from './sdk-status-pill';
 export * from './search-line';
 export * from './segmented-control';
 export * from './select';

package/dist/types/components/infinite-scroll/index.d.ts

@@ -0,0 +1 @@
+export * from './infinite-scroll-wrapper';

package/dist/types/components/infinite-scroll/infinite-scroll-wrapper.d.ts

@@ -0,0 +1,11 @@
+import { default as React, PropsWithChildren } from 'react';
+export interface InfiniteScrollWrapperProps {
+    readonly dataLength: number;
+    readonly hasMore: boolean;
+    readonly onNextLoad: () => void;
+}
+/**
+ * List footer that asks for the next page. Presentation only: the caller
+ * owns paging state and `onNextLoad`.
+ */
+export declare function InfiniteScrollWrapper({ hasMore, dataLength, children, onNextLoad, }: PropsWithChildren<InfiniteScrollWrapperProps>): React.ReactElement;

package/dist/types/components/layout/app-footer/app-footer.d.ts

@@ -1,4 +1,3 @@
-import { BlockSyncProps } from '../../../types/footer';
 import * as React from "react";
 /**
  * A single legal/navigation link rendered in {@link AppFooter}.
@@ -30,20 +29,14 @@ export interface AppFooterProps extends React.HTMLAttributes<HTMLElement> {
      */
     year?: number;
     /**
-     * Whether to show the status pill on the far right. Defaults to `true`.
+     * Slot between the copyright and the links — typically a
+     * {@link SyncStatusPill}. The footer knows nothing about what goes in it.
+     *
+     * A slot rather than sync-specific props: the footer used to accept a fixed
+     * `blockSyncProps` shape and render its own pill from it, which made every
+     * change to the indicator a change to the footer's API.
      */
-    showStatus?: boolean;
-    /**
-     * Label rendered inside the status pill. Defaults to `Status`.
-     */
-    statusLabel?: React.ReactNode;
-    /**
-     * When provided, the status pill becomes a live network-synchronization
-     * indicator ({@link BlockSyncPill}): the dot color reflects the time since
-     * the last block update and hovering reveals per-chain block details.
-     * Without it, a static green status pill is rendered.
-     */
-    blockSyncProps?: BlockSyncProps;
+    status?: React.ReactNode;
 }
 /**
  * AppFooter — minimal, Hyperliquid-style footer used by the Gearbox App
@@ -56,7 +49,8 @@ export interface AppFooterProps extends React.HTMLAttributes<HTMLElement> {
  * @example
  * ```tsx
  * <AppFooter />
- * <AppFooter links={myLinks} copyright="© Acme, 2026" showStatus={false} />
+ * <AppFooter links={myLinks} copyright="© Acme, 2026" />
+ * <AppFooter status={<SyncStatusPill {...syncProps} />} />
  * ```
  */
 export declare const AppFooter: React.ForwardRefExoticComponent<AppFooterProps & React.RefAttributes<HTMLElement>>;