@idp.global/catalog 1.1.1 → 1.2.1

package/ts_web/elements/idp-admin-shell.ts

@@ -163,6 +163,24 @@ export interface IIdpAdminPassportEnrollment {
   expiresAt: number;
 }
 
+export interface IIdpAdminPasskey {
+  id: string;
+  label: string;
+  credentialId?: string;
+  status: string;
+  backedUp?: boolean;
+  deviceType?: string;
+  transports?: string[];
+  createdAt: number;
+  lastUsedAt?: number | null;
+}
+
+export interface IIdpAdminTotpEnrollment {
+  credentialId: string;
+  secret: string;
+  otpauthUrl: string;
+}
+
 export interface IIdpAdminSessionEventDetail {
   sessionId: string;
 }
@@ -237,6 +255,23 @@ export interface IIdpAdminPassportDeviceEventDetail {
   deviceId: string;
 }
 
+export interface IIdpAdminTotpVerifyEventDetail {
+  credentialId: string;
+  code: string;
+}
+
+export interface IIdpAdminTotpCodeEventDetail {
+  code: string;
+}
+
+export interface IIdpAdminPasskeyRegistrationEventDetail {
+  label: string;
+}
+
+export interface IIdpAdminPasskeyEventDetail {
+  passkeyId: string;
+}
+
 @customElement('idp-admin-shell')
 export class IdpAdminShell extends DeesElement {
   public static demo = () => html`<idp-admin-shell global-admin></idp-admin-shell>`;
@@ -1239,6 +1274,18 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Object })
   public accessor passportEnrollment: IIdpAdminPassportEnrollment | null = null;
 
+  @property({ type: Boolean, attribute: 'totp-enabled' })
+  public accessor totpEnabled = false;
+
+  @property({ type: Number, attribute: 'backup-codes-remaining' })
+  public accessor backupCodesRemaining = 0;
+
+  @property({ type: Object })
+  public accessor totpEnrollment: IIdpAdminTotpEnrollment | null = null;
+
+  @property({ type: Array })
+  public accessor passkeys: IIdpAdminPasskey[] = [];
+
   @property({ type: String, attribute: 'credential-message' })
   public accessor credentialMessage = '';
 
@@ -1523,6 +1570,51 @@ export class IdpAdminShell extends DeesElement {
     });
   }
 
