@livo-build/kit 0.1.0 → 0.1.6

package/dist/data/useEventSource.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+// Consume a Server-Sent Events stream (e.g. a runtime `sse()` endpoint in your api/).
+// Auto-reconnects (EventSource does), parses JSON payloads, and tears down on unmount.
+export function useEventSource(url, opts = {}) {
+    const [data, setData] = useState(undefined);
+    const [status, setStatus] = useState("connecting");
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!url || opts.enabled === false || typeof EventSource === "undefined") {
+            setStatus("closed");
+            return;
+        }
+        setStatus("connecting");
+        setError(null);
+        const es = new EventSource(url, { withCredentials: opts.withCredentials });
+        const onMsg = (e) => {
+            setStatus("open");
+            try {
+                setData(JSON.parse(e.data));
+            }
+            catch {
+                setData(e.data);
+            }
+        };
+        es.onopen = () => setStatus("open");
+        es.onerror = () => {
+            setStatus("error");
+            setError(new Error("EventSource connection error"));
+        };
+        if (opts.event)
+            es.addEventListener(opts.event, onMsg);
+        else
+            es.onmessage = onMsg;
+        return () => es.close();
+    }, [url, opts.enabled, opts.withCredentials, opts.event]);
+    return { data, status, error };
+}

package/dist/data/useWebSocket.d.ts

@@ -0,0 +1,17 @@
+import { type StreamStatus } from "./useEventSource";
+export interface WebSocketState<T> {
+    /** Last message, JSON-parsed when possible (else the raw string). */
+    data: T | undefined;
+    status: StreamStatus;
+    /** Send a message (objects are JSON-stringified). No-op until the socket is open. */
+    send: (message: unknown) => void;
+}
+export interface UseWebSocketOptions {
+    enabled?: boolean;
+    protocols?: string | string[];
+    /** Reconnect after an unexpected close. Default true. */
+    reconnect?: boolean;
+    /** Reconnect delay in ms (default 2000). */
+    reconnectDelayMs?: number;
+}
+export declare function useWebSocket<T = unknown>(url?: string, opts?: UseWebSocketOptions): WebSocketState<T>;

package/dist/data/useWebSocket.js

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from "react";
+import {} from "./useEventSource";
+// Subscribe to a WebSocket with JSON parsing, an imperative `send`, and optional
+// auto-reconnect. Tears down on unmount / url change.
+export function useWebSocket(url, opts = {}) {
+    const { enabled = true, protocols, reconnect = true, reconnectDelayMs = 2000 } = opts;
+    const [data, setData] = useState(undefined);
+    const [status, setStatus] = useState("connecting");
+    const sockRef = useRef(null);
+    useEffect(() => {
+        if (!url || !enabled || typeof WebSocket === "undefined") {
+            setStatus("closed");
+            return;
+        }
+        let closed = false;
+        let timer;
+        const connect = () => {
+            if (closed)
+                return;
+            setStatus("connecting");
+            const ws = new WebSocket(url, protocols);
+            sockRef.current = ws;
+            ws.onopen = () => setStatus("open");
+            ws.onmessage = (e) => {
+                try {
+                    setData(JSON.parse(typeof e.data === "string" ? e.data : ""));
+                }
+                catch {
+                    setData(e.data);
+                }
+            };
+            ws.onerror = () => setStatus("error");
+            ws.onclose = () => {
+                if (closed)
+                    return;
+                setStatus("closed");
+                if (reconnect)
+                    timer = setTimeout(connect, reconnectDelayMs);
+            };
+        };
+        connect();
+        return () => {
+            closed = true;
+            if (timer)
+                clearTimeout(timer);
+            try {
+                sockRef.current?.close();
+            }
+            catch {
+                /* already closed */
+            }
+            sockRef.current = null;
+        };
+    }, [url, enabled, protocols, reconnect, reconnectDelayMs]);
+    const send = (message) => {
+        const ws = sockRef.current;
+        if (ws && ws.readyState === WebSocket.OPEN)
+            ws.send(typeof message === "string" ? message : JSON.stringify(message));
+    };
+    return { data, status, send };
+}

