@withone/connect 0.13.2 → 0.15.0

package/dist/vue.cjs.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),t=require("@withone/connect");const n={type:Boolean,default:void 0},o=e.defineComponent({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},platforms:{type:Array,default:void 0},connected:n,disabled:n,variant:{type:String,default:void 0},size:{type:String,default:void 0},fullWidth:n,theme:{type:String,default:void 0},connectTheme:{type:String,default:void 0},appTheme:{type:String,default:void 0},accentColor:{type:String,default:void 0},label:{type:String,default:void 0},connectedLabel:{type:String,default:void 0},description:{type:String,default:void 0}},emits:{success:()=>!0,error:(e,t)=>"string"==typeof e&&"string"==typeof t,cancel:()=>!0},setup(n,{emit:o}){const r=e.ref(null);let i=null;const a=()=>({...n,onSuccess:()=>o("success"),onError:(e,t)=>o("error",e,t),onCancel:()=>o("cancel")});return e.onMounted(()=>{r.value&&(i=t.renderConnectButton(r.value,a()))}),e.watch(()=>({...n}),()=>{var e;return null===(e=i)||void 0===e?void 0:e.update(a())},{deep:!0}),e.onBeforeUnmount(()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null}),()=>{var t;return e.h("span",{ref:r,class:"one-connect","data-variant":null!==(t=n.variant)&&void 0!==t?t:"default","data-full-width":n.fullWidth?"":void 0})}}});exports.ConnectButton=o;
+"use strict";var e=require("vue"),t=require("@withone/connect");const n={type:Boolean,default:void 0},o=e.defineComponent({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},logos:{type:Array,default:void 0},platforms:{type:Array,default:void 0},connected:n,disabled:n,variant:{type:String,default:void 0},size:{type:String,default:void 0},fullWidth:n,theme:{type:String,default:void 0},connectTheme:{type:String,default:void 0},label:{type:String,default:void 0},connectedLabel:{type:String,default:void 0},description:{type:String,default:void 0}},emits:{success:()=>!0,error:(e,t)=>"string"==typeof e&&"string"==typeof t,cancel:()=>!0},setup(n,{emit:o}){const r=e.ref(null);let i=null;const l=()=>({...n,onSuccess:()=>o("success"),onError:(e,t)=>o("error",e,t),onCancel:()=>o("cancel")});return e.onMounted(()=>{r.value&&(i=t.renderConnectButton(r.value,l()))}),e.watch(()=>({...n}),()=>{var e;return null===(e=i)||void 0===e?void 0:e.update(l())},{deep:!0}),e.onBeforeUnmount(()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null}),()=>{var t;return e.h("span",{ref:r,class:"one-connect","data-variant":null!==(t=n.variant)&&void 0!==t?t:"default","data-full-width":n.fullWidth?"":void 0})}}});exports.ConnectButton=o;

package/dist/vue.d.ts

@@ -1,12 +1,17 @@
 import type { PropType } from "vue";
-import { type ConnectButtonPlatformInput, type ConnectButtonSize, type ConnectButtonTheme, type ConnectButtonVariant, type ConnectFailureCode, type OneConnectTheme } from "@withone/connect";
+import { type ConnectButtonLogoInput, type ConnectButtonSize, type ConnectButtonTheme, type ConnectButtonVariant, type ConnectFailureCode, type OneConnectTheme } from "@withone/connect";
 export declare const ConnectButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     authorizeUrl: {
         type: StringConstructor;
         required: true;
     };
+    logos: {
+        type: PropType<ConnectButtonLogoInput[]>;
+        default: undefined;
+    };
+    /** @deprecated use logos */
     platforms: {
-        type: PropType<ConnectButtonPlatformInput[]>;
+        type: PropType<ConnectButtonLogoInput[]>;
         default: undefined;
     };
     connected: {
@@ -37,15 +42,6 @@ export declare const ConnectButton: import("vue").DefineComponent<import("vue").
         type: PropType<OneConnectTheme>;
         default: undefined;
     };
