obi-sdk 0.1.2 → 0.1.4

package/dist/modular/ui.js

@@ -1,1974 +1,11 @@
-import { S as SDKState, z as z$1, N as N$1 } from "./chunks/index-634e0df5.js";
-const t$2 = globalThis, e$4 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$6 = /* @__PURE__ */ new WeakMap();
-let n$5 = class n {
-  constructor(t2, e2, o2) {
-    if (this._$cssResult$ = true, o2 !== s$3)
-      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t2, this.t = e2;
-  }
-  get styleSheet() {
-    let t2 = this.o;
-    const s2 = this.t;
-    if (e$4 && void 0 === t2) {
-      const e2 = void 0 !== s2 && 1 === s2.length;
-      e2 && (t2 = o$6.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$6.set(s2, t2));
-    }
-    return t2;
-  }
-  toString() {
-    return this.cssText;
-  }
-};
-const r$5 = (t2) => new n$5("string" == typeof t2 ? t2 : t2 + "", void 0, s$3), i$4 = (t2, ...e2) => {
-  const o2 = 1 === t2.length ? t2[0] : e2.reduce((e3, s2, o3) => e3 + ((t3) => {
-    if (true === t3._$cssResult$)
-      return t3.cssText;
-    if ("number" == typeof t3)
-      return t3;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(s2) + t2[o3 + 1], t2[0]);
-  return new n$5(o2, t2, s$3);
-}, S$1 = (s2, o2) => {
-  if (e$4)
-    s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
-  else
-    for (const e2 of o2) {
-      const o3 = document.createElement("style"), n3 = t$2.litNonce;
-      void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
-    }
-}, c$3 = e$4 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
-  let e2 = "";
-  for (const s2 of t3.cssRules)
-    e2 += s2.cssText;
-  return r$5(e2);
-})(t2) : t2;
-const { is: i$3, defineProperty: e$3, getOwnPropertyDescriptor: h$3, getOwnPropertyNames: r$4, getOwnPropertySymbols: o$5, getPrototypeOf: n$4 } = Object, a$1 = globalThis, c$2 = a$1.trustedTypes, l$1 = c$2 ? c$2.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t2, s2) => t2, u$1 = { toAttribute(t2, s2) {
-  switch (s2) {
-    case Boolean:
-      t2 = t2 ? l$1 : null;
-      break;
-    case Object:
-    case Array:
-      t2 = null == t2 ? t2 : JSON.stringify(t2);
-  }
-  return t2;
-}, fromAttribute(t2, s2) {
-  let i3 = t2;
-  switch (s2) {
-    case Boolean:
-      i3 = null !== t2;
-      break;
-    case Number:
-      i3 = null === t2 ? null : Number(t2);
-      break;
-    case Object:
-    case Array:
-      try {
-        i3 = JSON.parse(t2);
-      } catch (t3) {
-        i3 = null;
-      }
-  }
-  return i3;
-} }, f$3 = (t2, s2) => !i$3(t2, s2), b$1 = { attribute: true, type: String, converter: u$1, reflect: false, useDefault: false, hasChanged: f$3 };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a$1.litPropertyMetadata ?? (a$1.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let y$1 = class y extends HTMLElement {
-  static addInitializer(t2) {
-    this._$Ei(), (this.l ?? (this.l = [])).push(t2);
-  }
-  static get observedAttributes() {
-    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
-  }
-  static createProperty(t2, s2 = b$1) {
-    if (s2.state && (s2.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t2) && ((s2 = Object.create(s2)).wrapped = true), this.elementProperties.set(t2, s2), !s2.noAccessor) {
-      const i3 = Symbol(), h2 = this.getPropertyDescriptor(t2, i3, s2);
-      void 0 !== h2 && e$3(this.prototype, t2, h2);
-    }
-  }
-  static getPropertyDescriptor(t2, s2, i3) {
-    const { get: e2, set: r2 } = h$3(this.prototype, t2) ?? { get() {
-      return this[s2];
-    }, set(t3) {
-      this[s2] = t3;
-    } };
-    return { get: e2, set(s3) {
-      const h2 = e2?.call(this);
-      r2?.call(this, s3), this.requestUpdate(t2, h2, i3);
-    }, configurable: true, enumerable: true };
-  }
-  static getPropertyOptions(t2) {
-    return this.elementProperties.get(t2) ?? b$1;
-  }
-  static _$Ei() {
-    if (this.hasOwnProperty(d$1("elementProperties")))
-      return;
-    const t2 = n$4(this);
-    t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
-  }
-  static finalize() {
-    if (this.hasOwnProperty(d$1("finalized")))
-      return;
-    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
-      const t3 = this.properties, s2 = [...r$4(t3), ...o$5(t3)];
-      for (const i3 of s2)
-        this.createProperty(i3, t3[i3]);
-    }
-    const t2 = this[Symbol.metadata];
-    if (null !== t2) {
-      const s2 = litPropertyMetadata.get(t2);
-      if (void 0 !== s2)
-        for (const [t3, i3] of s2)
-          this.elementProperties.set(t3, i3);
-    }
-    this._$Eh = /* @__PURE__ */ new Map();
-    for (const [t3, s2] of this.elementProperties) {
-      const i3 = this._$Eu(t3, s2);
-      void 0 !== i3 && this._$Eh.set(i3, t3);
-    }
-    this.elementStyles = this.finalizeStyles(this.styles);
-  }
-  static finalizeStyles(s2) {
-    const i3 = [];
-    if (Array.isArray(s2)) {
-      const e2 = new Set(s2.flat(1 / 0).reverse());
-      for (const s3 of e2)
-        i3.unshift(c$3(s3));
-    } else
-      void 0 !== s2 && i3.push(c$3(s2));
-    return i3;
-  }
-  static _$Eu(t2, s2) {
-    const i3 = s2.attribute;
-    return false === i3 ? void 0 : "string" == typeof i3 ? i3 : "string" == typeof t2 ? t2.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((t2) => this.enableUpdating = t2), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t2) => t2(this));
-  }
-  addController(t2) {
-    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t2), void 0 !== this.renderRoot && this.isConnected && t2.hostConnected?.();
-  }
-  removeController(t2) {
-    this._$EO?.delete(t2);
-  }
-  _$E_() {
-    const t2 = /* @__PURE__ */ new Map(), s2 = this.constructor.elementProperties;
-    for (const i3 of s2.keys())
-      this.hasOwnProperty(i3) && (t2.set(i3, this[i3]), delete this[i3]);
-    t2.size > 0 && (this._$Ep = t2);
-  }
-  createRenderRoot() {
-    const t2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return S$1(t2, this.constructor.elementStyles), t2;
-  }
-  connectedCallback() {
-    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t2) => t2.hostConnected?.());
-  }
-  enableUpdating(t2) {
-  }
-  disconnectedCallback() {
-    this._$EO?.forEach((t2) => t2.hostDisconnected?.());
-  }
-  attributeChangedCallback(t2, s2, i3) {
-    this._$AK(t2, i3);
-  }
-  _$ET(t2, s2) {
-    const i3 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i3);
-    if (void 0 !== e2 && true === i3.reflect) {
-      const h2 = (void 0 !== i3.converter?.toAttribute ? i3.converter : u$1).toAttribute(s2, i3.type);
-      this._$Em = t2, null == h2 ? this.removeAttribute(e2) : this.setAttribute(e2, h2), this._$Em = null;
-    }
-  }
-  _$AK(t2, s2) {
-    const i3 = this.constructor, e2 = i3._$Eh.get(t2);
-    if (void 0 !== e2 && this._$Em !== e2) {
-      const t3 = i3.getPropertyOptions(e2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== t3.converter?.fromAttribute ? t3.converter : u$1;
-      this._$Em = e2, this[e2] = h2.fromAttribute(s2, t3.type) ?? this._$Ej?.get(e2) ?? null, this._$Em = null;
-    }
-  }
-  requestUpdate(t2, s2, i3) {
-    if (void 0 !== t2) {
-      const e2 = this.constructor, h2 = this[t2];
-      if (i3 ?? (i3 = e2.getPropertyOptions(t2)), !((i3.hasChanged ?? f$3)(h2, s2) || i3.useDefault && i3.reflect && h2 === this._$Ej?.get(t2) && !this.hasAttribute(e2._$Eu(t2, i3))))
-        return;
-      this.C(t2, s2, i3);
-    }
-    false === this.isUpdatePending && (this._$ES = this._$EP());
-  }
-  C(t2, s2, { useDefault: i3, reflect: e2, wrapped: h2 }, r2) {
-    i3 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t2) && (this._$Ej.set(t2, r2 ?? s2 ?? this[t2]), true !== h2 || void 0 !== r2) || (this._$AL.has(t2) || (this.hasUpdated || i3 || (s2 = void 0), this._$AL.set(t2, s2)), true === e2 && this._$Em !== t2 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t2));
-  }
-  async _$EP() {
-    this.isUpdatePending = true;
-    try {
-      await this._$ES;
-    } catch (t3) {
-      Promise.reject(t3);
-    }
-    const t2 = this.scheduleUpdate();
-    return null != t2 && await t2, !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 [t4, s3] of this._$Ep)
-          this[t4] = s3;
-        this._$Ep = void 0;
-      }
-      const t3 = this.constructor.elementProperties;
-      if (t3.size > 0)
-        for (const [s3, i3] of t3) {
-          const { wrapped: t4 } = i3, e2 = this[s3];
-          true !== t4 || this._$AL.has(s3) || void 0 === e2 || this.C(s3, void 0, i3, e2);
-        }
-    }
-    let t2 = false;
-    const s2 = this._$AL;
-    try {
-      t2 = this.shouldUpdate(s2), t2 ? (this.willUpdate(s2), this._$EO?.forEach((t3) => t3.hostUpdate?.()), this.update(s2)) : this._$EM();
-    } catch (s3) {
-      throw t2 = false, this._$EM(), s3;
-    }
-    t2 && this._$AE(s2);
-  }
-  willUpdate(t2) {
-  }
-  _$AE(t2) {
-    this._$EO?.forEach((t3) => t3.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2);
-  }
-  _$EM() {
-    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
-  }
-  get updateComplete() {
-    return this.getUpdateComplete();
-  }
-  getUpdateComplete() {
-    return this._$ES;
-  }
-  shouldUpdate(t2) {
-    return true;
-  }
-  update(t2) {
-    this._$Eq && (this._$Eq = this._$Eq.forEach((t3) => this._$ET(t3, this[t3]))), this._$EM();
-  }
-  updated(t2) {
-  }
-  firstUpdated(t2) {
-  }
-};
-y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$1("elementProperties")] = /* @__PURE__ */ new Map(), y$1[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1?.({ ReactiveElement: y$1 }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.1.0");
-const t$1 = globalThis, i$2 = t$1.trustedTypes, s$2 = i$2 ? i$2.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$2 = "$lit$", h$2 = `lit$${Math.random().toFixed(9).slice(2)}$`, o$4 = "?" + h$2, n$3 = `<${o$4}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof t2?.[Symbol.iterator], d = "[ 	\n\f\r]", f$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y2 = (t2) => (i3, ...s2) => ({ _$litType$: t2, strings: i3, values: s2 }), x = y2(1), b = y2(2), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r$3.createTreeWalker(r$3, 129);
-function P(t2, i3) {
-  if (!a(t2) || !t2.hasOwnProperty("raw"))
-    throw Error("invalid template strings array");
-  return void 0 !== s$2 ? s$2.createHTML(i3) : i3;
-}
-const V = (t2, i3) => {
-  const s2 = t2.length - 1, o2 = [];
-  let r2, l2 = 2 === i3 ? "<svg>" : 3 === i3 ? "<math>" : "", c2 = f$2;
-  for (let i4 = 0; i4 < s2; i4++) {
-    const s3 = t2[i4];
-    let a2, u2, d2 = -1, y3 = 0;
-    for (; y3 < s3.length && (c2.lastIndex = y3, u2 = c2.exec(s3), null !== u2); )
-      y3 = c2.lastIndex, c2 === f$2 ? "!--" === u2[1] ? c2 = v : void 0 !== u2[1] ? c2 = _ : void 0 !== u2[2] ? ($.test(u2[2]) && (r2 = RegExp("</" + u2[2], "g")), c2 = m) : void 0 !== u2[3] && (c2 = m) : c2 === m ? ">" === u2[0] ? (c2 = r2 ?? f$2, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? m : '"' === u2[3] ? g : p) : c2 === g || c2 === p ? c2 = m : c2 === v || c2 === _ ? c2 = f$2 : (c2 = m, r2 = void 0);
-    const x2 = c2 === m && t2[i4 + 1].startsWith("/>") ? " " : "";
-    l2 += c2 === f$2 ? s3 + n$3 : d2 >= 0 ? (o2.push(a2), s3.slice(0, d2) + e$2 + s3.slice(d2) + h$2 + x2) : s3 + h$2 + (-2 === d2 ? i4 : x2);
-  }
-  return [P(t2, l2 + (t2[s2] || "<?>") + (2 === i3 ? "</svg>" : 3 === i3 ? "</math>" : "")), o2];
-};
-class N {
-  constructor({ strings: t2, _$litType$: s2 }, n3) {
-    let r2;
-    this.parts = [];
-    let c2 = 0, a2 = 0;
-    const u2 = t2.length - 1, d2 = this.parts, [f2, v2] = V(t2, s2);
-    if (this.el = N.createElement(f2, n3), C.currentNode = this.el.content, 2 === s2 || 3 === s2) {
-      const t3 = this.el.content.firstChild;
-      t3.replaceWith(...t3.childNodes);
-    }
-    for (; null !== (r2 = C.nextNode()) && d2.length < u2; ) {
-      if (1 === r2.nodeType) {
-        if (r2.hasAttributes())
-          for (const t3 of r2.getAttributeNames())
-            if (t3.endsWith(e$2)) {
-              const i3 = v2[a2++], s3 = r2.getAttribute(t3).split(h$2), e2 = /([.?@])?(.*)/.exec(i3);
-              d2.push({ type: 1, index: c2, name: e2[2], strings: s3, ctor: "." === e2[1] ? H : "?" === e2[1] ? I : "@" === e2[1] ? L : k }), r2.removeAttribute(t3);
-            } else
-              t3.startsWith(h$2) && (d2.push({ type: 6, index: c2 }), r2.removeAttribute(t3));
-        if ($.test(r2.tagName)) {
-          const t3 = r2.textContent.split(h$2), s3 = t3.length - 1;
-          if (s3 > 0) {
-            r2.textContent = i$2 ? i$2.emptyScript : "";
-            for (let i3 = 0; i3 < s3; i3++)
-              r2.append(t3[i3], l()), C.nextNode(), d2.push({ type: 2, index: ++c2 });
-            r2.append(t3[s3], l());
-          }
-        }
-      } else if (8 === r2.nodeType)
-        if (r2.data === o$4)
-          d2.push({ type: 2, index: c2 });
-        else {
-          let t3 = -1;
-          for (; -1 !== (t3 = r2.data.indexOf(h$2, t3 + 1)); )
-            d2.push({ type: 7, index: c2 }), t3 += h$2.length - 1;
-        }
-      c2++;
-    }
-  }
-  static createElement(t2, i3) {
-    const s2 = r$3.createElement("template");
-    return s2.innerHTML = t2, s2;
-  }
-}
-function S(t2, i3, s2 = t2, e2) {
-  if (i3 === T)
-    return i3;
-  let h2 = void 0 !== e2 ? s2._$Co?.[e2] : s2._$Cl;
-  const o2 = c$1(i3) ? void 0 : i3._$litDirective$;
-  return h2?.constructor !== o2 && (h2?._$AO?.(false), void 0 === o2 ? h2 = void 0 : (h2 = new o2(t2), h2._$AT(t2, s2, e2)), void 0 !== e2 ? (s2._$Co ?? (s2._$Co = []))[e2] = h2 : s2._$Cl = h2), void 0 !== h2 && (i3 = S(t2, h2._$AS(t2, i3.values), h2, e2)), i3;
-}
-class M {
-  constructor(t2, i3) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i3;
-  }
-  get parentNode() {
-    return this._$AM.parentNode;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  u(t2) {
-    const { el: { content: i3 }, parts: s2 } = this._$AD, e2 = (t2?.creationScope ?? r$3).importNode(i3, true);
-    C.currentNode = e2;
-    let h2 = C.nextNode(), o2 = 0, n3 = 0, l2 = s2[0];
-    for (; void 0 !== l2; ) {
-      if (o2 === l2.index) {
-        let i4;
-        2 === l2.type ? i4 = new R(h2, h2.nextSibling, this, t2) : 1 === l2.type ? i4 = new l2.ctor(h2, l2.name, l2.strings, this, t2) : 6 === l2.type && (i4 = new z(h2, this, t2)), this._$AV.push(i4), l2 = s2[++n3];
-      }
-      o2 !== l2?.index && (h2 = C.nextNode(), o2++);
-    }
-    return C.currentNode = r$3, e2;
-  }
-  p(t2) {
-    let i3 = 0;
-    for (const s2 of this._$AV)
-      void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i3), i3 += s2.strings.length - 2) : s2._$AI(t2[i3])), i3++;
-  }
-}
-class R {
-  get _$AU() {
-    return this._$AM?._$AU ?? this._$Cv;
-  }
-  constructor(t2, i3, s2, e2) {
-    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t2, this._$AB = i3, this._$AM = s2, this.options = e2, this._$Cv = e2?.isConnected ?? true;
-  }
-  get parentNode() {
-    let t2 = this._$AA.parentNode;
-    const i3 = this._$AM;
-    return void 0 !== i3 && 11 === t2?.nodeType && (t2 = i3.parentNode), t2;
-  }
-  get startNode() {
-    return this._$AA;
-  }
-  get endNode() {
-    return this._$AB;
-  }
-  _$AI(t2, i3 = this) {
-    t2 = S(this, t2, i3), c$1(t2) ? t2 === E || null == t2 || "" === t2 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t2 !== this._$AH && t2 !== T && this._(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : u(t2) ? this.k(t2) : this._(t2);
-  }
-  O(t2) {
-    return this._$AA.parentNode.insertBefore(t2, this._$AB);
-  }
-  T(t2) {
-    this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2));
-  }
-  _(t2) {
-    this._$AH !== E && c$1(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(r$3.createTextNode(t2)), this._$AH = t2;
-  }
-  $(t2) {
-    const { values: i3, _$litType$: s2 } = t2, e2 = "number" == typeof s2 ? this._$AC(t2) : (void 0 === s2.el && (s2.el = N.createElement(P(s2.h, s2.h[0]), this.options)), s2);
-    if (this._$AH?._$AD === e2)
-      this._$AH.p(i3);
-    else {
-      const t3 = new M(e2, this), s3 = t3.u(this.options);
-      t3.p(i3), this.T(s3), this._$AH = t3;
-    }
-  }
-  _$AC(t2) {
-    let i3 = A.get(t2.strings);
-    return void 0 === i3 && A.set(t2.strings, i3 = new N(t2)), i3;
-  }
-  k(t2) {
-    a(this._$AH) || (this._$AH = [], this._$AR());
-    const i3 = this._$AH;
-    let s2, e2 = 0;
-    for (const h2 of t2)
-      e2 === i3.length ? i3.push(s2 = new R(this.O(l()), this.O(l()), this, this.options)) : s2 = i3[e2], s2._$AI(h2), e2++;
-    e2 < i3.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i3.length = e2);
-  }
-  _$AR(t2 = this._$AA.nextSibling, i3) {
-    for (this._$AP?.(false, true, i3); t2 && t2 !== this._$AB; ) {
-      const i4 = t2.nextSibling;
-      t2.remove(), t2 = i4;
-    }
-  }
-  setConnected(t2) {
-    void 0 === this._$AM && (this._$Cv = t2, this._$AP?.(t2));
-  }
-}
-class k {
-  get tagName() {
-    return this.element.tagName;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  constructor(t2, i3, s2, e2, h2) {
-    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t2, this.name = i3, this._$AM = e2, this.options = h2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = E;
-  }
-  _$AI(t2, i3 = this, s2, e2) {
-    const h2 = this.strings;
-    let o2 = false;
-    if (void 0 === h2)
-      t2 = S(this, t2, i3, 0), o2 = !c$1(t2) || t2 !== this._$AH && t2 !== T, o2 && (this._$AH = t2);
-    else {
-      const e3 = t2;
-      let n3, r2;
-      for (t2 = h2[0], n3 = 0; n3 < h2.length - 1; n3++)
-        r2 = S(this, e3[s2 + n3], i3, n3), r2 === T && (r2 = this._$AH[n3]), o2 || (o2 = !c$1(r2) || r2 !== this._$AH[n3]), r2 === E ? t2 = E : t2 !== E && (t2 += (r2 ?? "") + h2[n3 + 1]), this._$AH[n3] = r2;
-    }
-    o2 && !e2 && this.j(t2);
-  }
-  j(t2) {
-    t2 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t2 ?? "");
-  }
-}
-class H extends k {
-  constructor() {
-    super(...arguments), this.type = 3;
-  }
-  j(t2) {
-    this.element[this.name] = t2 === E ? void 0 : t2;
-  }
-}
-class I extends k {
-  constructor() {
-    super(...arguments), this.type = 4;
-  }
-  j(t2) {
-    this.element.toggleAttribute(this.name, !!t2 && t2 !== E);
-  }
-}
-class L extends k {
-  constructor(t2, i3, s2, e2, h2) {
-    super(t2, i3, s2, e2, h2), this.type = 5;
-  }
-  _$AI(t2, i3 = this) {
-    if ((t2 = S(this, t2, i3, 0) ?? E) === T)
-      return;
-    const s2 = this._$AH, e2 = t2 === E && s2 !== E || t2.capture !== s2.capture || t2.once !== s2.once || t2.passive !== s2.passive, h2 = t2 !== E && (s2 === E || e2);
-    e2 && this.element.removeEventListener(this.name, this, s2), h2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
-  }
-  handleEvent(t2) {
-    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t2) : this._$AH.handleEvent(t2);
-  }
-}
-class z {
-  constructor(t2, i3, s2) {
-    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i3, this.options = s2;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t2) {
-    S(this, t2);
-  }
-}
-const j = t$1.litHtmlPolyfillSupport;
-j?.(N, R), (t$1.litHtmlVersions ?? (t$1.litHtmlVersions = [])).push("3.3.0");
-const B = (t2, i3, s2) => {
-  const e2 = s2?.renderBefore ?? i3;
-  let h2 = e2._$litPart$;
-  if (void 0 === h2) {
-    const t3 = s2?.renderBefore ?? null;
-    e2._$litPart$ = h2 = new R(i3.insertBefore(l(), t3), t3, void 0, s2 ?? {});
-  }
-  return h2._$AI(t2), h2;
-};
-const s$1 = globalThis;
-let i$1 = class i extends y$1 {
-  constructor() {
-    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
-  }
-  createRenderRoot() {
-    var _a;
-    const t2 = super.createRenderRoot();
-    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t2.firstChild), t2;
-  }
-  update(t2) {
-    const r2 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = B(r2, this.renderRoot, this.renderOptions);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._$Do?.setConnected(true);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._$Do?.setConnected(false);
-  }
-  render() {
-    return T;
-  }
-};
-i$1._$litElement$ = true, i$1["finalized"] = true, s$1.litElementHydrateSupport?.({ LitElement: i$1 });
-const o$3 = s$1.litElementPolyfillSupport;
-o$3?.({ LitElement: i$1 });
-(s$1.litElementVersions ?? (s$1.litElementVersions = [])).push("4.2.0");
-const o$2 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$3 }, r$2 = (t2 = o$2, e2, r2) => {
-  const { kind: n3, metadata: i3 } = r2;
-  let s2 = globalThis.litPropertyMetadata.get(i3);
-  if (void 0 === s2 && globalThis.litPropertyMetadata.set(i3, s2 = /* @__PURE__ */ new Map()), "setter" === n3 && ((t2 = Object.create(t2)).wrapped = true), s2.set(r2.name, t2), "accessor" === n3) {
-    const { name: o2 } = r2;
-    return { set(r3) {
-      const n4 = e2.get.call(this);
-      e2.set.call(this, r3), this.requestUpdate(o2, n4, t2);
-    }, init(e3) {
-      return void 0 !== e3 && this.C(o2, void 0, t2, e3), e3;
-    } };
-  }
-  if ("setter" === n3) {
-    const { name: o2 } = r2;
-    return function(r3) {
-      const n4 = this[o2];
-      e2.call(this, r3), this.requestUpdate(o2, n4, t2);
-    };
-  }
-  throw Error("Unsupported decorator location: " + n3);
-};
-function n$2(t2) {
-  return (e2, o2) => "object" == typeof o2 ? r$2(t2, e2, o2) : ((t3, e3, o3) => {
-    const r2 = e3.hasOwnProperty(o3);
-    return e3.constructor.createProperty(o3, t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
-  })(t2, e2, o2);
-}
-function r$1(r2) {
-  return n$2({ ...r2, state: true, attribute: false });
-}
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$8(target, key, result);
-  return result;
-};
-class NavIcon extends i$1 {
-  constructor() {
-    super(...arguments);
-    this.id = "";
-    this.isActive = false;
-    this.isSpecial = false;
-  }
-  handleClick(e2) {
-    e2.preventDefault();
-    e2.stopPropagation();
-    const event = new CustomEvent("click", {
-      detail: {
-        id: this.id,
-        isActive: !this.isActive
-      },
-      bubbles: true,
-      composed: true
-    });
-    this.dispatchEvent(event);
-    if (this.onClick) {
-      this.onClick(this.id, !this.isActive);
-    }
-  }
-  render() {
-    return x`
-      <button
-        id="obi-nav-${this.id}"
-        class=${this.isSpecial ? "special" : ""}
-        ?active=${this.isActive}
-        @click=${this.handleClick}
-        aria-label="${this.id} control"
-      >
-        <slot></slot>
-      </button>
-    `;
-  }
-}
-NavIcon.styles = i$4`
-    :host {
-      display: block;
-    }
-
-    button {
-      display: flex;
-      height: 40px;
-      width: 40px;
-      align-items: center;
-      justify-content: center;
-      border-radius: 2px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      transition: all 0.2s;
-      cursor: pointer;
-      margin: 4px 0;
-      padding: 0;
-      border: none;
-      color: black;
-    }
-
-    button.special {
-      color: #fff;
-      background-color: #000;
-    }
-
-    button.special svg {
-      stroke: #fff;
-    }
-
-    button.special.active {
-      background-color: black;
-      color: white;
-    }
-
-    button.special.active:hover {
-      background-color: #27272a;
-    }
-
-    button:not(.special) {
-      background-color: white;
-      color: black;
-    }
-
-    button:not(.special):hover {
-      background-color: #e5e5e5;
-    }
-
-    ::slotted(*) {
-      width: 18px;
-      height: 18px;
-    }
-  `;
-__decorateClass$8([
-  n$2({ type: String })
-], NavIcon.prototype, "id", 2);
-__decorateClass$8([
-  n$2({ type: Boolean })
-], NavIcon.prototype, "isActive", 2);
-__decorateClass$8([
-  n$2({ type: Boolean })
-], NavIcon.prototype, "isSpecial", 2);
-__decorateClass$8([
-  n$2({ type: Function })
-], NavIcon.prototype, "onClick", 2);
-if (!customElements.get("obi-nav-icon")) {
-  customElements.define("obi-nav-icon", NavIcon);
-}
-const navIcon = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  NavIcon
-}, Symbol.toStringTag, { value: "Module" }));
-const svgWrapper = (content) => x`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="lucide"
-    style="display: block;"
-  >
-    ${content}
-  </svg>
-`;
-const pauseIcon = svgWrapper(b`
-  <rect x="14" y="4" width="4" height="16" rx="1"/><rect x="6" y="4" width="4" height="16" rx="1"/>
-`);
-const playIcon = svgWrapper(b`<polygon points="6 3 20 12 6 21 6 3"/>`);
-const powerIcon = svgWrapper(b`
-  <path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/>
-`);
-const closeIcon = svgWrapper(b`
-  <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
-`);
-const bookOpenIcon = svgWrapper(b`
-  <path d="M12 7v14" />
-  <path
-    d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
-  />
-`);
-const obiIcon = x`
-  <img
-    class="widget-icon"
-    src="data:image/svg+xml;base64,${btoa(`<?xml version="1.0" encoding="UTF-8"?>
-            <svg width="32" height="32" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <g id="obi-icon">
-                <g id="Subtract">
-                  <path d="M15.5845 9.29177L8.20527 5.00637L8.20527 13.4502L15.5845 17.7356L15.5845 9.29177Z" fill="white" />
-                  <path d="M15.5896 27.7146L8.21035 31.9994L8.21032 23.4698L15.5896 19.1843L15.5896 27.7146Z" fill="white" />
-                  <path d="M16.4104 27.7146L16.4104 19.1786L23.7897 23.4641L23.7897 32L16.4104 27.7146Z" fill="white" />
-                  <path d="M32 27.7142L24.6207 31.9996L24.6207 23.47L32 19.1846L32 27.7142Z" fill="white" />
-                  <path d="M24.2048 22.748L31.5911 18.4585L24.2845 14.2154L16.8983 18.5048L24.2048 22.748Z" fill="white" />
-                  <path d="M23.7948 5.01235L23.7948 13.4564L16.4156 17.7418L16.4156 9.29775L23.7948 5.01235Z" fill="white" />
-                  <path d="M16.0052 0L23.3865 4.2866L16.0003 8.57606L8.61897 4.28946L16.0052 0Z" fill="white" />
-                  <path d="M7.72042 14.2182L15.1017 18.5048L7.79445 22.7477L0.413699 18.4615L7.72042 14.2182Z" fill="white" />
-                  <path d="M7.37926 31.9997L7.37926 23.4638L0 19.1784L3.79636e-05 27.7143L7.37926 31.9997Z" fill="white" />
-                </g>
-              </g>
-            </svg>`)}"
-    alt="Obi Icon"
-  />
-`;
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$7(target, key, result);
-  return result;
-};
-class NavigationBar extends i$1 {
-  constructor() {
-    super();
-    this.isActive = false;
-    this.isScreenActive = false;
-    this.position = { top: 0, left: 0 };
-    this.currentState = SDKState.READY;
-    this.direction = "up";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  handleIconClick(id, isActive) {
-    if (this.onItemSelect) {
-      this.onItemSelect(id, isActive);
-    }
-  }
-  render() {
-    return x`
-      ${this.isActive ? x`
-            <obi-nav-icon
-              id="pause"
-              ?isActive=${this.currentState === SDKState.PAUSED}
-              @click=${() => this.handleIconClick("pause", this.currentState === SDKState.PAUSED ? false : true)}
-            >
-              ${this.currentState === SDKState.PAUSED ? playIcon : pauseIcon}
-            </obi-nav-icon>
-            <obi-nav-icon
-              id="activate"
-              ?isActive=${this.isActive}
-              ?isSpecial=${true}
-              @click=${() => this.handleIconClick("activate", this.isActive ? false : true)}
-            >
-              ${this.isActive ? closeIcon : powerIcon}
-            </obi-nav-icon>
-          ` : x`
-            <obi-nav-icon
-              id="experiences"
-              @click=${() => this.handleIconClick("experiences", true)}
-            >
-              ${bookOpenIcon}
-            </obi-nav-icon>
-          `}
-    `;
-  }
-}
-NavigationBar.styles = i$4`
-    :host {
-      display: flex;
-      position: absolute;
-      z-index: 10000;
-      width: 40px;
-      transition: all 0.2s ease-in-out;
-      opacity: 1;
-      transform: scale(1);
-      pointer-events: auto;
-      background-color: #fff;
-    }
-
-    :host([data-direction="up"]) {
-      bottom: 64px;
-      top: auto;
-      flex-direction: column-reverse;
-    }
-
-    :host([data-direction="down"]) {
-      top: 64px;
-      bottom: auto;
-      flex-direction: column;
-    }
-  `;
-__decorateClass$7([
-  n$2({ type: Boolean })
-], NavigationBar.prototype, "isActive", 2);
-__decorateClass$7([
-  n$2({ type: Boolean })
-], NavigationBar.prototype, "isScreenActive", 2);
-__decorateClass$7([
-  n$2({ type: Object })
-], NavigationBar.prototype, "position", 2);
-__decorateClass$7([
-  n$2({ type: String })
-], NavigationBar.prototype, "currentState", 2);
-__decorateClass$7([
-  n$2({ type: String })
-], NavigationBar.prototype, "direction", 2);
-__decorateClass$7([
-  n$2({ type: Function })
-], NavigationBar.prototype, "onItemSelect", 2);
-if (!customElements.get("obi-navigation-bar")) {
-  customElements.define("obi-navigation-bar", NavigationBar);
-}
-const navigationBar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  NavigationBar
-}, Symbol.toStringTag, { value: "Module" }));
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$6(target, key, result);
-  return result;
-};
-class Course extends i$1 {
-  constructor() {
-    super(...arguments);
-    this.id = "";
-    this.name = "";
-    this.description = "";
-    this.imageSrc = "";
-  }
-  handleClick() {
-    if (this.onSelect) {
-      this.onSelect(this.id);
-    }
-    this.dispatchEvent(
-      new CustomEvent("course-select", {
-        detail: { id: this.id },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  render() {
-    return x`
-      <div class="course-container" @click=${this.handleClick}>
-        <img src=${this.imageSrc} alt="Course Preview" class="course-image" />
-        <h2 class="course-title">${this.name}</h2>
-        ${this.description ? x`<p class="course-description">${this.description}</p>` : ""}
-      </div>
-    `;
-  }
-}
-Course.styles = i$4`
-    :host {
-      display: block;
-    }
-
-    .course-container {
-      padding: 16px 12px;
-      gap: 12px;
-      border-radius: 4px;
-      border: 1px solid #e5e7eb;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .course-container:hover {
-      background-color: #f9fafb;
-      border-color: #d1d5db;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    }
-
-    .course-container:active {
-      transform: scale(0.98);
-    }
-
-    .course-image {
-      max-height: 160px;
-      border-radius: 2px;
-      border: 1px solid #e5e7eb;
-      object-fit: cover;
-      width: 100%;
-      margin-bottom: 12px;
-    }
-
-    .course-title {
-      font-size: 14px;
-      font-weight: bold;
-      margin: 0;
-      margin-bottom: 12px;
-    }
-
-    .course-description {
-      font-size: 14px;
-      color: #71717a;
-      margin: 0;
-    }
-  `;
-__decorateClass$6([
-  n$2({ type: String })
-], Course.prototype, "id", 2);
-__decorateClass$6([
-  n$2({ type: String })
-], Course.prototype, "name", 2);
-__decorateClass$6([
-  n$2({ type: String })
-], Course.prototype, "description", 2);
-__decorateClass$6([
-  n$2({ type: String })
-], Course.prototype, "imageSrc", 2);
-__decorateClass$6([
-  n$2({ type: Function })
-], Course.prototype, "onSelect", 2);
-class CourseList extends i$1 {
-  constructor() {
-    super(...arguments);
-    this.courses = [];
-    this.loading = false;
-    this.error = "";
-  }
-  handleCourseSelect(e2) {
-    if (this.onCourseSelect) {
-      this.onCourseSelect(e2.detail.id);
-    }
-  }
-  render() {
-    if (this.loading) {
-      return x`<div class="loading">Loading...</div>`;
-    }
-    if (this.error) {
-      return x`<div class="error">${this.error}</div>`;
-    }
-    if (!this.courses || this.courses.length === 0) {
-      return x`<div class="empty">No courses available</div>`;
-    }
-    const gridClass = this.courses.length === 1 ? "grid-cols-1" : this.courses.length === 2 ? "grid-cols-2" : "grid-cols-3";
-    return x`
-      <div class="course-grid ${gridClass}">
-        ${this.courses.map(
-      (course) => x`
-            <obi-course
-              id=${course.id}
-              name=${course.name}
-              description=${course.description || ""}
-              imageSrc=${course.imageSrc}
-              @course-select=${this.handleCourseSelect}
-            ></obi-course>
-          `
-    )}
-      </div>
-    `;
-  }
-}
-CourseList.styles = i$4`
-    :host {
-      display: block;
-    }
-
-    .course-grid {
-      display: grid;
-      gap: 12px;
-      margin-top: 24px;
-    }
-
-    .course-grid.grid-cols-1 {
-      grid-template-columns: 1fr;
-    }
-
-    .course-grid.grid-cols-2 {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    .course-grid.grid-cols-3 {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    .loading,
-    .error,
-    .empty {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-top: 16px;
-    }
-
-    .error {
-      color: #ef4444;
-    }
-  `;
-__decorateClass$6([
-  n$2({ type: Array })
-], CourseList.prototype, "courses", 2);
-__decorateClass$6([
-  n$2({ type: Boolean })
-], CourseList.prototype, "loading", 2);
-__decorateClass$6([
-  n$2({ type: String })
-], CourseList.prototype, "error", 2);
-__decorateClass$6([
-  n$2({ type: Function })
-], CourseList.prototype, "onCourseSelect", 2);
-if (!customElements.get("obi-course")) {
-  customElements.define("obi-course", Course);
-}
-if (!customElements.get("obi-course-list")) {
-  customElements.define("obi-course-list", CourseList);
-}
-const courses = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Course,
-  CourseList
-}, Symbol.toStringTag, { value: "Module" }));
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$5(target, key, result);
-  return result;
-};
-class CourseModal extends i$1 {
-  constructor() {
-    super(...arguments);
-    this.courses = [];
-    this.loading = true;
-    this.error = "";
-    this.apiBaseUrl = "";
-    this.apiKey = "";
-  }
-  handleCourseSelect(e2) {
-    if (this.onCourseSelect) {
-      this.onCourseSelect(e2.detail.id);
-    }
-  }
-  handleClose() {
-    if (this.onClose) {
-      this.onClose();
-    }
-  }
-  async fetchCourses() {
-    try {
-      this.loading = true;
-      const raw_response = await fetch(`${this.apiBaseUrl}/sessions?token=${this.apiKey}`);
-      const response = await raw_response.json();
-      const mappedCourses = response.map((session) => ({
-        id: session.uuid,
-        name: session.onboarding_plan.name,
-        description: session.onboarding_plan.description,
-        imageSrc: session.onboarding_plan.screen_url || "https://corproductionsydney-storagebucket5cb7c8ea-atg4gmftc6sk.s3.amazonaws.com/static/generic-course.png"
-      }));
-      const filteredCourses = mappedCourses.filter((course) => !!course.name);
-      this.courses = [...filteredCourses];
-      this.requestUpdate();
-    } catch (err) {
-      console.error("Fetch error:", err);
-      this.error = "Failed to fetch courses";
-    } finally {
-      this.loading = false;
-      this.requestUpdate();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (window.obiWidgetConfig?.apiKey) {
-      this.apiKey = window.obiWidgetConfig.apiKey;
-    }
-    if (window.obiWidgetConfig?.apiBaseUrl) {
-      this.apiBaseUrl = window.obiWidgetConfig.apiBaseUrl;
-    }
-    if (this.apiBaseUrl && this.apiKey) {
-      this.fetchCourses();
-    } else {
-      this.loading = false;
-      this.error = "API base URL or API key is missing";
-    }
-  }
-  render() {
-    return x`
-      <div class="backdrop" @click=${this.handleClose}></div>
-      <div class="container">
-        <button class="close-button" @click=${this.handleClose}>×</button>
-        <div class="header">
-          <h1>Give Obi a try!</h1>
-          <p class="subtitle">Pick a tour, share your screen, and Obi will take it from there.</p>
-        </div>
-
-        <obi-course-list
-          .courses=${this.courses}
-          .loading=${this.loading}
-          .error=${this.error}
-          @course-select=${this.handleCourseSelect}
-        ></obi-course-list>
-      </div>
-    `;
-  }
-}
-CourseModal.styles = i$4`
-    :host {
-      display: block;
-      font-family: "Syne", sans-serif;
-    }
-
-    .backdrop {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: black;
-      opacity: 0.7;
-      z-index: 40;
-    }
-
-    .container {
-      position: fixed;
-      background-color: white;
-      color: black;
-      border: 1px solid #e5e7eb;
-      width: 640px;
-      max-height: 80vh;
-      overflow-y: auto;
-      padding: 48px;
-      gap: 12px;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: 4px;
-      z-index: 50;
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-    }
-
-    .container:hover {
-      cursor: auto;
-    }
-
-    .container::-webkit-scrollbar {
-      width: 0.5rem;
-    }
-
-    .container::-webkit-scrollbar-track {
-      background-color: #f3f4f6;
-      border-radius: 9999px;
-    }
-
-    .container::-webkit-scrollbar-thumb {
-      background-color: #d1d5db;
-      border-radius: 9999px;
-    }
-
-    .header {
-      margin-bottom: 24px;
-      text-align: center;
-    }
-
-    h1 {
-      font-size: 32px;
-      font-weight: 700;
-      margin: 0;
-      margin-bottom: 8px;
-    }
-
-    .subtitle {
-      font-size: 20px;
-      color: rgb(113 113 122 / 1);
-      margin: 0;
-    }
-
-    .close-button {
-      position: absolute;
-      top: 16px;
-      right: 16px;
-      background: none;
-      border: none;
-      cursor: pointer;
-      font-size: 24px;
-      color: #6b7280;
-    }
-  `;
-__decorateClass$5([
-  n$2({ type: Array })
-], CourseModal.prototype, "courses", 2);
-__decorateClass$5([
-  n$2({ type: Boolean })
-], CourseModal.prototype, "loading", 2);
-__decorateClass$5([
-  n$2({ type: String })
-], CourseModal.prototype, "error", 2);
-__decorateClass$5([
-  n$2({ type: String })
-], CourseModal.prototype, "apiBaseUrl", 2);
-__decorateClass$5([
-  n$2({ type: String })
-], CourseModal.prototype, "apiKey", 2);
-__decorateClass$5([
-  n$2({ type: Function })
-], CourseModal.prototype, "onCourseSelect", 2);
-__decorateClass$5([
-  n$2({ type: Function })
-], CourseModal.prototype, "onClose", 2);
-if (!customElements.get("obi-course-modal")) {
-  customElements.define("obi-course-modal", CourseModal);
-}
-const courseModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  CourseModal
-}, Symbol.toStringTag, { value: "Module" }));
-const f$1 = (o2) => void 0 === o2.strings;
-const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e$1 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
-class i2 {
-  constructor(t2) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(t2, e2, i3) {
-    this._$Ct = t2, this._$AM = e2, this._$Ci = i3;
-  }
-  _$AS(t2, e2) {
-    return this.update(t2, e2);
-  }
-  update(t2, e2) {
-    return this.render(...e2);
-  }
-}
-const s = (i3, t2) => {
-  const e2 = i3._$AN;
-  if (void 0 === e2)
-    return false;
-  for (const i4 of e2)
-    i4._$AO?.(t2, false), s(i4, t2);
-  return true;
-}, o$1 = (i3) => {
-  let t2, e2;
-  do {
-    if (void 0 === (t2 = i3._$AM))
-      break;
-    e2 = t2._$AN, e2.delete(i3), i3 = t2;
-  } while (0 === e2?.size);
-}, r = (i3) => {
-  for (let t2; t2 = i3._$AM; i3 = t2) {
-    let e2 = t2._$AN;
-    if (void 0 === e2)
-      t2._$AN = e2 = /* @__PURE__ */ new Set();
-    else if (e2.has(i3))
-      break;
-    e2.add(i3), c(t2);
-  }
-};
-function h$1(i3) {
-  void 0 !== this._$AN ? (o$1(this), this._$AM = i3, r(this)) : this._$AM = i3;
-}
-function n$1(i3, t2 = false, e2 = 0) {
-  const r2 = this._$AH, h2 = this._$AN;
-  if (void 0 !== h2 && 0 !== h2.size)
-    if (t2)
-      if (Array.isArray(r2))
-        for (let i4 = e2; i4 < r2.length; i4++)
-          s(r2[i4], false), o$1(r2[i4]);
-      else
-        null != r2 && (s(r2, false), o$1(r2));
-    else
-      s(this, i3);
-}
-const c = (i3) => {
-  i3.type == t.CHILD && (i3._$AP ?? (i3._$AP = n$1), i3._$AQ ?? (i3._$AQ = h$1));
-};
-class f extends i2 {
-  constructor() {
-    super(...arguments), this._$AN = void 0;
-  }
-  _$AT(i3, t2, e2) {
-    super._$AT(i3, t2, e2), r(this), this.isConnected = i3._$AU;
-  }
-  _$AO(i3, t2 = true) {
-    i3 !== this.isConnected && (this.isConnected = i3, i3 ? this.reconnected?.() : this.disconnected?.()), t2 && (s(this, i3), o$1(this));
-  }
-  setValue(t2) {
-    if (f$1(this._$Ct))
-      this._$Ct._$AI(t2, this);
-    else {
-      const i3 = [...this._$Ct._$AH];
-      i3[this._$Ci] = t2, this._$Ct._$AI(i3, this, 0);
-    }
-  }
-  disconnected() {
-  }
-  reconnected() {
-  }
-}
-const e = () => new h();
-class h {
-}
-const o = /* @__PURE__ */ new WeakMap(), n2 = e$1(class extends f {
-  render(i3) {
-    return E;
-  }
-  update(i3, [s2]) {
-    const e2 = s2 !== this.G;
-    return e2 && void 0 !== this.G && this.rt(void 0), (e2 || this.lt !== this.ct) && (this.G = s2, this.ht = i3.options?.host, this.rt(this.ct = i3.element)), E;
-  }
-  rt(t2) {
-    if (this.isConnected || (t2 = void 0), "function" == typeof this.G) {
-      const i3 = this.ht ?? globalThis;
-      let s2 = o.get(i3);
-      void 0 === s2 && (s2 = /* @__PURE__ */ new WeakMap(), o.set(i3, s2)), void 0 !== s2.get(this.G) && this.G.call(this.ht, void 0), s2.set(this.G, t2), void 0 !== t2 && this.G.call(this.ht, t2);
-    } else
-      this.G.value = t2;
-  }
-  get lt() {
-    return "function" == typeof this.G ? o.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
-  }
-  disconnected() {
-    this.lt === this.ct && this.rt(void 0);
-  }
-  reconnected() {
-    this.rt(this.ct);
-  }
-});
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$4(target, key, result);
-  return result;
-};
-class AudioEqualizer extends i$1 {
-  constructor() {
-    super(...arguments);
-    this.volume = { speaker: "ASSISTANT", volume: 0, spectrum: [] };
-    this.canvasRef = e();
-    this.barCount = 8;
-    this.animationFrame = null;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.startAnimation();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stopAnimation();
-  }
-  startAnimation() {
-    const animate = () => {
-      this.drawEqualizer();
-      this.animationFrame = requestAnimationFrame(animate);
-    };
-    this.animationFrame = requestAnimationFrame(animate);
-  }
-  stopAnimation() {
-    if (this.animationFrame) {
-      cancelAnimationFrame(this.animationFrame);
-      this.animationFrame = null;
-    }
-  }
-  drawEqualizer() {
-    const canvas = this.canvasRef.value;
-    if (!canvas)
-      return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx)
-      return;
-    const dpr = window.devicePixelRatio || 1;
-    const displayWidth = canvas.clientWidth;
-    const displayHeight = canvas.clientHeight;
-    canvas.width = displayWidth * dpr;
-    canvas.height = displayHeight * dpr;
-    ctx.scale(dpr, dpr);
-    ctx.clearRect(0, 0, displayWidth, displayHeight);
-    const gap = 3;
-    const barWidth = Math.max(1, (displayWidth - (this.barCount - 1) * gap) / this.barCount);
-    const barMaxHeight = displayHeight / 2;
-    const currentVolume = this.volume.speaker === "USER" ? this.volume.volume : this.volume.volume;
-    const currentSpectrum = this.volume.speaker === "USER" ? this.volume.spectrum : this.volume.spectrum;
-    if (currentVolume === 0)
-      return;
-    let processedSpectrum = [];
-    if (currentSpectrum && currentSpectrum.length > 0) {
-      const spectrumLength = currentSpectrum.length;
-      const regionSize = Math.ceil(spectrumLength / 10);
-      let energyByRegion = [];
-      for (let i3 = 0; i3 < 10; i3++) {
-        const start = i3 * regionSize;
-        const end = Math.min((i3 + 1) * regionSize, spectrumLength);
-        let regionEnergy = 0;
-        for (let j2 = start; j2 < end; j2++) {
-          regionEnergy += currentSpectrum[j2] || 0;
-        }
-        energyByRegion.push({ region: i3, startIdx: start, endIdx: end, energy: regionEnergy });
-      }
-      energyByRegion.sort((a2, b2) => b2.energy - a2.energy);
-      const topRegions = energyByRegion.slice(0, 3);
-      const startIdx = Math.min(...topRegions.map((r2) => r2.startIdx));
-      const endIdx = Math.max(...topRegions.map((r2) => r2.endIdx));
-      if (endIdx > startIdx) {
-        for (let i3 = 0; i3 < this.barCount; i3++) {
-          const position = startIdx + i3 / (this.barCount - 1) * (endIdx - startIdx);
-          const index = Math.min(spectrumLength - 1, Math.floor(position));
-          processedSpectrum[i3] = currentSpectrum[index] || 0;
-        }
-      } else {
-        for (let i3 = 0; i3 < this.barCount; i3++) {
-          const position = i3 / (this.barCount - 1) * (spectrumLength / 2);
-          const index = Math.min(spectrumLength - 1, Math.floor(position));
-          processedSpectrum[i3] = currentSpectrum[index] || 0;
-        }
-      }
-      const maxSpectrumValue = Math.max(...processedSpectrum, 1);
-      const amplificationFactorRoot = this.volume.speaker === "USER" ? 0.7 : 0.6;
-      processedSpectrum = processedSpectrum.map((value, index) => {
-        const relativeValue = value / maxSpectrumValue;
-        const amplificationFactor = amplificationFactorRoot + index / (this.barCount - 1) * 0.3;
-        return Math.min(1, relativeValue * amplificationFactor);
-      });
-    } else {
-      if (this.volume.speaker !== "USER") {
-        for (let i3 = 0; i3 < this.barCount; i3++) {
-          const time = Date.now() * 2e-3;
-          const value = 0.3 + 0.2 * Math.sin(time + i3 * 0.7);
-          processedSpectrum[i3] = value;
-        }
-      }
-    }
-    for (let i3 = 0; i3 < this.barCount; i3++) {
-      const spectrumValue = processedSpectrum.length > 0 ? processedSpectrum[i3] !== void 0 ? processedSpectrum[i3] : currentVolume : currentVolume;
-      if (this.volume.speaker === "USER") {
-        ctx.fillStyle = `rgba(109, 40, 217, ${spectrumValue * 0.5 + 0.5})`;
-      } else {
-        ctx.fillStyle = `rgba(255, 255, 255, ${spectrumValue * 0.5 + 0.5})`;
-      }
-      const barHeight = Math.max(2, spectrumValue * 0.8 * barMaxHeight);
-      const x2 = displayWidth - (this.barCount - i3) * (barWidth + gap);
-      const radius = barWidth / 2;
-      ctx.beginPath();
-      ctx.moveTo(x2 + radius, displayHeight / 2 - barHeight);
-      ctx.lineTo(x2 + barWidth - radius, displayHeight / 2 - barHeight);
-      ctx.quadraticCurveTo(
-        x2 + barWidth,
-        displayHeight / 2 - barHeight,
-        x2 + barWidth,
-        displayHeight / 2 - barHeight + radius
-      );
-      ctx.lineTo(x2 + barWidth, displayHeight / 2);
-      ctx.lineTo(x2, displayHeight / 2);
-      ctx.lineTo(x2, displayHeight / 2 - barHeight + radius);
-      ctx.quadraticCurveTo(
-        x2,
-        displayHeight / 2 - barHeight,
-        x2 + radius,
-        displayHeight / 2 - barHeight
-      );
-      ctx.fill();
-      ctx.beginPath();
-      ctx.moveTo(x2, displayHeight / 2);
-      ctx.lineTo(x2 + barWidth, displayHeight / 2);
-      ctx.lineTo(x2 + barWidth, displayHeight / 2 + barHeight - radius);
-      ctx.quadraticCurveTo(
-        x2 + barWidth,
-        displayHeight / 2 + barHeight,
-        x2 + barWidth - radius,
-        displayHeight / 2 + barHeight
-      );
-      ctx.lineTo(x2 + radius, displayHeight / 2 + barHeight);
-      ctx.quadraticCurveTo(
-        x2,
-        displayHeight / 2 + barHeight,
-        x2,
-        displayHeight / 2 + barHeight - radius
-      );
-      ctx.lineTo(x2, displayHeight / 2);
-      ctx.fill();
-    }
-  }
-  render() {
-    return x` <canvas ${n2(this.canvasRef)} width="52" height="52"></canvas> `;
-  }
-}
-AudioEqualizer.styles = i$4`
-    :host {
-      display: block;
-      width: 40px;
-      height: 40px;
-      margin: 4px;
-    }
-
-    canvas {
-      width: 100%;
-      height: 100%;
-    }
-  `;
-__decorateClass$4([
-  n$2({ type: Object })
-], AudioEqualizer.prototype, "volume", 2);
-__decorateClass$4([
-  r$1()
-], AudioEqualizer.prototype, "canvasRef", 2);
-if (!customElements.get("obi-audio-equalizer")) {
-  customElements.define("obi-audio-equalizer", AudioEqualizer);
-}
-const audioEqualizer = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  AudioEqualizer
-}, Symbol.toStringTag, { value: "Module" }));
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$3(target, key, result);
-  return result;
-};
-class DotLoader extends i$1 {
-  constructor() {
-    super(...arguments);
-    this.activeDots = Array(5).fill(false);
-    this.numDots = 5;
-    this.containerWidth = 32;
-    this.dotSize = 2;
-    this.bounceHeight = 12;
-    this.animationDuration = 200;
-    this.pauseDuration = 300;
-    this.overlapFactor = 0.7;
-    this.color = "#FFF";
-    this.timeoutIds = [];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.startAnimation();
-    this.style.setProperty("--dot-loader-width", `${this.containerWidth}px`);
-    this.style.setProperty("--dot-size", `${this.dotSize}px`);
-    this.style.setProperty("--dot-color", this.color);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stopAnimation();
-  }
-  startAnimation() {
-    this.animateSequence();
-  }
-  stopAnimation() {
-    this.timeoutIds.forEach((id) => window.clearTimeout(id));
-    this.timeoutIds = [];
-  }
-  animateSequence() {
-    this.activeDots = Array(this.numDots).fill(false);
-    for (let i3 = 0; i3 < this.numDots; i3++) {
-      const delay = i3 * (this.animationDuration * this.overlapFactor);
-      const bounceStartId = window.setTimeout(() => {
-        this.activeDots = [...this.activeDots];
-        this.activeDots[i3] = true;
-        const bounceEndId = window.setTimeout(() => {
-          this.activeDots = [...this.activeDots];
-          this.activeDots[i3] = false;
-        }, this.animationDuration);
-        this.timeoutIds.push(bounceEndId);
-      }, delay);
-      this.timeoutIds.push(bounceStartId);
-    }
-    const nextSequenceId = window.setTimeout(
-      () => {
-        this.animateSequence();
-      },
-      this.numDots * this.animationDuration * this.overlapFactor + this.pauseDuration
-    );
-    this.timeoutIds.push(nextSequenceId);
-  }
-  render() {
-    return x`
-      <div class="dot-loader">
-        ${this.activeDots.map(
-      (isActive) => x`
-            <div
-              class="dot"
-              style="transform: ${isActive ? `translateY(-${this.bounceHeight}px)` : "translateY(0)"}"
-            ></div>
-          `
-    )}
-      </div>
-    `;
-  }
-}
-DotLoader.styles = i$4`
-    :host {
-      display: block;
-    }
-
-    .dot-loader {
-      display: flex;
-      flex-direction: row;
-      width: var(--dot-loader-width, 32px);
-      height: 14px;
-      justify-content: center;
-      align-items: center;
-      padding: 0;
-      margin: 0;
-      gap: 4px;
-    }
-
-    .dot {
-      width: var(--dot-size, 2px);
-      height: var(--dot-size, 2px);
-      border-radius: 50%;
-      background-color: var(--dot-color, #fff);
-      margin: 0;
-      padding: 0;
-      transition: transform 0.2s ease-in-out;
-      opacity: 1;
-    }
-  `;
-__decorateClass$3([
-  r$1()
-], DotLoader.prototype, "activeDots", 2);
-if (!customElements.get("obi-dot-loader")) {
-  customElements.define("obi-dot-loader", DotLoader);
-}
-const dotLoader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  DotLoader
-}, Symbol.toStringTag, { value: "Module" }));
-class SearchingLoader extends i$1 {
-  render() {
-    return x`
-      <obi-dot-loader loading style="margin-left: 2px"></obi-dot-loader>
-      <span class="text">Searching the knowledge base</span>
-    `;
-  }
-}
-SearchingLoader.styles = i$4`
-    :host {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      background-color: #7c3aed;
-      border-radius: 12px;
-      padding: 8px 12px;
-    }
-
-    .text {
-      color: white;
-      font-weight: 500;
-      font-size: 14px;
-    }
-  `;
-if (!customElements.get("obi-searching-loader")) {
-  customElements.define("obi-searching-loader", SearchingLoader);
-}
-const searchingLoader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  SearchingLoader
-}, Symbol.toStringTag, { value: "Module" }));
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$2(target, key, result);
-  return result;
-};
-const API_BASE_URL = "https://iamobi.ai/api";
-class ObiWidget extends i$1 {
-  constructor() {
-    super();
-    this.apiBaseUrl = API_BASE_URL;
-    this.apiKey = "";
-    this.position = "bottom-right";
-    this.state = SDKState.READY;
-    this.showCourseModal = false;
-    this.isHovering = false;
-    this.navVisible = false;
-    this.activeSession = null;
-    this.volume = {
-      speaker: "ASSISTANT",
-      volume: 0,
-      spectrum: []
-    };
-    this.screenPosition = this.calculateScreenPosition();
-    this.closeNavTimeoutRef = null;
-    this.handleResize = () => {
-      this.screenPosition = this.calculateScreenPosition();
-    };
-    if (window.obiWidgetConfig) {
-      if (window.obiWidgetConfig.apiKey) {
-        this.apiKey = window.obiWidgetConfig.apiKey;
-      }
-      if (window.obiWidgetConfig.apiBaseUrl) {
-        this.apiBaseUrl = window.obiWidgetConfig.apiBaseUrl;
-      }
-      if (window.obiWidgetConfig.position) {
-        this.position = window.obiWidgetConfig.position;
-      }
-    }
-  }
-  calculateScreenPosition() {
-    return z$1(this.position).with("top-right", () => ({ top: 20, left: window.innerWidth - 100 })).with("bottom-right", () => ({
-      top: window.innerHeight - 100,
-      left: window.innerWidth - 100
-    })).with("top-left", () => ({ top: 20, left: 20 })).with("bottom-left", () => ({ top: window.innerHeight - 100, left: 20 })).otherwise(() => ({ top: window.innerHeight - 100, left: window.innerWidth - 100 }));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("resize", this.handleResize);
-    if (!window.obiWidgetConfig) {
-      window.obiWidgetConfig = {};
-    }
-    window.obiWidgetConfig.apiBaseUrl = this.apiBaseUrl;
-    if (this.apiKey) {
-      window.obiWidgetConfig.apiKey = this.apiKey;
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("resize", this.handleResize);
-    if (this.closeNavTimeoutRef !== null) {
-      window.clearTimeout(this.closeNavTimeoutRef);
-    }
-    if (this.activeSession) {
-      this.activeSession.disconnect();
-      this.activeSession = null;
-    }
-  }
-  handleMouseEnter() {
-    this.isHovering = true;
-    this.navVisible = true;
-  }
-  handleMouseLeave() {
-    this.isHovering = false;
-    if (this.closeNavTimeoutRef !== null) {
-      window.clearTimeout(this.closeNavTimeoutRef);
-    }
-    this.closeNavTimeoutRef = window.setTimeout(() => {
-      if (!this.isHovering) {
-        this.navVisible = false;
-      }
-      this.closeNavTimeoutRef = null;
-    }, 300);
-  }
-  handleItemSelect(id, itemIsActive) {
-    if (id === "experiences") {
-      this.showCourseModal = true;
-      return;
-    }
-    z$1([id, itemIsActive]).with(["pause", true], () => {
-      this.activeSession?.pauseRecording();
-    }).with(["pause", false], () => {
-      this.activeSession?.resumeRecording();
-    }).with(["activate", false], () => {
-      this.activeSession?.disconnect();
-    }).otherwise(() => {
-      return;
-    });
-  }
-  async handleSessionStart(sessionToken) {
-    this.showCourseModal = false;
-    this.state = SDKState.LOADING;
-    try {
-      const { ObiSession } = await import("./chunks/session-e208b5bb.js").then((n3) => n3.s);
-      const session = new ObiSession({ token: sessionToken, apiBaseUrl: this.apiBaseUrl });
-      session.on("stateChanged", (data) => {
-        this.state = data.newState;
-      });
-      session.on("volume", (data) => {
-        this.volume = data;
-      });
-      session.on("error", (data) => {
-        console.error("Session error:", data.error);
-        this.state = SDKState.ERROR;
-        this.activeSession = null;
-      });
-      await session.connect();
-      this.activeSession = session;
-    } catch (error) {
-      console.error("Failed to connect to session:", error);
-      this.state = SDKState.ERROR;
-    }
-  }
-  render() {
-    const { top, left } = this.screenPosition;
-    const actualLeft = this.state === SDKState.RESEARCHING ? left - 265 + 56 : left;
-    const stateRender = z$1(this.state).with(SDKState.LOADING, () => x`<obi-dot-loader></obi-dot-loader>`).with(SDKState.RESEARCHING, () => x`<obi-searching-loader></obi-searching-loader>`).with(
-      N$1.union(SDKState.USER_SPEAKING, SDKState.AGENT_SPEAKING),
-      () => x`<obi-audio-equalizer .volume=${this.volume}></obi-audio-equalizer>`
-    ).with(SDKState.PAUSED, () => obiIcon).otherwise(() => obiIcon);
-    return x`
-      <div
-        class="widget-container ${this.state === SDKState.USER_SPEAKING || this.state === SDKState.AGENT_SPEAKING ? "pulse" : ""} ${this.state !== SDKState.READY || this.navVisible ? "rounded" : ""} ${this.state === SDKState.RESEARCHING ? "researching" : ""} ${this.state === SDKState.USER_SPEAKING ? "user-speaking" : ""}"
-        style="top: ${top}px; left: ${actualLeft}px;"
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}
-      >
-        ${stateRender}
-        ${this.navVisible && this.state !== SDKState.RESEARCHING ? x`
-              <obi-navigation-bar
-                ?isActive=${this.state !== SDKState.READY}
-                .position=${{ top, left: actualLeft }}
-                data-direction="up"
-                .currentState=${this.state}
-                .onItemSelect=${this.handleItemSelect.bind(this)}
-              ></obi-navigation-bar>
-            ` : E}
-      </div>
-      ${this.showCourseModal ? x`<obi-course-modal
-            .onClose=${() => this.showCourseModal = false}
-            .onCourseSelect=${this.handleSessionStart.bind(this)}
-            .apiBaseUrl=${this.apiBaseUrl}
-            .apiKey=${this.apiKey}
-          ></obi-course-modal>` : E}
-    `;
-  }
-}
-ObiWidget.styles = i$4`
-    :host {
-      display: block;
-      position: fixed;
-      z-index: 9999;
-      font-family: Arial, sans-serif;
-      --obi-primary: #7c3aed;
-      --obi-danger: #ef4444;
-      --obi-gray: #6b7280;
-    }
-
-    .widget-container {
-      position: fixed;
-      width: 56px;
-      height: 56px;
-      border-radius: 28px;
-      border-color: transparent;
-      background-color: var(--obi-primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      transition: all 0.2s ease-out;
-    }
-
-    .widget-container.user-speaking {
-      background:
-        linear-gradient(0deg, #c4b5fd, #c4b5fd),
-        linear-gradient(195.84deg, rgba(192, 132, 252, 0) 11.05%, #c084fc 117.01%);
-    }
-
-    .widget-container:hover {
-      border-radius: 12px;
-    }
-
-    .widget-container.rounded {
-      border-radius: 12px;
-    }
-
-    .widget-container.researching {
-      width: 265px;
-      border-radius: 12px;
-    }
-
-    .widget-icon {
-      width: 32px;
-      height: 32px;
-      transition: transform 0.5s ease-in-out;
-    }
-
-    .widget-container.rounded .widget-icon {
-      transform: rotate(110deg);
-    }
-
-    @keyframes pulse-shadow {
-      0% {
-        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
-      }
-      70% {
-        box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
-      }
-      100% {
-        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
-      }
-    }
-
-    .pulse {
-      animation: pulse-shadow 2s ease-in-out infinite;
-    }
-  `;
-__decorateClass$2([
-  n$2({ type: String })
-], ObiWidget.prototype, "apiBaseUrl", 2);
-__decorateClass$2([
-  n$2({ type: String })
-], ObiWidget.prototype, "apiKey", 2);
-__decorateClass$2([
-  n$2({ type: String })
-], ObiWidget.prototype, "position", 2);
-__decorateClass$2([
-  r$1()
-], ObiWidget.prototype, "state", 2);
-__decorateClass$2([
-  r$1()
-], ObiWidget.prototype, "showCourseModal", 2);
-__decorateClass$2([
-  r$1()
-], ObiWidget.prototype, "isHovering", 2);
-__decorateClass$2([
-  r$1()
-], ObiWidget.prototype, "navVisible", 2);
-__decorateClass$2([
-  r$1()
-], ObiWidget.prototype, "activeSession", 2);
-__decorateClass$2([
-  r$1()
-], ObiWidget.prototype, "volume", 2);
-__decorateClass$2([
-  r$1()
-], ObiWidget.prototype, "screenPosition", 2);
-if (!customElements.get("obi-widget")) {
-  customElements.define("obi-widget", ObiWidget);
-}
-const obiWidget = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  ObiWidget
-}, Symbol.toStringTag, { value: "Module" }));
+import { i, n, b as i$1, S as SDKState, x } from "./chunks/obi-widget-0d63936f.js";
+import { c, C, f, g, D, N, d, a, e } from "./chunks/obi-widget-0d63936f.js";
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
     __defProp$1(target, key, result);