package/dist/dataviz/Stat.d.ts

@@ -0,0 +1,18 @@
+import "./dataviz.css";
+import { type ReactNode } from "react";
+export interface StatProps {
+    label: ReactNode;
+    value: ReactNode;
+    /** Signed change shown with +/- and up/down color. */
+    change?: number;
+    /** Suffix for the change (default "%"). */
+    changeSuffix?: string;
+    hint?: ReactNode;
+    className?: string;
+}
+export declare function Stat({ label, value, change, changeSuffix, hint, className }: StatProps): import("react").JSX.Element;
+export interface StatGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function StatGroup({ children, className }: StatGroupProps): import("react").JSX.Element;

package/dist/dataviz/Stat.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./dataviz.css";
+import {} from "react";
+import { cx } from "../util";
+// A single dashboard metric: label, big value, optional colored change + hint.
+// Neutral — style via .kit-stat*.
+export function Stat({ label, value, change, changeSuffix = "%", hint, className }) {
+    const dir = change == null ? undefined : change > 0 ? "up" : change < 0 ? "down" : "flat";
+    return (_jsxs("div", { className: cx("kit-stat", className), children: [_jsx("div", { className: "kit-stat-label", children: label }), _jsx("div", { className: "kit-stat-value", children: value }), change != null && (_jsxs("div", { className: "kit-stat-change", "data-dir": dir, children: [change > 0 ? "+" : "", change, changeSuffix] })), hint != null && _jsx("div", { className: "kit-stat-hint", children: hint })] }));
+}
+// A responsive row/grid of <Stat> cards for a dashboard header.
+export function StatGroup({ children, className }) {
+    return _jsx("div", { className: cx("kit-stat-group", className), children: children });
+}

package/dist/dataviz/dataviz.css

