@kya-os/consent 0.1.38 → 0.1.39

package/dist/components/consent-agent-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-agent-header.d.ts","sourceRoot":"","sources":["../../src/components/consent-agent-header.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,qBACa,kBAAmB,SAAQ,UAAU;IACpB,SAAS,SAAM;IACf,MAAM,SAAM;IACZ,YAAY,SAAM;IACjB,QAAQ,UAAS;IAClB,OAAO,SAAM;IACb,WAAW,SAAM;IAE7C,OAAgB,MAAM,0BA+FpB;IAEF,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,UAAU;IAWT,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/components/consent-agent-header.js

@@ -0,0 +1,202 @@
+/**
+ * Consent Agent Header
+ *
+ * Renders the agent identity tile shared between the new consent screen and
+ * the OAuth Gateway consent modal. Shows logo + name + Verified/UNVERIFIED
+ * pill + meta line (`Made by {Vendor} · Asking from your {Surface} · Connected
+ * just now`).
+ *
+ * Fed by `AgentMetadata` from `@kya-os/consent/types/capabilities`.
+ *
+ * @module components/consent-agent-header
+ */
+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 } from "lit/decorators.js";
+import { CONSENT_COPY_TOKENS, formatToken } from "../copy/tokens.js";
+let ConsentAgentHeader = class ConsentAgentHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.agentName = "";
+        this.vendor = "";
+        this.surfaceLabel = "";
+        this.verified = false;
+        this.logoUrl = "";
+        this.connectedAt = "";
+    }
+    renderConnectedFragment() {
+        if (!this.connectedAt) {
+            return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+        }
+        const ts = Date.parse(this.connectedAt);
+        if (Number.isNaN(ts)) {
+            return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+        }
+        const minutes = Math.max(0, Math.floor((Date.now() - ts) / 60000));
+        if (minutes < 1) {
+            return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+        }
+        return formatToken(CONSENT_COPY_TOKENS.agentTile.connectedMinutesAgo, {
+            Minutes: minutes,
+        });
+    }
+    renderMeta() {
+        if (!this.vendor && !this.surfaceLabel) {
+            return this.renderConnectedFragment();
+        }
+        return formatToken(CONSENT_COPY_TOKENS.agentTile.metaTemplate, {
+            Vendor: this.vendor || "—",
+            Surface: this.surfaceLabel || "this device",
+            Connected: this.renderConnectedFragment(),
+        });
+    }
+    render() {
+        const initial = (this.agentName || "?").trim().charAt(0).toUpperCase();
+        const verifiedLabel = this.verified
+            ? CONSENT_COPY_TOKENS.agentTile.verifiedPill
+            : CONSENT_COPY_TOKENS.agentTile.unverifiedPill;
+        const verifiedClass = this.verified ? "verified" : "unverified";
+        return html `
+      <div class="tile" part="tile">
+        <div class="logo" aria-hidden="true">
+          ${this.logoUrl
+            ? html `<img src="${this.logoUrl}" alt="" />`
+            : html `<div class="placeholder">${initial}</div>`}
+        </div>
+        <div class="body">
+          <div class="row-name">
+            <span class="name">${this.agentName || nothing}</span>
+            <span class="pill ${verifiedClass}" part="pill">
+              ${verifiedLabel}
+            </span>
+          </div>
+          <div class="meta">${this.renderMeta()}</div>
+        </div>
+      </div>
+    `;
+    }
+};
+ConsentAgentHeader.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .tile {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 18px;
+      border-radius: 14px;
+      background: var(--cs-surface-inset, transparent);
+      border: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .logo {
+      width: 44px;
+      height: 44px;
+      border-radius: 12px;
+      flex-shrink: 0;
+      background: var(--cs-surface-card, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .logo img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .logo .placeholder {
+      width: 100%;
+      height: 100%;
+      background: var(--cs-surface-accent, #0F172A);
+      color: var(--cs-surface-accent-text, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 18px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .row-name {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+
+    .name {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--cs-text-primary, #0F172A);
+      letter-spacing: -0.01em;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+    }
+
+    .pill.verified {
+      background: var(--cs-pill-verified-bg, #DCFCE7);
+      color: var(--cs-pill-verified-text, #166534);
+    }
+
+    .pill.unverified {
+      background: var(--cs-pill-unverified-bg, #F1F5F9);
+      color: var(--cs-pill-unverified-text, #475569);
+      letter-spacing: 0.08em;
+    }
+
+    .meta {
+      font-size: 12px;
+      color: var(--cs-text-tertiary, #64748B);
+      line-height: 1.5;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], ConsentAgentHeader.prototype, "agentName", void 0);
+__decorate([
+    property({ type: String })
+], ConsentAgentHeader.prototype, "vendor", void 0);
+__decorate([
+    property({ type: String })
+], ConsentAgentHeader.prototype, "surfaceLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], ConsentAgentHeader.prototype, "verified", void 0);
+__decorate([
+    property({ type: String })
+], ConsentAgentHeader.prototype, "logoUrl", void 0);
+__decorate([
+    property({ type: String })
+], ConsentAgentHeader.prototype, "connectedAt", void 0);
+ConsentAgentHeader = __decorate([
+    customElement("consent-agent-header")
+], ConsentAgentHeader);
+export { ConsentAgentHeader };
+//# sourceMappingURL=consent-agent-header.js.map

package/dist/components/consent-agent-header.js.map

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

package/dist/components/consent-capabilities-screen.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Consent Capabilities Screen
+ *
+ * The composite layout from Peter's mockup: eyebrow + serif headline +
+ * subhead + agent identity tile + capability rows + revocation notice +
+ * action bar + footer. Used when the resolved consent config includes
+ * `capabilities` (the new humanized layout). Falls back to the legacy
+ * permissions list otherwise.
+ *
+ * This component is purely presentational. It accepts the resolved data
+ * (capabilities, agent metadata, copy values) and emits `consent-allow` /
+ * `consent-deny` events so the parent can submit the form / close the
+ * window. Selection state for the checkboxes is owned here to keep the
+ * parent simple.
+ *
+ * @module components/consent-capabilities-screen
+ */
+import { LitElement } from "lit";
+import type { Capability, AgentMetadata, ConsentTheme, CedarTemplateContext } from "../types/capabilities.types.js";
+import "./consent-agent-header.js";
+import "./consent-capability-card.js";
+import "./consent-action-bar.js";
+import "./consent-footer.js";
+import "./consent-revocation-notice.js";
+/**
+ * Detail emitted on `consent-allow` — the set of capability ids the user
+ * approved. The parent uses this to compose the granted list.
+ */
+export interface CapabilitiesApproveDetail {
+    selectedCapabilityIds: string[];
+    selectedScopes: string[];
+}
+export declare class ConsentCapabilitiesScreen extends LitElement {
+    capabilities: Capability[];
+    agentMetadata: AgentMetadata | undefined;
+    cedarContext: CedarTemplateContext | undefined;
+    orgName: string;
+    headlineVerb: string;
+    revocationPath: string;
+    inactivityDays: number;
+    theme: ConsentTheme;
+    howItWorksUrl: string;
+    loading: boolean;
+    private selected;
+    connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    private seedDefaults;
+    static styles: import("lit").CSSResult;
+    private hostStyle;
+    private onCapabilityToggle;
+    private onAllow;
+    private onDeny;
+    private compileCapabilityCedar;
+    private renderHeadline;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "consent-capabilities-screen": ConsentCapabilitiesScreen;
+    }
+}
+//# sourceMappingURL=consent-capabilities-screen.d.ts.map

package/dist/components/consent-capabilities-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-capabilities-screen.d.ts","sourceRoot":"","sources":["../../src/components/consent-capabilities-screen.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAQrD,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EACb,YAAY,EACZ,oBAAoB,EACrB,MAAM,gCAAgC,CAAC;AAExC,OAAO,2BAA2B,CAAC;AACnC,OAAO,8BAA8B,CAAC;AACtC,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AAGxC;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,YAAY,EAAE,UAAU,EAAE,CAAM;IAC/B,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,YAAY,EAAE,oBAAoB,GAAG,SAAS,CAAC;IAC/C,OAAO,SAAM;IACb,YAAY,SAAS;IACrB,cAAc,SAAgC;IAC9C,cAAc,SAAM;IACpB,KAAK,EAAE,YAAY,CAAW;IACC,aAAa,SAAM;IACjD,OAAO,UAAS;IAEpC,OAAO,CAAC,QAAQ,CAAqB;IAErC,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMxD,OAAO,CAAC,YAAY;IAQpB,OAAgB,MAAM,0BAuEpB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,kBAAkB,CAMxB;IAEF,OAAO,CAAC,OAAO,CAiBb;IAEF,OAAO,CAAC,MAAM,CAIZ;IAEF,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,cAAc;IAkBb,MAAM;CAmEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,yBAAyB,CAAC;KAC1D;CACF"}

package/dist/components/consent-capabilities-screen.js

@@ -0,0 +1,306 @@
+/**
+ * Consent Capabilities Screen
+ *
+ * The composite layout from Peter's mockup: eyebrow + serif headline +
+ * subhead + agent identity tile + capability rows + revocation notice +
+ * action bar + footer. Used when the resolved consent config includes
+ * `capabilities` (the new humanized layout). Falls back to the legacy
+ * permissions list otherwise.
+ *
+ * This component is purely presentational. It accepts the resolved data
+ * (capabilities, agent metadata, copy values) and emits `consent-allow` /
+ * `consent-deny` events so the parent can submit the form / close the
+ * window. Selection state for the checkboxes is owned here to keep the
+ * parent simple.
+ *
+ * @module components/consent-capabilities-screen
+ */
+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, formatToken } from "../copy/tokens.js";
+import { getConsentTheme, themeToCssVariables, } from "../styles/theme.js";
+import { compileSingleCapability } from "../cedar/compile.js";
+import "./consent-agent-header.js";
+import "./consent-capability-card.js";
+import "./consent-action-bar.js";
+import "./consent-footer.js";
+import "./consent-revocation-notice.js";
+let ConsentCapabilitiesScreen = class ConsentCapabilitiesScreen extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.capabilities = [];
+        this.orgName = "";
+        this.headlineVerb = "use";
+        this.revocationPath = "Account → Connected Agents";
+        this.inactivityDays = 90;
+        this.theme = "light";
+        this.howItWorksUrl = "";
+        this.loading = false;
+        this.selected = new Set();
+        this.onCapabilityToggle = (event) => {
+            const detail = event.detail;
+            const next = new Set(this.selected);
+            if (detail.checked)
+                next.add(detail.id);
+            else
+                next.delete(detail.id);
+            this.selected = next;
+        };
+        this.onAllow = () => {
+            if (this.loading)
+                return;
+            const selectedIds = Array.from(this.selected);
+            const selectedScopes = this.capabilities
+                .filter((c) => this.selected.has(c.id))
+                .flatMap((c) => c.scopes);
+            const detail = {
+                selectedCapabilityIds: selectedIds,
+                selectedScopes,
+            };
+            this.dispatchEvent(new CustomEvent("capabilities-allow", {
+                detail,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.onDeny = () => {
+            this.dispatchEvent(new CustomEvent("capabilities-deny", { bubbles: true, composed: true }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.seedDefaults();
+    }
+    willUpdate(changed) {
+        if (changed.has("capabilities")) {
+            this.seedDefaults();
+        }
+    }
+    seedDefaults() {
+        const next = new Set();
+        for (const capability of this.capabilities) {
+            if (capability.defaultOn)
+                next.add(capability.id);
+        }
+        this.selected = next;
+    }
+    hostStyle() {
+        return `:host { ${themeToCssVariables(getConsentTheme(this.theme))} }`;
+    }
+    compileCapabilityCedar(capability) {
+        if (!this.cedarContext) {
+            return capability.cedar;
+        }
+        try {
+            return compileSingleCapability(capability, this.cedarContext);
+        }
+        catch {
+            return capability.cedar;
+        }
+    }
+    renderHeadline() {
+        const agentName = this.agentMetadata?.name || "this agent";
+        const tokens = CONSENT_COPY_TOKENS;
+        const raw = formatToken(tokens.headline.template, {
+            Agent: "@@AGENT@@",
+            Verb: this.headlineVerb || "use",
+            Org: "@@ORG@@",
+        });
+        const escaped = escapeHtml(raw);
+        const withSerifEntities = escaped
+            .replace("@@AGENT@@", `<em>${escapeHtml(agentName)}</em>`)
+            .replace("@@ORG@@", `<em>${escapeHtml(this.orgName || "this site")}</em>`);
+        return html `<h1
+      class="headline"
+      .innerHTML=${withSerifEntities}
+    ></h1>`;
+    }
+    render() {
+        const tokens = CONSENT_COPY_TOKENS;
+        const agentName = this.agentMetadata?.name || "this agent";
+        const subhead = formatToken(tokens.subhead.template, { Agent: agentName });
+        const sectionHeader = formatToken(tokens.section.capabilitiesHeader, {
+            Agent: agentName.toUpperCase(),
+        });
+        return html `
+      <style>
+        ${this.hostStyle()}
+      </style>
+      <div class="card" part="card">
+        <span class="eyebrow">${tokens.eyebrow.permissionRequest}</span>
+        ${this.renderHeadline()}
+        <p class="subhead">${subhead}</p>
+        ${this.agentMetadata
+            ? html `<consent-agent-header
+              agentName="${this.agentMetadata.name}"
+              vendor="${this.agentMetadata.vendor || ""}"
+              surfaceLabel="${this.agentMetadata.surfaceLabel || ""}"
+              ?verified=${this.agentMetadata.verified}
+              logoUrl="${this.agentMetadata.logoUrl || ""}"
+              connectedAt="${this.agentMetadata.connectedAt || ""}"
+            ></consent-agent-header>`
+            : nothing}
+        <div>
+          <div class="section-header">
+            <span>${sectionHeader}</span>
+            <span class="hint">${tokens.section.tapToToggle}</span>
+          </div>
+          <div class="rows" @capability-toggle=${this.onCapabilityToggle}>
+            ${this.capabilities.map((capability) => html `
+                <consent-capability-card
+                  capabilityId="${capability.id}"
+                  label="${capability.label}"
+                  description="${capability.description}"
+                  icon="${capability.icon}"
+                  riskLevel="${capability.riskLevel}"
+                  ?checked=${this.selected.has(capability.id)}
+                  compiled-cedar="${this.compileCapabilityCedar(capability)}"
+                ></consent-capability-card>
+              `)}
+          </div>
+        </div>
+        <consent-revocation-notice
+          revocationPath="${this.revocationPath}"
+          orgName="${this.orgName || "this site"}"
+          inactivityDays=${this.inactivityDays}
+        ></consent-revocation-notice>
+        <consent-action-bar
+          agentName="${agentName}"
+          theme="${this.theme}"
+          ?loading=${this.loading}
+          ?disabled=${this.selected.size === 0}
+          @consent-allow=${this.onAllow}
+          @consent-deny=${this.onDeny}
+        ></consent-action-bar>
+        <consent-footer
+          theme="${this.theme}"
+          howItWorksUrl="${this.howItWorksUrl}"
+        ></consent-footer>
+      </div>
+    `;
+    }
+};
+ConsentCapabilitiesScreen.styles = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 560px;
+      margin: 0 auto;
+    }
+
+    .card {
+      background: var(--cs-surface-card);
+      border: 1px solid var(--cs-surface-border);
+      border-radius: 22px;
+      box-shadow: var(--cs-card-shadow);
+      padding: 28px 28px 22px;
+      display: flex;
+      flex-direction: column;
+      gap: 22px;
+      color: var(--cs-text-primary);
+    }
+
+    .eyebrow {
+      font-size: 11px;
+      letter-spacing: 0.16em;
+      font-weight: 600;
+      color: var(--cs-text-tertiary);
+      text-transform: uppercase;
+    }
+
+    .headline {
+      font-family: "Times New Roman", Georgia, serif;
+      font-size: 30px;
+      line-height: 1.18;
+      letter-spacing: -0.01em;
+      color: var(--cs-text-primary);
+      margin: 0;
+    }
+
+    .headline em {
+      font-style: italic;
+    }
+
+    .subhead {
+      font-size: 14.5px;
+      color: var(--cs-text-secondary);
+      line-height: 1.55;
+      margin: 0;
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 11px;
+      letter-spacing: 0.14em;
+      font-weight: 600;
+      color: var(--cs-text-tertiary);
+      text-transform: uppercase;
+    }
+
+    .section-header .hint {
+      letter-spacing: 0;
+      font-weight: 400;
+      text-transform: none;
+      font-size: 12px;
+    }
+
+    .rows {
+      display: flex;
+      flex-direction: column;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], ConsentCapabilitiesScreen.prototype, "capabilities", void 0);
+__decorate([
+    property({ type: Object })
+], ConsentCapabilitiesScreen.prototype, "agentMetadata", void 0);
+__decorate([
+    property({ type: Object })
+], ConsentCapabilitiesScreen.prototype, "cedarContext", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilitiesScreen.prototype, "orgName", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilitiesScreen.prototype, "headlineVerb", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilitiesScreen.prototype, "revocationPath", void 0);
+__decorate([
+    property({ type: Number })
+], ConsentCapabilitiesScreen.prototype, "inactivityDays", void 0);
+__decorate([
+    property({ type: String })
+], ConsentCapabilitiesScreen.prototype, "theme", void 0);
+__decorate([
+    property({ type: String, attribute: "how-it-works-url" })
+], ConsentCapabilitiesScreen.prototype, "howItWorksUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], ConsentCapabilitiesScreen.prototype, "loading", void 0);
+__decorate([
+    state()
+], ConsentCapabilitiesScreen.prototype, "selected", void 0);
+ConsentCapabilitiesScreen = __decorate([
+    customElement("consent-capabilities-screen")
+], ConsentCapabilitiesScreen);
+export { ConsentCapabilitiesScreen };
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+//# sourceMappingURL=consent-capabilities-screen.js.map

package/dist/components/consent-capabilities-screen.js.map

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

package/dist/components/consent-capability-card.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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
+ */
+import { LitElement } from "lit";
+import type { CapabilityIcon, RiskLevel } from "../types/capabilities.types.js";
+/**
+ * Detail emitted on the `capability-toggle` event.
+ */
+export interface CapabilityToggleDetail {
+    id: string;
+    checked: boolean;
+}
+export declare class ConsentCapabilityCard extends LitElement {
+    capabilityId: string;
+    label: string;
+    description: string;
+    icon: CapabilityIcon;
+    riskLevel: RiskLevel;
+    checked: boolean;
+    compiledCedar: string;
+    private policyOpen;
+    static styles: import("lit").CSSResult;
+    private toggleChecked;
+    private togglePolicy;
+    private isHigherRisk;
+    private renderIcon;
+    private renderPolicy;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "consent-capability-card": ConsentCapabilityCard;
+    }
+}
+//# sourceMappingURL=consent-capability-card.d.ts.map

package/dist/components/consent-capability-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-capability-card.d.ts","sourceRoot":"","sources":["../../src/components/consent-capability-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEhF;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBACa,qBAAsB,SAAQ,UAAU;IACvB,YAAY,SAAM;IAClB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,EAAE,cAAc,CAAa;IACjC,SAAS,EAAE,SAAS,CAAS;IACb,OAAO,UAAS;IACH,aAAa,SAAM;IAEnE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAgB,MAAM,0BAwJpB;IAEF,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IA4BX,MAAM;CAoChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}