@idp.global/catalog 3.6.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/catalog",
-  "version": "3.6.0",
+  "version": "5.0.0",
   "private": false,
   "description": "Web component catalog for idp.global, based on the v5 Apple-system design language.",
   "exports": {
@@ -12,25 +12,24 @@
   "author": "Task Venture Capital GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-catalog": "^3.90.1",
+    "@design.estate/dees-catalog": "^3.96.3",
     "@design.estate/dees-domtools": "^2.5.6",
-    "@design.estate/dees-element": "^2.2.4",
-    "@design.estate/dees-wcctools": "^3.9.0",
-    "lucide": "^1.16.0"
+    "@design.estate/dees-element": "^2.4.0",
+    "@design.estate/dees-wcctools": "^3.9.2",
+    "@idp.global/interfaces": "^13.0.0",
+    "lucide": "^1.24.0"
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^4.4.2",
-    "@git.zone/tsbundle": "^2.11.0",
+    "@git.zone/tsbundle": "^2.11.2",
     "@git.zone/tswatch": "^3.3.5",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^25.9.4"
+    "@types/node": "^26.1.1"
   },
   "files": [
     "ts_web/**/*",
     "dist_ts_web/**/*",
-    "dist_bundle/**/*",
     "assets/**/*",
-    "html/**/*",
     "license",
     "readme.md",
     "changelog.md"

package/readme.md

@@ -78,6 +78,36 @@ The catalog uses shared tokens from `ts_web/elements/tokens.ts` for color, type,
 
 This package is component-only. It does not perform authentication, store sessions, call the idp.global backend, or implement business logic. Use it together with `@idp.global/sdk/browser` and `@idp.global/interfaces` when you need live identity behavior.
 
+Admin activity surfaces accept `TIdpAdminActivity`, an alias of the structured
+`@idp.global/interfaces` activity DTO. Activity rendering uses finite actions,
+outcomes, target types, and reason codes; it does not accept record IDs,
+free-text descriptions, IP addresses, user agents, or generic metadata.
+
+```ts
+import {
+  formatAdminActivityDetail,
+  formatAdminActivityTitle,
+  getAdminActivityTone,
+  type TIdpAdminActivity,
+} from '@idp.global/catalog';
+
+const activity: TIdpAdminActivity = {
+  action: 'passkey_login',
+  timestamp: Date.now(),
+  outcome: 'succeeded',
+  targetType: 'passkey',
+  facts: null,
+};
+
+const title = formatAdminActivityTitle(activity);
+const detail = formatAdminActivityDetail(activity);
+const statusColor = getAdminActivityTone(activity);
+```
+
+The npm package publishes ESM component modules, declarations, and assets. The
+local showcase HTML and its browser bundle are development artifacts and are
+not part of the npm tarball.
+
 ## Development
 
 ```bash

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/catalog',
-  version: '3.6.0',
+  version: '5.0.0',
   description: 'Web component catalog for idp.global, based on the v5 Apple-system design language.'
 }

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

@@ -1,6 +1,16 @@
 import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
-import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
+import {
+  idpAdminSharedStyles,
+  renderAdminKpi,
+  renderAdminStateCard,
+  formatAdminTimeAgo,
+  formatAdminActivityTitle,
+  formatAdminActivityDetail,
+  getAdminActivityTone,
+  type TIdpAdminActivity,
+  type TIdpAdminKpi,
+} from './idp-admin-shared.js';
 import './idp-icon.js';
 import './idp-badge.js';
 import '@design.estate/dees-catalog/dist_ts_web/elements/00group-chart/dees-chart-area/index.js';
@@ -9,7 +19,6 @@ import type {
   IIdpAdminUser,
   IIdpAdminOrg,
   IIdpAdminSession,
-  IIdpAdminActivity,
   IIdpAdminPassportDevice,
   IIdpAdminOverviewData,
   IIdpAdminNavigateEventDetail,
@@ -38,8 +47,8 @@ export class IdpAdminOverview extends DeesElement {
           { id: 's2', deviceName: 'iPhone 15 Pro', browser: 'Safari', os: 'iOS 18', ip: '84.132.10.4', lastActive: now - 3600000, createdAt: now - 86400000 * 10, isCurrent: false },
         ]}
         .activities=${[
-          { id: 'a1', action: 'login_success', description: 'Signed in with passkey', timestamp: now - 300000 },
-          { id: 'a2', action: 'app_authorized', description: 'Granted access to foss.global', timestamp: now - 7200000 },
+          { action: 'passkey_login', timestamp: now - 300000, outcome: 'succeeded', targetType: 'passkey', facts: null },
+          { action: 'oidc_authorization_granted', timestamp: now - 7200000, outcome: 'succeeded', targetType: 'oidc_authorization', facts: { grantType: 'authorization_code' } },
         ]}
         .overviewData=${{
           chartLabel: 'Approval activity',
@@ -190,7 +199,7 @@ export class IdpAdminOverview extends DeesElement {
   public accessor sessions: IIdpAdminSession[] = [];
 
   @property({ type: Array })
-  public accessor activities: IIdpAdminActivity[] = [];
+  public accessor activities: TIdpAdminActivity[] = [];
 
   @property({ type: Array })
   public accessor passportDevices: IIdpAdminPassportDevice[] = [];
@@ -371,7 +380,7 @@ export class IdpAdminOverview extends DeesElement {
           <div class="card">
             <div class="card-head"><span class="card-title">Recent activity</span><idp-badge>${this.activities.length} events</idp-badge></div>
             ${this.activities.length ? this.activities.slice(0, 8).map((activityArg) => html`
-              <div class="feed-item"><span class="feed-dot" style="--dot-color:var(--idp-info)"></span><div class="feed-text"><strong>${activityArg.action.replace(/_/g, ' ')}</strong> - ${activityArg.description}</div><span class="feed-meta">${formatAdminTimeAgo(activityArg.timestamp)}</span></div>
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:${getAdminActivityTone(activityArg)}"></span><div class="feed-text"><strong>${formatAdminActivityTitle(activityArg)}</strong> - ${formatAdminActivityDetail(activityArg)}</div><span class="feed-meta">${formatAdminTimeAgo(activityArg.timestamp)}</span></div>
             `) : renderAdminStateCard('No activity yet', 'Activity events will appear here after logins, app changes, and organisation updates.', 'activity')}
           </div>
           <div class="card">

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

@@ -1,6 +1,9 @@
 import { css, html, type TemplateResult } from '@design.estate/dees-element';
+import type { dto } from '@idp.global/interfaces';
 import './idp-icon.js';
 
+export type TIdpAdminActivity = dto.TActivityEventDto;
+
 export type TIdpAdminKpi = {
   label: string;
   value: string;
@@ -417,3 +420,31 @@ export const formatAdminTimeAgo = (timestampArg?: number): string => {
   if (days < 7) return `${days}d ago`;
   return new Date(timestampArg).toLocaleDateString();
 };
+
+export const formatAdminActivityTitle = (activityArg: TIdpAdminActivity): string =>
+  activityArg.action
+    .split('_')
+    .map((segmentArg) => `${segmentArg.slice(0, 1).toUpperCase()}${segmentArg.slice(1)}`)
+    .join(' ');
+
+export const formatAdminActivityDetail = (activityArg: TIdpAdminActivity): string => {
+  const classifications = [
+    activityArg.outcome,
+    activityArg.targetType.replace(/_/g, ' '),
+    activityArg.reasonCode?.replace(/_/g, ' '),
+  ];
+  return classifications.filter(Boolean).join(' · ');
+};
+
+export const getAdminActivityTone = (activityArg: TIdpAdminActivity): string => {
+  switch (activityArg.outcome) {
+    case 'succeeded':
+      return 'var(--idp-ok)';
+    case 'denied':
+      return 'var(--idp-warn)';
+    case 'failed':
+      return 'var(--idp-error)';
+    case 'attempted':
+      return 'var(--idp-info)';
+  }
+};

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

@@ -10,7 +10,17 @@ import './idp-admin-sidebar.js';
 import './idp-admin-overview.js';
 import './idp-sso-connection-form.js';
 import './idp-scim-token-panel.js';
-import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
+import {
+  idpAdminSharedStyles,
+  renderAdminKpi,
+  renderAdminStateCard,
+  formatAdminTimeAgo,
+  formatAdminActivityTitle,
+  formatAdminActivityDetail,
+  getAdminActivityTone,
+  type TIdpAdminActivity,
+  type TIdpAdminKpi,
+} from './idp-admin-shared.js';
 import type { IIdpDelegation, IIdpDelegationApp } from './idp-delegation-section.js';
 import type { IIdpSsoConnectionItem, IIdpSsoSpDetails } from './idp-sso-connection-form.js';
 import type { IIdpScimTokenItem } from './idp-scim-token-panel.js';
@@ -130,7 +140,7 @@ export interface IIdpAdminGaAppConfigureEventDetail {
   redirectUris: string[];
   postLogoutRedirectUris: string[];
   allowedScopes: string[];
-  grantTypes: Array<'authorization_code' | 'client_credentials' | 'refresh_token'>;
+  grantTypes: Array<'authorization_code' | 'refresh_token'>;
   oidcSettings: {
     accessTokenLifetime: number;
     idTokenLifetime: number;
@@ -199,15 +209,6 @@ export interface IIdpAdminSession {
   isCurrent: boolean;
 }
 
-export interface IIdpAdminActivity {
-  id: string;
-  action: string;
-  description: string;
-  timestamp: number;
-  ip?: string;
-  targetType?: string;
-}
-
 export interface IIdpAdminApp {
   id: string;
   name: string;
@@ -1007,7 +1008,7 @@ export class IdpAdminShell extends DeesElement {
   public accessor sessions: IIdpAdminSession[] = [];
 
   @property({ type: Array })
-  public accessor activities: IIdpAdminActivity[] = [];
+  public accessor activities: TIdpAdminActivity[] = [];
 
   @property({ type: Array })
   public accessor orgMembers: IIdpAdminMember[] = [];
@@ -1734,10 +1735,10 @@ export class IdpAdminShell extends DeesElement {
     const postLogoutRedirectUris = this.parseLines(this.dialogPostLogoutRedirectUris);
     const allowedScopes = this.parseCsv(this.dialogAllowedScopes);
     const configuredGrantTypes = this.parseCsv(this.dialogGrantTypes);
-    const supportedGrantTypes = ['authorization_code', 'client_credentials', 'refresh_token'];
+    const supportedGrantTypes = ['authorization_code', 'refresh_token'];
     const invalidGrantTypes = configuredGrantTypes.filter((grantArg) => !supportedGrantTypes.includes(grantArg));
     const grantTypes = configuredGrantTypes
-      .filter((grantArg): grantArg is 'authorization_code' | 'client_credentials' | 'refresh_token' => supportedGrantTypes.includes(grantArg));
+      .filter((grantArg): grantArg is 'authorization_code' | 'refresh_token' => supportedGrantTypes.includes(grantArg));
     const invalidUris = [...redirectUris, ...postLogoutRedirectUris].filter((uriArg) => !this.isValidExactUri(uriArg));
     const lifetimesAreValid = [this.dialogAccessTokenLifetime, this.dialogIdTokenLifetime]
       .every((lifetimeArg) => Number.isInteger(lifetimeArg) && lifetimeArg >= 300 && lifetimeArg <= 86400)
@@ -1764,10 +1765,6 @@ export class IdpAdminShell extends DeesElement {
       this.dialogError = 'The refresh_token grant requires the authorization_code grant.';
       return;
     }
-    if (this.dialogClientType === 'public' && grantTypes.includes('client_credentials')) {
-      this.dialogError = 'Public clients cannot use the client_credentials grant.';
-      return;
-    }
     if (!lifetimesAreValid) {
       this.dialogError = 'Access and ID token lifetimes must be 300 to 86400 seconds; refresh family lifetime must be 3600 to 7776000 seconds.';
       return;
@@ -2034,7 +2031,7 @@ export class IdpAdminShell extends DeesElement {
           ${this.renderFormRow('Callback URIs', 'One exact absolute URI per line; required for authorization_code.', html`<textarea class="textarea" .value=${this.dialogRedirectUris} @input=${(eventArg: Event) => { this.dialogRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
           ${this.renderFormRow('Post-logout URIs', 'One exact RP-Initiated Logout destination per line.', html`<textarea class="textarea" .value=${this.dialogPostLogoutRedirectUris} @input=${(eventArg: Event) => { this.dialogPostLogoutRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
           ${this.renderFormRow('Allowed scopes', 'Comma-separated scopes; authorization_code requires openid.', html`<input class="input" .value=${this.dialogAllowedScopes} @input=${(eventArg: Event) => { this.dialogAllowedScopes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
-          ${this.renderFormRow('Grant types', 'authorization_code, client_credentials, and refresh_token are supported.', html`<input class="input" .value=${this.dialogGrantTypes} @input=${(eventArg: Event) => { this.dialogGrantTypes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+          ${this.renderFormRow('Grant types', 'authorization_code and refresh_token are supported.', html`<input class="input" .value=${this.dialogGrantTypes} @input=${(eventArg: Event) => { this.dialogGrantTypes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
           <div class="mapping-row">
             <div>${this.renderFormRow('Access token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogAccessTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('access', eventArg)} />`, true)}</div>
             <div>${this.renderFormRow('ID token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogIdTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('id', eventArg)} />`, true)}</div>
@@ -2250,10 +2247,10 @@ export class IdpAdminShell extends DeesElement {
               ${this.deleteAccountOpen
                 ? html`
                     ${this.renderFormRow('Confirm your email', 'Type your account email to confirm', html`<input class="input" .value=${this.deleteAccountConfirmEmail} ?disabled=${this.accountDeleting} @input=${(eventArg: Event) => { this.deleteAccountConfirmEmail = (eventArg.target as HTMLInputElement).value; }} />`, true)}
-                    ${this.renderFormRow('Password', 'Required when your account has one', html`<input class="input" type="password" autocomplete="current-password" .value=${this.deleteAccountPassword} ?disabled=${this.accountDeleting} @input=${(eventArg: Event) => { this.deleteAccountPassword = (eventArg.target as HTMLInputElement).value; }} />`)}
+                    ${this.renderFormRow('Password', 'Required. Passwordless account deletion needs a future fresh-auth step-up.', html`<input class="input" type="password" autocomplete="current-password" .value=${this.deleteAccountPassword} ?disabled=${this.accountDeleting} @input=${(eventArg: Event) => { this.deleteAccountPassword = (eventArg.target as HTMLInputElement).value; }} />`)}
                     <div class="split-row" style="justify-content:flex-end;gap:10px;margin-top:14px">
                       <idp-button variant="outline" shape="rect" ?disabled=${this.accountDeleting} @click=${() => { this.deleteAccountOpen = false; this.deleteAccountPassword = ''; this.deleteAccountConfirmEmail = ''; }}>Cancel</idp-button>
-                      <idp-button variant="accent" shape="rect" ?loading=${this.accountDeleting} ?disabled=${this.deleteAccountConfirmEmail.trim().toLowerCase() !== (this.user?.email || '').trim().toLowerCase()} @click=${() => this.dispatchShellEvent<IIdpAdminAccountDeleteEventDetail>('idp-admin-account-delete', { password: this.deleteAccountPassword, confirmEmail: this.deleteAccountConfirmEmail.trim() })}>Delete my account</idp-button>
+                      <idp-button variant="accent" shape="rect" ?loading=${this.accountDeleting} ?disabled=${!this.deleteAccountPassword || this.deleteAccountConfirmEmail.trim().toLowerCase() !== (this.user?.email || '').trim().toLowerCase()} @click=${() => this.dispatchShellEvent<IIdpAdminAccountDeleteEventDetail>('idp-admin-account-delete', { password: this.deleteAccountPassword, confirmEmail: this.deleteAccountConfirmEmail.trim() })}>Delete my account</idp-button>
                     </div>
                   `
                 : html`<div class="split-row"><div><div class="section-title">Delete this account</div><div class="muted">Organisations you own must be transferred or deleted first.</div></div><idp-button variant="outline" shape="rect" @click=${() => { this.deleteAccountOpen = true; }}>Delete account…</idp-button></div>`}
@@ -2426,14 +2423,10 @@ export class IdpAdminShell extends DeesElement {
     const org = this.currentOrg;
     const connectedAppCount = this.orgApps.filter((appArg) => appArg.isConnected).length;
     const orgActivities = this.activities
-      .filter((activityArg) => {
-        const searchableText = `${activityArg.targetType || ''} ${activityArg.description || ''}`.toLowerCase();
-        return Boolean(org.slug && searchableText.includes(org.slug.toLowerCase()))
-          || Boolean(org.name && searchableText.includes(org.name.toLowerCase()))
-          || searchableText.includes('org')
-          || searchableText.includes('organization')
-          || searchableText.includes('organisation');
-      })
+      .filter((activityArg) =>
+        activityArg.targetType === 'organization'
+        || activityArg.targetType.startsWith('organization_')
+      )
       .slice(0, 5);
     const kpis: TIdpAdminKpi[] = [
       {
@@ -2500,10 +2493,10 @@ export class IdpAdminShell extends DeesElement {
             </div>
           </div>
           <div class="card">
-            <div class="card-head"><span class="card-title">Recent organisation activity</span><idp-badge>${orgActivities.length} events</idp-badge></div>
+            <div class="card-head"><span class="card-title">Organisation-classified account activity</span><idp-badge>${orgActivities.length} events</idp-badge></div>
             ${orgActivities.length ? orgActivities.map((activityArg) => html`
-              <div class="feed-item"><span class="feed-dot" style="--dot-color:var(--idp-info)"></span><div class="feed-text"><strong>${activityArg.action.replace(/_/g, ' ')}</strong> - ${activityArg.description}</div><span class="feed-meta">${this.formatTimeAgo(activityArg.timestamp)}</span></div>
-            `) : this.renderStateCard('No org activity yet', 'Organisation-related activity will appear here when the backend reports matching activity events.', 'activity')}
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:${getAdminActivityTone(activityArg)}"></span><div class="feed-text"><strong>${formatAdminActivityTitle(activityArg)}</strong> - ${formatAdminActivityDetail(activityArg)}</div><span class="feed-meta">${this.formatTimeAgo(activityArg.timestamp)}</span></div>
+            `) : this.renderStateCard('No organisation activity yet', 'Account events with an organisation target classification will appear here without exposing target identities.', 'activity')}
           </div>
         </div>
       </div>