@gearbox-protocol/ui-kit 3.14.0-next.5 → 3.14.0-next.51

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

@@ -18,21 +18,24 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
     /** Pre-computed zone; if not set, derived from value. */
     zone?: HFZones | null;
     /**
-     * How to indicate zone: "color" (text color only) or "bars" (StatusBars before value).
+     * How to indicate zone: "color" (text color only), "bars" (StatusBars before value),
+     * or "dot" (HealthDot after value, text stays default color).
      * @default "color"
      */
-    zoneType?: "color" | "bars";
+    zoneType?: "color" | "bars" | "dot";
 }
 /**
  * HealthFactor — displays health factor value with optional zone color or StatusBars.
  *
  * @usage
  * Use for account/collateral health: value in basis points, zero debt shows "N/A".
- * zoneType "color" colors the text; zoneType "bars" shows StatusBars (and optional color).
+ * zoneType "color" colors the text; zoneType "bars" shows StatusBars;
+ * zoneType "dot" shows a HealthDot dot after the value while keeping text default color.
  *
  * @example
  * ```tsx
  * <HealthFactor value={15000} debt={1000000n} />
+ * <HealthFactor value={15000} debt={1000000n} zoneType="dot" zone="good" />
  * <HealthFactor value={12000} debt={1000000n} zoneType="bars" zone="medium" />
  * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```

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

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

@@ -0,0 +1,62 @@
+import { BlockSyncProps } from '../../../types/footer';
+import * as React from "react";
+/**
+ * A single legal/navigation link rendered in {@link AppFooter}.
+ */
+export interface AppFooterLink {
+    label: string;
+    href: string;
+}
+/**
+ * Default footer links used by the Gearbox App (client-v3) shell footer.
+ *
+ * `Support` points to the Gearbox Discord invite, matching `DISCORD_ADDR`
+ * in the app config.
+ */
+export declare const DEFAULT_APP_FOOTER_LINKS: ReadonlyArray<AppFooterLink>;
+export interface AppFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Legal / navigation links rendered on the right side.
+     * Defaults to {@link DEFAULT_APP_FOOTER_LINKS}.
+     */
+    links?: ReadonlyArray<AppFooterLink>;
+    /**
+     * Copyright node on the left. Defaults to
+     * `© Gearbox Protocol, {year}`.
+     */
+    copyright?: React.ReactNode;
+    /**
+     * Year used in the default copyright. Defaults to the current year.
+     */
+    year?: number;
+    /**
+     * Whether to show the status pill on the far right. Defaults to `true`.
+     */
+    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;
+}
+/**
+ * AppFooter — minimal, Hyperliquid-style footer used by the Gearbox App
+ * (client-v3): one thin line with copyright on the left and legal links plus a
+ * status pill on the right.
+ *
+ * Presentational port of client-v3 `AppFooter`. All dynamic content is
+ * controlled through props; defaults reproduce the app exactly.
+ *
+ * @example
+ * ```tsx
+ * <AppFooter />
+ * <AppFooter links={myLinks} copyright="© Acme, 2026" showStatus={false} />
+ * ```
+ */
+export declare const AppFooter: React.ForwardRefExoticComponent<AppFooterProps & React.RefAttributes<HTMLElement>>;

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

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

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+export interface AppHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Home link target used by the default logos. Defaults to `/`.
+     */
+    homeHref?: string;
+    /**
+     * Desktop logo block (visible at `lg` and up). Defaults to the full Gearbox
+     * wordmark linking to {@link AppHeaderProps.homeHref}.
+     */
+    desktopLogo?: React.ReactNode;
+    /**
+     * Mobile logo block (visible below `lg`). Defaults to the Gearbox sign mark
+     * linking to {@link AppHeaderProps.homeHref}.
+     */
+    mobileLogo?: React.ReactNode;
+    /**
+     * Mobile menu trigger (hamburger dropdown), visible below `lg`.
+     */
+    mobileMenu?: React.ReactNode;
+    /**
+     * Center navigation tabs — typically a `TabControl`. Visible at `lg` and up.
+     */
+    tabs?: React.ReactNode;
+    /**
+     * Optional actions placed left of the wallet button (e.g. migration button).
+     */
+    actions?: React.ReactNode;
+    /**
+     * Wallet / connect button area, rendered on the right.
+     */
+    wallet?: React.ReactNode;
+    /**
+     * Optional dots menu placed after the wallet (e.g. settings, docs links).
+     */
+    extraMenu?: React.ReactNode;
+    /**
+     * Optional `data-testid` applied to the left side panel.
+     */
+    leftTestId?: string;
+    /**
+     * Optional `data-testid` applied to the center navigation area.
+     */
+    centerTestId?: string;
+    /**
+     * Optional `data-testid` applied to the right side panel.
+     */
+    rightTestId?: string;
+}
+/**
+ * AppHeader — three-column top navigation bar used by the **Gearbox App
+ * (client-v3)** shell: logo on the left, center `TabControl`, and wallet
+ * (plus optional actions) on the right.
+ *
+ * Presentational port of client-v3 `AppBarView`. Dynamic regions are exposed as
+ * slots; the logos default to the exact Gearbox assets used by the app.
+ *
+ * @example
+ * ```tsx
+ * <AppHeader
+ *   mobileMenu={<HamburgerDropdown />}
+ *   tabs={<TabControl state={tabState} tabs={tabs} showBorder={false} />}
+ *   wallet={<Button variant="outline">Connect wallet</Button>}
+ * />
+ * ```
+ */
+export declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/types/components/layout/app-header/index.d.ts

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

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

