@livo-build/kit 0.1.0

package/dist/toast/toast.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./toast.css";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+const ToastContext = createContext(null);
+const NOOP = {
+    show: () => 0,
+    update: () => { },
+    dismiss: () => { },
+    success: () => 0,
+    error: () => 0,
+};
+/** 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 function useToast() {
+    return useContext(ToastContext) ?? NOOP;
+}
+function Icon({ variant }) {
+    if (variant === "loading")
+        return _jsx("span", { className: "kit-spin" });
+    if (variant === "success")
+        return (_jsx("svg", { className: "kit-ok", width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M5 10l3 3 7-7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    if (variant === "error")
+        return (_jsxs("svg", { className: "kit-err", width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: [_jsx("path", { d: "M10 6v5M10 14h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.6" })] }));
+    return (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: [_jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.6" }), _jsx("path", { d: "M10 9v5M10 6h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
+}
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const nextId = useRef(1);
+    const timers = useRef(new Map());
+    const dismiss = useCallback((id) => {
+        setToasts((t) => t.filter((x) => x.id !== id));
+        const tm = timers.current.get(id);
+        if (tm) {
+            clearTimeout(tm);
+            timers.current.delete(id);
+        }
+    }, []);
+    const schedule = useCallback((id, variant, duration) => {
+        const prev = timers.current.get(id);
+        if (prev)
+            clearTimeout(prev);
+        const ms = duration ?? (variant === "loading" ? 0 : 5000);
+        if (ms > 0)
+            timers.current.set(id, setTimeout(() => dismiss(id), ms));
+    }, [dismiss]);
+    const show = useCallback((opts) => {
+        const id = nextId.current++;
+        setToasts((t) => [...t, { id, variant: "info", ...opts }]);
+        schedule(id, opts.variant, opts.duration);
+        return id;
+    }, [schedule]);
+    const update = useCallback((id, opts) => {
+        setToasts((t) => t.map((x) => (x.id === id ? { ...x, ...opts } : x)));
+        schedule(id, opts.variant, opts.duration);
+    }, [schedule]);
+    const api = {
+        show,
+        update,
+        dismiss,
+        success: (title, description) => show({ title, description, variant: "success" }),
+        error: (title, description) => show({ title, description, variant: "error" }),
+    };
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: "kit-toaster", role: "region", "aria-label": "Notifications", children: toasts.map((t) => (_jsxs("div", { className: "kit-toast", role: "status", "data-variant": t.variant ?? "info", children: [_jsx("span", { className: "kit-toast-icon", children: _jsx(Icon, { variant: t.variant ?? "info" }) }), _jsxs("div", { className: "kit-toast-body", children: [_jsx("p", { className: "kit-toast-title", children: t.title }), t.description ? _jsx("p", { className: "kit-toast-desc", children: t.description }) : null] }), _jsx("button", { className: "kit-toast-x", "aria-label": "Dismiss", onClick: () => dismiss(t.id), children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: _jsx("path", { d: "M3.5 3.5l7 7M10.5 3.5l-7 7", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) })] }, t.id))) })] }));
+}

package/dist/tx/TxButton.d.ts

@@ -0,0 +1,13 @@
+import "./tx.css";
+import { type ReactNode } from "react";
+import { type UseTxOptions } from "./useTx";
+export interface TxButtonProps extends Omit<UseTxOptions, "onSuccess" | "onError"> {
+    children: ReactNode;
+    className?: string;
+    pendingLabel?: ReactNode;
+    /** Show automatic toasts for the tx lifecycle (default true; needs <ToastProvider>). */
+    toast?: boolean;
+    onSuccess?: (hash: `0x${string}`) => void;
+    onError?: (error: Error) => void;
+}
+export declare function TxButton({ children, className, pendingLabel, toast, onSuccess, onError, ...txOpts }: TxButtonProps): import("react").JSX.Element;

