@qrauth/web-components 0.1.0

package/dist/base.d.ts

@@ -0,0 +1,30 @@
+/**
+ * QRAuthElement — base class for all QRAuth Web Components.
+ * Provides: Shadow DOM setup, CSS custom property theming, SSE connection management,
+ * lifecycle hooks, and event dispatching.
+ */
+export declare abstract class QRAuthElement extends HTMLElement {
+    protected shadow: ShadowRoot;
+    private _sseConnection;
+    private _pollInterval;
+    static get observedAttributes(): string[];
+    constructor();
+    get tenant(): string;
+    get theme(): string;
+    get baseUrl(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    protected abstract render(): void;
+    protected connectSSE(url: string): void;
+    protected onSSEEvent(event: string, callback: (data: unknown) => void): void;
+    protected disconnectSSE(): void;
+    protected startPolling(url: string, intervalMs: number, callback: (data: unknown) => void, headers?: Record<string, string>): void;
+    protected stopPolling(): void;
+    protected cleanup(): void;
+    protected emit(name: string, detail?: unknown): void;
+    protected generateCodeVerifier(): Promise<string>;
+    protected computeCodeChallenge(verifier: string): Promise<string>;
+    private _base64url;
+    protected getBaseStyles(): string;
+}

package/dist/base.js

@@ -0,0 +1,148 @@
+/**
+ * QRAuthElement — base class for all QRAuth Web Components.
+ * Provides: Shadow DOM setup, CSS custom property theming, SSE connection management,
+ * lifecycle hooks, and event dispatching.
+ */
+export class QRAuthElement extends HTMLElement {
+    shadow;
+    _sseConnection = null;
+    _pollInterval = null;
+    static get observedAttributes() {
+        return ['tenant', 'theme', 'base-url'];
+    }
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: 'open' });
+    }
+    // Getters for common attributes
+    get tenant() { return this.getAttribute('tenant') || ''; }
+    get theme() { return this.getAttribute('theme') || 'light'; }
+    get baseUrl() {
+        const val = this.getAttribute('base-url');
+        // Allow empty string for local dev (relative URLs), fallback to production
+        return val !== null ? val : 'https://qrauth.io';
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    attributeChangedCallback(_name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+    // --- SSE Management ---
+    connectSSE(url) {
+        this.disconnectSSE();
+        // EventSource doesn't support custom headers natively.
+        // For public (unauthenticated) SSE endpoints this works directly.
+        this._sseConnection = new EventSource(url);
+        this._sseConnection.onerror = () => {
+            // Fall back to polling on SSE failure — caller should initiate polling
+            this.disconnectSSE();
+        };
+    }
+    onSSEEvent(event, callback) {
+        if (this._sseConnection) {
+            this._sseConnection.addEventListener(event, (e) => {
+                const msg = e;
+                try {
+                    callback(JSON.parse(msg.data));
+                }
+                catch { /* invalid JSON */ }
+            });
+        }
+    }
+    disconnectSSE() {
+        if (this._sseConnection) {
+            this._sseConnection.close();
+            this._sseConnection = null;
+        }
+    }
+    // --- Polling (fallback / primary for authenticated endpoints) ---
+    startPolling(url, intervalMs, callback, headers) {
+        this.stopPolling();
+        const poll = async () => {
+            try {
+                const res = await fetch(url, { headers });
+                if (res.ok)
+                    callback(await res.json());
+            }
+            catch { /* network error — retry next interval */ }
+        };
+        poll(); // immediate first poll
+        this._pollInterval = setInterval(poll, intervalMs);
+    }
+    stopPolling() {
+        if (this._pollInterval) {
+            clearInterval(this._pollInterval);
+            this._pollInterval = null;
+        }
+    }
+    // --- Cleanup ---
+    cleanup() {
+        this.disconnectSSE();
+        this.stopPolling();
+    }
+    // --- Event dispatch ---
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, {
+            bubbles: true,
+            composed: true, // crosses shadow DOM boundary
+            detail,
+        }));
+    }
+    // --- PKCE helpers ---
+    async generateCodeVerifier() {
+        const bytes = new Uint8Array(32);
+        crypto.getRandomValues(bytes);
+        return this._base64url(bytes);
+    }
+    async computeCodeChallenge(verifier) {
+        const encoder = new TextEncoder();
+        const data = encoder.encode(verifier);
+        const hash = await crypto.subtle.digest('SHA-256', data);
+        return this._base64url(new Uint8Array(hash));
+    }
+    _base64url(bytes) {
+        const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join('');
+        return btoa(binString).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    }
+    // --- Shared base styles (host-level theming via CSS custom properties) ---
+    getBaseStyles() {
+        return `
+      :host {
+        display: inline-block;
+        font-family: var(--qrauth-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        --_primary:       var(--qrauth-primary, #00a76f);
+        --_primary-dark:  var(--qrauth-primary-dark, #007a52);
+        --_text:          var(--qrauth-text, #1a1a2e);
+        --_text-muted:    var(--qrauth-text-muted, #637381);
+        --_bg:            var(--qrauth-bg, #ffffff);
+        --_surface:       var(--qrauth-surface, #f9fafb);
+        --_border:        var(--qrauth-border, #e0e0e0);
+        --_radius:        var(--qrauth-radius, 12px);
+        --_shadow:        var(--qrauth-shadow, 0 24px 48px rgba(0,0,0,0.15));
+        --_btn-bg:        var(--qrauth-btn-bg, #1b2a4a);
+        --_btn-hover:     var(--qrauth-btn-hover, #263b66);
+        --_success:       #00a76f;
+        --_error:         #ff5630;
+        --_warning:       #ffab00;
+        --_disabled:      #919eab;
+      }
+      :host([theme="dark"]) {
+        --_text:       var(--qrauth-text, #f0f0f0);
+        --_text-muted: var(--qrauth-text-muted, #919eab);
+        --_bg:         var(--qrauth-bg, #1a1a2e);
+        --_surface:    var(--qrauth-surface, #242436);
+        --_border:     var(--qrauth-border, rgba(255,255,255,0.12));
+        --_shadow:     var(--qrauth-shadow, 0 24px 48px rgba(0,0,0,0.5));
+        --_btn-bg:     var(--qrauth-btn-bg, #263b66);
+        --_btn-hover:  var(--qrauth-btn-hover, #2e4578);
+      }
+      * { box-sizing: border-box; margin: 0; padding: 0; }
+    `;
+    }
+}

