@ekanos/sdk 0.3.0 → 0.5.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.
 
@@ -79,48 +79,44 @@ Three of five icons rendered as `□`. The monorepo could not reproduce it at al
 visible from an installed tarball. If you bundle `@ekanos/*` into your own
 output, keep these singletons.
 
-### What is published, and what is not
+### What is published
 
-Being straight about this up front, because the alternative is you finding out
-by running a command that 404s:
+Everything you need is on npm:
 
-| Package | On npm |
+| Package | Role |
 |---|---|
-| `@ekanos/sdk`, `@ekanos/ui`, `@ekanos/integration-schema` | **yes** — `0.1.2` |
-| `@ekanos/cli`, `@ekanos/harness` | **not yet** |
+| `@ekanos/sdk`, `@ekanos/ui`, `@ekanos/integration-schema` | the authoring API, the widget UI slice, the schema |
+| `@ekanos/cli` | `ekanos init`, `dev`, `test`, `validate`, `publish` |
+| `@ekanos/harness` | the local dev harness `ekanos dev` runs |
 
-So `npx @ekanos/cli init` and `pnpm add -D @ekanos/harness` do not resolve
-today. The toolchain and the local dev harness are written and documented —
-their READMEs are in this repo and describe what will ship — but you cannot
-install them yet.
+Start a project with:
 
-**What that costs you is seeing, not building.** Everything in this document
-works against `@ekanos/sdk` alone:
+```bash
+npx @ekanos/cli init
+```
+
+`ekanos init` scaffolds a project that already depends on the matching
+versions, and `ekanos dev` renders every surface of your integration in real
+Ekanos chrome — the dashboard grid, the marketplace tile, the activation form,
+the Triggers panel — from fixtures, or against your real vendor API in live
+mode. The `@ekanos/harness` and `@ekanos/cli` READMEs document both.
+
+You can also use `@ekanos/sdk` on its own:
 
 ```bash
 npm install @ekanos/sdk zod
 ```
 
 - `defineIntegration()` validates at import time and throws with a remediation
