@atlasauth/react 0.13.0 → 0.15.0

package/dist/index.js

@@ -72,4 +72,7 @@ var localizations_1 = require("@atlasauth/localizations");
 Object.defineProperty(exports, "LOCALIZATION_KEYS", { enumerable: true, get: function () { return localizations_1.LOCALIZATION_KEYS; } });
 Object.defineProperty(exports, "missingKeys", { enumerable: true, get: function () { return localizations_1.missingKeys; } });
 Object.defineProperty(exports, "resolveLocale", { enumerable: true, get: function () { return localizations_1.resolveLocale; } });
+// Drop-in compatibility helpers for apps migrated from other auth providers
+// live on their own entry point, `@atlasauth/react/compat`, so the main API
+// stays Atlas-named.
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+CAA6B;AAC7B,2CAAyB;AACzB,4CAA0B;AAC1B,yCAAuB;AACvB,0CAAwB;AAKxB,iDAA0D;AAAjD,8GAAA,aAAa,OAAA;AAAE,yGAAA,QAAQ,OAAA;AAEhC,iCASiB;AARf,wGAAA,eAAe,OAAA;AACf,gGAAA,OAAO,OAAA;AACP,wGAAA,eAAe,OAAA;AACf,mGAAA,UAAU,OAAA;AACV,uGAAA,cAAc,OAAA;AACd,2GAAA,kBAAkB,OAAA;AAClB,sGAAA,aAAa,OAAA;AACb,gGAAA,OAAO,OAAA;AAET,qCAAiE;AAAxD,0GAAA,eAAe,OAAA;AAAE,8GAAA,mBAAmB,OAAA;AAC7C,oFAAoF;AACpF,kCAAkC;AAClC,oCAA+D;AAAtD,oGAAA,cAAc,OAAA;AAAE,oGAAA,cAAc,OAAA;AAEvC,yCAAuB;AACvB,+CAA6B;AAE7B,2DAK8B;AAJ5B,4HAAA,sBAAsB,OAAA;AACtB,6HAAA,uBAAuB,OAAA;AACvB,0HAAA,oBAAoB,OAAA;AACpB,2HAAA,qBAAqB,OAAA;AAEvB,iFAAiF;AACjF,gDAAgD;AAChD,oCAAmE;AAA1D,kGAAA,YAAY,OAAA;AAAE,0GAAA,oBAAoB,OAAA;AAE3C,qFAAqF;AACrF,gFAAgF;AAChF,gFAAgF;AAChF,oCAAiD;AAAxC,sGAAA,gBAAgB,OAAA;AACzB,0EAA0E;AAC1E,4DAA4D;AAC5D,oCAAyF;AAAhF,sGAAA,gBAAgB,OAAA;AAAE,8GAAA,wBAAwB,OAAA;AAAE,kGAAA,YAAY,OAAA;AAEjE,qFAAqF;AACrF,+CAA+C;AAC/C,oCAAuD;AAA9C,4GAAA,sBAAsB,OAAA;AAE/B,4EAA4E;AAC5E,0DAAyF;AAAhF,kHAAA,iBAAiB,OAAA;AAAE,4GAAA,WAAW,OAAA;AAAE,8GAAA,aAAa,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+CAA6B;AAC7B,2CAAyB;AACzB,4CAA0B;AAC1B,yCAAuB;AACvB,0CAAwB;AAKxB,iDAA0D;AAAjD,8GAAA,aAAa,OAAA;AAAE,yGAAA,QAAQ,OAAA;AAEhC,iCASiB;AARf,wGAAA,eAAe,OAAA;AACf,gGAAA,OAAO,OAAA;AACP,wGAAA,eAAe,OAAA;AACf,mGAAA,UAAU,OAAA;AACV,uGAAA,cAAc,OAAA;AACd,2GAAA,kBAAkB,OAAA;AAClB,sGAAA,aAAa,OAAA;AACb,gGAAA,OAAO,OAAA;AAET,qCAAiE;AAAxD,0GAAA,eAAe,OAAA;AAAE,8GAAA,mBAAmB,OAAA;AAC7C,oFAAoF;AACpF,kCAAkC;AAClC,oCAA+D;AAAtD,oGAAA,cAAc,OAAA;AAAE,oGAAA,cAAc,OAAA;AAEvC,yCAAuB;AACvB,+CAA6B;AAE7B,2DAK8B;AAJ5B,4HAAA,sBAAsB,OAAA;AACtB,6HAAA,uBAAuB,OAAA;AACvB,0HAAA,oBAAoB,OAAA;AACpB,2HAAA,qBAAqB,OAAA;AAEvB,iFAAiF;AACjF,gDAAgD;AAChD,oCAAmE;AAA1D,kGAAA,YAAY,OAAA;AAAE,0GAAA,oBAAoB,OAAA;AAE3C,qFAAqF;AACrF,gFAAgF;AAChF,gFAAgF;AAChF,oCAAiD;AAAxC,sGAAA,gBAAgB,OAAA;AACzB,0EAA0E;AAC1E,4DAA4D;AAC5D,oCAAyF;AAAhF,sGAAA,gBAAgB,OAAA;AAAE,8GAAA,wBAAwB,OAAA;AAAE,kGAAA,YAAY,OAAA;AAEjE,qFAAqF;AACrF,+CAA+C;AAC/C,oCAAuD;AAA9C,4GAAA,sBAAsB,OAAA;AAE/B,4EAA4E;AAC5E,0DAAyF;AAAhF,kHAAA,iBAAiB,OAAA;AAAE,4GAAA,WAAW,OAAA;AAAE,8GAAA,aAAa,OAAA;AAQtD,4EAA4E;AAC5E,4EAA4E;AAC5E,qBAAqB"}

