@livo-build/kit 0.1.1 → 0.2.0

package/dist/auth/SignInWithEthereum.d.ts

@@ -0,0 +1,8 @@
+import "../wallet/wallet.css";
+import { type ReactNode } from "react";
+import { useSiwe, type UseSiweOptions } from "./useSiwe";
+export interface SignInWithEthereumProps extends UseSiweOptions {
+    className?: string;
+    children?: (api: ReturnType<typeof useSiwe>) => ReactNode;
+}
+export declare function SignInWithEthereum({ className, children, ...opts }: SignInWithEthereumProps): import("react").JSX.Element;

package/dist/auth/SignInWithEthereum.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../wallet/wallet.css";
+import {} from "react";
+import { useSiwe } from "./useSiwe";
+import { shortAddress } from "../format";
+import { cx } from "../util";
+// A button that runs the Sign-In With Ethereum flow and reflects session state.
+// Pass `children` for a custom render. Reuses the wallet-connect button styling.
+export function SignInWithEthereum({ className, children, ...opts }) {
+    const siwe = useSiwe(opts);
+    if (children)
+        return _jsx(_Fragment, { children: children(siwe) });
+    if (siwe.status === "signed-in") {
+        return (_jsxs("button", { className: cx("wm-account", className), onClick: () => siwe.signOut(), children: [shortAddress(siwe.user?.address), " \u00B7 Sign out"] }));
+    }
+    const busy = siwe.status === "signing" || siwe.status === "loading";
+    return (_jsx("button", { className: cx("wm-cta", className), disabled: busy, onClick: () => siwe.signIn(), children: siwe.status === "signing" ? "Check your wallet…" : "Sign in with Ethereum" }));
+}

package/dist/auth/index.d.ts

@@ -0,0 +1,2 @@
+export { useSiwe, type SiweState, type SiweStatus, type SiweUser, type UseSiweOptions } from "./useSiwe";
+export { SignInWithEthereum, type SignInWithEthereumProps } from "./SignInWithEthereum";

package/dist/auth/index.js

@@ -0,0 +1,2 @@
+export { useSiwe } from "./useSiwe";
+export { SignInWithEthereum } from "./SignInWithEthereum";

package/dist/auth/useSiwe.d.ts

@@ -0,0 +1,18 @@
+export type SiweStatus = "loading" | "signed-out" | "signing" | "signed-in" | "error";
+export interface SiweUser {
+    address: string;
+    [key: string]: unknown;
+}
+export interface SiweState {
+    status: SiweStatus;
+    user?: SiweUser;
+    signIn: () => Promise<void>;
+    signOut: () => Promise<void>;
+    refresh: () => void;
+    error?: Error;
+}
+export interface UseSiweOptions {
+    /** Base path of the SIWE auth API (default "/api/auth"). */
+    endpoint?: string;
+}
+export declare function useSiwe(options?: UseSiweOptions): SiweState;

package/dist/auth/useSiwe.js

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useState } from "react";
+import { useConnection, useSignMessage } from "wagmi";
+// Sign-In With Ethereum against a same-origin backend. Expects: GET {endpoint}/nonce
+// → { nonce, message }, POST {endpoint}/verify { message, signature } → { user },
+// GET {endpoint}/me → { user } | 401, POST {endpoint}/logout. The server builds the
+// SIWE message (with createSiweMessage from @livo-build/runtime) and the session.
+export function useSiwe(options = {}) {
+    const base = options.endpoint ?? "/api/auth";
+    const { address } = useConnection();
+    const { signMessageAsync } = useSignMessage();
+    const [status, setStatus] = useState("loading");
+    const [user, setUser] = useState();
+    const [error, setError] = useState();
+    const refresh = useCallback(async () => {
+        try {
+            const r = await fetch(`${base}/me`, { credentials: "include" });
+            if (r.ok) {
+                const j = (await r.json());
+                if (j.user) {
+                    setUser(j.user);
+                    setStatus("signed-in");
+                    return;
+                }
+            }
+            setStatus("signed-out");
+        }
+        catch (e) {
+            setError(e);
+            setStatus("error");
+        }
+    }, [base]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const signIn = useCallback(async () => {
+        if (!address)
+            return;
+        setStatus("signing");
+        setError(undefined);
+        try {
+            const nr = await fetch(`${base}/nonce?address=${address}`, { credentials: "include" });
+            const { message } = (await nr.json());
+            const signature = await signMessageAsync({ message });
+            const vr = await fetch(`${base}/verify`, {
+                method: "POST",
+                credentials: "include",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ message, signature }),
+            });
+            const j = (await vr.json());
+            if (!vr.ok || !j.user)
+                throw new Error(j.error ?? "Sign-in failed");
+            setUser(j.user);
+            setStatus("signed-in");
+        }
+        catch (e) {
+            setError(e);
+            setStatus("error");
+        }
+    }, [address, base, signMessageAsync]);
+    const signOut = useCallback(async () => {
+        try {
+            await fetch(`${base}/logout`, { method: "POST", credentials: "include" });
+        }
+        catch {
+            /* ignore */
+        }
+        setUser(undefined);
+        setStatus("signed-out");
+    }, [base]);
+    return { status, user, signIn, signOut, refresh: () => void refresh(), error };
+}

