@withone/connect 0.1.2 → 0.3.0

package/README.md

@@ -145,6 +145,88 @@ export function ConnectWithOne() {
 | `open()` | Opens the Connect modal over the current page |
 | `close()` | Tears down the modal frame and its listeners |
 
+
+### Optional: the pre-built button
+
+Any element wired to `open()` works — the button is **optional**. It
+ships as a custom element, `<one-connect-button>`, so the SAME tag
+works in React, Next, Vue, Svelte, or plain HTML — no refs, no mount
+calls. Importing the package registers it. It wires the whole flow
+itself and manages Connect → Connecting → Connected.
+
+```tsx
+// React / Next (any framework — same tag everywhere)
+import "@withone/connect";
+
+export function ConnectWithOne() {
+  return (
+    <one-connect-button
+      authorize-url="/api/one/authorize"
+      label="Connect your apps"
+      platforms='[{"name":"Stripe","imageUrl":"/icons/stripe.svg"},{"name":"PostHog","imageUrl":"/icons/posthog.svg"}]'
+      onSuccess={() => {/* tokens stored server-side — refresh app state */}}
+    />
+  );
+}
+```
+
+```html
+<!-- Plain HTML / any framework -->
+<one-connect-button
+  authorize-url="/api/one/authorize"
+  label="Connect your apps"
+></one-connect-button>
+<script>
+  document.querySelector("one-connect-button")
+    .addEventListener("success", () => location.reload());
+</script>
+```
+
+| Attribute | What it does |
+|---|---|
+| `authorize-url` | Your backend authorize route (required) |
+| `label` | Button text (default "Connect your apps") |
+| `variant` | `default` pill · `accent` brand pill · `block` consent card |
+| `theme` | `light` / `dark` — matches YOUR page |
+| `app-theme` | Theme for One's card |
+| `platforms` | JSON array of `{name, imageUrl}` — provider chips, fan on hover |
+| `more-count` | The `+N` chip (e.g. `274`) |
+| `description` | Sub-line on the `block` variant |
+| `accent-color` | Fill for the `accent` variant (lime fallback) |
+| `connected-label` | Label after success |
+
+Events: `success`, `error` (detail = message), `close` — or set the
+`onSuccess` / `onError` / `onClose` function props (React 19, Vue and
+Svelte set these naturally).
+
+TypeScript + React: add this once so JSX accepts the tag:
+
+```ts
+// one-connect-button.d.ts
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "one-connect-button": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & {
+        "authorize-url"?: string; "app-theme"?: string; label?: string;
+        variant?: string; theme?: string; platforms?: string;
+        "more-count"?: string; description?: string;
+        "accent-color"?: string; "connected-label"?: string;
+        onSuccess?: () => void; onError?: (e: string) => void;
+        onClose?: () => void;
+      };
+    }
+  }
+}
+export {};
+```
+
+Programmatic alternative: `mountConnectButton(container, options)`
+takes the same options as an object (plus `connect: {…useOneConnect
+props}`) and returns `{ setState, destroy }`.
+
 ## 3 · Backend — the authorize route
 
 Generates `state` (CSRF proof) and PKCE (proof that whoever redeems the code is this server), stashes both in an httpOnly cookie, and 302s the browser to One.

package/dist/button.d.ts

@@ -0,0 +1,18 @@
+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.
+ *
+ * Attributes: authorize-url (required), app-theme, label, variant,
+ * theme, platforms (JSON array of {name, imageUrl}), 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.
+ */
+export declare function registerConnectButton(): void;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { useOneConnect } from "./useOneConnect";
 export { completeOneConnect } from "./complete";
-export type { OneConnectProps, OneConnectHandle, OneConnectResult, } from "./types";
+export { mountConnectButton, registerConnectButton } from "./button";
+export type { OneConnectProps, OneConnectHandle, OneConnectResult, ConnectButtonOptions, ConnectButtonPlatform, ConnectButtonHandle, } from "./types";

package/dist/index.esm.js

@@ -1 +1 @@
-const e="@withone/connect:result",t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function r(){return document.getElementById(t)}const s=s=>{let a=null,c=!1;const d=()=>{"undefined"!=typeof window&&a&&(window.removeEventListener("message",a),a=null),n()},l=(e,t)=>{if(!c){c=!0,d(),"success"===e&&function(e){var t;i();const n="dark"===e,r=document.createElement("div");r.id=o,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 s=document.createElement("div");Object.assign(s.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=n?"#a1a1aa":"#6b7280",c=n?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",d=n?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",l=n?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 48px;border-radius:28px 28px 0 0;background:${c};border:1px solid ${d};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:#10b981;display:flex;align-items:center;justify-content:center;"><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></div><div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${n?"#fafafa":"#111114"};">Access granted</div><div style="font-size:13px;line-height:1.5;max-width:280px;color:${a};">Your tools are connected. You can pick up right where you left off.</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:${n?"#fafafa":"#111114"};color:${n?"#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:${l};border:1px solid ${d};border-top:0;"><span style="font-size:11px;color:${a};">Secured by</span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${n?"#fafafa":"#111114"};">one</span></div>`,r.appendChild(s),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const u=()=>{window.removeEventListener("keydown",p),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function p(e){"Escape"===e.key&&u()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",u);r.addEventListener("click",e=>{e.target===r&&u()}),window.addEventListener("keydown",p),null===(t=s.querySelector("[data-one-close]"))||void 0===t||t.focus()}(s.appTheme);try{var n,r;if("success"===e)null===(n=s.onSuccess)||void 0===n||n.call(s);else null===(r=s.onError)||void 0===r||r.call(s,null!=t?t:"The connection was not completed.")}catch{}}},u=t=>{const n=t.data;if(!n)return;const o=r();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||l(n.status,n.message);else{d();try{var i;null===(i=s.onClose)||void 0===i||i.call(s)}catch{}}},p=()=>{var e;const t=r();if(!t)return;let n,o;try{var i,s;n=null!==(i=null===(s=t.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const a=o.get("one_connect");"success"!==a&&"error"!==a||(t.style.visibility="hidden",l(a,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;c=!1,a=u,window.addEventListener("message",a);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const e=new URL(s.authorize.url);return s.appTheme&&(e.hash=`one_theme=${s.appTheme}`),e.toString()}catch{return s.authorize.url}})()).addEventListener("load",p)},close:()=>{i(),d()}}};function a(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1}export{a as completeOneConnect,s as useOneConnect};
+const e="@withone/connect:result",t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function r(){return document.getElementById(t)}const c=c=>{let s=null,l=!1;const a=()=>{"undefined"!=typeof window&&s&&(window.removeEventListener("message",s),s=null),n()},d=(e,t)=>{if(!l){l=!0,a(),"success"===e&&function(e){var t;i();const n="dark"===e,r=document.createElement("div");r.id=o,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 s=n?"#a1a1aa":"#6b7280",l=n?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",a=n?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",d=n?"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:16px;padding:40px 48px;border-radius:28px 28px 0 0;background:${l};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:${s};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:#10b981;display:flex;align-items:center;justify-content:center;"><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></div><div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${n?"#fafafa":"#111114"};">Access granted</div><div style="font-size:13px;line-height:1.5;max-width:280px;color:${s};">Your tools are connected. You can pick up right where you left off.</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:${n?"#fafafa":"#111114"};color:${n?"#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:${s};">Secured by</span><span style="display:inline-flex;color:${n?"#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:${n?"#fafafa":"#111114"};">one</span></div>`,r.appendChild(c),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const p=()=>{window.removeEventListener("keydown",u),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function u(e){"Escape"===e.key&&p()}for(const e of c.querySelectorAll("[data-one-close]"))e.addEventListener("click",p);r.addEventListener("click",e=>{e.target===r&&p()}),window.addEventListener("keydown",u),null===(t=c.querySelector("[data-one-close]"))||void 0===t||t.focus()}(c.appTheme);try{var n,r;if("success"===e)null===(n=c.onSuccess)||void 0===n||n.call(c);else null===(r=c.onError)||void 0===r||r.call(c,null!=t?t:"The connection was not completed.")}catch{}}},p=t=>{const n=t.data;if(!n)return;const o=r();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||d(n.status,n.message);else{a();try{var i;null===(i=c.onClose)||void 0===i||i.call(c)}catch{}}},u=()=>{var e;const t=r();if(!t)return;let n,o;try{var i,c;n=null!==(i=null===(c=t.contentWindow)||void 0===c?void 0:c.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const s=o.get("one_connect");"success"!==s&&"error"!==s||(t.style.visibility="hidden",d(s,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;l=!1,s=p,window.addEventListener("message",s);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const e=new URL(c.authorize.url);return c.appTheme&&(e.hash=`one_theme=${c.appTheme}`),e.toString()}catch{return c.authorize.url}})()).addEventListener("load",u)},close:()=>{i(),a()}}};function s(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1}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 a="one-connect-button-styles",d="cubic-bezier(.2,.9,.25,1)",p={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)"},u={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",h="#3FE3A5",m="#0A0C0B";const b=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(a))return;const e=document.createElement("style");e.id=a,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 ${d},box-shadow .2s ${d},opacity .2s ${d}}`,".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 ${d};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 ${d},opacity .2s ${d}}`,".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?u:p,r=null!==(n=t.variant)&&void 0!==n?n:"default",s=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",b=!1;const g=c({...t.connect,onSuccess:()=>{var e,n;v("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;v("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;v("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===r?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(v("connecting"),g.open())});const x=()=>{var e,n,o;const c="accent"===r,a="block"===r,d=a?i.surface:c?null!==(e=t.accentColor)&&void 0!==e?e:f:i.btnBg,p=a?i.fg:c?m:i.btnFg,u=a?i.surface:d,b=a?i.muted:p;w.style.background="connected"!==l||a?d:h,w.style.color="connected"!==l||a?p:m,w.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":c?`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"===l,w.innerHTML="";const g=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=m}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m;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,b);if(a){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"===l?"Connecting…":"connected"===l?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":s,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(w.appendChild(e),t.description&&"idle"===l){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"===l){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===l){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 g&&w.appendChild(g);const v=document.createElement("span");if(v.className="owcb-label",v.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":s,w.appendChild(v),"idle"===l){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)}},v=e=>{b||(l=e,x())};return x(),e.appendChild(w),{setState:v,destroy:()=>{b=!0,g.close(),w.remove()}}};function g(){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,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)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=b(this,{connect:{authorize:{url:l},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!==(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!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}l(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}g();export{s as completeOneConnect,b as mountConnectButton,g as registerConnectButton,c as useOneConnect};

package/dist/index.umd.js

@@ -1 +1 @@
-"use strict";const e="@withone/connect:result",t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function r(){return document.getElementById(t)}exports.completeOneConnect=function(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1},exports.useOneConnect=s=>{let a=null,c=!1;const d=()=>{"undefined"!=typeof window&&a&&(window.removeEventListener("message",a),a=null),n()},l=(e,t)=>{if(!c){c=!0,d(),"success"===e&&function(e){var t;i();const n="dark"===e,r=document.createElement("div");r.id=o,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 s=document.createElement("div");Object.assign(s.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=n?"#a1a1aa":"#6b7280",c=n?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",d=n?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",l=n?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 48px;border-radius:28px 28px 0 0;background:${c};border:1px solid ${d};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:#10b981;display:flex;align-items:center;justify-content:center;"><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></div><div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${n?"#fafafa":"#111114"};">Access granted</div><div style="font-size:13px;line-height:1.5;max-width:280px;color:${a};">Your tools are connected. You can pick up right where you left off.</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:${n?"#fafafa":"#111114"};color:${n?"#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:${l};border:1px solid ${d};border-top:0;"><span style="font-size:11px;color:${a};">Secured by</span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${n?"#fafafa":"#111114"};">one</span></div>`,r.appendChild(s),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const u=()=>{window.removeEventListener("keydown",p),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function p(e){"Escape"===e.key&&u()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",u);r.addEventListener("click",e=>{e.target===r&&u()}),window.addEventListener("keydown",p),null===(t=s.querySelector("[data-one-close]"))||void 0===t||t.focus()}(s.appTheme);try{var n,r;if("success"===e)null===(n=s.onSuccess)||void 0===n||n.call(s);else null===(r=s.onError)||void 0===r||r.call(s,null!=t?t:"The connection was not completed.")}catch{}}},u=t=>{const n=t.data;if(!n)return;const o=r();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||l(n.status,n.message);else{d();try{var i;null===(i=s.onClose)||void 0===i||i.call(s)}catch{}}},p=()=>{var e;const t=r();if(!t)return;let n,o;try{var i,s;n=null!==(i=null===(s=t.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const a=o.get("one_connect");"success"!==a&&"error"!==a||(t.style.visibility="hidden",l(a,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;c=!1,a=u,window.addEventListener("message",a);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const e=new URL(s.authorize.url);return s.appTheme&&(e.hash=`one_theme=${s.appTheme}`),e.toString()}catch{return s.authorize.url}})()).addEventListener("load",p)},close:()=>{i(),d()}}};
+"use strict";const e="@withone/connect:result",t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function r(){return document.getElementById(t)}const c=c=>{let s=null,l=!1;const a=()=>{"undefined"!=typeof window&&s&&(window.removeEventListener("message",s),s=null),n()},d=(e,t)=>{if(!l){l=!0,a(),"success"===e&&function(e){var t;i();const n="dark"===e,r=document.createElement("div");r.id=o,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 s=n?"#a1a1aa":"#6b7280",l=n?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",a=n?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",d=n?"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:16px;padding:40px 48px;border-radius:28px 28px 0 0;background:${l};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:${s};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:#10b981;display:flex;align-items:center;justify-content:center;"><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></div><div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${n?"#fafafa":"#111114"};">Access granted</div><div style="font-size:13px;line-height:1.5;max-width:280px;color:${s};">Your tools are connected. You can pick up right where you left off.</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:${n?"#fafafa":"#111114"};color:${n?"#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:${s};">Secured by</span><span style="display:inline-flex;color:${n?"#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:${n?"#fafafa":"#111114"};">one</span></div>`,r.appendChild(c),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const p=()=>{window.removeEventListener("keydown",u),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function u(e){"Escape"===e.key&&p()}for(const e of c.querySelectorAll("[data-one-close]"))e.addEventListener("click",p);r.addEventListener("click",e=>{e.target===r&&p()}),window.addEventListener("keydown",u),null===(t=c.querySelector("[data-one-close]"))||void 0===t||t.focus()}(c.appTheme);try{var n,r;if("success"===e)null===(n=c.onSuccess)||void 0===n||n.call(c);else null===(r=c.onError)||void 0===r||r.call(c,null!=t?t:"The connection was not completed.")}catch{}}},p=t=>{const n=t.data;if(!n)return;const o=r();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||d(n.status,n.message);else{a();try{var i;null===(i=c.onClose)||void 0===i||i.call(c)}catch{}}},u=()=>{var e;const t=r();if(!t)return;let n,o;try{var i,c;n=null!==(i=null===(c=t.contentWindow)||void 0===c?void 0:c.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const s=o.get("one_connect");"success"!==s&&"error"!==s||(t.style.visibility="hidden",d(s,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;l=!1,s=p,window.addEventListener("message",s);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const e=new URL(c.authorize.url);return c.appTheme&&(e.hash=`one_theme=${c.appTheme}`),e.toString()}catch{return c.authorize.url}})()).addEventListener("load",u)},close:()=>{i(),a()}}};function s(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 l="one-connect-button-styles",a="cubic-bezier(.2,.9,.25,1)",d={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)"},p={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)"},u="#CCFF00",f="#3FE3A5",h="#0A0C0B";const m=(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 ${a},box-shadow .2s ${a},opacity .2s ${a}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${f};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 ${a};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 ${a},opacity .2s ${a}}`,".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?p:d,r=null!==(n=t.variant)&&void 0!==n?n:"default",s=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let m="idle",b=!1;const g=c({...t.connect,onSuccess:()=>{var e,n;v("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;v("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;v("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===r?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==m&&"connected"!==m||(v("connecting"),g.open())});const x=()=>{var e,n,o;const c="accent"===r,l="block"===r,a=l?i.surface:c?null!==(e=t.accentColor)&&void 0!==e?e:u:i.btnBg,d=l?i.fg:c?h:i.btnFg,p=l?i.surface:a,b=l?i.muted:d;w.style.background="connected"!==m||l?a:f,w.style.color="connected"!==m||l?d:h,w.style.boxShadow=l?`inset 0 0 0 1px ${i.line}`:"connected"===m?"none":c?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:u}38`:i.shadow,w.disabled="connecting"===m,w.innerHTML="";const g=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=h}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=h;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,p,b);if(l){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"===m?"Connecting…":"connected"===m?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":s,e.appendChild(n),"connecting"===m){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(w.appendChild(e),t.description&&"idle"===m){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"===m){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===m){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 g&&w.appendChild(g);const v=document.createElement("span");if(v.className="owcb-label",v.textContent="connecting"===m?"Connecting…":"connected"===m?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":s,w.appendChild(v),"idle"===m){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)}},v=e=>{b||(m=e,x())};return x(),e.appendChild(w),{setState:v,destroy:()=>{b=!0,g.close(),w.remove()}}};function b(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),s(this,"onSuccess",null),s(this,"onError",null),s(this,"onClose",null),s(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;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)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=m(this,{connect:{authorize:{url:l},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!==(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!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}s(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}b(),exports.completeOneConnect=function(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1},exports.mountConnectButton=m,exports.registerConnectButton=b,exports.useOneConnect=c;

package/dist/types/index.d.ts

@@ -50,3 +50,47 @@ export interface OneConnectMessage {
   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 {
+  name: string;
+  imageUrl?: string;
+}
+
+export interface ConnectButtonOptions {
+  /** Everything useOneConnect takes — the button wires open() and the
+   *  Connecting/Connected states around your callbacks. */
+  connect: OneConnectProps;
+  /** "Connect your apps" unless overridden. */
+  label?: string;
+  /** 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). */
+  theme?: "light" | "dark";
+  /** Provider chips fanned on hover; first four render, the rest fold
+   *  into the +N chip together with moreCount. */
+  platforms?: ConnectButtonPlatform[];
+  /** Extra count for the +N chip (e.g. 274 for "the whole catalog"). */
+  moreCount?: number;
+  /** Sub-line on the block variant, shown while idle. */
+  description?: string;
+  /** accent variant fill; lime (#CCFF00) when omitted. */
+  accentColor?: string;
+  /** Label for the connected state ("4 apps connected"). */
+  connectedLabel?: string;
+}
+
+export interface ConnectButtonHandle {
+  /** Manually override the visual state. */
+  setState: (state: "idle" | "connecting" | "connected") => void;
+  /** Remove the button and tear down the flow wiring. */
+  destroy: () => void;
+}
+
+/** Registers the <one-connect-button> custom element (no-op on servers
+ *  and when already registered). Importing the package does this
+ *  automatically in browsers; calling it manually is only needed if a
+ *  bundler stripped module side effects. */
+export declare function registerConnectButton(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@withone/connect",
-  "version": "0.1.2",
+  "version": "0.3.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",

package/src/button.ts

@@ -0,0 +1,414 @@
+import { useOneConnect } from "./useOneConnect";
+import type {
+  ConnectButtonHandle,
+  ConnectButtonOptions,
+  OneConnectHandle,
+} from "./types";
+
+/**
+ * Optional pre-built trigger for the connect flow. Entirely opt-in —
+ * `useOneConnect` alone with any element the consumer likes remains
+ * fully supported. Framework-agnostic like the rest of the SDK: it
+ * renders real DOM into a container, so React/Vue/vanilla all mount it
+ * the same way. Zero dependencies, zero One URLs — provider icons are
+ * passed in by the consumer.
+ *
+ * The button owns the flow wiring: click opens the card, the label
+ * turns "Connecting…" while the card is up, and lands on a spring
+ * "Connected" state on success (Connect → Connecting → Connected; the
+ * verb never changes).
+ */
+
+const STYLE_ID = "one-connect-button-styles";
+const EASE = "cubic-bezier(.2,.9,.25,1)";
+
+interface Palette {
+  btnBg: string;
+  btnFg: string;
+  surface: string;
+  fg: string;
+  muted: string;
+  line: string;
+  shadow: string;
+}
+
+const LIGHT: Palette = {
+  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)",
+};
+
+const DARK: Palette = {
+  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)",
+};
+
+const LIME = "#CCFF00";
+const SPRING = "#3FE3A5";
+const CARBON = "#0A0C0B";
+
+/** The One ring mark — same glyph the card footer pairs with the
+ *  wordmark. Inline so the SDK stays free of One URLs. */
+const ONE_MARK_SVG =
+  '<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>';
+const ARROW_SVG =
+  '<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>';
+const TICK_SVG =
+  '<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>';
+
+function ensureStyles(): void {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID))
+    return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.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 ${EASE},box-shadow .2s ${EASE},opacity .2s ${EASE}}`,
+    ".owcb:hover{transform:translateY(-1px)}",
+    ".owcb:active{transform:translateY(0)}",
+    `.owcb:focus-visible{outline:2px solid ${SPRING};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 ${EASE};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 ${EASE},opacity .2s ${EASE}}`,
+    ".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(style);
+}
+
+function buildStack(
+  options: ConnectButtonOptions,
+  chipRing: string,
+  moreColor: string,
+): HTMLElement | null {
+  const platforms = options.platforms ?? [];
+  if (platforms.length === 0 && !options.moreCount) return null;
+  const stack = document.createElement("span");
+  stack.className = "owcb-stack";
+  stack.setAttribute("aria-hidden", "true");
+  for (const platform of platforms.slice(0, 4)) {
+    const chip = document.createElement("span");
+    chip.className = "owcb-chip";
+    chip.style.background = "#ffffff";
+    chip.style.boxShadow = `0 0 0 1.5px ${chipRing}`;
+    if (platform.imageUrl) {
+      const img = document.createElement("img");
+      img.alt = "";
+      img.src = platform.imageUrl;
+      img.addEventListener("error", () => {
+        img.style.display = "none";
+        chip.textContent = platform.name.charAt(0).toUpperCase();
+        chip.style.font = "600 10px ui-monospace,monospace";
+        chip.style.color = CARBON;
+      });
+      chip.appendChild(img);
+    } else {
+      chip.textContent = platform.name.charAt(0).toUpperCase();
+      chip.style.font = "600 10px ui-monospace,monospace";
+      chip.style.color = CARBON;
+    }
+    stack.appendChild(chip);
+  }
+  const extra =
+    (options.moreCount ?? 0) + Math.max(0, platforms.length - 4);
+  if (extra > 0) {
+    const more = document.createElement("span");
+    more.className = "owcb-chip owcb-more";
+    more.style.background = "#ffffff";
+    more.style.boxShadow = `0 0 0 1.5px ${chipRing}`;
+    more.style.color = moreColor;
+    more.textContent = `+${extra}`;
+    stack.appendChild(more);
+  }
+  return stack;
+}
+
+export const mountConnectButton = (
+  container: HTMLElement,
+  options: ConnectButtonOptions,
+): ConnectButtonHandle => {
+  ensureStyles();
+
+  const palette = options.theme === "dark" ? DARK : LIGHT;
+  const variant = options.variant ?? "default";
+  const label = options.label ?? "Connect your apps";
+
+  let state: "idle" | "connecting" | "connected" = "idle";
+  let destroyed = false;
+
+  const handle: OneConnectHandle = useOneConnect({
+    ...options.connect,
+    onSuccess: () => {
+      setState("connected");
+      options.connect.onSuccess?.();
+    },
+    onError: (error) => {
+      setState("idle");
+      options.connect.onError?.(error);
+    },
+    onClose: () => {
+      setState("idle");
+      options.connect.onClose?.();
+    },
+  });
+
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = variant === "block" ? "owcb owcb-block" : "owcb";
+  button.addEventListener("click", () => {
+    if (state !== "idle" && state !== "connected") return;
+    setState("connecting");
+    handle.open();
+  });
+
+  const paint = () => {
+    const accent = variant === "accent";
+    const block = variant === "block";
+    const bg = block
+      ? palette.surface
+      : accent
+        ? (options.accentColor ?? LIME)
+        : palette.btnBg;
+    const fg = block ? palette.fg : accent ? CARBON : palette.btnFg;
+    const chipRing = block ? palette.surface : bg;
+    const moreColor = block ? palette.muted : fg;
+
+    button.style.background = state === "connected" && !block ? SPRING : bg;
+    button.style.color = state === "connected" && !block ? CARBON : fg;
+    button.style.boxShadow = block
+      ? `inset 0 0 0 1px ${palette.line}`
+      : state === "connected"
+        ? "none"
+        : accent
+          ? `0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${(options.accentColor ?? LIME)}38`
+          : palette.shadow;
+    button.disabled = state === "connecting";
+    button.innerHTML = "";
+
+    const stack = buildStack(options, chipRing, moreColor);
+
+    if (block) {
+      const top = document.createElement("span");
+      top.className = "owcb-block-top";
+      const title = document.createElement("span");
+      title.className = "owcb-block-title";
+      title.textContent =
+        state === "connecting"
+          ? "Connecting…"
+          : state === "connected"
+            ? (options.connectedLabel ?? "Connected")
+            : label;
+      top.appendChild(title);
+      if (state === "connecting") {
+        const spinner = document.createElement("span");
+        spinner.className = "owcb-spinner";
+        top.appendChild(spinner);
+      } else if (stack) {
+        top.appendChild(stack);
+      }
+      button.appendChild(top);
+      if (options.description && state === "idle") {
+        const sub = document.createElement("span");
+        sub.className = "owcb-block-sub";
+        sub.style.color = palette.muted;
+        sub.textContent = options.description;
+        button.appendChild(sub);
+      }
+      // Mirrors the card/overlay footer strip: "Secured by" + ring mark
+      // + "one" wordmark, so the button and the surface it opens read as
+      // the same product.
+      const foot = document.createElement("span");
+      foot.className = "owcb-block-foot";
+      foot.style.color = palette.muted;
+      foot.style.borderTop = `1px solid ${palette.line}`;
+      foot.innerHTML =
+        `<span style="font-size:11px;color:${palette.muted}">Secured by</span>` +
+        `<span style="display:inline-flex;color:${palette.fg}">${ONE_MARK_SVG}</span>` +
+        `<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${palette.fg}">one</span>`;
+      button.appendChild(foot);
+      return;
+    }
+
+    if (state === "connecting") {
+      const spinner = document.createElement("span");
+      spinner.className = "owcb-spinner";
+      button.appendChild(spinner);
+    } else if (state === "connected") {
+      const tick = document.createElement("span");
+      tick.innerHTML = TICK_SVG;
+      tick.style.display = "inline-flex";
+      button.appendChild(tick);
+    } else if (stack) {
+      button.appendChild(stack);
+    }
+
+    const text = document.createElement("span");
+    text.className = "owcb-label";
+    text.textContent =
+      state === "connecting"
+        ? "Connecting…"
+        : state === "connected"
+          ? (options.connectedLabel ?? "Connected")
+          : label;
+    button.appendChild(text);
+
+    if (state === "idle") {
+      const arrow = document.createElement("span");
+      arrow.innerHTML = ARROW_SVG;
+      arrow.style.display = "inline-flex";
+      button.appendChild(arrow);
+    }
+  };
+
+  const setState = (next: "idle" | "connecting" | "connected") => {
+    if (destroyed) return;
+    state = next;
+    paint();
+  };
+
+  paint();
+  container.appendChild(button);
+
+  return {
+    setState,
+    destroy: () => {
+      destroyed = true;
+      handle.close();
+      button.remove();
+    },
+  };
+};
+
+/**
+ * <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.
+ *
+ * Attributes: authorize-url (required), app-theme, label, variant,
+ * theme, platforms (JSON array of {name, imageUrl}), 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.
+ */
+export function registerConnectButton(): void {
+  if (typeof window === "undefined" || typeof customElements === "undefined")
+    return;
+  if (customElements.get("one-connect-button")) return;
+
+  class OneConnectButtonElement extends HTMLElement {
+    static observedAttributes = [
+      "authorize-url",
+      "app-theme",
+      "label",
+      "variant",
+      "theme",
+      "platforms",
+      "more-count",
+      "description",
+      "accent-color",
+      "connected-label",
+    ];
+
+    onSuccess: (() => void) | null = null;
+    onError: ((error: string) => void) | null = null;
+    onClose: (() => void) | null = null;
+
+    private handle: ConnectButtonHandle | null = null;
+
+    connectedCallback(): void {
+      this.mount();
+    }
+
+    disconnectedCallback(): void {
+      this.handle?.destroy();
+      this.handle = null;
+    }
+
+    attributeChangedCallback(): void {
+      if (this.isConnected && this.handle) this.mount();
+    }
+
+    private mount(): void {
+      this.handle?.destroy();
+      this.handle = null;
+      const authorizeUrl = this.getAttribute("authorize-url");
+      if (!authorizeUrl) return; // nothing to wire yet
+
+      let platforms: ConnectButtonOptions["platforms"];
+      const rawPlatforms = this.getAttribute("platforms");
+      if (rawPlatforms) {
+        try {
+          const parsed = JSON.parse(rawPlatforms) as unknown;
+          if (Array.isArray(parsed)) platforms = parsed;
+        } catch {
+          /* malformed platforms JSON — render without chips */
+        }
+      }
+
+      const moreCountRaw = this.getAttribute("more-count");
+      const moreCount = moreCountRaw ? parseInt(moreCountRaw, 10) : undefined;
+
+      this.handle = mountConnectButton(this, {
+        connect: {
+          authorize: { url: authorizeUrl },
+          appTheme:
+            (this.getAttribute("app-theme") as "light" | "dark" | null) ??
+            undefined,
+          onSuccess: () => {
+            this.onSuccess?.();
+            this.dispatchEvent(new CustomEvent("success"));
+          },
+          onError: (error) => {
+            this.onError?.(error);
+            this.dispatchEvent(new CustomEvent("error", { detail: error }));
+          },
+          onClose: () => {
+            this.onClose?.();
+            this.dispatchEvent(new CustomEvent("close"));
+          },
+        },
+        label: this.getAttribute("label") ?? undefined,
+        variant:
+          (this.getAttribute("variant") as ConnectButtonOptions["variant"]) ??
+          undefined,
+        theme:
+          (this.getAttribute("theme") as "light" | "dark" | null) ?? undefined,
+        platforms,
+        moreCount: Number.isFinite(moreCount) ? moreCount : undefined,
+        description: this.getAttribute("description") ?? undefined,
+        accentColor: this.getAttribute("accent-color") ?? undefined,
+        connectedLabel: this.getAttribute("connected-label") ?? undefined,
+      });
+    }
+  }
+
+  customElements.define("one-connect-button", OneConnectButtonElement);
+}
+
+registerConnectButton();

package/src/index.ts

@@ -1,7 +1,11 @@
 export { useOneConnect } from "./useOneConnect";
 export { completeOneConnect } from "./complete";
+export { mountConnectButton, registerConnectButton } from "./button";
 export type {
   OneConnectProps,
   OneConnectHandle,
   OneConnectResult,
+  ConnectButtonOptions,
+  ConnectButtonPlatform,
+  ConnectButtonHandle,
 } from "./types";

package/src/types/index.d.ts

@@ -50,3 +50,47 @@ export interface OneConnectMessage {
   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 {
+  name: string;
+  imageUrl?: string;
+}
+
+export interface ConnectButtonOptions {
+  /** Everything useOneConnect takes — the button wires open() and the
+   *  Connecting/Connected states around your callbacks. */
+  connect: OneConnectProps;
+  /** "Connect your apps" unless overridden. */
+  label?: string;
+  /** 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). */
+  theme?: "light" | "dark";
+  /** Provider chips fanned on hover; first four render, the rest fold
+   *  into the +N chip together with moreCount. */
+  platforms?: ConnectButtonPlatform[];
+  /** Extra count for the +N chip (e.g. 274 for "the whole catalog"). */
+  moreCount?: number;
+  /** Sub-line on the block variant, shown while idle. */
+  description?: string;
+  /** accent variant fill; lime (#CCFF00) when omitted. */
+  accentColor?: string;
+  /** Label for the connected state ("4 apps connected"). */
+  connectedLabel?: string;
+}
+
+export interface ConnectButtonHandle {
+  /** Manually override the visual state. */
+  setState: (state: "idle" | "connecting" | "connected") => void;
+  /** Remove the button and tear down the flow wiring. */
+  destroy: () => void;
+}
+
+/** Registers the <one-connect-button> custom element (no-op on servers
+ *  and when already registered). Importing the package does this
+ *  automatically in browsers; calling it manually is only needed if a
+ *  bundler stripped module side effects. */
+export declare function registerConnectButton(): void;

package/src/window/index.ts

@@ -98,6 +98,7 @@ export function showSuccessOverlay(theme?: "dark" | "light"): void {
     "</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:${footerBg};border:1px solid ${cardBorder};border-top:0;">` +
     `<span style="font-size:11px;color:${muted};">Secured by</span>` +
+    `<span style="display:inline-flex;color:${dark ? "#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:${dark ? "#fafafa" : "#111114"};">one</span>` +
     "</div>";