@atlasauth/angular 0.1.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -0,0 +1,1557 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, computed, Injectable, TemplateRef, ViewContainerRef, Directive, Input, ElementRef, Renderer2, RendererStyleFlags2, EventEmitter, Output, ChangeDetectionStrategy, Component, signal, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, combineLatest, firstValueFrom } from 'rxjs';
+import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
+import { TokenCache, FapiClient, getProviderToken, readRedirectResult, stripRedirectParams, readExpiry, msUntilRefresh, nextStep, flowFromPending, initialFlow, advance, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+export { FapiClient, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
+import { evaluate } from '@atlasauth/authz';
+export { evaluate, hasFromClaims } from '@atlasauth/authz';
+import { Router } from '@angular/router';
+
+/**
+ * DI token carrying the resolved {@link AtlasOptions}. Populated by
+ * {@link provideAtlas} (standalone) or {@link AtlasModule.forRoot} (NgModule)
+ * and read by {@link AtlasService}. Applications rarely inject this directly.
+ */
+const ATLAS_OPTIONS = new InjectionToken('ATLAS_OPTIONS');
+
+/**
+ * §10.3 theming.
+ *
+ * "appearance prop: design tokens (colors, radius, font, spacing) + per-element
+ * class overrides (elements: { formButtonPrimary: "…" }). No iframe — components
+ * render in the host DOM so Tailwind/CSS just works."
+ *
+ * Rendering in the host DOM is the decision everything else follows from. An
+ * iframe would isolate styles perfectly and be unusable: it cannot be sized to
+ * its content reliably, it breaks password managers, it breaks autofill, and a
+ * Tailwind class the customer writes has no effect inside it. Sharing the DOM
+ * means the customer's CSS reaches our markup, which is exactly what they want
+ * and what makes an override system necessary rather than decorative.
+ *
+ * Element classes are APPENDED to ours, never replacing them. A customer adding
+ * `className="rounded-xl"` wants a rounder button, not an unstyled one — and
+ * replacement is a support burden where every override starts by rebuilding the
+ * component's base styles from scratch.
+ */
+const DEFAULT_TOKENS = {
+    colorPrimary: '#5b5bd6',
+    colorText: '#1c1c1f',
+    colorBackground: '#ffffff',
+    colorDanger: '#d64545',
+    colorBorder: '#e4e4e9',
+    borderRadius: '8px',
+    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+    spacingUnit: '4px',
+};
+/**
+ * §10.3: "prebuilt themes shipped (default, dark, neobrutalist as a demo of the
+ * override system)". Neobrutalist exists to prove the token set is expressive
+ * enough for a theme that looks nothing like the default — a theming system
+ * that only produces tasteful variations of itself is not a theming system.
+ */
+const THEMES = {
+    default: DEFAULT_TOKENS,
+    dark: {
+        ...DEFAULT_TOKENS,
+        colorText: '#e6e9ef',
+        colorBackground: '#14171c',
+        colorBorder: '#242932',
+        colorPrimary: '#6ea8fe',
+    },
+    neobrutalist: {
+        ...DEFAULT_TOKENS,
+        colorPrimary: '#ffe600',
+        colorText: '#000000',
+        colorBackground: '#ffffff',
+        colorBorder: '#000000',
+        borderRadius: '0px',
+        fontFamily: '"Courier New", ui-monospace, monospace',
+    },
+};
+/**
+ * Resolve tokens: defaults, then the base theme, then explicit variables.
+ *
+ * Later wins, and `undefined` never overwrites. A customer setting one variable
+ * on the dark theme expects the other eleven to stay dark, not silently revert
+ * to the light defaults.
+ */
+function resolveTokens(appearance) {
+    const base = appearance?.baseTheme ? THEMES[appearance.baseTheme] : DEFAULT_TOKENS;
+    const overrides = appearance?.variables ?? {};
+    const resolved = { ...DEFAULT_TOKENS, ...base };
+    for (const [key, value] of Object.entries(overrides)) {
+        if (value !== undefined)
+            resolved[key] = value;
+    }
+    return resolved;
+}
+/** Tokens as CSS custom properties, for the host DOM to inherit. */
+function cssVariables(tokens) {
+    const vars = {};
+    for (const [key, value] of Object.entries(tokens)) {
+        // camelCase → --atlas-kebab-case, which is what a customer writes in CSS.
+        vars[`--atlas-${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`] = value;
+    }
+    return vars;
+}
+/**
+ * Combine our base class with the customer's override.
+ *
+ * Appended, never replaced — a customer adding `rounded-xl` wants a rounder
+ * button, not an unstyled one. Theirs comes last so it wins on equal
+ * specificity, which is the behaviour anyone writing Tailwind expects.
+ */
+function classFor(element, appearance, base) {
+    const override = appearance?.elements?.[element];
+    return override ? `${base} ${override}` : base;
+}
+
+/**
+ * §10.3: "Every string passes through an i18n catalog; en-US ships, catalog
+ * format documented for community locales."
+ *
+ * A flat key-to-string map rather than nested objects, because nesting looks
+ * tidier and makes a missing key a runtime crash on `undefined.of.a.chain`
+ * rather than a visible fallback.
+ *
+ * A missing key renders the KEY, not an empty string. A blank button is a bug
+ * nobody can report; a button reading `signIn.submit` is one anyone can.
+ */
+const EN_US = {
+    'signIn.title': 'Sign in',
+    'signIn.subtitle': 'to continue to {application}',
+    'signIn.identifierLabel': 'Email address',
+    'signIn.passwordLabel': 'Password',
+    'signIn.submit': 'Continue',
+    'signIn.forgotPassword': 'Forgot password?',
+    'signIn.noAccount': 'No account?',
+    'signIn.signUpLink': 'Sign up',
+    'signIn.orDivider': 'or',
+    'signIn.socialButton': 'Continue with {provider}',
+    'signIn.emailCodeLabel': 'Verification code',
+    'signIn.magicLinkSent': 'Check your email for a sign-in link.',
+    'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',
+    'signUp.title': 'Create your account',
+    'signUp.submit': 'Continue',
+    'signUp.haveAccount': 'Already have an account?',
+    'signUp.signInLink': 'Sign in',
+    'mfa.title': 'Two-step verification',
+    'mfa.subtitle': 'Enter the code from your authenticator app.',
+    'mfa.codeLabel': 'Code',
+    'mfa.enrollFirstCodeLabel': 'Code from your authenticator app',
+    'mfa.enrollSecondCodeLabel': 'The next code it shows',
+    'mfa.usePasskey': 'Use a passkey instead',
+    'mfa.useBackupCode': 'Use a recovery code',
+    'mfa.submit': 'Verify',
+    'reset.title': 'Reset your password',
+    'reset.submit': 'Send reset code',
+    'reset.newPasswordLabel': 'New password',
+    'userButton.manageAccount': 'Manage account',
+    'userButton.signOut': 'Sign out',
+    'userButton.signOutAll': 'Sign out of all devices',
+    'userProfile.title': 'Account',
+    'userProfile.profileSection': 'Profile',
+    'userProfile.emailsSection': 'Email addresses',
+    'userProfile.securitySection': 'Security',
+    'userProfile.devicesSection': 'Active devices',
+    'userProfile.dangerSection': 'Danger zone',
+    'userProfile.addEmail': 'Add an email address',
+    'userProfile.makePrimary': 'Make primary',
+    'userProfile.unverified': 'Unverified',
+    'userProfile.revokeDevice': 'Sign out',
+    'userProfile.deleteAccount': 'Delete account',
+    'organization.switcher': 'Switch organization',
+    'organization.personal': 'Personal account',
+    'organization.members': 'Members',
+    'organization.invite': 'Invite member',
+    'organization.roleLabel': 'Role',
+    'error.generic': 'Something went wrong. Please try again.',
+    'error.network': 'We could not reach the server. Check your connection.',
+};
+/**
+ * Look up a key and interpolate `{placeholders}`.
+ *
+ * An unknown placeholder is left visible for the same reason a missing key is:
+ * `Continue with {provider}` in the UI is a bug report waiting to be filed,
+ * whereas `Continue with ` is one nobody notices until a customer does.
+ */
+function translate(catalog, key, variables = {}) {
+    const template = catalog[key] ?? EN_US[key] ?? key;
+    return template.replace(/\{(\w+)\}/g, (match, name) => variables[name] ?? match);
+}
+/** Merge a community locale over en-US so a partial translation still renders. */
+function withFallback(locale) {
+    return { ...EN_US, ...locale };
+}
+
+/**
+ * `AtlasService` — the Angular peer of React's `<AtlasProvider>` + hooks.
+ *
+ * It holds exactly one thing that matters in memory: the short-lived JWT, in a
+ * {@link TokenCache}. Not localStorage, not a cookie this code writes — the
+ * refresh token is HttpOnly so browser script never touches it, and the JWT
+ * lives only as long as the tab. Anything persisted would survive the tab and
+ * become the first thing an XSS reads.
+ *
+ * Reactive auth state is exposed two ways so callers can pick their idiom:
+ *  - RxJS observables (`user$`, `session$`, `isSignedIn$`, …) — the primary API,
+ *    the analogue of the React hooks' return values.
+ *  - Angular signals (`user`, `session`, `isSignedIn`, …) — the same values as
+ *    `Signal<T>`, for templates and `computed()`.
+ *
+ * The imperative methods (`signOut`, `getToken`, `getProviderToken`,
+ * `setActiveOrganization`, `reload`) mirror the actions the hooks return.
+ */
+class AtlasService {
+    options = inject(ATLAS_OPTIONS);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    baseUrl;
+    publishableKey;
+    doFetch;
+    cache = new TokenCache();
+    fapiClient;
+    refreshTimer = null;
+    catalog;
+    /**
+     * A sign-in attempt handed back by an OAuth redirect that still needs a second
+     * factor (no session was issued). Null in the ordinary case; the `<atlas-sign-in>`
+     * flow seeds itself from this so the user resumes at the 2FA step. Captured
+     * once, synchronously, at construction — before any flow component reads it.
+     */
+    pendingAttempt;
+    // --- Reactive state (source of truth) ---------------------------------------
+    _status = new BehaviorSubject('loading');
+    _user = new BehaviorSubject(null);
+    _session = new BehaviorSubject(null);
+    _claims = new BehaviorSubject(null);
+    _memberships = new BehaviorSubject([]);
+    /** The three-state auth lifecycle: `loading` → `signed_in` | `signed_out`. */
+    status$ = this._status.asObservable();
+    user$ = this._user.asObservable();
+    session$ = this._session.asObservable();
+    claims$ = this._claims.asObservable();
+    memberships$ = this._memberships.asObservable();
+    /**
+     * True once the SDK has finished its first boot. Distinguishing "still loading"
+     * from "signed out" is what lets a template avoid the flash of a sign-in form
+     * on every page load.
+     */
+    isLoaded$ = this.status$.pipe(map((s) => s !== 'loading'), distinctUntilChanged());
+    isSignedIn$ = this.status$.pipe(map((s) => s === 'signed_in'), distinctUntilChanged());
+    /** The active organization membership, derived from the token's `org_id` claim. */
+    organization$ = combineLatest([
+        this._memberships,
+        this._claims,
+    ]).pipe(map(([memberships, claims]) => memberships.find((m) => m.organization.id === claims?.org_id) ?? null));
+    // --- Signal mirror ----------------------------------------------------------
+    status = toSignal(this.status$, { initialValue: 'loading' });
+    user = toSignal(this.user$, { initialValue: null });
+    session = toSignal(this.session$, { initialValue: null });
+    claims = toSignal(this.claims$, { initialValue: null });
+    memberships = toSignal(this.memberships$, {
+        initialValue: [],
+    });
+    isLoaded = computed(() => this.status() !== 'loading');
+    isSignedIn = computed(() => this.status() === 'signed_in');
+    organization = computed(() => {
+        const orgId = this.claims()?.org_id;
+        return this.memberships().find((m) => m.organization.id === orgId) ?? null;
+    });
+    constructor() {
+        const options = this.options;
+        this.publishableKey = options.publishableKey;
+        this.baseUrl = options.frontendApi ?? '';
+        this.doFetch = options.fetchImpl ?? ((...args) => fetch(...args));
+        this.catalog = options.localization ? withFallback(options.localization) : EN_US;
+        this.fapiClient = new FapiClient({
+            publishableKey: this.publishableKey,
+            baseUrl: this.baseUrl,
+            fetchImpl: this.doFetch,
+        });
+        // Captured synchronously (not in an async init) so it is available before any
+        // flow component reads it: a needs_second_factor redirect carries a status but
+        // no ticket, and that is what the 2FA resume seeds from.
+        this.pendingAttempt = this.isBrowser ? this.readPendingAttempt() : null;
+        // Boot once, browser only. On the server there is no cookie jar to read a
+        // session from, so we leave the state at `loading` and let hydration boot it.
+        if (this.isBrowser) {
+            void this.boot();
+        }
+    }
+    ngOnDestroy() {
+        this.clearRefreshTimer();
+        this._status.complete();
+        this._user.complete();
+        this._session.complete();
+        this._claims.complete();
+        this._memberships.complete();
+    }
+    // --- Configuration accessors ------------------------------------------------
+    get appearance() {
+        return this.options.appearance;
+    }
+    get localization() {
+        return this.catalog;
+    }
+    get frontendApi() {
+        return this.baseUrl;
+    }
+    /** Tokens as CSS custom properties, for a host element to inherit. */
+    appearanceVariables() {
+        return cssVariables(resolveTokens(this.options.appearance));
+    }
+    /** A fresh {@link FapiClient} for driving a sign-in/sign-up flow. */
+    createFapiClient() {
+        return new FapiClient({ publishableKey: this.publishableKey, baseUrl: this.baseUrl });
+    }
+    // --- Imperative API (mirrors the React hooks' actions) ----------------------
+    /**
+     * The current session's JWT, always fresh: if the cached token is within 5s of
+     * expiry it is refreshed first rather than handed over. Null when signed out.
+     */
+    async getToken() {
+        const usable = this.cache.get(5_000);
+        if (usable)
+            return usable.jwt;
+        await this.refresh();
+        return this.cache.get(5_000)?.jwt ?? null;
+    }
+    /**
+     * The signed-in user's OWN live access token at a connected provider (Google,
+     * GitHub, …), so the app can call that provider's API from the browser. Null
+     * when there is no usable token — no linked account, or the provider granted /
+     * kept none. The server refreshes a stale token on read; the refresh token is
+     * never exposed.
+     */
+    getProviderToken(provider) {
+        return getProviderToken(this.fapiClient, provider);
+    }
+    /** Imperative `has()` — the same evaluation `*atlasProtect` renders on. */
+    has(condition) {
+        return evaluate(this._claims.value, condition).allowed;
+    }
+    /** Revoke the current session server-side and drop all local auth state. */
+    async signOut() {
+        const current = this.cache.peek();
+        if (current) {
+            await this.call(`/v1/client/sessions/${current.sessionId}/revoke`, {
+                method: 'POST',
+            }).catch(() => undefined);
+        }
+        this.clearRefreshTimer();
+        this.cache.clear();
+        this._status.next('signed_out');
+        this._user.next(null);
+        this._session.next(null);
+        this._claims.next(null);
+        this._memberships.next([]);
+    }
+    /**
+     * Switch the active organization (or `null` for the personal account). The
+     * new token carries the new org claims, so the app's permission checks update
+     * without a re-login.
+     */
+    async setActiveOrganization(organizationId) {
+        const current = this.cache.peek();
+        if (!current)
+            return;
+        const response = await this.call(`/v1/client/sessions/${current.sessionId}/touch`, {
+            method: 'POST',
+            body: JSON.stringify({ active_organization_id: organizationId }),
+        });
+        if (!response.ok)
+            return;
+        const body = (await response.json());
+        this.applyToken(body.jwt, current.sessionId);
+        await this.reload();
+    }
+    /** Re-read `/v1/client`: refresh user, session, memberships and status. */
+    async reload() {
+        try {
+            const response = await this.call('/v1/client');
+            if (!response.ok)
+                throw new Error('boot failed');
+            const body = (await response.json());
+            if (!body.session || !body.user) {
+                this.clearRefreshTimer();
+                this.cache.clear();
+                this._status.next('signed_out');
+                this._user.next(null);
+                this._session.next(null);
+                this._claims.next(null);
+                this._memberships.next([]);
+                return;
+            }
+            this._user.next(body.user);
+            this._session.next(body.session);
+            this._memberships.next(body.organization_memberships ?? []);
+            if (body.jwt)
+                this.applyToken(body.jwt, body.session.id);
+            this._status.next('signed_in');
+            this.scheduleRefresh();
+        }
+        catch {
+            // A failed boot is NOT signed-out. Rendering a sign-in form because the
+            // network hiccuped throws away a perfectly good session and forces a
+            // needless re-authentication. Only promote loading → signed_out.
+            if (this._status.value === 'loading')
+                this._status.next('signed_out');
+        }
+    }
+    // --- Internals --------------------------------------------------------------
+    /**
+     * §6.3 step 3: complete a redirect-based sign-in, then boot. An OAuth or
+     * hosted-page flow lands back with a one-time ticket in the URL; exchange it
+     * for cookies, scrub the URL so a reload cannot replay it, THEN read the
+     * session. A redirect carrying only a status (a second factor is still owed)
+     * has no ticket, so nothing is exchanged and the app boots signed-out.
+     */
+    async boot() {
+        const result = readRedirectResult(window.location.search);
+        if (result?.ticket) {
+            await this.call('/v1/client/tickets/exchange', {
+                method: 'POST',
+                body: JSON.stringify({ attempt_id: result.attemptId, ticket: result.ticket }),
+            }).catch(() => undefined);
+        }
+        if (result) {
+            window.history.replaceState({}, document.title, stripRedirectParams(window.location.href));
+        }
+        await this.reload();
+    }
+    readPendingAttempt() {
+        const result = readRedirectResult(window.location.search);
+        return result?.status && !result.ticket
+            ? { id: result.attemptId, status: result.status }
+            : null;
+    }
+    call(path, init) {
+        return this.doFetch(`${this.baseUrl}${path}`, {
+            ...init,
+            // Cookies carry the session; a request without this is indistinguishable
+            // from being signed out.
+            credentials: 'include',
+            headers: {
+                'x-publishable-key': this.publishableKey,
+                ...(init?.body ? { 'content-type': 'application/json' } : {}),
+                ...init?.headers,
+            },
+        });
+    }
+    applyToken(jwt, sessionId) {
+        const expiresAt = readExpiry(jwt);
+        if (!expiresAt)
+            return;
+        this.cache.set({ jwt, expiresAt, sessionId });
+        this._claims.next(decodeClaims(jwt));
+    }
+    async refresh() {
+        const current = this.cache.peek();
+        if (!current)
+            return;
+        try {
+            const response = await this.call(`/v1/client/sessions/${current.sessionId}/tokens`, {
+                method: 'POST',
+            });
+            if (!response.ok)
+                throw new Error('refresh failed');
+            const body = (await response.json());
+            this.applyToken(body.jwt, body.session_id);
+            this.scheduleRefresh();
+        }
+        catch {
+            // The session may genuinely be gone. Re-boot rather than guess.
+            await this.reload();
+        }
+    }
+    /** §7.4: proactive, jittered refresh scheduled from the token's own expiry. */
+    scheduleRefresh() {
+        this.clearRefreshTimer();
+        if (this._status.value !== 'signed_in')
+            return;
+        const token = this.cache.peek();
+        if (!token)
+            return;
+        const delay = msUntilRefresh({ token, now: Date.now() });
+        this.refreshTimer = setTimeout(() => void this.refresh(), delay);
+    }
+    clearRefreshTimer() {
+        if (this.refreshTimer) {
+            clearTimeout(this.refreshTimer);
+            this.refreshTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/** Decode a JWT payload without verifying it — a scheduling/UI hint only. */
+function decodeClaims(jwt) {
+    const parts = jwt.split('.');
+    if (parts.length !== 3)
+        return null;
+    try {
+        return JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
+    }
+    catch {
+        return null;
+    }
+}
+
+/**
+ * Shared machinery for the boolean structural directives (`*atlasSignedIn`,
+ * `*atlasSignedOut`, `*atlasLoading`, `*atlasLoaded`). A subclass names the
+ * stream to gate on; this base mounts the embedded view exactly when that stream
+ * is true and tears it down otherwise, mirroring how the React `<SignedIn>` /
+ * `<SignedOut>` components render `children` or `null`.
+ */
+class AtlasToggleDirective {
+    atlas = inject(AtlasService);
+    templateRef = inject(TemplateRef);
+    viewContainer = inject(ViewContainerRef);
+    sub;
+    shown = false;
+    ngOnInit() {
+        this.sub = this.source()
+            .pipe(distinctUntilChanged())
+            .subscribe((show) => this.render(show));
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    render(show) {
+        if (show && !this.shown) {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            this.shown = true;
+        }
+        else if (!show && this.shown) {
+            this.viewContainer.clear();
+            this.shown = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasToggleDirective, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasToggleDirective, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * `*atlasSignedIn` — render the template only when the SDK has loaded AND the
+ * user is signed in. The Angular peer of React's `<SignedIn>`. Renders nothing
+ * while loading, so no signed-in UI flashes before boot completes.
+ *
+ * ```html
+ * <div *atlasSignedIn>Welcome back</div>
+ * ```
+ */
+class AtlasSignedInDirective extends AtlasToggleDirective {
+    source() {
+        return combineLatest([this.atlas.isLoaded$, this.atlas.isSignedIn$]).pipe(map(([loaded, signedIn]) => loaded && signedIn));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasSignedInDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasSignedInDirective, isStandalone: true, selector: "[atlasSignedIn]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasSignedInDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasSignedIn]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * `*atlasSignedOut` — render the template only when the SDK has loaded AND the
+ * user is signed out. The Angular peer of React's `<SignedOut>`. Renders nothing
+ * while loading, the symmetric partner of `*atlasSignedIn`.
+ *
+ * ```html
+ * <atlas-sign-in *atlasSignedOut></atlas-sign-in>
+ * ```
+ */
+class AtlasSignedOutDirective extends AtlasToggleDirective {
+    source() {
+        return combineLatest([this.atlas.isLoaded$, this.atlas.isSignedIn$]).pipe(map(([loaded, signedIn]) => loaded && !signedIn));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasSignedOutDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasSignedOutDirective, isStandalone: true, selector: "[atlasSignedOut]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasSignedOutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasSignedOut]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * `*atlasLoading` — render the template only while the SDK is still booting. The
+ * Angular peer of React's `<AtlasLoading>`; show a spinner here.
+ */
+class AtlasLoadingDirective extends AtlasToggleDirective {
+    source() {
+        return this.atlas.isLoaded$.pipe(map((loaded) => !loaded));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasLoadingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasLoadingDirective, isStandalone: true, selector: "[atlasLoading]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasLoading]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * `*atlasLoaded` — render the template only once the SDK has finished booting.
+ * The Angular peer of React's `<AtlasLoaded>`, the symmetric partner of
+ * `*atlasLoading`.
+ */
+class AtlasLoadedDirective extends AtlasToggleDirective {
+    source() {
+        return this.atlas.isLoaded$;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasLoadedDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasLoadedDirective, isStandalone: true, selector: "[atlasLoaded]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasLoadedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasLoaded]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * `*atlasProtect` — render the template only when the active organization role
+ * satisfies a {@link ProtectCondition}. The Angular peer of React's
+ * `<Protect permission="…">`.
+ *
+ * A RENDERING helper, never an authorization boundary: anyone can flip the
+ * condition in devtools. The server checking the same permission is what
+ * actually stops them — this directive's only job is to avoid showing a control
+ * that would fail.
+ *
+ * ```html
+ * <button *atlasProtect="{ permission: 'org:sys_memberships:manage' }">Invite</button>
+ *
+ * <!-- with a fallback (identical microsyntax to *ngIf … else) -->
+ * <div *atlasProtect="{ role: 'admin' }; else denied">Admin tools</div>
+ * <ng-template #denied>You lack access.</ng-template>
+ * ```
+ *
+ * An empty condition (`*atlasProtect`) means simply "signed in".
+ */
+class AtlasProtectDirective {
+    atlas = inject(AtlasService);
+    templateRef = inject(TemplateRef);
+    viewContainer = inject(ViewContainerRef);
+    condition$ = new BehaviorSubject({});
+    elseTemplate = null;
+    sub;
+    rendered = 'none';
+    /** The condition to evaluate. An empty/omitted value means "signed in". */
+    set atlasProtect(condition) {
+        this.condition$.next(condition || {});
+    }
+    /** Template rendered when the condition is not met (the `else` branch). */
+    set atlasProtectElse(template) {
+        this.elseTemplate = template;
+        // Re-render against the current state so a late-bound else takes effect.
+        this.condition$.next(this.condition$.value);
+    }
+    ngOnInit() {
+        this.sub = combineLatest([this.atlas.status$, this.atlas.claims$, this.condition$]).subscribe(([status, claims, condition]) => {
+            if (status === 'loading') {
+                this.show('none');
+                return;
+            }
+            this.show(evaluate(claims, condition).allowed ? 'main' : 'else');
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    show(which) {
+        if (which === this.rendered)
+            return;
+        this.viewContainer.clear();
+        if (which === 'main') {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+        else if (which === 'else' && this.elseTemplate) {
+            this.viewContainer.createEmbeddedView(this.elseTemplate);
+        }
+        this.rendered = which;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasProtectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasProtectDirective, isStandalone: true, selector: "[atlasProtect]", inputs: { atlasProtect: "atlasProtect", atlasProtectElse: "atlasProtectElse" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasProtectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasProtect]',
+                    standalone: true,
+                }]
+        }], propDecorators: { atlasProtect: [{
+                type: Input
+            }], atlasProtectElse: [{
+                type: Input
+            }] } });
+
+/**
+ * `atlasRoot` — apply the resolved appearance design tokens as `--atlas-*` CSS
+ * custom properties (and the `atlas-root` class) onto its host element, so the
+ * Atlas components rendered inside inherit them.
+ *
+ * React does this with the wrapping `<div className="atlas-root" style={…}>`
+ * inside `<AtlasProvider>`. Angular has no single wrapping element, so a
+ * consumer opts in by putting `atlasRoot` on whatever element encloses the
+ * Atlas UI (commonly the app root):
+ *
+ * ```html
+ * <div atlasRoot>
+ *   <router-outlet></router-outlet>
+ * </div>
+ * ```
+ */
+class AtlasRootDirective {
+    atlas = inject(AtlasService);
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        this.renderer.addClass(this.el.nativeElement, 'atlas-root');
+        const vars = this.atlas.appearanceVariables();
+        for (const [name, value] of Object.entries(vars)) {
+            // DashCase so a `--atlas-*` custom property is written verbatim, not camelCased.
+            this.renderer.setStyle(this.el.nativeElement, name, value, RendererStyleFlags2.DashCase);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasRootDirective, isStandalone: true, selector: "[atlasRoot]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasRoot]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * The server-driven flow shell, shared by `<atlas-sign-in>` and
+ * `<atlas-sign-up>`. The Angular peer of React's internal `AttemptFlow`.
+ *
+ * It contains NO decision about what comes next: it renders whatever `status`
+ * the server returned, mapped through `nextStep` from `@atlasauth/js` (the same
+ * exhaustive mapping the React SDK uses), so adding a step is a server change
+ * and an out-of-date client degrades to a visible "please update" message rather
+ * than a blank screen.
+ */
+class AttemptFlowComponent {
+    atlas = inject(AtlasService);
+    attempt = null;
+    busy = false;
+    errors = [];
+    titleKey = 'signIn.title';
+    /** Emits the collected field values when the form is submitted. */
+    submitFlow = new EventEmitter();
+    values = {};
+    t(key, vars) {
+        return translate(this.atlas.localization, key, vars);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    setValue(name, value) {
+        this.values = { ...this.values, [name]: value };
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        this.submitFlow.emit(this.values);
+    }
+    formErrors() {
+        return this.errors.filter((error) => !error.param);
+    }
+    fieldErrorsFor(name) {
+        return this.errors.filter((error) => error.param === name);
+    }
+    step() {
+        return this.attempt ? nextStep(this.attempt) : { kind: 'collect_identifier' };
+    }
+    showSubmit() {
+        const kind = this.step().kind;
+        return kind !== 'done' && kind !== 'await_oauth';
+    }
+    fields() {
+        const step = this.step();
+        switch (step.kind) {
+            case 'collect_identifier':
+                return [{ kind: 'input', name: 'identifier', labelKey: 'signIn.identifierLabel', type: 'email' }];
+            case 'collect_first_factor':
+                return [{ kind: 'input', name: 'password', labelKey: 'signIn.passwordLabel', type: 'password' }];
+            case 'collect_second_factor':
+                return [{ kind: 'input', name: 'code', labelKey: 'mfa.codeLabel', type: 'text' }];
+            case 'enroll_second_factor':
+                // Two consecutive codes (§5.6): a phone with a fast clock fails here
+                // rather than on every sign-in afterwards.
+                return [
+                    { kind: 'input', name: 'code', labelKey: 'mfa.enrollFirstCodeLabel', type: 'text' },
+                    { kind: 'input', name: 'secondCode', labelKey: 'mfa.enrollSecondCodeLabel', type: 'text' },
+                ];
+            case 'collect_email_code':
+                return [{ kind: 'input', name: 'code', labelKey: 'signIn.emailCodeLabel', type: 'text' }];
+            case 'collect_new_password':
+                return [{ kind: 'input', name: 'password', labelKey: 'reset.newPasswordLabel', type: 'password' }];
+            case 'await_oauth':
+                return [msg('signIn.magicLinkSent')];
+            case 'done':
+                return [msg('signIn.checkOtherTab')];
+            case 'restart':
+                return [msg('error.generic')];
+            default:
+                // A status this SDK version does not know. An honest message beats a
+                // blank login box the user cannot act on.
+                return [msg('error.generic')];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey" }, outputs: { submitFlow: "submitFlow" }, ngImport: i0, template: `
+    <div [class]="cls('card', 'atlas-card')">
+      <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
+
+      @for (error of formErrors(); track error.code) {
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+      }
+
+      <form (submit)="onSubmit($event)">
+        @for (f of fields(); track $index) {
+          @if (f.kind === 'input') {
+            <label class="atlas-field">
+              <span>{{ t(f.labelKey) }}</span>
+              <input
+                [class]="cls('formFieldInput', 'atlas-input')"
+                [type]="f.type"
+                [value]="values[f.name] ?? ''"
+                (input)="setValue(f.name, $any($event.target).value)"
+              />
+              @for (error of fieldErrorsFor(f.name); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </label>
+          } @else {
+            <p>{{ t(f.labelKey) }}</p>
+          }
+        }
+
+        @if (showSubmit()) {
+          <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
+            {{ t('signIn.submit') }}
+          </button>
+        }
+      </form>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-attempt-flow',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div [class]="cls('card', 'atlas-card')">
+      <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
+
+      @for (error of formErrors(); track error.code) {
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+      }
+
+      <form (submit)="onSubmit($event)">
+        @for (f of fields(); track $index) {
+          @if (f.kind === 'input') {
+            <label class="atlas-field">
+              <span>{{ t(f.labelKey) }}</span>
+              <input
+                [class]="cls('formFieldInput', 'atlas-input')"
+                [type]="f.type"
+                [value]="values[f.name] ?? ''"
+                (input)="setValue(f.name, $any($event.target).value)"
+              />
+              @for (error of fieldErrorsFor(f.name); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </label>
+          } @else {
+            <p>{{ t(f.labelKey) }}</p>
+          }
+        }
+
+        @if (showSubmit()) {
+          <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
+            {{ t('signIn.submit') }}
+          </button>
+        }
+      </form>
+    </div>
+  `,
+                }]
+        }], propDecorators: { attempt: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], titleKey: [{
+                type: Input
+            }], submitFlow: [{
+                type: Output
+            }] } });
+/** A read-only message row: `labelKey` holds the i18n key of the text to show. */
+function msg(labelKey) {
+    return { kind: 'message', name: '', labelKey, type: 'text' };
+}
+
+/**
+ * The server-driven sign-in / sign-up engine, shared by `<atlas-sign-in>` and
+ * `<atlas-sign-up>` — the Angular counterpart of React's `useFlow` hook.
+ *
+ * It owns no decision about what comes next: every status comes back from the
+ * server via `advance`, and this controller only posts whatever the current step
+ * needs and re-renders the returned status. State lives in a signal so templates
+ * update whether the app runs zoned or zoneless.
+ */
+class AtlasFlowController {
+    client;
+    reload;
+    state;
+    pollTimer = null;
+    constructor(client, reload, pending) {
+        this.client = client;
+        this.reload = reload;
+        // Seeded from a redirect that came back mid-flow (e.g. OAuth needing a second
+        // factor) so the user resumes at the demanded step instead of starting over.
+        this.state = signal(pending ? flowFromPending(pending) : initialFlow);
+    }
+    /**
+     * Advance the flow with the values the user typed. On completion, exchange the
+     * one-time ticket for cookies over a same-origin request (FAPI is cross-origin
+     * and cannot set the cookie on its own response), then re-boot so the rest of
+     * the app sees a signed-in user.
+     */
+    async submit(values) {
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        const next = await advance(this.client, this.state(), values);
+        this.state.set(next);
+        if (next.attempt?.status === 'complete') {
+            if (next.ticket) {
+                await this.client.post('/v1/client/tickets/exchange', {
+                    attempt_id: next.attempt.id,
+                    ticket: next.ticket,
+                });
+            }
+            await this.reload();
+        }
+        else {
+            // A magic-link step may now be pollable (a link opened on another device).
+            this.syncPolling();
+        }
+    }
+    /** Start/stop the §5.3 magic-link poll to match the current state. */
+    syncPolling() {
+        if (shouldKeepPolling(this.state())) {
+            this.startPolling();
+        }
+        else {
+            this.stopPolling();
+        }
+    }
+    startPolling() {
+        if (this.pollTimer)
+            return;
+        this.pollTimer = setInterval(() => {
+            void (async () => {
+                const { state: next, ticket } = await pollAttempt(this.client, this.state());
+                this.state.set(next);
+                if (!ticket || !next.attempt)
+                    return;
+                // The ticket is exchanged by a normal request, so no session token ever
+                // appears in a URL.
+                await this.client.post('/v1/client/tickets/exchange', {
+                    attempt_id: next.attempt.id,
+                    ticket,
+                });
+                await this.reload();
+                this.stopPolling();
+            })();
+        }, 2_000);
+    }
+    stopPolling() {
+        if (this.pollTimer) {
+            clearInterval(this.pollTimer);
+            this.pollTimer = null;
+        }
+    }
+    /** Release the poll timer — call from the component's `ngOnDestroy`. */
+    destroy() {
+        this.stopPolling();
+    }
+}
+
+/**
+ * `<atlas-sign-in>` — the full, multi-step sign-in flow driven entirely by the
+ * server-side attempt status. The Angular peer of React's `<SignIn/>`.
+ *
+ * ```html
+ * <atlas-sign-in *atlasSignedOut afterUrl="/dashboard"></atlas-sign-in>
+ * ```
+ */
+class SignInComponent {
+    atlas = inject(AtlasService);
+    /** Where to send the user once the flow completes. Reserved for host routing. */
+    afterUrl;
+    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), 
+    // Resume mid-flow if an OAuth redirect came back owing a second factor.
+    this.atlas.pendingAttempt);
+    ngOnInit() {
+        // If seeded from a pending attempt that is already pollable, start polling.
+        this.flow.syncPolling();
+    }
+    ngOnDestroy() {
+        this.flow.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SignInComponent, isStandalone: true, selector: "atlas-sign-in", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
+    <atlas-attempt-flow
+      [attempt]="flow.state().attempt"
+      [busy]="flow.state().busy"
+      [errors]="flow.state().errors"
+      titleKey="signIn.title"
+      (submitFlow)="flow.submit($event)"
+    ></atlas-attempt-flow>
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-sign-in',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AttemptFlowComponent],
+                    template: `
+    <atlas-attempt-flow
+      [attempt]="flow.state().attempt"
+      [busy]="flow.state().busy"
+      [errors]="flow.state().errors"
+      titleKey="signIn.title"
+      (submitFlow)="flow.submit($event)"
+    ></atlas-attempt-flow>
+  `,
+                }]
+        }], propDecorators: { afterUrl: [{
+                type: Input
+            }] } });
+
+/**
+ * `<atlas-sign-up>` — the full, server-driven sign-up flow. The Angular peer of
+ * React's `<SignUp/>`. It shares the exact flow engine with `<atlas-sign-in>`;
+ * only the title differs, because the sequence of steps is decided by the server.
+ *
+ * ```html
+ * <atlas-sign-up *atlasSignedOut></atlas-sign-up>
+ * ```
+ */
+class SignUpComponent {
+    atlas = inject(AtlasService);
+    /** Where to send the user once the flow completes. Reserved for host routing. */
+    afterUrl;
+    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), this.atlas.pendingAttempt);
+    ngOnDestroy() {
+        this.flow.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SignUpComponent, isStandalone: true, selector: "atlas-sign-up", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
+    <atlas-attempt-flow
+      [attempt]="flow.state().attempt"
+      [busy]="flow.state().busy"
+      [errors]="flow.state().errors"
+      titleKey="signUp.title"
+      (submitFlow)="flow.submit($event)"
+    ></atlas-attempt-flow>
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-sign-up',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AttemptFlowComponent],
+                    template: `
+    <atlas-attempt-flow
+      [attempt]="flow.state().attempt"
+      [busy]="flow.state().busy"
+      [errors]="flow.state().errors"
+      titleKey="signUp.title"
+      (submitFlow)="flow.submit($event)"
+    ></atlas-attempt-flow>
+  `,
+                }]
+        }], propDecorators: { afterUrl: [{
+                type: Input
+            }] } });
+
+/**
+ * `<atlas-user-button>` — the signed-in user's avatar with a drop-down that can
+ * sign them out. The Angular peer of React's `<UserButton/>`. Renders nothing
+ * when there is no user.
+ */
+class UserButtonComponent {
+    atlas = inject(AtlasService);
+    open = signal(false);
+    label = computed(() => {
+        const user = this.atlas.user();
+        if (!user)
+            return '';
+        return [user.first_name, user.last_name].filter(Boolean).join(' ') || user.username || '';
+    });
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    toggle() {
+        this.open.update((o) => !o);
+    }
+    signOut() {
+        void this.atlas.signOut();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UserButtonComponent, isStandalone: true, selector: "atlas-user-button", ngImport: i0, template: `
+    @if (atlas.user(); as user) {
+      <div class="atlas-user-button">
+        <button
+          [class]="cls('avatar', 'atlas-avatar')"
+          [attr.aria-expanded]="open()"
+          (click)="toggle()"
+        >
+          @if (user.image_url) {
+            <img [src]="user.image_url" alt="" />
+          } @else {
+            <span>{{ label().slice(0, 1) }}</span>
+          }
+        </button>
+
+        @if (open()) {
+          <div [class]="cls('menu', 'atlas-menu')" role="menu">
+            <span [class]="cls('menuItem', 'atlas-menu-item')">{{ label() }}</span>
+            <button [class]="cls('menuItem', 'atlas-menu-item')" (click)="signOut()">
+              {{ t('userButton.signOut') }}
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-user-button',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (atlas.user(); as user) {
+      <div class="atlas-user-button">
+        <button
+          [class]="cls('avatar', 'atlas-avatar')"
+          [attr.aria-expanded]="open()"
+          (click)="toggle()"
+        >
+          @if (user.image_url) {
+            <img [src]="user.image_url" alt="" />
+          } @else {
+            <span>{{ label().slice(0, 1) }}</span>
+          }
+        </button>
+
+        @if (open()) {
+          <div [class]="cls('menu', 'atlas-menu')" role="menu">
+            <span [class]="cls('menuItem', 'atlas-menu-item')">{{ label() }}</span>
+            <button [class]="cls('menuItem', 'atlas-menu-item')" (click)="signOut()">
+              {{ t('userButton.signOut') }}
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * `<atlas-organization-switcher>` — switch the active organization (or the
+ * personal account). The Angular peer of React's `<OrganizationSwitcher/>`.
+ */
+class OrganizationSwitcherComponent {
+    atlas = inject(AtlasService);
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    setActive(organizationId) {
+        void this.atlas.setActiveOrganization(organizationId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OrganizationSwitcherComponent, isStandalone: true, selector: "atlas-organization-switcher", ngImport: i0, template: `
+    <div [class]="cls('menu', 'atlas-menu')">
+      <button [class]="cls('menuItem', 'atlas-menu-item')" (click)="setActive(null)">
+        {{ t('organization.personal') }}
+      </button>
+      @for (membership of atlas.memberships(); track membership.organization.id) {
+        <button
+          [class]="cls('menuItem', 'atlas-menu-item')"
+          [disabled]="membership.organization.id === atlas.organization()?.organization?.id"
+          (click)="setActive(membership.organization.id)"
+        >
+          {{ membership.organization.name }}
+        </button>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-organization-switcher',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div [class]="cls('menu', 'atlas-menu')">
+      <button [class]="cls('menuItem', 'atlas-menu-item')" (click)="setActive(null)">
+        {{ t('organization.personal') }}
+      </button>
+      @for (membership of atlas.memberships(); track membership.organization.id) {
+        <button
+          [class]="cls('menuItem', 'atlas-menu-item')"
+          [disabled]="membership.organization.id === atlas.organization()?.organization?.id"
+          (click)="setActive(membership.organization.id)"
+        >
+          {{ membership.organization.name }}
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * `<atlas-user-profile>` — the signed-in user's account surface (emails,
+ * security). The Angular peer of React's `<UserProfile/>`. Renders nothing when
+ * there is no user.
+ */
+class UserProfileComponent {
+    atlas = inject(AtlasService);
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UserProfileComponent, isStandalone: true, selector: "atlas-user-profile", ngImport: i0, template: `
+    @if (atlas.user(); as user) {
+      <div [class]="cls('card', 'atlas-card')">
+        <h1>{{ t('userProfile.title') }}</h1>
+
+        <section>
+          <h2>{{ t('userProfile.emailsSection') }}</h2>
+          <ul>
+            @for (email of user.email_addresses ?? []; track email.id) {
+              <li>
+                {{ email.email_address }}
+                @if (!email.verified) {
+                  <em> — {{ t('userProfile.unverified') }}</em>
+                }
+              </li>
+            }
+          </ul>
+        </section>
+
+        <section>
+          <h2>{{ t('userProfile.securitySection') }}</h2>
+          <p>{{ user.mfa_enabled ? '2FA on' : '2FA off' }}</p>
+        </section>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserProfileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-user-profile',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (atlas.user(); as user) {
+      <div [class]="cls('card', 'atlas-card')">
+        <h1>{{ t('userProfile.title') }}</h1>
+
+        <section>
+          <h2>{{ t('userProfile.emailsSection') }}</h2>
+          <ul>
+            @for (email of user.email_addresses ?? []; track email.id) {
+              <li>
+                {{ email.email_address }}
+                @if (!email.verified) {
+                  <em> — {{ t('userProfile.unverified') }}</em>
+                }
+              </li>
+            }
+          </ul>
+        </section>
+
+        <section>
+          <h2>{{ t('userProfile.securitySection') }}</h2>
+          <p>{{ user.mfa_enabled ? '2FA on' : '2FA off' }}</p>
+        </section>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * `<atlas-organization-profile>` — the active organization's surface. The
+ * Angular peer of React's `<OrganizationProfile/>`. Management controls are
+ * gated on the ACTIVE org role via `*atlasProtect`, matching the server's rule
+ * rather than duplicating a looser one. Renders nothing with no active org.
+ */
+class OrganizationProfileComponent {
+    atlas = inject(AtlasService);
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OrganizationProfileComponent, isStandalone: true, selector: "atlas-organization-profile", ngImport: i0, template: `
+    @if (atlas.organization(); as membership) {
+      <div [class]="cls('card', 'atlas-card')">
+        <h1>{{ membership.organization.name }}</h1>
+        <p>{{ t('organization.roleLabel') }}: {{ membership.role }}</p>
+
+        <button *atlasProtect="{ permission: 'org:sys_memberships:manage' }">
+          {{ t('organization.invite') }}
+        </button>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: AtlasProtectDirective, selector: "[atlasProtect]", inputs: ["atlasProtect", "atlasProtectElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationProfileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-organization-profile',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AtlasProtectDirective],
+                    template: `
+    @if (atlas.organization(); as membership) {
+      <div [class]="cls('card', 'atlas-card')">
+        <h1>{{ membership.organization.name }}</h1>
+        <p>{{ t('organization.roleLabel') }}: {{ membership.role }}</p>
+
+        <button *atlasProtect="{ permission: 'org:sys_memberships:manage' }">
+          {{ t('organization.invite') }}
+        </button>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * Every standalone directive and component the SDK ships. Import the array in a
+ * standalone component's `imports`, or rely on `AtlasModule` re-exporting it for
+ * NgModule-based apps:
+ *
+ * ```ts
+ * @Component({ standalone: true, imports: [...ATLAS_UI], template: '…' })
+ * ```
+ */
+const ATLAS_UI = [
+    AtlasSignedInDirective,
+    AtlasSignedOutDirective,
+    AtlasLoadingDirective,
+    AtlasLoadedDirective,
+    AtlasProtectDirective,
+    AtlasRootDirective,
+    SignInComponent,
+    SignUpComponent,
+    UserButtonComponent,
+    OrganizationSwitcherComponent,
+    UserProfileComponent,
+    OrganizationProfileComponent,
+];
+
+/**
+ * Standalone-provider entry point (Angular 17+). Register Atlas once at the
+ * application root — the direct analogue of wrapping the tree in React's
+ * `<AtlasProvider publishableKey>`:
+ *
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideAtlas({ publishableKey: 'pk_test_…' }),
+ *     provideRouter(routes),
+ *   ],
+ * });
+ * ```
+ *
+ * The returned providers make {@link AtlasService} injectable and eagerly
+ * construct it, so the SDK begins its first boot (redirect-completion + session
+ * read) as soon as the app starts — matching the React provider mounting on the
+ * first render.
+ */
+function provideAtlas(options) {
+    return makeEnvironmentProviders([
+        { provide: ATLAS_OPTIONS, useValue: options },
+        AtlasService,
+        {
+            // Eagerly instantiate AtlasService so its boot runs at startup rather than
+            // lazily on first injection — the equivalent of the provider mounting.
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                inject(AtlasService);
+            },
+        },
+    ]);
+}
+/**
+ * NgModule entry point for apps not yet on the standalone bootstrap. Import
+ * `AtlasModule.forRoot({ publishableKey })` once in the root module; feature
+ * modules import `AtlasModule` (no args) to use the directives/components.
+ */
+class AtlasModule {
+    static forRoot(options) {
+        const providers = [
+            { provide: ATLAS_OPTIONS, useValue: options },
+            AtlasService,
+            {
+                provide: ENVIRONMENT_INITIALIZER,
+                multi: true,
+                useValue: () => {
+                    inject(AtlasService);
+                },
+            },
+        ];
+        return { ngModule: AtlasModule, providers };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule, imports: [AtlasSignedInDirective, AtlasSignedOutDirective, AtlasLoadingDirective, AtlasLoadedDirective, AtlasProtectDirective, AtlasRootDirective, SignInComponent, SignUpComponent, UserButtonComponent, OrganizationSwitcherComponent, UserProfileComponent, OrganizationProfileComponent], exports: [AtlasSignedInDirective, AtlasSignedOutDirective, AtlasLoadingDirective, AtlasLoadedDirective, AtlasProtectDirective, AtlasRootDirective, SignInComponent, SignUpComponent, UserButtonComponent, OrganizationSwitcherComponent, UserProfileComponent, OrganizationProfileComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    // Standalone directives/components are re-exported so NgModule consumers get
+                    // them just by importing AtlasModule, the way they would with a classic module.
+                    imports: [...ATLAS_UI],
+                    exports: [...ATLAS_UI],
+                }]
+        }] });
+
+/**
+ * Route guard factory that gates a route on session — and optionally on a
+ * permission/role. The Angular peer of using `<SignedIn>` / `<Protect>` to fence
+ * a page, expressed as a `CanActivateFn`.
+ *
+ * ```ts
+ * export const routes: Routes = [
+ *   { path: 'dashboard', canActivate: [atlasGuard({ redirectTo: '/sign-in' })], ... },
+ *   {
+ *     path: 'admin',
+ *     canActivate: [atlasGuard({ permission: 'org:admin', redirectTo: '/' })],
+ *     ...
+ *   },
+ * ];
+ * ```
+ *
+ * The guard first waits for the SDK to finish booting, so a hard refresh onto a
+ * protected URL does not bounce to sign-in before the session has been read.
+ * Like the components, this is UX, not security: the server enforces the same
+ * checks on every request.
+ */
+function atlasGuard(options = {}) {
+    const { redirectTo, preserveReturnUrl = true, ...condition } = options;
+    return async (_route, state) => {
+        const atlas = inject(AtlasService);
+        const router = inject(Router);
+        // Wait for boot to settle so we judge against a real answer, not `loading`.
+        await firstValueFrom(atlas.status$.pipe(filter((s) => s !== 'loading'), take(1)));
+        const allowed = evaluate(atlas.claims(), condition).allowed;
+        if (allowed)
+            return true;
+        if (redirectTo) {
+            return router.createUrlTree([redirectTo], {
+                queryParams: preserveReturnUrl ? { redirect_url: state.url } : undefined,
+            });
+        }
+        return false;
+    };
+}
+/**
+ * The `CanActivateChild` form of {@link atlasGuard}, for gating a whole child
+ * route subtree with one declaration.
+ */
+function atlasChildGuard(options = {}) {
+    const guard = atlasGuard(options);
+    return (route, state) => guard(route, state);
+}
+
+/**
+ * Conditional-rendering authorization primitive — re-exported unchanged from
+ * `@atlasauth/authz`, the ONE evaluator every Atlas SDK shares. `*atlasProtect` in
+ * this package and `<Protect>` in `@atlasauth/react` therefore judge a condition
+ * identically, and the server checking the same permission is what actually
+ * stops a request; these helpers only decide what a user is shown.
+ */
+
+/**
+ * Public data shapes, mirrored 1:1 from `@atlasauth/react`'s `types.ts` so an app
+ * can move between the React and Angular SDKs without re-typing its models.
+ */
+
+/**
+ * The FAPI client and the server-driven sign-in flow driver live in `@atlasauth/js`
+ * — the pure, framework-agnostic browser flow. This thin re-export lets the
+ * Angular components, guards and services resolve the driver from one place, so
+ * the Angular `<atlas-sign-in>` and the React `<SignIn/>` drive the exact same
+ * endpoints and cannot diverge in what the server sees.
+ */
+
+/**
+ * `@atlasauth/angular` — the official Angular SDK for Atlas, the Angular peer of
+ * `@atlasauth/react`. Public surface.
+ */
+// Configuration + DI
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ATLAS_OPTIONS, ATLAS_UI, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, provideAtlas, resolveTokens, translate, withFallback };
+//# sourceMappingURL=atlasauth-angular.mjs.map