@@ -1998,7 +35,7 @@ class ObiStatusWidget extends i$1 {
     }
   }
 }
-ObiStatusWidget.styles = i$4`
+ObiStatusWidget.styles = i`
     :host {
       display: inline-block;
       font-family: Arial, sans-serif;
@@ -2039,7 +76,7 @@ ObiStatusWidget.styles = i$4`
     }
   `;
 __decorateClass$1([
-  n$2({ type: String })
+  n({ type: String })
 ], ObiStatusWidget.prototype, "state", 2);
 if (!customElements.get("obi-status-widget")) {
   customElements.define("obi-status-widget", ObiStatusWidget);
@@ -2052,8 +89,8 @@ 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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
     __defProp(target, key, result);
@@ -2106,7 +143,7 @@ class ObiControlPanel extends i$1 {
     this.dispatchEvent(new CustomEvent("stop"));
   }
 }
-ObiControlPanel.styles = i$4`
+ObiControlPanel.styles = i`
     :host {
       display: block;
       font-family: Arial, sans-serif;
@@ -2171,13 +208,13 @@ ObiControlPanel.styles = i$4`
     }
   `;
 __decorateClass([
-  n$2({ type: String })
+  n({ type: String })
 ], ObiControlPanel.prototype, "state", 2);
 __decorateClass([
-  n$2({ type: Boolean })
+  n({ type: Boolean })
 ], ObiControlPanel.prototype, "voiceEnabled", 2);
 __decorateClass([
-  n$2({ type: Boolean })
+  n({ type: Boolean })
 ], ObiControlPanel.prototype, "screenEnabled", 2);
 if (!customElements.get("obi-control-panel")) {
   customElements.define("obi-control-panel", ObiControlPanel);
@@ -2189,27 +226,27 @@ const controlPanel = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.define
 function defineCustomElements() {
   Promise.resolve().then(() => statusWidget);
   Promise.resolve().then(() => controlPanel);
-  Promise.resolve().then(() => obiWidget);
-  Promise.resolve().then(() => audioEqualizer);
-  Promise.resolve().then(() => dotLoader);
-  Promise.resolve().then(() => navIcon);
-  Promise.resolve().then(() => navigationBar);
-  Promise.resolve().then(() => searchingLoader);
-  Promise.resolve().then(() => courses);
-  Promise.resolve().then(() => courseModal);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.p);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.m);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.o);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.h);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.j);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.s);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.k);
+  import("./chunks/obi-widget-0d63936f.js").then((n2) => n2.l);
 }
 export {
-  AudioEqualizer,
-  Course,
-  CourseList,
-  CourseModal,
-  DotLoader,
-  NavIcon,
-  NavigationBar,
+  c as AudioEqualizer,
+  C as Course,
+  f as CourseList,
+  g as CourseModal,
+  D as DotLoader,
+  N as NavIcon,
+  d as NavigationBar,
   ObiControlPanel,
   ObiStatusWidget,
-  ObiWidget,
-  SearchingLoader,
+  a as ObiWidget,
+  e as SearchingLoader,
   defineCustomElements
 };
 //# sourceMappingURL=ui.js.map