@tachui/core 0.8.1-alpha → 0.8.8

package/dist/modifiers/base.js

@@ -1,9 +1,131 @@
-import { J as p, i as v, M as E } from "../scheduler-BKeqwrYE.js";
-import { c as h } from "../effect-B9Knft0b.js";
-import { ModifierPriority as g } from "./types.js";
-import { shouldExpandForInfinity as L, dimensionToCSS as u, isInfinity as m } from "../constants/layout.js";
-var A = Object.defineProperty, T = (d, i, t) => i in d ? A(d, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[i] = t, l = (d, i, t) => T(d, typeof i != "symbol" ? i + "" : i, t);
-class y {
+import { o as R } from "../scheduler-DppMK9mR.js";
+import { p as O, d as m, r as D, i as v, K as B } from "../theme-CRLPHryV.js";
+import { c as b } from "../effect-BsW3fy1q.js";
+import "@tachui/types/reactive";
+import { ModifierPriority as S } from "@tachui/types/modifiers";
+import { shouldExpandForInfinity as _, dimensionToCSS as h, isInfinity as g } from "../constants/layout.js";
+const w = /* @__PURE__ */ new WeakMap();
+let p = null;
+function ee(s) {
+  if (s === null)
+    return p = null, () => {
+    };
+  const i = p;
+  return p = (t, e) => {
+    i?.(t, e), s(t, e);
+  }, () => {
+    p = i;
+  };
+}
+function k(s, i, t) {
+  try {
+    s(i);
+  } catch (e) {
+    if (p) {
+      p(e, { updaterId: t, value: i });
+      return;
+    }
+    console.error(`Reactive style updater failed (${t}):`, e);
+  }
+}
+const M = 200, u = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new Set();
+let P = !1, A = !1;
+function z(s) {
+  u.get(s)?.forEach((t) => t()), u.delete(s), T.delete(s);
+}
+function H() {
+  const s = Date.now();
+  for (const i of Array.from(y)) {
+    const t = i.deref();
+    if (!t) {
+      y.delete(i);
+      continue;
+    }
+    const e = T.get(t), n = u.get(t);
+    if (!e || !n || n.size === 0) {
+      y.delete(i);
+      continue;
+    }
+    if (t.isConnected) {
+      e.wasConnected = !0;
+      continue;
+    }
+    (e.wasConnected || s - e.trackedAt >= M) && (z(t), y.delete(i));
+  }
+}
+function F() {
+  if (A || typeof setTimeout != "function") return;
+  A = !0;
+  const s = () => {
+    if (H(), y.size === 0) {
+      A = !1;
+      return;
+    }
+    setTimeout(s, M);
+  };
+  setTimeout(s, M);
+}
+function W() {
+  if (P || typeof document > "u" || !document.documentElement || typeof MutationObserver > "u")
+    return;
+  new MutationObserver(() => {
+    H();
+  }).observe(document.documentElement, { childList: !0, subtree: !0 }), P = !0;
+}
+function U(s, i) {
+  W(), F();
+  const t = u.get(s) ?? /* @__PURE__ */ new Set(), e = t.size > 0;
+  return t.add(i), u.set(s, t), e || (T.set(s, {
+    trackedAt: Date.now(),
+    wasConnected: s.isConnected
+  }), y.add(new WeakRef(s))), () => {
+    const n = u.get(s);
+    n && (n.delete(i), n.size === 0 && (u.delete(s), T.delete(s)));
+  };
+}
+function N({
+  element: s,
+  accessor: i,
+  updater: t,
+  updaterId: e
+}) {
+  const n = w.get(s) ?? /* @__PURE__ */ new Map();
+  w.has(s) || w.set(s, n);
+  let r = n.get(i);
+  if (!r) {
+    const a = /* @__PURE__ */ new Map();
+    r = { effect: b(() => {
+      const c = i();
+      a.forEach(
+        (E, L) => k(E, c, L)
+      );
+    }), updaters: a }, n.set(i, r);
+  }
+  r.updaters.set(e, t), k(t, i(), e);
+  let o = null;
+  const l = () => {
+    o && (o(), o = null);
+    const a = w.get(s), d = a?.get(i);
+    d && (d.updaters.delete(e), d.updaters.size === 0 && (d.effect.dispose(), a?.delete(i), m(i) && D(i)), a && a.size === 0 && w.delete(s));
+  };
+  O() ? R(l) : o = U(s, l);
+}
+var j = Object.defineProperty, K = (s, i, t) => i in s ? j(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t, f = (s, i, t) => K(s, typeof i != "symbol" ? i + "" : i, t);
+const I = Symbol.for("tachui.modifier.instanceId"), x = "core";
+let $ = 0;
+function Y(s) {
+  const i = s[I];
+  if (typeof i == "number") return i;
+  $ += 1;
+  const t = $;
+  return Object.defineProperty(s, I, {
+    value: t,
+    enumerable: !1,
+    configurable: !1,
+    writable: !1
+  }), t;
+}
+class C {
   constructor(i) {
     this.properties = i;
   }
@@ -13,7 +135,7 @@ class y {
   resolveReactiveProps(i, t) {
     const e = {};
     for (const [n, r] of Object.entries(i))
-      p(r) || v(r), e[n] = r;
+      v(r) || m(r), e[n] = r;
     return e;
   }
   /**
@@ -22,12 +144,12 @@ class y {
   applyStyleChange(i, t, e) {
     if (i instanceof HTMLElement) {
       const n = this.toCSSProperty(t);
-      if (p(e) || v(e))
-        h(() => {
+      if (v(e) || m(e))
+        b(() => {
           const r = e(), o = String(r);
           if (o.includes("!important")) {
-            const a = o.replace(/\s*!important\s*$/, "").trim();
-            i.style.setProperty(n, a, "important");
+            const l = o.replace(/\s*!important\s*$/, "").trim();
+            i.style.setProperty(n, l, "important");
           } else
             i.style.setProperty(n, o);
         });
@@ -80,35 +202,33 @@ class y {
    */
   applyStyles(i, t) {
     if (i instanceof HTMLElement || i.style) {
-      const e = (i instanceof HTMLElement, i.style);
-      for (const [n, r] of Object.entries(t))
-        if (r !== void 0) {
-          const o = this.toCSSProperty(n);
-          if (p(r) || v(r))
-            h(() => {
-              const a = r(), s = this.toCSSValueForProperty(
-                o,
-                a
-              );
-              if (e.setProperty)
-                if (typeof s == "string" && s.includes("!important")) {
-                  const f = s.replace(/\s*!important\s*$/, "").trim();
-                  e.setProperty(o, f, "important");
-                } else
-                  e.setProperty(o, s);
-              else
-                e[o] = s;
+      const e = (i instanceof HTMLElement, i.style), n = (r, o) => {
+        if (e.setProperty)
+          if (typeof o == "string" && o.includes("!important")) {
+            const l = o.replace(/\s*!important\s*$/, "").trim();
+            e.setProperty(r, l, "important");
+          } else
+            e.setProperty(r, o);
+        else
+          e[r] = o;
+      };
+      for (const [r, o] of Object.entries(t))
+        if (o !== void 0) {
+          const l = this.toCSSProperty(r);
+          if (v(o) || m(o)) {
+            const a = o, d = Y(this);
+            N({
+              element: i,
+              accessor: a,
+              updaterId: `${x}:${d}:${l}`,
+              updater: (c) => {
+                const E = this.toCSSValueForProperty(l, c);
+                n(l, E);
+              }
             });
-          else {
-            const a = this.toCSSValueForProperty(o, r);
-            if (e.setProperty)
-              if (typeof a == "string" && a.includes("!important")) {
-                const s = a.replace(/\s*!important\s*$/, "").trim();
-                e.setProperty(o, s, "important");
-              } else
-                e.setProperty(o, a);
-            else
-              e[o] = a;
+          } else {
+            const a = this.toCSSValueForProperty(l, o);
+            n(l, a);
           }
         }
     }
@@ -138,9 +258,9 @@ class y {
     };
   }
 }
-class k extends y {
+class te extends C {
   constructor() {
-    super(...arguments), l(this, "type", "layout"), l(this, "priority", g.LAYOUT);
+    super(...arguments), f(this, "type", "layout"), f(this, "priority", S.LAYOUT);
   }
   apply(i, t) {
     if (!i.element || !t.element) return;
@@ -164,31 +284,31 @@ class k extends y {
   computeLayoutStyles(i, t) {
     const e = {};
     if (i.frame) {
-      const n = i.frame, r = L(n);
+      const n = i.frame, r = _(n);
       if (Object.assign(e, r.cssProps), n.width !== void 0) {
-        const o = u(n.width);
-        o !== void 0 && !m(n.width) && !r.expandWidth && (e.width = o);
+        const o = h(n.width);
+        o !== void 0 && !g(n.width) && !r.expandWidth && (e.width = o);
       }
       if (n.height !== void 0) {
-        const o = u(n.height);
-        o !== void 0 && !m(n.height) && !r.expandHeight && (e.height = o);
+        const o = h(n.height);
+        o !== void 0 && !g(n.height) && !r.expandHeight && (e.height = o);
       }
       if (n.minWidth !== void 0) {
-        const o = u(n.minWidth);
+        const o = h(n.minWidth);
         o !== void 0 && (e.minWidth = o);
       }
-      if (n.maxWidth !== void 0 && !m(n.maxWidth)) {
-        const o = u(n.maxWidth);
+      if (n.maxWidth !== void 0 && !g(n.maxWidth)) {
+        const o = h(n.maxWidth);
         o !== void 0 && (e.maxWidth = o);
-      } else m(n.maxWidth) && (e.maxWidth = "none", e.flexGrow = "1 !important", e.flexShrink = "1 !important", e.flexBasis = "0% !important", e.alignSelf = "stretch !important");
+      } else g(n.maxWidth) && (e.maxWidth = "none", e.flexGrow = "1 !important", e.flexShrink = "1 !important", e.flexBasis = "0% !important", e.alignSelf = "stretch !important");
       if (n.minHeight !== void 0) {
-        const o = u(n.minHeight);
+        const o = h(n.minHeight);
         o !== void 0 && (e.minHeight = o);
       }
-      if (n.maxHeight !== void 0 && !m(n.maxHeight)) {
-        const o = u(n.maxHeight);
+      if (n.maxHeight !== void 0 && !g(n.maxHeight)) {
+        const o = h(n.maxHeight);
         o !== void 0 && (e.maxHeight = o);
-      } else m(n.maxHeight) && (e.maxHeight = "none", e.flexGrow = "1 !important", e.flexShrink = "1 !important", e.flexBasis = "0% !important", e.alignSelf = "stretch !important");
+      } else g(n.maxHeight) && (e.maxHeight = "none", e.flexGrow = "1 !important", e.flexShrink = "1 !important", e.flexBasis = "0% !important", e.alignSelf = "stretch !important");
     }
     if (i.padding !== void 0)
       if (typeof i.padding == "number")
@@ -237,9 +357,9 @@ class k extends y {
     return e;
   }
 }
-class $ extends y {
+class ie extends C {
   constructor() {
-    super(...arguments), l(this, "type", "appearance"), l(this, "priority", g.APPEARANCE);
+    super(...arguments), f(this, "type", "appearance"), f(this, "priority", S.APPEARANCE);
   }
   apply(i, t) {
     if (!i.element || !t.element)
@@ -260,16 +380,16 @@ class $ extends y {
    * Apply Asset-based styles with theme reactivity
    */
   applyAssetBasedStyles(i, t) {
-    const e = E();
-    t.foregroundColor && this.isAsset(t.foregroundColor) && h(() => {
+    const e = B();
+    t.foregroundColor && this.isAsset(t.foregroundColor) && b(() => {
       e();
       const n = t.foregroundColor.resolve();
       this.applyStyleChange(i, "color", n);
-    }), t.backgroundColor && this.isAsset(t.backgroundColor) && h(() => {
+    }), t.backgroundColor && this.isAsset(t.backgroundColor) && b(() => {
       e();
       const n = t.backgroundColor.resolve();
       this.applyStyleChange(i, "backgroundColor", n);
-    }), t.border?.color && this.isAsset(t.border.color) && h(() => {
+    }), t.border?.color && this.isAsset(t.border.color) && b(() => {
       e();
       const n = t.border.color.resolve();
       this.applyStyleChange(i, "borderColor", n);
@@ -285,7 +405,13 @@ class $ extends y {
     const t = {};
     if (i.foregroundColor && !this.isAsset(i.foregroundColor) && (t.color = i.foregroundColor), i.backgroundColor && !this.isAsset(i.backgroundColor) && (t.backgroundColor = i.backgroundColor), i.opacity !== void 0 && (t.opacity = i.opacity), i.font) {
       const n = i.font;
-      n.family && (typeof n.family == "object" && n.family !== null && "resolve" in n.family ? t.fontFamily = n.family.resolve() : t.fontFamily = n.family), n.size && (t.fontSize = this.toCSSValue(n.size)), n.weight && (t.fontWeight = String(n.weight)), n.style && (t.fontStyle = n.style);
+      if (n.family)
+        if (typeof n.family == "object" && n.family !== null && typeof n.family.resolve == "function") {
+          const r = n.family.resolve();
+          t.fontFamily = r;
+        } else
+          t.fontFamily = n.family;
+      n.size !== void 0 && (t.fontSize = v(n.size) || m(n.size) ? n.size : this.toCSSValue(n.size)), n.weight !== void 0 && (t.fontWeight = v(n.weight) || m(n.weight) ? n.weight : String(n.weight)), n.style && (t.fontStyle = n.style);
     }
     if (i.cornerRadius !== void 0 && (t.borderRadius = this.toCSSValue(i.cornerRadius)), i.border) {
       const n = i.border;
@@ -318,9 +444,9 @@ class $ extends y {
     return i._tachui_component || null;
   }
 }
-class H extends y {
+class ne extends C {
   constructor() {
-    super(...arguments), l(this, "type", "interaction"), l(this, "priority", g.INTERACTION);
+    super(...arguments), f(this, "type", "interaction"), f(this, "priority", S.INTERACTION);
   }
   apply(i, t) {
     if (!t.element) return;
@@ -338,15 +464,15 @@ class H extends y {
       t.element.addEventListener(
         "touchstart",
         (o) => {
-          const s = o.touches[0];
-          n = s.clientX, r = s.clientY;
+          const a = o.touches[0];
+          n = a.clientX, r = a.clientY;
         },
         { passive: !0 }
       ), t.element.addEventListener(
         "touchend",
         (o) => {
-          const s = o.changedTouches[0], f = s.clientX - n, c = s.clientY - r;
-          Math.abs(f) > Math.abs(c) && Math.abs(f) > 50 && (f < 0 && e.onSwipeLeft ? e.onSwipeLeft() : f > 0 && e.onSwipeRight && e.onSwipeRight());
+          const a = o.changedTouches[0], d = a.clientX - n, c = a.clientY - r;
+          Math.abs(d) > Math.abs(c) && Math.abs(d) > 50 && (d < 0 && e.onSwipeLeft ? e.onSwipeLeft() : d > 0 && e.onSwipeRight && e.onSwipeRight());
         },
         { passive: !0 }
       );
@@ -361,16 +487,16 @@ class H extends y {
     }), e.onCopy && t.element.addEventListener("copy", e.onCopy), e.onCut && t.element.addEventListener("cut", e.onCut), e.onPaste && t.element.addEventListener("paste", e.onPaste), e.onSelect && t.element.addEventListener("select", e.onSelect), e.disabled !== void 0 && t.element instanceof HTMLElement && (e.disabled ? (t.element.setAttribute("disabled", "true"), t.element.style.pointerEvents = "none", t.element.style.opacity = "0.6") : (t.element.removeAttribute("disabled"), t.element.style.pointerEvents = "", t.element.style.opacity = "")), e.draggable !== void 0 && t.element instanceof HTMLElement && (t.element.draggable = e.draggable), e.accessibilityLabel && t.element.setAttribute("aria-label", e.accessibilityLabel), e.accessibilityHint && t.element.setAttribute("aria-describedby", e.accessibilityHint);
   }
 }
-class I extends y {
+class re extends C {
   constructor() {
-    super(...arguments), l(this, "type", "animation"), l(this, "priority", g.ANIMATION);
+    super(...arguments), f(this, "type", "animation"), f(this, "priority", S.ANIMATION);
   }
   apply(i, t) {
     if (!t.element) return;
     const e = this.properties;
     if (e.transition) {
-      const n = e.transition, r = n.property || "all", o = n.duration || 300, a = n.easing || "ease", s = n.delay || 0;
-      t.element instanceof HTMLElement && (t.element.style.transition = `${r} ${o}ms ${a} ${s}ms`);
+      const n = e.transition, r = n.property || "all", o = n.duration || 300, l = n.easing || "ease", a = n.delay || 0;
+      t.element instanceof HTMLElement && (t.element.style.transition = `${r} ${o}ms ${l} ${a}ms`);
     }
     if (e.animation && t.element instanceof HTMLElement) {
       const n = e.animation;
@@ -380,15 +506,15 @@ class I extends y {
           n.keyframes
         );
         this.addKeyframesToStylesheet(o);
-        const a = n.duration || 1e3, s = n.easing || "ease", f = n.iterations || 1, c = n.direction || "normal";
-        t.element.style.animation = `${r} ${a}ms ${s} ${f} ${c}`;
+        const l = n.duration || 1e3, a = n.easing || "ease", d = n.iterations || 1, c = n.direction || "normal";
+        t.element.style.animation = `${r} ${l}ms ${a} ${d} ${c}`;
       }
     }
-    if (e.transform && t.element instanceof HTMLElement && (p(e.transform) || v(e.transform) ? h(() => {
+    if (e.transform && t.element instanceof HTMLElement && (v(e.transform) || m(e.transform) ? b(() => {
       const n = e.transform();
       t.element instanceof HTMLElement && (t.element.style.transform = n);
     }) : t.element.style.transform = e.transform), e.scaleEffect && t.element instanceof HTMLElement) {
-      const { x: n, y: r, anchor: o } = e.scaleEffect, a = r ?? n, f = {
+      const { x: n, y: r, anchor: o } = e.scaleEffect, l = r ?? n, d = {
         center: "50% 50%",
         top: "50% 0%",
         topLeading: "0% 0%",
@@ -399,9 +525,9 @@ class I extends y {
         leading: "0% 50%",
         trailing: "100% 50%"
       }[o || "center"] || "50% 50%";
-      t.element.style.transformOrigin = f;
-      const c = `scale(${n}, ${a})`, b = (t.element.style.transform || "").replace(/\s*scale[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), C = b ? `${b} ${c}`.trim() : c;
-      t.element.style.transform = C;
+      t.element.style.transformOrigin = d;
+      const c = `scale(${n}, ${l})`, L = (t.element.style.transform || "").replace(/\s*scale[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), V = L ? `${L} ${c}`.trim() : c;
+      t.element.style.transform = V;
     }
   }
   createKeyframeRule(i, t) {
@@ -410,9 +536,9 @@ class I extends y {
     for (const [n, r] of Object.entries(t)) {
       e += `  ${n} {
 `;
-      for (const [o, a] of Object.entries(r)) {
-        const s = this.toCSSProperty(o);
-        e += `    ${s}: ${a};
+      for (const [o, l] of Object.entries(r)) {
+        const a = this.toCSSProperty(o);
+        e += `    ${a}: ${l};
 `;
       }
       e += `  }
@@ -427,9 +553,9 @@ class I extends y {
     t || (t = document.createElement("style"), t.id = "tachui-animations", document.head.appendChild(t)), t.appendChild(document.createTextNode(i));
   }
 }
-class R extends y {
+class oe extends C {
   constructor() {
-    super(...arguments), l(this, "type", "lifecycle"), l(this, "priority", g.CUSTOM), l(this, "activeAbortController");
+    super(...arguments), f(this, "type", "lifecycle"), f(this, "priority", S.CUSTOM), f(this, "activeAbortController");
   }
   apply(i, t) {
     if (!t.element) return;
@@ -468,20 +594,22 @@ class R extends y {
     this.properties._cleanupFunctions || (this.properties._cleanupFunctions = []), this.properties._cleanupFunctions.push(i);
   }
 }
-class D extends y {
+class se extends C {
   constructor() {
-    super(...arguments), l(this, "type", "resizable"), l(this, "priority", g.APPEARANCE);
+    super(...arguments), f(this, "type", "resizable"), f(this, "priority", S.APPEARANCE);
   }
   apply(i, t) {
     t.element && t.element instanceof HTMLImageElement && (t.element.style.objectFit = "fill");
   }
 }
 export {
-  I as AnimationModifier,
-  $ as AppearanceModifier,
-  y as BaseModifier,
-  H as InteractionModifier,
-  k as LayoutModifier,
-  R as LifecycleModifier,
-  D as ResizableModifier
+  re as AnimationModifier,
+  ie as AppearanceModifier,
+  C as BaseModifier,
+  ne as InteractionModifier,
+  te as LayoutModifier,
+  oe as LifecycleModifier,
+  se as ResizableModifier,
+  N as bindReactiveStyle,
+  ee as setReactiveStyleUpdaterErrorHandler
 };