@kya-os/consent 0.1.0 → 0.1.1

package/dist/consent.js

@@ -0,0 +1,3737 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i6 = decorators.length - 1, decorator; i6 >= 0; i6--)
+    if (decorator = decorators[i6])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js
+var t = globalThis;
+var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
+var s = Symbol();
+var o = /* @__PURE__ */ new WeakMap();
+var n = class {
+  constructor(t6, e8, o8) {
+    if (this._$cssResult$ = true, o8 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t6, this.t = e8;
+  }
+  get styleSheet() {
+    let t6 = this.o;
+    const s4 = this.t;
+    if (e && void 0 === t6) {
+      const e8 = void 0 !== s4 && 1 === s4.length;
+      e8 && (t6 = o.get(s4)), void 0 === t6 && ((this.o = t6 = new CSSStyleSheet()).replaceSync(this.cssText), e8 && o.set(s4, t6));
+    }
+    return t6;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+var r = (t6) => new n("string" == typeof t6 ? t6 : t6 + "", void 0, s);
+var i = (t6, ...e8) => {
+  const o8 = 1 === t6.length ? t6[0] : e8.reduce(((e9, s4, o9) => e9 + ((t7) => {
+    if (true === t7._$cssResult$) return t7.cssText;
+    if ("number" == typeof t7) return t7;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + t7 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(s4) + t6[o9 + 1]), t6[0]);
+  return new n(o8, t6, s);
+};
+var S = (s4, o8) => {
+  if (e) s4.adoptedStyleSheets = o8.map(((t6) => t6 instanceof CSSStyleSheet ? t6 : t6.styleSheet));
+  else for (const e8 of o8) {
+    const o9 = document.createElement("style"), n5 = t.litNonce;
+    void 0 !== n5 && o9.setAttribute("nonce", n5), o9.textContent = e8.cssText, s4.appendChild(o9);
+  }
+};
+var c = e ? (t6) => t6 : (t6) => t6 instanceof CSSStyleSheet ? ((t7) => {
+  let e8 = "";
+  for (const s4 of t7.cssRules) e8 += s4.cssText;
+  return r(e8);
+})(t6) : t6;
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js
+var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: h, getOwnPropertyNames: r2, getOwnPropertySymbols: o2, getPrototypeOf: n2 } = Object;
+var a = globalThis;
+var c2 = a.trustedTypes;
+var l = c2 ? c2.emptyScript : "";
+var p = a.reactiveElementPolyfillSupport;
+var d = (t6, s4) => t6;
+var u = { toAttribute(t6, s4) {
+  switch (s4) {
+    case Boolean:
+      t6 = t6 ? l : null;
+      break;
+    case Object:
+    case Array:
+      t6 = null == t6 ? t6 : JSON.stringify(t6);
+  }
+  return t6;
+}, fromAttribute(t6, s4) {
+  let i6 = t6;
+  switch (s4) {
+    case Boolean:
+      i6 = null !== t6;
+      break;
+    case Number:
+      i6 = null === t6 ? null : Number(t6);
+      break;
+    case Object:
+    case Array:
+      try {
+        i6 = JSON.parse(t6);
+      } catch (t7) {
+        i6 = null;
+      }
+  }
+  return i6;
+} };
+var f = (t6, s4) => !i2(t6, s4);
+var b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+var y = class extends HTMLElement {
+  static addInitializer(t6) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t6);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(t6, s4 = b) {
+    if (s4.state && (s4.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t6) && ((s4 = Object.create(s4)).wrapped = true), this.elementProperties.set(t6, s4), !s4.noAccessor) {
+      const i6 = Symbol(), h3 = this.getPropertyDescriptor(t6, i6, s4);
+      void 0 !== h3 && e2(this.prototype, t6, h3);
+    }
+  }
+  static getPropertyDescriptor(t6, s4, i6) {
+    const { get: e8, set: r7 } = h(this.prototype, t6) ?? { get() {
+      return this[s4];
+    }, set(t7) {
+      this[s4] = t7;
+    } };
+    return { get: e8, set(s5) {
+      const h3 = e8?.call(this);
+      r7?.call(this, s5), this.requestUpdate(t6, h3, i6);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t6) {
+    return this.elementProperties.get(t6) ?? b;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d("elementProperties"))) return;
+    const t6 = n2(this);
+    t6.finalize(), void 0 !== t6.l && (this.l = [...t6.l]), this.elementProperties = new Map(t6.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(d("finalized"))) return;
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
+      const t7 = this.properties, s4 = [...r2(t7), ...o2(t7)];
+      for (const i6 of s4) this.createProperty(i6, t7[i6]);
+    }
+    const t6 = this[Symbol.metadata];
+    if (null !== t6) {
+      const s4 = litPropertyMetadata.get(t6);
+      if (void 0 !== s4) for (const [t7, i6] of s4) this.elementProperties.set(t7, i6);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [t7, s4] of this.elementProperties) {
+      const i6 = this._$Eu(t7, s4);
+      void 0 !== i6 && this._$Eh.set(i6, t7);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(s4) {
+    const i6 = [];
+    if (Array.isArray(s4)) {
+      const e8 = new Set(s4.flat(1 / 0).reverse());
+      for (const s5 of e8) i6.unshift(c(s5));
+    } else void 0 !== s4 && i6.push(c(s4));
+    return i6;
+  }
+  static _$Eu(t6, s4) {
+    const i6 = s4.attribute;
+    return false === i6 ? void 0 : "string" == typeof i6 ? i6 : "string" == typeof t6 ? t6.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    this._$ES = new Promise(((t6) => this.enableUpdating = t6)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t6) => t6(this)));
+  }
+  addController(t6) {
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t6), void 0 !== this.renderRoot && this.isConnected && t6.hostConnected?.();
+  }
+  removeController(t6) {
+    this._$EO?.delete(t6);
+  }
+  _$E_() {
+    const t6 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties;
+    for (const i6 of s4.keys()) this.hasOwnProperty(i6) && (t6.set(i6, this[i6]), delete this[i6]);
+    t6.size > 0 && (this._$Ep = t6);
+  }
+  createRenderRoot() {
+    const t6 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S(t6, this.constructor.elementStyles), t6;
+  }
+  connectedCallback() {
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach(((t6) => t6.hostConnected?.()));
+  }
+  enableUpdating(t6) {
+  }
+  disconnectedCallback() {
+    this._$EO?.forEach(((t6) => t6.hostDisconnected?.()));
+  }
+  attributeChangedCallback(t6, s4, i6) {
+    this._$AK(t6, i6);
+  }
+  _$ET(t6, s4) {
+    const i6 = this.constructor.elementProperties.get(t6), e8 = this.constructor._$Eu(t6, i6);
+    if (void 0 !== e8 && true === i6.reflect) {
+      const h3 = (void 0 !== i6.converter?.toAttribute ? i6.converter : u).toAttribute(s4, i6.type);
+      this._$Em = t6, null == h3 ? this.removeAttribute(e8) : this.setAttribute(e8, h3), this._$Em = null;
+    }
+  }
+  _$AK(t6, s4) {
+    const i6 = this.constructor, e8 = i6._$Eh.get(t6);
+    if (void 0 !== e8 && this._$Em !== e8) {
+      const t7 = i6.getPropertyOptions(e8), h3 = "function" == typeof t7.converter ? { fromAttribute: t7.converter } : void 0 !== t7.converter?.fromAttribute ? t7.converter : u;
+      this._$Em = e8;
+      const r7 = h3.fromAttribute(s4, t7.type);
+      this[e8] = r7 ?? this._$Ej?.get(e8) ?? r7, this._$Em = null;
+    }
+  }
+  requestUpdate(t6, s4, i6) {
+    if (void 0 !== t6) {
+      const e8 = this.constructor, h3 = this[t6];
+      if (i6 ?? (i6 = e8.getPropertyOptions(t6)), !((i6.hasChanged ?? f)(h3, s4) || i6.useDefault && i6.reflect && h3 === this._$Ej?.get(t6) && !this.hasAttribute(e8._$Eu(t6, i6)))) return;
+      this.C(t6, s4, i6);
+    }
+    false === this.isUpdatePending && (this._$ES = this._$EP());
+  }
+  C(t6, s4, { useDefault: i6, reflect: e8, wrapped: h3 }, r7) {
+    i6 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t6) && (this._$Ej.set(t6, r7 ?? s4 ?? this[t6]), true !== h3 || void 0 !== r7) || (this._$AL.has(t6) || (this.hasUpdated || i6 || (s4 = void 0), this._$AL.set(t6, s4)), true === e8 && this._$Em !== t6 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t6));
+  }
+  async _$EP() {
+    this.isUpdatePending = true;
+    try {
+      await this._$ES;
+    } catch (t7) {
+      Promise.reject(t7);
+    }
+    const t6 = this.scheduleUpdate();
+    return null != t6 && await t6, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [t8, s5] of this._$Ep) this[t8] = s5;
+        this._$Ep = void 0;
+      }
+      const t7 = this.constructor.elementProperties;
+      if (t7.size > 0) for (const [s5, i6] of t7) {
+        const { wrapped: t8 } = i6, e8 = this[s5];
+        true !== t8 || this._$AL.has(s5) || void 0 === e8 || this.C(s5, void 0, i6, e8);
+      }
+    }
+    let t6 = false;
+    const s4 = this._$AL;
+    try {
+      t6 = this.shouldUpdate(s4), t6 ? (this.willUpdate(s4), this._$EO?.forEach(((t7) => t7.hostUpdate?.())), this.update(s4)) : this._$EM();
+    } catch (s5) {
+      throw t6 = false, this._$EM(), s5;
+    }
+    t6 && this._$AE(s4);
+  }
+  willUpdate(t6) {
+  }
+  _$AE(t6) {
+    this._$EO?.forEach(((t7) => t7.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t6)), this.updated(t6);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t6) {
+    return true;
+  }
+  update(t6) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach(((t7) => this._$ET(t7, this[t7])))), this._$EM();
+  }
+  updated(t6) {
+  }
+  firstUpdated(t6) {
+  }
+};
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.1");
+
+// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js
+var t2 = globalThis;
+var i3 = t2.trustedTypes;
+var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t6) => t6 }) : void 0;
+var e3 = "$lit$";
+var h2 = `lit$${Math.random().toFixed(9).slice(2)}$`;
+var o3 = "?" + h2;
+var n3 = `<${o3}>`;
+var r3 = document;
+var l2 = () => r3.createComment("");
+var c3 = (t6) => null === t6 || "object" != typeof t6 && "function" != typeof t6;
+var a2 = Array.isArray;
+var u2 = (t6) => a2(t6) || "function" == typeof t6?.[Symbol.iterator];
+var d2 = "[ 	\n\f\r]";
+var f2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+var v = /-->/g;
+var _ = />/g;
+var m = RegExp(`>|${d2}(?:([^\\s"'>=/]+)(${d2}*=${d2}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g");
+var p2 = /'/g;
+var g = /"/g;
+var $ = /^(?:script|style|textarea|title)$/i;
+var y2 = (t6) => (i6, ...s4) => ({ _$litType$: t6, strings: i6, values: s4 });
+var x = y2(1);
+var b2 = y2(2);
+var w = y2(3);
+var T = Symbol.for("lit-noChange");
+var E = Symbol.for("lit-nothing");
+var A = /* @__PURE__ */ new WeakMap();
+var C = r3.createTreeWalker(r3, 129);
+function P(t6, i6) {
+  if (!a2(t6) || !t6.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== s2 ? s2.createHTML(i6) : i6;
+}
+var V = (t6, i6) => {
+  const s4 = t6.length - 1, o8 = [];
+  let r7, l3 = 2 === i6 ? "<svg>" : 3 === i6 ? "<math>" : "", c4 = f2;
+  for (let i7 = 0; i7 < s4; i7++) {
+    const s5 = t6[i7];
+    let a3, u3, d3 = -1, y3 = 0;
+    for (; y3 < s5.length && (c4.lastIndex = y3, u3 = c4.exec(s5), null !== u3); ) y3 = c4.lastIndex, c4 === f2 ? "!--" === u3[1] ? c4 = v : void 0 !== u3[1] ? c4 = _ : void 0 !== u3[2] ? ($.test(u3[2]) && (r7 = RegExp("</" + u3[2], "g")), c4 = m) : void 0 !== u3[3] && (c4 = m) : c4 === m ? ">" === u3[0] ? (c4 = r7 ?? f2, d3 = -1) : void 0 === u3[1] ? d3 = -2 : (d3 = c4.lastIndex - u3[2].length, a3 = u3[1], c4 = void 0 === u3[3] ? m : '"' === u3[3] ? g : p2) : c4 === g || c4 === p2 ? c4 = m : c4 === v || c4 === _ ? c4 = f2 : (c4 = m, r7 = void 0);
+    const x2 = c4 === m && t6[i7 + 1].startsWith("/>") ? " " : "";
+    l3 += c4 === f2 ? s5 + n3 : d3 >= 0 ? (o8.push(a3), s5.slice(0, d3) + e3 + s5.slice(d3) + h2 + x2) : s5 + h2 + (-2 === d3 ? i7 : x2);
+  }
+  return [P(t6, l3 + (t6[s4] || "<?>") + (2 === i6 ? "</svg>" : 3 === i6 ? "</math>" : "")), o8];
+};
+var N = class _N {
+  constructor({ strings: t6, _$litType$: s4 }, n5) {
+    let r7;
+    this.parts = [];
+    let c4 = 0, a3 = 0;
+    const u3 = t6.length - 1, d3 = this.parts, [f3, v2] = V(t6, s4);
+    if (this.el = _N.createElement(f3, n5), C.currentNode = this.el.content, 2 === s4 || 3 === s4) {
+      const t7 = this.el.content.firstChild;
+      t7.replaceWith(...t7.childNodes);
+    }
+    for (; null !== (r7 = C.nextNode()) && d3.length < u3; ) {
+      if (1 === r7.nodeType) {
+        if (r7.hasAttributes()) for (const t7 of r7.getAttributeNames()) if (t7.endsWith(e3)) {
+          const i6 = v2[a3++], s5 = r7.getAttribute(t7).split(h2), e8 = /([.?@])?(.*)/.exec(i6);
+          d3.push({ type: 1, index: c4, name: e8[2], strings: s5, ctor: "." === e8[1] ? H : "?" === e8[1] ? I : "@" === e8[1] ? L : k }), r7.removeAttribute(t7);
+        } else t7.startsWith(h2) && (d3.push({ type: 6, index: c4 }), r7.removeAttribute(t7));
+        if ($.test(r7.tagName)) {
+          const t7 = r7.textContent.split(h2), s5 = t7.length - 1;
+          if (s5 > 0) {
+            r7.textContent = i3 ? i3.emptyScript : "";
+            for (let i6 = 0; i6 < s5; i6++) r7.append(t7[i6], l2()), C.nextNode(), d3.push({ type: 2, index: ++c4 });
+            r7.append(t7[s5], l2());
+          }
+        }
+      } else if (8 === r7.nodeType) if (r7.data === o3) d3.push({ type: 2, index: c4 });
+      else {
+        let t7 = -1;
+        for (; -1 !== (t7 = r7.data.indexOf(h2, t7 + 1)); ) d3.push({ type: 7, index: c4 }), t7 += h2.length - 1;
+      }
+      c4++;
+    }
+  }
+  static createElement(t6, i6) {
+    const s4 = r3.createElement("template");
+    return s4.innerHTML = t6, s4;
+  }
+};
+function S2(t6, i6, s4 = t6, e8) {
+  if (i6 === T) return i6;
+  let h3 = void 0 !== e8 ? s4._$Co?.[e8] : s4._$Cl;
+  const o8 = c3(i6) ? void 0 : i6._$litDirective$;
+  return h3?.constructor !== o8 && (h3?._$AO?.(false), void 0 === o8 ? h3 = void 0 : (h3 = new o8(t6), h3._$AT(t6, s4, e8)), void 0 !== e8 ? (s4._$Co ?? (s4._$Co = []))[e8] = h3 : s4._$Cl = h3), void 0 !== h3 && (i6 = S2(t6, h3._$AS(t6, i6.values), h3, e8)), i6;
+}
+var M = class {
+  constructor(t6, i6) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t6, this._$AM = i6;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t6) {
+    const { el: { content: i6 }, parts: s4 } = this._$AD, e8 = (t6?.creationScope ?? r3).importNode(i6, true);
+    C.currentNode = e8;
+    let h3 = C.nextNode(), o8 = 0, n5 = 0, l3 = s4[0];
+    for (; void 0 !== l3; ) {
+      if (o8 === l3.index) {
+        let i7;
+        2 === l3.type ? i7 = new R(h3, h3.nextSibling, this, t6) : 1 === l3.type ? i7 = new l3.ctor(h3, l3.name, l3.strings, this, t6) : 6 === l3.type && (i7 = new z(h3, this, t6)), this._$AV.push(i7), l3 = s4[++n5];
+      }
+      o8 !== l3?.index && (h3 = C.nextNode(), o8++);
+    }
+    return C.currentNode = r3, e8;
+  }
+  p(t6) {
+    let i6 = 0;
+    for (const s4 of this._$AV) void 0 !== s4 && (void 0 !== s4.strings ? (s4._$AI(t6, s4, i6), i6 += s4.strings.length - 2) : s4._$AI(t6[i6])), i6++;
+  }
+};
+var R = class _R {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(t6, i6, s4, e8) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t6, this._$AB = i6, this._$AM = s4, this.options = e8, this._$Cv = e8?.isConnected ?? true;
+  }
+  get parentNode() {
+    let t6 = this._$AA.parentNode;
+    const i6 = this._$AM;
+    return void 0 !== i6 && 11 === t6?.nodeType && (t6 = i6.parentNode), t6;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t6, i6 = this) {
+    t6 = S2(this, t6, i6), c3(t6) ? t6 === E || null == t6 || "" === t6 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t6 !== this._$AH && t6 !== T && this._(t6) : void 0 !== t6._$litType$ ? this.$(t6) : void 0 !== t6.nodeType ? this.T(t6) : u2(t6) ? this.k(t6) : this._(t6);
+  }
+  O(t6) {
+    return this._$AA.parentNode.insertBefore(t6, this._$AB);
+  }
+  T(t6) {
+    this._$AH !== t6 && (this._$AR(), this._$AH = this.O(t6));
+  }
+  _(t6) {
+    this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t6 : this.T(r3.createTextNode(t6)), this._$AH = t6;
+  }
+  $(t6) {
+    const { values: i6, _$litType$: s4 } = t6, e8 = "number" == typeof s4 ? this._$AC(t6) : (void 0 === s4.el && (s4.el = N.createElement(P(s4.h, s4.h[0]), this.options)), s4);
+    if (this._$AH?._$AD === e8) this._$AH.p(i6);
+    else {
+      const t7 = new M(e8, this), s5 = t7.u(this.options);
+      t7.p(i6), this.T(s5), this._$AH = t7;
+    }
+  }
+  _$AC(t6) {
+    let i6 = A.get(t6.strings);
+    return void 0 === i6 && A.set(t6.strings, i6 = new N(t6)), i6;
+  }
+  k(t6) {
+    a2(this._$AH) || (this._$AH = [], this._$AR());
+    const i6 = this._$AH;
+    let s4, e8 = 0;
+    for (const h3 of t6) e8 === i6.length ? i6.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i6[e8], s4._$AI(h3), e8++;
+    e8 < i6.length && (this._$AR(s4 && s4._$AB.nextSibling, e8), i6.length = e8);
+  }
+  _$AR(t6 = this._$AA.nextSibling, i6) {
+    for (this._$AP?.(false, true, i6); t6 !== this._$AB; ) {
+      const i7 = t6.nextSibling;
+      t6.remove(), t6 = i7;
+    }
+  }
+  setConnected(t6) {
+    void 0 === this._$AM && (this._$Cv = t6, this._$AP?.(t6));
+  }
+};
+var k = class {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t6, i6, s4, e8, h3) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t6, this.name = i6, this._$AM = e8, this.options = h3, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = E;
+  }
+  _$AI(t6, i6 = this, s4, e8) {
+    const h3 = this.strings;
+    let o8 = false;
+    if (void 0 === h3) t6 = S2(this, t6, i6, 0), o8 = !c3(t6) || t6 !== this._$AH && t6 !== T, o8 && (this._$AH = t6);
+    else {
+      const e9 = t6;
+      let n5, r7;
+      for (t6 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r7 = S2(this, e9[s4 + n5], i6, n5), r7 === T && (r7 = this._$AH[n5]), o8 || (o8 = !c3(r7) || r7 !== this._$AH[n5]), r7 === E ? t6 = E : t6 !== E && (t6 += (r7 ?? "") + h3[n5 + 1]), this._$AH[n5] = r7;
+    }
+    o8 && !e8 && this.j(t6);
+  }
+  j(t6) {
+    t6 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t6 ?? "");
+  }
+};
+var H = class extends k {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t6) {
+    this.element[this.name] = t6 === E ? void 0 : t6;
+  }
+};
+var I = class extends k {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t6) {
+    this.element.toggleAttribute(this.name, !!t6 && t6 !== E);
+  }
+};
+var L = class extends k {
+  constructor(t6, i6, s4, e8, h3) {
+    super(t6, i6, s4, e8, h3), this.type = 5;
+  }
+  _$AI(t6, i6 = this) {
+    if ((t6 = S2(this, t6, i6, 0) ?? E) === T) return;
+    const s4 = this._$AH, e8 = t6 === E && s4 !== E || t6.capture !== s4.capture || t6.once !== s4.once || t6.passive !== s4.passive, h3 = t6 !== E && (s4 === E || e8);
+    e8 && this.element.removeEventListener(this.name, this, s4), h3 && this.element.addEventListener(this.name, this, t6), this._$AH = t6;
+  }
+  handleEvent(t6) {
+    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t6) : this._$AH.handleEvent(t6);
+  }
+};
+var z = class {
+  constructor(t6, i6, s4) {
+    this.element = t6, this.type = 6, this._$AN = void 0, this._$AM = i6, this.options = s4;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t6) {
+    S2(this, t6);
+  }
+};
+var j = t2.litHtmlPolyfillSupport;
+j?.(N, R), (t2.litHtmlVersions ?? (t2.litHtmlVersions = [])).push("3.3.1");
+var B = (t6, i6, s4) => {
+  const e8 = s4?.renderBefore ?? i6;
+  let h3 = e8._$litPart$;
+  if (void 0 === h3) {
+    const t7 = s4?.renderBefore ?? null;
+    e8._$litPart$ = h3 = new R(i6.insertBefore(l2(), t7), t7, void 0, s4 ?? {});
+  }
+  return h3._$AI(t6), h3;
+};
+
+// ../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js
+var s3 = globalThis;
+var i4 = class extends y {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var _a;
+    const t6 = super.createRenderRoot();
+    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t6.firstChild), t6;
+  }
+  update(t6) {
+    const r7 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t6), this._$Do = B(r7, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(false);
+  }
+  render() {
+    return T;
+  }
+};
+i4._$litElement$ = true, i4["finalized"] = true, s3.litElementHydrateSupport?.({ LitElement: i4 });
+var o4 = s3.litElementPolyfillSupport;
+o4?.({ LitElement: i4 });
+(s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.1");
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/custom-element.js
+var t3 = (t6) => (e8, o8) => {
+  void 0 !== o8 ? o8.addInitializer((() => {
+    customElements.define(t6, e8);
+  })) : customElements.define(t6, e8);
+};
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js
+var o5 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f };
+var r4 = (t6 = o5, e8, r7) => {
+  const { kind: n5, metadata: i6 } = r7;
+  let s4 = globalThis.litPropertyMetadata.get(i6);
+  if (void 0 === s4 && globalThis.litPropertyMetadata.set(i6, s4 = /* @__PURE__ */ new Map()), "setter" === n5 && ((t6 = Object.create(t6)).wrapped = true), s4.set(r7.name, t6), "accessor" === n5) {
+    const { name: o8 } = r7;
+    return { set(r8) {
+      const n6 = e8.get.call(this);
+      e8.set.call(this, r8), this.requestUpdate(o8, n6, t6);
+    }, init(e9) {
+      return void 0 !== e9 && this.C(o8, void 0, t6, e9), e9;
+    } };
+  }
+  if ("setter" === n5) {
+    const { name: o8 } = r7;
+    return function(r8) {
+      const n6 = this[o8];
+      e8.call(this, r8), this.requestUpdate(o8, n6, t6);
+    };
+  }
+  throw Error("Unsupported decorator location: " + n5);
+};
+function n4(t6) {
+  return (e8, o8) => "object" == typeof o8 ? r4(t6, e8, o8) : ((t7, e9, o9) => {
+    const r7 = e9.hasOwnProperty(o9);
+    return e9.constructor.createProperty(o9, t7), r7 ? Object.getOwnPropertyDescriptor(e9, o9) : void 0;
+  })(t6, e8, o8);
+}
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js
+function r5(r7) {
+  return n4({ ...r7, state: true, attribute: false });
+}
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/base.js
+var e4 = (e8, t6, c4) => (c4.configurable = true, c4.enumerable = true, Reflect.decorate && "object" != typeof t6 && Object.defineProperty(e8, t6, c4), c4);
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-all.js
+var e5;
+function r6(r7) {
+  return (n5, o8) => e4(n5, o8, { get() {
+    return (this.renderRoot ?? (e5 ?? (e5 = document.createDocumentFragment()))).querySelectorAll(r7);
+  } });
+}
+
+// src/components/consent-button.ts
+var ConsentButton = class extends i4 {
+  constructor() {
+    super();
+    this.variant = "primary";
+    this.type = "button";
+    this.disabled = false;
+    this.fullWidth = false;
+    this.loading = false;
+    this.internals = this.attachInternals();
+  }
+  handleClick() {
+    if (this.disabled || this.loading) return;
+    const form = this.internals.form;
+    if (!form) return;
+    if (this.type === "submit") {
+      form.requestSubmit();
+    } else if (this.type === "reset") {
+      form.reset();
+    }
+  }
+  render() {
+    return x`
+      <button
+        part="button"
+        type="button"
+        ?disabled=${this.disabled || this.loading}
+        aria-busy=${this.loading}
+        @click=${this.handleClick}
+      >
+        ${this.loading ? x`<span class="spinner"></span>` : null}
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+// Enable form association
+ConsentButton.formAssociated = true;
+ConsentButton.styles = i`
+    :host {
+      display: inline-block;
+    }
+
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    button {
+      /* Base styles - matches AgentShield PreviewButton exactly */
+      padding: 0.75rem 1rem;
+      height: 2.75rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: opacity 0.15s ease, background-color 0.15s ease;
+      border: none;
+      width: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+
+    /* Primary variant */
+    :host([variant='primary']) button {
+      background-color: var(--consent-primary, #2563eb);
+      color: white;
+    }
+
+    :host([variant='primary']) button:hover:not(:disabled) {
+      opacity: 0.9;
+    }
+
+    /* Secondary variant */
+    :host([variant='secondary']) button {
+      background-color: transparent;
+      color: #374151;
+      border: 1px solid #d1d5db;
+    }
+
+    :host([variant='secondary']) button:hover:not(:disabled) {
+      background-color: #f9fafb;
+    }
+
+    /* Disabled state */
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Loading spinner */
+    .spinner {
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+__decorateClass([
+  n4({ type: String, reflect: true })
+], ConsentButton.prototype, "variant", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentButton.prototype, "type", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentButton.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "full-width" })
+], ConsentButton.prototype, "fullWidth", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentButton.prototype, "loading", 2);
+ConsentButton = __decorateClass([
+  t3("consent-button")
+], ConsentButton);
+
+// src/components/consent-checkbox.ts
+var ConsentCheckbox = class extends i4 {
+  constructor() {
+    super();
+    this.name = "";
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+    this.value = "on";
+    this.internals = this.attachInternals();
+  }
+  // Update form value when properties change
+  updated(changedProperties) {
+    if (changedProperties.has("checked") || changedProperties.has("value")) {
+      this.updateFormValue();
+    }
+  }
+  updateFormValue() {
+    if (this.checked) {
+      this.internals.setFormValue(this.value);
+    } else {
+      this.internals.setFormValue(null);
+    }
+  }
+  handleChange(e8) {
+    const input = e8.target;
+    this.checked = input.checked;
+    this.updateFormValue();
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this.checked, value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return x`
+      <label part="label">
+        <input
+          part="checkbox"
+          type="checkbox"
+          name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="text">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+};
+// Enable form association
+ConsentCheckbox.formAssociated = true;
+ConsentCheckbox.styles = i`
+    :host {
+      display: block;
+    }
+
+    label {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      cursor: pointer;
+      font-size: 0.875rem;
+      color: #374151;
+      line-height: 1.5;
+    }
+
+    :host([disabled]) label {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* Custom checkbox styling - matches AgentShield exactly */
+    input[type='checkbox'] {
+      /* Reset */
+      appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+
+      /* Size - matches AgentShield w-4 h-4 */
+      width: 1rem;
+      height: 1rem;
+      min-width: 1rem;
+      margin-top: 0.125rem; /* Align with text baseline */
+
+      /* Border */
+      border: 1px solid #d1d5db;
+      border-radius: 0.25rem;
+
+      /* Background */
+      background-color: white;
+
+      /* Interaction */
+      cursor: pointer;
+      position: relative;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    input[type='checkbox']:hover:not(:disabled) {
+      border-color: var(--consent-primary, #2563eb);
+    }
+
+    input[type='checkbox']:focus-visible {
+      outline: 2px solid var(--consent-primary, #2563eb);
+      outline-offset: 2px;
+    }
+
+    /* Checked state */
+    input[type='checkbox']:checked {
+      background-color: var(--consent-primary, #2563eb);
+      border-color: var(--consent-primary, #2563eb);
+    }
+
+    /* Checkmark */
+    input[type='checkbox']:checked::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    /* Disabled */
+    input[type='checkbox']:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    /* Text wrapper */
+    .text {
+      flex: 1;
+    }
+
+    /* Links in label */
+    ::slotted(a) {
+      color: var(--consent-primary, #2563eb);
+      text-decoration: underline;
+    }
+
+    ::slotted(a:hover) {
+      text-decoration: none;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentCheckbox.prototype, "name", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentCheckbox.prototype, "checked", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentCheckbox.prototype, "required", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCheckbox.prototype, "value", 2);
+ConsentCheckbox = __decorateClass([
+  t3("consent-checkbox")
+], ConsentCheckbox);
+
+// src/components/consent-input.ts
+var ConsentInput = class extends i4 {
+  constructor() {
+    super();
+    this.type = "text";
+    this.name = "";
+    this.value = "";
+    this.label = "";
+    this.placeholder = "";
+    this.required = false;
+    this.disabled = false;
+    this.autocomplete = "";
+    this.showPassword = false;
+    this.internals = this.attachInternals();
+  }
+  // Update form value when properties change
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.internals.setFormValue(this.value || null);
+    }
+  }
+  handleInput(e8) {
+    const input = e8.target;
+    this.value = input.value;
+    this.internals.setFormValue(this.value || null);
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleChange(e8) {
+    const input = e8.target;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
+  renderPasswordToggle() {
+    if (this.type !== "password") return null;
+    const icon = this.showPassword ? x`
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+            <line x1="1" y1="1" x2="23" y2="23"/>
+          </svg>
+        ` : x`
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+            <circle cx="12" cy="12" r="3"/>
+          </svg>
+        `;
+    return x`
+      <button
+        type="button"
+        class="password-toggle"
+        @click=${this.togglePasswordVisibility}
+        tabindex="-1"
+        aria-label=${this.showPassword ? "Hide password" : "Show password"}
+      >
+        ${icon}
+      </button>
+    `;
+  }
+  render() {
+    const inputType = this.type === "password" && this.showPassword ? "text" : this.type;
+    return x`
+      <div class="field">
+        ${this.label ? x`
+              <label part="label" for="input">
+                ${this.label}${this.required ? x`<span class="required">*</span>` : null}
+              </label>
+            ` : null}
+        <div class="input-wrapper${this.error ? " has-error" : ""}">
+          <input
+            part="input"
+            id="input"
+            type=${inputType}
+            name=${this.name}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            autocomplete=${this.autocomplete || "off"}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+          ${this.renderPasswordToggle()}
+        </div>
+        ${this.error ? x`<div class="error-message">${this.error}</div>` : null}
+      </div>
+    `;
+  }
+};
+// Enable form association
+ConsentInput.formAssociated = true;
+ConsentInput.styles = i`
+    :host {
+      display: block;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
+    label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #374151;
+    }
+
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    /* Base input styles - use .input-wrapper for higher specificity */
+    .input-wrapper input {
+      width: 100%;
+      padding: 0.625rem 0.75rem;
+      font-size: 0.875rem;
+      font-family: inherit;
+      color: #111827;
+      background-color: white;
+      border: 1px solid #d1d5db;
+      border-radius: 0.5rem;
+      outline: none;
+      box-shadow: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    .input-wrapper input:focus {
+      border-color: var(--consent-primary, #2563eb);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    .input-wrapper input:disabled {
+      background-color: #f9fafb;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .input-wrapper input::placeholder {
+      color: #9ca3af;
+    }
+
+    /* Prevent browser validation styling before user interaction */
+    .input-wrapper input:invalid {
+      border-color: #d1d5db;
+      box-shadow: none;
+      outline: none;
+      background-color: white;
+    }
+
+    /* Override browser autofill styling */
+    .input-wrapper input:-webkit-autofill,
+    .input-wrapper input:-webkit-autofill:hover,
+    .input-wrapper input:-webkit-autofill:focus {
+      -webkit-box-shadow: 0 0 0 1000px white inset;
+      -webkit-text-fill-color: #111827;
+      border-color: #d1d5db;
+      transition: background-color 5000s ease-in-out 0s;
+    }
+
+    /* Only show validation styling after user interaction */
+    .input-wrapper input:user-invalid {
+      border-color: #ef4444;
+    }
+
+    .input-wrapper input:user-invalid:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    /* Password toggle */
+    .input-wrapper input[type='password'] {
+      padding-right: 2.5rem;
+    }
+
+    .password-toggle {
+      position: absolute;
+      right: 0.5rem;
+      padding: 0.375rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: #6b7280;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .password-toggle:hover {
+      color: #374151;
+    }
+
+    .password-toggle svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    /* Error state - use class instead of attribute for proper specificity */
+    .input-wrapper.has-error input {
+      border-color: #ef4444;
+    }
+
+    .input-wrapper.has-error input:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    .error-message {
+      font-size: 0.75rem;
+      color: #ef4444;
+      margin-top: 0.25rem;
+    }
+
+    /* Required indicator */
+    .required {
+      color: #ef4444;
+      margin-left: 0.125rem;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentInput.prototype, "type", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentInput.prototype, "name", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentInput.prototype, "value", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentInput.prototype, "label", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentInput.prototype, "placeholder", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentInput.prototype, "required", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentInput.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentInput.prototype, "autocomplete", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentInput.prototype, "error", 2);
+__decorateClass([
+  r5()
+], ConsentInput.prototype, "showPassword", 2);
+ConsentInput = __decorateClass([
+  t3("consent-input")
+], ConsentInput);
+
+// src/components/consent-shell.ts
+var ConsentShell = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.pageTitle = "Permission Request";
+    this.primaryColor = "#2563EB";
+    this.secondaryColor = "#DBEAFE";
+  }
+  renderLogo() {
+    if (this.logoUrl) {
+      return x`
+        <img
+          class="logo"
+          src=${this.logoUrl}
+          alt=${this.companyName || "Company logo"}
+        />
+      `;
+    }
+    return x`
+      <div class="default-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+            fill="currentColor"
+            opacity="0.2"
+          />
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+      </div>
+    `;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("primaryColor") || changedProperties.has("secondaryColor")) {
+      this.style.setProperty("--consent-primary", this.primaryColor);
+      this.style.setProperty("--consent-secondary", this.secondaryColor);
+    }
+  }
+  render() {
+    return x`
+      <div class="container" part="container">
+        <header class="header" part="header">
+          ${this.renderLogo()}
+          ${this.companyName ? x`<div class="company-name">${this.companyName}</div>` : null}
+          <h1 class="title">${this.pageTitle}</h1>
+        </header>
+
+        <div class="content" part="content">
+          <slot name="content"></slot>
+        </div>
+
+        <footer class="footer" part="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+  }
+};
+ConsentShell.styles = i`
+    :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;
+      /* Allow customization via CSS variables */
+      --_primary: var(--consent-primary, #2563eb);
+      --_secondary: var(--consent-secondary, #dbeafe);
+    }
+
+    /* Container - matches AgentShield PreviewShell exactly */
+    .container {
+      background: white;
+      border-radius: 20px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 8px 10px -6px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      max-width: 512px;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    /* Header */
+    .header {
+      padding: 1.25rem 2rem 0;
+      text-align: center;
+    }
+
+    .logo {
+      max-height: 48px;
+      max-width: 200px;
+      margin-bottom: 0.5rem;
+    }
+
+    .company-name {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin-bottom: 0.5rem;
+    }
+
+    .title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #333333;
+      margin: 0;
+    }
+
+    /* Content */
+    .content {
+      padding: 1rem 2rem 2rem;
+    }
+
+    /* Footer */
+    .footer {
+      padding: 0 2rem 2rem;
+      display: flex;
+      gap: 0.75rem;
+    }
+
+    .footer ::slotted(*) {
+      flex: 1;
+    }
+
+    /* Default icon when no logo */
+    .default-icon {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 0.5rem;
+      background: var(--_secondary);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .default-icon svg {
+      width: 24px;
+      height: 24px;
+      color: var(--_primary);
+    }
+  `;
+__decorateClass([
+  n4({ type: String, attribute: "page-title" })
+], ConsentShell.prototype, "pageTitle", 2);
+__decorateClass([
+  n4({ type: String, attribute: "logo-url" })
+], ConsentShell.prototype, "logoUrl", 2);
+__decorateClass([
+  n4({ type: String, attribute: "company-name" })
+], ConsentShell.prototype, "companyName", 2);
+__decorateClass([
+  n4({ type: String, attribute: "primary-color" })
+], ConsentShell.prototype, "primaryColor", 2);
+__decorateClass([
+  n4({ type: String, attribute: "secondary-color" })
+], ConsentShell.prototype, "secondaryColor", 2);
+ConsentShell = __decorateClass([
+  t3("consent-shell")
+], ConsentShell);
+
+// src/components/consent-permissions.ts
+var ConsentPermissions = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.scopes = [];
+    this.interactive = false;
+    this.selectAll = false;
+    this.iconStyle = "check";
+    this.selectedScopes = /* @__PURE__ */ new Set();
+    /**
+     * Track previous scope IDs to detect newly added scopes
+     * (used to distinguish new scopes from user-deselected scopes)
+     */
+    this.previousScopeIds = /* @__PURE__ */ new Set();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.interactive) {
+      this.initializeSelectedScopes();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("scopes") && this.interactive) {
+      this.reinitializeSelectedScopes();
+    }
+  }
+  /**
+   * Re-initialize selected scopes when scopes change dynamically.
+   * Preserves existing valid selections while adding new scopes based on selectAll/required settings.
+   */
+  reinitializeSelectedScopes() {
+    const currentScopeIds = new Set(this.normalizedScopes.map((s4) => s4.id));
+    const validSelections = new Set(
+      Array.from(this.selectedScopes).filter((id) => currentScopeIds.has(id))
+    );
+    const newScopeIds = Array.from(currentScopeIds).filter(
+      (id) => !this.previousScopeIds.has(id)
+    );
+    if (this.selectAll) {
+      this.selectedScopes = /* @__PURE__ */ new Set([...validSelections, ...newScopeIds]);
+    } else {
+      const requiredIds = this.normalizedScopes.filter((s4) => s4.required).map((s4) => s4.id);
+      this.selectedScopes = /* @__PURE__ */ new Set([...validSelections, ...requiredIds]);
+    }
+    this.previousScopeIds = currentScopeIds;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { selected: this.getSelectedScopes() },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  initializeSelectedScopes() {
+    this.previousScopeIds = new Set(
+      this.normalizedScopes.map((scope) => scope.id)
+    );
+    if (this.selectAll) {
+      this.selectedScopes = new Set(
+        this.normalizedScopes.map((scope) => scope.id)
+      );
+    } else {
+      this.selectedScopes = new Set(
+        this.normalizedScopes.filter((scope) => scope.required).map((scope) => scope.id)
+      );
+    }
+  }
+  /**
+   * Normalize scopes to PermissionItem format
+   */
+  get normalizedScopes() {
+    return this.scopes.map((scope) => {
+      if (typeof scope === "string") {
+        return {
+          id: scope,
+          label: this.formatScopeLabel(scope)
+        };
+      }
+      return scope;
+    });
+  }
+  /**
+   * Convert scope ID to human-readable label
+   */
+  formatScopeLabel(scopeId) {
+    return scopeId.replace(/[_:-]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  /**
+   * Get currently selected scopes
+   */
+  getSelectedScopes() {
+    return Array.from(this.selectedScopes);
+  }
+  handleCheckboxChange(scopeId, checked) {
+    if (checked) {
+      this.selectedScopes.add(scopeId);
+    } else {
+      this.selectedScopes.delete(scopeId);
+    }
+    this.requestUpdate();
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { selected: this.getSelectedScopes() },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  renderIcon() {
+    switch (this.iconStyle) {
+      case "bullet":
+        return x`<div class="icon icon-bullet"></div>`;
+      case "shield":
+        return x`
+          <div class="icon icon-shield">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </div>
+        `;
+      default:
+        return x`
+          <div class="icon icon-check">
+            <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>
+        `;
+    }
+  }
+  renderPermissionItem(scope) {
+    const isSelected = this.selectedScopes.has(scope.id);
+    return x`
+      <li class="permission-item" part="item">
+        ${this.interactive ? x`
+              <input
+                type="checkbox"
+                class="checkbox"
+                .checked=${isSelected}
+                ?disabled=${scope.required}
+                @change=${(e8) => this.handleCheckboxChange(
+      scope.id,
+      e8.target.checked
+    )}
+                aria-label=${scope.label}
+              />
+            ` : this.renderIcon()}
+        <div class="content">
+          <span class="label">
+            ${scope.label}
+            ${scope.required ? x`<span class="required-badge">Required</span>` : null}
+          </span>
+          ${scope.description ? x`<div class="description">${scope.description}</div>` : null}
+        </div>
+      </li>
+    `;
+  }
+  render() {
+    const scopes = this.normalizedScopes;
+    if (scopes.length === 0) {
+      return x`<div class="empty">No permissions requested</div>`;
+    }
+    return x`
+      <ul class="permission-list" part="list" role="list">
+        ${scopes.map((scope) => this.renderPermissionItem(scope))}
+      </ul>
+    `;
+  }
+};
+ConsentPermissions.styles = i`
+    :host {
+      display: block;
+      --_primary: var(--consent-primary, #2563eb);
+    }
+
+    .permission-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .permission-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      padding: 0.625rem 0;
+      font-size: 0.875rem;
+      color: #374151;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .permission-item:last-child {
+      border-bottom: none;
+    }
+
+    /* Icon styles */
+    .icon {
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-top: 0.0625rem;
+    }
+
+    .icon-check {
+      background: var(--_primary);
+      border-radius: 0.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-check svg {
+      width: 0.75rem;
+      height: 0.75rem;
+      color: white;
+    }
+
+    .icon-bullet {
+      background: var(--_primary);
+      border-radius: 50%;
+      width: 0.5rem;
+      height: 0.5rem;
+      margin: 0.375rem;
+    }
+
+    .icon-shield {
+      color: var(--_primary);
+    }
+
+    .icon-shield svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    /* Content */
+    .content {
+      flex: 1;
+    }
+
+    .label {
+      font-weight: 500;
+      color: #111827;
+    }
+
+    .description {
+      font-size: 0.75rem;
+      color: #6b7280;
+      margin-top: 0.125rem;
+    }
+
+    .required-badge {
+      font-size: 0.625rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #6b7280;
+      background: #f3f4f6;
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      margin-left: 0.5rem;
+    }
+
+    /* Interactive mode checkbox */
+    .checkbox {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 1rem;
+      height: 1rem;
+      border: 1px solid #d1d5db;
+      border-radius: 0.25rem;
+      background: white;
+      cursor: pointer;
+      position: relative;
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+    }
+
+    .checkbox:checked {
+      background: var(--_primary);
+      border-color: var(--_primary);
+    }
+
+    .checkbox:checked::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    .checkbox:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .checkbox:focus-visible {
+      outline: 2px solid var(--_primary);
+      outline-offset: 2px;
+    }
+
+    /* Empty state */
+    .empty {
+      text-align: center;
+      color: #6b7280;
+      font-size: 0.875rem;
+      padding: 1rem 0;
+    }
+  `;
+__decorateClass([
+  n4({
+    type: Array,
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return [];
+        try {
+          const parsed = JSON.parse(value);
+          if (!Array.isArray(parsed)) {
+            console.warn("[consent-permissions] Expected array, got:", typeof parsed);
+            return [];
+          }
+          return parsed;
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (value) => {
+        return JSON.stringify(value);
+      }
+    }
+  })
+], ConsentPermissions.prototype, "scopes", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentPermissions.prototype, "interactive", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "select-all" })
+], ConsentPermissions.prototype, "selectAll", 2);
+__decorateClass([
+  n4({ type: String, attribute: "icon-style" })
+], ConsentPermissions.prototype, "iconStyle", 2);
+__decorateClass([
+  r5()
+], ConsentPermissions.prototype, "selectedScopes", 2);
+ConsentPermissions = __decorateClass([
+  t3("consent-permissions")
+], ConsentPermissions);
+
+// src/components/consent-terms.ts
+var ConsentTerms = class extends i4 {
+  constructor() {
+    super();
+    this.name = "termsAccepted";
+    this.text = "Terms and Conditions";
+    this.labelPrefix = "I agree to the";
+    this.conjunction = "and";
+    this.checked = false;
+    this.required = true;
+    this.disabled = false;
+    this.value = "accepted";
+    this.internals = this.attachInternals();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked") || changedProperties.has("value")) {
+      this.updateFormValue();
+    }
+  }
+  updateFormValue() {
+    if (this.checked) {
+      this.internals.setFormValue(this.value);
+    } else {
+      this.internals.setFormValue(null);
+    }
+  }
+  handleChange(e8) {
+    const input = e8.target;
+    this.checked = input.checked;
+    this.updateFormValue();
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this.checked, value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  renderLink(text, url) {
+    if (url) {
+      return x`<a
+        href=${url}
+        target="_blank"
+        rel="noopener noreferrer"
+        part="link"
+        @click=${(e8) => e8.stopPropagation()}
+        >${text}</a
+      >`;
+    }
+    return x`<span>${text}</span>`;
+  }
+  render() {
+    const hasPrivacy = this.privacyText && this.privacyUrl;
+    return x`
+      <label part="label">
+        <input
+          part="checkbox"
+          type="checkbox"
+          name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="text">
+          ${this.labelPrefix} ${this.renderLink(this.text, this.url)}
+          ${hasPrivacy ? x`
+                ${this.conjunction}
+                ${this.renderLink(this.privacyText, this.privacyUrl)}
+              ` : E}
+          ${this.required ? x`<span class="required">*</span>` : E}
+        </span>
+      </label>
+    `;
+  }
+};
+// Enable form association
+ConsentTerms.formAssociated = true;
+ConsentTerms.styles = i`
+    :host {
+      display: block;
+      --_primary: var(--consent-primary, #2563eb);
+    }
+
+    label {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      cursor: pointer;
+      font-size: 0.875rem;
+      color: #374151;
+      line-height: 1.5;
+    }
+
+    :host([disabled]) label {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* Custom checkbox styling - matches AgentShield exactly */
+    input[type='checkbox'] {
+      appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+
+      /* Size - matches AgentShield w-4 h-4 */
+      width: 1rem;
+      height: 1rem;
+      min-width: 1rem;
+      margin-top: 0.125rem;
+
+      /* Border */
+      border: 1px solid #d1d5db;
+      border-radius: 0.25rem;
+
+      /* Background */
+      background-color: white;
+
+      /* Interaction */
+      cursor: pointer;
+      position: relative;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    input[type='checkbox']:hover:not(:disabled) {
+      border-color: var(--_primary);
+    }
+
+    input[type='checkbox']:focus-visible {
+      outline: 2px solid var(--_primary);
+      outline-offset: 2px;
+    }
+
+    /* Checked state */
+    input[type='checkbox']:checked {
+      background-color: var(--_primary);
+      border-color: var(--_primary);
+    }
+
+    /* Checkmark */
+    input[type='checkbox']:checked::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    /* Disabled */
+    input[type='checkbox']:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    /* Text wrapper */
+    .text {
+      flex: 1;
+    }
+
+    /* Links */
+    a {
+      color: var(--_primary);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--_primary);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
+    /* Required indicator */
+    .required {
+      color: #ef4444;
+      margin-left: 0.125rem;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentTerms.prototype, "name", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentTerms.prototype, "text", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentTerms.prototype, "url", 2);
+__decorateClass([
+  n4({ type: String, attribute: "privacy-text" })
+], ConsentTerms.prototype, "privacyText", 2);
+__decorateClass([
+  n4({ type: String, attribute: "privacy-url" })
+], ConsentTerms.prototype, "privacyUrl", 2);
+__decorateClass([
+  n4({ type: String, attribute: "label-prefix" })
+], ConsentTerms.prototype, "labelPrefix", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentTerms.prototype, "conjunction", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentTerms.prototype, "checked", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentTerms.prototype, "required", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentTerms.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentTerms.prototype, "value", 2);
+ConsentTerms = __decorateClass([
+  t3("consent-terms")
+], ConsentTerms);
+
+// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directive.js
+var t4 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
+var e6 = (t6) => (...e8) => ({ _$litDirective$: t6, values: e8 });
+var i5 = class {
+  constructor(t6) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t6, e8, i6) {
+    this._$Ct = t6, this._$AM = e8, this._$Ci = i6;
+  }
+  _$AS(t6, e8) {
+    return this.update(t6, e8);
+  }
+  update(t6, e8) {
+    return this.render(...e8);
+  }
+};
+
+// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js
+var e7 = class extends i5 {
+  constructor(i6) {
+    if (super(i6), this.it = E, i6.type !== t4.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(r7) {
+    if (r7 === E || null == r7) return this._t = void 0, this.it = r7;
+    if (r7 === T) return r7;
+    if ("string" != typeof r7) throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r7 === this.it) return this._t;
+    this.it = r7;
+    const s4 = [r7];
+    return s4.raw = s4, this._t = { _$litType$: this.constructor.resultType, strings: s4, values: [] };
+  }
+};
+e7.directiveName = "unsafeHTML", e7.resultType = 1;
+var o6 = e6(e7);
+
+// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-svg.js
+var t5 = class extends e7 {
+};
+t5.directiveName = "unsafeSVG", t5.resultType = 2;
+var o7 = e6(t5);
+
+// src/components/consent-oauth-button.ts
+function sanitizeSvg(svg) {
+  if (!svg || typeof svg !== "string") return "";
+  let sanitized = svg.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  sanitized = sanitized.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, "");
+  sanitized = sanitized.replace(/\s*on\w+\s*=\s*[^\s>]*/gi, "");
+  sanitized = sanitized.replace(/(href|src|xlink:href)\s*=\s*["']?\s*javascript:[^"'>\s]*/gi, '$1=""');
+  sanitized = sanitized.replace(/(href|src|xlink:href)\s*=\s*["']?\s*data:[^"'>\s]*/gi, '$1=""');
+  sanitized = sanitized.replace(/data:text\/html[^"'>\s]*/gi, "");
+  return sanitized;
+}
+var PROVIDER_CONFIGS = {
+  google: {
+    name: "Google",
+    bgColor: "#ffffff",
+    textColor: "#374151",
+    borderColor: "#d1d5db",
+    hoverBgColor: "#f9fafb"
+  },
+  microsoft: {
+    name: "Microsoft",
+    bgColor: "#2f2f2f",
+    textColor: "#ffffff",
+    borderColor: "#2f2f2f",
+    hoverBgColor: "#1f1f1f"
+  },
+  apple: {
+    name: "Apple",
+    bgColor: "#000000",
+    textColor: "#ffffff",
+    borderColor: "#000000",
+    hoverBgColor: "#1a1a1a"
+  },
+  github: {
+    name: "GitHub",
+    bgColor: "#24292f",
+    textColor: "#ffffff",
+    borderColor: "#24292f",
+    hoverBgColor: "#1b1f23"
+  },
+  twitter: {
+    name: "Twitter",
+    bgColor: "#1da1f2",
+    textColor: "#ffffff",
+    borderColor: "#1da1f2",
+    hoverBgColor: "#0c8de4"
+  },
+  facebook: {
+    name: "Facebook",
+    bgColor: "#1877f2",
+    textColor: "#ffffff",
+    borderColor: "#1877f2",
+    hoverBgColor: "#0b5ed7"
+  },
+  custom: {
+    name: "Sign in",
+    bgColor: "#ffffff",
+    textColor: "#374151",
+    borderColor: "#d1d5db",
+    hoverBgColor: "#f9fafb"
+  }
+};
+var ConsentOAuthButton = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.provider = "custom";
+    this.url = "";
+    this.loading = false;
+    this.disabled = false;
+    this.fullWidth = false;
+    this.redirecting = false;
+  }
+  get config() {
+    return PROVIDER_CONFIGS[this.provider] || PROVIDER_CONFIGS.custom;
+  }
+  get displayName() {
+    if (this.providerName) return this.providerName;
+    return this.config.name;
+  }
+  get displayText() {
+    if (this.buttonText) return this.buttonText;
+    return `Continue with ${this.displayName}`;
+  }
+  handleClick() {
+    if (this.disabled || this.loading || this.redirecting) return;
+    if (this.url) {
+      this.redirecting = true;
+      window.location.href = this.url;
+    }
+    this.dispatchEvent(
+      new CustomEvent("oauth-click", {
+        detail: { provider: this.provider, url: this.url },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  renderProviderIcon() {
+    if (this.customIcon) {
+      const sanitized = sanitizeSvg(this.customIcon);
+      return x`<div class="icon">${o7(sanitized)}</div>`;
+    }
+    switch (this.provider) {
+      case "google":
+        return x`
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="#4285F4"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="#34A853"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="#FBBC05"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="#EA4335"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+          </div>
+        `;
+      case "microsoft":
+        return x`
+          <div class="icon">
+            <svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
+              <rect x="1" y="1" width="9" height="9" fill="#f25022" />
+              <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
+              <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
+              <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
+            </svg>
+          </div>
+        `;
+      case "apple":
+        return x`
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+              />
+            </svg>
+          </div>
+        `;
+      case "github":
+        return x`
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
+              />
+            </svg>
+          </div>
+        `;
+      case "twitter":
+        return x`
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </div>
+        `;
+      case "facebook":
+        return x`
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+              />
+            </svg>
+          </div>
+        `;
+      default:
+        return E;
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("provider")) {
+      const config = this.config;
+      this.style.setProperty("--button-bg", config.bgColor);
+      this.style.setProperty("--button-text", config.textColor);
+      this.style.setProperty("--button-border", config.borderColor);
+      this.style.setProperty("--button-hover-bg", config.hoverBgColor);
+    }
+  }
+  render() {
+    const isLoading = this.loading || this.redirecting;
+    return x`
+      <button
+        part="button"
+        type="button"
+        ?disabled=${this.disabled || isLoading}
+        @click=${this.handleClick}
+        style="
+          background-color: var(--button-bg, ${this.config.bgColor});
+          color: var(--button-text, ${this.config.textColor});
+          border: 1px solid var(--button-border, ${this.config.borderColor});
+        "
+        aria-busy=${isLoading}
+      >
+        ${isLoading ? x`<span class="spinner"></span>` : this.renderProviderIcon()}
+        <span class="text" part="text">${this.displayText}</span>
+      </button>
+    `;
+  }
+};
+ConsentOAuthButton.styles = i`
+    :host {
+      display: inline-block;
+    }
+
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    button {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      height: 2.75rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background-color 0.15s ease, opacity 0.15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    button:focus-visible {
+      outline: 2px solid #2563eb;
+      outline-offset: 2px;
+    }
+
+    .icon {
+      width: 1.125rem;
+      height: 1.125rem;
+      flex-shrink: 0;
+    }
+
+    .icon svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Loading spinner */
+    .spinner {
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .text {
+      flex: 1;
+      text-align: center;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentOAuthButton.prototype, "provider", 2);
+__decorateClass([
+  n4({ type: String, attribute: "provider-name" })
+], ConsentOAuthButton.prototype, "providerName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentOAuthButton.prototype, "url", 2);
+__decorateClass([
+  n4({ type: String, attribute: "button-text" })
+], ConsentOAuthButton.prototype, "buttonText", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentOAuthButton.prototype, "loading", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentOAuthButton.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "full-width" })
+], ConsentOAuthButton.prototype, "fullWidth", 2);
+__decorateClass([
+  n4({ type: String, attribute: "custom-icon" })
+], ConsentOAuthButton.prototype, "customIcon", 2);
+__decorateClass([
+  r5()
+], ConsentOAuthButton.prototype, "redirecting", 2);
+ConsentOAuthButton = __decorateClass([
+  t3("consent-oauth-button")
+], ConsentOAuthButton);
+
+// src/components/consent-otp-input.ts
+var ConsentOTPInput = class extends i4 {
+  constructor() {
+    super();
+    this.length = 6;
+    this.name = "otp";
+    this.value = "";
+    this.disabled = false;
+    this.error = false;
+    this.autoFocus = false;
+    this.inputType = "text";
+    this.digits = [];
+    this.internals = this.attachInternals();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeDigits();
+  }
+  initializeDigits() {
+    this.digits = Array.from({ length: this.length }, () => "");
+    if (this.value) {
+      const digitsOnly = this.value.replace(/\D/g, "").slice(0, this.length);
+      const chars = digitsOnly.split("");
+      chars.forEach((char, i6) => {
+        this.digits[i6] = char;
+      });
+    }
+  }
+  firstUpdated() {
+    if (this.autoFocus && this.inputs.length > 0) {
+      this.inputs[0]?.focus();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value") && !changedProperties.has("digits")) {
+      this.initializeDigits();
+    }
+    if (changedProperties.has("length")) {
+      this.initializeDigits();
+    }
+    const fullValue = this.digits.join("");
+    this.internals.setFormValue(fullValue || null);
+  }
+  getFullValue() {
+    return this.digits.join("");
+  }
+  handleInput(index, e8) {
+    const input = e8.target;
+    let newValue = input.value;
+    if (newValue.length > 1) {
+      newValue = newValue.slice(-1);
+    }
+    if (newValue && !/^\d$/.test(newValue)) {
+      input.value = this.digits[index] ?? "";
+      return;
+    }
+    this.digits[index] = newValue;
+    this.digits = [...this.digits];
+    input.value = newValue;
+    const fullValue = this.getFullValue();
+    this.value = fullValue;
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: fullValue, index, digit: newValue },
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (newValue && index < this.length - 1) {
+      this.inputs[index + 1]?.focus();
+    }
+    if (fullValue.length === this.length) {
+      this.dispatchEvent(
+        new CustomEvent("complete", {
+          detail: { value: fullValue },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: fullValue },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleKeyDown(index, e8) {
+    switch (e8.key) {
+      case "Backspace":
+        if (!this.digits[index] && index > 0) {
+          e8.preventDefault();
+          this.inputs[index - 1]?.focus();
+          this.digits[index - 1] = "";
+          this.digits = [...this.digits];
+        } else {
+          this.digits[index] = "";
+          this.digits = [...this.digits];
+        }
+        this.value = this.getFullValue();
+        break;
+      case "ArrowLeft":
+        e8.preventDefault();
+        if (index > 0) {
+          this.inputs[index - 1]?.focus();
+        }
+        break;
+      case "ArrowRight":
+        e8.preventDefault();
+        if (index < this.length - 1) {
+          this.inputs[index + 1]?.focus();
+        }
+        break;
+      case "Delete":
+        this.digits[index] = "";
+        this.digits = [...this.digits];
+        this.value = this.getFullValue();
+        break;
+    }
+  }
+  handlePaste(e8) {
+    e8.preventDefault();
+    const pastedData = e8.clipboardData?.getData("text") || "";
+    const digits = pastedData.replace(/\D/g, "").slice(0, this.length);
+    if (digits) {
+      this.digits = Array.from({ length: this.length }, (_2, i6) => digits[i6] || "");
+      this.value = this.getFullValue();
+      this.requestUpdate();
+      const focusIndex = Math.min(digits.length, this.length - 1);
+      setTimeout(() => {
+        this.inputs[focusIndex]?.focus();
+      }, 0);
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+      if (digits.length === this.length) {
+        this.dispatchEvent(
+          new CustomEvent("complete", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    }
+  }
+  handleFocus(e8) {
+    const input = e8.target;
+    input.select();
+  }
+  /**
+   * Focus the first empty input or the last input
+   */
+  focus() {
+    const emptyIndex = this.digits.findIndex((d3) => !d3);
+    const focusIndex = emptyIndex >= 0 ? emptyIndex : this.length - 1;
+    this.inputs[focusIndex]?.focus();
+  }
+  /**
+   * Clear all digits
+   */
+  clear() {
+    this.digits = Array.from({ length: this.length }, () => "");
+    this.value = "";
+    this.inputs[0]?.focus();
+  }
+  renderDigitInput(index) {
+    const digit = this.digits[index] || "";
+    const isFilled = digit !== "";
+    return x`
+      <input
+        part="input"
+        type=${this.inputType}
+        inputmode="numeric"
+        pattern="[0-9]*"
+        maxlength="1"
+        .value=${digit}
+        ?disabled=${this.disabled}
+        placeholder="○"
+        class=${isFilled ? "filled" : ""}
+        @input=${(e8) => this.handleInput(index, e8)}
+        @keydown=${(e8) => this.handleKeyDown(index, e8)}
+        @paste=${this.handlePaste}
+        @focus=${this.handleFocus}
+        aria-label=${`Digit ${index + 1} of ${this.length}`}
+      />
+    `;
+  }
+  render() {
+    return x`
+      <div class="container" part="container" role="group" aria-label="One-time password input">
+        ${Array.from({ length: this.length }, (_2, i6) => this.renderDigitInput(i6))}
+      </div>
+    `;
+  }
+};
+// Enable form association
+ConsentOTPInput.formAssociated = true;
+ConsentOTPInput.styles = i`
+    :host {
+      display: block;
+      --_primary: var(--consent-primary, #2563eb);
+    }
+
+    .container {
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+    }
+
+    input {
+      width: 2.75rem;
+      height: 3.5rem;
+      text-align: center;
+      font-size: 1.5rem;
+      font-weight: 600;
+      font-family: inherit;
+      color: #111827;
+      background: white;
+      border: 1px solid #d1d5db;
+      border-radius: 0.5rem;
+      outline: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+      /* Hide spinner for number inputs */
+      -moz-appearance: textfield;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    input:focus {
+      border-color: var(--_primary);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    input:disabled {
+      background: #f9fafb;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    input::placeholder {
+      color: #d1d5db;
+    }
+
+    /* Error state */
+    :host([error]) input {
+      border-color: #ef4444;
+    }
+
+    :host([error]) input:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    /* Filled state */
+    input.filled {
+      border-color: var(--_primary);
+      background: #f0f9ff;
+    }
+
+    /* Responsive: smaller on mobile */
+    @media (max-width: 400px) {
+      input {
+        width: 2.25rem;
+        height: 3rem;
+        font-size: 1.25rem;
+      }
+
+      .container {
+        gap: 0.375rem;
+      }
+    }
+  `;
+__decorateClass([
+  n4({ type: Number })
+], ConsentOTPInput.prototype, "length", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentOTPInput.prototype, "name", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentOTPInput.prototype, "value", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentOTPInput.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentOTPInput.prototype, "error", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "auto-focus" })
+], ConsentOTPInput.prototype, "autoFocus", 2);
+__decorateClass([
+  n4({ type: String, attribute: "input-type" })
+], ConsentOTPInput.prototype, "inputType", 2);
+__decorateClass([
+  r5()
+], ConsentOTPInput.prototype, "digits", 2);
+__decorateClass([
+  r6("input")
+], ConsentOTPInput.prototype, "inputs", 2);
+ConsentOTPInput = __decorateClass([
+  t3("consent-otp-input")
+], ConsentOTPInput);
+
+// src/types/modes.types.ts
+var AUTH_MODES = {
+  /** Simple consent with no authentication */
+  CONSENT_ONLY: "consent-only",
+  /** Username/password authentication */
+  CREDENTIALS: "credentials",
+  /** OAuth provider authentication */
+  OAUTH: "oauth",
+  /** Email magic link authentication */
+  MAGIC_LINK: "magic-link",
+  /** One-time password (SMS/TOTP) authentication */
+  OTP: "otp",
+  /** QR code scanning authentication (future) */
+  QR_CODE: "qr-code",
+  /** Passkey/WebAuthn authentication (future) */
+  PASSKEY: "passkey",
+  /** Identity verification (future) */
+  IDV: "idv"
+};
+
+// src/constants/colors.ts
+var DEFAULT_COLORS = {
+  /** Primary brand color - Tailwind blue-600 */
+  PRIMARY: "#2563EB",
+  /** Secondary/accent color - Tailwind blue-100 */
+  SECONDARY: "#DBEAFE",
+  /** Background color */
+  BACKGROUND: "#F9FAFB",
+  /** Text colors */
+  TEXT_PRIMARY: "#111827",
+  TEXT_SECONDARY: "#6B7280",
+  TEXT_MUTED: "#9CA3AF",
+  /** Border colors */
+  BORDER: "#E5E7EB",
+  BORDER_DARK: "#D1D5DB",
+  /** Success color - Tailwind green-600 */
+  SUCCESS: "#16A34A",
+  /** Error color - Tailwind red-600 */
+  ERROR: "#DC2626",
+  /** Warning color - Tailwind amber-500 */
+  WARNING: "#F59E0B"
+};
+
+// src/constants/defaults.ts
+var DEFAULT_BRANDING = {
+  primaryColor: DEFAULT_COLORS.PRIMARY,
+  secondaryColor: DEFAULT_COLORS.SECONDARY,
+  logoUrl: void 0,
+  companyName: void 0
+};
+var DEFAULT_UI = {
+  title: "Permission request",
+  description: "It looks like you would like to use [AI Agent] to access resources on your behalf.",
+  expirationText: "This delegation will expire in",
+  cancelButtonText: "Cancel",
+  submitButtonText: "Allow access",
+  permissionsHeader: "The agent is requesting the following permissions:",
+  autoClose: false,
+  popupEnabled: false,
+  theme: "auto"
+};
+var DEFAULT_TERMS = {
+  text: "Terms and Conditions",
+  url: void 0,
+  version: void 0,
+  required: true
+};
+var DEFAULT_SUCCESS = {
+  title: "Access Granted",
+  description: "The agent now has permission to act on your behalf.",
+  showCredential: true,
+  redirectUrl: void 0,
+  redirectDelay: void 0,
+  continueButtonText: "Close"
+};
+var DEFAULT_EXPIRATION_DAYS = 30;
+
+// src/resolution/resolve-branding.ts
+function isValidHexColor(color) {
+  if (!color) return false;
+  return /^#[0-9A-Fa-f]{6}$/.test(color);
+}
+function sanitizeColor(color, defaultColor) {
+  if (isValidHexColor(color)) {
+    return color;
+  }
+  return defaultColor;
+}
+function isValidUrl(url) {
+  if (!url) return false;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function sanitizeUrl(url) {
+  if (isValidUrl(url)) {
+    return url;
+  }
+  return void 0;
+}
+function hexToRgb(hex) {
+  const cleanHex = hex.replace(/^#/, "");
+  const r7 = parseInt(cleanHex.slice(0, 2), 16);
+  const g2 = parseInt(cleanHex.slice(2, 4), 16);
+  const b3 = parseInt(cleanHex.slice(4, 6), 16);
+  return `${r7}, ${g2}, ${b3}`;
+}
+function generateBrandingCSSVars(branding) {
+  return {
+    "--consent-primary": branding.primaryColor,
+    "--consent-secondary": branding.secondaryColor,
+    "--consent-primary-rgb": hexToRgb(branding.primaryColor),
+    "--consent-secondary-rgb": hexToRgb(branding.secondaryColor)
+  };
+}
+function resolveConsentBranding(branding) {
+  const primaryColor = sanitizeColor(
+    branding?.primaryColor,
+    DEFAULT_COLORS.PRIMARY
+  );
+  const secondaryColor = sanitizeColor(
+    branding?.secondaryColor,
+    DEFAULT_COLORS.SECONDARY
+  );
+  const logoUrl = sanitizeUrl(branding?.logoUrl);
+  const companyName = branding?.companyName?.trim() || void 0;
+  const cssVars = generateBrandingCSSVars({ primaryColor, secondaryColor });
+  return {
+    primaryColor,
+    secondaryColor,
+    logoUrl,
+    companyName,
+    cssVars
+  };
+}
+
+// src/resolution/resolve-copy.ts
+var AGENT_NAME_PLACEHOLDER = "[AI Agent]";
+function substituteAgentName(text, agentName) {
+  if (!agentName) {
+    return text;
+  }
+  return text.replace(new RegExp(escapeRegExp(AGENT_NAME_PLACEHOLDER), "g"), agentName);
+}
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function resolveConsentCopy(config, agentName) {
+  const ui = config?.ui ?? {};
+  const terms = config?.terms ?? {};
+  const success = config?.success ?? {};
+  const rawTitle = ui.title ?? DEFAULT_UI.title;
+  const rawDescription = ui.description ?? DEFAULT_UI.description;
+  const rawExpirationText = ui.expirationText ?? DEFAULT_UI.expirationText;
+  const rawCancelButtonText = ui.cancelButtonText ?? DEFAULT_UI.cancelButtonText;
+  const rawSubmitButtonText = ui.submitButtonText ?? DEFAULT_UI.submitButtonText;
+  const rawPermissionsHeader = ui.permissionsHeader ?? DEFAULT_UI.permissionsHeader;
+  const rawTermsText = terms.text ?? DEFAULT_TERMS.text;
+  const rawSuccessTitle = success.title ?? DEFAULT_SUCCESS.title;
+  const rawSuccessDescription = success.description ?? DEFAULT_SUCCESS.description;
+  const resolvedDescription = substituteAgentName(rawDescription, agentName);
+  const resolvedSuccessDescription = substituteAgentName(rawSuccessDescription, agentName);
+  return {
+    // Raw values (without substitution)
+    title: rawTitle,
+    description: rawDescription,
+    expirationText: rawExpirationText,
+    cancelButtonText: rawCancelButtonText,
+    submitButtonText: rawSubmitButtonText,
+    permissionsHeader: rawPermissionsHeader,
+    termsText: rawTermsText,
+    termsUrl: terms.url,
+    termsRequired: terms.required ?? DEFAULT_TERMS.required,
+    // Resolved values (with substitution)
+    resolvedDescription,
+    // Success page
+    successTitle: rawSuccessTitle,
+    successDescription: rawSuccessDescription,
+    resolvedSuccessDescription,
+    showCredential: success.showCredential ?? DEFAULT_SUCCESS.showCredential,
+    continueButtonText: success.continueButtonText ?? DEFAULT_SUCCESS.continueButtonText
+  };
+}
+
+// src/resolution/resolve-config.ts
+function resolveCustomFields(fields) {
+  if (!fields || fields.length === 0) {
+    return [];
+  }
+  const limitedFields = fields.slice(0, 10);
+  return limitedFields.filter((field) => {
+    if (!field.name || !field.label) return false;
+    if (!/^[a-zA-Z0-9_]+$/.test(field.name)) return false;
+    if (field.type === "select" && (!field.options || field.options.length === 0)) {
+      return false;
+    }
+    return true;
+  });
+}
+function resolveExpirationDays(days) {
+  if (days === void 0 || days === null) {
+    return DEFAULT_EXPIRATION_DAYS;
+  }
+  if (days < 1) return 1;
+  if (days > 365) return 365;
+  return Math.floor(days);
+}
+function determineAuthMode(config) {
+  if (config?.oauth?.providerId) {
+    return AUTH_MODES.OAUTH;
+  }
+  if (config?.credentials?.usernameLabel || config?.credentials?.passwordLabel) {
+    return AUTH_MODES.CREDENTIALS;
+  }
+  if (config?.magicLink?.enabled) {
+    return AUTH_MODES.MAGIC_LINK;
+  }
+  if (config?.otp?.enabled) {
+    return AUTH_MODES.OTP;
+  }
+  return AUTH_MODES.CONSENT_ONLY;
+}
+function resolveUISettings(ui) {
+  return {
+    title: ui?.title ?? DEFAULT_UI.title,
+    description: ui?.description ?? DEFAULT_UI.description,
+    expirationText: ui?.expirationText ?? DEFAULT_UI.expirationText,
+    cancelButtonText: ui?.cancelButtonText ?? DEFAULT_UI.cancelButtonText,
+    submitButtonText: ui?.submitButtonText ?? DEFAULT_UI.submitButtonText,
+    permissionsHeader: ui?.permissionsHeader ?? DEFAULT_UI.permissionsHeader,
+    autoClose: ui?.autoClose ?? DEFAULT_UI.autoClose,
+    popupEnabled: ui?.popupEnabled ?? DEFAULT_UI.popupEnabled,
+    theme: ui?.theme ?? DEFAULT_UI.theme
+  };
+}
+function resolveTermsSettings(terms) {
+  return {
+    text: terms?.text ?? DEFAULT_TERMS.text,
+    url: terms?.url,
+    version: terms?.version,
+    required: terms?.required ?? DEFAULT_TERMS.required
+  };
+}
+function resolveSuccessSettings(success) {
+  return {
+    title: success?.title ?? DEFAULT_SUCCESS.title,
+    description: success?.description ?? DEFAULT_SUCCESS.description,
+    showCredential: success?.showCredential ?? DEFAULT_SUCCESS.showCredential,
+    redirectUrl: success?.redirectUrl,
+    redirectDelay: success?.redirectDelay,
+    continueButtonText: success?.continueButtonText ?? DEFAULT_SUCCESS.continueButtonText
+  };
+}
+function resolveConsentConfig(config, agentName) {
+  const branding = resolveConsentBranding(config?.branding);
+  const copy = resolveConsentCopy(config, agentName);
+  const ui = resolveUISettings(config?.ui);
+  const terms = resolveTermsSettings(config?.terms);
+  const success = resolveSuccessSettings(config?.success);
+  const customFields = resolveCustomFields(config?.customFields);
+  const expirationDays = resolveExpirationDays(config?.expirationDays);
+  const authMode = determineAuthMode(config);
+  return {
+    branding,
+    copy,
+    ui,
+    terms,
+    success,
+    customFields,
+    expirationDays,
+    authMode,
+    // Passthrough mode configs
+    credentials: config?.credentials,
+    oauth: config?.oauth,
+    magicLink: config?.magicLink,
+    otp: config?.otp,
+    qrCode: config?.qrCode,
+    passkey: config?.passkey,
+    idv: config?.idv
+  };
+}
+
+// src/components/mcp-consent.ts
+var McpConsent = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.tool = "";
+    this.scopes = [];
+    this.agentDid = "";
+    this.sessionId = "";
+    this.projectId = "";
+    this.serverUrl = "";
+    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;
+    this.selectedScopes = [...this.scopes];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.resendCooldownInterval !== void 0) {
+      clearInterval(this.resendCooldownInterval);
+      this.resendCooldownInterval = void 0;
+    }
+  }
+  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;
+    }
+    if (changedProperties.has("scopes")) {
+      this.selectedScopes = [...this.scopes];
+    }
+    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(e8) {
+    e8?.preventDefault();
+    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 = void 0;
+    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));
+      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 (e9) {
+      this.error = e9 instanceof Error ? e9.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
+      })
+    );
+    window.close();
+  }
+  handleTermsChange(e8) {
+    this.termsAccepted = e8.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;
+    if (this.resendCooldownInterval !== void 0) {
+      clearInterval(this.resendCooldownInterval);
+    }
+    this.resendCooldownInterval = setInterval(() => {
+      this.resendCooldown--;
+      if (this.resendCooldown <= 0) {
+        clearInterval(this.resendCooldownInterval);
+        this.resendCooldownInterval = void 0;
+      }
+    }, 1e3);
+    this.dispatchEvent(
+      new CustomEvent("mcp-consent:resend-otp", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // === RENDER METHODS ===
+  renderAgentInfo() {
+    const agentDisplay = this.agentName || "this agent";
+    return x`
+      <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 ? x`use the <strong>${this.tool}</strong> tool` : "access your data"}
+            on your behalf.
+          </p>
+        </div>
+      </div>
+    `;
+  }
+  handlePermissionsChange(e8) {
+    this.selectedScopes = e8.detail.selected;
+  }
+  renderPermissions() {
+    if (this.scopes.length === 0) return E;
+    return x`
+      <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 x`
+      <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 E;
+    return x`
+      <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 E;
+    return x`<div class="error-message">${this.error}</div>`;
+  }
+  renderFooter() {
+    return x`
+      <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 x`
+      <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 x`
+      <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=${(e8) => this.handleInputChange("username", e8.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=${(e8) => this.handleInputChange("password", e8.detail.value)}
+            ></consent-input>
+          </div>
+
+          ${creds?.showForgotPassword && creds.forgotPasswordUrl ? x`
+                <p style="text-align: right; margin-bottom: 1rem;">
+                  <a
+                    href=${creds.forgotPasswordUrl}
+                    style="font-size: 0.75rem; color: var(--_primary);"
+                  >
+                    Forgot password?
+                  </a>
+                </p>
+              ` : E}
+          ${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 x`
+      <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 x`
+      <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=${(e8) => this.handleInputChange("email", e8.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 x`
+      <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=${(e8) => {
+      this.handleInputChange("otp", e8.detail.value);
+      this.handleApprove();
+    }}
+              @input=${(e8) => this.handleInputChange("otp", e8.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 x`
+      <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 = i`
+    :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;
+    }
+  `;
+__decorateClass([
+  n4({
+    type: Object,
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return void 0;
+        }
+      },
+      toAttribute: (value) => {
+        return value ? JSON.stringify(value) : "";
+      }
+    }
+  })
+], McpConsent.prototype, "config", 2);
+__decorateClass([
+  n4({ type: String })
+], McpConsent.prototype, "mode", 2);
+__decorateClass([
+  n4({ type: String })
+], McpConsent.prototype, "tool", 2);
+__decorateClass([
+  n4({
+    type: Array,
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return [];
+        try {
+          return JSON.parse(value);
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (value) => {
+        return JSON.stringify(value);
+      }
+    }
+  })
+], McpConsent.prototype, "scopes", 2);
+__decorateClass([
+  n4({ type: String, attribute: "agent-did" })
+], McpConsent.prototype, "agentDid", 2);
+__decorateClass([
+  n4({ type: String, attribute: "session-id" })
+], McpConsent.prototype, "sessionId", 2);
+__decorateClass([
+  n4({ type: String, attribute: "project-id" })
+], McpConsent.prototype, "projectId", 2);
+__decorateClass([
+  n4({ type: String, attribute: "server-url" })
+], McpConsent.prototype, "serverUrl", 2);
+__decorateClass([
+  n4({ type: String, attribute: "agent-name" })
+], McpConsent.prototype, "agentName", 2);
+__decorateClass([
+  n4({
+    type: Object,
+    attribute: "oauth-identity",
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return void 0;
+        }
+      },
+      toAttribute: (value) => {
+        return value ? JSON.stringify(value) : "";
+      }
+    }
+  })
+], McpConsent.prototype, "oauthIdentity", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "resolved", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "currentMode", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "loading", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "error", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "step", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "termsAccepted", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "formData", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "resendCooldown", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "selectedScopes", 2);
+McpConsent = __decorateClass([
+  t3("mcp-consent")
+], McpConsent);
+export {
+  ConsentButton,
+  ConsentCheckbox,
+  ConsentInput,
+  ConsentOAuthButton,
+  ConsentOTPInput,
+  ConsentPermissions,
+  ConsentShell,
+  ConsentTerms,
+  McpConsent
+};
+/*! Bundled license information:
+
+@lit/reactive-element/css-tag.js:
+  (**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/reactive-element.js:
+lit-html/lit-html.js:
+lit-element/lit-element.js:
+@lit/reactive-element/decorators/custom-element.js:
+@lit/reactive-element/decorators/property.js:
+@lit/reactive-element/decorators/state.js:
+@lit/reactive-element/decorators/event-options.js:
+@lit/reactive-element/decorators/base.js:
+@lit/reactive-element/decorators/query.js:
+@lit/reactive-element/decorators/query-all.js:
+@lit/reactive-element/decorators/query-async.js:
+@lit/reactive-element/decorators/query-assigned-nodes.js:
+lit-html/directive.js:
+lit-html/directives/unsafe-html.js:
+lit-html/directives/unsafe-svg.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/is-server.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-assigned-elements.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/