@livo-build/kit 0.1.1 → 0.2.0

package/dist/polymarket/MarketCard.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./polymarket.css";
+import { OddsBar } from "./OddsBar";
+import { formatUsd } from "../format";
+import { cx } from "../util";
+// A compact prediction-market card: icon, question, an odds bar, and 24h volume.
+// Neutral; restyle via .kit-pm-card.
+export function MarketCard({ market, onSelect, hideStats, className }) {
+    const interactive = Boolean(onSelect);
+    return (_jsxs("div", { className: cx("kit-pm-card", interactive && "kit-pm-card--interactive", className), onClick: onSelect ? () => onSelect(market) : undefined, role: interactive ? "button" : undefined, tabIndex: interactive ? 0 : undefined, onKeyDown: interactive
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ")
+                    onSelect(market);
+            }
+            : undefined, children: [_jsxs("div", { className: "kit-pm-card-head", children: [market.icon ? _jsx("img", { className: "kit-pm-card-icon", src: market.icon, alt: "" }) : null, _jsx("span", { className: "kit-pm-card-q", children: market.question })] }), _jsx(OddsBar, { market: market }), !hideStats && (_jsxs("div", { className: "kit-pm-card-stats", children: [_jsxs("span", { children: [formatUsd(market.vol24h), " 24h"] }), market.category ? _jsx("span", { className: "kit-pm-card-cat", children: market.category }) : null] }))] }));
+}

package/dist/polymarket/MarketsList.d.ts

@@ -0,0 +1,13 @@
+import "./polymarket.css";
+import { type PmQueryOptions, type UseMarketsParams } from "./usePolymarket";
+import type { PmMarket } from "./client";
+export interface MarketsListProps extends UseMarketsParams {
+    /** Called when a market card is clicked. */
+    onSelect?: (market: PmMarket) => void;
+    /** Show a search box that filters by question/slug. Default true. */
+    search?: boolean;
+    /** Poll/query options (feedUrl, refetchInterval, …). */
+    queryOptions?: PmQueryOptions;
+    className?: string;
+}
+export declare function MarketsList({ onSelect, search, queryOptions, className, ...filter }: MarketsListProps): import("react").JSX.Element;

package/dist/polymarket/MarketsList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./polymarket.css";
+import { useState } from "react";
+import { useMarkets } from "./usePolymarket";
+import { MarketCard } from "./MarketCard";
+import { cx } from "../util";
+// A live, searchable list of prediction markets from Livo's Polymarket indexer.
+// Neutral; restyle via .kit-pm-list.
+export function MarketsList({ onSelect, search = true, queryOptions, className, ...filter }) {
+    const [q, setQ] = useState("");
+    const { data, isLoading, error } = useMarkets({ ...filter, q: q || filter.q }, queryOptions);
+    return (_jsxs("div", { className: cx("kit-pm-list", className), children: [search && (_jsx("input", { className: "kit-pm-search", placeholder: "Search markets\u2026", value: q, onChange: (e) => setQ(e.target.value) })), error ? (_jsx("div", { className: "kit-pm-empty", children: "Couldn\u2019t load markets." })) : isLoading && !data ? (_jsx("div", { className: "kit-pm-empty", children: "Loading markets\u2026" })) : !data?.length ? (_jsx("div", { className: "kit-pm-empty", children: "No markets." })) : (_jsx("div", { className: "kit-pm-grid", children: data.map((m) => (_jsx(MarketCard, { market: m, onSelect: onSelect }, m.conditionId))) }))] }));
+}

package/dist/polymarket/OddsBar.d.ts

@@ -0,0 +1,9 @@
+import "./polymarket.css";
+import type { PmMarket } from "./client";
+export interface OddsBarProps {
+    market: Pick<PmMarket, "tokens">;
+    /** Show a numeric % label on each segment. Default true. */
+    showLabels?: boolean;
+    className?: string;
+}
+export declare function OddsBar({ market, showLabels, className }: OddsBarProps): import("react").JSX.Element;

package/dist/polymarket/OddsBar.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import "./polymarket.css";
+import { cx } from "../util";
+// A horizontal probability bar — one segment per outcome, width = implied
+// probability (the token mid, 0–1). Neutral; restyle via .kit-pm-odds[data-i].
+export function OddsBar({ market, showLabels = true, className }) {
+    const tokens = market.tokens ?? [];
+    const total = tokens.reduce((s, t) => s + (t.mid || 0), 0) || 1;
+    return (_jsx("div", { className: cx("kit-pm-odds", className), role: "img", "aria-label": "market odds", children: tokens.map((t, i) => {
+            const pct = ((t.mid || 0) / total) * 100;
+            return (_jsx("span", { className: "kit-pm-odds-seg", "data-i": i, style: { width: `${pct}%` }, children: showLabels && pct > 12 && (_jsxs("span", { className: "kit-pm-odds-lbl", children: [t.outcome, " ", Math.round((t.mid || 0) * 100), "%"] })) }, t.tokenId));
+        }) }));
+}

