@livo-build/kit 0.1.0

package/README.md

@@ -0,0 +1,122 @@
+# @livo-build/kit
+
+Livo's frontend kit — reusable React + [wagmi](https://wagmi.sh) v3 building blocks
+for web3 apps built on Livo. The frontend counterpart to
+[`@livo-build/runtime`](../runtime) (the backend stdlib). Zero runtime
+dependencies of its own; React, wagmi, viem and @tanstack/react-query are peers.
+
+## Install
+
+```bash
+npm install @livo-build/kit
+# peers (a Livo scaffold already has these):
+npm install wagmi viem @tanstack/react-query
+```
+
+## Quick start
+
+```tsx
+import { LivoWeb3Provider, ConnectWallet } from "@livo-build/kit";
+import { wagmiConfig } from "./wagmi"; // your chains + connectors (stays in your app)
+
+export default function App() {
+  return (
+    <LivoWeb3Provider config={wagmiConfig}>
+      <ConnectWallet />
+    </LivoWeb3Provider>
+  );
+}
+```
+
+`ConnectWallet` is a button that opens a responsive wallet-picker **modal**
+(centered on desktop, a bottom sheet on mobile) and turns into an account pill
+(copy / disconnect) once connected.
+
+## Not opinionated — style it your way
+
+The kit owns behaviour + structure + accessibility; the **look is yours**. Defaults
+are deliberately neutral (they inherit the app font and lean grayscale) so apps don't
+all look the same. Restyle via CSS variables, a per-part `classNames` prop, the class
+hooks / `[data-state]` attributes, or go fully headless on the hooks. **See
+[STYLING.md](./STYLING.md).** Don't ship the neutral default as-is for a real product —
+spend a moment making it match your app.
+
+## Customize (three levels)
+
+1. **Restyle** — override the CSS variables (`--wm-accent`, `--wm-radius`,
+   `--wm-row`, …) on `:root` or any parent. No logic touched.
+2. **Custom trigger** — keep the modal, supply your own button:
+   ```tsx
+   <ConnectWallet>
+     {({ open, isConnected, address }) => (
+       <button onClick={open}>{isConnected ? address : "Sign in"}</button>
+     )}
+   </ConnectWallet>
+   ```
+3. **Fully custom UI** — build your own on the controlled `<WalletModal open onClose/>`
+   and the headless `useWalletConnectors()` hook (deduped connectors + connect /
+   pending / error wiring).
+
+## Transactions
+
+The whole write lifecycle (submit → pending → confirming → success/error) in one
+component, with toasts + an explorer link (wrap your app in `ToastProvider`):
+
+```tsx
+import { ToastProvider, TxButton } from "@livo-build/kit";
+import { addresses, abis } from "./livo/contracts"; // generated by Livo
+
+<ToastProvider>
+  <TxButton address={addresses.Counter} abi={abis.Counter} functionName="increment">
+    Increment
+  </TxButton>
+</ToastProvider>
+```
+
+Headless version: `const { send, status, hash, error } = useTx({ address, abi, functionName })`.
+`decodeRevert(error)` turns a viem error into a short human message.
+
+## Contracts (bound to Livo's generated bindings)
+
+```tsx
+import { createLivoContracts } from "@livo-build/kit";
+import { addresses, abis } from "./livo/contracts"; // generated by sync_contract_bindings
+
+export const contracts = createLivoContracts({ addresses, abis });
+
+const n = contracts.useRead<bigint>("Counter", "number");                 // read (chain-aware)
+<TxButton {...contracts.useContract("Counter")} functionName="increment">+1</TxButton>  // write
+```
+
+## Data, web3 primitives, UI
+
+```tsx
+const { data } = useApi<{ ok: boolean }>("/health");      // same-origin /api/*
+const { data } = useSubgraph({ url, query: GET_ITEMS });  // your indexer's graphql_url_latest
+
+<Address address={addr} explorer />        <Balance address={addr} />
+<TokenAmountInput value={v} onChange={setV} decimals={18} max={bal} symbol="USDC" />
+<NetworkGuard chainId={11155111} name="Sepolia">{/* on-chain UI */}</NetworkGuard>
+
+<Dialog open={open} onClose={close} title="Confirm">…</Dialog>
+<Card/>  <Skeleton width={120}/>  <Spinner/>  <EmptyState title="Nothing yet"/>  <CopyButton value={addr}/>
+```
+
+## Exports
+
+- **wallet** — `ConnectWallet`, `WalletModal`, `useWalletConnectors`
+- **provider** — `LivoWeb3Provider`
+- **contracts** — `createLivoContracts`, `useContractValue`, `resolveAddress`
+- **tx** — `TxButton`, `useTx`, `decodeRevert`
+- **toast** — `ToastProvider`, `useToast`
+- **data** — `useApi`, `apiClient`, `useSubgraph`
+- **web3** — `Address`, `Balance`, `NetworkGuard`, `TokenAmountInput`
+- **ui** — `Dialog`, `Card`, `Skeleton`, `Spinner`, `EmptyState`, `CopyButton`
+- **format** — `shortAddress`, `shortHash`, `formatToken`, `parseToken`, `formatUsd`, `timeAgo`, `avatarGradient`
+
+Every component is neutral by default — **style it** (see [STYLING.md](./STYLING.md)).
+
+## Versioning
+
+Published from `packages/kit` via `publish-kit.yml` on merge to `main` (idempotent).
+Livo scaffolds pin the version from `convex/lib/frontendVersion.ts` (`KIT_VERSION`).

