@kya-os/consent 0.1.37 → 0.1.39

package/dist/components/consent-capability-card.js

@@ -0,0 +1,337 @@
+/**
+ * Consent Capability Card
+ *
+ * Renders a single capability row in the new humanized consent layout.
+ * Shows: square checkbox + icon tile + bold label inline with description +
+ * optional amber HIGHER RISK chip + small "View policy" disclosure.
+ *
+ * Emits a `capability-toggle` CustomEvent with `{ id, checked }` whenever the
+ * checkbox state changes; the parent (`<mcp-consent>`) tracks selection.
+ *
+ * @module components/consent-capability-card
+ */
+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 { CONSENT_COPY_TOKENS } from "../copy/tokens.js";
+import { explainCedarFragment } from "../cedar/explain.js";
+let ConsentCapabilityCard = class ConsentCapabilityCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.capabilityId = "";
+        this.label = "";
+        this.description = "";
+        this.icon = "neutral";
+        this.riskLevel = "low";
+        this.checked = false;
+        this.compiledCedar = "";
+        this.policyOpen = false;
+    }
+    toggleChecked() {
+        this.checked = !this.checked;
+        const detail = {
+            id: this.capabilityId,
+            checked: this.checked,
+        };
+        this.dispatchEvent(new CustomEvent("capability-toggle", {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    togglePolicy() {
+        this.policyOpen = !this.policyOpen;
+    }
+    isHigherRisk() {
+        return this.riskLevel === "high" || this.riskLevel === "critical";
+    }
+    renderIcon() {
+        return iconSvgFor(this.icon);
+    }
+    renderPolicy() {
+        if (!this.policyOpen)
+            return nothing;
+        if (!this.compiledCedar)
+            return nothing;
+        const explanation = explainCedarFragment(this.compiledCedar);
+        const tokens = CONSENT_COPY_TOKENS.capabilityRow;
+        return html `
+      <div class="policy-disclosure" part="policy">
+        <h4>${tokens.glossTitle}</h4>
+        <ul>
+          ${explanation.actions.length === 0
+            ? html `<li>—</li>`
+            : explanation.actions.map((action) => html `<li><code>${action}</code></li>`)}
+        </ul>
+        ${explanation.resource
+            ? html `<p>
+              On <code>${explanation.resource}</code>
+            </p>`
+            : html `<p>On ${tokens.glossUnknownResource}</p>`}
+        <h4>${tokens.rawPolicyTitle}</h4>
+        <pre><code>${this.compiledCedar}</code></pre>
+      </div>
+    `;
+    }
+    render() {
+        const tokens = CONSENT_COPY_TOKENS.capabilityRow;
+        return html `
+      <div class="row" part="row">
+        <button
+          class="checkbox"
+          part="checkbox"
+          role="checkbox"
+          aria-checked="${String(this.checked)}"
+          aria-label="${this.label}"
+          @click=${this.toggleChecked}
+          type="button"
+        >
+          ${this.checked ? html `<span class="check-mark">✓</span>` : nothing}
+        </button>
+        <div class="icon-tile" aria-hidden="true">${this.renderIcon()}</div>
+        <div class="body">
+          <div class="row-label">
+            <span><strong>${this.label}</strong> <span class="description">${this.description}</span></span>
+            ${this.isHigherRisk()
+            ? html `<span class="risk-chip">${tokens.higherRiskChip}</span>`
+            : nothing}
+          </div>
+          <button
+            class="policy-toggle"
+            type="button"
+            @click=${this.togglePolicy}
+            aria-expanded="${String(this.policyOpen)}"
+          >
+            ${tokens.viewPolicyLink}
+          </button>
+          ${this.renderPolicy()}
+        </div>
+      </div>
+    `;
+    }
+};
+ConsentCapabilityCard.styles = css `
+    :host {
+      display: block;
+      border-bottom: 1px solid var(--cs-surface-border, rgba(15, 23, 42, 0.08));
+    }
+
+    :host(:last-of-type) {
+      border-bottom: none;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 22px 36px 1fr;
+      gap: 14px;
+      padding: 16px 0;
+      align-items: flex-start;
+    }
+
+    .checkbox {
+      width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      border: 1.5px solid var(--cs-text-secondary, #334155);
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      transition: background 0.12s ease, border-color 0.12s ease;
+    }
+
+    .checkbox[aria-checked="true"] {
+      background: var(--cs-surface-accent, #0F172A);
+      border-color: var(--cs-surface-accent, #0F172A);
+    }
+
+    .checkbox:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 2px;
+    }
+
+    .check-mark {
+      color: var(--cs-surface-accent-text, #fff);
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .icon-tile {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    .icon-tile svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .row-label {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      font-size: 14.5px;
+      color: var(--cs-text-primary, #0F172A);
+      line-height: 1.45;
+    }
+
+    .row-label strong {
+      font-weight: 600;
+    }
+
+    .description {
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    .risk-chip {
+      display: inline-flex;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 10.5px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      background: var(--cs-chip-risk-bg, #FCE7B6);
+      color: var(--cs-chip-risk-text, #7A4F00);
+    }
+
+    .policy-toggle {
+      align-self: flex-start;
+      background: none;
+      border: none;
+      padding: 0;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--cs-text-tertiary, #64748B);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      cursor: pointer;
+    }
+
+    .policy-toggle:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 2px;
+    }
+
+    .policy-disclosure {
+      margin-top: 8px;
+      border-radius: 10px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      padding: 10px 12px;
+      font-size: 12px;
+      color: var(--cs-text-secondary, #334155);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .policy-disclosure h4 {
+      margin: 0;
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--cs-text-tertiary, #64748B);
+    }
+
+    .policy-disclosure pre {
+      margin: 0;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11.5px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: var(--cs-text-primary, #0F172A);
+    }
+
+    .policy-disclosure ul {
+      margin: 0;
+      padding-left: 18px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], ConsentCapabilityCard.prototype, "capabilityId", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilityCard.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilityCard.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilityCard.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilityCard.prototype, "riskLevel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ConsentCapabilityCard.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, attribute: "compiled-cedar" })
+], ConsentCapabilityCard.prototype, "compiledCedar", void 0);
+__decorate([
+    state()
+], ConsentCapabilityCard.prototype, "policyOpen", void 0);
+ConsentCapabilityCard = __decorate([
+    customElement("consent-capability-card")
+], ConsentCapabilityCard);
+export { ConsentCapabilityCard };
+/**
+ * Inline SVG icons for the recognized capability icons. Kept inline to avoid
+ * an asset-loading hop in shadow DOM.
+ */
+function iconSvgFor(icon) {
+    switch (icon) {
+        case "search":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5.25"/><path d="m13.25 13.25 3.5 3.5"/></svg>`;
+        case "cart":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h2l1.4 9.4a1.5 1.5 0 0 0 1.5 1.3h7.6a1.5 1.5 0 0 0 1.5-1.2L18 6H6"/><circle cx="9" cy="17" r="1.2"/><circle cx="15" cy="17" r="1.2"/></svg>`;
+        case "card":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="15" height="11" rx="2"/><path d="M2.5 9h15"/><path d="M5.5 13h3"/></svg>`;
+        case "pin":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17s-5.5-5-5.5-9a5.5 5.5 0 1 1 11 0c0 4-5.5 9-5.5 9z"/><circle cx="10" cy="8" r="2"/></svg>`;
+        case "pin-new":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17s-5.5-5-5.5-9a5.5 5.5 0 1 1 11 0c0 4-5.5 9-5.5 9z"/><path d="M10 6v4"/><path d="M8 8h4"/></svg>`;
+        case "shield":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.5 4 5v5.5C4 14 6.5 16.5 10 17.5c3.5-1 6-3.5 6-7V5z"/></svg>`;
+        case "key":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="13" r="3.25"/><path d="m9.5 11 6.5-6.5"/><path d="m13.5 7 2 2"/></svg>`;
+        case "tools":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m4 4 6 6"/><path d="m10 4 6 6"/><path d="m4 16 12-12"/></svg>`;
+        case "user":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3"/><path d="M3 17a7 7 0 0 1 14 0"/></svg>`;
+        case "calendar":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="14" height="13" rx="2"/><path d="M3 8h14"/><path d="M7 2v4M13 2v4"/></svg>`;
+        case "lock":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="12" height="8" rx="2"/><path d="M7 9V6a3 3 0 0 1 6 0v3"/></svg>`;
+        case "eye":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10s3-6 8-6 8 6 8 6-3 6-8 6-8-6-8-6z"/><circle cx="10" cy="10" r="2.25"/></svg>`;
+        case "send":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m17 3-7 7-2 7-3-9z"/></svg>`;
+        case "package":
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m10 2 7 4v8l-7 4-7-4V6z"/><path d="m3 6 7 4 7-4"/><path d="M10 18V10"/></svg>`;
+        default:
+            return html `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="5"/></svg>`;
+    }
+}
+//# sourceMappingURL=consent-capability-card.js.map

package/dist/components/consent-capability-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-capability-card.js","sourceRoot":"","sources":["../../src/components/consent-capability-card.ts"],"names":[],"mappings":"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"}

package/dist/components/consent-footer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Consent Footer
+ *
+ * `Protected by ✓ Checkpoint` (left) + `How does this work?` (right). Shared
+ * between the consent screen and the (future-migrated) gateway consent.
+ *
+ * @module components/consent-footer
+ */
+import { LitElement } from "lit";
+import type { ConsentTheme } from "../types/capabilities.types.js";
+export declare class ConsentFooter extends LitElement {
+    theme: ConsentTheme;
+    howItWorksUrl: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "consent-footer": ConsentFooter;
+    }
+}
+//# sourceMappingURL=consent-footer.d.ts.map