-  message, so your definition is its own feedback loop — you do not need
-  `ekanos validate` to know whether it is correct.
+  message, so your definition is its own feedback loop.
 - The whole [Testing](#testing) section needs nothing but vitest.
   `createMockContext()` gives you the same context production builds, and
-  `invokeWebhook()` / `invokeSchedule()` run your event handlers with the same
-  payload validation and egress allowlist the real transports will.
-
-**What you genuinely cannot do yet** is see any of it rendered — widgets in the
-dashboard grid, the marketplace tile, the activation form, the Triggers panel.
-Those are the harness, and the harness is not installable. Webhook, schedule
-and OAuth work collapses back to unit tests, which is a real loss but a
-recoverable one. Widget *appearance* does not: you will be writing it blind
-until the harness ships.
-
-One hard stop worth naming: `ekanos.json`, the project file the CLI reads. Its
-schema and the full generated-shell file list are documented in the
-`@ekanos/cli` README — which ships inside the CLI tarball, so today you can
-only read it if you have this repo. Nothing in this document needs that file;
-if you are hand-rolling something that does, wait for the CLI.
+  `invokeWebhook()` / `invokeSchedule()` / `invokeActivate()` run your handlers
+  with the same payload validation and egress allowlist the real transports
+  will.
+
+`ekanos.json` is the project file the CLI reads; its schema and the generated
+shell's file list are documented in the `@ekanos/cli` README.
 
 ## The shape of an integration
 
@@ -316,6 +312,15 @@ Four things the signature does not tell you:
 Key names are `[a-z0-9_-]+` with at most one `/` segment: `config`,
 `settings/location`, `cache/recent-payments`. Two slashes is a validation error.
 
+**Limits.** The host caps one stored value at **64 KB serialized**, one
+secret value at 64 KB, the number of distinct secret names an integration
+writes at **32**, and a key segment at 100 characters. The same numbers are
+exported as `PARTNER_STORAGE_LIMITS` from `@ekanos/integration-schema` and
+enforced by `createMockContext()`, so a test that writes an oversized value
+fails locally the way the host would. A snapshot of vendor records reaches
+64 KB around 120–150 modest rows: trim to a byte budget and flag it rather
+than finding out on the host.
+
 ### `egress`
 
 An origin-only https allowlist. `ctx.fetch` refuses anything not covered
@@ -409,7 +414,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 +494,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 +562,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 +633,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 +675,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 +690,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 +707,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 +743,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 +856,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 +918,51 @@ 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.
 
+If a vendor's scheme is not expressible yet and you declare `'none'`, the
+delivery is authenticated only by the endpoint token in its URL. Treat the
+body as a hint: take the ids from it and re-fetch the item through
+`ctx.fetch` before writing anything a widget renders, and confirm removals
+with the vendor too. A forged delivery then costs one read instead of a
+planted name or link on the dashboard.
+
+#### `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,17 +1123,22 @@ 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
-locally. What it *can* check is that both endpoints you declared are inside
-your egress list.
+The dev harness serves its own loopback callback, so you can complete a real
+round trip locally in live mode: register
+`http://localhost:3100/api/integrations/<your-slug>/oauth/callback` with your
+provider as well. See "Local OAuth" in the `@ekanos/harness` README for the
+secrets file and the connect flow.
 
-**Honest limitation:** there is no local OAuth loop yet. The harness's Triggers
-panel renders the declaration and checks its egress coverage, but it cannot walk
-you through an authorize redirect. Until that lands, unit-test `onTokens`
-directly against `createMockContext()` — it is an ordinary async function.
+In **live mode** the harness runs this loop for real on localhost — authorize
+redirect, single-use `state`, code exchange through your declared egress, then
+your `onTokens`. Client credentials come from `.ekanos/local-secrets.json`,
+which the harness generates and ignores in version control. In fixtures mode it
+answers connection status from the harness entry instead, and you can still
+unit-test `onTokens` directly against `createMockContext()` — it is an ordinary
+async function.
 
 ### `proposes`
 
@@ -1189,7 +1286,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
@@ -1232,12 +1329,11 @@ whether it is you or us costs an afternoon.
   get an allowlisted fetch, so it needs a small seam of its own — a React
   context whose default is the browser's `fetch`. The `@ekanos/harness` README
   has the whole ~20-line pattern; the dev harness's live mode mounts it for you.
-- **No local OAuth loop.** See [`oauth`](#oauth) above.
-- **`onActivate` is declared and testable, but the host does not call it yet.**
-  It runs in the `@ekanos/harness` activation surface and under
-  `invokeActivate()`, but production has no wired call site as of this
-  writing — declare it, test it locally, and it starts running the moment host
-  wiring lands with no change on your side.
+- **`onActivate` errors are non-fatal.** The host runs it after an activation
+  is first persisted and again when activation data changes, but a throw is
+  logged and the activation stays connected — use it to seed caches and
+  validate eagerly, never as a connect gate. It also runs in the
+  `@ekanos/harness` activation surface and under `invokeActivate()`.
 - **`useActivateIntegration()` is inert without the host's provider.** It reads
   server actions out of `IntegrationActivationProvider`. Nothing warns you at
   build time.

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: **167** across 7 entrypoints.
+Total exported names: **172** across 7 entrypoints.
 
 ## `@ekanos/sdk` (32 exports)
 
@@ -48,7 +48,7 @@ Total exported names: **167** 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: **167** across 7 entrypoints.
 | `WidgetAskBar` | function |
 | `WidgetContext` | variable |
 | `WidgetContextValue` | interface |
+| `WidgetData` | interface |
 | `WidgetDataLoading` | function |
 | `WidgetHealth` | interface |
 | `WidgetMeta` | interface |
@@ -190,10 +191,11 @@ Total exported names: **167** across 7 entrypoints.
 | `invokeSchedule` | function |
 | `invokeWebhook` | function |
 
-## `@ekanos/sdk/integration` (27 exports)
+## `@ekanos/sdk/integration` (31 exports)
 
 | Export | Kind |
 | --- | --- |
+| `DEFAULT_SIGNATURE_TOLERANCE_SECONDS` | variable |
 | `DefinitionCollisionInput` | interface |
 | `FirstPartyInventory` | interface |
 | `IntegrationCapabilityDeclaration` | type alias |
@@ -205,6 +207,8 @@ Total exported names: **167** across 7 entrypoints.
 | `OAuthProviderDeclaration` | interface |
 | `OAuthTokens` | interface |
 | `OnActivateHandler` | type alias |
+| `PARTNER_STORAGE_LIMITS` | variable |
+| `PartnerActionDeclaration` | interface |
 | `PartnerOAuthDeclaration` | interface |
 | `PartnerScheduleDeclaration` | interface |
 | `PartnerToolModule` | interface |
@@ -218,6 +222,7 @@ Total exported names: **167** across 7 entrypoints.
 | `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"]}