@@ -0,0 +1,15 @@
+/* Sparkline + Stat — neutral dashboard primitives. */
+.kit-spark{display:inline-block;vertical-align:middle;overflow:visible}
+
+.kit-stat-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
+.kit-stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--kit-border,#e5e7eb);border-radius:var(--kit-radius,14px);background:var(--kit-bg,#fff);font:inherit}
+.kit-stat-label{font-size:12px;color:var(--kit-muted,#6b7280);text-transform:uppercase;letter-spacing:.03em}
+.kit-stat-value{font-size:22px;font-weight:700;color:var(--kit-fg,#111827);font-variant-numeric:tabular-nums}
+.kit-stat-change{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
+.kit-stat-change[data-dir="up"]{color:var(--kit-up,#15803d)}
+.kit-stat-change[data-dir="down"]{color:var(--kit-down,#b91c1c)}
+.kit-stat-change[data-dir="flat"]{color:var(--kit-muted,#6b7280)}
+.kit-stat-hint{font-size:12px;color:var(--kit-muted,#6b7280)}
+@media (prefers-color-scheme:dark){
+  .kit-stat{--kit-border:#2c2e36;--kit-bg:#15171c;--kit-fg:#f5f5f7}
+}

package/dist/dataviz/index.d.ts

@@ -0,0 +1,2 @@
+export { Sparkline, sparklinePath, type SparklineProps } from "./sparkline";
+export { Stat, StatGroup, type StatProps, type StatGroupProps } from "./Stat";

package/dist/dataviz/index.js

@@ -0,0 +1,2 @@
+export { Sparkline, sparklinePath } from "./sparkline";
+export { Stat, StatGroup } from "./Stat";

package/dist/dataviz/sparkline.d.ts

@@ -0,0 +1,15 @@
+import "./dataviz.css";
+/** Pure: map a value series to an SVG polyline path string in a width×height box. */
+export declare function sparklinePath(data: number[], width: number, height: number): string;
+export interface SparklineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    /** Stroke color. Defaults to green/red by overall direction. */
+    stroke?: string;
+    strokeWidth?: number;
+    /** Fill under the line (e.g. "rgba(22,163,74,.12)"). */
+    fill?: string;
+    className?: string;
+}
+export declare function Sparkline({ data, width, height, stroke, strokeWidth, fill, className }: SparklineProps): import("react").JSX.Element;

package/dist/dataviz/sparkline.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./dataviz.css";
+import { cx } from "../util";
+/** Pure: map a value series to an SVG polyline path string in a width×height box. */
+export function sparklinePath(data, width, height) {
+    const n = data.length;
+    if (n === 0)
+        return "";
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const dx = n > 1 ? width / (n - 1) : 0;
+    return data
+        .map((v, i) => {
+        const x = i * dx;
+        const y = height - ((v - min) / range) * height;
+        return `${i ? "L" : "M"}${x.toFixed(2)} ${y.toFixed(2)}`;
+    })
+        .join(" ");
+}
+// A tiny inline SVG trend line — great in table rows / stat cards. Dependency-free,
+// auto-colored by direction (last vs first). Neutral; override via props or CSS.
+export function Sparkline({ data, width = 100, height = 28, stroke, strokeWidth = 1.5, fill, className }) {
+    const d = sparklinePath(data, width, height);
+    if (!d)
+        return _jsx("svg", { className: cx("kit-spark", className), width: width, height: height });
+    const up = data[data.length - 1] >= data[0];
+    const color = stroke ?? (up ? "var(--kit-up, #16a34a)" : "var(--kit-down, #dc2626)");
+    const area = fill ? `${d} L ${width} ${height} L 0 ${height} Z` : "";
+    return (_jsxs("svg", { className: cx("kit-spark", className), width: width, height: height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", children: [fill && _jsx("path", { d: area, fill: fill, stroke: "none" }), _jsx("path", { d: d, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinejoin: "round", strokeLinecap: "round" })] }));
+}

package/dist/dataviz/sparkline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dataviz/sparkline.test.js

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { sparklinePath } from "./sparkline";
+describe("sparklinePath", () => {
+    it("maps min→bottom and max→top across the width", () => {
+        // data [0,1,2] in a 100×10 box: x at 0,50,100; y at 10 (min), 5, 0 (max)
+        expect(sparklinePath([0, 1, 2], 100, 10)).toBe("M0.00 10.00 L50.00 5.00 L100.00 0.00");
+    });
+    it("flat series sits on the baseline (range guarded)", () => {
+        expect(sparklinePath([5, 5], 10, 10)).toBe("M0.00 10.00 L10.00 10.00");
+    });
+    it("empty data yields an empty path", () => {
+        expect(sparklinePath([], 100, 10)).toBe("");
+    });
+});

package/dist/format.d.ts

@@ -12,5 +12,8 @@ export declare function parseToken(value: string, decimals?: number): bigint;
 export declare function formatUsd(n: number, opts?: {
     compact?: boolean;
 }): string;
+/** Format a market price with sensible precision (big numbers grouped, small ones
+ *  given more decimals). `formatPrice(64210.5)` → "64,210.50"; `formatPrice(0.00001234)` → "0.00001234". */
+export declare function formatPrice(n: number): string;
 /** Short relative time from a unix-seconds (or ms) timestamp. `timeAgo(t)` → "3m ago". */
 export declare function timeAgo(ts: number, nowMs?: number): string;

package/dist/format.js

@@ -42,6 +42,15 @@ export function formatUsd(n, opts = {}) {
         maximumFractionDigits: opts.compact ? 2 : undefined,
     }).format(n);
 }
+/** Format a market price with sensible precision (big numbers grouped, small ones
+ *  given more decimals). `formatPrice(64210.5)` → "64,210.50"; `formatPrice(0.00001234)` → "0.00001234". */
+export function formatPrice(n) {
+    if (!isFinite(n))
+        return "—";
+    const abs = Math.abs(n);
+    const digits = abs >= 1000 ? 2 : abs >= 1 ? 2 : abs >= 0.01 ? 4 : 8;
+    return n.toLocaleString("en-US", { minimumFractionDigits: digits <= 2 ? 2 : 0, maximumFractionDigits: digits });
+}
 /** Short relative time from a unix-seconds (or ms) timestamp. `timeAgo(t)` → "3m ago". */
 export function timeAgo(ts, nowMs = Date.now()) {
     const tsMs = ts > 1e12 ? ts : ts * 1000;

package/dist/hooks/index.d.ts

@@ -0,0 +1,20 @@
+/** Copy text to the clipboard; returns [copied, copy]. `copied` flips true for ~1.2s. */
+export declare function useCopyToClipboard(): [boolean, (text: string) => void];
+/** State persisted to localStorage (SSR-safe; falls back to in-memory). */
+export declare function useLocalStorage<T>(key: string, initial: T): [T, (value: T) => void];
+/** Debounce a changing value by `ms` milliseconds. */
+export declare function useDebounce<T>(value: T, ms?: number): T;
+export interface CountdownState {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    /** Milliseconds remaining (0 once elapsed). */
+    total: number;
+    /** True once the target time has passed. */
+    done: boolean;
+}
+/** Live countdown to a target (Date, unix seconds, or ms). Ticks every second; stops at 0. */
+export declare function useCountdown(to: Date | number): CountdownState;
+/** Run a callback every `ms` milliseconds. Pass `ms = null` to pause. */
+export declare function useInterval(callback: () => void, ms: number | null): void;

package/dist/hooks/index.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+/** Copy text to the clipboard; returns [copied, copy]. `copied` flips true for ~1.2s. */
+export function useCopyToClipboard() {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(null);
+    const copy = useCallback((text) => {
+        try {
+            navigator.clipboard.writeText(text);
+            setCopied(true);
+            if (timer.current)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), 1200);
+        }
+        catch {
+            /* clipboard unavailable */
+        }
+    }, []);
+    useEffect(() => () => { if (timer.current)
+        clearTimeout(timer.current); }, []);
+    return [copied, copy];
+}
+/** State persisted to localStorage (SSR-safe; falls back to in-memory). */
+export function useLocalStorage(key, initial) {
+    const [value, setValue] = useState(() => {
+        if (typeof window === "undefined")
+            return initial;
+        try {
+            const raw = window.localStorage.getItem(key);
+            return raw ? JSON.parse(raw) : initial;
+        }
+        catch {
+            return initial;
+        }
+    });
+    const set = useCallback((next) => {
+        setValue(next);
+        try {
+            window.localStorage.setItem(key, JSON.stringify(next));
+        }
+        catch {
+            /* storage unavailable / quota */
+        }
+    }, [key]);
+    return [value, set];
+}
+/** Debounce a changing value by `ms` milliseconds. */
+export function useDebounce(value, ms = 300) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(() => {
+        const t = setTimeout(() => setDebounced(value), ms);
+        return () => clearTimeout(t);
+    }, [value, ms]);
+    return debounced;
+}
+function remaining(targetMs) {
+    const total = Math.max(0, targetMs - Date.now());
+    const s = Math.floor(total / 1000);
+    return {
+        days: Math.floor(s / 86400),
+        hours: Math.floor((s % 86400) / 3600),
+        minutes: Math.floor((s % 3600) / 60),
+        seconds: s % 60,
+        total,
+        done: total === 0,
+    };
+}
+/** Live countdown to a target (Date, unix seconds, or ms). Ticks every second; stops at 0. */
+export function useCountdown(to) {
+    const targetMs = to instanceof Date ? to.getTime() : to < 1e12 ? to * 1000 : to;
+    const [state, setState] = useState(() => remaining(targetMs));
+    useEffect(() => {
+        setState(remaining(targetMs));
+        if (targetMs <= Date.now())
+            return;
+        const id = setInterval(() => {
+            const next = remaining(targetMs);
+            setState(next);
+            if (next.done)
+                clearInterval(id);
+        }, 1000);
+        return () => clearInterval(id);
+    }, [targetMs]);
+    return state;
+}
+/** Run a callback every `ms` milliseconds. Pass `ms = null` to pause. */
+export function useInterval(callback, ms) {
+    const saved = useRef(callback);
+    useEffect(() => {
+        saved.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        if (ms == null)
+            return;
+        const id = setInterval(() => saved.current(), ms);
+        return () => clearInterval(id);
+    }, [ms]);
+}

package/dist/hyperliquid/PriceTicker.d.ts

@@ -0,0 +1,11 @@
+import "./hl.css";
+import { type HlQueryOptions } from "./useHyperliquid";
+export interface PriceTickerProps extends HlQueryOptions {
+    coin: string;
+    /** Show the coin symbol before the price. Default true. */
+    showSymbol?: boolean;
+    /** Prefix (e.g. "$"). Default "$". */
+    prefix?: string;
+    className?: string;
+}
+export declare function PriceTicker({ coin, showSymbol, prefix, className, ...opts }: PriceTickerProps): import("react").JSX.Element;

package/dist/hyperliquid/PriceTicker.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./hl.css";
+import { useEffect, useRef } from "react";
+import { useHlPrice } from "./useHyperliquid";
+import { formatPrice } from "../format";
+import { cx } from "../util";
+// Live Hyperliquid price for a coin, flashing green/red on up/down ticks. Neutral —
+// style via .kit-ticker[data-dir]. No key needed (public market data).
+export function PriceTicker({ coin, showSymbol = true, prefix = "$", className, ...opts }) {
+    const { data: price } = useHlPrice(coin, opts);
+    const prev = useRef(undefined);
+    const dir = price !== undefined && prev.current !== undefined
+        ? price > prev.current
+            ? "up"
+            : price < prev.current
+                ? "down"
+                : "flat"
+        : "flat";
+    useEffect(() => {
+        if (price !== undefined)
+            prev.current = price;
+    }, [price]);
+    return (_jsxs("span", { className: cx("kit-ticker", className), "data-dir": dir, children: [showSymbol && _jsx("span", { className: "kit-ticker-sym", children: coin }), _jsx("span", { className: "kit-ticker-px", children: price !== undefined ? prefix + formatPrice(price) : "—" })] }));
+}

package/dist/hyperliquid/client.d.ts

@@ -0,0 +1,9 @@
+export declare const HL_MAINNET = "https://api.hyperliquid.xyz";
+export declare const HL_TESTNET = "https://api.hyperliquid-testnet.xyz";
+export interface HlOptions {
+    testnet?: boolean;
+    /** Override the API base URL (e.g. a CORS proxy). */
+    baseUrl?: string;
+}
+/** POST a body to the Hyperliquid `info` endpoint and return the parsed JSON. */
+export declare function hlInfo<T = unknown>(body: Record<string, unknown>, opts?: HlOptions): Promise<T>;

package/dist/hyperliquid/client.js

@@ -0,0 +1,17 @@
+// Frontend-safe Hyperliquid client. Reads the public `info` endpoint directly from
+// the browser — no key, no SDK, no deps. (For TRADING, route orders through your
+// api/ Worker using @livo-build/runtime's Hyperliquid, which signs server-side.)
+export const HL_MAINNET = "https://api.hyperliquid.xyz";
+export const HL_TESTNET = "https://api.hyperliquid-testnet.xyz";
+/** POST a body to the Hyperliquid `info` endpoint and return the parsed JSON. */
+export async function hlInfo(body, opts = {}) {
+    const base = opts.baseUrl ?? (opts.testnet ? HL_TESTNET : HL_MAINNET);
+    const res = await fetch(base + "/info", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
+    });
+    if (!res.ok)
+        throw new Error("Hyperliquid info " + res.status);
+    return (await res.json());
+}

package/dist/hyperliquid/hl.css

@@ -0,0 +1,10 @@
+/* Hyperliquid price ticker. Neutral; restyle via .kit-ticker[data-dir]. */
+.kit-ticker{display:inline-flex;align-items:baseline;gap:6px;font:inherit;font-variant-numeric:tabular-nums;transition:color .3s}
+.kit-ticker-sym{color:var(--kit-muted,#6b7280);font-weight:600;font-size:.85em}
+.kit-ticker-px{font-weight:700}
+.kit-ticker[data-dir="up"]{color:var(--kit-up,#15803d)}
+.kit-ticker[data-dir="down"]{color:var(--kit-down,#b91c1c)}
+@media (prefers-color-scheme:dark){
+  .kit-ticker[data-dir="up"]{color:var(--kit-up,#4ade80)}
+  .kit-ticker[data-dir="down"]{color:var(--kit-down,#f87171)}
+}

package/dist/hyperliquid/index.d.ts

@@ -0,0 +1,3 @@
+export { hlInfo, HL_MAINNET, HL_TESTNET, type HlOptions } from "./client";
+export { useHlMids, useHlPrice, useHlCandles, useHlOrderBook, useHlPositions, type HlQueryOptions, type HlResult, type HlCandle, type HlCandleInterval, type HlBook, type HlBookLevel, type HlPosition, type HlClearinghouseState, type UseHlCandlesParams, } from "./useHyperliquid";
+export { PriceTicker, type PriceTickerProps } from "./PriceTicker";

package/dist/hyperliquid/index.js

@@ -0,0 +1,3 @@
+export { hlInfo, HL_MAINNET, HL_TESTNET } from "./client";
+export { useHlMids, useHlPrice, useHlCandles, useHlOrderBook, useHlPositions, } from "./useHyperliquid";
+export { PriceTicker } from "./PriceTicker";

package/dist/hyperliquid/useHyperliquid.d.ts

@@ -0,0 +1,76 @@
+import { type HlOptions } from "./client";
+export interface HlQueryOptions extends HlOptions {
+    /** Poll interval in ms (default 6000). Pass false to fetch once. */
+    refetchInterval?: number | false;
+    enabled?: boolean;
+}
+export interface HlResult<T> {
+    data: T | undefined;
+    error: Error | null;
+    isLoading: boolean;
+    refetch: () => void;
+}
+export type HlCandleInterval = "1m" | "3m" | "5m" | "15m" | "30m" | "1h" | "2h" | "4h" | "8h" | "12h" | "1d" | "3d" | "1w" | "1M";
+export interface HlCandle {
+    t: number;
+    T: number;
+    s: string;
+    i: string;
+    o: string;
+    c: string;
+    h: string;
+    l: string;
+    v: string;
+    n: number;
+}
+export interface HlBookLevel {
+    px: string;
+    sz: string;
+    n: number;
+}
+export interface HlBook {
+    coin: string;
+    time: number;
+    levels: [HlBookLevel[], HlBookLevel[]];
+}
+export interface HlPosition {
+    coin: string;
+    szi: string;
+    entryPx?: string;
+    positionValue?: string;
+    unrealizedPnl?: string;
+    leverage?: {
+        type: string;
+        value: number;
+    };
+    [k: string]: unknown;
+}
+export interface HlClearinghouseState {
+    assetPositions: Array<{
+        type: string;
+        position: HlPosition;
+    }>;
+    marginSummary: {
+        accountValue: string;
+        totalNtlPos: string;
+        totalRawUsd: string;
+    };
+    withdrawable: string;
+    [k: string]: unknown;
+}
+/** All mid prices, keyed by coin symbol (string values). Polls live. */
+export declare function useHlMids(opts?: HlQueryOptions): HlResult<Record<string, string>>;
+/** Live mid price for one coin (number), sharing the allMids cache across tickers. */
+export declare function useHlPrice(coin?: string, opts?: HlQueryOptions): HlResult<number>;
+export interface UseHlCandlesParams {
+    coin: string;
+    interval?: HlCandleInterval;
+    /** How far back from now to load. Default 24h. */
+    lookbackMs?: number;
+}
+/** Recent candles for a coin/interval. */
+export declare function useHlCandles(params: UseHlCandlesParams, opts?: HlQueryOptions): HlResult<HlCandle[]>;
+/** L2 order book (bids, asks) for a coin. */
+export declare function useHlOrderBook(coin?: string, opts?: HlQueryOptions): HlResult<HlBook>;
+/** A user's perp account state — positions, margin, withdrawable. */
+export declare function useHlPositions(address?: string, opts?: HlQueryOptions): HlResult<HlClearinghouseState>;

package/dist/hyperliquid/useHyperliquid.js

@@ -0,0 +1,52 @@
+import { useQuery } from "@tanstack/react-query";
+import { hlInfo } from "./client";
+function wrap(q) {
+    return { data: q.data, error: q.error ?? null, isLoading: q.isLoading, refetch: () => void q.refetch() };
+}
+const DEFAULT_POLL = 6000;
+/** All mid prices, keyed by coin symbol (string values). Polls live. */
+export function useHlMids(opts = {}) {
+    return wrap(useQuery({
+        queryKey: ["hl-mids", opts.testnet, opts.baseUrl],
+        queryFn: () => hlInfo({ type: "allMids" }, opts),
+        refetchInterval: opts.refetchInterval ?? DEFAULT_POLL,
+        enabled: opts.enabled ?? true,
+    }));
+}
+/** Live mid price for one coin (number), sharing the allMids cache across tickers. */
+export function useHlPrice(coin, opts = {}) {
+    const m = useHlMids({ ...opts, enabled: opts.enabled ?? Boolean(coin) });
+    const raw = coin ? m.data?.[coin] : undefined;
+    return { data: raw !== undefined ? Number(raw) : undefined, error: m.error, isLoading: m.isLoading, refetch: m.refetch };
+}
+/** Recent candles for a coin/interval. */
+export function useHlCandles(params, opts = {}) {
+    const { coin, interval = "1h", lookbackMs = 86400000 } = params;
+    return wrap(useQuery({
+        queryKey: ["hl-candles", coin, interval, lookbackMs, opts.testnet],
+        queryFn: () => {
+            const endTime = Date.now();
+            return hlInfo({ type: "candleSnapshot", req: { coin, interval, startTime: endTime - lookbackMs, endTime } }, opts);
+        },
+        refetchInterval: opts.refetchInterval ?? DEFAULT_POLL,
+        enabled: (opts.enabled ?? true) && Boolean(coin),
+    }));
+}
+/** L2 order book (bids, asks) for a coin. */
+export function useHlOrderBook(coin, opts = {}) {
+    return wrap(useQuery({
+        queryKey: ["hl-book", coin, opts.testnet],
+        queryFn: () => hlInfo({ type: "l2Book", coin }, opts),
+        refetchInterval: opts.refetchInterval ?? 3000,
+        enabled: (opts.enabled ?? true) && Boolean(coin),
+    }));
+}
+/** A user's perp account state — positions, margin, withdrawable. */
+export function useHlPositions(address, opts = {}) {
+    return wrap(useQuery({
+        queryKey: ["hl-positions", address, opts.testnet],
+        queryFn: () => hlInfo({ type: "clearinghouseState", user: address }, opts),
+        refetchInterval: opts.refetchInterval ?? DEFAULT_POLL,
+        enabled: (opts.enabled ?? true) && Boolean(address),
+    }));
+}

package/dist/index.d.ts

@@ -2,8 +2,18 @@ export * from "./wallet";
 export * from "./provider";
 export * from "./contracts";
 export * from "./tx";
+export * from "./auth";
 export * from "./toast";
 export * from "./data";
 export * from "./web3";
+export * from "./token";
+export * from "./nft";
+export * from "./dataviz";
+export * from "./user";
+export * from "./hyperliquid";
+export * from "./account";
 export * from "./ui";
+export * from "./telegram";
+export * from "./theme";
+export * from "./hooks";
 export * from "./format";