@tachui/core 0.7.1-alpha → 0.8.1-alpha

package/dist/modifiers/base.d.ts

@@ -62,12 +62,7 @@ export declare class LayoutModifier extends BaseModifier {
     readonly type = "layout";
     readonly priority = ModifierPriority.LAYOUT;
     apply(node: DOMNode, context: ModifierContext): DOMNode | undefined;
-    private applyOffsetTransform;
-    private applyAspectRatio;
-    private applyScaleTransform;
     private applyAbsolutePosition;
-    private applyZIndex;
-    private getTransformOrigin;
     private computeLayoutStyles;
 }
 /**
@@ -86,6 +81,11 @@ export declare class AppearanceModifier extends BaseModifier {
      */
     private isAsset;
     private computeAppearanceStyles;
+    /**
+     * Apply HTML attributes (ARIA, role, data attributes, etc.)
+     */
+    private applyAttributes;
+    private findComponentFromElement;
 }
 /**
  * Interaction modifier for events and accessibility
@@ -94,30 +94,6 @@ export declare class InteractionModifier extends BaseModifier {
     readonly type = "interaction";
     readonly priority = ModifierPriority.INTERACTION;
     apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
-    /**
-     * Setup long press gesture with timing and distance constraints
-     */
-    private setupLongPressGesture;
-    /**
-     * Setup keyboard shortcut handling
-     */
-    private setupKeyboardShortcut;
-    /**
-     * Setup focus management with reactive binding
-     */
-    private setupFocusManagement;
-    /**
-     * Setup focusable behavior
-     */
-    private setupFocusable;
-    /**
-     * Setup continuous hover tracking with coordinates
-     */
-    private setupContinuousHover;
-    /**
-     * Setup hit testing control
-     */
-    private setupHitTesting;
 }
 /**
  * Animation modifier for transitions and animations
@@ -126,8 +102,6 @@ export declare class AnimationModifier extends BaseModifier {
     readonly type = "animation";
     readonly priority = ModifierPriority.ANIMATION;
     apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
-    private applyOverlay;
-    private getOverlayAlignment;
     private createKeyframeRule;
     private addKeyframesToStylesheet;
 }
@@ -139,9 +113,8 @@ export declare class LifecycleModifier extends BaseModifier {
     readonly priority = ModifierPriority.CUSTOM;
     private activeAbortController?;
     apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
-    private setupLifecycleObserver;
     private setupTask;
-    private setupRefreshable;
+    private setupViewportObserver;
     private addCleanup;
 }
 /**

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

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

package/dist/modifiers/base.js

@@ -0,0 +1,487 @@
+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(i, t) {
+    const e = {};
+    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(i, t, e) {
+    if (i instanceof HTMLElement) {
+      const n = this.toCSSProperty(t);
+      if (p(e) || v(e))
+        h(() => {
+          const r = e(), o = String(r);
+          if (o.includes("!important")) {
+            const a = o.replace(/\s*!important\s*$/, "").trim();
+            i.style.setProperty(n, a, "important");
+          } else
+            i.style.setProperty(n, o);
+        });
+      else {
+        const r = String(e);
+        if (r.includes("!important")) {
+          const o = r.replace(/\s*!important\s*$/, "").trim();
+          i.style.setProperty(n, o, "important");
+        } else
+          i.style.setProperty(n, r);
+      }
+    }
+  }
+  /**
+   * Convert camelCase property to CSS kebab-case
+   */
+  toCSSProperty(i) {
+    return i.replace(/([A-Z])/g, "-$1").toLowerCase();
+  }
+  /**
+   * Convert value to CSS value string
+   */
+  toCSSValue(i) {
+    return typeof i == "number" ? `${i}px` : String(i);
+  }
+  /**
+   * Convert value to CSS value string with property-specific handling
+   */
+  toCSSValueForProperty(i, t) {
+    return typeof t == "number" ? [
+      "opacity",
+      "z-index",
+      "line-height",
+      "flex-grow",
+      "flex-shrink",
+      "order",
+      "column-count",
+      "font-weight"
+    ].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(i), String(t));
+  }
+  /**
+   * Apply multiple CSS properties to an element with reactive support
+   */
+  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;
+            });
+          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;
+          }
+        }
+    }
+  }
+  /**
+   * Add CSS classes to an element
+   */
+  addClasses(i, t) {
+    i instanceof HTMLElement && i.classList.add(...t);
+  }
+  /**
+   * Remove CSS classes from an element
+   */
+  removeClasses(i, t) {
+    i instanceof HTMLElement && i.classList.remove(...t);
+  }
+  /**
+   * Create a style computation context
+   */
+  createStyleContext(i, t, e) {
+    return {
+      componentId: i,
+      element: t,
+      modifiers: e,
+      signals: /* @__PURE__ */ new Set(),
+      cleanup: []
+    };
+  }
+}
+class k extends y {
+  constructor() {
+    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);
+  }
+  // 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);
+  }
+  computeLayoutStyles(i, t) {
+    const e = {};
+    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 (n.height !== void 0) {
+        const o = u(n.height);
+        o !== void 0 && !m(n.height) && !r.expandHeight && (e.height = o);
+      }
+      if (n.minWidth !== void 0) {
+        const o = u(n.minWidth);
+        o !== void 0 && (e.minWidth = o);
+      }
+      if (n.maxWidth !== void 0 && !m(n.maxWidth)) {
+        const o = u(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");
+      if (n.minHeight !== void 0) {
+        const o = u(n.minHeight);
+        o !== void 0 && (e.minHeight = o);
+      }
+      if (n.maxHeight !== void 0 && !m(n.maxHeight)) {
+        const o = u(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");
+    }
+    if (i.padding !== void 0)
+      if (typeof i.padding == "number")
+        e.padding = this.toCSSValue(i.padding);
+      else {
+        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 (i.margin !== void 0)
+      if (typeof i.margin == "number")
+        e.margin = this.toCSSValue(i.margin);
+      else {
+        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 (i.alignment)
+      switch (i.alignment) {
+        case "leading":
+          e.textAlign = "left", e.alignItems = "flex-start";
+          break;
+        case "center":
+          e.textAlign = "center", e.alignItems = "center";
+          break;
+        case "trailing":
+          e.textAlign = "right", e.alignItems = "flex-end";
+          break;
+        case "top":
+          e.alignItems = "flex-start";
+          break;
+        case "bottom":
+          e.alignItems = "flex-end";
+          break;
+      }
+    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 (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 (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 $ extends y {
+  constructor() {
+    super(...arguments), l(this, "type", "appearance"), l(this, "priority", g.APPEARANCE);
+  }
+  apply(i, t) {
+    if (!i.element || !t.element)
+      return;
+    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(i, t) {
+    const e = E();
+    t.foregroundColor && this.isAsset(t.foregroundColor) && h(() => {
+      e();
+      const n = t.foregroundColor.resolve();
+      this.applyStyleChange(i, "color", n);
+    }), t.backgroundColor && this.isAsset(t.backgroundColor) && h(() => {
+      e();
+      const n = t.backgroundColor.resolve();
+      this.applyStyleChange(i, "backgroundColor", n);
+    }), t.border?.color && this.isAsset(t.border.color) && h(() => {
+      e();
+      const n = t.border.color.resolve();
+      this.applyStyleChange(i, "borderColor", n);
+    });
+  }
+  /**
+   * Check if a value is an Asset object (including Asset proxies)
+   */
+  isAsset(i) {
+    return i != null && typeof i == "object" && "resolve" in i && typeof i.resolve == "function";
+  }
+  computeAppearanceStyles(i) {
+    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 (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 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 H extends y {
+  constructor() {
+    super(...arguments), l(this, "type", "interaction"), l(this, "priority", g.INTERACTION);
+  }
+  apply(i, t) {
+    if (!t.element) return;
+    const e = this.properties;
+    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 }
+      );
+    }
+    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 I extends y {
+  constructor() {
+    super(...arguments), l(this, "type", "animation"), l(this, "priority", g.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`);
+    }
+    if (e.animation && t.element instanceof HTMLElement) {
+      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 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 && (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%",
+        topTrailing: "100% 0%",
+        bottom: "50% 100%",
+        bottomLeading: "0% 100%",
+        bottomTrailing: "100% 100%",
+        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;
+    }
+  }
+  createKeyframeRule(i, t) {
+    let e = `@keyframes ${i} {
+`;
+    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};
+`;
+      }
+      e += `  }
+`;
+    }
+    return e += "}", e;
+  }
+  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 R extends y {
+  constructor() {
+    super(...arguments), l(this, "type", "lifecycle"), l(this, "priority", g.CUSTOM), l(this, "activeAbortController");
+  }
+  apply(i, t) {
+    if (!t.element) return;
+    const e = this.properties;
+    this.activeAbortController && this.activeAbortController.abort(), e.task && this.setupTask(t, e.task), (e.onAppear || e.onDisappear) && this.setupViewportObserver(t, e);
+  }
+  setupTask(i, t) {
+    if (!t) return;
+    this.activeAbortController = new AbortController();
+    const { signal: e } = this.activeAbortController;
+    (async () => {
+      try {
+        if (e.aborted) return;
+        const r = t.operation();
+        r instanceof Promise && await r;
+      } catch (r) {
+        if (e.aborted) return;
+        console.error("TachUI Task Error:", r);
+      }
+    })(), this.addCleanup(() => {
+      this.activeAbortController && this.activeAbortController.abort();
+    });
+  }
+  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(i) {
+    this.properties._cleanupFunctions || (this.properties._cleanupFunctions = []), this.properties._cleanupFunctions.push(i);
+  }
+}
+class D extends y {
+  constructor() {
+    super(...arguments), l(this, "type", "resizable"), l(this, "priority", g.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
+};