@withone/connect 0.8.3 → 0.9.0

package/src/types.ts

@@ -0,0 +1,87 @@
+/**
+ * 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;
+}

package/src/useOneConnect.ts

@@ -1,105 +1,72 @@
-import {
-  RETURN_MESSAGE_PARAM,
-  RETURN_STATUS_PARAM,
-  THEME_PARAM,
-} from "./constants";
-import type { OneConnectHandle, OneConnectProps } from "./types";
+import { THEME_PARAM } from "./constants";
+import { hasReturnParams, parseReturn, stripReturnParams } from "./return";
+import type { OneConnectHandle, OneConnectOptions } from "./types";
 
-// Like useOneAuth, this is a plain function rather than a React hook so
-// it works from any framework.
-
-/** The return leg is a page LOAD — only the first hook instance on the
- *  page consumes it. */
+/** The return leg is a page load, so it is delivered exactly once, to
+ *  the first instance that reads it. */
 let returnConsumed = false;
 
-export const useOneConnect = (props: OneConnectProps): OneConnectHandle => {
-  let resultDelivered = false;
+const DEFAULT_ERROR = "The connection was not completed.";
 
-  // The theme rides in the URL FRAGMENT: fragments never reach any
-  // server and browsers carry them through the whole redirect chain
-  // (consumer's authorize route -> One -> the hosted page), so the
-  // consumer's backend forwards NOTHING.
-  const buildUrl = (): string => {
+/**
+ * Wires the connect flow to any element. A plain function rather than a
+ * React hook, so it works from every framework: call it once where the
+ * button lives and pass `open` to a click.
+ *
+ * The flow is a full-page redirect: the tab goes to the app's authorize
+ * route, on to One's hosted page, back to the app's callback route, and
+ * home. On the way home the callback route appends `?one_connect=…` to
+ * the URL it redirects to; this function reads that on load, fires
+ * onSuccess or onError once, and removes the params from the address bar.
+ */
+export const useOneConnect = (options: OneConnectOptions): OneConnectHandle => {
+  const buildAuthorizeUrl = (): string => {
     try {
-      // Relative paths ("/api/one/authorize") resolve against the host
-      // page — the natural thing to write on a <one-connect-button>.
       const url = new URL(
-        props.authorize.url,
+        options.authorizeUrl,
         typeof window === "undefined" ? undefined : window.location.origin,
       );
-      if (props.appTheme) url.hash = `${THEME_PARAM}=${props.appTheme}`;
+      if (options.appTheme) url.hash = `${THEME_PARAM}=${options.appTheme}`;
       return url.toString();
     } catch {
-      return props.authorize.url;
+      return options.authorizeUrl;
     }
   };
 
-  // Full-page hosted flow, Stripe-Checkout style: same tab, One's own
-  // domain (first-party cookies — works in every browser). The app's
-  // callback redirect brings the user home; detection below picks it
-  // up on the next load.
   const open = () => {
     if (typeof window === "undefined") return;
-    window.location.assign(buildUrl());
+    window.location.assign(buildAuthorizeUrl());
   };
 
-  // Nothing to dismantle in the full-page flow — kept so hosts (and the
-  // button's destroy path) can call it unconditionally.
-  const close = (_options?: { keepResult?: boolean }) => {};
-
-  // Return detection: the app's callback redirected the TAB to a URL
-  // carrying ?one_connect=… — deliver it once and scrub the params so a
-  // refresh doesn't re-fire.
   if (typeof window !== "undefined" && !returnConsumed) {
-    const search = new URLSearchParams(window.location.search);
-    const returnStatus = search.get(RETURN_STATUS_PARAM);
-    if (returnStatus === "success" || returnStatus === "error") {
+    const outcome = parseReturn(window.location.search);
+    if (outcome) {
       returnConsumed = true;
-      const returnMessage = search.get(RETURN_MESSAGE_PARAM) ?? undefined;
-      // Scrub-and-verify: this code runs during the app's first render,
-      // and frameworks that manage the history themselves (Next.js App
-      // Router) sync the address bar back to THEIR canonical URL when
-      // hydration completes — silently undoing a one-shot replaceState.
-      // So scrub now, then re-check a few beats later and scrub again if
-      // the params were restored.
+      // Frameworks that manage the history themselves (the Next.js App
+      // Router) sync the address bar back to their own URL when hydration
+      // completes, undoing a single replaceState. Scrub now and re-check a
+      // few beats later.
       const scrub = () => {
-        const params = new URLSearchParams(window.location.search);
-        if (
-          !params.has(RETURN_STATUS_PARAM) &&
-          !params.has(RETURN_MESSAGE_PARAM)
-        )
-          return;
-        params.delete(RETURN_STATUS_PARAM);
-        params.delete(RETURN_MESSAGE_PARAM);
+        if (!hasReturnParams(window.location.search)) return;
         window.history.replaceState(
           null,
           "",
-          window.location.pathname +
-            (params.toString() ? `?${params.toString()}` : "") +
-            window.location.hash,
+          stripReturnParams(window.location),
         );
       };
       scrub();
       for (const delay of [50, 500, 2000]) window.setTimeout(scrub, delay);
-      // No overlay: One's HOSTED page already showed the result beat
-      // ("You're all set" + countdown / the failure screen) before
-      // sending the user home — painting a second card would
-      // double-announce. Callbacks fire so the app updates its state.
+
       window.setTimeout(() => {
-        if (resultDelivered) return;
-        resultDelivered = true;
         try {
-          if (returnStatus === "success") props.onSuccess?.();
-          else
-            props.onError?.(
-              returnMessage ?? "The connection was not completed.",
-            );
+          if (outcome.status === "success") options.onSuccess?.();
+          else options.onError?.(outcome.message ?? DEFAULT_ERROR);
         } catch {
-          /* consumer callback errors are not our problem */
+          /* the app's own callback threw; not ours to handle */
         }
       }, 0);
     }
   }
 
-  return { open, close };
+  return { open };
 };

package/src/vue.ts

@@ -1,13 +1,13 @@
 /**
- * Vue 3 — `import { ConnectButton } from "@withone/connect/vue"`.
+ * Vue 3: `import { ConnectButton } from "@withone/connect/vue"`.
  *
  *   <ConnectButton
  *     authorize-url="/api/one/authorize"
- *     :platforms="[{ name: 'Stripe', imageUrl: '/icons/stripe.svg' }]"
+ *     :platforms="['stripe', 'notion']"
  *     @success="onConnected"
  *   />
  *
- * vue is an optional peer dependency of THIS subpath only.
+ * Vue is an optional peer dependency of this subpath only.
  */
 import {
   defineComponent,
@@ -19,23 +19,29 @@ import {
 } from "vue";
 import type { PropType } from "vue";
 
-import { mountConnectButton } from "./button";
-import { optionsFromWrapperProps } from "./wrapper-options";
-import type { ConnectButtonHandle, ConnectButtonPlatform } from "./types";
+import {
+  mountConnectButton,
+  optionsFromProps,
+  propsIdentity,
+  type ConnectButtonHandle,
+  type ConnectButtonPlatformInput,
+  type ConnectButtonVariant,
+  type OneConnectTheme,
+} from "@withone/connect";
 
 export const ConnectButton = defineComponent({
   name: "OneConnectButton",
   props: {
     authorizeUrl: { type: String, required: true },
-    appTheme: { type: String as PropType<"light" | "dark">, default: undefined },
+    appTheme: { type: String as PropType<OneConnectTheme>, default: undefined },
     label: { type: String, default: undefined },
     variant: {
-      type: String as PropType<"default" | "accent" | "block">,
+      type: String as PropType<ConnectButtonVariant>,
       default: undefined,
     },
-    theme: { type: String as PropType<"light" | "dark">, default: undefined },
+    theme: { type: String as PropType<OneConnectTheme>, default: undefined },
     platforms: {
-      type: Array as PropType<ConnectButtonPlatform[]>,
+      type: Array as PropType<ConnectButtonPlatformInput[]>,
       default: undefined,
     },
     moreCount: { type: Number, default: undefined },
@@ -43,7 +49,10 @@ export const ConnectButton = defineComponent({
     accentColor: { type: String, default: undefined },
     connectedLabel: { type: String, default: undefined },
   },
-  emits: ["success", "error", "close"],
+  emits: {
+    success: () => true,
+    error: (message: string) => typeof message === "string",
+  },
   setup(props, { emit }) {
     const container = ref<HTMLElement | null>(null);
     let handle: ConnectButtonHandle | null = null;
@@ -54,33 +63,18 @@ export const ConnectButton = defineComponent({
       if (!container.value) return;
       handle = mountConnectButton(
         container.value,
-        optionsFromWrapperProps(
+        optionsFromProps(
           { ...props },
           {
             onSuccess: () => emit("success"),
-            onError: (error) => emit("error", error),
-            onClose: () => emit("close"),
+            onError: (message) => emit("error", message),
           },
         ),
       );
     };
 
     onMounted(mount);
-    watch(
-      () => [
-        props.authorizeUrl,
-        props.appTheme,
-        props.label,
-        props.variant,
-        props.theme,
-        JSON.stringify(props.platforms ?? []),
-        props.moreCount,
-        props.description,
-        props.accentColor,
-        props.connectedLabel,
-      ],
-      mount,
-    );
+    watch(() => propsIdentity({ ...props }), mount);
     onBeforeUnmount(() => {
       handle?.destroy();
       handle = null;

package/src/wrapper-options.ts

@@ -1,40 +1,47 @@
-import type { ConnectButtonOptions, ConnectButtonPlatform } from "./types";
+import type {
+  ConnectButtonOptions,
+  ConnectButtonPlatformInput,
+  ConnectButtonVariant,
+  OneConnectTheme,
+} from "./types";
 
-/** The flat prop shape every framework wrapper exposes (React props,
- *  Vue props, Svelte action options) — one place to translate it into
- *  the core mountConnectButton options. */
-export interface ConnectButtonWrapperProps {
+/** The flat prop shape every framework wrapper exposes: React props,
+ *  Vue props, the Svelte action's options. One place turns it into the
+ *  core mountConnectButton options. */
+export interface ConnectButtonProps {
+  /** The app's own backend authorize route; relative is fine. */
   authorizeUrl: string;
-  appTheme?: "light" | "dark";
+  /** Theme of One's hosted page. */
+  appTheme?: OneConnectTheme;
   onSuccess?: () => void;
-  onError?: (error: string) => void;
-  onClose?: () => void;
+  onError?: (message: string) => void;
   label?: string;
-  variant?: "default" | "accent" | "block";
-  theme?: "light" | "dark";
-  platforms?: ConnectButtonPlatform[];
+  variant?: ConnectButtonVariant;
+  /** Matches the host page. */
+  theme?: OneConnectTheme;
+  /** Connector slugs, or objects to override name or logo. */
+  platforms?: ConnectButtonPlatformInput[];
   moreCount?: number;
   description?: string;
   accentColor?: string;
   connectedLabel?: string;
 }
 
-export function optionsFromWrapperProps(
-  props: ConnectButtonWrapperProps,
-  callbacks?: {
-    onSuccess?: () => void;
-    onError?: (error: string) => void;
-    onClose?: () => void;
-  },
+export interface ConnectButtonCallbacks {
+  onSuccess?: () => void;
+  onError?: (message: string) => void;
+}
+
+export function optionsFromProps(
+  props: ConnectButtonProps,
+  callbacks: ConnectButtonCallbacks = props,
 ): ConnectButtonOptions {
-  const cb = callbacks ?? props;
   return {
     connect: {
-      authorize: { url: props.authorizeUrl },
+      authorizeUrl: props.authorizeUrl,
       appTheme: props.appTheme,
-      onSuccess: () => cb.onSuccess?.(),
-      onError: (error) => cb.onError?.(error),
-      onClose: () => cb.onClose?.(),
+      onSuccess: () => callbacks.onSuccess?.(),
+      onError: (message) => callbacks.onError?.(message),
     },
     label: props.label,
     variant: props.variant,
@@ -46,3 +53,19 @@ export function optionsFromWrapperProps(
     connectedLabel: props.connectedLabel,
   };
 }
+
+/** The inputs whose change should remount the button. */
+export function propsIdentity(props: ConnectButtonProps): string {
+  return JSON.stringify([
+    props.authorizeUrl,
+    props.appTheme,
+    props.label,
+    props.variant,
+    props.theme,
+    props.platforms ?? [],
+    props.moreCount,
+    props.description,
+    props.accentColor,
+    props.connectedLabel,
+  ]);
+}

package/dist/index.umd.js

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

package/dist/types/index.d.ts

@@ -1,92 +0,0 @@
-/**
- * Public types for @withone/connect.
- *
- * The SDK deliberately knows nothing about OAuth internals: state, PKCE
- * and the client secret live on the consumer's backend (see README).
- * The SDK only sends the tab to One's hosted connect page and reports
- * how the flow ended when the user comes back.
- */
-
-/** How a completed flow reports back on the return URL. */
-export interface OneConnectResult {
-  status: "success" | "error";
-  /** Human-readable detail for the error case. */
-  message?: string;
-}
-
-export interface OneConnectProps {
-  /**
-   * The consumer's OWN backend route that starts the flow. It must
-   * generate `state` + PKCE, set them in an httpOnly cookie, and 302
-   * to One's /oauth/authorize (full recipe in the README). Relative
-   * paths resolve against the host page's origin.
-   */
-  authorize: {
-    url: string;
-  };
-  /** Theme for One's hosted page. Carried on the URL fragment
-   *  (#one_theme=…), which survives the redirect chain — the consumer's
-   *  backend forwards nothing. */
-  appTheme?: "dark" | "light";
-  /** Fired on return when the callback redirect carried
-   *  ?one_connect=success. The token exchange already happened on the
-   *  consumer's backend by this point. */
-  onSuccess?: () => void;
-  /** Fired on return when the callback redirect carried an error. */
-  onError?: (error: string) => void;
-  /** Reserved for future use — the hosted flow's cancel path returns
-   *  through onError with the OAuth error string. */
-  onClose?: () => void;
-}
-
-export interface OneConnectHandle {
-  /** Navigates the tab to One's hosted connect flow. */
-  open: () => void;
-  /** No-op in the full-page flow — kept so hosts can call it
-   *  unconditionally (e.g. on unmount). */
-  close: (options?: { keepResult?: boolean }) => void;
-}
-
-/** 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 page (that's connect.appTheme). */
-  theme?: "light" | "dark";
-  /** Provider chips fanned on hover; first four render, the rest fold
-   *  into the +N chip together with moreCount. */
-  platforms?: ConnectButtonPlatform[];
-  /** Extra count for the +N chip (e.g. 274 for "the whole catalog"). */
-  moreCount?: number;
-  /** Sub-line on the block variant, shown while idle. */
-  description?: string;
-  /** accent variant fill; lime (#CCFF00) when omitted. */
-  accentColor?: string;
-  /** Label for the connected state ("4 apps connected"). */
-  connectedLabel?: string;
-}
-
-export interface ConnectButtonHandle {
-  /** Manually override the visual state. */
-  setState: (state: "idle" | "connecting" | "connected") => void;
-  /** Remove the button and tear down the flow wiring. */
-  destroy: () => void;
-}
-
-/** Registers the <one-connect-button> custom element (no-op on servers
- *  and when already registered). Importing the package does this
- *  automatically in browsers; calling it manually is only needed if a
- *  bundler stripped module side effects. */
-export declare function registerConnectButton(): void;

package/src/react-types.d.ts

@@ -1,23 +0,0 @@
-/** Hand-maintained declarations for the "@withone/connect/react" subpath. */
-import type { CSSProperties, ReactElement } from "react";
-import type { ConnectButtonPlatform } from "./types";
-
-export interface ConnectButtonProps {
-  authorizeUrl: string;
-  appTheme?: "light" | "dark";
-  onSuccess?: () => void;
-  onError?: (error: string) => void;
-  onClose?: () => void;
-  label?: string;
-  variant?: "default" | "accent" | "block";
-  theme?: "light" | "dark";
-  platforms?: ConnectButtonPlatform[];
-  moreCount?: number;
-  description?: string;
-  accentColor?: string;
-  connectedLabel?: string;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export declare function ConnectButton(props: ConnectButtonProps): ReactElement;

package/src/svelte-types.d.ts

@@ -1,27 +0,0 @@
-/** Hand-maintained declarations for the "@withone/connect/svelte" subpath. */
-import type { ConnectButtonPlatform } from "./types";
-
-export interface ConnectButtonProps {
-  authorizeUrl: string;
-  appTheme?: "light" | "dark";
-  onSuccess?: () => void;
-  onError?: (error: string) => void;
-  onClose?: () => void;
-  label?: string;
-  variant?: "default" | "accent" | "block";
-  theme?: "light" | "dark";
-  platforms?: ConnectButtonPlatform[];
-  moreCount?: number;
-  description?: string;
-  accentColor?: string;
-  connectedLabel?: string;
-}
-
-/** Svelte action: <div use:connectButton={props} /> */
-export declare function connectButton(
-  node: HTMLElement,
-  props: ConnectButtonProps,
-): {
-  update: (next: ConnectButtonProps) => void;
-  destroy: () => void;
-};