@tachui/core 0.8.24 → 0.8.26

package/dist/modifiers/base.js

@@ -1,26 +1,26 @@
-import { i as m, r as R } from "../computed-CA4Cgtoe.js";
-import { c as b } from "../effect-DgNm6jk9.js";
-import { g as O, i as S } from "../signal-BRoiFOO7.js";
-import { a as D } from "../theme-D5-09a8N.js";
+import { i as m, r as D } from "../computed-CA4Cgtoe.js";
+import { c as S } from "../effect-DgNm6jk9.js";
+import { g as z, i as b } from "../signal-BRoiFOO7.js";
+import { a as B } from "../theme-D5-09a8N.js";
 import { ModifierPriority as C } from "@tachui/types/modifiers";
-import { shouldExpandForInfinity as B, dimensionToCSS as g, isInfinity as p } from "../constants/layout.js";
-import { o as _ } from "../cleanup-BR8UpYPX.js";
+import { shouldExpandForInfinity as _, dimensionToCSS as g, isInfinity as p } from "../constants/layout.js";
+import { o as F } from "../cleanup-BR8UpYPX.js";
 const L = /* @__PURE__ */ new WeakMap();
 let y = null;
-function te(s) {
-  if (s === null)
+function re(o) {
+  if (o === null)
     return y = null, () => {
     };
   const i = y;
   return y = (t, e) => {
-    i?.(t, e), s(t, e);
+    i?.(t, e), o(t, e);
   }, () => {
     y = i;
   };
 }
-function k(s, i, t) {
+function I(o, i, t) {
   try {
-    s(i);
+    o(i);
   } catch (e) {
     if (y) {
       y(e, { updaterId: t, value: i });
@@ -29,20 +29,20 @@ function k(s, i, t) {
     console.error(`Reactive style updater failed (${t}):`, e);
   }
 }
-const A = 200, u = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new Set();
-let P = !1, M = !1;
-function z(s) {
-  u.get(s)?.forEach((t) => t()), u.delete(s), T.delete(s);
+const k = 200, u = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new Set();
+let P = !1, $ = !1;
+function W(o) {
+  u.get(o)?.forEach((t) => t()), u.delete(o), M.delete(o);
 }
-function $() {
-  const s = Date.now();
+function V() {
+  const o = Date.now();
   for (const i of Array.from(v)) {
     const t = i.deref();
     if (!t) {
       v.delete(i);
       continue;
     }
-    const e = T.get(t), n = u.get(t);
+    const e = M.get(t), n = u.get(t);
     if (!e || !n || n.size === 0) {
       v.delete(i);
       continue;
@@ -51,92 +51,120 @@ function $() {
       e.wasConnected = !0;
       continue;
     }
-    (e.wasConnected || s - e.trackedAt >= A) && (z(t), v.delete(i));
+    (e.wasConnected || o - e.trackedAt >= k) && (W(t), v.delete(i));
   }
 }
-function F() {
-  if (M || typeof setTimeout != "function") return;
-  M = !0;
-  const s = () => {
-    if ($(), v.size === 0) {
-      M = !1;
+function U() {
+  if ($ || typeof setTimeout != "function") return;
+  $ = !0;
+  const o = () => {
+    if (V(), v.size === 0) {
+      $ = !1;
       return;
     }
-    setTimeout(s, A);
+    setTimeout(o, k);
   };
-  setTimeout(s, A);
+  setTimeout(o, k);
 }
-function W() {
+function N() {
   if (P || typeof document > "u" || !document.documentElement || typeof MutationObserver > "u")
     return;
   new MutationObserver(() => {
-    $();
+    V();
   }).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, {
+function j(o, i) {
+  N(), U();
+  const t = u.get(o) ?? /* @__PURE__ */ new Set(), e = t.size > 0;
+  return t.add(i), u.set(o, t), e || (M.set(o, {
     trackedAt: Date.now(),
-    wasConnected: s.isConnected
-  }), v.add(new WeakRef(s))), () => {
-    const n = u.get(s);
-    n && (n.delete(i), n.size === 0 && (u.delete(s), T.delete(s)));
+    wasConnected: o.isConnected
+  }), v.add(new WeakRef(o))), () => {
+    const n = u.get(o);
+    n && (n.delete(i), n.size === 0 && (u.delete(o), M.delete(o)));
   };
 }
-function N({
-  element: s,
+function K({
+  element: o,
   accessor: i,
   updater: t,
   updaterId: e
 }) {
-  const n = L.get(s) ?? /* @__PURE__ */ new Map();
-  L.has(s) || L.set(s, n);
+  const n = L.get(o) ?? /* @__PURE__ */ new Map();
+  L.has(o) || L.set(o, n);
   let r = n.get(i);
   if (!r) {
     const a = /* @__PURE__ */ new Map();
-    r = { effect: b(() => {
+    r = { effect: S(() => {
       const c = i();
       a.forEach(
-        (w, h) => k(w, c, h)
+        (w, h) => I(w, c, h)
       );
     }), updaters: a }, n.set(i, r);
   }
-  r.updaters.set(e, t), k(t, i(), e);
-  let o = null;
+  r.updaters.set(e, t), I(t, i(), e);
+  let s = null;
   const l = () => {
-    o && (o(), o = null);
-    const a = L.get(s), d = a?.get(i);
-    d && (d.updaters.delete(e), d.updaters.size === 0 && (d.effect.dispose(), a?.delete(i), m(i) && R(i)), a && a.size === 0 && L.delete(s));
+    s && (s(), s = null);
+    const a = L.get(o), 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 && L.delete(o));
   };
-  O() ? _(l) : o = U(s, l);
+  z() ? F(l) : s = j(o, 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 H = 0;
-function Y(s) {
-  const i = s[I];
+var x = Object.defineProperty, Y = (o, i, t) => i in o ? x(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t, f = (o, i, t) => Y(o, typeof i != "symbol" ? i + "" : i, t);
+const H = Symbol.for("tachui.modifier.instanceId"), G = "core";
+let R = 0;
+function T(o) {
+  return typeof HTMLElement < "u" && o instanceof HTMLElement;
+}
+function A(o) {
+  return typeof o == "object" && o !== null && "style" in o && !!o.style;
+}
+function X(o) {
+  const i = o[H];
   if (typeof i == "number") return i;
-  H += 1;
-  const t = H;
-  return Object.defineProperty(s, I, {
+  R += 1;
+  const t = R;
+  return Object.defineProperty(o, H, {
     value: t,
     enumerable: !1,
     configurable: !1,
     writable: !1
   }), t;
 }
+function Z(o, i, t) {
+  const e = [];
+  if (i.transition) {
+    const r = i.transition, s = r.property || "all", l = r.duration || 300, a = r.easing || "ease", d = r.delay || 0;
+    s === "none" ? e.push(`${o} { transition: none; }`) : e.push(
+      `${o} { transition: ${s} ${l}ms ${a} ${d}ms; }`
+    );
+  }
+  const n = i.animation;
+  if (n?.keyframes) {
+    const s = `tachui-animation-${o.replace(/[^a-zA-Z0-9_-]/g, "") || "component"}`;
+    e.push(t(s, n.keyframes));
+    const l = n.duration || 1e3, a = n.easing || "ease", d = n.iterations || 1, c = n.direction || "normal";
+    e.push(
+      `${o} { animation: ${s} ${l}ms ${a} ${d} ${c}; }`
+    );
+  }
+  return e;
+}
 class E {
   constructor(i) {
     this.properties = i;
   }
+  getStaticCSS(i) {
+    return [];
+  }
   /**
    * Helper to resolve reactive properties
    */
   resolveReactiveProps(i, t) {
     const e = {};
     for (const [n, r] of Object.entries(i))
-      S(r) || m(r), e[n] = r;
+      b(r) || m(r), e[n] = r;
     return e;
   }
   /**
@@ -146,16 +174,16 @@ class E {
     const n = typeof HTMLElement < "u" && i instanceof HTMLElement;
     if (!n && !i.style)
       return;
-    const r = this.toCSSProperty(t), o = i.style, l = (a) => {
+    const r = this.toCSSProperty(t), s = i.style, l = (a) => {
       if (a.includes("!important")) {
         const d = a.replace(/\s*!important\s*$/, "").trim();
-        o.setProperty(r, d, "important");
+        s.setProperty(r, d, "important");
         return;
       }
-      o.setProperty(r, a);
+      s.setProperty(r, a);
     };
-    if (S(e) || m(e)) {
-      b(() => {
+    if (b(e) || m(e)) {
+      S(() => {
         const a = e();
         l(String(a));
       });
@@ -209,25 +237,25 @@ class E {
   applyStyles(i, t) {
     const e = typeof HTMLElement < "u" && i instanceof HTMLElement;
     if (e || i.style) {
-      const n = i.style, r = (o, l) => {
+      const n = i.style, r = (s, l) => {
         if (n.setProperty)
           if (typeof l == "string" && l.includes("!important")) {
             const a = l.replace(/\s*!important\s*$/, "").trim();
-            n.setProperty(o, a, "important");
+            n.setProperty(s, a, "important");
           } else
-            n.setProperty(o, l);
+            n.setProperty(s, l);
         else
-          n[o] = l;
+          n[s] = l;
       };
-      for (const [o, l] of Object.entries(t))
+      for (const [s, l] of Object.entries(t))
         if (l !== void 0) {
-          const a = this.toCSSProperty(o);
-          if (S(l) || m(l)) {
-            const d = l, c = Y(this);
-            N({
+          const a = this.toCSSProperty(s);
+          if (b(l) || m(l)) {
+            const d = l, c = X(this);
+            K({
               element: i,
               accessor: d,
-              updaterId: `${x}:${c}:${a}`,
+              updaterId: `${G}:${c}:${a}`,
               updater: (w) => {
                 const h = this.toCSSValueForProperty(a, w);
                 r(a, h);
@@ -244,13 +272,13 @@ class E {
    * Add CSS classes to an element
    */
   addClasses(i, t) {
-    i instanceof HTMLElement && i.classList.add(...t);
+    T(i) && i.classList.add(...t);
   }
   /**
    * Remove CSS classes from an element
    */
   removeClasses(i, t) {
-    i instanceof HTMLElement && i.classList.remove(...t);
+    T(i) && i.classList.remove(...t);
   }
   /**
    * Create a style computation context
@@ -265,7 +293,7 @@ class E {
     };
   }
 }
-class ie extends E {
+class oe extends E {
   constructor() {
     super(...arguments), f(this, "type", "layout"), f(this, "priority", C.LAYOUT);
   }
@@ -281,40 +309,40 @@ class ie extends E {
     );
     this.applyStyles(t.element, n);
     const r = this.properties;
-    r.position && t.element instanceof HTMLElement && this.applyAbsolutePosition(t.element, r.position);
+    r.position && T(t.element) && this.applyAbsolutePosition(t.element, r.position);
   }
   // Layout modifier implementations have been migrated to @tachui/modifiers/layout
   applyAbsolutePosition(i, t) {
-    const { x: e, y: n } = t, r = e ?? "auto", o = n ?? "auto";
-    i.style.left = this.toCSSValue(r), i.style.top = this.toCSSValue(o);
+    const { x: e, y: n } = t, r = e ?? "auto", s = n ?? "auto";
+    i.style.left = this.toCSSValue(r), i.style.top = this.toCSSValue(s);
   }
   computeLayoutStyles(i, t) {
     const e = {};
     if (i.frame) {
-      const n = i.frame, r = B(n);
+      const n = i.frame, r = _(n);
       if (Object.assign(e, r.cssProps), n.width !== void 0) {
-        const o = g(n.width);
-        o !== void 0 && !p(n.width) && !r.expandWidth && (e.width = o);
+        const s = g(n.width);
+        s !== void 0 && !p(n.width) && !r.expandWidth && (e.width = s);
       }
       if (n.height !== void 0) {
-        const o = g(n.height);
-        o !== void 0 && !p(n.height) && !r.expandHeight && (e.height = o);
+        const s = g(n.height);
+        s !== void 0 && !p(n.height) && !r.expandHeight && (e.height = s);
       }
       if (n.minWidth !== void 0) {
-        const o = g(n.minWidth);
-        o !== void 0 && (e.minWidth = o);
+        const s = g(n.minWidth);
+        s !== void 0 && (e.minWidth = s);
       }
       if (n.maxWidth !== void 0 && !p(n.maxWidth)) {
-        const o = g(n.maxWidth);
-        o !== void 0 && (e.maxWidth = o);
+        const s = g(n.maxWidth);
+        s !== void 0 && (e.maxWidth = s);
       } else p(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 = g(n.minHeight);
-        o !== void 0 && (e.minHeight = o);
+        const s = g(n.minHeight);
+        s !== void 0 && (e.minHeight = s);
       }
       if (n.maxHeight !== void 0 && !p(n.maxHeight)) {
-        const o = g(n.maxHeight);
-        o !== void 0 && (e.maxHeight = o);
+        const s = g(n.maxHeight);
+        s !== void 0 && (e.maxHeight = s);
       } else p(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)
@@ -351,7 +379,7 @@ class ie extends E {
       }
     if (i.layoutPriority !== void 0) {
       const n = Number(i.layoutPriority);
-      n > 0 ? (e.flexShrink = "0", e.flexGrow = String(Math.max(1, n / 10)), e.zIndex = String(n), e.gridRowEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`, e.gridColumnEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`) : n === 0 ? (e.flexShrink = "1", e.flexGrow = "1") : (e.flexShrink = String(Math.abs(n)), e.flexGrow = "0", e.zIndex = String(n)), e && typeof e == "object" && "setProperty" in e && e.setProperty("--layout-priority", String(n));
+      n > 0 ? (e.flexShrink = "0", e.flexGrow = String(Math.max(1, n / 10)), e.zIndex = String(n), e.gridRowEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`, e.gridColumnEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`) : n === 0 ? (e.flexShrink = "1", e.flexGrow = "1") : (e.flexShrink = String(Math.abs(n)), e.flexGrow = "0", e.zIndex = String(n)), e["--layout-priority"] = String(n);
     }
     if (i.offset, i.aspectRatio) {
       const { ratio: n, contentMode: r } = i.aspectRatio;
@@ -364,7 +392,7 @@ class ie extends E {
     return e;
   }
 }
-class ne extends E {
+class se extends E {
   constructor() {
     super(...arguments), f(this, "type", "appearance"), f(this, "priority", C.APPEARANCE);
   }
@@ -387,16 +415,16 @@ class ne extends E {
    * Apply Asset-based styles with theme reactivity
    */
   applyAssetBasedStyles(i, t) {
-    const e = D();
-    t.foregroundColor && this.isAsset(t.foregroundColor) && b(() => {
+    const e = B();
+    t.foregroundColor && this.isAsset(t.foregroundColor) && S(() => {
       e();
       const n = t.foregroundColor.resolve();
       this.applyStyleChange(i, "color", n);
-    }), t.backgroundColor && this.isAsset(t.backgroundColor) && b(() => {
+    }), t.backgroundColor && this.isAsset(t.backgroundColor) && S(() => {
       e();
       const n = t.backgroundColor.resolve();
       this.applyStyleChange(i, "backgroundColor", n);
-    }), t.border?.color && this.isAsset(t.border.color) && b(() => {
+    }), t.border?.color && this.isAsset(t.border.color) && S(() => {
       e();
       const n = t.border.color.resolve();
       this.applyStyleChange(i, "borderColor", n);
@@ -418,7 +446,7 @@ class ne extends E {
           t.fontFamily = r;
         } else
           t.fontFamily = n.family;
-      n.size !== void 0 && (t.fontSize = S(n.size) || m(n.size) ? n.size : this.toCSSValue(n.size)), n.weight !== void 0 && (t.fontWeight = S(n.weight) || m(n.weight) ? n.weight : String(n.weight)), n.style && (t.fontStyle = n.style);
+      n.size !== void 0 && (t.fontSize = b(n.size) || m(n.size) ? n.size : this.toCSSValue(n.size)), n.weight !== void 0 && (t.fontWeight = b(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;
@@ -451,7 +479,7 @@ class ne extends E {
     return i._tachui_component || null;
   }
 }
-class re extends E {
+class ae extends E {
   constructor() {
     super(...arguments), f(this, "type", "interaction"), f(this, "priority", C.INTERACTION);
   }
@@ -470,15 +498,15 @@ class re extends E {
       let n = 0, r = 0;
       t.element.addEventListener(
         "touchstart",
-        (o) => {
-          const a = o.touches[0];
+        (s) => {
+          const a = s.touches[0];
           n = a.clientX, r = a.clientY;
         },
         { passive: !0 }
       ), t.element.addEventListener(
         "touchend",
-        (o) => {
-          const a = o.changedTouches[0], d = a.clientX - n, c = a.clientY - r;
+        (s) => {
+          const a = s.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 }
@@ -489,12 +517,12 @@ class re extends E {
     }), e.onWheel && t.element.addEventListener("wheel", e.onWheel, {
       passive: !1
     }), e.onInput && t.element.addEventListener("input", e.onInput), e.onChange && t.element.addEventListener("change", (n) => {
-      const r = n.target, o = r.value || r.textContent || "";
-      e.onChange(o, n);
-    }), 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);
+      const r = n.target, s = r.value || r.textContent || "";
+      e.onChange(s, n);
+    }), 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(t.element) && (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(t.element) && (t.element.draggable = e.draggable), e.accessibilityLabel && t.element.setAttribute("aria-label", e.accessibilityLabel), e.accessibilityHint && t.element.setAttribute("aria-describedby", e.accessibilityHint);
   }
 }
-class oe extends E {
+class le extends E {
   constructor() {
     super(...arguments), f(this, "type", "animation"), f(this, "priority", C.ANIMATION);
   }
@@ -502,26 +530,26 @@ class oe extends E {
     if (!t.element) return;
     const e = this.properties;
     if (e.transition) {
-      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`);
+      const n = e.transition, r = n.property || "all", s = n.duration || 300, l = n.easing || "ease", a = n.delay || 0;
+      A(t.element) && (r === "none" ? t.element.style.transition = "none" : t.element.style.transition = `${r} ${s}ms ${l} ${a}ms`);
     }
-    if (e.animation && t.element instanceof HTMLElement) {
+    if (e.animation && A(t.element)) {
       const n = e.animation;
-      if (n.keyframes) {
-        const r = `tachui-animation-${t.componentId}-${Date.now()}`, o = this.createKeyframeRule(
+      if (n.keyframes && typeof document < "u") {
+        const r = `tachui-animation-${t.componentId}-${Date.now()}`, s = this.createKeyframeRule(
           r,
           n.keyframes
         );
-        this.addKeyframesToStylesheet(o);
+        this.addKeyframesToStylesheet(s);
         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 && (S(e.transform) || m(e.transform) ? b(() => {
+    if (e.transform && A(t.element) && (b(e.transform) || m(e.transform) ? S(() => {
       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, l = r ?? n, d = {
+      A(t.element) && (t.element.style.transform = n);
+    }) : t.element.style.transform = e.transform), e.scaleEffect && A(t.element)) {
+      const { x: n, y: r, anchor: s } = e.scaleEffect, l = r ?? n, d = {
         center: "50% 50%",
         top: "50% 0%",
         topLeading: "0% 0%",
@@ -531,20 +559,27 @@ class oe extends E {
         bottomTrailing: "100% 100%",
         leading: "0% 50%",
         trailing: "100% 50%"
-      }[o || "center"] || "50% 50%";
+      }[s || "center"] || "50% 50%";
       t.element.style.transformOrigin = d;
-      const c = `scale(${n}, ${l})`, h = (t.element.style.transform || "").replace(/\s*scale[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), V = h ? `${h} ${c}`.trim() : c;
-      t.element.style.transform = V;
+      const c = `scale(${n}, ${l})`, h = (t.element.style.transform || "").replace(/\s*scale[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), O = h ? `${h} ${c}`.trim() : c;
+      t.element.style.transform = O;
     }
   }
+  getStaticCSS(i) {
+    return Z(
+      i,
+      this.properties,
+      this.createKeyframeRule.bind(this)
+    );
+  }
   createKeyframeRule(i, t) {
     let e = `@keyframes ${i} {
 `;
     for (const [n, r] of Object.entries(t)) {
       e += `  ${n} {
 `;
-      for (const [o, l] of Object.entries(r)) {
-        const a = this.toCSSProperty(o);
+      for (const [s, l] of Object.entries(r)) {
+        const a = this.toCSSProperty(s);
         e += `    ${a}: ${l};
 `;
       }
@@ -560,7 +595,7 @@ class oe extends E {
     t || (t = document.createElement("style"), t.id = "tachui-animations", document.head.appendChild(t)), t.appendChild(document.createTextNode(i));
   }
 }
-class se extends E {
+class de extends E {
   constructor() {
     super(...arguments), f(this, "type", "lifecycle"), f(this, "priority", C.CUSTOM), f(this, "activeAbortController");
   }
@@ -601,7 +636,7 @@ class se extends E {
     this.properties._cleanupFunctions || (this.properties._cleanupFunctions = []), this.properties._cleanupFunctions.push(i);
   }
 }
-class ae extends E {
+class fe extends E {
   constructor() {
     super(...arguments), f(this, "type", "resizable"), f(this, "priority", C.APPEARANCE);
   }
@@ -610,13 +645,14 @@ class ae extends E {
   }
 }
 export {
-  oe as AnimationModifier,
-  ne as AppearanceModifier,
+  le as AnimationModifier,
+  se as AppearanceModifier,
   E as BaseModifier,
-  re as InteractionModifier,
-  ie as LayoutModifier,
-  se as LifecycleModifier,
-  ae as ResizableModifier,
-  N as bindReactiveStyle,
-  te as setReactiveStyleUpdaterErrorHandler
+  ae as InteractionModifier,
+  oe as LayoutModifier,
+  de as LifecycleModifier,
+  fe as ResizableModifier,
+  K as bindReactiveStyle,
+  Z as collectStaticAnimationCSSRules,
+  re as setReactiveStyleUpdaterErrorHandler
 };

package/dist/modifiers/builder.js

@@ -1,5 +1,5 @@
 import "@tachui/registry";
-import { M as s, a, c as o, m as d, s as t } from "../concatenated-component-CA54ng_j.js";
+import { M as s, a, c as o, m as d, s as t } from "../concatenated-component-DisxEqg6.js";
 export {
   s as ModifierBuilderImpl,
   a as applyModifiers,

package/dist/modifiers/factories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factories.d.ts","sourceRoot":"","sources":["../../src/modifiers/factories.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"factories.d.ts","sourceRoot":"","sources":["../../src/modifiers/factories.ts"],"names":[],"mappings":"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"}

package/dist/modifiers/index.js

@@ -1,8 +1,8 @@
 import { AnimationModifier as r, AppearanceModifier as o, BaseModifier as a, InteractionModifier as s, LayoutModifier as f, LifecycleModifier as t, ResizableModifier as d } from "./base.js";
 import { ModifierPriority as p } from "@tachui/types/modifiers";
-import { M as c, a as l, b as m, d as y, c as x, e as b, m as u, s as g } from "../concatenated-component-CA54ng_j.js";
-import { a as h, r as B } from "../proxy-B7ZIqGd0.js";
-import { a as R, b as v, d as A, e as I, f as L, c as j, g as k, h as z, j as E, i as H, l as N, m as S, p as T, r as U, s as W, k as q } from "../factories-B05hE6kc.js";
+import { M as c, a as l, b as m, d as y, c as x, e as b, m as u, s as g } from "../concatenated-component-DisxEqg6.js";
+import { a as h, r as B } from "../proxy-B6FFddJq.js";
+import { a as R, b as v, d as A, e as I, f as L, c as j, g as k, h as z, j as E, i as H, l as N, m as S, p as T, r as U, s as W, k as q } from "../factories-Bz6LZlk6.js";
 import { r as D } from "../registration-utils-CNsN4eoU.js";
 export {
   r as AnimationModifier,

package/dist/modifiers/registry.js

@@ -1,4 +1,4 @@
-import { b as a, d as r, e as s, z as t, B as d, A as p } from "../concatenated-component-CA54ng_j.js";
+import { b as a, d as r, e as s, z as t, B as d, A as p } from "../concatenated-component-DisxEqg6.js";
 import "@tachui/registry";
 export {
   a as applyModifiersToNode,

package/dist/{observed-object-DCoyucmV.js → observed-object-gKl1Kk85.js}

@@ -1,6 +1,6 @@
 import { c as l } from "./effect-DgNm6jk9.js";
 import { d as f, j as p } from "./signal-BRoiFOO7.js";
-import { d as a, g as d, p as g, c as y } from "./component-context-C7Y6Xu6h.js";
+import { d as a, g as d, p as g, c as y } from "./component-context-BB80qzyZ.js";
 var j = Object.defineProperty, O = (e, t, n) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, s = (e, t, n) => O(e, typeof t != "symbol" ? t + "" : t, n);
 class v {
   constructor(t) {

package/dist/{optimization-D9t53vNJ.js → optimization-CnRxoggr.js}

@@ -1,6 +1,6 @@
 import { c as v } from "./computed-CA4Cgtoe.js";
 import { d as p } from "./signal-BRoiFOO7.js";
-import { b as C } from "./component-context-C7Y6Xu6h.js";
+import { b as C } from "./component-context-BB80qzyZ.js";
 var x = Object.defineProperty, b = (s, e, t) => e in s ? x(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, c = (s, e, t) => b(s, typeof e != "symbol" ? e + "" : e, t);
 const f = class l {
   constructor() {

package/dist/{proxy-B7ZIqGd0.js → proxy-B6FFddJq.js}

@@ -1,4 +1,4 @@
-import { z as h, d as R } from "./concatenated-component-CA54ng_j.js";
+import { z as h, d as R } from "./concatenated-component-DisxEqg6.js";
 const k = {
   proxyModifiers: !0
 };

package/dist/runtime/component-context.d.ts

@@ -18,6 +18,8 @@ export declare const EnvironmentSymbol: unique symbol;
  * Create a new component context
  */
 export declare function createComponentContext(componentId: string, parent?: ComponentContext): ComponentContext;
+export declare function getCurrentComponentContextOrNull(): ComponentContext | null;
+export declare function createDeterministicComponentId(componentName: string, parentContext?: ComponentContext): string;
 /**
  * Get the current component context
  */