package/dist/mfa-steps.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type MfaChoices, type MfaEnrollmentController, type MfaEnrollmentState } from '@atlasauth/js';
+/**
+ * The sign-in's MFA steps for `<SignIn>`: setting up a second factor when the
+ * app requires one (`needs_mfa_enrollment`) and the texted / emailed code at the
+ * second-factor step. The requests and the step's state live in
+ * `@atlasauth/js` (`createMfaEnrollment`), shared with every framework SDK.
+ */
+/** What the instance lets the MFA steps offer (`account.mfa`, `account.emailSecondFactor`). */
+export declare function useMfaChoices(): MfaChoices;
+/**
+ * The enrolment step's controller and state, started for `attemptId` while
+ * `active` (the flow is at `needs_mfa_enrollment`) and reset when it leaves.
+ */
+export declare function useMfaEnrollment(attemptId: string | null, active: boolean): {
+    controller: MfaEnrollmentController;
+    state: MfaEnrollmentState;
+};
+/**
+ * The enrolment step's body: the method choice, the authenticator's QR code and
+ * setup key with its code field(s), or the phone number then the texted code.
+ * `field` draws an input the way the rest of the form does.
+ */
+export declare function MfaEnrollmentFields({ controller, state, busy, field, clearValues, }: {
+    controller: MfaEnrollmentController;
+    state: MfaEnrollmentState;
+    busy: boolean;
+    field: (name: string, labelKey: string, type?: string, extra?: {
+        autoComplete?: string;
+        inputMode?: 'numeric' | 'tel';
+    }) => ReactNode;
+    clearValues: () => void;
+}): import("react").JSX.Element;
+/**
+ * "Text me a code instead" / "Email me a code instead" at the second factor:
+ * sends the code for this attempt, then says where it went. The code is typed
+ * into the step's code field like any second-factor code.
+ */
+export declare function SecondFactorCodeOption({ attemptId, strategy }: {
+    attemptId: string;
+    strategy: 'sms' | 'email_code';
+}): import("react").JSX.Element;
+/**
+ * The recovery codes a mid-sign-in enrolment came with, shown once before the
+ * sign-in finishes: copy them, download them as a .txt file, then "I've saved
+ * my codes" (`onSaved`) exchanges the ticket. The codes live only in the flow's
+ * memory and are forgotten once saved.
+ */
+export declare function RecoveryCodes({ codes, busy, onSaved }: {
+    codes: string[];
+    busy: boolean;
+    onSaved(): void;
+}): import("react").JSX.Element;

package/dist/mfa-steps.js