package/dist/tx/TxButton.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./tx.css";
+import { useEffect, useRef } from "react";
+import { useConnection } from "wagmi";
+import { useTx } from "./useTx";
+import { decodeRevert } from "./revert";
+import { useToast } from "../toast";
+import { shortHash } from "../format";
+// A button that runs a contract write and reflects the whole lifecycle: disabled +
+// "Confirm in wallet…" / "Confirming…" while busy, and (with a <ToastProvider>) a
+// loading → success/error toast with an explorer link. The #1 boilerplate, gone.
+export function TxButton({ children, className, pendingLabel, toast = true, onSuccess, onError, ...txOpts }) {
+    const t = useToast();
+    const { chain } = useConnection();
+    const toastId = useRef(null);
+    const explorer = chain?.blockExplorers?.default?.url;
+    const tx = useTx({
+        ...txOpts,
+        onSuccess: (hash) => {
+            if (toast) {
+                if (toastId.current != null)
+                    t.dismiss(toastId.current);
+                toastId.current = null;
+                const desc = explorer ? (_jsx("a", { href: explorer + "/tx/" + hash, target: "_blank", rel: "noreferrer", children: "View on explorer" })) : (shortHash(hash));
+                t.success("Transaction confirmed", desc);
+            }
+            onSuccess?.(hash);
+        },
+        onError: (err) => {
+            if (toast) {
+                if (toastId.current != null)
+                    t.dismiss(toastId.current);
+                toastId.current = null;
+                t.error("Transaction failed", decodeRevert(err));
+            }
+            onError?.(err);
+        },
+    });
+    useEffect(() => {
+        if (!toast)
+            return;
+        const busy = tx.status === "pending" || tx.status === "confirming";
+        if (busy && toastId.current == null) {
+            toastId.current = t.show({
+                variant: "loading",
+                title: tx.status === "pending" ? "Confirm in your wallet" : "Transaction pending",
+                description: "Waiting for confirmation…",
+            });
+        }
+    }, [tx.status, toast, t]);
+    const busy = tx.status === "pending" || tx.status === "confirming";
+    return (_jsx("button", { className: "kit-btn " + (className || ""), "data-state": tx.status, disabled: busy, onClick: () => {
+            toastId.current = null;
+            tx.send();
+        }, children: busy ? (pendingLabel ?? (tx.status === "pending" ? "Confirm in wallet…" : "Confirming…")) : children }));
+}

package/dist/tx/index.d.ts

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

package/dist/tx/index.js

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

package/dist/tx/revert.d.ts

@@ -0,0 +1 @@
+export declare function decodeRevert(error: unknown): string;

package/dist/tx/revert.js

@@ -0,0 +1,24 @@
+// Turn a viem/wagmi error into a short, human message (revert reason where
+// available) instead of a wall of hex. viem errors carry `shortMessage` + a cause
+// chain; we surface the most specific message we can find.
+export function decodeRevert(error) {
+    if (!error)
+        return "Transaction failed";
+    const top = error;
+    if (top.shortMessage)
+        return top.shortMessage;
+    let cause = top.cause;
+    for (let i = 0; i < 6 && cause; i++) {
+        const c = cause;
+        if (c.shortMessage)
+            return c.shortMessage;
+        if (c.reason)
+            return c.reason;
+        cause = c.cause;
+    }
+    if (top.details)
+        return top.details;
+    if (top.message)
+        return top.message.split("\n")[0];
+    return "Transaction failed";
+}

package/dist/tx/tx.css

@@ -0,0 +1,13 @@
+/* Neutral default button. Override --kit-accent (or pass your own className /
+   target [data-state]) to restyle. Inherits the app font. */
+.kit-btn{
+  display:inline-flex;align-items:center;justify-content:center;gap:8px;
+  padding:10px 16px;border:0;border-radius:11px;
+  font:inherit;font-weight:600;font-size:14px;cursor:pointer;
+  transition:opacity .12s,transform .08s;
+  background:var(--kit-accent,#111827);color:var(--kit-accent-fg,#fff);
+}
+.kit-btn:disabled{opacity:.6;cursor:default}
+.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)}}

package/dist/tx/useTx.d.ts

@@ -0,0 +1,21 @@
+import type { Abi } from "viem";
+export type TxStatus = "idle" | "pending" | "confirming" | "success" | "error";
+export interface UseTxOptions {
+    address: `0x${string}`;
+    abi: Abi;
+    functionName: string;
+    args?: readonly unknown[];
+    /** Native value (wei) to send with the call. */
+    value?: bigint;
+    onSuccess?: (hash: `0x${string}`) => void;
+    onError?: (error: Error) => void;
+}
+export interface UseTxResult {
+    /** Submit the transaction. Optionally override the args for this send. */
+    send: (overrideArgs?: readonly unknown[]) => void;
+    status: TxStatus;
+    hash?: `0x${string}`;
+    error: Error | null;
+    reset: () => void;
+}
+export declare function useTx(opts: UseTxOptions): UseTxResult;

