@synfin/widget 0.1.0

package/dist/index.js

@@ -0,0 +1,21 @@
+/**
+ * @synfin/widget: the embeddable Synfin quote-and-fee widget. Importing this
+ * module registers the <synfin-widget> custom element (the script-tag install).
+ * See https://synfin.xyz/docs/sdk. Non-custodial: the widget holds no keys.
+ */
+import { SynfinWidgetElement } from './element.js';
+export { SynfinWidgetElement } from './element.js';
+export { FEE_CAP_BPS, normalizeConfig, } from './config.js';
+export { ASSETS, findAsset, searchAssets } from './assets.js';
+export { EVENTS } from './events.js';
+export { feeBreakdown, formatAmount, } from './format.js';
+export { viewFromQuote, } from './state.js';
+/** Register <synfin-widget> (idempotent, no-op without customElements). */
+export function defineWidget(tag = 'synfin-widget') {
+    if (typeof customElements !== 'undefined' &&
+        customElements.get(tag) === undefined) {
+        customElements.define(tag, SynfinWidgetElement);
+    }
+}
+defineWidget();
+//# sourceMappingURL=index.js.map

package/dist/react.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Optional React wrapper: <SynfinWidget ... /> for React hosts. A thin shim over
+ * the <synfin-widget> custom element (React is a peer dependency). Non-React
+ * hosts use the element directly; this just gives React partners typed props and
+ * on* callbacks. Uses React.createElement (no JSX) so the package needs no JSX
+ * build step.
+ */
+import { type CSSProperties, type ReactElement } from 'react';
+export interface SynfinWidgetProps {
+    apiKey?: string;
+    feeBps?: number;
+    feeRecipient?: string;
+    from?: string;
+    to?: string;
+    amount?: string;
+    appearance?: 'dark' | 'light';
+    baseUrl?: string;
+    onQuote?: (e: CustomEvent) => void;
+    onPlan?: (e: CustomEvent) => void;
+    onError?: (e: CustomEvent) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SynfinWidget(props: SynfinWidgetProps): ReactElement;
+//# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -0,0 +1,60 @@
+/**
+ * Optional React wrapper: <SynfinWidget ... /> for React hosts. A thin shim over
+ * the <synfin-widget> custom element (React is a peer dependency). Non-React
+ * hosts use the element directly; this just gives React partners typed props and
+ * on* callbacks. Uses React.createElement (no JSX) so the package needs no JSX
+ * build step.
+ */
+import { createElement, useEffect, useRef, } from 'react';
+import { defineWidget } from './index.js';
+export function SynfinWidget(props) {
+    const ref = useRef(null);
+    useEffect(() => {
+        defineWidget();
+    }, []);
+    useEffect(() => {
+        ref.current?.configure({
+            apiKey: props.apiKey,
+            feeBps: props.feeBps,
+            feeRecipient: props.feeRecipient,
+            from: props.from,
+            to: props.to,
+            amount: props.amount,
+            appearance: props.appearance,
+            baseUrl: props.baseUrl,
+        });
+    }, [
+        props.apiKey,
+        props.feeBps,
+        props.feeRecipient,
+        props.from,
+        props.to,
+        props.amount,
+        props.appearance,
+        props.baseUrl,
+    ]);
+    useEffect(() => {
+        const el = ref.current;
+        if (el === null)
+            return;
+        const pairs = [
+            ['synfin:quote', props.onQuote],
+            ['synfin:plan', props.onPlan],
+            ['synfin:error', props.onError],
+        ];
+        for (const [name, h] of pairs)
+            if (h)
+                el.addEventListener(name, h);
+        return () => {
+            for (const [name, h] of pairs)
+                if (h)
+                    el.removeEventListener(name, h);
+        };
+    }, [props.onQuote, props.onPlan, props.onError]);
+    return createElement('synfin-widget', {
+        ref,
+        className: props.className,
+        style: props.style,
+    });
+}
+//# sourceMappingURL=react.js.map

package/dist/render.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Pure render for the RESULT region: view model to an HTML string, one branch
+ * per state (loading skeleton, quoted with the fee breakdown, no-route, error,
+ * keyless). The persistent chrome (pair + amount) is owned by the element; only
+ * this region swaps per quote, so the amount input keeps focus while typing.
+ */
+import type { NormalizedConfig } from './config.js';
+import type { QuotedView, VenueRow, WidgetView } from './state.js';
+/** Transient feedback for the Create-a-plan flow (post-quote UI state). */
+export interface PlanFeedback {
+    readonly status: 'creating' | 'created' | 'error';
+    readonly planId?: string;
+    readonly message?: string;
+}
+/** The venue the user has selected (defaults to best), or best if unknown. */
+export declare function selectedRow(v: QuotedView, selectedVenueId: string | null): VenueRow | null;
+export declare function resultHtml(view: WidgetView, config: NormalizedConfig, selectedVenueId?: string | null, plan?: PlanFeedback | null): string;
+//# sourceMappingURL=render.d.ts.map

package/dist/render.js

@@ -0,0 +1,163 @@
+import { formatAmount } from './format.js';
+/** The venue the user has selected (defaults to best), or best if unknown. */
+export function selectedRow(v, selectedVenueId) {
+    const avail = v.venues.filter((r) => r.available);
+    return (avail.find((r) => r.venueId === selectedVenueId) ??
+        v.best ??
+        avail[0] ??
+        null);
+}
+function esc(s) {
+    return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c] ?? c);
+}
+function cap(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+export function resultHtml(view, config, selectedVenueId = null, plan = null) {
+    switch (view.kind) {
+        case 'idle':
+            return '';
+        case 'loading':
+            return loadingHtml();
+        case 'invalid':
+            return msgHtml('!', view.title, esc(view.message), '');
+        case 'error':
+            return msgHtml('!', 'Could not load a quote', esc(view.message), 'error');
+        case 'no-route':
+            return msgHtml('∅', 'No route right now', `No venue can fill ${esc(view.pair.give)} to ${esc(view.pair.want)} at this size. Try a different amount or pair.`, '');
+        case 'quoted':
+            return quotedHtml(view, config, selectedVenueId, plan);
+    }
+}
+function loadingHtml() {
+    return `<div class="quote" aria-busy="true" aria-label="Loading a quote">
+    <div class="skel skel-big"></div>
+    <div class="skel skel-row"></div>
+    <div class="skel skel-row"></div>
+    <div class="skel skel-row"></div>
+  </div>`;
+}
+function msgHtml(icon, title, body, kind) {
+    return `<div class="msg ${kind === 'error' ? 'msg--error' : ''}" role="status">
+    <div class="msg__icon" aria-hidden="true">${esc(icon)}</div>
+    <div class="msg__title">${title}</div>
+    <div class="msg__body">${body}</div>
+  </div>`;
+}
+function quotedHtml(v, config, selectedVenueId, plan) {
+    // The headline, fees, and plan all follow the USER's selected venue (default
+    // best), not always the top-ranked one.
+    const sel = selectedRow(v, selectedVenueId);
+    const selId = sel?.venueId ?? null;
+    const youGet = sel?.fees ? sel.fees.userReceives : (sel?.net ?? null);
+    const rows = v.venues
+        .map((r) => venueRow(r, v.pair.want, r.venueId === selId))
+        .join('');
+    const fees = !sel?.fees
+        ? ''
+        : config.showFeeBreakdown
+            ? feesDetailHtml(sel.fees, v.pair.want)
+            : feeSimpleHtml(sel.fees, v.pair.want);
+    // The "add a key to see fees" hint is integrator guidance, so it belongs only
+    // to the partner detail mode; the end-user default just shows the net quote.
+    const keyless = config.showFeeBreakdown && !v.keyed
+        ? `<div class="note note--key">Add your API key to see the fee breakdown (the service fee and your integrator fee). Keyless quotes show the venue net only.</div>`
+        : '';
+    return `<div class="quote">
+    <div class="you-get">
+      <span class="you-get__k">You receive</span>
+      <span class="you-get__v">${formatAmount(youGet)} ${esc(v.pair.want)}</span>
+    </div>
+    <div class="venues" role="radiogroup" aria-label="Choose a venue, best net receive first">${rows}</div>
+    ${fees}${keyless}${ctaHtml(sel, config, plan)}
+    <div class="foot">Non-custodial${config.showAttribution
+        ? ` <span class="foot__sep" aria-hidden="true">|</span> <a class="foot__brand" href="https://synfin.xyz" target="_blank" rel="noopener">Powered by Synfin</a>`
+        : ', fees included'}</div>
+  </div>`;
+}
+// Map a venue rejection/status enum from the API to human copy. No raw API
+// enum ever reaches the end user; an unknown code degrades to "unavailable".
+const VENUE_STATUS = {
+    maintenance: 'under maintenance',
+    no_liquidity: 'no liquidity at this size',
+    insufficient_liquidity: 'no liquidity at this size',
+    invalid_request: 'unavailable',
+    pair_unsupported: 'pair not supported',
+    venue_error: 'temporarily unavailable',
+    timeout: 'did not respond in time',
+    rate_limited: 'temporarily unavailable',
+};
+function venueStatusText(code) {
+    return (code !== null ? VENUE_STATUS[code] : undefined) ?? 'unavailable';
+}
+function venueRow(r, want, isSelected) {
+    if (!r.available) {
+        // Unavailable venues are shown honestly but are not selectable.
+        return `<div class="venue venue--out" role="presentation">
+      <span class="venue__id">${esc(cap(r.venueId))}</span>
+      <span class="venue__out">${esc(venueStatusText(r.rejectionCode))}</span>
+    </div>`;
+    }
+    // Available venues are radio options: pick with click, Space/Enter, or arrows.
+    return `<div class="venue venue--pick ${r.isBest ? 'venue--best' : ''} ${isSelected ? 'venue--sel' : ''}" role="radio" aria-checked="${isSelected ? 'true' : 'false'}" tabindex="${isSelected ? '0' : '-1'}" data-venue="${esc(r.venueId)}">
+    <span class="venue__radio" aria-hidden="true"></span>
+    <span class="venue__id">${esc(cap(r.venueId))}${r.isBest ? '<span class="badge">best</span>' : ''}</span>
+    <span class="venue__net">${formatAmount(r.net)} ${esc(want)}</span>
+  </div>`;
+}
+function feeLine(label, bps, amount, want, cls = '') {
+    return `<div class="fee ${cls}">
+    <span class="fee__k">${esc(label)}<span class="bps">${bps} bps</span></span>
+    <span class="fee__v">${formatAmount(amount)} ${esc(want)}</span>
+  </div>`;
+}
+/** End-user default: one neutral line, the total fee actually taken from the
+ *  live quote. No brand, no "service" vs "your fee" attribution, no split. */
+function feeSimpleHtml(f, want) {
+    return `<div class="fees fees--simple">
+    <div class="fee">
+      <span class="fee__k">Fee</span>
+      <span class="fee__v">${formatAmount(f.total)} ${esc(want)}</span>
+    </div>
+  </div>`;
+}
+/** Partner detail mode (show-fee-breakdown): the full attribution, for the
+ *  integrator's own testing. Never the end-user default. */
+function feesDetailHtml(f, want) {
+    const integ = f.integrator === null
+        ? ''
+        : feeLine(f.integrator.label, f.integrator.bps, f.integrator.amount, want) +
+            `<div class="fee fee--split"><span class="fee__k">partner ${formatAmount(f.integrator.partnerShare)} ${esc(want)}, Synfin ${formatAmount(f.integrator.synfinShare)} ${esc(want)}</span></div>`;
+    return `<div class="fees">
+    ${feeLine(f.service.label, f.service.bps, f.service.amount, want)}
+    ${integ}
+    <div class="fee fee--net">
+      <span class="fee__k">You receive</span>
+      <span class="fee__v">${formatAmount(f.userReceives)} ${esc(want)}</span>
+    </div>
+  </div>`;
+}
+// The honest v1 execution note, shown before and after a plan is created.
+const EXEC_NOTE = `<p class="cta__help">On create, the widget emits <code>synfin:plan</code> for your app to execute via its WalletAdapter. In-widget wallet execution is coming.</p>`;
+function ctaHtml(sel, config, plan) {
+    if (sel === null || !sel.available)
+        return '';
+    if (config.apiKey === null) {
+        // Disabled without a key. The helper is real, visible text (not a title
+        // tooltip), linked via aria-describedby, and the button reads as disabled.
+        return `<button class="cta cta--disabled" disabled aria-disabled="true" aria-describedby="synfin-cta-help">Create a plan</button>
+    <p class="cta__help" id="synfin-cta-help">Add an API key to create a plan.</p>`;
+    }
+    if (plan?.status === 'creating') {
+        return `<button class="cta cta--disabled" disabled aria-disabled="true">Creating plan...</button>${EXEC_NOTE}`;
+    }
+    if (plan?.status === 'created') {
+        const id = plan.planId ? plan.planId.slice(0, 14) : '';
+        return `<div class="plan-ok" role="status"><span class="plan-ok__icon" aria-hidden="true">&#10003;</span> Plan created${id ? ` <code>${esc(id)}</code>` : ''}, handed off to your app on <code>synfin:plan</code> (venue ${esc(cap(sel.venueId))}).</div>${EXEC_NOTE}<button class="cta cta--ghost" data-action="plan">Create a new plan</button>`;
+    }
+    if (plan?.status === 'error') {
+        return `<div class="msg msg--error" role="status"><div class="msg__title">Could not create the plan</div><div class="msg__body">${esc(plan.message ?? 'Please try again.')}</div></div><button class="cta" data-action="plan">Try again</button>`;
+    }
+    return `<button class="cta" data-action="plan">Create a plan</button>${EXEC_NOTE}`;
+}
+//# sourceMappingURL=render.js.map

package/dist/state.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The pure view model: reduce a QuoteResponse (or a loading/error signal) to
+ * exactly what the widget renders, with every state represented. Ranking and
+ * fees come from the API; this only shapes them for display and marks the best
+ * venue, the unavailable venues (kept, never dropped, so a venue under
+ * maintenance is shown honestly and never breaks the widget), and the
+ * keyed-vs-keyless fee state.
+ */
+import type { QuoteResponse } from '@synfin/client';
+import { type FeeBreakdown } from './format.js';
+export interface VenueRow {
+    readonly venueId: string;
+    readonly available: boolean;
+    readonly net: string | null;
+    readonly rejectionCode: string | null;
+    readonly isBest: boolean;
+    readonly fees: FeeBreakdown | null;
+}
+export interface QuotedView {
+    readonly kind: 'quoted';
+    readonly pair: {
+        readonly give: string;
+        readonly want: string;
+    };
+    readonly amount: string;
+    readonly asOf: string;
+    readonly best: VenueRow | null;
+    readonly venues: readonly VenueRow[];
+    readonly keyed: boolean;
+    readonly edgeBps: number | null;
+}
+export type WidgetView = {
+    readonly kind: 'idle';
+} | {
+    readonly kind: 'loading';
+} | {
+    readonly kind: 'invalid';
+    readonly title: string;
+    readonly message: string;
+} | {
+    readonly kind: 'error';
+    readonly code: string;
+    readonly message: string;
+} | {
+    readonly kind: 'no-route';
+    readonly pair: {
+        readonly give: string;
+        readonly want: string;
+    };
+} | QuotedView;
+/**
+ * Map every token symbol in a raw QuoteResponse to the user-facing ticker, for
+ * the integrator-facing synfin:quote event: a partner who requested CC must see
+ * CC, never the internal canonical "Amulet", anywhere a symbol appears (the
+ * pair, and any venue fee asset).
+ */
+export declare function displayQuote(q: QuoteResponse): QuoteResponse;
+/** Shape a live quote into the view. Venues arrive ranked best-net-first. */
+export declare function viewFromQuote(q: QuoteResponse): WidgetView;
+//# sourceMappingURL=state.d.ts.map

package/dist/state.js

@@ -0,0 +1,55 @@
+import { displaySymbol } from './assets.js';
+import { feeBreakdown } from './format.js';
+/**
+ * Map every token symbol in a raw QuoteResponse to the user-facing ticker, for
+ * the integrator-facing synfin:quote event: a partner who requested CC must see
+ * CC, never the internal canonical "Amulet", anywhere a symbol appears (the
+ * pair, and any venue fee asset).
+ */
+export function displayQuote(q) {
+    return {
+        ...q,
+        pair: {
+            give: displaySymbol(q.pair.give),
+            want: displaySymbol(q.pair.want),
+        },
+        venues: q.venues.map((v) => v.fee
+            ? { ...v, fee: { ...v.fee, asset: displaySymbol(v.fee.asset) } }
+            : v),
+    };
+}
+/** Shape a live quote into the view. Venues arrive ranked best-net-first. */
+export function viewFromQuote(q) {
+    // The API echoes the canonical instrumentId (e.g. "Amulet"); map to the
+    // user-facing ticker so the internal name never reaches the UI.
+    const pair = {
+        give: displaySymbol(q.pair.give),
+        want: displaySymbol(q.pair.want),
+    };
+    const available = q.venues.filter((v) => v.available && v.net !== null);
+    if (available.length === 0) {
+        return { kind: 'no-route', pair };
+    }
+    const bestId = q.best?.venueId ?? null;
+    const keyed = available.some((v) => v.clientFees !== undefined);
+    const rows = q.venues.map((v) => ({
+        venueId: v.venueId,
+        available: v.available && v.net !== null,
+        net: v.net,
+        rejectionCode: v.rejectionCode,
+        isBest: v.venueId === bestId,
+        fees: v.clientFees !== undefined ? feeBreakdown(v.clientFees) : null,
+    }));
+    const best = rows.find((r) => r.isBest) ?? null;
+    return {
+        kind: 'quoted',
+        pair,
+        amount: q.amount,
+        asOf: q.asOf,
+        best,
+        venues: rows,
+        keyed,
+        edgeBps: q.edgeBps,
+    };
+}
+//# sourceMappingURL=state.js.map

package/dist/styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The widget's styles, scoped inside the Shadow DOM. Theming is a small set of
+ * --synfin-* custom properties (which pierce the shadow boundary), defaulted to
+ * the Synfin cream/ember dark system; [appearance="light"] flips to a warm
+ * off-white. A partner overrides any of --synfin-accent / -bg / -surface / -ink
+ * / -ink-dim / -radius / -font to match their site.
+ */
+export declare const STYLES = "\n:host {\n  --synfin-accent: #ff6a3d;\n  --synfin-accent-hi: #ff8a5c;\n  --synfin-bg: #0b0b0d;\n  --synfin-surface: #191a1e;\n  --synfin-surface-2: #202126;\n  --synfin-ink: #f1efea;\n  --synfin-ink-dim: #a8a59d;\n  --synfin-ink-faint: #8b887f;\n  --synfin-line: rgba(241, 239, 234, 0.12);\n  --synfin-radius: 16px;\n  --synfin-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n  --synfin-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n  --synfin-ok: #57c78a;\n  --synfin-warn: #e0b24a;\n\n  display: block;\n  max-width: 420px;\n  width: 100%;\n  color: var(--synfin-ink);\n  font-family: var(--synfin-font);\n  font-size: 14px;\n  line-height: 1.45;\n  box-sizing: border-box;\n  -webkit-font-smoothing: antialiased;\n}\n:host([appearance=\"light\"]) {\n  --synfin-bg: #faf7f1;\n  --synfin-surface: #ffffff;\n  --synfin-surface-2: #f3efe7;\n  --synfin-ink: #1a1814;\n  --synfin-ink-dim: #5c584f;\n  --synfin-ink-faint: #868075;\n  --synfin-line: rgba(20, 18, 14, 0.12);\n}\n*, *::before, *::after { box-sizing: border-box; }\n\n.card {\n  background: var(--synfin-bg);\n  border: 1px solid var(--synfin-line);\n  border-radius: var(--synfin-radius);\n  padding: 16px;\n  position: relative;\n  overflow: hidden;\n  /* Reflow on the widget's OWN width, so a narrow column on a wide viewport\n     still restacks (a viewport media query would not fire). */\n  container-type: inline-size;\n  container-name: synfinw;\n}\n.head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 12px; }\n.refresh { display: inline-flex; align-items: center; gap: 6px; font-family: var(--synfin-mono); font-size: 11px; color: var(--synfin-ink-faint); }\n.refresh__ring { width: 13px; height: 13px; transform: rotate(-90deg); }\n.refresh__ring circle { fill: none; stroke-width: 2; }\n.refresh__ring .bg { stroke: var(--synfin-line); }\n.refresh__ring .fg { stroke: var(--synfin-accent); transition: stroke-dashoffset 1s linear; }\n.refresh button {\n  all: unset; cursor: pointer; color: var(--synfin-ink-faint);\n  display: inline-flex; padding: 3px; border-radius: 6px;\n}\n.refresh button:hover { color: var(--synfin-ink); }\n.refresh button:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 1px; }\n\n/* pair + amount */\n.field { background: var(--synfin-surface); border: 1px solid var(--synfin-line); border-radius: 12px; padding: 12px 14px; }\n.field + .swapwrap { position: relative; height: 0; }\n.swap {\n  all: unset; cursor: pointer; position: absolute; left: 50%; top: -14px; transform: translateX(-50%);\n  width: 30px; height: 30px; display: grid; place-items: center;\n  background: var(--synfin-surface-2); border: 3px solid var(--synfin-bg); border-radius: 9px; color: var(--synfin-ink-dim);\n  transition: transform .15s ease, color .15s ease; z-index: 2;\n}\n.swap:hover { color: var(--synfin-accent); transform: translateX(-50%) rotate(180deg); }\n.swap:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }\n.field__label { font-size: 11px; color: var(--synfin-ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }\n.field__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }\n.amount { all: unset; flex: 1; font-family: var(--synfin-mono); font-size: 22px; font-weight: 500; color: var(--synfin-ink); min-width: 0; border-radius: 5px; }\n.amount::placeholder { color: var(--synfin-ink-faint); }\n.amount:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 3px; }\n.receive { font-family: var(--synfin-mono); font-size: 22px; font-weight: 500; color: var(--synfin-ink); }\n.receive--dim { color: var(--synfin-ink-faint); }\n\n.asset {\n  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;\n  background: var(--synfin-surface-2); border: 1px solid var(--synfin-line); border-radius: 999px; padding: 6px 12px 6px 6px;\n  font-weight: 600; color: var(--synfin-ink); white-space: nowrap; transition: border-color .15s ease;\n  /* never shrink below the label: the amount input (min-width:0) absorbs the\n     squeeze instead, so asset symbols never clip at narrow widths. */\n  flex-shrink: 0;\n}\n.asset:hover { border-color: var(--synfin-accent); }\n.asset:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }\n.asset__icon { width: 22px; height: 22px; border-radius: 50%; display: block; flex-shrink: 0; }\n.asset__sym { white-space: nowrap; }\n.asset__caret { color: var(--synfin-ink-faint); font-size: 10px; }\n\n/* selector popover */\n.pop { position: absolute; inset: 0; background: var(--synfin-bg); z-index: 5; display: flex; flex-direction: column;\n  animation: pop-in .14s ease; }\n@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n.pop__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--synfin-line); }\n.pop__search { all: unset; flex: 1; color: var(--synfin-ink); font-size: 15px; }\n.pop__search::placeholder { color: var(--synfin-ink-faint); }\n.pop__close { all: unset; cursor: pointer; color: var(--synfin-ink-dim); padding: 4px; border-radius: 6px; }\n.pop__close:hover { color: var(--synfin-ink); }\n.pop__close:focus-visible { outline: 2px solid var(--synfin-accent); }\n.pop__list { overflow-y: auto; padding: 6px; }\n.opt { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }\n.opt:hover, .opt[aria-selected=\"true\"] { background: var(--synfin-surface); }\n.opt:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: -2px; }\n.opt__name { display: flex; flex-direction: column; }\n.opt__sym { font-weight: 600; }\n.opt__full { font-size: 12px; color: var(--synfin-ink-faint); }\n.opt--empty { padding: 20px; text-align: center; color: var(--synfin-ink-faint); }\n\n/* quote panel */\n.quote { margin-top: 14px; }\n.you-get { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }\n.you-get__k { font-size: 12px; color: var(--synfin-ink-dim); }\n.you-get__v { font-family: var(--synfin-mono); font-size: 20px; font-weight: 600; }\n.venues { display: flex; flex-direction: column; gap: 6px; }\n.venue { display: flex; align-items: center; gap: 9px; padding: 10px 12px;\n  border: 1px solid var(--synfin-line); border-radius: 11px; background: var(--synfin-surface); transition: border-color .15s ease; }\n.venue--pick { cursor: pointer; }\n.venue--pick:hover { border-color: var(--synfin-accent); }\n.venue--pick:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }\n.venue--best { background: color-mix(in srgb, var(--synfin-surface) 84%, var(--synfin-accent) 16%); }\n.venue--sel { border-color: var(--synfin-accent); }\n.venue--out { opacity: 0.55; }\n/* the radio affordance: outline circle that fills accent when selected */\n.venue__radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--synfin-line); flex-shrink: 0; position: relative; transition: border-color .15s ease; }\n.venue--sel .venue__radio { border-color: var(--synfin-accent); }\n.venue--sel .venue__radio::after { content: \"\"; position: absolute; inset: 2px; border-radius: 50%; background: var(--synfin-accent); }\n.venue__id { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-transform: capitalize; }\n.badge { font-family: var(--synfin-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--synfin-accent);\n  border: 1px solid var(--synfin-accent); border-radius: 999px; padding: 1px 6px; }\n.venue__net { font-family: var(--synfin-mono); font-weight: 600; margin-left: auto; }\n.venue__out { font-size: 11px; color: var(--synfin-ink-faint); font-family: var(--synfin-mono); margin-left: auto; }\n\n.fees { margin-top: 12px; border-top: 1px dashed var(--synfin-line); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }\n.fee { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }\n.fee__k { color: var(--synfin-ink-dim); }\n.fee__k .bps { font-family: var(--synfin-mono); font-size: 11px; color: var(--synfin-ink-faint); margin-left: 5px; }\n.fee__v { font-family: var(--synfin-mono); }\n.fee--split { margin-top: -3px; }\n.fee--split .fee__k { font-size: 11px; color: var(--synfin-ink-faint); }\n.fee--net { border-top: 1px solid var(--synfin-line); padding-top: 8px; margin-top: 2px; }\n.fee--net .fee__k { color: var(--synfin-ink); font-weight: 600; font-size: 13px; }\n.fee--net .fee__v { color: var(--synfin-ink); font-weight: 700; }\n\n.note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5;\n  background: var(--synfin-surface); border: 1px solid var(--synfin-line); color: var(--synfin-ink-dim); }\n.note--key { border-left: 2px solid var(--synfin-accent); }\n.note a { color: var(--synfin-accent); }\n\n.cta { all: unset; box-sizing: border-box; cursor: pointer; display: block; text-align: center; width: 100%; margin-top: 14px;\n  padding: 13px; border-radius: 12px; font-weight: 600; background: var(--synfin-accent); color: #0b0b0d; transition: background .15s ease; }\n.cta:hover { background: var(--synfin-accent-hi); }\n.cta:focus-visible { outline: 2px solid var(--synfin-ink); outline-offset: 2px; }\n/* a genuinely disabled look: muted surface, not the accent at reduced opacity */\n.cta--disabled { background: var(--synfin-surface-2); color: var(--synfin-ink-faint); border: 1px solid var(--synfin-line); cursor: not-allowed; }\n.cta--disabled:hover { background: var(--synfin-surface-2); }\n.cta__help { margin: 8px 0 0; font-size: 11px; line-height: 1.5; text-align: center; color: var(--synfin-ink-faint); }\n.cta__help code { font-family: var(--synfin-mono); font-size: 10.5px; color: var(--synfin-ink-dim); }\n/* visible confirmation that a plan was created and handed off */\n.plan-ok { margin-top: 14px; padding: 11px 12px; border-radius: 10px; display: flex; align-items: flex-start; gap: 8px;\n  font-size: 12.5px; line-height: 1.5; color: var(--synfin-ink);\n  background: color-mix(in srgb, var(--synfin-surface) 82%, var(--synfin-ok) 18%); border: 1px solid var(--synfin-ok); }\n.plan-ok__icon { color: var(--synfin-ok); font-weight: 700; }\n.plan-ok code { font-family: var(--synfin-mono); font-size: 11px; color: var(--synfin-ink-dim); }\n\n.foot { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10.5px; color: var(--synfin-ink-faint); }\n.foot__sep { opacity: 0.5; }\n.foot__brand { color: var(--synfin-ink-faint); text-decoration: none; border-radius: 3px; }\n.foot__brand:hover { color: var(--synfin-accent); }\n.foot__brand:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }\n.foot a { color: var(--synfin-ink-faint); }\n.foot a:hover { color: var(--synfin-ink-dim); }\n\n/* states */\n.msg { margin-top: 14px; text-align: center; padding: 26px 16px; }\n.msg__icon { font-size: 22px; margin-bottom: 8px; }\n.msg__title { font-weight: 600; margin-bottom: 4px; }\n.msg__body { font-size: 12.5px; color: var(--synfin-ink-dim); }\n.msg--error .msg__title { color: var(--synfin-warn); }\n\n.skel { border-radius: 10px; background:\n  linear-gradient(100deg, var(--synfin-surface) 30%, var(--synfin-surface-2) 50%, var(--synfin-surface) 70%);\n  background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }\n@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n.skel-row { height: 44px; margin-top: 6px; }\n.skel-big { height: 26px; width: 55%; margin-bottom: 12px; }\n\n@media (prefers-reduced-motion: reduce) {\n  .skel { animation: none; } .swap { transition: none; } .pop { animation: none; }\n}\n/* Narrow embeds: reflow on the widget's own width (container query), with a\n   viewport media-query fallback for engines without container support. Both\n   only shrink type and tighten spacing; the asset flex-shrink:0 above is what\n   actually stops labels clipping, so legibility holds even without either. */\n@container synfinw (max-width: 360px) {\n  .amount, .receive, .you-get__v { font-size: 18px; }\n  .you-get__v { font-size: 17px; }\n  .card { padding: 13px; }\n  .field { padding: 11px 12px; }\n  .asset { padding: 5px 10px 5px 5px; gap: 6px; }\n  .asset__icon { width: 20px; height: 20px; }\n  .venue, .fee { font-size: 12px; }\n}\n@container synfinw (max-width: 320px) {\n  .amount, .receive { font-size: 16px; }\n  .field__row { gap: 6px; }\n}\n@media (max-width: 360px) {\n  .amount, .receive, .you-get__v { font-size: 18px; }\n  .card { padding: 13px; }\n}\n";
+//# sourceMappingURL=styles.d.ts.map