package/STYLING.md

@@ -0,0 +1,76 @@
+# Styling @livo-build/kit
+
+The kit's components are **functional, not opinionated**. They own behaviour,
+structure, and accessibility; the LOOK is yours. Defaults are deliberately neutral
+(they `inherit` the app font and lean grayscale) so apps built with the kit don't
+all look alike. Style them any of these ways, from quickest to most control.
+
+## 1. Override CSS variables (quickest)
+
+Every colour/radius is a variable. Set them on `:root` or any ancestor:
+
+```css
+:root {
+  --wm-accent: #6d28d9;          /* wallet modal: primary */
+  --wm-bg: #0b0b10;              /* surface */
+  --wm-radius: 12px;
+  --kit-accent: #6d28d9;         /* TxButton + spinners */
+  --kit-t-bg: #0b0b10;           /* toasts */
+}
+```
+
+Wallet modal vars: `--wm-accent`, `--wm-accent-fg`, `--wm-bg`, `--wm-fg`, `--wm-muted`,
+`--wm-row`, `--wm-row-hover`, `--wm-border`, `--wm-overlay`, `--wm-radius`, `--wm-row-radius`, `--wm-shadow`.
+Button: `--kit-accent`, `--kit-accent-fg`. Toasts: `--kit-t-bg`, `--kit-t-fg`, `--kit-t-muted`,
+`--kit-t-border`, `--kit-t-success`, `--kit-t-error`, `--kit-t-accent`.
+
+## 2. Pass `classNames` (bring your own design / Tailwind)
+
+Per-part class injection — your classes are merged onto the kit's, so you can
+replace the look entirely (e.g. Tailwind):
+
+```tsx
+<ConnectWallet
+  classNames={{
+    trigger: "rounded-full bg-violet-600 px-5 py-2 text-white",
+    account: "rounded-full border px-3 py-1",
+    modal: { sheet: "!rounded-3xl !bg-zinc-900", wallet: "hover:!bg-zinc-800" },
+  }}
+/>
+```
+
+`WalletModal` parts: `root, overlay, sheet, header, title, close, list, wallet`.
+`TxButton` takes a plain `className`.
+
+## 3. Target class hooks + `[data-*]` states (global CSS)
+
+Stable hooks on every element. State lives in `data-*` so you can style by state:
+
+- Wallet: `.wm-cta` (connect btn), `.wm-account` (`[data-state="connected"]`),
+  `.wm-sheet`, `.wm-overlay`, `.wm-wallet` (`[data-state="connecting"|"idle"]`),
+  `.wm-menu`. The modal root has `[data-livo-wallet-modal]`.
+- Tx: `.kit-btn` with `[data-state="idle|pending|confirming|success|error"]`.
+- Toast: `.kit-toast` with `[data-variant="info|success|error|loading"]`.
+
+```css
+.kit-btn[data-state="confirming"] { background: theme(colors.amber.500); }
+.kit-toast[data-variant="error"] { border-color: theme(colors.red.500); }
+```
+
+## 4. Go fully headless (max control)
+
+Skip the components, keep the wiring — build any UI on the hooks:
+
+```tsx
+const { wallets, connect, pendingUid, error } = useWalletConnectors();
+const { send, status, hash, error } = useTx({ address, abi, functionName });
+```
+
+These carry all the logic (connector discovery, connect flow, tx lifecycle); you
+render 100% of the markup and styles.
+
+---
+
+**Rule of thumb for building a real product:** don't ship the neutral default as-is —
+spend a moment styling it to match the app (one of the four ways above). The kit is
+there so you never hand-roll the wallet/tx/toast *logic*, not so every site looks the same.