@@ -0,0 +1,148 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMfaChoices = useMfaChoices;
+exports.useMfaEnrollment = useMfaEnrollment;
+exports.MfaEnrollmentFields = MfaEnrollmentFields;
+exports.SecondFactorCodeOption = SecondFactorCodeOption;
+exports.RecoveryCodes = RecoveryCodes;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const js_1 = require("@atlasauth/js");
+const AtlasProvider_1 = require("./AtlasProvider");
+const components_shared_1 = require("./components-shared");
+/**
+ * The sign-in's MFA steps for `<SignIn>`: setting up a second factor when the
+ * app requires one (`needs_mfa_enrollment`) and the texted / emailed code at the
+ * second-factor step. The requests and the step's state live in
+ * `@atlasauth/js` (`createMfaEnrollment`), shared with every framework SDK.
+ */
+/** What the instance lets the MFA steps offer (`account.mfa`, `account.emailSecondFactor`). */
+function useMfaChoices() {
+    const { instanceSettings } = (0, AtlasProvider_1.useAtlas)();
+    return (0, js_1.mfaChoicesFrom)(instanceSettings?.account);
+}
+/**
+ * The enrolment step's controller and state, started for `attemptId` while
+ * `active` (the flow is at `needs_mfa_enrollment`) and reset when it leaves.
+ */
+function useMfaEnrollment(attemptId, active) {
+    const client = (0, components_shared_1.useFapiClient)();
+    const choices = useMfaChoices();
+    const choicesRef = (0, react_1.useRef)(choices);
+    choicesRef.current = choices;
+    const controller = (0, react_1.useMemo)(() => (0, js_1.createMfaEnrollment)(client, () => choicesRef.current), [client]);
+    const [state, setState] = (0, react_1.useState)(controller.state);
+    (0, react_1.useEffect)(() => controller.subscribe(setState), [controller]);
+    (0, react_1.useEffect)(() => {
+        if (active && attemptId)
+            controller.start(attemptId);
+        else
+            controller.reset();
+    }, [controller, active, attemptId]);
+    return { controller, state };
+}
+/**
+ * The enrolment step's body: the method choice, the authenticator's QR code and
+ * setup key with its code field(s), or the phone number then the texted code.
+ * `field` draws an input the way the rest of the form does.
+ */
+function MfaEnrollmentFields({ controller, state, busy, field, clearValues, }) {
+    const t = (0, components_shared_1.useText)();
+    const cls = (0, components_shared_1.useClasses)();
+    const errorClass = (0, components_shared_1.useClass)('formFieldError', 'atlas-error');
+    const secondaryClass = (0, components_shared_1.useClass)('formButtonSecondary', 'atlas-button-secondary');
+    const { method, enrollment, options } = state;
+    const out = [];
+    if (method === null) {
+        out.push((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t('mfa.enrollChoose') }, "choose"), ...options.map((m) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: secondaryClass, "data-atlas-mfa-method": m, disabled: busy || state.busy, onClick: () => {
+                clearValues();
+                void controller.choose(m);
+            }, children: t(m === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption') }, m))));
+    }
+    else if (method === 'totp') {
+        if (!enrollment) {
+            out.push((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), "aria-live": "polite", children: state.busy ? t('mfa.enrollPreparing') : null }, "preparing"));
+        }
+        else {
+            out.push((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t('mfa.enrollScan') }, "scan"));
+            if (enrollment.qrCode) {
+                out.push((0, jsx_runtime_1.jsx)("img", { className: "atlas-mfa-qr", "data-atlas": "mfa-qr", src: enrollment.qrCode, alt: t('mfa.enrollQrAlt'), width: 180, height: 180 }, "qr"));
+            }
+            if (enrollment.secret) {
+                out.push((0, jsx_runtime_1.jsxs)("p", { className: cls('text', 'atlas-text'), "data-atlas": "mfa-setup-key", children: [t('mfa.enrollSetupKey'), ": ", (0, jsx_runtime_1.jsx)("code", { children: (0, js_1.groupSetupKey)(enrollment.secret) })] }, "secret"));
+            }
+            out.push(field('code', 'mfa.enrollFirstCodeLabel', 'text', { autoComplete: 'one-time-code', inputMode: 'numeric' }));
+            if (state.totpCodes >= 2) {
+                out.push(field('secondCode', 'mfa.enrollSecondCodeLabel', 'text', { autoComplete: 'one-time-code', inputMode: 'numeric' }));
+            }
+        }
+    }
+    else if (!enrollment) {
+        out.push(field('phone', 'mfa.phoneLabel', 'tel', { autoComplete: 'tel', inputMode: 'tel' }), (0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t('mfa.phoneHint') }, "phone-hint"));
+    }
+    else {
+        out.push((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), "data-atlas": "mfa-code-texted", "aria-live": "polite", children: t('mfa.codeTextedTo', { phone: enrollment.phone ?? '' }) }, "texted"), field('code', 'mfa.codeLabel', 'text', { autoComplete: 'one-time-code', inputMode: 'numeric' }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls('link', 'atlas-link'), "data-atlas-resend": "", disabled: busy || state.busy, onClick: () => void controller.resend(), children: t('signIn.resendCode') }, "resend"));
+    }
+    for (const error of state.errors) {
+        out.push((0, jsx_runtime_1.jsx)("p", { className: errorClass, role: "alert", children: error.message }, `enrol-error-${error.code}-${error.param ?? ''}`));
+    }
+    if (method !== null && options.length > 1) {
+        const other = options.find((m) => m !== method);
+        out.push((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls('link', 'atlas-link'), "data-atlas-mfa-method": other, disabled: busy || state.busy, onClick: () => {
+                clearValues();
+                void controller.choose(other);
+            }, children: t(other === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption') }, "switch"));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: out });
+}
+/**
+ * "Text me a code instead" / "Email me a code instead" at the second factor:
+ * sends the code for this attempt, then says where it went. The code is typed
+ * into the step's code field like any second-factor code.
+ */
+function SecondFactorCodeOption({ attemptId, strategy }) {
+    const client = (0, components_shared_1.useFapiClient)();
+    const t = (0, components_shared_1.useText)();
+    const cls = (0, components_shared_1.useClasses)();
+    const [state, setState] = (0, react_1.useState)({});
+    const name = strategy === 'sms' ? 'sms-second-factor' : 'email-second-factor';
+    const send = () => {
+        setState({ busy: true });
+        (0, js_1.prepareSecondFactorCode)(client, attemptId, strategy)
+            .then(({ sentTo }) => setState({ sentTo }))
+            .catch((e) => setState({ error: e instanceof Error ? e.message : String(e) }));
+    };
+    if (state.sentTo !== undefined) {
+        return ((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), "data-atlas": `${name}-sent`, "aria-live": "polite", children: strategy === 'sms' ? t('mfa.codeTextedTo', { phone: state.sentTo }) : t('signIn.codeSentTo', { email: state.sentTo }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: cls('link', 'atlas-link'), "data-atlas": name, disabled: state.busy, onClick: send, children: state.busy ? t('signIn.sending') : t(strategy === 'sms' ? 'mfa.smsCodeOption' : 'signIn.emailCodeOption') }), state.error ? ((0, jsx_runtime_1.jsx)("div", { className: cls('alert', 'atlas-alert'), role: "alert", children: state.error })) : null] }));
+}
+const RECOVERY_LIST_STYLE = {
+    listStyle: 'none',
+    padding: 0,
+    margin: '8px 0 12px',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+    gap: 6,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    textAlign: 'center',
+};
+/**
+ * The recovery codes a mid-sign-in enrolment came with, shown once before the
+ * sign-in finishes: copy them, download them as a .txt file, then "I've saved
+ * my codes" (`onSaved`) exchanges the ticket. The codes live only in the flow's
+ * memory and are forgotten once saved.
+ */
+function RecoveryCodes({ codes, busy, onSaved }) {
+    const t = (0, components_shared_1.useText)();
+    const cls = (0, components_shared_1.useClasses)();
+    const cardClass = (0, components_shared_1.useClass)('card', 'atlas-card');
+    const titleClass = (0, components_shared_1.useClass)('headerTitle', 'atlas-title');
+    const buttonClass = (0, components_shared_1.useClass)('formButtonPrimary', 'atlas-button');
+    const secondaryClass = (0, components_shared_1.useClass)('formButtonSecondary', 'atlas-button-secondary');
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const canCopy = typeof navigator !== 'undefined' && !!navigator.clipboard?.writeText;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cardClass, "data-atlas": "recovery-codes", children: [(0, jsx_runtime_1.jsx)("h1", { className: titleClass, children: t('mfa.recoveryCodesTitle') }), (0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t('mfa.recoveryCodesHelp') }), (0, jsx_runtime_1.jsx)("ul", { "data-atlas": "recovery-codes-list", style: RECOVERY_LIST_STYLE, children: codes.map((code) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("code", { children: code }) }, code))) }), (0, jsx_runtime_1.jsxs)("div", { className: "atlas-alternatives", children: [canCopy ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: secondaryClass, "data-atlas": "recovery-codes-copy", onClick: () => void (0, js_1.copyRecoveryCodes)(codes).then(setCopied), children: t('mfa.recoveryCodesCopy') })) : null, (0, js_1.canDownloadRecoveryCodes)() ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: secondaryClass, "data-atlas": "recovery-codes-download", onClick: () => (0, js_1.downloadRecoveryCodes)(codes), children: t('mfa.recoveryCodesDownload') })) : null] }), copied ? ((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), "aria-live": "polite", "data-atlas": "recovery-codes-copied", children: t('mfa.recoveryCodesCopied') })) : null, (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonClass, "data-atlas": "recovery-codes-saved", disabled: busy, onClick: onSaved, children: t('mfa.recoveryCodesSaved') })] }));
+}
+//# sourceMappingURL=mfa-steps.js.map

