@wral/studio.mods.auth 1.0.1 → 2.0.1

package/dist/auth.es.js

@@ -1,39 +1,21 @@
-import { getToken as G } from "./lib.es.js";
-function be(s, e) {
-  var o, i;
-  const r = e.element.attributes;
-  return console.log(r), {
-    api: r.api.value || ve("auth:api is required"),
-    forceLogin: r["force-login"] !== void 0,
-    // TODO: handle false
-    storageKey: (o = r["storage-key"]) == null ? void 0 : o.value,
-    mount: ((i = r.path) == null ? void 0 : i.value) || "/auth",
-    toolkit: s
-  };
-}
-function ve(s) {
-  throw new Error(s);
-}
-function k(s, ...e) {
-  return (...t) => s(...e, ...t);
-}
+import { getToken as fe } from "./lib.es.js";
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const F = globalThis, K = F.ShadowRoot && (F.ShadyCSS === void 0 || F.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q = Symbol(), Z = /* @__PURE__ */ new WeakMap();
-let ce = class {
-  constructor(e, t, r) {
-    if (this._$cssResult$ = !0, r !== Q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+const q = globalThis, G = q.ShadowRoot && (q.ShadyCSS === void 0 || q.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, V = Symbol(), K = /* @__PURE__ */ new WeakMap();
+let ae = class {
+  constructor(e, t, s) {
+    if (this._$cssResult$ = !0, s !== V) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
     let e = this.o;
     const t = this.t;
-    if (K && e === void 0) {
-      const r = t !== void 0 && t.length === 1;
-      r && (e = Z.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && Z.set(t, e));
+    if (G && e === void 0) {
+      const s = t !== void 0 && t.length === 1;
+      s && (e = K.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && K.set(t, e));
     }
     return e;
   }
@@ -41,74 +23,74 @@ let ce = class {
     return this.cssText;
   }
 };
-const _e = (s) => new ce(typeof s == "string" ? s : s + "", void 0, Q), q = (s, ...e) => {
-  const t = s.length === 1 ? s[0] : e.reduce((r, o, i) => r + ((n) => {
+const ge = (r) => new ae(typeof r == "string" ? r : r + "", void 0, V), J = (r, ...e) => {
+  const t = r.length === 1 ? r[0] : e.reduce((s, o, i) => s + ((n) => {
     if (n._$cssResult$ === !0) return n.cssText;
     if (typeof n == "number") return n;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(o) + s[i + 1], s[0]);
-  return new ce(t, s, Q);
-}, Ae = (s, e) => {
-  if (K) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  })(o) + r[i + 1], r[0]);
+  return new ae(t, r, V);
+}, $e = (r, e) => {
+  if (G) r.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
-    const r = document.createElement("style"), o = F.litNonce;
-    o !== void 0 && r.setAttribute("nonce", o), r.textContent = t.cssText, s.appendChild(r);
+    const s = document.createElement("style"), o = q.litNonce;
+    o !== void 0 && s.setAttribute("nonce", o), s.textContent = t.cssText, r.appendChild(s);
   }
-}, X = K ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
+}, Y = G ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
   let t = "";
-  for (const r of e.cssRules) t += r.cssText;
-  return _e(t);
-})(s) : s;
+  for (const s of e.cssRules) t += s.cssText;
+  return ge(t);
+})(r) : r;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Ee, defineProperty: Pe, getOwnPropertyDescriptor: Se, getOwnPropertyNames: Ce, getOwnPropertySymbols: xe, getPrototypeOf: ke } = Object, $ = globalThis, ee = $.trustedTypes, Te = ee ? ee.emptyScript : "", z = $.reactiveElementPolyfillSupport, U = (s, e) => s, V = { toAttribute(s, e) {
+const { is: ye, defineProperty: be, getOwnPropertyDescriptor: _e, getOwnPropertyNames: we, getOwnPropertySymbols: ve, getPrototypeOf: Ae } = Object, $ = globalThis, Z = $.trustedTypes, Ee = Z ? Z.emptyScript : "", I = $.reactiveElementPolyfillSupport, U = (r, e) => r, W = { toAttribute(r, e) {
   switch (e) {
     case Boolean:
-      s = s ? Te : null;
+      r = r ? Ee : null;
       break;
     case Object:
     case Array:
-      s = s == null ? s : JSON.stringify(s);
+      r = r == null ? r : JSON.stringify(r);
   }
-  return s;
-}, fromAttribute(s, e) {
-  let t = s;
+  return r;
+}, fromAttribute(r, e) {
+  let t = r;
   switch (e) {
     case Boolean:
-      t = s !== null;
+      t = r !== null;
       break;
     case Number:
-      t = s === null ? null : Number(s);
+      t = r === null ? null : Number(r);
       break;
     case Object:
     case Array:
       try {
-        t = JSON.parse(s);
+        t = JSON.parse(r);
       } catch {
         t = null;
       }
   }
   return t;
-} }, de = (s, e) => !Ee(s, e), te = { attribute: !0, type: String, converter: V, reflect: !1, hasChanged: de };
+} }, le = (r, e) => !ye(r, e), X = { attribute: !0, type: String, converter: W, reflect: !1, hasChanged: le };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), $.litPropertyMetadata ?? ($.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class P extends HTMLElement {
+class S extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, t = te) {
+  static createProperty(e, t = X) {
     if (t.state && (t.attribute = !1), this._$Ei(), this.elementProperties.set(e, t), !t.noAccessor) {
-      const r = Symbol(), o = this.getPropertyDescriptor(e, r, t);
-      o !== void 0 && Pe(this.prototype, e, o);
+      const s = Symbol(), o = this.getPropertyDescriptor(e, s, t);
+      o !== void 0 && be(this.prototype, e, o);
     }
   }
-  static getPropertyDescriptor(e, t, r) {
-    const { get: o, set: i } = Se(this.prototype, e) ?? { get() {
+  static getPropertyDescriptor(e, t, s) {
+    const { get: o, set: i } = _e(this.prototype, e) ?? { get() {
       return this[t];
     }, set(n) {
       this[t] = n;
@@ -117,31 +99,31 @@ class P extends HTMLElement {
       return o == null ? void 0 : o.call(this);
     }, set(n) {
       const l = o == null ? void 0 : o.call(this);
-      i.call(this, n), this.requestUpdate(e, l, r);
+      i.call(this, n), this.requestUpdate(e, l, s);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? te;
+    return this.elementProperties.get(e) ?? X;
   }
   static _$Ei() {
     if (this.hasOwnProperty(U("elementProperties"))) return;
-    const e = ke(this);
+    const e = Ae(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(U("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(U("properties"))) {
-      const t = this.properties, r = [...Ce(t), ...xe(t)];
-      for (const o of r) this.createProperty(o, t[o]);
+      const t = this.properties, s = [...we(t), ...ve(t)];
+      for (const o of s) this.createProperty(o, t[o]);
     }
     const e = this[Symbol.metadata];
     if (e !== null) {
       const t = litPropertyMetadata.get(e);
-      if (t !== void 0) for (const [r, o] of t) this.elementProperties.set(r, o);
+      if (t !== void 0) for (const [s, o] of t) this.elementProperties.set(s, o);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [t, r] of this.elementProperties) {
-      const o = this._$Eu(t, r);
+    for (const [t, s] of this.elementProperties) {
+      const o = this._$Eu(t, s);
       o !== void 0 && this._$Eh.set(o, t);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
@@ -149,14 +131,14 @@ class P extends HTMLElement {
   static finalizeStyles(e) {
     const t = [];
     if (Array.isArray(e)) {
-      const r = new Set(e.flat(1 / 0).reverse());
-      for (const o of r) t.unshift(X(o));
-    } else e !== void 0 && t.push(X(e));
+      const s = new Set(e.flat(1 / 0).reverse());
+      for (const o of s) t.unshift(Y(o));
+    } else e !== void 0 && t.push(Y(e));
     return t;
   }
   static _$Eu(e, t) {
-    const r = t.attribute;
-    return r === !1 ? void 0 : typeof r == "string" ? r : typeof e == "string" ? e.toLowerCase() : void 0;
+    const s = t.attribute;
+    return s === !1 ? void 0 : typeof s == "string" ? s : typeof e == "string" ? e.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
@@ -175,18 +157,18 @@ class P extends HTMLElement {
   }
   _$E_() {
     const e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
-    for (const r of t.keys()) this.hasOwnProperty(r) && (e.set(r, this[r]), delete this[r]);
+    for (const s of t.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
     e.size > 0 && (this._$Ep = e);
   }
   createRenderRoot() {
     const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Ae(e, this.constructor.elementStyles), e;
+    return $e(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
     var e;
     this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((t) => {
-      var r;
-      return (r = t.hostConnected) == null ? void 0 : r.call(t);
+      var s;
+      return (s = t.hostConnected) == null ? void 0 : s.call(t);
     });
   }
   enableUpdating(e) {
@@ -194,38 +176,38 @@ class P extends HTMLElement {
   disconnectedCallback() {
     var e;
     (e = this._$EO) == null || e.forEach((t) => {
-      var r;
-      return (r = t.hostDisconnected) == null ? void 0 : r.call(t);
+      var s;
+      return (s = t.hostDisconnected) == null ? void 0 : s.call(t);
     });
   }
-  attributeChangedCallback(e, t, r) {
-    this._$AK(e, r);
+  attributeChangedCallback(e, t, s) {
+    this._$AK(e, s);
   }
   _$EC(e, t) {
     var i;
-    const r = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, r);
-    if (o !== void 0 && r.reflect === !0) {
-      const n = (((i = r.converter) == null ? void 0 : i.toAttribute) !== void 0 ? r.converter : V).toAttribute(t, r.type);
+    const s = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, s);
+    if (o !== void 0 && s.reflect === !0) {
+      const n = (((i = s.converter) == null ? void 0 : i.toAttribute) !== void 0 ? s.converter : W).toAttribute(t, s.type);
       this._$Em = e, n == null ? this.removeAttribute(o) : this.setAttribute(o, n), this._$Em = null;
     }
   }
   _$AK(e, t) {
     var i;
-    const r = this.constructor, o = r._$Eh.get(e);
+    const s = this.constructor, o = s._$Eh.get(e);
     if (o !== void 0 && this._$Em !== o) {
-      const n = r.getPropertyOptions(o), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : V;
+      const n = s.getPropertyOptions(o), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : W;
       this._$Em = o, this[o] = l.fromAttribute(t, n.type), this._$Em = null;
     }
   }
-  requestUpdate(e, t, r) {
+  requestUpdate(e, t, s) {
     if (e !== void 0) {
-      if (r ?? (r = this.constructor.getPropertyOptions(e)), !(r.hasChanged ?? de)(this[e], t)) return;
-      this.P(e, t, r);
+      if (s ?? (s = this.constructor.getPropertyOptions(e)), !(s.hasChanged ?? le)(this[e], t)) return;
+      this.P(e, t, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$ET());
   }
-  P(e, t, r) {
-    this._$AL.has(e) || this._$AL.set(e, t), r.reflect === !0 && this._$Em !== e && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(e);
+  P(e, t, s) {
+    this._$AL.has(e) || this._$AL.set(e, t), s.reflect === !0 && this._$Em !== e && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(e);
   }
   async _$ET() {
     this.isUpdatePending = !0;
@@ -241,7 +223,7 @@ class P extends HTMLElement {
     return this.performUpdate();
   }
   performUpdate() {
-    var r;
+    var s;
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
@@ -254,7 +236,7 @@ class P extends HTMLElement {
     let e = !1;
     const t = this._$AL;
     try {
-      e = this.shouldUpdate(t), e ? (this.willUpdate(t), (r = this._$EO) == null || r.forEach((o) => {
+      e = this.shouldUpdate(t), e ? (this.willUpdate(t), (s = this._$EO) == null || s.forEach((o) => {
         var i;
         return (i = o.hostUpdate) == null ? void 0 : i.call(o);
       }), this.update(t)) : this._$EU();
@@ -267,9 +249,9 @@ class P extends HTMLElement {
   }
   _$AE(e) {
     var t;
-    (t = this._$EO) == null || t.forEach((r) => {
+    (t = this._$EO) == null || t.forEach((s) => {
       var o;
-      return (o = r.hostUpdated) == null ? void 0 : o.call(r);
+      return (o = s.hostUpdated) == null ? void 0 : o.call(s);
     }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
   }
   _$EU() {
@@ -292,76 +274,76 @@ class P extends HTMLElement {
   firstUpdated(e) {
   }
 }
-P.elementStyles = [], P.shadowRootOptions = { mode: "open" }, P[U("elementProperties")] = /* @__PURE__ */ new Map(), P[U("finalized")] = /* @__PURE__ */ new Map(), z == null || z({ ReactiveElement: P }), ($.reactiveElementVersions ?? ($.reactiveElementVersions = [])).push("2.0.4");
+S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[U("elementProperties")] = /* @__PURE__ */ new Map(), S[U("finalized")] = /* @__PURE__ */ new Map(), I == null || I({ ReactiveElement: S }), ($.reactiveElementVersions ?? ($.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const R = globalThis, M = R.trustedTypes, re = M ? M.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, he = "$lit$", w = `lit$${Math.random().toFixed(9).slice(2)}$`, ue = "?" + w, Ue = `<${ue}>`, A = document, O = () => A.createComment(""), N = (s) => s === null || typeof s != "object" && typeof s != "function", J = Array.isArray, Re = (s) => J(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", j = `[ 	
-\f\r]`, T = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, se = /-->/g, oe = />/g, v = RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ie = /'/g, ne = /"/g, pe = /^(?:script|style|textarea|title)$/i, Oe = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), c = Oe(1), S = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), ae = /* @__PURE__ */ new WeakMap(), _ = A.createTreeWalker(A, 129);
-function me(s, e) {
-  if (!J(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return re !== void 0 ? re.createHTML(e) : e;
+const T = globalThis, M = T.trustedTypes, ee = M ? M.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, he = "$lit$", g = `lit$${Math.random().toFixed(9).slice(2)}$`, ce = "?" + g, Se = `<${ce}>`, A = document, k = () => A.createComment(""), R = (r) => r === null || typeof r != "object" && typeof r != "function", Q = Array.isArray, Ce = (r) => Q(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", z = `[ 	
+\f\r]`, x = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, te = /-->/g, se = />/g, b = RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), re = /'/g, oe = /"/g, de = /^(?:script|style|textarea|title)$/i, Pe = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), p = Pe(1), C = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), ie = /* @__PURE__ */ new WeakMap(), w = A.createTreeWalker(A, 129);
+function ue(r, e) {
+  if (!Q(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ee !== void 0 ? ee.createHTML(e) : e;
 }
-const Ne = (s, e) => {
-  const t = s.length - 1, r = [];
-  let o, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = T;
+const xe = (r, e) => {
+  const t = r.length - 1, s = [];
+  let o, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = x;
   for (let l = 0; l < t; l++) {
-    const a = s[l];
-    let u, d, h = -1, m = 0;
-    for (; m < a.length && (n.lastIndex = m, d = n.exec(a), d !== null); ) m = n.lastIndex, n === T ? d[1] === "!--" ? n = se : d[1] !== void 0 ? n = oe : d[2] !== void 0 ? (pe.test(d[2]) && (o = RegExp("</" + d[2], "g")), n = v) : d[3] !== void 0 && (n = v) : n === v ? d[0] === ">" ? (n = o ?? T, h = -1) : d[1] === void 0 ? h = -2 : (h = n.lastIndex - d[2].length, u = d[1], n = d[3] === void 0 ? v : d[3] === '"' ? ne : ie) : n === ne || n === ie ? n = v : n === se || n === oe ? n = T : (n = v, o = void 0);
-    const f = n === v && s[l + 1].startsWith("/>") ? " " : "";
-    i += n === T ? a + Ue : h >= 0 ? (r.push(u), a.slice(0, h) + he + a.slice(h) + w + f) : a + w + (h === -2 ? l : f);
+    const a = r[l];
+    let d, h, c = -1, m = 0;
+    for (; m < a.length && (n.lastIndex = m, h = n.exec(a), h !== null); ) m = n.lastIndex, n === x ? h[1] === "!--" ? n = te : h[1] !== void 0 ? n = se : h[2] !== void 0 ? (de.test(h[2]) && (o = RegExp("</" + h[2], "g")), n = b) : h[3] !== void 0 && (n = b) : n === b ? h[0] === ">" ? (n = o ?? x, c = -1) : h[1] === void 0 ? c = -2 : (c = n.lastIndex - h[2].length, d = h[1], n = h[3] === void 0 ? b : h[3] === '"' ? oe : re) : n === oe || n === re ? n = b : n === te || n === se ? n = x : (n = b, o = void 0);
+    const f = n === b && r[l + 1].startsWith("/>") ? " " : "";
+    i += n === x ? a + Se : c >= 0 ? (s.push(d), a.slice(0, c) + he + a.slice(c) + g + f) : a + g + (c === -2 ? l : f);
   }
-  return [me(s, i + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), r];
+  return [ue(r, i + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
 };
-class H {
-  constructor({ strings: e, _$litType$: t }, r) {
+class O {
+  constructor({ strings: e, _$litType$: t }, s) {
     let o;
     this.parts = [];
     let i = 0, n = 0;
-    const l = e.length - 1, a = this.parts, [u, d] = Ne(e, t);
-    if (this.el = H.createElement(u, r), _.currentNode = this.el.content, t === 2 || t === 3) {
-      const h = this.el.content.firstChild;
-      h.replaceWith(...h.childNodes);
+    const l = e.length - 1, a = this.parts, [d, h] = xe(e, t);
+    if (this.el = O.createElement(d, s), w.currentNode = this.el.content, t === 2 || t === 3) {
+      const c = this.el.content.firstChild;
+      c.replaceWith(...c.childNodes);
     }
-    for (; (o = _.nextNode()) !== null && a.length < l; ) {
+    for (; (o = w.nextNode()) !== null && a.length < l; ) {
       if (o.nodeType === 1) {
-        if (o.hasAttributes()) for (const h of o.getAttributeNames()) if (h.endsWith(he)) {
-          const m = d[n++], f = o.getAttribute(h).split(w), L = /([.?@])?(.*)/.exec(m);
-          a.push({ type: 1, index: i, name: L[2], strings: f, ctor: L[1] === "." ? qe : L[1] === "?" ? De : L[1] === "@" ? Le : I }), o.removeAttribute(h);
-        } else h.startsWith(w) && (a.push({ type: 6, index: i }), o.removeAttribute(h));
-        if (pe.test(o.tagName)) {
-          const h = o.textContent.split(w), m = h.length - 1;
+        if (o.hasAttributes()) for (const c of o.getAttributeNames()) if (c.endsWith(he)) {
+          const m = h[n++], f = o.getAttribute(c).split(g), y = /([.?@])?(.*)/.exec(m);
+          a.push({ type: 1, index: i, name: y[2], strings: f, ctor: y[1] === "." ? Te : y[1] === "?" ? ke : y[1] === "@" ? Re : D }), o.removeAttribute(c);
+        } else c.startsWith(g) && (a.push({ type: 6, index: i }), o.removeAttribute(c));
+        if (de.test(o.tagName)) {
+          const c = o.textContent.split(g), m = c.length - 1;
           if (m > 0) {
             o.textContent = M ? M.emptyScript : "";
-            for (let f = 0; f < m; f++) o.append(h[f], O()), _.nextNode(), a.push({ type: 2, index: ++i });
-            o.append(h[m], O());
+            for (let f = 0; f < m; f++) o.append(c[f], k()), w.nextNode(), a.push({ type: 2, index: ++i });
+            o.append(c[m], k());
           }
         }
-      } else if (o.nodeType === 8) if (o.data === ue) a.push({ type: 2, index: i });
+      } else if (o.nodeType === 8) if (o.data === ce) a.push({ type: 2, index: i });
       else {
-        let h = -1;
-        for (; (h = o.data.indexOf(w, h + 1)) !== -1; ) a.push({ type: 7, index: i }), h += w.length - 1;
+        let c = -1;
+        for (; (c = o.data.indexOf(g, c + 1)) !== -1; ) a.push({ type: 7, index: i }), c += g.length - 1;
       }
       i++;
     }
   }
   static createElement(e, t) {
-    const r = A.createElement("template");
-    return r.innerHTML = e, r;
+    const s = A.createElement("template");
+    return s.innerHTML = e, s;
   }
 }
-function C(s, e, t = s, r) {
+function P(r, e, t = r, s) {
   var n, l;
-  if (e === S) return e;
-  let o = r !== void 0 ? (n = t._$Co) == null ? void 0 : n[r] : t._$Cl;
-  const i = N(e) ? void 0 : e._$litDirective$;
-  return (o == null ? void 0 : o.constructor) !== i && ((l = o == null ? void 0 : o._$AO) == null || l.call(o, !1), i === void 0 ? o = void 0 : (o = new i(s), o._$AT(s, t, r)), r !== void 0 ? (t._$Co ?? (t._$Co = []))[r] = o : t._$Cl = o), o !== void 0 && (e = C(s, o._$AS(s, e.values), o, r)), e;
+  if (e === C) return e;
+  let o = s !== void 0 ? (n = t._$Co) == null ? void 0 : n[s] : t._$Cl;
+  const i = R(e) ? void 0 : e._$litDirective$;
+  return (o == null ? void 0 : o.constructor) !== i && ((l = o == null ? void 0 : o._$AO) == null || l.call(o, !1), i === void 0 ? o = void 0 : (o = new i(r), o._$AT(r, t, s)), s !== void 0 ? (t._$Co ?? (t._$Co = []))[s] = o : t._$Cl = o), o !== void 0 && (e = P(r, o._$AS(r, e.values), o, s)), e;
 }
-class He {
+class Ue {
   constructor(e, t) {
     this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
   }
@@ -372,30 +354,30 @@ class He {
     return this._$AM._$AU;
   }
   u(e) {
-    const { el: { content: t }, parts: r } = this._$AD, o = ((e == null ? void 0 : e.creationScope) ?? A).importNode(t, !0);
-    _.currentNode = o;
-    let i = _.nextNode(), n = 0, l = 0, a = r[0];
+    const { el: { content: t }, parts: s } = this._$AD, o = ((e == null ? void 0 : e.creationScope) ?? A).importNode(t, !0);
+    w.currentNode = o;
+    let i = w.nextNode(), n = 0, l = 0, a = s[0];
     for (; a !== void 0; ) {
       if (n === a.index) {
-        let u;
-        a.type === 2 ? u = new D(i, i.nextSibling, this, e) : a.type === 1 ? u = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (u = new Fe(i, this, e)), this._$AV.push(u), a = r[++l];
+        let d;
+        a.type === 2 ? d = new H(i, i.nextSibling, this, e) : a.type === 1 ? d = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (d = new Oe(i, this, e)), this._$AV.push(d), a = s[++l];
       }
-      n !== (a == null ? void 0 : a.index) && (i = _.nextNode(), n++);
+      n !== (a == null ? void 0 : a.index) && (i = w.nextNode(), n++);
     }
-    return _.currentNode = A, o;
+    return w.currentNode = A, o;
   }
   p(e) {
     let t = 0;
-    for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(e, r, t), t += r.strings.length - 2) : r._$AI(e[t])), t++;
+    for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, t), t += s.strings.length - 2) : s._$AI(e[t])), t++;
   }
 }
-class D {
+class H {
   get _$AU() {
     var e;
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
-  constructor(e, t, r, o) {
-    this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = r, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
+  constructor(e, t, s, o) {
+    this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = s, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -409,7 +391,7 @@ class D {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = C(this, e, t), N(e) ? e === p || e == null || e === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : e !== this._$AH && e !== S && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Re(e) ? this.k(e) : this._(e);
+    e = P(this, e, t), R(e) ? e === u || e == null || e === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : e !== this._$AH && e !== C && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Ce(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -418,31 +400,31 @@ class D {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== p && N(this._$AH) ? this._$AA.nextSibling.data = e : this.T(A.createTextNode(e)), this._$AH = e;
+    this._$AH !== u && R(this._$AH) ? this._$AA.nextSibling.data = e : this.T(A.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var i;
-    const { values: t, _$litType$: r } = e, o = typeof r == "number" ? this._$AC(e) : (r.el === void 0 && (r.el = H.createElement(me(r.h, r.h[0]), this.options)), r);
+    const { values: t, _$litType$: s } = e, o = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = O.createElement(ue(s.h, s.h[0]), this.options)), s);
     if (((i = this._$AH) == null ? void 0 : i._$AD) === o) this._$AH.p(t);
     else {
-      const n = new He(o, this), l = n.u(this.options);
+      const n = new Ue(o, this), l = n.u(this.options);
       n.p(t), this.T(l), this._$AH = n;
     }
   }
   _$AC(e) {
-    let t = ae.get(e.strings);
-    return t === void 0 && ae.set(e.strings, t = new H(e)), t;
+    let t = ie.get(e.strings);
+    return t === void 0 && ie.set(e.strings, t = new O(e)), t;
   }
   k(e) {
-    J(this._$AH) || (this._$AH = [], this._$AR());
+    Q(this._$AH) || (this._$AH = [], this._$AR());
     const t = this._$AH;
-    let r, o = 0;
-    for (const i of e) o === t.length ? t.push(r = new D(this.O(O()), this.O(O()), this, this.options)) : r = t[o], r._$AI(i), o++;
-    o < t.length && (this._$AR(r && r._$AB.nextSibling, o), t.length = o);
+    let s, o = 0;
+    for (const i of e) o === t.length ? t.push(s = new H(this.O(k()), this.O(k()), this, this.options)) : s = t[o], s._$AI(i), o++;
+    o < t.length && (this._$AR(s && s._$AB.nextSibling, o), t.length = o);
   }
   _$AR(e = this._$AA.nextSibling, t) {
-    var r;
-    for ((r = this._$AP) == null ? void 0 : r.call(this, !1, !0, t); e && e !== this._$AB; ) {
+    var s;
+    for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, t); e && e !== this._$AB; ) {
       const o = e.nextSibling;
       e.remove(), e = o;
     }
@@ -452,89 +434,89 @@ class D {
     this._$AM === void 0 && (this._$Cv = e, (t = this._$AP) == null || t.call(this, e));
   }
 }
-class I {
+class D {
   get tagName() {
     return this.element.tagName;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(e, t, r, o, i) {
-    this.type = 1, this._$AH = p, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = i, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = p;
+  constructor(e, t, s, o, i) {
+    this.type = 1, this._$AH = u, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = u;
   }
-  _$AI(e, t = this, r, o) {
+  _$AI(e, t = this, s, o) {
     const i = this.strings;
     let n = !1;
-    if (i === void 0) e = C(this, e, t, 0), n = !N(e) || e !== this._$AH && e !== S, n && (this._$AH = e);
+    if (i === void 0) e = P(this, e, t, 0), n = !R(e) || e !== this._$AH && e !== C, n && (this._$AH = e);
     else {
       const l = e;
-      let a, u;
-      for (e = i[0], a = 0; a < i.length - 1; a++) u = C(this, l[r + a], t, a), u === S && (u = this._$AH[a]), n || (n = !N(u) || u !== this._$AH[a]), u === p ? e = p : e !== p && (e += (u ?? "") + i[a + 1]), this._$AH[a] = u;
+      let a, d;
+      for (e = i[0], a = 0; a < i.length - 1; a++) d = P(this, l[s + a], t, a), d === C && (d = this._$AH[a]), n || (n = !R(d) || d !== this._$AH[a]), d === u ? e = u : e !== u && (e += (d ?? "") + i[a + 1]), this._$AH[a] = d;
     }
     n && !o && this.j(e);
   }
   j(e) {
-    e === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class qe extends I {
+class Te extends D {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === p ? void 0 : e;
+    this.element[this.name] = e === u ? void 0 : e;
   }
 }
-class De extends I {
+class ke extends D {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== p);
+    this.element.toggleAttribute(this.name, !!e && e !== u);
   }
 }
-class Le extends I {
-  constructor(e, t, r, o, i) {
-    super(e, t, r, o, i), this.type = 5;
+class Re extends D {
+  constructor(e, t, s, o, i) {
+    super(e, t, s, o, i), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = C(this, e, t, 0) ?? p) === S) return;
-    const r = this._$AH, o = e === p && r !== p || e.capture !== r.capture || e.once !== r.once || e.passive !== r.passive, i = e !== p && (r === p || o);
-    o && this.element.removeEventListener(this.name, this, r), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
+    if ((e = P(this, e, t, 0) ?? u) === C) return;
+    const s = this._$AH, o = e === u && s !== u || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== u && (s === u || o);
+    o && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
     var t;
     typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
-class Fe {
-  constructor(e, t, r) {
-    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = r;
+class Oe {
+  constructor(e, t, s) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = s;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
   _$AI(e) {
-    C(this, e);
+    P(this, e);
   }
 }
-const W = R.litHtmlPolyfillSupport;
-W == null || W(H, D), (R.litHtmlVersions ?? (R.litHtmlVersions = [])).push("3.2.1");
-const Me = (s, e, t) => {
-  const r = (t == null ? void 0 : t.renderBefore) ?? e;
-  let o = r._$litPart$;
+const j = T.litHtmlPolyfillSupport;
+j == null || j(O, H), (T.litHtmlVersions ?? (T.litHtmlVersions = [])).push("3.2.1");
+const Ne = (r, e, t) => {
+  const s = (t == null ? void 0 : t.renderBefore) ?? e;
+  let o = s._$litPart$;
   if (o === void 0) {
     const i = (t == null ? void 0 : t.renderBefore) ?? null;
-    r._$litPart$ = o = new D(e.insertBefore(O(), i), i, void 0, t ?? {});
+    s._$litPart$ = o = new H(e.insertBefore(k(), i), i, void 0, t ?? {});
   }
-  return o._$AI(s), o;
+  return o._$AI(r), o;
 };
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class b extends P {
+class v extends S {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -545,7 +527,7 @@ class b extends P {
   }
   update(e) {
     const t = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Me(t, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ne(t, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var e;
@@ -556,28 +538,57 @@ class b extends P {
     super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return S;
+    return C;
   }
 }
-var le;
-b._$litElement$ = !0, b.finalized = !0, (le = globalThis.litElementHydrateSupport) == null || le.call(globalThis, { LitElement: b });
+var ne;
+v._$litElement$ = !0, v.finalized = !0, (ne = globalThis.litElementHydrateSupport) == null || ne.call(globalThis, { LitElement: v });
 const B = globalThis.litElementPolyfillSupport;
-B == null || B({ LitElement: b });
+B == null || B({ LitElement: v });
 (globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.1.1");
-function x(s) {
+class He extends v {
+  static get styles() {
+    return J`
+			.login-layout {
+				display: flex;
+				flex-direction: column;
+				gap: 1rem;
+				justify-content: center;
+				align-items: center;
+				min-height: 100vh;
+				background-color: var(--color-gray-100);
+			}
+			.login-layout > * {
+				max-width: 400px;
+			}
+		`;
+  }
+  render() {
+    return p`
+			<div class="login-layout">
+				<slot name="main"></slot>
+			</div>
+		`;
+  }
+}
+customElements.get("mod-auth-layout") === void 0 && customElements.define("mod-auth-layout", He);
+function Le() {
+  return p`<mod-auth-layout></mod-auth-layout>`;
+}
+function N(r) {
   return {
     // Underlying mechanism to use the REST URLs directly.
-    api: (e, t) => E(s, e, t),
-    mintToken: ({ username: e, password: t }) => Ie({ config: s, username: e, password: t }),
-    refreshToken: ({ token: e }) => ze({ config: s, token: e }),
-    pubkey: () => je({ config: s }),
-    updatePassword: ({ token: e, currentPassword: t, newPassword: r }) => We({ config: s, token: e, currentPassword: t, newPassword: r }),
-    triggerResetPassword: ({ username: e }) => Be({ config: s, username: e }),
-    confirmResetPassword: ({ username: e, newPassword: t, confirmationCode: r }) => Ge({ config: s, username: e, newPassword: t, confirmationCode: r })
+    api: (e, t) => E(r, e, t),
+    mintToken: ({ username: e, password: t }) => Fe({ config: r, username: e, password: t }),
+    refreshToken: ({ token: e }) => qe({ config: r, token: e }),
+    pubkey: () => Me({ config: r }),
+    updatePassword: ({ token: e, currentPassword: t, newPassword: s }) => De({ config: r, token: e, currentPassword: t, newPassword: s }),
+    triggerResetPassword: ({ username: e }) => Ie({ config: r, username: e }),
+    confirmResetPassword: ({ username: e, newPassword: t, confirmationCode: s }) => ze({ config: r, username: e, newPassword: t, confirmationCode: s })
   };
 }
-function Ie({ config: s, username: e, password: t }) {
-  return E(s, "/v1/user/login", {
+function Fe({ config: r, username: e, password: t }) {
+  return E(r, "/v1/user/login", {
     method: "POST",
     body: {
       username: e,
@@ -585,93 +596,92 @@ function Ie({ config: s, username: e, password: t }) {
     }
   });
 }
-function ze({ config: s, token: e }) {
-  return E(s, "/v1/refresh", {
+function qe({ config: r, token: e }) {
+  return E(r, "/v1/refresh", {
     method: "POST",
     body: {
       token: e
     }
   });
 }
-function je({ config: s }) {
-  return E(s, "/v1/pubkey", {
+function Me({ config: r }) {
+  return E(r, "/v1/pubkey", {
     method: "GET"
   });
 }
-function We({ config: s, token: e, currentPassword: t, newPassword: r }) {
-  return E(s, "/v1/user/password", {
+function De({ config: r, token: e, currentPassword: t, newPassword: s }) {
+  return E(r, "/v1/user/password", {
     method: "PUT",
     body: {
       currentPassword: t,
-      newPassword: r
+      newPassword: s
     },
     headers: {
       Authorization: `Bearer ${e}`
     }
   });
 }
-function Be({ config: s, username: e }) {
-  return E(s, "/v1/user/password/reset", {
+function Ie({ config: r, username: e }) {
+  return E(r, "/v1/user/password/reset", {
     method: "POST",
     body: {
       username: e
     }
   });
 }
-function Ge({ config: s, username: e, newPassword: t, confirmationCode: r }) {
-  return E(s, "/v1/user/password/reset/confirm", {
+function ze({ config: r, username: e, newPassword: t, confirmationCode: s }) {
+  return E(r, "/v1/user/password/reset/confirm", {
     method: "POST",
     body: {
       username: e,
       newPassword: t,
-      confirmationCode: r
+      confirmationCode: s
     }
   });
 }
-async function E(s, e, t) {
-  var u;
-  const r = s.baseUrl.endsWith("/") ? s.baseUrl : `${s.baseUrl}/`, o = e.startsWith("/") ? e.substring(1) : e, i = new URL(o, r), l = Object.assign({}, t, {
+async function E(r, e, t) {
+  var d;
+  const s = r.baseUrl.endsWith("/") ? r.baseUrl : `${r.baseUrl}/`, o = e.startsWith("/") ? e.substring(1) : e, i = new URL(o, s), l = Object.assign({}, t, {
     headers: Object.assign({}, {
       "Content-Type": "application/json"
     }, t == null ? void 0 : t.headers),
     body: t != null && t.body ? JSON.stringify(t.body) : void 0
   }), a = await fetch(i.toString(), l);
   if (!a.ok) {
-    const d = new Error("API request failed.");
-    if (d.status = a.status, d.statusText = a.statusText, d.url = i.toString(), d.headers = a.headers, d.bodyUsed = a.bodyUsed, (u = a.headers.get("Content-Type")) != null && u.includes("application/json"))
+    const h = new Error("API request failed.");
+    if (h.status = a.status, h.statusText = a.statusText, h.url = i.toString(), h.headers = a.headers, h.bodyUsed = a.bodyUsed, (d = a.headers.get("Content-Type")) != null && d.includes("application/json"))
       try {
-        d.body = await a.json();
+        h.body = await a.json();
       } catch {
-        d.body = "Failed to parse response body.";
+        h.body = "Failed to parse response body.";
       }
-    throw d;
+    throw h;
   }
   if (a.status !== 204)
     return await a.json();
 }
-function fe({ api: s }, e) {
-  const t = x({
-    baseUrl: s
-  });
-  return console.log("sending credentials to API", s), t.mintToken(e);
-}
-const g = Object.freeze({
+const _ = Object.freeze({
   REQUEST: "request",
   CONFIRM: "confirm",
   FINISHED: "finished"
 });
-class Ve extends b {
+class je extends v {
   static get properties() {
     return {
-      api: { type: String, attribute: "api" },
-      confirmation: { type: "String", attribute: "confirmation" }
+      api: { type: String }
     };
   }
   static get styles() {
-    return q`
+    return J`
 			:host {
-				display: block;
-				font-family: Arial, sans-serif;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+			}
+			form {
+				display: flex;
+				flex-direction: column;
 			}
 			form input[type="text"],
 			form input[type="password"] {
@@ -679,14 +689,14 @@ class Ve extends b {
 				margin: 5px 0 15px 0;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				box-sizing: border-box;
-				border: 1px solid var(--color-gray-300, #ccc);
-				border-radius: var(--radius-sm, 5px);
-				color: var(--color-gray-9, #333);
-				background-color: var(--color-gray-0, transparent);
+				border: 1px solid var(--color-gray-300, #CCC);
+				border-radius: var(--radius-sm, 3px);
+				color: var(--color-gray-700, #333);
+				background-color: var(--color-gray-50, #FFF);
 			}
 			form input[type="submit"] {
-				background-color:var(--color-primary, inherit);
-				color: var(--color-gray-0, #fff);
+				background-color: var(--color-primary, inherit);
+				color: var(--color-gray-50, #fff);
 				border: none;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				border-radius: var(--radius-dynamic, 5px);
@@ -697,81 +707,84 @@ class Ve extends b {
 			}
 			form label {
 				font-size: 14px;
-				color: var(--color-gray-9, #333);
+				color: var(--color-gray-700, #333);
 				font-weight: bold;
 				margin-bottom: var(--spacing-sm, 0.5rem);
 			}
 			.error {
 				color: var(--color-danger, red);
-				font-size: 12px;
+				font-size: 14px;
 			}
 		`;
   }
   constructor() {
-    super(), this.errors = {}, this.stage = g.REQUEST;
+    super(), this.errors = {}, this.stage = _.REQUEST;
   }
   connectedCallback() {
-    console.log("[auth]", "[forgot-password]", { confirmation: this.confirmation }), super.connectedCallback(), this.confirmation && this.stage !== g.FINISHED && (this.stage = g.CONFIRM), this.requestUpdate();
+    super.connectedCallback(), this.confirmToken && this.stage !== _.FINISHED && this.setStage(_.CONFIRM);
+  }
+  setStage(e) {
+    this.stage !== e && (this.stage = e, this.requestUpdate());
   }
   handleSubmitRequest(e) {
     e.preventDefault();
     const t = e.target.username.value;
-    this.username = t, x({
-      baseUrl: this.api
-    }).triggerResetPassword({ username: t }).then(() => {
-      console.log("[auth]", "triggered reset password for ", t), this.stage = g.CONFIRM;
+    this.username = t, N({ baseUrl: this.api }).triggerResetPassword({ username: t }).then(() => {
+      this.setStage(_.CONFIRM);
     }).catch((o) => {
-      console.error("[auth] error triggering reset password", o), this.errors.general = o.message || "Unable to send password reset request. Please try again later.";
+      this.errors.general = o.message || "Unable to send password reset request. Please try again later.";
     }).finally(() => {
       this.requestUpdate();
     });
   }
   handleSubmitConfirm(e) {
     e.preventDefault();
-    const t = e.target.password.value, r = e.target["confirm-password"].value;
-    if (t !== r) {
-      this.errors["confirm-password"] = "Passwords do not match.", this.requestUpdate();
+    const t = e.target.password.value, s = e.target["confirm-password"].value;
+    if (t !== s) {
+      this.errors["confirm-password"] = "Passwords do not match", this.requestUpdate();
       return;
     }
-    const o = this.confirmation || e.target.confirmation.value;
+    const o = this.confirmToken || e.target.confirmation.value;
     if (!o) {
-      this.errors.general = "Confirmation code is required.", this.requestUpdate();
+      this.errors.general = "Confirmation code is required", this.requestUpdate();
       return;
     }
-    x({
+    const i = N({
       baseUrl: this.api
-    }).confirmResetPassword({
+    });
+    i.confirmResetPassword({
       username: this.username,
       newPassword: t,
       confirmationCode: o
-    }).then(() => fe(this, { username: this.username, password: t }).then(({ token: n }) => {
-      this.dispatchEvent(new CustomEvent("login-success", {
-        detail: { token: n },
-        composed: !0,
-        bubbles: !0
-      }));
-    })).catch((n) => {
-      console.error("[auth][forgot-password-form]", n), this.errors.general = "Unable to reset password. Please try again later.";
+    }).then(() => {
+      i.mintToken({ username: this.username, password: t }).then(({ token: n }) => {
+        this.dispatchEvent(new CustomEvent("login-success", {
+          detail: { token: n },
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0
+        }));
+      });
+    }).catch((n) => {
+      this.errors.general = n.message || "Unable to send password reset request. Please try again later.";
     }).finally(() => {
       this.requestUpdate();
     });
   }
   render() {
     switch (this.stage) {
-      case g.CONFIRM:
+      case _.FINISHED:
+        return p`<p>Your password has been reset.</p>`;
+      case _.CONFIRM:
         return this.renderConfirmForm();
-      case g.FINISHED:
-        return c`<p>Your password has been reset.</p>`;
-      case g.REQUEST_SENT:
-        return c`<p>A email has been sent with instructions to finish
-				resetting your password.</p>`;
-      case g.REQUEST:
+      case _.REQUEST:
       default:
         return this.renderRequestForm();
     }
   }
   renderRequestForm() {
-    return c`<form @submit=${this.handleSubmitRequest}>
+    return p`<form @submit="${this.handleSubmitRequest}">
+		<p>Enter your username or email address to request a password reset.</p>
 			<label for="username">Username/Email</label>
 			<input
 				type="text"
@@ -780,20 +793,20 @@ class Ve extends b {
 				required
 			/>
 			<p class="error">${this.errors.general}</p>
-			<input type="submit" value="Request password reset" />
+			<input type="submit" value="Request Password Reset" />
 		</form>`;
   }
   renderConfirmForm() {
-    return c`<form @submit=${this.handleSubmitConfirm}>
-			<p>You should have received a confirmation code to reset your password</p>
+    return p`<form @submit="${this.handleSubmitConfirm}">
+		<p>You should have received a confirmation code to reset your password.</p>
 
-			${this.confirmation ? "" : c`<label for="confirmation">Confirmation Code</label>
-			<input
-				type="text"
-				name="confirmation"
-				placeholder="Confirmation Code"
-				required
-			/>`}
+		${this.confirmToken ? "" : p`<label for="confirmation">Confirmation Code</label>
+				<input
+					type="text"
+					name="confirmation"
+					placeholder="Confirmation Code"
+					required
+				/>`}
 
 			<label for="password">New Password</label>
 			<input
@@ -802,8 +815,6 @@ class Ve extends b {
 				placeholder="Password"
 				required
 			/>
-			${this.errors.password ? c`<p class="error">${this.errors.password}</p>` : ""}
-			
 			<label for="confirm-password">Confirm Password</label>
 			<input
 				type="password"
@@ -811,27 +822,28 @@ class Ve extends b {
 				placeholder="Confirm Password"
 				required
 			/>
-			${this.errors["confirm-password"] ? c`<p class="error">${this.errors["confirm-password"]}</p>` : ""}
+			${this.errors["confirm-password"] ? p`<p class="error">${this.errors["confirm-password"]}</p>` : ""}
+
+			${this.errors.general ? p`<p class="error">${this.errors.general}</p>` : ""}
 
-			${this.errors.general ? c`<p class="error">${this.errors.general}</p>` : ""}
 			<input type="submit" value="Reset Password" />
 		</form>`;
   }
 }
-class y extends b {
+customElements.get("auth-forgot-password-form") || window.customElements.define("auth-forgot-password-form", je);
+class Be extends v {
   static get properties() {
     return {
       api: { type: String, attribute: "api" }
     };
   }
   static get styles() {
-    return q`
+    return J`
 			:host {
 				display: block;
-				font-family: Arial, sans-serif;
 			}
 			.login-form {
-				background-color: var(--color-gray-0, #fff);
+				background-color: var(--color-gray-50);
 				padding: var(--spacing-xl, 3rem);
 				border-radius: var(--radius-md, 5px);
 				box-shadow: var(--drop-shadow-md, none);
@@ -842,14 +854,14 @@ class y extends b {
 				margin: 5px 0 15px 0;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				box-sizing: border-box;
-				border: 1px solid var(--color-gray-300, #ccc);
-				border-radius: var(--radius-sm, 5px);
-				color: var(--color-gray-9, #333);
-				background-color: var(--color-gray-0, transparent);
+				border: 1px solid var(--color-gray-300, #CCC);
+				border-radius: var(--radius-sm, 3px);
+				color: var(--color-gray-700, #333);
+				background-color: var(--color-gray-100, #FFF);
 			}
 			form input[type="submit"] {
 				background-color: var(--color-primary, inherit);
-				color: var(--color-gray-0, #fff);
+				color: var(--color-gray-50, #fff);
 				border: none;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				border-radius: var(--radius-dynamic, 5px);
@@ -860,15 +872,15 @@ class y extends b {
 			}
 			form label {
 				font-size: 14px;
-				color: var(--color-gray-9, #333);
+				color: var(--color-gray-900, #333);
 				font-weight: bold;
 				margin-bottom: var(--spacing-sm, 0.5rem);
 			}
 			a.forgot {
 				color: var(--color-primary, inherit);
 				text-decoration: none;
-				font-size: 12px;
 				font-weight: bold;
+				font-size: 12px;
 			}
 			.error {
 				color: var(--color-error, red);
@@ -883,7 +895,7 @@ class y extends b {
 			.header .intro {
 				width: 200px;
 				margin-bottom: 0;
-				color: var(--color-gray-3);
+				color: var(--color-gray-300, #333);
 			}
 			.header .brand {
 				font-size: 32px;
@@ -905,474 +917,232 @@ class y extends b {
     };
   }
   constructor() {
-    super(), this.formState = y.states.DEFAULT, this.username = "", this.password = "", this.token = void 0, this.errors = [];
+    super(), this.formState = this.constructor.states.DEFAULT, this.errors = [], this.isBusy = !1;
+  }
+  login({ username: e, password: t }) {
+    return N({
+      baseUrl: this.api
+    }).mintToken({ username: e, password: t });
+  }
+  emitLoginSuccess(e) {
+    this.dispatchEvent(new CustomEvent("login-success", {
+      detail: { token: e },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    }));
   }
-  onSubmit(e) {
+  handleSubmitLogin(e) {
     e.preventDefault();
-    const t = e.explicitOriginalTarget.parentElement;
-    console.log(t);
-    const r = new FormData(t).entries().reduce((o, [i, n]) => (o[i] = n, o), {});
-    fe(this, r).then(({ token: o, challenge: i }) => {
-      if (i && i.name === "NEW_PASSWORD_REQUIRED") {
-        this.token = o, this.username = r.username, this.password = r.password, this.setState(y.states.CHALLENGE_CHANGE_PW);
+    const t = e.currentTarget, s = new FormData(t).entries().reduce((o, [i, n]) => (o[i] = n, o), {});
+    this.isBusy = !0, this.errors = [], this.requestUpdate(), this.login(s).then(({ token: o, challenge: i }) => {
+      if ((i == null ? void 0 : i.name) === "NEW_PASSWORD_REQUIRED") {
+        this.token = o, this.username = s.username, this.password = s.password, this.setState(this.constructor.states.CHALLENGE_CHANGE_PW);
         return;
       }
-      this.dispatchEvent(new CustomEvent("login-success", {
-        detail: { token: o }
-      }));
+      this.emitLoginSuccess(o);
     }).catch((o) => {
-      console.log(o), this.errors = [o.message], this.requestUpdate();
+      console.error(o), this.errors = [o.message], this.requestUpdate();
     });
   }
   onSubmitChangePasswordChallenge(e) {
     e.preventDefault();
-    const t = e.explicitOriginalTarget, r = new FormData(t).entries().reduce((l, [a, u]) => (l[a] = u, l), {}), o = r.password, i = r["confirm-password"];
+    const t = e.currentTarget, s = new FormData(t).entries().reduce((l, [a, d]) => (l[a] = d, l), {}), o = s.password, i = s["confirm-password"];
     if (o !== i) {
-      this.errors = ["Passwords do not match."], this.requestUpdate();
+      this.errors = ["Passwords do not match"], this.requestUpdate();
       return;
     }
-    x({
+    N({
       baseUrl: this.api
     }).updatePassword({
       token: this.token,
       currentPassword: this.password,
       newPassword: o
     }).then(() => {
-      this.dispatchEvent(new CustomEvent("login-success", {
-        detail: { token: this.token }
-      }));
+      this.emitLoginSuccess(this.token);
     }).catch((l) => {
-      console.log(l), this.errors = [l.message], this.requestUpdate();
+      console.error(l), this.errors = [l.message], this.requestUpdate();
     });
   }
   setState(e) {
-    e !== this.formState && (this.formState = e, this.errors = [], this.requestUpdate());
+    this.formState = e, this.isBusy = !1, this.errors = [], this.requestUpdate();
   }
   render() {
-    return c`<div class="login-form">
+    return p`<div class="login-form">
 			${this.renderHeader()}
-		${this.formState === y.states.FORGOT ? this.renderForgotPasswordForm() : ""}
-		${this.formState === y.states.CHALLENGE_CHANGE_PW ? this.renderChangePasswordForm() : ""}
-		${this.formState === y.states.DEFAULT ? this.renderLoginForm() : ""}
+			${this.formState === this.constructor.states.DEFAULT ? this.renderLoginForm() : ""}
+			${this.formState === this.constructor.states.CHALLENGE_CHANGE_PW ? this.renderChangePasswordForm() : ""}
+			${this.formState === this.constructor.states.FORGOT ? this.renderForgotPasswordForm() : ""}
 		</div>`;
   }
-  /**
-   * TODO: accept the header as a slot
-   */
   renderHeader() {
-    return c`<div class="header">
-			<div class="intro">
-				Welcome to
-			</div>
-			<div class="brand">
-				<em>WRAL</em>.studio
-			</div>
+    return p`<div class="header">
+			<div class="intro">Welcome to</div>
+			<div class="brand"><em>WRAL</em>.studio</div>
 		</div>`;
   }
   renderLoginForm() {
-    return c`
-		<form>
-					<label for="username">User</label>
-					<input
-						type="text"
-						name="username"
-						placeholder="Email or Username"
-						required
-					/>
-
-					<label for="password">Password</label>
-					<input
-						type="password"
-						name="password"
-						placeholder="Password"
-						required
-					/>
-					<div>
-						<a href="#" class="forgot"
-							@click=${() => {
-      this.setState(y.states.FORGOT);
-    }}
-						>Forgot password</a>
-					</div>
-
-					${this.errors ? this.errors.map((e) => c`<p class="error">${e}</p>`) : ""}
-					<input type="submit" value="Log in" @click=${this.onSubmit} />
+    return p`
+			<form @submit=${this.handleSubmitLogin}>
+				<label for="username">User</label>
+				<input
+					type="text"
+					name="username"
+					placeholder="Email or Username"
+					required
+				/>
 
-				</form>`;
-  }
-  renderForgotPasswordForm() {
-    return c`
-			<auth-forgot-password-form
-				api=${this.api}>
-			</auth-forgot-password-form>
-		`;
-  }
-  renderChangePasswordForm() {
-    return c`
-			<p>You have logged in successfully, but you must change your password.</p>
-			<form @submit=${this.onSubmitChangePasswordChallenge}>
-				<input type="hidden" name="username" value="${this.username}" />
-				<label for="password">New Password</label>
+				<label for="password">Password</label>
 				<input
 					type="password"
 					name="password"
 					placeholder="Password"
 					required
 				/>
-				<label for="confirm-password">Confirm Password</label>
-				<input
-					type="password"
-					name="confirm-password"
-					placeholder="Confirm Password"
-					required
+				<div>
+					<a href="#" class="forgot"
+						@click=${() => {
+      this.setState(this.constructor.states.FORGOT);
+    }}>Forgot password</a>
+				</div>
+				${this.errors ? this.errors.map((e) => p`<p class="error">${e}</p>`) : ""}
+
+				<input type="submit" value="Log in"
+					?disabled=${this.isBusy}
 				/>
-				${this.errors ? this.errors.map((e) => c`<p class="error">${e}</p>`) : ""}
-				<input type="submit" value="Change Password" />
 			</form>
 		`;
   }
-}
-customElements.define("auth-login-form", y);
-customElements.define("auth-forgot-password-form", Ve);
-function Ke() {
-  return function(s) {
-    const e = q`
-			.login-layout {
-				display: flex;
-				flex-direction: column;
-				gap: 1rem;
-				justify-content: center;
-				align-items: center;
-				min-height: 100vh;
-				background-color: var(--color-gray-100, #f5f5f5);
-			}
-			.login-layout > * {
-				max-width: 400px;
-			}
+  renderForgotPasswordForm() {
+    return p`
+			<auth-forgot-password-form
+				api=${this.api}>
+			</auth-forgot-password-form>
 		`;
-    return c`
-			<style>${e}</style>
-			<div class="login-layout">
-				${s.main}
-			</div>
+  }
+  renderChangePasswordForm() {
+    return p`
+		<p>You have logged in successfully, but you must change your password.</p>
+		<form @submit="${this.onSubmitChangePasswordChallenge}">
+			<input type="hidden" name="username" value="${this.username}" />
+			<label for="password">New Password</label>
+			<input
+				type="password"
+				name="password"
+				placeholder="Password"
+				required
+			/>
+			<label for="confirm-password">Confirm Password</label>
+			<input
+				type="password"
+				name="confirm-password"
+				placeholder="Confirm Password"
+				required
+			/>
+			${this.errors ? this.errors.map((e) => p`<p class="error">${e}</p>`) : ""}
+			<input type="submit" value="Change Password" />
+		</form>
 		`;
-  };
-}
-function Qe(s) {
-  return JSON.parse(window.atob(s.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
-}
-function Je(s, e = 300, t = Date.now()) {
-  return Qe(s).exp * 1e3 - e < t;
-}
-function ge(s) {
-  return (s.startsWith("/") ? s : `/${s}`).replace(/\/{2,}/g, "/").replace(new RegExp("(?<=.)\\/$"), "");
-}
-function ye(s, e, t) {
-  const r = Ze(s, t);
-  e.pushState(t, t.title, r), s.requestRender(t);
+  }
 }
-function Ye(s, e) {
-  const { mount: t } = s.config, { history: r } = s.config.toolkit.element.ownerDocument.defaultView;
-  return e.startsWith(t) ? {
-    path: ge(e.slice(t.length)),
-    push: (o) => ye(s, r, o)
-  } : null;
+customElements.get("auth-login-form") || customElements.define("auth-login-form", Be);
+function We(r, e) {
+  return p`<auth-login-form slot="main"
+		api=${r == null ? void 0 : r.apiBaseUrl}
+		@login-success=${e}>
+	</auth-login-form>`;
 }
-function Ze(s, e) {
-  const { mount: t } = s.config;
-  return ge(`${t}/${e.path}`);
+function Ge({ tokenKey: r }) {
+  return window.localStorage.getItem(r);
 }
-function Xe(s, e) {
-  const { history: t } = e.config.toolkit.element.ownerDocument.defaultView;
-  return c`
-	<h1>Auth Dashboard</h1>
-	<ul>
-	<li><a href="#" @click=${((o, i) => () => {
-    ye(e, t, { path: o, title: i });
-  })("/change-password")}>Change Password</a></li>
-	<li><a href="#" @click=${e.handleDestroyAuth}>Logout</a></li>
-	</ul>
-	`;
+function Ve({ tokenKey: r }, e) {
+  window.localStorage.setItem(r, e);
 }
-function et(s, e) {
-  return c`
-		<auth-change-password-form .auth=${e}></auth-change-password-form>
-	`;
+function Je({ tokenKey: r }) {
+  window.localStorage.removeItem(r);
 }
-class tt extends b {
-  static get styles() {
-    return q`
-			:host {
-				color: var(--color-text);
-				display: block;
-				font-family: var(--font-body);
-			}
-			h1,h2,h3,h4,h5,h6,label { font-family: var(--font-heading) }
-			label {
-				display: block;
-				font-size: var(--font-size-base);
-				margin-top: var(--spacing-md, 0.5rem);
-			}
-			input[type="text"],
-			input[type="password"] {
-				width: 100%;
-				margin: 5px 0 15px 0;
-				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
-				box-sizing: border-box;
-				border: 1px solid var(--color-gray-300, #ccc);
-				border-radius: var(--radius-sm, 5px);
-				color: var(--color-gray-9, #333);
-				background-color: var(--color-gray-0, transparent);
-			}
-			input[type="submit"] {
-				background-color: var(--color-primary, inherit);
-				color: var(--color-gray-0, #fff);
-				border: none;
-				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
-				border-radius: var(--radius-dynamic, 5px);
-				width: 200px;
-				cursor: pointer;
-			}
-			.error {
-				color: var(--color-error);
-			}
-		`;
-  }
-  static get properties() {
-    return {
-      auth: { type: Object }
-    };
-  }
-  constructor() {
-    super(), this.errors = {}, this.success = null;
-  }
-  connectedCallback() {
-    super.connectedCallback(), G(this);
-  }
-  async onSubmit(e) {
-    if (e.preventDefault(), e.target.newPassword.value !== e.target.confirmPassword.value) {
-      this.errors.confirmPassword = "Passwords do not match", this.requestUpdate();
-      return;
-    }
-    if (e.target.newPassword.value === e.target.currentPassword.value) {
-      this.errors.newPassword = "The new password is the same as your current password.", this.requestUpdate();
-      return;
-    }
-    await G(this), await x({
-      baseUrl: this.auth.config.api
-    }).updatePassword({
-      currentPassword: e.target.currentPassword.value,
-      newPassword: e.target.newPassword.value
-    }).then(() => {
-      this.errors = {}, this.success = "Password changed.", this.requestUpdate();
-    }).catch((r) => {
-      this.errors.submit = r.message, this.requestUpdate();
-    });
-  }
-  render() {
-    return c`
-			<h1>Change your password</h1>
-			<p>Enter your current password and choose a new password.</p>
-			<form @submit=${this.onSubmit}>
-				<div class="field">
-					<label for="currentPassword">Current Password</label>
-					<input
-						type="password"
-						name="currentPassword"
-						placeholder="Current Password"
-						required
-					/>
-					${this.errors.currentPassword ? c`<p class="error">${this.errors.currentPassword}</p>` : ""}
-				</div>
-				<div class="field">
-					<label for="newPassword">New Password</label>
-					<input
-						type="password"
-						name="newPassword"
-						placeholder="New Password"
-						required
-					/>
-					${this.errors.newPassword ? c`<p class="error">${this.errors.newPassword}</p>` : ""}
-				</div>
-				<div class="field">
-					<label for="confirmPassword">Confirm Password</label>
-					<input
-						type="password"
-						name="confirmPassword"
-						placeholder="Confirm Password"
-						required
-					/>
-					${this.errors.confirmPassword ? c`<p class="error">${this.errors.confirmPassword}</p>` : ""}
-				</div>
-				<input type="submit" value="Change Password" />
-				${this.errors.submit ? c`<p class="error">${this.errors.submit}</p>` : ""}
-				${this.success ? c`<p class="success">${this.success}</p>` : ""}
-			</form>
-		`;
-  }
-}
-customElements.get("auth-change-password-form") || customElements.define("auth-change-password-form", tt);
-const rt = [
-  { path: "/", render: Xe },
-  { path: "/change-password", render: et }
-];
-function st(s, e) {
-  const { path: t } = s, r = rt.find((o) => o.path === t);
-  if (r)
-    return r.render(s, e);
+async function Qe(r) {
+  const e = Ge(r);
+  if (!e || e.length < 1)
+    throw new Error("No token found");
+  return Ke(e) ? await N({
+    baseUrl: r.apiBaseUrl
+  }).refreshToken({ token: e }).then(({ token: s }) => s) : e;
 }
-const ot = q`
-	:host {
-
-	}
-`;
-class it extends b {
-  static get styles() {
-    return [ot];
-  }
-  static get properties() {
-    return {
-      state: { type: Object },
-      auth: { type: Object }
-    };
-  }
-  render() {
-    const { state: e, auth: t } = this;
-    return st(e, t);
-  }
+function Ke(r, e = 300, t = Date.now()) {
+  return Ye(r).exp * 1e3 - e < t;
 }
-customElements.get("auth-app") || customElements.define("auth-app", it);
-function nt(s) {
-  const e = {
-    config: s,
-    log: (...t) => console.log("[auth]", ...t)
-  };
-  return e.mount = k(at, e), e.handleTokenRequest = ct(e), e.handleDestroyAuth = dt(e), e.presentLoginForm = k(ht, e), e.getToken = k($e, e), e.saveToken = k(ut, e), e.getFreshToken = k(pt, e), e.requestRender = (t) => we(e, t), e;
+function Ye(r) {
+  return JSON.parse(window.atob(r.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
 }
-function at(s) {
-  const e = s.config.toolkit.element.ownerDocument.defaultView;
-  [
-    {
-      type: "action:register",
-      detail: {
-        actionType: "auth:requestToken",
-        handler: s.handleTokenRequest,
-        modName: "auth"
-      }
+function ot(r, e) {
+  var n, l, a, d, h, c, m, f, y;
+  const t = "mod-auth", s = ((a = (l = (n = e == null ? void 0 : e.element) == null ? void 0 : n.attributes) == null ? void 0 : l.debug) == null ? void 0 : a.value) || !1, o = ((c = (h = (d = e == null ? void 0 : e.element) == null ? void 0 : d.attributes) == null ? void 0 : h["force-login"]) == null ? void 0 : c.value) || !1, i = {
+    modName: t,
+    toolkit: r,
+    apiBaseUrl: ((y = (f = (m = e == null ? void 0 : e.element) == null ? void 0 : m.attributes) == null ? void 0 : f.api) == null ? void 0 : y.value) || "https://api.wral.com/auth",
+    debug: s ? (...L) => console.log("[auth]", ...L) : () => {
     },
-    {
+    tokenKey: `${t}::token`,
+    callbacks: [],
+    isLoginPresent: !1
+  };
+  Object.entries({
+    "auth:requestToken": Ze,
+    "auth:destroy": Xe
+  }).forEach(([L, pe]) => {
+    const me = (...F) => i.debug("[action]", L, ...F);
+    r.dispatchAction({
       type: "action:register",
       detail: {
-        actionType: "auth:destroy",
-        handler: s.handleDestroyAuth,
-        modName: "auth"
-      }
-    },
-    {
-      type: "layout:register",
-      detail: {
-        name: "auth:login",
-        slots: ["main"],
-        templateFn: Ke()
+        actionType: L,
+        modName: t,
+        handler: (...F) => {
+          me("handler", ...F), pe(i, ...F);
+        }
       }
-    }
-  ].forEach((t) => s.config.toolkit.dispatchAction(t)), e.addEventListener("popstate", lt(s));
-}
-function we(s, e) {
-  const t = s.config.toolkit.element.ownerDocument.defaultView;
-  let r = e;
-  r || (r = Ye(s, t.location.pathname)), r && s.config.toolkit.dispatchAction({
-    type: "layout:slot:replace",
+    });
+  }), r.dispatchAction({
+    type: "layout:register",
     detail: {
-      layout: "menu-main-task-layout",
-      slot: "main",
-      content: c`<auth-app .state=${r} .auth=${s}></auth-app>`
+      name: `${t}::auth-layout`,
+      templateFn: Le
     }
-  });
+  }), o && fe(e.element);
 }
-function lt(s) {
-  return (e) => {
-    s.log("onpopstate", e), we(s);
-  };
-}
-function ct(s) {
-  let e = [], t = !1;
-  const r = (o) => {
-    e.forEach((i) => {
-      i(o);
-    }), e = [];
-  };
-  return async ({ callback: o }) => {
-    let i;
-    try {
-      i = await s.getFreshToken(), o(i);
-    } catch (n) {
-      e.push(o), t || (s.presentLoginForm({ onLogin: r }), t = !0), s.log(n);
-    }
-  };
+async function Ze(r, e) {
+  const { callback: t } = e;
+  let s;
+  try {
+    s = await Qe(r), t(s);
+  } catch (o) {
+    console.log("Presenting login form to get a fresh token", o), r.callbacks.push(t), r.isLoginPresent || et(r);
+  }
 }
-function dt(s) {
-  return () => {
-    const e = Y(s);
-    window.localStorage.removeItem(e), s.config.toolkit.dispatchAction({
-      type: "layout:pop"
-    });
-  };
+function Xe(r) {
+  Je(r);
 }
-function ht(s, { onLogin: e }) {
-  const { toolkit: t } = s.config, o = new URLSearchParams(
-    t.element.ownerDocument.defaultView.location.search
-  ).get("password_reset_confirmation"), i = (n) => {
-    s.log("login success", { event: n });
-    const { token: l } = n.detail;
-    s.log("Login form dismissed", { args: [l] }), t.dispatchAction({
-      type: "layout:pop"
-    }), s.saveToken({ token: l }), e({ token: l });
-  };
-  t.dispatchAction({
+function et(r) {
+  r.isLoginPresent = !0, r.toolkit.dispatchAction({
     type: "layout:push",
     detail: {
-      layout: "auth:login"
+      name: `${r.modName}::auth-layout`
     }
-  }), t.dispatchAction({
-    type: "layout:slot:push",
+  }), r.toolkit.dispatchAction({
+    type: "layout:content:append",
     detail: {
-      layout: "auth:login",
-      slot: "main",
-      content: c`<auth-login-form
-				api=${s.config.api}
-				confirmation="${o}"
-				@login-success=${i}>
-			</auth-login-form>`
+      content: We(r, tt(r))
     }
   });
 }
-function ut(s, { token: e }) {
-  s.log("saving token", { args: [e] });
-  const t = Y(s);
-  window.localStorage.setItem(t, e);
-}
-function $e(s) {
-  const e = Y(s);
-  return window.localStorage.getItem(e);
-}
-async function pt(s) {
-  const e = $e(s);
-  if (!e || e.length < 1)
-    throw new Error("No token found");
-  return Je(e) ? (s.log("refreshing token", { args: [e] }), await x({
-    baseUrl: s.config.api
-  }).refreshToken({ token: e }).then(({ token: r }) => r)) : e;
-}
-function Y({ storageKey: s = "token" }) {
-  return s;
-}
-function gt(s, e) {
-  const t = be(s, e), r = nt(t);
-  r.mount(), r.requestRender(), t.forceLogin && G(s.element).then((o) => {
-    r.log("You have logged in successfully!", o);
-  });
+function tt(r) {
+  return (e) => {
+    const { token: t } = e.detail;
+    Ve(r, t), r.callbacks.forEach((s) => s(t)), r.callbacks = [], r.isLoginPresent = !1, r.toolkit.dispatchAction({
+      type: "layout:pop"
+    });
+  };
 }
 export {
-  gt as init
+  ot as init
 };