package/dist/polymarket/OrderTicket.d.ts

@@ -0,0 +1,12 @@
+import "./polymarket.css";
+import { type UsePlaceOrderOptions } from "./usePolymarket";
+import type { PmMarket } from "./client";
+export interface OrderTicketProps {
+    market: PmMarket;
+    /** Where to POST the signed order (your api/ Worker). See usePlaceOrder. */
+    order?: UsePlaceOrderOptions;
+    /** Called with the backend response after a successful placement. */
+    onPlaced?: (result: unknown) => void;
+    className?: string;
+}
+export declare function OrderTicket({ market, order, onPlaced, className }: OrderTicketProps): import("react").JSX.Element;

package/dist/polymarket/OrderTicket.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./polymarket.css";
+import { useState } from "react";
+import { usePlaceOrder } from "./usePolymarket";
+import { cx } from "../util";
+// A minimal buy/sell ticket for one market. Picks an outcome + side + price + size,
+// then POSTs to YOUR backend (which signs server-side — no key in the browser).
+// Neutral; restyle via .kit-pm-ticket.
+export function OrderTicket({ market, order, onPlaced, className }) {
+    const tokens = market.tokens ?? [];
+    const [tokenId, setTokenId] = useState(tokens[0]?.tokenId ?? "");
+    const [side, setSide] = useState("BUY");
+    const [price, setPrice] = useState(() => round2(tokens[0]?.mid || 0.5));
+    const [size, setSize] = useState(10);
+    const place = usePlaceOrder(order);
+    const selected = tokens.find((t) => t.tokenId === tokenId);
+    const cost = side === "BUY" ? price * size : 0;
+    const submit = async () => {
+        const res = await place.mutateAsync({ tokenId, side, price, size });
+        onPlaced?.(res);
+    };
+    return (_jsxs("div", { className: cx("kit-pm-ticket", className), children: [_jsx("div", { className: "kit-pm-ticket-q", children: market.question }), _jsx("div", { className: "kit-pm-ticket-outcomes", children: tokens.map((t) => (_jsxs("button", { type: "button", className: cx("kit-pm-outcome", t.tokenId === tokenId && "kit-pm-outcome--on"), onClick: () => {
+                        setTokenId(t.tokenId);
+                        setPrice(round2(t.mid || 0.5));
+                    }, children: [_jsx("span", { children: t.outcome }), _jsxs("span", { className: "kit-pm-outcome-px", children: [Math.round((t.mid || 0) * 100), "\u00A2"] })] }, t.tokenId))) }), _jsx("div", { className: "kit-pm-ticket-side", children: ["BUY", "SELL"].map((s) => (_jsx("button", { type: "button", className: cx("kit-pm-sidebtn", side === s && `kit-pm-sidebtn--${s.toLowerCase()}`), onClick: () => setSide(s), children: s }, s))) }), _jsxs("label", { className: "kit-pm-field", children: [_jsx("span", { children: "Price (\u00A2)" }), _jsx("input", { type: "number", min: 0.01, max: 0.99, step: 0.01, value: price, onChange: (e) => setPrice(clamp(Number(e.target.value), 0.01, 0.99)) })] }), _jsxs("label", { className: "kit-pm-field", children: [_jsx("span", { children: "Shares" }), _jsx("input", { type: "number", min: 1, step: 1, value: size, onChange: (e) => setSize(Math.max(1, Number(e.target.value))) })] }), _jsxs("button", { type: "button", className: "kit-pm-submit", disabled: !selected || place.isPending, onClick: submit, children: [place.isPending ? "Placing…" : `${side} ${size} ${selected?.outcome ?? ""}`, side === "BUY" ? ` · ~$${cost.toFixed(2)}` : ""] }), place.error ? _jsx("div", { className: "kit-pm-ticket-err", children: place.error.message }) : null] }));
+}
+const round2 = (n) => Math.round(n * 100) / 100;
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));

package/dist/polymarket/client.d.ts

