@qrkit/react 0.0.1 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 React context, hooks, and drop-in components for QR-based airgapped wallet flows.
 
-Builds on [`@qrkit/core`](../core). Provides a provider/context model, ready-to-use hooks, and optional drop-in components for connection scanning, account display, and message signing.
+Builds on [`@qrkit/core`](../core). Provides a provider/context, ready-to-use modals, and composable hooks for connection scanning and transaction signing.
 
 ## Install
 
@@ -10,43 +10,139 @@ Builds on [`@qrkit/core`](../core). Provides a provider/context model, ready-to-
 pnpm add @qrkit/react
 ```
 
+Import the default styles (or bring your own):
+
+```ts
+import '@qrkit/react/styles.css'
+```
+
 React 18+ is required as a peer dependency.
 
-## Planned API
+## Quick start — drop-in components
 
-### Provider
+Wrap your app in `QRKitProvider` and call `connect()` / `sign()` from anywhere. The modals appear automatically.
 
 ```tsx
-import { QRKitProvider } from '@qrkit/react'
+import { QRKitProvider, useQRKit } from '@qrkit/react'
+import '@qrkit/react/styles.css'
+
+export function App() {
+  return (
+    <QRKitProvider appName="My dApp">
+      <Wallet />
+    </QRKitProvider>
+  )
+}
+
+function Wallet() {
+  const { account, connect, disconnect, sign } = useQRKit()
+
+  async function handleSign() {
+    if (!account) return
+    const sig = await sign({
+      message: 'Hello from My dApp',
+      address: account.address,
+      sourceFingerprint: account.chain === 'evm' ? account.sourceFingerprint : undefined,
+    })
+    console.log('Signature:', sig)
+  }
+
+  if (!account) return <button onClick={connect}>Connect wallet</button>
+
+  return (
+    <div>
+      <p>{account.address}</p>
+      <button onClick={handleSign}>Sign message</button>
+      <button onClick={disconnect}>Disconnect</button>
+    </div>
+  )
+}
+```
+
+## Theming
+
+Pass a `theme` prop to override CSS variables. Defaults follow Material Design 3 and automatically adapt to light/dark system preference.
 
-<QRKitProvider config={{ appName: 'My dApp', chains: ['evm'] }}>
-  <App />
+```tsx
+<QRKitProvider theme={{ accent: '#ff6b00', radius: '8px' }}>
+  ...
 </QRKitProvider>
 ```
 
-### Hooks
+Or override in CSS directly:
 
-```ts
-import { useQRKit, useQRKitConnect, useQRKitSignMessage } from '@qrkit/react'
+```css
+.qrkit {
+  --qrkit-accent: #ff6b00;
+  --qrkit-radius: 8px;
+}
+```
+
+| Variable | Default (light) | Default (dark) |
+|---|---|---|
+| `--qrkit-accent` | `#6750A4` | `#D0BCFF` |
+| `--qrkit-bg` | `#FFFBFE` | `#1C1B1F` |
+| `--qrkit-text` | `#1C1B1F` | `#E6E1E5` |
+| `--qrkit-text-muted` | `#49454F` | `#CAC4D0` |
+| `--qrkit-radius` | `12px` | `12px` |
+
+## Low-level hooks
+
+### Batteries-included
+
+Use `useQRScanner` and `useQRDisplay` when you want custom layouts but keep the built-in camera and QR rendering libraries.
 
-const { status, session, accounts, disconnect } = useQRKit()
-const { startConnectionScan } = useQRKitConnect()
-const { request, createMessageRequest, parseSignatureResponse } = useQRKitSignMessage()
+```tsx
+import { useQRScanner, useQRDisplay } from '@qrkit/react'
+
+const { videoRef, progress, error } = useQRScanner({ onScan, enabled })
+const { canvasRef, frame, total } = useQRDisplay({ parts })
 ```
 
-### Drop-in components
+### Bring your own scanner / renderer
+
+Use `useURDecoder` and `useQRParts` to plug in any scanning or rendering library.
 
 ```tsx
-import { QRKitConnect, QRKitAccounts, QRKitSignMessage } from '@qrkit/react'
+import { useURDecoder, useQRParts } from '@qrkit/react'
+
+// Feed raw QR strings from any source
+const { receivePart, progress } = useURDecoder({ onScan })
+
+// Get the current part string to render with any library
+const { part, frame, total } = useQRParts({ parts })
+```
+
+## API
 
