@synfin/widget 0.1.0

package/dist/styles.js

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

package/dist/synfin-widget.global.js

@@ -0,0 +1,290 @@
+/*! @synfin/widget 0.1.0 | MIT | https://synfin.xyz/docs/sdk */
+"use strict";(()=>{var W=Object.defineProperty;var D=(t,n,e)=>n in t?W(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e;var d=(t,n,e)=>D(t,typeof n!="symbol"?n+"":n,e);var p=class extends Error{constructor(e,i,s){super(s);d(this,"status");d(this,"code");this.name="SynfinApiError",this.status=e,this.code=i}};function V(t){if(t!==void 0)return t;let n=globalThis.fetch;if(n===void 0)throw new Error("no global fetch available; pass { fetch } to createClient (Node 18+ and browsers have it built in)");return n}function F(t){let n=[];for(let[e,i]of Object.entries(t))i!==void 0&&n.push(`${encodeURIComponent(e)}=${encodeURIComponent(String(i))}`);return n.length>0?`?${n.join("&")}`:""}async function S(t){let n;try{n=await t.json()}catch{let e=await t.text().catch(()=>"");throw new p(t.status,"bad_response",e.length>0?e:"non-JSON response from the Synfin API")}if(!t.ok){let e=n;throw new p(t.status,e.code??"error",e.error??`HTTP ${t.status}`)}return n}var O="https://synfin.xyz";function E(t){if(t.apiKey===void 0||t.apiKey==="")throw new Error("createClient requires an apiKey");let n={baseUrl:(t.baseUrl??O).replace(/\/+$/,""),apiKey:t.apiKey,fetch:V(t.fetch)};return{getQuote:e=>j(n,e),createPlan:e=>G(n,e)}}async function j(t,n){let e=F({from:n.from,to:n.to,amount:String(n.amount),slippageBps:n.slippageBps,feeBps:n.feeBps,feeRecipient:n.feeRecipient}),i=await t.fetch(`${t.baseUrl}/api/quote${e}`,{method:"GET",headers:{"x-api-key":t.apiKey}});return S(i)}async function G(t,n){let e={from:n.from,to:n.to,amount:String(n.amount),venueId:n.venueId,takerParty:n.takerParty,idempotencyKey:n.idempotencyKey};n.slippageBps!==void 0&&(e.slippageBps=n.slippageBps),n.feeBps!==void 0&&(e.feeBps=n.feeBps),n.feeRecipient!==void 0&&(e.feeRecipient=n.feeRecipient);let i=await t.fetch(`${t.baseUrl}/api/execute/plan`,{method:"POST",headers:{"x-api-key":t.apiKey,"content-type":"application/json"},body:JSON.stringify(e)});return S(i)}function Y(t){let n=[];for(let[e,i]of Object.entries(t))i!==void 0&&n.push(`${encodeURIComponent(e)}=${encodeURIComponent(String(i))}`);return n.length>0?`?${n.join("&")}`:""}function J(t){if(t!==void 0)return t;let n=globalThis.fetch;if(n===void 0)throw new p(0,"network","no fetch available in this runtime");return n}async function P(t,n){let e=Y({from:n.from,to:n.to,amount:String(n.amount),slippageBps:n.slippageBps,feeBps:n.feeBps,feeRecipient:n.feeRecipient}),i={};t.apiKey!==null&&t.apiKey!==""&&(i["x-api-key"]=t.apiKey);let s=await J(t.fetch)(`${t.baseUrl}/api/quote${e}`,{method:"GET",headers:i}),o;try{o=await s.json()}catch{let r=await s.text().catch(()=>"");throw new p(s.status,"bad_response",r.length>0?r:"non-JSON response from the Synfin API")}if(!s.ok){let r=o;throw new p(s.status,r.code??"error",r.error??`HTTP ${s.status}`)}return o}var y=[{symbol:"CC",name:"Canton Coin",instrumentId:"Amulet",decimals:10},{symbol:"USDCx",name:"USDC (interchain)",instrumentId:"USDCx",decimals:6},{symbol:"CBTC",name:"Canton BTC",instrumentId:"CBTC",decimals:8}];function x(t){let n=t.trim().toLowerCase();return y.find(e=>e.symbol.toLowerCase()===n)}function w(t){let n=t.trim(),e=n.toLowerCase(),i=y.find(o=>o.instrumentId.toLowerCase()===e);if(i)return i.symbol;let s=y.find(o=>o.symbol.toLowerCase()===e);return s?s.symbol:n}var X={CC:{label:"CC",hue:20},AMULET:{label:"CC",hue:20},USDCX:{label:"USDC",hue:212},CBTC:{label:"BTC",hue:33},CETH:{label:"ETH",hue:250},CUSD:{label:"USD",hue:150}};function Z(t){let n=0;for(let e=0;e<t.length;e++)n=n*31+t.charCodeAt(e)>>>0;return n%360}function R(t){let n=w(t).toUpperCase(),e=X[n]??{label:n.slice(0,3),hue:Z(n)},i=(e.hue+24)%360,s=`sfic${e.hue}`,o=e.label.length>=4?6.5:e.label.length===3?8:9.5;return`<svg class="asset__icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><defs><linearGradient id="${s}" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${e.hue} 78% 58%)"></stop><stop offset="1" stop-color="hsl(${i} 72% 44%)"></stop></linearGradient></defs><circle cx="12" cy="12" r="11" fill="url(#${s})"></circle><text x="12" y="12" dy="0.35em" text-anchor="middle" font-size="${o}" font-weight="700" fill="#fff">${e.label}</text></svg>`}function A(t){let n=t.trim().toLowerCase();return n===""?y:y.filter(e=>e.symbol.toLowerCase().includes(n)||e.name.toLowerCase().includes(n))}function g(t,n=6){if(t===null)return"-";if(!/^-?\d+(\.\d+)?$/.test(t))return t;let[e="0",i=""]=t.split(".");if(i==="")return e;let s=i.slice(0,n).replace(/0+$/,"");return s===""?e:`${e}.${s}`}function ee(t,n){let e=/^\d+(\.\d+)?$/;if(!e.test(t)||!e.test(n))return t;let i=_=>{let[K="0",Q=""]=_.split(".");return[K,Q]},[s,o]=i(t),[r,a]=i(n),l=Math.max(o.length,a.length),u=(BigInt(s+o.padEnd(l,"0"))+BigInt(r+a.padEnd(l,"0"))).toString().padStart(l+1,"0"),h=u.slice(0,u.length-l),m=l>0?u.slice(u.length-l):"";return m===""?h:`${h}.${m}`}function B(t){return{service:{label:"Synfin service",bps:t.service.bps,amount:t.service.amount},integrator:t.integrator===null?null:{label:"Integrator fee",bps:t.integrator.bps,amount:t.integrator.amount,partnerShare:t.integrator.partnerShare,synfinShare:t.integrator.synfinShare},userReceives:t.userReceives,total:t.integrator===null?t.service.amount:ee(t.service.amount,t.integrator.amount)}}var I=100,te=15e3;function C(t){let n=[],e=(t.from??"CC").trim(),i=(t.to??"USDCx").trim();x(e)===void 0&&n.push({field:"from",message:`unknown asset "${e}"`}),x(i)===void 0&&n.push({field:"to",message:`unknown asset "${i}"`}),e.toLowerCase()===i.toLowerCase()&&n.push({field:"to",message:"from and to must differ"});let s=(t.amount??"100").trim();(!/^\d+(\.\d+)?$/.test(s)||Number(s)<=0)&&n.push({field:"amount",message:"amount must be a positive number"});let o=null,r=null;if(t.feeBps!==void 0||t.feeRecipient!==void 0)if(t.feeBps===void 0||t.feeRecipient===void 0)n.push({field:"fee",message:"feeBps and feeRecipient must be set together"});else{let m=Number(t.feeBps);!Number.isInteger(m)||m<0||m>I?n.push({field:"feeBps",message:`feeBps must be an integer 0 to ${I}`}):o=m;let _=String(t.feeRecipient).trim();_===""?n.push({field:"feeRecipient",message:"feeRecipient required"}):r=_}let l=t.appearance==="light"?"light":"dark",f=(t.baseUrl??"https://synfin.xyz").replace(/\/+$/,""),u=typeof t.refreshMs=="number"&&t.refreshMs>=3e3?t.refreshMs:te,h=(t.apiKey??"").trim();return{config:{apiKey:h===""?null:h,feeBps:o,feeRecipient:r,from:e,to:i,amount:s,appearance:l,baseUrl:f,refreshMs:u,showFeeBreakdown:t.showFeeBreakdown===!0,showAttribution:t.showAttribution!==!1},issues:n}}var v={quote:"synfin:quote",asset:"synfin:asset",venue:"synfin:venue",plan:"synfin:plan",status:"synfin:status",error:"synfin:error"};function b(t,n,e){t.dispatchEvent(new CustomEvent(n,{detail:e,bubbles:!0,composed:!0}))}function $(t,n){let e=t.venues.filter(i=>i.available);return e.find(i=>i.venueId===n)??t.best??e[0]??null}function c(t){return t.replace(/[&<>"']/g,n=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[n]??n)}function z(t){return t.charAt(0).toUpperCase()+t.slice(1)}function N(t,n,e=null,i=null){switch(t.kind){case"idle":return"";case"loading":return ne();case"invalid":return L("!",t.title,c(t.message),"");case"error":return L("!","Could not load a quote",c(t.message),"error");case"no-route":return L("\u2205","No route right now",`No venue can fill ${c(t.pair.give)} to ${c(t.pair.want)} at this size. Try a different amount or pair.`,"");case"quoted":return ie(t,n,e,i)}}function ne(){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 L(t,n,e,i){return`<div class="msg ${i==="error"?"msg--error":""}" role="status">
+    <div class="msg__icon" aria-hidden="true">${c(t)}</div>
+    <div class="msg__title">${n}</div>
+    <div class="msg__body">${e}</div>
+  </div>`}function ie(t,n,e,i){let s=$(t,e),o=s?.venueId??null,r=s?.fees?s.fees.userReceives:s?.net??null,a=t.venues.map(u=>re(u,t.pair.want,u.venueId===o)).join(""),l=s?.fees?n.showFeeBreakdown?le(s.fees,t.pair.want):ae(s.fees,t.pair.want):"",f=n.showFeeBreakdown&&!t.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">${g(r)} ${c(t.pair.want)}</span>
+    </div>
+    <div class="venues" role="radiogroup" aria-label="Choose a venue, best net receive first">${a}</div>
+    ${l}${f}${ce(s,n,i)}
+    <div class="foot">Non-custodial${n.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>`}var se={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 oe(t){return(t!==null?se[t]:void 0)??"unavailable"}function re(t,n,e){return t.available?`<div class="venue venue--pick ${t.isBest?"venue--best":""} ${e?"venue--sel":""}" role="radio" aria-checked="${e?"true":"false"}" tabindex="${e?"0":"-1"}" data-venue="${c(t.venueId)}">
+    <span class="venue__radio" aria-hidden="true"></span>
+    <span class="venue__id">${c(z(t.venueId))}${t.isBest?'<span class="badge">best</span>':""}</span>
+    <span class="venue__net">${g(t.net)} ${c(n)}</span>
+  </div>`:`<div class="venue venue--out" role="presentation">
+      <span class="venue__id">${c(z(t.venueId))}</span>
+      <span class="venue__out">${c(oe(t.rejectionCode))}</span>
+    </div>`}function M(t,n,e,i,s=""){return`<div class="fee ${s}">
+    <span class="fee__k">${c(t)}<span class="bps">${n} bps</span></span>
+    <span class="fee__v">${g(e)} ${c(i)}</span>
+  </div>`}function ae(t,n){return`<div class="fees fees--simple">
+    <div class="fee">
+      <span class="fee__k">Fee</span>
+      <span class="fee__v">${g(t.total)} ${c(n)}</span>
+    </div>
+  </div>`}function le(t,n){let e=t.integrator===null?"":M(t.integrator.label,t.integrator.bps,t.integrator.amount,n)+`<div class="fee fee--split"><span class="fee__k">partner ${g(t.integrator.partnerShare)} ${c(n)}, Synfin ${g(t.integrator.synfinShare)} ${c(n)}</span></div>`;return`<div class="fees">
+    ${M(t.service.label,t.service.bps,t.service.amount,n)}
+    ${e}
+    <div class="fee fee--net">
+      <span class="fee__k">You receive</span>
+      <span class="fee__v">${g(t.userReceives)} ${c(n)}</span>
+    </div>
+  </div>`}var T='<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 ce(t,n,e){if(t===null||!t.available)return"";if(n.apiKey===null)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(e?.status==="creating")return`<button class="cta cta--disabled" disabled aria-disabled="true">Creating plan...</button>${T}`;if(e?.status==="created"){let i=e.planId?e.planId.slice(0,14):"";return`<div class="plan-ok" role="status"><span class="plan-ok__icon" aria-hidden="true">&#10003;</span> Plan created${i?` <code>${c(i)}</code>`:""}, handed off to your app on <code>synfin:plan</code> (venue ${c(z(t.venueId))}).</div>${T}<button class="cta cta--ghost" data-action="plan">Create a new plan</button>`}return e?.status==="error"?`<div class="msg msg--error" role="status"><div class="msg__title">Could not create the plan</div><div class="msg__body">${c(e.message??"Please try again.")}</div></div><button class="cta" data-action="plan">Try again</button>`:`<button class="cta" data-action="plan">Create a plan</button>${T}`}var U=`
+:host {
+  --synfin-accent: #ff6a3d;
+  --synfin-accent-hi: #ff8a5c;
+  --synfin-bg: #0b0b0d;
+  --synfin-surface: #191a1e;
+  --synfin-surface-2: #202126;
+  --synfin-ink: #f1efea;
+  --synfin-ink-dim: #a8a59d;
+  --synfin-ink-faint: #8b887f;
+  --synfin-line: rgba(241, 239, 234, 0.12);
+  --synfin-radius: 16px;
+  --synfin-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --synfin-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --synfin-ok: #57c78a;
+  --synfin-warn: #e0b24a;
+
+  display: block;
+  max-width: 420px;
+  width: 100%;
+  color: var(--synfin-ink);
+  font-family: var(--synfin-font);
+  font-size: 14px;
+  line-height: 1.45;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+:host([appearance="light"]) {
+  --synfin-bg: #faf7f1;
+  --synfin-surface: #ffffff;
+  --synfin-surface-2: #f3efe7;
+  --synfin-ink: #1a1814;
+  --synfin-ink-dim: #5c584f;
+  --synfin-ink-faint: #868075;
+  --synfin-line: rgba(20, 18, 14, 0.12);
+}
+*, *::before, *::after { box-sizing: border-box; }
+
+.card {
+  background: var(--synfin-bg);
+  border: 1px solid var(--synfin-line);
+  border-radius: var(--synfin-radius);
+  padding: 16px;
+  position: relative;
+  overflow: hidden;
+  /* Reflow on the widget's OWN width, so a narrow column on a wide viewport
+     still restacks (a viewport media query would not fire). */
+  container-type: inline-size;
+  container-name: synfinw;
+}
+.head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
+.refresh { display: inline-flex; align-items: center; gap: 6px; font-family: var(--synfin-mono); font-size: 11px; color: var(--synfin-ink-faint); }
+.refresh__ring { width: 13px; height: 13px; transform: rotate(-90deg); }
+.refresh__ring circle { fill: none; stroke-width: 2; }
+.refresh__ring .bg { stroke: var(--synfin-line); }
+.refresh__ring .fg { stroke: var(--synfin-accent); transition: stroke-dashoffset 1s linear; }
+.refresh button {
+  all: unset; cursor: pointer; color: var(--synfin-ink-faint);
+  display: inline-flex; padding: 3px; border-radius: 6px;
+}
+.refresh button:hover { color: var(--synfin-ink); }
+.refresh button:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 1px; }
+
+/* pair + amount */
+.field { background: var(--synfin-surface); border: 1px solid var(--synfin-line); border-radius: 12px; padding: 12px 14px; }
+.field + .swapwrap { position: relative; height: 0; }
+.swap {
+  all: unset; cursor: pointer; position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
+  width: 30px; height: 30px; display: grid; place-items: center;
+  background: var(--synfin-surface-2); border: 3px solid var(--synfin-bg); border-radius: 9px; color: var(--synfin-ink-dim);
+  transition: transform .15s ease, color .15s ease; z-index: 2;
+}
+.swap:hover { color: var(--synfin-accent); transform: translateX(-50%) rotate(180deg); }
+.swap:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }
+.field__label { font-size: 11px; color: var(--synfin-ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
+.field__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
+.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; }
+.amount::placeholder { color: var(--synfin-ink-faint); }
+.amount:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 3px; }
+.receive { font-family: var(--synfin-mono); font-size: 22px; font-weight: 500; color: var(--synfin-ink); }
+.receive--dim { color: var(--synfin-ink-faint); }
+
+.asset {
+  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
+  background: var(--synfin-surface-2); border: 1px solid var(--synfin-line); border-radius: 999px; padding: 6px 12px 6px 6px;
+  font-weight: 600; color: var(--synfin-ink); white-space: nowrap; transition: border-color .15s ease;
+  /* never shrink below the label: the amount input (min-width:0) absorbs the
+     squeeze instead, so asset symbols never clip at narrow widths. */
+  flex-shrink: 0;
+}
+.asset:hover { border-color: var(--synfin-accent); }
+.asset:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }
+.asset__icon { width: 22px; height: 22px; border-radius: 50%; display: block; flex-shrink: 0; }
+.asset__sym { white-space: nowrap; }
+.asset__caret { color: var(--synfin-ink-faint); font-size: 10px; }
+
+/* selector popover */
+.pop { position: absolute; inset: 0; background: var(--synfin-bg); z-index: 5; display: flex; flex-direction: column;
+  animation: pop-in .14s ease; }
+@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+.pop__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--synfin-line); }
+.pop__search { all: unset; flex: 1; color: var(--synfin-ink); font-size: 15px; }
+.pop__search::placeholder { color: var(--synfin-ink-faint); }
+.pop__close { all: unset; cursor: pointer; color: var(--synfin-ink-dim); padding: 4px; border-radius: 6px; }
+.pop__close:hover { color: var(--synfin-ink); }
+.pop__close:focus-visible { outline: 2px solid var(--synfin-accent); }
+.pop__list { overflow-y: auto; padding: 6px; }
+.opt { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }
+.opt:hover, .opt[aria-selected="true"] { background: var(--synfin-surface); }
+.opt:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: -2px; }
+.opt__name { display: flex; flex-direction: column; }
+.opt__sym { font-weight: 600; }
+.opt__full { font-size: 12px; color: var(--synfin-ink-faint); }
+.opt--empty { padding: 20px; text-align: center; color: var(--synfin-ink-faint); }
+
+/* quote panel */
+.quote { margin-top: 14px; }
+.you-get { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
+.you-get__k { font-size: 12px; color: var(--synfin-ink-dim); }
+.you-get__v { font-family: var(--synfin-mono); font-size: 20px; font-weight: 600; }
+.venues { display: flex; flex-direction: column; gap: 6px; }
+.venue { display: flex; align-items: center; gap: 9px; padding: 10px 12px;
+  border: 1px solid var(--synfin-line); border-radius: 11px; background: var(--synfin-surface); transition: border-color .15s ease; }
+.venue--pick { cursor: pointer; }
+.venue--pick:hover { border-color: var(--synfin-accent); }
+.venue--pick:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }
+.venue--best { background: color-mix(in srgb, var(--synfin-surface) 84%, var(--synfin-accent) 16%); }
+.venue--sel { border-color: var(--synfin-accent); }
+.venue--out { opacity: 0.55; }
+/* the radio affordance: outline circle that fills accent when selected */
+.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; }
+.venue--sel .venue__radio { border-color: var(--synfin-accent); }
+.venue--sel .venue__radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--synfin-accent); }
+.venue__id { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-transform: capitalize; }
+.badge { font-family: var(--synfin-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--synfin-accent);
+  border: 1px solid var(--synfin-accent); border-radius: 999px; padding: 1px 6px; }
+.venue__net { font-family: var(--synfin-mono); font-weight: 600; margin-left: auto; }
+.venue__out { font-size: 11px; color: var(--synfin-ink-faint); font-family: var(--synfin-mono); margin-left: auto; }
+
+.fees { margin-top: 12px; border-top: 1px dashed var(--synfin-line); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
+.fee { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
+.fee__k { color: var(--synfin-ink-dim); }
+.fee__k .bps { font-family: var(--synfin-mono); font-size: 11px; color: var(--synfin-ink-faint); margin-left: 5px; }
+.fee__v { font-family: var(--synfin-mono); }
+.fee--split { margin-top: -3px; }
+.fee--split .fee__k { font-size: 11px; color: var(--synfin-ink-faint); }
+.fee--net { border-top: 1px solid var(--synfin-line); padding-top: 8px; margin-top: 2px; }
+.fee--net .fee__k { color: var(--synfin-ink); font-weight: 600; font-size: 13px; }
+.fee--net .fee__v { color: var(--synfin-ink); font-weight: 700; }
+
+.note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5;
+  background: var(--synfin-surface); border: 1px solid var(--synfin-line); color: var(--synfin-ink-dim); }
+.note--key { border-left: 2px solid var(--synfin-accent); }
+.note a { color: var(--synfin-accent); }
+
+.cta { all: unset; box-sizing: border-box; cursor: pointer; display: block; text-align: center; width: 100%; margin-top: 14px;
+  padding: 13px; border-radius: 12px; font-weight: 600; background: var(--synfin-accent); color: #0b0b0d; transition: background .15s ease; }
+.cta:hover { background: var(--synfin-accent-hi); }
+.cta:focus-visible { outline: 2px solid var(--synfin-ink); outline-offset: 2px; }
+/* a genuinely disabled look: muted surface, not the accent at reduced opacity */
+.cta--disabled { background: var(--synfin-surface-2); color: var(--synfin-ink-faint); border: 1px solid var(--synfin-line); cursor: not-allowed; }
+.cta--disabled:hover { background: var(--synfin-surface-2); }
+.cta__help { margin: 8px 0 0; font-size: 11px; line-height: 1.5; text-align: center; color: var(--synfin-ink-faint); }
+.cta__help code { font-family: var(--synfin-mono); font-size: 10.5px; color: var(--synfin-ink-dim); }
+/* visible confirmation that a plan was created and handed off */
+.plan-ok { margin-top: 14px; padding: 11px 12px; border-radius: 10px; display: flex; align-items: flex-start; gap: 8px;
+  font-size: 12.5px; line-height: 1.5; color: var(--synfin-ink);
+  background: color-mix(in srgb, var(--synfin-surface) 82%, var(--synfin-ok) 18%); border: 1px solid var(--synfin-ok); }
+.plan-ok__icon { color: var(--synfin-ok); font-weight: 700; }
+.plan-ok code { font-family: var(--synfin-mono); font-size: 11px; color: var(--synfin-ink-dim); }
+
+.foot { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10.5px; color: var(--synfin-ink-faint); }
+.foot__sep { opacity: 0.5; }
+.foot__brand { color: var(--synfin-ink-faint); text-decoration: none; border-radius: 3px; }
+.foot__brand:hover { color: var(--synfin-accent); }
+.foot__brand:focus-visible { outline: 2px solid var(--synfin-accent); outline-offset: 2px; }
+.foot a { color: var(--synfin-ink-faint); }
+.foot a:hover { color: var(--synfin-ink-dim); }
+
+/* states */
+.msg { margin-top: 14px; text-align: center; padding: 26px 16px; }
+.msg__icon { font-size: 22px; margin-bottom: 8px; }
+.msg__title { font-weight: 600; margin-bottom: 4px; }
+.msg__body { font-size: 12.5px; color: var(--synfin-ink-dim); }
+.msg--error .msg__title { color: var(--synfin-warn); }
+
+.skel { border-radius: 10px; background:
+  linear-gradient(100deg, var(--synfin-surface) 30%, var(--synfin-surface-2) 50%, var(--synfin-surface) 70%);
+  background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
+@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+.skel-row { height: 44px; margin-top: 6px; }
+.skel-big { height: 26px; width: 55%; margin-bottom: 12px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .skel { animation: none; } .swap { transition: none; } .pop { animation: none; }
+}
+/* Narrow embeds: reflow on the widget's own width (container query), with a
+   viewport media-query fallback for engines without container support. Both
+   only shrink type and tighten spacing; the asset flex-shrink:0 above is what
+   actually stops labels clipping, so legibility holds even without either. */
+@container synfinw (max-width: 360px) {
+  .amount, .receive, .you-get__v { font-size: 18px; }
+  .you-get__v { font-size: 17px; }
+  .card { padding: 13px; }
+  .field { padding: 11px 12px; }
+  .asset { padding: 5px 10px 5px 5px; gap: 6px; }
+  .asset__icon { width: 20px; height: 20px; }
+  .venue, .fee { font-size: 12px; }
+}
+@container synfinw (max-width: 320px) {
+  .amount, .receive { font-size: 16px; }
+  .field__row { gap: 6px; }
+}
+@media (max-width: 360px) {
+  .amount, .receive, .you-get__v { font-size: 18px; }
+  .card { padding: 13px; }
+}
+`;function H(t){return{...t,pair:{give:w(t.pair.give),want:w(t.pair.want)},venues:t.venues.map(n=>n.fee?{...n,fee:{...n.fee,asset:w(n.fee.asset)}}:n)}}function q(t){let n={give:w(t.pair.give),want:w(t.pair.want)},e=t.venues.filter(a=>a.available&&a.net!==null);if(e.length===0)return{kind:"no-route",pair:n};let i=t.best?.venueId??null,s=e.some(a=>a.clientFees!==void 0),o=t.venues.map(a=>({venueId:a.venueId,available:a.available&&a.net!==null,net:a.net,rejectionCode:a.rejectionCode,isBest:a.venueId===i,fees:a.clientFees!==void 0?B(a.clientFees):null})),r=o.find(a=>a.isBest)??null;return{kind:"quoted",pair:n,amount:t.amount,asOf:t.asOf,best:r,venues:o,keyed:s,edgeBps:t.edgeBps}}var de=["api-key","fee-bps","fee-recipient","from","to","amount","appearance","base-url","refresh-ms","show-fee-breakdown","show-attribution"],fe=400,k=class extends HTMLElement{constructor(){super(...arguments);d(this,"fetchImpl");d(this,"cfg",C({}).config);d(this,"client",null);d(this,"view",{kind:"idle"});d(this,"debounce",0);d(this,"ticker",0);d(this,"countdown",0);d(this,"reqSeq",0);d(this,"selectorOpen",null);d(this,"built",!1);d(this,"syncing",!1);d(this,"selectedVenue",null);d(this,"plan",null)}static get observedAttributes(){return de}connectedCallback(){this.build(),this.reconfigure()}disconnectedCallback(){clearTimeout(this.debounce),clearInterval(this.ticker)}attributeChangedCallback(){this.built&&!this.syncing&&this.reconfigure()}configure(e){for(let[i,s]of Object.entries(e)){let o=i.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`);s==null?this.removeAttribute(o):this.setAttribute(o,String(s))}}reconfigure(){let e=o=>this.getAttribute(o),i={...e("api-key")!==null?{apiKey:e("api-key")}:{},...e("fee-bps")!==null?{feeBps:Number(e("fee-bps"))}:{},...e("fee-recipient")!==null?{feeRecipient:e("fee-recipient")}:{},...e("from")!==null?{from:e("from")}:{},...e("to")!==null?{to:e("to")}:{},...e("amount")!==null?{amount:e("amount")}:{},...e("appearance")==="light"?{appearance:"light"}:{},...e("base-url")!==null?{baseUrl:e("base-url")}:{},...e("refresh-ms")!==null?{refreshMs:Number(e("refresh-ms"))}:{},...e("show-fee-breakdown")!==null?{showFeeBreakdown:e("show-fee-breakdown")!=="false"}:{},...e("show-attribution")!==null?{showAttribution:e("show-attribution")!=="false"}:{}},{config:s}=C(i);this.cfg=s,this.getAttribute("appearance")!==s.appearance&&(this.syncing=!0,this.setAttribute("appearance",s.appearance),this.syncing=!1),this.client=s.apiKey!==null?E({apiKey:s.apiKey,baseUrl:s.baseUrl,...this.fetchImpl?{fetch:this.fetchImpl}:{}}):null,this.paintChrome(),this.quote(!0)}root(){return this.shadowRoot}$(e){return this.root().querySelector(e)}build(){if(this.built)return;let e=this.attachShadow({mode:"open"}),i=document.createElement("style");i.textContent=U;let s=document.createElement("div");s.className="card",s.innerHTML=`
+      <div class="head">
+        <span class="refresh">
+          <svg class="refresh__ring" viewBox="0 0 16 16" aria-hidden="true"><circle class="bg" cx="8" cy="8" r="6"></circle><circle class="fg" cx="8" cy="8" r="6" pathLength="100" stroke-dasharray="100" stroke-dashoffset="0"></circle></svg>
+          <button type="button" data-refresh aria-label="Refresh quote">refresh</button>
+        </span>
+      </div>
+      <div class="field" data-field="from">
+        <span class="field__label">You pay</span>
+        <div class="field__row">
+          <input class="amount" data-amount type="text" inputmode="decimal" autocomplete="off" placeholder="0.00" aria-label="Amount to pay" />
+          <button class="asset" data-asset="from" aria-haspopup="listbox" aria-label="Select the asset you pay"></button>
+        </div>
+      </div>
+      <div class="swapwrap"><button class="swap" data-swap type="button" aria-label="Swap the pair">&#8645;</button></div>
+      <div class="field" data-field="to">
+        <span class="field__label">You receive</span>
+        <div class="field__row">
+          <span class="receive receive--dim" data-receive>-</span>
+          <button class="asset" data-asset="to" aria-haspopup="listbox" aria-label="Select the asset you receive"></button>
+        </div>
+      </div>
+      <div class="result" data-result aria-live="polite"></div>
+    `,e.append(i,s),this.built=!0,this.$("[data-amount]")?.addEventListener("input",()=>this.onAmount()),this.$("[data-swap]")?.addEventListener("click",()=>this.swap()),this.$("[data-refresh]")?.addEventListener("click",()=>this.quote(!0)),this.$('[data-asset="from"]')?.addEventListener("click",()=>this.openSelector("from")),this.$('[data-asset="to"]')?.addEventListener("click",()=>this.openSelector("to")),this.root().addEventListener("click",o=>{let r=o.target;if(r.closest('[data-action="plan"]')){this.createPlan();return}let a=r.closest("[data-venue]");a&&this.selectVenue(a.getAttribute("data-venue")??"")})}assetBtn(e,i){let s=this.$(`[data-asset="${e}"]`);s&&(s.innerHTML=`${R(i.symbol)}<span class="asset__sym">${i.symbol}</span><span class="asset__caret" aria-hidden="true">&#9662;</span>`)}paintChrome(){let e=x(this.cfg.from)??y[0],i=x(this.cfg.to)??y[1];this.assetBtn("from",e),this.assetBtn("to",i);let s=this.$("[data-amount]");s&&s.value!==this.cfg.amount&&document.activeElement!==s&&(s.value=this.cfg.amount)}onAmount(){let e=this.$("[data-amount]"),i=e?e.value.trim():"";if(this.cfg={...this.cfg,amount:i},clearTimeout(this.debounce),i===""){this.setView({kind:"idle"}),this.stopCountdown();return}this.debounce=window.setTimeout(()=>void this.quote(!0),fe)}setPair(e,i){this.cfg={...this.cfg,from:e,to:i},this.paintChrome(),b(this,v.asset,{from:e,to:i}),this.quote(!0)}swap(){this.setPair(this.cfg.to,this.cfg.from)}setView(e){this.view=e,this.paintResult()}paintResult(){let e=this.$("[data-result]");e&&(e.innerHTML=N(this.view,this.cfg,this.selectedVenue,this.plan)),this.paintReceive(),this.$('.venues[role="radiogroup"]')?.addEventListener("keydown",i=>this.venueKeys(i))}paintReceive(){let e=this.$("[data-receive]");if(!e)return;let i=this.view.kind==="quoted"?$(this.view,this.selectedVenue):null;if(i){let s=i.fees?i.fees.userReceives:i.net;e.textContent=s!==null?g(s):"-",e.classList.remove("receive--dim")}else e.textContent=this.view.kind==="loading"?"...":"-",e.classList.add("receive--dim")}selectVenue(e){if(this.view.kind!=="quoted"||e==="")return;let i=this.view.venues.find(s=>s.venueId===e&&s.available);!i||this.selectedVenue===e||(this.selectedVenue=e,this.plan=null,this.paintResult(),this.$(`[data-venue="${e}"]`)?.focus(),b(this,v.venue,{venueId:e,net:i.net,isBest:i.isBest,pair:this.view.pair}))}venueKeys(e){if(this.view.kind!=="quoted")return;let i=this.view.venues.filter(a=>a.available).map(a=>a.venueId);if(i.length===0)return;if(e.key===" "||e.key==="Enter"){let l=e.target?.closest("[data-venue]")?.getAttribute("data-venue");l!=null&&i.includes(l)&&(e.preventDefault(),this.selectVenue(l));return}let s=this.selectedVenue!==null&&i.includes(this.selectedVenue)?i.indexOf(this.selectedVenue):0,o=s;if(e.key==="ArrowDown"||e.key==="ArrowRight")o=Math.min(i.length-1,s+1);else if(e.key==="ArrowUp"||e.key==="ArrowLeft")o=Math.max(0,s-1);else return;e.preventDefault();let r=i[o];r&&this.selectVenue(r)}async quote(e){let i=this.cfg.amount.trim();if(i===""){this.setView({kind:"idle"}),this.stopCountdown();return}if(this.cfg.from===this.cfg.to){this.setView({kind:"invalid",title:"Choose two different assets",message:"Pick a different asset to receive."}),this.stopCountdown();return}if(!/^\d+(\.\d+)?$/.test(i)||Number(i)<=0){this.setView({kind:"invalid",title:"Enter a valid amount",message:"Type a positive number, for example 100 or 12.5."}),this.stopCountdown();return}let s=++this.reqSeq;e&&this.view.kind!=="quoted"&&this.setView({kind:"loading"});try{let o=await P({baseUrl:this.cfg.baseUrl,apiKey:this.cfg.apiKey,...this.fetchImpl?{fetch:this.fetchImpl}:{}},{from:this.cfg.from,to:this.cfg.to,amount:this.cfg.amount,...this.cfg.feeBps!==null?{feeBps:this.cfg.feeBps}:{},...this.cfg.feeRecipient!==null?{feeRecipient:this.cfg.feeRecipient}:{}});if(s!==this.reqSeq)return;let r=q(o);if(r.kind==="quoted"){let a=r.venues.filter(l=>l.available).map(l=>l.venueId);(this.selectedVenue===null||!a.includes(this.selectedVenue))&&(this.selectedVenue=r.best?.venueId??a[0]??null),this.plan=null}this.setView(r),r.kind==="quoted"?(b(this,v.quote,H(o)),this.startCountdown()):(b(this,v.error,{code:"no_route",message:"No venue can fill this pair at this size."}),this.stopCountdown())}catch(o){if(s!==this.reqSeq)return;let r=o instanceof p?o.code:"network",a=o instanceof Error?o.message:"could not reach the Synfin API";this.setView({kind:"error",code:r,message:a}),b(this,v.error,{code:r,message:a}),this.stopCountdown()}}startCountdown(){this.stopCountdown();let e=Math.round(this.cfg.refreshMs/1e3);this.countdown=e;let i=()=>{let s=this.root().querySelector(".refresh__ring .fg");s&&(s.style.strokeDashoffset=String(100-this.countdown/e*100))};i(),this.ticker=window.setInterval(()=>{this.countdown-=1,i(),this.countdown<=0&&this.quote(!1)},1e3)}stopCountdown(){clearInterval(this.ticker)}async createPlan(){if(this.client===null||this.view.kind!=="quoted"||this.cfg.feeRecipient===null)return;let e=$(this.view,this.selectedVenue);if(!(e===null||!e.available)){this.stopCountdown(),this.plan={status:"creating"},this.paintResult();try{let i=await this.client.createPlan({from:this.cfg.from,to:this.cfg.to,amount:this.cfg.amount,venueId:e.venueId,takerParty:this.cfg.feeRecipient,idempotencyKey:`w_${Date.now()}_${Math.round(Number(this.cfg.amount)*1e3)}`,...this.cfg.feeBps!==null?{feeBps:this.cfg.feeBps}:{},feeRecipient:this.cfg.feeRecipient}),s=i.planId;this.plan={status:"created",...s?{planId:s}:{}},this.paintResult(),b(this,v.plan,i)}catch(i){let s=i instanceof p?i.code:"network",o=i instanceof Error?i.message:"plan failed";this.plan={status:"error",message:o},this.paintResult(),b(this,v.error,{code:s,message:o})}}}openSelector(e){this.selectorOpen&&this.closeSelector(),this.selectorOpen=e;let i=document.createElement("div");i.className="pop",i.setAttribute("role","dialog"),i.setAttribute("aria-modal","true"),i.setAttribute("aria-label",`Select the ${e} asset`),i.innerHTML=`
+      <div class="pop__head">
+        <input class="pop__search" data-search placeholder="Search assets" aria-label="Search assets" role="combobox" aria-expanded="true" aria-controls="synfin-opts" />
+        <button class="pop__close" data-close aria-label="Close">&#10005;</button>
+      </div>
+      <div class="pop__list" id="synfin-opts" role="listbox" data-list></div>`,this.$(".card").append(i);let s=i.querySelector("[data-search]"),o=i.querySelector("[data-list]"),r=l=>{let f=e==="from"?this.cfg.to:this.cfg.from,u=A(l);o.innerHTML=u.length===0?`<div class="opt--empty">No assets match "${l.replace(/[<>&]/g,"")}"</div>`:u.map((h,m)=>`<button class="opt" role="option" tabindex="-1" data-sym="${h.symbol}" ${h.symbol===f?'aria-disabled="true" disabled':""} ${m===0?'aria-selected="true"':""}>
+              ${R(h.symbol)}
+              <span class="opt__name"><span class="opt__sym">${h.symbol}</span><span class="opt__full">${h.name}</span></span>
+            </button>`).join("")};r("");let a=l=>{e==="from"&&l===this.cfg.to||e==="to"&&l===this.cfg.from||(this.closeSelector(),e==="from"?this.setPair(l,this.cfg.to):this.setPair(this.cfg.from,l))};s.addEventListener("input",()=>r(s.value)),o.addEventListener("click",l=>{let f=l.target.closest("[data-sym]");f&&!f.hasAttribute("disabled")&&a(f.getAttribute("data-sym")??"")}),i.querySelector("[data-close]")?.addEventListener("click",()=>this.closeSelector()),s.addEventListener("keydown",l=>this.selectorKeys(l,o,a,s)),setTimeout(()=>s.focus(),0)}selectorKeys(e,i,s,o){let r=[...i.querySelectorAll("[data-sym]:not([disabled])")],a=i.querySelector('[aria-selected="true"]'),l=a?r.indexOf(a):-1;if(e.key==="Escape")e.preventDefault(),this.closeSelector();else if(e.key==="ArrowDown"||e.key==="ArrowUp")e.preventDefault(),l=e.key==="ArrowDown"?Math.min(r.length-1,l+1):Math.max(0,l-1),r.forEach(f=>f.setAttribute("aria-selected",f===r[l]?"true":"false")),r[l]?.scrollIntoView({block:"nearest"});else if(e.key==="Enter"){e.preventDefault();let f=(r[l]??r[0])?.getAttribute("data-sym");f&&s(f)}}closeSelector(){this.selectorOpen=null,this.root().querySelector(".pop")?.remove(),this.$('[data-asset="from"]')?.focus()}};function ue(t="synfin-widget"){typeof customElements<"u"&&customElements.get(t)===void 0&&customElements.define(t,k)}ue();})();

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@synfin/widget",
+  "version": "0.1.0",
+  "description": "The Synfin widget: an embeddable, framework-agnostic quote-and-fee widget (a <synfin-widget> custom element, plus a React wrapper) built on @synfin/client. Live best-execution quotes across Canton venues with the partner's disclosed fees. Non-custodial: it never holds keys.",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/synfin-widget.global.js",
+  "jsdelivr": "./dist/synfin-widget.global.js",
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ]
+    }
+  },
+  "sideEffects": [
+    "./dist/index.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://synfin.xyz/docs/sdk",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cayvox/synfin.git",
+    "directory": "packages/widget"
+  },
+  "keywords": [
+    "synfin",
+    "canton",
+    "widget",
+    "swap",
+    "web-component"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/bundle-cdn.mjs",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@synfin/client": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "20.19.43",
+    "@types/react": "18.3.12",
+    "esbuild": "0.24.2",
+    "jsdom": "25.0.1",
+    "react": "18.3.1",
+    "typescript": "5.7.2",
+    "vitest": "2.1.8"
+  }
+}