@memberjunction/ng-conversations 6.2.0-edge.3 → 6.2.0-edge.5

package/dist/lib/components/realtime/identity-verification/identity-verification-surface.component.d.ts

@@ -0,0 +1,77 @@
+import { OnDestroy } from '@angular/core';
+import type { JSONObject } from '@memberjunction/ai';
+import type { RealtimeChannelVerbResult } from '@memberjunction/realtime-runtime';
+import { IdentityVerificationModel, type IdentityField, type IdentityVerificationView } from './identity-verification-model';
+import * as i0 from "@angular/core";
+/** Sends one of the user's actions to the channel (which runs it as the `user`). */
+export type IdentityVerificationDispatch = (verb: string, args: JSONObject) => Promise<RealtimeChannelVerbResult>;
+/**
+ * The IDENTITY VERIFICATION surface (`mj-identity-verification-surface`) — a small, accessible form that
+ * renders the channel's state and sends the user's own actions back through it. It owns no rules: whether
+ * a value counts as confirmed, whether a code can be sent, what a failure means are the
+ * {@link IdentityVerificationModel}'s decisions; this only shows them.
+ *
+ * Details the agent filled in are marked "Suggested" and carry a Confirm control until the user approves
+ * them; a value the user types is theirs and needs no confirmation. Mobile-first: one column, 44px tap
+ * targets, 16px inputs (no iOS zoom), the right keyboard and autofill hints per field. Colour comes only
+ * from `--mj-*` design tokens, so it follows the host's theme (including dark mode).
+ */
+export declare class IdentityVerificationSurfaceComponent implements OnDestroy {
+    private readonly cdr;
+    private modelSub;
+    private tick;
+    private model;
+    /** The current snapshot, or `null` until a model is bound. */
+    View: IdentityVerificationView | null;
+    /** Name of the agent, for the "Suggested by …" marker. */
+    AgentName: string;
+    /** Seconds until another send is allowed (0 = now). Recomputed on a 1s tick while a cooldown runs. */
+    ResendWaitSeconds: number;
+    /** True while an action is in flight from THIS surface (disables double-submits). */
+    Busy: boolean;
+    /**
+     * Why the user's last action was refused before it reached the server (a malformed email, a missing
+     * detail) — the model's own `Problem` only covers what the SERVER said. Cleared by the next action.
+     */
+    ActionProblem: string;
+    /** The code the user is typing. Never leaves this component except through {@link SubmitCode}. */
+    CodeDraft: string;
+    /** The unconfirmed drafts the user is typing, per field. */
+    Drafts: Record<IdentityField, string>;
+    /** Where the user's actions go — wired by the channel; a no-op until then. */
+    Dispatch: IdentityVerificationDispatch;
+    private codeInput?;
+    /** The state engine this surface renders. */
+    set Model(value: IdentityVerificationModel | null);
+    get Model(): IdentityVerificationModel | null;
+    ngOnDestroy(): void;
+    /** What to show in an input: the user's draft, else the stored value. */
+    ValueFor(field: IdentityField): string;
+    /** The agent or host suggested this value and the user has not approved it yet. */
+    IsSuggested(field: IdentityField): boolean;
+    /** Who suggested it, for the label. */
+    SuggestedBy(field: IdentityField): string;
+    get Locked(): boolean;
+    get CodeStage(): boolean;
+    OnDraft(field: IdentityField, event: Event): void;
+    /** Commits what the user typed in a field (blur / Enter) — the user's own value, confirmed by being theirs. */
+    CommitField(field: IdentityField): Promise<void>;
+    ConfirmField(field: IdentityField): Promise<void>;
+    ConfirmAll(): Promise<void>;
+    SendCode(): Promise<void>;
+    Resend(): Promise<void>;
+    OnCodeInput(event: Event): void;
+    SubmitCode(): Promise<void>;
+    get HasUnconfirmed(): boolean;
+    private fieldView;
+    /** Commits fields the user typed but did not blur out of, so pressing "Send code" never drops them. */
+    private commitPendingDrafts;
+    private run;
+    private onView;
+    private syncCooldown;
+    private onTick;
+    private stopTick;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IdentityVerificationSurfaceComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IdentityVerificationSurfaceComponent, "mj-identity-verification-surface", never, { "AgentName": { "alias": "AgentName"; "required": false; }; "Dispatch": { "alias": "Dispatch"; "required": false; }; "Model": { "alias": "Model"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=identity-verification-surface.component.d.ts.map

package/dist/lib/components/realtime/identity-verification/identity-verification-surface.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"identity-verification-surface.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/identity-verification/identity-verification-surface.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4E,SAAS,EAAqB,MAAM,eAAe,CAAC;AAEvI,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAE,yBAAyB,EAAE,KAAK,aAAa,EAAE,KAAK,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;AAE7H,oFAAoF;AACpF,MAAM,MAAM,4BAA4B,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,yBAAyB,CAAC,CAAC;AAElH;;;;;;;;;;GAUG;AACH,qBAQa,oCAAqC,YAAW,SAAS;IACpE,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IACjD,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,IAAI,CAA+C;IAC3D,OAAO,CAAC,KAAK,CAA0C;IAEvD,8DAA8D;IACvD,IAAI,EAAE,wBAAwB,GAAG,IAAI,CAAQ;IAEpD,0DAA0D;IACjD,SAAS,SAAmB;IAErC,sGAAsG;IAC/F,iBAAiB,SAAK;IAE7B,qFAAqF;IAC9E,IAAI,UAAS;IAEpB;;;OAGG;IACI,aAAa,SAAM;IAE1B,kGAAkG;IAC3F,SAAS,SAAM;IAEtB,4DAA4D;IACrD,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAA2B;IAEvE,8EAA8E;IACrE,QAAQ,EAAE,4BAA4B,CAA6D;IAEpF,OAAO,CAAC,SAAS,CAAC,CAA+B;IAEzE,6CAA6C;IAC7C,IACW,KAAK,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,EAOvD;IACD,IAAW,KAAK,IAAI,yBAAyB,GAAG,IAAI,CAEnD;IAEM,WAAW,IAAI,IAAI;IAO1B,yEAAyE;IAClE,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM;IAI7C,mFAAmF;IAC5E,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IAKjD,uCAAuC;IAChC,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM;IAIhD,IAAW,MAAM,IAAI,OAAO,CAE3B;IAED,IAAW,SAAS,IAAI,OAAO,CAE9B;IAIM,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAIxD,+GAA+G;IAClG,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAchD,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAI3B,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAKzB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAI7B,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAIzB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAYxC,IAAW,cAAc,IAAI,OAAO,CAEnC;IAID,OAAO,CAAC,SAAS;IAIjB,uGAAuG;YACzF,mBAAmB;YAQnB,GAAG;IAajB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,QAAQ;yCAhML,oCAAoC;2CAApC,oCAAoC;CAsMhD"}

package/dist/lib/components/realtime/identity-verification/identity-verification-surface.component.js

@@ -0,0 +1,420 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild, inject } from '@angular/core';
+import { MJButtonDirective } from '@memberjunction/ng-ui-components';
+import * as i0 from "@angular/core";
+const _c0 = ["codeInput"];
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 4);
+    i0.ɵɵelementStart(2, "div")(3, "p", 5);
+    i0.ɵɵtext(4, "You're verified");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p", 6);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const view_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate2("", view_r1.Name.Value, " \u00B7 ", view_r1.Email.Value);
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p", 11);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "button", 19);
+    i0.ɵɵlistener("click", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ConfirmField("name")); });
+    i0.ɵɵtext(4, "Confirm");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Suggested by ", ctx_r2.SuggestedBy("name"), " \u2014 check it's right. ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.Busy);
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p", 14);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "button", 19);
+    i0.ɵɵlistener("click", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_11_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ConfirmField("email")); });
+    i0.ɵɵtext(4, "Confirm");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Suggested by ", ctx_r2.SuggestedBy("email"), " \u2014 check it's right. ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.Busy);
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.ConfirmAll()); });
+    i0.ɵɵtext(1, "Confirm details");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("disabled", ctx_r2.Busy || ctx_r2.Locked);
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Sending\u2026 ");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Send code ");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵconditionalCreate(1, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Conditional_1_Template, 2, 1, "button", 20);
+    i0.ɵɵelementStart(2, "button", 21);
+    i0.ɵɵlistener("click", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SendCode()); });
+    i0.ɵɵconditionalCreate(3, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Conditional_3_Template, 1, 0)(4, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Conditional_4_Template, 1, 0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const view_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.HasUnconfirmed ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.Busy || ctx_r2.Locked || !view_r1.CanSubmit && ctx_r2.Drafts.name === "" && ctx_r2.Drafts.email === "");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(view_r1.Status === "sending" ? 3 : 4);
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Checking\u2026 ");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Verify ");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵtextInterpolate1(" Resend in ", ctx_r2.ResendWaitSeconds, "s ");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Resend code ");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 28);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const view_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", view_r1.AttemptsRemaining, " ", view_r1.AttemptsRemaining === 1 ? "try" : "tries", " left.");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16)(1, "p", 23);
+    i0.ɵɵelement(2, "i", 24);
+    i0.ɵɵtext(3, " We emailed a code to ");
+    i0.ɵɵelementStart(4, "strong");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(6, ". Type it below, or open the link in the email. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "label", 25);
+    i0.ɵɵtext(8, "Code");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "input", 26, 0);
+    i0.ɵɵlistener("input", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Template_input_input_9_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnCodeInput($event)); })("keydown.enter", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Template_input_keydown_enter_9_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SubmitCode()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 15)(12, "button", 27);
+    i0.ɵɵlistener("click", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SubmitCode()); });
+    i0.ɵɵconditionalCreate(13, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_13_Template, 1, 0)(14, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_14_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "button", 22);
+    i0.ɵɵlistener("click", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.Resend()); });
+    i0.ɵɵconditionalCreate(16, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_16_Template, 1, 1)(17, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_17_Template, 1, 0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(18, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Conditional_18_Template, 2, 2, "p", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const view_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(view_r1.Destination);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r2.CodeDraft)("disabled", view_r1.Status === "verifying");
+    i0.ɵɵattribute("aria-invalid", view_r1.ProblemCode === "invalid_code" ? "true" : null);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r2.Busy || view_r1.Status === "verifying" || ctx_r2.CodeDraft.trim() === "");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(view_r1.Status === "verifying" ? 13 : 14);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r2.Busy || view_r1.Status === "verifying" || ctx_r2.ResendWaitSeconds > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.ResendWaitSeconds > 0 ? 16 : 17);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(view_r1.AttemptsRemaining !== null ? 18 : -1);
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 17);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const view_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", view_r1.Problem || ctx_r2.ActionProblem, " ");
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p", 7);
+    i0.ɵɵtext(1, " Check your details, then we'll email you a code and a link. Either one confirms it's you. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 8)(3, "label", 9);
+    i0.ɵɵtext(4, "Your name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "input", 10);
+    i0.ɵɵlistener("input", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template_input_input_5_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnDraft("name", $event)); })("blur", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template_input_blur_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.CommitField("name")); })("keydown.enter", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template_input_keydown_enter_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.CommitField("name")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_6_Template, 5, 2, "p", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 8)(8, "label", 12);
+    i0.ɵɵtext(9, "Your email");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "input", 13);
+    i0.ɵɵlistener("input", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template_input_input_10_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnDraft("email", $event)); })("blur", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template_input_blur_10_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.CommitField("email")); })("keydown.enter", function IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.CommitField("email")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_11_Template, 5, 2, "p", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_12_Template, 5, 3, "div", 15)(13, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_13_Template, 19, 9, "div", 16);
+    i0.ɵɵconditionalCreate(14, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Conditional_14_Template, 3, 1, "p", 17);
+} if (rf & 2) {
+    const view_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r2.ValueFor("name"))("disabled", ctx_r2.Locked || ctx_r2.CodeStage);
+    i0.ɵɵattribute("aria-describedby", ctx_r2.IsSuggested("name") ? "idv-name-hint" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsSuggested("name") ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r2.ValueFor("email"))("disabled", ctx_r2.Locked || ctx_r2.CodeStage);
+    i0.ɵɵattribute("aria-describedby", ctx_r2.IsSuggested("email") ? "idv-email-hint" : null)("aria-invalid", view_r1.ProblemCode === "invalid_email" ? "true" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsSuggested("email") ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.CodeStage ? 12 : 13);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(view_r1.Problem || ctx_r2.ActionProblem ? 14 : -1);
+} }
+function IdentityVerificationSurfaceComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 1)(1, "h3", 2);
+    i0.ɵɵtext(2, "Verify your identity");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_3_Template, 7, 2, "div", 3)(4, IdentityVerificationSurfaceComponent_Conditional_0_Conditional_4_Template, 15, 11);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const view_r1 = ctx;
+    i0.ɵɵattribute("data-status", view_r1.Status);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(view_r1.Status === "verified" ? 3 : 4);
+} }
+/**
+ * The IDENTITY VERIFICATION surface (`mj-identity-verification-surface`) — a small, accessible form that
+ * renders the channel's state and sends the user's own actions back through it. It owns no rules: whether
+ * a value counts as confirmed, whether a code can be sent, what a failure means are the
+ * {@link IdentityVerificationModel}'s decisions; this only shows them.
+ *
+ * Details the agent filled in are marked "Suggested" and carry a Confirm control until the user approves
+ * them; a value the user types is theirs and needs no confirmation. Mobile-first: one column, 44px tap
+ * targets, 16px inputs (no iOS zoom), the right keyboard and autofill hints per field. Colour comes only
+ * from `--mj-*` design tokens, so it follows the host's theme (including dark mode).
+ */
+export class IdentityVerificationSurfaceComponent {
+    cdr = inject(ChangeDetectorRef);
+    modelSub = null;
+    tick = null;
+    model = null;
+    /** The current snapshot, or `null` until a model is bound. */
+    View = null;
+    /** Name of the agent, for the "Suggested by …" marker. */
+    AgentName = 'The assistant';
+    /** Seconds until another send is allowed (0 = now). Recomputed on a 1s tick while a cooldown runs. */
+    ResendWaitSeconds = 0;
+    /** True while an action is in flight from THIS surface (disables double-submits). */
+    Busy = false;
+    /**
+     * Why the user's last action was refused before it reached the server (a malformed email, a missing
+     * detail) — the model's own `Problem` only covers what the SERVER said. Cleared by the next action.
+     */
+    ActionProblem = '';
+    /** The code the user is typing. Never leaves this component except through {@link SubmitCode}. */
+    CodeDraft = '';
+    /** The unconfirmed drafts the user is typing, per field. */
+    Drafts = { name: '', email: '' };
+    /** Where the user's actions go — wired by the channel; a no-op until then. */
+    Dispatch = async () => ({ Success: false, Error: 'Not connected.' });
+    codeInput;
+    /** The state engine this surface renders. */
+    set Model(value) {
+        if (value === this.model) {
+            return;
+        }
+        this.modelSub?.unsubscribe();
+        this.model = value;
+        this.modelSub = value?.View$.subscribe((view) => this.onView(view)) ?? null;
+    }
+    get Model() {
+        return this.model;
+    }
+    ngOnDestroy() {
+        this.modelSub?.unsubscribe();
+        this.stopTick();
+    }
+    // ── Template helpers ───────────────────────────────────────────────────────
+    /** What to show in an input: the user's draft, else the stored value. */
+    ValueFor(field) {
+        return this.Drafts[field] !== '' ? this.Drafts[field] : this.View ? this.fieldView(field).Value : '';
+    }
+    /** The agent or host suggested this value and the user has not approved it yet. */
+    IsSuggested(field) {
+        const f = this.View ? this.fieldView(field) : null;
+        return !!f && f.Value.length > 0 && !f.Confirmed && this.Drafts[field] === '';
+    }
+    /** Who suggested it, for the label. */
+    SuggestedBy(field) {
+        return this.View && this.fieldView(field).Source === 'host' ? 'this page' : this.AgentName;
+    }
+    get Locked() {
+        return !!this.View && (this.View.Status === 'sending' || this.View.Status === 'verifying' || this.View.Status === 'verified');
+    }
+    get CodeStage() {
+        return !!this.View && (this.View.Status === 'code_sent' || this.View.Status === 'verifying');
+    }
+    // ── Actions ────────────────────────────────────────────────────────────────
+    OnDraft(field, event) {
+        this.Drafts[field] = event.target.value;
+    }
+    /** Commits what the user typed in a field (blur / Enter) — the user's own value, confirmed by being theirs. */
+    async CommitField(field) {
+        const draft = this.Drafts[field].trim();
+        if (draft === '') {
+            this.Drafts[field] = '';
+            return;
+        }
+        await this.run('fill', { field, value: draft });
+        // Keep the draft if the model refused it (e.g. a malformed email) so the user can correct it, not retype it.
+        if (this.View && this.fieldView(field).Value === draft) {
+            this.Drafts[field] = '';
+        }
+        this.cdr.markForCheck();
+    }
+    async ConfirmField(field) {
+        await this.run('confirm', { field });
+    }
+    async ConfirmAll() {
+        await this.run('confirm', {});
+    }
+    async SendCode() {
+        await this.commitPendingDrafts();
+        await this.run('submit', {});
+    }
+    async Resend() {
+        await this.run('resend', {});
+    }
+    OnCodeInput(event) {
+        this.CodeDraft = event.target.value;
+    }
+    async SubmitCode() {
+        const code = this.CodeDraft;
+        if (code.trim() === '') {
+            return;
+        }
+        const outcome = await this.run('enter_code', { code });
+        if (outcome.Success) {
+            this.CodeDraft = '';
+        }
+        this.cdr.markForCheck();
+    }
+    get HasUnconfirmed() {
+        return !!this.View && ((this.View.Name.Value !== '' && !this.View.Name.Confirmed) || (this.View.Email.Value !== '' && !this.View.Email.Confirmed));
+    }
+    // ── Internals ──────────────────────────────────────────────────────────────
+    fieldView(field) {
+        return field === 'name' ? this.View.Name : this.View.Email;
+    }
+    /** Commits fields the user typed but did not blur out of, so pressing "Send code" never drops them. */
+    async commitPendingDrafts() {
+        for (const field of ['name', 'email']) {
+            if (this.Drafts[field].trim() !== '') {
+                await this.CommitField(field);
+            }
+        }
+    }
+    async run(verb, args) {
+        this.Busy = true;
+        this.cdr.markForCheck();
+        try {
+            const outcome = await this.Dispatch(verb, args);
+            this.ActionProblem = outcome.Success ? '' : (outcome.Error ?? 'That did not work. Please try again.');
+            return outcome;
+        }
+        finally {
+            this.Busy = false;
+            this.cdr.markForCheck();
+        }
+    }
+    onView(view) {
+        const enteredCodeStage = this.View?.Status !== 'code_sent' && view.Status === 'code_sent';
+        this.View = view;
+        this.syncCooldown();
+        this.cdr.markForCheck();
+        if (enteredCodeStage) {
+            // The code box did not exist until this render; move focus into it once it does.
+            queueMicrotask(() => this.codeInput?.nativeElement.focus());
+        }
+    }
+    syncCooldown() {
+        const remaining = this.View ? Math.max(0, Math.ceil((this.View.ResendAvailableAt - Date.now()) / 1000)) : 0;
+        this.ResendWaitSeconds = remaining;
+        if (remaining > 0 && this.tick === null) {
+            this.tick = setInterval(() => this.onTick(), 1000);
+        }
+        else if (remaining === 0) {
+            this.stopTick();
+        }
+    }
+    onTick() {
+        this.syncCooldown();
+        this.cdr.markForCheck();
+    }
+    stopTick() {
+        if (this.tick !== null) {
+            clearInterval(this.tick);
+            this.tick = null;
+        }
+    }
+    static ɵfac = function IdentityVerificationSurfaceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || IdentityVerificationSurfaceComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IdentityVerificationSurfaceComponent, selectors: [["mj-identity-verification-surface"]], viewQuery: function IdentityVerificationSurfaceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeInput = _t.first);
+        } }, inputs: { AgentName: "AgentName", Dispatch: "Dispatch", Model: "Model" }, decls: 1, vars: 1, consts: [["codeInput", ""], ["aria-labelledby", "idv-title", 1, "idv"], ["id", "idv-title", 1, "idv__title"], ["role", "status", 1, "idv__done"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-check", "idv__done-icon"], [1, "idv__done-heading"], [1, "idv__done-detail"], ["id", "idv-lead", 1, "idv__lead"], [1, "idv__field"], ["for", "idv-name", 1, "idv__label"], ["id", "idv-name", "type", "text", "autocomplete", "name", "autocapitalize", "words", "maxlength", "200", 1, "mj-input", "idv__input", 3, "input", "blur", "keydown.enter", "value", "disabled"], ["id", "idv-name-hint", 1, "idv__suggested"], ["for", "idv-email", 1, "idv__label"], ["id", "idv-email", "type", "email", "inputmode", "email", "autocomplete", "email", "autocapitalize", "none", "spellcheck", "false", "maxlength", "200", 1, "mj-input", "idv__input", 3, "input", "blur", "keydown.enter", "value", "disabled"], ["id", "idv-email-hint", 1, "idv__suggested"], [1, "idv__actions"], ["aria-live", "polite", 1, "idv__code"], ["role", "alert", 1, "idv__problem"], ["aria-hidden", "true", 1, "fa-solid", "fa-wand-magic-sparkles"], ["mjButton", "", "variant", "outline", "size", "sm", "type", "button", 1, "idv__confirm", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", "type", "button", 3, "disabled"], ["mjButton", "", "variant", "primary", "type", "button", 1, "idv__send", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", "type", "button", 3, "click", "disabled"], [1, "idv__sent"], ["aria-hidden", "true", 1, "fa-solid", "fa-envelope-circle-check"], ["for", "idv-code", 1, "idv__label"], ["id", "idv-code", "type", "text", "inputmode", "numeric", "autocomplete", "one-time-code", "maxlength", "16", 1, "mj-input", "idv__input", "idv__code-input", 3, "input", "keydown.enter", "value", "disabled"], ["mjButton", "", "variant", "primary", "type", "button", 3, "click", "disabled"], [1, "idv__hint"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"]], template: function IdentityVerificationSurfaceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, IdentityVerificationSurfaceComponent_Conditional_0_Template, 5, 2, "section", 1);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.View) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] {\n  display: block;\n  box-sizing: border-box;\n  height: 100%;\n  overflow-y: auto;\n  padding: var(--mj-space-4, 16px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.idv[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4, 16px);\n  max-width: 28rem;\n  margin: 0 auto;\n}\n\n.idv__title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.idv__lead[_ngcontent-%COMP%], \n.idv__hint[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n}\n\n.idv__field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1, 4px);\n}\n\n.idv__label[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n\n.idv__input[_ngcontent-%COMP%] {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  font-size: 1rem;\n}\n\n.idv__input[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 1px;\n}\n\n.idv__code-input[_ngcontent-%COMP%] {\n  letter-spacing: 0.2em;\n  font-variant-numeric: tabular-nums;\n}\n\n.idv__suggested[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-2, 8px);\n  margin: 0;\n  padding: var(--mj-space-2, 8px) var(--mj-space-3, 12px);\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  border: 1px dashed var(--mj-status-info-border);\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.idv__suggested[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n}\n\n.idv__confirm[_ngcontent-%COMP%] {\n  min-height: 44px;\n}\n\n.idv__actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2, 8px);\n}\n\n.idv__actions[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  flex: 1 1 8rem;\n  min-height: 44px;\n}\n\n.idv__code[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3, 12px);\n}\n\n.idv__sent[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  overflow-wrap: anywhere;\n}\n\n.idv__sent[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: var(--mj-space-1, 4px);\n  color: var(--mj-status-success);\n}\n\n.idv__problem[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--mj-space-2, 8px);\n  margin: 0;\n  padding: var(--mj-space-2, 8px) var(--mj-space-3, 12px);\n  font-size: 0.875rem;\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n  border: 1px solid var(--mj-status-error-border);\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.idv__done[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3, 12px);\n  padding: var(--mj-space-4, 16px);\n  background: var(--mj-status-success-bg);\n  border: 1px solid var(--mj-status-success-border);\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.idv__done-icon[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  color: var(--mj-status-success);\n}\n\n.idv__done-heading[_ngcontent-%COMP%] {\n  margin: 0;\n  font-weight: 600;\n  color: var(--mj-status-success-text);\n}\n\n.idv__done-detail[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  overflow-wrap: anywhere;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .idv__done[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_idv-in 180ms ease-out;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_idv-in {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IdentityVerificationSurfaceComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-identity-verification-surface', imports: [MJButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (View; as view) {\n  <section class=\"idv\" [attr.data-status]=\"view.Status\" aria-labelledby=\"idv-title\">\n    <h3 id=\"idv-title\" class=\"idv__title\">Verify your identity</h3>\n\n    @if (view.Status === 'verified') {\n      <div class=\"idv__done\" role=\"status\">\n        <i class=\"fa-solid fa-circle-check idv__done-icon\" aria-hidden=\"true\"></i>\n        <div>\n          <p class=\"idv__done-heading\">You're verified</p>\n          <p class=\"idv__done-detail\">{{ view.Name.Value }} &middot; {{ view.Email.Value }}</p>\n        </div>\n      </div>\n    } @else {\n      <p class=\"idv__lead\" id=\"idv-lead\">\n        Check your details, then we'll email you a code and a link. Either one confirms it's you.\n      </p>\n\n      <div class=\"idv__field\">\n        <label class=\"idv__label\" for=\"idv-name\">Your name</label>\n        <input\n          id=\"idv-name\"\n          class=\"mj-input idv__input\"\n          type=\"text\"\n          autocomplete=\"name\"\n          autocapitalize=\"words\"\n          maxlength=\"200\"\n          [value]=\"ValueFor('name')\"\n          [disabled]=\"Locked || CodeStage\"\n          [attr.aria-describedby]=\"IsSuggested('name') ? 'idv-name-hint' : null\"\n          (input)=\"OnDraft('name', $event)\"\n          (blur)=\"CommitField('name')\"\n          (keydown.enter)=\"CommitField('name')\" />\n        @if (IsSuggested('name')) {\n          <p class=\"idv__suggested\" id=\"idv-name-hint\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\"></i>\n            Suggested by {{ SuggestedBy('name') }} &mdash; check it's right.\n            <button mjButton variant=\"outline\" size=\"sm\" type=\"button\" class=\"idv__confirm\" [disabled]=\"Busy\" (click)=\"ConfirmField('name')\">Confirm</button>\n          </p>\n        }\n      </div>\n\n      <div class=\"idv__field\">\n        <label class=\"idv__label\" for=\"idv-email\">Your email</label>\n        <input\n          id=\"idv-email\"\n          class=\"mj-input idv__input\"\n          type=\"email\"\n          inputmode=\"email\"\n          autocomplete=\"email\"\n          autocapitalize=\"none\"\n          spellcheck=\"false\"\n          maxlength=\"200\"\n          [value]=\"ValueFor('email')\"\n          [disabled]=\"Locked || CodeStage\"\n          [attr.aria-describedby]=\"IsSuggested('email') ? 'idv-email-hint' : null\"\n          [attr.aria-invalid]=\"view.ProblemCode === 'invalid_email' ? 'true' : null\"\n          (input)=\"OnDraft('email', $event)\"\n          (blur)=\"CommitField('email')\"\n          (keydown.enter)=\"CommitField('email')\" />\n        @if (IsSuggested('email')) {\n          <p class=\"idv__suggested\" id=\"idv-email-hint\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\"></i>\n            Suggested by {{ SuggestedBy('email') }} &mdash; check it's right.\n            <button mjButton variant=\"outline\" size=\"sm\" type=\"button\" class=\"idv__confirm\" [disabled]=\"Busy\" (click)=\"ConfirmField('email')\">Confirm</button>\n          </p>\n        }\n      </div>\n\n      @if (!CodeStage) {\n        <div class=\"idv__actions\">\n          @if (HasUnconfirmed) {\n            <button mjButton variant=\"outline\" type=\"button\" [disabled]=\"Busy || Locked\" (click)=\"ConfirmAll()\">Confirm details</button>\n          }\n          <button mjButton variant=\"primary\" type=\"button\" class=\"idv__send\" [disabled]=\"Busy || Locked || (!view.CanSubmit && Drafts.name === '' && Drafts.email === '')\" (click)=\"SendCode()\">\n            @if (view.Status === 'sending') { Sending\u2026 } @else { Send code }\n          </button>\n        </div>\n      } @else {\n        <div class=\"idv__code\" aria-live=\"polite\">\n          <p class=\"idv__sent\">\n            <i class=\"fa-solid fa-envelope-circle-check\" aria-hidden=\"true\"></i>\n            We emailed a code to <strong>{{ view.Destination }}</strong>. Type it below, or open the link in the email.\n          </p>\n          <label class=\"idv__label\" for=\"idv-code\">Code</label>\n          <input\n            #codeInput\n            id=\"idv-code\"\n            class=\"mj-input idv__input idv__code-input\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            autocomplete=\"one-time-code\"\n            maxlength=\"16\"\n            [value]=\"CodeDraft\"\n            [disabled]=\"view.Status === 'verifying'\"\n            [attr.aria-invalid]=\"view.ProblemCode === 'invalid_code' ? 'true' : null\"\n            (input)=\"OnCodeInput($event)\"\n            (keydown.enter)=\"SubmitCode()\" />\n          <div class=\"idv__actions\">\n            <button mjButton variant=\"primary\" type=\"button\" [disabled]=\"Busy || view.Status === 'verifying' || CodeDraft.trim() === ''\" (click)=\"SubmitCode()\">\n              @if (view.Status === 'verifying') { Checking\u2026 } @else { Verify }\n            </button>\n            <button mjButton variant=\"outline\" type=\"button\" [disabled]=\"Busy || view.Status === 'verifying' || ResendWaitSeconds > 0\" (click)=\"Resend()\">\n              @if (ResendWaitSeconds > 0) { Resend in {{ ResendWaitSeconds }}s } @else { Resend code }\n            </button>\n          </div>\n          @if (view.AttemptsRemaining !== null) {\n            <p class=\"idv__hint\">{{ view.AttemptsRemaining }} {{ view.AttemptsRemaining === 1 ? 'try' : 'tries' }} left.</p>\n          }\n        </div>\n      }\n\n      @if (view.Problem || ActionProblem) {\n        <p class=\"idv__problem\" role=\"alert\">\n          <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n          {{ view.Problem || ActionProblem }}\n        </p>\n      }\n    }\n  </section>\n}\n", styles: [":host {\n  display: block;\n  box-sizing: border-box;\n  height: 100%;\n  overflow-y: auto;\n  padding: var(--mj-space-4, 16px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.idv {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4, 16px);\n  max-width: 28rem;\n  margin: 0 auto;\n}\n\n.idv__title {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.idv__lead,\n.idv__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n}\n\n.idv__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1, 4px);\n}\n\n.idv__label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n/* 16px keeps iOS from zooming the page on focus; 44px is the minimum comfortable tap target. */\n.idv__input {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  font-size: 1rem;\n}\n\n.idv__input:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 1px;\n}\n\n.idv__code-input {\n  letter-spacing: 0.2em;\n  font-variant-numeric: tabular-nums;\n}\n\n.idv__suggested {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-2, 8px);\n  margin: 0;\n  padding: var(--mj-space-2, 8px) var(--mj-space-3, 12px);\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  border: 1px dashed var(--mj-status-info-border);\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.idv__suggested i {\n  color: var(--mj-status-info);\n}\n\n.idv__confirm {\n  min-height: 44px;\n}\n\n.idv__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2, 8px);\n}\n\n.idv__actions > button {\n  flex: 1 1 8rem;\n  min-height: 44px;\n}\n\n.idv__code {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3, 12px);\n}\n\n.idv__sent {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  overflow-wrap: anywhere;\n}\n\n.idv__sent i {\n  margin-right: var(--mj-space-1, 4px);\n  color: var(--mj-status-success);\n}\n\n.idv__problem {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--mj-space-2, 8px);\n  margin: 0;\n  padding: var(--mj-space-2, 8px) var(--mj-space-3, 12px);\n  font-size: 0.875rem;\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n  border: 1px solid var(--mj-status-error-border);\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.idv__done {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3, 12px);\n  padding: var(--mj-space-4, 16px);\n  background: var(--mj-status-success-bg);\n  border: 1px solid var(--mj-status-success-border);\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.idv__done-icon {\n  font-size: 1.75rem;\n  color: var(--mj-status-success);\n}\n\n.idv__done-heading {\n  margin: 0;\n  font-weight: 600;\n  color: var(--mj-status-success-text);\n}\n\n.idv__done-detail {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  overflow-wrap: anywhere;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .idv__done {\n    animation: idv-in 180ms ease-out;\n  }\n}\n\n@keyframes idv-in {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n"] }]
+    }], null, { AgentName: [{
+            type: Input
+        }], Dispatch: [{
+            type: Input
+        }], codeInput: [{
+            type: ViewChild,
+            args: ['codeInput']
+        }], Model: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IdentityVerificationSurfaceComponent, { className: "IdentityVerificationSurfaceComponent", filePath: "src/lib/components/realtime/identity-verification/identity-verification-surface.component.ts", lineNumber: 30 }); })();
+//# sourceMappingURL=identity-verification-surface.component.js.map

