@recoilpay/intent-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Recoil Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# @recoilpay/intent-react
+
+RecoilPay intents as one React component. The user types what they want ("swap 10 USDC on Base for ETH on Arbitrum"), sees the best solver quote, confirms in their wallet, and watches it settle, without you building any of that UI.
+
+```sh
+npm install @recoilpay/intent-react viem
+```
+
+## With wagmi (and RainbowKit)
+
+```tsx
+import { RecoilIntent } from '@recoilpay/intent-react';
+import { useWagmiIntentWallet } from '@recoilpay/intent-react/wagmi';
+import '@recoilpay/intent-react/styles.css';
+import { useConnectModal } from '@rainbow-me/rainbowkit';
+
+export function Swap() {
+  const wallet = useWagmiIntentWallet();          // null until connected
+  const { openConnectModal } = useConnectModal();
+
+  return <RecoilIntent hfAccessToken={HF_TOKEN} wallet={wallet} onConnectWallet={openConnectModal} />;
+}
+```
+
+The component doesn't include a wallet modal. It uses your app's: `onConnectWallet` opens it, and the `wallet` prop tells the component which account is connected. A pending intent continues by itself once a wallet connects.
+
+## Without wagmi
+
+Pass any `IntentWallet`. From a viem `WalletClient`:
+
+```tsx
+import { RecoilIntent, viemWallet } from '@recoilpay/intent-react';
+
+<RecoilIntent wallet={walletClient ? viemWallet(walletClient) : null} onConnectWallet={connect} />
+```
+
+## Props
+
+| Prop | Type | |
+|---|---|---|
+| `hfAccessToken` | `string \| null` | Your Hugging Face token for plain-English parsing (see Notes). |
+| `wallet` | `IntentWallet \| null` | The connected wallet. |
+| `onConnectWallet` | `() => void` | Opens your connect flow. |
+| `theme` | `{ mode, accent, accentText, radius, fontFamily }` | `mode` is `'dark'` (default) or `'light'`. It uses your page's font unless you set one. |
+| `examples` | `{ label, sentence }[] \| false` | Clickable suggestions under the field. |
+| `placeholder`, `defaultValue` | `string` | |
+| `onOrderSubmitted` | `(orderId) => void` | The signed order was accepted. |
+| `onComplete` | `(state) => void` | Every intent in the sentence reached a final status. |
+| `onError` | `(message) => void` | Any failure, already written for the end user. |
+| `apiUrl` | `string` | Defaults to production (`https://api.recoilpay.com`). |
+| `session` | `IntentSession` | Share one flow between components, or inject one in tests. |
+| `className` | `string` | Added to the root element. |
+
+## Styling
+
+Import `@recoilpay/intent-react/styles.css` once. Every rule is scoped under `.rp-root`, so it won't touch the rest of your page. Beyond the `theme` prop, you can override any variable from your own CSS:
+
+```css
+.my-swap .rp-root {
+  --rp-surface: #0f1115;
+  --rp-line: #222631;
+  --rp-accent: #22c55e;
+  --rp-radius: 6px;
+}
+```
+
+Variables: `--rp-surface`, `--rp-raised`, `--rp-sunken`, `--rp-ink`, `--rp-ink-2`, `--rp-muted`, `--rp-line`, `--rp-accent`, `--rp-accent-text`, `--rp-success`, `--rp-danger`, `--rp-radius`, `--rp-font`, `--rp-mono`.
+
+## Your own UI
+
+`useRecoilIntent()` gives you the same flow as React state with no markup: `phase`, `preview`, `issues`, `status`, `explorerUrl` and so on, plus `run`, `confirm` and `reset`. See `@recoilpay/intent-core` for what each field means.
+
+```tsx
+const intent = useRecoilIntent({ wallet });
+// intent.phase === 'quoted' → render intent.preview, call intent.confirm()
+```
+
+## Notes
+
+- **Hugging Face token:** Plain-English parsing calls a language model on Hugging Face **from the browser**, with your own access token. The token is visible to anyone who loads your page, so use a fine-grained token with only the "Make calls to Inference Providers" permission, use it for nothing else, and rotate it if it's abused. Without a token, parsing is off and users see an example sentence.
+- **Testnets only** for now: Base Sepolia, OP Sepolia, Ethereum Sepolia and Polygon Amoy, with mock tokens.
+- **The first swap of a token needs a one-time Permit2 approval.** The confirm card says so before it happens.
+- **Requirements:** React 18+, and viem 2 as a peer dependency. wagmi is optional and only needed for `@recoilpay/intent-react/wagmi`.

