@auth-link/web 0.0.5 → 2.0.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* All variants share the same protocol, accessible controls, and theme tokens. */
+/* A single responsive minimal dialog with accessible controls and theme tokens. */
 .authlink-dialog {
   --authlink-line: #e7ebe9;
   --authlink-soft: #f0f5f2;
@@ -26,7 +26,7 @@
   top: 8px; left: 1px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
 .authlink-close-icon::after { transform: rotate(-45deg); }
 .authlink-dialog .authlink-close:hover { background: var(--authlink-soft); color: var(--authlink-foreground, #173f35); }
-.authlink-dialog .authlink-close:focus-visible, .authlink-cancel:focus-visible, .authlink-button:focus-visible {
+.authlink-dialog .authlink-close:focus-visible, .authlink-button:focus-visible {
   outline: 2px solid var(--authlink-accent, #277456); outline-offset: 2px; }
 .authlink-widget { box-sizing: border-box; width: 100%; min-width: 0; padding: 24px;
   color: var(--authlink-foreground, #173f35); background: var(--authlink-background, #fff);
@@ -64,63 +64,25 @@
 .authlink-widget[data-status="error"] .authlink-status, .authlink-widget[data-status="rejected"] .authlink-status { color: #a04432; }
 .authlink-widget[data-status="confirmed"] .authlink-status { color: var(--authlink-accent, #277456); }
 .authlink-footer { margin-top: 20px; }
-.authlink-widget[data-variant="A"] .authlink-footer .authlink-status { border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 16px; }
+.authlink-footer .authlink-status { border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 16px; }
 .authlink-button { margin-top: 18px; border: 0; border-radius: 8px; min-height: 44px; padding: 10px 20px; font: inherit;
   cursor: pointer; color: #fff; background: var(--authlink-accent, #277456); }
-.authlink-cancel { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px;
-  min-width: 44px; padding: 8px 0; border: 0; border-radius: 4px; background: transparent;
-  color: var(--authlink-muted, #697780); font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
-.authlink-cancel:hover { color: var(--authlink-accent, #277456); text-decoration: underline; text-underline-offset: 3px; }
-/* B: wide desktop layout, vertical layout on narrow viewports. */
-.authlink-dialog[data-variant="B"] { width: min(650px, calc(100vw - 32px)); border-radius: 16px; }
-.authlink-dialog[data-variant="B"][data-has-qr="false"] { width: min(460px, calc(100vw - 32px)); }
-.authlink-dialog[data-variant="B"] .authlink-header { margin: 0; padding: 10px 24px; }
-.authlink-dialog[data-variant="B"] .authlink-close { margin-right: -6px; }
-.authlink-dialog[data-variant="B"] .authlink-close::before { content: ''; position: absolute; inset: 7px; border-radius: 7px; background: #f0f2f3; }
-.authlink-widget[data-variant="B"] { text-align: left; }
-.authlink-widget[data-variant="B"] .authlink-title { font-size: 24px; }
-.authlink-widget[data-variant="B"] .authlink-subtitle { display: none; }
-.authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 24px; }
-.authlink-widget[data-variant="B"] .authlink-qr-wrap { width: 100%; margin: 0; text-align: center; }
-.authlink-widget[data-variant="B"] .authlink-qr { width: min(100%, 196px); }
-.authlink-widget[data-variant="B"] .authlink-qr-caption { display: block; }
-.authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-details { min-width: 0; padding-left: 24px; border-left: 1px solid var(--authlink-line, #e7ebe9); }
-.authlink-widget[data-variant="B"] .authlink-code-panel { display: block; padding: 0; background: transparent; }
-.authlink-widget[data-variant="B"] .authlink-code { margin: 10px 0 0; font-size: clamp(30px, 5vw, 40px); }
-.authlink-widget[data-variant="B"] .authlink-status { justify-content: flex-start; }
-.authlink-widget[data-variant="B"] .authlink-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
-  justify-content: space-between; border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 8px; margin-top: 24px; }
-/* C: compact card; becomes a bottom sheet on mobile. */
-.authlink-dialog[data-variant="C"] { width: min(390px, calc(100vw - 32px)); border-radius: 14px; }
-.authlink-dialog[data-variant="C"] .authlink-header { min-height: 58px; border: 0; padding-bottom: 0; }
-.authlink-widget[data-variant="C"] { padding-top: 12px; text-align: left; }
-.authlink-widget[data-variant="C"] .authlink-title { font-size: 22px; }
-.authlink-widget[data-variant="C"] .authlink-qr { width: min(100%, 180px); }
-.authlink-widget[data-variant="C"] .authlink-qr-wrap { margin-bottom: 18px; }
-.authlink-widget[data-variant="C"] .authlink-code-panel { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; gap: 10px; background: #f5f7f8; }
-.authlink-widget[data-variant="C"] .authlink-code { font-size: clamp(22px, 6.8vw, 26px); margin: 4px 0 0; }
-.authlink-widget[data-variant="C"] .authlink-progress { grid-column: 1 / -1; }
-.authlink-widget[data-variant="C"] .authlink-help { font-size: 11px; margin-top: 12px; }
-.authlink-widget[data-variant="C"] .authlink-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--authlink-line, #e7ebe9); padding-top: 16px; margin-top: 18px; }
-.authlink-widget[data-variant="C"] .authlink-status { justify-content: flex-start; margin: 0; }
 @media (max-width: 560px) {
-  .authlink-dialog, .authlink-dialog[data-variant="B"], .authlink-dialog[data-variant="B"][data-has-qr="false"] { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
+  .authlink-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
   .authlink-header { margin: 0 20px; }
   .authlink-widget { padding: 20px; }
-  .authlink-title, .authlink-widget[data-variant="B"] .authlink-title { font-size: 22px; }
+  .authlink-title { font-size: 22px; }
   .authlink-code-panel { padding: 14px 16px; gap: 0 10px; }
-  .authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-body { display: block; }
-  .authlink-widget[data-variant="B"][data-has-qr="true"] .authlink-details { border: 0; padding: 22px 0 0; }
-  .authlink-widget[data-variant="B"] .authlink-code { font-size: 36px; }
-  .authlink-widget[data-variant="B"] .authlink-qr { width: min(100%, 180px); }
-  .authlink-dialog[data-variant="C"] { width: 100%; max-width: none; margin: auto 0 0; max-height: calc(100dvh - 12px); border-radius: 20px 20px 0 0; border-bottom: 0; }
-  .authlink-dialog[data-variant="C"] .authlink-widget { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
 }
 @media (max-width: 350px) {
   .authlink-widget { padding: 16px; }
   .authlink-header { margin: 0 16px; }
   .authlink-code-panel { padding: 12px; }
-  .authlink-widget[data-variant="C"] .authlink-code-panel { grid-template-columns: minmax(0, 1fr); }
-  .authlink-widget[data-variant="C"] .authlink-code { margin-bottom: 4px; }
 }
 @media (prefers-reduced-motion: reduce) { .authlink-dialog * { animation: none !important; transition: none !important; } }
+
+.authlink-code-form { display: grid; gap: 12px; margin-top: 20px; text-align: left; }
+.authlink-code-form input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #bccbc2; border-radius: 10px; background: white; color: #18352b; font: inherit; font-size: 24px; text-align: center; letter-spacing: .3em; }
+.authlink-code-form label { font-size: 14px; font-weight: 600; }
+.authlink-code-form button:disabled { opacity: .6; cursor: wait; }
+.authlink-input-error { color: #a33128; font-size: 13px; }

package/dist/types/core.d.ts

@@ -24,10 +24,12 @@ export interface ClientOptions {
     authLinkOrigin?: string;
     fetch?: typeof fetch;
 }
+export declare function createBackendCall(options: ClientOptions): (path: string, body: unknown, signal?: AbortSignal, key?: string) => Promise<unknown>;
 export declare function createAuthLinkClient(options: ClientOptions): AuthLinkClient;
 export declare function requestKey(): string;
 export declare function initialSnapshot(): Snapshot;
 export interface ObserveOptions extends Events {
+    onReady?: (submit: (confirmationCode: string) => Promise<void>) => void;
     /** Presentation-only timing from the same monotonic clock as code expiry. */
     onCodeTiming?: (remainingMs: number) => void;
     expectedMode?: Mode;

package/dist/types/i18n.d.ts

@@ -1,6 +1,6 @@
 import type { Locale } from './types.js';
 export declare const supportedLocales: readonly ["en", "zh-CN", "zh-TW", "ja", "bn", "es", "fil", "hi", "id", "ms", "pt", "th", "vi"];
-type Messages = Record<"cancel" | "close" | "bind" | "confirm" | "scan" | "code" | "help" | "waiting" | "loading" | "confirmed" | "rejected" | "expired" | "error" | "retry" | "refresh" | "autoUpdate" | "expiring" | "updating", string>;
+type Messages = Record<"otpCode" | "otpHelp" | "otpWaiting" | "otpError" | "otpSetup" | "codeLocked" | "confirmationCode" | "submitCode" | "codeError" | "cancel" | "close" | "bind" | "confirm" | "scan" | "code" | "help" | "waiting" | "loading" | "confirmed" | "rejected" | "expired" | "error" | "retry" | "refresh" | "autoUpdate" | "expiring" | "updating", string>;
 export declare const defaultLocale: Locale;
 export declare function resolveLocale(locale?: string): Locale;
 export declare function getMessages(locale?: string): Messages;

package/dist/types/index.d.ts

@@ -4,3 +4,5 @@ export { supportedLocales } from './i18n.js';
 export { openAuthLink, openAuthLinkBind, openAuthLinkConfirm } from './modal.js';
 export type { AuthLinkModal, AuthLinkModalOptions } from './modal.js';
 export type { ClientOptions } from './core.js';
+export { openPasscode, createPasscodeClient } from './passcode.js';
+export type { OTPVerification, PasscodeClient, PasscodeOptions } from './passcode.js';

package/dist/types/modal.d.ts

@@ -1,4 +1,5 @@
-import type { DialogVariant, Locale, WidgetOptions } from './types.js';
+import type { ViewNode } from './view.js';
+import type { Locale, WidgetOptions } from './types.js';
 export interface AuthLinkModalOptions extends WidgetOptions {
     className?: string;
     onClose?: () => void;
@@ -9,10 +10,9 @@ export interface AuthLinkModal {
     /** Component cleanup: close without delivering a user-close callback. */
     destroy(): void;
     setLocale(locale?: Locale): void;
-    /** Change presentation without creating or restarting a request. */
-    setVariant(variant?: DialogVariant): void;
     retry(): void;
 }
+export declare function element(value: ViewNode | string, svg?: boolean): Node;
 /** Show a backend-created request. This function never creates or authorizes a request. */
 export declare function openAuthLink(options: AuthLinkModalOptions): AuthLinkModal;
 export declare const openAuthLinkBind: (options: AuthLinkModalOptions) => AuthLinkModal;

package/dist/types/passcode.d.ts

@@ -0,0 +1,28 @@
+import type { ClientOptions } from './core.js';
+import type { AuthLinkModal } from './modal.js';
+import type { Locale } from './types.js';
+export interface OTPVerification {
+    status: 'confirmed';
+    verificationId: string;
+    authenticationPolicy: 'device-totp.v1';
+    expiresAt: string;
+}
+export interface PasscodeClient {
+    verify(passcode: string, signal: AbortSignal): Promise<OTPVerification>;
+}
+export interface PasscodeOptions {
+    client: PasscodeClient;
+    /** The CMS's single pending action deadline, not a TOTP time step. */
+    expiresAt: string;
+    locale?: Locale;
+    /** First-time enrollment only. Ordinary verification has no QR or request ID. */
+    bindingQr?: string;
+    authLinkOrigin?: string;
+    onVerified?: (result: OTPVerification) => void | Promise<void>;
+    onClose?: () => void;
+    onExpired?: () => void | Promise<void>;
+    onError?: (error: Error) => void;
+}
+export declare function createPasscodeClient(options: ClientOptions): PasscodeClient;
+/** A session-scoped passcode prompt. No request creation, request ID or polling. */
+export declare function openPasscode(options: PasscodeOptions): AuthLinkModal;

package/dist/types/react.d.ts

@@ -1,9 +1,13 @@
 import type { Snapshot, WidgetOptions } from './types.js';
 import type { AuthLinkModalOptions } from './modal.js';
-export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale, DialogVariant } from './types.js';
+import type { PasscodeOptions } from './passcode.js';
+export type { PasscodeOptions, PasscodeClient, OTPVerification } from './passcode.js';
+export declare function AuthLinkPasscode(props: PasscodeOptions): null;
+export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale } from './types.js';
 export declare function useAuthLink(options: WidgetOptions): {
     snapshot: Snapshot;
     retry: () => void;
+    submitCode: (code: string) => Promise<void>;
 };
 export interface AuthLinkWidgetProps extends AuthLinkModalOptions {
 }

package/dist/types/types.d.ts

@@ -1,5 +1,4 @@
 export type Mode = 'bind' | 'confirm';
-export type DialogVariant = 'A' | 'B' | 'C';
 export type Status = 'idle' | 'pending' | 'confirmed' | 'rejected' | 'expired' | 'error';
 export type Locale = 'en' | 'zh-CN' | 'zh-TW' | 'ja' | 'bn' | 'es' | 'fil' | 'hi' | 'id' | 'ms' | 'pt' | 'th' | 'vi';
 /** Current display only. The generation secret must never reach the browser. */
@@ -43,10 +42,11 @@ export interface AuthLinkClient {
         idempotencyKey: string;
         signal?: AbortSignal;
     }): Promise<Ticket>;
-    result(ticket: Ticket, signal: AbortSignal): Promise<Result>;
+    result(ticket: Ticket, signal: AbortSignal, confirmationCode?: string): Promise<Result>;
 }
 export interface Snapshot {
     status: Status;
+    submitting?: boolean;
     code: string | null;
     secondsRemaining: number;
     codeSecondsRemaining: number;
@@ -63,8 +63,6 @@ export interface WidgetOptions extends Events {
     ticket: Ticket;
     client: AuthLinkClient;
     locale?: Locale;
-    /** A: minimal (default), B: split, C: compact / mobile bottom sheet. */
-    variant?: DialogVariant;
     showQr?: boolean;
     intervalMs?: number;
     onRefresh?: () => void;

package/dist/types/view.d.ts

@@ -1,19 +1,20 @@
-import type { DialogVariant, Locale, Mode, Snapshot } from './types.js';
+import type { Locale, Mode, Snapshot } from './types.js';
 export interface ViewNode {
     tag: string;
     props: Record<string, unknown>;
     children: (ViewNode | string)[];
 }
-export declare function resolveVariant(variant?: string): DialogVariant;
 export declare function widgetView(options: {
     mode: Mode;
     locale?: Locale;
-    variant?: DialogVariant;
     snapshot: Snapshot;
+    passcodeMode?: boolean;
     qr?: string;
     showQr?: boolean;
+    submitCode?: (code: string) => Promise<void>;
+    inputCode?: string;
+    setCode?: (code: string) => void;
     retry: () => void;
     refresh?: () => void;
-    close?: () => void;
     className?: string;
 }): ViewNode;

package/dist/types/vue.d.ts

@@ -1,10 +1,14 @@
 import type { DefineComponent, ShallowRef } from 'vue';
 import type { Snapshot, WidgetOptions } from './types.js';
 import type { AuthLinkModalOptions } from './modal.js';
-export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale, DialogVariant } from './types.js';
+import type { PasscodeOptions } from './passcode.js';
+export type { PasscodeOptions, PasscodeClient, OTPVerification } from './passcode.js';
+export declare const AuthLinkPasscode: DefineComponent<PasscodeOptions>;
+export type { Ticket, Confirmation, Rejection, Snapshot, AuthLinkClient, Locale } from './types.js';
 export declare function useAuthLink(getOptions: () => WidgetOptions): {
     snapshot: ShallowRef<Snapshot>;
     retry: () => void;
+    submitCode: (code: string) => Promise<void>;
 };
 export interface AuthLinkWidgetProps extends Omit<AuthLinkModalOptions, 'mode'> {
 }