package/dist/contracts/createLivoContracts.d.ts

@@ -0,0 +1,24 @@
+import type { Abi } from "viem";
+import type { QueryResult } from "../data/useApi";
+export interface LivoBindings {
+    addresses: Record<string, Record<string, string>>;
+    abis: Record<string, Abi>;
+}
+export declare function resolveAddress(bindings: LivoBindings, name: string, chainId: number): `0x${string}` | undefined;
+export interface ContractRef {
+    address: `0x${string}` | undefined;
+    abi: Abi;
+}
+export interface LivoContracts {
+    /** Resolve { address, abi } for a contract on the connected (or given) chain —
+     *  spread straight into <TxButton> / useTx for writes. */
+    useContract: (name: string, chainId?: number) => ContractRef;
+    /** Read a view/pure value, address + abi resolved from the bindings. */
+    useRead: <T = unknown>(name: string, functionName: string, args?: readonly unknown[], opts?: {
+        chainId?: number;
+        enabled?: boolean;
+    }) => QueryResult<T>;
+    /** Raw address lookup (non-hook). */
+    addressOf: (name: string, chainId: number) => `0x${string}` | undefined;
+}
+export declare function createLivoContracts(bindings: LivoBindings): LivoContracts;

package/dist/contracts/createLivoContracts.js

@@ -0,0 +1,35 @@
+import { useChainId } from "wagmi";
+import { useContractValue } from "./useContractValue";
+export function resolveAddress(bindings, name, chainId) {
+    const a = (bindings.addresses[String(chainId)] ?? {})[name];
+    return a ? a : undefined;
+}
+// Bind Livo's generated contract bindings into ergonomic hooks. Mirrors the
+// runtime's bindContracts(addresses, abis) for keepers/bots — the frontend twin.
+//
+//   import { addresses, abis } from "./livo/contracts";
+//   export const contracts = createLivoContracts({ addresses, abis });
+//   const n = contracts.useRead<bigint>("Counter", "number");
+//   <TxButton {...contracts.useContract("Counter")} functionName="increment">+1</TxButton>
+export function createLivoContracts(bindings) {
+    return {
+        useContract(name, chainId) {
+            const current = useChainId();
+            const cid = chainId ?? current;
+            return { address: resolveAddress(bindings, name, cid), abi: bindings.abis[name] };
+        },
+        useRead(name, functionName, args, opts) {
+            const current = useChainId();
+            const cid = opts?.chainId ?? current;
+            return useContractValue({
+                address: resolveAddress(bindings, name, cid),
+                abi: bindings.abis[name],
+                functionName,
+                args,
+                chainId: opts?.chainId,
+                enabled: opts?.enabled,
+            });
+        },
+        addressOf: (name, chainId) => resolveAddress(bindings, name, chainId),
+    };
+}

package/dist/contracts/index.d.ts

@@ -0,0 +1,2 @@
+export { useContractValue, type UseContractValueParams } from "./useContractValue";
+export { createLivoContracts, resolveAddress, type LivoBindings, type LivoContracts, type ContractRef, } from "./createLivoContracts";