package/dist/index.cjs

@@ -0,0 +1,381 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  RecoilIntent: () => RecoilIntent,
+  createIntentSession: () => import_intent_core2.createIntentSession,
+  useRecoilIntent: () => useRecoilIntent,
+  viemWallet: () => import_intent_core2.viemWallet
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/RecoilIntent.tsx
+var import_react2 = require("react");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var base = {
+  width: 16,
+  height: 16,
+  viewBox: "0 0 16 16",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+var ArrowRight = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 8h10M9 4l4 4-4 4" }) });
+var Check = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3.5 8.5l3 3 6-7" }) });
+var Cross = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
+var Alert = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 5v3.5M8 11h.01" })
+] });
+var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base, className: "rp-spin", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2a6 6 0 1 0 6 6" }) });
+var Route = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.5 12H10a2 2 0 0 0 0-4H6a2 2 0 0 1 0-4h4.5" })
+] });
+var External = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base, width: 12, height: 12, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 3H3v10h10v-3M9 3h4v4M13 3L7 9" }) });
+
+// src/useRecoilIntent.ts
+var import_intent_core = require("@recoilpay/intent-core");
+var import_react = require("react");
+function useRecoilIntent(options = {}) {
+  const [session] = (0, import_react.useState)(() => options.session ?? (0, import_intent_core.createIntentSession)({ apiUrl: options.apiUrl, hfAccessToken: options.hfAccessToken }));
+  const state = (0, import_react.useSyncExternalStore)(session.subscribe, session.getState, session.getState);
+  const wallet = options.wallet ?? null;
+  (0, import_react.useEffect)(() => session.setWallet(wallet), [session, wallet]);
+  const hfAccessToken = options.hfAccessToken;
+  (0, import_react.useEffect)(() => {
+    if (hfAccessToken !== void 0) session.setHfAccessToken(hfAccessToken);
+  }, [session, hfAccessToken]);
+  return { ...state, run: session.run, confirm: session.confirm, reset: session.reset, session };
+}
+
+// src/RecoilIntent.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_EXAMPLES = [
+  { label: "Swap 1 USDC from OP Sepolia to Base Sepolia", sentence: "swap 1 USDC on op sepolia for USDC on base sepolia" },
+  { label: "Swap 5 USDC from Base Sepolia to OP Sepolia", sentence: "swap 5 USDC on base sepolia for USDC on op sepolia" }
+];
+var BUSY = ["switchingChain", "approving", "signing", "submitting"];
+var CARD_PHASES = ["quoted", "needsWallet", ...BUSY];
+function themeVars(theme = {}) {
+  const vars = {};
+  if (theme.accent) vars["--rp-accent"] = theme.accent;
+  if (theme.accentText) vars["--rp-accent-text"] = theme.accentText;
+  if (theme.radius !== void 0) vars["--rp-radius"] = `${theme.radius}px`;
+  if (theme.fontFamily) vars["--rp-font"] = theme.fontFamily;
+  return vars;
+}
+function RecoilIntent(props) {
+  const intent = useRecoilIntent({ apiUrl: props.apiUrl, session: props.session, wallet: props.wallet, hfAccessToken: props.hfAccessToken });
+  const [value, setValue] = (0, import_react2.useState)(props.defaultValue ?? "");
+  const examples = props.examples === false ? [] : props.examples ?? DEFAULT_EXAMPLES;
+  useLifecycleCallbacks(intent, props);
+  const submit = (sentence = value) => {
+    const text = sentence.trim();
+    if (text && intent.ready) void intent.run(text);
+  };
+  const startOver = () => {
+    intent.reset();
+    setValue("");
+  };
+  const connect = () => props.onConnectWallet?.();
+  const showCard = intent.preview && (CARD_PHASES.includes(intent.phase) || intent.phase === "error" && intent.route);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: ["rp-root", props.className].filter(Boolean).join(" "), "data-mode": props.theme?.mode ?? "dark", style: themeVars(props.theme), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-composer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-composer-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "rp-eyebrow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: "/" }),
+          "intent"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rp-powered", children: "RecoilPay" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "form",
+        {
+          className: "rp-composer-row",
+          onSubmit: (e) => {
+            e.preventDefault();
+            submit();
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                className: "rp-input",
+                value,
+                onChange: (e) => setValue(e.target.value),
+                placeholder: props.placeholder ?? "swap 1 USDC on OP Sepolia for USDC on Base Sepolia",
+                "aria-label": "Describe a swap or send",
+                autoComplete: "off",
+                spellCheck: false,
+                maxLength: 500
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", className: "rp-run", "aria-label": "Run intent", disabled: !intent.ready || !value.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowRight, {}) })
+          ]
+        }
+      ),
+      intent.phase === "idle" && examples.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-examples", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rp-examples-label", children: "try" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rp-example-list", children: examples.map((ex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rp-example",
+            disabled: !intent.ready,
+            onClick: () => {
+              setValue(ex.sentence);
+              submit(ex.sentence);
+            },
+            children: ex.label
+          },
+          ex.sentence
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-results", "aria-live": "polite", children: [
+      intent.assetsError && intent.phase === "idle" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Note, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert, {}), children: [
+        "Could not reach the solver network.",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "rp-link", onClick: () => void intent.session.refreshAssets(), children: "Retry" })
+      ] }),
+      intent.phase === "parsing" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Note, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}), children: "Reading your intent\u2026" }),
+      intent.phase === "offTemplate" && intent.hint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Note, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert, {}), children: intent.hint }),
+      intent.phase === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "rp-issues", children: intent.issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: issue.message })
+      ] }, `${issue.field}-${i}`)) }),
+      intent.phase === "quoting" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Note, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Route, {}), tone: "accent", children: intent.queueTotal > 1 ? `Intent ${intent.queueIndex + 1} of ${intent.queueTotal}: asking solvers for a quote\u2026` : "Asking solvers for a quote\u2026" }),
+      intent.phase === "needsWallet" && !intent.preview && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-connect", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "Connect a wallet to get a quote." }),
+        props.onConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "rp-button", onClick: connect, children: "Connect wallet" })
+      ] }),
+      intent.queueTotal > 1 && !["idle", "parsing", "offTemplate", "invalid"].includes(intent.phase) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-queue", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+          "Intent ",
+          intent.queueIndex + 1,
+          " of ",
+          intent.queueTotal
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rp-queue-track", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: `${(intent.queueIndex + (intent.phase === "done" ? 1 : 0)) / intent.queueTotal * 100}%` } }) })
+      ] }),
+      showCard && intent.preview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ConfirmCard,
+        {
+          preview: intent.preview,
+          phase: intent.phase,
+          needsApproval: intent.needsApproval,
+          isConnected: intent.isConnected,
+          direct: intent.route === "direct",
+          error: intent.phase === "error" ? intent.error : null,
+          onConfirm: () => void intent.confirm(),
+          onConnect: props.onConnectWallet ? connect : void 0,
+          onCancel: startOver
+        }
+      ),
+      (intent.phase === "tracking" || intent.phase === "done") && intent.orderId && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OrderProgress, { status: intent.status, direct: intent.route === "direct", explorerUrl: intent.explorerUrl, onNew: startOver }),
+      intent.phase === "error" && !intent.route && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-error", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: intent.error }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "rp-button rp-button-quiet", onClick: startOver, children: "Dismiss" })
+      ] })
+    ] })
+  ] });
+}
+function useLifecycleCallbacks(intent, props) {
+  const prev = (0, import_react2.useRef)(intent);
+  const cbs = (0, import_react2.useRef)(props);
+  cbs.current = props;
+  (0, import_react2.useEffect)(() => {
+    const before = prev.current;
+    prev.current = intent;
+    if (intent.orderId && intent.orderId !== before.orderId) cbs.current.onOrderSubmitted?.(intent.orderId);
+    if (intent.phase === "done" && before.phase !== "done") cbs.current.onComplete?.(intent);
+    if (intent.phase === "error" && before.phase !== "error" && intent.error) cbs.current.onError?.(intent.error);
+  }, [intent]);
+}
+function Note({ icon, tone = "muted", children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "rp-note", "data-tone": tone, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rp-note-icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children })
+  ] });
+}
+var shortAddr = (a) => a.length > 12 ? `${a.slice(0, 6)}\u2026${a.slice(-4)}` : a;
+function actionLabel(phase, isConnected, needsApproval, symbol, direct) {
+  if (!isConnected || phase === "needsWallet") return "Connect wallet";
+  switch (phase) {
+    case "switchingChain":
+      return "Switching network\u2026";
+    case "approving":
+      return `Approving ${symbol}\u2026`;
+    case "signing":
+      return "Confirm in your wallet\u2026";
+    case "submitting":
+      return "Submitting\u2026";
+    case "error":
+      return "Try again";
+    default:
+      if (direct) return `Send ${symbol}`;
+      return needsApproval ? `Approve ${symbol} and swap` : "Confirm and sign";
+  }
+}
+function ConfirmCard(p) {
+  const busy = BUSY.includes(p.phase);
+  const send = p.preview.action === "send";
+  const wantsWallet = !p.isConnected || p.phase === "needsWallet";
+  const { solverCount, solversQueried } = p.preview;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-card-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rp-overline", children: "Review" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rp-card-title", children: p.direct ? "Direct transfer" : "Best solver route" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "rp-badge", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Check, {}),
+        " Quoted"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-route", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Amount, { label: send ? "You send" : "You pay", amount: p.preview.payAmount, symbol: p.preview.paySymbol, chain: p.preview.srcChainName }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rp-route-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowRight, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Amount,
+        {
+          align: "end",
+          label: send ? "They receive" : "You receive",
+          amount: p.direct ? p.preview.receiveAmount : `~${p.preview.receiveAmount}`,
+          symbol: p.preview.receiveSymbol,
+          chain: p.preview.dstChainName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("dl", { className: "rp-meta", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { children: "Settles in" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { children: p.preview.etaSeconds ? `~${p.preview.etaSeconds}s` : "Fast" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { children: p.direct ? "Route" : "Solvers" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { "data-accent": true, children: p.direct ? "Your wallet" : solversQueried && solversQueried > solverCount ? `${solverCount} of ${solversQueried} quoted` : `${solverCount} quoted` })
+      ] }),
+      send && p.preview.recipient && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { children: "Recipient" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { className: "rp-mono", children: shortAddr(p.preview.recipient) })
+      ] })
+    ] }),
+    p.needsApproval && !busy && !wantsWallet && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "rp-fineprint", children: [
+      "First time with ",
+      p.preview.paySymbol,
+      ": your wallet will ask for a one-time approval, then a signature."
+    ] }),
+    p.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "rp-card-error", children: p.error }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-card-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "rp-button",
+          disabled: busy || wantsWallet && !p.onConnect,
+          onClick: wantsWallet ? p.onConnect : p.onConfirm,
+          children: [
+            busy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}),
+            actionLabel(p.phase, p.isConnected, p.needsApproval, p.preview.paySymbol, p.direct)
+          ]
+        }
+      ),
+      !busy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "rp-link", onClick: p.onCancel, children: "Cancel" })
+    ] })
+  ] });
+}
+function Amount({ label, amount, symbol, chain, align = "start" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-amount", "data-align": align, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rp-overline", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-amount-value", children: [
+      amount,
+      " ",
+      symbol
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-amount-chain", children: [
+      "on ",
+      chain
+    ] })
+  ] });
+}
+var STEPS = ["Submitted", "Filling", "Filled", "Settling", "Done"];
+function stepOf(status) {
+  switch (status) {
+    case "executing":
+      return 1;
+    case "executed":
+      return 2;
+    case "settled":
+    case "settling":
+      return 3;
+    case "finalized":
+      return 4;
+    default:
+      return 0;
+  }
+}
+function OrderProgress({ status, direct, explorerUrl, onNew }) {
+  const failed = !!status && typeof status === "object" && "failed" in status;
+  const refunded = status === "refunded";
+  const finished = status === "finalized";
+  const active = stepOf(status);
+  const title = failed ? "Order failed" : refunded ? "Refunded" : finished ? direct ? "Sent" : "Settled" : "Settling\u2026";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-card", "data-state": failed || refunded ? "bad" : finished ? "good" : "pending", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rp-card-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rp-card-title", children: title }),
+      explorerUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { className: "rp-link", href: explorerUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        "View on explorer ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(External, {})
+      ] })
+    ] }),
+    !direct && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "rp-steps", children: STEPS.map((label, i) => {
+      const state = failed || refunded ? "bad" : i < active || finished ? "done" : i === active ? "current" : "todo";
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { "data-state": state, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rp-step-dot", children: state === "bad" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Cross, {}) : state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Check, {}) : state === "current" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rp-step-label", children: label })
+      ] }, label);
+    }) }),
+    failed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "rp-card-error", children: [
+      status.failed[0],
+      ": ",
+      status.failed[1]
+    ] }),
+    (finished || failed || refunded) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rp-card-actions", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "rp-button rp-button-quiet", onClick: onNew, children: "New intent" }) })
+  ] });
+}
+
+// src/index.ts
+var import_intent_core2 = require("@recoilpay/intent-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RecoilIntent,
+  createIntentSession,
+  useRecoilIntent,
+  viemWallet
+});