-// Scan a connection QR
-<QRKitConnect onConnected={(session) => console.log(session)} />
+### `QRKitProvider`
 
-// Display derived accounts
-<QRKitAccounts />
+| Prop | Type | Default |
+|---|---|---|
+| `appName` | `string` | `"qrkit"` |
+| `theme` | `QRKitTheme` | MD3 defaults |
 
-// Full sign message flow
-<QRKitSignMessage message="hello" onSigned={(result) => console.log(result.signature)} />
+### `useQRKit`
+
+```ts
+const { account, connect, disconnect, sign } = useQRKit()
+```
+
+| | Type |
+|---|---|
+| `account` | `Account \| null` |
+| `connect` | `() => void` |
+| `disconnect` | `() => void` |
+| `sign` | `(request: SignRequest) => Promise<string>` |
+
+### `SignRequest`
+
+```ts
+interface SignRequest {
+  message: string
+  address: string
+  sourceFingerprint: number | undefined
+}
 ```
 
 ## License

package/dist/index.cjs

@@ -1,2 +1,493 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ConnectModal: () => ConnectModal,
+  QRDisplay: () => QRDisplay,
+  QRKitProvider: () => QRKitProvider,
+  QRScanner: () => QRScanner,
+  SignModal: () => SignModal,
+  useQRDisplay: () => useQRDisplay,
+  useQRKit: () => useQRKit,
+  useQRParts: () => useQRParts,
+  useQRScanner: () => useQRScanner,
+  useURDecoder: () => useURDecoder
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react8 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/ConnectModal.tsx
+var import_react4 = require("react");
+var import_core = require("@qrkit/core");
+
+// src/components/Modal.tsx
+var import_react = require("react");
+var import_focus_trap = require("focus-trap");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Modal({ title, onClose, children, className }) {
+  const containerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    const trap = el ? (0, import_focus_trap.createFocusTrap)(el, {
+      escapeDeactivates: false,
+      allowOutsideClick: true
+    }) : null;
+    trap?.activate();
+    return () => {
+      trap?.deactivate();
+    };
+  }, [onClose]);
+  (0, import_react.useEffect)(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "qrkit qrkit-backdrop",
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref: containerRef,
+          className: `qrkit-modal${className ? ` ${className}` : ""}`,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "qrkit-modal-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "qrkit-modal-title", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "qrkit-close-btn", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+            ] }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/hooks/useQRScanner.ts
+var import_react3 = require("react");
+var import_jsqr = __toESM(require("jsqr"), 1);
+
+// src/hooks/useURDecoder.ts
+var import_react2 = require("react");
+var import_bc_ur = require("@qrkit/bc-ur");
+function useURDecoder({ onScan }) {
+  const decoderRef = (0, import_react2.useRef)(new import_bc_ur.UrFountainDecoder());
+  const onScanRef = (0, import_react2.useRef)(onScan);
+  const [progress, setProgress] = (0, import_react2.useState)(null);
+  onScanRef.current = onScan;
+  const reset = (0, import_react2.useCallback)(() => {
+    decoderRef.current = new import_bc_ur.UrFountainDecoder();
+    setProgress(null);
+  }, []);
+  const receivePart = (0, import_react2.useCallback)(
+    (data) => {
+      if (!data.toLowerCase().startsWith("ur:")) {
+        return onScanRef.current(data) !== false;
+      }
+      decoderRef.current.receivePartUr(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: ur.getPayloadCbor() };
+      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 = (0, import_react3.useRef)(null);
+  const rafRef = (0, import_react3.useRef)(null);
+  const canvasRef = (0, import_react3.useRef)(null);
+  const doneRef = (0, import_react3.useRef)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const { receivePart, progress } = useURDecoder({ onScan });
+  const receivePartRef = (0, import_react3.useRef)(receivePart);
+  receivePartRef.current = receivePart;
+  const processFrame = (0, import_react3.useCallback)(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas || doneRef.current) return;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return;
+    if (video.readyState === video.HAVE_ENOUGH_DATA) {
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      ctx.drawImage(video, 0, 0);
+      let imageData;
+      try {
+        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      } catch {
+        setError(
+          "Canvas access blocked. Disable fingerprinting protection for this site to scan QR codes."
+        );
+        return;
+      }
+      {
+        const code = (0, import_jsqr.default)(imageData.data, imageData.width, imageData.height);
+        if (code) {
+          const done = receivePartRef.current(code.data);
+          if (done) {
+            doneRef.current = true;
+            return;
+          }
+        }
+      }
+    }
+    rafRef.current = requestAnimationFrame(processFrame);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled || !videoRef.current) return;
+    doneRef.current = false;
+    canvasRef.current = document.createElement("canvas");
+    let stream = null;
+    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then((s) => {
+      stream = s;
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        videoRef.current.play().catch(() => {
+        });
+        rafRef.current = requestAnimationFrame(processFrame);
+      }
+    }).catch(() => {
+      setError("Camera access denied. Please allow camera permissions.");
+    });
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      stream?.getTracks().forEach((t) => t.stop());
+      canvasRef.current = null;
+    };
+  }, [enabled, processFrame]);
+  return { videoRef, progress, error };
+}
+
+// src/components/QRScanner.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function QRScanner({ onScan, hint, enabled = true, className }) {
+  const { videoRef, progress, error } = useQRScanner({ onScan, enabled });
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `qrkit-scanner-error${className ? ` ${className}` : ""}`, children: error });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `qrkit-scanner-wrap${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "qrkit-scanner-video" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qrkit-scanner-overlay", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qrkit-scanner-corner tl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qrkit-scanner-corner tr" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qrkit-scanner-corner bl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qrkit-scanner-corner br" })
+    ] }),
+    progress !== null && progress < 100 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qrkit-scanner-progress", children: [
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ConnectModal({ onConnect, onClose }) {
+  const handleScan = (0, import_react4.useCallback)(
+    (data) => {
+      try {
+        const accounts = (0, import_core.parseConnection)(data, { chains: ["evm"] });
+        const account = accounts[0];
+        if (!account) return false;
+        onConnect(account);
+      } catch {
+        return false;
+      }
+    },
+    [onConnect]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Modal, { title: "Connect Wallet", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "qrkit-step", children: [
+      "On your hardware wallet, go to ",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Connect software wallet" }),
+      " and point the screen at this camera."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(QRScanner, { onScan: handleScan, hint: "Scan the wallet's connection QR code" })
+  ] });
+}
+
+// src/components/SignModal.tsx
+var import_react7 = require("react");
+var import_core2 = require("@qrkit/core");
+
+// src/hooks/useQRDisplay.ts
+var import_react6 = require("react");
+var import_qrcode = __toESM(require("qrcode"), 1);
+
+// src/hooks/useQRParts.ts
+var import_react5 = require("react");
+function useQRParts({
+  parts,
+  interval = 200
+}) {
+  const [frame, setFrame] = (0, import_react5.useState)(0);
+  const frameRef = (0, import_react5.useRef)(0);
+  (0, import_react5.useEffect)(() => {
+    frameRef.current = 0;
+    setFrame(0);
+  }, [parts]);
+  (0, import_react5.useEffect)(() => {
+    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 = (0, import_react6.useRef)(null);
+  const { part, frame, total } = useQRParts({ parts, interval });
+  (0, import_react6.useEffect)(() => {
+    if (!part || !canvasRef.current) return;
+    import_qrcode.default.toCanvas(canvasRef.current, part, {
+      width: size,
+      margin: 2,
+      errorCorrectionLevel: "M"
+    }).catch(() => {
+    });
+  }, [part, size]);
+  return { canvasRef, frame, total };
+}
+
+// src/components/QRDisplay.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function QRDisplay({ parts, interval, size = 300, className }) {
+  const { canvasRef, frame, total } = useQRDisplay({ parts, interval, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `qrkit-qr-wrap${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("canvas", { ref: canvasRef, className: "qrkit-qr-canvas", width: size, height: size }),
+    total > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "qrkit-hint", children: [
+      "Frame ",
+      frame + 1,
+      " / ",
+      total,
+      " \u2014 keep Shell pointed at the screen"
+    ] })
+  ] });
+}
+
+// src/components/SignModal.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SignModal({ request, appName, onSign, onReject }) {
+  const [step, setStep] = (0, import_react7.useState)("display");
+  const parts = (0, import_core2.buildEthSignRequestURParts)(
+    request.message,
+    request.address,
+    request.sourceFingerprint,
+    appName
+  );
+  const handleScan = (0, import_react7.useCallback)(
+    (data) => {
+      try {
+        const sig = (0, import_core2.parseEthSignature)(data);
+        onSign(sig);
+      } catch {
+        return false;
+      }
+    },
+    [onSign]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Modal,
+    {
+      title: step === "display" ? "Sign Request" : "Scan Signature",
+      onClose: onReject,
+      children: [
+        step === "display" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "qrkit-step", children: "Point your hardware wallet camera at this QR code to approve the sign request." }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QRDisplay, { parts }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "qrkit-btn qrkit-btn-primary", onClick: () => setStep("scan"), children: "Wallet signed \u2014 scan response" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "qrkit-btn qrkit-btn-ghost", onClick: onReject, children: "Cancel" })
+        ] }),
+        step === "scan" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "qrkit-step", children: "On your hardware wallet, show the signature QR and point it at this camera." }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QRScanner, { onScan: handleScan, hint: "Scan the wallet's signature QR code" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              className: "qrkit-btn qrkit-btn-ghost",
+              onClick: () => setStep("display"),
+              children: "\u2190 Back"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/context.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var QRKitContext = (0, import_react8.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] = (0, import_react8.useState)(null);
+  const [connectOpen, setConnectOpen] = (0, import_react8.useState)(false);
+  const [pendingSign, setPendingSign] = (0, import_react8.useState)(null);
+  const pendingSignRef = (0, import_react8.useRef)(null);
+  const themeStyle = (0, import_react8.useMemo)(() => buildThemeStyle(theme), [theme]);
+  (0, import_react8.useEffect)(() => {
+    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 = (0, import_react8.useCallback)(() => setConnectOpen(true), []);
+  const disconnect = (0, import_react8.useCallback)(() => setAccount(null), []);
+  const handleConnect = (0, import_react8.useCallback)((acc) => {
+    setAccount(acc);
+    setConnectOpen(false);
+  }, []);
+  const sign = (0, import_react8.useCallback)((request) => {
+    return new Promise((resolve, reject) => {
+      const pending = { request, resolve, reject };
+      pendingSignRef.current = pending;
+      setPendingSign(pending);
+    });
+  }, []);
+  const handleSign = (0, import_react8.useCallback)((sig) => {
+    pendingSignRef.current?.resolve(sig);
+    pendingSignRef.current = null;
+    setPendingSign(null);
+  }, []);
+  const handleReject = (0, import_react8.useCallback)(() => {
+    pendingSignRef.current?.reject(new Error("User rejected the sign request"));
+    pendingSignRef.current = null;
+    setPendingSign(null);
+  }, []);
+  const value = (0, import_react8.useMemo)(
+    () => ({ account, connect, disconnect, sign }),
+    [account, connect, disconnect, sign]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(QRKitContext.Provider, { value, children: [
+    children,
+    connectOpen && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ConnectModal,
+        {
+          onConnect: handleConnect,
+          onClose: () => setConnectOpen(false)
+        }
+      ),
+      document.body
+    ),
+    pendingSign && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SignModal,
+        {
+          request: pendingSign.request,
+          appName,
+          onSign: handleSign,
+          onReject: handleReject
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function useQRKit() {
+  const ctx = (0, import_react8.useContext)(QRKitContext);
+  if (!ctx) throw new Error("useQRKit must be used within a QRKitProvider");
+  return ctx;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConnectModal,
+  QRDisplay,
+  QRKitProvider,
+  QRScanner,
+  SignModal,
+  useQRDisplay,
+  useQRKit,
+  useQRParts,
+  useQRScanner,
+  useURDecoder
+});
 //# sourceMappingURL=index.cjs.map