package/dist/contracts/index.js

@@ -0,0 +1,2 @@
+export { useContractValue } from "./useContractValue";
+export { createLivoContracts, resolveAddress, } from "./createLivoContracts";

package/dist/contracts/useContractValue.d.ts

@@ -0,0 +1,11 @@
+import type { Abi } from "viem";
+import type { QueryResult } from "../data/useApi";
+export interface UseContractValueParams {
+    address?: `0x${string}`;
+    abi: Abi;
+    functionName: string;
+    args?: readonly unknown[];
+    chainId?: number;
+    enabled?: boolean;
+}
+export declare function useContractValue<T = unknown>(params: UseContractValueParams): QueryResult<T>;

package/dist/contracts/useContractValue.js

@@ -0,0 +1,23 @@
+import { useReadContract } from "wagmi";
+// Read a contract view/pure value. A thin, explicit-typed wrapper over wagmi's
+// useReadContract (so the .d.ts stays portable). Usually you'll use the bound
+// `useRead` from createLivoContracts instead, which resolves address + abi for you.
+export function useContractValue(params) {
+    const r = useReadContract({
+        address: params.address,
+        abi: params.abi,
+        functionName: params.functionName,
+        args: params.args,
+        chainId: params.chainId,
+        query: { enabled: (params.enabled ?? true) && Boolean(params.address) },
+    });
+    return {
+        data: r.data,
+        error: (r.error ?? null),
+        isLoading: r.isLoading,
+        isError: r.isError,
+        refetch: () => {
+            void r.refetch();
+        },
+    };
+}

package/dist/data/index.d.ts

@@ -0,0 +1,2 @@
+export { useApi, apiClient, type QueryResult, type UseApiOptions } from "./useApi";
+export { useSubgraph, type UseSubgraphArgs } from "./useSubgraph";

package/dist/data/index.js

@@ -0,0 +1,2 @@
+export { useApi, apiClient } from "./useApi";
+export { useSubgraph } from "./useSubgraph";

package/dist/data/useApi.d.ts

@@ -0,0 +1,17 @@
+export interface QueryResult<T> {
+    data: T | undefined;
+    error: Error | null;
+    isLoading: boolean;
+    isError: boolean;
+    refetch: () => void;
+}
+export interface UseApiOptions {
+    enabled?: boolean;
+    init?: RequestInit;
+}
+export declare function useApi<T = unknown>(path: string, options?: UseApiOptions): QueryResult<T>;
+/** Imperative same-origin api client (outside React). */
+export declare const apiClient: {
+    get: <T = unknown>(path: string) => Promise<T>;
+    post: <T = unknown>(path: string, body: unknown) => Promise<T>;
+};

package/dist/data/useApi.js

@@ -0,0 +1,42 @@
+import { useQuery } from "@tanstack/react-query";
+// Call a Livo same-origin api/ backend ({slug}.livo.build/api/*). Paths are
+// resolved under /api, so `useApi("/health")` hits /api/health — zero CORS, keys
+// stay server-side. JSON in/out; a non-2xx throws with the body's `error` if present.
+async function apiFetch(path, init) {
+    const p = path.startsWith("/api") ? path : "/api" + (path.startsWith("/") ? path : "/" + path);
+    const res = await fetch(p, init);
+    const text = await res.text();
+    let body = null;
+    try {
+        body = text ? JSON.parse(text) : null;
+    }
+    catch {
+        body = text;
+    }
+    if (!res.ok) {
+        const errField = body && typeof body === "object" ? body.error : undefined;
+        throw new Error(errField ? String(errField) : "HTTP " + res.status);
+    }
+    return body;
+}
+export function useApi(path, options) {
+    const q = useQuery({
+        queryKey: ["livo-api", path],
+        queryFn: () => apiFetch(path, options?.init),
+        enabled: options?.enabled ?? true,
+    });
+    return {
+        data: q.data,
+        error: q.error ?? null,
+        isLoading: q.isLoading,
+        isError: q.isError,
+        refetch: () => {
+            void q.refetch();
+        },
+    };
+}
+/** Imperative same-origin api client (outside React). */
+export const apiClient = {
+    get: (path) => apiFetch(path),
+    post: (path, body) => apiFetch(path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) }),
+};