package/dist/data/DataTable.d.ts

@@ -0,0 +1,26 @@
+import "./data.css";
+import { type ReactNode } from "react";
+export interface Column<T> {
+    /** Field key (also the default sort key) or a synthetic id. */
+    key: keyof T | string;
+    header: ReactNode;
+    /** Custom cell render; defaults to String(item[key]). */
+    render?: (item: T, index: number) => ReactNode;
+    /** Allow clicking the header to sort by this column's key. Default false. */
+    sortable?: boolean;
+    align?: "left" | "right" | "center";
+    className?: string;
+}
+export interface DataTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    pageSize?: number;
+    searchable?: boolean;
+    searchKeys?: (keyof T)[];
+    searchPlaceholder?: string;
+    empty?: ReactNode;
+    rowKey?: (item: T, index: number) => string | number;
+    onRowClick?: (item: T) => void;
+    className?: string;
+}
+export declare function DataTable<T>({ data, columns, pageSize, searchable, searchKeys, searchPlaceholder, empty, rowKey, onRowClick, className, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/data/DataTable.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./data.css";
+import {} from "react";
+import { useCollection } from "./useCollection";
+import { cx } from "../util";
+// A neutral, sortable, searchable, paginated table over an array (data wrangling
+// done for you via useCollection). Style via .kit-table* — see STYLING.md.
+export function DataTable({ data, columns, pageSize, searchable, searchKeys, searchPlaceholder = "Search…", empty, rowKey, onRowClick, className, }) {
+    const cfg = { pageSize, searchKeys };
+    const c = useCollection(data, cfg);
+    return (_jsxs("div", { className: cx("kit-table-wrap", className), children: [searchable && (_jsx("input", { className: "kit-table-search", value: c.query, placeholder: searchPlaceholder, onChange: (e) => c.setQuery(e.target.value) })), _jsxs("table", { className: "kit-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col) => {
+                                const active = c.sort?.key === col.key;
+                                return (_jsxs("th", { "data-align": col.align, "data-sortable": col.sortable || undefined, "data-active": active || undefined, className: col.className, onClick: col.sortable ? () => c.toggleSort(col.key) : undefined, children: [col.header, active ? _jsx("span", { className: "kit-table-caret", children: c.sort?.dir === "asc" ? " ▲" : " ▼" }) : null] }, String(col.key)));
+                            }) }) }), _jsx("tbody", { children: c.isEmpty ? (_jsx("tr", { className: "kit-table-empty", children: _jsx("td", { colSpan: columns.length, children: empty ?? "No results" }) })) : (c.items.map((item, i) => (_jsx("tr", { "data-clickable": onRowClick ? true : undefined, onClick: onRowClick ? () => onRowClick(item) : undefined, children: columns.map((col) => (_jsx("td", { "data-align": col.align, className: col.className, children: col.render ? col.render(item, i) : String(item[col.key] ?? "") }, String(col.key)))) }, rowKey ? rowKey(item, i) : i)))) })] }), pageSize && c.pageCount > 1 && (_jsxs("div", { className: "kit-table-pager", children: [_jsx("button", { className: "kit-table-page-btn", disabled: c.page === 0, onClick: c.prevPage, children: "\u2039 Prev" }), _jsxs("span", { className: "kit-table-page-info", children: [c.page + 1, " / ", c.pageCount] }), _jsx("button", { className: "kit-table-page-btn", disabled: c.page >= c.pageCount - 1, onClick: c.nextPage, children: "Next \u203A" })] }))] }));
+}

package/dist/data/data.css