@@ -0,0 +1,73 @@
+export declare const POLYMARKET_FEED = "https://polymarket.livo.build";
+export declare const CLOB_HOST = "https://clob.polymarket.com";
+export interface PmFeedOptions {
+    /** Override the indexer base URL. */
+    feedUrl?: string;
+    /** Override the CLOB host (depth + price history). */
+    clobHost?: string;
+}
+export interface PmTokenQuote {
+    outcome: string;
+    tokenId: string;
+    bid: number;
+    ask: number;
+    mid: number;
+    last: number;
+}
+export interface PmMarket {
+    conditionId: string;
+    slug: string;
+    question: string;
+    icon: string;
+    category: string;
+    endDate: string;
+    negRisk: boolean;
+    active: boolean;
+    vol24h: number;
+    liquidity: number;
+    tokens: PmTokenQuote[];
+}
+export interface PmTrade {
+    id: string;
+    conditionId: string;
+    slug: string;
+    question: string;
+    tokenId: string;
+    outcome: string;
+    side: string;
+    price: number;
+    size: number;
+    usd: number;
+    ago: number;
+}
+export interface PmSnapshot {
+    caught_up: boolean;
+    markets_tracked: number;
+    markets: PmMarket[];
+    trades: PmTrade[];
+    [k: string]: unknown;
+}
+export interface PmBookLevel {
+    price: string;
+    size: string;
+}
+export interface PmBook {
+    market?: string;
+    asset_id?: string;
+    bids: PmBookLevel[];
+    asks: PmBookLevel[];
+    [k: string]: unknown;
+}
+export interface PmHistoryPoint {
+    t: number;
+    p: number;
+}
+/** The full indexer snapshot. */
+export declare function pmSnapshot(opts?: PmFeedOptions): Promise<PmSnapshot>;
+/** Order-book depth for an outcome token (straight from the public CLOB). */
+export declare function pmBook(tokenId: string, opts?: PmFeedOptions): Promise<PmBook>;
+/** Price history points for charting an outcome token (public CLOB). */
+export declare function pmPriceHistory(tokenId: string, params?: {
+    interval?: "1h" | "6h" | "1d" | "1w" | "max";
+    fidelity?: number;
+}, opts?: PmFeedOptions): Promise<PmHistoryPoint[]>;

package/dist/polymarket/client.js

@@ -0,0 +1,31 @@
+// Frontend-safe Polymarket client. Reads Livo's Polymarket indexer
+// (polymarket.livo.build) for the normalized markets + odds + trades feed, and the
+// public Polymarket CLOB for order-book depth + price history (both CORS-open, no
+// key). For TRADING, route orders through your api/ Worker (usePlaceOrder), which
+// signs server-side with @livo-build/runtime — never ship a trading key to the browser.
+export const POLYMARKET_FEED = "https://polymarket.livo.build";
+export const CLOB_HOST = "https://clob.polymarket.com";
+const feedBase = (o) => (o?.feedUrl ?? POLYMARKET_FEED).replace(/\/$/, "");
+const clobBase = (o) => (o?.clobHost ?? CLOB_HOST).replace(/\/$/, "");
+async function getJson(url) {
+    const res = await fetch(url, { headers: { accept: "application/json" } });
+    if (!res.ok)
+        throw new Error(`Polymarket ${res.status} for ${url}`);
+    return (await res.json());
+}
+/** The full indexer snapshot. */
+export function pmSnapshot(opts) {
+    return getJson(`${feedBase(opts)}/data`);
+}
+/** Order-book depth for an outcome token (straight from the public CLOB). */
+export function pmBook(tokenId, opts) {
+    return getJson(`${clobBase(opts)}/book?token_id=${encodeURIComponent(tokenId)}`);
+}
+/** Price history points for charting an outcome token (public CLOB). */
+export async function pmPriceHistory(tokenId, params = {}, opts) {
+    const qs = new URLSearchParams({ market: tokenId, interval: params.interval ?? "1w" });
+    if (params.fidelity)
+        qs.set("fidelity", String(params.fidelity));
+    const j = await getJson(`${clobBase(opts)}/prices-history?${qs.toString()}`);
+    return j.history ?? [];
+}

package/dist/polymarket/index.d.ts

