@ekanos/sdk 0.2.0 → 0.4.0

package/README.md

@@ -1,7 +1,7 @@
 # @ekanos/sdk
 
 The official SDK for building Ekanos integrations — the packages that add
-widgets, assistant tools, and event handlers to a Fusion dashboard.
+widgets, assistant tools, and event handlers to an Ekanos dashboard.
 
 **Start here.** This README is the complete authoring reference: everything you
 can declare, with a worked example for each surface. There is no separate docs
@@ -11,7 +11,7 @@ where to say so.
 The other packages, so you know when to leave this page: **`@ekanos/cli`** is
 the toolchain (`init`, `validate`, `dev`, `test`) and owns `ekanos.json`;
 **`@ekanos/harness`** is the local dev harness that renders your surfaces in
-real Fusion chrome; **`@ekanos/ui`** is the component library; and
+real Ekanos chrome; **`@ekanos/ui`** is the component library; and
 **`@ekanos/integration-schema`** is the validation contract underneath this
 one. Each has its own README.
 
@@ -409,7 +409,7 @@ const apiKey = await ctx.secrets.get(ACME_API_KEY);
 
 ### `tools`
 
-Tools are what the Fusion assistant (and, where the host allows it, the workflow
+Tools are what the Ekanos assistant (and, where the host allows it, the workflow
 engine) can call. Each declares a name, a description the model reads, an
 optional JSON-Schema parameter object, and an async `run`.
 
@@ -489,7 +489,15 @@ export function CurrentWeatherWidget({ accountId }: IntegrationComponentProps) {
   const query = useCurrentWeather(accountId, ctx?.state.state === 'active');
 
   return (
-    <Widget.DataState loading={query.isLoading} error={query.isError}>
+    <Widget.DataState
+      loading={query.isLoading}
+      error={query.isError}
+      // Optional. They add the header menu's Refresh item, a Try again
+      // button on the error view, and an "Updated …" footer.
+      onRefresh={() => void query.refetch()}
+      refreshing={query.isFetching}
+      updatedAt={query.dataUpdatedAt}
+    >
       <Widget.Card>
         <Widget.Header title="Current conditions" />
         <Widget.Loading />
@@ -549,7 +557,7 @@ Widget settings live in `ctx.storage`, which is server-side, so a widget reads
 them back over HTTP with `fetchIntegrationStorage()` from `@ekanos/sdk/hooks` —
 subject to `clientReadable`, above.
 
-To render a widget anywhere other than the Fusion dashboard — your own app, a
+To render a widget anywhere other than the Ekanos dashboard — your own app, a
 story, a component test — wrap it in `WidgetPreviewProvider`, which fills the
 same `WidgetContext` the host fills, with local state and no persistence:
 
@@ -620,9 +628,17 @@ product — the logo is assigned host-side, not declared here.
 
 ### `components.activationForm`
 
-What a user fills in to connect. `BaseActivationForm` owns the dialog chrome,
-the submit button, and the error/success states; you supply the
-`react-hook-form` instance and the fields.
+What a user fills in to connect — **only** that. The host renders a small
+frame around your form: your product's logo, name and one-line summary, then
+your form. Nothing sits between the two. The host also owns the success
+moment: it closes and toasts, naming the workspace your widgets landed in.
+`BaseActivationForm` renders the action — **Connect** and **Cancel**
+right-aligned under your fields, or, for a form with no fields, a single
+full-width button — plus "Connecting…" while busy and the inline error. You
+supply the `react-hook-form` instance and the fields. Nothing else belongs
+in a form: no title, feature list, permission badge, connected banner or
+success screen. The connect step is kept to the one decision the person
+already made by clicking your product.
 
 ```tsx
 'use client';
@@ -654,7 +670,6 @@ export function AcmePaymentsActivationForm({
   inline = false,          // pass this through — see below
 }: ActivationFormProps) {
   const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
 
   const form = useForm({ resolver: zodResolver(ActivationSchema),
                          defaultValues: { [ACME_API_KEY]: '', merchantId: '' } });
@@ -670,7 +685,8 @@ export function AcmePaymentsActivationForm({
         integrationSlug: 'acme-payments',
         activationData: data,
       });
-      setSuccess(true);
+      // Report once, straight to the host. It closes and toasts.
+      onSuccess?.({ success: true, externalId: data.merchantId as string });
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : 'Could not connect.');
     }
@@ -686,15 +702,6 @@ export function AcmePaymentsActivationForm({
       onSubmit={handleSubmit}
       isLoading={isLoading}
       error={error}
-      success={success}
-      successTitle="Acme Payments is connected"
-      onSuccessClose={() => onSuccess?.({
-        success: true,
-        configData: { merchantId: form.getValues('merchantId') },
-        externalId: form.getValues('merchantId'),
-      })}
-      submitButtonText="Connect Acme Payments"
-      submitButtonLoadingText="Connecting…"
     >
       <FormField control={form.control} name={ACME_API_KEY} render={({ field }) => (
         <FormItem>
@@ -731,36 +738,70 @@ Three things worth knowing:
   export const ACME_API_KEY = 'acme_api_key';
   ```
 
-  Values you want back on the client instead go in `configData` on the
-  `ActivationResult` you hand `onSuccess`.
+  Values you want persisted as **settings** (not secrets) go in `configData`
+  on the `ActivationResult` you hand `onSuccess`, keyed by the `settings/*`
+  storage keys you declared. Never put raw field values there: the host
+  rejects any key you did not declare, and the user sees a warning that
+  "some settings could not be saved".
 - **`useActivateIntegration` needs the host's injected actions.** It reads them
   from `IntegrationActivationProvider`, which the host mounts. Outside the host
   — in the dev harness, or your own app — mount that provider yourself, or the
   hook has nothing to call.
 
-`OAuthActivationForm` is the connect-button variant for OAuth integrations, and
+`OAuthActivationForm` is the one-button variant for OAuth integrations: it
+renders **Continue with Acme** with a line explaining the user will sign in on
+Acme's site and come straight back, then activates on return. Its `config`
+needs only `slug` and `displayName` (plus `connectPath`, `errorParam` or
+`autoActivateOnConnect: false` when you genuinely need them).
 `useOAuthConnectionStatus()` reports whether the account is connected.
 
+Both primitives accept a `footnote` — one quiet line under the action row for
+what happens next — and nothing else decorative.
+
+**Reconnecting.** The host mounts your form a second time, with `reconnect`
+set, when a connected integration needs its credentials renewed — after a
+failed health check, or when the owner chooses Reconnect.
+`OAuthActivationForm` handles it for you: the button reads **Reconnect with
+Acme** and always goes through sign-in again, even with a token stored. A
+credential form needs nothing special: it collects new values and activates
+again, which replaces the old ones and resets the integration's health to
+unknown until the next check. A bespoke OAuth form should treat `reconnect`
+the same way — send the person through sign-in rather than skipping it
+because a token exists.
+
+**Behavior change for existing OAuth forms:** `OAuthActivationForm`'s
+`children` render only **after** the user has signed in, and only for a form
+with `autoActivateOnConnect: false` is there a moment to see them. They are
+for post-sign-in fields, not for feature lists or permission copy — the
+connect step carries neither. The primitive does not read those
+fields: a form that needs values after sign-in owns its own `useForm` on
+`BaseActivationForm` and saves them before activating (the GitHub form is
+the reference). If your form passed such a child, delete it; the same copy
+belongs in `permissions` / `capabilities`.
+
 A form is optional. Omit it and the host renders a generic one — a plain field
 per value it needs — rather than nothing.
 
 ### `capabilities` and `permissions`
 
-Both are copy for the integration detail page, and both are pure data. **Every
-string here is read by the person connecting the integration** — they render on
-the activation dialog, not just in a catalogue listing. Write `detail` as a
-sentence you would be happy for a customer's security reviewer to read, because
-that is who reads it.
+Both are pure data describing what your integration does and touches. They
+are **not** shown on the connect dialog — that step is only your name,
+summary and form. They appear in the platform's product catalog, where a
+source's administrators review an integration before offering it to teams.
+Write `detail` as a sentence you would be happy for a customer's security
+reviewer to read, because that is who reads it. For an OAuth integration,
+make them match the scopes you request: the provider's consent screen is
+what the person connecting actually sees.
 
-Exactly what appears, so you can write to the shape:
+The shape each entry takes:
 
 | Section | Renders |
 |---|---|
 | **What it does** | `capability.label`, then ` — ` + `capability.description` when present. `capability.icon` is **not** rendered here |
 | **What it can access** | `permission.label`, a badge reading `Read` or `Write` from `permission.type`, then `permission.detail` on the line below |
 
-Both sections are omitted entirely when their array is empty. `type` drives
-only the badge — it does not reorder or group anything.
+An empty array simply declares nothing. `type` drives only the Read/Write
+label — it does not reorder or group anything.
 
 ```ts
 capabilities: [
@@ -810,7 +851,8 @@ export const paymentUpdatedWebhook: PartnerWebhookDeclaration<MyStorage> = {
   payloadSchema: PaymentUpdatedPayloadSchema,
 
   // How the TRANSPORT verifies. `'none'` states explicitly that the source
-  // is unsigned. Your handler never checks a signature.
+  // is unsigned. Your handler never checks a signature. Add `scheme` when the
+  // provider is not a plain HMAC-SHA256 digest of the body — see below.
   signature: { header: 'x-acme-signature', secretName: 'acme_webhook_secret' },
 
   // Seeds the harness's payload editor and documents the shape beside the
@@ -871,6 +913,44 @@ Signature verification is the transport's job in every environment — the host
 ingress enforces it, the local harness logs it as skipped. Do not verify it
 yourself; you would be verifying a header the transport already consumed.
 
+#### `signature.scheme` — when the provider is not a plain body digest
+
+Without `scheme`, the transport expects the header to be an HMAC-SHA256 of the
+raw body, hex or base64, optionally labelled `sha256=` (GitHub, Linear).
+Most other providers differ in one of three ways: they
+pack the digest into `k=v` pairs, they sign a timestamp along with the body, or
+they use SHA-1. `scheme` describes that declaratively; the transport does the
+arithmetic and your handler still contains no verification code.
+
+| Provider | `scheme` |
+|---|---|
+| Stripe, Calendly (`t=…,v1=…`, HMAC over `"<t>.<body>"`) | `{ format: 'keyed', digestKey: 'v1', timestampKey: 't', signedPayload: '{timestamp}.{body}', toleranceSeconds: 300 }` |
+| Retell (`v=<unix_ms>,d=<hex>`, HMAC over `body + timestamp`) | `{ format: 'keyed', digestKey: 'd', timestampKey: 'v', signedPayload: '{body}{timestamp}' }` |
+| Intercom (`X-Hub-Signature: sha1=…`) | `{ algorithm: 'sha1' }` |
+| Svix-style single signature (`svix-timestamp` header, HMAC over `"<ts>.<body>"`) | `{ timestampHeader: 'svix-timestamp', signedPayload: '{timestamp}.{body}' }` |
+
+Fields: `algorithm` (`'sha256'` default, or `'sha1'`), `format` (`'digest'`
+default, or `'keyed'` for `k=v,k=v` headers), `digestKey` / `timestampKey`
+(which pairs, keyed only), `timestampHeader` (a separate header instead of a
+pair), `signedPayload` (a template over `{body}` and `{timestamp}`; default
+`'{body}'`), `toleranceSeconds` (replay window whenever a timestamp source is
+declared; default 300, `0` disables). Seconds and milliseconds are both
+accepted from the sender. `defineIntegration()` rejects a scheme that cannot be
+verified — a keyed format with no `digestKey`, a `{timestamp}` with no source,
+a timestamp source whose value is **not** in `signedPayload` (a replay window
+over an unsigned timestamp protects nothing), a transport header name such as
+`authorization` — so the mistake surfaces before the first delivery, not as a
+401 on it. Linear's replay guard is a field inside the signed body, so for
+Linear you omit `scheme` and check `webhookTimestamp` in the handler.
+
+Two things the scheme never does: it never takes the algorithm from the
+header (a `sha1=` label under a `sha256` declaration fails), and it never lets
+a stale delivery through because the digest was right — freshness is checked
+first. Svix-style multi-signature headers (`v1,<b64> v1,<b64>`, space-separated
+with a `whsec_` base64 secret) are not covered yet; declare `'none'` for those
+and say so in the description. Slack (`v0=` label over `v0:{ts}:{body}`) is
+not covered either.
+
 ### `schedules`
 
 A cron-driven run. Same handler shape, same `ctx`.
@@ -1031,7 +1111,7 @@ either be ignored or aim the host's callback somewhere it should not go.
 Register this with your provider, against whichever host will run the flow:
 
 ```
-https://<your-fusion-host>/api/integrations/<your-slug>/callback
+https://<your-ekanos-host>/api/integrations/<your-slug>/callback
 ```
 
 The dev harness does not serve that route, so you cannot complete a round trip
@@ -1189,7 +1269,7 @@ and the host adapts the definition internally.
 
 ### Styling
 
-`@ekanos/ui` components emit Tailwind class strings against Fusion's semantic
+`@ekanos/ui` components emit Tailwind class strings against Ekanos's semantic
 tokens, and icons are Font Awesome glyphs the host loads. Import
 `@ekanos/ui/styles.css` (or the narrower `tokens.css` / `theme.css` /
 `base.css`) to get the token layer — that also draws a `□` placeholder for

package/api-report.md

@@ -9,7 +9,7 @@ This is the complete surface of every entrypoint. The authoring guide
 for these symbols is README.md. Entrypoints marked WORKSPACE-ONLY are
 not reachable from a published install — see the note in each section.
 
-Total exported names: **160** across 7 entrypoints.
+Total exported names: **171** across 7 entrypoints.
 
 ## `@ekanos/sdk` (32 exports)
 
@@ -48,7 +48,7 @@ Total exported names: **160** across 7 entrypoints.
 | `WidgetSuggestedPrompt` | interface |
 | `WorkspaceTargetDefinition` | interface |
 
-## `@ekanos/sdk/components` (24 exports)
+## `@ekanos/sdk/components` (25 exports)
 
 | Export | Kind |
 | --- | --- |
@@ -68,6 +68,7 @@ Total exported names: **160** across 7 entrypoints.
 | `WidgetAskBar` | function |
 | `WidgetContext` | variable |
 | `WidgetContextValue` | interface |
+| `WidgetData` | interface |
 | `WidgetDataLoading` | function |
 | `WidgetHealth` | interface |
 | `WidgetMeta` | interface |
@@ -77,7 +78,7 @@ Total exported names: **160** across 7 entrypoints.
 | `WidgetState` | interface |
 | `currentReturnPath` | function |
 
-## `@ekanos/sdk/hooks` (37 exports)
+## `@ekanos/sdk/hooks` (43 exports)
 
 | Export | Kind |
 | --- | --- |
@@ -89,6 +90,9 @@ Total exported names: **160** across 7 entrypoints.
 | `DeactivateIntegrationAction` | type alias |
 | `DeactivateIntegrationInput` | interface |
 | `FetchIntegrationStorageOptions` | interface |
+| `IntegrationActionError` | class |
+| `IntegrationActionErrorCode` | type alias |
+| `IntegrationActionErrorDetails` | interface |
 | `IntegrationActionResult` | type alias |
 | `IntegrationActivationActions` | interface |
 | `IntegrationActivationDataProvider` | function |
@@ -97,6 +101,7 @@ Total exported names: **160** across 7 entrypoints.
 | `OAuthErrorParam` | interface |
 | `PartnerOAuthPathOptions` | interface |
 | `PublishEventInput` | interface |
+| `UseIntegrationActionOptions` | interface |
 | `UseOAuthConnectionStatusOptions` | interface |
 | `WidgetEvent` | interface |
 | `WidgetEventFilter` | interface |
@@ -104,6 +109,7 @@ Total exported names: **160** across 7 entrypoints.
 | `WidgetEventSubscriber` | type alias |
 | `createPartnerConnectionCheck` | function |
 | `fetchIntegrationStorage` | function |
+| `integrationActionUrl` | function |
 | `integrationStorageUrl` | function |
 | `partnerOAuthConnectPath` | function |
 | `partnerOAuthErrorParam` | function |
@@ -112,6 +118,7 @@ Total exported names: **160** across 7 entrypoints.
 | `useActivationData` | function |
 | `useAskAssistant` | function |
 | `useDeactivateIntegration` | function |
+| `useIntegrationAction` | function |
 | `useIntegrationFetch` | function |
 | `useOAuthConnectionStatus` | function |
 | `useOAuthWidgetGate` | function |
@@ -184,10 +191,11 @@ Total exported names: **160** across 7 entrypoints.
 | `invokeSchedule` | function |
 | `invokeWebhook` | function |
 
-## `@ekanos/sdk/integration` (26 exports)
+## `@ekanos/sdk/integration` (30 exports)
 
 | Export | Kind |
 | --- | --- |
+| `DEFAULT_SIGNATURE_TOLERANCE_SECONDS` | variable |
 | `DefinitionCollisionInput` | interface |
 | `FirstPartyInventory` | interface |
 | `IntegrationCapabilityDeclaration` | type alias |
@@ -199,18 +207,21 @@ Total exported names: **160** across 7 entrypoints.
 | `OAuthProviderDeclaration` | interface |
 | `OAuthTokens` | interface |
 | `OnActivateHandler` | type alias |
+| `PartnerActionDeclaration` | interface |
 | `PartnerOAuthDeclaration` | interface |
 | `PartnerScheduleDeclaration` | interface |
 | `PartnerToolModule` | interface |
 | `PartnerToolParameters` | type alias |
 | `PartnerWebhookDeclaration` | interface |
 | `PartnerWidgetDeclaration` | type alias |
+| `PublicActionError` | class |
 | `ScheduleInvocation` | interface |
 | `ScheduleResult` | interface |
 | `ToolClassificationProposal` | type alias |
 | `WebhookEvent` | interface |
 | `WebhookResult` | interface |
 | `WebhookSignatureDeclaration` | type alias |
+| `WebhookSignatureScheme` | interface |
 | `defineIntegration` | function |
 | `parseCronExpression` | function |
 | `validateIntegrationDefinitions` | function |

package/dist/components/base-activation-dialog.d.ts

@@ -16,15 +16,25 @@ interface BaseActivationDialogProps {
     inline?: boolean;
 }
 export declare function BaseActivationDialog({ isOpen, onClose, title, description, children, isLoading, error, success, successTitle, successMessage, onSuccessClose, maxWidth, inline, }: BaseActivationDialogProps): import("react").JSX.Element;
-export declare function ActivationInline({ isLoading, error, success, successTitle, successMessage, onClose, children, }: {
+/**
+ * The form's body when it sits inside chrome the HOST owns (the connect
+ * dialog, the workspace notice, first-use). The host already shows the
+ * integration's name, what it does and what it can access, and it owns
+ * the success moment (it closes and toasts) — so this renders the fields,
+ * the error, and nothing else.
+ *
+ * `success` is a hand-off, not a screen: the moment it turns true,
+ * `onSuccessClose` runs once, which is what lets a form written for the
+ * old "Continue" panel finish the same way as one that reports success
+ * directly. Nothing renders after it fires; the host takes over.
+ */
+export declare function ActivationInline({ isLoading, error, success, onSuccessClose, children, }: {
     isLoading?: boolean;
     error?: string | null;
     success?: boolean;
-    successTitle?: string;
-    successMessage?: string;
-    onClose: () => void;
+    onSuccessClose?: () => void;
     children: ReactNode;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare function ActivationDialog({ isOpen, onClose, title, description, children, isLoading, error, success, successTitle, successMessage, maxWidth, }: {
     isOpen: boolean;
     onClose: () => void;

package/dist/components/base-activation-dialog.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { Alert, AlertDescription } from '@ekanos/ui/alert';
 import { Button } from '@ekanos/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@ekanos/ui/dialog';
@@ -12,10 +13,10 @@ function SuccessContent({ successTitle = 'Integration Activated!', successMessag
     return (_jsxs("div", { className: "flex flex-col items-center space-y-4 py-6", children: [_jsx("div", { className: "bg-success/10 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(Icon, { name: "fa-light fa-circle-check", className: "text-success h-8 w-8" }) }), _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-lg font-semibold", children: successTitle }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: successMessage })] }), showSeparator && _jsx(Separator, {}), _jsxs("div", { className: "flex gap-2", children: [showSeparator && (_jsx(Button, { variant: "outline", onClick: onClose, children: _jsx(Trans, { i18nKey: "common:stayOnMarketplace", defaults: "Stay on Marketplace" }) })), _jsx(Button, { onClick: onClose, children: _jsx(Trans, { i18nKey: "common:continue", defaults: "Continue" }) })] })] }));
 }
 function ErrorAlert({ error }) {
-    return (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) }));
+    return (_jsx(Alert, { variant: "destructive", role: "alert", children: _jsx(AlertDescription, { children: error }) }));
 }
 function LoadingOverlay() {
-    return (_jsx("div", { className: "bg-background/80 fixed inset-0 z-[1000] flex items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Icon, { name: "fa-light fa-spinner", className: "text-primary h-8 w-8 animate-spin" }), _jsx("span", { className: "text-muted-foreground text-sm", children: "Loading..." })] }) }));
+    return (_jsx("div", { className: "bg-background/80 fixed inset-0 z-[1000] flex items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Icon, { name: "fa-light fa-spinner-third", className: "text-primary h-8 w-8 animate-spin" }), _jsx("span", { className: "text-muted-foreground text-sm", children: "Loading..." })] }) }));
 }
 export function BaseActivationDialog({ isOpen, onClose, title, description, children, isLoading = false, error = null, success = false, successTitle, successMessage, onSuccessClose, maxWidth = 'sm:max-w-[600px]', inline = false, }) {
     const handleClose = () => {
@@ -27,13 +28,38 @@ export function BaseActivationDialog({ isOpen, onClose, title, description, chil
         }
     };
     if (inline) {
-        return (_jsx(ActivationInline, { isLoading: isLoading, error: error, success: success, successTitle: successTitle, successMessage: successMessage, onClose: handleClose, children: children }));
+        return (_jsx(ActivationInline, { isLoading: isLoading, error: error, success: success, onSuccessClose: success ? handleClose : undefined, children: children }));
     }
     return (_jsx(ActivationDialog, { isOpen: isOpen, onClose: handleClose, title: title, description: description, isLoading: isLoading, error: error, success: success, successTitle: successTitle, successMessage: successMessage, maxWidth: maxWidth, children: children }));
 }
 // --- Explicit Variants ---
-export function ActivationInline({ isLoading = false, error = null, success = false, successTitle, successMessage, onClose, children, }) {
-    return (_jsxs("div", { className: cn('space-y-4', isLoading && 'pointer-events-none opacity-60'), "aria-busy": isLoading, children: [_jsx(If, { condition: !!error, children: _jsx(ErrorAlert, { error: error }) }), _jsx(If, { condition: success, fallback: children, children: _jsx(SuccessContent, { successTitle: successTitle, successMessage: successMessage, onClose: onClose }) })] }));
+/**
+ * The form's body when it sits inside chrome the HOST owns (the connect
+ * dialog, the workspace notice, first-use). The host already shows the
+ * integration's name, what it does and what it can access, and it owns
+ * the success moment (it closes and toasts) — so this renders the fields,
+ * the error, and nothing else.
+ *
+ * `success` is a hand-off, not a screen: the moment it turns true,
+ * `onSuccessClose` runs once, which is what lets a form written for the
+ * old "Continue" panel finish the same way as one that reports success
+ * directly. Nothing renders after it fires; the host takes over.
+ */
+export function ActivationInline({ isLoading = false, error = null, success = false, onSuccessClose, children, }) {
+    const handedOff = useRef(false);
+    // Hands the success state to the host exactly once. An effect is the
+    // right tool here: this reacts to a state transition that the form's own
+    // submit handler set, and the host callback it calls navigates.
+    useEffect(() => {
+        if (!success || !onSuccessClose || handedOff.current)
+            return;
+        handedOff.current = true;
+        onSuccessClose();
+    }, [success, onSuccessClose]);
+    if (success) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('flex flex-col gap-4', isLoading && 'opacity-70'), "aria-busy": isLoading, children: [_jsx(If, { condition: !!error, children: _jsx(ErrorAlert, { error: error }) }), children] }));
 }
 export function ActivationDialog({ isOpen, onClose, title, description, children, isLoading = false, error = null, success = false, successTitle, successMessage, maxWidth = 'sm:max-w-[600px]', }) {
     return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { className: `${maxWidth} max-h-[80vh] overflow-y-auto`, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(If, { condition: !!error, children: _jsx(ErrorAlert, { error: error }) }), _jsx(If, { condition: success, fallback: children, children: _jsx(SuccessContent, { successTitle: successTitle, successMessage: successMessage, onClose: onClose, showSeparator: true }) }), isLoading && _jsx(LoadingOverlay, {})] }) }));

package/dist/components/base-activation-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-activation-dialog.js","sourceRoot":"","sources":["../../src/components/base-activation-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\n\nimport { Alert, AlertDescription } from '@ekanos/ui/alert';\nimport { Button } from '@ekanos/ui/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@ekanos/ui/dialog';\nimport { Icon } from '@ekanos/ui/icon';\nimport { If } from '@ekanos/ui/if';\nimport { Separator } from '@ekanos/ui/separator';\nimport { Trans } from '@ekanos/ui/trans';\nimport { cn } from '@ekanos/ui/utils';\n\ninterface BaseActivationDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  description: string;\n  children: ReactNode;\n  isLoading?: boolean;\n  error?: string | null;\n  success?: boolean;\n  successTitle?: string;\n  successMessage?: string;\n  onSuccessClose?: () => void;\n  maxWidth?: string;\n  /** @deprecated Use `ActivationInline` instead for inline rendering */\n  inline?: boolean;\n}\n\nfunction SuccessContent({\n  successTitle = 'Integration Activated!',\n  successMessage = 'Your integration is now active and ready to use.',\n  onClose,\n  showSeparator = false,\n}: {\n  successTitle?: string;\n  successMessage?: string;\n  onClose: () => void;\n  showSeparator?: boolean;\n}) {\n  return (\n    <div className=\"flex flex-col items-center space-y-4 py-6\">\n      <div className=\"bg-success/10 flex h-16 w-16 items-center justify-center rounded-full\">\n        <Icon\n          name=\"fa-light fa-circle-check\"\n          className=\"text-success h-8 w-8\"\n        />\n      </div>\n      <div className=\"text-center\">\n        <h3 className=\"text-lg font-semibold\">{successTitle}</h3>\n        <p className=\"text-muted-foreground mt-1 text-sm\">{successMessage}</p>\n      </div>\n      {showSeparator && <Separator />}\n      <div className=\"flex gap-2\">\n        {showSeparator && (\n          <Button variant=\"outline\" onClick={onClose}>\n            <Trans\n              i18nKey=\"common:stayOnMarketplace\"\n              defaults=\"Stay on Marketplace\"\n            />\n          </Button>\n        )}\n        <Button onClick={onClose}>\n          <Trans i18nKey=\"common:continue\" defaults=\"Continue\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction ErrorAlert({ error }: { error: string }) {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertDescription>{error}</AlertDescription>\n    </Alert>\n  );\n}\n\nfunction LoadingOverlay() {\n  return (\n    <div className=\"bg-background/80 fixed inset-0 z-[1000] flex items-center justify-center\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <Icon\n          name=\"fa-light fa-spinner\"\n          className=\"text-primary h-8 w-8 animate-spin\"\n        />\n        <span className=\"text-muted-foreground text-sm\">Loading...</span>\n      </div>\n    </div>\n  );\n}\n\nexport function BaseActivationDialog({\n  isOpen,\n  onClose,\n  title,\n  description,\n  children,\n  isLoading = false,\n  error = null,\n  success = false,\n  successTitle,\n  successMessage,\n  onSuccessClose,\n  maxWidth = 'sm:max-w-[600px]',\n  inline = false,\n}: BaseActivationDialogProps) {\n  const handleClose = () => {\n    if (success && onSuccessClose) {\n      onSuccessClose();\n    } else {\n      onClose();\n    }\n  };\n\n  if (inline) {\n    return (\n      <ActivationInline\n        isLoading={isLoading}\n        error={error}\n        success={success}\n        successTitle={successTitle}\n        successMessage={successMessage}\n        onClose={handleClose}\n      >\n        {children}\n      </ActivationInline>\n    );\n  }\n\n  return (\n    <ActivationDialog\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={title}\n      description={description}\n      isLoading={isLoading}\n      error={error}\n      success={success}\n      successTitle={successTitle}\n      successMessage={successMessage}\n      maxWidth={maxWidth}\n    >\n      {children}\n    </ActivationDialog>\n  );\n}\n\n// --- Explicit Variants ---\n\nexport function ActivationInline({\n  isLoading = false,\n  error = null,\n  success = false,\n  successTitle,\n  successMessage,\n  onClose,\n  children,\n}: {\n  isLoading?: boolean;\n  error?: string | null;\n  success?: boolean;\n  successTitle?: string;\n  successMessage?: string;\n  onClose: () => void;\n  children: ReactNode;\n}) {\n  return (\n    <div\n      className={cn('space-y-4', isLoading && 'pointer-events-none opacity-60')}\n      aria-busy={isLoading}\n    >\n      <If condition={!!error}>\n        <ErrorAlert error={error!} />\n      </If>\n      <If condition={success} fallback={children}>\n        <SuccessContent\n          successTitle={successTitle}\n          successMessage={successMessage}\n          onClose={onClose}\n        />\n      </If>\n    </div>\n  );\n}\n\nexport function ActivationDialog({\n  isOpen,\n  onClose,\n  title,\n  description,\n  children,\n  isLoading = false,\n  error = null,\n  success = false,\n  successTitle,\n  successMessage,\n  maxWidth = 'sm:max-w-[600px]',\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  description: string;\n  children: ReactNode;\n  isLoading?: boolean;\n  error?: string | null;\n  success?: boolean;\n  successTitle?: string;\n  successMessage?: string;\n  maxWidth?: string;\n}) {\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className={`${maxWidth} max-h-[80vh] overflow-y-auto`}>\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n\n        <If condition={!!error}>\n          <ErrorAlert error={error!} />\n        </If>\n\n        <If condition={success} fallback={children}>\n          <SuccessContent\n            successTitle={successTitle}\n            successMessage={successMessage}\n            onClose={onClose}\n            showSeparator\n          />\n        </If>\n\n        {isLoading && <LoadingOverlay />}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}
+{"version":3,"file":"base-activation-dialog.js","sourceRoot":"","sources":["../../src/components/base-activation-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { Alert, AlertDescription } from '@ekanos/ui/alert';\nimport { Button } from '@ekanos/ui/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@ekanos/ui/dialog';\nimport { Icon } from '@ekanos/ui/icon';\nimport { If } from '@ekanos/ui/if';\nimport { Separator } from '@ekanos/ui/separator';\nimport { Trans } from '@ekanos/ui/trans';\nimport { cn } from '@ekanos/ui/utils';\n\ninterface BaseActivationDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  description: string;\n  children: ReactNode;\n  isLoading?: boolean;\n  error?: string | null;\n  success?: boolean;\n  successTitle?: string;\n  successMessage?: string;\n  onSuccessClose?: () => void;\n  maxWidth?: string;\n  /** @deprecated Use `ActivationInline` instead for inline rendering */\n  inline?: boolean;\n}\n\nfunction SuccessContent({\n  successTitle = 'Integration Activated!',\n  successMessage = 'Your integration is now active and ready to use.',\n  onClose,\n  showSeparator = false,\n}: {\n  successTitle?: string;\n  successMessage?: string;\n  onClose: () => void;\n  showSeparator?: boolean;\n}) {\n  return (\n    <div className=\"flex flex-col items-center space-y-4 py-6\">\n      <div className=\"bg-success/10 flex h-16 w-16 items-center justify-center rounded-full\">\n        <Icon\n          name=\"fa-light fa-circle-check\"\n          className=\"text-success h-8 w-8\"\n        />\n      </div>\n      <div className=\"text-center\">\n        <h3 className=\"text-lg font-semibold\">{successTitle}</h3>\n        <p className=\"text-muted-foreground mt-1 text-sm\">{successMessage}</p>\n      </div>\n      {showSeparator && <Separator />}\n      <div className=\"flex gap-2\">\n        {showSeparator && (\n          <Button variant=\"outline\" onClick={onClose}>\n            <Trans\n              i18nKey=\"common:stayOnMarketplace\"\n              defaults=\"Stay on Marketplace\"\n            />\n          </Button>\n        )}\n        <Button onClick={onClose}>\n          <Trans i18nKey=\"common:continue\" defaults=\"Continue\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction ErrorAlert({ error }: { error: string }) {\n  return (\n    <Alert variant=\"destructive\" role=\"alert\">\n      <AlertDescription>{error}</AlertDescription>\n    </Alert>\n  );\n}\n\nfunction LoadingOverlay() {\n  return (\n    <div className=\"bg-background/80 fixed inset-0 z-[1000] flex items-center justify-center\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <Icon\n          name=\"fa-light fa-spinner-third\"\n          className=\"text-primary h-8 w-8 animate-spin\"\n        />\n        <span className=\"text-muted-foreground text-sm\">Loading...</span>\n      </div>\n    </div>\n  );\n}\n\nexport function BaseActivationDialog({\n  isOpen,\n  onClose,\n  title,\n  description,\n  children,\n  isLoading = false,\n  error = null,\n  success = false,\n  successTitle,\n  successMessage,\n  onSuccessClose,\n  maxWidth = 'sm:max-w-[600px]',\n  inline = false,\n}: BaseActivationDialogProps) {\n  const handleClose = () => {\n    if (success && onSuccessClose) {\n      onSuccessClose();\n    } else {\n      onClose();\n    }\n  };\n\n  if (inline) {\n    return (\n      <ActivationInline\n        isLoading={isLoading}\n        error={error}\n        success={success}\n        onSuccessClose={success ? handleClose : undefined}\n      >\n        {children}\n      </ActivationInline>\n    );\n  }\n\n  return (\n    <ActivationDialog\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={title}\n      description={description}\n      isLoading={isLoading}\n      error={error}\n      success={success}\n      successTitle={successTitle}\n      successMessage={successMessage}\n      maxWidth={maxWidth}\n    >\n      {children}\n    </ActivationDialog>\n  );\n}\n\n// --- Explicit Variants ---\n\n/**\n * The form's body when it sits inside chrome the HOST owns (the connect\n * dialog, the workspace notice, first-use). The host already shows the\n * integration's name, what it does and what it can access, and it owns\n * the success moment (it closes and toasts) — so this renders the fields,\n * the error, and nothing else.\n *\n * `success` is a hand-off, not a screen: the moment it turns true,\n * `onSuccessClose` runs once, which is what lets a form written for the\n * old \"Continue\" panel finish the same way as one that reports success\n * directly. Nothing renders after it fires; the host takes over.\n */\nexport function ActivationInline({\n  isLoading = false,\n  error = null,\n  success = false,\n  onSuccessClose,\n  children,\n}: {\n  isLoading?: boolean;\n  error?: string | null;\n  success?: boolean;\n  onSuccessClose?: () => void;\n  children: ReactNode;\n}) {\n  const handedOff = useRef(false);\n\n  // Hands the success state to the host exactly once. An effect is the\n  // right tool here: this reacts to a state transition that the form's own\n  // submit handler set, and the host callback it calls navigates.\n  useEffect(() => {\n    if (!success || !onSuccessClose || handedOff.current) return;\n\n    handedOff.current = true;\n    onSuccessClose();\n  }, [success, onSuccessClose]);\n\n  if (success) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn('flex flex-col gap-4', isLoading && 'opacity-70')}\n      aria-busy={isLoading}\n    >\n      <If condition={!!error}>\n        <ErrorAlert error={error!} />\n      </If>\n      {children}\n    </div>\n  );\n}\n\nexport function ActivationDialog({\n  isOpen,\n  onClose,\n  title,\n  description,\n  children,\n  isLoading = false,\n  error = null,\n  success = false,\n  successTitle,\n  successMessage,\n  maxWidth = 'sm:max-w-[600px]',\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  description: string;\n  children: ReactNode;\n  isLoading?: boolean;\n  error?: string | null;\n  success?: boolean;\n  successTitle?: string;\n  successMessage?: string;\n  maxWidth?: string;\n}) {\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className={`${maxWidth} max-h-[80vh] overflow-y-auto`}>\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n\n        <If condition={!!error}>\n          <ErrorAlert error={error!} />\n        </If>\n\n        <If condition={success} fallback={children}>\n          <SuccessContent\n            successTitle={successTitle}\n            successMessage={successMessage}\n            onClose={onClose}\n            showSeparator\n          />\n        </If>\n\n        {isLoading && <LoadingOverlay />}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}

package/dist/components/base-activation-form.d.ts

@@ -3,7 +3,9 @@ import { FieldValues, UseFormReturn } from 'react-hook-form';
 export interface BaseActivationFormProps<TFieldValues extends FieldValues = FieldValues> {
     isOpen: boolean;
     onClose: () => void;
+    /** Shown only when NOT inline. Inline, the host names the integration. */
     title: string;
+    /** Shown only when NOT inline. */
     description: string;
     /**
      * Generic rather than `UseFormReturn<any>`: with current react-hook-form
@@ -22,15 +24,28 @@ export interface BaseActivationFormProps<TFieldValues extends FieldValues = Fiel
     successTitle?: string;
     successMessage?: string;
     onSuccessClose?: () => void;
-    submitButtonText?: string;
-    submitButtonLoadingText?: string;
+    /** Defaults to "Connect" — the one verb every integration shares. */
+    submitButtonText?: ReactNode;
+    /** Defaults to "Connecting…". */
+    submitButtonLoadingText?: ReactNode;
     submitButtonDisabled?: boolean;
-    /** @deprecated No longer needed — cancel button is hidden by default */
+    /**
+     * Inline with fields, a Cancel button sits beside Connect and calls
+     * `onClose`; pass `false` for a surface that supplies its own way out.
+     * A form with no fields never shows one — its single button spans the
+     * frame and the surrounding dialog's close is the way out.
+     */
     showCancelButton?: boolean;
-    /** @deprecated No longer needed — submit button is centered by default */
+    /** @deprecated The action row is right-aligned; this is ignored. */
     centerSubmitButton?: boolean;
+    /**
+     * One quiet line under the action row — what happens next ("You'll sign
+     * in on QuickBooks' site and come back here."). Nothing else belongs
+     * there: not features, not permissions, the host shows those.
+     */
+    footnote?: ReactNode;
     maxWidth?: string;
     /** Render inline instead of in a dialog */
     inline?: boolean;
 }
-export declare function BaseActivationForm<TFieldValues extends FieldValues = FieldValues>({ isOpen, onClose, title, description, form, onSubmit, children, isLoading, error, success, successTitle, successMessage, onSuccessClose, submitButtonText, submitButtonLoadingText, submitButtonDisabled, maxWidth, inline, }: BaseActivationFormProps<TFieldValues>): import("react").JSX.Element;
+export declare function BaseActivationForm<TFieldValues extends FieldValues = FieldValues>({ isOpen, onClose, title, description, form, onSubmit, children, isLoading, error, success, successTitle, successMessage, onSuccessClose, submitButtonText, submitButtonLoadingText, submitButtonDisabled, showCancelButton, footnote, maxWidth, inline, }: BaseActivationFormProps<TFieldValues>): import("react").JSX.Element;

package/dist/components/base-activation-form.js

@@ -1,11 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition } from 'react';
 import { Button } from '@ekanos/ui/button';
 import { Form } from '@ekanos/ui/form';
 import { Icon } from '@ekanos/ui/icon';
+import { Trans } from '@ekanos/ui/trans';
 import { BaseActivationDialog } from './base-activation-dialog.js';
-export function BaseActivationForm({ isOpen, onClose, title, description, form, onSubmit, children, isLoading = false, error = null, success = false, successTitle, successMessage, onSuccessClose, submitButtonText = 'Activate Integration', submitButtonLoadingText, submitButtonDisabled = false, maxWidth, inline = false, }) {
+export function BaseActivationForm({ isOpen, onClose, title, description, form, onSubmit, children, isLoading = false, error = null, success = false, successTitle, successMessage, onSuccessClose, submitButtonText, submitButtonLoadingText, submitButtonDisabled = false, showCancelButton = true, footnote, maxWidth, inline = false, }) {
     const [pending, startTransition] = useTransition();
     const loading = pending || isLoading;
     const handleSubmit = (data) => {
@@ -13,9 +14,15 @@ export function BaseActivationForm({ isOpen, onClose, title, description, form,
             await onSubmit(data);
         });
     };
-    const formContent = (_jsx(Form, Object.assign({}, form, { children: _jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "space-y-6", children: [children, _jsx("div", { className: "flex justify-center pt-4", children: _jsxs(Button, { type: "submit", disabled: loading || submitButtonDisabled, children: [loading && (_jsx(Icon, { name: "fa-light fa-spinner", className: "mr-2 h-4 w-4 animate-spin" })), loading && submitButtonLoadingText
-                                ? submitButtonLoadingText
-                                : submitButtonText] }) })] }) })));
+    // `children` is null for a form with nothing to fill in (an OAuth button,
+    // a one-click connect), and the action row is then the whole form —
+    // no empty field block above it.
+    const hasFields = children !== null && children !== undefined;
+    const formContent = (_jsx(Form, Object.assign({}, form, { children: _jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "flex flex-col gap-5", "data-test": "activation-form", children: [hasFields ? (_jsx("fieldset", { className: "flex min-w-0 flex-col gap-5", disabled: loading, children: children })) : null, _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: hasFields
+                                ? 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end'
+                                : 'flex flex-col', children: [inline && showCancelButton && hasFields ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onClose, disabled: loading, "data-test": "activation-cancel", children: _jsx(Trans, { i18nKey: "common:cancel", defaults: "Cancel" }) })) : null, _jsx(Button, { type: "submit", size: hasFields ? 'default' : 'lg', className: hasFields ? undefined : 'w-full', disabled: loading || submitButtonDisabled, "data-test": "activation-submit", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "fa-light fa-spinner-third", className: "h-4 w-4 animate-spin" }), submitButtonLoadingText !== null && submitButtonLoadingText !== void 0 ? submitButtonLoadingText : (_jsx(Trans, { i18nKey: "common:integrationConnect.connecting", defaults: "Connecting\u2026" }))] })) : ((submitButtonText !== null && submitButtonText !== void 0 ? submitButtonText : (_jsx(Trans, { i18nKey: "common:integrationConnect.connect", defaults: "Connect" })))) })] }), footnote ? (_jsx("p", { className: hasFields
+                                ? 'text-muted-foreground text-sm sm:text-right'
+                                : 'text-muted-foreground text-center text-sm', children: footnote })) : null] })] }) })));
     return (_jsx(BaseActivationDialog, { isOpen: isOpen, onClose: onClose, title: title, description: description, isLoading: loading, error: error, success: success, successTitle: successTitle, successMessage: successMessage, onSuccessClose: onSuccessClose, maxWidth: maxWidth, inline: inline, children: formContent }));
 }
 //# sourceMappingURL=base-activation-form.js.map