package/dist/tx/useTx.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";
+// One hook for the whole write lifecycle: submit → pending (wallet) → confirming
+// (mined) → success | error. Explicit return type keeps the .d.ts portable.
+export function useTx(opts) {
+    const { writeContract, data: hash, isPending, error: writeError, reset: resetWrite } = useWriteContract();
+    const { isLoading: confirming, isSuccess, error: receiptError } = useWaitForTransactionReceipt({ hash });
+    const firedFor = useRef(null);
+    const error = (writeError ?? receiptError ?? null);
+    const status = error
+        ? "error"
+        : isSuccess
+            ? "success"
+            : confirming
+                ? "confirming"
+                : isPending
+                    ? "pending"
+                    : "idle";
+    useEffect(() => {
+        if (isSuccess && hash && firedFor.current !== hash) {
+            firedFor.current = hash;
+            opts.onSuccess?.(hash);
+        }
+    }, [isSuccess, hash, opts]);
+    useEffect(() => {
+        if (error)
+            opts.onError?.(error);
+    }, [error, opts]);
+    const send = useCallback((overrideArgs) => {
+        const variables = {
+            address: opts.address,
+            abi: opts.abi,
+            functionName: opts.functionName,
+            args: overrideArgs ?? opts.args ?? [],
+        };
+        if (opts.value !== undefined)
+            variables.value = opts.value;
+        writeContract(variables);
+    }, [opts, writeContract]);
+    const reset = useCallback(() => {
+        firedFor.current = null;
+        resetWrite();
+    }, [resetWrite]);
+    return { send, status, hash, error, reset };
+}

package/dist/ui/index.d.ts

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

package/dist/ui/index.js

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

package/dist/ui/ui.css