@@ -1,3 +1,5 @@
+export * from './app-footer';
+export * from './app-header';
 export * from './app-logo';
 export * from './block';
 export * from './col';

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

@@ -28,6 +28,37 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
      *   - pass `asideClassName` to override or augment aside classes (e.g. z-index)
      */
     variant?: "default" | "detail";
+    /**
+     * Hybrid centring for the main column. Only meaningful with
+     * `variant="detail"`.
+     *
+     * - **`≥1520px`** — the main column is centred on the viewport (`mx-auto`),
+     *   capped at `56rem`, with the aside in the left gutter (`absolute`).
+     * - **`lg`…`1519px`** — LP-style in-flow row (aside + main centred as one block).
+     *
+     * On screens below `lg` the layout falls back to the normal stacked column,
+     * so wrap usage in `hidden lg:block` if the mobile layout is handled
+     * separately.
+     */
+    centeredMain?: boolean;
+    /**
+     * Whether the detail-variant aside manages its own sticky / scroll behavior.
+     *
+     * - `true` (default) — ui-kit owns the aside positioning: built-in sticky
+     *   (`top-4`) below `2450px`, `fixed` (`top-28`) at `≥2450px`, plus an
+     *   internal `overflow-y-auto` / `max-h-[100vh]` scroll area.
+     * - `false` — the aside stays in normal document flow at all widths (no
+     *   `fixed`, no internal scroll container), so the page keeps a single
+     *   scrollbar and the consumer can run its own sticky controller. The detail
+     *   centring wrapper + `max-width` cap are preserved. At `≥2450px` the row
+     *   stays a flex row but centres the main column on the viewport
+     *   (`justify-center`, main `80rem`) while the in-flow aside is pulled into
+     *   the gutter via a negative margin — so the content reads centred with the
+     *   form beside it, and the consumer's controller keeps managing stickiness.
+     *
+     * Only meaningful with `variant="detail"` and without `centeredMain`.
+     */
+    stickyAside?: boolean;
 }
 /**
  * MainAsideLayout — main column + optional sidebar in one row.
@@ -54,5 +85,16 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
  * ```
  * This reproduces the `PoolDetailsScreen` two-column layout:
  * sticky aside below 2450 px viewport, fixed aside above it, correct max-widths.
+ *
+ * ### Detail variant — viewport-centred main (`centeredMain`)
+ * ```tsx
+ * <div className="hidden lg:block">
+ *   <MainAsideLayout variant="detail" asidePosition="left" centeredMain aside={<Panel />}>
+ *     <Content />
+ *   </MainAsideLayout>
+ * </div>
+ * ```
+ * Centres the main column on the viewport (up to `56rem`) while the aside sits
+ * in the left gutter from `1520px`; below that the row behaves like LP detail.
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/legal-agreement/index.d.ts

@@ -1 +1,5 @@
-export { type AppName, BlockedRegionDialog, type BlockedRegionDialogProps, createGearboxAppConfig, createLegalAgreementConfig, createPermissionlessInterfaceConfig, createPermissionlessSafeConfig, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogLinks, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementAwaitingPanel, type LegalAgreementAwaitingPanelProps, LegalAgreementAwaitingPanelTest, } from './legal-agreement-awaiting-panel';
+export { BlockedRegionDialog, type BlockedRegionDialogProps, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementLink, type LegalAgreementLinkProps, } from './legal-agreement-link';
+export { LegalAgreementPanel, type LegalAgreementPanelProps, LegalAgreementPanelTest, } from './legal-agreement-panel';
+export { type LegalAgreementThemeVariantProps, type LegalAgreementVisualTheme, legalAgreementAwaitingDescriptionVariants, legalAgreementAwaitingRootVariants, legalAgreementAwaitingTitleVariants, legalAgreementLinkVariants, legalAgreementPanelCheckboxLabelVariants, legalAgreementPanelCheckboxListTitleVariants, legalAgreementPanelCheckboxListVariants, legalAgreementPanelCheckboxRowVariants, legalAgreementPanelNotificationVariants, legalAgreementPanelRootVariants, legalAgreementPanelV2BannerVariants, } from './legal-agreement-theme';

package/dist/types/components/legal-agreement/legal-agreement-awaiting-panel.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementAwaitingPanelTest {
+    static root: string;
+}
+export interface LegalAgreementAwaitingPanelProps {
+    readonly waitingForSignatureText?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementAwaitingPanel({ waitingForSignatureText, theme, }: LegalAgreementAwaitingPanelProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-dialog.d.ts

@@ -1,13 +1,9 @@
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
 import * as React from "react";
 export interface LegalAgreementCheckboxItem {
     id: string;
     content: React.ReactNode;
 }
-export interface LegalAgreementDialogLinks {
-    termsOfService: string;
-    privacyNotice: string;
-    riskDisclosure: string;
-}
 export interface LegalAgreementDialogConfig {
     /**
      * Product/service name (e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App")
@@ -41,6 +37,15 @@ export interface LegalAgreementDialogConfig {
      * Defaults to "Please sign the message in your wallet to agree to the Terms of Service."
      */
     waitingForSignatureText?: string;
