@manyducks.co/dolla 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/{view-CY19Cf0X.js → view-BKpHFpWG.js}

@@ -1,16 +1,16 @@
 var ee = Object.defineProperty;
-var te = (n, e, t) => e in n ? ee(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var r = (n, e, t) => te(n, typeof e != "symbol" ? e + "" : e, t);
-import { t as G, g as f, c as h, i as C, b as $, h as se, j as D } from "./typeChecking-EAVNeFyB.js";
-import { e as d, p as y, g as w, b as ne, j as ie, $ as N, d as oe, k as R, f as z } from "./logger-CSRDjb4e.js";
+var te = (i, e, t) => e in i ? ee(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var r = (i, e, t) => te(i, typeof e != "symbol" ? e + "" : e, t);
+import { t as R, g as f, c as h, i as C, b as $, h as se, j as z } from "./typeChecking-EAVNeFyB.js";
+import { e as a, p as w, g as y, j as A, $ as x, f as P, b as ne, k as ie, d as oe } from "./logger-CBfhf3fA.js";
 const W = /* @__PURE__ */ new Map(), S = {
   stores: W
 }, p = Symbol.for("DollaMarkupElement");
-var _;
-_ = p;
-class I {
+var F;
+F = p;
+class O {
   constructor(e) {
-    r(this, _, !0);
+    r(this, F, !0);
     r(this, "domNode");
     this.domNode = e;
   }
@@ -24,11 +24,11 @@ class I {
     this.domNode.parentNode && !e && this.domNode.parentNode.removeChild(this.domNode);
   }
 }
-var F;
-F = p;
+var T;
+T = p;
 class re {
   constructor(e) {
-    r(this, F, !0);
+    r(this, T, !0);
     r(this, "domNode", document.createTextNode(""));
     r(this, "children", []);
     r(this, "elementContext");
@@ -40,19 +40,19 @@ class re {
     return this.domNode.parentNode != null;
   }
   mount(e, t) {
-    this.isMounted || (e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), this.unsubscribe = d(() => {
+    this.isMounted || (e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), this.unsubscribe = a(() => {
       try {
         const s = this.source();
-        if (!X(s))
+        if (!Y(s))
           throw console.error(s), new TypeError(
-            `Dynamic received invalid value to render. Got type: ${G(s)}, value: ${s}`
+            `Dynamic received invalid value to render. Got type: ${R(s)}, value: ${s}`
           );
-        y(() => {
+        w(() => {
           this.update(f(s) ? s : [s]);
         });
       } catch (s) {
-        const i = this.elementContext.view.logger;
-        i.error(s), i.crash(s);
+        const n = this.elementContext.view.logger;
+        n.error(s), n.crash(s);
       }
     }));
   }
@@ -66,23 +66,23 @@ class re {
     this.children = [];
   }
   update(e) {
-    var o, u, c;
+    var o, c, u;
     if (this.cleanup(!1), e == null || e.length === 0 || !this.isMounted)
       return;
-    const t = e.flatMap((a) => J(a) ? a : g(this.elementContext, M(a)));
-    for (const a of t) {
+    const t = e.flatMap((d) => Q(d) ? d : N(this.elementContext, M(d)));
+    for (const d of t) {
       const l = ((o = this.children.at(-1)) == null ? void 0 : o.domNode) || this.domNode;
-      a.mount(this.domNode.parentNode, l), this.children.push(a);
+      d.mount(this.domNode.parentNode, l), this.children.push(d);
     }
-    const s = this.domNode.parentNode, i = ((c = (u = this.children.at(-1)) == null ? void 0 : u.domNode) == null ? void 0 : c.nextSibling) ?? null;
-    "moveBefore" in s ? s.moveBefore(this.domNode, i) : s.insertBefore(this.domNode, i);
+    const s = this.domNode.parentNode, n = ((u = (c = this.children.at(-1)) == null ? void 0 : c.domNode) == null ? void 0 : u.nextSibling) ?? null;
+    "moveBefore" in s ? s.moveBefore(this.domNode, n) : s.insertBefore(this.domNode, n);
   }
 }
-var U;
-U = p;
+var j;
+j = p;
 class Z {
   constructor(e) {
-    r(this, U, !0);
+    r(this, j, !0);
     r(this, "domNode", document.createTextNode(""));
     r(this, "isMounted", !1);
     r(this, "source");
@@ -91,9 +91,9 @@ class Z {
     this.source = e;
   }
   mount(e, t) {
-    this.isMounted || (this.isMounted = !0, e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), h(this.source) ? this.unsubscribe = d(() => {
-      const s = w(this.source);
-      y(() => {
+    this.isMounted || (this.isMounted = !0, e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), h(this.source) ? this.unsubscribe = a(() => {
+      const s = y(this.source);
+      w(() => {
         this.update(s);
       });
     }) : this.update(this.elements));
@@ -109,43 +109,278 @@ class Z {
   update(e) {
     var t, s;
     if (this.cleanup(!1), e.length > 0) {
-      for (let i = 0; i < e.length; i++) {
-        const o = e[i], u = i > 0 ? this.elements[i - 1] : void 0;
-        o.mount(this.domNode.parentElement, u == null ? void 0 : u.domNode), this.elements.push(o);
+      for (let n = 0; n < e.length; n++) {
+        const o = e[n], c = n > 0 ? this.elements[n - 1] : void 0;
+        o.mount(this.domNode.parentElement, c == null ? void 0 : c.domNode), this.elements.push(o);
       }
       (s = this.domNode.parentNode) == null || s.insertBefore(this.domNode, ((t = this.elements.at(-1)) == null ? void 0 : t.domNode) ?? null);
     }
   }
 }
-const ue = (n) => /^on[A-Z]/.test(n);
-var T;
-T = p;
-class ce {
-  constructor({ tag: e, props: t, children: s, elementContext: i }) {
-    r(this, T, !0);
+let ce = class {
+  constructor(e) {
+    r(this, "store");
+    this.store = e;
+    const t = Object.getOwnPropertyDescriptors(this.store.logger);
+    for (const s in t)
+      s !== "setName" && Object.defineProperty(this, s, t[s]);
+  }
+  get isMounted() {
+    return this.store.isMounted;
+  }
+  get name() {
+    return w(this.store.name) || this.store.id;
+  }
+  set name(e) {
+    this.store.name(e);
+  }
+  get(e) {
+    if (h(e)) {
+      let t = this.store.elementContext, s;
+      for (; s = t.stores.get(e), s == null && t.parent != null; )
+        t = t.parent;
+      if (s == null)
+        throw new g(`Store '${e.name}' is not provided on this context.`);
+      return s.value;
+    } else
+      throw new g("Invalid store.");
+  }
+  onMount(e) {
+    this.store.lifecycleListeners.mount.push(e);
+  }
+  onUnmount(e) {
+    this.store.lifecycleListeners.unmount.push(e);
+  }
+  effect(e) {
+    const t = this.store, s = () => {
+      try {
+        return e();
+      } catch (n) {
+        n instanceof Error ? this.crash(n) : typeof n == "string" ? this.crash(new Error(n)) : (this.error(n), this.crash(new Error("Unknown error thrown in effect callback")));
+      }
+    };
+    if (t.isMounted) {
+      const n = a(s);
+      return t.lifecycleListeners.unmount.push(n), n;
+    } else {
+      let n, o = !1;
+      return t.lifecycleListeners.mount.push(() => {
+        o || (n = a(s), t.lifecycleListeners.unmount.push(n));
+      }), () => {
+        n != null && (o = !0, n());
+      };
+    }
+  }
+};
+class H {
+  constructor(e, t) {
+    r(this, "fn");
+    r(this, "_options");
+    /**
+     * Value is guaranteed to be set after `attach` is called.
+     */
+    r(this, "value");
+    r(this, "isMounted", !1);
+    r(this, "elementContext");
+    r(this, "lifecycleListeners", { mount: [], unmount: [] });
+    r(this, "logger");
+    r(this, "id", A());
+    r(this, "name", x(""));
+    this.fn = e, this.name(e.name), this._options = t;
+  }
+  /**
+   * Attaches this Store to the elementContext.
+   * Returns false if there was already an instance attached, and true otherwise.
+   */
+  attach(e) {
+    if (e.stores.has(this.fn))
+      return !1;
+    this.elementContext = e, this.logger = P(this.name, { tag: this.id, tagName: "uid" });
+    const t = new ce(this);
+    try {
+      this.value = this.fn.call(t, this._options, t);
+    } catch (s) {
+      throw this.logger.crash(s), s;
+    }
+    return e.stores.set(this.fn, this), !0;
+  }
+  handleMount() {
+    this.isMounted = !0;
+    for (const e of this.lifecycleListeners.mount)
+      e();
+    this.lifecycleListeners.mount.length = 0;
+  }
+  handleUnmount() {
+    this.isMounted = !1;
+    for (const e of this.lifecycleListeners.unmount)
+      e();
+    this.lifecycleListeners.unmount.length = 0;
+  }
+}
+class g extends Error {
+}
+const Ee = Object.freeze({
+  provide(i, e) {
+    const t = new H(i, e);
+    if (t.attach(S))
+      return t.value;
+    {
+      let n = i.name ? `'${i.name}'` : "this store";
+      return console.warn(`An instance of ${n} is already attached.`), this.get(i);
+    }
+  },
+  get(i) {
+    if (h(i)) {
+      const e = S.stores.get(i);
+      if (e == null) {
+        let t = i.name ? `'${i.name}'` : "this store";
+        throw new g(`No instance of ${t} is provided.`);
+      } else
+        return e.value;
+    } else
+      throw new g("Invalid store.");
+  }
+});
+function ue(i) {
+  let e = i.domNode.tagName.toLowerCase();
+  if (i.domNode.id && (e += `#${i.domNode.id}`), i.domNode.classList.length > 0)
+    for (const t of i.domNode.classList.values())
+      e += `.${t}`;
+  return e;
+}
+let le = class {
+  constructor(e, t) {
+    r(this, "html");
+    r(this, "controller");
+    r(this, "uid", A());
+    this.html = e, this.controller = t;
+    const s = P(() => ue(e), { tag: "mixin" }), n = Object.getOwnPropertyDescriptors(s);
+    for (const o in n)
+      Object.defineProperty(this, o, n[o]);
+  }
+  get isMounted() {
+    return this.html.isMounted;
+  }
+  get(e) {
+    if (h(e)) {
+      let t = this.html.elementContext, s;
+      for (; s = t.stores.get(e), s == null && t.parent != null; )
+        t = t.parent;
+      if (s == null)
+        throw new g(`Store '${e.name}' is not provided on this context.`);
+      return s.value;
+    } else
+      throw new g("Invalid store.");
+  }
+  beforeMount(e) {
+    this.controller.lifecycleListeners.beforeMount.push(e);
+  }
+  onMount(e) {
+    this.controller.lifecycleListeners.mount.push(e);
+  }
+  beforeUnmount(e) {
+    this.controller.lifecycleListeners.beforeUnmount.push(e);
+  }
+  onUnmount(e) {
+    this.controller.lifecycleListeners.unmount.push(e);
+  }
+  effect(e) {
+    const t = () => {
+      try {
+        return e();
+      } catch (s) {
+        this.error(s), s instanceof Error ? this.crash(s) : typeof s == "string" ? this.crash(new Error(s)) : this.crash(new Error("Unknown error thrown in effect callback"));
+      }
+    };
+    if (this.html.isMounted) {
+      const s = a(t);
+      return this.controller.lifecycleListeners.unmount.push(s), s;
+    } else {
+      let s, n = !1;
+      return this.controller.lifecycleListeners.mount.push(() => {
+        n || (s = a(t), this.controller.lifecycleListeners.unmount.push(s));
+      }), () => {
+        s != null && (n = !0, s());
+      };
+    }
+  }
+};
+class he {
+  constructor(e, t) {
+    r(this, "context");
+    r(this, "lifecycleListeners", {
+      beforeMount: [],
+      mount: [],
+      beforeUnmount: [],
+      unmount: []
+    });
+    this.context = new le(e, this);
+    for (const s of t)
+      s(e.domNode, this.context);
+  }
+  beforeMount() {
+    try {
+      for (const e of this.lifecycleListeners.beforeMount)
+        e();
+    } catch (e) {
+      this.context.crash(e);
+    }
+  }
+  onMount() {
+    try {
+      for (const e of this.lifecycleListeners.mount)
+        e();
+    } catch (e) {
+      this.context.crash(e);
+    }
+  }
+  beforeUnmount() {
+    try {
+      for (const e of this.lifecycleListeners.beforeUnmount)
+        e();
+    } catch (e) {
+      this.context.crash(e);
+    }
+  }
+  onUnmount() {
+    try {
+      for (const e of this.lifecycleListeners.unmount)
+        e();
+    } catch (e) {
+      this.context.crash(e);
+    }
+  }
+}
+const ae = (i) => /^on[A-Z]/.test(i);
+var B;
+B = p;
+class de {
+  constructor({ tag: e, props: t, children: s, elementContext: n }) {
+    r(this, B, !0);
     r(this, "domNode");
+    r(this, "elementContext");
     r(this, "props");
     r(this, "childMarkup", []);
     r(this, "children", []);
     r(this, "unsubscribers", []);
-    r(this, "elementContext");
+    r(this, "mixin");
     r(this, "logger");
     // Track the ref so we can nullify it on unmount.
     r(this, "ref");
     // Prevents 'onClickOutside' handlers from firing in the same cycle in which the element is connected.
     r(this, "canClickAway", !1);
-    if (e.toLowerCase() === "svg" && (i = {
-      ...i,
+    if (e.toLowerCase() === "svg" && (n = {
+      ...n,
       isSVG: !0
-    }), this.logger = i.view.logger, i.isSVG ? this.domNode = document.createElementNS("http://www.w3.org/2000/svg", e) : this.domNode = document.createElement(e), ne() === "development" && y(i.view.name) && (this.domNode.dataset.view = y(i.view.name)), t.ref)
+    }), this.logger = n.view.logger, n.isSVG ? this.domNode = document.createElementNS("http://www.w3.org/2000/svg", e) : this.domNode = document.createElement(e), ne() === "development" && w(n.view.name) && (this.domNode.dataset.view = w(n.view.name)), t.ref)
       if (h(t.ref))
         this.ref = t.ref, this.ref(this.domNode);
       else
         throw new Error("Expected ref to be a function. Got: " + t.ref);
-    this.props = {
-      ...ie(["ref", "class", "className"], t),
+    t.mixin && (this.mixin = new he(this, f(t.mixin) ? t.mixin : [t.mixin])), this.props = {
+      ...ie(["ref", "class", "className", "mixin"], t),
       class: t.className ?? t.class
-    }, s && (this.childMarkup = M(s)), this.elementContext = i;
+    }, s && (this.childMarkup = M(s)), this.elementContext = n;
   }
   get isMounted() {
     return this.domNode.parentNode != null;
@@ -153,33 +388,34 @@ class ce {
   mount(e, t) {
     if (e == null)
       throw new Error(`HTML element requires a parent element as the first argument to connect. Got: ${e}`);
-    if (!this.isMounted) {
-      this.childMarkup.length > 0 && (this.children = g(this.elementContext, this.childMarkup));
-      for (let s = 0; s < this.children.length; s++) {
-        const i = this.children[s], o = s > 0 ? this.children[s - 1].domNode : void 0;
-        i.mount(this.domNode, o);
+    const s = this.isMounted;
+    if (!s) {
+      this.mixin && this.mixin.beforeMount(), this.childMarkup.length > 0 && (this.children = N(this.elementContext, this.childMarkup));
+      for (let n = 0; n < this.children.length; n++) {
+        const o = this.children[n], c = n > 0 ? this.children[n - 1].domNode : void 0;
+        o.mount(this.domNode, c);
       }
       this.applyProps(this.domNode, this.props), this.props.style && this.applyStyles(this.domNode, this.props.style, this.unsubscribers), this.props.class && this.applyClasses(this.domNode, this.props.class, this.unsubscribers);
     }
-    e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), setTimeout(() => {
-      this.canClickAway = !0;
-    }, 0);
+    e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), queueMicrotask(() => {
+      this.canClickAway = !0, this.mixin && !s && this.mixin.onMount();
+    });
   }
   unmount(e = !1) {
     var t;
     if (this.isMounted) {
-      e || (t = this.domNode.parentNode) == null || t.removeChild(this.domNode);
+      this.mixin && this.mixin.beforeUnmount(), e || (t = this.domNode.parentNode) == null || t.removeChild(this.domNode);
       for (const s of this.children)
         s.unmount(!0);
-      this.ref && this.ref(void 0), this.canClickAway = !1;
+      this.canClickAway = !1;
       for (const s of this.unsubscribers)
         s();
-      this.unsubscribers.length = 0;
+      this.unsubscribers.length = 0, this.ref && this.ref(void 0), this.mixin && this.mixin.onUnmount();
     }
   }
   attachProp(e, t) {
     h(e) ? this.unsubscribers.push(
-      d(() => {
+      a(() => {
         try {
           t(e());
         } catch (s) {
@@ -190,82 +426,82 @@ class ce {
   }
   applyProps(e, t) {
     for (const s in t) {
-      const i = t[s];
+      const n = t[s];
       if (s === "on:clickoutside" || s === "onClickOutside" || s === "onclickoutside") {
-        const o = (c) => {
-          this.canClickAway && !e.contains(c.target) && i(c);
-        }, u = { capture: !0 };
-        window.addEventListener("click", o, u), this.unsubscribers.push(() => {
-          window.removeEventListener("click", o, u);
+        const o = (u) => {
+          this.canClickAway && !e.contains(u.target) && n(u);
+        }, c = { capture: !0 };
+        window.addEventListener("click", o, c), this.unsubscribers.push(() => {
+          window.removeEventListener("click", o, c);
         });
-      } else if (h(i) && ue(s)) {
-        const o = s.slice(2).toLowerCase(), u = i;
-        e.addEventListener(o, u), this.unsubscribers.push(() => {
-          e.removeEventListener(o, u);
+      } else if (h(n) && ae(s)) {
+        const o = s.slice(2).toLowerCase(), c = n;
+        e.addEventListener(o, c), this.unsubscribers.push(() => {
+          e.removeEventListener(o, c);
         });
-      } else if (h(i) && he.includes(s)) {
+      } else if (h(n) && me.includes(s)) {
         const o = s.substring(2);
-        e.addEventListener(o, i), this.unsubscribers.push(() => {
-          e.removeEventListener(o, i);
+        e.addEventListener(o, n), this.unsubscribers.push(() => {
+          e.removeEventListener(o, n);
         });
       } else if (s.includes("-"))
-        this.attachProp(i, (o) => {
+        this.attachProp(n, (o) => {
           o == null ? e.removeAttribute(s) : e.setAttribute(s, String(o));
         });
-      else if (!le.includes(s))
+      else if (!fe.includes(s))
         if (this.elementContext.isSVG)
-          this.attachProp(i, (o) => {
+          this.attachProp(n, (o) => {
             o != null ? e.setAttribute(s, String(t[s])) : e.removeAttribute(s);
           });
         else
           switch (s) {
             case "contentEditable":
             case "value":
-              this.attachProp(i, (o) => {
+              this.attachProp(n, (o) => {
                 e[s] = String(o);
               });
               break;
             case "for":
-              this.attachProp(i, (o) => {
+              this.attachProp(n, (o) => {
                 e.htmlFor = o;
               });
               break;
             case "title":
-              this.attachProp(i, (o) => {
+              this.attachProp(n, (o) => {
                 o == null ? e.removeAttribute(s) : e.setAttribute(s, String(o));
               });
             case "checked":
-              this.attachProp(i, (o) => {
+              this.attachProp(n, (o) => {
                 e.checked = o, o ? e.setAttribute("checked", "") : e.removeAttribute("checked");
               });
               break;
             case "autocomplete":
             case "autocapitalize":
-              this.attachProp(i, (o) => {
+              this.attachProp(n, (o) => {
                 typeof o == "string" ? e[s] = o : o ? e[s] = "on" : e[s] = "off";
               });
               break;
             default: {
               if (s.startsWith("prop:")) {
                 const o = s.substring(5);
-                this.attachProp(i, (u) => {
-                  e[o] = u;
+                this.attachProp(n, (c) => {
+                  e[o] = c;
                 });
               } else if (s.startsWith("on:")) {
                 const o = s.substring(3);
-                let u;
-                h(i) ? (e.addEventListener(o, i), this.unsubscribers.push(() => {
-                  e.removeEventListener(o, i);
-                })) : this.attachProp(i, (c) => {
-                  !c && u ? e.removeEventListener(o, u) : c != null && (u && u !== c && e.removeEventListener(o, u), e.addEventListener(o, c)), u = c;
+                let c;
+                h(n) ? (e.addEventListener(o, n), this.unsubscribers.push(() => {
+                  e.removeEventListener(o, n);
+                })) : this.attachProp(n, (u) => {
+                  !u && c ? e.removeEventListener(o, c) : u != null && (c && c !== u && e.removeEventListener(o, c), e.addEventListener(o, u)), c = u;
                 });
               } else if (s.startsWith("attr:")) {
                 const o = s.substring(5).toLowerCase();
-                this.attachProp(i, (u) => {
-                  u != null ? e.setAttribute(o, String(u)) : e.removeAttribute(o);
+                this.attachProp(n, (c) => {
+                  c != null ? e.setAttribute(o, String(c)) : e.removeAttribute(o);
                 });
               } else
-                this.attachProp(i, (o) => {
+                this.attachProp(n, (o) => {
                   e[s] = o;
                 });
               break;
@@ -274,95 +510,95 @@ class ce {
     }
   }
   applyStyles(e, t, s) {
-    const i = [];
+    const n = [];
     if (h(t)) {
       let o;
-      const u = d(() => {
-        h(o) && o(), e.style.cssText = "", o = this.applyStyles(e, w(t), s);
+      const c = a(() => {
+        h(o) && o(), e.style.cssText = "", o = this.applyStyles(e, y(t), s);
       });
-      s.push(u), i.push(u);
+      s.push(c), n.push(c);
     } else {
-      const o = K(t);
-      for (const u in o) {
-        const { value: c, priority: a } = o[u];
-        if (h(c)) {
-          const l = d(() => {
-            w(c) ? e.style.setProperty(u, String(w(c)), a) : e.style.removeProperty(u);
+      const o = J(t);
+      for (const c in o) {
+        const { value: u, priority: d } = o[c];
+        if (h(u)) {
+          const l = a(() => {
+            y(u) ? e.style.setProperty(c, String(y(u)), d) : e.style.removeProperty(c);
           });
-          s.push(l), i.push(l);
-        } else c != null && e.style.setProperty(u, String(c));
+          s.push(l), n.push(l);
+        } else u != null && e.style.setProperty(c, String(u));
       }
     }
     return function() {
-      for (const u of i)
-        u(), s.splice(s.indexOf(u), 1);
+      for (const c of n)
+        c(), s.splice(s.indexOf(c), 1);
     };
   }
   applyClasses(e, t, s) {
-    const i = [];
+    const n = [];
     if (h(t)) {
       let o;
-      const u = d(() => {
-        h(o) && o(), e.removeAttribute("class"), o = this.applyClasses(e, w(t), s);
+      const c = a(() => {
+        h(o) && o(), e.removeAttribute("class"), o = this.applyClasses(e, y(t), s);
       });
-      s.push(u), i.push(u);
+      s.push(c), n.push(c);
     } else {
-      const o = H(t);
-      for (const u in o) {
-        const c = o[u];
-        if (h(c)) {
-          const a = d(() => {
-            w(c) ? e.classList.add(u) : e.classList.remove(u);
+      const o = K(t);
+      for (const c in o) {
+        const u = o[c];
+        if (h(u)) {
+          const d = a(() => {
+            y(u) ? e.classList.add(c) : e.classList.remove(c);
           });
-          s.push(a), i.push(a);
-        } else c && e.classList.add(u);
+          s.push(d), n.push(d);
+        } else u && e.classList.add(c);
       }
     }
     return function() {
-      for (const u of i)
-        u(), s.splice(s.indexOf(u), 1);
+      for (const c of n)
+        c(), s.splice(s.indexOf(c), 1);
     };
   }
 }
-function H(n) {
+function K(i) {
   let e = {};
-  if (C(n)) {
-    const t = n.split(" ");
+  if (C(i)) {
+    const t = i.split(" ");
     for (const s of t)
       e[s] = !0;
-  } else $(n) ? Object.assign(e, n) : Array.isArray(n) && Array.from(n).filter(Boolean).forEach((t) => {
-    Object.assign(e, H(t));
+  } else $(i) ? Object.assign(e, i) : Array.isArray(i) && Array.from(i).filter(Boolean).forEach((t) => {
+    Object.assign(e, K(t));
   });
   return delete e.undefined, e;
 }
-function K(n) {
+function J(i) {
   let e = {};
-  if (C(n)) {
-    const t = n.split(";").filter((s) => s.trim() !== "");
+  if (C(i)) {
+    const t = i.split(";").filter((s) => s.trim() !== "");
     for (const s of t) {
-      const [i, o] = s.split(":"), u = {
+      const [n, o] = s.split(":"), c = {
         value: o
       };
-      o.includes("!important") ? (u.priority = "important", u.value = o.replace("!important", "").trim()) : u.value = o.trim(), e[O(i.trim())] = u;
+      o.includes("!important") ? (c.priority = "important", c.value = o.replace("!important", "").trim()) : c.value = o.trim(), e[_(n.trim())] = c;
     }
   }
-  if ($(n))
-    for (const t in n)
-      t.startsWith("--") ? e[t] = { value: n[t] } : e[O(t)] = { value: n[t] };
-  else Array.isArray(n) && Array.from(n).filter((t) => t != null).forEach((t) => {
-    Object.assign(e, K(t));
+  if ($(i))
+    for (const t in i)
+      t.startsWith("--") ? e[t] = { value: i[t] } : e[_(t)] = { value: i[t] };
+  else Array.isArray(i) && Array.from(i).filter((t) => t != null).forEach((t) => {
+    Object.assign(e, J(t));
   });
   return e;
 }
-function O(n) {
-  return n.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (e, t) => (t ? "-" : "") + e.toLowerCase());
+function _(i) {
+  return i.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (e, t) => (t ? "-" : "") + e.toLowerCase());
 }
-const le = ["ref", "children", "class", "style", "data"], he = ["onsubmit", "onclick", "ontransitionend"];
-var B;
-B = p;
-class ae {
+const fe = ["ref", "children", "class", "style", "data", "mixin"], me = ["onsubmit", "onclick", "ontransitionend"];
+var V;
+V = p;
+class pe {
   constructor(e) {
-    r(this, B, !0);
+    r(this, V, !0);
     r(this, "domNode", document.createTextNode(""));
     r(this, "isMounted", !1);
     r(this, "view");
@@ -371,9 +607,9 @@ class ae {
     this.view = e;
   }
   mount(e, t) {
-    this.isMounted || (this.isMounted = !0, e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), this.unsubscribe = d(() => {
+    this.isMounted || (this.isMounted = !0, e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), this.unsubscribe = a(() => {
       const s = this.view();
-      y(() => {
+      w(() => {
         this.update(s);
       });
     }));
@@ -388,11 +624,11 @@ class ae {
     this.cleanup(!1), e && (e.mount(this.domNode.parentElement, this.domNode), this.mountedView = e);
   }
 }
-var j;
-j = p;
-class de {
+var q;
+q = p;
+class be {
   constructor(e) {
-    r(this, j, !0);
+    r(this, q, !0);
     r(this, "config");
     r(this, "element");
     this.config = e;
@@ -401,19 +637,19 @@ class de {
     return this.element ? this.element.isMounted : !1;
   }
   mount(e, t) {
-    const { content: s, parent: i } = this.config;
-    J(s) ? this.element = s : this.element = L(g(this.config.elementContext, M(s))), this.element.mount(i);
+    const { content: s, parent: n } = this.config;
+    Q(s) ? this.element = s : this.element = k(N(this.config.elementContext, M(s))), this.element.mount(n);
   }
   unmount(e = !1) {
     var t;
     (t = this.element) != null && t.isMounted && this.element.unmount(!1);
   }
 }
-var V;
-V = p;
-class fe {
-  constructor({ elementContext: e, items: t, renderFn: s, keyFn: i }) {
-    r(this, V, !0);
+var D;
+D = p;
+class ye {
+  constructor({ elementContext: e, items: t, renderFn: s, keyFn: n }) {
+    r(this, D, !0);
     r(this, "domNode", document.createTextNode(""));
     r(this, "items");
     r(this, "unsubscribe", null);
@@ -421,15 +657,15 @@ class fe {
     r(this, "elementContext");
     r(this, "renderFn");
     r(this, "keyFn");
-    this.elementContext = e, this.items = t, this.renderFn = s, this.keyFn = i;
+    this.elementContext = e, this.items = t, this.renderFn = s, this.keyFn = n;
   }
   get isMounted() {
     return this.domNode.parentNode != null;
   }
   mount(e, t) {
-    this.isMounted || (e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), this.unsubscribe = d(() => {
+    this.isMounted || (e.insertBefore(this.domNode, (t == null ? void 0 : t.nextSibling) ?? null), this.unsubscribe = a(() => {
       let s = this.items();
-      s == null && (s = [], console.log("repeat received empty value", s, this)), y(() => {
+      s == null && (s = [], console.log("repeat received empty value", s, this)), w(() => {
         this._update(Array.from(s));
       });
     }));
@@ -444,7 +680,7 @@ class fe {
     this.connectedItems = [];
   }
   _update(e) {
-    var u, c, a;
+    var c, u, d;
     if (e.length === 0 || !this.isMounted)
       return this._cleanup(!1);
     const t = [];
@@ -455,49 +691,49 @@ class fe {
         value: l,
         index: s++
       });
-    const i = [];
+    const n = [];
     for (const l of this.connectedItems)
       t.find((b) => b.key === l.key) || l.element.unmount(!1);
     for (const l of t) {
       const v = this.connectedItems.find((b) => b.key === l.key);
       if (v)
-        v.item(l.value), v.index(l.index), i[l.index] = v;
+        v.item(l.value), v.index(l.index), n[l.index] = v;
       else {
-        const b = N(l.value, { equals: oe }), P = N(l.index);
-        i[l.index] = {
+        const b = x(l.value, { equals: oe }), I = x(l.index);
+        n[l.index] = {
           key: l.key,
           item: b,
-          index: P,
-          element: new k(this.elementContext, me, {
+          index: I,
+          element: new L(this.elementContext, we, {
             item: () => b(),
-            index: () => P(),
+            index: () => I(),
             renderFn: this.renderFn
           })
         };
       }
     }
-    for (let l = 0; l < i.length; l++) {
-      const v = i[l], b = ((u = i[l - 1]) == null ? void 0 : u.element.domNode) ?? this.domNode;
+    for (let l = 0; l < n.length; l++) {
+      const v = n[l], b = ((c = n[l - 1]) == null ? void 0 : c.element.domNode) ?? this.domNode;
       v.element.mount(this.domNode.parentNode, b);
     }
-    this.connectedItems = i;
-    const o = ((c = i.at(-1)) == null ? void 0 : c.element.domNode) ?? this.domNode;
-    (a = this.domNode.parentNode) == null || a.insertBefore(this.domNode, o.nextSibling);
+    this.connectedItems = n;
+    const o = ((u = n.at(-1)) == null ? void 0 : u.element.domNode) ?? this.domNode;
+    (d = this.domNode.parentNode) == null || d.insertBefore(this.domNode, o.nextSibling);
   }
 }
-function me(n, e) {
-  return e.name = "@RepeatItem", n.renderFn.call(e, n.item, n.index, e);
+function we(i, e) {
+  return e.name = "@RepeatItem", i.renderFn.call(e, i.item, i.index, e);
 }
-function E(n) {
-  return n instanceof Q;
+function E(i) {
+  return i instanceof X;
 }
-function J(n) {
-  return (n == null ? void 0 : n[p]) === !0;
+function Q(i) {
+  return (i == null ? void 0 : i[p]) === !0;
 }
-function M(n) {
-  f(n) || (n = [n]);
+function M(i) {
+  f(i) || (i = [i]);
   const e = [];
-  for (const t of n)
+  for (const t of i)
     if (!(t == null || t === !1)) {
       if (t instanceof Node) {
         e.push(m("$node", { value: t }));
@@ -519,13 +755,13 @@ function M(n) {
     }
   return e;
 }
-function Me(n) {
-  return L(g(S, n));
+function Se(i) {
+  return k(N(S, i));
 }
-function m(n, e, ...t) {
-  return new Q(n, e, ...t);
+function m(i, e, ...t) {
+  return new X(i, e, ...t);
 }
-class Q {
+class X {
   constructor(e, t, ...s) {
     r(this, "type");
     r(this, "props");
@@ -533,212 +769,88 @@ class Q {
     this.type = e, this.props = t, this.children = s;
   }
 }
-function pe(n, e, t) {
+function ge(i, e, t) {
   return m("$dynamic", {
-    source: N(() => {
-      const s = w(n);
+    source: x(() => {
+      const s = y(i);
       return s && e ? e : !s && t ? t : null;
     })
   });
 }
-function xe(n, e, t) {
-  return pe(n, t, e);
+function $e(i, e, t) {
+  return ge(i, t, e);
 }
-function ke(n, e, t) {
-  return m("$repeat", { items: () => w(n), keyFn: e, renderFn: t });
+function Ae(i, e, t) {
+  return m("$repeat", { items: () => y(i), keyFn: e, renderFn: t });
 }
-function Le(n, e) {
-  return m("$portal", { parent: n, content: e });
+function Pe(i, e) {
+  return m("$portal", { parent: i, content: e });
 }
-function g(n, e) {
+function N(i, e) {
   return (f(e) ? e : [e]).map((s) => {
     if (h(s.type))
-      return new k(n, s.type, s.props, s.children);
+      return new L(i, s.type, s.props, s.children);
     if (C(s.type))
       switch (s.type) {
         case "$node": {
-          const i = s.props;
-          return new I(i.value);
+          const n = s.props;
+          return new O(n.value);
         }
         case "$text": {
-          const i = s.props;
-          return new I(document.createTextNode(String(i.value)));
+          const n = s.props;
+          return new O(document.createTextNode(String(n.value)));
         }
         case "$repeat": {
-          const i = s.props;
-          return new fe({
-            items: i.items,
-            keyFn: i.keyFn,
-            renderFn: i.renderFn,
-            elementContext: n
+          const n = s.props;
+          return new ye({
+            items: n.items,
+            keyFn: n.keyFn,
+            renderFn: n.renderFn,
+            elementContext: i
           });
         }
         case "$dynamic": {
-          const i = s.props;
+          const n = s.props;
           return new re({
-            source: i.source,
-            elementContext: n
+            source: n.source,
+            elementContext: i
           });
         }
         case "$fragment": {
-          const i = s.props;
-          return new Z(i.children);
+          const n = s.props;
+          return new Z(n.children);
         }
         case "$outlet": {
-          const i = s.props;
-          return new ae(i.view);
+          const n = s.props;
+          return new pe(n.view);
         }
         case "$portal": {
-          const i = s.props;
-          return new de({
-            content: i.content,
-            parent: i.parent,
-            elementContext: n
+          const n = s.props;
+          return new be({
+            content: n.content,
+            parent: n.parent,
+            elementContext: i
           });
         }
         default:
-          return new ce({
+          return new de({
             tag: s.type,
             props: s.props ?? {},
             children: s.children,
-            elementContext: n
+            elementContext: i
           });
       }
     else
       throw new TypeError(`Expected a string or view function. Got: ${s.type}`);
   });
 }
-function L(n) {
-  return n.length === 1 ? n[0] : new Z(n);
-}
-function X(n) {
-  return n == null || n === !1 || h(n) || C(n) || se(n) || E(n) || D(X, n);
-}
-let be = class {
-  constructor(e) {
-    r(this, "store");
-    this.store = e;
-    const t = Object.getOwnPropertyDescriptors(this.store.logger);
-    for (const s in t)
-      s !== "setName" && Object.defineProperty(this, s, t[s]);
-  }
-  get isMounted() {
-    return this.store.isMounted;
-  }
-  get name() {
-    return y(this.store.name) || this.store.id;
-  }
-  set name(e) {
-    this.store.name(e);
-  }
-  get(e) {
-    if (h(e)) {
-      let t = this.store.elementContext, s;
-      for (; s = t.stores.get(e), s == null && t.parent != null; )
-        t = t.parent;
-      if (s == null)
-        throw new x(`Store '${e.name}' is not provided on this context.`);
-      return s.value;
-    } else
-      throw new x("Invalid store.");
-  }
-  onMount(e) {
-    this.store.lifecycleListeners.mount.push(e);
-  }
-  onUnmount(e) {
-    this.store.lifecycleListeners.unmount.push(e);
-  }
-  effect(e) {
-    const t = this.store, s = () => {
-      try {
-        return e();
-      } catch (i) {
-        i instanceof Error ? this.crash(i) : typeof i == "string" ? this.crash(new Error(i)) : (this.error(i), this.crash(new Error("Unknown error thrown in effect callback")));
-      }
-    };
-    if (t.isMounted) {
-      const i = d(s);
-      return t.lifecycleListeners.unmount.push(i), i;
-    } else {
-      let i, o = !1;
-      return t.lifecycleListeners.mount.push(() => {
-        o || (i = d(s), t.lifecycleListeners.unmount.push(i));
-      }), () => {
-        i != null && (o = !0, i());
-      };
-    }
-  }
-};
-class Y {
-  constructor(e, t) {
-    r(this, "fn");
-    r(this, "_options");
-    /**
-     * Value is guaranteed to be set after `attach` is called.
-     */
-    r(this, "value");
-    r(this, "isMounted", !1);
-    r(this, "elementContext");
-    r(this, "lifecycleListeners", { mount: [], unmount: [] });
-    r(this, "logger");
-    r(this, "id", R());
-    r(this, "name", N(""));
-    this.fn = e, this.name(e.name), this._options = t;
-  }
-  /**
-   * Attaches this Store to the elementContext.
-   * Returns false if there was already an instance attached, and true otherwise.
-   */
-  attach(e) {
-    if (e.stores.has(this.fn))
-      return !1;
-    this.elementContext = e, this.logger = z(this.name, { uid: this.id });
-    const t = new be(this);
-    try {
-      this.value = this.fn.call(t, this._options, t);
-    } catch (s) {
-      throw this.logger.crash(s), s;
-    }
-    return e.stores.set(this.fn, this), !0;
-  }
-  handleMount() {
-    this.isMounted = !0;
-    for (const e of this.lifecycleListeners.mount)
-      e();
-    this.lifecycleListeners.mount.length = 0;
-  }
-  handleUnmount() {
-    this.isMounted = !1;
-    for (const e of this.lifecycleListeners.unmount)
-      e();
-    this.lifecycleListeners.unmount.length = 0;
-  }
+function k(i) {
+  return i.length === 1 ? i[0] : new Z(i);
 }
-class x extends Error {
+function Y(i) {
+  return i == null || i === !1 || h(i) || C(i) || se(i) || E(i) || z(Y, i);
 }
-const Ce = Object.freeze({
-  provide(n, e) {
-    const t = new Y(n, e);
-    if (t.attach(S))
-      return t.value;
-    {
-      let i = n.name ? `'${n.name}'` : "this store";
-      return console.warn(`An instance of ${i} is already attached.`), this.get(n);
-    }
-  },
-  get(n) {
-    if (h(n)) {
-      const e = S.stores.get(n);
-      if (e == null) {
-        let t = n.name ? `'${n.name}'` : "this store";
-        throw new x(`No instance of ${t} is provided.`);
-      } else
-        return e.value;
-    } else
-      throw new x("Invalid store.");
-  }
-});
-class we {
+class ve {
   constructor(e) {
     r(this, "view");
     this.view = e;
@@ -753,13 +865,13 @@ class we {
     return this.view.isMounted;
   }
   get name() {
-    return y(this.view.name) || this.uid;
+    return w(this.view.name) || this.uid;
   }
   set name(e) {
     this.view.name(e);
   }
   provide(e, t) {
-    const s = new Y(e, t);
+    const s = new H(e, t);
     if (s.attach(this.view.elementContext))
       return this.view.lifecycleListeners.mount.push(() => {
         s.handleMount();
@@ -777,10 +889,10 @@ class we {
       for (; s = t.stores.get(e), s == null && t.parent != null; )
         t = t.parent;
       if (s == null)
-        throw new x(`Store '${e.name}' is not provided on this context.`);
+        throw new g(`Store '${e.name}' is not provided on this context.`);
       return s.value;
     } else
-      throw new x("Invalid store.");
+      throw new g("Invalid store.");
   }
   beforeMount(e) {
     this.view.lifecycleListeners.beforeMount.push(e);
@@ -803,14 +915,14 @@ class we {
       }
     };
     if (this.view.isMounted) {
-      const s = d(t);
+      const s = a(t);
       return this.view.lifecycleListeners.unmount.push(s), s;
     } else {
-      let s, i = !1;
+      let s, n = !1;
       return this.view.lifecycleListeners.mount.push(() => {
-        i || (s = d(t), this.view.lifecycleListeners.unmount.push(s));
+        n || (s = a(t), this.view.lifecycleListeners.unmount.push(s));
       }), () => {
-        s != null && (i = !0, s());
+        s != null && (n = !0, s());
       };
     }
   }
@@ -818,18 +930,18 @@ class we {
     return m("$outlet", { view: this.view.elementContext.route });
   }
 }
-var q;
-q = p;
-const A = class A {
-  constructor(e, t, s, i) {
-    r(this, q, !0);
-    r(this, "uniqueId", R());
+var G;
+G = p;
+const U = class U {
+  constructor(e, t, s, n) {
+    r(this, G, !0);
+    r(this, "uniqueId", A());
     r(this, "elementContext");
     r(this, "logger");
     r(this, "props");
     r(this, "fn");
     r(this, "element");
-    r(this, "name", N(""));
+    r(this, "name", x(""));
     r(this, "context");
     r(this, "lifecycleListeners", { beforeMount: [], mount: [], beforeUnmount: [], unmount: [] });
     r(this, "isMounted", !1);
@@ -838,11 +950,11 @@ const A = class A {
       parent: e,
       view: this,
       stores: /* @__PURE__ */ new Map(),
-      route: N()
-    }, this.logger = z(this.name, { uid: this.uniqueId }), this.props = {
+      route: x()
+    }, this.logger = P(this.name, { tag: this.uniqueId, tagName: "uid" }), this.props = {
       ...s,
-      children: i
-    }, this.fn = t, this.context = new we(this);
+      children: n
+    }, this.fn = t, this.context = new ve(this);
   }
   /*===============================*\
   ||         "Public" API          ||
@@ -855,12 +967,12 @@ const A = class A {
     const s = this.isMounted;
     if (!s) {
       this._initialize();
-      for (const i of this.lifecycleListeners.beforeMount)
-        i();
+      for (const n of this.lifecycleListeners.beforeMount)
+        n();
     }
     this.element && this.element.mount(e, t), s || (this.isMounted = !0, requestAnimationFrame(() => {
-      for (const i of this.lifecycleListeners.mount)
-        i();
+      for (const n of this.lifecycleListeners.mount)
+        n();
     }));
   }
   unmount(e = !1) {
@@ -872,7 +984,7 @@ const A = class A {
     this.lifecycleListeners.beforeMount.length = 0, this.lifecycleListeners.mount.length = 0, this.lifecycleListeners.beforeUnmount.length = 0, this.lifecycleListeners.unmount.length = 0;
   }
   setRouteView(e) {
-    const t = new A(this.elementContext, e, {});
+    const t = new U(this.elementContext, e, {});
     return this.elementContext.route(t), t;
   }
   /*===============================*\
@@ -887,46 +999,46 @@ const A = class A {
       throw s instanceof Error && this.logger.crash(s), s;
     }
     if (t !== null) if (t instanceof Node)
-      this.element = L(g(this.elementContext, m("$node", { value: t })));
+      this.element = k(N(this.elementContext, m("$node", { value: t })));
     else if (h(t))
-      this.element = L(
-        g(this.elementContext, m("$dynamic", { source: t }))
+      this.element = k(
+        N(this.elementContext, m("$dynamic", { source: t }))
       );
-    else if (E(t) || D(E, t))
-      this.element = L(g(this.elementContext, t));
+    else if (E(t) || z(E, t))
+      this.element = k(N(this.elementContext, t));
     else {
       const s = new TypeError(
-        `Expected '${this.fn.name}' function to return a DOM node, Markup element, Signal or null. Got: ${G(t)}`
+        `Expected '${this.fn.name}' function to return a DOM node, Markup element, Signal or null. Got: ${R(t)}`
       );
       this.logger.crash(s);
     }
   }
 };
-let k = A;
-const ye = {
+let L = U;
+const Ne = {
   stores: W
 };
-function Se(...n) {
-  if (h(n[0])) {
-    const e = n[0], t = f(n[1]) ? {} : n[1], s = f(n[2]) ? n[2] : f(n[1]) ? n[1] : [];
-    return new k(ye, e, t, M(s));
-  } else if ($(n[0]) && h(n[1])) {
-    const e = n[0], t = n[1], s = f(n[2]) ? {} : n[2], i = f(n[3]) ? n[3] : f(n[2]) ? n[2] : [];
-    return new k(e, t, s, i ? M(i) : []);
+function Ue(...i) {
+  if (h(i[0])) {
+    const e = i[0], t = f(i[1]) ? {} : i[1], s = f(i[2]) ? i[2] : f(i[1]) ? i[1] : [];
+    return new L(Ne, e, t, M(s));
+  } else if ($(i[0]) && h(i[1])) {
+    const e = i[0], t = i[1], s = f(i[2]) ? {} : i[2], n = f(i[3]) ? i[3] : f(i[2]) ? i[2] : [];
+    return new L(e, t, s, n ? M(n) : []);
   } else
     throw new TypeError(
       "Unexpected arguments; expected view, props and children, or context, view, props and children."
     );
 }
 export {
-  Ce as S,
-  ke as a,
-  Me as b,
-  Se as c,
+  Ee as S,
+  Ae as a,
+  Se as b,
+  Ue as c,
   m,
-  Le as p,
+  Pe as p,
   S as r,
-  xe as u,
-  pe as w
+  $e as u,
+  ge as w
 };
-//# sourceMappingURL=view-CY19Cf0X.js.map
+//# sourceMappingURL=view-BKpHFpWG.js.map