@tachui/core 0.7.1-alpha → 0.8.0-alpha

package/dist/concatenated-component-ByPl3_FF.js

@@ -0,0 +1,2933 @@
+import { BaseModifier as O, AnimationModifier as m, AppearanceModifier as d, LifecycleModifier as w, InteractionModifier as l, LayoutModifier as g, ResizableModifier as Q } from "./modifiers/base.js";
+import { ModifierPriority as ee } from "./modifiers/types.js";
+import { J as S, i as E, k as q } from "./scheduler-BKeqwrYE.js";
+import { c as y } from "./effect-B9Knft0b.js";
+const te = {
+  center: "center",
+  top: "top",
+  bottom: "bottom",
+  leading: "left",
+  trailing: "right"
+};
+function F(i) {
+  return typeof i == "string" ? i : i.resolve();
+}
+function C(i, e) {
+  return i.map((t, r) => {
+    const n = F(t);
+    return e && e[r] !== void 0 ? `${n} ${e[r]}%` : n;
+  }).join(", ");
+}
+function M(i) {
+  return Array.isArray(i) ? `${i[0]}% ${i[1]}%` : te[i] || i;
+}
+function ie(i, e, t) {
+  if (t !== void 0)
+    return `${t}deg`;
+  const r = `${i}-${e}`;
+  return {
+    "top-bottom": "to bottom",
+    "bottom-top": "to top",
+    "leading-trailing": "to right",
+    "trailing-leading": "to left",
+    "topLeading-bottomTrailing": "to bottom right",
+    "topTrailing-bottomLeading": "to bottom left",
+    "bottomLeading-topTrailing": "to top right",
+    "bottomTrailing-topLeading": "to top left"
+  }[r] || "to bottom";
+}
+function re(i) {
+  const e = ie(i.startPoint, i.endPoint, i.angle), t = C(i.colors, i.stops);
+  return `linear-gradient(${e}, ${t})`;
+}
+function se(i) {
+  const e = i.shape || "circle", t = M(i.center), r = C(i.colors, i.stops);
+  let n;
+  return e === "circle" ? n = `${i.endRadius}px` : n = `${i.endRadius}px ${i.endRadius}px`, `radial-gradient(${e} ${n} at ${t}, ${r})`;
+}
+function ne(i) {
+  const e = M(i.center), t = `from ${i.startAngle}deg`, r = C(i.colors, i.stops);
+  return `conic-gradient(${t} at ${e}, ${r})`;
+}
+function oe(i) {
+  const e = M(i.center), t = `from ${i.startAngle}deg`, r = C(i.colors, i.stops);
+  return `conic-gradient(${t} at ${e}, ${r})`;
+}
+function ae(i) {
+  const e = i.colors.map((t, r) => {
+    const n = F(t), s = i.colorStops[r] || `${r * 10}px`;
+    return `${n} ${s}`;
+  }).join(", ");
+  return `repeating-linear-gradient(${i.direction}, ${e})`;
+}
+function ce(i) {
+  const e = i.shape || "circle", t = M(i.center), r = i.colors.map((n, s) => {
+    const o = F(n), c = i.colorStops[s] || `${s * 10}px`;
+    return `${o} ${c}`;
+  }).join(", ");
+  return `repeating-radial-gradient(${e} at ${t}, ${r})`;
+}
+function de(i) {
+  const e = M(i.center), t = C(i.colors, i.stops);
+  return `radial-gradient(ellipse ${i.radiusX}px ${i.radiusY}px at ${e}, ${t})`;
+}
+function ue(i) {
+  switch (i.type) {
+    case "linear":
+      return re(i.options);
+    case "radial":
+      return se(i.options);
+    case "angular":
+      return ne(i.options);
+    case "conic":
+      return oe(i.options);
+    case "repeating-linear":
+      return ae(i.options);
+    case "repeating-radial":
+      return ce(i.options);
+    case "elliptical":
+      return de(i.options);
+    default:
+      throw new Error(`Unknown gradient type: ${i.type}`);
+  }
+}
+var le = Object.defineProperty, pe = (i, e, t) => e in i ? le(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, R = (i, e, t) => pe(i, typeof e != "symbol" ? e + "" : e, t);
+class G extends O {
+  constructor(e) {
+    super(e), R(this, "type", "background"), R(this, "priority", ee.APPEARANCE), R(this, "cleanupFunctions", []);
+  }
+  apply(e, t) {
+    if (!t.element) return;
+    this.cleanupFunctions.forEach((n) => n()), this.cleanupFunctions = [];
+    const r = this.properties.background;
+    if (this.isStateGradient(r) && t.element instanceof HTMLElement)
+      this.setupStateGradient(
+        t.element,
+        r
+      );
+    else if (this.isStateGradient(r)) {
+      const n = this.computeBackgroundStyles(this.properties);
+      this.applyStyles(t.element, n);
+    } else {
+      const n = this.computeBackgroundStyles(this.properties);
+      this.applyStyles(t.element, n);
+    }
+  }
+  isStateGradient(e) {
+    return e && typeof e == "object" && "default" in e && !("type" in e) && !("resolve" in e);
+  }
+  setupStateGradient(e, t) {
+    const r = this.resolveBackground(t.default);
+    if (e.style.background = r, t.animation) {
+      const {
+        duration: n = 200,
+        easing: s = "ease-out",
+        delay: o = 0
+      } = t.animation;
+      e.style.cssText += `transition: background ${n}ms ${s} ${o}ms`;
+    }
+    t.hover && this.addHoverListeners(e, t), t.active && this.addActiveListeners(e, t), t.focus && this.addFocusListeners(e, t), t.disabled && this.addDisabledObserver(e, t);
+  }
+  addHoverListeners(e, t) {
+    const r = () => {
+      this.isDisabled(e) || (e.style.background = this.resolveBackground(t.hover));
+    }, n = () => {
+      const s = this.getHighestPriorityState(e, t);
+      e.style.background = this.resolveBackground(s);
+    };
+    e.addEventListener("mouseenter", r), e.addEventListener("mouseleave", n), this.cleanupFunctions.push(() => {
+      e.removeEventListener("mouseenter", r), e.removeEventListener("mouseleave", n);
+    });
+  }
+  addActiveListeners(e, t) {
+    const r = () => {
+      this.isDisabled(e) || (e.style.background = this.resolveBackground(t.active));
+    }, n = () => {
+      const s = this.getMouseInteractionState(e, t);
+      e.style.background = this.resolveBackground(s);
+    };
+    e.addEventListener("mousedown", r), e.addEventListener("mouseup", n), this.cleanupFunctions.push(() => {
+      e.removeEventListener("mousedown", r), e.removeEventListener("mouseup", n);
+    });
+  }
+  addFocusListeners(e, t) {
+    const r = () => {
+      this.isDisabled(e) || (e.style.background = this.resolveBackground(t.focus));
+    }, n = () => {
+      if (!this.isDisabled(e)) {
+        const s = this.getHighestPriorityState(e, t);
+        e.style.background = this.resolveBackground(s);
+      }
+    };
+    e.addEventListener("focus", r), e.addEventListener("blur", n), this.cleanupFunctions.push(() => {
+      e.removeEventListener("focus", r), e.removeEventListener("blur", n);
+    });
+  }
+  addDisabledObserver(e, t) {
+    const r = new MutationObserver(() => {
+      if (this.isDisabled(e))
+        e.style.background = this.resolveBackground(
+          t.disabled
+        );
+      else {
+        const n = this.getHighestPriorityState(e, t);
+        e.style.background = this.resolveBackground(n);
+      }
+    });
+    r.observe(e, {
+      attributes: !0,
+      attributeFilter: ["disabled"]
+    }), this.cleanupFunctions.push(() => {
+      r.disconnect();
+    });
+  }
+  getMouseInteractionState(e, t) {
+    const r = this.isDisabled(e), n = e.matches(":focus"), s = e.matches(":hover");
+    return r && t.disabled ? t.disabled : s && t.hover ? t.hover : n && t.focus ? t.focus : t.default;
+  }
+  getHighestPriorityState(e, t) {
+    const r = this.isDisabled(e), n = e.matches(":focus"), s = e.matches(":hover");
+    return r && t.disabled ? t.disabled : n && t.focus ? t.focus : s && t.hover ? t.hover : t.default;
+  }
+  isDisabled(e) {
+    const t = e.hasAttribute("disabled");
+    return t === !1 ? !1 : t || e.matches && e.matches(":disabled");
+  }
+  resolveBackground(e) {
+    return e == null ? "transparent" : typeof e == "object" && e !== null && "type" in e && "options" in e ? ue(e) : typeof e == "object" && e !== null && "resolve" in e ? e.resolve() : String(e);
+  }
+  computeBackgroundStyles(e) {
+    const t = {};
+    if (e.background !== void 0)
+      if (this.isStateGradient(e.background)) {
+        const r = e.background;
+        t.background = this.resolveBackground(r.default);
+      } else
+        t.background = this.resolveBackground(
+          e.background
+        );
+    return t;
+  }
+}
+var he = Object.defineProperty, fe = (i, e, t) => e in i ? he(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, W = (i, e, t) => fe(i, typeof e != "symbol" ? e + "" : e, t);
+class L extends O {
+  // Very low priority so raw CSS doesn't override specific modifiers
+  constructor(e) {
+    const t = {};
+    for (const [r, n] of Object.entries(e))
+      typeof n == "function" && "peek" in n ? t[r] = n.peek() : t[r] = n;
+    super(t), W(this, "type", "css"), W(this, "priority", 5);
+  }
+  apply(e, t) {
+    if (!t.element) return;
+    const r = this.computeCSSStyles(this.properties);
+    this.applyStyles(t.element, r);
+  }
+  computeCSSStyles(e) {
+    const t = {};
+    for (const [r, n] of Object.entries(e))
+      if (n !== void 0) {
+        const s = this.toCSSProperty(r);
+        t[s] = this.toCSSValue(n);
+      }
+    return t;
+  }
+}
+function me(i) {
+  return new L(i);
+}
+function ge(i, e) {
+  return new L({ [i]: e });
+}
+function ye(i, e) {
+  const t = i.startsWith("--") ? i : `--${i}`;
+  return new L({ [t]: e });
+}
+function be(i, e, t) {
+  const r = i.charAt(0).toUpperCase() + i.slice(1), n = `-${i.toLowerCase()}-${e}`, s = r + e.charAt(0).toUpperCase() + e.slice(1);
+  return new L({
+    [n]: t,
+    [s]: t
+  });
+}
+var ve = Object.defineProperty, we = (i, e, t) => e in i ? ve(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, V = (i, e, t) => we(i, typeof e != "symbol" ? e + "" : e, t);
+class $ {
+  /**
+   * Apply basic sanitization to HTML content
+   * Removes dangerous patterns and restricts to allowed elements/attributes
+   */
+  static sanitize(e, t = {}) {
+    if (!e || typeof e != "string")
+      return "";
+    let r = e;
+    for (const n of this.DANGEROUS_PATTERNS)
+      r = r.replace(n, "");
+    if (t.validateDOM !== !1 && (r = this.validateDOMStructure(r, t)), t.customPatterns)
+      for (const n of t.customPatterns)
+        r = r.replace(n, "");
+    return r.trim();
+  }
+  /**
+   * Validate DOM structure and attributes using DOMParser
+   */
+  static validateDOMStructure(e, t) {
+    try {
+      const s = new DOMParser().parseFromString(`<div>${e}</div>`, "text/html").body.firstChild;
+      return s ? (this.cleanElement(s, t), s.innerHTML) : "";
+    } catch (r) {
+      return console.warn("BasicSanitizer: DOM validation failed, using pattern-based sanitization only", r), e;
+    }
+  }
+  /**
+   * Recursively clean element and its children
+   */
+  static cleanElement(e, t) {
+    const r = e.tagName.toLowerCase();
+    if (!(t.allowedTags || this.ALLOWED_TAGS).includes(r)) {
+      const u = e.textContent || "";
+      if (u.trim() && e.parentNode) {
+        const h = e.ownerDocument.createTextNode(u);
+        e.parentNode.insertBefore(h, e);
+      }
+      e.remove();
+      return;
+    }
+    const s = this.getAllowedAttributesForTag(r, t), o = [];
+    for (let u = 0; u < e.attributes.length; u++) {
+      const h = e.attributes[u];
+      s.includes(h.name) && this.isAttributeValueSafe(h.name, h.value) || o.push(h.name);
+    }
+    o.forEach((u) => e.removeAttribute(u)), Array.from(e.children).forEach((u) => this.cleanElement(u, t));
+  }
+  /**
+   * Get allowed attributes for a specific tag
+   */
+  static getAllowedAttributesForTag(e, t) {
+    const r = t.allowedAttributes || this.ALLOWED_ATTRIBUTES, n = r["*"] || [], s = r[e] || [];
+    return [...n, ...s];
+  }
+  /**
+   * Check if attribute value is safe
+   */
+  static isAttributeValueSafe(e, t) {
+    return ["href", "src", "action"].includes(e) ? this.isUrlSafe(t) : !/javascript:/i.test(t);
+  }
+  /**
+   * Validate URL safety
+   */
+  static isUrlSafe(e) {
+    if (!e || e.startsWith("/") || e.startsWith("./") || e.startsWith("#"))
+      return !0;
+    try {
+      const t = new URL(e);
+      return ["http:", "https:", "mailto:", "tel:", "ftp:"].includes(t.protocol);
+    } catch {
+      return !1;
+    }
+  }
+}
+V($, "DANGEROUS_PATTERNS", [
+  // Script tags (including nested/malformed ones)
+  /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+  /<[^>]*<script[^>]*>/gi,
+  // Nested script tags
+  /script>/gi,
+  // Catch any remaining script closings
+  // Event handlers (onclick, onload, etc.)
+  /\s*on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi,
+  // JavaScript URLs
+  /(?:href|src)\s*=\s*["']?javascript:[^"'\s>]*/gi,
+  // Data URLs with scripts (basic detection)
+  /(?:href|src)\s*=\s*["']?data:[^"'\s>]*(?:script|javascript)[^"'\s>]*/gi,
+  // Dangerous elements
+  /<(?:iframe|object|embed|form|input|meta|link)\b[^>]*>/gi,
+  // Style tags with JavaScript
+  /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi,
+  // Import statements in CSS
+  /@import\s+[^;]+;?/gi,
+  // Expression() in CSS (IE specific, but good to block)
+  /expression\s*\([^)]*\)/gi,
+  // Additional dangerous patterns
+  /alert\s*\([^)]*\)/gi,
+  // Alert calls
+  /javascript:/gi,
+  // Any javascript: protocol
+  /vbscript:/gi
+  // VBScript protocol
+]);
+V($, "ALLOWED_TAGS", [
+  "p",
+  "br",
+  "strong",
+  "em",
+  "u",
+  "i",
+  "b",
+  "s",
+  "sup",
+  "sub",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  "blockquote",
+  "pre",
+  "code",
+  "kbd",
+  "samp",
+  "a",
+  "img",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "td",
+  "th",
+  "div",
+  "span",
+  "section",
+  "article",
+  "aside",
+  "header",
+  "footer",
+  "hr"
+]);
+V($, "ALLOWED_ATTRIBUTES", {
+  "*": ["class", "id", "title", "lang", "dir"],
+  a: ["href", "target", "rel"],
+  img: ["src", "alt", "width", "height"],
+  table: ["cellpadding", "cellspacing", "border"],
+  td: ["colspan", "rowspan"],
+  th: ["colspan", "rowspan", "scope"]
+});
+var Se = Object.defineProperty, Ee = (i, e, t) => e in i ? Se(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, Te = (i, e, t) => Ee(i, e + "", t);
+class Y {
+  /**
+   * Validate HTML content in development mode
+   */
+  static validate(e, t = {}) {
+    if (t.suppressWarnings)
+      return { isValid: !0, warnings: [] };
+    const r = [];
+    for (const { pattern: n, message: s } of this.SUSPICIOUS_PATTERNS)
+      n.test(e) && r.push(s);
+    return this.looksLikeUserInput(e) && r.push("Content appears to contain user input - ensure it's properly sanitized"), {
+      isValid: r.length === 0,
+      warnings: r
+    };
+  }
+  static looksLikeUserInput(e) {
+    return [
+      /&lt;script/i,
+      // HTML-encoded script tags
+      /&amp;#/,
+      // HTML entities that might be user input
+      /%3Cscript/i,
+      // URL-encoded script tags
+      /\{\{.*\}\}/,
+      // Template syntax
+      /\$\{.*\}/
+      // ES6 template literals
+    ].some((r) => r.test(e));
+  }
+}
+Te(Y, "SUSPICIOUS_PATTERNS", [
+  { pattern: /<script/i, message: "Script tags detected" },
+  { pattern: /javascript:/i, message: "JavaScript URLs detected" },
+  { pattern: /on\w+\s*=/i, message: "Event handlers detected" },
+  { pattern: /<iframe/i, message: "Iframe elements detected" },
+  { pattern: /<object/i, message: "Object elements detected" },
+  { pattern: /<embed/i, message: "Embed elements detected" },
+  { pattern: /<form/i, message: "Form elements detected" },
+  { pattern: /data:.*script/i, message: "Data URLs with scripts detected" },
+  { pattern: /@import/i, message: "CSS import statements detected" },
+  { pattern: /expression\s*\(/i, message: "CSS expressions detected" }
+]);
+var _e = Object.defineProperty, Ae = (i, e, t) => e in i ? _e(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, z = (i, e, t) => Ae(i, typeof e != "symbol" ? e + "" : e, t);
+class Ce extends O {
+  // After layout, before styling
+  constructor(e = {}) {
+    super(e), z(this, "type", "asHTML"), z(this, "priority", 25);
+  }
+  apply(e, t) {
+    if (!t.element || !t.componentInstance) return;
+    const r = t.componentInstance;
+    if (!this.isTextComponent(r))
+      throw new Error(
+        `AsHTML modifier can only be applied to Text components. Found: ${r.type || "unknown"} component. Use Text('<your-html>').modifier.asHTML() instead.`
+      );
+    const n = this.getTextComponentContent(r);
+    if (!n) {
+      process.env.NODE_ENV === "development" && console.warn("asHTML: No content found in Text component");
+      return;
+    }
+    const s = this.sanitizeHTML(n);
+    for (; t.element.firstChild; )
+      t.element.removeChild(t.element.firstChild);
+    t.element.innerHTML = s, t.element.__tachui_asHTML = !0, process.env.NODE_ENV === "development" && this.validateContent(n);
+  }
+  isTextComponent(e) {
+    return e.type === "Text" || e.constructor?.name === "TextComponent" || e.__tachui_component_type === "Text" || e.props && e.props.__componentType === "Text" || // Check componentMetadata for enhanced Text components
+    e.componentMetadata && e.componentMetadata.type === "Text" || e.componentMetadata && e.componentMetadata.originalType === "Text";
+  }
+  getTextComponentContent(e) {
+    if (typeof e.content == "string")
+      return e.content;
+    if (e.props && typeof e.props.content == "string")
+      return e.props.content;
+    if (e.children && Array.isArray(e.children) && e.children.length > 0) {
+      const t = e.children[0];
+      if (t && t.type === "text" && typeof t.text == "string")
+        return t.text;
+    }
+    if (typeof e.text == "string")
+      return e.text;
+    if (e.props) {
+      if (typeof e.props.text == "string")
+        return e.props.text;
+      if (typeof e.props.children == "string")
+        return e.props.children;
+    }
+    return typeof e == "string" ? e : "";
+  }
+  sanitizeHTML(e) {
+    return !e || typeof e != "string" ? "" : this.properties.skipSanitizer ? e : this.properties.customSanitizer ? this.properties.customSanitizer(e) : $.sanitize(e, this.properties);
+  }
+  validateContent(e) {
+    if (this.properties.__suppressWarnings) return;
+    const t = Y.validate(e, {
+      suppressWarnings: this.properties.__suppressWarnings
+    });
+    !t.isValid && t.warnings.length > 0 && (console.group("🔒 AsHTML Security Warnings"), console.warn("Potentially dangerous content detected in asHTML:"), t.warnings.forEach((r) => {
+      console.warn(`  • ${r}`);
+    }), console.warn("Consider using a more comprehensive sanitization solution like DOMPurify"), console.warn("To suppress these warnings, use { __suppressWarnings: true }"), console.groupEnd()), this.properties.skipSanitizer && console.warn("🚨 AsHTML: Sanitization is DISABLED. Ensure content is safe!");
+  }
+}
+function Me(i = {}) {
+  return new Ce(i);
+}
+const x = {
+  /**
+   * Set foreground (text) color
+   */
+  foregroundColor(i) {
+    return new d({ foregroundColor: i });
+  },
+  /**
+   * Set frame dimensions with support for infinity
+   */
+  frame(i, e, t) {
+    return new g({
+      frame: {
+        width: i,
+        height: e,
+        ...t
+      }
+    });
+  },
+  /**
+   * Set padding on all sides
+   */
+  padding(i) {
+    return new g({ padding: i });
+  },
+  /**
+   * Set margin on all sides
+   */
+  margin(i) {
+    return new g({ margin: i });
+  },
+  /**
+   * Set content alignment
+   */
+  alignment(i) {
+    return new g({ alignment: i });
+  },
+  /**
+   * Set layout priority for ZStack container sizing and flexible layout
+   * Higher priority views determine container size in ZStack
+   */
+  layoutPriority(i) {
+    return new g({ layoutPriority: i });
+  }
+}, f = {
+  /**
+   * Set foreground (text) color
+   */
+  foregroundColor(i) {
+    return new d({ foregroundColor: i });
+  },
+  /**
+   * Set background color
+   */
+  backgroundColor(i) {
+    return new d({ backgroundColor: i });
+  },
+  /**
+   * Set background (supports gradients)
+   */
+  background(i) {
+    return new G({ background: i });
+  },
+  /**
+   * Set font properties
+   */
+  font(i) {
+    return new d({ font: i });
+  },
+  /**
+   * Set font size
+   */
+  fontSize(i) {
+    return new d({ font: { size: i } });
+  },
+  /**
+   * Set font weight
+   */
+  fontWeight(i) {
+    return new d({ font: { weight: i } });
+  },
+  /**
+   * Set font family
+   */
+  fontFamily(i) {
+    return new d({ font: { family: i } });
+  },
+  /**
+   * Set opacity
+   */
+  opacity(i) {
+    return new d({ opacity: i });
+  },
+  /**
+   * Set corner radius (enhanced)
+   */
+  cornerRadius(i) {
+    return new d({ cornerRadius: i });
+  },
+  /**
+   * Set border
+   */
+  border(i, e = "#000000", t = "solid") {
+    return new d({
+      border: { width: i, color: e, style: t }
+    });
+  },
+  /**
+   * Set detailed border properties
+   */
+  borderDetailed(i) {
+    return new d({ border: i });
+  }
+  // Shadow functionality moved to @tachui/effects package
+}, A = {
+  /**
+   * Add tap handler
+   */
+  onTap(i) {
+    return new l({ onTap: i });
+  },
+  /**
+   * Add hover handler
+   */
+  onHover(i) {
+    return new l({ onHover: i });
+  },
+  /**
+   * Add focus handler
+   */
+  onFocus(i) {
+    return new l({ onFocus: i });
+  },
+  /**
+   * Set disabled state
+   */
+  disabled(i = !0) {
+    return new l({ disabled: i });
+  },
+  /**
+   * Set accessibility label
+   */
+  accessibilityLabel(i) {
+    return new l({ accessibilityLabel: i });
+  },
+  /**
+   * Set accessibility hint
+   */
+  accessibilityHint(i) {
+    return new l({ accessibilityHint: i });
+  }
+}, D = {
+  /**
+   * Add transition
+   */
+  transition(i = "all", e = 300, t = "ease", r = 0) {
+    return new m({
+      transition: { property: i, duration: e, easing: t, delay: r }
+    });
+  },
+  /**
+   * Add detailed transition
+   */
+  transitionDetailed(i) {
+    return new m({ transition: i });
+  },
+  /**
+   * Add animation
+   */
+  animation(i) {
+    return new m({ animation: i });
+  },
+  /**
+   * Add fade in animation
+   */
+  fadeIn(i = 300) {
+    return new m({
+      animation: {
+        keyframes: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" }
+        },
+        duration: i,
+        easing: "ease-out"
+      }
+    });
+  },
+  /**
+   * Add fade out animation
+   */
+  fadeOut(i = 300) {
+    return new m({
+      animation: {
+        keyframes: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" }
+        },
+        duration: i,
+        easing: "ease-in"
+      }
+    });
+  },
+  /**
+   * Add slide in animation
+   */
+  slideIn(i = "up", e = 300, t = 20) {
+    const r = {
+      up: [`translateY(${t}px)`, "translateY(0)"],
+      down: [`translateY(-${t}px)`, "translateY(0)"],
+      left: [`translateX(${t}px)`, "translateX(0)"],
+      right: [`translateX(-${t}px)`, "translateX(0)"]
+    }, [n, s] = r[i];
+    return new m({
+      animation: {
+        keyframes: {
+          "0%": { transform: n, opacity: "0" },
+          "100%": { transform: s, opacity: "1" }
+        },
+        duration: e,
+        easing: "ease-out"
+      }
+    });
+  },
+  /**
+   * Add scale animation
+   */
+  scaleAnimation(i = 0.8, e = 1, t = 300) {
+    return new m({
+      animation: {
+        keyframes: {
+          "0%": { transform: `scale(${i})`, opacity: "0" },
+          "100%": { transform: `scale(${e})`, opacity: "1" }
+        },
+        duration: t,
+        easing: "ease-out"
+      }
+    });
+  }
+}, xe = {
+  /**
+   * Execute handler when component appears in viewport
+   */
+  onAppear(i) {
+    return new w({ onAppear: i });
+  },
+  /**
+   * Execute handler when component disappears from viewport
+   */
+  onDisappear(i) {
+    return new w({ onDisappear: i });
+  },
+  /**
+   * Execute async task with automatic cancellation on component unmount
+   */
+  task(i, e) {
+    return new w({
+      task: {
+        operation: i,
+        id: e?.id,
+        priority: e?.priority || "default"
+      }
+    });
+  },
+  /**
+   * Add pull-to-refresh functionality
+   */
+  refreshable(i, e) {
+    return new w({
+      refreshable: {
+        onRefresh: i,
+        isRefreshing: e
+      }
+    });
+  }
+}, Le = {
+  /**
+   * Card-like appearance
+   */
+  card(i = 16) {
+    return [
+      f.backgroundColor("#ffffff"),
+      f.cornerRadius(8),
+      // shadow moved to @tachui/effects package
+      x.padding(i)
+    ];
+  },
+  /**
+   * Button-like appearance
+   */
+  button(i = "#007AFF", e = "#ffffff") {
+    return [
+      f.backgroundColor(i),
+      f.foregroundColor(e),
+      f.cornerRadius(6),
+      x.padding(12),
+      // Simplified to single value for now
+      A.onHover((t) => {
+      }),
+      D.transition("all", 150)
+    ];
+  },
+  /**
+   * Input field appearance
+   */
+  input() {
+    return [
+      f.border(1, "#d1d5db"),
+      f.cornerRadius(4),
+      x.padding(8),
+      D.transition("border-color", 150),
+      A.onFocus((i) => {
+      })
+    ];
+  },
+  /**
+   * Typography presets
+   */
+  typography: {
+    title: () => [
+      f.fontSize(24),
+      f.fontWeight("bold")
+    ],
+    heading: () => [
+      f.fontSize(20),
+      f.fontWeight("600")
+    ],
+    body: () => [
+      f.fontSize(16),
+      f.fontWeight("normal")
+    ],
+    caption: () => [
+      f.fontSize(12),
+      f.fontWeight("normal"),
+      f.opacity(0.7)
+    ]
+  }
+}, Ci = {
+  ...x,
+  ...f,
+  ...A,
+  ...D,
+  ...xe,
+  presets: Le
+};
+var $e = Object.defineProperty, Pe = (i, e, t) => e in i ? $e(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, Ie = (i, e, t) => Pe(i, e + "", t);
+const a = (i) => ({
+  type: i,
+  priority: 50,
+  properties: {},
+  apply: () => {
+  }
+}), Re = (...i) => a("borderBottom"), Ne = (...i) => a("borderLeft"), ke = (...i) => a("borderRight"), Be = (...i) => a("borderTop"), De = (...i) => a("alignItems"), He = (...i) => a("flexDirection"), Oe = (...i) => a("flexGrow"), Fe = (...i) => a("flexShrink"), Ve = (...i) => a("flexWrap"), We = (...i) => a("gap"), ze = (...i) => a("justifyContent"), N = (...i) => p("margin", ...i), je = (...i) => p("marginBottom", ...i), Ue = (...i) => p("marginHorizontal", ...i), qe = (...i) => p("marginLeft", ...i), Ge = (...i) => p("marginRight", ...i), Ye = (...i) => p("marginTop", ...i), Xe = (...i) => p("marginVertical", ...i), j = (...i) => p("padding", ...i), Je = (...i) => p("paddingBottom", ...i), Ke = (...i) => p("paddingHorizontal", ...i), Ze = (...i) => p("paddingLeading", ...i), Qe = (...i) => p("paddingLeft", ...i), et = (...i) => p("paddingRight", ...i), tt = (...i) => p("paddingTop", ...i), it = (...i) => p("paddingTrailing", ...i), rt = (...i) => p("paddingVertical", ...i), st = (...i) => p("height", ...i), nt = (...i) => p("maxHeight", ...i), ot = (...i) => p("maxWidth", ...i), at = (...i) => p("minHeight", ...i), ct = (...i) => p("minWidth", ...i), dt = (...i) => p("size", ...i), ut = (...i) => p("width", ...i), lt = (...i) => a("letterSpacing"), pt = (...i) => a("lineHeight"), ht = (...i) => a("overflow"), ft = (...i) => a("textAlign"), mt = (...i) => a("textDecoration"), gt = (...i) => a("textOverflow"), U = (i) => ({
+  type: "typography",
+  priority: 50,
+  properties: { transform: i },
+  apply: () => {
+  }
+}), yt = (...i) => a("typography"), bt = (...i) => a("whiteSpace"), vt = (i) => ({
+  type: "backgroundClip",
+  priority: 50,
+  properties: {
+    backgroundImage: i,
+    backgroundClip: "text",
+    webkitBackgroundClip: "text",
+    color: "transparent",
+    webkitTextFillColor: "transparent"
+  },
+  apply: () => {
+  }
+}), wt = (...i) => a("lineClamp"), St = (...i) => a("wordBreak"), Et = (...i) => a("overflowWrap"), Tt = (...i) => a("hyphens"), _t = (...i) => a("cursor"), At = (...i) => a("display"), Ct = (...i) => a("overflowX"), Mt = (...i) => a("overflowY"), xt = (...i) => a("outline"), Lt = (...i) => a("outlineOffset");
+function p(i, ...e) {
+  const t = Qt.get(i);
+  if (t)
+    try {
+      return t.apply(null, e);
+    } catch (r) {
+      console.warn(`Error creating modifier '${i}':`, r);
+    }
+  return console.warn(`Modifier '${i}' not found in registry, using stub`), a(i);
+}
+const $t = (i = "all", e = 300, t = "ease", r = 0) => {
+  let n;
+  return i === "none" ? n = "none" : n = `${i} ${e}ms ${t} ${r}ms`, {
+    type: "transition",
+    priority: 60,
+    properties: { transition: n },
+    apply: () => {
+    }
+  };
+}, Pt = (...i) => a("fadeTransition"), It = (...i) => a("transformTransition"), Rt = (...i) => a("colorTransition"), Nt = (...i) => a("layoutTransition"), kt = (...i) => a("buttonTransition"), Bt = (...i) => a("cardTransition"), Dt = (...i) => a("modalTransition"), Ht = (...i) => a("smoothTransition"), Ot = (...i) => a("quickTransition"), Ft = (...i) => a("slowTransition"), Vt = (...i) => a("scrollModifier"), Wt = (...i) => a("scrollBehavior"), zt = (...i) => a("overscrollBehavior"), jt = (...i) => a("overscrollBehaviorX"), Ut = (...i) => a("overscrollBehaviorY"), qt = (...i) => a("scrollMargin"), Gt = (...i) => a("scrollPadding"), Yt = (...i) => a("scrollSnap");
+class Xt {
+  constructor(e) {
+    this.component = e, Ie(this, "modifiers", []);
+  }
+  frame(e, t) {
+    let r;
+    return typeof e == "object" ? r = e : (r = {}, e !== void 0 && (r.width = e), t !== void 0 && (r.height = t)), this.modifiers.push(new g({ frame: r })), this;
+  }
+  margin(e) {
+    if (typeof e == "number" || typeof e == "string")
+      this.modifiers.push(N(e));
+    else {
+      const t = e;
+      t.vertical !== void 0 || t.horizontal !== void 0 ? this.modifiers.push(
+        N({
+          vertical: t.vertical,
+          horizontal: t.horizontal
+        })
+      ) : (t.top !== void 0 || t.right !== void 0 || t.bottom !== void 0 || t.left !== void 0) && this.modifiers.push(
+        N({
+          top: t.top,
+          right: t.right,
+          bottom: t.bottom,
+          left: t.left
+        })
+      );
+    }
+    return this;
+  }
+  layoutPriority(e) {
+    return this.modifiers.push(new g({ layoutPriority: e })), this;
+  }
+  // New multi-property modifiers
+  size(e) {
+    return this.modifiers.push(dt(e)), this;
+  }
+  width(e) {
+    return this.modifiers.push(ut(e)), this;
+  }
+  height(e) {
+    return this.modifiers.push(st(e)), this;
+  }
+  maxWidth(e) {
+    return this.modifiers.push(ot(e)), this;
+  }
+  minWidth(e) {
+    return this.modifiers.push(ct(e)), this;
+  }
+  maxHeight(e) {
+    return this.modifiers.push(nt(e)), this;
+  }
+  minHeight(e) {
+    return this.modifiers.push(at(e)), this;
+  }
+  marginTop(e) {
+    return this.modifiers.push(Ye(e)), this;
+  }
+  marginBottom(e) {
+    return this.modifiers.push(je(e)), this;
+  }
+  marginHorizontal(e) {
+    return this.modifiers.push(Ue(e)), this;
+  }
+  marginVertical(e) {
+    return this.modifiers.push(Xe(e)), this;
+  }
+  marginLeft(e) {
+    return this.modifiers.push(qe(e)), this;
+  }
+  marginRight(e) {
+    return this.modifiers.push(Ge(e)), this;
+  }
+  padding(e) {
+    return typeof e == "number" ? this.modifiers.push(j(e)) : this.modifiers.push(j(e)), this;
+  }
+  paddingTop(e) {
+    return this.modifiers.push(tt(e)), this;
+  }
+  paddingBottom(e) {
+    return this.modifiers.push(Je(e)), this;
+  }
+  paddingLeft(e) {
+    return this.modifiers.push(Qe(e)), this;
+  }
+  paddingRight(e) {
+    return this.modifiers.push(et(e)), this;
+  }
+  paddingLeading(e) {
+    return this.modifiers.push(Ze(e)), this;
+  }
+  paddingTrailing(e) {
+    return this.modifiers.push(it(e)), this;
+  }
+  paddingHorizontal(e) {
+    return this.modifiers.push(Ke(e)), this;
+  }
+  paddingVertical(e) {
+    return this.modifiers.push(rt(e)), this;
+  }
+  // Typography modifiers
+  typography(e) {
+    return this.modifiers.push(yt(e)), this;
+  }
+  textAlign(e) {
+    return this.modifiers.push(ft(e)), this;
+  }
+  textTransform(e) {
+    return this.modifiers.push(U(e)), this;
+  }
+  gradientText(e) {
+    return this.modifiers.push(vt(e)), this;
+  }
+  // Text Modifiers
+  lineClamp(e) {
+    return this.modifiers.push(wt(e)), this;
+  }
+  wordBreak(e) {
+    return this.modifiers.push(St(e)), this;
+  }
+  overflowWrap(e) {
+    return this.modifiers.push(Et(e)), this;
+  }
+  hyphens(e) {
+    return this.modifiers.push(Tt(e)), this;
+  }
+  // position() and zIndex() methods have been migrated to @tachui/modifiers/layout
+  // for enhanced SwiftUI-compatible functionality
+  // Backdrop filter modifiers - moved to @tachui/effects but keeping stubs for compatibility
+  backdropFilter() {
+    throw process.env.NODE_ENV === "development" && console.warn(
+      "backdropFilter has been moved to @tachui/effects. Install @tachui/effects and use .apply(backdropFilter(...)) instead."
+    ), new Error(
+      "backdropFilter is no longer available in @tachui/core. Please install @tachui/effects."
+    );
+  }
+  glassmorphism() {
+    throw process.env.NODE_ENV === "development" && console.warn(
+      "glassmorphism has been moved to @tachui/effects. Install @tachui/effects and use .apply(glassmorphism(...)) instead."
+    ), new Error(
+      "glassmorphism is no longer available in @tachui/core. Please install @tachui/effects."
+    );
+  }
+  letterSpacing(e) {
+    return this.modifiers.push(lt(e)), this;
+  }
+  lineHeight(e) {
+    return this.modifiers.push(pt(e)), this;
+  }
+  textOverflow(e) {
+    return this.modifiers.push(gt(e)), this;
+  }
+  whiteSpace(e) {
+    return this.modifiers.push(bt(e)), this;
+  }
+  overflow(e) {
+    return this.modifiers.push(ht(e)), this;
+  }
+  // Border modifiers
+  borderTop(e, t, r) {
+    return this.modifiers.push(Be(e, t, r)), this;
+  }
+  borderRight(e, t, r) {
+    return this.modifiers.push(ke(e, t, r)), this;
+  }
+  borderBottom(e, t, r) {
+    return this.modifiers.push(Re(e, t, r)), this;
+  }
+  borderLeft(e, t, r) {
+    return this.modifiers.push(Ne(e, t, r)), this;
+  }
+  // Flexbox modifiers
+  flexGrow(e) {
+    return this.modifiers.push(Oe(e)), this;
+  }
+  flexShrink(e) {
+    return this.modifiers.push(Fe(e)), this;
+  }
+  justifyContent(e) {
+    return this.modifiers.push(ze(e)), this;
+  }
+  alignItems(e) {
+    return this.modifiers.push(De(e)), this;
+  }
+  gap(e) {
+    return this.modifiers.push(We(e)), this;
+  }
+  flexDirection(e) {
+    return this.modifiers.push(He(e)), this;
+  }
+  flexWrap(e) {
+    return this.modifiers.push(Ve(e)), this;
+  }
+  // Utility modifiers
+  cursor(e) {
+    return this.modifiers.push(_t(e)), this;
+  }
+  overflowY(e) {
+    return this.modifiers.push(Mt(e)), this;
+  }
+  overflowX(e) {
+    return this.modifiers.push(Ct(e)), this;
+  }
+  outline(e) {
+    return this.modifiers.push(xt(e)), this;
+  }
+  outlineOffset(e) {
+    return this.modifiers.push(Lt(e)), this;
+  }
+  display(e) {
+    return this.modifiers.push(At(e)), this;
+  }
+  // Raw CSS modifiers - using imported functions from ./css
+  css(e) {
+    return this.modifiers.push(me(e)), this;
+  }
+  cssProperty(e, t) {
+    return this.modifiers.push(ge(e, t)), this;
+  }
+  cssVariable(e, t) {
+    return this.modifiers.push(ye(e, t)), this;
+  }
+  cssVendor(e, t, r) {
+    return this.modifiers.push(be(e, t, r)), this;
+  }
+  textCase(e) {
+    return this.modifiers.push(U(e)), this;
+  }
+  aspectRatio(e, t = "fit") {
+    throw new Error(
+      'Layout modifiers have been moved to @tachui/modifiers. Please import { aspectRatio } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  textDecoration(e) {
+    return this.modifiers.push(mt(e)), this;
+  }
+  // Phase 1 SwiftUI modifiers
+  // Note: clipped() has been moved to @tachui/modifiers
+  // Phase 2 SwiftUI modifiers
+  // Note: clipShape() and overlay() have been moved to @tachui/modifiers
+  // Phase 3 SwiftUI modifiers - Critical Transform Modifiers
+  absolutePosition(e, t) {
+    return this.modifiers.push(
+      new g({
+        position: {
+          x: e,
+          y: t
+        }
+      })
+    ), this;
+  }
+  // Appearance modifiers
+  foregroundColor(e) {
+    return this.modifiers.push(new d({ foregroundColor: e })), this;
+  }
+  backgroundColor(e) {
+    return this.modifiers.push(new d({ backgroundColor: e })), this;
+  }
+  background(e) {
+    return this.modifiers.push(new G({ background: e })), this;
+  }
+  font(e) {
+    let t;
+    return typeof e == "object" ? t = e : t = e !== void 0 ? { size: e } : {}, this.modifiers.push(new d({ font: t })), this;
+  }
+  fontWeight(e) {
+    return this.modifiers.push(new d({ font: { weight: e } })), this;
+  }
+  fontSize(e) {
+    return this.modifiers.push(new d({ font: { size: e } })), this;
+  }
+  fontFamily(e) {
+    return this.modifiers.push(new d({ font: { family: e } })), this;
+  }
+  opacity(e) {
+    return this.modifiers.push(new d({ opacity: e })), this;
+  }
+  cornerRadius(e) {
+    return this.modifiers.push(new d({ cornerRadius: e })), this;
+  }
+  border(e, t) {
+    let r;
+    return typeof e == "object" ? r = e : r = {
+      style: "solid",
+      ...e !== void 0 && { width: e },
+      ...t !== void 0 && { color: t }
+    }, this.modifiers.push(new d({ border: r })), this;
+  }
+  borderWidth(e) {
+    return this.modifiers.push(new d({ border: { width: e } })), this;
+  }
+  // Shadow functionality moved to @tachui/effects package
+  // Visual Effects Modifiers (Phase 2 - Epic: Butternut)
+  blur(e) {
+    return this.modifiers.push(new d({ blur: e })), this;
+  }
+  brightness(e) {
+    return this.modifiers.push(new d({ brightness: e })), this;
+  }
+  contrast(e) {
+    return this.modifiers.push(new d({ contrast: e })), this;
+  }
+  saturation(e) {
+    return this.modifiers.push(new d({ saturation: e })), this;
+  }
+  hueRotation(e) {
+    return this.modifiers.push(new d({ hueRotation: e })), this;
+  }
+  grayscale(e) {
+    return this.modifiers.push(new d({ grayscale: e })), this;
+  }
+  colorInvert(e = 1) {
+    return this.modifiers.push(new d({ colorInvert: e })), this;
+  }
+  // ============================================================================
+  // VISUAL EFFECTS MOVED TO @tachui/effects PACKAGE
+  // ============================================================================
+  //
+  // Visual effects have been extracted to @tachui/effects for better tree-shaking
+  // Visual effects methods removed - use @tachui/effects package
+  // Phase 4 Advanced Gesture Modifiers moved to @tachui/modifiers
+  // Use: import { onLongPressGesture } from '@tachui/modifiers'
+  onLongPressGesture(e) {
+    throw new Error(
+      'onLongPressGesture has been moved to @tachui/modifiers. Please import { onLongPressGesture } from "@tachui/modifiers" and use .apply(onLongPressGesture(...)) instead.'
+    );
+  }
+  keyboardShortcut(e, t, r) {
+    throw new Error(
+      'keyboardShortcut has been moved to @tachui/modifiers. Please import { keyboardShortcut } from "@tachui/modifiers" and use .apply(keyboardShortcut(...)) instead.'
+    );
+  }
+  focused(e) {
+    throw new Error(
+      'focused has been moved to @tachui/modifiers. Please import { focused } from "@tachui/modifiers" and use .apply(focused(...)) instead.'
+    );
+  }
+  focusable(e = !0, t) {
+    throw new Error(
+      'focusable has been moved to @tachui/modifiers. Please import { focusable } from "@tachui/modifiers" and use .apply(focusable(...)) instead.'
+    );
+  }
+  onContinuousHover(e, t) {
+    throw new Error(
+      'onContinuousHover has been moved to @tachui/modifiers. Please import { onContinuousHover } from "@tachui/modifiers" and use .apply(onContinuousHover(...)) instead.'
+    );
+  }
+  highPriorityGesture(e, t) {
+    return this.modifiers.push(
+      new l({
+        highPriorityGesture: { gesture: e, including: t }
+      })
+    ), this;
+  }
+  simultaneousGesture(e, t) {
+    return this.modifiers.push(
+      new l({
+        simultaneousGesture: { gesture: e, including: t }
+      })
+    ), this;
+  }
+  allowsHitTesting(e) {
+    throw new Error(
+      'allowsHitTesting has been moved to @tachui/modifiers. Please import { allowsHitTesting } from "@tachui/modifiers" and use .apply(allowsHitTesting(...)) instead.'
+    );
+  }
+  // Animation modifiers
+  transform(e) {
+    return this.modifiers.push(new m({ transform: e })), this;
+  }
+  animation(e) {
+    return this.modifiers.push(new m({ animation: e })), this;
+  }
+  // Lifecycle modifiers
+  task(e, t) {
+    return this.modifiers.push(
+      new w({
+        task: {
+          operation: e,
+          id: t?.id,
+          priority: t?.priority || "default"
+        }
+      })
+    ), this;
+  }
+  // Custom modifier application
+  modifier(e) {
+    return this.modifiers.push(e), this;
+  }
+  // Resizable modifier for images
+  resizable() {
+    return this.modifiers.push(new Q({})), this;
+  }
+  // Responsive Design Methods
+  /**
+   * Add modifier to internal list (used by responsive builder)
+   */
+  addModifier(e) {
+    if (this.modifiers.push(e), "modifiers" in this.component && Array.isArray(this.component.modifiers)) {
+      const t = this.component;
+      t.modifiers = [
+        ...t.modifiers,
+        e
+      ];
+    }
+  }
+  // Responsive functionality moved to @tachui/responsive package
+  // Interaction modifiers
+  onTap(e) {
+    return this.modifiers.push(A.onTap(e)), this;
+  }
+  onFocus(e) {
+    return this.modifiers.push(A.onFocus(e)), this;
+  }
+  onBlur(e) {
+    return this.modifiers.push(new l({ onBlur: e })), this;
+  }
+  onKeyDown(e) {
+    return this.modifiers.push(new l({ onKeyDown: e })), this;
+  }
+  onScroll(e) {
+    return this.modifiers.push(new l({ onScroll: e })), this;
+  }
+  onKeyPress(e) {
+    return this.modifiers.push(new l({ onKeyPress: e })), this;
+  }
+  onKeyUp(e) {
+    return this.modifiers.push(new l({ onKeyUp: e })), this;
+  }
+  onDoubleClick(e) {
+    return this.modifiers.push(new l({ onDoubleClick: e })), this;
+  }
+  onContextMenu(e) {
+    return this.modifiers.push(new l({ onContextMenu: e })), this;
+  }
+  onWheel(e) {
+    return this.modifiers.push(new l({ onWheel: e })), this;
+  }
+  onInput(e) {
+    return this.modifiers.push(new l({ onInput: e })), this;
+  }
+  onChange(e) {
+    return this.modifiers.push(new l({ onChange: e })), this;
+  }
+  onCopy(e) {
+    return this.modifiers.push(new l({ onCopy: e })), this;
+  }
+  onCut(e) {
+    return this.modifiers.push(new l({ onCut: e })), this;
+  }
+  onPaste(e) {
+    return this.modifiers.push(new l({ onPaste: e })), this;
+  }
+  onSelect(e) {
+    return this.modifiers.push(new l({ onSelect: e })), this;
+  }
+  // Transition modifiers
+  transition(e = "all", t = 300, r = "ease", n = 0) {
+    return this.modifiers.push($t(e, t, r, n)), this;
+  }
+  // HTML and ARIA Attributes - MIGRATED TO @tachui/modifiers
+  id(e) {
+    throw new Error(
+      'Attribute modifiers have been moved to @tachui/modifiers. Please import { id } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  data(e) {
+    throw new Error(
+      'Attribute modifiers have been moved to @tachui/modifiers. Please import { data } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  aria(e) {
+    throw new Error(
+      'Attribute modifiers have been moved to @tachui/modifiers. Please import { aria } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  tabIndex(e) {
+    throw new Error(
+      'Attribute modifiers have been moved to @tachui/modifiers. Please import { tabIndex } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  customProperties(e) {
+    throw new Error(
+      'CSS property modifiers have been moved to @tachui/modifiers. Please import { customProperties } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  customProperty(e, t) {
+    throw new Error(
+      'CSS property modifiers have been moved to @tachui/modifiers. Please import { customProperty } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  cssVariables(e) {
+    throw new Error(
+      'CSS property modifiers have been moved to @tachui/modifiers. Please import { cssVariables } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  themeColors(e) {
+    throw new Error(
+      'Theme modifiers have been moved to @tachui/modifiers. Please import { themeColors } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  designTokens(e) {
+    throw new Error(
+      'Design token modifiers have been moved to @tachui/modifiers. Please import { designTokens } from "@tachui/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  // State modifiers
+  disabled(e = !0) {
+    return this.modifiers.push(new l({ disabled: e })), this;
+  }
+  // HTML Content Rendering (Text components only)
+  asHTML(e) {
+    return this.modifiers.push(Me(e)), this;
+  }
+  // Build the final component with all modifiers applied
+  build() {
+    if ("modifiers" in this.component) {
+      const e = this.component, t = this.modifiers.filter(
+        (r) => !e.modifiers.some(
+          (n) => n === r
+          // Reference equality check
+        )
+      );
+      return e.modifiers = [
+        ...e.modifiers,
+        ...t
+      ], process.env.NODE_ENV === "test" && this.applyModifiersToPropsForTesting(e, [
+        ...e.modifiers
+      ]), this.component;
+    } else {
+      const e = oi(
+        this.component,
+        this.modifiers
+      );
+      return process.env.NODE_ENV === "test" && this.applyModifiersToPropsForTesting(
+        e,
+        this.modifiers
+      ), e;
+    }
+  }
+  applyModifiersToPropsForTesting(e, t) {
+    e.props || (e.props = {}), t.forEach((r) => {
+      if (r.type === "aria") {
+        const s = r.properties?.aria || {};
+        Object.entries(s).forEach(([o, c]) => {
+          if (c != null)
+            if (o === "role")
+              e.props.role = c;
+            else {
+              const u = o.startsWith("aria-") ? o : `aria-${o}`;
+              e.props[u] = typeof c == "boolean" ? c : String(c);
+            }
+        });
+      } else if (r.type === "interaction") {
+        const s = r.properties;
+        Object.entries(s).forEach(([o, c]) => {
+          typeof c == "function" && (e.props[o] = c);
+        }), (s.onSwipeLeft || s.onSwipeRight) && (e.props.onTouchStart = () => {
+        });
+      } else if (r.type === "utility") {
+        const s = r.properties;
+        e.props.style || (e.props.style = {}), Object.entries(s).forEach(([o, c]) => {
+          c != null && (e.props.style[o] = c);
+        });
+      } else if (r.type === "tabIndex") {
+        const n = r;
+        e.props.tabIndex = n.properties?.tabIndex;
+      } else if (r.type === "appearance") {
+        const s = r.properties;
+        e.props.style || (e.props.style = {}), s.backgroundColor && (e.props.style.backgroundColor = s.backgroundColor), s.foregroundColor && (e.props.style.color = s.foregroundColor), s.opacity !== void 0 && (e.props.style.opacity = s.opacity), s.role !== void 0 && (e.props.role = String(s.role)), s["aria-label"] !== void 0 && (e.props["aria-label"] = String(s["aria-label"])), s["aria-live"] !== void 0 && (e.props["aria-live"] = String(s["aria-live"])), s["aria-describedby"] !== void 0 && (e.props["aria-describedby"] = String(
+          s["aria-describedby"]
+        )), s["aria-modal"] !== void 0 && (e.props["aria-modal"] = s["aria-modal"] === "true" || s["aria-modal"] === !0), s["aria-hidden"] !== void 0 && (e.props["aria-hidden"] = String(s["aria-hidden"])), s.navigationTitle !== void 0 && (e.props.navigationTitle = String(s.navigationTitle)), s.navigationBarHidden !== void 0 && (e.props.navigationBarHidden = s.navigationBarHidden, s.navigationBarHidden && (e.props["aria-hidden"] = "true")), s.navigationBarItems !== void 0 && (e.props.navigationBarItems = s.navigationBarItems);
+      } else if (r.type === "transition") {
+        const s = r.properties;
+        e.props.style || (e.props.style = {}), s.transition && (e.props.style.transition = s.transition);
+      } else if (r.type === "size") {
+        const s = r.properties;
+        e.props.style || (e.props.style = {}), s.minHeight !== void 0 && (e.props.style.minHeight = s.minHeight), s.minWidth !== void 0 && (e.props.style.minWidth = s.minWidth), s.maxHeight !== void 0 && (e.props.style.maxHeight = s.maxHeight), s.maxWidth !== void 0 && (e.props.style.maxWidth = s.maxWidth), s.width !== void 0 && (e.props.style.width = s.width), s.height !== void 0 && (e.props.style.height = s.height);
+      } else if (r.type === "css") {
+        const s = r.properties;
+        e.props.style || (e.props.style = {}), Object.entries(s).forEach(([o, c]) => {
+          c != null && (e.props.style[o] = c);
+        });
+      }
+    });
+  }
+  // ============================================================================
+  // MISSING MODIFIER METHODS - ACCESSIBILITY & NAVIGATION
+  // ============================================================================
+  // Individual ARIA methods for better developer experience
+  role(e) {
+    return this.modifiers.push(new d({ role: e })), this;
+  }
+  ariaLabel(e) {
+    return this.modifiers.push(new d({ "aria-label": e })), this;
+  }
+  ariaLive(e) {
+    return this.modifiers.push(new d({ "aria-live": e })), this;
+  }
+  ariaDescribedBy(e) {
+    return this.modifiers.push(new d({ "aria-describedby": e })), this;
+  }
+  ariaModal(e) {
+    return this.modifiers.push(
+      new d({ "aria-modal": e.toString() })
+    ), this;
+  }
+  // Touch and gesture events
+  onTouchStart(e) {
+    return this.modifiers.push(new l({ onTouchStart: e })), this;
+  }
+  onTouchMove(e) {
+    return this.modifiers.push(new l({ onTouchMove: e })), this;
+  }
+  onTouchEnd(e) {
+    return this.modifiers.push(new l({ onTouchEnd: e })), this;
+  }
+  // Swipe gestures (simplified implementations)
+  onSwipeLeft(e) {
+    return this.modifiers.push(new l({ onSwipeLeft: e })), this;
+  }
+  onSwipeRight(e) {
+    return this.modifiers.push(new l({ onSwipeRight: e })), this;
+  }
+  // Navigation methods - these delegate to the navigation package functions
+  navigationTitle(e) {
+    return this.modifiers.push(
+      new d({
+        navigationTitle: e,
+        role: "heading"
+      })
+    ), this;
+  }
+  navigationBarHidden(e = !0) {
+    return this.modifiers.push(
+      new d({
+        navigationBarHidden: e,
+        "aria-hidden": e.toString()
+      })
+    ), this;
+  }
+  navigationBarItems(e) {
+    return this.modifiers.push(new d({ navigationBarItems: e })), this;
+  }
+  // ============================================================================
+  // MISSING TRANSITION METHODS
+  // ============================================================================
+  transitions(e) {
+    return this.modifiers.push(new m({ transitions: e })), this;
+  }
+  fadeTransition(e = 300) {
+    return this.modifiers.push(Pt(e)), this;
+  }
+  transformTransition(e = 300) {
+    return this.modifiers.push(It(e)), this;
+  }
+  colorTransition(e = 300) {
+    return this.modifiers.push(Rt(e)), this;
+  }
+  layoutTransition(e = 300) {
+    return this.modifiers.push(Nt(e)), this;
+  }
+  buttonTransition() {
+    return this.modifiers.push(kt()), this;
+  }
+  cardTransition() {
+    return this.modifiers.push(Bt()), this;
+  }
+  modalTransition() {
+    return this.modifiers.push(Dt()), this;
+  }
+  smoothTransition(e = 300) {
+    return this.modifiers.push(Ht(e)), this;
+  }
+  quickTransition(e = 150) {
+    return this.modifiers.push(Ot(e)), this;
+  }
+  slowTransition(e = 500) {
+    return this.modifiers.push(Ft(e)), this;
+  }
+  // ============================================================================
+  // SCROLL METHODS
+  // ============================================================================
+  scroll(e) {
+    return this.modifiers.push(Vt(e)), this;
+  }
+  scrollBehavior(e) {
+    return this.modifiers.push(Wt(e)), this;
+  }
+  overscrollBehavior(e) {
+    return this.modifiers.push(zt(e)), this;
+  }
+  overscrollBehaviorX(e) {
+    return this.modifiers.push(jt(e)), this;
+  }
+  overscrollBehaviorY(e) {
+    return this.modifiers.push(Ut(e)), this;
+  }
+  scrollMargin(e) {
+    return this.modifiers.push(qt(e)), this;
+  }
+  scrollPadding(e) {
+    return this.modifiers.push(Gt(e)), this;
+  }
+  scrollSnap(e) {
+    return this.modifiers.push(Yt(e)), this;
+  }
+  // ============================================================================
+  // MIGRATED MODIFIERS - NOW IN SPECIALIZED PACKAGES
+  // ============================================================================
+  // Viewport lifecycle modifiers - moved to @tachui/viewport
+  onAppear(e) {
+    throw new Error(
+      'onAppear modifier has been moved to @tachui/viewport. Please import { onAppear } from "@tachui/viewport/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  onDisappear(e) {
+    throw new Error(
+      'onDisappear modifier has been moved to @tachui/viewport. Please import { onDisappear } from "@tachui/viewport/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  // Mobile gesture modifiers - moved to @tachui/mobile
+  refreshable(e, t) {
+    throw new Error(
+      'refreshable modifier has been moved to @tachui/mobile. Please import { refreshable } from "@tachui/mobile/modifiers" and use it directly instead of chaining it on components.'
+    );
+  }
+  // onAppear and onDisappear have been moved to @tachui/viewport/modifiers
+  // to maintain proper architectural boundaries
+  // Transform modifiers
+  scaleEffect(e, t, r) {
+    return this.modifiers.push(
+      new m({
+        scaleEffect: {
+          x: e,
+          y: t ?? e,
+          // Default to uniform scaling
+          anchor: r ?? "center"
+        }
+      })
+    ), this;
+  }
+  // Shadow modifiers - registry-based lookup
+  shadow(e) {
+    return this.modifiers.push(p("shadow", e)), this;
+  }
+  textShadow(e) {
+    return this.modifiers.push(p("textShadow", e)), this;
+  }
+  shadows(e) {
+    return this.modifiers.push(p("shadows", e)), this;
+  }
+  shadowPreset(e) {
+    return this.modifiers.push(p("shadowPreset", e)), this;
+  }
+}
+function X(i) {
+  return new Xt(i);
+}
+function Mi(i, e) {
+  return {
+    ...i,
+    modifiers: e,
+    modifierBuilder: X(i)
+  };
+}
+const xi = {
+  /**
+   * Create a padding modifier with all sides
+   */
+  paddingAll(i) {
+    return new g({ padding: i });
+  },
+  /**
+   * Create a margin modifier with all sides
+   */
+  marginAll(i) {
+    return new g({ margin: i });
+  },
+  /**
+   * Create a font modifier with common presets
+   */
+  fontPreset(i) {
+    const e = {
+      title: { size: 32, weight: "bold" },
+      heading: { size: 24, weight: "600" },
+      body: { size: 16, weight: "normal" },
+      caption: { size: 12, weight: "normal" }
+    };
+    return new d({ font: e[i] });
+  },
+  // shadowPreset moved to @tachui/effects package
+  /**
+   * Create a transition modifier with common presets
+   */
+  transitionPreset(i) {
+    const e = {
+      fast: { duration: 150, easing: "ease-out" },
+      normal: { duration: 300, easing: "ease" },
+      slow: { duration: 500, easing: "ease-in-out" }
+    };
+    return new m({ transition: e[i] });
+  }
+};
+var Jt = Object.defineProperty, Kt = (i, e, t) => e in i ? Jt(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, Zt = (i, e, t) => Kt(i, e + "", t);
+class J {
+  constructor() {
+    Zt(this, "modifiers", /* @__PURE__ */ new Map());
+  }
+  register(e, t) {
+    this.modifiers.set(e, t);
+  }
+  get(e) {
+    return this.modifiers.get(e);
+  }
+  has(e) {
+    return this.modifiers.has(e);
+  }
+  list() {
+    return Array.from(this.modifiers.keys());
+  }
+  clear() {
+    this.modifiers.clear();
+  }
+}
+const Qt = new J();
+function Li() {
+  return new J();
+}
+function ei(i, e, t = {}, r = {}) {
+  if (!e.length) return i;
+  const n = {
+    componentId: t.componentId || "unknown",
+    phase: t.phase || "creation",
+    ...t.element && { element: t.element },
+    ...t.parentElement && { parentElement: t.parentElement },
+    ...t.componentInstance && { componentInstance: t.componentInstance },
+    ...t.previousModifiers && { previousModifiers: t.previousModifiers }
+  };
+  switch (r.batch ? "batch" : "sequential") {
+    case "batch":
+      return ii(i, e, n, r);
+    default:
+      return ti(i, e, n, r);
+  }
+}
+function ti(i, e, t, r) {
+  const n = [...e].sort((u, h) => u.priority - h.priority);
+  let s = i;
+  const o = [], c = [];
+  for (const u of n)
+    try {
+      const h = u.apply(s, t);
+      h && typeof h == "object" && "type" in h && (s = h), r.immediate && !r.suppressEffects && (o.forEach((I) => I()), o.length = 0);
+    } catch (h) {
+      console.error(`Failed to apply modifier ${u.type}:`, h);
+    }
+  if (c.length > 0) {
+    const u = s.dispose;
+    s.dispose = () => {
+      c.forEach((h) => h()), u && u();
+    };
+  }
+  return s;
+}
+function ii(i, e, t, r) {
+  const n = ri(e);
+  let s = i;
+  const o = [], c = [];
+  for (const [u, h] of n)
+    try {
+      s = si(s, h, t);
+    } catch (I) {
+      (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error(`Failed to apply modifier group ${u}:`, I);
+    }
+  if (r.suppressEffects || o.forEach((u) => u()), c.length > 0) {
+    const u = s.dispose;
+    s.dispose = () => {
+      c.forEach((h) => h()), u && u();
+    };
+  }
+  return s;
+}
+function ri(i) {
+  const e = /* @__PURE__ */ new Map();
+  for (const t of i) {
+    const r = e.get(t.type) || [];
+    r.push(t), e.set(t.type, r);
+  }
+  return e;
+}
+function si(i, e, t) {
+  const r = [...e].sort((s, o) => s.priority - o.priority);
+  let n = i;
+  for (const s of r)
+    try {
+      const o = s.apply(n, t);
+      o && typeof o == "object" && "type" in o && (n = o);
+    } catch (o) {
+      (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error(`Failed to apply modifier ${s.type}:`, o);
+    }
+  return n;
+}
+function ni(i) {
+  return i && typeof i.concat == "function" && typeof i.toSegment == "function" && typeof i.isConcatenatable == "function";
+}
+function oi(i, e = []) {
+  const t = {
+    type: i.type,
+    id: i.id,
+    props: { ...i.props },
+    mounted: i.mounted,
+    cleanup: i.cleanup ? [...i.cleanup] : [],
+    modifiers: [...e],
+    modifierBuilder: null,
+    // Will be set after component is created
+    render: i.render ? i.render.bind(i) : () => []
+    // Bind to original component or provide default
+  };
+  t.modifierBuilder = X(t), i.modifiableComponent = t;
+  const r = i._enhancedLifecycle;
+  r && (t._enhancedLifecycle = r, "domElements" in i && (t.domElements = i.domElements), "primaryElement" in i && (t.primaryElement = i.primaryElement), "domReady" in i && (t.domReady = i.domReady), "children" in i && (t.children = i.children));
+  const n = i.render ? i.render.bind(i) : () => [];
+  return t.render = () => {
+    const s = n();
+    return (Array.isArray(s) ? s : [s]).map((c) => (c && typeof c == "object" && (c.modifiers = t.modifiers, c.componentId = i.id), c));
+  }, ni(i) && (t.concat = function(s) {
+    const o = {
+      id: t.id,
+      component: t,
+      modifiers: t.modifiers,
+      render: () => {
+        const h = t.render();
+        return Array.isArray(h) ? h[0] : h;
+      }
+    }, c = s.toSegment(), u = {
+      totalSegments: s instanceof b ? s.segments.length + 1 : 2,
+      accessibilityRole: "text",
+      // Simplified for now
+      semanticStructure: "inline"
+      // Simplified for now
+    };
+    return s instanceof b ? new b([o, ...s.segments], u) : new b([o, c], u);
+  }, t.toSegment = function() {
+    return {
+      id: t.id,
+      component: t,
+      modifiers: t.modifiers,
+      render: () => {
+        const s = t.render();
+        return Array.isArray(s) ? s[0] : s;
+      }
+    };
+  }, t.isConcatenatable = function() {
+    return !0;
+  }), t;
+}
+function $i(i, e, t = {}) {
+  i.modifiers = [...e], i.mounted && i.context && console.log("Updating modifiers on mounted component", i.id);
+}
+const Pi = {
+  /**
+   * Check if a component has specific modifier types
+   */
+  hasModifierOfType(i, e) {
+    return i.modifiers.some((t) => t.type === e);
+  },
+  /**
+   * Get modifiers of a specific type from a component
+   */
+  getModifiersOfType(i, e) {
+    return i.modifiers.filter((t) => t.type === e);
+  },
+  /**
+   * Remove modifiers of a specific type from a component
+   */
+  removeModifiersOfType(i, e) {
+    i.modifiers = i.modifiers.filter((t) => t.type !== e);
+  },
+  /**
+   * Replace modifiers of a specific type
+   */
+  replaceModifiersOfType(i, e, t) {
+    i.modifiers = i.modifiers.filter((r) => r.type !== e), i.modifiers.push(...t);
+  },
+  /**
+   * Get the total number of modifiers on a component
+   */
+  getModifierCount(i) {
+    return i.modifiers.length;
+  },
+  /**
+   * Check if two modifier arrays are equivalent
+   */
+  areModifiersEqual(i, e) {
+    if (i.length !== e.length) return !1;
+    for (let t = 0; t < i.length; t++) {
+      const r = i[t], n = e[t];
+      if (r.type !== n.type || r.priority !== n.priority || JSON.stringify(r.properties) !== JSON.stringify(n.properties))
+        return !1;
+    }
+    return !0;
+  }
+}, ai = /* @__PURE__ */ new Set([
+  // Container tags
+  "div",
+  "section",
+  "article",
+  "aside",
+  "nav",
+  "main",
+  "header",
+  "footer",
+  // Heading tags
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  // Content tags
+  "p",
+  "span",
+  "strong",
+  "em",
+  "code",
+  "pre",
+  "blockquote",
+  "address",
+  // List tags
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  // Interactive tags (with warnings)
+  "button",
+  "a",
+  "input",
+  "textarea",
+  "select",
+  "form",
+  "label",
+  // Media tags
+  "img",
+  "video",
+  "audio",
+  "canvas",
+  "svg",
+  "picture",
+  "source",
+  // Table tags
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "caption",
+  "colgroup",
+  "col",
+  // Form tags
+  "fieldset",
+  "legend",
+  "optgroup",
+  "option",
+  "datalist",
+  "output",
+  "progress",
+  "meter",
+  // Interactive content
+  "details",
+  "summary",
+  "dialog",
+  // Text semantics
+  "abbr",
+  "cite",
+  "dfn",
+  "kbd",
+  "mark",
+  "q",
+  "s",
+  "samp",
+  "small",
+  "sub",
+  "sup",
+  "time",
+  "u",
+  "var",
+  // Document sections
+  "body",
+  "head",
+  "title",
+  "base",
+  "link",
+  "meta",
+  "style",
+  "script",
+  "noscript",
+  // Embedded content
+  "embed",
+  "iframe",
+  "object",
+  "param",
+  "track",
+  "map",
+  "area",
+  // Interactive elements
+  "menu",
+  "menuitem"
+]), T = /* @__PURE__ */ new Map([
+  ["nav", { role: "navigation", applyARIA: !0 }],
+  ["main", { role: "main", applyARIA: !0 }],
+  ["article", { role: "article", applyARIA: !0 }],
+  ["section", { role: "region", applyARIA: !0 }],
+  ["aside", { role: "complementary", applyARIA: !0 }],
+  ["header", { role: "banner", applyARIA: !1 }],
+  // Context dependent - may not always be page banner
+  ["footer", { role: "contentinfo", applyARIA: !1 }],
+  // Context dependent - may not always be page footer
+  ["form", { role: "form", applyARIA: !0 }],
+  ["search", { role: "search", applyARIA: !0 }],
+  ["dialog", { role: "dialog", applyARIA: !0 }],
+  ["button", { role: "button", applyARIA: !1 }],
+  // Usually implicit
+  ["a", { role: "link", applyARIA: !1 }]
+  // Usually implicit
+]), ci = /* @__PURE__ */ new Map([
+  // Layout Components - Ideal for semantic containers (Warning Level: None)
+  [
+    "HStack",
+    {
+      warningLevel: "none",
+      idealTags: [
+        "nav",
+        "header",
+        "footer",
+        "section",
+        "article",
+        "aside",
+        "main",
+        "div"
+      ]
+    }
+  ],
+  [
+    "VStack",
+    {
+      warningLevel: "none",
+      idealTags: [
+        "main",
+        "section",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "div"
+      ]
+    }
+  ],
+  [
+    "ZStack",
+    { warningLevel: "none", idealTags: ["article", "aside", "section", "div"] }
+  ],
+  // Content Components - Common for specific overrides (Warning Level: None for appropriate tags)
+  [
+    "Text",
+    {
+      warningLevel: "none",
+      idealTags: [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "p",
+        "span",
+        "strong",
+        "em"
+      ]
+    }
+  ],
+  [
+    "Image",
+    { warningLevel: "warning", problematicTags: ["figure", "picture"] }
+  ],
+  // May break functionality
+  ["Spacer", { warningLevel: "none" }],
+  // Interactive Components - Use with warnings
+  [
+    "Button",
+    { warningLevel: "warning", problematicTags: ["div", "span", "a"] }
+  ],
+  // May break accessibility
+  [
+    "Link",
+    { warningLevel: "warning", problematicTags: ["div", "span", "button"] }
+  ]
+  // May break navigation
+]);
+function di(i, e) {
+  const t = ci.get(i);
+  return t ? t.warningLevel === "none" ? !1 : t.warningLevel === "warning" && t.problematicTags ? t.problematicTags.includes(e) : !(t.idealTags && t.idealTags.includes(e)) : !0;
+}
+class ui {
+  static validate(e, t) {
+    return ai.has(e) ? {
+      valid: !0,
+      warnings: this.checkSemanticWarnings(e, t),
+      semanticRole: T.get(e)
+    } : (process.env.NODE_ENV !== "production" && console.error(
+      `Invalid tag '${e}' for component type '${t}'`
+    ), {
+      valid: !1,
+      warning: `Invalid HTML tag '${e}' specified for ${t}. Tag will be used as-is.`,
+      severity: "error"
+    });
+  }
+  static checkSemanticWarnings(e, t) {
+    const r = [];
+    if (["button", "a", "input", "select", "textarea"].includes(e) && ["HStack", "VStack", "ZStack"].includes(t)) {
+      const n = `Using interactive tag '${e}' on layout component ${t} may cause accessibility issues.`;
+      r.push({ message: n, severity: "warning" }), process.env.NODE_ENV !== "production" && console.warn(
+        `Interactive tag '${e}' on layout component '${t}' may cause unexpected behavior`
+      );
+    }
+    if (e === "li" && !["VStack", "HStack"].includes(t) && (r.push({ message: "<li> tags should typically be used within list structures.", severity: "info" }), process.env.NODE_ENV !== "production" && console.info(
+      `Consider using '${e}' within <ul> or <ol> structure for component '${t}'`
+    )), ["h1", "h2", "h3", "h4", "h5", "h6"].includes(e) && ["HStack", "VStack", "ZStack"].includes(t)) {
+      const n = `Using heading tag '${e}' on layout component ${t}. Consider using Text component instead.`;
+      r.push({ message: n, severity: "info" }), process.env.NODE_ENV !== "production" && console.info(
+        `Heading tag '${e}' is better suited for Text components than '${t}'`
+      );
+    }
+    if (["form", "fieldset", "legend"].includes(e) && !["VStack", "HStack", "Form"].includes(t)) {
+      const n = `Form tag '${e}' used on ${t}. Ensure proper form semantics.`;
+      r.push({ message: n, severity: "info" }), process.env.NODE_ENV !== "production" && console.info(
+        `Form tag '${e}' requires proper semantic context for component '${t}'`
+      );
+    }
+    return r;
+  }
+}
+let H = {
+  autoApplySemanticRoles: !0,
+  warnOnOverrides: process.env.NODE_ENV !== "production",
+  warnOnSemanticIssues: process.env.NODE_ENV !== "production",
+  validateTags: !0,
+  allowInvalidTags: !0
+};
+function Ii(i) {
+  H = { ...H, ...i };
+}
+function K() {
+  return { ...H };
+}
+function li(i, e, t) {
+  const r = t || e, n = K();
+  let s = { valid: !0 };
+  return t && (n.warnOnOverrides && di(i, t) && process.env.NODE_ENV !== "production" && console.warn(
+    `Element override: ${i} changed from '${e}' to '${t}'`
+  ), n.validateTags && (s = ui.validate(t, i), !s.valid && !n.allowInvalidTags)) ? (process.env.NODE_ENV !== "production" && console.warn(
+    `Invalid tag '${t}' rejected for '${i}', using default '${e}' instead`
+  ), { tag: e, validation: s }) : { tag: r, validation: s };
+}
+function Ri(i, e) {
+  return (t) => li(i, e, t);
+}
+var pi = Object.defineProperty, hi = (i, e, t) => e in i ? pi(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, fi = (i, e, t) => hi(i, e + "", t);
+const Z = class _ {
+  static getInstance() {
+    return _.instance || (_.instance = new _()), _.instance;
+  }
+  /**
+   * Apply semantic ARIA attributes to an element based on its tag
+   */
+  applySemanticAttributes(e, t, r) {
+    const n = K();
+    if (!n.autoApplySemanticRoles) return;
+    const s = T.get(t);
+    if (!(!s || !s.applyARIA)) {
+      if (r?.role) {
+        n.warnOnSemanticIssues && process.env.NODE_ENV !== "production" && console.warn(
+          `ARIA role '${r.role}' overrides semantic role '${s.role}' for tag '${t}'`
+        );
+        return;
+      }
+      if (e.hasAttribute("role")) {
+        n.warnOnSemanticIssues && process.env.NODE_ENV !== "production" && console.warn(
+          `Existing role attribute overrides semantic role '${s.role}' for tag '${t}'`
+        );
+        return;
+      }
+      e.setAttribute("role", s.role), n.warnOnSemanticIssues && process.env.NODE_ENV !== "production" && console.info(
+        `Applied semantic role '${s.role}' to tag '${t}'`
+      );
+    }
+  }
+  /**
+   * Get semantic role information for a tag
+   */
+  getSemanticRole(e) {
+    return T.get(e);
+  }
+  /**
+   * Check if a tag has automatic ARIA role application enabled
+   */
+  hasAutoARIA(e) {
+    const t = T.get(e);
+    return t ? t.applyARIA : !1;
+  }
+  /**
+   * Get all tags that support automatic ARIA roles
+   */
+  getAutoARIATags() {
+    return Array.from(T.entries()).filter(([, e]) => e.applyARIA).map(([e]) => e);
+  }
+  /**
+   * Apply semantic attributes during DOM node creation
+   * This is called by the renderer when creating elements
+   */
+  processElementNode(e, t, r, n) {
+    if (this.applySemanticAttributes(e, t, n), r && process.env.NODE_ENV !== "production") {
+      const s = this.getSemanticRole(t);
+      s && e.setAttribute(
+        "data-tachui-semantic",
+        JSON.stringify({
+          originalComponent: r.originalType,
+          overriddenTo: t,
+          semanticRole: s.role,
+          autoApplied: s.applyARIA
+        })
+      );
+    }
+  }
+};
+fi(Z, "instance");
+let mi = Z;
+const P = mi.getInstance(), Ni = (i, e, t) => P.applySemanticAttributes(i, e, t), ki = (i) => P.getSemanticRole(i), Bi = (i) => P.hasAutoARIA(i);
+var gi = Object.defineProperty, yi = (i, e, t) => e in i ? gi(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, k = (i, e, t) => yi(i, typeof e != "symbol" ? e + "" : e, t);
+class bi {
+  constructor() {
+    k(this, "nodeMap", /* @__PURE__ */ new WeakMap()), k(this, "cleanupMap", /* @__PURE__ */ new WeakMap()), k(this, "renderedNodes", /* @__PURE__ */ new Set());
+  }
+  /**
+   * Render a DOM node to an actual DOM element
+   */
+  render(e, t) {
+    return Array.isArray(e) ? this.renderFragment(e, t) : this.renderSingle(e, t);
+  }
+  /**
+   * Render a single DOM node
+   */
+  renderSingle(e, t) {
+    this.renderedNodes.add(e);
+    let r;
+    switch (e.type) {
+      case "element":
+        r = this.createElement(e);
+        break;
+      case "text":
+        r = this.createTextNode(e);
+        break;
+      case "comment":
+        r = this.createComment(e);
+        break;
+      default:
+        throw new Error(`Unknown node type: ${e.type}`);
+    }
+    if (this.nodeMap.set(e, r), e.element = r, r instanceof Element) {
+      let n = [];
+      "modifiers" in e && Array.isArray(e.modifiers) && e.modifiers.length > 0 && (n = e.modifiers), "componentMetadata" in e && e.componentMetadata?.modifiers && Array.isArray(e.componentMetadata.modifiers) && e.componentMetadata.modifiers.length > 0 && (n = e.componentMetadata.modifiers), n.length > 0 && this.applyModifiersToElement(r, n, e);
+    }
+    return e.dispose && this.addCleanup(r, e.dispose), t && t.appendChild(r), r;
+  }
+  /**
+   * Render multiple nodes as a document fragment
+   */
+  renderFragment(e, t) {
+    const r = document.createDocumentFragment();
+    return e.forEach((n) => {
+      const s = this.renderSingle(n);
+      r.appendChild(s);
+    }), t && t.appendChild(r), r;
+  }
+  /**
+   * Create a DOM element with props and children
+   */
+  createElement(e) {
+    if (!e.tag)
+      throw new Error("Element node must have a tag");
+    const t = document.createElement(e.tag);
+    if (this.applyDebugAttributes(t, e), e.props && this.applyProps(t, e.props), "componentMetadata" in e && e.componentMetadata) {
+      const r = e.componentMetadata;
+      if (r.overriddenTo && r.originalType)
+        try {
+          P.processElementNode(
+            t,
+            e.tag,
+            r,
+            e.props?.aria || void 0
+          );
+        } catch (n) {
+          console.warn("[tachUI] Could not process semantic attributes:", n);
+        }
+    }
+    return e.children && e.children.length > 0 && e.children.forEach((r) => {
+      const n = this.renderSingle(r);
+      t.appendChild(n);
+    }), t;
+  }
+  /**
+   * Apply debug attributes to DOM element if debug mode is enabled
+   */
+  applyDebugAttributes(e, t) {
+  }
+  /**
+   * Create a text node
+   */
+  createTextNode(e) {
+    return document.createTextNode(e.text || "");
+  }
+  /**
+   * Create a comment node
+   */
+  createComment(e) {
+    return document.createComment(e.text || "");
+  }
+  /**
+   * Apply props to a DOM element with reactive updates
+   */
+  applyProps(e, t) {
+    Object.entries(t).forEach(([r, n]) => {
+      this.applyProp(e, r, n);
+    });
+  }
+  /**
+   * Apply a single prop to an element
+   */
+  applyProp(e, t, r) {
+    if (t === "className" || t === "class") {
+      this.applyClassName(e, r);
+      return;
+    }
+    if (t === "style") {
+      this.applyStyle(e, r);
+      return;
+    }
+    if (t.startsWith("on") && typeof r == "function") {
+      this.applyEventListener(e, t, r);
+      return;
+    }
+    if (S(r) || E(r)) {
+      const n = y(() => {
+        const s = r();
+        this.setElementProp(e, t, s);
+      });
+      this.addCleanup(e, () => {
+        n.dispose();
+      });
+      return;
+    }
+    this.setElementProp(e, t, r);
+  }
+  /**
+   * Set a property on an element
+   */
+  setElementProp(e, t, r) {
+    if (r == null) {
+      e.removeAttribute(t);
+      return;
+    }
+    if (typeof r == "boolean") {
+      r ? e.setAttribute(t, "") : e.removeAttribute(t);
+      return;
+    }
+    e.setAttribute(t, String(r));
+  }
+  /**
+   * Apply className with reactive updates
+   */
+  applyClassName(e, t) {
+    if (S(t) || E(t)) {
+      const r = y(() => {
+        const n = t();
+        e.className = this.normalizeClassName(n);
+      });
+      this.addCleanup(e, () => {
+        r.dispose();
+      });
+    } else
+      e.className = this.normalizeClassName(t);
+  }
+  /**
+   * Normalize className value
+   */
+  normalizeClassName(e) {
+    return Array.isArray(e) ? e.filter(Boolean).join(" ") : typeof e == "object" && e !== null ? Object.entries(e).filter(([, t]) => !!t).map(([t]) => t).join(" ") : String(e || "");
+  }
+  /**
+   * Apply styles with reactive updates
+   */
+  applyStyle(e, t) {
+    const r = e;
+    if (S(t) || E(t)) {
+      const n = y(() => {
+        const s = t();
+        this.setElementStyles(r, s);
+      });
+      this.addCleanup(e, () => {
+        n.dispose();
+      });
+    } else
+      this.setElementStyles(r, t);
+  }
+  /**
+   * Set styles on an element
+   */
+  setElementStyles(e, t) {
+    if (typeof t == "string") {
+      e.style.cssText = t;
+      return;
+    }
+    typeof t == "object" && t !== null && Object.entries(t).forEach(([r, n]) => {
+      if (S(n) || E(n)) {
+        const s = y(() => {
+          const o = n();
+          o == null ? e.style.removeProperty(r) : e.style.setProperty(
+            r.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`),
+            String(o)
+          );
+        });
+        this.addCleanup(e, () => {
+          s.dispose();
+        });
+      } else
+        n == null ? e.style.removeProperty(r) : e.style.setProperty(
+          r.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`),
+          String(n)
+        );
+    });
+  }
+  /**
+   * Apply event listener
+   */
+  applyEventListener(e, t, r) {
+    const n = t.slice(2).toLowerCase(), s = (o) => {
+      try {
+        r(o);
+      } catch (c) {
+        console.error(`Event handler error for ${t}:`, c);
+      }
+    };
+    e.addEventListener(n, s), this.addCleanup(e, () => {
+      e.removeEventListener(n, s);
+    });
+  }
+  /**
+   * Add cleanup function for an element
+   */
+  addCleanup(e, t) {
+    const r = this.cleanupMap.get(e) || [];
+    r.push(t), this.cleanupMap.set(e, r);
+  }
+  /**
+   * Update an existing DOM node
+   */
+  updateNode(e, t) {
+    const r = this.nodeMap.get(e);
+    !r || typeof r.setAttribute != "function" || t && this.applyProps(r, t);
+  }
+  /**
+   * Remove a DOM node and run cleanup
+   */
+  removeNode(e) {
+    const t = this.nodeMap.get(e);
+    if (!t) return;
+    const r = this.cleanupMap.get(t);
+    r && (r.forEach((n) => {
+      try {
+        n();
+      } catch (s) {
+        console.error("Cleanup error:", s);
+      }
+    }), this.cleanupMap.delete(t)), t.parentNode && t.parentNode.removeChild(t), this.nodeMap.delete(e), e.element !== void 0 && (e.element = void 0);
+  }
+  /**
+   * Create reactive text content
+   */
+  createReactiveText(e) {
+    const t = document.createTextNode("");
+    return y(() => {
+      t.textContent = e();
+    }), t;
+  }
+  /**
+   * Create reactive element with dynamic props
+   */
+  createReactiveElement(e, t, r) {
+    const n = document.createElement(e);
+    return y(() => {
+      const s = t();
+      this.applyProps(n, s);
+    }), r && r.forEach((s) => {
+      const o = this.renderSingle(s);
+      n.appendChild(o);
+    }), n;
+  }
+  /**
+   * Apply modifiers to a DOM element
+   */
+  applyModifiersToElement(e, t, r) {
+    try {
+      const n = r.componentInstance || r.componentMetadata && r.componentMetadata.componentInstance || r;
+      ei(
+        r,
+        t,
+        {
+          element: e,
+          componentId: r.componentId || "unknown",
+          phase: "creation",
+          componentInstance: n
+          // Pass the component instance
+        },
+        {
+          batch: !0
+          // Enable batched modifier application
+        }
+      );
+    } catch (n) {
+      console.error("Failed to apply modifiers to element:", n);
+    }
+  }
+  /**
+   * Cleanup all tracked elements
+   */
+  cleanup() {
+    for (const e of this.renderedNodes)
+      if (e.dispose && typeof e.dispose == "function")
+        try {
+          e.dispose();
+        } catch (t) {
+          console.error("Cleanup error:", t);
+        }
+    this.renderedNodes.clear(), this.nodeMap = /* @__PURE__ */ new WeakMap(), this.cleanupMap = /* @__PURE__ */ new WeakMap();
+  }
+}
+const B = new bi();
+function Di(i, e) {
+  return q(() => {
+    let t = [];
+    const r = y(() => {
+      t.forEach((o) => {
+        B.removeNode(o);
+      });
+      const n = i.render(), s = Array.isArray(n) ? n : [n];
+      t = s, s.forEach((o) => {
+        B.render(o, e);
+      });
+    });
+    return () => {
+      r.dispose(), t.forEach((n) => {
+        B.removeNode(n);
+      });
+    };
+  });
+}
+function vi(i, e, ...t) {
+  const r = t.flat().filter((s) => s != null).map((s) => typeof s == "string" || typeof s == "number" ? { type: "text", text: String(s) } : s);
+  return {
+    type: "element",
+    tag: i,
+    props: e || {},
+    children: r
+  };
+}
+function Hi(i) {
+  if (S(i) || E(i) || typeof i == "function") {
+    const e = {
+      type: "text",
+      text: "",
+      dispose: void 0
+    }, t = q(() => {
+      const r = y(() => {
+        const n = i();
+        if (e.text = String(n), e.element && e.element instanceof Text) {
+          const s = e.element.parentElement;
+          if (s && s.__tachui_asHTML)
+            return;
+          e.element.textContent = e.text;
+        }
+      });
+      return () => {
+        r.dispose();
+      };
+    });
+    return e.dispose = t, e;
+  }
+  return {
+    type: "text",
+    text: i
+  };
+}
+var wi = Object.defineProperty, Si = (i, e, t) => e in i ? wi(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, v = (i, e, t) => Si(i, typeof e != "symbol" ? e + "" : e, t);
+class b {
+  // Make segments public
+  constructor(e, t, r = !0) {
+    this.metadata = t, v(this, "type", "component"), v(this, "id"), v(this, "mounted", !1), v(this, "cleanup", []), v(this, "props", {}), v(this, "segments"), this.id = `concat-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.segments = e;
+  }
+  /**
+   * Render the concatenated component to DOM nodes (Enhanced - Phase 4.2)
+   */
+  render() {
+    const e = this.determineContainerClass(), t = this.buildAccessibilityLabel(), r = this.buildAccessibilityAttributes(), n = this.segments.map((o) => o.render()).flat();
+    return [vi("span", {
+      class: `tachui-concatenated ${e}`,
+      ...r,
+      "aria-label": t || void 0,
+      // Enhanced live region support for dynamic content
+      ...this.hasInteractiveContent() && {
+        "aria-live": "polite",
+        "aria-atomic": "true"
+      },
+      // Add debug information in development
+      ...process.env.NODE_ENV === "development" && {
+        "data-concatenated-segments": this.segments.length,
+        "data-semantic-structure": this.metadata.semanticStructure,
+        "data-accessibility-role": this.metadata.accessibilityRole
+      }
+    }, ...n)];
+  }
+  /**
+   * Build comprehensive accessibility attributes
+   */
+  buildAccessibilityAttributes() {
+    const e = {};
+    switch (this.metadata.accessibilityRole) {
+      case "text":
+        break;
+      case "group":
+        e.role = "group", e["aria-describedby"] = this.generateGroupDescription();
+        break;
+      case "composite":
+        e.role = "group", e["aria-roledescription"] = "interactive content group";
+        break;
+    }
+    return this.metadata.semanticStructure === "mixed" && this.segments.length > 2 && (e["aria-flowto"] = this.generateFlowTargets()), this.hasInteractiveContent() && (e.tabindex = "0", e["aria-description"] = "Contains interactive elements. Use Tab to navigate."), e;
+  }
+  /**
+   * Generate description for grouped content
+   */
+  generateGroupDescription() {
+    const e = this.getUniqueComponentTypes();
+    return e.length === 1 ? `Group of ${this.segments.length} ${e[0]} elements` : `Group containing ${e.join(", ")} elements`;
+  }
+  /**
+   * Generate flow targets for reading order
+   */
+  generateFlowTargets() {
+    return "";
+  }
+  /**
+   * Check if concatenated content contains interactive elements
+   */
+  hasInteractiveContent() {
+    return this.segments.some((e) => {
+      const t = e.component.constructor.name;
+      return t === "EnhancedButton" || t === "EnhancedLinkComponent";
+    });
+  }
+  /**
+   * Get unique component types in this concatenation
+   */
+  getUniqueComponentTypes() {
+    const e = new Set(this.segments.map((t) => {
+      switch (t.component.constructor.name) {
+        case "EnhancedText":
+          return "text";
+        case "EnhancedImage":
+          return "image";
+        case "EnhancedButton":
+          return "button";
+        case "EnhancedLinkComponent":
+          return "link";
+        default:
+          return "component";
+      }
+    }));
+    return Array.from(e);
+  }
+  /**
+   * Concatenate this component with another concatenatable component
+   */
+  concat(e) {
+    let t, r;
+    return e instanceof b ? (t = [...this.segments, ...e.segments], r = this.mergeMetadata(this.metadata, e.metadata, t.length)) : (t = [...this.segments, e.toSegment()], r = this.mergeMetadata(
+      this.metadata,
+      {
+        totalSegments: 1,
+        accessibilityRole: this.determineComponentAccessibilityRole(e),
+        semanticStructure: this.determineComponentSemanticStructure(e)
+      },
+      t.length
+    )), new b(t, r);
+  }
+  /**
+   * Convert this concatenated component to a segment (for further concatenation)
+   */
+  toSegment() {
+    return {
+      id: this.id,
+      component: this,
+      // Cast to satisfy interface requirements
+      modifiers: [],
+      // Concatenated components don't have their own modifiers
+      render: () => this.render()[0]
+    };
+  }
+  /**
+   * Check if this component supports concatenation
+   */
+  isConcatenatable() {
+    return !0;
+  }
+  /**
+   * Determine the appropriate CSS class for the container
+   */
+  determineContainerClass() {
+    const e = this.segments.map((o) => o.component.constructor.name), t = e.some((o) => o === "EnhancedImage"), r = e.some((o) => o === "EnhancedText"), n = e.some((o) => o === "EnhancedButton"), s = e.some((o) => o === "EnhancedLink");
+    return t && r && (n || s) ? "mixed-content" : t && r ? "image-text-composition" : t && !r ? "image-composition" : r && !t ? "text-composition" : "generic-composition";
+  }
+  /**
+   * Build comprehensive accessibility label for screen readers (Enhanced - Phase 4.2)
+   */
+  buildAccessibilityLabel() {
+    const t = this.segments.map((r) => this.extractAccessibilityText(r)).filter(Boolean);
+    return t.length === 0 ? "" : this.joinAccessibilityLabels(t);
+  }
+  /**
+   * Intelligently join accessibility labels based on content and structure
+   */
+  joinAccessibilityLabels(e) {
+    if (e.length === 1) return e[0];
+    switch (this.metadata.semanticStructure) {
+      case "inline":
+        return e.join(" ");
+      case "block":
+        return e.join(". ");
+      case "mixed":
+        return this.smartJoinLabels(e);
+      default:
+        return e.join(" ");
+    }
+  }
+  /**
+   * Context-aware label joining for mixed content
+   */
+  smartJoinLabels(e) {
+    const t = [];
+    for (let r = 0; r < e.length; r++) {
+      const n = e[r], s = e[r + 1];
+      t.push(n), s && (this.needsExplicitSeparator(n, s) ? t.push(". ") : t.push(" "));
+    }
+    return t.join("");
+  }
+  /**
+   * Determine if two accessibility labels need explicit separation
+   */
+  needsExplicitSeparator(e, t) {
+    const r = /[.!?:;]$/.test(e.trim()), n = /^[A-Z]/.test(t.trim());
+    return !r && n;
+  }
+  /**
+   * Extract accessibility text from a component segment
+   */
+  extractAccessibilityText(e) {
+    const t = e.component;
+    switch (t.constructor.name) {
+      case "EnhancedText":
+        return t.content || t.title || "";
+      case "EnhancedImage":
+        return t.alt || t.accessibilityLabel || "Image";
+      case "EnhancedButton":
+        return t.title || t.accessibilityLabel || "Button";
+      case "EnhancedLink":
+        return t.title || t.accessibilityLabel || "Link";
+      case "ConcatenatedComponent":
+        return t.buildAccessibilityLabel();
+      default:
+        return t.accessibilityLabel || "";
+    }
+  }
+  /**
+   * Merge metadata from two concatenation operations
+   */
+  mergeMetadata(e, t, r) {
+    return {
+      totalSegments: r,
+      accessibilityRole: this.mergeAccessibilityRoles(
+        e.accessibilityRole,
+        t.accessibilityRole
+      ),
+      semanticStructure: this.mergeSemanticStructures(
+        e.semanticStructure,
+        t.semanticStructure
+      )
+    };
+  }
+  /**
+   * Merge accessibility roles from two components
+   */
+  mergeAccessibilityRoles(e, t) {
+    return e === "text" && t === "text" ? "text" : e === "composite" || t === "composite" ? "composite" : "group";
+  }
+  /**
+   * Merge semantic structures from two components
+   */
+  mergeSemanticStructures(e, t) {
+    return e === "inline" && t === "inline" ? "inline" : e === "block" && t === "block" ? "block" : "mixed";
+  }
+  /**
+   * Determine accessibility role for a single component
+   */
+  determineComponentAccessibilityRole(e) {
+    switch (e.constructor.name) {
+      case "EnhancedText":
+        return "text";
+      case "EnhancedImage":
+        return "group";
+      case "EnhancedButton":
+      case "EnhancedLink":
+        return "group";
+      default:
+        return "composite";
+    }
+  }
+  /**
+   * Determine semantic structure for a single component
+   */
+  determineComponentSemanticStructure(e) {
+    switch (e.constructor.name) {
+      case "EnhancedText":
+      case "EnhancedImage":
+        return "inline";
+      case "EnhancedButton":
+      case "EnhancedLink":
+        return "inline";
+      // Buttons and links are typically inline in concatenation
+      default:
+        return "mixed";
+    }
+  }
+  /**
+   * Generate comprehensive accessibility tree for this concatenated component
+   */
+  generateAccessibilityTree() {
+    return {
+      role: this.metadata.accessibilityRole,
+      label: this.buildAccessibilityLabel(),
+      children: this.segments.map((e) => this.segmentToAccessibilityNode(e))
+    };
+  }
+  /**
+   * Convert a component segment to an accessibility node
+   */
+  segmentToAccessibilityNode(e) {
+    const t = e.component;
+    return {
+      role: this.determineComponentAccessibilityRole(t),
+      label: this.extractAccessibilityText(e),
+      children: t instanceof b ? t.generateAccessibilityTree().children : void 0
+    };
+  }
+}
+export {
+  Ii as A,
+  K as B,
+  b as C,
+  bi as D,
+  ui as E,
+  li as F,
+  Ri as G,
+  mi as H,
+  P as I,
+  Ni as J,
+  ki as K,
+  Bi as L,
+  Xt as M,
+  xe as N,
+  me as O,
+  ge as P,
+  ye as Q,
+  be as R,
+  T as S,
+  J as T,
+  $i as U,
+  ai as V,
+  Pi as W,
+  Mi as a,
+  ei as b,
+  X as c,
+  oi as d,
+  Li as e,
+  D as f,
+  Qt as g,
+  f as h,
+  Ci as i,
+  A as j,
+  re as k,
+  x as l,
+  xi as m,
+  se as n,
+  ne as o,
+  Le as p,
+  oe as q,
+  ae as r,
+  ce as s,
+  de as t,
+  ue as u,
+  vi as v,
+  Di as w,
+  Hi as x,
+  ci as y,
+  di as z
+};