@livo-build/kit 0.1.1 → 0.2.0

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

@@ -4,5 +4,17 @@ export declare function useCopyToClipboard(): [boolean, (text: string) => void];
 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

@@ -52,6 +52,36 @@ export function useDebounce(value, ms = 300) {
     }, [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);

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,10 +2,16 @@ 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 "./polymarket";
 export * from "./account";
 export * from "./ui";
 export * from "./telegram";

package/dist/index.js

@@ -5,25 +5,39 @@
 //   wallet/    — ConnectWallet, WalletModal, useWalletConnectors
 //   provider/  — LivoWeb3Provider (wagmi + react-query)
 //   contracts/ — useContractValue, createLivoContracts (bound to Livo's generated bindings)
-//   tx/        — useTx, TxButton, decodeRevert
+//   tx/        — useTx, TxButton, TxProgress, decodeRevert
+//   auth/      — useSiwe, SignInWithEthereum (Sign-In With Ethereum vs a same-origin /api/auth)
 //   toast/     — ToastProvider, useToast
-//   data/      — useApi (same-origin /api/*), useSubgraph (indexer)
-//   web3/      — Address, Balance, NetworkGuard, TokenAmountInput
+//   data/      — useApi, useSubgraph, useCollection + DataTable (search/sort/paginate), useEventSource/useWebSocket (realtime)
+//   web3/      — Address, Balance, NetworkGuard, TokenAmount(Input)
 //   token/     — useToken, useAllowance, useApprove, ApproveButton (ERC-20 + approvals)
+//   nft/       — useNFT, NFTCard, NFTMedia, MintButton (metadata + mint, ipfs-resolved)
+//   dataviz/   — Sparkline (inline SVG trend), Stat + StatGroup (dashboard metrics)
+//   user/      — useUser, UserMenu (wallet + SIWE session + Telegram link, unified)
+//   hyperliquid/ — useHlPrice/Mids/Candles/OrderBook/Positions, PriceTicker (public market data, no key)
 //   account/   — Connected, Disconnected, RequireConnection, useIsConnected, Avatar, Identity
-//   ui/        — Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton
-//   telegram/  — useTelegramMiniApp, useTelegramLink, LinkTelegramButton (link a wallet ↔ Telegram)
+//   ui/        — Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Countdown
+//   telegram/  — useTelegramMiniApp, useTelegramLink, LinkTelegramButton, useTelegramTheme,
+//                useTelegramMainButton/BackButton/Haptics (Mini App + wallet ↔ Telegram linking)
 //   theme/     — KitThemeProvider (restyle the whole kit from one theme object)
-//   hooks/     — useCopyToClipboard, useLocalStorage, useDebounce, useInterval
-//   format     — shortAddress, formatToken, parseToken, formatUsd, timeAgo, …
+//   polymarket/ — useMarkets/useMarket/useMarketTrades/useOrderbook/usePriceHistory/usePlaceOrder,
+//                 MarketsList/MarketCard/OddsBar/OrderTicket (prediction markets via Livo's indexer)
+//   hooks/     — useCopyToClipboard, useLocalStorage, useDebounce, useInterval, useCountdown
+//   format     — shortAddress, formatToken, parseToken, formatUsd, formatPrice, timeAgo, …
 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 "./polymarket";
 export * from "./account";
 export * from "./ui";
 export * from "./telegram";

package/dist/nft/MintButton.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import type { Abi } from "viem";
+export interface MintButtonProps {
+    address: `0x${string}`;
+    abi: Abi;
+    /** Mint function name. Default "mint". */
+    functionName?: string;
+    /** Number to mint. Default 1. Passed as the first arg unless `args` is given. */
+    quantity?: number;
+    /** Price per unit in wei — total value sent = pricePerUnit * quantity. */
+    pricePerUnit?: bigint;
+    /** Explicit args (overrides the default `[quantity]`). */
+    args?: readonly unknown[];
+    className?: string;
+    children?: ReactNode;
+    toast?: boolean;
+    onSuccess?: (hash: `0x${string}`) => void;
+    onError?: (error: Error) => void;
+}
+export declare function MintButton({ address, abi, functionName, quantity, pricePerUnit, args, className, children, toast, onSuccess, onError, }: MintButtonProps): import("react").JSX.Element;

package/dist/nft/MintButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { TxButton } from "../tx/TxButton";
+// A mint button: wraps TxButton with the common shape — value = pricePerUnit ×
+// quantity, args default to [quantity]. Neutral styling (inherits .kit-btn).
+export function MintButton({ address, abi, functionName = "mint", quantity = 1, pricePerUnit, args, className, children, toast, onSuccess, onError, }) {
+    const value = pricePerUnit !== undefined ? pricePerUnit * BigInt(quantity) : undefined;
+    return (_jsx(TxButton, { address: address, abi: abi, functionName: functionName, args: args ?? [BigInt(quantity)], value: value, className: className, toast: toast, onSuccess: onSuccess, onError: onError, children: children ?? `Mint${quantity > 1 ? ` ${quantity}` : ""}` }));
+}

