@kya-os/consent 0.1.38 → 0.1.41

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

@@ -0,0 +1,399 @@
+"use strict";
+/**
+ * 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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentCapabilityCard = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const tokens_js_1 = require("../copy/tokens.js");
+const explain_js_1 = require("../cedar/explain.js");
+let ConsentCapabilityCard = class ConsentCapabilityCard extends lit_1.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,
+        }));
+    }
+    /**
+     * Row-level click handler. Makes the entire row a click target for
+     * toggling the checkbox — a UX nicety that matches Plaid/Apple-style
+     * consent rows. Skips when the user clicks the per-row "View policy"
+     * button, the policy disclosure, or any link inside the description, so
+     * those interactive children retain their own behavior.
+     */
+    onRowClick(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        // Walk the composed path to detect interactive children we shouldn't
+        // hijack — the policy toggle/disclosure or any anchor.
+        const path = event.composedPath?.() || [];
+        for (const node of path) {
+            if (!(node instanceof HTMLElement))
+                continue;
+            if (node === this)
+                break;
+            if (node.classList?.contains("policy-toggle") ||
+                node.classList?.contains("policy-disclosure") ||
+                node.tagName === "A" ||
+                node.tagName === "BUTTON") {
+                // Already-handled child (incl. our own checkbox button — its own
+                // @click toggles, no double-fire from row click).
+                return;
+            }
+        }
+        this.toggleChecked();
+    }
+    togglePolicy(event) {
+        // Stop the row click from also toggling the checkbox when the user
+        // clicked specifically on "View policy".
+        event?.stopPropagation();
+        this.policyOpen = !this.policyOpen;
+    }
+    isHigherRisk() {
+        return this.riskLevel === "high" || this.riskLevel === "critical";
+    }
+    renderIcon() {
+        return iconSvgFor(this.icon);
+    }
+    renderPolicy() {
+        if (!this.policyOpen)
+            return lit_1.nothing;
+        if (!this.compiledCedar)
+            return lit_1.nothing;
+        const explanation = (0, explain_js_1.explainCedarFragment)(this.compiledCedar);
+        const tokens = tokens_js_1.CONSENT_COPY_TOKENS.capabilityRow;
+        return (0, lit_1.html) `
+      <div class="policy-disclosure" part="policy">
+        <h4>${tokens.glossTitle}</h4>
+        <ul>
+          ${explanation.actions.length === 0
+            ? (0, lit_1.html) `<li>—</li>`
+            : explanation.actions.map((action) => (0, lit_1.html) `<li><code>${action}</code></li>`)}
+        </ul>
+        ${explanation.resource
+            ? (0, lit_1.html) `<p>
+              On <code>${explanation.resource}</code>
+            </p>`
+            : (0, lit_1.html) `<p>On ${tokens.glossUnknownResource}</p>`}
+        <h4>${tokens.rawPolicyTitle}</h4>
+        <pre><code>${this.compiledCedar}</code></pre>
+      </div>
+    `;
+    }
+    render() {
+        const tokens = tokens_js_1.CONSENT_COPY_TOKENS.capabilityRow;
+        return (0, lit_1.html) `
+      <div
+        class="row"
+        part="row"
+        role="button"
+        tabindex="0"
+        @click=${this.onRowClick}
+        @keydown=${(e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                this.toggleChecked();
+            }
+        }}
+      >
+        <button
+          class="checkbox"
+          part="checkbox"
+          role="checkbox"
+          aria-checked="${String(this.checked)}"
+          aria-label="${this.label}"
+          @click=${(e) => {
+            e.stopPropagation();
+            this.toggleChecked();
+        }}
+          type="button"
+          tabindex="-1"
+        >
+          ${this.checked ? (0, lit_1.html) `<span class="check-mark">✓</span>` : lit_1.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()
+            ? (0, lit_1.html) `<span class="risk-chip">${tokens.higherRiskChip}</span>`
+            : lit_1.nothing}
+          </div>
+          <button
+            class="policy-toggle"
+            type="button"
+            @click=${this.togglePolicy}
+            aria-expanded="${String(this.policyOpen)}"
+          >
+            ${tokens.viewPolicyLink}
+          </button>
+          ${this.renderPolicy()}
+        </div>
+      </div>
+    `;
+    }
+};
+exports.ConsentCapabilityCard = ConsentCapabilityCard;
+ConsentCapabilityCard.styles = (0, lit_1.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;
+      cursor: pointer;
+      transition: background 0.12s ease;
+      margin: 0 -10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      border-radius: 8px;
+    }
+
+    .row:hover {
+      background: var(--cs-row-hover-bg, rgba(15, 23, 42, 0.025));
+    }
+
+    .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([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentCapabilityCard.prototype, "capabilityId", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentCapabilityCard.prototype, "label", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentCapabilityCard.prototype, "description", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentCapabilityCard.prototype, "icon", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentCapabilityCard.prototype, "riskLevel", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentCapabilityCard.prototype, "checked", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "compiled-cedar" })
+], ConsentCapabilityCard.prototype, "compiledCedar", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], ConsentCapabilityCard.prototype, "policyOpen", void 0);
+exports.ConsentCapabilityCard = ConsentCapabilityCard = __decorate([
+    (0, decorators_js_1.customElement)("consent-capability-card")
+], 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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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 (0, lit_1.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/cjs/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/cjs/components/consent-connector-header.js

@@ -0,0 +1,247 @@
+"use strict";
+/**
+ * Consent Connector Header
+ *
+ * Top-of-page visual matching Peter's mockup: client logo on the left, an
+ * animated dotted bridge with the Checkpoint shield in the middle, and the
+ * server brand logo on the right. Communicates "{client} is connecting to
+ * {server} via Checkpoint" before the user reads any copy.
+ *
+ * Logo resolution priority:
+ *   1. explicit `clientLogoUrl` / `serverLogoUrl` attributes (operator override)
+ *   2. derived from `clientDid` (e.g. did:web:knowthat.ai:agents:claude →
+ *      `https://knowthat.ai/img/agents/claude.png`)
+ *   3. logo.dev fallback when `logoDevToken` is set + a domain is derivable
+ *   4. monogram tile (first letter of name) as the last-resort placeholder
+ *
+ * Designed to be brand-agnostic: every client/server pair gets the same
+ * shape, with only the artwork swapped per deployment.
+ *
+ * @module components/consent-connector-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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentConnectorHeader = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let ConsentConnectorHeader = class ConsentConnectorHeader extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        /** Display name of the agent / client (e.g. "Claude"). */
+        this.clientName = "";
+        /** Agent DID — used for KTA-derived logo lookup when no explicit URL. */
+        this.clientDid = "";
+        /** Explicit override for the client logo. */
+        this.clientLogoUrl = "";
+        /** Display name of the server / org (e.g. "Hardware World"). */
+        this.serverName = "";
+        /** Server brand domain — used for logo.dev lookup when no explicit URL. */
+        this.serverDomain = "";
+        /** Explicit override for the server brand logo. */
+        this.serverLogoUrl = "";
+        /**
+         * Optional logo.dev publishable token. When supplied, used to fetch
+         * brand logos by domain. Falls back to monogram tile if missing or if
+         * logo.dev returns 404.
+         */
+        this.logoDevToken = "";
+        this.clientImageOk = true;
+        this.serverImageOk = true;
+    }
+    /**
+     * Derive a logo URL for an agent DID via KTA hosting convention.
+     * `did:web:knowthat.ai:agents:claude` → `https://knowthat.ai/img/agents/claude.png`
+     */
+    ktaLogoFromDid(did) {
+        if (!did)
+            return undefined;
+        const match = did.match(/^did:web:knowthat\.ai:agents:([a-z0-9-]+)$/i);
+        if (!match)
+            return undefined;
+        return `https://knowthat.ai/img/agents/${match[1]}.png`;
+    }
+    /**
+     * Derive a brand logo URL via logo.dev given a domain. Returns undefined
+     * when no token is configured or the domain is unparseable.
+     */
+    logoDevLogo(domain) {
+        if (!domain || !this.logoDevToken)
+            return undefined;
+        const cleaned = domain.replace(/^https?:\/\//, "").replace(/\/.*$/, "");
+        if (!cleaned)
+            return undefined;
+        return `https://img.logo.dev/${cleaned}?token=${encodeURIComponent(this.logoDevToken)}&size=120&format=png`;
+    }
+    resolveClientLogo() {
+        if (this.clientLogoUrl)
+            return this.clientLogoUrl;
+        return this.ktaLogoFromDid(this.clientDid);
+    }
+    resolveServerLogo() {
+        if (this.serverLogoUrl)
+            return this.serverLogoUrl;
+        return this.logoDevLogo(this.serverDomain);
+    }
+    monogram(name) {
+        return (name || "?").trim().charAt(0).toUpperCase();
+    }
+    render() {
+        const clientLogo = this.resolveClientLogo();
+        const serverLogo = this.resolveServerLogo();
+        return (0, lit_1.html) `
+      <div class="tile client" aria-hidden="true">
+        ${clientLogo && this.clientImageOk
+            ? (0, lit_1.html) `<img
+              src="${clientLogo}"
+              alt=""
+              @error=${() => (this.clientImageOk = false)}
+            />`
+            : (0, lit_1.html) `<span class="monogram">${this.monogram(this.clientName)}</span>`}
+      </div>
+      <div class="bridge" aria-hidden="true">
+        <span class="dots"><span></span><span></span><span></span></span>
+        <span class="shield" title="Protected by Checkpoint">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3l8 3v5c0 4.5-3.5 8.5-8 10-4.5-1.5-8-5.5-8-10V6l8-3z" />
+            <path d="m9 12 2 2 4-4" />
+          </svg>
+        </span>
+        <span class="dots"><span></span><span></span><span></span></span>
+      </div>
+      <div class="tile server" aria-hidden="true">
+        ${serverLogo && this.serverImageOk
+            ? (0, lit_1.html) `<img
+              src="${serverLogo}"
+              alt=""
+              @error=${() => (this.serverImageOk = false)}
+            />`
+            : (0, lit_1.html) `<span class="monogram">${this.monogram(this.serverName)}</span>`}
+      </div>
+      <span style="position:absolute;left:-9999px">${this.clientName || ""} connecting to ${this.serverName || ""} via Checkpoint</span>
+    `;
+    }
+};
+exports.ConsentConnectorHeader = ConsentConnectorHeader;
+ConsentConnectorHeader.styles = (0, lit_1.css) `
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 18px;
+      padding: 22px 0 4px;
+    }
+
+    .tile {
+      width: 56px;
+      height: 56px;
+      border-radius: 14px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      background: var(--cs-surface-card, #fff);
+      border: 1px solid var(--cs-surface-border, rgba(15, 23, 42, 0.08));
+    }
+
+    .tile.client {
+      background: var(--cs-surface-accent, #0F172A);
+      border-color: transparent;
+    }
+
+    .tile img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .tile .monogram {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 22px;
+    }
+
+    .tile.client .monogram {
+      color: var(--cs-surface-accent-text, #fff);
+    }
+
+    .tile.server .monogram {
+      color: var(--cs-text-primary, #0F172A);
+    }
+
+    .bridge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .dots {
+      display: inline-flex;
+      gap: 4px;
+    }
+
+    .dots span {
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: var(--cs-text-tertiary, #94A3B8);
+      opacity: 0.55;
+    }
+
+    .shield {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background: rgba(34, 197, 94, 0.14);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #15803D;
+      flex-shrink: 0;
+    }
+
+    .shield svg {
+      width: 16px;
+      height: 16px;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentConnectorHeader.prototype, "clientName", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentConnectorHeader.prototype, "clientDid", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "client-logo-url" })
+], ConsentConnectorHeader.prototype, "clientLogoUrl", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentConnectorHeader.prototype, "serverName", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "server-domain" })
+], ConsentConnectorHeader.prototype, "serverDomain", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "server-logo-url" })
+], ConsentConnectorHeader.prototype, "serverLogoUrl", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "logo-dev-token" })
+], ConsentConnectorHeader.prototype, "logoDevToken", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], ConsentConnectorHeader.prototype, "clientImageOk", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], ConsentConnectorHeader.prototype, "serverImageOk", void 0);
+exports.ConsentConnectorHeader = ConsentConnectorHeader = __decorate([
+    (0, decorators_js_1.customElement)("consent-connector-header")
+], ConsentConnectorHeader);
+//# sourceMappingURL=consent-connector-header.js.map

package/dist/cjs/components/consent-connector-header.js.map

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