package/dist/mfa-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mfa-steps.js","sourceRoot":"","sources":["../src/mfa-steps.tsx"],"names":[],"mappings":"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"}

package/dist/organization.d.ts

@@ -1,4 +1,6 @@
+import { OrganizationProfileController, type OrganizationProfileState } from '@atlasauth/js';
 import { useOrganization } from './hooks';
+import { useReverification } from './reverification';
 export declare function OrganizationSwitcher(): import("react").JSX.Element;
 /**
  * Clerk-parity `useOrganizationList()`. The memberships the signed-in user
@@ -34,4 +36,83 @@ export declare function CreateOrganization({ onCreate, }?: {
  * can make one without leaving the list.
  */
 export declare function OrganizationList(): import("react").JSX.Element;
-export declare function OrganizationProfile(): import("react").JSX.Element | null;
+/**
+ * Headless state for the active organization's profile: members, pending
+ * invitations and roles, with the admin actions (change role, remove, invite,
+ * revoke, resend) and the member actions (leave; delete for an admin, which
+ * parks for a password re-authentication on a stale session). The same
+ * `OrganizationProfileController` backs every SDK's `<OrganizationProfile>`.
+ */
+export declare function useOrganizationProfile(): {
+    organizationId: string | null;
+    state: OrganizationProfileState;
+    canManage: boolean;
+    isAdmin: boolean;
+    controller: OrganizationProfileController | null;
+    deleteOrganization(): Promise<boolean>;
+    reverification: ReturnType<typeof useReverification>;
+};
+export interface OrganizationProfileProps {
+    /** Called after the user leaves or deletes the organization (e.g. to navigate away). */
+    onExit?(reason: 'left' | 'deleted'): void;
+}
+/**
+ * Clerk-parity `<OrganizationProfile>`: the active organization's members
+ * (admins change roles and remove), invitations (admins invite, revoke and
+ * resend) and settings (leave; an admin deletes, after re-authenticating).
+ * Every control is gated on the ACTIVE org role, matching the server's rule.
+ */
+export declare function OrganizationProfile({ onExit }?: OrganizationProfileProps): import("react").JSX.Element | null;
+/** One entry of an organization's audit trail, as the Frontend API returns it. */
+export interface OrganizationAuditLogEntry {
+    object: 'audit_log';
+    id: string;
+    action: string;
+    actor: {
+        type: string;
+        id: string | null;
+    };
+    target: {
+        type: string | null;
+        id: string | null;
+    };
+    organization_id: string;
+    ip: string | null;
+    user_agent: string | null;
+    metadata: Record<string, unknown>;
+    created_at: number;
+}
+/**
+ * The active organization's audit trail, for org admins: one page at a time,
+ * newest first, with a "load more" cursor. `action` narrows it (exact, or a
+ * prefix ending in `.`). Returns `forbidden: true` when the signed-in member is
+ * not allowed to read it, so the caller can hide the surface.
+ */
+export declare function useOrganizationAuditLog(options?: {
+    pageSize?: number;
+    action?: string;
+}): {
+    entries: OrganizationAuditLogEntry[];
+    loading: boolean;
+    forbidden: boolean;
+    hasMore: boolean;
+    loadMore(): Promise<void>;
+    reload(): Promise<void>;
+};
+/**
+ * `<OrganizationAuditLog/>` — the active organization's audit trail for its
+ * admins, next to `<OrganizationProfile/>`. Renders nothing for a member who may
+ * not read it (the server is the authority; the component just follows it).
+ * Labels are props so an app can localise them.
+ */
+export declare function OrganizationAuditLog({ pageSize, action, labels, formatDate, }?: {
+    pageSize?: number;
+    action?: string;
+    labels?: {
+        title?: string;
+        empty?: string;
+        loadMore?: string;
+        actor?: string;
+    };
+    formatDate?(ms: number): string;
+}): import("react").JSX.Element | null;

