@withone/connect 0.8.3 → 0.9.0

package/dist/server/index.esm.js

@@ -0,0 +1,344 @@
+import { randomBytes, createHash } from 'node:crypto';
+
+/** Query params the app's callback route puts on its final redirect.
+ *  The SDK reads them off the page URL when the tab comes home, so
+ *  there is no completion page to build. */
+const RETURN_STATUS_PARAM = "one_connect";
+const RETURN_MESSAGE_PARAM = "one_connect_message";
+
+/** One's production API. Point `oneApiUrl` elsewhere for development. */
+const DEFAULT_ONE_API_URL = "https://api.withone.ai";
+
+/** One cookie per flow, named by its state, so a retry or a second tab
+ *  never overwrites the verifier of a flow still in progress. */
+const TX_COOKIE_PREFIX = "one_tx_";
+
+/** One gives the consent 10 minutes and then the code 10 minutes, so a
+ *  legitimate callback can arrive up to twenty minutes after the start.
+ *  Thirty minutes leaves a margin. */
+const TX_COOKIE_MAX_AGE_SECONDS = 1800;
+const DEFAULT_SCOPES = ["user:connections:read", "user:connections:write", "org:connections:read", "org:connections:write", "project:connections:read", "project:connections:write"];
+function createState() {
+  return randomBytes(16).toString("hex");
+}
+function createPkceVerifier() {
+  return randomBytes(32).toString("base64url");
+}
+function pkceChallenge(verifier) {
+  return createHash("sha256").update(verifier).digest("base64url");
+}
+function txCookieName(state) {
+  return `${TX_COOKIE_PREFIX}${state}`;
+}
+
+/** The cookie scoped to the routes that need it: the directory of the
+ *  callback path, which is also where the authorize route lives. */
+function txCookie(state, verifier, redirectUri) {
+  const url = new URL(redirectUri);
+  const path = url.pathname.replace(/\/[^/]*$/, "") || "/";
+  return {
+    name: txCookieName(state),
+    value: verifier,
+    options: {
+      httpOnly: true,
+      secure: url.protocol === "https:",
+      sameSite: "lax",
+      maxAge: TX_COOKIE_MAX_AGE_SECONDS,
+      path
+    }
+  };
+}
+function basicAuthorization(clientId, clientSecret) {
+  return `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString("base64")}`;
+}
+
+/** The tenant headers a grant needs on every call. A grant made into an
+ *  organization or project lives there; One resolves the tenant from
+ *  these headers, and without them the call runs in the user's personal
+ *  space. The access token's claims name the tenant, so echo them. */
+function tenancyHeaders(accessToken) {
+  try {
+    const payload = JSON.parse(Buffer.from(accessToken.split(".")[1], "base64url").toString());
+    const headers = {};
+    const organizationId = payload.organization_ids?.[0];
+    const projectId = payload.project_ids?.[0];
+    if (organizationId) headers["X-One-Organization-Id"] = organizationId;
+    if (projectId) headers["X-One-Project-Id"] = projectId;
+    return headers;
+  } catch {
+    return {};
+  }
+}
+
+/** The scopes the token was granted, from its claims. Display only. */
+function tokenScopes(accessToken) {
+  try {
+    const payload = JSON.parse(Buffer.from(accessToken.split(".")[1], "base64url").toString());
+    return (payload.scope ?? "").split(" ").filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Types for `@withone/connect/server`: the half of the SDK that runs on
+ * the app's server and holds the client secret.
+ */
+
+/** What the app stores per user after the exchange. */
+
+/**
+ * Where the app keeps each user's tokens: its database, a cache, an
+ * encrypted cookie. The SDK never sees a token outside these three
+ * calls. `userId` is the app's own id for its user.
+ */
+
+/** The transaction cookie the authorize leg sets and the callback reads. */
+
+/** One connection the grant reaches, with the access it confers. */
+
+/** One catalog action for a platform. */
+
+class OneConnectError extends Error {
+  constructor(code, message, status) {
+    super(message);
+    this.name = "OneConnectError";
+    this.code = code;
+    this.status = status;
+  }
+}
+
+/**
+ * `@withone/connect/server`: the half of One Connect that runs on the
+ * app's server. It starts the flow, completes it, keeps the tokens fresh
+ * and makes every call with the grant. The client secret never leaves
+ * here.
+ *
+ *   const oneConnect = createOneConnect({ clientId, clientSecret,
+ *     redirectUri, permissionSet, tokenStore });
+ *
+ *   // in the authorize route
+ *   const { redirectUrl, cookie } = oneConnect.startAuthorization({ loginHint });
+ *   // in the callback route
+ *   const result = await oneConnect.completeAuthorization({ userId, url, getCookie });
+ *   // afterwards
+ *   const rows = await oneConnect.listConnections(userId);
+ *   const reply = await oneConnect.runAction(userId, { connectionKey, actionId, method, path });
+ *
+ * The Next.js and Node adapters turn the first two into route handlers.
+ */
+
+/** Refresh this long before expiry, so a call never races the clock. */
+const REFRESH_MARGIN_MS = 60_000;
+const CATALOG_PAGE_SIZE = 100;
+const CATALOG_MAX_PAGES = 20;
+function createOneConnect(config) {
+  const oneApiUrl = (config.oneApiUrl ?? DEFAULT_ONE_API_URL).replace(/\/+$/, "");
+  const authorizeUrl = `${oneApiUrl}/oauth/authorize`;
+  const tokenUrl = `${oneApiUrl}/oauth/token`;
+  const apiUrl = `${oneApiUrl}/v1`;
+  const returnTo = config.returnTo ?? "/";
+  const scopes = config.scopes ?? DEFAULT_SCOPES;
+  const {
+    tokenStore
+  } = config;
+
+  /** One refresh in flight per user: two concurrent refreshes with the
+   *  same refresh token trip One's reuse detection. */
+  const refreshing = new Map();
+  const returnUrl = (status, message) => {
+    const url = new URL(returnTo, config.redirectUri);
+    url.searchParams.set(RETURN_STATUS_PARAM, status);
+    if (message) url.searchParams.set(RETURN_MESSAGE_PARAM, message);
+    return url.toString();
+  };
+  const exchange = async body => {
+    const response = await fetch(tokenUrl, {
+      method: "POST",
+      headers: {
+        Authorization: basicAuthorization(config.clientId, config.clientSecret),
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body
+    });
+    if (!response.ok) {
+      throw new OneConnectError("request_failed", `One refused the token request (HTTP ${response.status}).`, response.status);
+    }
+    return await response.json();
+  };
+  const toTokens = response => ({
+    accessToken: response.access_token,
+    refreshToken: response.refresh_token,
+    expiresAt: Date.now() + response.expires_in * 1000
+  });
+  const startAuthorization = (input = {}) => {
+    const state = createState();
+    const verifier = createPkceVerifier();
+    const url = new URL(authorizeUrl);
+    url.searchParams.set("client_id", config.clientId);
+    url.searchParams.set("redirect_uri", config.redirectUri);
+    url.searchParams.set("response_type", "code");
+    url.searchParams.set("scope", scopes.join(" "));
+    url.searchParams.set("state", state);
+    url.searchParams.set("code_challenge", pkceChallenge(verifier));
+    url.searchParams.set("code_challenge_method", "S256");
+    if (config.permissionSet) url.searchParams.set("permission_set", config.permissionSet);
+    if (input.loginHint) url.searchParams.set("login_hint", input.loginHint);
+    return {
+      redirectUrl: url.toString(),
+      cookie: txCookie(state, verifier, config.redirectUri)
+    };
+  };
+  const completeAuthorization = async input => {
+    const params = new URL(input.url).searchParams;
+    const code = params.get("code");
+    const state = params.get("state");
+    const oauthError = params.get("error");
+    const cookieName = state ? txCookieName(state) : undefined;
+    const verifier = cookieName ? input.getCookie(cookieName) : undefined;
+    const fail = (outcome, message) => ({
+      outcome,
+      message,
+      redirectUrl: returnUrl("error", message),
+      clearCookieName: cookieName
+    });
+    if (oauthError === "access_denied") return fail("declined", "You cancelled the request.");
+    if (oauthError) return fail("failed", `One reported an error: ${oauthError}.`);
+    // The returned state names its own cookie. No cookie means a forged
+    // or stale state; the code is never exchanged in that case.
+    if (!code || !state || !verifier) return fail("failed", "The sign-in attempt expired or was tampered with.");
+    try {
+      const tokens = toTokens(await exchange(new URLSearchParams({
+        grant_type: "authorization_code",
+        code,
+        redirect_uri: config.redirectUri,
+        code_verifier: verifier
+      })));
+      await tokenStore.saveTokens(input.userId, tokens);
+    } catch (error) {
+      const status = error instanceof OneConnectError ? error.status : undefined;
+      return fail("failed", status ? `One rejected the code exchange (HTTP ${status}).` : "One could not be reached to complete the connection.");
+    }
+    return {
+      outcome: "connected",
+      redirectUrl: returnUrl("success"),
+      clearCookieName: cookieName
+    };
+  };
+  const refreshTokens = userId => {
+    const inFlight = refreshing.get(userId);
+    if (inFlight) return inFlight;
+    const job = (async () => {
+      const current = await tokenStore.loadTokens(userId);
+      if (!current) throw new OneConnectError("not_connected", "This user is not connected.");
+      try {
+        const next = toTokens(await exchange(new URLSearchParams({
+          grant_type: "refresh_token",
+          refresh_token: current.refreshToken
+        })));
+        // Both tokens: One rotates the pair on every refresh.
+        await tokenStore.saveTokens(userId, next);
+        return next;
+      } catch (error) {
+        // The family is dead: revoked, expired or reused. Keeping the
+        // pair would only fail again; the user has to reconnect.
+        await tokenStore.clearTokens(userId);
+        const status = error instanceof OneConnectError ? error.status : undefined;
+        throw new OneConnectError("refresh_failed", "The connection to One has expired or was revoked. Ask the user to connect again.", status);
+      } finally {
+        refreshing.delete(userId);
+      }
+    })();
+    refreshing.set(userId, job);
+    return job;
+  };
+  const getAccessToken = async userId => {
+    const tokens = await tokenStore.loadTokens(userId);
+    if (!tokens) throw new OneConnectError("not_connected", "This user is not connected.");
+    if (Date.now() < tokens.expiresAt - REFRESH_MARGIN_MS) return tokens.accessToken;
+    return (await refreshTokens(userId)).accessToken;
+  };
+  const oneFetch = async (userId, path, init = {}) => {
+    const accessToken = await getAccessToken(userId);
+    const headers = new Headers(init.headers);
+    headers.set("Authorization", `Bearer ${accessToken}`);
+    for (const [name, value] of Object.entries(tenancyHeaders(accessToken))) headers.set(name, value);
+    return fetch(`${apiUrl}${path.startsWith("/") ? path : `/${path}`}`, {
+      ...init,
+      headers
+    });
+  };
+  const listConnections = async userId => {
+    const response = await oneFetch(userId, "/connections/reachable");
+    if (!response.ok) {
+      throw new OneConnectError("request_failed", `One refused the connections request (HTTP ${response.status}).`, response.status);
+    }
+    const body = await response.json();
+    return body.rows ?? [];
+  };
+  const listActions = async (userId, platform) => {
+    const pageUrl = page => `/knowledge?connectionPlatform=${encodeURIComponent(platform)}&limit=${CATALOG_PAGE_SIZE}&page=${page}`;
+    const slim = rows => rows.map(row => ({
+      _id: String(row._id ?? ""),
+      title: String(row.title ?? ""),
+      method: String(row.method ?? ""),
+      path: String(row.path ?? "")
+    }));
+    const first = await oneFetch(userId, pageUrl(1));
+    if (!first.ok) {
+      throw new OneConnectError("request_failed", `One refused the catalog request (HTTP ${first.status}).`, first.status);
+    }
+    const page1 = await first.json();
+    const pages = Math.min(Math.max(page1.pages ?? 1, 1), CATALOG_MAX_PAGES);
+    const rest = await Promise.all(Array.from({
+      length: pages - 1
+    }, (_, index) => oneFetch(userId, pageUrl(index + 2)).then(response => response.ok ? response.json() : null).catch(() => null)));
+    return slim([page1, ...rest].flatMap(page => page?.rows ?? []));
+  };
+  const runAction = async (userId, input) => {
+    const method = input.method.toUpperCase();
+    const query = input.query ? `?${new URLSearchParams(input.query)}` : "";
+    const headers = {
+      "x-one-connection-key": input.connectionKey,
+      "x-one-action-id": input.actionId
+    };
+    const hasBody = method !== "GET" && method !== "HEAD" && input.body !== undefined;
+    if (hasBody) headers["Content-Type"] = "application/json";
+    const response = await oneFetch(userId, `/passthrough${input.path}${query}`, {
+      method,
+      headers,
+      body: hasBody ? JSON.stringify(input.body) : undefined
+    });
+    const text = await response.text();
+    let data = text;
+    try {
+      data = JSON.parse(text);
+    } catch {
+      /* the provider answered with something other than JSON */
+    }
+    // One's own refusals carry a correlationId; a provider's error does
+    // not. A One-shaped 403 is the grant working, not the provider.
+    const blockedByGrant = !response.ok && typeof data === "object" && data !== null && "correlationId" in data;
+    return {
+      status: response.status,
+      ok: response.ok,
+      blockedByGrant,
+      data
+    };
+  };
+  return {
+    startAuthorization,
+    completeAuthorization,
+    isConnected: async userId => (await tokenStore.loadTokens(userId)) !== null,
+    getAccessToken,
+    getTokens: userId => tokenStore.loadTokens(userId),
+    refreshTokens,
+    disconnect: userId => tokenStore.clearTokens(userId),
+    listConnections,
+    listActions,
+    runAction,
+    fetch: oneFetch
+  };
+}
+
+export { OneConnectError, createOneConnect, tenancyHeaders, tokenScopes };

package/dist/server/oauth.d.ts

@@ -0,0 +1,24 @@
+import type { OneConnectCookie } from "./types";
+/** One cookie per flow, named by its state, so a retry or a second tab
+ *  never overwrites the verifier of a flow still in progress. */
+export declare const TX_COOKIE_PREFIX = "one_tx_";
+/** One gives the consent 10 minutes and then the code 10 minutes, so a
+ *  legitimate callback can arrive up to twenty minutes after the start.
+ *  Thirty minutes leaves a margin. */
+export declare const TX_COOKIE_MAX_AGE_SECONDS = 1800;
+export declare const DEFAULT_SCOPES: string[];
+export declare function createState(): string;
+export declare function createPkceVerifier(): string;
+export declare function pkceChallenge(verifier: string): string;
+export declare function txCookieName(state: string): string;
+/** The cookie scoped to the routes that need it: the directory of the
+ *  callback path, which is also where the authorize route lives. */
+export declare function txCookie(state: string, verifier: string, redirectUri: string): OneConnectCookie;
+export declare function basicAuthorization(clientId: string, clientSecret: string): string;
+/** The tenant headers a grant needs on every call. A grant made into an
+ *  organization or project lives there; One resolves the tenant from
+ *  these headers, and without them the call runs in the user's personal
+ *  space. The access token's claims name the tenant, so echo them. */
+export declare function tenancyHeaders(accessToken: string): Record<string, string>;
+/** The scopes the token was granted, from its claims. Display only. */
+export declare function tokenScopes(accessToken: string): string[];

package/dist/server/types.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Types for `@withone/connect/server`: the half of the SDK that runs on
+ * the app's server and holds the client secret.
+ */
+/** What the app stores per user after the exchange. */
+export interface OneConnectTokens {
+    accessToken: string;
+    refreshToken: string;
+    /** Epoch milliseconds when the access token expires. */
+    expiresAt: number;
+}
+/**
+ * Where the app keeps each user's tokens: its database, a cache, an
+ * encrypted cookie. The SDK never sees a token outside these three
+ * calls. `userId` is the app's own id for its user.
+ */
+export interface OneConnectTokenStore {
+    saveTokens: (userId: string, tokens: OneConnectTokens) => Promise<void>;
+    loadTokens: (userId: string) => Promise<OneConnectTokens | null>;
+    clearTokens: (userId: string) => Promise<void>;
+}
+export interface OneConnectServerConfig {
+    /** The app's client id from the dashboard. */
+    clientId: string;
+    /** The app's client secret. Server only. */
+    clientSecret: string;
+    /** Exactly the callback URL registered on the app, character for
+     *  character, for example "https://yourapp.com/api/one/callback". */
+    redirectUri: string;
+    /** The ask (permission set) to open the consent card on. Omit to ask
+     *  for everything the user has connected. */
+    permissionSet?: string;
+    /** One's API origin. Production when omitted. */
+    oneApiUrl?: string;
+    /** Where the callback sends the browser afterwards. "/" when omitted;
+     *  the outcome is appended as `?one_connect=…`. */
+    returnTo?: string;
+    /** OAuth scopes. All three tenancy tiers when omitted, so the user may
+     *  grant from any space. */
+    scopes?: string[];
+    tokenStore: OneConnectTokenStore;
+}
+/** The transaction cookie the authorize leg sets and the callback reads. */
+export interface OneConnectCookie {
+    name: string;
+    value: string;
+    options: {
+        httpOnly: true;
+        secure: boolean;
+        sameSite: "lax";
+        maxAge: number;
+        path: string;
+    };
+}
+export interface StartAuthorizationInput {
+    /** Pre-fills the sign-in email on One's page. Never locks it. */
+    loginHint?: string;
+}
+export interface StartAuthorizationResult {
+    /** Send the browser here with a 302. */
+    redirectUrl: string;
+    /** Set this cookie on the same response. */
+    cookie: OneConnectCookie;
+}
+export interface CompleteAuthorizationInput {
+    /** The app's user the grant belongs to. */
+    userId: string;
+    /** The full callback URL One redirected to, with its query string. */
+    url: string;
+    /** Reads a cookie by name from the incoming request. */
+    getCookie: (name: string) => string | undefined;
+}
+export type AuthorizationOutcome = "connected" | "declined" | "failed";
+export interface CompleteAuthorizationResult {
+    outcome: AuthorizationOutcome;
+    /** Safe to show to the user when the outcome is not "connected". */
+    message?: string;
+    /** Send the browser here with a 302; it carries `?one_connect=…`. */
+    redirectUrl: string;
+    /** Delete this cookie on the same response, when one was involved. */
+    clearCookieName?: string;
+}
+/** One connection the grant reaches, with the access it confers. */
+export interface ReachableConnection {
+    key: string;
+    platform: string;
+    name?: string;
+    title?: string;
+    image?: string;
+    access: ConnectionAccess;
+}
+export type ConnectionAccess = {
+    policy: "full";
+} | {
+    policy: "methods";
+    methods: string[];
+} | {
+    policy: "actions";
+    actions: {
+        actionId: string;
+        title: string;
+        method: string;
+    }[];
+};
+/** One catalog action for a platform. */
+export interface PlatformAction {
+    _id: string;
+    title: string;
+    method: string;
+    path: string;
+}
+export interface RunActionInput {
+    /** From `listConnections`. */
+    connectionKey: string;
+    /** From `listActions`. */
+    actionId: string;
+    method: string;
+    /** The action's path, appended to /v1/passthrough. */
+    path: string;
+    body?: unknown;
+    query?: Record<string, string>;
+}
+export interface RunActionResult {
+    status: number;
+    ok: boolean;
+    /** True when One refused the call because it is outside the grant.
+     *  The provider was never called. Do not retry. */
+    blockedByGrant: boolean;
+    data: unknown;
+}
+export type OneConnectErrorCode = "not_connected" | "refresh_failed" | "request_failed";
+export declare class OneConnectError extends Error {
+    readonly code: OneConnectErrorCode;
+    readonly status?: number;
+    constructor(code: OneConnectErrorCode, message: string, status?: number);
+}

package/dist/svelte.cjs.js

@@ -1 +1 @@
-"use strict";function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message";let o=!1;const i=e=>{let i=!1;if("undefined"!=typeof window&&!o){const r=new URLSearchParams(window.location.search),l=r.get(t);if("success"===l||"error"===l){var c;o=!0;const s=null!==(c=r.get(n))&&void 0!==c?c:void 0,a=()=>{const e=new URLSearchParams(window.location.search);(e.has(t)||e.has(n))&&(e.delete(t),e.delete(n),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!i){i=!0;try{var t,n;"success"===l?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},c="one-connect-button-styles",r="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)"},s={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},a="#CCFF00",d="#3FE3A5",p="#0A0C0B";function u(e){const t=e.trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return t?`https://assets.withone.ai/connectors/${t}.svg`:""}const h=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(c))return;const e=document.createElement("style");e.id=c,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${r},box-shadow .2s ${r},opacity .2s ${r}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${d};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${r};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 ${r},opacity .2s ${r}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const h="dark"===t.theme?s:l,m=null!==(n=t.variant)&&void 0!==n?n:"default",f=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let b="idle",w=!1;const v=i({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),g=document.createElement("button");g.type="button",g.className="block"===m?"owcb owcb-block":"owcb",g.addEventListener("click",()=>{"idle"!==b&&"connected"!==b||(y("connecting"),v.open())});const x=()=>{var e,n,o;const i="accent"===m,c="block"===m,r=c?h.surface:i?null!==(e=t.accentColor)&&void 0!==e?e:a:h.btnBg,l=c?h.fg:i?p:h.btnFg,s=c?h.surface:r,w=p;g.style.background="connected"!==b||c?r:d,g.style.color="connected"!==b||c?l:p,g.style.boxShadow=c?`inset 0 0 0 1px ${h.line}`:"connected"===b?"none":i?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:a}38`:h.shadow,g.disabled="connecting"===b,g.innerHTML="";const v=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,3)){var l;const n=document.createElement("span");n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`;const o=()=>{n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p},i=null!==(l=e.imageUrl)&&void 0!==l?l:u(e.name);if(i){const e=document.createElement("img");e.alt="",e.src=i,e.addEventListener("error",()=>{e.remove(),o()}),n.appendChild(e)}else o();r.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.length-3);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,r.appendChild(e)}return r}(t,s,w);if(c){var x;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":f,e.appendChild(n),"connecting"===b){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else v&&e.appendChild(v);if(g.appendChild(e),t.description&&"idle"===b){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=h.muted,e.textContent=t.description,g.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=h.muted,o.style.borderTop=`1px solid ${h.line}`,o.innerHTML=`<span style="font-size:11px;color:${h.muted}">Secured by</span><span style="display:inline-flex;color:${h.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${h.fg}">one</span>`,void g.appendChild(o)}if("connecting"===b){const e=document.createElement("span");e.className="owcb-spinner",g.appendChild(e)}else if("connected"===b){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}else v&&g.appendChild(v);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":f,g.appendChild(y),"idle"===b){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}},y=e=>{w||(b=e,x())};return x(),e.appendChild(g),{setState:y,destroy:()=>{w=!0,v.close({keepResult:!0}),g.remove()}}};function m(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,c,r,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=h(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(r=this.getAttribute("accent-color"))&&void 0!==r?r:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}(),exports.connectButton=function(e,t){let n=h(e,m(t));return{update(t){n.destroy(),n=h(e,m(t))},destroy(){n.destroy()}}};
+"use strict";var t=require("@withone/connect");exports.connectButton=function(o,n){let e=t.mountConnectButton(o,t.optionsFromProps(n));return{update(n){e.destroy(),e=t.mountConnectButton(o,t.optionsFromProps(n))},destroy(){e.destroy()}}};

package/dist/svelte.d.ts

@@ -1,6 +1,16 @@
-import { type ConnectButtonWrapperProps } from "./wrapper-options";
-export type { ConnectButtonWrapperProps as ConnectButtonProps };
-export declare function connectButton(node: HTMLElement, props: ConnectButtonWrapperProps): {
-    update: (next: ConnectButtonWrapperProps) => void;
+/**
+ * Svelte: `import { connectButton } from "@withone/connect/svelte"`.
+ *
+ * A Svelte action, the idiomatic shape for DOM-mounting libraries, so no
+ * Svelte compiler or dependency is involved:
+ *
+ *   <div use:connectButton={{ authorizeUrl: "/api/one/authorize",
+ *     platforms: ["stripe", "notion"],
+ *     onSuccess: () => { ... } }} />
+ */
+import { type ConnectButtonProps } from "@withone/connect";
+export type { ConnectButtonProps };
+export declare function connectButton(node: HTMLElement, props: ConnectButtonProps): {
+    update: (next: ConnectButtonProps) => void;
     destroy: () => void;
 };

package/dist/svelte.esm.js

@@ -1 +1 @@
-function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message";let o=!1;const i=e=>{let i=!1;if("undefined"!=typeof window&&!o){const r=new URLSearchParams(window.location.search),l=r.get(t);if("success"===l||"error"===l){var c;o=!0;const s=null!==(c=r.get(n))&&void 0!==c?c:void 0,a=()=>{const e=new URLSearchParams(window.location.search);(e.has(t)||e.has(n))&&(e.delete(t),e.delete(n),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!i){i=!0;try{var t,n;"success"===l?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},c="one-connect-button-styles",r="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)"},s={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},a="#CCFF00",d="#3FE3A5",p="#0A0C0B";function u(e){const t=e.trim().toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return t?`https://assets.withone.ai/connectors/${t}.svg`:""}const h=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(c))return;const e=document.createElement("style");e.id=c,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${r},box-shadow .2s ${r},opacity .2s ${r}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${d};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${r};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 ${r},opacity .2s ${r}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const h="dark"===t.theme?s:l,m=null!==(n=t.variant)&&void 0!==n?n:"default",f=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let b="idle",w=!1;const v=i({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),g=document.createElement("button");g.type="button",g.className="block"===m?"owcb owcb-block":"owcb",g.addEventListener("click",()=>{"idle"!==b&&"connected"!==b||(y("connecting"),v.open())});const x=()=>{var e,n,o;const i="accent"===m,c="block"===m,r=c?h.surface:i?null!==(e=t.accentColor)&&void 0!==e?e:a:h.btnBg,l=c?h.fg:i?p:h.btnFg,s=c?h.surface:r,w=p;g.style.background="connected"!==b||c?r:d,g.style.color="connected"!==b||c?l:p,g.style.boxShadow=c?`inset 0 0 0 1px ${h.line}`:"connected"===b?"none":i?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:a}38`:h.shadow,g.disabled="connecting"===b,g.innerHTML="";const v=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,3)){var l;const n=document.createElement("span");n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`;const o=()=>{n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p},i=null!==(l=e.imageUrl)&&void 0!==l?l:u(e.name);if(i){const e=document.createElement("img");e.alt="",e.src=i,e.addEventListener("error",()=>{e.remove(),o()}),n.appendChild(e)}else o();r.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.length-3);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,r.appendChild(e)}return r}(t,s,w);if(c){var x;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":f,e.appendChild(n),"connecting"===b){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else v&&e.appendChild(v);if(g.appendChild(e),t.description&&"idle"===b){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=h.muted,e.textContent=t.description,g.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=h.muted,o.style.borderTop=`1px solid ${h.line}`,o.innerHTML=`<span style="font-size:11px;color:${h.muted}">Secured by</span><span style="display:inline-flex;color:${h.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${h.fg}">one</span>`,void g.appendChild(o)}if("connecting"===b){const e=document.createElement("span");e.className="owcb-spinner",g.appendChild(e)}else if("connected"===b){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}else v&&g.appendChild(v);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===b?"Connecting…":"connected"===b?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":f,g.appendChild(y),"idle"===b){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}},y=e=>{w||(b=e,x())};return x(),e.appendChild(g),{setState:y,destroy:()=>{w=!0,v.close({keepResult:!0}),g.remove()}}};function m(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}function f(e,t){let n=h(e,m(t));return{update(t){n.destroy(),n=h(e,m(t))},destroy(){n.destroy()}}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,c,r,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=h(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(r=this.getAttribute("accent-color"))&&void 0!==r?r:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}();export{f as connectButton};
+import{mountConnectButton as t,optionsFromProps as e}from"@withone/connect";function o(o,r){let n=t(o,e(r));return{update(r){n.destroy(),n=t(o,e(r))},destroy(){n.destroy()}}}export{o as connectButton};

package/dist/types.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Public types for @withone/connect.
+ *
+ * The browser half knows nothing about OAuth: it sends the tab to the
+ * app's own authorize route and reports how the flow ended when the tab
+ * comes back. The server half (`@withone/connect/server`) owns state,
+ * PKCE, the code exchange, refresh and every call made with the grant.
+ */
+/** Theme of One's hosted connect page. */
+export type OneConnectTheme = "light" | "dark";
+export interface OneConnectOptions {
+    /** The app's own backend authorize route. Relative paths such as
+     *  "/api/one/authorize" resolve against the page's origin. */
+    authorizeUrl: string;
+    /** Theme for One's hosted page. Carried on the URL fragment, which
+     *  survives the redirect chain, so the backend forwards nothing. */
+    appTheme?: OneConnectTheme;
+    /** The grant completed and the backend stored the tokens. */
+    onSuccess?: () => void;
+    /** The flow ended without a grant: the user declined, the attempt
+     *  expired, or the exchange failed. `message` is safe to show. */
+    onError?: (message: string) => void;
+}
+export interface OneConnectHandle {
+    /** Navigates the tab to One's hosted connect flow. */
+    open: () => void;
+}
+/** How the app's callback route reports the outcome on its final
+ *  redirect, read off the page URL when the tab returns. */
+export interface OneConnectReturn {
+    status: "success" | "error";
+    message?: string;
+}
+/**
+ * A connector chip on the button. Pass One's connector slug ("stripe",
+ * "google-calendar") and the SDK shows the logo and the name; pass an
+ * object to override either.
+ */
+export type ConnectButtonPlatformInput = string | {
+    slug?: string;
+    name?: string;
+    imageUrl?: string;
+};
+/** A normalized chip: what the button actually draws. */
+export interface ConnectButtonPlatform {
+    slug: string;
+    name: string;
+    imageUrl: string;
+}
+export type ConnectButtonVariant = "default" | "accent" | "block";
+export type ConnectButtonState = "idle" | "connecting" | "connected";
+export interface ConnectButtonOptions {
+    /** Everything the flow needs; the button wires open() and the
+     *  Connecting and Connected states around your callbacks. */
+    connect: OneConnectOptions;
+    /** "Connect your apps" unless overridden. */
+    label?: string;
+    /** default = neutral pill; accent = brand-colored pill; block =
+     *  full-width card with a description and a "Secured by One" foot. */
+    variant?: ConnectButtonVariant;
+    /** Matches the host page, not One's page (that is connect.appTheme). */
+    theme?: OneConnectTheme;
+    /** Connector chips. The first three render; the rest fold into the
+     *  "+N" chip together with moreCount. */
+    platforms?: ConnectButtonPlatformInput[];
+    /** 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;
+    /** Fill of the accent variant; One's lime when omitted. */
+    accentColor?: string;
+    /** Label for the connected state. */
+    connectedLabel?: string;
+}
+export interface ConnectButtonHandle {
+    /** Override the visual state by hand. */
+    setState: (state: ConnectButtonState) => void;
+    /** Remove the button. */
+    destroy: () => void;
+}