package/dist/components/consent-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-footer.d.ts","sourceRoot":"","sources":["../../src/components/consent-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,EAAE,YAAY,CAAW;IAC9B,aAAa,SAAM;IAE/C,OAAgB,MAAM,0BAiCpB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/components/consent-footer.js

@@ -0,0 +1,96 @@
+/**
+ * Consent Footer
+ *
+ * `Protected by ✓ Checkpoint` (left) + `How does this work?` (right). Shared
+ * between the consent screen and the (future-migrated) gateway consent.
+ *
+ * @module components/consent-footer
+ */
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { CONSENT_COPY_TOKENS } from "../copy/tokens.js";
+let ConsentFooter = class ConsentFooter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.theme = "light";
+        this.howItWorksUrl = "";
+    }
+    render() {
+        const attribution = this.theme === "dark"
+            ? CONSENT_COPY_TOKENS.attribution.securedBy
+            : CONSENT_COPY_TOKENS.attribution.protectedBy;
+        return html `
+      <span class="left">
+        <svg
+          class="check"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m3.5 8.5 3 3 6-6.5" />
+        </svg>
+        ${attribution}
+      </span>
+      ${this.howItWorksUrl
+            ? html `<a href="${this.howItWorksUrl}" target="_blank" rel="noopener">
+            ${CONSENT_COPY_TOKENS.attribution.howThisWorks}
+          </a>`
+            : html `<span>${CONSENT_COPY_TOKENS.attribution.howThisWorks}</span>`}
+    `;
+    }
+};
+ConsentFooter.styles = css `
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding-top: 12px;
+      font-size: 12px;
+      color: var(--cs-text-tertiary, #64748B);
+      border-top: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .left {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .check {
+      width: 14px;
+      height: 14px;
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    a:hover {
+      color: var(--cs-text-primary, #0F172A);
+    }
+  `;
+__decorate([
+    property({ type: String })
+], ConsentFooter.prototype, "theme", void 0);
+__decorate([
+    property({ type: String })
+], ConsentFooter.prototype, "howItWorksUrl", void 0);
+ConsentFooter = __decorate([
+    customElement("consent-footer")
+], ConsentFooter);
+export { ConsentFooter };
+//# sourceMappingURL=consent-footer.js.map

