@idp.global/catalog 2.0.0 → 2.1.0

package/ts_web/elements/idp-delegation-section.ts

@@ -0,0 +1,576 @@
+import { DeesElement, html, property, state, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-avatar.js';
+import './idp-button.js';
+import './idp-icon.js';
+
+export interface IIdpDelegationPermission {
+  id: string;
+  label: string;
+  hint: string;
+}
+
+export interface IIdpDelegationApp {
+  id: string;
+  name: string;
+  perms: IIdpDelegationPermission[];
+}
+
+export interface IIdpDelegation {
+  id: string;
+  account: {
+    name: string;
+    email: string;
+  };
+  grants: Record<string, string[]>;
+  expiresAt: number | null;
+  createdAt: number;
+}
+
+export interface IIdpDelegationGrantEventDetail {
+  email: string;
+  grants: Record<string, string[]>;
+  expiryDays: number | null;
+}
+
+export interface IIdpDelegationRevokeEventDetail {
+  delegationId: string;
+}
+
+const demoApps: IIdpDelegationApp[] = [
+  {
+    id: 'foss',
+    name: 'foss.global',
+    perms: [
+      { id: 'projects:read', label: 'View projects', hint: 'Read-only access to your projects' },
+      { id: 'projects:write', label: 'Manage projects', hint: 'Create, edit and archive projects' },
+      { id: 'billing:read', label: 'View billing', hint: 'See invoices and payment history' },
+    ],
+  },
+  {
+    id: 'task',
+    name: 'task.vc',
+    perms: [
+      { id: 'tasks:read', label: 'View tasks', hint: 'See your tasks and boards' },
+      { id: 'tasks:write', label: 'Act on tasks', hint: 'Create, assign and complete tasks as you' },
+    ],
+  },
+];
+
+const demoDelegations: IIdpDelegation[] = [
+  {
+    id: 'd1',
+    account: { name: 'Jordan Kim', email: 'jordan@lossless.com' },
+    grants: { task: ['tasks:read', 'tasks:write'] },
+    expiresAt: Date.now() + 86400000 * 24,
+    createdAt: Date.now() - 86400000 * 6,
+  },
+  {
+    id: 'd2',
+    account: { name: 'Sam Rivera', email: 'sam@lossless.com' },
+    grants: { foss: ['billing:read'] },
+    expiresAt: null,
+    createdAt: Date.now() - 86400000 * 40,
+  },
+];
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-delegation-section': IdpDelegationSection;
+  }
+}
+
+@customElement('idp-delegation-section')
+export class IdpDelegationSection extends DeesElement {
+  public static demo = () => html`
+    <div style="max-width: 640px;">
+      <idp-delegation-section .apps=${demoApps} .delegations=${demoDelegations}></idp-delegation-section>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 composed surfaces'];
+
+  @property({ type: Array })
+  public accessor apps: IIdpDelegationApp[] = [];
+
+  @property({ type: Array })
+  public accessor delegations: IIdpDelegation[] = [];
+
+  @state()
+  private accessor grantOpen = false;
+
+  @state()
+  private accessor grantEmail = '';
+
+  @state()
+  private accessor grantSelections: Record<string, string[]> = {};
+
+  @state()
+  private accessor grantExpiry = '30';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+        color: var(--idp-fg);
+      }
+      .section {
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius);
+        padding: 20px;
+      }
+      .headline {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 16px;
+      }
+      .title {
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .muted {
+        font-size: 12.5px;
+        color: var(--idp-muted-fg);
+        line-height: 1.5;
+        margin-top: 3px;
+      }
+      .row {
+        padding: 12px 0;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .row:last-of-type {
+        border-bottom: none;
+      }
+      .row-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .row-name {
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .row-email {
+        font-size: 11px;
+        color: var(--idp-muted-fg);
+      }
+      .row-expiry {
+        font-size: 11px;
+        color: var(--idp-muted-fg);
+        white-space: nowrap;
+      }
+      .revoke {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--idp-destructive);
+        padding: 4px 8px;
+        border-radius: 6px;
+      }
+      .revoke:hover {
+        background: var(--idp-error-bg);
+      }
+      .grant-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin: 8px 0 0 40px;
+      }
+      .grant-chip {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        border: 1px solid var(--idp-border);
+        border-radius: 7px;
+        padding: 3px 8px 3px 4px;
+        background: var(--idp-muted);
+      }
+      .grant-chip-tile {
+        width: 18px;
+        height: 18px;
+        border-radius: 4px;
+        background: var(--idp-accent-soft);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 8px;
+        font-weight: 700;
+        color: var(--idp-accent);
+        flex-shrink: 0;
+      }
+      .grant-chip-name {
+        font-size: 11px;
+        font-weight: 500;
+      }
+      .grant-chip-perms {
+        font-size: 10.5px;
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+      }
+      .empty {
+        font-size: 12.5px;
+        color: var(--idp-muted-fg);
+        padding: 4px 0;
+      }
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9990;
+      }
+      .modal {
+        width: 460px;
+        max-width: calc(100vw - 32px);
+        max-height: calc(100vh - 80px);
+        overflow: auto;
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+      }
+      .modal-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 20px;
+        border-bottom: 1px solid var(--idp-border);
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .modal-close {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--idp-muted-fg);
+        display: flex;
+        padding: 2px;
+      }
+      .modal-body {
+        padding: 20px;
+      }
+      .field-label {
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+      .field-label .req {
+        color: var(--idp-destructive);
+      }
+      input[type='email'] {
+        width: 100%;
+        height: 34px;
+        box-sizing: border-box;
+        padding: 0 10px;
+        font-size: 13px;
+        font-family: inherit;
+        color: var(--idp-fg);
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        outline: none;
+      }
+      input[type='email']:focus {
+        border-color: var(--idp-accent);
+      }
+      .apps-box {
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        overflow: hidden;
+        margin-bottom: 14px;
+      }
+      .app-row {
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .app-row:last-child {
+        border-bottom: none;
+      }
+      .app-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        cursor: pointer;
+      }
+      .app-head.enabled {
+        background: var(--idp-muted);
+      }
+      .app-tile {
+        width: 22px;
+        height: 22px;
+        border-radius: 6px;
+        background: var(--idp-accent-soft);
+        border: 1px solid var(--idp-border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 9px;
+        font-weight: 700;
+        color: var(--idp-accent);
+        flex-shrink: 0;
+      }
+      .app-name {
+        flex: 1;
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .app-count {
+        font-size: 10.5px;
+        color: var(--idp-muted-fg);
+      }
+      .perm-list {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: 2px 12px 10px 36px;
+      }
+      .perm-row {
+        display: flex;
+        align-items: flex-start;
+        gap: 9px;
+        padding: 5px 0;
+        cursor: pointer;
+      }
+      .perm-label {
+        font-size: 12.5px;
+      }
+      .perm-hint {
+        display: block;
+        font-size: 11px;
+        color: var(--idp-muted-fg);
+      }
+      .perm-id {
+        font-size: 10px;
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+        margin-top: 2px;
+      }
+      input[type='checkbox'] {
+        accent-color: var(--idp-accent);
+        margin: 2px 0 0;
+        cursor: pointer;
+      }
+      .modal-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+        margin-top: 18px;
+      }
+      .expiry-select {
+        width: 100%;
+        height: 34px;
+        padding: 0 10px;
+        font-size: 13px;
+        font-family: inherit;
+        color: var(--idp-fg);
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        outline: none;
+        cursor: pointer;
+      }
+    `,
+  ];
+
+  private expiryLabel(expiresAtArg: number | null): string {
+    if (!expiresAtArg) {
+      return 'Until revoked';
+    }
+    const days = Math.max(0, Math.round((expiresAtArg - Date.now()) / 86400000));
+    return days === 0 ? 'Expires today' : `Expires in ${days}d`;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <section class="section">
+        <div class="headline">
+          <div>
+            <div class="title">Delegated access</div>
+            <div class="muted">Let other idp.global accounts act on your behalf — scoped to specific apps and app-specific permissions.</div>
+          </div>
+          <idp-button variant="outline" size="sm" @click=${() => this.openGrant()}>Delegate access</idp-button>
+        </div>
+        ${this.delegations.length
+          ? this.delegations.map((delegationArg) => this.renderDelegationRow(delegationArg))
+          : html`<div class="empty">No delegations yet. Access you grant here can be revoked at any time.</div>`}
+      </section>
+      ${this.grantOpen ? this.renderGrantModal() : html``}
+    `;
+  }
+
+  private renderDelegationRow(delegationArg: IIdpDelegation): TemplateResult {
+    const grantedApps = Object.keys(delegationArg.grants);
+    return html`
+      <div class="row">
+        <div class="row-head">
+          <idp-avatar name=${delegationArg.account.name} size="30"></idp-avatar>
+          <div style="flex:1;min-width:0">
+            <div class="row-name">${delegationArg.account.name}</div>
+            <div class="row-email">${delegationArg.account.email}</div>
+          </div>
+          <span class="row-expiry">${this.expiryLabel(delegationArg.expiresAt)}</span>
+          <button class="revoke" @click=${() => this.revoke(delegationArg.id)}>Revoke</button>
+        </div>
+        <div class="grant-chips">
+          ${grantedApps.map((appIdArg) => {
+            const app = this.apps.find((appArg) => appArg.id === appIdArg);
+            if (!app) {
+              return html``;
+            }
+            return html`
+              <span class="grant-chip">
+                <span class="grant-chip-tile">${app.name.slice(0, 2).toUpperCase()}</span>
+                <span class="grant-chip-name">${app.name}</span>
+                <span class="grant-chip-perms">${delegationArg.grants[appIdArg].join(' · ')}</span>
+              </span>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderGrantModal(): TemplateResult {
+    const valid = /.+@.+\..+/.test(this.grantEmail)
+      && Object.values(this.grantSelections).some((permsArg) => permsArg.length > 0);
+    return html`
+      <div class="backdrop" @click=${(eventArg: Event) => { if (eventArg.target === eventArg.currentTarget) this.closeGrant(); }}>
+        <div class="modal">
+          <div class="modal-head">
+            <span>Delegate access</span>
+            <button class="modal-close" @click=${() => this.closeGrant()}><idp-icon name="x" size="16"></idp-icon></button>
+          </div>
+          <div class="modal-body">
+            <div class="muted" style="margin: 0 0 14px;">
+              The delegate signs in with their own idp.global account and can act on your behalf — only in the apps and permissions you pick here. They never see your credentials.
+            </div>
+            <div style="margin-bottom: 14px;">
+              <div class="field-label">Account email <span class="req">*</span></div>
+              <input
+                type="email"
+                placeholder="colleague@company.com"
+                .value=${this.grantEmail}
+                @input=${(eventArg: Event) => { this.grantEmail = (eventArg.target as HTMLInputElement).value; }}
+              />
+            </div>
+            <div class="field-label">Apps &amp; permissions <span class="req">*</span></div>
+            <div class="apps-box">
+              ${this.apps.map((appArg) => this.renderGrantAppRow(appArg))}
+            </div>
+            <div style="margin-bottom: 18px;">
+              <div class="field-label">Access expires</div>
+              <select class="expiry-select" .value=${this.grantExpiry} @change=${(eventArg: Event) => { this.grantExpiry = (eventArg.target as HTMLSelectElement).value; }}>
+                <option value="7">7 days</option>
+                <option value="30">30 days</option>
+                <option value="90">90 days</option>
+                <option value="">Until revoked</option>
+              </select>
+            </div>
+            <div class="modal-actions">
+              <idp-button variant="outline" size="sm" @click=${() => this.closeGrant()}>Cancel</idp-button>
+              <idp-button variant="accent" size="sm" ?disabled=${!valid} @click=${() => this.submitGrant()}>Grant access</idp-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderGrantAppRow(appArg: IIdpDelegationApp): TemplateResult {
+    const enabled = !!this.grantSelections[appArg.id];
+    const selected = this.grantSelections[appArg.id] || [];
+    return html`
+      <div class="app-row">
+        <label class="app-head ${enabled ? 'enabled' : ''}">
+          <input type="checkbox" .checked=${enabled} @change=${() => this.toggleGrantApp(appArg.id)} />
+          <span class="app-tile">${appArg.name.slice(0, 2).toUpperCase()}</span>
+          <span class="app-name">${appArg.name}</span>
+          ${enabled ? html`<span class="app-count">${selected.length} of ${appArg.perms.length} permissions</span>` : html``}
+        </label>
+        ${enabled
+          ? html`
+              <div class="perm-list">
+                ${appArg.perms.map(
+                  (permArg) => html`
+                    <label class="perm-row">
+                      <input
+                        type="checkbox"
+                        .checked=${selected.includes(permArg.id)}
+                        @change=${() => this.toggleGrantPerm(appArg.id, permArg.id)}
+                      />
+                      <span style="flex:1">
+                        <span class="perm-label">${permArg.label}</span>
+                        <span class="perm-hint">${permArg.hint}</span>
+                      </span>
+                      <code class="perm-id">${permArg.id}</code>
+                    </label>
+                  `
+                )}
+              </div>
+            `
+          : html``}
+      </div>
+    `;
+  }
+
+  private openGrant() {
+    this.grantEmail = '';
+    this.grantSelections = {};
+    this.grantExpiry = '30';
+    this.grantOpen = true;
+  }
+
+  private closeGrant() {
+    this.grantOpen = false;
+  }
+
+  private toggleGrantApp(appIdArg: string) {
+    const next = { ...this.grantSelections };
+    if (next[appIdArg]) {
+      delete next[appIdArg];
+    } else {
+      next[appIdArg] = [];
+    }
+    this.grantSelections = next;
+  }
+
+  private toggleGrantPerm(appIdArg: string, permIdArg: string) {
+    const current = this.grantSelections[appIdArg] || [];
+    this.grantSelections = {
+      ...this.grantSelections,
+      [appIdArg]: current.includes(permIdArg)
+        ? current.filter((permArg) => permArg !== permIdArg)
+        : [...current, permIdArg],
+    };
+  }
+
+  private submitGrant() {
+    const grants: Record<string, string[]> = {};
+    for (const [appId, perms] of Object.entries(this.grantSelections)) {
+      if (perms.length) {
+        grants[appId] = perms;
+      }
+    }
+    const detail: IIdpDelegationGrantEventDetail = {
+      email: this.grantEmail,
+      grants,
+      expiryDays: this.grantExpiry ? parseInt(this.grantExpiry, 10) : null,
+    };
+    this.dispatchEvent(new CustomEvent('idp-delegation-grant', { detail, bubbles: true, composed: true }));
+    this.closeGrant();
+  }
+
+  private revoke(delegationIdArg: string) {
+    const detail: IIdpDelegationRevokeEventDetail = { delegationId: delegationIdArg };
+    this.dispatchEvent(new CustomEvent('idp-delegation-revoke', { detail, bubbles: true, composed: true }));
+  }
+}

package/ts_web/elements/idp-form-submit.ts

@@ -1,7 +1,7 @@
 import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
 import './idp-button.js';
-import type { TIdpButtonSize, TIdpButtonVariant } from './idp-button.js';
+import type { TIdpButtonShape, TIdpButtonSize, TIdpButtonVariant } from './idp-button.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,6 +23,9 @@ export class IdpFormSubmit extends DeesElement {
   @property({ type: String })
   public accessor size: TIdpButtonSize = 'md';
 
+  @property({ type: String })
+  public accessor shape: TIdpButtonShape = 'pill';
+
   @property({ type: Boolean, reflect: true })
   public accessor disabled = false;
 
@@ -56,6 +59,7 @@ export class IdpFormSubmit extends DeesElement {
       <idp-button
         variant=${this.variant}
         size=${this.size}
+        shape=${this.shape}
         .disabled=${this.disabled || this.loading}
         .loading=${this.loading}
         @click=${this.handleClick}

package/ts_web/elements/idp-form.ts

@@ -96,7 +96,7 @@ export class IdpForm extends DeesElement {
   }
 
   private getControls() {
-    return Array.from(this.querySelectorAll('idp-input, idp-checkbox')) as TFormControl[];
+    return Array.from(this.querySelectorAll('idp-input, idp-checkbox, idp-otp-input')) as TFormControl[];
   }
 
   private validateControls() {