-    /** @deprecated use connectTheme */
-    appTheme: {
-        type: PropType<OneConnectTheme>;
-        default: undefined;
-    };
-    accentColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
     label: {
         type: StringConstructor;
         default: undefined;
@@ -69,8 +65,13 @@ export declare const ConnectButton: import("vue").DefineComponent<import("vue").
         type: StringConstructor;
         required: true;
     };
+    logos: {
+        type: PropType<ConnectButtonLogoInput[]>;
+        default: undefined;
+    };
+    /** @deprecated use logos */
     platforms: {
-        type: PropType<ConnectButtonPlatformInput[]>;
+        type: PropType<ConnectButtonLogoInput[]>;
         default: undefined;
     };
     connected: {
@@ -101,15 +102,6 @@ export declare const ConnectButton: import("vue").DefineComponent<import("vue").
         type: PropType<OneConnectTheme>;
         default: undefined;
     };
-    /** @deprecated use connectTheme */
-    appTheme: {
-        type: PropType<OneConnectTheme>;
-        default: undefined;
-    };
-    accentColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
     label: {
         type: StringConstructor;
         default: undefined;
@@ -131,13 +123,12 @@ export declare const ConnectButton: import("vue").DefineComponent<import("vue").
     label: string;
     disabled: boolean;
     connectTheme: OneConnectTheme;
-    appTheme: OneConnectTheme;
-    platforms: ConnectButtonPlatformInput[];
+    logos: ConnectButtonLogoInput[];
+    platforms: ConnectButtonLogoInput[];
     variant: ConnectButtonVariant;
     size: ConnectButtonSize;
     theme: ConnectButtonTheme;
     description: string;
     fullWidth: boolean;
-    accentColor: string;
     connectedLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/vue.esm.js

@@ -1 +1 @@
-import{defineComponent as e,ref as t,onMounted as n,watch as o,onBeforeUnmount as r,h as i}from"vue";import{renderConnectButton as l}from"@withone/connect";const a={type:Boolean,default:void 0},d=e({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},platforms:{type:Array,default:void 0},connected:a,disabled:a,variant:{type:String,default:void 0},size:{type:String,default:void 0},fullWidth:a,theme:{type:String,default:void 0},connectTheme:{type:String,default:void 0},appTheme:{type:String,default:void 0},accentColor:{type:String,default:void 0},label:{type:String,default:void 0},connectedLabel:{type:String,default:void 0},description:{type:String,default:void 0}},emits:{success:()=>!0,error:(e,t)=>"string"==typeof e&&"string"==typeof t,cancel:()=>!0},setup(e,{emit:a}){const d=t(null);let u=null;const c=()=>({...e,onSuccess:()=>a("success"),onError:(e,t)=>a("error",e,t),onCancel:()=>a("cancel")});return n(()=>{d.value&&(u=l(d.value,c()))}),o(()=>({...e}),()=>{var e;return null===(e=u)||void 0===e?void 0:e.update(c())},{deep:!0}),r(()=>{var e;null===(e=u)||void 0===e||e.destroy(),u=null}),()=>{var t;return i("span",{ref:d,class:"one-connect","data-variant":null!==(t=e.variant)&&void 0!==t?t:"default","data-full-width":e.fullWidth?"":void 0})}}});export{d as ConnectButton};
+import{defineComponent as e,ref as t,onMounted as n,watch as o,onBeforeUnmount as r,h as l}from"vue";import{renderConnectButton as i}from"@withone/connect";const a={type:Boolean,default:void 0},d=e({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},logos:{type:Array,default:void 0},platforms:{type:Array,default:void 0},connected:a,disabled:a,variant:{type:String,default:void 0},size:{type:String,default:void 0},fullWidth:a,theme:{type:String,default:void 0},connectTheme:{type:String,default:void 0},label:{type:String,default:void 0},connectedLabel:{type:String,default:void 0},description:{type:String,default:void 0}},emits:{success:()=>!0,error:(e,t)=>"string"==typeof e&&"string"==typeof t,cancel:()=>!0},setup(e,{emit:a}){const d=t(null);let u=null;const c=()=>({...e,onSuccess:()=>a("success"),onError:(e,t)=>a("error",e,t),onCancel:()=>a("cancel")});return n(()=>{d.value&&(u=i(d.value,c()))}),o(()=>({...e}),()=>{var e;return null===(e=u)||void 0===e?void 0:e.update(c())},{deep:!0}),r(()=>{var e;null===(e=u)||void 0===e||e.destroy(),u=null}),()=>{var t;return l("span",{ref:d,class:"one-connect","data-variant":null!==(t=e.variant)&&void 0!==t?t:"default","data-full-width":e.fullWidth?"":void 0})}}});export{d as ConnectButton};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@withone/connect",
-  "version": "0.13.2",
+  "version": "0.15.0",
   "description": "One Connect for your app: the button your users press, the two backend routes as one import, and a server client that calls One with the grant. Users keep their connections in One; your app holds only what they granted.",
   "files": [
     "dist",

package/skills/one-connect/SKILL.md

@@ -110,40 +110,53 @@ import { ConnectButton } from "@withone/connect/react";
 
 <ConnectButton
   authorizeUrl="/api/one/authorize"
-  platforms={["gmail", "stripe"]}   // connector slugs
+  logos={["gmail", "stripe"]}       // connector slugs, decoration only
   connected={hasGrant}              // from the server: await oneConnect.isConnected(userId)
   onSuccess={() => { /* refetch app state */ }}
   onError={(message) => { /* show message */ }}
 />
 ```
 
-Optional props: `variant` ("default" | "accent" | "block"), `accentColor`,
-`size` ("sm" | "md" | "lg"), `fullWidth`, `theme` ("light" | "dark" | "auto"),
-`label`, `description`, `disabled`.
+Optional props: `variant` ("default" | "accent" | "block"), `size` ("sm" |
+"md" | "lg"), `fullWidth`, `theme` ("light" | "dark" | "auto"), `label`,
+`description`, `disabled`. The accent variant's colours come from the host's
+`--one-connect-accent` and `--one-connect-accent-fg` CSS variables.
 
 Vue: `@withone/connect/vue`, same props. Svelte: `use:connectButton` from
 `@withone/connect/svelte`. Anything else: `import "@withone/connect"` and use
-`<one-connect-button authorize-url="/api/one/authorize" platforms="gmail, stripe">`.
+`<one-connect-button authorize-url="/api/one/authorize" logos="gmail, stripe">`.
 A custom button in React: `useOneConnect({ authorizeUrl })` returns `{ open, status }`.
 
 ## 6 - Calling One with the grant
 
+The same four steps the One CLI takes: find the action, read its knowledge,
+run it. Always read the knowledge before running an action for the first
+time; it names the required fields, the encoding and any header.
+
 ```ts
-const connections = await oneConnect.listConnections(userId);   // [{ key, platform, access }]
-const actions = await oneConnect.listActions(userId, "gmail");  // [{ _id, title, method, path }]
+const connections = await oneConnect.listConnections(userId);                 // [{ key, platform, access }]
+const [action] = await oneConnect.searchActions(userId, "stripe", "create an invoice");  // best first, 5 by default
+const guide = await oneConnect.getActionKnowledge(userId, action._id);        // { knowledge (Markdown), ioSchema, method, path, tags }
 
 const reply = await oneConnect.runAction(userId, {
   connectionKey: connection.key,
   actionId: action._id,
-  method: action.method,
-  path: action.path,
-  body: payload,
+  body: payload,                              // what the guide asks for
+  pathParams: { calendarId: "primary" },      // values for {{placeholders}} in the path
+  query: { limit: "10" },
+  encoding: "json",                           // or "form" / "multipart", as the guide says
+  headers: {},                                // only when the guide names one
 });
 // { status, ok, blockedByGrant, data }
 ```
 
-Do not set any header. The package adds the connect key and the user's id
-to every call it makes.
+`runAction` takes the method and path from the action, fills the path's
+placeholders, puts the connection key in the body of an action One serves
+itself (tag `custom`), and encodes the body as asked. `listActions(userId,
+platform)` lists a whole catalog when search is not enough.
+
+Do not set any auth header. The package adds the connect key and the
+user's id to every call it makes.
 
 A `403` reply with `blockedByGrant: true` means the call is outside what
 the user granted. Do not retry it.

package/src/button.ts

@@ -20,8 +20,10 @@ import type {
  * custom properties set through the CSSOM, which such a policy allows.
  *
  * Theming hooks for the host page: `--one-connect-font`,
- * `--one-connect-radius`, and `::part(button)` / `::part(label)` on the
- * host (`one-connect-button`, or `.one-connect` for the wrappers).
+ * `--one-connect-radius`, `--one-connect-accent` and
+ * `--one-connect-accent-fg` (the accent variant's fill and text), and
+ * `::part(button)` / `::part(label)` on the host (`one-connect-button`,
+ * or `.one-connect` for the wrappers).
  */
 
 const MAX_VISIBLE_CHIPS = 3;
@@ -129,57 +131,6 @@ function adoptStyles(root: ShadowRoot): void {
   root.appendChild(style);
 }
 
-/* ── Accent contrast ──────────────────────────────────────────────── */
-
-function parseRgb(color: string): [number, number, number] | null {
-  const value = color.trim().toLowerCase();
-  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(value);
-  if (hex) {
-    const digits = hex[1].length === 3 ? hex[1].replace(/./g, "$&$&") : hex[1];
-    return [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16)) as [
-      number,
-      number,
-      number,
-    ];
-  }
-  const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/.exec(value);
-  return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : null;
-}
-
-/** Any CSS colour to sRGB, through a canvas when it is not already hex
- *  or rgb() ("navy", "hsl(…)"). Null when the browser cannot say. */
-function toRgb(color: string): [number, number, number] | null {
-  const direct = parseRgb(color);
-  if (direct) return direct;
-  try {
-    const context = document.createElement("canvas").getContext("2d");
-    if (!context) return null;
-    context.fillStyle = "#000";
-    context.fillStyle = color;
-    return parseRgb(String(context.fillStyle));
-  } catch {
-    return null;
-  }
-}
-
-const luminance = ([r, g, b]: [number, number, number]): number => {
-  const channel = (c: number) => {
-    const s = c / 255;
-    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-  };
-  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
-};
-
-/** Black or white, whichever has the higher WCAG contrast on `color`. */
-export function readableTextOn(color: string): string {
-  const rgb = toRgb(color);
-  if (!rgb) return CARBON;
-  const l = luminance(rgb);
-  const onWhite = 1.05 / (l + 0.05);
-  const onCarbon = (l + 0.05) / (luminance([10, 12, 11]) + 0.05);
-  return onWhite > onCarbon ? WHITE : CARBON;
-}
-
 /* ── Rendering ────────────────────────────────────────────────────── */
 
 const el = <K extends keyof HTMLElementTagNameMap>(
@@ -200,7 +151,7 @@ const icon = (svg: string, className = "icon"): HTMLSpanElement => {
 };
 
 function buildStack(props: ConnectButtonProps): HTMLElement | null {
-  const platforms = normalizePlatforms(props.platforms);
+  const platforms = normalizePlatforms(props.logos ?? props.platforms);
   if (platforms.length === 0) return null;
   const stack = el("span", "stack");
   stack.setAttribute("aria-hidden", "true");
@@ -230,7 +181,7 @@ const flowOptions = (
   handlers: Pick<OneConnectFlowOptions, "onSuccess" | "onError" | "onCancel">,
 ): OneConnectFlowOptions => ({
   authorizeUrl: props.authorizeUrl,
-  connectTheme: props.connectTheme ?? props.appTheme,
+  connectTheme: props.connectTheme,
   ...handlers,
 });
 
@@ -311,22 +262,6 @@ export function renderConnectButton(
           ? (props.connectedLabel ?? "Connected")
           : (props.label ?? "Connect your apps");
 
-    // Colour props travel as custom properties on the button inside the
-    // shadow root, set through the CSSOM: allowed under a strict CSP, and
-    // never written to the host, whose attributes belong to whoever
-    // rendered it (a server-rendered page must hydrate unchanged).
-    if (variant === "accent") {
-      const accent = props.accentColor?.trim() || LIME;
-      button.style.setProperty("--one-connect-accent", accent);
-      button.style.setProperty(
-        "--one-connect-accent-fg",
-        readableTextOn(accent),
-      );
-    } else {
-      button.style.removeProperty("--one-connect-accent");
-      button.style.removeProperty("--one-connect-accent-fg");
-    }
-
     button.dataset.variant = variant;
     button.dataset.size = props.size ?? "md";
     button.dataset.theme = props.theme ?? "light";
@@ -438,6 +373,7 @@ export function mountConnectButton(
 
 const ATTRIBUTES = [
   "authorize-url",
+  "logos",
   "platforms",
   "connected",
   "disabled",
@@ -446,8 +382,6 @@ const ATTRIBUTES = [
   "full-width",
   "theme",
   "connect-theme",
-  "app-theme",
-  "accent-color",
   "label",
   "connected-label",
   "description",
@@ -510,17 +444,16 @@ export function registerConnectButton(): void {
     private props(authorizeUrl: string): ConnectButtonProps {
       return {
         authorizeUrl,
-        platforms: parsePlatformsAttribute(this.getAttribute("platforms")),
+        logos: parsePlatformsAttribute(
+          this.getAttribute("logos") ?? this.getAttribute("platforms"),
+        ),
         connected: flag(this, "connected"),
         disabled: flag(this, "disabled"),
         variant: attributeAs(this, "variant", ["default", "accent", "block"]),
         size: attributeAs(this, "size", ["sm", "md", "lg"]),
         fullWidth: flag(this, "full-width"),
         theme: attributeAs(this, "theme", ["light", "dark", "auto"]),
-        connectTheme:
-          attributeAs(this, "connect-theme", ["light", "dark"]) ??
-          attributeAs(this, "app-theme", ["light", "dark"]),
-        accentColor: this.getAttribute("accent-color") ?? undefined,
+        connectTheme: attributeAs(this, "connect-theme", ["light", "dark"]),
         label: this.getAttribute("label") ?? undefined,
         connectedLabel: this.getAttribute("connected-label") ?? undefined,
         description: this.getAttribute("description") ?? undefined,

package/src/flow.ts

@@ -92,7 +92,7 @@ function bindPageshow(): void {
 }
 
 const authorizeUrlFor = (options: OneConnectFlowOptions): string => {
-  const theme = options.connectTheme ?? options.appTheme;
+  const theme = options.connectTheme;
   try {
     const url = new URL(options.authorizeUrl, window.location.origin);
     if (theme) url.hash = `${THEME_PARAM}=${theme}`;

package/src/index.ts

@@ -6,6 +6,8 @@ export {
 } from "./button";
 export type {
   ConnectButtonHandle,
+  ConnectButtonLogo,
+  ConnectButtonLogoInput,
   ConnectButtonPlatform,
   ConnectButtonPlatformInput,
   ConnectButtonProps,

package/src/platforms.ts

@@ -94,7 +94,7 @@ export function normalizePlatforms(
 }
 
 /**
- * The `platforms` attribute on <one-connect-button>: a comma list of
+ * The `logos` attribute on <one-connect-button>: a comma list of
  * slugs ("stripe, notion") or, for overrides, a JSON array of
  * {slug, name, imageUrl} objects.
  */

package/src/react.ts

@@ -30,15 +30,14 @@ export interface ConnectButtonProps extends ConnectButtonCoreProps {
 const visualKey = (props: ConnectButtonCoreProps): string =>
   JSON.stringify([
     props.authorizeUrl,
-    props.platforms ?? [],
+    props.logos ?? props.platforms ?? [],
     props.connected,
     props.disabled,
     props.variant,
     props.size,
     props.fullWidth,
     props.theme,
-    props.connectTheme ?? props.appTheme,
-    props.accentColor,
+    props.connectTheme,
     props.label,
     props.connectedLabel,
     props.description,