@withone/connect 0.1.1 → 0.2.0

package/README.md

@@ -145,6 +145,57 @@ 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 below is **optional**.
+It ships in the same zero-dependency package, renders real DOM (so it
+mounts identically from React, Vue, or vanilla JS), and manages its own
+Connect → Connecting → Connected states by wrapping your callbacks.
+Provider icons are yours to supply — the SDK contains no One URLs.
+
+```tsx
+"use client";
+import { useEffect, useRef } from "react";
+import { mountConnectButton } from "@withone/connect";
+
+export function ConnectWithOne() {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const button = mountConnectButton(ref.current!, {
+      connect: {
+        authorize: { url: `${window.location.origin}/api/one/authorize` },
+        appTheme: "light",
+        onSuccess: () => {/* refresh your app state */},
+      },
+      label: "Connect your apps",
+      variant: "block",              // "default" | "accent" | "block"
+      theme: "light",                // matches YOUR page
+      platforms: [
+        { name: "Stripe", imageUrl: "/icons/stripe.svg" },
+        { name: "PostHog", imageUrl: "/icons/posthog.svg" },
+      ],
+      description:
+        "Bring your tools into this workspace. You pick what gets shared.",
+      connectedLabel: "Apps connected",
+    });
+    return () => button.destroy();
+  }, []);
+
+  return <div ref={ref} />;
+}
+```
+
+| Variant | Look |
+|---|---|
+| `default` | Neutral pill: provider chips (fan on hover), label, arrow |
+| `accent` | Same pill in your brand color (`accentColor`; lime fallback) |
+| `block` | Full-width consent card: title + chips, description, "Secured by One" foot |
+
+The returned handle has `setState("idle" | "connecting" | "connected")`
+for manual control and `destroy()` for teardown.
+
 ## 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,2 @@