package/dist/organization.js

@@ -5,13 +5,17 @@ exports.OrganizationSwitcher = OrganizationSwitcher;
 exports.useOrganizationList = useOrganizationList;
 exports.CreateOrganization = CreateOrganization;
 exports.OrganizationList = OrganizationList;
+exports.useOrganizationProfile = useOrganizationProfile;
 exports.OrganizationProfile = OrganizationProfile;
+exports.useOrganizationAuditLog = useOrganizationAuditLog;
+exports.OrganizationAuditLog = OrganizationAuditLog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const js_1 = require("@atlasauth/js");
 const AtlasProvider_1 = require("./AtlasProvider");
 const hooks_1 = require("./hooks");
 const components_shared_1 = require("./components-shared");
-const control_components_1 = require("./control-components");
+const reverification_1 = require("./reverification");
 function OrganizationSwitcher() {
     const { memberships, organization, setActive } = (0, hooks_1.useOrganization)();
     const t = (0, components_shared_1.useText)();
@@ -102,13 +106,227 @@ function OrganizationList() {
     const itemClass = (0, components_shared_1.useClass)('menuItem', 'atlas-menu-item');
     return ((0, jsx_runtime_1.jsxs)("div", { className: menuClass, "data-atlas": "organization-list", children: [memberships.map((membership) => ((0, jsx_runtime_1.jsx)("button", { className: itemClass, disabled: membership.organization.id === organization?.id, onClick: () => void setActive(membership.organization.id), children: membership.organization.name }, membership.organization.id))), (0, jsx_runtime_1.jsx)("span", { className: itemClass, "data-atlas": "organization-list-divider", children: t('organization.orCreate') }), (0, jsx_runtime_1.jsx)(CreateOrganization, {})] }));
 }
-function OrganizationProfile() {
+/**
+ * Headless state for the active organization's profile: members, pending
+ * invitations and roles, with the admin actions (change role, remove, invite,
+ * revoke, resend) and the member actions (leave; delete for an admin, which
+ * parks for a password re-authentication on a stale session). The same
+ * `OrganizationProfileController` backs every SDK's `<OrganizationProfile>`.
+ */
+function useOrganizationProfile() {
+    const { organization, membership } = (0, hooks_1.useOrganization)();
+    const { has } = (0, hooks_1.useAuth)();
+    const { reload } = (0, AtlasProvider_1.useAtlas)();
+    const client = (0, components_shared_1.useMeClient)();
+    const reverification = (0, reverification_1.useReverification)();
+    const canManage = has({ permission: 'org:sys_memberships:manage' });
+    const isAdmin = membership?.role === 'org:admin';
+    const organizationId = organization?.id ?? null;
+    const controller = (0, react_1.useMemo)(() => organizationId
+        ? new js_1.OrganizationProfileController(client, organizationId, {
+            canManage,
+            onChange: async () => {
+                await reload();
+            },
+        })
+        : null, [client, organizationId, canManage, reload]);
+    (0, react_1.useEffect)(() => {
+        void controller?.load();
+    }, [controller]);
+    const empty = (0, react_1.useMemo)(() => ({ status: 'idle', members: [], membersTotal: 0, invitations: [], roles: [], permissions: [], error: null, busy: null }), []);
+    const state = (0, react_1.useSyncExternalStore)((0, react_1.useCallback)((cb) => (controller ? controller.subscribe(cb) : () => undefined), [controller]), () => controller?.getState() ?? empty, () => controller?.getState() ?? empty);
+    const { withReverification } = reverification;
+    const remove = (0, react_1.useCallback)(async () => {
+        if (!organizationId)
+            return false;
+        await withReverification(() => (0, js_1.deleteOrganization)(client, organizationId));
+        await reload();
+        return true;
+    }, [client, organizationId, reload, withReverification]);
+    return { organizationId, state, canManage, isAdmin, controller, deleteOrganization: remove, reverification };
+}
+function memberName(member, fallback) {
+    const name = [member.user?.first_name, member.user?.last_name].filter(Boolean).join(' ');
+    return name || fallback;
+}
+/**
+ * Clerk-parity `<OrganizationProfile>`: the active organization's members
+ * (admins change roles and remove), invitations (admins invite, revoke and
+ * resend) and settings (leave; an admin deletes, after re-authenticating).
+ * Every control is gated on the ACTIVE org role, matching the server's rule.
+ */
+function OrganizationProfile({ onExit } = {}) {
     const { organization, membership } = (0, hooks_1.useOrganization)();
+    const { userId } = (0, hooks_1.useAuth)();
     const t = (0, components_shared_1.useText)();
+    const errorText = (0, components_shared_1.useErrorText)();
+    const cardClass = (0, components_shared_1.useClass)('card', 'atlas-card');
+    const cls = (0, components_shared_1.useClasses)();
+    const profile = useOrganizationProfile();
+    const { state, controller, canManage, isAdmin, reverification } = profile;
+    const [tab, setTab] = (0, react_1.useState)('members');
+    // The custom-role editor: null = creating a new role, else the id being edited.
+    const [editingRole, setEditingRole] = (0, react_1.useState)(null);
+    const [roleKey, setRoleKey] = (0, react_1.useState)('');
+    const [roleName, setRoleName] = (0, react_1.useState)('');
+    const [rolePerms, setRolePerms] = (0, react_1.useState)([]);
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [inviteRole, setInviteRole] = (0, react_1.useState)('org:member');
+    const [confirm, setConfirm] = (0, react_1.useState)(null);
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [localError, setLocalError] = (0, react_1.useState)(null);
+    if (!organization || !controller)
+        return null;
+    const buttonSecondary = cls('formButtonSecondary', 'atlas-button-secondary');
+    const buttonPrimary = cls('formButtonPrimary', 'atlas-button');
+    const busy = (key) => state.busy === key;
+    const error = localError ?? (state.error ? errorText(state.error) : null);
+    const sendInvite = async () => {
+        const address = email.trim();
+        if (!address)
+            return;
+        const out = await controller.invite(address, inviteRole);
+        if (out)
+            setEmail('');
+    };
+    const doLeave = async () => {
+        setLocalError(null);
+        if (await controller.leave())
+            onExit?.('left');
+        setConfirm(null);
+    };
+    const doDelete = async () => {
+        setLocalError(null);
+        try {
+            if (await profile.deleteOrganization())
+                onExit?.('deleted');
+        }
+        catch (err) {
+            if (!(err instanceof Error && err.message === 'Reverification cancelled.')) {
+                setLocalError(err instanceof Error ? errorText(err) : t('error.generic'));
+            }
+        }
+        setConfirm(null);
+    };
+    const roleOptions = state.roles.length > 0 ? state.roles : [{ key: 'org:member', name: 'org:member' }];
+    const customRoles = state.roles.filter((r) => Boolean(r.organization_id));
+    const resetRoleForm = () => {
+        setEditingRole(null);
+        setRoleKey('');
+        setRoleName('');
+        setRolePerms([]);
+    };
+    const saveRole = async () => {
+        const out = editingRole
+            ? await controller.updateRole(editingRole, { name: roleName.trim(), permissions: rolePerms })
+            : await controller.createRole({ key: roleKey.trim(), name: roleName.trim(), permissions: rolePerms });
+        if (out)
+            resetRoleForm();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cardClass, "data-atlas": "organization-profile", children: [(0, jsx_runtime_1.jsx)("h1", { className: cls('headerTitle', 'atlas-heading'), children: organization.name }), (0, jsx_runtime_1.jsxs)("p", { className: cls('headerSubtitle', 'atlas-subtitle'), children: [t('organization.roleLabel'), ": ", membership?.role] }), (0, jsx_runtime_1.jsx)("div", { className: cls('menu', 'atlas-menu'), role: "tablist", children: ['members', ...(canManage ? ['invitations', 'roles'] : []), 'settings'].map((key) => ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "tab", "aria-selected": tab === key, className: cls('menuItem', 'atlas-menu-item'), "data-atlas": `organization-tab-${key}`, onClick: () => setTab(key), children: t(`organization.${key}`) }, key))) }), error ? ((0, jsx_runtime_1.jsx)("p", { className: cls('alert', 'atlas-alert'), role: "alert", children: error })) : null, tab === 'members' ? ((0, jsx_runtime_1.jsx)("ul", { className: cls('list', 'atlas-list'), "data-atlas": "organization-members", children: state.members.map((member) => {
+                    const self = member.user?.id === userId;
+                    const id = member.user?.id ?? member.id;
+                    return ((0, jsx_runtime_1.jsxs)("li", { "data-atlas": "organization-member", children: [(0, jsx_runtime_1.jsxs)("span", { children: [memberName(member, t('organization.unnamedMember')), self ? ` ${t('organization.you')}` : ''] }), canManage && !self && member.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("select", { "aria-label": t('organization.roleLabel'), className: cls('formFieldInput', 'atlas-input'), value: member.role, disabled: busy(`role:${id}`), onChange: (event) => void controller.changeRole(id, event.target.value), children: roleOptions.map((role) => ((0, jsx_runtime_1.jsx)("option", { value: role.key, children: role.name }, role.key))) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, disabled: busy(`remove:${id}`), onClick: () => void controller.removeMember(id), children: t('organization.remove') })] })) : ((0, jsx_runtime_1.jsxs)("span", { children: [" \u00B7 ", member.role] }))] }, member.id));
+                }) })) : null, tab === 'invitations' && canManage ? ((0, jsx_runtime_1.jsxs)("div", { "data-atlas": "organization-invitations", children: [(0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                            event.preventDefault();
+                            void sendInvite();
+                        }, children: [(0, jsx_runtime_1.jsxs)("label", { className: cls('formField', 'atlas-field'), children: [(0, jsx_runtime_1.jsx)("span", { className: cls('formFieldLabel', 'atlas-field-label'), children: t('organization.emailLabel') }), (0, jsx_runtime_1.jsx)("input", { className: cls('formFieldInput', 'atlas-input'), type: "email", value: email, onChange: (event) => setEmail(event.target.value) })] }), (0, jsx_runtime_1.jsxs)("label", { className: cls('formField', 'atlas-field'), children: [(0, jsx_runtime_1.jsx)("span", { className: cls('formFieldLabel', 'atlas-field-label'), children: t('organization.roleLabel') }), (0, jsx_runtime_1.jsx)("select", { className: cls('formFieldInput', 'atlas-input'), value: inviteRole, onChange: (event) => setInviteRole(event.target.value), children: roleOptions.map((role) => ((0, jsx_runtime_1.jsx)("option", { value: role.key, children: role.name }, role.key))) })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", className: buttonPrimary, disabled: busy('invite') || !email.trim(), children: t('organization.sendInvite') })] }), state.invitations.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t('organization.noInvitations') })) : ((0, jsx_runtime_1.jsx)("ul", { className: cls('list', 'atlas-list'), children: state.invitations.map((inv) => ((0, jsx_runtime_1.jsxs)("li", { "data-atlas": "organization-invitation", children: [(0, jsx_runtime_1.jsxs)("span", { children: [inv.email_address, " \u00B7 ", inv.role] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, disabled: busy(`resend:${inv.id}`), onClick: () => void controller.resendInvitation(inv.id), children: t('organization.resend') }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, disabled: busy(`revoke:${inv.id}`), onClick: () => void controller.revokeInvitation(inv.id), children: t('organization.revoke') })] }, inv.id))) }))] })) : null, tab === 'roles' && canManage ? ((0, jsx_runtime_1.jsxs)("div", { "data-atlas": "organization-roles", children: [customRoles.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t('organization.noCustomRoles') })) : ((0, jsx_runtime_1.jsx)("ul", { className: cls('list', 'atlas-list'), children: customRoles.map((role) => ((0, jsx_runtime_1.jsxs)("li", { "data-atlas": "organization-role", children: [(0, jsx_runtime_1.jsxs)("span", { children: [role.name, " \u00B7 ", role.key] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, onClick: () => {
+                                        setEditingRole(role.id ?? null);
+                                        setRoleKey(role.key);
+                                        setRoleName(role.name);
+                                        setRolePerms(role.permissions ?? []);
+                                    }, children: t('organization.editRole') }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, disabled: !role.id || busy(`role:delete:${role.id}`), onClick: () => role.id && void controller.deleteRole(role.id), children: t('organization.deleteRole') })] }, role.id ?? role.key))) })), (0, jsx_runtime_1.jsxs)("form", { "data-atlas": "organization-role-form", onSubmit: (event) => {
+                            event.preventDefault();
+                            void saveRole();
+                        }, children: [editingRole ? null : ((0, jsx_runtime_1.jsxs)("label", { className: cls('formField', 'atlas-field'), children: [(0, jsx_runtime_1.jsx)("span", { className: cls('formFieldLabel', 'atlas-field-label'), children: t('organization.roleKey') }), (0, jsx_runtime_1.jsx)("input", { className: cls('formFieldInput', 'atlas-input'), name: "role_key", value: roleKey, onChange: (event) => setRoleKey(event.target.value) })] })), (0, jsx_runtime_1.jsxs)("label", { className: cls('formField', 'atlas-field'), children: [(0, jsx_runtime_1.jsx)("span", { className: cls('formFieldLabel', 'atlas-field-label'), children: t('organization.roleName') }), (0, jsx_runtime_1.jsx)("input", { className: cls('formFieldInput', 'atlas-input'), name: "role_name", value: roleName, onChange: (event) => setRoleName(event.target.value) })] }), (0, jsx_runtime_1.jsxs)("fieldset", { className: cls('formField', 'atlas-field'), children: [(0, jsx_runtime_1.jsx)("legend", { className: cls('formFieldLabel', 'atlas-field-label'), children: t('organization.rolePermissions') }), state.permissions.map((permission) => ((0, jsx_runtime_1.jsxs)("label", { "data-atlas": "organization-role-permission", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: permission.key, checked: rolePerms.includes(permission.key), onChange: (event) => setRolePerms((current) => event.target.checked
+                                                    ? [...current, permission.key]
+                                                    : current.filter((key) => key !== permission.key)) }), ' ', permission.name] }, permission.key)))] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", className: buttonPrimary, disabled: !roleName.trim() || (!editingRole && !roleKey.trim()) || state.busy?.startsWith('role:') === true, children: editingRole ? t('organization.saveRole') : t('organization.createRole') }), editingRole ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, onClick: resetRoleForm, children: t('organization.cancel') })) : null] })] })) : null, tab === 'settings' ? ((0, jsx_runtime_1.jsx)("div", { "data-atlas": "organization-settings", children: confirm ? ((0, jsx_runtime_1.jsxs)("div", { role: "dialog", "data-atlas": `organization-confirm-${confirm}`, children: [(0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t(confirm === 'leave' ? 'organization.leaveConfirm' : 'organization.deleteConfirm', {
+                                name: organization.name,
+                            }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonPrimary, disabled: busy('leave') || busy('delete'), onClick: () => void (confirm === 'leave' ? doLeave() : doDelete()), children: t('organization.confirm') }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, onClick: () => setConfirm(null), children: t('organization.cancel') })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, onClick: () => setConfirm('leave'), children: t('organization.leave') }), isAdmin ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, onClick: () => setConfirm('delete'), children: t('organization.delete') })) : null] })) })) : null, reverification.needsReverification ? ((0, jsx_runtime_1.jsxs)("div", { "data-atlas": "organization-reverification", role: "dialog", "aria-label": t('reverification.title'), children: [(0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: (0, jsx_runtime_1.jsx)("strong", { children: t('reverification.title') }) }), (0, jsx_runtime_1.jsx)("p", { className: cls('text', 'atlas-text'), children: t('reverification.subtitle') }), (0, jsx_runtime_1.jsxs)("label", { className: cls('formField', 'atlas-field'), children: [(0, jsx_runtime_1.jsx)("span", { className: cls('formFieldLabel', 'atlas-field-label'), children: t('reverification.passwordLabel') }), (0, jsx_runtime_1.jsx)("input", { className: cls('formFieldInput', 'atlas-account-input'), type: "password", autoComplete: "current-password", value: password, onChange: (event) => setPassword(event.target.value) })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonPrimary, onClick: () => void reverification
+                            .completeReverification({ strategy: 'password', password })
+                            .then(() => setPassword(''))
+                            .catch((err) => setLocalError(err instanceof Error ? errorText(err) : t('error.generic'))), children: t('reverification.submit') }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: buttonSecondary, onClick: () => {
+                            setPassword('');
+                            reverification.cancelReverification();
+                        }, children: t('reverification.cancel') })] })) : null] }));
+}
+/**
+ * The active organization's audit trail, for org admins: one page at a time,
+ * newest first, with a "load more" cursor. `action` narrows it (exact, or a
+ * prefix ending in `.`). Returns `forbidden: true` when the signed-in member is
+ * not allowed to read it, so the caller can hide the surface.
+ */
+function useOrganizationAuditLog(options = {}) {
+    const { organization } = (0, hooks_1.useOrganization)();
+    const client = (0, components_shared_1.useMeClient)();
+    const [entries, setEntries] = (0, react_1.useState)([]);
+    const [cursor, setCursor] = (0, react_1.useState)(null);
+    const [hasMore, setHasMore] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [forbidden, setForbidden] = (0, react_1.useState)(false);
+    const orgId = organization?.id;
+    const pageSize = options.pageSize ?? 20;
+    const action = options.action;
+    const fetchPage = (0, react_1.useCallback)(async (after) => {
+        if (!orgId)
+            return;
+        setLoading(true);
+        try {
+            const params = new URLSearchParams({ limit: String(pageSize) });
+            if (after)
+                params.set('starting_after', after);
+            if (action)
+                params.set('action', action);
+            const res = await client.get(`/v1/client/organizations/${encodeURIComponent(orgId)}/audit_logs?${params.toString()}`);
+            if (!res.ok || !res.data) {
+                setForbidden(res.status === 403 || res.status === 404);
+                return;
+            }
+            const page = res.data;
+            setForbidden(false);
+            setEntries((prev) => (after ? [...prev, ...page.data] : page.data));
+            setCursor(page.next_cursor);
+            setHasMore(page.has_more);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, orgId, pageSize, action]);
+    (0, react_1.useEffect)(() => {
+        setEntries([]);
+        setCursor(null);
+        void fetchPage(null);
+    }, [fetchPage]);
+    return {
+        entries,
+        loading,
+        forbidden,
+        hasMore,
+        loadMore: async () => {
+            if (cursor)
+                await fetchPage(cursor);
+        },
+        reload: () => fetchPage(null),
+    };
+}
+/** `organization_invitation.created` → `Organization invitation created`. */
+function describeAction(action) {
+    const text = action.replace(/[._]+/g, ' ').trim();
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+/**
+ * `<OrganizationAuditLog/>` — the active organization's audit trail for its
+ * admins, next to `<OrganizationProfile/>`. Renders nothing for a member who may
+ * not read it (the server is the authority; the component just follows it).
+ * Labels are props so an app can localise them.
+ */
+function OrganizationAuditLog({ pageSize, action, labels = {}, formatDate = (ms) => new Date(ms).toLocaleString(), } = {}) {
+    const { organization } = (0, hooks_1.useOrganization)();
+    const log = useOrganizationAuditLog({ pageSize, action });
     const cardClass = (0, components_shared_1.useClass)('card', 'atlas-card');
     const cls = (0, components_shared_1.useClasses)();
-    if (!organization)
+    if (!organization || log.forbidden)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: cardClass, children: [(0, jsx_runtime_1.jsx)("h1", { className: cls('headerTitle', 'atlas-heading'), children: organization.name }), (0, jsx_runtime_1.jsxs)("p", { className: cls('headerSubtitle', 'atlas-subtitle'), children: [t('organization.roleLabel'), ": ", membership?.role] }), (0, jsx_runtime_1.jsx)(control_components_1.Protect, { permission: "org:sys_memberships:manage", children: (0, jsx_runtime_1.jsx)("button", { className: cls('formButtonSecondary', 'atlas-button-secondary'), children: t('organization.invite') }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cardClass, "data-atlas": "organization-audit-log", children: [(0, jsx_runtime_1.jsx)("h2", { className: cls('headerTitle', 'atlas-title'), children: labels.title ?? 'Audit log' }), log.entries.length === 0 && !log.loading ? ((0, jsx_runtime_1.jsx)("p", { className: cls('headerSubtitle', 'atlas-subtitle'), children: labels.empty ?? 'No activity recorded yet.' })) : ((0, jsx_runtime_1.jsx)("ul", { className: cls('list', 'atlas-audit-list'), children: log.entries.map((entry) => ((0, jsx_runtime_1.jsxs)("li", { className: cls('listItem', 'atlas-audit-item'), "data-action": entry.action, children: [(0, jsx_runtime_1.jsx)("strong", { children: describeAction(entry.action) }), (0, jsx_runtime_1.jsxs)("span", { className: "atlas-audit-meta", children: [' · ', formatDate(entry.created_at), entry.actor.id ? ` · ${labels.actor ?? 'by'} ${entry.actor.type} ${entry.actor.id}` : ''] })] }, entry.id))) })), log.hasMore ? ((0, jsx_runtime_1.jsx)("button", { className: cls('formButtonSecondary', 'atlas-button-secondary'), disabled: log.loading, onClick: () => void log.loadMore(), children: labels.loadMore ?? 'Load more' })) : null] }));
 }
 //# sourceMappingURL=organization.js.map