@kya-os/consent 0.1.0 → 0.1.2

package/dist/components/mcp-consent.js

@@ -0,0 +1,874 @@
+/**
+ * MCP Consent Composite Web Component
+ *
+ * The main entry point component that orchestrates the full consent flow.
+ * Handles all auth modes, form submission, and state management.
+ *
+ * @module components/mcp-consent
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { AUTH_MODES } from '../types/modes.types.js';
+import { resolveConsentConfig, determineAuthMode } from '../resolution/resolve-config.js';
+// Import component definitions for side effects
+import './consent-shell.js';
+import './consent-button.js';
+import './consent-checkbox.js';
+import './consent-input.js';
+import './consent-permissions.js';
+import './consent-terms.js';
+import './consent-oauth-button.js';
+import './consent-otp-input.js';
+/**
+ * McpConsent - Full consent flow component
+ *
+ * @example
+ * ```html
+ * <mcp-consent
+ *   config='{"branding": {"primaryColor": "#2563eb"}}'
+ *   tool="greet"
+ *   scopes='["read:profile"]'
+ *   agent-did="did:key:z123"
+ *   session-id="sess_123"
+ *   project-id="proj_123"
+ *   server-url="https://example.com"
+ * ></mcp-consent>
+ * ```
+ *
+ * @fires mcp-consent:approve - User approved, delegation created
+ * @fires mcp-consent:deny - User clicked cancel
+ * @fires mcp-consent:error - Submission failed
+ */
+let McpConsent = class McpConsent extends LitElement {
+    constructor() {
+        // === INPUT PROPERTIES (from config) ===
+        super(...arguments);
+        // === CONSENT DATA (hidden form fields) ===
+        /**
+         * Tool being authorized
+         */
+        this.tool = '';
+        /**
+         * Permission scopes requested
+         */
+        this.scopes = [];
+        /**
+         * Agent DID
+         */
+        this.agentDid = '';
+        /**
+         * Session ID
+         */
+        this.sessionId = '';
+        /**
+         * Project ID
+         */
+        this.projectId = '';
+        /**
+         * Server URL for form submission
+         */
+        this.serverUrl = '';
+        /**
+         * Agent name for display
+         */
+        this.agentName = '';
+        this.currentMode = AUTH_MODES.CONSENT_ONLY;
+        this.loading = false;
+        this.step = 'consent';
+        this.termsAccepted = false;
+        this.formData = {};
+        this.resendCooldown = 0;
+        this.selectedScopes = [];
+    }
+    // === LIFECYCLE ===
+    connectedCallback() {
+        super.connectedCallback();
+        this.resolved = resolveConsentConfig(this.config, this.agentName);
+        this.currentMode =
+            this.mode ?? determineAuthMode(this.config) ?? AUTH_MODES.CONSENT_ONLY;
+        // Initialize selected scopes with all requested scopes
+        this.selectedScopes = [...this.scopes];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clean up interval timer to prevent memory leaks
+        if (this.resendCooldownInterval !== undefined) {
+            clearInterval(this.resendCooldownInterval);
+            this.resendCooldownInterval = undefined;
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config') || changedProperties.has('agentName')) {
+            this.resolved = resolveConsentConfig(this.config, this.agentName);
+        }
+        if (changedProperties.has('mode') && this.mode) {
+            this.currentMode = this.mode;
+        }
+        // Update selected scopes when scopes change
+        if (changedProperties.has('scopes')) {
+            this.selectedScopes = [...this.scopes];
+        }
+        // Update CSS variables from resolved config
+        if (this.resolved) {
+            this.style.setProperty('--consent-primary', this.resolved.branding.primaryColor);
+            this.style.setProperty('--consent-secondary', this.resolved.branding.secondaryColor);
+        }
+    }
+    // === FORM SUBMISSION ===
+    async handleApprove(e) {
+        e?.preventDefault();
+        // Guard against duplicate submissions
+        if (this.loading) {
+            return;
+        }
+        if (!this.termsAccepted && this.resolved?.terms.required) {
+            this.error = 'Please accept the terms to continue';
+            return;
+        }
+        if (this.scopes.length > 0 && this.selectedScopes.length === 0) {
+            this.error = 'Please select at least one permission';
+            return;
+        }
+        this.loading = true;
+        this.error = undefined;
+        try {
+            const formData = new FormData();
+            formData.append('tool', this.tool);
+            formData.append('scopes', JSON.stringify(this.selectedScopes));
+            formData.append('agent_did', this.agentDid);
+            formData.append('session_id', this.sessionId);
+            formData.append('project_id', this.projectId);
+            formData.append('auth_mode', this.currentMode);
+            formData.append('provider_type', this.oauthIdentity?.provider ?? 'none');
+            formData.append('termsAccepted', String(this.termsAccepted));
+            // Add custom form data
+            Object.entries(this.formData).forEach(([key, value]) => {
+                formData.append(key, value);
+            });
+            const response = await fetch(`${this.serverUrl}/consent/approve`, {
+                method: 'POST',
+                body: formData,
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.message || 'Approval failed');
+            }
+            const result = await response.json();
+            this.step = 'success';
+            this.dispatchEvent(new CustomEvent('mcp-consent:approve', {
+                detail: { success: true, redirectUrl: result.redirectUrl },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (e) {
+            this.error = e instanceof Error ? e.message : 'Unknown error';
+            this.dispatchEvent(new CustomEvent('mcp-consent:error', {
+                detail: { error: this.error },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleDeny() {
+        this.dispatchEvent(new CustomEvent('mcp-consent:deny', {
+            bubbles: true,
+            composed: true,
+        }));
+        // Try to close the window/tab
+        window.close();
+    }
+    handleTermsChange(e) {
+        this.termsAccepted = e.detail.checked;
+    }
+    handleInputChange(name, value) {
+        this.formData = { ...this.formData, [name]: value };
+    }
+    handleResendOtp() {
+        if (this.resendCooldown > 0) {
+            return;
+        }
+        const cooldownSeconds = this.resolved?.otp?.resendCooldown ?? 60;
+        this.resendCooldown = cooldownSeconds;
+        // Clear any existing interval before starting a new one
+        if (this.resendCooldownInterval !== undefined) {
+            clearInterval(this.resendCooldownInterval);
+        }
+        // Start countdown timer (stored in class property for cleanup)
+        this.resendCooldownInterval = setInterval(() => {
+            this.resendCooldown--;
+            if (this.resendCooldown <= 0) {
+                clearInterval(this.resendCooldownInterval);
+                this.resendCooldownInterval = undefined;
+            }
+        }, 1000);
+        // Dispatch event for parent to handle actual resend
+        this.dispatchEvent(new CustomEvent('mcp-consent:resend-otp', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // === RENDER METHODS ===
+    renderAgentInfo() {
+        const agentDisplay = this.agentName || 'this agent';
+        return html `
+      <div class="agent-info">
+        <div class="agent-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4M12 8h.01" />
+          </svg>
+        </div>
+        <div class="agent-text">
+          <p>
+            <strong>${agentDisplay}</strong> is requesting permission to
+            ${this.tool
+            ? html `use the <strong>${this.tool}</strong> tool`
+            : 'access your data'}
+            on your behalf.
+          </p>
+        </div>
+      </div>
+    `;
+    }
+    handlePermissionsChange(e) {
+        this.selectedScopes = e.detail.selected;
+    }
+    renderPermissions() {
+        if (this.scopes.length === 0)
+            return nothing;
+        return html `
+      <p class="permissions-header">
+        ${this.resolved?.ui.permissionsHeader ??
+            'The agent is requesting the following permissions:'}
+      </p>
+      <div class="permissions">
+        <consent-permissions
+          .scopes=${this.scopes}
+          interactive
+          select-all
+          @change=${this.handlePermissionsChange}
+        ></consent-permissions>
+      </div>
+    `;
+    }
+    renderExpiration() {
+        const days = this.resolved?.expirationDays ?? 7;
+        return html `
+      <p class="expiration">
+        ${this.resolved?.ui.expirationText ?? 'This delegation will expire in'}
+        <strong>${days} ${days === 1 ? 'day' : 'days'}</strong>
+      </p>
+    `;
+    }
+    renderTerms() {
+        if (!this.resolved?.terms)
+            return nothing;
+        return html `
+      <div class="terms">
+        <consent-terms
+          name="termsAccepted"
+          text=${this.resolved.terms.text}
+          url=${this.resolved.terms.url ?? ''}
+          ?required=${this.resolved.terms.required}
+          @change=${this.handleTermsChange}
+        ></consent-terms>
+      </div>
+    `;
+    }
+    renderError() {
+        if (!this.error)
+            return nothing;
+        return html `<div class="error-message">${this.error}</div>`;
+    }
+    renderFooter() {
+        return html `
+      <div slot="footer">
+        <consent-button variant="secondary" @click=${this.handleDeny}>
+          ${this.resolved?.ui.cancelButtonText ?? 'Cancel'}
+        </consent-button>
+        <consent-button
+          variant="primary"
+          ?loading=${this.loading}
+          ?disabled=${this.resolved?.terms.required && !this.termsAccepted}
+          @click=${this.handleApprove}
+        >
+          ${this.resolved?.ui.submitButtonText ?? 'Allow access'}
+        </consent-button>
+      </div>
+    `;
+    }
+    // === MODE-SPECIFIC RENDERS ===
+    renderConsentOnly() {
+        return html `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? 'Permission Request'}
+        company-name=${this.resolved?.branding.companyName ?? ''}
+        logo-url=${this.resolved?.branding.logoUrl ?? ''}
+        primary-color=${this.resolved?.branding.primaryColor ?? '#2563eb'}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? '#dbeafe'}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+          ${this.renderPermissions()} ${this.renderExpiration()}
+          ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderCredentials() {
+        const creds = this.resolved?.credentials;
+        return html `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? 'Sign In'}
+        company-name=${this.resolved?.branding.companyName ?? ''}
+        logo-url=${this.resolved?.branding.logoUrl ?? ''}
+        primary-color=${this.resolved?.branding.primaryColor ?? '#2563eb'}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? '#dbeafe'}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <div class="form-fields">
+            <consent-input
+              type="text"
+              name="username"
+              label=${creds?.usernameLabel ?? 'Username'}
+              placeholder=${creds?.usernamePlaceholder ?? 'Enter your username'}
+              autocomplete="username"
+              required
+              @input=${(e) => this.handleInputChange('username', e.detail.value)}
+            ></consent-input>
+
+            <consent-input
+              type="password"
+              name="password"
+              label=${creds?.passwordLabel ?? 'Password'}
+              placeholder=${creds?.passwordPlaceholder ?? 'Enter your password'}
+              autocomplete="current-password"
+              required
+              @input=${(e) => this.handleInputChange('password', e.detail.value)}
+            ></consent-input>
+          </div>
+
+          ${creds?.showForgotPassword && creds.forgotPasswordUrl
+            ? html `
+                <p style="text-align: right; margin-bottom: 1rem;">
+                  <a
+                    href=${creds.forgotPasswordUrl}
+                    style="font-size: 0.75rem; color: var(--_primary);"
+                  >
+                    Forgot password?
+                  </a>
+                </p>
+              `
+            : nothing}
+          ${this.renderPermissions()} ${this.renderExpiration()}
+          ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderOAuth() {
+        const oauth = this.resolved?.oauth;
+        const provider = oauth?.providerId ?? 'oauth';
+        const providerName = oauth?.providerName ?? 'OAuth Provider';
+        return html `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? 'Sign In'}
+        company-name=${this.resolved?.branding.companyName ?? ''}
+        logo-url=${this.resolved?.branding.logoUrl ?? ''}
+        primary-color=${this.resolved?.branding.primaryColor ?? '#2563eb'}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? '#dbeafe'}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <consent-oauth-button
+            provider=${provider}
+            provider-name=${providerName}
+            url=${`${this.serverUrl}/oauth/${encodeURIComponent(provider)}?session_id=${encodeURIComponent(this.sessionId)}`}
+            button-text=${oauth?.buttonText ?? `Continue with ${providerName}`}
+            full-width
+          ></consent-oauth-button>
+
+          ${this.renderPermissions()}
+
+          <div class="divider">or</div>
+
+          ${this.renderExpiration()} ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderMagicLink() {
+        const ml = this.resolved?.magicLink;
+        return html `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? 'Sign In'}
+        company-name=${this.resolved?.branding.companyName ?? ''}
+        logo-url=${this.resolved?.branding.logoUrl ?? ''}
+        primary-color=${this.resolved?.branding.primaryColor ?? '#2563eb'}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? '#dbeafe'}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <div class="form-fields">
+            <consent-input
+              type="email"
+              name="email"
+              label=${ml?.emailLabel ?? 'Email'}
+              placeholder=${ml?.emailPlaceholder ?? 'Enter your email address'}
+              autocomplete="email"
+              required
+              @input=${(e) => this.handleInputChange('email', e.detail.value)}
+            ></consent-input>
+          </div>
+
+          ${this.renderPermissions()} ${this.renderExpiration()}
+          ${this.renderTerms()}
+        </div>
+
+        <div slot="footer">
+          <consent-button variant="secondary" @click=${this.handleDeny}>
+            Cancel
+          </consent-button>
+          <consent-button
+            variant="primary"
+            ?loading=${this.loading}
+            ?disabled=${this.resolved?.terms.required && !this.termsAccepted}
+            @click=${this.handleApprove}
+          >
+            ${ml?.buttonText ?? 'Send magic link'}
+          </consent-button>
+        </div>
+      </consent-shell>
+    `;
+    }
+    renderOTP() {
+        const otp = this.resolved?.otp;
+        return html `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? 'Verify Code'}
+        company-name=${this.resolved?.branding.companyName ?? ''}
+        logo-url=${this.resolved?.branding.logoUrl ?? ''}
+        primary-color=${this.resolved?.branding.primaryColor ?? '#2563eb'}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? '#dbeafe'}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <div class="otp-section">
+            <p class="otp-instructions">
+              ${otp?.instructions ?? 'Enter the verification code sent to your device'}
+            </p>
+            <consent-otp-input
+              length=${otp?.digits ?? 6}
+              name="otp"
+              auto-focus
+              @complete=${(e) => {
+            this.handleInputChange('otp', e.detail.value);
+            this.handleApprove();
+        }}
+              @input=${(e) => this.handleInputChange('otp', e.detail.value)}
+            ></consent-otp-input>
+            <div class="otp-resend">
+              Didn't receive the code?
+              <button
+                type="button"
+                ?disabled=${this.resendCooldown > 0}
+                @click=${this.handleResendOtp}
+              >
+                ${this.resendCooldown > 0
+            ? `Resend in ${this.resendCooldown}s`
+            : 'Resend'}
+              </button>
+            </div>
+          </div>
+
+          ${this.renderPermissions()} ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderSuccess() {
+        const success = this.resolved?.success;
+        return html `
+      <consent-shell
+        page-title=${success?.title ?? 'Access Granted'}
+        company-name=${this.resolved?.branding.companyName ?? ''}
+        logo-url=${this.resolved?.branding.logoUrl ?? ''}
+        primary-color=${this.resolved?.branding.primaryColor ?? '#2563eb'}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? '#dbeafe'}
+      >
+        <div slot="content">
+          <div class="success-view">
+            <div class="success-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+            <h2 class="success-title">${success?.title ?? 'Access Granted'}</h2>
+            <p class="success-description">
+              ${success?.description ??
+            'You have successfully granted access. You can now close this window.'}
+            </p>
+          </div>
+        </div>
+
+        <div slot="footer">
+          <consent-button
+            variant="primary"
+            full-width
+            @click=${() => window.close()}
+          >
+            ${success?.continueButtonText ?? 'Close'}
+          </consent-button>
+        </div>
+      </consent-shell>
+    `;
+    }
+    // === MAIN RENDER ===
+    render() {
+        if (this.step === 'success') {
+            return this.renderSuccess();
+        }
+        switch (this.currentMode) {
+            case AUTH_MODES.CREDENTIALS:
+                return this.renderCredentials();
+            case AUTH_MODES.OAUTH:
+                return this.renderOAuth();
+            case AUTH_MODES.MAGIC_LINK:
+                return this.renderMagicLink();
+            case AUTH_MODES.OTP:
+                return this.renderOTP();
+            case AUTH_MODES.CONSENT_ONLY:
+            default:
+                return this.renderConsentOnly();
+        }
+    }
+};
+McpConsent.styles = css `
+    :host {
+      display: block;
+      /* System font stack with font smoothing for crisp text */
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      --_primary: var(--consent-primary, #2563eb);
+      --_secondary: var(--consent-secondary, #dbeafe);
+    }
+
+    /* Agent info box */
+    .agent-info {
+      display: flex;
+      gap: 1rem;
+      padding: 1rem;
+      background: #f9fafb;
+      border-radius: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .agent-icon {
+      width: 40px;
+      height: 40px;
+      background: var(--_secondary);
+      border-radius: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .agent-icon svg {
+      width: 20px;
+      height: 20px;
+      color: var(--_primary);
+    }
+
+    .agent-text {
+      flex: 1;
+    }
+
+    .agent-text p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: #374151;
+      line-height: 1.5;
+    }
+
+    .agent-text strong {
+      color: #111827;
+    }
+
+    /* Permissions section */
+    .permissions-header {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin-bottom: 0.5rem;
+    }
+
+    .permissions {
+      margin-bottom: 1rem;
+    }
+
+    /* Expiration */
+    .expiration {
+      font-size: 0.75rem;
+      color: #6b7280;
+      margin-top: 1rem;
+    }
+
+    .expiration strong {
+      color: #374151;
+    }
+
+    /* Terms */
+    .terms {
+      margin-top: 1.5rem;
+    }
+
+    /* Error message */
+    .error-message {
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 0.5rem;
+      padding: 0.75rem 1rem;
+      margin-bottom: 1rem;
+      color: #dc2626;
+      font-size: 0.875rem;
+    }
+
+    /* Form fields */
+    .form-fields {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    /* Divider */
+    .divider {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin: 1.5rem 0;
+      color: #6b7280;
+      font-size: 0.75rem;
+    }
+
+    .divider::before,
+    .divider::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: #e5e7eb;
+    }
+
+    /* Success view */
+    .success-view {
+      text-align: center;
+      padding: 2rem 0;
+    }
+
+    .success-icon {
+      width: 64px;
+      height: 64px;
+      background: #d1fae5;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 1.5rem;
+    }
+
+    .success-icon svg {
+      width: 32px;
+      height: 32px;
+      color: #059669;
+    }
+
+    .success-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #111827;
+      margin: 0 0 0.5rem;
+    }
+
+    .success-description {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin: 0 0 1.5rem;
+    }
+
+    /* OTP section */
+    .otp-section {
+      text-align: center;
+      margin-bottom: 1.5rem;
+    }
+
+    .otp-instructions {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin-bottom: 1rem;
+    }
+
+    .otp-resend {
+      margin-top: 1rem;
+      font-size: 0.75rem;
+    }
+
+    .otp-resend button {
+      background: none;
+      border: none;
+      color: var(--_primary);
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    .otp-resend button:disabled {
+      color: #9ca3af;
+      cursor: not-allowed;
+    }
+  `;
+__decorate([
+    property({
+        type: Object,
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return undefined;
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return undefined;
+                }
+            },
+            toAttribute: (value) => {
+                return value ? JSON.stringify(value) : '';
+            },
+        },
+    })
+], McpConsent.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], McpConsent.prototype, "mode", void 0);
+__decorate([
+    property({ type: String })
+], McpConsent.prototype, "tool", void 0);
+__decorate([
+    property({
+        type: Array,
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return [];
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return [];
+                }
+            },
+            toAttribute: (value) => {
+                return JSON.stringify(value);
+            },
+        },
+    })
+], McpConsent.prototype, "scopes", void 0);
+__decorate([
+    property({ type: String, attribute: 'agent-did' })
+], McpConsent.prototype, "agentDid", void 0);
+__decorate([
+    property({ type: String, attribute: 'session-id' })
+], McpConsent.prototype, "sessionId", void 0);
+__decorate([
+    property({ type: String, attribute: 'project-id' })
+], McpConsent.prototype, "projectId", void 0);
+__decorate([
+    property({ type: String, attribute: 'server-url' })
+], McpConsent.prototype, "serverUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'agent-name' })
+], McpConsent.prototype, "agentName", void 0);
+__decorate([
+    property({
+        type: Object,
+        attribute: 'oauth-identity',
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return undefined;
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return undefined;
+                }
+            },
+            toAttribute: (value) => {
+                return value ? JSON.stringify(value) : '';
+            },
+        },
+    })
+], McpConsent.prototype, "oauthIdentity", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "resolved", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "currentMode", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "loading", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "error", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "step", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "termsAccepted", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "formData", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "resendCooldown", void 0);
+__decorate([
+    state()
+], McpConsent.prototype, "selectedScopes", void 0);
+McpConsent = __decorate([
+    customElement('mcp-consent')
+], McpConsent);
+export { McpConsent };
+//# sourceMappingURL=mcp-consent.js.map