@@ -0,0 +1,22 @@
+/* DataTable — neutral, restyle via .kit-table* or --kit-* vars. */
+.kit-table-wrap{display:flex;flex-direction:column;gap:10px;font:inherit}
+.kit-table-search{align-self:flex-start;min-width:220px;border:1px solid var(--kit-border,#e5e7eb);border-radius:10px;padding:8px 12px;font:inherit;font-size:14px;background:transparent;color:inherit}
+.kit-table-search:focus{outline:0;border-color:var(--kit-muted,#6b7280)}
+.kit-table{width:100%;border-collapse:collapse;font-size:14px}
+.kit-table th,.kit-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--kit-border,#eceef1)}
+.kit-table td[data-align="right"],.kit-table th[data-align="right"]{text-align:right;font-variant-numeric:tabular-nums}
+.kit-table td[data-align="center"],.kit-table th[data-align="center"]{text-align:center}
+.kit-table th{font-weight:600;color:var(--kit-muted,#6b7280);user-select:none;white-space:nowrap}
+.kit-table th[data-sortable]{cursor:pointer}
+.kit-table th[data-active]{color:var(--kit-fg,#111827)}
+.kit-table-caret{font-size:10px}
+.kit-table tbody tr[data-clickable]{cursor:pointer}
+.kit-table tbody tr[data-clickable]:hover{background:var(--kit-row-hover,#f6f7f9)}
+.kit-table-empty td{padding:28px 12px;text-align:center;color:var(--kit-muted,#6b7280)}
+.kit-table-pager{display:flex;align-items:center;gap:12px}
+.kit-table-page-btn{border:1px solid var(--kit-border,#e5e7eb);background:transparent;color:inherit;border-radius:9px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
+.kit-table-page-btn:disabled{opacity:.45;cursor:default}
+.kit-table-page-info{color:var(--kit-muted,#6b7280);font-size:13px;font-variant-numeric:tabular-nums}
+@media (prefers-color-scheme:dark){
+  .kit-table-wrap{--kit-border:#2c2e36;--kit-fg:#f5f5f7;--kit-row-hover:#1d1f25}
+}

package/dist/data/index.d.ts

@@ -1,3 +1,7 @@
 export { useApi, apiClient, type QueryResult, type UseApiOptions } from "./useApi";
 export { useSubgraph, type UseSubgraphArgs } from "./useSubgraph";
 export { Async, type AsyncProps, type AsyncQuery } from "./Async";
+export { useCollection, processCollection, type Collection, type CollectionConfig, type SortState, type SortDir, } from "./useCollection";
+export { DataTable, type DataTableProps, type Column } from "./DataTable";
+export { useEventSource, type EventSourceState, type UseEventSourceOptions, type StreamStatus } from "./useEventSource";
+export { useWebSocket, type WebSocketState, type UseWebSocketOptions } from "./useWebSocket";

package/dist/data/index.js

@@ -1,3 +1,7 @@
 export { useApi, apiClient } from "./useApi";
 export { useSubgraph } from "./useSubgraph";
 export { Async } from "./Async";
+export { useCollection, processCollection, } from "./useCollection";
+export { DataTable } from "./DataTable";
+export { useEventSource } from "./useEventSource";
+export { useWebSocket } from "./useWebSocket";

package/dist/data/useCollection.d.ts

@@ -0,0 +1,42 @@
+export type SortDir = "asc" | "desc";
+export interface SortState<T> {
+    key: keyof T;
+    dir: SortDir;
+}
+export interface CollectionConfig<T> {
+    /** Keys to full-text search (case-insensitive). Default: all string/number fields. */
+    searchKeys?: (keyof T)[];
+    /** Custom search predicate (overrides searchKeys). */
+    search?: (item: T, query: string) => boolean;
+    /** Persistent filter applied before search/sort. */
+    filter?: (item: T) => boolean;
+    /** Rows per page. Omit/0 to disable paging (one page). */
+    pageSize?: number;
+    initialSort?: SortState<T>;
+    initialQuery?: string;
+}
+export declare function processCollection<T>(items: T[], state: {
+    query?: string;
+    sort?: SortState<T> | null;
+} & Pick<CollectionConfig<T>, "searchKeys" | "search" | "filter">): T[];
+export interface Collection<T> {
+    /** The current page of processed rows. */
+    items: T[];
+    /** All processed (filtered+searched+sorted) rows, across pages. */
+    all: T[];
+    query: string;
+    setQuery: (q: string) => void;
+    sort: SortState<T> | null;
+    /** Set/toggle the sort key (same key flips asc↔desc). */
+    toggleSort: (key: keyof T) => void;
+    setSort: (sort: SortState<T> | null) => void;
+    page: number;
+    setPage: (p: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    pageCount: number;
+    /** Count after filter+search (before paging). */
+    total: number;
+    isEmpty: boolean;
+}
+export declare function useCollection<T>(items: T[], config?: CollectionConfig<T>): Collection<T>;

package/dist/data/useCollection.js

@@ -0,0 +1,67 @@
+import { useMemo, useState } from "react";
+function compare(a, b) {
+    if (a == null)
+        return b == null ? 0 : -1;
+    if (b == null)
+        return 1;
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (typeof a === "bigint" && typeof b === "bigint")
+        return a < b ? -1 : a > b ? 1 : 0;
+    return String(a).localeCompare(String(b), undefined, { numeric: true });
+}
+// Pure: filter → search → sort. Exported for testing and non-React use.
+export function processCollection(items, state) {
+    let out = state.filter ? items.filter(state.filter) : items.slice();
+    const q = (state.query ?? "").trim().toLowerCase();
+    if (q) {
+        out = out.filter((item) => {
+            if (state.search)
+                return state.search(item, q);
+            const keys = state.searchKeys ?? Object.keys(item);
+            return keys.some((k) => {
+                const v = item[k];
+                return (typeof v === "string" || typeof v === "number") && String(v).toLowerCase().includes(q);
+            });
+        });
+    }
+    if (state.sort) {
+        const { key, dir } = state.sort;
+        const f = dir === "asc" ? 1 : -1;
+        out.sort((a, b) => compare(a[key], b[key]) * f);
+    }
+    return out;
+}
+// Headless client-side data wrangling: search + sort + paginate any array, with
+// React state. Feed `items` (e.g. from useApi/useSubgraph) and render `items`.
+export function useCollection(items, config = {}) {
+    const [query, setQueryRaw] = useState(config.initialQuery ?? "");
+    const [sort, setSort] = useState(config.initialSort ?? null);
+    const [page, setPage] = useState(0);
+    const setQuery = (q) => {
+        setQueryRaw(q);
+        setPage(0);
+    };
+    const toggleSort = (key) => setSort((s) => (s && s.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" }));
+    const all = useMemo(() => processCollection(items, { query, sort, searchKeys: config.searchKeys, search: config.search, filter: config.filter }), [items, query, sort, config.searchKeys, config.search, config.filter]);
+    const size = config.pageSize && config.pageSize > 0 ? config.pageSize : all.length || 1;
+    const pageCount = Math.max(1, Math.ceil(all.length / size));
+    const clamped = Math.min(page, pageCount - 1);
+    const pageItems = config.pageSize ? all.slice(clamped * size, clamped * size + size) : all;
+    return {
+        items: pageItems,
+        all,
+        query,
+        setQuery,
+        sort,
+        toggleSort,
+        setSort,
+        page: clamped,
+        setPage,
+        nextPage: () => setPage((p) => Math.min(p + 1, pageCount - 1)),
+        prevPage: () => setPage((p) => Math.max(p - 1, 0)),
+        pageCount,
+        total: all.length,
+        isEmpty: all.length === 0,
+    };
+}

package/dist/data/useCollection.test.d.ts

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

package/dist/data/useCollection.test.js

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { processCollection } from "./useCollection";
+const rows = [
+    { name: "Alice", age: 30 },
+    { name: "bob", age: 25 },
+    { name: "Carol", age: 40 },
+];
+describe("processCollection", () => {
+    it("filters, then case-insensitive searches, then sorts (numeric-aware)", () => {
+        const sorted = processCollection(rows, { sort: { key: "age", dir: "asc" } });
+        expect(sorted.map((r) => r.age)).toEqual([25, 30, 40]);
+        const desc = processCollection(rows, { sort: { key: "name", dir: "desc" } });
+        expect(desc.map((r) => r.name)).toEqual(["Carol", "bob", "Alice"]);
+        const searched = processCollection(rows, { query: "car", searchKeys: ["name"] });
+        expect(searched).toEqual([{ name: "Carol", age: 40 }]);
+        const filtered = processCollection(rows, { filter: (r) => r.age >= 30, query: "" });
+        expect(filtered.map((r) => r.name).sort()).toEqual(["Alice", "Carol"]);
+    });
+    it("does not mutate the input array", () => {
+        const copy = rows.slice();
+        processCollection(rows, { sort: { key: "age", dir: "desc" } });
+        expect(rows).toEqual(copy);
+    });
+    it("searches all string/number fields when no searchKeys given", () => {
+        expect(processCollection(rows, { query: "40" })).toEqual([{ name: "Carol", age: 40 }]);
+    });
+});

package/dist/data/useEventSource.d.ts

@@ -0,0 +1,15 @@
+export type StreamStatus = "connecting" | "open" | "error" | "closed";
+export interface EventSourceState<T> {
+    /** Last message, JSON-parsed when possible (else the raw string). */
+    data: T | undefined;
+    status: StreamStatus;
+    error: Error | null;
+}
+export interface UseEventSourceOptions {
+    enabled?: boolean;
+    /** Send cookies with the request (same-origin auth). */
+    withCredentials?: boolean;
+    /** Listen for a named event instead of the default `message`. */
+    event?: string;
+}
+export declare function useEventSource<T = unknown>(url?: string, opts?: UseEventSourceOptions): EventSourceState<T>;

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;