@withone/connect 0.7.0 → 0.8.0

package/dist/svelte.esm.js

@@ -1 +1 @@
-function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function c(e,t,n){var o;s();const i="dark"===t,c=document.createElement("div");c.id=r,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=l.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(l),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);c.addEventListener("click",e=>{e.target===c&&f()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function s(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function l(){return document.getElementById(o)}let a=!1;const d=e=>{var r;let d=null,p=!1;const u=null!==(r=e.mode)&&void 0!==r?r:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&d&&(window.removeEventListener("message",d),d=null),i()},m=(t,n)=>{if(!p){p=!0,f(),"success"===t?c("success",e.appTheme):function(e,t){c("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=l();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const o=l();if(!o)return;let i,r;try{var c,s;i=null!==(c=null===(s=o.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",m(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const e=new URLSearchParams(window.location.search),o=e.get(t);if("success"===o||"error"===o){var v;a=!0;const i=null!==(v=e.get(n))&&void 0!==v?v:void 0;e.delete(t),e.delete(n);const r=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",r),window.setTimeout(()=>m(o,i),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===u)return void window.location.assign(h());p=!1,d=b,window.addEventListener("message",d);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||s(),f()}}},p="one-connect-button-styles",u="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},f={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},m="#CCFF00",b="#3FE3A5",g="#0A0C0B";const v=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${u},box-shadow .2s ${u},opacity .2s ${u}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${b};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${u};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${u},opacity .2s ${u}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?f:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",l=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),a.open())});const w=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:m:i.btnBg,p=a?i.fg:l?g:i.btnFg,u=a?i.surface:d,h=a?i.muted:p;v.style.background="connected"!==s||a?d:b,v.style.color="connected"!==s||a?p:g,v.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:m}38`:i.shadow,v.disabled="connecting"===s,v.innerHTML="";const f=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,u,h);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else f&&e.appendChild(f);if(v.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else f&&v.appendChild(f);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{l||(s=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),v.remove()}}};function w(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}function x(e,t){let n=v(e,w(t));return{update(t){n.destroy(),n=v(e,w(t))},destroy(){n.destroy()}}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),h=u?parseInt(u,10):void 0;this.handle=v(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(s=this.getAttribute("accent-color"))&&void 0!==s?s:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}();export{x as connectButton};
+function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message";let o=!1;const i=e=>{let i=!1;if("undefined"!=typeof window&&!o){const l=new URLSearchParams(window.location.search),r=l.get(t);if("success"===r||"error"===r){var c;o=!0;const s=null!==(c=l.get(n))&&void 0!==c?c:void 0,a=()=>{const e=new URLSearchParams(window.location.search);(e.has(t)||e.has(n))&&(e.delete(t),e.delete(n),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!i){i=!0;try{var t,n;"success"===r?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},c="one-connect-button-styles",l="cubic-bezier(.2,.9,.25,1)",r={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},s={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},a="#CCFF00",d="#3FE3A5",p="#0A0C0B";const u=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(c))return;const e=document.createElement("style");e.id=c,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${l},box-shadow .2s ${l},opacity .2s ${l}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${d};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${l};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${l},opacity .2s ${l}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const u="dark"===t.theme?s:r,h=null!==(n=t.variant)&&void 0!==n?n:"default",m=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let f="idle",b=!1;const w=i({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===h?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==f&&"connected"!==f||(x("connecting"),w.open())});const g=()=>{var e,n,o;const i="accent"===h,c="block"===h,l=c?u.surface:i?null!==(e=t.accentColor)&&void 0!==e?e:a:u.btnBg,r=c?u.fg:i?p:u.btnFg,s=c?u.surface:l,b=c?u.muted:r;v.style.background="connected"!==f||c?l:d,v.style.color="connected"!==f||c?r:p,v.style.boxShadow=c?`inset 0 0 0 1px ${u.line}`:"connected"===f?"none":i?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:a}38`:u.shadow,v.disabled="connecting"===f,v.innerHTML="";const w=function(e,t,n){var o,i;const c=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===c.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of c.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p;l.appendChild(n)}const r=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.length-4);if(r>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${r}`,l.appendChild(e)}return l}(t,s,b);if(c){var g;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(g=t.connectedLabel)&&void 0!==g?g:"Connected":m,e.appendChild(n),"connecting"===f){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else w&&e.appendChild(w);if(v.appendChild(e),t.description&&"idle"===f){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=u.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=u.muted,o.style.borderTop=`1px solid ${u.line}`,o.innerHTML=`<span style="font-size:11px;color:${u.muted}">Secured by</span><span style="display:inline-flex;color:${u.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${u.fg}">one</span>`,void v.appendChild(o)}if("connecting"===f){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===f){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else w&&v.appendChild(w);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":m,v.appendChild(x),"idle"===f){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{b||(f=e,g())};return g(),e.appendChild(v),{setState:x,destroy:()=>{b=!0,w.close({keepResult:!0}),v.remove()}}};function h(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}function m(e,t){let n=u(e,h(t));return{update(t){n.destroy(),n=u(e,h(t))},destroy(){n.destroy()}}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,c,l,r;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),h=p?parseInt(p,10):void 0;this.handle=u(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(r=this.getAttribute("connected-label"))&&void 0!==r?r:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}();export{m as connectButton};

package/dist/types/index.d.ts

@@ -3,11 +3,11 @@
  *
  * The SDK deliberately knows nothing about OAuth internals: state, PKCE
  * and the client secret live on the consumer's backend (see README).
- * The SDK only opens One's connect experience as a modal over the host
- * page and reports how the flow ended.
+ * The SDK only sends the tab to One's hosted connect page and reports
+ * how the flow ended when the user comes back.
  */
 
-/** Result posted back from the consumer's completion page. */
+/** How a completed flow reports back on the return URL. */
 export interface OneConnectResult {
   status: "success" | "error";
   /** Human-readable detail for the error case. */
@@ -15,52 +15,38 @@ export interface OneConnectResult {
 }
 
 export interface OneConnectProps {
-  /**
-   * "redirect" (default): the flow opens FULL-PAGE in the same tab on
-   * One's hosted connect domain — first-party cookies, every browser.
-   * The user returns via the app's own callback redirect; the SDK
-   * detects `?one_connect=…` on the next page load, fires the callback
-   * and shows the result card. "modal": the legacy in-page iframe.
-   */
-  mode?: "redirect" | "modal";
   /**
    * The consumer's OWN backend route that starts the flow. It must
    * generate `state` + PKCE, set them in an httpOnly cookie, and 302
-   * to One's /oauth/authorize (full recipe in the README). Must be an
-   * absolute URL.
+   * to One's /oauth/authorize (full recipe in the README). Relative
+   * paths resolve against the host page's origin.
    */
   authorize: {
     url: string;
   };
-  /** Theme for One's card. Carried on the URL fragment (#one_theme=…),
-   *  which survives the redirect chain — the consumer's backend forwards
-   *  nothing. */
+  /** Theme for One's hosted page. Carried on the URL fragment
+   *  (#one_theme=…), which survives the redirect chain — the consumer's
+   *  backend forwards nothing. */
   appTheme?: "dark" | "light";
-  /** Fired when the completion page reports success. The token exchange
-   *  already happened on the consumer's backend by this point. */
+  /** Fired on return when the callback redirect carried
+   *  ?one_connect=success. The token exchange already happened on the
+   *  consumer's backend by this point. */
   onSuccess?: () => void;
-  /** Fired when the completion page reports an error. */
+  /** Fired on return when the callback redirect carried an error. */
   onError?: (error: string) => void;
-  /** Fired when the user closes the card without a result. */
+  /** Reserved for future use — the hosted flow's cancel path returns
+   *  through onError with the OAuth error string. */
   onClose?: () => void;
 }
 
 export interface OneConnectHandle {
-  /** Opens One's connect modal over the current page. */
+  /** Navigates the tab to One's hosted connect flow. */
   open: () => void;
-  /** Tears everything down: modal frame + listeners. Pass
-   *  { keepResult: true } to leave an already-shown result overlay up
-   *  (it dismisses via its own controls). */
+  /** No-op in the full-page flow — kept so hosts can call it
+   *  unconditionally (e.g. on unmount). */
   close: (options?: { keepResult?: boolean }) => void;
 }
 
-/** Message posted from the completion page up to the host page. */
-export interface OneConnectMessage {
-  type: string; // MESSAGE_TYPE constant
-  status: "success" | "error";
-  message?: string;
-}
-
 /** A provider chip on the pre-built button. The SDK ships no One URLs,
  *  so icon sources are the consumer's to provide. */
 export interface ConnectButtonPlatform {
@@ -77,7 +63,7 @@ export interface ConnectButtonOptions {
   /** default = neutral pill; accent = brand-colored pill; block =
    *  full-width consent card with description + "Secured by One" foot. */
   variant?: "default" | "accent" | "block";
-  /** Matches the host page, not One's card (that's connect.appTheme). */
+  /** Matches the host page, not One's page (that's connect.appTheme). */
   theme?: "light" | "dark";
   /** Provider chips fanned on hover; first four render, the rest fold
    *  into the +N chip together with moreCount. */

package/dist/vue.cjs.js

@@ -1 +1 @@
-"use strict";var e=require("vue");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one_connect",o="one_connect_message",i="one-connect-frame";function r(){const e=document.getElementById(i);e&&e.remove()}const l="one-connect-success";function c(e,t,n){var o;s();const i="dark"===t,r=document.createElement("div");r.id=l,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const c=document.createElement("div");Object.assign(c.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";c.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const f=c.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(c),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of c.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);r.addEventListener("click",e=>{e.target===r&&h()}),window.addEventListener("keydown",m),null===(o=c.querySelector("[data-one-close]"))||void 0===o||o.focus()}function s(){var e;null===(e=document.getElementById(l))||void 0===e||e.remove()}function a(){return document.getElementById(i)}let d=!1;const p=e=>{var t;let l=null,p=!1;const u=null!==(t=e.mode)&&void 0!==t?t:"redirect",f=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},h=()=>{"undefined"!=typeof window&&l&&(window.removeEventListener("message",l),l=null),r()},m=(t,n)=>{if(!p){p=!0,h(),"success"===t?c("success",e.appTheme):function(e,t){c("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=a();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{h();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},v=()=>{var e;const t=a();if(!t)return;let i,r;try{var l,c;i=null!==(l=null===(c=t.contentWindow)||void 0===c?void 0:c.location.href)&&void 0!==l?l:""}catch{return}try{r=new URL(i).searchParams}catch{return}const s=r.get(n);"success"!==s&&"error"!==s||(t.style.visibility="hidden",m(s,null!==(e=r.get(o))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!d){const e=new URLSearchParams(window.location.search),t=e.get(n);if("success"===t||"error"===t){var g;d=!0;const i=null!==(g=e.get(o))&&void 0!==g?g:void 0;e.delete(n),e.delete(o);const r=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",r),window.setTimeout(()=>m(t,i),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===u)return void window.location.assign(f());p=!1,l=b,window.addEventListener("message",l);(function(e){r();const t=document.createElement("iframe");return t.id=i,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(f()).addEventListener("load",v)},close:e=>{null!=e&&e.keepResult||s(),h()}}},u="one-connect-button-styles",f="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},m={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},b="#CCFF00",v="#3FE3A5",g="#0A0C0B";const w=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(u))return;const e=document.createElement("style");e.id=u,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${f},box-shadow .2s ${f},opacity .2s ${f}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${v};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${f};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${f},opacity .2s ${f}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?m:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",l=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",s=!1;const a=p({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(y("connecting"),a.open())});const w=()=>{var e,n,o;const s="accent"===r,a="block"===r,p=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:b:i.btnBg,u=a?i.fg:s?g:i.btnFg,f=a?i.surface:p,h=a?i.muted:u;d.style.background="connected"!==c||a?p:v,d.style.color="connected"!==c||a?u:g,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:b}38`:i.shadow,d.disabled="connecting"===c,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g;l.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,l.appendChild(e)}return l}(t,f,h);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":l,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":l,d.appendChild(y),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},y=e=>{s||(c=e,w())};return w(),e.appendChild(d),{setState:y,destroy:()=>{s=!0,a.close({keepResult:!0}),d.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,l,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),f=u?parseInt(u,10):void 0;this.handle=w(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(f)?f:void 0,description:null!==(l=this.getAttribute("description"))&&void 0!==l?l:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const y=e.defineComponent({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(t,{emit:n}){const o=e.ref(null);let i=null;const r=()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null,o.value&&(i=w(o.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...t},{onSuccess:()=>n("success"),onError:e=>n("error",e),onClose:()=>n("close")})))};return e.onMounted(r),e.watch(()=>{var e;return[t.authorizeUrl,t.appTheme,t.label,t.variant,t.theme,JSON.stringify(null!==(e=t.platforms)&&void 0!==e?e:[]),t.moreCount,t.description,t.accentColor,t.connectedLabel]},r),e.onBeforeUnmount(()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null}),()=>e.h("div",{ref:o})}});exports.ConnectButton=y;
+"use strict";var e=require("vue");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one_connect",o="one_connect_message";let i=!1;const r=e=>{let t=!1;if("undefined"!=typeof window&&!i){const l=new URLSearchParams(window.location.search),c=l.get(n);if("success"===c||"error"===c){var r;i=!0;const a=null!==(r=l.get(o))&&void 0!==r?r:void 0,s=()=>{const e=new URLSearchParams(window.location.search);(e.has(n)||e.has(o))&&(e.delete(n),e.delete(o),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};s();for(const e of[50,500,2e3])window.setTimeout(s,e);window.setTimeout(()=>{if(!t){t=!0;try{var n,o;"success"===c?null===(n=e.onSuccess)||void 0===n||n.call(e):null===(o=e.onError)||void 0===o||o.call(e,null!=a?a:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},l="one-connect-button-styles",c="cubic-bezier(.2,.9,.25,1)",a={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},s={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},d="#CCFF00",p="#3FE3A5",u="#0A0C0B";const h=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(l))return;const e=document.createElement("style");e.id=l,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${c},box-shadow .2s ${c},opacity .2s ${c}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${p};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${c};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${c},opacity .2s ${c}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?s:a,h=null!==(n=t.variant)&&void 0!==n?n:"default",m=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let f="idle",b=!1;const v=r({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===h?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==f&&"connected"!==f||(y("connecting"),v.open())});const g=()=>{var e,n,o;const r="accent"===h,l="block"===h,c=l?i.surface:r?null!==(e=t.accentColor)&&void 0!==e?e:d:i.btnBg,a=l?i.fg:r?u:i.btnFg,s=l?i.surface:c,b=l?i.muted:a;w.style.background="connected"!==f||l?c:p,w.style.color="connected"!==f||l?a:u,w.style.boxShadow=l?`inset 0 0 0 1px ${i.line}`:"connected"===f?"none":r?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:d}38`:i.shadow,w.disabled="connecting"===f,w.innerHTML="";const v=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=u}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=u;l.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,l.appendChild(e)}return l}(t,s,b);if(l){var g;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(g=t.connectedLabel)&&void 0!==g?g:"Connected":m,e.appendChild(n),"connecting"===f){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else v&&e.appendChild(v);if(w.appendChild(e),t.description&&"idle"===f){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,w.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void w.appendChild(o)}if("connecting"===f){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===f){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}else v&&w.appendChild(v);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":m,w.appendChild(y),"idle"===f){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}},y=e=>{b||(f=e,g())};return g(),e.appendChild(w),{setState:y,destroy:()=>{b=!0,v.close({keepResult:!0}),w.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,l,c;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let s;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(s=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=h(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:s,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(c=this.getAttribute("connected-label"))&&void 0!==c?c:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const m=e.defineComponent({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(t,{emit:n}){const o=e.ref(null);let i=null;const r=()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null,o.value&&(i=h(o.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...t},{onSuccess:()=>n("success"),onError:e=>n("error",e),onClose:()=>n("close")})))};return e.onMounted(r),e.watch(()=>{var e;return[t.authorizeUrl,t.appTheme,t.label,t.variant,t.theme,JSON.stringify(null!==(e=t.platforms)&&void 0!==e?e:[]),t.moreCount,t.description,t.accentColor,t.connectedLabel]},r),e.onBeforeUnmount(()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null}),()=>e.h("div",{ref:o})}});exports.ConnectButton=m;

package/dist/vue.esm.js

@@ -1 +1 @@
-import{defineComponent as e,ref as t,onMounted as n,watch as o,onBeforeUnmount as i,h as r}from"vue";function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const c="one_connect",s="one_connect_message",a="one-connect-frame";function d(){const e=document.getElementById(a);e&&e.remove()}const p="one-connect-success";function u(e,t,n){var o;f();const i="dark"===t,r=document.createElement("div");r.id=p,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const c=i?"#a1a1aa":"#6b7280",s=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",a=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",d=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${s};border:1px solid ${a};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${c};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${c};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${d};border:1px solid ${a};border-top:0;">`+`<span style="font-size:11px;color:${c};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const u=l.querySelector("[data-one-result-body]");u&&(u.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(l),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);r.addEventListener("click",e=>{e.target===r&&h()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function f(){var e;null===(e=document.getElementById(p))||void 0===e||e.remove()}function h(){return document.getElementById(a)}let m=!1;const b=e=>{var t;let n=null,o=!1;const i=null!==(t=e.mode)&&void 0!==t?t:"redirect",r=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},l=()=>{"undefined"!=typeof window&&n&&(window.removeEventListener("message",n),n=null),d()},p=(t,n)=>{if(!o){o=!0,l(),"success"===t?u("success",e.appTheme):function(e,t){u("error",e,t)}(e.appTheme,n);try{var i,r;if("success"===t)null===(i=e.onSuccess)||void 0===i||i.call(e);else null===(r=e.onError)||void 0===r||r.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=h();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||p(n.status,n.message);else{l();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const t=h();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const l=o.get(c);"success"!==l&&"error"!==l||(t.style.visibility="hidden",p(l,null!==(e=o.get(s))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!m){const e=new URLSearchParams(window.location.search),t=e.get(c);if("success"===t||"error"===t){var v;m=!0;const n=null!==(v=e.get(s))&&void 0!==v?v:void 0;e.delete(c),e.delete(s);const o=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",o),window.setTimeout(()=>p(t,n),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===i)return void window.location.assign(r());o=!1,n=b,window.addEventListener("message",n);(function(e){d();const t=document.createElement("iframe");return t.id=a,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(r()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||f(),l()}}},g="one-connect-button-styles",v="cubic-bezier(.2,.9,.25,1)",w={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},y={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},x="#CCFF00",C="#3FE3A5",k="#0A0C0B";const E=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(g))return;const e=document.createElement("style");e.id=g,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${v},box-shadow .2s ${v},opacity .2s ${v}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${C};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${v};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${v},opacity .2s ${v}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?y:w,r=null!==(n=t.variant)&&void 0!==n?n:"default",l=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",s=!1;const a=b({...t.connect,onSuccess:()=>{var e,n;u("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;u("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;u("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(u("connecting"),a.open())});const p=()=>{var e,n,o;const s="accent"===r,a="block"===r,p=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:x:i.btnBg,u=a?i.fg:s?k:i.btnFg,f=a?i.surface:p,h=a?i.muted:u;d.style.background="connected"!==c||a?p:C,d.style.color="connected"!==c||a?u:k,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:x}38`:i.shadow,d.disabled="connecting"===c,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=k}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=k;l.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,l.appendChild(e)}return l}(t,f,h);if(a){var b;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(b=t.connectedLabel)&&void 0!==b?b:"Connected":l,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const g=document.createElement("span");if(g.className="owcb-label",g.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":l,d.appendChild(g),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},u=e=>{s||(c=e,p())};return p(),e.appendChild(d),{setState:u,destroy:()=>{s=!0,a.close({keepResult:!0}),d.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),l(this,"onSuccess",null),l(this,"onError",null),l(this,"onClose",null),l(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,l,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),f=u?parseInt(u,10):void 0;this.handle=E(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(f)?f:void 0,description:null!==(l=this.getAttribute("description"))&&void 0!==l?l:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}l(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const S=e({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(e,{emit:l}){const c=t(null);let s=null;const a=()=>{var t;null===(t=s)||void 0===t||t.destroy(),s=null,c.value&&(s=E(c.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...e},{onSuccess:()=>l("success"),onError:e=>l("error",e),onClose:()=>l("close")})))};return n(a),o(()=>{var t;return[e.authorizeUrl,e.appTheme,e.label,e.variant,e.theme,JSON.stringify(null!==(t=e.platforms)&&void 0!==t?t:[]),e.moreCount,e.description,e.accentColor,e.connectedLabel]},a),i(()=>{var e;null===(e=s)||void 0===e||e.destroy(),s=null}),()=>r("div",{ref:c})}});export{S as ConnectButton};
+import{defineComponent as e,ref as t,onMounted as n,watch as o,onBeforeUnmount as i,h as l}from"vue";function r(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const c="one_connect",a="one_connect_message";let s=!1;const d=e=>{let t=!1;if("undefined"!=typeof window&&!s){const o=new URLSearchParams(window.location.search),i=o.get(c);if("success"===i||"error"===i){var n;s=!0;const l=null!==(n=o.get(a))&&void 0!==n?n:void 0,r=()=>{const e=new URLSearchParams(window.location.search);(e.has(c)||e.has(a))&&(e.delete(c),e.delete(a),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};r();for(const e of[50,500,2e3])window.setTimeout(r,e);window.setTimeout(()=>{if(!t){t=!0;try{var n,o;"success"===i?null===(n=e.onSuccess)||void 0===n||n.call(e):null===(o=e.onError)||void 0===o||o.call(e,null!=l?l:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},p="one-connect-button-styles",u="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},m={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},f="#CCFF00",b="#3FE3A5",v="#0A0C0B";const w=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${u},box-shadow .2s ${u},opacity .2s ${u}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${b};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${u};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${u},opacity .2s ${u}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?m:h,l=null!==(n=t.variant)&&void 0!==n?n:"default",r=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",a=!1;const s=d({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===l?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(y("connecting"),s.open())});const g=()=>{var e,n,o;const a="accent"===l,s="block"===l,d=s?i.surface:a?null!==(e=t.accentColor)&&void 0!==e?e:f:i.btnBg,p=s?i.fg:a?v:i.btnFg,u=s?i.surface:d,h=s?i.muted:p;w.style.background="connected"!==c||s?d:b,w.style.color="connected"!==c||s?p:v,w.style.boxShadow=s?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":a?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:f}38`:i.shadow,w.disabled="connecting"===c,w.innerHTML="";const m=function(e,t,n){var o,i;const l=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===l.length&&!e.moreCount)return null;const r=document.createElement("span");r.className="owcb-stack",r.setAttribute("aria-hidden","true");for(const e of l.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v;r.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,l.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,r.appendChild(e)}return r}(t,u,h);if(s){var g;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(g=t.connectedLabel)&&void 0!==g?g:"Connected":r,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(w.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,w.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void w.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}else m&&w.appendChild(m);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":r,w.appendChild(y),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}},y=e=>{a||(c=e,g())};return g(),e.appendChild(w),{setState:y,destroy:()=>{a=!0,s.close({keepResult:!0}),w.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),r(this,"onSuccess",null),r(this,"onError",null),r(this,"onClose",null),r(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,l,r,c;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let s;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(s=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=w(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:s,moreCount:Number.isFinite(u)?u:void 0,description:null!==(l=this.getAttribute("description"))&&void 0!==l?l:void 0,accentColor:null!==(r=this.getAttribute("accent-color"))&&void 0!==r?r:void 0,connectedLabel:null!==(c=this.getAttribute("connected-label"))&&void 0!==c?c:void 0})}}r(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const g=e({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(e,{emit:r}){const c=t(null);let a=null;const s=()=>{var t;null===(t=a)||void 0===t||t.destroy(),a=null,c.value&&(a=w(c.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...e},{onSuccess:()=>r("success"),onError:e=>r("error",e),onClose:()=>r("close")})))};return n(s),o(()=>{var t;return[e.authorizeUrl,e.appTheme,e.label,e.variant,e.theme,JSON.stringify(null!==(t=e.platforms)&&void 0!==t?t:[]),e.moreCount,e.description,e.accentColor,e.connectedLabel]},s),i(()=>{var e;null===(e=a)||void 0===e||e.destroy(),a=null}),()=>l("div",{ref:c})}});export{g as ConnectButton};

package/dist/wrapper-options.d.ts

@@ -4,7 +4,6 @@ import type { ConnectButtonOptions, ConnectButtonPlatform } from "./types";
  *  the core mountConnectButton options. */
 export interface ConnectButtonWrapperProps {
     authorizeUrl: string;
-    mode?: "redirect" | "modal";
     appTheme?: "light" | "dark";
     onSuccess?: () => void;
     onError?: (error: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@withone/connect",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Frontend bindings for One Connect, a drop-in OAuth flow that lets your users grant your application scoped, revocable access to their own connected tools. The user owns the connections; you hold a token scoped to exactly what they granted.",
   "files": [
     "dist",
@@ -97,4 +97,4 @@
       "optional": true
     }
   }
-}
+}

package/src/button.ts

@@ -325,7 +325,6 @@ export function registerConnectButton(): void {
     static observedAttributes = [
       "authorize-url",
       "app-theme",
-      "mode",
       "label",
       "variant",
       "theme",
@@ -381,9 +380,6 @@ export function registerConnectButton(): void {
           appTheme:
             (this.getAttribute("app-theme") as "light" | "dark" | null) ??
             undefined,
-          mode:
-            (this.getAttribute("mode") as "redirect" | "modal" | null) ??
-            undefined,
           onSuccess: () => {
             this.onSuccess?.();
             this.dispatchEvent(new CustomEvent("success"));

package/src/constants.ts

@@ -1,19 +1,6 @@
-// Wire-protocol constants shared by useOneConnect (host page) and
-// completeOneConnect (the consumer's completion page). Changing any of
-// these is a breaking change between SDK versions running on the two
-// pages — bump with care.
-
-/** postMessage envelope type for the result, completion page → host. */
-export const MESSAGE_TYPE = "@withone/connect:result";
-
-/** Posted by One's connect page (cross-origin) when the user closes the
- *  card without a result. */
-export const EXIT_MESSAGE_TYPE = "@withone/connect:exit";
-
 /** Query params the consumer's callback route puts on its final
- *  redirect (any same-origin URL). The SDK reads them straight off the
- *  iframe's location once the frame is back on the consumer's origin —
- *  no completion page, no postMessage required. */
+ *  redirect (any same-origin URL). The SDK reads them off the page URL
+ *  when the tab comes home — no completion page required. */
 export const RETURN_STATUS_PARAM = "one_connect";
 export const RETURN_MESSAGE_PARAM = "one_connect_message";
 

package/src/index.ts

@@ -1,5 +1,4 @@
 export { useOneConnect } from "./useOneConnect";
-export { completeOneConnect } from "./complete";
 export { mountConnectButton, registerConnectButton } from "./button";
 export type {
   OneConnectProps,

package/src/react-types.d.ts

@@ -5,7 +5,6 @@ import type { ConnectButtonPlatform } from "./types";
 export interface ConnectButtonProps {
   authorizeUrl: string;
   appTheme?: "light" | "dark";
-  mode?: "redirect" | "modal";
   onSuccess?: () => void;
   onError?: (error: string) => void;
   onClose?: () => void;

package/src/react.ts

@@ -20,10 +20,8 @@ export interface ConnectButtonProps {
   /** The app's own backend authorize route ("/api/one/authorize" is
    *  fine — relative resolves against the page). */
   authorizeUrl: string;
-  /** Theme for One's card (rides the URL fragment). */
+  /** Theme for One's hosted page (rides the URL fragment). */
   appTheme?: "light" | "dark";
-  /** "redirect" (default, full-page hosted flow) or "modal" (legacy iframe). */
-  mode?: "redirect" | "modal";
   onSuccess?: () => void;
   onError?: (error: string) => void;
   onClose?: () => void;
@@ -64,7 +62,6 @@ export function ConnectButton(props: ConnectButtonProps): ReactElement {
       connect: {
         authorize: { url: props.authorizeUrl },
         appTheme: props.appTheme,
-        mode: props.mode,
         onSuccess: () => callbacksRef.current.onSuccess?.(),
         onError: (error) => callbacksRef.current.onError?.(error),
         onClose: () => callbacksRef.current.onClose?.(),
@@ -88,7 +85,6 @@ export function ConnectButton(props: ConnectButtonProps): ReactElement {
   }, [
     props.authorizeUrl,
     props.appTheme,
-    props.mode,
     props.label,
     props.variant,
     props.theme,

package/src/svelte-types.d.ts

@@ -4,7 +4,6 @@ import type { ConnectButtonPlatform } from "./types";
 export interface ConnectButtonProps {
   authorizeUrl: string;
   appTheme?: "light" | "dark";
-  mode?: "redirect" | "modal";
   onSuccess?: () => void;
   onError?: (error: string) => void;
   onClose?: () => void;

package/src/types/index.d.ts

@@ -3,11 +3,11 @@
  *
  * The SDK deliberately knows nothing about OAuth internals: state, PKCE
  * and the client secret live on the consumer's backend (see README).
- * The SDK only opens One's connect experience as a modal over the host
- * page and reports how the flow ended.
+ * The SDK only sends the tab to One's hosted connect page and reports
+ * how the flow ended when the user comes back.
  */
 
-/** Result posted back from the consumer's completion page. */
+/** How a completed flow reports back on the return URL. */
 export interface OneConnectResult {
   status: "success" | "error";
   /** Human-readable detail for the error case. */
@@ -15,52 +15,38 @@ export interface OneConnectResult {
 }
 
 export interface OneConnectProps {
-  /**
-   * "redirect" (default): the flow opens FULL-PAGE in the same tab on
-   * One's hosted connect domain — first-party cookies, every browser.
-   * The user returns via the app's own callback redirect; the SDK
-   * detects `?one_connect=…` on the next page load, fires the callback
-   * and shows the result card. "modal": the legacy in-page iframe.
-   */
-  mode?: "redirect" | "modal";
   /**
    * The consumer's OWN backend route that starts the flow. It must
    * generate `state` + PKCE, set them in an httpOnly cookie, and 302
-   * to One's /oauth/authorize (full recipe in the README). Must be an
-   * absolute URL.
+   * to One's /oauth/authorize (full recipe in the README). Relative
+   * paths resolve against the host page's origin.
    */
   authorize: {
     url: string;
   };
-  /** Theme for One's card. Carried on the URL fragment (#one_theme=…),
-   *  which survives the redirect chain — the consumer's backend forwards
-   *  nothing. */
+  /** Theme for One's hosted page. Carried on the URL fragment
+   *  (#one_theme=…), which survives the redirect chain — the consumer's
+   *  backend forwards nothing. */
   appTheme?: "dark" | "light";
-  /** Fired when the completion page reports success. The token exchange
-   *  already happened on the consumer's backend by this point. */
+  /** Fired on return when the callback redirect carried
+   *  ?one_connect=success. The token exchange already happened on the
+   *  consumer's backend by this point. */
   onSuccess?: () => void;
-  /** Fired when the completion page reports an error. */
+  /** Fired on return when the callback redirect carried an error. */
   onError?: (error: string) => void;
-  /** Fired when the user closes the card without a result. */
+  /** Reserved for future use — the hosted flow's cancel path returns
+   *  through onError with the OAuth error string. */
   onClose?: () => void;
 }
 
 export interface OneConnectHandle {
-  /** Opens One's connect modal over the current page. */
+  /** Navigates the tab to One's hosted connect flow. */
   open: () => void;
-  /** Tears everything down: modal frame + listeners. Pass
-   *  { keepResult: true } to leave an already-shown result overlay up
-   *  (it dismisses via its own controls). */
+  /** No-op in the full-page flow — kept so hosts can call it
+   *  unconditionally (e.g. on unmount). */
   close: (options?: { keepResult?: boolean }) => void;
 }
 
-/** Message posted from the completion page up to the host page. */
-export interface OneConnectMessage {
-  type: string; // MESSAGE_TYPE constant
-  status: "success" | "error";
-  message?: string;
-}
-
 /** A provider chip on the pre-built button. The SDK ships no One URLs,
  *  so icon sources are the consumer's to provide. */
 export interface ConnectButtonPlatform {
@@ -77,7 +63,7 @@ export interface ConnectButtonOptions {
   /** default = neutral pill; accent = brand-colored pill; block =
    *  full-width consent card with description + "Secured by One" foot. */
   variant?: "default" | "accent" | "block";
-  /** Matches the host page, not One's card (that's connect.appTheme). */
+  /** Matches the host page, not One's page (that's connect.appTheme). */
   theme?: "light" | "dark";
   /** Provider chips fanned on hover; first four render, the rest fold
    *  into the +N chip together with moreCount. */