@withone/connect 0.8.3 → 0.9.0

package/dist/button.d.ts

@@ -1,18 +1,17 @@
 import type { ConnectButtonHandle, ConnectButtonOptions } from "./types";
 export declare const mountConnectButton: (container: HTMLElement, options: ConnectButtonOptions) => ConnectButtonHandle;
 /**
- * <one-connect-button> — the simple path. One tag, any framework
- * (React, Vue, Svelte, plain HTML): the element wires the whole flow
- * itself from its attributes and manages Connect → Connecting →
- * Connected. Registered automatically in the browser on import;
- * defined inside a function so importing this module on a server
- * (Next.js SSR) never touches HTMLElement.
+ * <one-connect-button>: one tag for any framework. The element wires the
+ * whole flow from its attributes and manages Connect, Connecting and
+ * Connected. Registered automatically in the browser on import; defined
+ * inside a function so importing this module on a server never touches
+ * HTMLElement.
  *
  * Attributes: authorize-url (required), app-theme, label, variant,
- * theme, platforms (JSON array of {name, imageUrl}), more-count,
+ * theme, platforms ("stripe, notion" or a JSON array), more-count,
  * description, accent-color, connected-label.
- * Events: "success" | "error" (detail: message) | "close" — plus
- * matching function properties (onSuccess/onError/onClose) that
- * React 19 / Vue / Svelte set naturally as props.
+ * Events: "success" and "error" (detail: message), plus the matching
+ * onSuccess and onError function properties that React 19, Vue and
+ * Svelte set naturally as props.
  */
 export declare function registerConnectButton(): void;

package/dist/constants.d.ts

@@ -1,9 +1,13 @@
-/** Query params the consumer's callback route puts on its final
- *  redirect (any same-origin URL). The SDK reads them off the page URL
- *  when the tab comes home — no completion page required. */
+/** Query params the app's callback route puts on its final redirect.
+ *  The SDK reads them off the page URL when the tab comes home, so
+ *  there is no completion page to build. */
 export declare const RETURN_STATUS_PARAM = "one_connect";
 export declare const RETURN_MESSAGE_PARAM = "one_connect_message";
 /** Fragment key on the authorize URL carrying the app-chosen theme.
  *  A fragment never reaches any server and survives the whole redirect
- *  chain, so the consumer's backend forwards nothing. */
+ *  chain, so the app's backend forwards nothing. */
 export declare const THEME_PARAM = "one_theme";