package/dist/components/consent-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-footer.js","sourceRoot":"","sources":["../../src/components/consent-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIjD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACuB,UAAK,GAAiB,OAAO,CAAC;QAC9B,kBAAa,GAAG,EAAE,CAAC;IAkEjD,CAAC;IA7BU,MAAM;QACb,MAAM,WAAW,GACf,IAAI,CAAC,KAAK,KAAK,MAAM;YACnB,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,SAAS;YAC3C,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,WAAW,CAAC;QAElD,OAAO,IAAI,CAAA;;;;;;;;;;;;;;UAcL,WAAW;;QAEb,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,aAAa;cAC9B,mBAAmB,CAAC,WAAW,CAAC,YAAY;eAC3C;YACP,CAAC,CAAC,IAAI,CAAA,SAAS,mBAAmB,CAAC,WAAW,CAAC,YAAY,SAAS;KACvE,CAAC;IACJ,CAAC;;AA/De,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiC3B,AAjCqB,CAiCpB;AApC0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAoB;AAFpC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoEzB"}

package/dist/components/consent-revocation-notice.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Consent Revocation Notice
+ *
+ * Clock-iconed footer block telling the user where they can revoke and that
+ * permissions auto-expire after N days of inactivity.
+ *
+ * @module components/consent-revocation-notice
+ */
+import { LitElement } from "lit";
+export declare class ConsentRevocationNotice extends LitElement {
+    revocationPath: string;
+    orgName: string;
+    inactivityDays: number;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "consent-revocation-notice": ConsentRevocationNotice;
+    }
+}
+//# sourceMappingURL=consent-revocation-notice.d.ts.map