+  private requestTotpEnrollment() {
+    this.dispatchShellEvent('idp-admin-totp-start', {});
+  }
+
+  private verifyTotpEnrollment() {
+    if (!this.totpEnrollment) {
+      return;
+    }
+    const code = globalThis.prompt?.('Authenticator code')?.trim();
+    if (!code) {
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminTotpVerifyEventDetail>('idp-admin-totp-verify', {
+      credentialId: this.totpEnrollment.credentialId,
+      code,
+    });
+  }
+
+  private disableTotp() {
+    const code = globalThis.prompt?.('Enter your current authenticator code to disable TOTP')?.trim();
+    if (!code) {
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminTotpCodeEventDetail>('idp-admin-totp-disable', { code });
+  }
+
+  private regenerateBackupCodes() {
+    const code = globalThis.prompt?.('Enter your current authenticator code to regenerate backup codes')?.trim();
+    if (!code) {
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminTotpCodeEventDetail>('idp-admin-backup-codes-regenerate', { code });
+  }
+
+  private requestPasskeyRegistration() {
+    const fallbackLabel = typeof navigator !== 'undefined'
+      ? navigator.userAgent.includes('Mobile') ? 'Mobile passkey' : 'Desktop passkey'
+      : 'Passkey';
+    const label = globalThis.prompt?.('Passkey label', fallbackLabel)?.trim();
+    if (!label) {
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminPasskeyRegistrationEventDetail>('idp-admin-passkey-register', { label });
+  }
+
   private setPage(pageArg: TIdpAdminPage) {
     this.page = pageArg;
     this.orgMenuOpen = false;
@@ -2172,6 +2264,23 @@ export class IdpAdminShell extends DeesElement {
         html`<div class="cell-actions"><button class="table-action destructive" @click=${() => this.dispatchShellEvent<IIdpAdminPassportDeviceEventDetail>('idp-admin-passport-revoke', { deviceId: deviceArg.id })}>Revoke</button></div>`,
       ],
     }));
+    const passkeyRows = this.passkeys.map((passkeyArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(passkeyArg.label)}</span>
+            <div>
+              <div class="identity-primary">${passkeyArg.label}</div>
+              <div class="identity-secondary">${passkeyArg.deviceType || 'passkey'}${passkeyArg.backedUp ? ' - backed up' : ''}</div>
+            </div>
+          </div>
+        `,
+        html`<idp-badge variant=${passkeyArg.status === 'active' ? 'ok' : 'error'}>${passkeyArg.status}</idp-badge>`,
+        (passkeyArg.transports || []).join(', ') || '-',
+        passkeyArg.lastUsedAt ? this.formatTimeAgo(passkeyArg.lastUsedAt) : 'never',
+        html`<div class="cell-actions"><button class="table-action destructive" @click=${() => this.dispatchShellEvent<IIdpAdminPasskeyEventDetail>('idp-admin-passkey-revoke', { passkeyId: passkeyArg.id })}>Revoke</button></div>`,
+      ],
+    }));
 
     return html`
       ${this.renderPageHeader('Security', 'Manage how you authenticate and protect your account.')}
@@ -2190,6 +2299,45 @@ export class IdpAdminShell extends DeesElement {
           <div class="divider"></div>
           <button class="plain-button primary" @click=${() => this.submitPasswordChange()}>Update password</button>
         `)}
+        ${this.renderSectionCard('Authenticator app', 'TOTP protects password and magic-link sign-ins with a six-digit code from an authenticator app.', html`
+          <div class="split-row"><div><div class="section-title">Status</div><div class="muted">${this.totpEnabled ? `${this.backupCodesRemaining} backup codes remaining.` : 'No authenticator app is enrolled.'}</div></div><idp-badge variant=${this.totpEnabled ? 'ok' : 'warn'}>${this.totpEnabled ? 'Enabled' : 'Disabled'}</idp-badge></div>
+          ${this.totpEnrollment ? html`
+            <div class="divider"></div>
+            <div class="notice-card"><idp-icon name="qr" size="16"></idp-icon><div><div class="section-title">TOTP setup pending</div><div class="muted">Scan the otpauth URL or enter the manual secret, then verify the current code.</div></div></div>
+            ${this.renderFormRow('Manual secret', '', this.renderCodeBlock(this.totpEnrollment.secret))}
+            ${this.renderFormRow('otpauth URL', '', this.renderCodeBlock(this.totpEnrollment.otpauthUrl))}
+            <button class="plain-button primary" @click=${() => this.verifyTotpEnrollment()}>Verify setup code</button>
+          ` : html`
+            <div class="divider"></div>
+            ${this.totpEnabled ? html`
+              <div class="cell-actions" style="justify-content:flex-start">
+                <button class="plain-button outline" @click=${() => this.regenerateBackupCodes()}>Regenerate backup codes</button>
+                <button class="plain-button ghost" style="color:var(--idp-error)" @click=${() => this.disableTotp()}>Disable TOTP</button>
+              </div>
+            ` : html`<button class="plain-button primary" @click=${() => this.requestTotpEnrollment()}>Enable authenticator app</button>`}
+          `}
+        `)}
+        <idp-data-table
+          title="Passkeys"
+          subtitle="WebAuthn credentials for passwordless login and MFA step-up."
+          badge=${`${this.passkeys.length} total`}
+          empty-title="No passkeys"
+          empty-description="Register a passkey to sign in with platform authenticators or security keys."
+          .columns=${[
+            { label: 'Passkey' },
+            { label: 'Status' },
+            { label: 'Transports', hideBelow: 'mobile' },
+            { label: 'Last used', mono: true, hideBelow: 'mobile' },
+            { label: 'Action', align: 'right' },
+          ]}
+          .rows=${passkeyRows}
+        ></idp-data-table>
+        <div class="section-card">
+          <div class="section-headline">
+            <div><div class="section-title">Register passkey</div><div class="section-description">Creates a WebAuthn registration challenge in this browser.</div></div>
+            <button class="plain-button outline" @click=${() => this.requestPasskeyRegistration()}>Register passkey</button>
+          </div>
+        </div>
         <idp-data-table
           title="Passport devices"
           subtitle="Cryptographic IDP Passport devices registered for this account."
@@ -2217,10 +2365,6 @@ export class IdpAdminShell extends DeesElement {
             ${this.renderFormRow('Signing payload', '', this.renderCodeBlock(this.passportEnrollment.signingPayload))}
           ` : html`<div class="muted">No active enrollment challenge.</div>`}
         </div>
-        <div class="primary-grid">
-          ${this.renderStateCard('TOTP controls not connected', 'No TOTP secret, enrollment, or verification endpoints exist in this backend yet, so no fake TOTP toggle is shown.', 'lock')}
-          ${this.renderStateCard('WebAuthn passkeys not connected', 'No WebAuthn passkey credential model or assertion endpoints exist yet. Passport devices are the available cryptographic credential path.', 'key')}
-        </div>
       </div>
     `;
   }

package/ts_web/elements/idp-badge.ts

@@ -20,7 +20,7 @@ export class IdpBadge extends DeesElement {
       <idp-badge variant="error">Denied</idp-badge>
     </div>
   `;
-  public static demoGroups = ['idp.global v3 primitives'];
+  public static demoGroups = ['idp.global v5 primitives'];
 
   @property({ type: String })
   public accessor variant: TIdpBadgeVariant = 'default';
@@ -34,15 +34,15 @@ export class IdpBadge extends DeesElement {
       .badge {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
-        padding: 2px 8px;
+        gap: 5px;
+        padding: 3px 9px;
         border: 1px solid transparent;
-        border-radius: 999px;
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        font-weight: 600;
+        border-radius: var(--idp-radius-pill);
+        font-family: var(--idp-font);
+        font-size: 12px;
+        font-weight: 590;
         letter-spacing: -0.01em;
-        line-height: 16px;
+        line-height: 15px;
       }
       .default {
         background: var(--idp-muted);
@@ -67,9 +67,6 @@ export class IdpBadge extends DeesElement {
         color: var(--idp-error);
         border-color: var(--idp-error-border);
       }
-      .accent {
-        border-color: var(--idp-info-border);
-      }
       .outline {
         background: transparent;
         color: var(--idp-fg);

package/ts_web/elements/idp-button.ts

@@ -9,7 +9,7 @@ import {
 import { idpElementStyles } from './tokens.js';
 import './idp-icon.js';
 
-export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent';
+export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent' | 'tint' | 'link';
 export type TIdpButtonSize = 'sm' | 'md' | 'lg';
 
 declare global {
@@ -21,15 +21,16 @@ declare global {
 @customElement('idp-button')
 export class IdpButton extends DeesElement {
   public static demo = () => html`
-    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-      <idp-button>Default</idp-button>
-      <idp-button variant="accent">Approve</idp-button>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+      <idp-button variant="accent">Claim identity</idp-button>
+      <idp-button variant="tint">Talk to us</idp-button>
       <idp-button variant="outline">Deny</idp-button>
       <idp-button variant="ghost">Ghost</idp-button>
+      <idp-button variant="link">See how it works</idp-button>
       <idp-button variant="destructive">Delete</idp-button>
     </div>
   `;
-  public static demoGroups = ['idp.global v3 primitives'];
+  public static demoGroups = ['idp.global v5 primitives'];
 
   @property({ type: String })
   public accessor variant: TIdpButtonVariant = 'default';
@@ -64,9 +65,10 @@ export class IdpButton extends DeesElement {
         justify-content: center;
         gap: 6px;
         border: 1px solid transparent;
-        border-radius: 6px;
+        border-radius: var(--idp-radius-pill);
         font-family: var(--idp-font);
         font-weight: 500;
+        line-height: 1.4;
         letter-spacing: -0.01em;
         white-space: nowrap;
         cursor: pointer;
@@ -84,19 +86,16 @@ export class IdpButton extends DeesElement {
         cursor: not-allowed;
       }
       .sm {
-        height: 32px;
-        padding: 0 12px;
-        font-size: 13px;
+        padding: 6px 14px;
+        font-size: 14px;
       }
       .md {
-        height: 38px;
-        padding: 0 14px;
-        font-size: 14px;
+        padding: 8px 18px;
+        font-size: 17px;
       }
       .lg {
-        height: 44px;
-        padding: 0 18px;
-        font-size: 15px;
+        padding: 11px 24px;
+        font-size: 19px;
       }
       .default {
         background: var(--idp-primary);
@@ -108,11 +107,35 @@ export class IdpButton extends DeesElement {
       .accent {
         background: var(--idp-accent);
         color: var(--idp-accent-fg);
-        box-shadow: 0 4px 14px color-mix(in srgb, var(--idp-accent), transparent 64%);
       }
       .accent:hover:not(:disabled) {
         background: var(--idp-accent-hover);
       }
+      .tint {
+        background: var(--idp-accent-soft);
+        color: var(--idp-accent);
+      }
+      .tint:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--idp-accent-soft), var(--idp-accent) 12%);
+      }
+      .link {
+        background: transparent;
+        color: var(--idp-accent);
+        padding: 0;
+        border-radius: 0;
+      }
+      .link:hover:not(:disabled) {
+        text-decoration: underline;
+      }
+      .link::after {
+        content: '›';
+        font-size: 1.15em;
+        line-height: 0;
+        transition: transform 160ms ease;
+      }
+      .link:hover:not(:disabled)::after {
+        transform: translateX(2px);
+      }
       .secondary {
         background: var(--idp-muted);
         color: var(--idp-fg);

package/ts_web/elements/idp-landing-hero.ts

@@ -1,8 +1,7 @@
 import { DeesElement, html, customElement, css, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
 import './idp-button.js';
-import './idp-dashboard-window.js';
-import './idp-icon.js';
+import './idp-screenshot-placeholder.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -13,128 +12,78 @@ declare global {
 @customElement('idp-landing-hero')
 export class IdpLandingHero extends DeesElement {
   public static demo = () => html`<idp-landing-hero></idp-landing-hero>`;
-  public static demoGroups = ['idp.global v3 composed surfaces'];
+  public static demoGroups = ['idp.global v5 composed surfaces'];
 
   public static styles = [
     ...idpElementStyles,
     css`
       :host {
         display: block;
-      }
-      .hero {
-        position: relative;
-        overflow: hidden;
-        background: var(--idp-bg);
+        background: var(--idp-card);
         color: var(--idp-fg);
-        border-bottom: 1px solid var(--idp-border-soft);
-      }
-      .grid {
-        position: absolute;
-        inset: 0;
-        background-image: linear-gradient(to right, color-mix(in srgb, var(--idp-fg), transparent 97%) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--idp-fg), transparent 97%) 1px, transparent 1px);
-        background-size: 56px 56px;
-        mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 70%);
-        pointer-events: none;
       }
-      .glow {
-        position: absolute;
-        top: -220px;
-        left: 50%;
-        width: 900px;
-        height: 600px;
-        transform: translateX(-50%);
-        background: radial-gradient(ellipse, rgba(59,130,246,0.18) 0%, transparent 60%);
-        pointer-events: none;
-      }
-      .inner {
-        position: relative;
-        z-index: 1;
-        max-width: 1240px;
-        margin: 0 auto;
-        padding: 96px 32px 0;
+      .hero {
+        padding: 84px 0 0;
         text-align: center;
       }
-      .badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 7px;
-        margin-bottom: 28px;
-        padding: 5px 12px 5px 8px;
-        border: 1px solid var(--idp-border);
-        border-radius: 999px;
-        background: var(--idp-muted);
-        color: var(--idp-fg-3);
-        font-size: 12px;
+      .wrap {
+        max-width: 1024px;
+        margin: 0 auto;
+        padding: 0 22px;
       }
-      .pill {
-        padding: 2px 7px;
-        border-radius: 999px;
-        background: rgba(59,130,246,0.18);
-        color: var(--idp-accent-hover);
-        font-family: var(--idp-mono);
-        font-size: 10px;
+      .hero-tag {
+        margin-bottom: 6px;
+        color: var(--idp-accent);
+        font-size: 21px;
         font-weight: 600;
-        letter-spacing: 0.04em;
+        letter-spacing: -0.02em;
       }
       h1 {
-        margin: 0 0 24px;
-        font-size: clamp(44px, 6.5vw, 78px);
+        max-width: 16ch;
+        margin: 0 auto 22px;
         font-family: var(--idp-display);
+        font-size: clamp(48px, 7vw, 96px);
         font-weight: 700;
-        letter-spacing: -0.035em;
-        line-height: 0.96;
-      }
-      h1 em {
-        color: var(--idp-accent-hover);
-        font-family: var(--idp-serif);
-        font-style: italic;
-        font-weight: 400;
+        line-height: 1.04;
+        letter-spacing: -0.025em;
       }
-      .sub {
-        max-width: 660px;
-        margin: 0 auto 36px;
+      .hero-sub {
+        max-width: 600px;
+        margin: 0 auto 28px;
         color: var(--idp-fg-3);
-        font-size: clamp(16px, 1.6vw, 19px);
-        line-height: 1.55;
+        font-size: clamp(19px, 2vw, 24px);
+        font-weight: 400;
+        line-height: 1.4;
+        letter-spacing: -0.01em;
       }
-      .actions {
+      .hero-actions {
         display: flex;
-        gap: 12px;
+        gap: 26px;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
-        margin-bottom: 20px;
       }
-      .fineprint {
-        color: var(--idp-muted-fg);
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        letter-spacing: 0.04em;
+      .hero-fine {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 22px;
+        color: var(--idp-fg-3);
+        font-size: 13px;
       }
-      .fineprint span + span::before {
-        content: '*';
+      .hero-fine span + span::before {
+        content: '·';
         margin: 0 10px;
+        color: var(--idp-fg-3);
       }
       .product {
-        position: relative;
-        max-width: 1180px;
-        margin: 72px auto 0;
-        padding: 0 32px;
-      }
-      .product-glow {
-        position: absolute;
-        inset: 30% 10% -10%;
-        background: radial-gradient(ellipse, rgba(59,130,246,0.25) 0%, transparent 60%);
-        filter: blur(40px);
-        pointer-events: none;
-      }
-      idp-dashboard-window {
-        position: relative;
-        z-index: 1;
+        max-width: 1100px;
+        margin: 60px auto 0;
+        padding: 0 22px;
       }
       @media (max-width: 760px) {
-        .inner {
-          padding: 72px 20px 0;
+        .hero {
+          padding: 64px 0 0;
         }
       }
     `,
@@ -143,22 +92,28 @@ export class IdpLandingHero extends DeesElement {
   public render(): TemplateResult {
     return html`
       <section class="hero">
-        <div class="grid"></div>
-        <div class="glow"></div>
-        <div class="inner">
-          <div class="badge"><span class="pill">v3.81</span>Cardano-anchored identity, now self-hostable</div>
-          <h1>One identity.<br/><em>Any scale.</em> Yours forever.</h1>
-          <p class="sub">An open identity provider for everyone, from a single person to a global enterprise. Anchored to the Cardano blockchain so it can never be erased, taken away, or quietly deprecated.</p>
-          <div class="actions">
-            <idp-button variant="accent" size="lg" icon="shield">Claim your identity - free</idp-button>
-            <idp-button variant="ghost" size="lg" icon="globe">View source</idp-button>
+        <div class="wrap">
+          <div class="hero-tag">idp.global</div>
+          <h1>One identity. Any scale.<br />Yours forever.</h1>
+          <p class="hero-sub">
+            An open identity provider for everyone — from a single person to a global enterprise.
+            Anchored to Cardano, so it can never be erased or taken away.
+          </p>
+          <div class="hero-actions">
+            <idp-button variant="accent" size="lg">Claim your identity</idp-button>
+            <idp-button variant="link" size="lg">See how it works</idp-button>
           </div>
-          <div class="fineprint"><span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span></div>
-          <div class="product">
-            <div class="product-glow"></div>
-            <idp-dashboard-window></idp-dashboard-window>
+          <div class="hero-fine">
+            <span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span>
           </div>
         </div>
+        <div class="product" id="product">
+          <idp-screenshot-placeholder
+            variant="hero"
+            label="Console dashboard"
+            meta="console.idp.global / overview · 1100 × 620"
+          ></idp-screenshot-placeholder>
+        </div>
       </section>
     `;
   }