package/dist/nft/NFTCard.d.ts

@@ -0,0 +1,15 @@
+import "./nft.css";
+import { type ReactNode } from "react";
+import { type NftMetadata } from "./useNFT";
+export interface NFTCardProps {
+    address?: `0x${string}`;
+    tokenId?: bigint | number;
+    standard?: "erc721" | "erc1155";
+    gateway?: string;
+    /** Show the trait/attribute chips. Default true. */
+    attributes?: boolean;
+    className?: string;
+    /** Custom render given the loaded metadata (overrides the default body). */
+    children?: (meta: NftMetadata | undefined) => ReactNode;
+}
+export declare function NFTCard({ address, tokenId, standard, gateway, attributes, className, children }: NFTCardProps): import("react").JSX.Element;

package/dist/nft/NFTCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./nft.css";
+import {} from "react";
+import { useNFT } from "./useNFT";
+import { NFTMedia } from "./NFTMedia";
+import { cx } from "../util";
+// A neutral NFT card: media + name + (optional) attribute chips, loaded from the
+// contract's token metadata. Style via the .kit-nft* classes — see STYLING.md.
+export function NFTCard({ address, tokenId, standard, gateway, attributes = true, className, children }) {
+    const { metadata, image, isLoading, error } = useNFT({ address, tokenId, standard, gateway });
+    if (children)
+        return _jsx("div", { className: cx("kit-nft-card", className), children: children(metadata) });
+    return (_jsxs("div", { className: cx("kit-nft-card", className), "data-state": error ? "error" : isLoading ? "loading" : "ready", children: [_jsx(NFTMedia, { src: image, alt: metadata?.name, gateway: gateway }), _jsxs("div", { className: "kit-nft-body", children: [_jsx("div", { className: "kit-nft-name", children: metadata?.name ?? (isLoading ? "Loading…" : error ? "Unavailable" : "Untitled") }), attributes && metadata?.attributes?.length ? (_jsx("div", { className: "kit-nft-traits", children: metadata.attributes.map((a, i) => (_jsxs("span", { className: "kit-nft-trait", children: [a.trait_type ? _jsx("span", { className: "kit-nft-trait-k", children: a.trait_type }) : null, _jsx("span", { className: "kit-nft-trait-v", children: String(a.value) })] }, i))) })) : null] })] }));
+}

package/dist/nft/NFTMedia.d.ts

@@ -0,0 +1,11 @@
+import "./nft.css";
+export interface NFTMediaProps {
+    /** Media URL — ipfs://, ar://, http(s) or data: (resolved automatically). */
+    src?: string;
+    /** Treat as a <video> (autoplay/loop/muted). Default: infer from extension. */
+    video?: boolean;
+    alt?: string;
+    gateway?: string;
+    className?: string;
+}
+export declare function NFTMedia({ src, video, alt, gateway, className }: NFTMediaProps): import("react").JSX.Element;

package/dist/nft/NFTMedia.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./nft.css";
+import { useState } from "react";
+import { resolveUri } from "./resolveUri";
+import { cx } from "../util";
+const VIDEO_RE = /\.(mp4|webm|ogg|mov)(\?|$)/i;
+// Render NFT media from a (possibly ipfs://) URL: <img> or <video>, with a neutral
+// skeleton until it loads and a fallback box on error. Style via .kit-nft-media*.
+export function NFTMedia({ src, video, alt = "", gateway, className }) {
+    const [state, setState] = useState("loading");
+    if (!src)
+        return _jsx("div", { className: cx("kit-nft-media", "kit-nft-media-empty", className) });
+    const url = resolveUri(src, gateway);
+    const isVideo = video ?? VIDEO_RE.test(src);
+    return (_jsx("div", { className: cx("kit-nft-media", className), "data-state": state, children: isVideo ? (_jsx("video", { src: url, autoPlay: true, loop: true, muted: true, playsInline: true, onCanPlay: () => setState("ready"), onError: () => setState("error") })) : (_jsx("img", { src: url, alt: alt, loading: "lazy", onLoad: () => setState("ready"), onError: () => setState("error") })) }));
+}

package/dist/nft/index.d.ts

@@ -0,0 +1,5 @@
+export { useNFT, type UseNFTParams, type NftResult, type NftMetadata, type NftAttribute } from "./useNFT";
+export { NFTMedia, type NFTMediaProps } from "./NFTMedia";
+export { NFTCard, type NFTCardProps } from "./NFTCard";
+export { MintButton, type MintButtonProps } from "./MintButton";
+export { resolveUri } from "./resolveUri";