package/dist/components/consent-revocation-notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-revocation-notice.d.ts","sourceRoot":"","sources":["../../src/components/consent-revocation-notice.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,qBACa,uBAAwB,SAAQ,UAAU;IACzB,cAAc,SAAgC;IAC9C,OAAO,SAAe;IACtB,cAAc,SAAM;IAEhD,OAAgB,MAAM,0BAgCpB;IAEO,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,uBAAuB,CAAC;KACtD;CACF"}

package/dist/components/consent-revocation-notice.js

@@ -0,0 +1,98 @@
+/**
+ * Consent Revocation Notice
+ *
+ * Clock-iconed footer block telling the user where they can revoke and that
+ * permissions auto-expire after N days of inactivity.
+ *
+ * @module components/consent-revocation-notice
+ */
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { CONSENT_COPY_TOKENS, formatToken } from "../copy/tokens.js";
+let ConsentRevocationNotice = class ConsentRevocationNotice extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.revocationPath = "Account → Connected Agents";
+        this.orgName = "this site";
+        this.inactivityDays = 90;
+    }
+    render() {
+        const revoke = formatToken(CONSENT_COPY_TOKENS.footer.revocationTemplate, {
+            RevocationPath: this.revocationPath,
+            Org: this.orgName,
+        });
+        const inactivity = formatToken(CONSENT_COPY_TOKENS.footer.inactivityTemplate, { Days: this.inactivityDays });
+        return html `
+      <svg
+        class="icon"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="10" cy="10" r="7.5" />
+        <path d="M10 6v4l2.5 1.5" />
+      </svg>
+      <div class="content">
+        <span>${revoke}</span>
+        <span>${inactivity}</span>
+      </div>
+    `;
+    }
+};
+ConsentRevocationNotice.styles = css `
+    :host {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 12px 14px;
+      border-radius: 12px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      color: var(--cs-text-secondary, #334155);
+      font-size: 12.5px;
+      line-height: 1.5;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      margin-top: 2px;
+      color: var(--cs-text-tertiary, #64748B);
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    em {
+      font-style: normal;
+      color: var(--cs-text-primary, #0F172A);
+      font-weight: 500;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], ConsentRevocationNotice.prototype, "revocationPath", void 0);
+__decorate([
+    property({ type: String })
+], ConsentRevocationNotice.prototype, "orgName", void 0);
+__decorate([
+    property({ type: Number })
+], ConsentRevocationNotice.prototype, "inactivityDays", void 0);
+ConsentRevocationNotice = __decorate([
+    customElement("consent-revocation-notice")
+], ConsentRevocationNotice);
+export { ConsentRevocationNotice };
+//# sourceMappingURL=consent-revocation-notice.js.map

package/dist/components/consent-revocation-notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-revocation-notice.js","sourceRoot":"","sources":["../../src/components/consent-revocation-notice.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG9D,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QACuB,mBAAc,GAAG,4BAA4B,CAAC;QAC9C,YAAO,GAAG,WAAW,CAAC;QACtB,mBAAc,GAAG,EAAE,CAAC;IAkElD,CAAC;IA9BU,MAAM;QACb,MAAM,MAAM,GAAG,WAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,kBAAkB,EAAE;YACxE,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,GAAG,EAAE,IAAI,CAAC,OAAO;SAClB,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,WAAW,CAC5B,mBAAmB,CAAC,MAAM,CAAC,kBAAkB,EAC7C,EAAE,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,CAC9B,CAAC;QAEF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;gBAeC,MAAM;gBACN,UAAU;;KAErB,CAAC;IACJ,CAAC;;AA/De,8BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgC3B,AAhCqB,CAgCpB;AApC0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA+C;AAC9C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAAqB;AAHrC,uBAAuB;IADnC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,uBAAuB,CAqEnC"}

package/dist/components/index.d.ts

@@ -15,5 +15,11 @@ export { ConsentTerms } from './consent-terms.js';
 export { ConsentOAuthButton, type OAuthProvider, } from './consent-oauth-button.js';
 export { ConsentOTPInput } from './consent-otp-input.js';
 export { McpConsent, type OAuthIdentity, type ConsentApproveDetail, type ConsentErrorDetail, } from './mcp-consent.js';
+export { ConsentAgentHeader } from './consent-agent-header.js';
+export { ConsentCapabilityCard, type CapabilityToggleDetail, } from './consent-capability-card.js';
+export { ConsentActionBar } from './consent-action-bar.js';
+export { ConsentFooter } from './consent-footer.js';
+export { ConsentRevocationNotice } from './consent-revocation-notice.js';
+export { ConsentCapabilitiesScreen, type CapabilitiesApproveDetail, } from './consent-capabilities-screen.js';
 export { html, css } from 'lit';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EACL,kBAAkB,EAClB,KAAK,cAAc,GACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,kBAAkB,EAClB,KAAK,aAAa,GACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,GACxB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EACL,kBAAkB,EAClB,KAAK,cAAc,GACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,kBAAkB,EAClB,KAAK,aAAa,GACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,GACxB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,qBAAqB,EACrB,KAAK,sBAAsB,GAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EACL,yBAAyB,EACzB,KAAK,yBAAyB,GAC/B,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC"}

package/dist/components/index.js

@@ -18,6 +18,13 @@ export { ConsentOAuthButton, } from './consent-oauth-button.js';
 export { ConsentOTPInput } from './consent-otp-input.js';
 // Composite Component (Full Consent Flow)
 export { McpConsent, } from './mcp-consent.js';
+// New design-language components (consent + future-migrated gateway)
+export { ConsentAgentHeader } from './consent-agent-header.js';
+export { ConsentCapabilityCard, } from './consent-capability-card.js';
+export { ConsentActionBar } from './consent-action-bar.js';
+export { ConsentFooter } from './consent-footer.js';
+export { ConsentRevocationNotice } from './consent-revocation-notice.js';
+export { ConsentCapabilitiesScreen, } from './consent-capabilities-screen.js';
 // Re-export Lit utilities that consumers might need
 export { html, css } from 'lit';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,oEAAoE;AACpE,OAAO,EAAE,aAAa,EAAsB,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,sBAAsB;AACtB,OAAO,EACL,kBAAkB,GAEnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,kBAAkB,GAEnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,0CAA0C;AAC1C,OAAO,EACL,UAAU,GAIX,MAAM,kBAAkB,CAAC;AAE1B,oDAAoD;AACpD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,oEAAoE;AACpE,OAAO,EAAE,aAAa,EAAsB,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,sBAAsB;AACtB,OAAO,EACL,kBAAkB,GAEnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,kBAAkB,GAEnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,0CAA0C;AAC1C,OAAO,EACL,UAAU,GAIX,MAAM,kBAAkB,CAAC;AAE1B,qEAAqE;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,qBAAqB,GAEtB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EACL,yBAAyB,GAE1B,MAAM,kCAAkC,CAAC;AAE1C,oDAAoD;AACpD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC"}