package/dist/lib/components/realtime/identity-verification/identity-verification-surface.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"identity-verification-surface.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/identity-verification/identity-verification-surface.component.ts","../../../../../src/lib/components/realtime/identity-verification/identity-verification-surface.component.html"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, ViewChild, inject } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport type { JSONObject } from '@memberjunction/ai';\nimport type { RealtimeChannelVerbResult } from '@memberjunction/realtime-runtime';\nimport { MJButtonDirective } from '@memberjunction/ng-ui-components';\nimport { IdentityVerificationModel, type IdentityField, type IdentityVerificationView } from './identity-verification-model';\n\n/** Sends one of the user's actions to the channel (which runs it as the `user`). */\nexport type IdentityVerificationDispatch = (verb: string, args: JSONObject) => Promise<RealtimeChannelVerbResult>;\n\n/**\n * The IDENTITY VERIFICATION surface (`mj-identity-verification-surface`) — a small, accessible form that\n * renders the channel's state and sends the user's own actions back through it. It owns no rules: whether\n * a value counts as confirmed, whether a code can be sent, what a failure means are the\n * {@link IdentityVerificationModel}'s decisions; this only shows them.\n *\n * Details the agent filled in are marked \"Suggested\" and carry a Confirm control until the user approves\n * them; a value the user types is theirs and needs no confirmation. Mobile-first: one column, 44px tap\n * targets, 16px inputs (no iOS zoom), the right keyboard and autofill hints per field. Colour comes only\n * from `--mj-*` design tokens, so it follows the host's theme (including dark mode).\n */\n@Component({\n  standalone: true,\n  selector: 'mj-identity-verification-surface',\n  imports: [MJButtonDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './identity-verification-surface.component.html',\n  styleUrls: ['./identity-verification-surface.component.css']\n})\nexport class IdentityVerificationSurfaceComponent implements OnDestroy {\n  private readonly cdr = inject(ChangeDetectorRef);\n  private modelSub: Subscription | null = null;\n  private tick: ReturnType<typeof setInterval> | null = null;\n  private model: IdentityVerificationModel | null = null;\n\n  /** The current snapshot, or `null` until a model is bound. */\n  public View: IdentityVerificationView | null = null;\n\n  /** Name of the agent, for the \"Suggested by …\" marker. */\n  @Input() AgentName = 'The assistant';\n\n  /** Seconds until another send is allowed (0 = now). Recomputed on a 1s tick while a cooldown runs. */\n  public ResendWaitSeconds = 0;\n\n  /** True while an action is in flight from THIS surface (disables double-submits). */\n  public Busy = false;\n\n  /**\n   * Why the user's last action was refused before it reached the server (a malformed email, a missing\n   * detail) — the model's own `Problem` only covers what the SERVER said. Cleared by the next action.\n   */\n  public ActionProblem = '';\n\n  /** The code the user is typing. Never leaves this component except through {@link SubmitCode}. */\n  public CodeDraft = '';\n\n  /** The unconfirmed drafts the user is typing, per field. */\n  public Drafts: Record<IdentityField, string> = { name: '', email: '' };\n\n  /** Where the user's actions go — wired by the channel; a no-op until then. */\n  @Input() Dispatch: IdentityVerificationDispatch = async () => ({ Success: false, Error: 'Not connected.' });\n\n  @ViewChild('codeInput') private codeInput?: ElementRef<HTMLInputElement>;\n\n  /** The state engine this surface renders. */\n  @Input()\n  public set Model(value: IdentityVerificationModel | null) {\n    if (value === this.model) {\n      return;\n    }\n    this.modelSub?.unsubscribe();\n    this.model = value;\n    this.modelSub = value?.View$.subscribe((view) => this.onView(view)) ?? null;\n  }\n  public get Model(): IdentityVerificationModel | null {\n    return this.model;\n  }\n\n  public ngOnDestroy(): void {\n    this.modelSub?.unsubscribe();\n    this.stopTick();\n  }\n\n  // ── Template helpers ───────────────────────────────────────────────────────\n\n  /** What to show in an input: the user's draft, else the stored value. */\n  public ValueFor(field: IdentityField): string {\n    return this.Drafts[field] !== '' ? this.Drafts[field] : this.View ? this.fieldView(field).Value : '';\n  }\n\n  /** The agent or host suggested this value and the user has not approved it yet. */\n  public IsSuggested(field: IdentityField): boolean {\n    const f = this.View ? this.fieldView(field) : null;\n    return !!f && f.Value.length > 0 && !f.Confirmed && this.Drafts[field] === '';\n  }\n\n  /** Who suggested it, for the label. */\n  public SuggestedBy(field: IdentityField): string {\n    return this.View && this.fieldView(field).Source === 'host' ? 'this page' : this.AgentName;\n  }\n\n  public get Locked(): boolean {\n    return !!this.View && (this.View.Status === 'sending' || this.View.Status === 'verifying' || this.View.Status === 'verified');\n  }\n\n  public get CodeStage(): boolean {\n    return !!this.View && (this.View.Status === 'code_sent' || this.View.Status === 'verifying');\n  }\n\n  // ── Actions ────────────────────────────────────────────────────────────────\n\n  public OnDraft(field: IdentityField, event: Event): void {\n    this.Drafts[field] = (event.target as HTMLInputElement).value;\n  }\n\n  /** Commits what the user typed in a field (blur / Enter) — the user's own value, confirmed by being theirs. */\n  public async CommitField(field: IdentityField): Promise<void> {\n    const draft = this.Drafts[field].trim();\n    if (draft === '') {\n      this.Drafts[field] = '';\n      return;\n    }\n    await this.run('fill', { field, value: draft });\n    // Keep the draft if the model refused it (e.g. a malformed email) so the user can correct it, not retype it.\n    if (this.View && this.fieldView(field).Value === draft) {\n      this.Drafts[field] = '';\n    }\n    this.cdr.markForCheck();\n  }\n\n  public async ConfirmField(field: IdentityField): Promise<void> {\n    await this.run('confirm', { field });\n  }\n\n  public async ConfirmAll(): Promise<void> {\n    await this.run('confirm', {});\n  }\n\n  public async SendCode(): Promise<void> {\n    await this.commitPendingDrafts();\n    await this.run('submit', {});\n  }\n\n  public async Resend(): Promise<void> {\n    await this.run('resend', {});\n  }\n\n  public OnCodeInput(event: Event): void {\n    this.CodeDraft = (event.target as HTMLInputElement).value;\n  }\n\n  public async SubmitCode(): Promise<void> {\n    const code = this.CodeDraft;\n    if (code.trim() === '') {\n      return;\n    }\n    const outcome = await this.run('enter_code', { code });\n    if (outcome.Success) {\n      this.CodeDraft = '';\n    }\n    this.cdr.markForCheck();\n  }\n\n  public get HasUnconfirmed(): boolean {\n    return !!this.View && ((this.View.Name.Value !== '' && !this.View.Name.Confirmed) || (this.View.Email.Value !== '' && !this.View.Email.Confirmed));\n  }\n\n  // ── Internals ──────────────────────────────────────────────────────────────\n\n  private fieldView(field: IdentityField) {\n    return field === 'name' ? this.View!.Name : this.View!.Email;\n  }\n\n  /** Commits fields the user typed but did not blur out of, so pressing \"Send code\" never drops them. */\n  private async commitPendingDrafts(): Promise<void> {\n    for (const field of ['name', 'email'] as const) {\n      if (this.Drafts[field].trim() !== '') {\n        await this.CommitField(field);\n      }\n    }\n  }\n\n  private async run(verb: string, args: JSONObject): Promise<RealtimeChannelVerbResult> {\n    this.Busy = true;\n    this.cdr.markForCheck();\n    try {\n      const outcome = await this.Dispatch(verb, args);\n      this.ActionProblem = outcome.Success ? '' : (outcome.Error ?? 'That did not work. Please try again.');\n      return outcome;\n    } finally {\n      this.Busy = false;\n      this.cdr.markForCheck();\n    }\n  }\n\n  private onView(view: IdentityVerificationView): void {\n    const enteredCodeStage = this.View?.Status !== 'code_sent' && view.Status === 'code_sent';\n    this.View = view;\n    this.syncCooldown();\n    this.cdr.markForCheck();\n    if (enteredCodeStage) {\n      // The code box did not exist until this render; move focus into it once it does.\n      queueMicrotask(() => this.codeInput?.nativeElement.focus());\n    }\n  }\n\n  private syncCooldown(): void {\n    const remaining = this.View ? Math.max(0, Math.ceil((this.View.ResendAvailableAt - Date.now()) / 1000)) : 0;\n    this.ResendWaitSeconds = remaining;\n    if (remaining > 0 && this.tick === null) {\n      this.tick = setInterval(() => this.onTick(), 1000);\n    } else if (remaining === 0) {\n      this.stopTick();\n    }\n  }\n\n  private onTick(): void {\n    this.syncCooldown();\n    this.cdr.markForCheck();\n  }\n\n  private stopTick(): void {\n    if (this.tick !== null) {\n      clearInterval(this.tick);\n      this.tick = null;\n    }\n  }\n}\n","@if (View; as view) {\n  <section class=\"idv\" [attr.data-status]=\"view.Status\" aria-labelledby=\"idv-title\">\n    <h3 id=\"idv-title\" class=\"idv__title\">Verify your identity</h3>\n\n    @if (view.Status === 'verified') {\n      <div class=\"idv__done\" role=\"status\">\n        <i class=\"fa-solid fa-circle-check idv__done-icon\" aria-hidden=\"true\"></i>\n        <div>\n          <p class=\"idv__done-heading\">You're verified</p>\n          <p class=\"idv__done-detail\">{{ view.Name.Value }} &middot; {{ view.Email.Value }}</p>\n        </div>\n      </div>\n    } @else {\n      <p class=\"idv__lead\" id=\"idv-lead\">\n        Check your details, then we'll email you a code and a link. Either one confirms it's you.\n      </p>\n\n      <div class=\"idv__field\">\n        <label class=\"idv__label\" for=\"idv-name\">Your name</label>\n        <input\n          id=\"idv-name\"\n          class=\"mj-input idv__input\"\n          type=\"text\"\n          autocomplete=\"name\"\n          autocapitalize=\"words\"\n          maxlength=\"200\"\n          [value]=\"ValueFor('name')\"\n          [disabled]=\"Locked || CodeStage\"\n          [attr.aria-describedby]=\"IsSuggested('name') ? 'idv-name-hint' : null\"\n          (input)=\"OnDraft('name', $event)\"\n          (blur)=\"CommitField('name')\"\n          (keydown.enter)=\"CommitField('name')\" />\n        @if (IsSuggested('name')) {\n          <p class=\"idv__suggested\" id=\"idv-name-hint\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\"></i>\n            Suggested by {{ SuggestedBy('name') }} &mdash; check it's right.\n            <button mjButton variant=\"outline\" size=\"sm\" type=\"button\" class=\"idv__confirm\" [disabled]=\"Busy\" (click)=\"ConfirmField('name')\">Confirm</button>\n          </p>\n        }\n      </div>\n\n      <div class=\"idv__field\">\n        <label class=\"idv__label\" for=\"idv-email\">Your email</label>\n        <input\n          id=\"idv-email\"\n          class=\"mj-input idv__input\"\n          type=\"email\"\n          inputmode=\"email\"\n          autocomplete=\"email\"\n          autocapitalize=\"none\"\n          spellcheck=\"false\"\n          maxlength=\"200\"\n          [value]=\"ValueFor('email')\"\n          [disabled]=\"Locked || CodeStage\"\n          [attr.aria-describedby]=\"IsSuggested('email') ? 'idv-email-hint' : null\"\n          [attr.aria-invalid]=\"view.ProblemCode === 'invalid_email' ? 'true' : null\"\n          (input)=\"OnDraft('email', $event)\"\n          (blur)=\"CommitField('email')\"\n          (keydown.enter)=\"CommitField('email')\" />\n        @if (IsSuggested('email')) {\n          <p class=\"idv__suggested\" id=\"idv-email-hint\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\"></i>\n            Suggested by {{ SuggestedBy('email') }} &mdash; check it's right.\n            <button mjButton variant=\"outline\" size=\"sm\" type=\"button\" class=\"idv__confirm\" [disabled]=\"Busy\" (click)=\"ConfirmField('email')\">Confirm</button>\n          </p>\n        }\n      </div>\n\n      @if (!CodeStage) {\n        <div class=\"idv__actions\">\n          @if (HasUnconfirmed) {\n            <button mjButton variant=\"outline\" type=\"button\" [disabled]=\"Busy || Locked\" (click)=\"ConfirmAll()\">Confirm details</button>\n          }\n          <button mjButton variant=\"primary\" type=\"button\" class=\"idv__send\" [disabled]=\"Busy || Locked || (!view.CanSubmit && Drafts.name === '' && Drafts.email === '')\" (click)=\"SendCode()\">\n            @if (view.Status === 'sending') { Sending… } @else { Send code }\n          </button>\n        </div>\n      } @else {\n        <div class=\"idv__code\" aria-live=\"polite\">\n          <p class=\"idv__sent\">\n            <i class=\"fa-solid fa-envelope-circle-check\" aria-hidden=\"true\"></i>\n            We emailed a code to <strong>{{ view.Destination }}</strong>. Type it below, or open the link in the email.\n          </p>\n          <label class=\"idv__label\" for=\"idv-code\">Code</label>\n          <input\n            #codeInput\n            id=\"idv-code\"\n            class=\"mj-input idv__input idv__code-input\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            autocomplete=\"one-time-code\"\n            maxlength=\"16\"\n            [value]=\"CodeDraft\"\n            [disabled]=\"view.Status === 'verifying'\"\n            [attr.aria-invalid]=\"view.ProblemCode === 'invalid_code' ? 'true' : null\"\n            (input)=\"OnCodeInput($event)\"\n            (keydown.enter)=\"SubmitCode()\" />\n          <div class=\"idv__actions\">\n            <button mjButton variant=\"primary\" type=\"button\" [disabled]=\"Busy || view.Status === 'verifying' || CodeDraft.trim() === ''\" (click)=\"SubmitCode()\">\n              @if (view.Status === 'verifying') { Checking… } @else { Verify }\n            </button>\n            <button mjButton variant=\"outline\" type=\"button\" [disabled]=\"Busy || view.Status === 'verifying' || ResendWaitSeconds > 0\" (click)=\"Resend()\">\n              @if (ResendWaitSeconds > 0) { Resend in {{ ResendWaitSeconds }}s } @else { Resend code }\n            </button>\n          </div>\n          @if (view.AttemptsRemaining !== null) {\n            <p class=\"idv__hint\">{{ view.AttemptsRemaining }} {{ view.AttemptsRemaining === 1 ? 'try' : 'tries' }} left.</p>\n          }\n        </div>\n      }\n\n      @if (view.Problem || ActionProblem) {\n        <p class=\"idv__problem\" role=\"alert\">\n          <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n          {{ view.Problem || ActionProblem }}\n        </p>\n      }\n    }\n  </section>\n}\n"]}