package/dist/index.d.cts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { IntentSession, IntentWallet, IntentState } from '@recoilpay/intent-core';
+export { IntentPhase, IntentPreview, IntentSession, IntentState, IntentWallet, createIntentSession, viemWallet } from '@recoilpay/intent-core';
+
+interface RecoilTheme {
+    /** Default `dark`. */
+    mode?: 'dark' | 'light';
+    /** Buttons, focus ring and highlights. Default RecoilPay violet. */
+    accent?: string;
+    /** Text colour on accent-filled buttons. */
+    accentText?: string;
+    /** Corner radius of cards and the composer, in px. Default 12. */
+    radius?: number;
+    /** Default: inherit the host page's font. */
+    fontFamily?: string;
+}
+interface IntentExample {
+    label: string;
+    sentence: string;
+}
+interface RecoilIntentProps {
+    /** Aggregator base URL. Defaults to production. */
+    apiUrl?: string;
+    /** Share a session with other components, or inject one in tests. */
+    session?: IntentSession;
+    /** The connected wallet, or null. With wagmi, use `useWagmiIntentWallet()`. */
+    wallet?: IntentWallet | null;
+    /** Your Hugging Face access token for plain-English parsing (visible in the page; use an inference-only token). */
+    hfAccessToken?: string | null;
+    /** Open your app's wallet connect flow. Shown when a wallet is needed. */
+    onConnectWallet?: () => void;
+    /** Suggestions under the field. `false` hides them. */
+    examples?: IntentExample[] | false;
+    placeholder?: string;
+    /** Pre-fill the field (it isn't submitted until the user runs it). */
+    defaultValue?: string;
+    theme?: RecoilTheme;
+    className?: string;
+    onOrderSubmitted?: (orderId: string) => void;
+    /** Every intent in the sentence reached a final status. */
+    onComplete?: (state: IntentState) => void;
+    onError?: (message: string) => void;
+}
+/**
+ * RecoilPay intents in one component: the user types what they want, sees
+ * the best solver quote, confirms in their wallet, and watches it settle.
+ * Import `@recoilpay/intent-react/styles.css` once.
+ */
+declare function RecoilIntent(props: RecoilIntentProps): react.JSX.Element;
+
+interface UseRecoilIntentOptions {
+    /** Aggregator base URL. Defaults to production. Read once, on first render. */
+    apiUrl?: string;
+    /** Bring your own session (shared across components, or for tests). */
+    session?: IntentSession;
+    /** The connected wallet, or null. Changes are passed straight to the session. */
+    wallet?: IntentWallet | null;
+    /**
+     * Your Hugging Face access token for plain-English parsing. It runs in the
+     * browser, so it's visible in your page: use a dedicated inference-only
+     * token. Without one, users see the example-sentence hint.
+     */
+    hfAccessToken?: string | null;
+}
+interface UseRecoilIntent extends IntentState {
+    run: (text: string) => Promise<void>;
+    confirm: () => Promise<void>;
+    reset: () => void;
+    session: IntentSession;
+}
+/**
+ * The intent flow as React state. Renders nothing: build your own UI on it,
+ * or use `<RecoilIntent />`, which is built on this.
+ */
+declare function useRecoilIntent(options?: UseRecoilIntentOptions): UseRecoilIntent;
+
+export { type IntentExample, RecoilIntent, type RecoilIntentProps, type RecoilTheme, type UseRecoilIntent, type UseRecoilIntentOptions, useRecoilIntent };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { IntentSession, IntentWallet, IntentState } from '@recoilpay/intent-core';
+export { IntentPhase, IntentPreview, IntentSession, IntentState, IntentWallet, createIntentSession, viemWallet } from '@recoilpay/intent-core';
+
+interface RecoilTheme {
+    /** Default `dark`. */
+    mode?: 'dark' | 'light';
+    /** Buttons, focus ring and highlights. Default RecoilPay violet. */
+    accent?: string;
+    /** Text colour on accent-filled buttons. */
+    accentText?: string;
+    /** Corner radius of cards and the composer, in px. Default 12. */
+    radius?: number;
+    /** Default: inherit the host page's font. */
+    fontFamily?: string;
+}
+interface IntentExample {
+    label: string;
+    sentence: string;
+}
+interface RecoilIntentProps {
+    /** Aggregator base URL. Defaults to production. */
+    apiUrl?: string;
+    /** Share a session with other components, or inject one in tests. */
+    session?: IntentSession;
+    /** The connected wallet, or null. With wagmi, use `useWagmiIntentWallet()`. */
+    wallet?: IntentWallet | null;
+    /** Your Hugging Face access token for plain-English parsing (visible in the page; use an inference-only token). */
+    hfAccessToken?: string | null;
+    /** Open your app's wallet connect flow. Shown when a wallet is needed. */
+    onConnectWallet?: () => void;
+    /** Suggestions under the field. `false` hides them. */
+    examples?: IntentExample[] | false;
+    placeholder?: string;
+    /** Pre-fill the field (it isn't submitted until the user runs it). */
+    defaultValue?: string;
+    theme?: RecoilTheme;
+    className?: string;
+    onOrderSubmitted?: (orderId: string) => void;
+    /** Every intent in the sentence reached a final status. */
+    onComplete?: (state: IntentState) => void;
+    onError?: (message: string) => void;
+}
+/**
+ * RecoilPay intents in one component: the user types what they want, sees
+ * the best solver quote, confirms in their wallet, and watches it settle.
+ * Import `@recoilpay/intent-react/styles.css` once.
+ */
+declare function RecoilIntent(props: RecoilIntentProps): react.JSX.Element;
+
+interface UseRecoilIntentOptions {
+    /** Aggregator base URL. Defaults to production. Read once, on first render. */
+    apiUrl?: string;
+    /** Bring your own session (shared across components, or for tests). */
+    session?: IntentSession;
+    /** The connected wallet, or null. Changes are passed straight to the session. */
+    wallet?: IntentWallet | null;
+    /**
+     * Your Hugging Face access token for plain-English parsing. It runs in the
+     * browser, so it's visible in your page: use a dedicated inference-only
+     * token. Without one, users see the example-sentence hint.
+     */
+    hfAccessToken?: string | null;
+}
+interface UseRecoilIntent extends IntentState {
+    run: (text: string) => Promise<void>;
+    confirm: () => Promise<void>;
+    reset: () => void;
+    session: IntentSession;
+}
+/**
+ * The intent flow as React state. Renders nothing: build your own UI on it,
+ * or use `<RecoilIntent />`, which is built on this.
+ */
+declare function useRecoilIntent(options?: UseRecoilIntentOptions): UseRecoilIntent;
+
+export { type IntentExample, RecoilIntent, type RecoilIntentProps, type RecoilTheme, type UseRecoilIntent, type UseRecoilIntentOptions, useRecoilIntent };