@@ -0,0 +1,23 @@
+/* Neutral primitives — override the variables / class hooks to make them yours. */
+.kit-dialog-root{position:fixed;inset:0;z-index:2147483200;display:flex;align-items:center;justify-content:center;font:inherit}
+.kit-dialog-overlay{position:absolute;inset:0;background:rgba(17,24,39,.5);animation:kit-fade .16s ease}
+.kit-dialog{position:relative;width:420px;max-width:calc(100vw - 28px);max-height:calc(100vh - 48px);overflow:auto;background:var(--kit-bg,#fff);color:var(--kit-fg,#111827);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:20px;animation:kit-pop .2s cubic-bezier(.2,.9,.25,1);outline:none}
+.kit-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
+.kit-dialog-title{margin:0;font-size:17px;font-weight:600}
+.kit-dialog-x{width:30px;height:30px;border:0;border-radius:50%;background:var(--kit-row,#f3f4f6);color:var(--kit-muted,#6b7280);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
+.kit-dialog-x:hover{color:var(--kit-fg,#111827)}
+.kit-card{background:var(--kit-bg,#fff);color:var(--kit-fg,#111827);border:1px solid var(--kit-border,#e5e7eb);border-radius:14px;padding:16px;font:inherit}
+.kit-skeleton{display:block;background:linear-gradient(90deg,var(--kit-row,#f3f4f6) 25%,var(--kit-row-hover,#e9eaee) 37%,var(--kit-row,#f3f4f6) 63%);background-size:400% 100%;border-radius:8px;animation:kit-shimmer 1.4s ease infinite}
+.kit-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 16px;color:var(--kit-muted,#6b7280);font:inherit}
+.kit-empty-title{color:var(--kit-fg,#111827);font-size:15px;font-weight:600;margin:0}
+.kit-empty-desc{font-size:14px;margin:0;max-width:34ch}
+.kit-spinner{display:inline-block;box-sizing:border-box;border:2px solid var(--kit-border,#e5e7eb);border-top-color:currentColor;border-radius:50%;animation:kit-spin .7s linear infinite}
+.kit-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0}
+@keyframes kit-fade{from{opacity:0}to{opacity:1}}
+@keyframes kit-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
+@keyframes kit-spin{to{transform:rotate(360deg)}}
+@keyframes kit-shimmer{from{background-position:100% 0}to{background-position:0 0}}
+@media (prefers-color-scheme:dark){.kit-dialog,.kit-card{--kit-bg:#1b1b1f;--kit-fg:#f5f5f7;--kit-border:#2c2c31;--kit-row:#27272c;--kit-row-hover:#313137}}
+@media (max-width:480px){.kit-dialog-root{align-items:flex-end}.kit-dialog{width:100%;max-width:100%;border-radius:16px 16px 0 0;animation:kit-up .22s cubic-bezier(.2,.9,.25,1)}}
+@keyframes kit-up{from{transform:translateY(100%)}to{transform:none}}
+@media (prefers-reduced-motion:reduce){.kit-dialog,.kit-dialog-overlay,.kit-skeleton,.kit-spinner{animation:none}}

package/dist/ui/ui.d.ts

@@ -0,0 +1,40 @@
+import "./ui.css";
+import { type ReactNode, type CSSProperties, type HTMLAttributes } from "react";
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+export declare function Dialog({ open, onClose, title, children, className }: DialogProps): import("react").JSX.Element | null;
+export declare function Card({ children, className, ...rest }: {
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    radius?: number | string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Skeleton({ width, height, radius, className, style }: SkeletonProps): import("react").JSX.Element;
+export declare function Spinner({ size, className }: {
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+export interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}
+export declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): import("react").JSX.Element;
+export interface CopyButtonProps {
+    value: string;
+    children?: ReactNode;
+    copiedLabel?: ReactNode;
+    className?: string;
+}
+export declare function CopyButton({ value, children, copiedLabel, className }: CopyButtonProps): import("react").JSX.Element;

package/dist/ui/ui.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ui.css";
+import { useEffect, useRef, useState, } from "react";
+import { cx } from "../util";
+export function Dialog({ open, onClose, title, children, className }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKey);
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKey);
+            document.body.style.overflow = prev;
+        };
+    }, [open, onClose]);
+    useEffect(() => {
+        if (open)
+            ref.current?.focus();
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs("div", { className: "kit-dialog-root", children: [_jsx("div", { className: "kit-dialog-overlay", onClick: onClose }), _jsxs("div", { className: cx("kit-dialog", className), role: "dialog", "aria-modal": "true", ref: ref, tabIndex: -1, children: [title !== undefined ? (_jsxs("div", { className: "kit-dialog-head", children: [_jsx("h2", { className: "kit-dialog-title", children: title }), _jsx("button", { className: "kit-dialog-x", "aria-label": "Close", onClick: onClose, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }) })] })) : null, children] })] }));
+}
+// ---- Card ----------------------------------------------------------------------
+export function Card({ children, className, ...rest }) {
+    return (_jsx("div", { className: cx("kit-card", className), ...rest, children: children }));
+}
+export function Skeleton({ width = "100%", height = 16, radius, className, style }) {
+    return _jsx("span", { className: cx("kit-skeleton", className), style: { width, height, borderRadius: radius, ...style }, "aria-hidden": "true" });
+}
+// ---- Spinner -------------------------------------------------------------------
+export function Spinner({ size = 18, className }) {
+    return _jsx("span", { className: cx("kit-spinner", className), style: { width: size, height: size }, role: "status", "aria-label": "Loading" });
+}
+export function EmptyState({ title, description, icon, action, className }) {
+    return (_jsxs("div", { className: cx("kit-empty", className), children: [icon, _jsx("p", { className: "kit-empty-title", children: title }), description ? _jsx("p", { className: "kit-empty-desc", children: description }) : null, action] }));
+}
+export function CopyButton({ value, children, copiedLabel = "Copied", className }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", className: cx("kit-copy", className), "data-state": copied ? "copied" : "idle", onClick: () => {
+            try {
+                navigator.clipboard.writeText(value);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1200);
+            }
+            catch {
+                /* clipboard unavailable */
+            }
+        }, children: copied ? copiedLabel : (children ?? "Copy") }));
+}

package/dist/util.d.ts

@@ -0,0 +1,2 @@
+/** Join class names, dropping falsy values. */
+export declare const cx: (...c: (string | undefined | false | null)[]) => string;

package/dist/util.js

@@ -0,0 +1,2 @@
+/** Join class names, dropping falsy values. */
+export const cx = (...c) => c.filter(Boolean).join(" ");

package/dist/wallet/ConnectWallet.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type WalletModalClassNames } from "./WalletModal";
+export interface ConnectWalletProps {
+    label?: string;
+    /** Applied to the default trigger/account button (shorthand for classNames.trigger). */
+    className?: string;
+    title?: string;
+    classNames?: {
+        trigger?: string;
+        account?: string;
+        menu?: string;
+        modal?: WalletModalClassNames;
+    };
+    /** Supply your OWN trigger element; the modal still works. Receives helpers. */
+    children?: (api: {
+        open: () => void;
+        isConnected: boolean;
+        address?: string;
+    }) => ReactNode;
+}
+export declare function ConnectWallet({ label, className, title, classNames, children }?: ConnectWalletProps): import("react").JSX.Element;

package/dist/wallet/ConnectWallet.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useConnection, useDisconnect } from "wagmi";
+import { shortAddress, avatarGradient } from "../format";
+import { WalletModal } from "./WalletModal";
+const cx = (...c) => c.filter(Boolean).join(" ");
+// Default connect control: a (neutral) button that opens <WalletModal/>, and an
+// account pill (copy / disconnect) once connected. Style it however you like —
+// `className` / `classNames`, the CSS variables, or pass `children` for a fully
+// custom trigger. Works out of the box, looks like whatever you make it.
+export function ConnectWallet({ label, className, title, classNames, children } = {}) {
+    const { address, isConnected } = useConnection();
+    const { disconnect } = useDisconnect();
+    const [open, setOpen] = useState(false);
+    const [menu, setMenu] = useState(false);
+    if (children) {
+        return (_jsxs(_Fragment, { children: [children({ open: () => setOpen(true), isConnected, address }), _jsx(WalletModal, { open: open, onClose: () => setOpen(false), title: title, classNames: classNames?.modal })] }));
+    }
+    if (isConnected && address) {
+        return (_jsxs("div", { className: "wm-account-wrap", children: [_jsxs("button", { className: cx("wm-account", className, classNames?.account), "data-state": "connected", onClick: () => setMenu((m) => !m), children: [_jsx("span", { className: "wm-avatar", style: { backgroundImage: avatarGradient(address) } }), _jsx("span", { className: "wm-addr", children: shortAddress(address) })] }), menu ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "wm-menu-backdrop", onClick: () => setMenu(false) }), _jsxs("div", { className: cx("wm-menu", classNames?.menu), children: [_jsx("button", { onClick: () => {
+                                        try {
+                                            navigator.clipboard.writeText(address);
+                                        }
+                                        catch {
+                                            /* clipboard unavailable */
+                                        }
+                                        setMenu(false);
+                                    }, children: "Copy address" }), _jsx("button", { onClick: () => {
+                                        disconnect();
+                                        setMenu(false);
+                                    }, children: "Disconnect" })] })] })) : null] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: cx("wm-cta", className, classNames?.trigger), "data-state": "disconnected", onClick: () => setOpen(true), children: label || "Connect Wallet" }), _jsx(WalletModal, { open: open, onClose: () => setOpen(false), title: title, classNames: classNames?.modal })] }));
+}