@@ -0,0 +1,6 @@
+export { POLYMARKET_FEED, CLOB_HOST, pmSnapshot, pmBook, pmPriceHistory, type PmFeedOptions, type PmMarket, type PmTokenQuote, type PmTrade, type PmSnapshot, type PmBook, type PmBookLevel, type PmHistoryPoint, } from "./client";
+export { useMarkets, useMarket, useMarketTrades, useOrderbook, usePriceHistory, usePlaceOrder, type PmQueryOptions, type PmResult, type UseMarketsParams, type UsePriceHistoryParams, type PlaceOrderInput, type UsePlaceOrderOptions, } from "./usePolymarket";
+export { OddsBar, type OddsBarProps } from "./OddsBar";
+export { MarketCard, type MarketCardProps } from "./MarketCard";
+export { MarketsList, type MarketsListProps } from "./MarketsList";
+export { OrderTicket, type OrderTicketProps } from "./OrderTicket";

package/dist/polymarket/index.js

@@ -0,0 +1,10 @@
+// Polymarket — prediction-market building blocks. Reads Livo's Polymarket indexer
+// (polymarket.livo.build) for live markets/odds/trades + the public CLOB for depth +
+// history. Trading routes through YOUR api/ Worker (usePlaceOrder) so the key stays
+// server-side. Pairs with @livo-build/runtime's `polymarket(env)` + `Polymarket`.
+export { POLYMARKET_FEED, CLOB_HOST, pmSnapshot, pmBook, pmPriceHistory, } from "./client";
+export { useMarkets, useMarket, useMarketTrades, useOrderbook, usePriceHistory, usePlaceOrder, } from "./usePolymarket";
+export { OddsBar } from "./OddsBar";
+export { MarketCard } from "./MarketCard";
+export { MarketsList } from "./MarketsList";
+export { OrderTicket } from "./OrderTicket";

package/dist/polymarket/polymarket.css