+    /**
+     * Notice shown when terms are updated (hasV2Signature is true).
+     * Host app supplies legal copy; ui-kit only renders layout.
+     */
+    updatedTermsNoticeText?: React.ReactNode;
+    /**
+     * Optional heading above checkbox list (e.g. warranty section title).
+     */
+    checkboxListTitle?: React.ReactNode;
 }
 export interface LegalAgreementDialogProps {
     open: boolean;
@@ -50,6 +55,7 @@ export interface LegalAgreementDialogProps {
     hasV2Signature?: boolean;
     isAwaitingSignature?: boolean;
     config: LegalAgreementDialogConfig;
+    theme?: LegalAgreementVisualTheme;
 }
 /**
  * LegalAgreementDialog — dialog component for legal agreement signing.
@@ -77,59 +83,20 @@ export interface LegalAgreementDialogProps {
  * Note: Displays checkboxes for user agreement and handles signing flow.
  * Shows waiting state during signature process.
  *
- * Example usage with helper function:
+ * Example usage — host app supplies config (legal copy is app-owned):
  * ```tsx
- * import { LegalAgreementDialog, createLegalAgreementConfig } from '@gearbox-protocol/ui-kit';
+ * import { LegalAgreementDialog, LegalAgreementLink } from '@gearbox-protocol/ui-kit';
  *
- * const links = {
- *   termsOfService: 'https://gearbox.fi/terms',
- *   privacyNotice: 'https://gearbox.fi/privacy',
- *   riskDisclosure: 'https://gearbox.fi/risks',
+ * const config = {
+ *   productName: 'My App',
+ *   notificationText: <>…your legal copy with <LegalAgreementLink href="…">ToS</LegalAgreementLink>…</>,
+ *   checkboxItems: [{ id: 'consent', content: <>…</> }],
  * };
  *
- * // You can use any app name. For "Permissionless Interface" and "Permissionless Safe"
- * // it uses simplified consent flow. For other names (e.g., "Gearbox App") it uses
- * // extended consent flow with additional checkboxes.
- * const config = createLegalAgreementConfig("Permissionless Interface", links);
- *
- * <LegalAgreementDialog
- *   open={isOpen}
- *   onClose={handleClose}
- *   onSign={handleSign}
- *   isSigning={isSigning}
- *   config={config}
- * />
+ * <LegalAgreementDialog open={isOpen} onClose={handleClose} onSign={handleSign} isSigning={isSigning} config={config} />
  * ```
  */
-export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
-export type AppName = string;
-/**
- * Creates configuration for legal agreement dialog based on app name.
- * @param appName - Name of the application (any string, e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App", etc.)
- * @param links - URLs for legal documents
- * @param options - Optional configuration overrides
- */
-export declare function createLegalAgreementConfig(appName: AppName, links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Interface", links, options) instead
- */
-export declare function createPermissionlessInterfaceConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Safe", links, options) instead
- */
-export declare function createPermissionlessSafeConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Gearbox App", links, options) instead
- */
-export declare function createGearboxAppConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
+export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, theme, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
 export interface BlockedRegionDialogProps {
     open: boolean;
     onClose: () => void;

package/dist/types/components/legal-agreement/legal-agreement-link.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export interface LegalAgreementLinkProps {
+    readonly href: string;
+    readonly children: React.ReactNode;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+/**
+ * Styled external link for legal agreement copy supplied by the host app.
+ */
+export declare function LegalAgreementLink({ href, children, theme, }: LegalAgreementLinkProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-panel.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementPanelTest {
+    static root: string;
+}
+export interface LegalAgreementPanelProps {
+    readonly config: LegalAgreementDialogConfig;
+    readonly checkedItems: Readonly<Record<string, boolean>>;
+    readonly onCheckedChange: (id: string) => void;
+    readonly hasV2Signature?: boolean;
+    readonly showTitle?: boolean;
+    readonly checkboxIdPrefix?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementPanel({ config, checkedItems, onCheckedChange, hasV2Signature, showTitle, checkboxIdPrefix, theme, }: LegalAgreementPanelProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-theme.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+export type LegalAgreementVisualTheme = "default" | "gearboxV3";
+export declare const legalAgreementPanelRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelNotificationVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListVariants: (props?: ({
+    readonly theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxRowVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxLabelVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelV2BannerVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingDescriptionVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementLinkVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LegalAgreementThemeVariantProps = VariantProps<typeof legalAgreementPanelRootVariants>;

package/dist/types/components/legal-agreement/legal-agreement.stories-config.d.ts

@@ -0,0 +1,11 @@
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare function createStoryPermissionlessLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryExtendedLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryRwaLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+/** Storybook-only sample config (single-checkbox flow). Not exported from ui-kit. */
+export declare const storyPermissionlessLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only sample config (three-checkbox flow). Not exported from ui-kit. */
+export declare const storyExtendedLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only RWA sample config. Not exported from ui-kit. */
+export declare const storyRwaLegalConfig: LegalAgreementDialogConfig;

package/dist/types/components/smart-number-input/smart-number-input.d.ts

@@ -71,6 +71,25 @@ export interface SmartNumberInputProps {
      * When provided, the USD equivalent of the current amount is displayed below the input.
      */
     usdPrice?: number;
+    /**
+     * When provided, renders a Health Factor slider in the balance row
+     * (replacing the max amount / "Can borrow" indicator).
+     * Intended for debt inputs where the user wants to target a specific HF.
+     */
+    hfSlider?: HFSliderConfig;
+}
+/** Configuration for the inline Health Factor slider. */
+export interface HFSliderConfig {
+    /** Current target HF as a float (e.g. 1.5 for 150%). */
+    value: number;
+    /** Minimum HF value. @default 1.0 */
+    min?: number;
+    /** Maximum HF value. @default 3.0 */
+    max?: number;
+    /** Slider step. @default 0.01 */
+    step?: number;
+    /** Called when the slider value changes. */
+    onChange: (value: number) => void;
 }
 /**
  * SmartNumberInput — token amount input with balance display (matches interface).

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const tipCardVariants: (props?: ({
-    backgroundColor?: "dark" | "transparent" | "light" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    backgroundColor?: "dark" | "transparent" | "light" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
     textColor?: "unset" | "dark" | "light" | null | undefined;
     borderColor?: "none" | "dark" | "light" | "gradient" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,3 +1,4 @@
+import { LineStyle } from 'lightweight-charts';
 import { RangeButtonsProps } from '../buttons/range-buttons/range-buttons';
 import { YMeasureUnits } from '../graph/formatters';
 import { GraphViewWithDataProps } from '../graph/graph-view';
@@ -26,6 +27,12 @@ export interface GraphData {
     topColor?: string;
     /** Area fill gradient bottom */
     bottomColor?: string;
+    /** Price scale when Graph `dualYAxis` is enabled. */
+    priceScaleId?: "left" | "right";
+    /** Render as line instead of area. */
+    seriesType?: "area" | "line";
+    /** Line dash style (line series). */
+    lineStyle?: LineStyle;
 }
 /**
  * TradingView component props
@@ -61,6 +68,13 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
     graphsWithNoData?: Set<T>;
     /** Set of graph values that are currently loading */
     loadingGraphs?: Set<T>;
+    /**
+     * Explicit loading state. When provided, it takes precedence over the loading
+     * state inferred from `loadingGraphs`/`data`. Use it when the series list is
+     * empty while the underlying query is still pending (otherwise the chart would
+     * briefly show "no data" before data arrives).
+     */
+    isLoading?: boolean;
     /** Message to show when user selects a graph with no data */
     noDataMessage?: string;
     /**
@@ -157,4 +171,4 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
  * />
  * ```
  */
-export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: TradingViewProps<T>): React.ReactElement;
+export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, isLoading: isLoadingProp, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: TradingViewProps<T>): React.ReactElement;

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

@@ -24,6 +24,12 @@ export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDi
     value?: React.ReactNode;
     /** New value shown after an arrow (value → valueTo); the first value is shown with line-through */
     valueTo?: React.ReactNode;
+    /**
+     * When true (default) and valueTo is provided, the old value (value) is rendered in
+     * secondary-foreground color to visually dim it. Set to false to keep the original color
+     * (e.g. for Health Factor which uses zone-based coloring).
+     */
+    dimPreviousValue?: boolean;
     /** Called when the tip icon is hovered */
     onPointerEnterTip?: () => void;
 }

package/dist/types/configs/tailwind-preset.d.ts

@@ -64,6 +64,7 @@ export declare const preset: {
                 "success-hover": string;
                 warning: string;
                 liquidation: string;
+                "liquidation-line": string;
                 border: string;
                 input: string;
                 ring: string;

package/dist/types/hooks/use-filter.d.ts

@@ -23,6 +23,52 @@ export type SortSetterFunction<T> = (field: T, startFromSort?: SortType) => void
  * Hook for managing sort state
  */
 export declare function useSort<T>(initialState?: FilterSortField<T> | null): readonly [FilterSortField<T> | null, SortSetterFunction<T>];
+/**
+ * Ordered list of active sort keys. The first entry is the primary sort key,
+ * the second is the tie-breaker, and so on. An empty array means "no sort".
+ */
+export type MultiSortField<T> = ReadonlyArray<FilterSortField<T>>;
+/** Resolved sort state for a single column inside a {@link MultiSortField}. */
+export interface MultiSortFieldState {
+    /** Sort direction for this field, or `undefined` when the field is inactive. */
+    sort: SortType | undefined;
+    /**
+     * 1-based position of the field within the active sort keys, or `undefined`
+     * when the field is inactive. Use it to render a priority badge (1, 2, …).
+     */
+    priority: number | undefined;
+}
+export type MultiSortSetterFunction<T> = (field: T, startFromSort?: SortType) => void;
+/**
+ * Resolve the direction and priority of a single field within a multi-sort.
+ *
+ * @example
+ * ```tsx
+ * const { sort, priority } = getSortForFields("type", state);
+ * <HeadCell sortDirection={sort} sortPriority={state.length > 1 ? priority : undefined} />
+ * ```
+ */
+export declare const getSortForFields: <T>(field: T, state: MultiSortField<T> | null) => MultiSortFieldState;
+/**
+ * Pure reducer behind {@link useMultiSort}. Each field cycles through three
+ * states on successive clicks: `startFromSort` → the opposite direction →
+ * removed. Clicking a brand-new field makes it the primary key (existing keys
+ * become tie-breakers) and the lowest-priority key is dropped once `maxFields`
+ * is reached.
+ */
+export declare function nextMultiSortState<T>(prev: MultiSortField<T>, field: T, startFromSort?: SortType, maxFields?: number): MultiSortField<T>;
+export interface UseMultiSortOptions {
+    /** Maximum number of simultaneously active sort keys. Defaults to `2`. */
+    maxFields?: number;
+}
+/**
+ * Hook for managing sort state across multiple fields (e.g. sort by `type`,
+ * then by `apy`). Mirrors {@link useSort} but keeps an ordered list of keys.
+ */
+export declare function useMultiSort<T>(initialState?: MultiSortField<T> | null, { maxFields }?: UseMultiSortOptions): readonly [MultiSortField<T>, MultiSortSetterFunction<T>, {
+    readonly removeSortField: (field: T) => void;
+    readonly resetSort: () => void;
+}];
 interface GeneralRangeFilterState {
     state: FilterRange | null;
 }

package/dist/types/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/avatar';
 export * from './components/badge';
 export * from './components/base-link';
 export * from './components/block-sync';
+export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
 export * from './components/button-checkbox';
 export * from './components/buttons';
@@ -142,6 +143,7 @@ export * from './configs/variants';
 export * from './hooks';
 export type { LocaleKeys } from './locale';
 export * from './locale';
+export type { BlockSyncProps } from './types/footer';
 export { EnglishLocale };
 export * from './test-ids';
 export * from './utils';

package/dist/types/locale/en.json.d.ts

@@ -18,6 +18,19 @@ declare const _default: {
   "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
   "components.footer.version": "Version {value}",
 
+  "components.blockSyncPill.syncError": ", sync error",
+  "components.blockSyncPill.syncedAt": ", synced at {time}",
+  "components.blockSyncPill.syncing": ", syncing…",
+
+  "components.creditAccountHistory.table.protocol": "Protocol",
+  "components.creditAccountHistory.table.operation": "Operation",
+  "components.creditAccountHistory.table.details": "Details",
+
+  "components.notificationCenter.empty": "No notifications yet",
+  "components.notificationCenter.requests": "Requests",
+  "components.notificationCenter.recent": "Recent",
+  "components.notificationCenter.clear": "Clear all",
+
   "components.liquidationPrice.check": "Check Area",
 
   "components.loading.loading": "Loading",