package/dist/wallet/WalletModal.d.ts

@@ -0,0 +1,20 @@
+import "./wallet.css";
+export interface WalletModalClassNames {
+    root?: string;
+    overlay?: string;
+    sheet?: string;
+    header?: string;
+    title?: string;
+    close?: string;
+    list?: string;
+    wallet?: string;
+}
+export interface WalletModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    onConnected?: () => void;
+    /** Bring your own design — extra classes merged onto each part. */
+    classNames?: WalletModalClassNames;
+}
+export declare function WalletModal({ open, onClose, title, onConnected, classNames }: WalletModalProps): import("react").JSX.Element | null;

package/dist/wallet/WalletModal.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./wallet.css";
+import { useEffect, useRef } from "react";
+import { useWalletConnectors } from "./useWalletConnectors";
+const cx = (...c) => c.filter(Boolean).join(" ");
+// The connect MODAL. Owns structure + behaviour (focus, Esc, scroll-lock,
+// responsive: centered on desktop, bottom sheet on mobile); the LOOK is yours —
+// override the wallet.css variables, pass `classNames`, or target the class hooks
+// / [data-*] attributes. Headless escape hatch: build your own on useWalletConnectors.
+export function WalletModal({ open, onClose, title, onConnected, classNames }) {
+    const { wallets, connect, pendingUid, error, reset } = useWalletConnectors();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKey);
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKey);
+            document.body.style.overflow = prev;
+        };
+    }, [open, onClose]);
+    useEffect(() => {
+        if (open) {
+            reset();
+            ref.current?.focus();
+        }
+    }, [open, reset]);
+    if (!open)
+        return null;
+    return (_jsxs("div", { className: cx("wm-root", classNames?.root), role: "presentation", "data-livo-wallet-modal": "", children: [_jsx("div", { className: cx("wm-overlay", classNames?.overlay), onClick: onClose }), _jsxs("div", { className: cx("wm-sheet", classNames?.sheet), role: "dialog", "aria-modal": "true", "aria-label": title || "Connect a wallet", ref: ref, tabIndex: -1, children: [_jsx("div", { className: "wm-handle" }), _jsxs("div", { className: cx("wm-head", classNames?.header), children: [_jsx("h2", { className: cx("wm-title", classNames?.title), children: title || "Connect Wallet" }), _jsx("button", { className: cx("wm-close", classNames?.close), "aria-label": "Close", onClick: onClose, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }) })] }), error ? (_jsxs("div", { className: "wm-error", "data-state": "error", children: [_jsx("span", { children: error.message.split("\n")[0] }), _jsx("button", { onClick: () => reset(), children: "Try again" })] })) : null, _jsxs("div", { className: cx("wm-list", classNames?.list), children: [wallets.map((c) => (_jsxs("button", { className: cx("wm-wallet", classNames?.wallet), "data-state": pendingUid === c.uid ? "connecting" : "idle", disabled: pendingUid != null, onClick: () => connect(c, () => {
+                                    onConnected?.();
+                                    onClose();
+                                }), children: [_jsx("span", { className: "wm-wname", children: c.name }), _jsxs("span", { className: "wm-wicon", children: [c.icon ? (_jsx("img", { src: c.icon, alt: "", width: 28, height: 28 })) : (_jsx("span", { className: "wm-wfallback", children: (c.name || "?").charAt(0) })), pendingUid === c.uid ? _jsx("span", { className: "wm-spin" }) : null] })] }, c.uid))), wallets.length === 0 ? (_jsx("p", { className: "wm-empty", children: "No wallet detected. Install MetaMask, Rabby, or another browser wallet and reload." })) : null] }), _jsx("p", { className: "wm-foot", children: "Your wallet stays in your control \u2014 we never see your keys." })] })] }));
+}

