@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/dist/modifiers/base.js

@@ -1,67 +1,62 @@
-import "../reactive/cleanup.js";
-import { isComputed as d } from "../reactive/computed.js";
-import { createEffect as h } from "../reactive/effect.js";
-import "../reactive/unified-scheduler.js";
-import { isSignal as u } from "../reactive/signal.js";
-import "../reactive/scheduler.js";
-import { getThemeSignal as L } from "../reactive/theme.js";
-import { ModifierPriority as C } from "./types.js";
-import { shouldExpandForInfinity as T, dimensionToCSS as b, isInfinity as S } from "../constants/layout.js";
-var M = Object.defineProperty, P = (g, n, t) => n in g ? M(g, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[n] = t, y = (g, n, t) => P(g, typeof n != "symbol" ? n + "" : n, t);
-class E {
-  constructor(n) {
-    this.properties = n;
+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 {
+  constructor(i) {
+    this.properties = i;
   }
   /**
    * Helper to resolve reactive properties
    */
-  resolveReactiveProps(n, t) {
+  resolveReactiveProps(i, t) {
     const e = {};
-    for (const [i, s] of Object.entries(n))
-      u(s) || d(s), e[i] = s;
+    for (const [n, r] of Object.entries(i))
+      p(r) || v(r), e[n] = r;
     return e;
   }
   /**
    * Apply a single style change to an element with reactive support
    */
-  applyStyleChange(n, t, e) {
-    if (n instanceof HTMLElement) {
-      const i = this.toCSSProperty(t);
-      if (u(e) || d(e))
+  applyStyleChange(i, t, e) {
+    if (i instanceof HTMLElement) {
+      const n = this.toCSSProperty(t);
+      if (p(e) || v(e))
         h(() => {
-          const s = e(), o = String(s);
+          const r = e(), o = String(r);
           if (o.includes("!important")) {
-            const r = o.replace(/\s*!important\s*$/, "").trim();
-            n.style.setProperty(i, r, "important");
+            const a = o.replace(/\s*!important\s*$/, "").trim();
+            i.style.setProperty(n, a, "important");
           } else
-            n.style.setProperty(i, o);
+            i.style.setProperty(n, o);
         });
       else {
-        const s = String(e);
-        if (s.includes("!important")) {
-          const o = s.replace(/\s*!important\s*$/, "").trim();
-          n.style.setProperty(i, o, "important");
+        const r = String(e);
+        if (r.includes("!important")) {
+          const o = r.replace(/\s*!important\s*$/, "").trim();
+          i.style.setProperty(n, o, "important");
         } else
-          n.style.setProperty(i, s);
+          i.style.setProperty(n, r);
       }
     }
   }
   /**
    * Convert camelCase property to CSS kebab-case
    */
-  toCSSProperty(n) {
-    return n.replace(/([A-Z])/g, "-$1").toLowerCase();
+  toCSSProperty(i) {
+    return i.replace(/([A-Z])/g, "-$1").toLowerCase();
   }
   /**
    * Convert value to CSS value string
    */
-  toCSSValue(n) {
-    return typeof n == "number" ? `${n}px` : String(n);
+  toCSSValue(i) {
+    return typeof i == "number" ? `${i}px` : String(i);
   }
   /**
    * Convert value to CSS value string with property-specific handling
    */
-  toCSSValueForProperty(n, t) {
+  toCSSValueForProperty(i, t) {
     return typeof t == "number" ? [
       "opacity",
       "z-index",
@@ -71,46 +66,49 @@ class E {
       "order",
       "column-count",
       "font-weight"
-    ].includes(n) ? String(t) : `${t}px` : ([
+    ].includes(i) ? String(t) : `${t}px` : ([
       "filter",
       // CSS filter strings should not be processed
       "transform",
       // CSS transform strings
       "clip-path"
       // CSS clip-path strings
-    ].includes(n), String(t));
+    ].includes(i), String(t));
   }
   /**
    * Apply multiple CSS properties to an element with reactive support
    */
-  applyStyles(n, t) {
-    if (n instanceof HTMLElement || n.style) {
-      const e = (n instanceof HTMLElement, n.style);
-      for (const [i, s] of Object.entries(t))
-        if (s !== void 0) {
-          const o = this.toCSSProperty(i);
-          if (u(s) || d(s))
+  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 r = s(), a = this.toCSSValueForProperty(o, r);
+              const a = r(), s = this.toCSSValueForProperty(
+                o,
+                a
+              );
               if (e.setProperty)
-                if (typeof a == "string" && a.includes("!important")) {
-                  const l = a.replace(/\s*!important\s*$/, "").trim();
-                  e.setProperty(o, l, "important");
+                if (typeof s == "string" && s.includes("!important")) {
+                  const f = s.replace(/\s*!important\s*$/, "").trim();
+                  e.setProperty(o, f, "important");
                 } else
-                  e.setProperty(o, a);
+                  e.setProperty(o, s);
               else
-                e[o] = a;
+                e[o] = s;
             });
           else {
-            const r = this.toCSSValueForProperty(o, s);
+            const a = this.toCSSValueForProperty(o, r);
             if (e.setProperty)
-              if (typeof r == "string" && r.includes("!important")) {
-                const a = r.replace(/\s*!important\s*$/, "").trim();
-                e.setProperty(o, a, "important");
+              if (typeof a == "string" && a.includes("!important")) {
+                const s = a.replace(/\s*!important\s*$/, "").trim();
+                e.setProperty(o, s, "important");
               } else
-                e.setProperty(o, r);
+                e.setProperty(o, a);
             else
-              e[o] = r;
+              e[o] = a;
           }
         }
     }
@@ -118,21 +116,21 @@ class E {
   /**
    * Add CSS classes to an element
    */
-  addClasses(n, t) {
-    n instanceof HTMLElement && n.classList.add(...t);
+  addClasses(i, t) {
+    i instanceof HTMLElement && i.classList.add(...t);
   }
   /**
    * Remove CSS classes from an element
    */
-  removeClasses(n, t) {
-    n instanceof HTMLElement && n.classList.remove(...t);
+  removeClasses(i, t) {
+    i instanceof HTMLElement && i.classList.remove(...t);
   }
   /**
    * Create a style computation context
    */
-  createStyleContext(n, t, e) {
+  createStyleContext(i, t, e) {
     return {
-      componentId: n,
+      componentId: i,
       element: t,
       modifiers: e,
       signals: /* @__PURE__ */ new Set(),
@@ -140,129 +138,74 @@ class E {
     };
   }
 }
-class D extends E {
+class k extends y {
   constructor() {
-    super(...arguments), y(this, "type", "layout"), y(this, "priority", C.LAYOUT);
-  }
-  apply(n, t) {
-    if (!n.element || !t.element) return;
-    const e = this.createStyleContext(t.componentId, t.element, []), i = this.computeLayoutStyles(this.properties, e);
-    this.applyStyles(t.element, i);
-    const s = this.properties;
-    s.offset && t.element instanceof HTMLElement && this.applyOffsetTransform(t.element, s.offset), s.aspectRatio && t.element instanceof HTMLElement && this.applyAspectRatio(t.element, s.aspectRatio), s.scaleEffect && t.element instanceof HTMLElement && this.applyScaleTransform(t.element, s.scaleEffect), s.position && t.element instanceof HTMLElement && this.applyAbsolutePosition(t.element, s.position), s.zIndex !== void 0 && t.element instanceof HTMLElement && this.applyZIndex(t.element, s.zIndex);
-  }
-  applyOffsetTransform(n, t) {
-    const { x: e, y: i } = t;
-    if (u(e) || d(e) || u(i) || d(i))
-      h(() => {
-        const s = u(e) || d(e) ? e() : e ?? 0, o = u(i) || d(i) ? i() : i ?? 0, r = this.toCSSValue(s), a = this.toCSSValue(o), l = `translate(${r}, ${a})`, m = (n.style.transform || "").split(" ").filter((p) => p && !p.startsWith("translate(")).join(" "), f = m ? `${m} ${l}` : l;
-        n.style.transform = f;
-      });
-    else {
-      const s = e ?? 0, o = i ?? 0, r = this.toCSSValue(s), a = this.toCSSValue(o), l = `translate(${r}, ${a})`, m = (n.style.transform || "").split(" ").filter((p) => p && !p.startsWith("translate(")).join(" "), f = m ? `${m} ${l}` : l;
-      n.style.transform = f;
-    }
-  }
-  applyAspectRatio(n, t) {
-    const { ratio: e, contentMode: i } = t;
-    e !== void 0 && (u(e) || d(e) ? h(() => {
-      const s = typeof e == "function" ? e() : e;
-      n.style.aspectRatio = String(s);
-    }) : n.style.aspectRatio = String(e), i === "fill" ? n.style.objectFit = "cover" : n.style.objectFit = "contain");
-  }
-  // Phase 3 - Epic: Butternut Transform Methods
-  applyScaleTransform(n, t) {
-    const { x: e, y: i, anchor: s } = t, o = e ?? 1, r = i ?? o;
-    if (u(o) || d(o) || u(r) || d(r))
-      h(() => {
-        const a = u(o) || d(o) ? o() : o, l = u(r) || d(r) ? r() : r, c = `scale(${a}, ${l})`;
-        n.style.transformOrigin = this.getTransformOrigin(s || "center");
-        const f = (n.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), p = f ? `${f} ${c}` : c;
-        n.style.transform = p;
-      });
-    else {
-      const a = `scale(${o}, ${r})`;
-      n.style.transformOrigin = this.getTransformOrigin(s || "center");
-      const c = (n.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), m = c ? `${c} ${a}` : a;
-      n.style.transform = m;
-    }
-  }
-  applyAbsolutePosition(n, t) {
-    const { x: e, y: i } = t;
-    if (n.style.position = "absolute", u(e) || d(e) || u(i) || d(i))
-      h(() => {
-        const s = u(e) || d(e) ? e() : e ?? 0, o = u(i) || d(i) ? i() : i ?? 0;
-        n.style.left = this.toCSSValue(s), n.style.top = this.toCSSValue(o);
-      });
-    else {
-      const s = e ?? 0, o = i ?? 0;
-      n.style.left = this.toCSSValue(s), n.style.top = this.toCSSValue(o);
-    }
+    super(...arguments), l(this, "type", "layout"), l(this, "priority", g.LAYOUT);
+  }
+  apply(i, t) {
+    if (!i.element || !t.element) return;
+    const e = this.createStyleContext(
+      t.componentId,
+      t.element,
+      []
+    ), n = this.computeLayoutStyles(
+      this.properties,
+      e
+    );
+    this.applyStyles(t.element, n);
+    const r = this.properties;
+    r.position && t.element instanceof HTMLElement && this.applyAbsolutePosition(t.element, r.position);
   }
-  applyZIndex(n, t) {
-    u(t) || d(t) ? h(() => {
-      const e = t();
-      n.style.zIndex = String(e);
-    }) : n.style.zIndex = String(t);
+  // 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);
   }
-  getTransformOrigin(n) {
-    return {
-      center: "center center",
-      top: "center top",
-      topLeading: "left top",
-      topTrailing: "right top",
-      bottom: "center bottom",
-      bottomLeading: "left bottom",
-      bottomTrailing: "right bottom",
-      leading: "left center",
-      trailing: "right center"
-    }[n] || "center center";
-  }
-  computeLayoutStyles(n, t) {
+  computeLayoutStyles(i, t) {
     const e = {};
-    if (n.frame) {
-      const i = n.frame, s = T(i);
-      if (Object.assign(e, s.cssProps), i.width !== void 0) {
-        const o = b(i.width);
-        o !== void 0 && !S(i.width) && !s.expandWidth && (e.width = o);
+    if (i.frame) {
+      const n = i.frame, r = L(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);
       }
-      if (i.height !== void 0) {
-        const o = b(i.height);
-        o !== void 0 && !S(i.height) && !s.expandHeight && (e.height = o);
+      if (n.height !== void 0) {
+        const o = u(n.height);
+        o !== void 0 && !m(n.height) && !r.expandHeight && (e.height = o);
       }
-      if (i.minWidth !== void 0) {
-        const o = b(i.minWidth);
+      if (n.minWidth !== void 0) {
+        const o = u(n.minWidth);
         o !== void 0 && (e.minWidth = o);
       }
-      if (i.maxWidth !== void 0 && !S(i.maxWidth)) {
-        const o = b(i.maxWidth);
+      if (n.maxWidth !== void 0 && !m(n.maxWidth)) {
+        const o = u(n.maxWidth);
         o !== void 0 && (e.maxWidth = o);
-      } else S(i.maxWidth) && (e.maxWidth = "none", e.flexGrow = "1 !important", e.flexShrink = "1 !important", e.flexBasis = "0% !important", e.alignSelf = "stretch !important");
-      if (i.minHeight !== void 0) {
-        const o = b(i.minHeight);
+      } else m(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);
         o !== void 0 && (e.minHeight = o);
       }
-      if (i.maxHeight !== void 0 && !S(i.maxHeight)) {
-        const o = b(i.maxHeight);
+      if (n.maxHeight !== void 0 && !m(n.maxHeight)) {
+        const o = u(n.maxHeight);
         o !== void 0 && (e.maxHeight = o);
-      } else S(i.maxHeight) && (e.maxHeight = "none", e.flexGrow = "1 !important", e.flexShrink = "1 !important", e.flexBasis = "0% !important", e.alignSelf = "stretch !important");
+      } else m(n.maxHeight) && (e.maxHeight = "none", e.flexGrow = "1 !important", e.flexShrink = "1 !important", e.flexBasis = "0% !important", e.alignSelf = "stretch !important");
     }
-    if (n.padding !== void 0)
-      if (typeof n.padding == "number")
-        e.padding = this.toCSSValue(n.padding);
+    if (i.padding !== void 0)
+      if (typeof i.padding == "number")
+        e.padding = this.toCSSValue(i.padding);
       else {
-        const i = n.padding;
-        i.top !== void 0 && (e.paddingTop = this.toCSSValue(i.top)), i.right !== void 0 && (e.paddingRight = this.toCSSValue(i.right)), i.bottom !== void 0 && (e.paddingBottom = this.toCSSValue(i.bottom)), i.left !== void 0 && (e.paddingLeft = this.toCSSValue(i.left));
+        const n = i.padding;
+        n.top !== void 0 && (e.paddingTop = this.toCSSValue(n.top)), n.right !== void 0 && (e.paddingRight = this.toCSSValue(n.right)), n.bottom !== void 0 && (e.paddingBottom = this.toCSSValue(n.bottom)), n.left !== void 0 && (e.paddingLeft = this.toCSSValue(n.left));
       }
-    if (n.margin !== void 0)
-      if (typeof n.margin == "number")
-        e.margin = this.toCSSValue(n.margin);
+    if (i.margin !== void 0)
+      if (typeof i.margin == "number")
+        e.margin = this.toCSSValue(i.margin);
       else {
-        const i = n.margin;
-        i.top !== void 0 && (e.marginTop = this.toCSSValue(i.top)), i.right !== void 0 && (e.marginRight = this.toCSSValue(i.right)), i.bottom !== void 0 && (e.marginBottom = this.toCSSValue(i.bottom)), i.left !== void 0 && (e.marginLeft = this.toCSSValue(i.left));
+        const n = i.margin;
+        n.top !== void 0 && (e.marginTop = this.toCSSValue(n.top)), n.right !== void 0 && (e.marginRight = this.toCSSValue(n.right)), n.bottom !== void 0 && (e.marginBottom = this.toCSSValue(n.bottom)), n.left !== void 0 && (e.marginLeft = this.toCSSValue(n.left));
       }
-    if (n.alignment)
-      switch (n.alignment) {
+    if (i.alignment)
+      switch (i.alignment) {
         case "leading":
           e.textAlign = "left", e.alignItems = "flex-start";
           break;
@@ -279,235 +222,173 @@ class D extends E {
           e.alignItems = "flex-end";
           break;
       }
-    if (n.layoutPriority !== void 0) {
-      const i = Number(n.layoutPriority);
-      i > 0 ? (e.flexShrink = "0", e.flexGrow = String(Math.max(1, i / 10)), e.zIndex = String(i), e.gridRowEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(i / 10))))}`, e.gridColumnEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(i / 10))))}`) : i === 0 ? (e.flexShrink = "1", e.flexGrow = "1") : (e.flexShrink = String(Math.abs(i)), e.flexGrow = "0", e.zIndex = String(i)), e && typeof e == "object" && "setProperty" in e && e.setProperty("--layout-priority", String(i));
+    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));
     }
-    if (n.offset, n.aspectRatio) {
-      const { ratio: i, contentMode: s } = n.aspectRatio;
-      i !== void 0 && (e.aspectRatio = typeof i == "number" ? String(i) : i, s === "fill" ? e.objectFit = "cover" : e.objectFit = "contain");
+    if (i.offset, i.aspectRatio) {
+      const { ratio: n, contentMode: r } = i.aspectRatio;
+      n !== void 0 && (e.aspectRatio = typeof n == "number" ? String(n) : n, r === "fill" ? e.objectFit = "cover" : e.objectFit = "contain");
     }
-    if (n.fixedSize) {
-      const { horizontal: i, vertical: s } = n.fixedSize;
-      i && (e.flexShrink = "0", e.width = "max-content"), s && (e.flexShrink = "0", e.height = "max-content");
+    if (i.fixedSize) {
+      const { horizontal: n, vertical: r } = i.fixedSize;
+      n && (e.flexShrink = "0", e.width = "max-content"), r && (e.flexShrink = "0", e.height = "max-content");
     }
     return e;
   }
 }
-class F extends E {
+class $ extends y {
   constructor() {
-    super(...arguments), y(this, "type", "appearance"), y(this, "priority", C.APPEARANCE);
+    super(...arguments), l(this, "type", "appearance"), l(this, "priority", g.APPEARANCE);
   }
-  apply(n, t) {
-    if (!n.element || !t.element)
+  apply(i, t) {
+    if (!i.element || !t.element)
       return;
-    const e = this.createStyleContext(t.componentId, t.element, []), i = this.resolveReactiveProps(this.properties, e);
-    this.applyAssetBasedStyles(t.element, i);
-    const s = this.computeAppearanceStyles(i);
-    this.applyStyles(t.element, s);
+    const e = this.createStyleContext(
+      t.componentId,
+      t.element,
+      []
+    ), n = this.resolveReactiveProps(
+      this.properties,
+      e
+    );
+    this.applyAssetBasedStyles(t.element, n);
+    const r = this.computeAppearanceStyles(n);
+    this.applyStyles(t.element, r), this.applyAttributes(t.element, n);
   }
   /**
    * Apply Asset-based styles with theme reactivity
    */
-  applyAssetBasedStyles(n, t) {
-    const e = L();
+  applyAssetBasedStyles(i, t) {
+    const e = E();
     t.foregroundColor && this.isAsset(t.foregroundColor) && h(() => {
       e();
-      const i = t.foregroundColor.resolve();
-      this.applyStyleChange(n, "color", i);
+      const n = t.foregroundColor.resolve();
+      this.applyStyleChange(i, "color", n);
     }), t.backgroundColor && this.isAsset(t.backgroundColor) && h(() => {
       e();
-      const i = t.backgroundColor.resolve();
-      this.applyStyleChange(n, "backgroundColor", i);
+      const n = t.backgroundColor.resolve();
+      this.applyStyleChange(i, "backgroundColor", n);
     }), t.border?.color && this.isAsset(t.border.color) && h(() => {
       e();
-      const i = t.border.color.resolve();
-      this.applyStyleChange(n, "borderColor", i);
+      const n = t.border.color.resolve();
+      this.applyStyleChange(i, "borderColor", n);
     });
   }
   /**
    * Check if a value is an Asset object (including Asset proxies)
    */
-  isAsset(n) {
-    return n != null && typeof n == "object" && "resolve" in n && typeof n.resolve == "function";
+  isAsset(i) {
+    return i != null && typeof i == "object" && "resolve" in i && typeof i.resolve == "function";
   }
-  computeAppearanceStyles(n) {
+  computeAppearanceStyles(i) {
     const t = {};
-    if (n.foregroundColor && !this.isAsset(n.foregroundColor) && (t.color = n.foregroundColor), n.backgroundColor && !this.isAsset(n.backgroundColor) && (t.backgroundColor = n.backgroundColor), n.opacity !== void 0 && (t.opacity = n.opacity), n.font) {
-      const i = n.font;
-      i.family && (typeof i.family == "object" && i.family !== null && "resolve" in i.family ? t.fontFamily = i.family.resolve() : t.fontFamily = i.family), i.size && (t.fontSize = this.toCSSValue(i.size)), i.weight && (t.fontWeight = String(i.weight)), i.style && (t.fontStyle = i.style);
-    }
-    if (n.cornerRadius !== void 0 && (t.borderRadius = this.toCSSValue(n.cornerRadius)), n.border) {
-      const i = n.border;
-      i.width !== void 0 && (t.borderWidth = this.toCSSValue(i.width)), i.color && !this.isAsset(i.color) && (t.borderColor = i.color), i.style && (t.borderStyle = i.style);
+    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.shadow) {
-      const i = n.shadow, s = i.x || 0, o = i.y || 0, r = i.radius || 0, a = i.color || "rgba(0,0,0,0.25)";
-      t.boxShadow = `${s}px ${o}px ${r}px ${a}`;
-    }
-    if (n.clipped && (t.overflow = "hidden"), n.clipShape) {
-      const { shape: i, parameters: s } = n.clipShape;
-      switch (i) {
-        case "circle":
-          t.clipPath = "circle(50%)";
-          break;
-        case "ellipse": {
-          const o = s?.radiusX || "50%", r = s?.radiusY || "50%";
-          t.clipPath = `ellipse(${o} ${r} at center)`;
-          break;
-        }
-        case "rect": {
-          const o = s?.inset || 0;
-          t.clipPath = `inset(${o}px)`;
-          break;
-        }
-        case "polygon": {
-          const o = s?.points || "0% 0%, 100% 0%, 100% 100%, 0% 100%";
-          t.clipPath = `polygon(${o})`;
-          break;
-        }
-      }
+    if (i.cornerRadius !== void 0 && (t.borderRadius = this.toCSSValue(i.cornerRadius)), i.border) {
+      const n = i.border;
+      n.width !== void 0 && (t.borderWidth = this.toCSSValue(n.width)), n.color && !this.isAsset(n.color) && (t.borderColor = n.color), n.style && (t.borderStyle = n.style);
     }
     const e = [];
-    return n.blur !== void 0 && e.push(`blur(${n.blur}px)`), n.brightness !== void 0 && e.push(`brightness(${n.brightness})`), n.contrast !== void 0 && e.push(`contrast(${n.contrast})`), n.saturation !== void 0 && e.push(`saturate(${n.saturation})`), n.hueRotation !== void 0 && e.push(`hue-rotate(${n.hueRotation}deg)`), n.grayscale !== void 0 && e.push(`grayscale(${n.grayscale})`), n.colorInvert !== void 0 && e.push(`invert(${n.colorInvert})`), e.length > 0 && (t.filter = e.join(" ")), t;
+    return i.blur !== void 0 && e.push(`blur(${i.blur}px)`), i.brightness !== void 0 && e.push(`brightness(${i.brightness})`), i.contrast !== void 0 && e.push(`contrast(${i.contrast})`), i.saturation !== void 0 && e.push(`saturate(${i.saturation})`), i.hueRotation !== void 0 && e.push(`hue-rotate(${i.hueRotation}deg)`), i.grayscale !== void 0 && e.push(`grayscale(${i.grayscale})`), i.colorInvert !== void 0 && e.push(`invert(${i.colorInvert})`), e.length > 0 && (t.filter = e.join(" ")), t;
+  }
+  /**
+   * Apply HTML attributes (ARIA, role, data attributes, etc.)
+   */
+  applyAttributes(i, t) {
+    if (!i) return;
+    const e = this.findComponentFromElement(i);
+    t.role !== void 0 && (i.setAttribute("role", String(t.role)), e?.props && (e.props.role = String(t.role))), t["aria-label"] !== void 0 && (i.setAttribute("aria-label", String(t["aria-label"])), e?.props && (e.props["aria-label"] = String(t["aria-label"]))), t["aria-live"] !== void 0 && (i.setAttribute("aria-live", String(t["aria-live"])), e?.props && (e.props["aria-live"] = String(t["aria-live"]))), t["aria-describedby"] !== void 0 && (i.setAttribute(
+      "aria-describedby",
+      String(t["aria-describedby"])
+    ), e?.props && (e.props["aria-describedby"] = String(t["aria-describedby"]))), t["aria-modal"] !== void 0 && (i.setAttribute("aria-modal", String(t["aria-modal"])), e?.props && (e.props["aria-modal"] = String(t["aria-modal"]))), t["aria-hidden"] !== void 0 && (i.setAttribute("aria-hidden", String(t["aria-hidden"])), e?.props && (e.props["aria-hidden"] = String(t["aria-hidden"]))), t.navigationTitle !== void 0 && (i.setAttribute(
+      "data-navigation-title",
+      String(t.navigationTitle)
+    ), e?.props && (e.props.navigationTitle = String(t.navigationTitle))), t.navigationBarHidden !== void 0 && (i.setAttribute(
+      "data-navigation-bar-hidden",
+      String(t.navigationBarHidden)
+    ), e?.props && (e.props.navigationBarHidden = t.navigationBarHidden), t.navigationBarHidden && (i.setAttribute("aria-hidden", "true"), e?.props && (e.props["aria-hidden"] = "true"))), t.navigationBarItems !== void 0 && (i.setAttribute(
+      "data-navigation-bar-items",
+      JSON.stringify(t.navigationBarItems)
+    ), e?.props && (e.props.navigationBarItems = t.navigationBarItems));
+  }
+  findComponentFromElement(i) {
+    return i._tachui_component || null;
   }
 }
-class Y extends E {
+class H extends y {
   constructor() {
-    super(...arguments), y(this, "type", "interaction"), y(this, "priority", C.INTERACTION);
+    super(...arguments), l(this, "type", "interaction"), l(this, "priority", g.INTERACTION);
   }
-  apply(n, t) {
+  apply(i, t) {
     if (!t.element) return;
     const e = this.properties;
-    e.onTap && t.element.addEventListener("click", e.onTap), e.onHover && (t.element.addEventListener("mouseenter", () => e.onHover(!0)), t.element.addEventListener("mouseleave", () => e.onHover(!1))), e.onMouseEnter && t.element.addEventListener("mouseenter", e.onMouseEnter), e.onMouseLeave && t.element.addEventListener("mouseleave", e.onMouseLeave), e.onMouseDown && t.element.addEventListener("mousedown", e.onMouseDown), e.onMouseUp && t.element.addEventListener("mouseup", e.onMouseUp), e.onDragStart && t.element.addEventListener("dragstart", e.onDragStart), e.onDragOver && t.element.addEventListener("dragover", e.onDragOver), e.onDragLeave && t.element.addEventListener("dragleave", e.onDragLeave), e.onDrop && t.element.addEventListener("drop", e.onDrop), e.onDoubleClick && t.element.addEventListener("dblclick", e.onDoubleClick), e.onContextMenu && t.element.addEventListener("contextmenu", e.onContextMenu), e.onFocus && (t.element.addEventListener("focus", () => e.onFocus(!0)), t.element.addEventListener("blur", () => e.onFocus(!1))), e.onBlur && t.element.addEventListener("blur", () => e.onBlur(!1)), e.onKeyPress && t.element.addEventListener("keypress", e.onKeyPress), e.onKeyDown && t.element.addEventListener("keydown", e.onKeyDown), e.onKeyUp && t.element.addEventListener("keyup", e.onKeyUp), e.onScroll && t.element.addEventListener("scroll", e.onScroll, { passive: !0 }), e.onWheel && t.element.addEventListener("wheel", e.onWheel, { passive: !1 }), e.onInput && t.element.addEventListener("input", e.onInput), e.onChange && t.element.addEventListener("change", (i) => {
-      const s = i.target, o = s.value || s.textContent || "";
-      e.onChange(o, i);
-    }), 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), e.onLongPressGesture && this.setupLongPressGesture(t.element, e.onLongPressGesture), e.keyboardShortcut && this.setupKeyboardShortcut(t.element, e.keyboardShortcut), e.focused !== void 0 && this.setupFocusManagement(t.element, e.focused), e.focusable && this.setupFocusable(t.element, e.focusable), e.onContinuousHover && this.setupContinuousHover(t.element, e.onContinuousHover), e.allowsHitTesting !== void 0 && this.setupHitTesting(t.element, e.allowsHitTesting);
-  }
-  // Phase 4 Advanced Gesture Methods
-  /**
-   * Setup long press gesture with timing and distance constraints
-   */
-  setupLongPressGesture(n, t) {
-    const e = t.minimumDuration ?? 500, i = t.maximumDistance ?? 10;
-    let s, o = null, r = !1;
-    const a = () => {
-      s && (clearTimeout(s), s = void 0), r && t.onPressingChanged && t.onPressingChanged(!1), r = !1, o = null;
-    }, l = (p) => {
-      const v = p;
-      o = { x: v.clientX, y: v.clientY }, r = !0, t.onPressingChanged && t.onPressingChanged(!0), s = window.setTimeout(() => {
-        r && o && (t.perform(), a());
-      }, e);
-    }, c = (p) => {
-      const v = p;
-      if (!o || !r) return;
-      Math.sqrt(
-        Math.pow(v.clientX - o.x, 2) + Math.pow(v.clientY - o.y, 2)
-      ) > i && a();
-    }, m = () => {
-      a();
-    }, f = () => {
-      a();
-    };
-    n.addEventListener("pointerdown", l), n.addEventListener("pointermove", c), n.addEventListener("pointerup", m), n.addEventListener("pointercancel", f), n._longPressCleanup = a;
-  }
-  /**
-   * Setup keyboard shortcut handling
-   */
-  setupKeyboardShortcut(n, t) {
-    const e = t.modifiers ?? [], i = (s) => {
-      const o = {
-        cmd: e.includes("cmd") || e.includes("meta"),
-        ctrl: e.includes("ctrl"),
-        shift: e.includes("shift"),
-        alt: e.includes("alt")
-      }, r = {
-        cmd: s.metaKey || s.ctrlKey,
-        // Handle both Mac (meta) and PC (ctrl)
-        ctrl: s.ctrlKey,
-        shift: s.shiftKey,
-        alt: s.altKey
-      }, a = s.key.toLowerCase() === t.key.toLowerCase(), l = Object.entries(o).every(
-        ([c, m]) => m === r[c]
+    if (e.onTap && t.element.addEventListener("click", e.onTap), e.onHover && (t.element.addEventListener("mouseenter", () => e.onHover(!0)), t.element.addEventListener("mouseleave", () => e.onHover(!1))), e.onMouseEnter && t.element.addEventListener("mouseenter", e.onMouseEnter), e.onMouseLeave && t.element.addEventListener("mouseleave", e.onMouseLeave), e.onMouseDown && t.element.addEventListener("mousedown", e.onMouseDown), e.onMouseUp && t.element.addEventListener("mouseup", e.onMouseUp), e.onDragStart && t.element.addEventListener("dragstart", e.onDragStart), e.onDragOver && t.element.addEventListener("dragover", e.onDragOver), e.onDragLeave && t.element.addEventListener("dragleave", e.onDragLeave), e.onDrop && t.element.addEventListener("drop", e.onDrop), e.onDoubleClick && t.element.addEventListener("dblclick", e.onDoubleClick), e.onContextMenu && t.element.addEventListener("contextmenu", e.onContextMenu), e.onFocus && (t.element.addEventListener("focus", () => e.onFocus(!0)), t.element.addEventListener("blur", () => e.onFocus(!1))), e.onBlur && t.element.addEventListener("blur", () => e.onBlur(!1)), e.onKeyPress && t.element.addEventListener("keypress", e.onKeyPress), e.onKeyDown && t.element.addEventListener("keydown", e.onKeyDown), e.onKeyUp && t.element.addEventListener("keyup", e.onKeyUp), e.onTouchStart && t.element.addEventListener("touchstart", e.onTouchStart, {
+      passive: !0
+    }), e.onTouchMove && t.element.addEventListener("touchmove", e.onTouchMove, {
+      passive: !0
+    }), e.onTouchEnd && t.element.addEventListener("touchend", e.onTouchEnd, {
+      passive: !0
+    }), e.onTouchCancel && t.element.addEventListener("touchcancel", e.onTouchCancel, {
+      passive: !0
+    }), e.onSwipeLeft || e.onSwipeRight) {
+      let n = 0, r = 0;
+      t.element.addEventListener(
+        "touchstart",
+        (o) => {
+          const s = o.touches[0];
+          n = s.clientX, r = s.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());
+        },
+        { passive: !0 }
       );
-      a && l && (s.preventDefault(), t.action());
-    };
-    document.addEventListener("keydown", i), n._keyboardShortcutCleanup = () => {
-      document.removeEventListener("keydown", i);
-    };
-  }
-  /**
-   * Setup focus management with reactive binding
-   */
-  setupFocusManagement(n, t) {
-    if (!(n instanceof HTMLElement)) return;
-    const e = n;
-    e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"), u(t) || d(t) ? h(() => {
-      t() ? e.focus() : e.blur();
-    }) : t && e.focus();
-  }
-  /**
-   * Setup focusable behavior
-   */
-  setupFocusable(n, t) {
-    if (!(n instanceof HTMLElement)) return;
-    const e = n;
-    t.isFocusable === !1 ? e.setAttribute("tabindex", "-1") : e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"), t.interactions?.includes("activate") && e.addEventListener("keydown", (i) => {
-      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), e.click());
-    }), t.interactions?.includes("edit") && (e.setAttribute("role", "textbox"), e.setAttribute("contenteditable", "true"));
-  }
-  /**
-   * Setup continuous hover tracking with coordinates
-   */
-  setupContinuousHover(n, t) {
-    const e = t.coordinateSpace ?? "local", i = (o) => {
-      const r = o;
-      let a, l;
-      if (e === "local") {
-        const c = n.getBoundingClientRect();
-        a = r.clientX - c.left, l = r.clientY - c.top;
-      } else
-        a = r.clientX, l = r.clientY;
-      t.perform({ x: a, y: l });
-    }, s = () => {
-      t.perform(null);
-    };
-    n.addEventListener("mousemove", i), n.addEventListener("mouseleave", s), n._continuousHoverCleanup = () => {
-      n.removeEventListener("mousemove", i), n.removeEventListener("mouseleave", s);
-    };
-  }
-  /**
-   * Setup hit testing control
-   */
-  setupHitTesting(n, t) {
-    n instanceof HTMLElement && (n.style.pointerEvents = t ? "" : "none");
+    }
+    e.onScroll && t.element.addEventListener("scroll", e.onScroll, {
+      passive: !0
+    }), 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);
   }
 }
-class j extends E {
+class I extends y {
   constructor() {
-    super(...arguments), y(this, "type", "animation"), y(this, "priority", C.ANIMATION);
+    super(...arguments), l(this, "type", "animation"), l(this, "priority", g.ANIMATION);
   }
-  apply(n, t) {
+  apply(i, t) {
     if (!t.element) return;
     const e = this.properties;
     if (e.transition) {
-      const i = e.transition, s = i.property || "all", o = i.duration || 300, r = i.easing || "ease", a = i.delay || 0;
-      t.element instanceof HTMLElement && (t.element.style.transition = `${s} ${o}ms ${r} ${a}ms`);
+      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`);
     }
     if (e.animation && t.element instanceof HTMLElement) {
-      const i = e.animation;
-      if (i.keyframes) {
-        const s = `tachui-animation-${t.componentId}-${Date.now()}`, o = this.createKeyframeRule(s, i.keyframes);
+      const n = e.animation;
+      if (n.keyframes) {
+        const r = `tachui-animation-${t.componentId}-${Date.now()}`, o = this.createKeyframeRule(
+          r,
+          n.keyframes
+        );
         this.addKeyframesToStylesheet(o);
-        const r = i.duration || 1e3, a = i.easing || "ease", l = i.iterations || 1, c = i.direction || "normal";
-        t.element.style.animation = `${s} ${r}ms ${a} ${l} ${c}`;
+        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}`;
       }
     }
-    if (e.transform && t.element instanceof HTMLElement && (u(e.transform) || d(e.transform) ? h(() => {
-      const i = e.transform();
-      t.element instanceof HTMLElement && (t.element.style.transform = i);
-    }) : t.element.style.transform = e.transform), e.rotationEffect && t.element instanceof HTMLElement) {
-      const { angle: i, anchor: s } = e.rotationEffect, r = {
+    if (e.transform && t.element instanceof HTMLElement && (p(e.transform) || v(e.transform) ? h(() => {
+      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 = {
         center: "50% 50%",
         top: "50% 0%",
         topLeading: "0% 0%",
@@ -517,97 +398,21 @@ class j extends E {
         bottomTrailing: "100% 100%",
         leading: "0% 50%",
         trailing: "100% 50%"
-      }[s || "center"] || "50% 50%", a = `rotate(${i}deg)`;
-      if (u(i) || d(i))
-        h(() => {
-          const c = `rotate(${typeof i == "function" ? i() : i}deg)`;
-          if (t.element instanceof HTMLElement) {
-            t.element.style.transformOrigin = r;
-            const f = (t.element.style.transform || "").split(" ").filter((v) => v && !v.startsWith("rotate(")).join(" "), p = f ? `${f} ${c}` : c;
-            t.element.style.transform = p;
-          }
-        });
-      else if (t.element instanceof HTMLElement) {
-        t.element.style.transformOrigin = r;
-        const c = (t.element.style.transform || "").split(" ").filter((f) => f && !f.startsWith("rotate(")).join(" "), m = c ? `${c} ${a}` : a;
-        t.element.style.transform = m;
-      }
+      }[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;
     }
-    e.overlay && t.element instanceof HTMLElement && this.applyOverlay(t.element, e.overlay, t);
-  }
-  applyOverlay(n, t, e) {
-    const { content: i, alignment: s = "center" } = t;
-    (n.style.position === "" || n.style.position === "static") && (n.style.position = "relative");
-    const o = document.createElement("div");
-    o.style.position = "absolute", o.style.pointerEvents = "none";
-    const r = this.getOverlayAlignment(s);
-    if (Object.assign(o.style, r), typeof i == "function") {
-      const a = i();
-      if (a && typeof a.render == "function") {
-        const l = a.render();
-        l.element && o.appendChild(l.element);
-      }
-    } else if (i && typeof i.render == "function") {
-      const a = i.render();
-      a.element && o.appendChild(a.element);
-    } else i instanceof HTMLElement && o.appendChild(i);
-    n.appendChild(o);
-  }
-  getOverlayAlignment(n) {
-    const t = {
-      center: {
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)"
-      },
-      top: {
-        top: "0",
-        left: "50%",
-        transform: "translateX(-50%)"
-      },
-      bottom: {
-        bottom: "0",
-        left: "50%",
-        transform: "translateX(-50%)"
-      },
-      leading: {
-        top: "50%",
-        left: "0",
-        transform: "translateY(-50%)"
-      },
-      trailing: {
-        top: "50%",
-        right: "0",
-        transform: "translateY(-50%)"
-      },
-      topLeading: {
-        top: "0",
-        left: "0"
-      },
-      topTrailing: {
-        top: "0",
-        right: "0"
-      },
-      bottomLeading: {
-        bottom: "0",
-        left: "0"
-      },
-      bottomTrailing: {
-        bottom: "0",
-        right: "0"
-      }
-    };
-    return t[n] || t.center;
   }
-  createKeyframeRule(n, t) {
-    let e = `@keyframes ${n} {
+  createKeyframeRule(i, t) {
+    let e = `@keyframes ${i} {
 `;
-    for (const [i, s] of Object.entries(t)) {
-      e += `  ${i} {
+    for (const [n, r] of Object.entries(t)) {
+      e += `  ${n} {
 `;
-      for (const [o, r] of Object.entries(s)) {
-        const a = this.toCSSProperty(o);
-        e += `    ${a}: ${r};
+      for (const [o, a] of Object.entries(r)) {
+        const s = this.toCSSProperty(o);
+        e += `    ${s}: ${a};
 `;
       }
       e += `  }
@@ -615,131 +420,68 @@ class j extends E {
     }
     return e += "}", e;
   }
-  addKeyframesToStylesheet(n) {
-    let t = document.querySelector("#tachui-animations");
-    t || (t = document.createElement("style"), t.id = "tachui-animations", document.head.appendChild(t)), t.appendChild(document.createTextNode(n));
+  addKeyframesToStylesheet(i) {
+    let t = document.querySelector(
+      "#tachui-animations"
+    );
+    t || (t = document.createElement("style"), t.id = "tachui-animations", document.head.appendChild(t)), t.appendChild(document.createTextNode(i));
   }
 }
-class X extends E {
+class R extends y {
   constructor() {
-    super(...arguments), y(this, "type", "lifecycle"), y(this, "priority", C.CUSTOM), y(this, "activeAbortController");
+    super(...arguments), l(this, "type", "lifecycle"), l(this, "priority", g.CUSTOM), l(this, "activeAbortController");
   }
-  apply(n, t) {
+  apply(i, t) {
     if (!t.element) return;
     const e = this.properties;
-    this.activeAbortController && this.activeAbortController.abort(), (e.onAppear || e.onDisappear) && this.setupLifecycleObserver(t.element, e), e.task && this.setupTask(t, e.task), e.refreshable && this.setupRefreshable(t.element, e.refreshable);
+    this.activeAbortController && this.activeAbortController.abort(), e.task && this.setupTask(t, e.task), (e.onAppear || e.onDisappear) && this.setupViewportObserver(t, e);
   }
-  setupLifecycleObserver(n, t) {
-    const e = new IntersectionObserver(
-      (i) => {
-        i.forEach((s) => {
-          s.isIntersecting && t.onAppear ? t.onAppear() : !s.isIntersecting && t.onDisappear && t.onDisappear();
-        });
-      },
-      {
-        threshold: 0.1,
-        // Trigger when 10% of element is visible
-        rootMargin: "10px"
-        // Add some margin for better UX
-      }
-    );
-    e.observe(n), this.addCleanup(() => {
-      e.disconnect();
-    });
-  }
-  setupTask(n, t) {
+  setupTask(i, t) {
     if (!t) return;
     this.activeAbortController = new AbortController();
     const { signal: e } = this.activeAbortController;
     (async () => {
       try {
         if (e.aborted) return;
-        const s = t.operation();
-        s instanceof Promise && await s;
-      } catch (s) {
+        const r = t.operation();
+        r instanceof Promise && await r;
+      } catch (r) {
         if (e.aborted) return;
-        console.error("TachUI Task Error:", s);
+        console.error("TachUI Task Error:", r);
       }
     })(), this.addCleanup(() => {
       this.activeAbortController && this.activeAbortController.abort();
     });
   }
-  setupRefreshable(n, t) {
-    if (!t) return;
-    let e = !1, i = 0, s = 0;
-    const o = 70, r = document.createElement("div");
-    if (r.style.cssText = `
-      position: absolute;
-      top: -50px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 30px;
-      height: 30px;
-      border: 2px solid #ccc;
-      border-top: 2px solid #007AFF;
-      border-radius: 50%;
-      animation: tachui-spin 1s linear infinite;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-      z-index: 1000;
-    `, !document.querySelector("#tachui-refresh-styles")) {
-      const f = document.createElement("style");
-      f.id = "tachui-refresh-styles", f.textContent = `
-        @keyframes tachui-spin {
-          0% { transform: translateX(-50%) rotate(0deg); }
-          100% { transform: translateX(-50%) rotate(360deg); }
-        }
-      `, document.head.appendChild(f);
-    }
-    const a = n.parentElement || n;
-    a instanceof HTMLElement && (a.style.position = "relative", a.appendChild(r));
-    const l = (f) => {
-      e || (s = f.touches[0].clientY);
-    }, c = (f) => {
-      if (e) return;
-      const p = f.touches[0].clientY;
-      if (i = Math.max(0, p - s), i > 20) {
-        f.preventDefault();
-        const v = Math.min(i / o, 1);
-        r.style.opacity = String(v * 0.8), r.style.top = `${-50 + v * 20}px`;
-      }
-    }, m = async () => {
-      if (e || i < o) {
-        r.style.opacity = "0", r.style.top = "-50px", i = 0;
-        return;
-      }
-      e = !0, r.style.opacity = "1", r.style.top = "10px";
-      try {
-        await t.onRefresh();
-      } catch (f) {
-        console.error("TachUI Refresh Error:", f);
-      } finally {
-        e = !1, r.style.opacity = "0", r.style.top = "-50px", i = 0;
-      }
-    };
-    n.addEventListener("touchstart", l, { passive: !1 }), n.addEventListener("touchmove", c, { passive: !1 }), n.addEventListener("touchend", m), this.addCleanup(() => {
-      n.removeEventListener("touchstart", l), n.removeEventListener("touchmove", c), n.removeEventListener("touchend", m), r.parentElement && r.parentElement.removeChild(r);
+  setupViewportObserver(i, t) {
+    if (!i.element) return;
+    const e = new IntersectionObserver((n) => {
+      n.forEach((r) => {
+        r.isIntersecting && t.onAppear ? t.onAppear() : !r.isIntersecting && t.onDisappear && t.onDisappear();
+      });
+    });
+    e.observe(i.element), this.addCleanup(() => {
+      e.disconnect();
     });
   }
-  addCleanup(n) {
-    this.properties._cleanupFunctions || (this.properties._cleanupFunctions = []), this.properties._cleanupFunctions.push(n);
+  addCleanup(i) {
+    this.properties._cleanupFunctions || (this.properties._cleanupFunctions = []), this.properties._cleanupFunctions.push(i);
   }
 }
-class _ extends E {
+class D extends y {
   constructor() {
-    super(...arguments), y(this, "type", "resizable"), y(this, "priority", C.APPEARANCE);
+    super(...arguments), l(this, "type", "resizable"), l(this, "priority", g.APPEARANCE);
   }
-  apply(n, t) {
+  apply(i, t) {
     t.element && t.element instanceof HTMLImageElement && (t.element.style.objectFit = "fill");
   }
 }
 export {
-  j as AnimationModifier,
-  F as AppearanceModifier,
-  E as BaseModifier,
-  Y as InteractionModifier,
-  D as LayoutModifier,
-  X as LifecycleModifier,
-  _ as ResizableModifier
+  I as AnimationModifier,
+  $ as AppearanceModifier,
+  y as BaseModifier,
+  H as InteractionModifier,
+  k as LayoutModifier,
+  R as LifecycleModifier,
+  D as ResizableModifier
 };
-//# sourceMappingURL=base.js.map