@qrkit/react 0.0.1 → 0.1.0

package/dist/index.d.cts

@@ -1,2 +1,136 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Account, ScannedUR } from '@qrkit/core';
 
-export {  }
+interface QRKitTheme {
+    /** Primary accent color. Defaults follow MD3: light #6750A4, dark #D0BCFF */
+    accent?: string;
+    /** Modal background color. Defaults follow MD3: light #FFFBFE, dark #1C1B1F */
+    background?: string;
+    /** Modal backdrop color. Default: rgba(0,0,0,0.6) */
+    backdrop?: string;
+    /** Text color. Defaults follow MD3: light #1C1B1F, dark #E6E1E5 */
+    text?: string;
+    /** Muted/secondary text color. Defaults follow MD3: light #49454F, dark #CAC4D0 */
+    textMuted?: string;
+    /** Border radius. Default: 12px (MD3 "medium") */
+    radius?: string;
+    /** Font family. Default: inherit */
+    fontFamily?: string;
+}
+interface SignRequest {
+    message: string;
+    address: string;
+    sourceFingerprint: number | undefined;
+}
+interface QRKitContextValue {
+    account: Account | null;
+    connect: () => void;
+    disconnect: () => void;
+    /** Open the sign modal and resolve with the hex signature. */
+    sign: (request: SignRequest) => Promise<string>;
+}
+interface QRKitProviderProps {
+    children: React.ReactNode;
+    theme?: QRKitTheme;
+    /** App name shown in the sign request origin field. Default: "qrkit" */
+    appName?: string;
+}
+
+declare function QRKitProvider({ children, theme, appName }: QRKitProviderProps): react_jsx_runtime.JSX.Element;
+declare function useQRKit(): QRKitContextValue;
+
+interface ConnectModalProps {
+    onConnect: (account: Account) => void;
+    onClose: () => void;
+}
+declare function ConnectModal({ onConnect, onClose }: ConnectModalProps): react_jsx_runtime.JSX.Element;
+
+interface SignModalProps {
+    request: SignRequest;
+    appName: string;
+    onSign: (signature: string) => void;
+    onReject: () => void;
+}
+declare function SignModal({ request, appName, onSign, onReject }: SignModalProps): react_jsx_runtime.JSX.Element;
+
+interface QRScannerProps {
+    onScan: (result: ScannedUR | string) => boolean | void;
+    hint?: string;
+    enabled?: boolean;
+    className?: string;
+}
+declare function QRScanner({ onScan, hint, enabled, className }: QRScannerProps): react_jsx_runtime.JSX.Element;
+
+interface QRDisplayProps {
+    parts: string[];
+    interval?: number;
+    size?: number;
+    className?: string;
+}
+declare function QRDisplay({ parts, interval, size, className }: QRDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface UseQRScannerOptions {
+    /**
+     * Called when a QR code is decoded.
+     * Return false to keep scanning (e.g. on parse error), void/true to stop.
+     */
+    onScan: (result: ScannedUR | string) => boolean | void;
+    enabled?: boolean;
+}
+interface UseQRScannerResult {
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    /** 0–100 while scanning an animated UR, null otherwise */
+    progress: number | null;
+    error: string | null;
+}
+declare function useQRScanner({ onScan, enabled, }: UseQRScannerOptions): UseQRScannerResult;
+
+interface UseQRDisplayOptions {
+    /** QR parts to cycle through. Single-frame: pass an array with one element. */
+    parts: string[];
+    /** Interval between frames in ms. Default: 200 */
+    interval?: number;
+    /** Canvas size in pixels. Default: 300 */
+    size?: number;
+}
+interface UseQRDisplayResult {
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    /** Current frame index */
+    frame: number;
+    total: number;
+}
+declare function useQRDisplay({ parts, interval, size, }: UseQRDisplayOptions): UseQRDisplayResult;
+
+interface UseURDecoderOptions {
+    /**
+     * Called when a QR string is decoded.
+     * Return false to keep scanning (e.g. on parse error), void/true to stop.
+     */
+    onScan: (result: ScannedUR | string) => boolean | void;
+}
+interface UseURDecoderResult {
+    /** Feed a raw QR string into the decoder. Returns true when scanning is done. */
+    receivePart: (data: string) => boolean;
+    /** 0–100 while assembling an animated UR, null otherwise */
+    progress: number | null;
+    /** Reset decoder state (e.g. to start a new scan) */
+    reset: () => void;
+}
+declare function useURDecoder({ onScan }: UseURDecoderOptions): UseURDecoderResult;
+
+interface UseQRPartsOptions {
+    /** QR parts to cycle through. Single-frame: pass an array with one element. */
+    parts: string[];
+    /** Interval between frames in ms. Default: 200 */
+    interval?: number;
+}
+interface UseQRPartsResult {
+    /** The current QR string to render */
+    part: string;
+    /** Current frame index (0-based) */
+    frame: number;
+    total: number;
+}
+declare function useQRParts({ parts, interval, }: UseQRPartsOptions): UseQRPartsResult;
+
+export { ConnectModal, type ConnectModalProps, QRDisplay, type QRDisplayProps, type QRKitContextValue, QRKitProvider, type QRKitProviderProps, type QRKitTheme, QRScanner, type QRScannerProps, SignModal, type SignModalProps, type SignRequest, type UseQRDisplayOptions, type UseQRDisplayResult, type UseQRPartsOptions, type UseQRPartsResult, type UseQRScannerOptions, type UseQRScannerResult, type UseURDecoderOptions, type UseURDecoderResult, useQRDisplay, useQRKit, useQRParts, useQRScanner, useURDecoder };

package/dist/index.d.ts

@@ -1,2 +1,136 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Account, ScannedUR } from '@qrkit/core';
 