package/dist/wallet/index.d.ts

@@ -0,0 +1,3 @@
+export { ConnectWallet, type ConnectWalletProps } from "./ConnectWallet";
+export { WalletModal, type WalletModalProps, type WalletModalClassNames } from "./WalletModal";
+export { useWalletConnectors, type WalletConnectors } from "./useWalletConnectors";

package/dist/wallet/index.js

@@ -0,0 +1,3 @@
+export { ConnectWallet } from "./ConnectWallet";
+export { WalletModal } from "./WalletModal";
+export { useWalletConnectors } from "./useWalletConnectors";

package/dist/wallet/useWalletConnectors.d.ts

@@ -0,0 +1,16 @@
+import { type Connector } from "wagmi";
+export interface WalletConnectors {
+    /** Available wallet connectors, de-duped by name (EIP-6963 can surface dups). */
+    wallets: readonly Connector[];
+    /** Connect to a specific wallet; `onSuccess` fires once connected. */
+    connect: (connector: Connector, onSuccess?: () => void) => void;
+    /** A connect attempt is in flight. */
+    isPending: boolean;
+    /** uid of the connector currently connecting (for a per-wallet spinner), else null. */
+    pendingUid: string | null;
+    /** The last connect error, if any. */
+    error: Error | null;
+    /** Clear the error / pending state. */
+    reset: () => void;
+}
+export declare function useWalletConnectors(): WalletConnectors;

package/dist/wallet/useWalletConnectors.js

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { useConnect, useConnectors } from "wagmi";
+// The headless core of the wallet modal — a clean, self-owned surface over wagmi's
+// useConnect/useConnectors. Build a fully custom wallet UI on this while keeping the
+// wiring. The explicit return type also keeps the package's .d.ts portable (no leak
+// of wagmi's deep internal types).
+export function useWalletConnectors() {
+    const connectors = useConnectors();
+    const { connect, isPending, variables, error, reset } = useConnect();
+    const wallets = useMemo(() => {
+        const seen = new Set();
+        return connectors.filter((c) => {
+            const k = (c.name || "").toLowerCase();
+            if (!c.name || seen.has(k))
+                return false;
+            seen.add(k);
+            return true;
+        });
+    }, [connectors]);
+    const pendingUid = isPending
+        ? (variables?.connector?.uid ?? null)
+        : null;
+    return {
+        wallets,
+        connect: (connector, onSuccess) => connect({ connector }, onSuccess ? { onSuccess } : undefined),
+        isPending,
+        pendingUid,
+        error: error ?? null,
+        reset,
+    };
+}