+import type { ConnectButtonHandle, ConnectButtonOptions } from "./types";
+export declare const mountConnectButton: (container: HTMLElement, options: ConnectButtonOptions) => ConnectButtonHandle;

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 } 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%;max-width:320px;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 c(){return document.getElementById(t)}const r=r=>{let s=null,a=!1;const l=()=>{"undefined"!=typeof window&&s&&(window.removeEventListener("message",s),s=null),n()},d=(e,t)=>{if(!a){a=!0,l(),"success"===e&&function(e){var t;i();const n="dark"===e,c=document.createElement("div");c.id=o,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const r=document.createElement("div");Object.assign(r.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",a=n?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",l=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)";r.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:${a};border:1px solid ${l};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 ${l};border-top:0;"><span style="font-size:11px;color:${s};">Secured by</span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${n?"#fafafa":"#111114"};">one</span></div>`,c.appendChild(r),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const p=()=>{window.removeEventListener("keydown",u),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function u(e){"Escape"===e.key&&p()}for(const e of r.querySelectorAll("[data-one-close]"))e.addEventListener("click",p);c.addEventListener("click",e=>{e.target===c&&p()}),window.addEventListener("keydown",u),null===(t=r.querySelector("[data-one-close]"))||void 0===t||t.focus()}(r.appTheme);try{var n,c;if("success"===e)null===(n=r.onSuccess)||void 0===n||n.call(r);else null===(c=r.onError)||void 0===c||c.call(r,null!=t?t:"The connection was not completed.")}catch{}}},p=t=>{const n=t.data;if(!n)return;const o=c();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{l();try{var i;null===(i=r.onClose)||void 0===i||i.call(r)}catch{}}},u=()=>{var e;const t=c();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const 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;a=!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(r.authorize.url);return r.appTheme&&(e.hash=`one_theme=${r.appTheme}`),e.toString()}catch{return r.authorize.url}})()).addEventListener("load",u)},close:()=>{i(),l()}}};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}const a="one-connect-button-styles",l="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",m="#0A0C0B";const h=(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 ${l},box-shadow .2s ${l},opacity .2s ${l}}`,".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 ${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?p:d,c=null!==(n=t.variant)&&void 0!==n?n:"default",s=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let h="idle",b=!1;const g=r({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===c?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==h&&"connected"!==h||(y("connecting"),g.open())});const x=()=>{var e,n,o;const r="accent"===c,a="block"===c,l=a?i.surface:r?null!==(e=t.accentColor)&&void 0!==e?e:u:i.btnBg,d=a?i.fg:r?m:i.btnFg,p=a?i.surface:l,b=a?i.muted:d;w.style.background="connected"!==h||a?l:f,w.style.color="connected"!==h||a?d:m,w.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===h?"none":r?`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"===h,w.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 r=document.createElement("span");r.className="owcb-stack",r.setAttribute("aria-hidden","true");for(const e of c.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m;r.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.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}`,r.appendChild(e)}return r}(t,p,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"===h?"Connecting…":"connected"===h?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":s,e.appendChild(n),"connecting"===h){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(w.appendChild(e),t.description&&"idle"===h){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=`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;flex-shrink:0"><path d="M8 1.5l5 2v4c0 3-2.2 5.6-5 7-2.8-1.4-5-4-5-7v-4l5-2z"/></svg><span>Secured by <b style="color:${i.fg};font-weight:600">One</b></span>`,void w.appendChild(o)}if("connecting"===h){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===h){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 y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===h?"Connecting…":"connected"===h?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":s,w.appendChild(y),"idle"===h){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}},y=e=>{b||(h=e,x())};return x(),e.appendChild(w),{setState:y,destroy:()=>{b=!0,g.close(),w.remove()}}};export{s as completeOneConnect,h as mountConnectButton,r 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%;max-width:320px;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 c(){return document.getElementById(t)}const r=r=>{let s=null,a=!1;const l=()=>{"undefined"!=typeof window&&s&&(window.removeEventListener("message",s),s=null),n()},d=(e,t)=>{if(!a){a=!0,l(),"success"===e&&function(e){var t;i();const n="dark"===e,c=document.createElement("div");c.id=o,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const r=document.createElement("div");Object.assign(r.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",a=n?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",l=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)";r.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:${a};border:1px solid ${l};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 ${l};border-top:0;"><span style="font-size:11px;color:${s};">Secured by</span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${n?"#fafafa":"#111114"};">one</span></div>`,c.appendChild(r),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const p=()=>{window.removeEventListener("keydown",u),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function u(e){"Escape"===e.key&&p()}for(const e of r.querySelectorAll("[data-one-close]"))e.addEventListener("click",p);c.addEventListener("click",e=>{e.target===c&&p()}),window.addEventListener("keydown",u),null===(t=r.querySelector("[data-one-close]"))||void 0===t||t.focus()}(r.appTheme);try{var n,c;if("success"===e)null===(n=r.onSuccess)||void 0===n||n.call(r);else null===(c=r.onError)||void 0===c||c.call(r,null!=t?t:"The connection was not completed.")}catch{}}},p=t=>{const n=t.data;if(!n)return;const o=c();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{l();try{var i;null===(i=r.onClose)||void 0===i||i.call(r)}catch{}}},u=()=>{var e;const t=c();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const 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;a=!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(r.authorize.url);return r.appTheme&&(e.hash=`one_theme=${r.appTheme}`),e.toString()}catch{return r.authorize.url}})()).addEventListener("load",u)},close:()=>{i(),l()}}};const s="one-connect-button-styles",a="cubic-bezier(.2,.9,.25,1)",l={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)"},d={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)"},p="#CCFF00",u="#3FE3A5",f="#0A0C0B";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=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(s))return;const e=document.createElement("style");e.id=s,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 ${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 ${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?d:l,c=null!==(n=t.variant)&&void 0!==n?n:"default",m=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let h="idle",b=!1;const g=r({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===c?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==h&&"connected"!==h||(y("connecting"),g.open())});const x=()=>{var e,n,o;const r="accent"===c,s="block"===c,a=s?i.surface:r?null!==(e=t.accentColor)&&void 0!==e?e:p:i.btnBg,l=s?i.fg:r?f:i.btnFg,d=s?i.surface:a,b=s?i.muted:l;w.style.background="connected"!==h||s?a:u,w.style.color="connected"!==h||s?l:f,w.style.boxShadow=s?`inset 0 0 0 1px ${i.line}`:"connected"===h?"none":r?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:p}38`:i.shadow,w.disabled="connecting"===h,w.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 r=document.createElement("span");r.className="owcb-stack",r.setAttribute("aria-hidden","true");for(const e of c.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=f}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=f;r.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.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}`,r.appendChild(e)}return r}(t,d,b);if(s){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"===h?"Connecting…":"connected"===h?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":m,e.appendChild(n),"connecting"===h){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(w.appendChild(e),t.description&&"idle"===h){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=`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;flex-shrink:0"><path d="M8 1.5l5 2v4c0 3-2.2 5.6-5 7-2.8-1.4-5-4-5-7v-4l5-2z"/></svg><span>Secured by <b style="color:${i.fg};font-weight:600">One</b></span>`,void w.appendChild(o)}if("connecting"===h){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===h){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 y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===h?"Connecting…":"connected"===h?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":m,w.appendChild(y),"idle"===h){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}},y=e=>{b||(h=e,x())};return x(),e.appendChild(w),{setState:y,destroy:()=>{b=!0,g.close(),w.remove()}}},exports.useOneConnect=r;

package/dist/types/index.d.ts

@@ -50,3 +50,41 @@ 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@withone/connect",
-  "version": "0.1.1",
+  "version": "0.2.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,294 @@
+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";
+
+const SHIELD_SVG =
+  '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;flex-shrink:0"><path d="M8 1.5l5 2v4c0 3-2.2 5.6-5 7-2.8-1.4-5-4-5-7v-4l5-2z"/></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);
+      }
+      const foot = document.createElement("span");
+      foot.className = "owcb-block-foot";
+      foot.style.color = palette.muted;
+      foot.style.borderTop = `1px solid ${palette.line}`;
+      foot.innerHTML = `${SHIELD_SVG}<span>Secured by <b style="color:${palette.fg};font-weight:600">One</b></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();
+    },
+  };
+};

package/src/index.ts

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

package/src/types/index.d.ts

@@ -50,3 +50,41 @@ 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;
+}

package/src/window/index.ts

@@ -94,7 +94,7 @@ export function showSuccessOverlay(theme?: "dark" | "light"): void {
     "</div>" +
     `<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${dark ? "#fafafa" : "#111114"};">Access granted</div>` +
     `<div style="font-size:13px;line-height:1.5;max-width:280px;color:${muted};">Your tools are connected. You can pick up right where you left off.</div>` +
-    `<button data-one-close style="width:100%;max-width:320px;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${dark ? "#fafafa" : "#111114"};color:${dark ? "#111114" : "#fafafa"};">Close</button>` +
+    `<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:${dark ? "#fafafa" : "#111114"};color:${dark ? "#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:${footerBg};border:1px solid ${cardBorder};border-top:0;">` +
     `<span style="font-size:11px;color:${muted};">Secured by</span>` +