-export {  }
+interface QRKitTheme {
+    /** Primary accent color. Defaults follow MD3: light #6750A4, dark #D0BCFF */
+    accent?: string;
+    /** Modal background color. Defaults follow MD3: light #FFFBFE, dark #1C1B1F */
+    background?: string;
+    /** Modal backdrop color. Default: rgba(0,0,0,0.6) */
+    backdrop?: string;
+    /** Text color. Defaults follow MD3: light #1C1B1F, dark #E6E1E5 */
+    text?: string;
+    /** Muted/secondary text color. Defaults follow MD3: light #49454F, dark #CAC4D0 */
+    textMuted?: string;
+    /** Border radius. Default: 12px (MD3 "medium") */
+    radius?: string;
+    /** Font family. Default: inherit */
+    fontFamily?: string;
+}
+interface SignRequest {
+    message: string;
+    address: string;
+    sourceFingerprint: number | undefined;
+}
+interface QRKitContextValue {
+    account: Account | null;
+    connect: () => void;
+    disconnect: () => void;
+    /** Open the sign modal and resolve with the hex signature. */
+    sign: (request: SignRequest) => Promise<string>;
+}
+interface QRKitProviderProps {
+    children: React.ReactNode;
+    theme?: QRKitTheme;
+    /** App name shown in the sign request origin field. Default: "qrkit" */
+    appName?: string;
+}
+
+declare function QRKitProvider({ children, theme, appName }: QRKitProviderProps): react_jsx_runtime.JSX.Element;
+declare function useQRKit(): QRKitContextValue;
+
+interface ConnectModalProps {
+    onConnect: (account: Account) => void;
+    onClose: () => void;
+}
+declare function ConnectModal({ onConnect, onClose }: ConnectModalProps): react_jsx_runtime.JSX.Element;
+
+interface SignModalProps {
+    request: SignRequest;
+    appName: string;
+    onSign: (signature: string) => void;
+    onReject: () => void;
+}
+declare function SignModal({ request, appName, onSign, onReject }: SignModalProps): react_jsx_runtime.JSX.Element;
+
+interface QRScannerProps {
+    onScan: (result: ScannedUR | string) => boolean | void;
+    hint?: string;
+    enabled?: boolean;
+    className?: string;
+}
+declare function QRScanner({ onScan, hint, enabled, className }: QRScannerProps): react_jsx_runtime.JSX.Element;
+
+interface QRDisplayProps {
+    parts: string[];
+    interval?: number;
+    size?: number;
+    className?: string;
+}
+declare function QRDisplay({ parts, interval, size, className }: QRDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface UseQRScannerOptions {
+    /**
+     * Called when a QR code is decoded.
+     * Return false to keep scanning (e.g. on parse error), void/true to stop.
+     */
+    onScan: (result: ScannedUR | string) => boolean | void;
+    enabled?: boolean;
+}
+interface UseQRScannerResult {
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    /** 0–100 while scanning an animated UR, null otherwise */
+    progress: number | null;
+    error: string | null;
+}
+declare function useQRScanner({ onScan, enabled, }: UseQRScannerOptions): UseQRScannerResult;
+
+interface UseQRDisplayOptions {
+    /** QR parts to cycle through. Single-frame: pass an array with one element. */
+    parts: string[];
+    /** Interval between frames in ms. Default: 200 */
+    interval?: number;
+    /** Canvas size in pixels. Default: 300 */
+    size?: number;
+}
+interface UseQRDisplayResult {
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    /** Current frame index */
+    frame: number;
+    total: number;
+}
+declare function useQRDisplay({ parts, interval, size, }: UseQRDisplayOptions): UseQRDisplayResult;
+
+interface UseURDecoderOptions {
+    /**
+     * Called when a QR string is decoded.
+     * Return false to keep scanning (e.g. on parse error), void/true to stop.
+     */
+    onScan: (result: ScannedUR | string) => boolean | void;
+}
+interface UseURDecoderResult {
+    /** Feed a raw QR string into the decoder. Returns true when scanning is done. */
+    receivePart: (data: string) => boolean;
+    /** 0–100 while assembling an animated UR, null otherwise */
+    progress: number | null;
+    /** Reset decoder state (e.g. to start a new scan) */
+    reset: () => void;
+}
+declare function useURDecoder({ onScan }: UseURDecoderOptions): UseURDecoderResult;
+
+interface UseQRPartsOptions {
+    /** QR parts to cycle through. Single-frame: pass an array with one element. */
+    parts: string[];
+    /** Interval between frames in ms. Default: 200 */
+    interval?: number;
+}
+interface UseQRPartsResult {
+    /** The current QR string to render */
+    part: string;
+    /** Current frame index (0-based) */
+    frame: number;
+    total: number;
+}
+declare function useQRParts({ parts, interval, }: UseQRPartsOptions): UseQRPartsResult;
+
+export { ConnectModal, type ConnectModalProps, QRDisplay, type QRDisplayProps, type QRKitContextValue, QRKitProvider, type QRKitProviderProps, type QRKitTheme, QRScanner, type QRScannerProps, SignModal, type SignModalProps, type SignRequest, type UseQRDisplayOptions, type UseQRDisplayResult, type UseQRPartsOptions, type UseQRPartsResult, type UseQRScannerOptions, type UseQRScannerResult, type UseURDecoderOptions, type UseURDecoderResult, useQRDisplay, useQRKit, useQRParts, useQRScanner, useURDecoder };

package/dist/index.js

@@ -1 +1,385 @@
+// src/context.tsx
+import { createContext, useCallback as useCallback5, useContext, useEffect as useEffect5, useMemo, useRef as useRef6, useState as useState5 } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/ConnectModal.tsx
+import { useCallback as useCallback3 } from "react";
+import { parseConnection } from "@qrkit/core";
+
+// src/components/Modal.tsx
+import { useEffect, useRef } from "react";
+import { createFocusTrap } from "focus-trap";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Modal({ title, onClose, children, className }) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const el = containerRef.current;
+    const trap = el ? createFocusTrap(el, {
+      escapeDeactivates: true,
+      onDeactivate: onClose,
+      allowOutsideClick: true
+    }) : null;
+    trap?.activate();
+    return () => {
+      trap?.deactivate();
+    };
+  }, [onClose]);
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx("div", { className: "qrkit qrkit-backdrop", onClick: onClose, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `qrkit-modal${className ? ` ${className}` : ""}`,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "qrkit-modal-header", children: [
+          /* @__PURE__ */ jsx("h2", { className: "qrkit-modal-title", children: title }),
+          /* @__PURE__ */ jsx("button", { className: "qrkit-close-btn", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+        ] }),
+        children
+      ]
+    }
+  ) });
+}
+
+// src/hooks/useQRScanner.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import QrScanner from "qr-scanner";
+
+// src/hooks/useURDecoder.ts
+import { useCallback, useRef as useRef2, useState } from "react";
+import { URDecoder } from "@ngraveio/bc-ur";
+function useURDecoder({ onScan }) {
+  const decoderRef = useRef2(new URDecoder());
+  const onScanRef = useRef2(onScan);
+  const [progress, setProgress] = useState(null);
+  onScanRef.current = onScan;
+  const reset = useCallback(() => {
+    decoderRef.current = new URDecoder();
+    setProgress(null);
+  }, []);
+  const receivePart = useCallback(
+    (data) => {
+      if (!data.toLowerCase().startsWith("ur:")) {
+        return onScanRef.current(data) !== false;
+      }
+      decoderRef.current.receivePart(data.toLowerCase());
+      setProgress(Math.round(decoderRef.current.estimatedPercentComplete() * 100));
+      if (!decoderRef.current.isComplete()) return false;
+      const ur = decoderRef.current.resultUR();
+      const scanned = { type: ur.type, cbor: new Uint8Array(ur.cbor) };
+      if (onScanRef.current(scanned) !== false) return true;
+      reset();
+      return false;
+    },
+    [reset]
+  );
+  return { receivePart, progress, reset };
+}
+
+// src/hooks/useQRScanner.ts
+function useQRScanner({
+  onScan,
+  enabled = true
+}) {
+  const videoRef = useRef3(null);
+  const scannerRef = useRef3(null);
+  const [error, setError] = useState2(null);
+  const { receivePart, progress } = useURDecoder({ onScan });
+  const processResult = useCallback2(
+    (data, scanner) => {
+      const done = receivePart(data);
+      if (done) scanner.stop();
+    },
+    [receivePart]
+  );
+  useEffect2(() => {
+    if (!enabled || !videoRef.current) return;
+    const scanner = new QrScanner(
+      videoRef.current,
+      (result) => processResult(result.data, scanner),
+      {
+        preferredCamera: "environment",
+        highlightScanRegion: false,
+        highlightCodeOutline: false
+      }
+    );
+    scannerRef.current = scanner;
+    scanner.start().catch(() => {
+      setError("Camera access denied. Please allow camera permissions.");
+    });
+    return () => {
+      scanner.stop();
+      scanner.destroy();
+      scannerRef.current = null;
+    };
+  }, [enabled, processResult]);
+  return { videoRef, progress, error };
+}
+
+// src/components/QRScanner.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function QRScanner({ onScan, hint, enabled = true, className }) {
+  const { videoRef, progress, error } = useQRScanner({ onScan, enabled });
+  if (error) {
+    return /* @__PURE__ */ jsx2("div", { className: `qrkit-scanner-error${className ? ` ${className}` : ""}`, children: error });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: `qrkit-scanner-wrap${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx2("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "qrkit-scanner-video" }),
+    /* @__PURE__ */ jsxs2("div", { className: "qrkit-scanner-overlay", children: [
+      /* @__PURE__ */ jsx2("div", { className: "qrkit-scanner-corner tl" }),
+      /* @__PURE__ */ jsx2("div", { className: "qrkit-scanner-corner tr" }),
+      /* @__PURE__ */ jsx2("div", { className: "qrkit-scanner-corner bl" }),
+      /* @__PURE__ */ jsx2("div", { className: "qrkit-scanner-corner br" })
+    ] }),
+    progress !== null && progress < 100 && /* @__PURE__ */ jsxs2("div", { className: "qrkit-scanner-progress", children: [
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "qrkit-hint", style: { position: "absolute", bottom: 8, left: 0, right: 0 }, children: progress !== null && progress < 100 ? "Keep scanning \u2014 animated QR in progress\u2026" : hint ?? "Point camera at the QR code" })
+  ] });
+}
+
+// src/components/ConnectModal.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ConnectModal({ onConnect, onClose }) {
+  const handleScan = useCallback3(
+    (data) => {
+      try {
+        const accounts = parseConnection(data, { chains: ["evm"] });
+        const account = accounts[0];
+        if (!account) return false;
+        onConnect(account);
+      } catch {
+        return false;
+      }
+    },
+    [onConnect]
+  );
+  return /* @__PURE__ */ jsxs3(Modal, { title: "Connect Wallet", onClose, children: [
+    /* @__PURE__ */ jsxs3("p", { className: "qrkit-step", children: [
+      "On your hardware wallet, go to ",
+      /* @__PURE__ */ jsx3("strong", { children: "Connect software wallet" }),
+      " and point the screen at this camera."
+    ] }),
+    /* @__PURE__ */ jsx3(QRScanner, { onScan: handleScan, hint: "Scan the wallet's connection QR code" })
+  ] });
+}
+
+// src/components/SignModal.tsx
+import { useCallback as useCallback4, useState as useState4 } from "react";
+import { buildEthSignRequestURParts, parseEthSignature } from "@qrkit/core";
+
+// src/hooks/useQRDisplay.ts
+import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import QRCode from "qrcode";
+
+// src/hooks/useQRParts.ts
+import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+function useQRParts({
+  parts,
+  interval = 200
+}) {
+  const [frame, setFrame] = useState3(0);
+  const frameRef = useRef4(0);
+  useEffect3(() => {
+    frameRef.current = 0;
+    setFrame(0);
+  }, [parts]);
+  useEffect3(() => {
+    if (parts.length <= 1) return;
+    const id = setInterval(() => {
+      frameRef.current = (frameRef.current + 1) % parts.length;
+      setFrame(frameRef.current);
+    }, interval);
+    return () => clearInterval(id);
+  }, [parts, interval]);
+  return {
+    part: parts[frameRef.current % Math.max(parts.length, 1)] ?? "",
+    frame,
+    total: parts.length
+  };
+}
+
+// src/hooks/useQRDisplay.ts
+function useQRDisplay({
+  parts,
+  interval,
+  size = 300
+}) {
+  const canvasRef = useRef5(null);
+  const { part, frame, total } = useQRParts({ parts, interval });
+  useEffect4(() => {
+    if (!part || !canvasRef.current) return;
+    QRCode.toCanvas(canvasRef.current, part, {
+      width: size,
+      margin: 2,
+      errorCorrectionLevel: "M"
+    }).catch(() => {
+    });
+  }, [part, size]);
+  return { canvasRef, frame, total };
+}
+
+// src/components/QRDisplay.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function QRDisplay({ parts, interval, size = 300, className }) {
+  const { canvasRef, frame, total } = useQRDisplay({ parts, interval, size });
+  return /* @__PURE__ */ jsxs4("div", { className: `qrkit-qr-wrap${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx4("canvas", { ref: canvasRef, className: "qrkit-qr-canvas", width: size, height: size }),
+    total > 1 && /* @__PURE__ */ jsxs4("p", { className: "qrkit-hint", children: [
+      "Frame ",
+      frame + 1,
+      " / ",
+      total,
+      " \u2014 keep Shell pointed at the screen"
+    ] })
+  ] });
+}
+
+// src/components/SignModal.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SignModal({ request, appName, onSign, onReject }) {
+  const [step, setStep] = useState4("display");
+  const parts = buildEthSignRequestURParts(
+    request.message,
+    request.address,
+    request.sourceFingerprint,
+    appName
+  );
+  const handleScan = useCallback4(
+    (data) => {
+      try {
+        const sig = parseEthSignature(data);
+        onSign(sig);
+      } catch {
+        return false;
+      }
+    },
+    [onSign]
+  );
+  return /* @__PURE__ */ jsxs5(
+    Modal,
+    {
+      title: step === "display" ? "Sign Request" : "Scan Signature",
+      onClose: onReject,
+      children: [
+        step === "display" && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5("p", { className: "qrkit-step", children: "Point your hardware wallet camera at this QR code to approve the sign request." }),
+          /* @__PURE__ */ jsx5(QRDisplay, { parts }),
+          /* @__PURE__ */ jsx5("button", { className: "qrkit-btn qrkit-btn-primary", onClick: () => setStep("scan"), children: "Wallet signed \u2014 scan response" }),
+          /* @__PURE__ */ jsx5("button", { className: "qrkit-btn qrkit-btn-ghost", onClick: onReject, children: "Cancel" })
+        ] }),
+        step === "scan" && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5("p", { className: "qrkit-step", children: "On your hardware wallet, show the signature QR and point it at this camera." }),
+          /* @__PURE__ */ jsx5(QRScanner, { onScan: handleScan, hint: "Scan the wallet's signature QR code" }),
+          /* @__PURE__ */ jsx5("button", { className: "qrkit-btn qrkit-btn-ghost", onClick: () => setStep("display"), children: "\u2190 Back" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/context.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var QRKitContext = createContext(null);
+function buildThemeStyle(theme) {
+  const vars = {
+    "--qrkit-accent": theme.accent,
+    "--qrkit-bg": theme.background,
+    "--qrkit-backdrop": theme.backdrop,
+    "--qrkit-text": theme.text,
+    "--qrkit-text-muted": theme.textMuted,
+    "--qrkit-radius": theme.radius,
+    "--qrkit-font": theme.fontFamily
+  };
+  const declarations = Object.entries(vars).filter(([, v]) => v !== void 0).map(([k, v]) => `  ${k}: ${v};`).join("\n");
+  return declarations ? `.qrkit {
+${declarations}
+}` : "";
+}
+function QRKitProvider({ children, theme = {}, appName = "qrkit" }) {
+  const [account, setAccount] = useState5(null);
+  const [connectOpen, setConnectOpen] = useState5(false);
+  const [pendingSign, setPendingSign] = useState5(null);
+  const pendingSignRef = useRef6(null);
+  const themeStyle = useMemo(() => buildThemeStyle(theme), [theme]);
+  useEffect5(() => {
+    if (!themeStyle) return;
+    const el = document.createElement("style");
+    el.setAttribute("data-qrkit-theme", "");
+    el.textContent = themeStyle;
+    document.head.appendChild(el);
+    return () => el.remove();
+  }, [themeStyle]);
+  const connect = useCallback5(() => setConnectOpen(true), []);
+  const disconnect = useCallback5(() => setAccount(null), []);
+  const handleConnect = useCallback5((acc) => {
+    setAccount(acc);
+    setConnectOpen(false);
+  }, []);
+  const sign = useCallback5((request) => {
+    return new Promise((resolve, reject) => {
+      const pending = { request, resolve, reject };
+      pendingSignRef.current = pending;
+      setPendingSign(pending);
+    });
+  }, []);
+  const handleSign = useCallback5((sig) => {
+    pendingSignRef.current?.resolve(sig);
+    pendingSignRef.current = null;
+    setPendingSign(null);
+  }, []);
+  const handleReject = useCallback5(() => {
+    pendingSignRef.current?.reject(new Error("User rejected the sign request"));
+    pendingSignRef.current = null;
+    setPendingSign(null);
+  }, []);
+  const value = useMemo(
+    () => ({ account, connect, disconnect, sign }),
+    [account, connect, disconnect, sign]
+  );
+  return /* @__PURE__ */ jsxs6(QRKitContext.Provider, { value, children: [
+    children,
+    connectOpen && createPortal(
+      /* @__PURE__ */ jsx6(ConnectModal, { onConnect: handleConnect, onClose: () => setConnectOpen(false) }),
+      document.body
+    ),
+    pendingSign && createPortal(
+      /* @__PURE__ */ jsx6(
+        SignModal,
+        {
+          request: pendingSign.request,
+          appName,
+          onSign: handleSign,
+          onReject: handleReject
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function useQRKit() {
+  const ctx = useContext(QRKitContext);
+  if (!ctx) throw new Error("useQRKit must be used within a QRKitProvider");
+  return ctx;
+}
+export {
+  ConnectModal,
+  QRDisplay,
+  QRKitProvider,
+  QRScanner,
+  SignModal,
+  useQRDisplay,
+  useQRKit,
+  useQRParts,
+  useQRScanner,
+  useURDecoder
+};
 //# sourceMappingURL=index.js.map