package/dist/data/useSubgraph.d.ts

@@ -0,0 +1,9 @@
+import type { QueryResult } from "./useApi";
+export interface UseSubgraphArgs {
+    /** The subgraph GraphQL endpoint — your indexer's graphql_url_latest. */
+    url: string;
+    query: string;
+    variables?: Record<string, unknown>;
+    enabled?: boolean;
+}
+export declare function useSubgraph<T = unknown>(args: UseSubgraphArgs): QueryResult<T>;

package/dist/data/useSubgraph.js

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+// Query a Livo indexer (Goldsky subgraph) from the frontend. Pass the project's
+// `graphql_url_latest` (from get_indexer / a VITE_INDEXER_*_URL build var). GraphQL
+// errors surface as a thrown Error.
+export function useSubgraph(args) {
+    const { url, query, variables, enabled } = args;
+    const q = useQuery({
+        queryKey: ["livo-subgraph", url, query, variables],
+        enabled: (enabled ?? true) && Boolean(url),
+        queryFn: async () => {
+            const res = await fetch(url, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ query, variables }),
+            });
+            const json = (await res.json());
+            if (json.errors && json.errors.length) {
+                throw new Error(json.errors[0]?.message ?? "Subgraph query failed");
+            }
+            return json.data;
+        },
+    });
+    return {
+        data: q.data,
+        error: q.error ?? null,
+        isLoading: q.isLoading,
+        isError: q.isError,
+        refetch: () => {
+            void q.refetch();
+        },
+    };
+}

package/dist/format.d.ts

@@ -0,0 +1,16 @@
+/** Shorten an address to `0x1234…abcd`. */
+export declare function shortAddress(a?: string, lead?: number, tail?: number): string;
+/** Shorten a tx hash / hex to `0x1234…abcd` (alias of shortAddress with hash defaults). */
+export declare function shortHash(h?: string): string;
+/** Deterministic gradient (a stable identicon) derived from an address — no deps. */
+export declare function avatarGradient(addr: string): string;
+/** Format a base-unit BigInt token amount to a human string. `formatToken(1500000n, 6)` → "1.5". */
+export declare function formatToken(amount: bigint, decimals?: number, maxFractionDigits?: number): string;
+/** Parse a human token string into a base-unit BigInt. `parseToken("1.5", 6)` → 1500000n. */
+export declare function parseToken(value: string, decimals?: number): bigint;
+/** Format a number as USD. `formatUsd(1234.5)` → "$1,234.50". */
+export declare function formatUsd(n: number, opts?: {
+    compact?: boolean;
+}): string;
+/** Short relative time from a unix-seconds (or ms) timestamp. `timeAgo(t)` → "3m ago". */
+export declare function timeAgo(ts: number, nowMs?: number): string;

package/dist/format.js