package/dist/ephemeral.d.ts

@@ -0,0 +1,61 @@
+import { QRAuthElement } from './base.js';
+/**
+ * <qrauth-ephemeral> — Displays an ephemeral access QR code with TTL countdown
+ * and claim status updates.
+ *
+ * Attributes:
+ *   tenant         — Your QRAuth App client ID (required)
+ *   theme          — "light" (default) | "dark"
+ *   base-url       — API base URL (default: https://qrauth.io)
+ *   scopes         — Space-separated scope strings (default: "access")
+ *   ttl            — TTL string like "30m", "6h", "1d" (default: "30m")
+ *   max-uses       — Maximum number of claims (default: "1")
+ *   device-binding — Boolean attribute; present = device binding enabled
+ *   display        — "button" | "inline" (default: "inline")
+ *
+ * Events (bubbles + composed, cross shadow-DOM):
+ *   qrauth:claimed  — detail: { sessionId, status, scopes, metadata, useCount, maxUses }
+ *   qrauth:expired  — fired when session times out
+ *   qrauth:revoked  — fired when session is revoked
+ *   qrauth:error    — detail: { message }
+ *
+ * @example
+ *   <qrauth-ephemeral tenant="qrauth_app_xxx" scopes="read:menu write:order" ttl="30m">
+ *   </qrauth-ephemeral>
+ */
+export declare class QRAuthEphemeral extends QRAuthElement {
+    static get observedAttributes(): string[];
+    private _sessionId;
+    private _claimUrl;
+    private _status;
+    private _expiresAt;
+    private _timerInterval;
+    private _pollTimeout;
+    get scopes(): string;
+    get ttl(): string;
+    get maxUses(): number;
+    get deviceBinding(): boolean;
+    get display(): string;
+    disconnectedCallback(): void;
+    protected render(): void;
+    private _renderButton;
+    private _renderInline;
+    private _inlineIdleContent;
+    private _modalContent;
+    private _bodyForStatus;
+    private _sharedModalStyles;
+    private _bindButtonEvents;
+    private _bindInlineEvents;
+    private _bindModalButtons;
+    private _openModal;
+    private _closeModal;
+    private _startSession;
+    private _retry;
+    private _beginPolling;
+    private _handleStatusChange;
+    private _startCountdown;
+    private _formatTimer;
+    /** Update just the inner body content without re-rendering the whole component */
+    private _updateBody;
+    private _clearTimers;
+}