@@ -0,0 +1,49 @@
+/* Polymarket components. Neutral; restyle via --kit-* vars or the .kit-pm-* classes. */
+
+/* Odds bar */
+.kit-pm-odds{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;background:var(--kit-surface,#f1f5f9)}
+.kit-pm-odds-seg{display:flex;align-items:center;min-width:0;padding:0 6px;font-size:.75rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
+.kit-pm-odds-seg[data-i="0"]{background:var(--kit-accent,#2563eb)}
+.kit-pm-odds-seg[data-i="1"]{background:var(--kit-muted,#64748b)}
+.kit-pm-odds-seg[data-i="2"]{background:#a855f7}
+.kit-pm-odds-seg[data-i="3"]{background:#f59e0b}
+.kit-pm-odds-lbl{overflow:hidden;text-overflow:ellipsis}
+
+/* Market card */
+.kit-pm-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--kit-border,#e2e8f0);border-radius:12px;background:var(--kit-bg,#fff)}
+.kit-pm-card--interactive{cursor:pointer;transition:border-color .15s,box-shadow .15s}
+.kit-pm-card--interactive:hover{border-color:var(--kit-accent,#2563eb);box-shadow:0 1px 8px rgba(0,0,0,.06)}
+.kit-pm-card-head{display:flex;align-items:center;gap:10px}
+.kit-pm-card-icon{width:28px;height:28px;border-radius:6px;object-fit:cover;flex:none}
+.kit-pm-card-q{font-weight:600;line-height:1.3}
+.kit-pm-card-stats{display:flex;justify-content:space-between;font-size:.8rem;color:var(--kit-muted,#64748b)}
+.kit-pm-card-cat{text-transform:uppercase;letter-spacing:.03em;font-size:.7rem}
+
+/* Markets list */
+.kit-pm-list{display:flex;flex-direction:column;gap:12px}
+.kit-pm-search{padding:10px 12px;border:1px solid var(--kit-border,#e2e8f0);border-radius:10px;font:inherit;background:var(--kit-bg,#fff);color:inherit}
+.kit-pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
+.kit-pm-empty{padding:24px;text-align:center;color:var(--kit-muted,#64748b)}
+
+/* Order ticket */
+.kit-pm-ticket{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--kit-border,#e2e8f0);border-radius:12px;background:var(--kit-bg,#fff);max-width:360px}
+.kit-pm-ticket-q{font-weight:600;line-height:1.3}
+.kit-pm-ticket-outcomes{display:flex;gap:8px;flex-wrap:wrap}
+.kit-pm-outcome{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border:1px solid var(--kit-border,#e2e8f0);border-radius:8px;background:transparent;cursor:pointer;font:inherit;color:inherit}
+.kit-pm-outcome--on{border-color:var(--kit-accent,#2563eb);background:var(--kit-surface,#eff6ff)}
+.kit-pm-outcome-px{font-size:.8rem;color:var(--kit-muted,#64748b);font-weight:700}
+.kit-pm-ticket-side{display:flex;gap:8px}
+.kit-pm-sidebtn{flex:1;padding:8px;border:1px solid var(--kit-border,#e2e8f0);border-radius:8px;background:transparent;cursor:pointer;font:inherit;font-weight:600;color:inherit}
+.kit-pm-sidebtn--buy{border-color:var(--kit-up,#15803d);color:var(--kit-up,#15803d)}
+.kit-pm-sidebtn--sell{border-color:var(--kit-down,#b91c1c);color:var(--kit-down,#b91c1c)}
+.kit-pm-field{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--kit-muted,#64748b)}
+.kit-pm-field input{width:120px;padding:6px 8px;border:1px solid var(--kit-border,#e2e8f0);border-radius:8px;font:inherit;background:var(--kit-bg,#fff);color:inherit;text-align:right}
+.kit-pm-submit{padding:10px;border:none;border-radius:10px;background:var(--kit-accent,#2563eb);color:#fff;font:inherit;font-weight:700;cursor:pointer}
+.kit-pm-submit:disabled{opacity:.55;cursor:default}
+.kit-pm-ticket-err{color:var(--kit-down,#b91c1c);font-size:.8rem}
+
+@media (prefers-color-scheme:dark){
+  .kit-pm-odds{background:var(--kit-surface,#1e293b)}
+  .kit-pm-card,.kit-pm-ticket,.kit-pm-search,.kit-pm-field input{background:var(--kit-bg,#0f172a);border-color:var(--kit-border,#1e293b)}
+  .kit-pm-outcome--on{background:var(--kit-surface,#1e293b)}
+}

package/dist/polymarket/usePolymarket.d.ts

@@ -0,0 +1,59 @@
+import { type PmFeedOptions, type PmMarket, type PmTrade, type PmBook, type PmHistoryPoint } from "./client";
+export interface PmQueryOptions extends PmFeedOptions {
+    /** Poll interval in ms (default 6000). Pass false to fetch once. */
+    refetchInterval?: number | false;
+    enabled?: boolean;
+}
+export interface PmResult<T> {
+    data: T | undefined;
+    error: Error | null;
+    isLoading: boolean;
+    refetch: () => void;
+}
+export interface UseMarketsParams {
+    /** Min 24h volume (USD). */
+    minVol24h?: number;
+    /** Substring match on question/slug. */
+    q?: string;
+    category?: string;
+    limit?: number;
+}
+/** Live markets from the indexer, hottest first, filtered client-side. Polls. */
+export declare function useMarkets(params?: UseMarketsParams, opts?: PmQueryOptions): PmResult<PmMarket[]>;
+/** One market by slug or conditionId. */
+export declare function useMarket(slugOrConditionId?: string, opts?: PmQueryOptions): PmResult<PmMarket | undefined>;
+/** Recent trades firehose from the indexer. */
+export declare function useMarketTrades(params?: {
+    slug?: string;
+    minUsd?: number;
+    limit?: number;
+}, opts?: PmQueryOptions): PmResult<PmTrade[]>;
+/** Order-book depth for an outcome token (public CLOB). */
+export declare function useOrderbook(tokenId?: string, opts?: PmQueryOptions): PmResult<PmBook>;
+export interface UsePriceHistoryParams {
+    tokenId: string;
+    interval?: "1h" | "6h" | "1d" | "1w" | "max";
+    fidelity?: number;
+}
+/** Price history points (0–1) for charting an outcome token. */
+export declare function usePriceHistory(params: UsePriceHistoryParams, opts?: PmQueryOptions): PmResult<PmHistoryPoint[]>;
+export interface PlaceOrderInput {
+    tokenId: string;
+    side: "BUY" | "SELL";
+    price: number;
+    size: number;
+    orderType?: "GTC" | "FOK" | "GTD" | "FAK";
+}
+export interface UsePlaceOrderOptions {
+    /** Your api/ Worker endpoint that signs + relays the order server-side.
+     *  Default "/api/polymarket/order". */
+    endpoint?: string;
+    /** Extra headers (e.g. an auth/session token). */
+    headers?: Record<string, string>;
+}
+/**
+ * Place a Polymarket order by POSTing to YOUR backend (an api/ Worker that signs with
+ * @livo-build/runtime's `Polymarket` and routes through Livo's builder-relay). The
+ * trading key NEVER touches the browser. Returns the backend's JSON response.
+ */
+export declare function usePlaceOrder(opts?: UsePlaceOrderOptions): import("@tanstack/react-query").UseMutationResult<unknown, Error, PlaceOrderInput, unknown>;

package/dist/polymarket/usePolymarket.js

@@ -0,0 +1,97 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { pmSnapshot, pmBook, pmPriceHistory, } from "./client";
+function wrap(q) {
+    return { data: q.data, error: q.error ?? null, isLoading: q.isLoading, refetch: () => void q.refetch() };
+}
+const DEFAULT_POLL = 6000;
+/** Live markets from the indexer, hottest first, filtered client-side. Polls. */
+export function useMarkets(params = {}, opts = {}) {
+    const q = wrap(useQuery({
+        queryKey: ["pm-markets", opts.feedUrl],
+        queryFn: async () => (await pmSnapshot(opts)).markets ?? [],
+        refetchInterval: opts.refetchInterval ?? DEFAULT_POLL,
+        enabled: opts.enabled ?? true,
+    }));
+    let rows = q.data;
+    if (rows) {
+        if (params.minVol24h != null)
+            rows = rows.filter((m) => m.vol24h >= params.minVol24h);
+        if (params.category)
+            rows = rows.filter((m) => m.category.toLowerCase() === params.category.toLowerCase());
+        if (params.q) {
+            const needle = params.q.toLowerCase();
+            rows = rows.filter((m) => m.question.toLowerCase().includes(needle) || m.slug.toLowerCase().includes(needle));
+        }
+        if (params.limit != null)
+            rows = rows.slice(0, params.limit);
+    }
+    return { ...q, data: rows };
+}
+/** One market by slug or conditionId. */
+export function useMarket(slugOrConditionId, opts = {}) {
+    const q = useMarkets({}, { ...opts, enabled: opts.enabled ?? Boolean(slugOrConditionId) });
+    const norm = (s) => s.replace(/^0x/, "").toLowerCase();
+    const market = slugOrConditionId
+        ? q.data?.find((m) => m.slug.toLowerCase() === slugOrConditionId.toLowerCase() || norm(m.conditionId) === norm(slugOrConditionId))
+        : undefined;
+    return { data: market, error: q.error, isLoading: q.isLoading, refetch: q.refetch };
+}
+/** Recent trades firehose from the indexer. */
+export function useMarketTrades(params = {}, opts = {}) {
+    const q = wrap(useQuery({
+        queryKey: ["pm-trades", opts.feedUrl],
+        queryFn: async () => (await pmSnapshot(opts)).trades ?? [],
+        refetchInterval: opts.refetchInterval ?? DEFAULT_POLL,
+        enabled: opts.enabled ?? true,
+    }));
+    let rows = q.data;
+    if (rows) {
+        if (params.slug)
+            rows = rows.filter((t) => t.slug === params.slug);
+        if (params.minUsd != null)
+            rows = rows.filter((t) => t.usd >= params.minUsd);
+        if (params.limit != null)
+            rows = rows.slice(0, params.limit);
+    }
+    return { ...q, data: rows };
+}
+/** Order-book depth for an outcome token (public CLOB). */
+export function useOrderbook(tokenId, opts = {}) {
+    return wrap(useQuery({
+        queryKey: ["pm-book", tokenId, opts.clobHost],
+        queryFn: () => pmBook(tokenId, opts),
+        refetchInterval: opts.refetchInterval ?? 3000,
+        enabled: (opts.enabled ?? true) && Boolean(tokenId),
+    }));
+}
+/** Price history points (0–1) for charting an outcome token. */
+export function usePriceHistory(params, opts = {}) {
+    const { tokenId, interval = "1w", fidelity } = params;
+    return wrap(useQuery({
+        queryKey: ["pm-history", tokenId, interval, fidelity, opts.clobHost],
+        queryFn: () => pmPriceHistory(tokenId, { interval, fidelity }, opts),
+        refetchInterval: opts.refetchInterval ?? 30000,
+        enabled: (opts.enabled ?? true) && Boolean(tokenId),
+    }));
+}
+/**
+ * Place a Polymarket order by POSTing to YOUR backend (an api/ Worker that signs with
+ * @livo-build/runtime's `Polymarket` and routes through Livo's builder-relay). The
+ * trading key NEVER touches the browser. Returns the backend's JSON response.
+ */
+export function usePlaceOrder(opts = {}) {
+    const endpoint = opts.endpoint ?? "/api/polymarket/order";
+    return useMutation({
+        mutationFn: async (order) => {
+            const res = await fetch(endpoint, {
+                method: "POST",
+                headers: { "content-type": "application/json", ...opts.headers },
+                body: JSON.stringify(order),
+            });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(body.error || `order failed: HTTP ${res.status}`);
+            return body;
+        },
+    });
+}

package/dist/telegram/index.d.ts

@@ -1,3 +1,5 @@
 export { useTelegramMiniApp, type TelegramMiniApp } from "./useTelegramMiniApp";
 export { useTelegramLink, type TelegramLinkState, type LinkStatus, type LinkedTelegram, type UseTelegramLinkOptions, } from "./useTelegramLink";
 export { LinkTelegramButton, type LinkTelegramButtonProps } from "./LinkTelegramButton";
+export { useTelegramTheme } from "./useTelegramTheme";
+export { useTelegramMainButton, useTelegramBackButton, useTelegramHaptics, type MainButtonOptions, type Haptics, } from "./miniapp";

package/dist/telegram/index.js

@@ -1,3 +1,5 @@
 export { useTelegramMiniApp } from "./useTelegramMiniApp";
 export { useTelegramLink, } from "./useTelegramLink";
 export { LinkTelegramButton } from "./LinkTelegramButton";
+export { useTelegramTheme } from "./useTelegramTheme";
+export { useTelegramMainButton, useTelegramBackButton, useTelegramHaptics, } from "./miniapp";

package/dist/telegram/miniapp.d.ts

@@ -0,0 +1,15 @@
+export interface MainButtonOptions {
+    text: string;
+    onClick: () => void;
+    show?: boolean;
+    enabled?: boolean;
+    progress?: boolean;
+}
+export declare function useTelegramMainButton(opts: MainButtonOptions): void;
+export declare function useTelegramBackButton(onClick: () => void, show?: boolean): void;
+export interface Haptics {
+    impact: (style?: "light" | "medium" | "heavy" | "rigid" | "soft") => void;
+    notification: (type?: "error" | "success" | "warning") => void;
+    selection: () => void;
+}
+export declare function useTelegramHaptics(): Haptics;

package/dist/telegram/miniapp.js

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+function webApp() {
+    if (typeof window === "undefined")
+        return undefined;
+    return window.Telegram?.WebApp;
+}
+// Drive the Telegram Mini App MainButton from React. No-op outside Telegram.
+export function useTelegramMainButton(opts) {
+    const cbRef = useRef(opts.onClick);
+    cbRef.current = opts.onClick;
+    useEffect(() => {
+        const mb = webApp()?.MainButton;
+        if (!mb)
+            return;
+        const handler = () => cbRef.current();
+        mb.setText(opts.text);
+        if (opts.enabled === false)
+            mb.disable();
+        else
+            mb.enable();
+        if (opts.progress)
+            mb.showProgress?.();
+        else
+            mb.hideProgress?.();
+        if (opts.show === false)
+            mb.hide();
+        else
+            mb.show();
+        mb.onClick(handler);
+        return () => {
+            mb.offClick(handler);
+            mb.hide();
+        };
+    }, [opts.text, opts.show, opts.enabled, opts.progress]);
+}
+// Drive the Telegram Mini App BackButton. No-op outside Telegram.
+export function useTelegramBackButton(onClick, show = true) {
+    const cbRef = useRef(onClick);
+    cbRef.current = onClick;
+    useEffect(() => {
+        const bb = webApp()?.BackButton;
+        if (!bb)
+            return;
+        const handler = () => cbRef.current();
+        bb.onClick(handler);
+        if (show)
+            bb.show();
+        else
+            bb.hide();
+        return () => {
+            bb.offClick(handler);
+            bb.hide();
+        };
+    }, [show]);
+}
+// Telegram haptic feedback helpers. Safely no-op outside Telegram.
+export function useTelegramHaptics() {
+    return {
+        impact: (style = "medium") => webApp()?.HapticFeedback?.impactOccurred(style),
+        notification: (type = "success") => webApp()?.HapticFeedback?.notificationOccurred(type),
+        selection: () => webApp()?.HapticFeedback?.selectionChanged(),
+    };
+}

package/dist/telegram/useTelegramTheme.d.ts

@@ -0,0 +1,2 @@
+import { type KitTheme } from "../theme";
+export declare function useTelegramTheme(): KitTheme | undefined;

package/dist/telegram/useTelegramTheme.js

@@ -0,0 +1,20 @@
+import {} from "../theme";
+// A KitTheme derived from the host Telegram Mini App's theme, or undefined outside
+// Telegram. Pass it to <LivoApp theme={…}> / <KitThemeProvider> so the kit matches
+// the user's Telegram colours automatically.
+export function useTelegramTheme() {
+    if (typeof window === "undefined")
+        return undefined;
+    const wa = window.Telegram?.WebApp;
+    const tp = wa?.themeParams;
+    if (!tp)
+        return undefined;
+    return {
+        accent: tp.button_color,
+        accentFg: tp.button_text_color,
+        bg: tp.bg_color,
+        fg: tp.text_color,
+        muted: tp.hint_color,
+        border: tp.secondary_bg_color,
+    };
+}

package/dist/tx/TxProgress.d.ts

@@ -0,0 +1,13 @@
+import "./tx.css";
+import { type TxStatus } from "./useTx";
+export interface TxProgressProps {
+    status: TxStatus;
+    hash?: `0x${string}`;
+    error?: Error | null;
+    /** Block explorer base, e.g. "https://sepolia.etherscan.io". Links the hash when set. */
+    explorer?: string;
+    className?: string;
+    /** Hide when idle (default true). */
+    hideIdle?: boolean;
+}
+export declare function TxProgress({ status, hash, error, explorer, className, hideIdle }: TxProgressProps): import("react").JSX.Element | null;

package/dist/tx/TxProgress.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./tx.css";
+import {} from "./useTx";
+import { shortHash } from "../format";
+import { cx } from "../util";
+const LABELS = {
+    idle: "",
+    pending: "Confirm in your wallet…",
+    confirming: "Transaction submitted, confirming…",
+    success: "Confirmed",
+    error: "Failed",
+};
+// A neutral inline status line for a transaction lifecycle (pairs with useTx). Style
+// it via the .kit-txp* classes — see STYLING.md.
+export function TxProgress({ status, hash, error, explorer, className, hideIdle = true }) {
+    if (status === "idle" && hideIdle)
+        return null;
+    const label = status === "error" ? error?.message ?? LABELS.error : LABELS[status];
+    const busy = status === "pending" || status === "confirming";
+    return (_jsxs("div", { className: cx("kit-txp", `kit-txp-${status}`, className), role: "status", "aria-live": "polite", children: [busy && _jsx("span", { className: "kit-txp-spinner", "aria-hidden": "true" }), _jsx("span", { className: "kit-txp-label", children: label }), hash &&
+                (explorer ? (_jsx("a", { className: "kit-txp-hash", href: `${explorer}/tx/${hash}`, target: "_blank", rel: "noreferrer", children: shortHash(hash) })) : (_jsx("span", { className: "kit-txp-hash", children: shortHash(hash) })))] }));
+}

package/dist/tx/index.d.ts

@@ -1,3 +1,4 @@
 export { useTx, type UseTxOptions, type UseTxResult, type TxStatus } from "./useTx";
 export { TxButton, type TxButtonProps } from "./TxButton";
 export { decodeRevert } from "./revert";
+export { TxProgress, type TxProgressProps } from "./TxProgress";

package/dist/tx/index.js

@@ -1,3 +1,4 @@
 export { useTx } from "./useTx";
 export { TxButton } from "./TxButton";
 export { decodeRevert } from "./revert";
+export { TxProgress } from "./TxProgress";

package/dist/tx/tx.css

@@ -11,3 +11,12 @@
 .kit-btn:hover:not(:disabled){opacity:.9}
 .kit-btn:active:not(:disabled){transform:translateY(1px)}
 @media (prefers-color-scheme:dark){.kit-btn{background:var(--kit-accent,#f5f5f7);color:var(--kit-accent-fg,#111827)}}
+
+/* Transaction status line (TxProgress). Neutral; restyle via these classes. */
+.kit-txp{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;color:var(--kit-muted,#6b7280)}
+.kit-txp-success{color:var(--kit-success,#15803d)}
+.kit-txp-error{color:var(--kit-danger,#b91c1c)}
+.kit-txp-hash{color:var(--kit-accent,#2563eb);text-decoration:none;font-variant-numeric:tabular-nums}
+.kit-txp-hash:hover{text-decoration:underline}
+.kit-txp-spinner{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:kit-txp-spin .7s linear infinite}
+@keyframes kit-txp-spin{to{transform:rotate(360deg)}}

package/dist/ui/index.d.ts

@@ -1 +1 @@
-export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, type DialogProps, type SkeletonProps, type EmptyStateProps, type CopyButtonProps, type ButtonProps, } from "./ui";
+export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, Countdown, type DialogProps, type SkeletonProps, type EmptyStateProps, type CopyButtonProps, type ButtonProps, type CountdownProps, } from "./ui";

package/dist/ui/index.js

@@ -1 +1 @@
-export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, } from "./ui";
+export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, Countdown, } from "./ui";