@@ -0,0 +1,59 @@
+// Small formatting helpers used across the kit (and handy in app code). Web3
+// number formatting is error-prone (decimals, BigInt) — these get it right.
+/** Shorten an address to `0x1234…abcd`. */
+export function shortAddress(a, lead = 6, tail = 4) {
+    return a ? a.slice(0, lead) + "…" + a.slice(-tail) : "";
+}
+/** Shorten a tx hash / hex to `0x1234…abcd` (alias of shortAddress with hash defaults). */
+export function shortHash(h) {
+    return shortAddress(h, 8, 6);
+}
+/** Deterministic gradient (a stable identicon) derived from an address — no deps. */
+export function avatarGradient(addr) {
+    const a = parseInt(addr.slice(2, 8) || "0", 16) % 360;
+    const b = (parseInt(addr.slice(8, 14) || "0", 16) + 40) % 360;
+    return "linear-gradient(135deg, hsl(" + a + " 78% 60%), hsl(" + b + " 78% 52%))";
+}
+/** Format a base-unit BigInt token amount to a human string. `formatToken(1500000n, 6)` → "1.5". */
+export function formatToken(amount, decimals = 18, maxFractionDigits = 6) {
+    const neg = amount < 0n;
+    const v = neg ? -amount : amount;
+    const base = 10n ** BigInt(decimals);
+    const whole = v / base;
+    let frac = (v % base).toString().padStart(decimals, "0").slice(0, maxFractionDigits).replace(/0+$/, "");
+    const sign = neg ? "-" : "";
+    return sign + whole.toString() + (frac ? "." + frac : "");
+}
+/** Parse a human token string into a base-unit BigInt. `parseToken("1.5", 6)` → 1500000n. */
+export function parseToken(value, decimals = 18) {
+    const s = value.trim();
+    if (!s || !/^\d*\.?\d*$/.test(s))
+        throw new Error(`Invalid amount: "${value}"`);
+    const [whole = "0", frac = ""] = s.split(".");
+    const fracPadded = frac.slice(0, decimals).padEnd(decimals, "0");
+    return BigInt(whole || "0") * 10n ** BigInt(decimals) + BigInt(fracPadded || "0");
+}
+/** Format a number as USD. `formatUsd(1234.5)` → "$1,234.50". */
+export function formatUsd(n, opts = {}) {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        notation: opts.compact ? "compact" : "standard",
+        maximumFractionDigits: opts.compact ? 2 : undefined,
+    }).format(n);
+}
+/** 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;
+    const s = Math.max(0, Math.round((nowMs - tsMs) / 1000));
+    if (s < 60)
+        return s + "s ago";
+    const m = Math.round(s / 60);
+    if (m < 60)
+        return m + "m ago";
+    const h = Math.round(m / 60);
+    if (h < 24)
+        return h + "h ago";
+    const d = Math.round(h / 24);
+    return d + "d ago";
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./wallet";
+export * from "./provider";
+export * from "./contracts";
+export * from "./tx";
+export * from "./toast";
+export * from "./data";
+export * from "./web3";
+export * from "./ui";
+export * from "./format";

package/dist/index.js

@@ -0,0 +1,22 @@
+// @livo-build/kit — Livo's frontend kit. Functional, NEUTRAL React + wagmi v3
+// building blocks (you style them — see STYLING.md). Importing a component pulls in
+// its CSS transitively (or import "@livo-build/kit/styles.css").
+//
+//   wallet/    — ConnectWallet, WalletModal, useWalletConnectors
+//   provider/  — LivoWeb3Provider (wagmi + react-query)
+//   contracts/ — useContractValue, createLivoContracts (bound to Livo's generated bindings)
+//   tx/        — useTx, TxButton, decodeRevert
+//   toast/     — ToastProvider, useToast
+//   data/      — useApi (same-origin /api/*), useSubgraph (indexer)
+//   web3/      — Address, Balance, NetworkGuard, TokenAmountInput
+//   ui/        — Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton
+//   format     — shortAddress, formatToken, parseToken, formatUsd, timeAgo, …
+export * from "./wallet";
+export * from "./provider";
+export * from "./contracts";
+export * from "./tx";
+export * from "./toast";
+export * from "./data";
+export * from "./web3";
+export * from "./ui";
+export * from "./format";

package/dist/provider/Web3Provider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type Config } from "wagmi";
+import { QueryClient } from "@tanstack/react-query";
+export interface LivoWeb3ProviderProps {
+    /** Your project's wagmi config (chains + connectors + transports). */
+    config: Config;
+    /** Bring your own QueryClient, or omit and one is created. */
+    queryClient?: QueryClient;
+    children: ReactNode;
+}
+export declare function LivoWeb3Provider({ config, queryClient, children }: LivoWeb3ProviderProps): import("react").JSX.Element;

package/dist/provider/Web3Provider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+// Wraps an app in the wagmi + react-query providers the kit's hooks need. The
+// wagmi `config` (which chains / connectors) stays in YOUR project so it's easy to
+// edit — pass it in here.
+export function LivoWeb3Provider({ config, queryClient, children }) {
+    const [client] = useState(() => queryClient ?? new QueryClient());
+    return (_jsx(WagmiProvider, { config: config, children: _jsx(QueryClientProvider, { client: client, children: children }) }));
+}