+/** One's connector logos, by slug. */
+export declare const CONNECTOR_ASSETS_URL = "https://assets.withone.ai/connectors";
+/** One's production API. Point `oneApiUrl` elsewhere for development. */
+export declare const DEFAULT_ONE_API_URL = "https://api.withone.ai";

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";const e="one_connect",t="one_connect_message";let n=!1;const o=o=>{if("undefined"!=typeof window&&!n){const r=function(n){var o;const r=new URLSearchParams(n),i=r.get(e);if("success"!==i&&"error"!==i)return null;const c=null!==(o=r.get(t))&&void 0!==o?o:void 0;return c?{status:i,message:c}:{status:i}}(window.location.search);if(r){n=!0;const i=()=>{(function(n){const o=new URLSearchParams(n);return o.has(e)||o.has(t)})(window.location.search)&&window.history.replaceState(null,"",function(n){const o=new URLSearchParams(n.search);o.delete(e),o.delete(t);const r=o.toString();return`${n.pathname}${r?`?${r}`:""}${n.hash}`}(window.location))};i();for(const e of[50,500,2e3])window.setTimeout(i,e);window.setTimeout(()=>{try{var e,t,n;"success"===r.status?null===(e=o.onSuccess)||void 0===e||e.call(o):null===(t=o.onError)||void 0===t||t.call(o,null!==(n=r.message)&&void 0!==n?n:"The connection was not completed.")}catch{}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const e=new URL(o.authorizeUrl,"undefined"==typeof window?void 0:window.location.origin);return o.appTheme&&(e.hash=`one_theme=${o.appTheme}`),e.toString()}catch{return o.authorizeUrl}})())}}};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}function i(e){return e.trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function c(e){return e.split(/[-_]+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" ")}function l(e){return e?`https://assets.withone.ai/connectors/${e}.svg`:""}function a(e){var t,n,o,r;const a="string"==typeof e?{slug:e}:e,s=null!==(t=a.slug)&&void 0!==t&&t.trim()?i(a.slug):null!==(n=a.name)&&void 0!==n&&n.trim()?i(a.name):"";return s?{slug:s,name:(null===(o=a.name)||void 0===o?void 0:o.trim())||c(s),imageUrl:(null===(r=a.imageUrl)||void 0===r?void 0:r.trim())||l(s)}:null}function s(e){return(null!=e?e:[]).map(a).filter(e=>null!==e)}function d(e){const t=null==e?void 0:e.trim();if(!t)return[];if(t.startsWith("["))try{const e=JSON.parse(t);return Array.isArray(e)?e.filter(e=>"string"==typeof e||"object"==typeof e&&null!==e):[]}catch{return[]}return t.split(",").map(e=>e.trim()).filter(Boolean)}const p="one-connect-button-styles",u="cubic-bezier(.2,.9,.25,1)",m="#CCFF00",h="#3FE3A5",b="#0A0C0B",f={buttonBackground:b,buttonForeground:"#FFFFFF",surface:"#FFFFFF",foreground:b,muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},w={buttonBackground:"#F2F5F3",buttonForeground:b,surface:"#101312",foreground:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"};const g=(e,t)=>{var n,r,i;!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 ${h};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;background:#FFFFFF}`,".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;color:${b}}`,`.owcb-chip.owcb-letter{font:600 10px ui-monospace,monospace;color:${b}}`,".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 c="dark"===t.theme?w:f,l=null!==(n=t.variant)&&void 0!==n?n:"default",a=null!==(r=t.label)&&void 0!==r?r:"Connect your apps",d=null!==(i=t.connectedLabel)&&void 0!==i?i:"Connected";let g="idle",v=!1;const x=o({...t.connect,onSuccess:()=>{var e,n;E("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;E("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)}}),y=document.createElement("button");y.type="button",y.className="block"===l?"owcb owcb-block":"owcb",y.addEventListener("click",()=>{"connecting"!==g&&(E("connecting"),x.open())});const C=()=>"connecting"===g?"Connecting…":"connected"===g?d:a,k=()=>{var e,n;const o="accent"===l,r="block"===l,i=r?c.surface:o?null!==(e=t.accentColor)&&void 0!==e?e:m:c.buttonBackground,a=r?c.foreground:o?b:c.buttonForeground,d=r?c.surface:i;y.style.background="connected"!==g||r?i:h,y.style.color="connected"!==g||r?a:b,y.style.boxShadow=r?`inset 0 0 0 1px ${c.line}`:"connected"===g?"none":o?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:m}38`:c.shadow,y.disabled="connecting"===g,y.innerHTML="";const p=function(e,t){var n;const o=s(e.platforms);if(0===o.length&&!e.moreCount)return null;const r=document.createElement("span");r.className="owcb-stack",r.setAttribute("aria-hidden","true");for(const e of o.slice(0,3)){const n=document.createElement("span");n.className="owcb-chip",n.title=e.name,n.style.boxShadow=`0 0 0 1.5px ${t}`;const o=document.createElement("img");o.alt="",o.src=e.imageUrl,o.addEventListener("error",()=>{o.remove(),n.classList.add("owcb-letter"),n.textContent=e.name.charAt(0).toUpperCase()}),n.appendChild(o),r.appendChild(n)}const i=(null!==(n=e.moreCount)&&void 0!==n?n:0)+Math.max(0,o.length-3);if(i>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.textContent=`+${i}`,r.appendChild(e)}return r}(t,d);if(r){const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent=C(),e.appendChild(n),"connecting"===g){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else p&&e.appendChild(p);if(y.appendChild(e),t.description&&"idle"===g){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=c.muted,e.textContent=t.description,y.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=c.muted,o.style.borderTop=`1px solid ${c.line}`,o.innerHTML=`<span style="font-size:11px;color:${c.muted}">Secured by</span><span style="display:inline-flex;color:${c.foreground}"><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:${c.foreground}">one</span>`,void y.appendChild(o)}if("connecting"===g){const e=document.createElement("span");e.className="owcb-spinner",y.appendChild(e)}else if("connected"===g){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",y.appendChild(e)}else p&&y.appendChild(p);const u=document.createElement("span");if(u.className="owcb-label",u.textContent=C(),y.appendChild(u),"idle"===g){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",y.appendChild(e)}},E=e=>{v||(g=e,k())};return k(),e.appendChild(y),{setState:E,destroy:()=>{v=!0,y.remove()}}};function v(){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,"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,r;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const i=this.getAttribute("authorize-url");if(!i)return;const c=this.getAttribute("more-count"),l=c?parseInt(c,10):NaN;this.handle=g(this,{connect:{authorizeUrl:i,appTheme:x(this,"app-theme",["light","dark"]),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}))}},label:null!==(t=this.getAttribute("label"))&&void 0!==t?t:void 0,variant:x(this,"variant",["default","accent","block"]),theme:x(this,"theme",["light","dark"]),platforms:d(this.getAttribute("platforms")),moreCount:Number.isFinite(l)?l:void 0,description:null!==(n=this.getAttribute("description"))&&void 0!==n?n:void 0,accentColor:null!==(o=this.getAttribute("accent-color"))&&void 0!==o?o:void 0,connectedLabel:null!==(r=this.getAttribute("connected-label"))&&void 0!==r?r: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)}}function x(e,t,n){const o=e.getAttribute(t);return o&&n.includes(o)?o:void 0}v(),exports.mountConnectButton=g,exports.normalizePlatform=a,exports.normalizePlatforms=s,exports.optionsFromProps=function(e,t=e){return{connect:{authorizeUrl:e.authorizeUrl,appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=t.onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var n;return null===(n=t.onError)||void 0===n?void 0:n.call(t,e)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}},exports.parsePlatformsAttribute=d,exports.propsIdentity=function(e){var t;return JSON.stringify([e.authorizeUrl,e.appTheme,e.label,e.variant,e.theme,null!==(t=e.platforms)&&void 0!==t?t:[],e.moreCount,e.description,e.accentColor,e.connectedLabel])},exports.registerConnectButton=v,exports.useOneConnect=o;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { useOneConnect } from "./useOneConnect";
 export { mountConnectButton, registerConnectButton } from "./button";
-export type { OneConnectProps, OneConnectHandle, OneConnectResult, ConnectButtonOptions, ConnectButtonPlatform, ConnectButtonHandle, } from "./types";
+export { optionsFromProps, propsIdentity, type ConnectButtonProps, type ConnectButtonCallbacks, } from "./wrapper-options";
+export { normalizePlatform, normalizePlatforms, parsePlatformsAttribute, } from "./platforms";
+export type { OneConnectOptions, OneConnectHandle, OneConnectReturn, OneConnectTheme, ConnectButtonOptions, ConnectButtonPlatform, ConnectButtonPlatformInput, ConnectButtonVariant, ConnectButtonState, ConnectButtonHandle, } from "./types";

package/dist/index.esm.js

@@ -1 +1 @@
-const e="one_connect",t="one_connect_message";let n=!1;const o=o=>{let i=!1;if("undefined"!=typeof window&&!n){const l=new URLSearchParams(window.location.search),r=l.get(e);if("success"===r||"error"===r){var c;n=!0;const s=null!==(c=l.get(t))&&void 0!==c?c:void 0,a=()=>{const n=new URLSearchParams(window.location.search);(n.has(e)||n.has(t))&&(n.delete(e),n.delete(t),window.history.replaceState(null,"",window.location.pathname+(n.toString()?`?${n.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!i){i=!0;try{var e,t;"success"===r?null===(e=o.onSuccess)||void 0===e||e.call(o):null===(t=o.onError)||void 0===t||t.call(o,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const e=new URL(o.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return o.appTheme&&(e.hash=`one_theme=${o.appTheme}`),e.toString()}catch{return o.authorize.url}})())},close:e=>{}}};function i(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-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";function u(e){const t=e.trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return t?`https://assets.withone.ai/connectors/${t}.svg`:""}const h=(e,t)=>{var n,i;!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 h="dark"===t.theme?s:r,m=null!==(n=t.variant)&&void 0!==n?n:"default",f=null!==(i=t.label)&&void 0!==i?i:"Connect your apps";let b="idle",w=!1;const g=o({...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)}}),v=document.createElement("button");v.type="button",v.className="block"===m?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==b&&"connected"!==b||(y("connecting"),g.open())});const x=()=>{var e,n,o;const i="accent"===m,c="block"===m,l=c?h.surface:i?null!==(e=t.accentColor)&&void 0!==e?e:a:h.btnBg,r=c?h.fg:i?p:h.btnFg,s=c?h.surface:l,w=p;v.style.background="connected"!==b||c?l:d,v.style.color="connected"!==b||c?r:p,v.style.boxShadow=c?`inset 0 0 0 1px ${h.line}`:"connected"===b?"none":i?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:a}38`:h.shadow,v.disabled="connecting"===b,v.innerHTML="";const g=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,3)){var r;const n=document.createElement("span");n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`;const o=()=>{n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p},i=null!==(r=e.imageUrl)&&void 0!==r?r:u(e.name);if(i){const e=document.createElement("img");e.alt="",e.src=i,e.addEventListener("error",()=>{e.remove(),o()}),n.appendChild(e)}else o();l.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.length-3);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}`,l.appendChild(e)}return l}(t,s,w);if(c){var x;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":f,e.appendChild(n),"connecting"===b){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(v.appendChild(e),t.description&&"idle"===b){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=h.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=h.muted,o.style.borderTop=`1px solid ${h.line}`,o.innerHTML=`<span style="font-size:11px;color:${h.muted}">Secured by</span><span style="display:inline-flex;color:${h.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:${h.fg}">one</span>`,void v.appendChild(o)}if("connecting"===b){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===b){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 g&&v.appendChild(g);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":f,v.appendChild(y),"idle"===b){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)}},y=e=>{w||(b=e,x())};return x(),e.appendChild(v),{setState:y,destroy:()=>{w=!0,g.close({keepResult:!0}),v.remove()}}};function m(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),i(this,"onSuccess",null),i(this,"onError",null),i(this,"onClose",null),i(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"),u=p?parseInt(p,10):void 0;this.handle=h(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(u)?u: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})}}i(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}m();export{h as mountConnectButton,m as registerConnectButton,o as useOneConnect};
+const e="one_connect",t="one_connect_message";let n=!1;const o=o=>{if("undefined"!=typeof window&&!n){const r=function(n){var o;const r=new URLSearchParams(n),i=r.get(e);if("success"!==i&&"error"!==i)return null;const c=null!==(o=r.get(t))&&void 0!==o?o:void 0;return c?{status:i,message:c}:{status:i}}(window.location.search);if(r){n=!0;const i=()=>{(function(n){const o=new URLSearchParams(n);return o.has(e)||o.has(t)})(window.location.search)&&window.history.replaceState(null,"",function(n){const o=new URLSearchParams(n.search);o.delete(e),o.delete(t);const r=o.toString();return`${n.pathname}${r?`?${r}`:""}${n.hash}`}(window.location))};i();for(const e of[50,500,2e3])window.setTimeout(i,e);window.setTimeout(()=>{try{var e,t,n;"success"===r.status?null===(e=o.onSuccess)||void 0===e||e.call(o):null===(t=o.onError)||void 0===t||t.call(o,null!==(n=r.message)&&void 0!==n?n:"The connection was not completed.")}catch{}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const e=new URL(o.authorizeUrl,"undefined"==typeof window?void 0:window.location.origin);return o.appTheme&&(e.hash=`one_theme=${o.appTheme}`),e.toString()}catch{return o.authorizeUrl}})())}}};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}function i(e){return e.trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function c(e){return e.split(/[-_]+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" ")}function l(e){return e?`https://assets.withone.ai/connectors/${e}.svg`:""}function a(e){var t,n,o,r;const a="string"==typeof e?{slug:e}:e,s=null!==(t=a.slug)&&void 0!==t&&t.trim()?i(a.slug):null!==(n=a.name)&&void 0!==n&&n.trim()?i(a.name):"";return s?{slug:s,name:(null===(o=a.name)||void 0===o?void 0:o.trim())||c(s),imageUrl:(null===(r=a.imageUrl)||void 0===r?void 0:r.trim())||l(s)}:null}function s(e){return(null!=e?e:[]).map(a).filter(e=>null!==e)}function d(e){const t=null==e?void 0:e.trim();if(!t)return[];if(t.startsWith("["))try{const e=JSON.parse(t);return Array.isArray(e)?e.filter(e=>"string"==typeof e||"object"==typeof e&&null!==e):[]}catch{return[]}return t.split(",").map(e=>e.trim()).filter(Boolean)}const u="one-connect-button-styles",p="cubic-bezier(.2,.9,.25,1)",m="#CCFF00",h="#3FE3A5",b="#0A0C0B",f={buttonBackground:b,buttonForeground:"#FFFFFF",surface:"#FFFFFF",foreground:b,muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},w={buttonBackground:"#F2F5F3",buttonForeground:b,surface:"#101312",foreground:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"};const g=(e,t)=>{var n,r,i;!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 ${p},box-shadow .2s ${p},opacity .2s ${p}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${h};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 ${p};position:relative;background:#FFFFFF}`,".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;color:${b}}`,`.owcb-chip.owcb-letter{font:600 10px ui-monospace,monospace;color:${b}}`,".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 ${p},opacity .2s ${p}}`,".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 c="dark"===t.theme?w:f,l=null!==(n=t.variant)&&void 0!==n?n:"default",a=null!==(r=t.label)&&void 0!==r?r:"Connect your apps",d=null!==(i=t.connectedLabel)&&void 0!==i?i:"Connected";let g="idle",v=!1;const x=o({...t.connect,onSuccess:()=>{var e,n;E("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;E("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)}}),y=document.createElement("button");y.type="button",y.className="block"===l?"owcb owcb-block":"owcb",y.addEventListener("click",()=>{"connecting"!==g&&(E("connecting"),x.open())});const C=()=>"connecting"===g?"Connecting…":"connected"===g?d:a,k=()=>{var e,n;const o="accent"===l,r="block"===l,i=r?c.surface:o?null!==(e=t.accentColor)&&void 0!==e?e:m:c.buttonBackground,a=r?c.foreground:o?b:c.buttonForeground,d=r?c.surface:i;y.style.background="connected"!==g||r?i:h,y.style.color="connected"!==g||r?a:b,y.style.boxShadow=r?`inset 0 0 0 1px ${c.line}`:"connected"===g?"none":o?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:m}38`:c.shadow,y.disabled="connecting"===g,y.innerHTML="";const u=function(e,t){var n;const o=s(e.platforms);if(0===o.length&&!e.moreCount)return null;const r=document.createElement("span");r.className="owcb-stack",r.setAttribute("aria-hidden","true");for(const e of o.slice(0,3)){const n=document.createElement("span");n.className="owcb-chip",n.title=e.name,n.style.boxShadow=`0 0 0 1.5px ${t}`;const o=document.createElement("img");o.alt="",o.src=e.imageUrl,o.addEventListener("error",()=>{o.remove(),n.classList.add("owcb-letter"),n.textContent=e.name.charAt(0).toUpperCase()}),n.appendChild(o),r.appendChild(n)}const i=(null!==(n=e.moreCount)&&void 0!==n?n:0)+Math.max(0,o.length-3);if(i>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.textContent=`+${i}`,r.appendChild(e)}return r}(t,d);if(r){const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent=C(),e.appendChild(n),"connecting"===g){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else u&&e.appendChild(u);if(y.appendChild(e),t.description&&"idle"===g){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=c.muted,e.textContent=t.description,y.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=c.muted,o.style.borderTop=`1px solid ${c.line}`,o.innerHTML=`<span style="font-size:11px;color:${c.muted}">Secured by</span><span style="display:inline-flex;color:${c.foreground}"><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:${c.foreground}">one</span>`,void y.appendChild(o)}if("connecting"===g){const e=document.createElement("span");e.className="owcb-spinner",y.appendChild(e)}else if("connected"===g){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",y.appendChild(e)}else u&&y.appendChild(u);const p=document.createElement("span");if(p.className="owcb-label",p.textContent=C(),y.appendChild(p),"idle"===g){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",y.appendChild(e)}},E=e=>{v||(g=e,k())};return k(),e.appendChild(y),{setState:E,destroy:()=>{v=!0,y.remove()}}};function v(){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,"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,r;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const i=this.getAttribute("authorize-url");if(!i)return;const c=this.getAttribute("more-count"),l=c?parseInt(c,10):NaN;this.handle=g(this,{connect:{authorizeUrl:i,appTheme:x(this,"app-theme",["light","dark"]),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}))}},label:null!==(t=this.getAttribute("label"))&&void 0!==t?t:void 0,variant:x(this,"variant",["default","accent","block"]),theme:x(this,"theme",["light","dark"]),platforms:d(this.getAttribute("platforms")),moreCount:Number.isFinite(l)?l:void 0,description:null!==(n=this.getAttribute("description"))&&void 0!==n?n:void 0,accentColor:null!==(o=this.getAttribute("accent-color"))&&void 0!==o?o:void 0,connectedLabel:null!==(r=this.getAttribute("connected-label"))&&void 0!==r?r: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)}}function x(e,t,n){const o=e.getAttribute(t);return o&&n.includes(o)?o:void 0}function y(e,t=e){return{connect:{authorizeUrl:e.authorizeUrl,appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=t.onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var n;return null===(n=t.onError)||void 0===n?void 0:n.call(t,e)}},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 C(e){var t;return JSON.stringify([e.authorizeUrl,e.appTheme,e.label,e.variant,e.theme,null!==(t=e.platforms)&&void 0!==t?t:[],e.moreCount,e.description,e.accentColor,e.connectedLabel])}v();export{g as mountConnectButton,a as normalizePlatform,s as normalizePlatforms,y as optionsFromProps,d as parsePlatformsAttribute,C as propsIdentity,v as registerConnectButton,o as useOneConnect};

package/dist/next.cjs.js

@@ -0,0 +1,104 @@
+'use strict';
+
+/**
+ * `@withone/connect/next`: the two routes as one file, for any server
+ * that speaks the web `Request` and `Response` (Next.js App Router,
+ * Remix, SvelteKit, Nuxt/h3 via its adapters, Hono, Bun).
+ *
+ *   // app/api/one/[action]/route.ts
+ *   import { createOneConnectRoutes } from "@withone/connect/next";
+ *   import { oneConnect } from "@/lib/one";
+ *
+ *   export const { GET } = createOneConnectRoutes(oneConnect, {
+ *     identifyUser: async (request) => getSessionUserId(request),
+ *   });
+ *
+ * That serves /api/one/authorize and /api/one/callback. Register
+ * `https://yourapp.com/api/one/callback` as the app's redirect URI.
+ */
+
+const AUTHORIZE_ROUTE = "authorize";
+const CALLBACK_ROUTE = "callback";
+function redirectWithCookies(location, setCookies) {
+  const headers = new Headers({
+    Location: location
+  });
+  for (const cookie of setCookies) headers.append("Set-Cookie", cookie);
+  return new Response(null, {
+    status: 302,
+    headers
+  });
+}
+function serializeCookie(name, value, options) {
+  const parts = [`${name}=${encodeURIComponent(value)}`, `Path=${options.path}`, `Max-Age=${options.maxAge}`, `SameSite=Lax`];
+  if (options.httpOnly) parts.push("HttpOnly");
+  if (options.secure) parts.push("Secure");
+  return parts.join("; ");
+}
+function expireCookie(name, path) {
+  return `${name}=; Path=${path}; Max-Age=0; SameSite=Lax; HttpOnly`;
+}
+function readCookie(request, name) {
+  const header = request.headers.get("cookie");
+  if (!header) return undefined;
+  for (const part of header.split(";")) {
+    const [rawName, ...rest] = part.trim().split("=");
+    if (rawName === name) return decodeURIComponent(rest.join("="));
+  }
+  return undefined;
+}
+
+/** The last path segment names the leg: ".../authorize" or ".../callback". */
+function routeFor(url) {
+  const pathname = new URL(url).pathname.replace(/\/+$/, "");
+  return pathname.slice(pathname.lastIndexOf("/") + 1);
+}
+function createOneConnectRoutes(oneConnect, options) {
+  const cookiePath = () => oneConnect.startAuthorization().cookie.options.path;
+  const requireUser = async request => {
+    const userId = await options.identifyUser(request);
+    if (userId) return userId;
+    if (options.signInUrl) return redirectWithCookies(new URL(options.signInUrl, request.url).toString(), []);
+    return new Response("Sign in to your account before connecting One.", {
+      status: 401
+    });
+  };
+  const authorize = async request => {
+    const user = await requireUser(request);
+    if (user instanceof Response) return user;
+    const loginHint = (await options.loginHintFor?.(request)) ?? undefined;
+    const {
+      redirectUrl,
+      cookie
+    } = oneConnect.startAuthorization({
+      loginHint
+    });
+    return redirectWithCookies(redirectUrl, [serializeCookie(cookie.name, cookie.value, cookie.options)]);
+  };
+  const callback = async request => {
+    const user = await requireUser(request);
+    if (user instanceof Response) return user;
+    const result = await oneConnect.completeAuthorization({
+      userId: user,
+      url: request.url,
+      getCookie: name => readCookie(request, name)
+    });
+    return redirectWithCookies(result.redirectUrl, result.clearCookieName ? [expireCookie(result.clearCookieName, cookiePath())] : []);
+  };
+  return {
+    GET: async request => {
+      const route = routeFor(request.url);
+      if (route === AUTHORIZE_ROUTE) return authorize(request);
+      if (route === CALLBACK_ROUTE) return callback(request);
+      return new Response("Not found", {
+        status: 404
+      });
+    }
+  };
+}
+
+exports.AUTHORIZE_ROUTE = AUTHORIZE_ROUTE;
+exports.CALLBACK_ROUTE = CALLBACK_ROUTE;
+exports.createOneConnectRoutes = createOneConnectRoutes;
+exports.readCookie = readCookie;
+exports.routeFor = routeFor;

package/dist/next.d.ts

@@ -0,0 +1,36 @@
+/**
+ * `@withone/connect/next`: the two routes as one file, for any server
+ * that speaks the web `Request` and `Response` (Next.js App Router,
+ * Remix, SvelteKit, Nuxt/h3 via its adapters, Hono, Bun).
+ *
+ *   // app/api/one/[action]/route.ts
+ *   import { createOneConnectRoutes } from "@withone/connect/next";
+ *   import { oneConnect } from "@/lib/one";
+ *
+ *   export const { GET } = createOneConnectRoutes(oneConnect, {
+ *     identifyUser: async (request) => getSessionUserId(request),
+ *   });
+ *
+ * That serves /api/one/authorize and /api/one/callback. Register
+ * `https://yourapp.com/api/one/callback` as the app's redirect URI.
+ */
+import type { OneConnect } from "./server";
+export interface OneConnectRoutesOptions {
+    /** The app's own id for the signed-in user, or null when nobody is
+     *  signed in. The grant is stored under this id. */
+    identifyUser: (request: Request) => Promise<string | null> | string | null;
+    /** Pre-fills the sign-in email on One's page for this user. */
+    loginHintFor?: (request: Request) => Promise<string | null> | string | null;
+    /** Where to send the browser when nobody is signed in. Answers 401
+     *  when omitted. */
+    signInUrl?: string;
+}
+export interface OneConnectRoutes {
+    GET: (request: Request) => Promise<Response>;
+}
+export declare const AUTHORIZE_ROUTE = "authorize";
+export declare const CALLBACK_ROUTE = "callback";
+export declare function readCookie(request: Request, name: string): string | undefined;
+/** The last path segment names the leg: ".../authorize" or ".../callback". */
+export declare function routeFor(url: string): string;
+export declare function createOneConnectRoutes(oneConnect: OneConnect, options: OneConnectRoutesOptions): OneConnectRoutes;

package/dist/next.esm.js

@@ -0,0 +1,98 @@
+/**
+ * `@withone/connect/next`: the two routes as one file, for any server
+ * that speaks the web `Request` and `Response` (Next.js App Router,
+ * Remix, SvelteKit, Nuxt/h3 via its adapters, Hono, Bun).
+ *
+ *   // app/api/one/[action]/route.ts
+ *   import { createOneConnectRoutes } from "@withone/connect/next";
+ *   import { oneConnect } from "@/lib/one";
+ *
+ *   export const { GET } = createOneConnectRoutes(oneConnect, {
+ *     identifyUser: async (request) => getSessionUserId(request),
+ *   });
+ *
+ * That serves /api/one/authorize and /api/one/callback. Register
+ * `https://yourapp.com/api/one/callback` as the app's redirect URI.
+ */
+
+const AUTHORIZE_ROUTE = "authorize";
+const CALLBACK_ROUTE = "callback";
+function redirectWithCookies(location, setCookies) {
+  const headers = new Headers({
+    Location: location
+  });
+  for (const cookie of setCookies) headers.append("Set-Cookie", cookie);
+  return new Response(null, {
+    status: 302,
+    headers
+  });
+}
+function serializeCookie(name, value, options) {
+  const parts = [`${name}=${encodeURIComponent(value)}`, `Path=${options.path}`, `Max-Age=${options.maxAge}`, `SameSite=Lax`];
+  if (options.httpOnly) parts.push("HttpOnly");
+  if (options.secure) parts.push("Secure");
+  return parts.join("; ");
+}
+function expireCookie(name, path) {
+  return `${name}=; Path=${path}; Max-Age=0; SameSite=Lax; HttpOnly`;
+}
+function readCookie(request, name) {
+  const header = request.headers.get("cookie");
+  if (!header) return undefined;
+  for (const part of header.split(";")) {
+    const [rawName, ...rest] = part.trim().split("=");
+    if (rawName === name) return decodeURIComponent(rest.join("="));
+  }
+  return undefined;
+}
+
+/** The last path segment names the leg: ".../authorize" or ".../callback". */
+function routeFor(url) {
+  const pathname = new URL(url).pathname.replace(/\/+$/, "");
+  return pathname.slice(pathname.lastIndexOf("/") + 1);
+}
+function createOneConnectRoutes(oneConnect, options) {
+  const cookiePath = () => oneConnect.startAuthorization().cookie.options.path;
+  const requireUser = async request => {
+    const userId = await options.identifyUser(request);
+    if (userId) return userId;
+    if (options.signInUrl) return redirectWithCookies(new URL(options.signInUrl, request.url).toString(), []);
+    return new Response("Sign in to your account before connecting One.", {
+      status: 401
+    });
+  };
+  const authorize = async request => {
+    const user = await requireUser(request);
+    if (user instanceof Response) return user;
+    const loginHint = (await options.loginHintFor?.(request)) ?? undefined;
+    const {
+      redirectUrl,
+      cookie
+    } = oneConnect.startAuthorization({
+      loginHint
+    });
+    return redirectWithCookies(redirectUrl, [serializeCookie(cookie.name, cookie.value, cookie.options)]);
+  };
+  const callback = async request => {
+    const user = await requireUser(request);
+    if (user instanceof Response) return user;
+    const result = await oneConnect.completeAuthorization({
+      userId: user,
+      url: request.url,
+      getCookie: name => readCookie(request, name)
+    });
+    return redirectWithCookies(result.redirectUrl, result.clearCookieName ? [expireCookie(result.clearCookieName, cookiePath())] : []);
+  };
+  return {
+    GET: async request => {
+      const route = routeFor(request.url);
+      if (route === AUTHORIZE_ROUTE) return authorize(request);
+      if (route === CALLBACK_ROUTE) return callback(request);
+      return new Response("Not found", {
+        status: 404
+      });
+    }
+  };
+}
+
+export { AUTHORIZE_ROUTE, CALLBACK_ROUTE, createOneConnectRoutes, readCookie, routeFor };

package/dist/node.cjs.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var next = require('@withone/connect/next');
+
+/**
+ * `@withone/connect/node`: the two routes as handlers for Node's
+ * `http` request and response objects, which is what Express, Fastify
+ * (via `reply.raw`), Koa (via `ctx.req`/`ctx.res`) and plain
+ * `http.createServer` hand you.
+ *
+ *   import express from "express";
+ *   import { createOneConnectHandlers } from "@withone/connect/node";
+ *   import { oneConnect } from "./one";
+ *
+ *   const { authorize, callback } = createOneConnectHandlers(oneConnect, {
+ *     identifyUser: (request) => request.session?.userId ?? null,
+ *   });
+ *   app.get("/api/one/authorize", authorize);
+ *   app.get("/api/one/callback", callback);
+ */
+
+/** The incoming request as a web Request, so both adapters share one
+ *  implementation. */
+function toWebRequest(request) {
+  const protocol = request.headers["x-forwarded-proto"]?.toString().split(",")[0] ?? (request.socket.encrypted ? "https" : "http");
+  const host = request.headers["x-forwarded-host"] ?? request.headers.host ?? "localhost";
+  const headers = new Headers();
+  for (const [name, value] of Object.entries(request.headers)) {
+    if (typeof value === "string") headers.set(name, value);else if (Array.isArray(value)) headers.set(name, value.join(", "));
+  }
+  return new Request(`${protocol}://${host}${request.url ?? "/"}`, {
+    method: request.method ?? "GET",
+    headers
+  });
+}
+async function send(response, web) {
+  const setCookies = typeof web.headers.getSetCookie === "function" ? web.headers.getSetCookie() : [];
+  web.headers.forEach((value, name) => {
+    if (name.toLowerCase() !== "set-cookie") response.setHeader(name, value);
+  });
+  if (setCookies.length > 0) response.setHeader("Set-Cookie", setCookies);
+  response.statusCode = web.status;
+  response.end(await web.text());
+}
+function createOneConnectHandlers(oneConnect, options) {
+  // The web adapter receives a Request; the Node callbacks want the
+  // original IncomingMessage, so it is carried alongside by closure.
+  let current = null;
+  const routeOptions = {
+    identifyUser: () => options.identifyUser(current),
+    loginHintFor: options.loginHintFor ? () => options.loginHintFor(current) : undefined,
+    signInUrl: options.signInUrl
+  };
+  const routes = next.createOneConnectRoutes(oneConnect, routeOptions);
+  const handle = async (request, response) => {
+    current = request;
+    try {
+      await send(response, await routes.GET(toWebRequest(request)));
+    } finally {
+      current = null;
+    }
+  };
+  return {
+    authorize: handle,
+    callback: handle
+  };
+}
+
+exports.createOneConnectHandlers = createOneConnectHandlers;

package/dist/node.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `@withone/connect/node`: the two routes as handlers for Node's
+ * `http` request and response objects, which is what Express, Fastify
+ * (via `reply.raw`), Koa (via `ctx.req`/`ctx.res`) and plain
+ * `http.createServer` hand you.
+ *
+ *   import express from "express";
+ *   import { createOneConnectHandlers } from "@withone/connect/node";
+ *   import { oneConnect } from "./one";
+ *
+ *   const { authorize, callback } = createOneConnectHandlers(oneConnect, {
+ *     identifyUser: (request) => request.session?.userId ?? null,
+ *   });
+ *   app.get("/api/one/authorize", authorize);
+ *   app.get("/api/one/callback", callback);
+ */
+import type { IncomingMessage, ServerResponse } from "node:http";
+import type { OneConnect } from "./server";
+export interface OneConnectNodeOptions {
+    /** The app's own id for the signed-in user, or null when nobody is
+     *  signed in. */
+    identifyUser: (request: IncomingMessage) => Promise<string | null> | string | null;
+    /** Pre-fills the sign-in email on One's page for this user. */
+    loginHintFor?: (request: IncomingMessage) => Promise<string | null> | string | null;
+    /** Where to send the browser when nobody is signed in. */
+    signInUrl?: string;
+}
+export type NodeHandler = (request: IncomingMessage, response: ServerResponse) => Promise<void>;
+export interface OneConnectHandlers {
+    authorize: NodeHandler;
+    callback: NodeHandler;
+}
+export declare function createOneConnectHandlers(oneConnect: OneConnect, options: OneConnectNodeOptions): OneConnectHandlers;

package/dist/node.esm.js

@@ -0,0 +1,67 @@
+import { createOneConnectRoutes } from '@withone/connect/next';
+
+/**
+ * `@withone/connect/node`: the two routes as handlers for Node's
+ * `http` request and response objects, which is what Express, Fastify
+ * (via `reply.raw`), Koa (via `ctx.req`/`ctx.res`) and plain
+ * `http.createServer` hand you.
+ *
+ *   import express from "express";
+ *   import { createOneConnectHandlers } from "@withone/connect/node";
+ *   import { oneConnect } from "./one";
+ *
+ *   const { authorize, callback } = createOneConnectHandlers(oneConnect, {
+ *     identifyUser: (request) => request.session?.userId ?? null,
+ *   });
+ *   app.get("/api/one/authorize", authorize);
+ *   app.get("/api/one/callback", callback);
+ */
+
+/** The incoming request as a web Request, so both adapters share one
+ *  implementation. */
+function toWebRequest(request) {
+  const protocol = request.headers["x-forwarded-proto"]?.toString().split(",")[0] ?? (request.socket.encrypted ? "https" : "http");
+  const host = request.headers["x-forwarded-host"] ?? request.headers.host ?? "localhost";
+  const headers = new Headers();
+  for (const [name, value] of Object.entries(request.headers)) {
+    if (typeof value === "string") headers.set(name, value);else if (Array.isArray(value)) headers.set(name, value.join(", "));
+  }
+  return new Request(`${protocol}://${host}${request.url ?? "/"}`, {
+    method: request.method ?? "GET",
+    headers
+  });
+}
+async function send(response, web) {
+  const setCookies = typeof web.headers.getSetCookie === "function" ? web.headers.getSetCookie() : [];
+  web.headers.forEach((value, name) => {
+    if (name.toLowerCase() !== "set-cookie") response.setHeader(name, value);
+  });
+  if (setCookies.length > 0) response.setHeader("Set-Cookie", setCookies);
+  response.statusCode = web.status;
+  response.end(await web.text());
+}
+function createOneConnectHandlers(oneConnect, options) {
+  // The web adapter receives a Request; the Node callbacks want the
+  // original IncomingMessage, so it is carried alongside by closure.
+  let current = null;
+  const routeOptions = {
+    identifyUser: () => options.identifyUser(current),
+    loginHintFor: options.loginHintFor ? () => options.loginHintFor(current) : undefined,
+    signInUrl: options.signInUrl
+  };
+  const routes = createOneConnectRoutes(oneConnect, routeOptions);
+  const handle = async (request, response) => {
+    current = request;
+    try {
+      await send(response, await routes.GET(toWebRequest(request)));
+    } finally {
+      current = null;
+    }
+  };
+  return {
+    authorize: handle,
+    callback: handle
+  };
+}
+
+export { createOneConnectHandlers };

package/dist/platforms.d.ts

@@ -0,0 +1,21 @@
+import type { ConnectButtonPlatform, ConnectButtonPlatformInput } from "./types";
+/** "Google Calendar" -> "google-calendar". */
+export declare function slugFromName(name: string): string;
+/** "google-calendar" -> "Google Calendar". */
+export declare function nameFromSlug(slug: string): string;
+/** One's logo for a connector slug. */
+export declare function logoUrlForSlug(slug: string): string;
+/**
+ * Turns whatever the developer passed into what the button draws. A bare
+ * string is a slug; an object may carry any of slug, name and imageUrl.
+ * Entries with neither a slug nor a name are dropped rather than drawn
+ * as an empty chip.
+ */
+export declare function normalizePlatform(input: ConnectButtonPlatformInput): ConnectButtonPlatform | null;
+export declare function normalizePlatforms(inputs: ConnectButtonPlatformInput[] | undefined): ConnectButtonPlatform[];
+/**
+ * The `platforms` attribute on <one-connect-button>: a comma list of
+ * slugs ("stripe, notion") or, for overrides, a JSON array of
+ * {slug, name, imageUrl} objects.
+ */
+export declare function parsePlatformsAttribute(raw: string | null): ConnectButtonPlatformInput[];

package/dist/react.cjs.js

@@ -1 +1 @@
-"use strict";var e=require("react");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 c=new URLSearchParams(window.location.search),l=c.get(n);if("success"===l||"error"===l){var r;i=!0;const s=null!==(r=c.get(o))&&void 0!==r?r:void 0,a=()=>{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))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!t){t=!0;try{var n,o;"success"===l?null===(n=e.onSuccess)||void 0===n||n.call(e):null===(o=e.onError)||void 0===o||o.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)",s={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)"},a={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",u="#3FE3A5",p="#0A0C0B";function h(e){const t=e.trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return t?`https://assets.withone.ai/connectors/${t}.svg`:""}const m=(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 ${u};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 i="dark"===t.theme?a:s,m=null!==(n=t.variant)&&void 0!==n?n:"default",f=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let b="idle",w=!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)}}),g=document.createElement("button");g.type="button",g.className="block"===m?"owcb owcb-block":"owcb",g.addEventListener("click",()=>{"idle"!==b&&"connected"!==b||(y("connecting"),v.open())});const x=()=>{var e,n,o;const r="accent"===m,c="block"===m,l=c?i.surface:r?null!==(e=t.accentColor)&&void 0!==e?e:d:i.btnBg,s=c?i.fg:r?p:i.btnFg,a=c?i.surface:l,w=p;g.style.background="connected"!==b||c?l:u,g.style.color="connected"!==b||c?s:p,g.style.boxShadow=c?`inset 0 0 0 1px ${i.line}`:"connected"===b?"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,g.disabled="connecting"===b,g.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 c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,3)){var l;const n=document.createElement("span");n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`;const o=()=>{n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p},i=null!==(l=e.imageUrl)&&void 0!==l?l:h(e.name);if(i){const e=document.createElement("img");e.alt="",e.src=i,e.addEventListener("error",()=>{e.remove(),o()}),n.appendChild(e)}else o();c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-3);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,a,w);if(c){var x;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":f,e.appendChild(n),"connecting"===b){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else v&&e.appendChild(v);if(g.appendChild(e),t.description&&"idle"===b){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,g.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 g.appendChild(o)}if("connecting"===b){const e=document.createElement("span");e.className="owcb-spinner",g.appendChild(e)}else if("connected"===b){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",g.appendChild(e)}else v&&g.appendChild(v);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":f,g.appendChild(y),"idle"===b){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",g.appendChild(e)}},y=e=>{w||(b=e,x())};return x(),e.appendChild(g),{setState:y,destroy:()=>{w=!0,v.close({keepResult:!0}),g.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,c,l;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 u=this.getAttribute("more-count"),p=u?parseInt(u,10):void 0;this.handle=m(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(p)?p:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l: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)}}(),exports.ConnectButton=function(t){var n;const o=e.useRef(null),i=e.useRef(null),r=e.useRef({onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose});r.current={onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose};const c=JSON.stringify(null!==(n=t.platforms)&&void 0!==n?n:[]);return e.useEffect(()=>{if(!o.current)return;const e={connect:{authorize:{url:t.authorizeUrl},appTheme:t.appTheme,onSuccess:()=>{var e,t;return null===(e=(t=r.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=r.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=r.current).onClose)||void 0===e?void 0:e.call(t)}},label:t.label,variant:t.variant,theme:t.theme,platforms:t.platforms,moreCount:t.moreCount,description:t.description,accentColor:t.accentColor,connectedLabel:t.connectedLabel};return i.current=m(o.current,e),()=>{var e;null===(e=i.current)||void 0===e||e.destroy(),i.current=null}},[t.authorizeUrl,t.appTheme,t.label,t.variant,t.theme,c,t.moreCount,t.description,t.accentColor,t.connectedLabel]),e.createElement("div",{ref:o,className:t.className,style:t.style})};
+"use strict";var r=require("react"),e=require("@withone/connect");exports.ConnectButton=function(n){const o=r.useRef(null),t=r.useRef(null),c=r.useRef({onSuccess:n.onSuccess,onError:n.onError});c.current={onSuccess:n.onSuccess,onError:n.onError};const u=e.propsIdentity(n);return r.useEffect(()=>{if(o.current)return t.current=e.mountConnectButton(o.current,e.optionsFromProps(n,{onSuccess:()=>{var r,e;return null===(r=(e=c.current).onSuccess)||void 0===r?void 0:r.call(e)},onError:r=>{var e,n;return null===(e=(n=c.current).onError)||void 0===e?void 0:e.call(n,r)}})),()=>{var r;null===(r=t.current)||void 0===r||r.destroy(),t.current=null}},[u]),r.createElement("div",{ref:o,className:n.className,style:n.style})};