@tachui/core 0.8.1-alpha → 0.8.5-alpha

package/dist/concatenated-component-_tF1eMvy.js

@@ -0,0 +1,2288 @@
+import { globalModifierRegistry as C } from "@tachui/registry";
+import "./scheduler-DI_8ykMk.js";
+import { i as w, d as x, n as j, u as U } from "./theme-BFaKUcjZ.js";
+import { c as E } from "./effect-DGmdACI2.js";
+import "@tachui/types/reactive";
+var F = Object.defineProperty, G = (n, e, t) => e in n ? F(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, z = (n, e, t) => G(n, e + "", t);
+const K = /* @__PURE__ */ new Set([
+  "onFocus",
+  "onBlur",
+  "onKeyDown",
+  "onKeyUp",
+  "onKeyPress",
+  "onScroll",
+  "onWheel",
+  "onInput",
+  "onChange",
+  "onCopy",
+  "onCut",
+  "onPaste",
+  "onSelect",
+  "onTouchStart",
+  "onTouchMove",
+  "onTouchEnd",
+  "onSwipeLeft",
+  "onSwipeRight"
+]);
+let P = null;
+function Ne(n) {
+  P = n, console.debug(
+    "[RegistryBridge] External modifier registry set with",
+    n?.list()?.length || 0,
+    "modifiers"
+  );
+}
+function B() {
+  return P || C;
+}
+function l(n, ...e) {
+  const i = B().get(n);
+  if (i)
+    try {
+      return i.apply(null, e);
+    } catch (s) {
+      throw console.warn(`Error creating modifier '${n}':`, s), s;
+    }
+  throw new Error(
+    `Modifier '${n}' not found in registry. Import @tachui/modifiers or @tachui/modifiers/effects to register modifiers.`
+  );
+}
+class q {
+  constructor(e) {
+    this.component = e, z(this, "modifiers", []);
+  }
+  frame(e, t) {
+    let i;
+    return typeof e == "object" ? i = e : (i = {}, e !== void 0 && (i.width = e), t !== void 0 && (i.height = t)), this.modifiers.push(l("frame", i)), this;
+  }
+  // margin() moved to @tachui/modifiers - available via Proxy when imported
+  layoutPriority(e) {
+    return this.modifiers.push(l("layoutPriority", e)), this;
+  }
+  // Size, padding, and margin modifiers moved to @tachui/modifiers
+  // All available via Proxy when @tachui/modifiers is imported:
+  // - size(), width(), height(), minWidth(), maxWidth(), minHeight(), maxHeight()
+  // - padding(), paddingTop(), paddingBottom(), paddingLeft(), paddingRight()
+  // - paddingLeading(), paddingTrailing(), paddingHorizontal(), paddingVertical()
+  // - marginTop(), marginBottom(), marginLeft(), marginRight()
+  // - marginHorizontal(), marginVertical()
+  // Typography modifiers moved to @tachui/modifiers:
+  // typography(), textAlign(), textTransform(), gradientText()
+  // Available via Proxy when @tachui/modifiers is imported
+  // Text modifiers (lineClamp, wordBreak, overflowWrap, hyphens) moved to @tachui/modifiers
+  // Available via Proxy when @tachui/modifiers is imported
+  // position() and zIndex() methods have been migrated to @tachui/modifiers/layout
+  // for enhanced SwiftUI-compatible functionality
+  // Text spacing and overflow methods moved to @tachui/modifiers:
+  // letterSpacing(), lineHeight(), textOverflow(), whiteSpace(), overflow()
+  // Border modifiers moved to @tachui/modifiers:
+  // borderTop(), borderRight(), borderBottom(), borderLeft()
+  // Flexbox modifiers moved to @tachui/modifiers:
+  // flexGrow(), flexShrink(), justifyContent(), alignItems(), gap(), flexDirection(), flexWrap()
+  // Utility modifiers moved to @tachui/modifiers:
+  // cursor(), overflowX(), overflowY(), outline(), outlineOffset(), display()
+  // Raw CSS modifiers moved to @tachui/modifiers/utility
+  // Import { css } from '@tachui/modifiers/utility' and apply explicitly.
+  // textCase(), textDecoration(), and aspectRatio() moved to @tachui/modifiers
+  // Available via Proxy when @tachui/modifiers is imported
+  // 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(l("absolutePosition", e, t)), this;
+  }
+  // Appearance modifiers
+  foregroundColor(e) {
+    return this.modifiers.push(l("foregroundColor", e)), this;
+  }
+  backgroundColor(e) {
+    return this.modifiers.push(l("backgroundColor", e)), this;
+  }
+  background(e) {
+    const t = l("background", e);
+    return this.modifiers.push(t), this;
+  }
+  font(e) {
+    let t;
+    return typeof e == "object" ? (t = e, t.family !== void 0 && this.modifiers.push(
+      l("fontFamily", t.family)
+    ), t.size !== void 0 && this.modifiers.push(l("fontSize", t.size)), t.weight !== void 0 && this.modifiers.push(l("fontWeight", t.weight)), t.style !== void 0 && this.modifiers.push(l("fontStyle", t.style))) : (t = e !== void 0 ? { size: e } : {}, typeof e == "string" && e.startsWith(".") ? this.modifiers.push(l("fontPreset", e)) : t.size !== void 0 && this.modifiers.push(l("fontSize", t.size))), this;
+  }
+  fontWeight(e) {
+    return this.modifiers.push(l("fontWeight", e)), this;
+  }
+  fontSize(e) {
+    return this.modifiers.push(l("fontSize", e)), this;
+  }
+  fontFamily(e) {
+    return this.modifiers.push(l("fontFamily", e)), this;
+  }
+  opacity(e) {
+    return this.modifiers.push(l("opacity", e)), this;
+  }
+  cornerRadius(e) {
+    return this.modifiers.push(l("cornerRadius", e)), this;
+  }
+  border(e, t) {
+    let i;
+    return typeof e == "object" ? i = e : i = {
+      style: "solid",
+      ...e !== void 0 && { width: e },
+      ...t !== void 0 && { color: t }
+    }, this.modifiers.push(l("border", i)), this;
+  }
+  borderWidth(e) {
+    return this.modifiers.push(l("border", { width: e })), this;
+  }
+  // Shadow functionality moved to @tachui/modifiers/effects entry point
+  // Visual Effects Modifiers (Phase 2 - Epic: Butternut)
+  blur(e) {
+    return this.modifiers.push(l("blur", e)), this;
+  }
+  brightness(e) {
+    return this.modifiers.push(l("brightness", e)), this;
+  }
+  contrast(e) {
+    return this.modifiers.push(l("contrast", e)), this;
+  }
+  saturation(e) {
+    return this.modifiers.push(l("saturation", e)), this;
+  }
+  hueRotation(e) {
+    return this.modifiers.push(l("hueRotation", e)), this;
+  }
+  grayscale(e) {
+    return this.modifiers.push(l("grayscale", e)), this;
+  }
+  colorInvert(e = 1) {
+    return this.modifiers.push(l("colorInvert", e)), this;
+  }
+  // ============================================================================
+  // VISUAL EFFECTS MOVED TO @tachui/modifiers/effects ENTRY
+  // ============================================================================
+  //
+  // Visual effects have been extracted to @tachui/modifiers/effects for better tree-shaking
+  // Visual effects methods removed - use @tachui/modifiers/effects
+  // Advanced gesture and interaction modifiers moved to @tachui/modifiers
+  // Available via Proxy when @tachui/modifiers is imported:
+  // - onLongPressGesture(), keyboardShortcut(), focused(), focusable(), onContinuousHover()
+  highPriorityGesture(e, t) {
+    return this.modifiers.push(l("highPriorityGesture", e, t)), this;
+  }
+  simultaneousGesture(e, t) {
+    return this.modifiers.push(l("simultaneousGesture", e, t)), this;
+  }
+  // allowsHitTesting() moved to @tachui/modifiers - available via Proxy when imported
+  // Animation modifiers
+  transform(e) {
+    return this.modifiers.push(l("transform", e)), this;
+  }
+  animation(e) {
+    return this.modifiers.push(l("animation", e)), this;
+  }
+  // Lifecycle modifiers
+  task(e, t) {
+    return this.modifiers.push(
+      l("task", {
+        operation: e,
+        id: t?.id,
+        priority: t?.priority || "default"
+      })
+    ), this;
+  }
+  // Custom modifier application
+  /**
+   * @deprecated DO NOT USE - This is an internal API only.
+   * Always use direct modifier methods instead of .modifier()
+   *
+   * BAD:  component.modifier(padding(16))
+   * GOOD: component.padding(16)
+   *
+   * If you need a modifier from @tachui/modifiers, import and use it directly:
+   * BAD:  component.modifier(shadow({ radius: 4 }))
+   * GOOD: import { shadow } from '@tachui/modifiers'
+   *       const mod = shadow({ radius: 4 })
+   *       // Then apply via registry or component method
+   */
+  modifier(e) {
+    return process.env.NODE_ENV === "development" && console.warn(
+      `⚠️ .modifier() should NOT be used by developers.
+Use direct modifier methods instead:
+  BAD:  component.modifier(padding(16))
+  GOOD: component.padding(16)
+
+If the method doesn't exist on the component, import the modifier package:
+  import { shadowModifier } from '@tachui/modifiers'
+
+This method is for internal framework use only.`
+    ), this.modifiers.push(e), this;
+  }
+  // Public method to add a modifier (used by Proxy)
+  addModifierInternal(e) {
+    return this.modifiers.push(e), this;
+  }
+  // Resizable modifier for images
+  resizable() {
+    return this.modifiers.push(l("resizable")), 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(l("onTap", e)), this;
+  }
+  onFocus(e) {
+    return this.modifiers.push(l("onFocus", e)), this;
+  }
+  onBlur(e) {
+    return this.modifiers.push(l("onBlur", e)), this;
+  }
+  onKeyDown(e) {
+    return this.modifiers.push(l("onKeyDown", e)), this;
+  }
+  onScroll(e) {
+    return this.modifiers.push(l("onScroll", e)), this;
+  }
+  onKeyPress(e) {
+    return this.modifiers.push(l("onKeyPress", e)), this;
+  }
+  onKeyUp(e) {
+    return this.modifiers.push(l("onKeyUp", e)), this;
+  }
+  onDoubleClick(e) {
+    return this.modifiers.push(l("onDoubleClick", e)), this;
+  }
+  onContextMenu(e) {
+    return this.modifiers.push(l("onContextMenu", e)), this;
+  }
+  onWheel(e) {
+    return this.modifiers.push(l("onWheel", e)), this;
+  }
+  onInput(e) {
+    return this.modifiers.push(l("onInput", e)), this;
+  }
+  onChange(e) {
+    return this.modifiers.push(l("onChange", e)), this;
+  }
+  onCopy(e) {
+    return this.modifiers.push(l("onCopy", e)), this;
+  }
+  onCut(e) {
+    return this.modifiers.push(l("onCut", e)), this;
+  }
+  onPaste(e) {
+    return this.modifiers.push(l("onPaste", e)), this;
+  }
+  onSelect(e) {
+    return this.modifiers.push(l("onSelect", e)), this;
+  }
+  // Transition modifier moved to @tachui/modifiers:
+  // transition()
+  // HTML and ARIA Attributes moved to @tachui/modifiers
+  // Available via Proxy when @tachui/modifiers is imported:
+  // - id(), data(), aria(), tabIndex()
+  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(l("disabled", e)), this;
+  }
+  asHTML(e) {
+    const t = l("asHTML", e);
+    return this.modifiers.push(t), this;
+  }
+  // Build the final component with all modifiers applied
+  build() {
+    if ("modifiers" in this.component) {
+      const e = this.component, t = Array.isArray(
+        e.modifiers
+      ) ? [...e.modifiers] : [], i = this.modifiers.filter(
+        (d) => !e.modifiers.some(
+          (u) => u === d
+          // Reference equality check
+        )
+      ), s = [...t, ...i], r = e._originalComponent || e;
+      let o;
+      if (typeof r?.clone == "function")
+        o = r.clone();
+      else {
+        const d = r && Object.getPrototypeOf(r) || Object.prototype;
+        o = Object.create(d), Object.assign(o, r), o.props = { ...r.props }, o.cleanup = Array.isArray(r.cleanup) ? [...r.cleanup] : [], o.mounted = r.mounted ?? !1, o.id = r.id, o.type = r.type, o.render = typeof r.render == "function" ? r.render.bind(r) : () => [];
+      }
+      const a = k(
+        o,
+        s
+      );
+      return process.env.NODE_ENV === "test" && this.applyModifiersToPropsForTesting(
+        a,
+        s
+      ), a;
+    } else {
+      const e = k(
+        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((i) => {
+      if (i.type === "aria") {
+        const r = i.properties?.aria || {};
+        Object.entries(r).forEach(([o, a]) => {
+          if (a != null)
+            if (o === "role")
+              e.props.role = a;
+            else {
+              const d = o.startsWith("aria-") ? o : `aria-${o}`;
+              e.props[d] = typeof a == "boolean" ? a : String(a);
+            }
+        });
+      } else if (K.has(i.type)) {
+        const r = i.properties || {};
+        Object.entries(r).forEach(([o, a]) => {
+          typeof a == "function" && (e.props[o] = a);
+        });
+      } else if (i.type === "interaction") {
+        const r = i.properties;
+        Object.entries(r).forEach(([o, a]) => {
+          typeof a == "function" && (e.props[o] = a);
+        }), (r.onSwipeLeft || r.onSwipeRight) && (e.props.onTouchStart = () => {
+        });
+      } else if (i.type === "utility") {
+        const r = i.properties;
+        e.props.style || (e.props.style = {}), Object.entries(r).forEach(([o, a]) => {
+          a != null && (e.props.style[o] = a);
+        });
+      } else if (i.type === "tabIndex") {
+        const s = i;
+        e.props.tabIndex = s.properties?.tabIndex;
+      } else if (i.type === "appearance") {
+        const r = i.properties;
+        e.props.style || (e.props.style = {}), r.backgroundColor && (e.props.style.backgroundColor = r.backgroundColor), r.foregroundColor && (e.props.style.color = r.foregroundColor), r.opacity !== void 0 && (e.props.style.opacity = r.opacity), r.role !== void 0 && (e.props.role = String(r.role)), r["aria-label"] !== void 0 && (e.props["aria-label"] = String(r["aria-label"])), r["aria-live"] !== void 0 && (e.props["aria-live"] = String(r["aria-live"])), r["aria-describedby"] !== void 0 && (e.props["aria-describedby"] = String(
+          r["aria-describedby"]
+        )), r["aria-modal"] !== void 0 && (e.props["aria-modal"] = r["aria-modal"] === "true" || r["aria-modal"] === !0), r["aria-hidden"] !== void 0 && (e.props["aria-hidden"] = String(r["aria-hidden"])), r.navigationTitle !== void 0 && (e.props.navigationTitle = String(r.navigationTitle)), r.navigationBarHidden !== void 0 && (e.props.navigationBarHidden = r.navigationBarHidden, r.navigationBarHidden && (e.props["aria-hidden"] = "true")), r.navigationBarItems !== void 0 && (e.props.navigationBarItems = r.navigationBarItems);
+      } else if (i.type === "foreground") {
+        const r = i.properties || {};
+        r.color !== void 0 && (e.props.style || (e.props.style = {}), e.props.style.color = r.color);
+      } else if (i.type === "background") {
+        const r = i.properties || {};
+        r.background !== void 0 && (e.props.style || (e.props.style = {}), e.props.style.background = r.background, typeof r.background == "string" && (e.props.style.backgroundColor = r.background));
+      } else if (i.type === "transition") {
+        const r = i.properties;
+        e.props.style || (e.props.style = {}), r.transition && (e.props.style.transition = r.transition);
+      } else if (i.type === "size") {
+        const r = i.properties;
+        e.props.style || (e.props.style = {}), r.minHeight !== void 0 && (e.props.style.minHeight = r.minHeight), r.minWidth !== void 0 && (e.props.style.minWidth = r.minWidth), r.maxHeight !== void 0 && (e.props.style.maxHeight = r.maxHeight), r.maxWidth !== void 0 && (e.props.style.maxWidth = r.maxWidth), r.width !== void 0 && (e.props.style.width = r.width), r.height !== void 0 && (e.props.style.height = r.height);
+      } else if (i.type === "css") {
+        const r = i.properties;
+        e.props.style || (e.props.style = {}), Object.entries(r).forEach(([o, a]) => {
+          a != null && (e.props.style[o] = a);
+        });
+      }
+    });
+  }
+  // ============================================================================
+  // MISSING MODIFIER METHODS - ACCESSIBILITY & NAVIGATION
+  // ============================================================================
+  // Individual ARIA methods for better developer experience
+  role(e) {
+    return this.modifiers.push(l("role", e)), this;
+  }
+  ariaLabel(e) {
+    return this.modifiers.push(l("ariaLabel", e)), this;
+  }
+  ariaLive(e) {
+    return this.modifiers.push(l("ariaLive", e)), this;
+  }
+  ariaDescribedBy(e) {
+    return this.modifiers.push(l("ariaDescribedBy", e)), this;
+  }
+  ariaModal(e) {
+    return this.modifiers.push(l("ariaModal", e)), this;
+  }
+  // Touch and gesture events
+  onTouchStart(e) {
+    return this.modifiers.push(l("onTouchStart", e)), this;
+  }
+  onTouchMove(e) {
+    return this.modifiers.push(l("onTouchMove", e)), this;
+  }
+  onTouchEnd(e) {
+    return this.modifiers.push(l("onTouchEnd", e)), this;
+  }
+  // Swipe gestures (simplified implementations)
+  onSwipeLeft(e) {
+    return this.modifiers.push(l("onSwipeLeft", e)), this;
+  }
+  onSwipeRight(e) {
+    return this.modifiers.push(l("onSwipeRight", e)), this;
+  }
+  // Navigation methods - these delegate to the navigation package functions
+  navigationTitle(e) {
+    return this.modifiers.push(l("navigationTitle", e)), this;
+  }
+  navigationBarHidden(e = !0) {
+    return this.modifiers.push(l("navigationBarHidden", e)), this;
+  }
+  navigationBarItems(e) {
+    return this.modifiers.push(l("navigationBarItems", e)), this;
+  }
+  // ============================================================================
+  // MISSING TRANSITION METHODS
+  // ============================================================================
+  transitions(e) {
+    return this.modifiers.push(l("transitions", e)), this;
+  }
+  // All transition methods moved to @tachui/modifiers:
+  // fadeTransition(), transformTransition(), colorTransition(), layoutTransition(),
+  // buttonTransition(), cardTransition(), modalTransition(), smoothTransition(),
+  // quickTransition(), slowTransition()
+  // ============================================================================
+  // SCROLL METHODS - ALL MOVED TO @tachui/modifiers
+  // ============================================================================
+  // scroll(), scrollBehavior(), overscrollBehavior(), overscrollBehaviorX(),
+  // overscrollBehaviorY(), scrollMargin(), scrollPadding(), scrollSnap()
+  // ============================================================================
+  // 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, i) {
+    return this.modifiers.push(l("scaleEffect", e, t, i)), this;
+  }
+  // Shadow and clipping modifiers moved to @tachui/modifiers
+  // Available via Proxy when @tachui/modifiers is imported:
+  // - shadow(), textShadow(), shadows(), shadowPreset(), clipped()
+}
+function O(n) {
+  const e = new q(n);
+  return new Proxy(e, {
+    get(t, i, s) {
+      if (i in t) {
+        const r = t[i];
+        return typeof r == "function" ? function(...o) {
+          const a = r.apply(s, o);
+          return a === t ? s : a;
+        } : r;
+      }
+      if (typeof i == "string") {
+        const r = B();
+        if (i === "responsive")
+          return function(...o) {
+            const a = o[0];
+            if (a) {
+              const d = l(i, a);
+              this.addModifierInternal(d);
+            }
+            return s;
+          };
+        if (i === "base" || i === "sm" || i === "md" || i === "lg" || i === "xl" || i === "2xl")
+          return new Proxy({}, {
+            get(o, a) {
+              if (typeof a == "string")
+                return (...d) => {
+                  const u = { [a]: { [i]: d[0] } }, b = l("responsive", u);
+                  return t.addModifierInternal(b), s;
+                };
+            }
+          });
+        if (r.has(i))
+          return function(...o) {
+            const a = l(i, ...o);
+            return this.addModifierInternal(a), s;
+          };
+      }
+    }
+  });
+}
+function _e(n, e) {
+  return {
+    ...n,
+    modifiers: e,
+    modifierBuilder: O(n)
+  };
+}
+const Te = {
+  /**
+   * Create a padding modifier with all sides
+   */
+  paddingAll(n) {
+    return l("padding", { all: n });
+  }
+};
+class Z {
+  register(e, t) {
+    C.register(e, t);
+  }
+  get(e) {
+    return C.get(e);
+  }
+  has(e) {
+    return C.has(e);
+  }
+  list() {
+    return C.list();
+  }
+  clear() {
+    C.clear();
+  }
+  validateRegistry() {
+    return C.validateRegistry();
+  }
+}
+const J = new Z();
+process.env.NODE_ENV === "development" && console.log("📤 Created RegistryAdapter for globalModifierRegistry", {
+  registryId: C.instanceId,
+  currentSize: C.list().length
+});
+function Re() {
+  return J;
+}
+function H(n, e, t = {}, i = {}) {
+  if (!e.length) return n;
+  const s = {
+    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 (i.batch ? "batch" : "sequential") {
+    case "batch":
+      return Q(n, e, s, i);
+    default:
+      return Y(n, e, s, i);
+  }
+}
+function Y(n, e, t, i) {
+  const s = [...e].sort(
+    (d, u) => d.priority - u.priority
+  );
+  let r = n;
+  const o = [], a = [];
+  for (const d of s)
+    try {
+      const u = d.apply(r, t);
+      u && typeof u == "object" && "type" in u && (r = u), i.immediate && !i.suppressEffects && (o.forEach((b) => b()), o.length = 0);
+    } catch (u) {
+      console.error(`Failed to apply modifier ${d.type}:`, u);
+    }
+  if (a.length > 0) {
+    const d = r.dispose;
+    r.dispose = () => {
+      a.forEach((u) => u()), d && d();
+    };
+  }
+  return r;
+}
+function Q(n, e, t, i) {
+  const s = X(e);
+  let r = n;
+  const o = [], a = [];
+  for (const [d, u] of s)
+    try {
+      r = ee(r, u, t);
+    } catch (b) {
+      (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error(`Failed to apply modifier group ${d}:`, b);
+    }
+  if (i.suppressEffects || o.forEach((d) => d()), a.length > 0) {
+    const d = r.dispose;
+    r.dispose = () => {
+      a.forEach((u) => u()), d && d();
+    };
+  }
+  return r;
+}
+function X(n) {
+  const e = /* @__PURE__ */ new Map();
+  for (const t of n) {
+    const i = e.get(t.type) || [];
+    i.push(t), e.set(t.type, i);
+  }
+  return e;
+}
+function ee(n, e, t) {
+  const i = [...e].sort(
+    (r, o) => r.priority - o.priority
+  );
+  let s = n;
+  for (const r of i)
+    try {
+      const o = r.apply(s, t);
+      o && typeof o == "object" && "type" in o && (s = o);
+    } catch (o) {
+      (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error(`Failed to apply modifier ${r.type}:`, o);
+    }
+  return s;
+}
+function te(n) {
+  return n && typeof n.concat == "function" && typeof n.toSegment == "function" && typeof n.isConcatenatable == "function";
+}
+function k(n, e = []) {
+  const t = {
+    type: n.type,
+    id: n.id,
+    props: { ...n.props },
+    mounted: n.mounted,
+    cleanup: n.cleanup ? [...n.cleanup] : [],
+    modifiers: [...e],
+    modifierBuilder: null,
+    // Will be set after component is created
+    render: n.render ? n.render.bind(n) : () => [],
+    // Bind to original component or provide default
+    // Store reference to original component for modifier context
+    _originalComponent: n
+  };
+  t.modifierBuilder = O(
+    t
+  ), t.modifier = t.modifierBuilder, Object.prototype.hasOwnProperty.call(n, "modifier") || Object.defineProperty(n, "modifier", {
+    configurable: !0,
+    enumerable: !1,
+    get() {
+      return t.modifierBuilder;
+    }
+  }), n.modifiableComponent = t;
+  const i = n._enhancedLifecycle;
+  i && (t._enhancedLifecycle = i, "domElements" in n && (t.domElements = n.domElements), "primaryElement" in n && (t.primaryElement = n.primaryElement), "domReady" in n && (t.domReady = n.domReady), "children" in n && (t.children = n.children));
+  const s = n.render ? n.render.bind(n) : () => [];
+  return t.render = () => {
+    const r = s();
+    return (Array.isArray(r) ? r : [r]).map((a, d) => (a && typeof a == "object" && (d === 0 ? (a.modifiers = [...t.modifiers], a.componentId = n.id, a._originalComponent = t._originalComponent) : (a.modifiers && delete a.modifiers, a.componentId && a.componentId === n.id && delete a.componentId)), a));
+  }, te(n) && (t.concat = function(r) {
+    const o = {
+      id: t.id,
+      component: t,
+      modifiers: t.modifiers,
+      render: () => {
+        const u = t.render();
+        return Array.isArray(u) ? u[0] : u;
+      }
+    }, a = r.toSegment(), d = {
+      totalSegments: r instanceof M ? r.segments.length + 1 : 2,
+      accessibilityRole: "text",
+      // Simplified for now
+      semanticStructure: "inline"
+      // Simplified for now
+    };
+    return r instanceof M ? new M(
+      [o, ...r.segments],
+      d
+    ) : new M([o, a], d);
+  }, t.toSegment = function() {
+    return {
+      id: t.id,
+      component: t,
+      modifiers: t.modifiers,
+      render: () => {
+        const r = t.render();
+        return Array.isArray(r) ? r[0] : r;
+      }
+    };
+  }, t.isConcatenatable = function() {
+    return !0;
+  }), typeof n?.clone == "function" && (t.clone = (r) => {
+    const o = n.clone(r);
+    return k(
+      o,
+      [...t.modifiers]
+    );
+  }), t;
+}
+function Ie(n, e, t = {}) {
+  n.modifiers = [...e], n.mounted && n.context;
+}
+const Pe = {
+  /**
+   * Check if a component has specific modifier types
+   */
+  hasModifierOfType(n, e) {
+    return n.modifiers.some((t) => t.type === e);
+  },
+  /**
+   * Get modifiers of a specific type from a component
+   */
+  getModifiersOfType(n, e) {
+    return n.modifiers.filter((t) => t.type === e);
+  },
+  /**
+   * Remove modifiers of a specific type from a component
+   */
+  removeModifiersOfType(n, e) {
+    n.modifiers = n.modifiers.filter(
+      (t) => t.type !== e
+    );
+  },
+  /**
+   * Replace modifiers of a specific type
+   */
+  replaceModifiersOfType(n, e, t) {
+    n.modifiers = n.modifiers.filter(
+      (i) => i.type !== e
+    ), n.modifiers.push(...t);
+  },
+  /**
+   * Get the total number of modifiers on a component
+   */
+  getModifierCount(n) {
+    return n.modifiers.length;
+  },
+  /**
+   * Check if two modifier arrays are equivalent
+   */
+  areModifiersEqual(n, e) {
+    if (n.length !== e.length) return !1;
+    for (let t = 0; t < n.length; t++) {
+      const i = n[t], s = e[t];
+      if (i.type !== s.type || i.priority !== s.priority || JSON.stringify(i.properties) !== JSON.stringify(s.properties))
+        return !1;
+    }
+    return !0;
+  }
+}, ie = /* @__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"
+]), N = /* @__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
+]), re = /* @__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 se(n, e) {
+  const t = re.get(n);
+  return t ? t.warningLevel === "none" ? !1 : t.warningLevel === "warning" && t.problematicTags ? t.problematicTags.includes(e) : !(t.idealTags && t.idealTags.includes(e)) : !0;
+}
+class ne {
+  static validate(e, t) {
+    return ie.has(e) ? {
+      valid: !0,
+      warnings: this.checkSemanticWarnings(e, t),
+      semanticRole: N.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 i = [];
+    if (["button", "a", "input", "select", "textarea"].includes(e) && ["HStack", "VStack", "ZStack"].includes(t)) {
+      const s = `Using interactive tag '${e}' on layout component ${t} may cause accessibility issues.`;
+      i.push({ message: s, 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) && (i.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 s = `Using heading tag '${e}' on layout component ${t}. Consider using Text component instead.`;
+      i.push({ message: s, 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 s = `Form tag '${e}' used on ${t}. Ensure proper form semantics.`;
+      i.push({ message: s, severity: "info" }), process.env.NODE_ENV !== "production" && console.info(
+        `Form tag '${e}' requires proper semantic context for component '${t}'`
+      );
+    }
+    return i;
+  }
+}
+let L = {
+  autoApplySemanticRoles: !0,
+  warnOnOverrides: process.env.NODE_ENV !== "production",
+  warnOnSemanticIssues: process.env.NODE_ENV !== "production",
+  validateTags: !0,
+  allowInvalidTags: !0
+};
+function ke(n) {
+  L = { ...L, ...n };
+}
+function V() {
+  return { ...L };
+}
+function oe(n, e, t) {
+  const i = t || e, s = V();
+  let r = { valid: !0 };
+  return t && (s.warnOnOverrides && se(n, t) && process.env.NODE_ENV !== "production" && console.warn(
+    `Element override: ${n} changed from '${e}' to '${t}'`
+  ), s.validateTags && (r = ne.validate(t, n), !r.valid && !s.allowInvalidTags)) ? (process.env.NODE_ENV !== "production" && console.warn(
+    `Invalid tag '${t}' rejected for '${n}', using default '${e}' instead`
+  ), { tag: e, validation: r }) : { tag: i, validation: r };
+}
+function Le(n, e) {
+  return (t) => oe(n, e, t);
+}
+var ae = Object.defineProperty, ce = (n, e, t) => e in n ? ae(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, le = (n, e, t) => ce(n, e + "", t);
+const W = class _ {
+  static getInstance() {
+    return _.instance || (_.instance = new _()), _.instance;
+  }
+  /**
+   * Apply semantic ARIA attributes to an element based on its tag
+   */
+  applySemanticAttributes(e, t, i) {
+    const s = V();
+    if (!s.autoApplySemanticRoles) return;
+    const r = N.get(t);
+    if (!(!r || !r.applyARIA)) {
+      if (i?.role) {
+        s.warnOnSemanticIssues && process.env.NODE_ENV !== "production" && console.warn(
+          `ARIA role '${i.role}' overrides semantic role '${r.role}' for tag '${t}'`
+        );
+        return;
+      }
+      if (e.hasAttribute("role")) {
+        s.warnOnSemanticIssues && process.env.NODE_ENV !== "production" && console.warn(
+          `Existing role attribute overrides semantic role '${r.role}' for tag '${t}'`
+        );
+        return;
+      }
+      e.setAttribute("role", r.role);
+    }
+  }
+  /**
+   * Get semantic role information for a tag
+   */
+  getSemanticRole(e) {
+    return N.get(e);
+  }
+  /**
+   * Check if a tag has automatic ARIA role application enabled
+   */
+  hasAutoARIA(e) {
+    const t = N.get(e);
+    return t ? t.applyARIA : !1;
+  }
+  /**
+   * Get all tags that support automatic ARIA roles
+   */
+  getAutoARIATags() {
+    return Array.from(N.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, i, s) {
+    if (this.applySemanticAttributes(e, t, s), i && process.env.NODE_ENV !== "production") {
+      const r = this.getSemanticRole(t);
+      r && e.setAttribute(
+        "data-tachui-semantic",
+        JSON.stringify({
+          originalComponent: i.originalType,
+          overriddenTo: t,
+          semanticRole: r.role,
+          autoApplied: r.applyARIA
+        })
+      );
+    }
+  }
+};
+le(W, "instance");
+let de = W;
+const R = de.getInstance(), $e = (n, e, t) => R.applySemanticAttributes(n, e, t), De = (n) => R.getSemanticRole(n), Be = (n) => R.hasAutoARIA(n);
+var ue = Object.defineProperty, pe = (n, e, t) => e in n ? ue(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, I = (n, e, t) => pe(n, typeof e != "symbol" ? e + "" : e, t);
+const fe = /* @__PURE__ */ new Set([
+  "click",
+  "dblclick",
+  "mousedown",
+  "mouseup",
+  "mouseover",
+  "mouseout",
+  "mouseenter",
+  "mouseleave",
+  "focusin",
+  // Bubbles, unlike 'focus'
+  "focusout",
+  // Bubbles, unlike 'blur'
+  "input",
+  "change",
+  "submit",
+  "keydown",
+  "keyup",
+  "keypress"
+]), D = /* @__PURE__ */ new Set([
+  "scroll",
+  "wheel",
+  "touchstart",
+  "touchmove",
+  "touchend"
+]);
+class he {
+  constructor() {
+    I(this, "containerListeners", /* @__PURE__ */ new WeakMap()), I(this, "elementHandlers", /* @__PURE__ */ new WeakMap()), I(this, "handlerCounts", /* @__PURE__ */ new WeakMap());
+  }
+  /**
+   * Register an event handler with delegation
+   */
+  register(e, t, i, s) {
+    let r = this.elementHandlers.get(t);
+    r && r.has(i) && this.unregister(e, t, i), r || (r = /* @__PURE__ */ new Map(), this.elementHandlers.set(t, r)), r.set(i, { handler: s, element: t });
+    let o = this.handlerCounts.get(e);
+    o || (o = /* @__PURE__ */ new Map(), this.handlerCounts.set(e, o));
+    const a = o.get(i) || 0;
+    return o.set(i, a + 1), this.ensureRootListener(e, i), () => {
+      this.unregister(e, t, i);
+    };
+  }
+  /**
+   * Unregister an event handler
+   */
+  unregister(e, t, i) {
+    const s = this.elementHandlers.get(t);
+    s && (s.delete(i), s.size === 0 && this.elementHandlers.delete(t));
+    const r = this.handlerCounts.get(e);
+    if (r) {
+      const a = (r.get(i) || 0) - 1;
+      a <= 0 ? (r.delete(i), this.removeRootListener(e, i)) : r.set(i, a);
+    }
+  }
+  /**
+   * Ensure root listener exists for event type on container
+   */
+  ensureRootListener(e, t) {
+    let i = this.containerListeners.get(e);
+    if (i || (i = /* @__PURE__ */ new Map(), this.containerListeners.set(e, i)), i.has(t))
+      return;
+    const s = (o) => {
+      this.handleDelegatedEvent(e, t, o);
+    }, r = D.has(t) ? { passive: !0 } : { passive: !1 };
+    e.addEventListener(t, s, r), i.set(t, s);
+  }
+  /**
+   * Remove root listener for event type on container
+   */
+  removeRootListener(e, t) {
+    const i = this.containerListeners.get(e);
+    if (!i) return;
+    const s = i.get(t);
+    s && (e.removeEventListener(t, s), i.delete(t));
+  }
+  /**
+   * Handle delegated event by finding target handler
+   */
+  handleDelegatedEvent(e, t, i) {
+    const s = i.target;
+    if (!s) return;
+    let r = s;
+    for (; r && r !== e; ) {
+      const o = this.elementHandlers.get(r);
+      if (o) {
+        const a = o.get(t);
+        if (a) {
+          try {
+            a.handler(i);
+          } catch (d) {
+            console.error(`Delegated event handler error for ${t}:`, d);
+          }
+          return;
+        }
+      }
+      r = r.parentElement;
+    }
+  }
+  /**
+   * Check if event type should use delegation
+   */
+  shouldDelegate(e) {
+    return fe.has(e);
+  }
+  /**
+   * Check if event type should use passive listeners
+   */
+  shouldBePassive(e) {
+    return D.has(e);
+  }
+  /**
+   * Get metrics for debugging
+   */
+  getMetrics(e) {
+    const t = this.handlerCounts.get(e);
+    if (!t)
+      return { eventTypes: [], totalHandlers: 0, handlersPerType: {} };
+    const i = {};
+    let s = 0;
+    return t.forEach((r, o) => {
+      i[o] = r, s += r;
+    }), {
+      eventTypes: Array.from(t.keys()),
+      totalHandlers: s,
+      handlersPerType: i
+    };
+  }
+  /**
+   * Cleanup all handlers for a container
+   */
+  cleanupContainer(e) {
+    const t = this.containerListeners.get(e);
+    t && (t.forEach((i, s) => {
+      e.removeEventListener(s, i);
+    }), this.containerListeners.delete(e)), this.handlerCounts.delete(e);
+  }
+}
+const T = new he();
+var me = Object.defineProperty, ge = (n, e, t) => e in n ? me(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, S = (n, e, t) => ge(n, typeof e != "symbol" ? e + "" : e, t);
+class ye {
+  constructor() {
+    S(this, "nodeMap", /* @__PURE__ */ new WeakMap()), S(this, "cleanupMap", /* @__PURE__ */ new WeakMap()), S(this, "renderedNodes", /* @__PURE__ */ new Set()), S(this, "elementToContainer", /* @__PURE__ */ new WeakMap()), S(this, "metrics", {
+      created: 0,
+      adopted: 0,
+      removed: 0,
+      inserted: 0,
+      moved: 0,
+      cacheHits: 0,
+      cacheMisses: 0,
+      attributeWrites: 0,
+      attributeRemovals: 0,
+      textUpdates: 0,
+      modifierApplications: 0
+    });
+  }
+  /**
+   * Render a DOM node to an actual DOM element
+   */
+  render(e, t) {
+    return Array.isArray(e) ? this.renderFragment(e, t) : this.renderSingle(e, t);
+  }
+  /**
+   * Check if a DOM node has been rendered and tracked.
+   */
+  hasNode(e) {
+    return this.nodeMap.has(e);
+  }
+  /**
+   * Get the rendered DOM element associated with a node.
+   */
+  getRenderedNode(e) {
+    return this.nodeMap.get(e);
+  }
+  /**
+   * Render a single DOM node
+   */
+  renderSingle(e, t) {
+    this.renderedNodes.add(e);
+    let i;
+    switch (e.type) {
+      case "element":
+        i = this.createOrUpdateElement(e, t);
+        break;
+      case "text":
+        i = this.createOrUpdateTextNode(e);
+        break;
+      case "comment":
+        i = this.createComment(e), this.metrics.created++;
+        break;
+      default:
+        throw new Error(`Unknown node type: ${e.type}`);
+    }
+    if (this.nodeMap.set(e, i), e.element = i, i instanceof Element && t && this.elementToContainer.set(i, t), i instanceof Element) {
+      let s = [];
+      "modifiers" in e && Array.isArray(e.modifiers) && e.modifiers.length > 0 && (s = e.modifiers), "componentMetadata" in e && e.componentMetadata?.modifiers && Array.isArray(e.componentMetadata.modifiers) && e.componentMetadata.modifiers.length > 0 && (s = e.componentMetadata.modifiers), s.length > 0 && this.applyModifiersToElement(i, s, e);
+    }
+    return e.dispose && this.addCleanup(i, e.dispose), t && this.appendNode(t, i), i;
+  }
+  /**
+   * Render multiple nodes as a document fragment
+   */
+  renderFragment(e, t) {
+    const i = document.createDocumentFragment();
+    return e.forEach((s) => {
+      const r = this.renderSingle(s);
+      i.appendChild(r);
+    }), t && (t.appendChild(i), this.metrics.inserted += e.length), i;
+  }
+  /**
+   * Create a DOM element with props and children
+   */
+  createOrUpdateElement(e, t) {
+    if (!e.tag)
+      throw new Error("Element node must have a tag");
+    if (e.element && e.element instanceof Element) {
+      const s = e.element;
+      return t && this.elementToContainer.set(s, t), this.updateProps(s, e, t), this.updateChildren(s, e), s;
+    }
+    const i = document.createElement(e.tag);
+    return this.metrics.created++, t && this.elementToContainer.set(i, t), this.applyDebugAttributes(i, e), this.updateProps(i, e, t), this.updateChildren(i, e), i;
+  }
+  updateProps(e, t, i) {
+    const s = t.props || {}, r = t.__appliedProps || {};
+    if (Object.keys(r).forEach((o) => {
+      if (!(o in s)) {
+        if (o === "key" || o === "children" || o.startsWith("on"))
+          return;
+        this.setElementProp(e, o, void 0);
+      }
+    }), Object.entries(s).forEach(([o, a]) => {
+      o === "key" || o === "children" || r && r[o] === a || this.applyProp(e, o, a, i);
+    }), t.__appliedProps = { ...s }, "componentMetadata" in t && t.componentMetadata) {
+      const o = t.componentMetadata;
+      if (o.overriddenTo && o.originalType && t.tag)
+        try {
+          R.processElementNode(
+            e,
+            t.tag,
+            o,
+            s?.aria || void 0
+          );
+        } catch (a) {
+          console.warn("[tachUI] Could not process semantic attributes:", a);
+        }
+    }
+  }
+  updateChildren(e, t) {
+    const i = t.__renderedChildren || [], s = t.children || [], r = this.elementToContainer.get(e), o = typeof process < "u" && process.env?.TACHUI_DEBUG_PHASE1B === "1";
+    if (i.length === s.length && i.length > 0 && i.every((f, g) => f === s[g])) {
+      s.forEach((f) => {
+        this.updateExistingNode(f);
+      }), t.__renderedChildren = s;
+      return;
+    }
+    if (i.length === 0) {
+      s.forEach((f) => {
+        if (!f || f.type == null) return;
+        const g = this.renderSingle(f, r);
+        this.appendNode(e, g);
+      }), t.__renderedChildren = s;
+      return;
+    }
+    const a = /* @__PURE__ */ new Map(), d = [];
+    i.forEach((f) => {
+      f.key != null ? a.set(f.key, f) : d.push(f);
+    });
+    const u = Array.from({ length: s.length });
+    if (s.forEach((f, g) => {
+      let m;
+      f.key != null ? (m = a.get(f.key), m && a.delete(f.key)) : d.length > 0 && (m = d.shift()), m && this.adoptNode(m, f);
+      const y = this.renderSingle(f, r);
+      u[g] = y;
+    }), o && t.tag) {
+      const f = s.map((y) => y.key ?? null), g = i.map((y) => y.key ?? null), m = u.map(
+        (y) => y && "getAttribute" in y ? y.getAttribute("data-id") : null
+      );
+      console.log("[diff] state", {
+        parent: t.tag,
+        prev: g,
+        next: f,
+        dom: m
+      });
+    }
+    if (a.forEach((f) => {
+      this.removeNode(f);
+    }), d.forEach((f) => {
+      this.removeNode(f);
+    }), typeof e.insertBefore == "function" && typeof e.appendChild == "function") {
+      let f = null;
+      for (let g = u.length - 1; g >= 0; g--) {
+        const m = u[g];
+        m && (this.insertNode(e, m, f), f = m);
+      }
+    }
+    t.__renderedChildren = s;
+  }
+  updateExistingNode(e) {
+    if (e.type === "element" && e.element instanceof Element) {
+      const t = this.elementToContainer.get(e.element);
+      this.updateProps(e.element, e, t), this.updateChildren(e.element, e);
+    } else e.type === "text" && e.element instanceof Text && e.element.textContent !== e.text && (e.element.textContent = e.text || "", this.recordTextUpdate());
+  }
+  /**
+   * Apply debug attributes to DOM element if debug mode is enabled
+   */
+  applyDebugAttributes(e, t) {
+  }
+  /**
+   * Create or update a text node
+   */
+  createOrUpdateTextNode(e) {
+    if (e.element && e.element instanceof Text) {
+      const t = e.element;
+      if (t.textContent !== e.text && (t.textContent = e.text || "", this.recordTextUpdate()), e.reactiveContent && !e.dispose) {
+        const i = e.reactiveContent, s = E(() => {
+          try {
+            const r = i();
+            e.text = String(r);
+            const o = t.parentElement;
+            if (o && o.__tachui_asHTML)
+              return;
+            t.textContent = e.text, this.recordTextUpdate();
+          } catch (r) {
+            console.error("createOrUpdateTextNode() reactive effect error:", r);
+          }
+        });
+        e.dispose = () => {
+          s.dispose();
+        };
+      }
+      return t;
+    }
+    return this.createTextNode(e);
+  }
+  /**
+   * Create a text node
+   */
+  createTextNode(e) {
+    const t = document.createTextNode(e.text || "");
+    if (this.metrics.created++, this.recordTextUpdate(), e.reactiveContent) {
+      const i = e.reactiveContent, s = E(() => {
+        try {
+          const r = i();
+          e.text = String(r);
+          const o = t.parentElement;
+          if (o && o.__tachui_asHTML)
+            return;
+          t.textContent = e.text, this.recordTextUpdate();
+        } catch (r) {
+          console.error("createTextNode() reactive effect error:", r);
+        }
+      });
+      e.dispose = () => {
+        s.dispose();
+      };
+    }
+    return t;
+  }
+  /**
+   * Create a comment node
+   */
+  createComment(e) {
+    return this.metrics.created++, document.createComment(e.text || "");
+  }
+  /**
+   * Apply props to a DOM element with reactive updates
+   */
+  applyProps(e, t) {
+    Object.entries(t).forEach(([i, s]) => {
+      this.applyProp(e, i, s);
+    });
+  }
+  /**
+   * Apply a single prop to an element
+   */
+  applyProp(e, t, i, s) {
+    if (t === "className" || t === "class") {
+      this.applyClassName(e, i);
+      return;
+    }
+    if (t === "style") {
+      this.applyStyle(e, i);
+      return;
+    }
+    if (t.startsWith("on") && typeof i == "function") {
+      this.applyEventListener(e, t, i, s);
+      return;
+    }
+    if (w(i) || x(i)) {
+      const r = E(() => {
+        const o = i();
+        this.setElementProp(e, t, o);
+      });
+      this.addCleanup(e, () => {
+        r.dispose();
+      });
+      return;
+    }
+    this.setElementProp(e, t, i);
+  }
+  /**
+   * Set a property on an element
+   */
+  setElementProp(e, t, i) {
+    if (i == null) {
+      e.hasAttribute(t) && (e.removeAttribute(t), this.recordAttributeRemoval());
+      return;
+    }
+    const s = e;
+    if ((t === "value" || t === "checked" || t === "disabled") && t in s) {
+      s[t] !== i && (s[t] = i, this.recordAttributeWrite());
+      return;
+    }
+    if (typeof i == "boolean") {
+      i ? e.hasAttribute(t) || (e.setAttribute(t, ""), this.recordAttributeWrite()) : e.hasAttribute(t) ? (e.removeAttribute(t), this.recordAttributeRemoval()) : e.removeAttribute(t);
+      return;
+    }
+    const r = e.getAttribute(t), o = String(i);
+    r !== o && (e.setAttribute(t, o), this.recordAttributeWrite());
+  }
+  /**
+   * Apply className with reactive updates
+   */
+  applyClassName(e, t) {
+    if (w(t) || x(t)) {
+      const i = E(() => {
+        const s = t(), r = this.normalizeClassName(s);
+        e.className !== r && (e.className = r, this.recordAttributeWrite());
+      });
+      this.addCleanup(e, () => {
+        i.dispose();
+      });
+    } else {
+      const i = this.normalizeClassName(t);
+      e.className !== i && (e.className = i, this.recordAttributeWrite());
+    }
+  }
+  /**
+   * 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 i = e;
+    if (w(t) || x(t)) {
+      const s = E(() => {
+        const r = t();
+        this.setElementStyles(i, r);
+      });
+      this.addCleanup(e, () => {
+        s.dispose();
+      });
+    } else
+      this.setElementStyles(i, t);
+  }
+  /**
+   * Set styles on an element
+   */
+  setElementStyles(e, t) {
+    if (typeof t == "string") {
+      e.style.cssText !== t && (e.style.cssText = t, this.recordAttributeWrite());
+      return;
+    }
+    if (typeof t == "object" && t !== null) {
+      const i = e.__appliedStyles || {};
+      Object.keys(i).forEach((s) => {
+        s in t || (e.style.removeProperty(s.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`)), this.recordAttributeRemoval());
+      }), Object.entries(t).forEach(([s, r]) => {
+        if (w(r) || x(r)) {
+          const o = E(() => {
+            const a = r(), d = s.replace(/[A-Z]/g, (u) => `-${u.toLowerCase()}`);
+            if (a == null)
+              e.style.removeProperty(d), this.recordAttributeRemoval();
+            else {
+              const u = String(a);
+              e.style.getPropertyValue(d) !== u && (e.style.setProperty(d, u), this.recordAttributeWrite());
+            }
+          });
+          this.addCleanup(e, () => {
+            o.dispose();
+          });
+        } else {
+          const o = s.replace(/[A-Z]/g, (a) => `-${a.toLowerCase()}`);
+          if (r == null)
+            e.style.getPropertyValue(o) && (e.style.removeProperty(o), this.recordAttributeRemoval());
+          else {
+            const a = String(r);
+            e.style.getPropertyValue(o) !== a && (e.style.setProperty(o, a), this.recordAttributeWrite());
+          }
+        }
+      }), e.__appliedStyles = { ...t };
+    }
+  }
+  /**
+   * Apply event listener (with delegation if possible)
+   */
+  applyEventListener(e, t, i, s) {
+    let r = t.slice(2).toLowerCase();
+    r === "focus" ? r = "focusin" : r === "blur" && (r = "focusout");
+    const o = s || this.elementToContainer.get(e);
+    if (o && T.shouldDelegate(r)) {
+      const u = T.register(
+        o,
+        e,
+        r,
+        i
+      );
+      this.addCleanup(e, u);
+      return;
+    }
+    const a = (u) => {
+      try {
+        i(u);
+      } catch (b) {
+        console.error(`Event handler error for ${t}:`, b);
+      }
+    }, d = T.shouldBePassive(r) ? { passive: !0 } : void 0;
+    e.addEventListener(r, a, d), this.addCleanup(e, () => {
+      e.removeEventListener(r, a, d);
+    });
+  }
+  /**
+   * Add cleanup function for an element
+   */
+  addCleanup(e, t) {
+    const i = this.cleanupMap.get(e) || [];
+    i.push(t), this.cleanupMap.set(e, i);
+  }
+  /**
+   * Update an existing DOM node
+   */
+  updateNode(e, t) {
+    const i = this.nodeMap.get(e);
+    !i || typeof i.setAttribute != "function" || t && this.applyProps(i, t);
+  }
+  /**
+   * Remove a DOM node and run cleanup
+   */
+  removeNode(e) {
+    this.cleanupNode(e, !0);
+  }
+  /**
+   * Cleanup a node (and its descendants) and optionally remove from DOM.
+   */
+  cleanupNode(e, t) {
+    const i = this.nodeMap.get(e);
+    if (e.children && e.children.length > 0 && e.children.forEach((r) => {
+      this.cleanupNode(r, !1);
+    }), !i) {
+      e.element !== void 0 && (e.element = void 0), this.renderedNodes.delete(e), this.nodeMap.delete(e);
+      return;
+    }
+    const s = this.cleanupMap.get(i);
+    s && (s.forEach((r) => {
+      try {
+        r();
+      } catch (o) {
+        console.error("Cleanup error:", o);
+      }
+    }), this.cleanupMap.delete(i)), t && i.parentNode && i.parentNode.removeChild(i), this.nodeMap.delete(e), e.element !== void 0 && (e.element = void 0), this.renderedNodes.delete(e), this.metrics.removed++;
+  }
+  /**
+   * Create reactive text content
+   */
+  createReactiveText(e) {
+    const t = document.createTextNode("");
+    return E(() => {
+      t.textContent = e();
+    }), t;
+  }
+  /**
+   * Create reactive element with dynamic props
+   */
+  createReactiveElement(e, t, i) {
+    const s = document.createElement(e);
+    return E(() => {
+      const r = t();
+      this.applyProps(s, r);
+    }), i && i.forEach((r) => {
+      const o = this.renderSingle(r);
+      s.appendChild(o);
+    }), s;
+  }
+  /**
+   * Apply modifiers to a DOM element
+   */
+  applyModifiersToElement(e, t, i) {
+    try {
+      t.length > 0 && this.recordModifierApplications(t.length);
+      const s = i.componentInstance || i.componentMetadata && i.componentMetadata.componentInstance || i._originalComponent || // Use original component if available
+      i;
+      H(
+        i,
+        t,
+        {
+          element: e,
+          componentId: i.componentId || "unknown",
+          phase: "creation",
+          componentInstance: s
+          // Pass the component instance
+        },
+        {
+          batch: !0
+          // Enable batched modifier application
+        }
+      );
+    } catch (s) {
+      console.error("Failed to apply modifiers to element:", s);
+    }
+  }
+  /**
+   * Adopt an existing DOM mapping from one node to another.
+   */
+  adoptNode(e, t) {
+    const i = this.nodeMap.get(e);
+    i && (this.nodeMap.set(t, i), this.nodeMap.delete(e), this.renderedNodes.delete(e), this.renderedNodes.add(t), t.element = i, e.dispose && (t.dispose = e.dispose), e.__renderedChildren && (t.__renderedChildren = e.__renderedChildren), e.__appliedProps && (t.__appliedProps = e.__appliedProps), this.metrics.adopted++);
+  }
+  /**
+   * 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(), this.resetMetrics();
+  }
+  resetMetrics() {
+    this.metrics = {
+      created: 0,
+      adopted: 0,
+      removed: 0,
+      inserted: 0,
+      moved: 0,
+      cacheHits: 0,
+      cacheMisses: 0,
+      attributeWrites: 0,
+      attributeRemovals: 0,
+      textUpdates: 0,
+      modifierApplications: 0
+    };
+  }
+  getMetrics() {
+    return { ...this.metrics };
+  }
+  recordCacheHit() {
+    this.metrics.cacheHits++;
+  }
+  recordCacheMiss() {
+    this.metrics.cacheMisses++;
+  }
+  insertNode(e, t, i) {
+    const s = typeof process < "u" && process.env?.TACHUI_DEBUG_PHASE1B === "1";
+    t.parentNode !== e ? (s && console.log("[diff] insertNode append", {
+      tag: "tagName" in t ? t.tagName : "text",
+      before: i && "getAttribute" in i ? i.getAttribute("data-id") : null
+    }), e.insertBefore(t, i), this.metrics.inserted++) : t.nextSibling !== i && (s && console.log("[diff] insertNode move", {
+      tag: "tagName" in t ? t.tagName : "text",
+      before: i && "getAttribute" in i ? i.getAttribute("data-id") : null
+    }), e.insertBefore(t, i), this.metrics.moved++);
+  }
+  appendNode(e, t) {
+    t.parentNode !== e && (e.appendChild(t), this.metrics.inserted++);
+  }
+  recordAttributeWrite() {
+    this.metrics.attributeWrites++;
+  }
+  recordAttributeRemoval() {
+    this.metrics.attributeRemovals++;
+  }
+  recordTextUpdate() {
+    this.metrics.textUpdates++;
+  }
+  recordModifierApplications(e) {
+    this.metrics.modifierApplications += e;
+  }
+}
+const h = new ye();
+function Oe() {
+  h.resetMetrics();
+}
+function He() {
+  return h.getMetrics();
+}
+function Ve(n, e) {
+  return j(() => {
+    let t = [];
+    const i = /* @__PURE__ */ new Map(), s = (o) => {
+      if (o.key != null) {
+        const a = i.get(o.key);
+        a && a.type === o.type && a.tag === o.tag && a.element ? (o.element = a.element, a.__appliedProps && (o.__appliedProps = a.__appliedProps), a.__renderedChildren && (o.__renderedChildren = a.__renderedChildren), h.recordCacheHit()) : h.recordCacheMiss();
+      }
+      o.children && o.children.forEach(s);
+    }, r = E(() => {
+      let o = n;
+      "build" in n && typeof n.build == "function" && (o = n.build());
+      const a = o.render(), d = Array.isArray(a) ? a : [a];
+      d.forEach(s);
+      const u = new Set(t), b = /* @__PURE__ */ new Set(), f = /* @__PURE__ */ new Set(), g = Math.min(t.length, d.length);
+      for (let c = 0; c < g; c++) {
+        const p = t[c], v = d[c];
+        p && v && p.type === v.type && p.tag === v.tag && (p.key === v.key || p.key == null && v.key == null) && (h.adoptNode(p, v), b.add(v), f.add(p), u.delete(p));
+      }
+      t.forEach((c) => {
+        c.key != null && i.set(c.key, c);
+      });
+      const m = /* @__PURE__ */ new Map();
+      t.forEach((c) => {
+        c.key != null && !f.has(c) && m.set(c.key, c);
+      });
+      const y = d.map((c) => {
+        if (b.has(c))
+          return h.render(c, e), h.getRenderedNode(c);
+        if (c.key != null) {
+          const p = i.get(c.key);
+          if (p && p.type === c.type && p.tag === c.tag)
+            return h.recordCacheHit(), u.delete(p), m.delete(c.key), i.set(c.key, c), h.adoptNode(p, c), h.render(c, e), h.getRenderedNode(c);
+          h.recordCacheMiss();
+        }
+        if (c.key != null) {
+          const p = m.get(c.key);
+          if (p)
+            return m.delete(c.key), u.delete(p), h.adoptNode(p, c), i.set(c.key, c), h.render(c, e), h.getRenderedNode(c);
+        }
+        if (c.key != null) {
+          for (const p of u)
+            if (p.key === c.key) {
+              u.delete(p), h.adoptNode(p, c), h.render(c, e);
+              break;
+            }
+        }
+        if (!h.hasNode(c)) {
+          for (const p of u)
+            if (p.type === c.type && p.tag === c.tag && p.key == null && c.key == null) {
+              u.delete(p), h.adoptNode(p, c), h.render(c, e);
+              break;
+            }
+        }
+        return h.hasNode(c) || (h.render(c, e), c.key != null && i.set(c.key, c)), h.getRenderedNode(c);
+      });
+      if (u.forEach((c) => {
+        h.removeNode(c), c.key != null && i.delete(c.key);
+      }), typeof e.insertBefore == "function" && typeof e.appendChild == "function") {
+        let c = null;
+        for (let p = y.length - 1; p >= 0; p--) {
+          const v = y[p];
+          v && (h.insertNode(e, v, c), c = v);
+        }
+      } else
+        y.forEach((c) => {
+          c && c.parentNode !== e && h.appendNode(e, c);
+        });
+      const $ = (c) => {
+        c.key != null && c.element && i.set(c.key, c), c.children && c.children.forEach($);
+      };
+      d.forEach($), t = d;
+    });
+    return () => {
+      r.dispose(), t.forEach((o) => {
+        h.removeNode(o);
+      }), i.clear(), T.cleanupContainer(e);
+    };
+  });
+}
+function be(n, e, ...t) {
+  const i = t.flat().filter((r) => r != null).map((r) => typeof r == "string" || typeof r == "number" ? { type: "text", text: String(r) } : r), s = {
+    type: "element",
+    tag: n,
+    props: e || {},
+    children: i,
+    key: e?.key ?? void 0
+  };
+  return e && "componentMetadata" in e && (s.componentMetadata = e.componentMetadata), s;
+}
+function We(n) {
+  if (w(n) || x(n) || typeof n == "function") {
+    const e = {
+      type: "text",
+      text: "",
+      reactiveContent: n
+      // Store the reactive content function
+    }, t = U(() => n());
+    e.text = String(t);
+    const i = E(() => {
+      const s = n();
+      e.text = String(s), e.element && "textContent" in e.element && (e.element.textContent = String(s));
+    });
+    return e.dispose = i.dispose.bind(i), e;
+  }
+  return {
+    type: "text",
+    text: n
+  };
+}
+var ve = Object.defineProperty, Ee = (n, e, t) => e in n ? ve(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, A = (n, e, t) => Ee(n, typeof e != "symbol" ? e + "" : e, t);
+class M {
+  // Required by ModifiableComponent interface
+  constructor(e, t, i = !0) {
+    this.metadata = t, A(this, "type", "component"), A(this, "id"), A(this, "mounted", !1), A(this, "cleanup", []), A(this, "props", {}), A(this, "segments"), A(this, "modifiers", []), 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(), i = this.buildAccessibilityAttributes(), s = this.modifiers && this.modifiers.some((a) => a.type === "asHTML");
+    let r;
+    return s ? r = this.renderSegmentsWithAsHTML() : r = this.segments.map((a) => a.render()).flat(), [be("span", {
+      class: `tachui-concatenated ${e}`,
+      ...i,
+      "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
+      }
+    }, ...r)];
+  }
+  /**
+   * 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, i;
+    return e instanceof M ? (t = [...this.segments, ...e.segments], i = this.mergeMetadata(this.metadata, e.metadata, t.length)) : (t = [...this.segments, e.toSegment()], i = this.mergeMetadata(
+      this.metadata,
+      {
+        totalSegments: 1,
+        accessibilityRole: this.determineComponentAccessibilityRole(e),
+        semanticStructure: this.determineComponentSemanticStructure(e)
+      },
+      t.length
+    )), new M(t, i);
+  }
+  /**
+   * 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"), i = e.some((o) => o === "EnhancedText"), s = e.some((o) => o === "EnhancedButton"), r = e.some((o) => o === "EnhancedLink");
+    return t && i && (s || r) ? "mixed-content" : t && i ? "image-text-composition" : t && !i ? "image-composition" : i && !t ? "text-composition" : "generic-composition";
+  }
+  /**
+   * Build comprehensive accessibility label for screen readers (Enhanced - Phase 4.2)
+   */
+  buildAccessibilityLabel() {
+    const t = this.segments.map((i) => this.extractAccessibilityText(i)).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 i = 0; i < e.length; i++) {
+      const s = e[i], r = e[i + 1];
+      t.push(s), r && (this.needsExplicitSeparator(s, r) ? t.push(". ") : t.push(" "));
+    }
+    return t.join("");
+  }
+  /**
+   * Determine if two accessibility labels need explicit separation
+   */
+  needsExplicitSeparator(e, t) {
+    const i = /[.!?:;]$/.test(e.trim()), s = /^[A-Z]/.test(t.trim());
+    return !i && s;
+  }
+  /**
+   * 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, i) {
+    return {
+      totalSegments: i,
+      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";
+    }
+  }
+  /**
+   * Special rendering method for segments with asHTML modifiers
+   */
+  renderSegmentsWithAsHTML() {
+    const e = this.modifiers?.filter((i) => i.type === "asHTML") || [], t = [];
+    for (const i of this.segments) {
+      const s = i.render(), r = Array.isArray(s) ? s : [s];
+      if (this.isTextSegment(i) && r.length > 0) {
+        const a = this.applyAsHTMLToSegment(r[0], e, i);
+        t.push(a);
+      } else
+        t.push(...r);
+    }
+    return t;
+  }
+  /**
+   * Check if a segment represents a Text component
+   */
+  isTextSegment(e) {
+    const t = e.component;
+    return t ? t.constructor?.name === "TextComponent" || t.constructor?.name === "EnhancedText" || t.__tachui_component_type === "Text" || t.componentMetadata?.originalType === "Text" : !1;
+  }
+  /**
+   * Apply asHTML modifiers to a segment with proper component context
+   */
+  applyAsHTMLToSegment(e, t, i) {
+    const s = {
+      element: void 0,
+      // Will be set when the node is rendered to DOM
+      componentId: i.id,
+      phase: "creation",
+      componentInstance: i.component
+      // Pass the original component
+    };
+    return H(e, t, s, { batch: !0 });
+  }
+  /**
+   * 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 M ? t.generateAccessibilityTree().children : void 0
+    };
+  }
+}
+export {
+  Ie as A,
+  Pe as B,
+  re as C,
+  ye as D,
+  he as E,
+  q as M,
+  N as S,
+  ie as V,
+  _e as a,
+  H as b,
+  O as c,
+  k as d,
+  Re as e,
+  Oe as f,
+  He as g,
+  be as h,
+  T as i,
+  se as j,
+  ne as k,
+  ke as l,
+  Te as m,
+  V as n,
+  Le as o,
+  oe as p,
+  de as q,
+  Ve as r,
+  Ne as s,
+  We as t,
+  R as u,
+  $e as v,
+  De as w,
+  Be as x,
+  M as y,
+  J as z
+};