package/dist/provider/index.d.ts

@@ -0,0 +1 @@
+export { LivoWeb3Provider, type LivoWeb3ProviderProps } from "./Web3Provider";

package/dist/provider/index.js

@@ -0,0 +1 @@
+export { LivoWeb3Provider } from "./Web3Provider";

package/dist/toast/index.d.ts

@@ -0,0 +1 @@
+export { ToastProvider, useToast, type ToastApi, type ToastOptions, type ToastVariant, } from "./toast";

package/dist/toast/index.js

@@ -0,0 +1 @@
+export { ToastProvider, useToast, } from "./toast";

package/dist/toast/toast.css

@@ -0,0 +1,30 @@
+/* Neutral by default — override these CSS variables or target the class hooks /
+   [data-variant] attributes to restyle. Inherits the app font. */
+.kit-toaster{
+  --kit-t-bg:#fff; --kit-t-fg:#111827; --kit-t-muted:#6b7280; --kit-t-border:#e5e7eb;
+  --kit-t-success:#16a34a; --kit-t-error:#dc2626; --kit-t-accent:currentColor;
+  position:fixed; z-index:2147483600; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px;
+  font-family:inherit; max-width:calc(100vw - 32px); width:360px; pointer-events:none;
+}
+@media (prefers-color-scheme:dark){.kit-toaster:not(.kit-light){
+  --kit-t-bg:#1f2127; --kit-t-fg:#f5f5f7; --kit-t-muted:#9b9ba4; --kit-t-border:#2c2e36;
+}}
+@media (max-width:480px){.kit-toaster{left:16px;right:16px;width:auto}}
+.kit-toast{
+  pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
+  background:var(--kit-t-bg); color:var(--kit-t-fg); border:1px solid var(--kit-t-border);
+  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); animation:kit-t-in .2s cubic-bezier(.2,.9,.25,1);
+}
+.kit-toast-icon{flex:none;width:18px;height:18px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center}
+.kit-toast-body{flex:1;min-width:0}
+.kit-toast-title{font-size:14px;font-weight:600;margin:0;line-height:1.35;overflow-wrap:anywhere}
+.kit-toast-desc{font-size:13px;color:var(--kit-t-muted);margin:2px 0 0;overflow-wrap:anywhere}
+.kit-toast-desc a{color:inherit;text-decoration:underline}
+.kit-toast-x{flex:none;border:0;background:transparent;color:var(--kit-t-muted);cursor:pointer;padding:0;width:18px;height:18px;line-height:1}
+.kit-toast-x:hover{color:var(--kit-t-fg)}
+.kit-spin{width:16px;height:16px;border:2px solid transparent;border-top-color:var(--kit-t-accent);border-radius:50%;opacity:.6;animation:kit-t-spin .7s linear infinite}
+.kit-ok{color:var(--kit-t-success)}
+.kit-err{color:var(--kit-t-error)}
+@keyframes kit-t-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+@keyframes kit-t-spin{to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion:reduce){.kit-toast{animation:none}}

package/dist/toast/toast.d.ts

@@ -0,0 +1,23 @@
+import "./toast.css";
+import { type ReactNode } from "react";
+export type ToastVariant = "info" | "success" | "error" | "loading";
+export interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    variant?: ToastVariant;
+    /** Auto-dismiss after N ms. 0 / undefined for loading = sticky. */
+    duration?: number;
+}
+export interface ToastApi {
+    show: (opts: ToastOptions) => number;
+    update: (id: number, opts: Partial<ToastOptions>) => void;
+    dismiss: (id: number) => void;
+    success: (title: ReactNode, description?: ReactNode) => number;
+    error: (title: ReactNode, description?: ReactNode) => number;
+}
+/** Access the toast API. Returns a no-op (never throws) when no <ToastProvider> is
+ *  mounted, so components like <TxButton> work with or without it. */
+export declare function useToast(): ToastApi;
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;