obi-sdk 0.1.1 → 0.1.2

package/dist/modular/ui.js

@@ -0,0 +1,2215 @@
+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" }));
+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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+class ObiStatusWidget extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.state = SDKState.READY;
+  }
+  render() {
+    return x`
+      <div class="status-container">
+        <div class="status-indicator ${this.state}"></div>
+        <div class="status-text">${this.getStatusText()}</div>
+      </div>
+    `;
+  }
+  getStatusText() {
+    switch (this.state) {
+      case SDKState.READY:
+        return "Ready";
+      case SDKState.ERROR:
+        return "Error";
+      default:
+        return "Unknown";
+    }
+  }
+}
+ObiStatusWidget.styles = i$4`
+    :host {
+      display: inline-block;
+      font-family: Arial, sans-serif;
+    }
+
+    .status-container {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border-radius: 16px;
+      background-color: #f3f4f6;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+
+    .status-indicator {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+
+    .ready {
+      background-color: #10b981;
+    }
+
+    .active {
+      background-color: #3b82f6;
+    }
+
+    .error {
+      background-color: #ef4444;
+    }
+
+    .status-text {
+      font-size: 14px;
+      font-weight: 500;
+      color: #1f2937;
+    }
+  `;
+__decorateClass$1([
+  n$2({ type: String })
+], ObiStatusWidget.prototype, "state", 2);
+if (!customElements.get("obi-status-widget")) {
+  customElements.define("obi-status-widget", ObiStatusWidget);
+}
+const statusWidget = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ObiStatusWidget
+}, Symbol.toStringTag, { value: "Module" }));
+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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class ObiControlPanel extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.state = SDKState.READY;
+    this.voiceEnabled = true;
+    this.screenEnabled = true;
+  }
+  render() {
+    const isActive = this.state === SDKState.AGENT_SPEAKING;
+    const isReady = this.state === SDKState.READY;
+    return x`
+      <div class="control-container">
+        <div class="control-header">Obi Controls</div>
+        <div class="control-buttons">
+          <button
+            class="btn-voice"
+            ?disabled=${!isReady || !this.voiceEnabled}
+            @click=${this.handleVoiceClick}
+          >
+            Start Voice
+          </button>
+
+          <button
+            class="btn-screen"
+            ?disabled=${!isReady || !this.screenEnabled}
+            @click=${this.handleScreenClick}
+          >
+            Capture Screen
+          </button>
+
+          <button class="btn-stop" ?disabled=${!isActive} @click=${this.handleStopClick}>
+            Stop
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  handleVoiceClick() {
+    this.dispatchEvent(new CustomEvent("voice-start"));
+  }
+  handleScreenClick() {
+    this.dispatchEvent(new CustomEvent("screen-start"));
+  }
+  handleStopClick() {
+    this.dispatchEvent(new CustomEvent("stop"));
+  }
+}
+ObiControlPanel.styles = i$4`
+    :host {
+      display: block;
+      font-family: Arial, sans-serif;
+      --obi-primary: #3b82f6;
+      --obi-danger: #ef4444;
+      --obi-gray: #6b7280;
+    }
+
+    .control-container {
+      display: flex;
+      flex-direction: column;
+      padding: 16px;
+      border-radius: 8px;
+      background-color: #ffffff;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      max-width: 300px;
+    }
+
+    .control-header {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #111827;
+    }
+
+    .control-buttons {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    button {
+      padding: 8px 12px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition:
+        background-color 0.2s,
+        opacity 0.2s;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .btn-voice {
+      background-color: var(--obi-primary);
+      color: white;
+    }
+
+    .btn-screen {
+      background-color: var(--obi-primary);
+      color: white;
+    }
+
+    .btn-stop {
+      background-color: var(--obi-danger);
+      color: white;
+    }
+  `;
+__decorateClass([
+  n$2({ type: String })
+], ObiControlPanel.prototype, "state", 2);
+__decorateClass([
+  n$2({ type: Boolean })
+], ObiControlPanel.prototype, "voiceEnabled", 2);
+__decorateClass([
+  n$2({ type: Boolean })
+], ObiControlPanel.prototype, "screenEnabled", 2);
+if (!customElements.get("obi-control-panel")) {
+  customElements.define("obi-control-panel", ObiControlPanel);
+}
+const controlPanel = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ObiControlPanel
+}, Symbol.toStringTag, { value: "Module" }));
+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);
+}
+export {
+  AudioEqualizer,
+  Course,
+  CourseList,
+  CourseModal,
+  DotLoader,
+  NavIcon,
+  NavigationBar,
+  ObiControlPanel,
+  ObiStatusWidget,
+  ObiWidget,
+  SearchingLoader,
+  defineCustomElements
+};
+//# sourceMappingURL=ui.js.map