package/dist/nft/index.js

@@ -0,0 +1,5 @@
+export { useNFT } from "./useNFT";
+export { NFTMedia } from "./NFTMedia";
+export { NFTCard } from "./NFTCard";
+export { MintButton } from "./MintButton";
+export { resolveUri } from "./resolveUri";

package/dist/nft/nft.css

@@ -0,0 +1,16 @@
+/* NFT card + media. Neutral; restyle via these classes or --kit-* vars. */
+.kit-nft-card{display:flex;flex-direction:column;gap:0;border:1px solid var(--kit-border,#e5e7eb);border-radius:var(--kit-radius,14px);overflow:hidden;background:var(--kit-bg,#fff);font:inherit}
+.kit-nft-media{position:relative;aspect-ratio:1/1;background:var(--kit-skeleton,#f1f3f5);overflow:hidden}
+.kit-nft-media img,.kit-nft-media video{width:100%;height:100%;object-fit:cover;display:block}
+.kit-nft-media[data-state="loading"]{animation:kit-nft-pulse 1.2s ease-in-out infinite}
+.kit-nft-media-empty{aspect-ratio:1/1;background:var(--kit-skeleton,#f1f3f5)}
+@keyframes kit-nft-pulse{0%,100%{opacity:1}50%{opacity:.6}}
+.kit-nft-body{display:flex;flex-direction:column;gap:8px;padding:12px}
+.kit-nft-name{font-weight:600;font-size:15px;color:var(--kit-fg,#111827)}
+.kit-nft-traits{display:flex;flex-wrap:wrap;gap:6px}
+.kit-nft-trait{display:inline-flex;gap:4px;align-items:baseline;padding:3px 8px;border-radius:999px;background:var(--kit-skeleton,#f1f3f5);font-size:12px}
+.kit-nft-trait-k{color:var(--kit-muted,#6b7280)}
+.kit-nft-trait-v{font-weight:600;color:var(--kit-fg,#111827)}
+@media (prefers-color-scheme:dark){
+  .kit-nft-card{--kit-border:#2c2e36;--kit-bg:#15171c;--kit-fg:#f5f5f7;--kit-skeleton:#23262e}
+}

package/dist/nft/resolveUri.d.ts

@@ -0,0 +1 @@
+export declare function resolveUri(uri: string, gateway?: string): string;

package/dist/nft/resolveUri.js

@@ -0,0 +1,15 @@
+// Resolve an ipfs:// / ar:// URI to an HTTP(S) URL. http(s)/data URIs pass through.
+// (Mirrors @livo-build/runtime's resolveUri so the kit needs no runtime dependency.)
+export function resolveUri(uri, gateway = "https://ipfs.io/ipfs/") {
+    if (!uri)
+        return uri;
+    if (uri.startsWith("ipfs://")) {
+        let rest = uri.slice("ipfs://".length);
+        if (rest.startsWith("ipfs/"))
+            rest = rest.slice("ipfs/".length);
+        return gateway + rest;
+    }
+    if (uri.startsWith("ar://"))
+        return "https://arweave.net/" + uri.slice("ar://".length);
+    return uri;
+}

package/dist/nft/resolveUri.test.d.ts

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

package/dist/nft/resolveUri.test.js

@@ -0,0 +1,13 @@
+import { describe, it, expect } from "vitest";
+import { resolveUri } from "./resolveUri";
+describe("resolveUri (kit)", () => {
+    it("resolves ipfs:// (and ipfs://ipfs/), ar://, and passes http/data through", () => {
+        expect(resolveUri("ipfs://bafyCID/1.png")).toBe("https://ipfs.io/ipfs/bafyCID/1.png");
+        expect(resolveUri("ipfs://ipfs/bafyCID")).toBe("https://ipfs.io/ipfs/bafyCID");
+        expect(resolveUri("ipfs://CID", "https://x.mypinata.cloud/ipfs/")).toBe("https://x.mypinata.cloud/ipfs/CID");
+        expect(resolveUri("ar://TXID")).toBe("https://arweave.net/TXID");
+        expect(resolveUri("https://cdn/x.png")).toBe("https://cdn/x.png");
+        expect(resolveUri("data:image/svg+xml,<svg/>")).toBe("data:image/svg+xml,<svg/>");
+        expect(resolveUri("")).toBe("");
+    });
+});

package/dist/nft/useNFT.d.ts

@@ -0,0 +1,34 @@
+export interface NftAttribute {
+    trait_type?: string;
+    value?: unknown;
+    [k: string]: unknown;
+}
+export interface NftMetadata {
+    name?: string;
+    description?: string;
+    /** Image URL resolved through the gateway (ipfs:// → https). */
+    image?: string;
+    /** animation_url resolved through the gateway. */
+    animationUrl?: string;
+    attributes?: NftAttribute[];
+    raw: Record<string, unknown>;
+}
+export interface UseNFTParams {
+    /** Collection contract address. */
+    address?: `0x${string}`;
+    tokenId?: bigint | number;
+    /** ERC-1155 reads uri(id); default ERC-721 tokenURI(id). */
+    standard?: "erc721" | "erc1155";
+    /** IPFS gateway base (trailing slash). Default "https://ipfs.io/ipfs/". */
+    gateway?: string;
+}
+export interface NftResult {
+    metadata: NftMetadata | undefined;
+    /** Convenience: the resolved image URL from metadata. */
+    image: string | undefined;
+    /** The on-chain token URI (pre-fetch). */
+    uri: string | undefined;
+    isLoading: boolean;
+    error: Error | null;
+}
+export declare function useNFT(params: UseNFTParams): NftResult;

package/dist/nft/useNFT.js

@@ -0,0 +1,65 @@
+import { useReadContract } from "wagmi";
+import { useQuery } from "@tanstack/react-query";
+import { resolveUri } from "./resolveUri";
+const TOKEN_URI_ABI = [
+    { type: "function", name: "tokenURI", stateMutability: "view", inputs: [{ name: "id", type: "uint256" }], outputs: [{ type: "string" }] },
+    { type: "function", name: "uri", stateMutability: "view", inputs: [{ name: "id", type: "uint256" }], outputs: [{ type: "string" }] },
+];
+function idHex(id) {
+    return id.toString(16).padStart(64, "0");
+}
+async function loadMetadata(uri, gateway, id, standard) {
+    const sub = standard === "erc1155" ? uri.replace(/\{id\}/g, idHex(id)) : uri;
+    const resolved = resolveUri(sub, gateway);
+    let doc;
+    if (resolved.startsWith("data:")) {
+        const comma = resolved.indexOf(",");
+        const header = resolved.slice(5, comma);
+        const body = resolved.slice(comma + 1);
+        doc = JSON.parse(header.includes("base64") ? atob(body) : decodeURIComponent(body));
+    }
+    else {
+        const res = await fetch(resolved);
+        if (!res.ok)
+            throw new Error(`metadata fetch ${res.status}`);
+        doc = (await res.json());
+    }
+    const imageRaw = (doc.image ?? doc.image_url ?? doc.imageUrl);
+    const animRaw = (doc.animation_url ?? doc.animationUrl);
+    return {
+        name: doc.name,
+        description: doc.description,
+        image: imageRaw ? resolveUri(imageRaw, gateway) : undefined,
+        animationUrl: animRaw ? resolveUri(animRaw, gateway) : undefined,
+        attributes: doc.attributes,
+        raw: doc,
+    };
+}
+// Read an NFT's on-chain metadata URI, then fetch + parse it (resolving ipfs:// →
+// gateway for the doc and its image). Works for ERC-721 (tokenURI) and ERC-1155
+// (uri(id) with {id} substitution). Caches via react-query.
+export function useNFT(params) {
+    const { address, tokenId, standard = "erc721", gateway = "https://ipfs.io/ipfs/" } = params;
+    const id = tokenId === undefined ? undefined : BigInt(tokenId);
+    const fn = standard === "erc1155" ? "uri" : "tokenURI";
+    const uriRead = useReadContract({
+        address,
+        abi: TOKEN_URI_ABI,
+        functionName: fn,
+        args: id === undefined ? undefined : [id],
+        query: { enabled: Boolean(address && id !== undefined) },
+    });
+    const uri = uriRead.data;
+    const meta = useQuery({
+        queryKey: ["livo-nft", address, id?.toString(), uri, gateway],
+        queryFn: () => loadMetadata(uri, gateway, id, standard),
+        enabled: Boolean(uri),
+    });
+    return {
+        metadata: meta.data,
+        image: meta.data?.image,
+        uri,
+        isLoading: uriRead.isLoading || meta.isLoading,
+        error: uriRead.error ?? meta.error ?? null,
+    };
+}

package/dist/polymarket/MarketCard.d.ts

@@ -0,0 +1,11 @@
+import "./polymarket.css";
+import type { PmMarket } from "./client";
+export interface MarketCardProps {
+    market: PmMarket;
+    /** Called when the card is clicked (e.g. to open a detail view). */
+    onSelect?: (market: PmMarket) => void;
+    /** Hide the 24h volume footer. */
+    hideStats?: boolean;
+    className?: string;
+}
+export declare function MarketCard({ market, onSelect, hideStats, className }: MarketCardProps): import("react").JSX.Element;