@tachui/data 0.8.5-alpha → 0.8.10-alpha.0

package/dist/List.js

@@ -1,63 +1,63 @@
-var de = Object.defineProperty;
-var ue = (n, e, t) => e in n ? de(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var u = (n, e, t) => ue(n, typeof e != "symbol" ? e + "" : e, t);
-import { withModifiers as re, createSignal as A, isSignal as v, createEffect as I, h as b } from "@tachui/core";
+var Re = Object.defineProperty;
+var Oe = (n, e, t) => e in n ? Re(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var m = (n, e, t) => Oe(n, typeof e != "symbol" ? e + "" : e, t);
+import { withModifiers as ue, ComponentWithCSSClasses as Pe, processElementOverride as ke, h as w, text as Le, clonePropsPreservingReactivity as fe, resetLifecycleState as me, createSignal as N, isSignal as S, createEffect as R } from "@tachui/core";
 import "@tachui/modifiers";
-const g = {
+const y = {
   Clean: 0,
   Check: 1,
   Dirty: 2,
   Disposed: 3
 };
-var pe = Object.defineProperty, fe = (n, e, t) => e in n ? pe(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, M = (n, e, t) => fe(n, typeof e != "symbol" ? e + "" : e, t);
-let me = 0;
-const ge = Math.random().toString(36).substr(2, 6);
-let Z = null, J = null;
-const ye = /* @__PURE__ */ new Set();
-ye.add(ge);
-const D = {
+var De = Object.defineProperty, ze = (n, e, t) => e in n ? De(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, O = (n, e, t) => ze(n, typeof e != "symbol" ? e + "" : e, t);
+let _e = 0;
+const He = Math.random().toString(36).substr(2, 6);
+let ge = null, ye = null;
+const Ve = /* @__PURE__ */ new Set();
+Ve.add(He);
+const Q = {
   get currentComputation() {
-    return Z;
+    return ge;
   },
   set currentComputation(n) {
-    Z = n;
+    ge = n;
   },
   get currentOwner() {
-    return J;
+    return ye;
   },
   set currentOwner(n) {
-    J = n;
+    ye = n;
   }
 };
-function ie() {
-  return D.currentComputation;
+function we() {
+  return Q.currentComputation;
 }
-function ne() {
-  return D.currentOwner;
+function Ce() {
+  return Q.currentOwner;
 }
-class oe {
+let Ee = class {
   constructor(e, t = null) {
-    M(this, "id"), M(this, "owner"), M(this, "fn"), M(this, "sources", /* @__PURE__ */ new Set()), M(this, "observers", /* @__PURE__ */ new Set()), M(this, "state", g.Dirty), M(this, "value"), this.id = ++me, this.fn = e, this.owner = t, t && !t.disposed && t.sources.add(this);
+    O(this, "id"), O(this, "owner"), O(this, "fn"), O(this, "sources", /* @__PURE__ */ new Set()), O(this, "observers", /* @__PURE__ */ new Set()), O(this, "state", y.Dirty), O(this, "value"), this.id = ++_e, this.fn = e, this.owner = t, t && !t.disposed && t.sources.add(this);
   }
   execute() {
-    if (this.state === g.Disposed)
+    if (this.state === y.Disposed)
       return this.value;
     for (const t of this.sources)
       t && typeof t == "object" && "removeObserver" in t && t.removeObserver(this);
     this.sources.clear();
-    const e = D.currentComputation;
-    D.currentComputation = this;
+    const e = Q.currentComputation;
+    Q.currentComputation = this;
     try {
-      return this.state = g.Clean, this.value = this.fn(), this.value;
+      return this.state = y.Clean, this.value = this.fn(), this.value;
     } catch (t) {
-      throw this.state = g.Disposed, (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Error in computation:", t), t;
+      throw this.state = y.Disposed, (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Error in computation:", t), t;
     } finally {
-      D.currentComputation = e;
+      Q.currentComputation = e;
     }
   }
   dispose() {
-    if (this.state !== g.Disposed) {
-      this.state = g.Disposed;
+    if (this.state !== y.Disposed) {
+      this.state = y.Disposed;
       for (const e of this.sources)
         e && typeof e == "object" && "removeObserver" in e && e.removeObserver(this);
       this.sources.clear();
@@ -66,18 +66,18 @@ class oe {
       this.observers.clear(), this.owner && !this.owner.disposed && this.owner.sources.delete(this);
     }
   }
-}
-var ve = Object.defineProperty, be = (n, e, t) => e in n ? ve(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, B = (n, e, t) => be(n, typeof e != "symbol" ? e + "" : e, t);
-let Se = 0, Ce = class {
+};
+var je = Object.defineProperty, Fe = (n, e, t) => e in n ? je(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, re = (n, e, t) => Fe(n, typeof e != "symbol" ? e + "" : e, t);
+let Be = 0, We = class {
   constructor(e) {
-    B(this, "id"), B(this, "observers", /* @__PURE__ */ new Set()), B(this, "_value"), this.id = ++Se, this._value = e;
+    re(this, "id"), re(this, "observers", /* @__PURE__ */ new Set()), re(this, "_value"), this.id = ++Be, this._value = e;
   }
   /**
    * Get the current value and track dependency
    */
   getValue() {
-    const e = ie();
-    return e && e.state !== g.Disposed && (this.observers.add(e), e.sources.add(this)), this._value;
+    const e = we();
+    return e && e.state !== y.Disposed && (this.observers.add(e), e.sources.add(this)), this._value;
   }
   /**
    * Get the current value without tracking dependency
@@ -97,7 +97,7 @@ let Se = 0, Ce = class {
    */
   notify() {
     for (const e of this.observers)
-      e.state !== g.Disposed && (e.state = g.Dirty, Ee(e));
+      e.state !== y.Disposed && (e.state = y.Dirty, Ue(e));
   }
   /**
    * Remove an observer (cleanup)
@@ -117,28 +117,28 @@ let Se = 0, Ce = class {
     };
   }
 };
-const U = /* @__PURE__ */ new Set();
-let j = !1;
-function Ee(n) {
-  U.add(n), !j && queueMicrotask(we);
+const X = /* @__PURE__ */ new Set();
+let J = !1;
+function Ue(n) {
+  X.add(n), !J && queueMicrotask(qe);
 }
-function we() {
-  if (!j) {
-    j = !0;
+function qe() {
+  if (!J) {
+    J = !0;
     try {
-      for (; U.size > 0; ) {
-        const n = Array.from(U).sort((e, t) => e.id - t.id);
-        U.clear();
+      for (; X.size > 0; ) {
+        const n = Array.from(X).sort((e, t) => e.id - t.id);
+        X.clear();
         for (const e of n)
-          e.state === g.Dirty && e.execute();
+          e.state === y.Dirty && e.execute();
       }
     } finally {
-      j = !1;
+      J = !1;
     }
   }
 }
-function G(n) {
-  const e = new Ce(n), t = e.getValue.bind(e);
+function le(n) {
+  const e = new We(n), t = e.getValue.bind(e);
   t.peek = e.peek.bind(e);
   const s = e.set.bind(e);
   return Object.defineProperty(t, Symbol.for("tachui.signal"), {
@@ -146,24 +146,24 @@ function G(n) {
     enumerable: !1
   }), [t, s];
 }
-function T(n) {
+function F(n) {
   return typeof n == "function" && Symbol.for("tachui.signal") in n;
 }
-const Ae = (n, e) => n === e;
-var Ie = Object.defineProperty, Me = (n, e, t) => e in n ? Ie(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, S = (n, e, t) => Me(n, typeof e != "symbol" ? e + "" : e, t), _ = /* @__PURE__ */ ((n) => (n[n.Immediate = 0] = "Immediate", n[n.High = 1] = "High", n[n.Normal = 2] = "Normal", n[n.Low = 3] = "Low", n[n.Idle = 4] = "Idle", n))(_ || {});
-let Ne = class extends Error {
+const Qe = (n, e) => n === e;
+var Ge = Object.defineProperty, Ke = (n, e, t) => e in n ? Ge(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, A = (n, e, t) => Ke(n, typeof e != "symbol" ? e + "" : e, t), G = /* @__PURE__ */ ((n) => (n[n.Immediate = 0] = "Immediate", n[n.High = 1] = "High", n[n.Normal = 2] = "Normal", n[n.Low = 3] = "Low", n[n.Idle = 4] = "Idle", n))(G || {});
+let Ye = class extends Error {
   constructor(e, t, s) {
     super(e), this.cause = t, this.node = s, this.name = "ReactiveError";
   }
 };
-const xe = class $ {
+const Ze = class _ {
   constructor() {
-    S(this, "updateQueues", /* @__PURE__ */ new Map()), S(this, "isFlushPending", !1), S(this, "isDestroyed", !1), S(this, "errorHandlers", /* @__PURE__ */ new Set()), S(this, "maxRetries", 3), S(this, "totalUpdateCycles", 0), S(this, "totalUpdateTime", 0), S(this, "errorCount", 0), S(this, "nodeRegistry", /* @__PURE__ */ new WeakSet());
-    for (const e of Object.values(_))
+    A(this, "updateQueues", /* @__PURE__ */ new Map()), A(this, "isFlushPending", !1), A(this, "isDestroyed", !1), A(this, "errorHandlers", /* @__PURE__ */ new Set()), A(this, "maxRetries", 3), A(this, "totalUpdateCycles", 0), A(this, "totalUpdateTime", 0), A(this, "errorCount", 0), A(this, "nodeRegistry", /* @__PURE__ */ new WeakSet());
+    for (const e of Object.values(G))
       typeof e == "number" && this.updateQueues.set(e, /* @__PURE__ */ new Set());
   }
   static getInstance() {
-    return $.instance || ($.instance = new $()), $.instance;
+    return _.instance || (_.instance = new _()), _.instance;
   }
   /**
    * Schedule reactive node for update
@@ -196,7 +196,7 @@ const xe = class $ {
             await this.updateNodeWithRetry(i);
           } catch (o) {
             this.handleReactiveError(
-              new Ne(`Failed to update ${i.type} node ${i.id}`, o, i)
+              new Ye(`Failed to update ${i.type} node ${i.id}`, o, i)
             );
           }
         if (this.hasHigherPriorityWork(t))
@@ -342,7 +342,7 @@ const xe = class $ {
         }
       e.clear();
     }
-    this.updateQueues.clear(), this.errorHandlers.clear(), $.instance = null;
+    this.updateQueues.clear(), this.errorHandlers.clear(), _.instance = null;
   }
   /**
    * Get debug information
@@ -350,7 +350,7 @@ const xe = class $ {
   getDebugInfo() {
     const e = {};
     for (const [t, s] of this.updateQueues)
-      e[_[t]] = s.size;
+      e[G[t]] = s.size;
     return {
       isFlushPending: this.isFlushPending,
       isDestroyed: this.isDestroyed,
@@ -360,30 +360,35 @@ const xe = class $ {
     };
   }
 };
-S(xe, "instance", null);
-var $e = Object.defineProperty, Re = (n, e, t) => e in n ? $e(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, x = (n, e, t) => Re(n, typeof e != "symbol" ? e + "" : e, t);
-let Oe = class extends oe {
-  constructor(e, t = {}, s = ne()) {
-    super(e, s), x(this, "type", "computed"), x(this, "priority"), x(this, "_hasValue", !1), x(this, "_error", null), x(this, "equalsFn"), x(this, "options"), this.priority = t.priority ?? _.Normal, this.equalsFn = t.equals ?? Ae, this.options = t;
+A(Ze, "instance", null);
+var Xe = Object.defineProperty, Je = (n, e, t) => e in n ? Xe(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, L = (n, e, t) => Je(n, typeof e != "symbol" ? e + "" : e, t);
+let et = class extends Ee {
+  constructor(e, t = {}, s = Ce()) {
+    super(e, s), L(this, "type", "computed"), L(this, "priority"), L(this, "_hasValue", !1), L(this, "_error", null), L(this, "equalsFn"), L(this, "options"), this.priority = t.priority ?? G.Normal, this.equalsFn = t.equals ?? Qe, this.options = t;
   }
   /**
    * Get the computed value, tracking dependency and lazily computing
    */
   getValue() {
-    const e = ie();
-    return e && e.state !== g.Disposed && (this.observers.add(e), e.sources.add(this)), (this.state === g.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
+    const e = we();
+    return e && e.state !== y.Disposed && (this.observers.add(e), e.sources.add(this)), (this.state === y.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
   }
   /**
    * Get the current value without tracking dependency
    */
   peek() {
-    return (this.state === g.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
+    return (this.state === y.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
   }
   /**
    * Remove an observer (cleanup)
    */
   removeObserver(e) {
-    this.observers.delete(e);
+    this.observers.delete(e), this.options.releaseOnNoObservers === !0 && this.observers.size === 0 && e.state === y.Disposed && this.releaseSources();
+  }
+  releaseSources() {
+    for (const e of this.sources)
+      "removeObserver" in e && e.removeObserver(this);
+    this.sources.clear(), this._hasValue = !1, this.state = y.Dirty;
   }
   /**
    * Execute the computation and notify observers
@@ -392,8 +397,8 @@ let Oe = class extends oe {
     const e = this._hasValue ? this.value : void 0, t = super.execute();
     if (!this._hasValue || !this.equalsFn(e, t))
       for (const s of this.observers)
-        s.state !== g.Disposed && (s.state = g.Dirty, "execute" in s && typeof s.execute == "function" && queueMicrotask(() => {
-          s.state === g.Dirty && s.execute();
+        s.state !== y.Disposed && (s.state = y.Dirty, "execute" in s && typeof s.execute == "function" && queueMicrotask(() => {
+          s.state === y.Dirty && s.execute();
         }));
     return t;
   }
@@ -412,7 +417,7 @@ let Oe = class extends oe {
     this.sources.clear();
     for (const e of this.observers)
       e.sources.delete(this);
-    this.observers.clear(), this._hasValue = !1, this._error = null, this.state = g.Disposed;
+    this.observers.clear(), this._hasValue = !1, this._error = null, this.state = y.Disposed;
   }
   /**
    * Dispose the computed value
@@ -433,7 +438,7 @@ let Oe = class extends oe {
       state: this.state,
       sourceCount: this.sources.size,
       observerCount: this.observers.size,
-      priority: _[this.priority],
+      priority: G[this.priority],
       debugName: this.options.debugName,
       equalsFn: this.equalsFn.name || "anonymous"
     };
@@ -442,29 +447,29 @@ let Oe = class extends oe {
     return `Computed(${this.options.debugName || this.id}): ${this._hasValue ? this.value : "no value"}`;
   }
 };
-function Te(n, e) {
-  const t = new Oe(n, e), s = t.getValue.bind(t);
+function tt(n, e) {
+  const t = new et(n, e), s = t.getValue.bind(t);
   return s.peek = t.peek.bind(t), Object.defineProperty(s, Symbol.for("tachui.computed"), {
     value: t,
     enumerable: !1
   }), s;
 }
-function P(n) {
+function B(n) {
   return typeof n == "function" && Symbol.for("tachui.computed") in n;
 }
-const [Pe, Ot] = G("light");
-Te(() => {
-  const n = Pe();
-  return n === "system" ? Le() : n;
+const [st, Ss] = le("light");
+tt(() => {
+  const n = st();
+  return n === "system" ? rt() : n;
 });
-function Le() {
+function rt() {
   return typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 typeof globalThis.__DEV__ > "u" && (globalThis.__DEV__ = process.env.NODE_ENV !== "production");
-var ke = Object.defineProperty, ze = (n, e, t) => e in n ? ke(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, ee = (n, e, t) => ze(n, typeof e != "symbol" ? e + "" : e, t);
-let De = class {
+var it = Object.defineProperty, nt = (n, e, t) => e in n ? it(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, ve = (n, e, t) => nt(n, typeof e != "symbol" ? e + "" : e, t);
+let ot = class {
   constructor() {
-    ee(this, "pending", /* @__PURE__ */ new Set()), ee(this, "isFlushScheduled", !1);
+    ve(this, "pending", /* @__PURE__ */ new Set()), ve(this, "isFlushScheduled", !1);
   }
   schedule(e) {
     this.pending.add(e), this.isFlushScheduled || (this.isFlushScheduled = !0, queueMicrotask(() => this.flush()));
@@ -485,17 +490,17 @@ let De = class {
     this.pending.size > 0 && (this.isFlushScheduled = !0, queueMicrotask(() => this.flush()));
   }
 };
-new De();
-let Q = null;
-const y = class y {
+new ot();
+let ie = null;
+const b = class b {
   constructor() {
-    u(this, "instanceId");
-    u(this, "createdAt");
-    u(this, "modifiers", /* @__PURE__ */ new Map());
-    u(this, "lazyLoaders", /* @__PURE__ */ new Map());
-    u(this, "loadingPromises", /* @__PURE__ */ new Map());
+    m(this, "instanceId");
+    m(this, "createdAt");
+    m(this, "modifiers", /* @__PURE__ */ new Map());
+    m(this, "lazyLoaders", /* @__PURE__ */ new Map());
+    m(this, "loadingPromises", /* @__PURE__ */ new Map());
     // Feature flags
-    u(this, "featureFlags", {
+    m(this, "featureFlags", {
       proxyModifiers: !1,
       // Disabled by default for safe rollout
       autoTypeGeneration: !1,
@@ -506,35 +511,35 @@ const y = class y {
       // Enable for new system
     });
     // Metadata storage for type generation
-    u(this, "metadata", /* @__PURE__ */ new Map());
-    u(this, "metadataHistory", /* @__PURE__ */ new Map());
-    u(this, "conflicts", /* @__PURE__ */ new Map());
+    m(this, "metadata", /* @__PURE__ */ new Map());
+    m(this, "metadataHistory", /* @__PURE__ */ new Map());
+    m(this, "conflicts", /* @__PURE__ */ new Map());
     // Plugin metadata storage
-    u(this, "plugins", /* @__PURE__ */ new Map());
-    y.instanceCount++, this.instanceId = Math.random().toString(36).substr(2, 9), this.createdAt = Date.now(), process.env.NODE_ENV === "development" && console.log(
-      `🏗️ ModifierRegistry instance created: ${this.instanceId} (total: ${y.instanceCount})`
+    m(this, "plugins", /* @__PURE__ */ new Map());
+    b.instanceCount++, this.instanceId = Math.random().toString(36).substr(2, 9), this.createdAt = Date.now(), process.env.NODE_ENV === "development" && console.log(
+      `🏗️ ModifierRegistry instance created: ${this.instanceId} (total: ${b.instanceCount})`
     );
   }
   static validateModifierName(e, t = {}) {
-    if (y.FORBIDDEN_NAMES.has(e))
+    if (b.FORBIDDEN_NAMES.has(e))
       throw new Error(
         `Security Error: Cannot register modifier '${e}' (forbidden name)`
       );
-    if (!y.NAME_PATTERN.test(e)) {
+    if (!b.NAME_PATTERN.test(e)) {
       if (t.strict)
         throw new Error(
-          `Invalid modifier name '${e}'. Modifier names must match ${y.NAME_PATTERN}`
+          `Invalid modifier name '${e}'. Modifier names must match ${b.NAME_PATTERN}`
         );
       process.env.NODE_ENV !== "production" && console.warn(
-        `⚠️ Modifier name '${e}' does not match ${y.NAME_PATTERN}. Prefer alphanumeric names for best tooling support.`
+        `⚠️ Modifier name '${e}' does not match ${b.NAME_PATTERN}. Prefer alphanumeric names for best tooling support.`
       );
     }
   }
   register(e, t) {
-    y.validateModifierName(e), this.modifiers.set(e, t), this.lazyLoaders.delete(e), this.loadingPromises.delete(e);
+    b.validateModifierName(e), this.modifiers.set(e, t), this.lazyLoaders.delete(e), this.loadingPromises.delete(e);
   }
   registerLazy(e, t) {
-    if (y.validateModifierName(e), this.modifiers.has(e)) {
+    if (b.validateModifierName(e), this.modifiers.has(e)) {
       process.env.NODE_ENV === "development" && console.warn(
         `⚠️ Modifier '${e}' already registered, skipping lazy registration`
       );
@@ -605,7 +610,7 @@ const y = class y {
     );
   }
   reset() {
-    this.clear(), process.env.NODE_ENV === "test" && (y.instanceCount = 0);
+    this.clear(), process.env.NODE_ENV === "test" && (b.instanceCount = 0);
   }
   validateRegistry() {
     const e = this.list(), t = e.filter(
@@ -618,7 +623,7 @@ const y = class y {
       // Could be enhanced to scan for broken references
       instanceId: this.instanceId,
       createdAt: this.createdAt,
-      instanceCount: y.instanceCount
+      instanceCount: b.instanceCount
     };
   }
   /**
@@ -679,7 +684,7 @@ const y = class y {
       throw new Error(
         `Modifier metadata '${String(e.name)}' must include a plugin identifier`
       );
-    typeof e.name == "string" && y.validateModifierName(e.name, {
+    typeof e.name == "string" && b.validateModifierName(e.name, {
       strict: !0
     });
     const t = this.metadata.get(e.name), s = t?.plugin === e.plugin;
@@ -766,7 +771,7 @@ const y = class y {
     return Array.from(this.plugins.values());
   }
 };
-u(y, "instanceCount", 0), u(y, "FORBIDDEN_NAMES", /* @__PURE__ */ new Set([
+m(b, "instanceCount", 0), m(b, "FORBIDDEN_NAMES", /* @__PURE__ */ new Set([
   "__proto__",
   "constructor",
   "prototype",
@@ -774,29 +779,593 @@ u(y, "instanceCount", 0), u(y, "FORBIDDEN_NAMES", /* @__PURE__ */ new Set([
   "isPrototypeOf",
   "toString",
   "valueOf"
-])), u(y, "NAME_PATTERN", /^[a-zA-Z_$][a-zA-Z0-9_$]*$/);
-let K = y;
-function _e() {
-  return Q || (Q = new K()), Q;
+])), m(b, "NAME_PATTERN", /^[a-zA-Z_$][a-zA-Z0-9_$]*$/);
+let ce = b;
+function at() {
+  return ie || (ie = new ce()), ie;
 }
-const te = _e();
-function w(n, e = {}) {
-  const t = ne();
+const I = at();
+function T(n, e = {}) {
+  const t = Ce();
   let s;
   const r = () => {
     const o = n(s);
     return s = o, o;
-  }, i = new oe(r, t);
+  }, i = new Ee(r, t);
   return e.name && Object.defineProperty(i, "name", {
     value: e.name,
     enumerable: !1
   }), i.execute(), i;
 }
+var lt = Object.defineProperty, ct = (n, e, t) => e in n ? lt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, ht = (n, e, t) => ct(n, e + "", t);
+const dt = /* @__PURE__ */ new Set([
+  "onFocus",
+  "onBlur",
+  "onKeyDown",
+  "onKeyUp",
+  "onKeyPress",
+  "onScroll",
+  "onWheel",
+  "onInput",
+  "onChange",
+  "onCopy",
+  "onCut",
+  "onPaste",
+  "onSelect",
+  "onTouchStart",
+  "onTouchMove",
+  "onTouchEnd",
+  "onSwipeLeft",
+  "onSwipeRight"
+]);
+function Ae() {
+  return I;
+}
+function d(n, ...e) {
+  const t = Ae().get(n);
+  if (t)
+    try {
+      return t.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.`
+  );
+}
+let ut = class {
+  constructor(e) {
+    this.component = e, ht(this, "modifiers", []);
+  }
+  frame(e, t) {
+    let s;
+    return typeof e == "object" ? s = e : (s = {}, e !== void 0 && (s.width = e), t !== void 0 && (s.height = t)), this.modifiers.push(d("frame", s)), this;
+  }
+  // margin() moved to @tachui/modifiers - available via Proxy when imported
+  layoutPriority(e) {
+    return this.modifiers.push(d("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(d("absolutePosition", e, t)), this;
+  }
+  // Appearance modifiers
+  foregroundColor(e) {
+    return this.modifiers.push(d("foregroundColor", e)), this;
+  }
+  backgroundColor(e) {
+    return this.modifiers.push(d("backgroundColor", e)), this;
+  }
+  background(e) {
+    const t = d("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(
+      d("fontFamily", t.family)
+    ), t.size !== void 0 && this.modifiers.push(d("fontSize", t.size)), t.weight !== void 0 && this.modifiers.push(d("fontWeight", t.weight)), t.style !== void 0 && this.modifiers.push(d("fontStyle", t.style))) : (t = e !== void 0 ? { size: e } : {}, typeof e == "string" && e.startsWith(".") ? this.modifiers.push(d("fontPreset", e)) : t.size !== void 0 && this.modifiers.push(d("fontSize", t.size))), this;
+  }
+  fontWeight(e) {
+    return this.modifiers.push(d("fontWeight", e)), this;
+  }
+  fontSize(e) {
+    return this.modifiers.push(d("fontSize", e)), this;
+  }
+  fontFamily(e) {
+    return this.modifiers.push(d("fontFamily", e)), this;
+  }
+  opacity(e) {
+    return this.modifiers.push(d("opacity", e)), this;
+  }
+  cornerRadius(e) {
+    return this.modifiers.push(d("cornerRadius", e)), this;
+  }
+  border(e, t) {
+    let s;
+    return typeof e == "object" ? s = e : s = {
+      style: "solid",
+      ...e !== void 0 && { width: e },
+      ...t !== void 0 && { color: t }
+    }, this.modifiers.push(d("border", s)), this;
+  }
+  borderWidth(e) {
+    return this.modifiers.push(d("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(d("blur", e)), this;
+  }
+  brightness(e) {
+    return this.modifiers.push(d("brightness", e)), this;
+  }
+  contrast(e) {
+    return this.modifiers.push(d("contrast", e)), this;
+  }
+  saturation(e) {
+    return this.modifiers.push(d("saturation", e)), this;
+  }
+  hueRotation(e) {
+    return this.modifiers.push(d("hueRotation", e)), this;
+  }
+  grayscale(e) {
+    return this.modifiers.push(d("grayscale", e)), this;
+  }
+  colorInvert(e = 1) {
+    return this.modifiers.push(d("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(d("highPriorityGesture", e, t)), this;
+  }
+  simultaneousGesture(e, t) {
+    return this.modifiers.push(d("simultaneousGesture", e, t)), this;
+  }
+  // allowsHitTesting() moved to @tachui/modifiers - available via Proxy when imported
+  // Animation modifiers
+  transform(e) {
+    return this.modifiers.push(d("transform", e)), this;
+  }
+  animation(e) {
+    return this.modifiers.push(d("animation", e)), this;
+  }
+  // Lifecycle modifiers
+  task(e, t) {
+    return this.modifiers.push(
+      d("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(d("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(d("onTap", e)), this;
+  }
+  onFocus(e) {
+    return this.modifiers.push(d("onFocus", e)), this;
+  }
+  onBlur(e) {
+    return this.modifiers.push(d("onBlur", e)), this;
+  }
+  onKeyDown(e) {
+    return this.modifiers.push(d("onKeyDown", e)), this;
+  }
+  onScroll(e) {
+    return this.modifiers.push(d("onScroll", e)), this;
+  }
+  onKeyPress(e) {
+    return this.modifiers.push(d("onKeyPress", e)), this;
+  }
+  onKeyUp(e) {
+    return this.modifiers.push(d("onKeyUp", e)), this;
+  }
+  onDoubleClick(e) {
+    return this.modifiers.push(d("onDoubleClick", e)), this;
+  }
+  onContextMenu(e) {
+    return this.modifiers.push(d("onContextMenu", e)), this;
+  }
+  onWheel(e) {
+    return this.modifiers.push(d("onWheel", e)), this;
+  }
+  onInput(e) {
+    return this.modifiers.push(d("onInput", e)), this;
+  }
+  onChange(e) {
+    return this.modifiers.push(d("onChange", e)), this;
+  }
+  onCopy(e) {
+    return this.modifiers.push(d("onCopy", e)), this;
+  }
+  onCut(e) {
+    return this.modifiers.push(d("onCut", e)), this;
+  }
+  onPaste(e) {
+    return this.modifiers.push(d("onPaste", e)), this;
+  }
+  onSelect(e) {
+    return this.modifiers.push(d("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(d("disabled", e)), this;
+  }
+  asHTML(e) {
+    const t = d("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] : [], s = this.modifiers.filter(
+        (a) => !e.modifiers.some(
+          (h) => h === a
+          // Reference equality check
+        )
+      ), r = [...t, ...s], i = e._originalComponent || e;
+      let o;
+      if (typeof i?.clone == "function")
+        o = i.clone();
+      else {
+        const a = i && Object.getPrototypeOf(i) || Object.prototype;
+        o = Object.create(a), Object.assign(o, i), o.props = { ...i.props }, o.cleanup = Array.isArray(i.cleanup) ? [...i.cleanup] : [], o.mounted = i.mounted ?? !1, o.id = i.id, o.type = i.type, o.render = typeof i.render == "function" ? i.render.bind(i) : () => [];
+      }
+      const l = te(
+        o,
+        r
+      );
+      return process.env.NODE_ENV === "test" && this.applyModifiersToPropsForTesting(
+        l,
+        r
+      ), l;
+    } else {
+      const e = te(
+        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((s) => {
+      if (s.type === "aria") {
+        const r = s.properties?.aria || {};
+        Object.entries(r).forEach(([i, o]) => {
+          if (o != null)
+            if (i === "role")
+              e.props.role = o;
+            else {
+              const l = i.startsWith("aria-") ? i : `aria-${i}`;
+              e.props[l] = typeof o == "boolean" ? o : String(o);
+            }
+        });
+      } else if (dt.has(s.type)) {
+        const r = s.properties || {};
+        Object.entries(r).forEach(([i, o]) => {
+          typeof o == "function" && (e.props[i] = o);
+        });
+      } else if (s.type === "interaction") {
+        const r = s.properties;
+        Object.entries(r).forEach(([i, o]) => {
+          typeof o == "function" && (e.props[i] = o);
+        }), (r.onSwipeLeft || r.onSwipeRight) && (e.props.onTouchStart = () => {
+        });
+      } else if (s.type === "utility") {
+        const r = s.properties;
+        e.props.style || (e.props.style = {}), Object.entries(r).forEach(([i, o]) => {
+          o != null && (e.props.style[i] = o);
+        });
+      } else if (s.type === "tabIndex") {
+        const r = s;
+        e.props.tabIndex = r.properties?.tabIndex;
+      } else if (s.type === "appearance") {
+        const r = s.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 (s.type === "foreground") {
+        const r = s.properties || {};
+        r.color !== void 0 && (e.props.style || (e.props.style = {}), e.props.style.color = r.color);
+      } else if (s.type === "background") {
+        const r = s.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 (s.type === "transition") {
+        const r = s.properties;
+        e.props.style || (e.props.style = {}), r.transition && (e.props.style.transition = r.transition);
+      } else if (s.type === "size") {
+        const r = s.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 (s.type === "css") {
+        const r = s.properties;
+        e.props.style || (e.props.style = {}), Object.entries(r).forEach(([i, o]) => {
+          o != null && (e.props.style[i] = o);
+        });
+      }
+    });
+  }
+  // ============================================================================
+  // MISSING MODIFIER METHODS - ACCESSIBILITY & NAVIGATION
+  // ============================================================================
+  // Individual ARIA methods for better developer experience
+  role(e) {
+    return this.modifiers.push(d("role", e)), this;
+  }
+  ariaLabel(e) {
+    return this.modifiers.push(d("ariaLabel", e)), this;
+  }
+  ariaLive(e) {
+    return this.modifiers.push(d("ariaLive", e)), this;
+  }
+  ariaDescribedBy(e) {
+    return this.modifiers.push(d("ariaDescribedBy", e)), this;
+  }
+  ariaModal(e) {
+    return this.modifiers.push(d("ariaModal", e)), this;
+  }
+  // Touch and gesture events
+  onTouchStart(e) {
+    return this.modifiers.push(d("onTouchStart", e)), this;
+  }
+  onTouchMove(e) {
+    return this.modifiers.push(d("onTouchMove", e)), this;
+  }
+  onTouchEnd(e) {
+    return this.modifiers.push(d("onTouchEnd", e)), this;
+  }
+  // Swipe gestures (simplified implementations)
+  onSwipeLeft(e) {
+    return this.modifiers.push(d("onSwipeLeft", e)), this;
+  }
+  onSwipeRight(e) {
+    return this.modifiers.push(d("onSwipeRight", e)), this;
+  }
+  // Navigation methods - these delegate to the navigation package functions
+  navigationTitle(e) {
+    return this.modifiers.push(d("navigationTitle", e)), this;
+  }
+  navigationBarHidden(e = !0) {
+    return this.modifiers.push(d("navigationBarHidden", e)), this;
+  }
+  navigationBarItems(e) {
+    return this.modifiers.push(d("navigationBarItems", e)), this;
+  }
+  // ============================================================================
+  // MISSING TRANSITION METHODS
+  // ============================================================================
+  transitions(e) {
+    return this.modifiers.push(d("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, s) {
+    return this.modifiers.push(d("scaleEffect", e, t, s)), this;
+  }
+  // Shadow and clipping modifiers moved to @tachui/modifiers
+  // Available via Proxy when @tachui/modifiers is imported:
+  // - shadow(), textShadow(), shadows(), shadowPreset(), clipped()
+};
+function pt(n) {
+  const e = new ut(n);
+  return new Proxy(e, {
+    get(t, s, r) {
+      if (s in t) {
+        const i = t[s];
+        return typeof i == "function" ? function(...o) {
+          const l = i.apply(r, o);
+          return l === t ? r : l;
+        } : i;
+      }
+      if (typeof s == "string") {
+        const i = Ae();
+        if (s === "responsive")
+          return function(...o) {
+            const l = o[0];
+            if (l) {
+              const a = d(s, l);
+              this.addModifierInternal(a);
+            }
+            return r;
+          };
+        if (s === "base" || s === "sm" || s === "md" || s === "lg" || s === "xl" || s === "2xl")
+          return new Proxy({}, {
+            get(o, l) {
+              if (typeof l == "string")
+                return (...a) => {
+                  const h = { [l]: { [s]: a[0] } }, c = d("responsive", h);
+                  return t.addModifierInternal(c), r;
+                };
+            }
+          });
+        if (i.has(s))
+          return function(...o) {
+            const l = d(s, ...o);
+            return this.addModifierInternal(l), r;
+          };
+      }
+    }
+  });
+}
+class ft {
+  register(e, t) {
+    I.register(e, t);
+  }
+  get(e) {
+    return I.get(e);
+  }
+  has(e) {
+    return I.has(e);
+  }
+  list() {
+    return I.list();
+  }
+  clear() {
+    I.clear();
+  }
+  validateRegistry() {
+    return I.validateRegistry();
+  }
+}
+const V = new ft();
 process.env.NODE_ENV === "development" && console.log("📤 Created RegistryAdapter for globalModifierRegistry", {
-  registryId: te.instanceId,
-  currentSize: te.list().length
+  registryId: I.instanceId,
+  currentSize: I.list().length
 });
-function Ve(n, e, t = {}, s = {}) {
+function Me(n, e, t = {}, s = {}) {
   if (!e.length) return n;
   const r = {
     componentId: t.componentId || "unknown",
@@ -812,51 +1381,51 @@ function Ve(n, e, t = {}, s = {}) {
   };
   switch (s.batch ? "batch" : "sequential") {
     case "batch":
-      return Fe(n, e, r, s);
+      return gt(n, e, r, s);
     default:
-      return He(n, e, r, s);
+      return mt(n, e, r, s);
   }
 }
-function He(n, e, t, s) {
+function mt(n, e, t, s) {
   const r = [...e].sort(
-    (h, c) => h.priority - c.priority
+    (a, h) => a.priority - h.priority
   );
   let i = n;
-  const o = [], a = [];
-  for (const h of r)
+  const o = [], l = [];
+  for (const a of r)
     try {
-      const c = h.apply(i, t);
-      c && typeof c == "object" && "type" in c && (i = c), s.immediate && !s.suppressEffects && (o.forEach((l) => l()), o.length = 0);
-    } catch (c) {
-      console.error(`Failed to apply modifier ${h.type}:`, c);
+      const h = a.apply(i, t);
+      h && typeof h == "object" && "type" in h && (i = h), s.immediate && !s.suppressEffects && (o.forEach((c) => c()), o.length = 0);
+    } catch (h) {
+      console.error(`Failed to apply modifier ${a.type}:`, h);
     }
-  if (a.length > 0) {
-    const h = i.dispose;
+  if (l.length > 0) {
+    const a = i.dispose;
     i.dispose = () => {
-      a.forEach((c) => c()), h && h();
+      l.forEach((h) => h()), a && a();
     };
   }
   return i;
 }
-function Fe(n, e, t, s) {
-  const r = Ue(e);
+function gt(n, e, t, s) {
+  const r = yt(e);
   let i = n;
-  const o = [], a = [];
-  for (const [h, c] of r)
+  const o = [], l = [];
+  for (const [a, h] of r)
     try {
-      i = je(i, c, t);
-    } catch (l) {
-      (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error(`Failed to apply modifier group ${h}:`, l);
+      i = vt(i, h, t);
+    } catch (c) {
+      (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error(`Failed to apply modifier group ${a}:`, c);
     }
-  if (s.suppressEffects || o.forEach((h) => h()), a.length > 0) {
-    const h = i.dispose;
+  if (s.suppressEffects || o.forEach((a) => a()), l.length > 0) {
+    const a = i.dispose;
     i.dispose = () => {
-      a.forEach((c) => c()), h && h();
+      l.forEach((h) => h()), a && a();
     };
   }
   return i;
 }
-function Ue(n) {
+function yt(n) {
   const e = /* @__PURE__ */ new Map();
   for (const t of n) {
     const s = e.get(t.type) || [];
@@ -864,7 +1433,7 @@ function Ue(n) {
   }
   return e;
 }
-function je(n, e, t) {
+function vt(n, e, t) {
   const s = [...e].sort(
     (i, o) => i.priority - o.priority
   );
@@ -878,7 +1447,80 @@ function je(n, e, t) {
     }
   return r;
 }
-const H = /* @__PURE__ */ new Map([
+function bt(n) {
+  return n && typeof n.concat == "function" && typeof n.toSegment == "function" && typeof n.isConcatenatable == "function";
+}
+function te(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 = pt(
+    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 s = n._enhancedLifecycle;
+  s && (t._enhancedLifecycle = s, "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 r = n.render ? n.render.bind(n) : () => [];
+  return t.render = () => {
+    const i = r();
+    return (Array.isArray(i) ? i : [i]).map((o, l) => (o && typeof o == "object" && (l === 0 ? (o.modifiers = [...t.modifiers], o.componentId = n.id, o._originalComponent = t._originalComponent) : (o.modifiers && delete o.modifiers, o.componentId && o.componentId === n.id && delete o.componentId)), o));
+  }, bt(n) && (t.concat = function(i) {
+    const o = {
+      id: t.id,
+      component: t,
+      modifiers: t.modifiers,
+      render: () => {
+        const h = t.render();
+        return Array.isArray(h) ? h[0] : h;
+      }
+    }, l = i.toSegment(), a = {
+      totalSegments: i instanceof Y ? i.segments.length + 1 : 2,
+      accessibilityRole: "text",
+      // Simplified for now
+      semanticStructure: "inline"
+      // Simplified for now
+    };
+    return i instanceof Y ? new Y(
+      [o, ...i.segments],
+      a
+    ) : new Y([o, l], a);
+  }, t.toSegment = function() {
+    return {
+      id: t.id,
+      component: t,
+      modifiers: t.modifiers,
+      render: () => {
+        const i = t.render();
+        return Array.isArray(i) ? i[0] : i;
+      }
+    };
+  }, t.isConcatenatable = function() {
+    return !0;
+  }), typeof n?.clone == "function" && (t.clone = (i) => {
+    const o = n.clone(i);
+    return te(
+      o,
+      [...t.modifiers]
+    );
+  }), t;
+}
+const K = /* @__PURE__ */ new Map([
   ["nav", { role: "navigation", applyARIA: !0 }],
   ["main", { role: "main", applyARIA: !0 }],
   ["article", { role: "article", applyARIA: !0 }],
@@ -896,28 +1538,28 @@ const H = /* @__PURE__ */ new Map([
   ["a", { role: "link", applyARIA: !1 }]
   // Usually implicit
 ]);
-let We = {
+let St = {
   autoApplySemanticRoles: !0,
   warnOnOverrides: process.env.NODE_ENV !== "production",
   warnOnSemanticIssues: process.env.NODE_ENV !== "production",
   validateTags: !0,
   allowInvalidTags: !0
 };
-function Be() {
-  return { ...We };
+function wt() {
+  return { ...St };
 }
-var Qe = Object.defineProperty, qe = (n, e, t) => e in n ? Qe(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, Ye = (n, e, t) => qe(n, e + "", t);
-const ae = class L {
+var Ct = Object.defineProperty, Et = (n, e, t) => e in n ? Ct(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, At = (n, e, t) => Et(n, e + "", t);
+const xe = class W {
   static getInstance() {
-    return L.instance || (L.instance = new L()), L.instance;
+    return W.instance || (W.instance = new W()), W.instance;
   }
   /**
    * Apply semantic ARIA attributes to an element based on its tag
    */
   applySemanticAttributes(e, t, s) {
-    const r = Be();
+    const r = wt();
     if (!r.autoApplySemanticRoles) return;
-    const i = H.get(t);
+    const i = K.get(t);
     if (!(!i || !i.applyARIA)) {
       if (s?.role) {
         r.warnOnSemanticIssues && process.env.NODE_ENV !== "production" && console.warn(
@@ -938,20 +1580,20 @@ const ae = class L {
    * Get semantic role information for a tag
    */
   getSemanticRole(e) {
-    return H.get(e);
+    return K.get(e);
   }
   /**
    * Check if a tag has automatic ARIA role application enabled
    */
   hasAutoARIA(e) {
-    const t = H.get(e);
+    const t = K.get(e);
     return t ? t.applyARIA : !1;
   }
   /**
    * Get all tags that support automatic ARIA roles
    */
   getAutoARIATags() {
-    return Array.from(H.entries()).filter(([, e]) => e.applyARIA).map(([e]) => e);
+    return Array.from(K.entries()).filter(([, e]) => e.applyARIA).map(([e]) => e);
   }
   /**
    * Apply semantic attributes during DOM node creation
@@ -972,11 +1614,11 @@ const ae = class L {
     }
   }
 };
-Ye(ae, "instance");
-let Xe = ae;
-const Ge = Xe.getInstance();
-var Ke = Object.defineProperty, Ze = (n, e, t) => e in n ? Ke(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, q = (n, e, t) => Ze(n, typeof e != "symbol" ? e + "" : e, t);
-const Je = /* @__PURE__ */ new Set([
+At(xe, "instance");
+let Mt = xe;
+const xt = Mt.getInstance();
+var It = Object.defineProperty, Tt = (n, e, t) => e in n ? It(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, ne = (n, e, t) => Tt(n, typeof e != "symbol" ? e + "" : e, t);
+const $t = /* @__PURE__ */ new Set([
   "click",
   "dblclick",
   "mousedown",
@@ -995,16 +1637,16 @@ const Je = /* @__PURE__ */ new Set([
   "keydown",
   "keyup",
   "keypress"
-]), se = /* @__PURE__ */ new Set([
+]), be = /* @__PURE__ */ new Set([
   "scroll",
   "wheel",
   "touchstart",
   "touchmove",
   "touchend"
 ]);
-class et {
+class Nt {
   constructor() {
-    q(this, "containerListeners", /* @__PURE__ */ new WeakMap()), q(this, "elementHandlers", /* @__PURE__ */ new WeakMap()), q(this, "handlerCounts", /* @__PURE__ */ new WeakMap());
+    ne(this, "containerListeners", /* @__PURE__ */ new WeakMap()), ne(this, "elementHandlers", /* @__PURE__ */ new WeakMap()), ne(this, "handlerCounts", /* @__PURE__ */ new WeakMap());
   }
   /**
    * Register an event handler with delegation
@@ -1014,8 +1656,8 @@ class et {
     i && i.has(s) && this.unregister(e, t, s), i || (i = /* @__PURE__ */ new Map(), this.elementHandlers.set(t, i)), i.set(s, { handler: r, element: t });
     let o = this.handlerCounts.get(e);
     o || (o = /* @__PURE__ */ new Map(), this.handlerCounts.set(e, o));
-    const a = o.get(s) || 0;
-    return o.set(s, a + 1), this.ensureRootListener(e, s), () => {
+    const l = o.get(s) || 0;
+    return o.set(s, l + 1), this.ensureRootListener(e, s), () => {
       this.unregister(e, t, s);
     };
   }
@@ -1040,7 +1682,7 @@ class et {
       return;
     const r = (o) => {
       this.handleDelegatedEvent(e, t, o);
-    }, i = se.has(t) ? { passive: !0 } : { passive: !1 };
+    }, i = be.has(t) ? { passive: !0 } : { passive: !1 };
     e.addEventListener(t, r, i), s.set(t, r);
   }
   /**
@@ -1062,12 +1704,12 @@ class et {
     for (; i && i !== e; ) {
       const o = this.elementHandlers.get(i);
       if (o) {
-        const a = o.get(t);
-        if (a) {
+        const l = o.get(t);
+        if (l) {
           try {
-            a.handler(s);
-          } catch (h) {
-            console.error(`Delegated event handler error for ${t}:`, h);
+            l.handler(s);
+          } catch (a) {
+            console.error(`Delegated event handler error for ${t}:`, a);
           }
           return;
         }
@@ -1079,13 +1721,13 @@ class et {
    * Check if event type should use delegation
    */
   shouldDelegate(e) {
-    return Je.has(e);
+    return $t.has(e);
   }
   /**
    * Check if event type should use passive listeners
    */
   shouldBePassive(e) {
-    return se.has(e);
+    return be.has(e);
   }
   /**
    * Get metrics for debugging
@@ -1114,11 +1756,11 @@ class et {
     }), this.containerListeners.delete(e)), this.handlerCounts.delete(e);
   }
 }
-const Y = new et();
-var tt = Object.defineProperty, st = (n, e, t) => e in n ? tt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, O = (n, e, t) => st(n, typeof e != "symbol" ? e + "" : e, t);
-class le {
+const oe = new Nt();
+var Rt = Object.defineProperty, Ot = (n, e, t) => e in n ? Rt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, j = (n, e, t) => Ot(n, typeof e != "symbol" ? e + "" : e, t);
+class Ie {
   constructor() {
-    O(this, "nodeMap", /* @__PURE__ */ new WeakMap()), O(this, "cleanupMap", /* @__PURE__ */ new WeakMap()), O(this, "renderedNodes", /* @__PURE__ */ new Set()), O(this, "elementToContainer", /* @__PURE__ */ new WeakMap()), O(this, "metrics", {
+    j(this, "nodeMap", /* @__PURE__ */ new WeakMap()), j(this, "cleanupMap", /* @__PURE__ */ new WeakMap()), j(this, "renderedNodes", /* @__PURE__ */ new Set()), j(this, "elementToContainer", /* @__PURE__ */ new WeakMap()), j(this, "metrics", {
       created: 0,
       adopted: 0,
       removed: 0,
@@ -1206,69 +1848,69 @@ class le {
           return;
         this.setElementProp(e, o, void 0);
       }
-    }), Object.entries(r).forEach(([o, a]) => {
-      o === "key" || o === "children" || i && i[o] === a || this.applyProp(e, o, a, s);
+    }), Object.entries(r).forEach(([o, l]) => {
+      o === "key" || o === "children" || i && i[o] === l || this.applyProp(e, o, l, s);
     }), t.__appliedProps = { ...r }, "componentMetadata" in t && t.componentMetadata) {
       const o = t.componentMetadata;
       if (o.overriddenTo && o.originalType && t.tag)
         try {
-          Ge.processElementNode(
+          xt.processElementNode(
             e,
             t.tag,
             o,
             r?.aria || void 0
           );
-        } catch (a) {
-          console.warn("[tachUI] Could not process semantic attributes:", a);
+        } catch (l) {
+          console.warn("[tachUI] Could not process semantic attributes:", l);
         }
     }
   }
   updateChildren(e, t) {
     const s = t.__renderedChildren || [], r = t.children || [], i = this.elementToContainer.get(e), o = typeof process < "u" && process.env?.TACHUI_DEBUG_PHASE1B === "1";
-    if (s.length === r.length && s.length > 0 && s.every((l, d) => l === r[d])) {
-      r.forEach((l) => {
-        this.updateExistingNode(l);
+    if (s.length === r.length && s.length > 0 && s.every((c, u) => c === r[u])) {
+      r.forEach((c) => {
+        this.updateExistingNode(c);
       }), t.__renderedChildren = r;
       return;
     }
     if (s.length === 0) {
-      r.forEach((l) => {
-        if (!l || l.type == null) return;
-        const d = this.renderSingle(l, i);
-        this.appendNode(e, d);
+      r.forEach((c) => {
+        if (!c || c.type == null) return;
+        const u = this.renderSingle(c, i);
+        this.appendNode(e, u);
       }), t.__renderedChildren = r;
       return;
     }
-    const a = /* @__PURE__ */ new Map(), h = [];
-    s.forEach((l) => {
-      l.key != null ? a.set(l.key, l) : h.push(l);
+    const l = /* @__PURE__ */ new Map(), a = [];
+    s.forEach((c) => {
+      c.key != null ? l.set(c.key, c) : a.push(c);
     });
-    const c = Array.from({ length: r.length });
-    if (r.forEach((l, d) => {
+    const h = Array.from({ length: r.length });
+    if (r.forEach((c, u) => {
       let f;
-      l.key != null ? (f = a.get(l.key), f && a.delete(l.key)) : h.length > 0 && (f = h.shift()), f && this.adoptNode(f, l);
-      const p = this.renderSingle(l, i);
-      c[d] = p;
+      c.key != null ? (f = l.get(c.key), f && l.delete(c.key)) : a.length > 0 && (f = a.shift()), f && this.adoptNode(f, c);
+      const p = this.renderSingle(c, i);
+      h[u] = p;
     }), o && t.tag) {
-      const l = r.map((p) => p.key ?? null), d = s.map((p) => p.key ?? null), f = c.map(
+      const c = r.map((p) => p.key ?? null), u = s.map((p) => p.key ?? null), f = h.map(
         (p) => p && "getAttribute" in p ? p.getAttribute("data-id") : null
       );
       console.log("[diff] state", {
         parent: t.tag,
-        prev: d,
-        next: l,
+        prev: u,
+        next: c,
         dom: f
       });
     }
-    if (a.forEach((l) => {
-      this.removeNode(l);
-    }), h.forEach((l) => {
-      this.removeNode(l);
+    if (l.forEach((c) => {
+      this.removeNode(c);
+    }), a.forEach((c) => {
+      this.removeNode(c);
     }), typeof e.insertBefore == "function" && typeof e.appendChild == "function") {
-      let l = null;
-      for (let d = c.length - 1; d >= 0; d--) {
-        const f = c[d];
-        f && (this.insertNode(e, f, l), l = f);
+      let c = null;
+      for (let u = h.length - 1; u >= 0; u--) {
+        const f = h[u];
+        f && (this.insertNode(e, f, c), c = f);
       }
     }
     t.__renderedChildren = r;
@@ -1291,7 +1933,7 @@ class le {
     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 s = e.reactiveContent, r = w(() => {
+        const s = e.reactiveContent, r = T(() => {
           try {
             const i = s();
             e.text = String(i);
@@ -1317,7 +1959,7 @@ class le {
   createTextNode(e) {
     const t = document.createTextNode(e.text || "");
     if (this.metrics.created++, this.recordTextUpdate(), e.reactiveContent) {
-      const s = e.reactiveContent, r = w(() => {
+      const s = e.reactiveContent, r = T(() => {
         try {
           const i = s();
           e.text = String(i);
@@ -1365,8 +2007,8 @@ class le {
       this.applyEventListener(e, t, s, r);
       return;
     }
-    if (T(s) || P(s)) {
-      const i = w(() => {
+    if (F(s) || B(s)) {
+      const i = T(() => {
         const o = s();
         this.setElementProp(e, t, o);
       });
@@ -1401,8 +2043,8 @@ class le {
    * Apply className with reactive updates
    */
   applyClassName(e, t) {
-    if (T(t) || P(t)) {
-      const s = w(() => {
+    if (F(t) || B(t)) {
+      const s = T(() => {
         const r = t(), i = this.normalizeClassName(r);
         e.className !== i && (e.className = i, this.recordAttributeWrite());
       });
@@ -1425,8 +2067,8 @@ class le {
    */
   applyStyle(e, t) {
     const s = e;
-    if (T(t) || P(t)) {
-      const r = w(() => {
+    if (F(t) || B(t)) {
+      const r = T(() => {
         const i = t();
         this.setElementStyles(s, i);
       });
@@ -1449,26 +2091,26 @@ class le {
       Object.keys(s).forEach((r) => {
         r in t || (e.style.removeProperty(r.replace(/[A-Z]/g, (i) => `-${i.toLowerCase()}`)), this.recordAttributeRemoval());
       }), Object.entries(t).forEach(([r, i]) => {
-        if (T(i) || P(i)) {
-          const o = w(() => {
-            const a = i(), h = r.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
-            if (a == null)
-              e.style.removeProperty(h), this.recordAttributeRemoval();
+        if (F(i) || B(i)) {
+          const o = T(() => {
+            const l = i(), a = r.replace(/[A-Z]/g, (h) => `-${h.toLowerCase()}`);
+            if (l == null)
+              e.style.removeProperty(a), this.recordAttributeRemoval();
             else {
-              const c = String(a);
-              e.style.getPropertyValue(h) !== c && (e.style.setProperty(h, c), this.recordAttributeWrite());
+              const h = String(l);
+              e.style.getPropertyValue(a) !== h && (e.style.setProperty(a, h), this.recordAttributeWrite());
             }
           });
           this.addCleanup(e, () => {
             o.dispose();
           });
         } else {
-          const o = r.replace(/[A-Z]/g, (a) => `-${a.toLowerCase()}`);
+          const o = r.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
           if (i == null)
             e.style.getPropertyValue(o) && (e.style.removeProperty(o), this.recordAttributeRemoval());
           else {
-            const a = String(i);
-            e.style.getPropertyValue(o) !== a && (e.style.setProperty(o, a), this.recordAttributeWrite());
+            const l = String(i);
+            e.style.getPropertyValue(o) !== l && (e.style.setProperty(o, l), this.recordAttributeWrite());
           }
         }
       }), e.__appliedStyles = { ...t };
@@ -1481,25 +2123,25 @@ class le {
     let i = t.slice(2).toLowerCase();
     i === "focus" ? i = "focusin" : i === "blur" && (i = "focusout");
     const o = r || this.elementToContainer.get(e);
-    if (o && Y.shouldDelegate(i)) {
-      const c = Y.register(
+    if (o && oe.shouldDelegate(i)) {
+      const h = oe.register(
         o,
         e,
         i,
         s
       );
-      this.addCleanup(e, c);
+      this.addCleanup(e, h);
       return;
     }
-    const a = (c) => {
+    const l = (h) => {
       try {
-        s(c);
-      } catch (l) {
-        console.error(`Event handler error for ${t}:`, l);
+        s(h);
+      } catch (c) {
+        console.error(`Event handler error for ${t}:`, c);
       }
-    }, h = Y.shouldBePassive(i) ? { passive: !0 } : void 0;
-    e.addEventListener(i, a, h), this.addCleanup(e, () => {
-      e.removeEventListener(i, a, h);
+    }, a = oe.shouldBePassive(i) ? { passive: !0 } : void 0;
+    e.addEventListener(i, l, a), this.addCleanup(e, () => {
+      e.removeEventListener(i, l, a);
     });
   }
   /**
@@ -1547,7 +2189,7 @@ class le {
    */
   createReactiveText(e) {
     const t = document.createTextNode("");
-    return w(() => {
+    return T(() => {
       t.textContent = e();
     }), t;
   }
@@ -1556,7 +2198,7 @@ class le {
    */
   createReactiveElement(e, t, s) {
     const r = document.createElement(e);
-    return w(() => {
+    return T(() => {
       const i = t();
       this.applyProps(r, i);
     }), s && s.forEach((i) => {
@@ -1572,7 +2214,7 @@ class le {
       t.length > 0 && this.recordModifierApplications(t.length);
       const r = s.componentInstance || s.componentMetadata && s.componentMetadata.componentInstance || s._originalComponent || // Use original component if available
       s;
-      Ve(
+      Me(
         s,
         t,
         {
@@ -1661,11 +2303,497 @@ class le {
     this.metrics.modifierApplications += e;
   }
 }
-new le();
-var rt = Object.defineProperty, it = (n, e, t) => e in n ? rt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, E = (n, e, t) => it(n, typeof e != "symbol" ? e + "" : e, t);
-class nt {
+new Ie();
+function Pt(n, e, ...t) {
+  const s = t.flat().filter((i) => i != null).map((i) => typeof i == "string" || typeof i == "number" ? { type: "text", text: String(i) } : i), r = {
+    type: "element",
+    tag: n,
+    props: e || {},
+    children: s,
+    key: e?.key ?? void 0
+  };
+  return e && "componentMetadata" in e && (r.componentMetadata = e.componentMetadata), r;
+}
+var kt = Object.defineProperty, Lt = (n, e, t) => e in n ? kt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, P = (n, e, t) => Lt(n, typeof e != "symbol" ? e + "" : e, t);
+let Y = class ee {
+  // Required by ModifiableComponent interface
+  constructor(e, t, s = !0) {
+    this.metadata = t, P(this, "type", "component"), P(this, "id"), P(this, "mounted", !1), P(this, "cleanup", []), P(this, "props", {}), P(this, "segments"), P(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(), s = this.buildAccessibilityAttributes(), r = this.modifiers && this.modifiers.some((o) => o.type === "asHTML");
+    let i;
+    return r ? i = this.renderSegmentsWithAsHTML() : i = this.segments.map((o) => o.render()).flat(), [Pt("span", {
+      class: `tachui-concatenated ${e}`,
+      ...s,
+      "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
+      }
+    }, ...i)];
+  }
+  /**
+   * 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, s;
+    return e instanceof ee ? (t = [...this.segments, ...e.segments], s = this.mergeMetadata(this.metadata, e.metadata, t.length)) : (t = [...this.segments, e.toSegment()], s = this.mergeMetadata(
+      this.metadata,
+      {
+        totalSegments: 1,
+        accessibilityRole: this.determineComponentAccessibilityRole(e),
+        semanticStructure: this.determineComponentSemanticStructure(e)
+      },
+      t.length
+    )), new ee(t, s);
+  }
+  /**
+   * 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"), s = e.some((o) => o === "EnhancedText"), r = e.some((o) => o === "EnhancedButton"), i = e.some((o) => o === "EnhancedLink");
+    return t && s && (r || i) ? "mixed-content" : t && s ? "image-text-composition" : t && !s ? "image-composition" : s && !t ? "text-composition" : "generic-composition";
+  }
+  /**
+   * Build comprehensive accessibility label for screen readers (Enhanced - Phase 4.2)
+   */
+  buildAccessibilityLabel() {
+    const e = this.segments.map((t) => this.extractAccessibilityText(t)).filter(Boolean);
+    return e.length === 0 ? "" : this.joinAccessibilityLabels(e);
+  }
+  /**
+   * 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 s = 0; s < e.length; s++) {
+      const r = e[s], i = e[s + 1];
+      t.push(r), i && (this.needsExplicitSeparator(r, i) ? t.push(". ") : t.push(" "));
+    }
+    return t.join("");
+  }
+  /**
+   * Determine if two accessibility labels need explicit separation
+   */
+  needsExplicitSeparator(e, t) {
+    const s = /[.!?:;]$/.test(e.trim()), r = /^[A-Z]/.test(t.trim());
+    return !s && r;
+  }
+  /**
+   * 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, s) {
+    return {
+      totalSegments: s,
+      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((s) => s.type === "asHTML") || [], t = [];
+    for (const s of this.segments) {
+      const r = s.render(), i = Array.isArray(r) ? r : [r];
+      if (this.isTextSegment(s) && i.length > 0) {
+        const o = this.applyAsHTMLToSegment(i[0], e, s);
+        t.push(o);
+      } else
+        t.push(...i);
+    }
+    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, s) {
+    const r = {
+      element: void 0,
+      // Will be set when the node is rendered to DOM
+      componentId: s.id,
+      phase: "creation",
+      componentInstance: s.component
+      // Pass the original component
+    };
+    return Me(e, t, r, { 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 ee ? t.generateAccessibilityTree().children : void 0
+    };
+  }
+};
+const Dt = {
+  proxyModifiers: !0
+};
+let zt = { ...Dt };
+function Te() {
+  return zt.proxyModifiers === !0;
+}
+let Se = /* @__PURE__ */ new WeakMap(), _t = /* @__PURE__ */ new WeakMap(), Ht = /* @__PURE__ */ new WeakMap(), Vt = /* @__PURE__ */ new WeakMap();
+function $(n) {
+  if (Object.prototype.hasOwnProperty.call(n, "modifiers") && Object.prototype.hasOwnProperty.call(n, "modifierBuilder"))
+    return n;
+  if (!n._modifiableComponent) {
+    const e = te(n);
+    Object.prototype.hasOwnProperty.call(n, "modifier") || Object.defineProperty(n, "modifier", {
+      configurable: !0,
+      enumerable: !1,
+      get() {
+        return e.modifierBuilder;
+      },
+      set(t) {
+        Object.defineProperty(n, "modifier", {
+          configurable: !0,
+          enumerable: !1,
+          writable: !0,
+          value: t
+        });
+      }
+    }), n._modifiableComponent = e;
+  }
+  return n._modifiableComponent;
+}
+function he(n) {
+  if (!Te())
+    return n;
+  const e = Se.get(n);
+  if (e)
+    return e;
+  const t = /* @__PURE__ */ new Map();
+  _t.set(n, t);
+  const s = /* @__PURE__ */ new Map();
+  Ht.set(n, s);
+  const r = /* @__PURE__ */ new Map();
+  Vt.set(n, r);
+  const i = {
+    get(l, a, h) {
+      if (a === Symbol.toStringTag)
+        return Reflect.get(l, a, h);
+      if (a === "render") {
+        if (r.has(a))
+          return r.get(a);
+        const c = $(l);
+        if (typeof c.render == "function") {
+          const u = c.render.bind(c);
+          return r.set(a, u), u;
+        }
+        return Reflect.get(l, a, h);
+      }
+      if (a === "build") {
+        const c = $(l), u = c.modifierBuilder || c.modifier;
+        if (u && typeof u.build == "function") {
+          const f = u.build.bind(u);
+          return (...p) => {
+            const v = f(...p);
+            return v && typeof v == "object" && !Array.isArray(v) ? he(
+              v
+            ) : v;
+          };
+        }
+        return;
+      }
+      if (a === "modifiers" || a === "modifier" || a === "modifierBuilder") {
+        if (a === "modifier") {
+          const u = Object.getOwnPropertyDescriptor(
+            l,
+            "modifier"
+          );
+          if (u && "value" in u)
+            return u.value;
+        }
+        const c = $(l);
+        return a === "modifiers" ? c.modifiers : c.modifierBuilder;
+      }
+      if (typeof a == "string") {
+        let c;
+        if (t.has(a) && (c = V.get(a), c)) {
+          const p = s.get(a);
+          p !== void 0 && p !== c && (t.delete(a), s.delete(a));
+        }
+        if (Reflect.has(l, a)) {
+          const p = Reflect.get(l, a, l);
+          if (typeof p != "function")
+            return p;
+        }
+        const u = $(l), f = u.modifierBuilder || u.modifier;
+        if (f) {
+          const p = f[a];
+          if (typeof p == "function") {
+            if (!t.has(a)) {
+              const v = (...k) => {
+                const C = $(l), E = C.modifierBuilder || C.modifier, pe = E?.[a];
+                if (typeof pe != "function")
+                  throw new Error(
+                    `Modifier '${String(a)}' is not callable`
+                  );
+                const se = pe.apply(E, k);
+                return se && se !== E ? se : o;
+              };
+              t.set(a, v), s.set(
+                a,
+                c ?? V.get(a)
+              );
+            }
+            return t.get(a);
+          }
+          if (p !== void 0)
+            return p;
+        }
+        if (V.has(a)) {
+          if (!t.has(a)) {
+            const p = (...v) => {
+              const k = $(l), C = k.modifierBuilder || k.modifier, E = C?.[a];
+              if (typeof E != "function")
+                throw new Error(`Modifier '${String(a)}' is not callable`);
+              return E.apply(C, v), o;
+            };
+            t.set(a, p), s.set(
+              a,
+              c ?? V.get(a)
+            );
+          }
+          return t.get(a);
+        }
+      }
+      if (Reflect.has(l, a)) {
+        const c = Reflect.get(l, a, l);
+        return typeof c == "function" ? a === "clone" ? (...u) => {
+          const f = c.apply(l, u);
+          return f && typeof f == "object" ? he(f) : f;
+        } : (r.has(a) || r.set(a, c.bind(l)), r.get(a)) : c;
+      }
+    },
+    has(l, a) {
+      if (a === "modifiers" || a === "modifier" || a === "modifierBuilder")
+        return !0;
+      if (typeof a == "string") {
+        const h = l._modifiableComponent || $(l), c = h?.modifierBuilder || h?.modifier;
+        if (c && typeof c[a] == "function")
+          return !0;
+      }
+      return Reflect.has(l, a) || V.has(a);
+    },
+    set(l, a, h, c) {
+      if (a === "modifier")
+        return Object.defineProperty(l, "modifier", {
+          configurable: !0,
+          enumerable: !1,
+          writable: !0,
+          value: h
+        }), t.clear(), !0;
+      if (a === "modifiers" && Array.isArray(h)) {
+        const u = $(l);
+        return u.modifiers = [...h], !0;
+      }
+      return Reflect.set(l, a, h, c);
+    }
+  }, o = new Proxy(n, i);
+  return Se.set(n, o), o;
+}
+var jt = Object.defineProperty, Ft = (n, e, t) => e in n ? jt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, x = (n, e, t) => Ft(n, typeof e != "symbol" ? e + "" : e, t);
+class Bt {
   constructor(e, t) {
-    E(this, "id"), E(this, "parent"), E(this, "providers", /* @__PURE__ */ new Map()), E(this, "consumers", /* @__PURE__ */ new Set()), E(this, "cleanup", /* @__PURE__ */ new Set()), E(this, "stateStore", /* @__PURE__ */ new Map()), E(this, "bindingStore", /* @__PURE__ */ new Map()), E(this, "createdAt", Date.now()), E(this, "updateCount", 0), this.id = e, this.parent = t;
+    x(this, "id"), x(this, "parent"), x(this, "providers", /* @__PURE__ */ new Map()), x(this, "consumers", /* @__PURE__ */ new Set()), x(this, "cleanup", /* @__PURE__ */ new Set()), x(this, "stateStore", /* @__PURE__ */ new Map()), x(this, "bindingStore", /* @__PURE__ */ new Map()), x(this, "createdAt", Date.now()), x(this, "updateCount", 0), this.id = e, this.parent = t;
   }
   /**
    * Store state value for a property
@@ -1749,16 +2877,16 @@ class nt {
     };
   }
 }
-function ot(n, e) {
-  return new nt(n, e);
+function Wt(n, e) {
+  return new Bt(n, e);
 }
-var at = Object.defineProperty, lt = (n, e, t) => e in n ? at(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, R = (n, e, t) => lt(n, typeof e != "symbol" ? e + "" : e, t);
-const ct = class k {
+var Ut = Object.defineProperty, qt = (n, e, t) => e in n ? Ut(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, H = (n, e, t) => qt(n, typeof e != "symbol" ? e + "" : e, t);
+const Qt = class U {
   constructor() {
-    R(this, "components", /* @__PURE__ */ new Map()), R(this, "contexts", /* @__PURE__ */ new Map()), R(this, "cleanupQueue", /* @__PURE__ */ new Set()), R(this, "updateQueue", /* @__PURE__ */ new Set()), R(this, "isUpdating", !1);
+    H(this, "components", /* @__PURE__ */ new Map()), H(this, "contexts", /* @__PURE__ */ new Map()), H(this, "cleanupQueue", /* @__PURE__ */ new Set()), H(this, "updateQueue", /* @__PURE__ */ new Set()), H(this, "isUpdating", !1);
   }
   static getInstance() {
-    return k.instance || (k.instance = new k()), k.instance;
+    return U.instance || (U.instance = new U()), U.instance;
   }
   /**
    * Register a new component instance
@@ -1850,14 +2978,14 @@ const ct = class k {
     }), this.cleanupQueue.clear(), this.updateQueue.clear();
   }
 };
-R(ct, "instance");
-var ht = Object.defineProperty, dt = (n, e, t) => e in n ? ht(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, C = (n, e, t) => dt(n, typeof e != "symbol" ? e + "" : e, t);
-const ce = class z {
+H(Qt, "instance");
+var Gt = Object.defineProperty, Kt = (n, e, t) => e in n ? Gt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, M = (n, e, t) => Kt(n, typeof e != "symbol" ? e + "" : e, t);
+const $e = class q {
   constructor() {
-    C(this, "contexts", /* @__PURE__ */ new Map()), C(this, "providerStack", /* @__PURE__ */ new Map()), C(this, "currentComponent", null);
+    M(this, "contexts", /* @__PURE__ */ new Map()), M(this, "providerStack", /* @__PURE__ */ new Map()), M(this, "currentComponent", null);
   }
   static getInstance() {
-    return z.instance || (z.instance = new z()), z.instance;
+    return q.instance || (q.instance = new q()), q.instance;
   }
   /**
    * Set the current component context for provider resolution
@@ -1876,15 +3004,15 @@ const ce = class z {
    */
   registerProvider(e, t, s) {
     this.providerStack.has(e) || this.providerStack.set(e, []);
-    const r = this.providerStack.get(e), [i, o] = G(t), a = {
+    const r = this.providerStack.get(e), [i, o] = le(t), l = {
       value: t,
       signal: [i, o],
       subscribers: /* @__PURE__ */ new Set(),
       providers: /* @__PURE__ */ new Set([s])
     };
-    return r.push(a), s.providers.set(e, a), () => {
-      const h = r.indexOf(a);
-      h !== -1 && r.splice(h, 1), s.providers.delete(e), a.subscribers.clear(), a.providers.clear();
+    return r.push(l), s.providers.set(e, l), () => {
+      const a = r.indexOf(l);
+      a !== -1 && r.splice(a, 1), s.providers.delete(e), l.subscribers.clear(), l.providers.clear();
     };
   }
   /**
@@ -1894,7 +3022,7 @@ const ce = class z {
     const s = this.providerStack.get(e), r = s && s.length > 0 ? s[s.length - 1] : null;
     if (r)
       return this.currentComponent && (r.subscribers.add(this.currentComponent.id), this.currentComponent.consumers.add(e)), [r.signal[0], !0];
-    const [i] = G(t);
+    const [i] = le(t);
     return [i, !1];
   }
   /**
@@ -1920,10 +3048,10 @@ const ce = class z {
     this.contexts.clear(), this.providerStack.clear(), this.currentComponent = null;
   }
 };
-C(ce, "instance");
-let ut = ce, pt = class {
+M($e, "instance");
+let Yt = $e, Zt = class {
   constructor() {
-    C(this, "registry", ut.getInstance());
+    M(this, "registry", Yt.getInstance());
   }
   /**
    * Create a context provider component
@@ -1935,12 +3063,12 @@ let ut = ce, pt = class {
         const r = this.registry.registerProvider(
           e.symbol,
           t,
-          ot(`provider_${e.symbol.toString()}`)
+          Wt(`provider_${e.symbol.toString()}`)
         ), i = s.flatMap((o) => {
-          let a = o;
-          "build" in o && typeof o.build == "function" && (a = o.build());
-          const h = a.render();
-          return Array.isArray(h) ? h : [h];
+          let l = o;
+          "build" in o && typeof o.build == "function" && (l = o.build());
+          const a = l.render();
+          return Array.isArray(a) ? a : [a];
         });
         return [
           {
@@ -1982,9 +3110,9 @@ let ut = ce, pt = class {
     this.registry.clear();
   }
 };
-class ft {
+class Xt {
   constructor() {
-    C(this, "services", /* @__PURE__ */ new Map()), C(this, "factories", /* @__PURE__ */ new Map()), C(this, "singletons", /* @__PURE__ */ new Map()), C(this, "scoped", /* @__PURE__ */ new Map()), C(this, "dependencies", /* @__PURE__ */ new Map());
+    M(this, "services", /* @__PURE__ */ new Map()), M(this, "factories", /* @__PURE__ */ new Map()), M(this, "singletons", /* @__PURE__ */ new Map()), M(this, "scoped", /* @__PURE__ */ new Map()), M(this, "dependencies", /* @__PURE__ */ new Map());
   }
   /**
    * Register a service with the container
@@ -2044,11 +3172,11 @@ class ft {
     return [...this.services.keys(), ...this.factories.keys()];
   }
 }
-new ft();
-new pt();
-new le();
-var mt = Object.defineProperty, gt = (n, e, t) => e in n ? mt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, X = (n, e, t) => gt(n, typeof e != "symbol" ? e + "" : e, t);
-const yt = {
+new Xt();
+new Zt();
+new Ie();
+var Jt = Object.defineProperty, es = (n, e, t) => e in n ? Jt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, ae = (n, e, t) => es(n, typeof e != "symbol" ? e + "" : e, t);
+const ts = {
   sanitizeClassNames: !0,
   sanitizationRules: {
     allowNumbers: !0,
@@ -2060,9 +3188,9 @@ const yt = {
   warnDuplicateClasses: process.env.NODE_ENV === "development",
   warnInvalidClasses: process.env.NODE_ENV === "development"
 };
-class vt {
+let ss = class {
   constructor(e = {}) {
-    X(this, "config"), X(this, "classCache"), X(this, "processingCache"), this.config = { ...yt, ...e };
+    ae(this, "config"), ae(this, "classCache"), ae(this, "processingCache"), this.config = { ...ts, ...e };
     const t = (() => {
       try {
         return typeof Map < "u" && typeof Map == "function";
@@ -2129,7 +3257,7 @@ class vt {
    */
   processClasses(e) {
     if (!e) return [];
-    if (T(e) || P(e)) {
+    if (F(e) || B(e)) {
       const i = e();
       return this.processClasses(i);
     }
@@ -2235,24 +3363,123 @@ class vt {
     }
     this.cacheSet(this.classCache, e, t);
   }
+};
+new ss();
+function rs(n, e, t = {}, ...s) {
+  const r = new n(e, ...s);
+  return Te() && t.prewarmProxy !== !1 && he(r), r;
 }
-new vt();
-var bt = Object.defineProperty, St = (n, e, t) => e in n ? bt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, m = (n, e, t) => St(n, typeof e != "symbol" ? e + "" : e, t);
-class Ct {
+var is = Object.defineProperty, ns = (n, e, t) => e in n ? is(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, D = (n, e, t) => ns(n, typeof e != "symbol" ? e + "" : e, t);
+let os = class de extends Pe {
   constructor(e) {
-    this.props = e, m(this, "type", "component"), m(this, "id"), m(this, "mounted", !1), m(this, "cleanup", []), m(this, "scrollElement", null), m(this, "contentOffsetSignal"), m(this, "setContentOffset"), m(this, "contentSizeSignal"), m(this, "setContentSize"), m(this, "setIsScrolling"), m(this, "pullToRefreshStateSignal"), m(this, "setPullToRefreshState"), m(this, "scrollEventThrottle"), m(this, "lastScrollTime", 0), m(this, "scrollVelocity", { x: 0, y: 0 }), m(this, "lastScrollOffset", { x: 0, y: 0 }), m(this, "pullStartY", 0), m(this, "isPulling", !1), m(this, "handleScroll", (c) => {
+    super(), this.props = e, D(this, "type", "component"), D(this, "id"), D(this, "mounted", !1), D(this, "cleanup", []), D(this, "effectiveTag"), D(this, "validationResult"), this.id = `text-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const t = this.resolveDefaultTag(), s = ke(
+      "Text",
+      t,
+      this.props.element
+    );
+    this.effectiveTag = s.tag, this.validationResult = s.validation;
+  }
+  resolveDefaultTag() {
+    return this.props.accessibilityRole === "heading" ? `h${this.props.accessibilityLevel ?? 2}` : "span";
+  }
+  /**
+   * Render the text component with reactive content handling, element override support, and CSS classes
+   */
+  render() {
+    const e = ["tachui-text"], t = this.createClassString(this.props, e);
+    return [w(
+      this.effectiveTag,
+      {
+        className: t,
+        // Pass through debug label for debug system
+        ...this.props.debugLabel && { debugLabel: this.props.debugLabel },
+        // Add component metadata for semantic role processing
+        componentMetadata: {
+          originalType: "Text",
+          overriddenTo: this.effectiveTag !== "span" ? this.effectiveTag : void 0,
+          validationResult: this.validationResult,
+          componentInstance: this
+          // Add reference to the Text component instance
+        }
+      },
+      Le(this.props.content || "")
+    )];
+  }
+  // Concatenation support - simplified for now
+  concat(e) {
+    return this;
+  }
+  toSegment() {
+    return this;
+  }
+  isConcatenatable() {
+    return !0;
+  }
+  /**
+   * Cleanup resources
+   */
+  dispose() {
+    this.cleanup.forEach((e) => {
+      try {
+        e();
+      } catch (t) {
+        console.error("Text component cleanup error:", t);
+      }
+    }), this.cleanup = [];
+  }
+  clone(e = {}) {
+    return e.deep ? this.deepClone() : this.shallowClone();
+  }
+  shallowClone() {
+    const e = fe(this.props), t = new de(e);
+    return me(t), t;
+  }
+  deepClone() {
+    const e = fe(this.props, {
+      deep: !0
+    }), t = new de(e);
+    return me(t), t;
+  }
+};
+function Ne(n, e) {
+  const t = {
+    content: n,
+    ...e
+  }, s = rs(os, t);
+  return ue(s);
+}
+function z(n) {
+  return (e, t) => Ne(e, {
+    ...t,
+    accessibilityRole: "heading",
+    accessibilityLevel: n
+  });
+}
+Object.assign(Ne, {
+  H1: z(1),
+  H2: z(2),
+  H3: z(3),
+  H4: z(4),
+  H5: z(5),
+  H6: z(6)
+});
+var as = Object.defineProperty, ls = (n, e, t) => e in n ? as(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, g = (n, e, t) => ls(n, typeof e != "symbol" ? e + "" : e, t);
+class cs {
+  constructor(e) {
+    this.props = e, g(this, "type", "component"), g(this, "id"), g(this, "mounted", !1), g(this, "cleanup", []), g(this, "scrollElement", null), g(this, "contentOffsetSignal"), g(this, "setContentOffset"), g(this, "contentSizeSignal"), g(this, "setContentSize"), g(this, "setIsScrolling"), g(this, "pullToRefreshStateSignal"), g(this, "setPullToRefreshState"), g(this, "scrollEventThrottle"), g(this, "lastScrollTime", 0), g(this, "scrollVelocity", { x: 0, y: 0 }), g(this, "lastScrollOffset", { x: 0, y: 0 }), g(this, "pullStartY", 0), g(this, "isPulling", !1), g(this, "handleScroll", (h) => {
       if (!this.scrollElement) return;
-      const l = performance.now(), d = l - this.lastScrollTime;
-      if (d < this.scrollEventThrottle) return;
+      const c = performance.now(), u = c - this.lastScrollTime;
+      if (u < this.scrollEventThrottle) return;
       const f = {
         x: this.scrollElement.scrollLeft,
         y: this.scrollElement.scrollTop
       };
-      this.scrollVelocity = this.calculateVelocity(f, d), this.setContentOffset(f), this.setContentSize({
+      this.scrollVelocity = this.calculateVelocity(f, u), this.setContentOffset(f), this.setContentSize({
         width: this.scrollElement.scrollWidth,
         height: this.scrollElement.scrollHeight
       });
-      const p = this.detectScrollEdges(), N = {
+      const p = this.detectScrollEdges(), v = {
         offset: f,
         velocity: this.scrollVelocity,
         contentSize: {
@@ -2265,25 +3492,25 @@ class Ct {
         },
         edges: p
       };
-      this.props.onScroll && this.props.onScroll(N), p.top && this.props.onReachTop && this.props.onReachTop(), p.bottom && this.props.onReachBottom && this.props.onReachBottom(), p.left && this.props.onReachLeft && this.props.onReachLeft(), p.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = f, this.lastScrollTime = l;
-    }), m(this, "handleScrollStart", () => {
+      this.props.onScroll && this.props.onScroll(v), p.top && this.props.onReachTop && this.props.onReachTop(), p.bottom && this.props.onReachBottom && this.props.onReachBottom(), p.left && this.props.onReachLeft && this.props.onReachLeft(), p.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = f, this.lastScrollTime = c;
+    }), g(this, "handleScrollStart", () => {
       this.setIsScrolling(!0), this.props.onScrollBegin && this.props.onScrollBegin();
-    }), m(this, "handleScrollEnd", () => {
+    }), g(this, "handleScrollEnd", () => {
       this.setIsScrolling(!1), this.props.onScrollEnd && this.props.onScrollEnd();
-    }), m(this, "handleTouchStart", (c) => {
-      this.props.refreshControl?.enabled && (this.pullStartY = c.touches[0].clientY, this.isPulling = !1);
-    }), m(this, "handleTouchMove", (c) => {
+    }), g(this, "handleTouchStart", (h) => {
+      this.props.refreshControl?.enabled && (this.pullStartY = h.touches[0].clientY, this.isPulling = !1);
+    }), g(this, "handleTouchMove", (h) => {
       if (!this.props.refreshControl?.enabled || !this.scrollElement) return;
-      const l = c.touches[0].clientY - this.pullStartY, d = this.props.refreshControl.threshold || 80;
-      this.scrollElement.scrollTop <= 0 && l > 0 && (this.isPulling = !0, l > d ? this.setPullToRefreshState("ready") : this.setPullToRefreshState("pulling"));
-    }), m(this, "handleTouchEnd", async () => {
+      const c = h.touches[0].clientY - this.pullStartY, u = this.props.refreshControl.threshold || 80;
+      this.scrollElement.scrollTop <= 0 && c > 0 && (this.isPulling = !0, c > u ? this.setPullToRefreshState("ready") : this.setPullToRefreshState("pulling"));
+    }), g(this, "handleTouchEnd", async () => {
       if (!(!this.props.refreshControl?.enabled || !this.isPulling)) {
         if (this.pullToRefreshStateSignal() === "ready") {
           this.setPullToRefreshState("refreshing");
           try {
             await this.props.refreshControl.onRefresh();
-          } catch (c) {
-            console.error("Pull to refresh error:", c);
+          } catch (h) {
+            console.error("Pull to refresh error:", h);
           } finally {
             this.setPullToRefreshState("idle");
           }
@@ -2292,31 +3519,31 @@ class Ct {
         this.isPulling = !1;
       }
     }), this.id = `scrollview-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.scrollEventThrottle = e.scrollEventThrottle || 16;
-    const [t, s] = A(
+    const [t, s] = N(
       { x: 0, y: 0 }
     );
     this.contentOffsetSignal = t, this.setContentOffset = s;
-    const [r, i] = A({
+    const [r, i] = N({
       width: 0,
       height: 0
     });
     this.contentSizeSignal = r, this.setContentSize = i;
-    const [, o] = A(!1);
+    const [, o] = N(!1);
     this.setIsScrolling = o;
-    const [a, h] = A("idle");
-    if (this.pullToRefreshStateSignal = a, this.setPullToRefreshState = h, e.contentOffset && v(e.contentOffset)) {
+    const [l, a] = N("idle");
+    if (this.pullToRefreshStateSignal = l, this.setPullToRefreshState = a, e.contentOffset && S(e.contentOffset)) {
       this.setContentOffset(e.contentOffset());
-      const c = I(() => {
-        e.contentOffset && v(e.contentOffset) && this.setContentOffset(e.contentOffset());
+      const h = R(() => {
+        e.contentOffset && S(e.contentOffset) && this.setContentOffset(e.contentOffset());
       });
-      this.cleanup.push(() => c.dispose());
+      this.cleanup.push(() => h.dispose());
     }
-    if (e.contentSize && v(e.contentSize)) {
+    if (e.contentSize && S(e.contentSize)) {
       this.setContentSize(e.contentSize());
-      const c = I(() => {
-        e.contentSize && v(e.contentSize) && this.setContentSize(e.contentSize());
+      const h = R(() => {
+        e.contentSize && S(e.contentSize) && this.setContentSize(e.contentSize());
       });
-      this.cleanup.push(() => c.dispose());
+      this.cleanup.push(() => h.dispose());
     }
   }
   /**
@@ -2453,7 +3680,7 @@ class Ct {
       cleanup: [],
       props: {},
       render: () => [
-        b(
+        w(
           "div",
           {
             style: {
@@ -2512,10 +3739,10 @@ class Ct {
     let s = [];
     const r = e;
     if (typeof r == "function") {
-      const d = r();
-      s = Array.isArray(d) ? d : [];
+      const u = r();
+      s = Array.isArray(u) ? u : [];
     } else Array.isArray(e) && (s = e);
-    const i = b(
+    const i = w(
       "div",
       {
         class: "tachui-scrollview-content",
@@ -2524,14 +3751,14 @@ class Ct {
           minWidth: "100%"
         }
       },
-      ...s.flatMap((d) => d.render())
-    ), o = this.createPullToRefreshIndicator(), a = [];
+      ...s.flatMap((u) => u.render())
+    ), o = this.createPullToRefreshIndicator(), l = [];
     if (o) {
-      const d = o.render(), f = Array.isArray(d) ? d : [d];
-      a.push(...f.filter((p) => p));
+      const u = o.render(), f = Array.isArray(u) ? u : [u];
+      l.push(...f.filter((p) => p));
     }
-    a.push(i);
-    const { direction: h = "vertical" } = this.props, c = this.getOverflowStyles(h), l = b(
+    l.push(i);
+    const { direction: a = "vertical" } = this.props, h = this.getOverflowStyles(a), c = w(
       "div",
       {
         id: this.id,
@@ -2540,44 +3767,44 @@ class Ct {
           height: "100%",
           width: "100%",
           position: "relative",
-          ...c
+          ...h
         }
       },
-      ...a
+      ...l
     );
-    if (l.element) {
-      const d = l.element;
-      this.scrollElement = d, this.applyScrollViewStyles(d), this.setupScrollHandlers(d), i.element && this.applyContentInsets(i.element);
+    if (c.element) {
+      const u = c.element;
+      this.scrollElement = u, this.applyScrollViewStyles(u), this.setupScrollHandlers(u), i.element && this.applyContentInsets(i.element);
       const f = () => {
-        const p = v(t) ? t() : t;
-        d.style.overflow = p ? "auto" : "hidden", d.style.pointerEvents = p ? "auto" : "none";
+        const p = S(t) ? t() : t;
+        u.style.overflow = p ? "auto" : "hidden", u.style.pointerEvents = p ? "auto" : "none";
       };
-      if (v(t)) {
-        const p = I(f);
+      if (S(t)) {
+        const p = R(f);
         this.cleanup.push(() => p.dispose());
       } else
         f();
       if (typeof r == "function") {
-        const p = I(() => {
-          const N = r(), he = (Array.isArray(N) ? N : []).flatMap((V) => V.render());
+        const p = R(() => {
+          const v = r(), k = (Array.isArray(v) ? v : []).flatMap((C) => C.render());
           if (i.element) {
-            const V = i.element;
-            V.innerHTML = "", he.forEach((W) => {
-              W && W.element && V.appendChild(W.element);
+            const C = i.element;
+            C.innerHTML = "", k.forEach((E) => {
+              E && E.element && C.appendChild(E.element);
             });
           }
         });
         this.cleanup.push(() => p.dispose());
       }
     }
-    return [l];
+    return [c];
   }
 }
-function Et(n = {}) {
-  const e = new Ct(n);
-  return re(e);
+function hs(n = {}) {
+  const e = new cs(n);
+  return ue(e);
 }
-const wt = `
+const ds = `
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
@@ -2585,51 +3812,51 @@ const wt = `
 `;
 if (typeof document < "u") {
   const n = document.createElement("style");
-  n.textContent = wt, document.head.appendChild(n);
+  n.textContent = ds, document.head.appendChild(n);
 }
 process.env.NODE_ENV;
-class At {
+class us {
   constructor(e) {
-    u(this, "type", "component");
-    u(this, "id");
-    u(this, "mounted", !1);
-    u(this, "cleanup", []);
-    u(this, "dataSignal");
-    u(this, "setData");
-    u(this, "sectionsSignal");
-    u(this, "setSections");
-    u(this, "selectedItemsSignal");
-    u(this, "setSelectedItems");
-    u(this, "isLoadingSignal");
-    u(this, "setIsLoading");
+    m(this, "type", "component");
+    m(this, "id");
+    m(this, "mounted", !1);
+    m(this, "cleanup", []);
+    m(this, "dataSignal");
+    m(this, "setData");
+    m(this, "sectionsSignal");
+    m(this, "setSections");
+    m(this, "selectedItemsSignal");
+    m(this, "setSelectedItems");
+    m(this, "isLoadingSignal");
+    m(this, "setIsLoading");
     // Virtual scrolling state
-    u(this, "virtualItems", []);
-    u(this, "visibleStartIndex", 0);
-    u(this, "visibleEndIndex", 0);
-    u(this, "scrollOffset", 0);
-    u(this, "containerHeight", 0);
-    u(this, "totalHeight", 0);
+    m(this, "virtualItems", []);
+    m(this, "visibleStartIndex", 0);
+    m(this, "visibleEndIndex", 0);
+    m(this, "scrollOffset", 0);
+    m(this, "containerHeight", 0);
+    m(this, "totalHeight", 0);
     /**
      * Handle scroll events for virtual scrolling and infinite scroll
      */
-    u(this, "handleListScroll", (e) => {
-      this.scrollOffset = e.offset.y, this.containerHeight = e.containerSize.height, this.props.virtualScrolling?.enabled && this.calculateVisibleRange(), this.props.onLoadMore && e.edges.bottom && (v(this.props.hasMore) ? this.props.hasMore() : this.props.hasMore) && !this.isLoadingSignal() && (this.setIsLoading(!0), this.props.onLoadMore().finally(() => {
+    m(this, "handleListScroll", (e) => {
+      this.scrollOffset = e.offset.y, this.containerHeight = e.containerSize.height, this.props.virtualScrolling?.enabled && this.calculateVisibleRange(), this.props.onLoadMore && e.edges.bottom && (S(this.props.hasMore) ? this.props.hasMore() : this.props.hasMore) && !this.isLoadingSignal() && (this.setIsLoading(!0), this.props.onLoadMore().finally(() => {
         this.setIsLoading(!1);
       })), this.props.onScroll && this.props.onScroll(e);
     });
     this.props = e, this.id = `list-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [t, s] = A(this.resolveData());
+    const [t, s] = N(this.resolveData());
     this.dataSignal = t, this.setData = s;
-    const [r, i] = A(
+    const [r, i] = N(
       this.resolveSections()
     );
     this.sectionsSignal = r, this.setSections = i;
-    const o = /* @__PURE__ */ new Set(), [a, h] = A(o);
-    this.selectedItemsSignal = a, this.setSelectedItems = h;
-    const [c, l] = A(
+    const o = /* @__PURE__ */ new Set(), [l, a] = N(o);
+    this.selectedItemsSignal = l, this.setSelectedItems = a;
+    const [h, c] = N(
       this.resolveIsLoading()
     );
-    this.isLoadingSignal = c, this.setIsLoading = l, this.setupReactiveUpdates(), e.virtualScrolling?.enabled && this.initializeVirtualScrolling();
+    this.isLoadingSignal = h, this.setIsLoading = c, this.setupReactiveUpdates(), e.virtualScrolling?.enabled && this.initializeVirtualScrolling();
   }
   /**
    * Helper to flatten render results
@@ -2637,51 +3864,60 @@ class At {
   flattenRenderResult(e) {
     return Array.isArray(e) ? e : [e];
   }
+  /**
+   * Normalize item render output into safe DOM node payloads.
+   *
+   * Strings and primitives are always emitted as text nodes to avoid HTML
+   * interpretation in list item rendering.
+   */
+  normalizeItemRenderOutput(e) {
+    return e && typeof e.render == "function" ? this.flattenRenderResult(e.render()) : e == null || e === !1 ? [] : typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? [{ type: "text", text: String(e) }] : this.flattenRenderResult(e);
+  }
   /**
    * Resolve data from various input types
    */
   resolveData() {
     const { data: e } = this.props;
-    return Array.isArray(e) ? e : v(e) ? e() : [];
+    return Array.isArray(e) ? e : S(e) ? e() : [];
   }
   /**
    * Resolve sections from various input types
    */
   resolveSections() {
     const { sections: e } = this.props;
-    return Array.isArray(e) ? e : v(e) ? e() : [];
+    return Array.isArray(e) ? e : S(e) ? e() : [];
   }
   /**
    * Resolve loading state
    */
   resolveIsLoading() {
     const { isLoading: e } = this.props;
-    return typeof e == "boolean" ? e : v(e) ? e() : !1;
+    return typeof e == "boolean" ? e : S(e) ? e() : !1;
   }
   /**
    * Set up reactive updates for data and state
    */
   setupReactiveUpdates() {
-    if (v(this.props.data)) {
-      const e = I(() => {
+    if (S(this.props.data)) {
+      const e = R(() => {
         this.setData(this.resolveData()), this.updateVirtualScrolling();
       });
       this.cleanup.push(() => e.dispose());
     }
-    if (v(this.props.sections)) {
-      const e = I(() => {
+    if (S(this.props.sections)) {
+      const e = R(() => {
         this.setSections(this.resolveSections()), this.updateVirtualScrolling();
       });
       this.cleanup.push(() => e.dispose());
     }
-    if (v(this.props.isLoading)) {
-      const e = I(() => {
+    if (S(this.props.isLoading)) {
+      const e = R(() => {
         this.setIsLoading(this.resolveIsLoading());
       });
       this.cleanup.push(() => e.dispose());
     }
     if (this.props.selectedItems) {
-      const e = I(() => {
+      const e = R(() => {
         this.props.selectedItems && this.setSelectedItems(this.props.selectedItems());
       });
       this.cleanup.push(() => e.dispose());
@@ -2731,14 +3967,14 @@ class At {
   handleItemSelection(e, t) {
     const { selectionMode: s, getItemId: r, onSelectionChange: i } = this.props;
     if (s === "none") return;
-    const o = r ? r(e, t) : t, a = new Set(this.selectedItemsSignal());
-    s === "single" ? (a.clear(), a.add(o)) : s === "multiple" && (a.has(o) ? a.delete(o) : a.add(o)), this.setSelectedItems(a), i && i(a);
+    const o = r ? r(e, t) : t, l = new Set(this.selectedItemsSignal());
+    s === "single" ? (l.clear(), l.add(o)) : s === "multiple" && (l.has(o) ? l.delete(o) : l.add(o)), this.setSelectedItems(l), i && i(l);
   }
   /**
    * Create list item component
    */
   createListItem(e, t, s) {
-    const { renderItem: r, style: i, onItemTap: o, onItemLongPress: a } = this.props, h = r(e, t);
+    const { renderItem: r, style: i, onItemTap: o, onItemLongPress: l } = this.props, a = r(e, t);
     return {
       type: "component",
       id: `${this.id}-item-${t}`,
@@ -2746,7 +3982,7 @@ class At {
       cleanup: [],
       props: {},
       render: () => {
-        const c = b(
+        const h = w(
           "div",
           {
             class: `tachui-list-item tachui-list-item-${i || "plain"}`,
@@ -2759,27 +3995,27 @@ class At {
               cursor: o ? "pointer" : "default"
             }
           },
-          ...this.flattenRenderResult(h.render())
+          ...this.normalizeItemRenderOutput(a)
         );
-        if (c.element) {
-          const l = c.element;
-          if (o && l.addEventListener("click", () => o(e, t)), a) {
-            let d;
+        if (h.element) {
+          const c = h.element;
+          if (o && c.addEventListener("click", () => o(e, t)), l) {
+            let u;
             const f = () => {
-              d = setTimeout(
-                () => a(e, t),
+              u = setTimeout(
+                () => l(e, t),
                 500
               );
             }, p = () => {
-              clearTimeout(d);
+              clearTimeout(u);
             };
-            l.addEventListener("mousedown", f), l.addEventListener("mouseup", p), l.addEventListener("mouseleave", p), l.addEventListener("touchstart", f), l.addEventListener("touchend", p);
+            c.addEventListener("mousedown", f), c.addEventListener("mouseup", p), c.addEventListener("mouseleave", p), c.addEventListener("touchstart", f), c.addEventListener("touchend", p);
           }
-          this.props.selectionMode !== "none" && l.addEventListener("click", (d) => {
-            (d.metaKey || d.ctrlKey || this.props.selectionMode === "multiple") && (d.preventDefault(), this.handleItemSelection(e, t));
+          this.props.selectionMode !== "none" && c.addEventListener("click", (u) => {
+            (u.metaKey || u.ctrlKey || this.props.selectionMode === "multiple") && (u.preventDefault(), this.handleItemSelection(e, t));
           });
         }
-        return [c];
+        return [h];
       }
     };
   }
@@ -2795,7 +4031,7 @@ class At {
       cleanup: [],
       props: {},
       render: () => [
-        b("div", {
+        w("div", {
           class: "tachui-list-separator",
           style: {
             height: "1px",
@@ -2816,24 +4052,21 @@ class At {
       mounted: !1,
       cleanup: [],
       props: {},
-      render: () => [
-        b(
-          "div",
-          {
-            class: "tachui-list-section-header",
-            style: {
-              padding: "8px 16px",
-              backgroundColor: "#f8f9fa",
-              fontWeight: "600",
-              fontSize: "14px",
-              color: "#666",
-              textTransform: "uppercase",
-              letterSpacing: "0.5px"
-            }
-          },
-          e.header
-        )
-      ]
+      render: () => {
+        const s = w("div", {
+          class: "tachui-list-section-header",
+          style: {
+            padding: "8px 16px",
+            backgroundColor: "#f8f9fa",
+            fontWeight: "600",
+            fontSize: "14px",
+            color: "#666",
+            textTransform: "uppercase",
+            letterSpacing: "0.5px"
+          }
+        }), r = s.element;
+        return r && (r.textContent = e.header), [s];
+      }
     } : this.props.renderSectionHeader ? this.props.renderSectionHeader(e, t) : e.header : null;
   }
   /**
@@ -2846,20 +4079,17 @@ class At {
       mounted: !1,
       cleanup: [],
       props: {},
-      render: () => [
-        b(
-          "div",
-          {
-            class: "tachui-list-section-footer",
-            style: {
-              padding: "8px 16px",
-              fontSize: "12px",
-              color: "#999"
-            }
-          },
-          e.footer
-        )
-      ]
+      render: () => {
+        const s = w("div", {
+          class: "tachui-list-section-footer",
+          style: {
+            padding: "8px 16px",
+            fontSize: "12px",
+            color: "#999"
+          }
+        }), r = s.element;
+        return r && (r.textContent = e.footer), [s];
+      }
     } : this.props.renderSectionFooter ? this.props.renderSectionFooter(e, t) : e.footer : null;
   }
   /**
@@ -2874,7 +4104,7 @@ class At {
       cleanup: [],
       props: {},
       render: () => [
-        b(
+        w(
           "div",
           {
             class: "tachui-list-empty",
@@ -2905,7 +4135,7 @@ class At {
       cleanup: [],
       props: {},
       render: () => [
-        b(
+        w(
           "div",
           {
             class: "tachui-list-loading",
@@ -2938,15 +4168,15 @@ class At {
         cleanup: [],
         props: {},
         render: () => [
-          b("div", {
+          w("div", {
             style: { height: `${i}px` }
           })
         ]
       });
     }
     for (let i = this.visibleStartIndex; i <= this.visibleEndIndex && i < e.length; i++) {
-      const o = e[i], a = this.props.getItemId ? this.props.getItemId(o, i) : i, h = t.has(a);
-      r.push(this.createListItem(o, i, h)), s && i < e.length - 1 && r.push(s);
+      const o = e[i], l = this.props.getItemId ? this.props.getItemId(o, i) : i, a = t.has(l);
+      r.push(this.createListItem(o, i, a)), s && i < e.length - 1 && r.push(s);
     }
     if (this.visibleEndIndex < e.length - 1) {
       const i = this.totalHeight - (this.virtualItems[this.visibleEndIndex + 1]?.offset || 0);
@@ -2957,7 +4187,7 @@ class At {
         cleanup: [],
         props: {},
         render: () => [
-          b("div", {
+          w("div", {
             style: { height: `${i}px` }
           })
         ]
@@ -2970,17 +4200,17 @@ class At {
    */
   renderRegularContent() {
     const e = this.dataSignal(), t = this.sectionsSignal(), s = this.selectedItemsSignal(), r = this.createSeparator(), i = [];
-    return t.length > 0 ? t.forEach((o, a) => {
-      const h = this.createSectionHeader(o, a);
-      h && i.push(h), o.items.forEach((l, d) => {
-        const f = a * 1e3 + d, p = this.props.getItemId ? this.props.getItemId(l, f) : f, N = s.has(p);
-        i.push(this.createListItem(l, f, N)), r && d < o.items.length - 1 && i.push(r);
+    return t.length > 0 ? t.forEach((o, l) => {
+      const a = this.createSectionHeader(o, l);
+      a && i.push(a), o.items.forEach((c, u) => {
+        const f = l * 1e3 + u, p = this.props.getItemId ? this.props.getItemId(c, f) : f, v = s.has(p);
+        i.push(this.createListItem(c, f, v)), r && u < o.items.length - 1 && i.push(r);
       });
-      const c = this.createSectionFooter(o, a);
-      c && i.push(c);
-    }) : e.forEach((o, a) => {
-      const h = this.props.getItemId ? this.props.getItemId(o, a) : a, c = s.has(h);
-      i.push(this.createListItem(o, a, c)), r && a < e.length - 1 && i.push(r);
+      const h = this.createSectionFooter(o, l);
+      h && i.push(h);
+    }) : e.forEach((o, l) => {
+      const a = this.props.getItemId ? this.props.getItemId(o, l) : l, h = s.has(a);
+      i.push(this.createListItem(o, l, h)), r && l < e.length - 1 && i.push(r);
     }), i;
   }
   /**
@@ -3006,19 +4236,19 @@ class At {
       children: s,
       onScroll: this.handleListScroll
     };
-    return new Et(r).render();
+    return new hs(r).render();
   }
 }
-function F(n) {
-  const e = new At(n);
-  return re(e);
+function Z(n) {
+  const e = new us(n);
+  return ue(e);
 }
-const Lt = {
+const Ms = {
   /**
    * Create a simple list from array
    */
   simple(n, e, t = {}) {
-    return F({
+    return Z({
       ...t,
       data: n,
       renderItem: e
@@ -3028,7 +4258,7 @@ const Lt = {
    * Create a sectioned list
    */
   sectioned(n, e, t = {}) {
-    return F({
+    return Z({
       ...t,
       sections: n,
       renderItem: e
@@ -3038,7 +4268,7 @@ const Lt = {
    * Create a virtual scrolling list for large datasets
    */
   virtual(n, e, t, s = {}) {
-    return F({
+    return Z({
       ...s,
       data: n,
       renderItem: e,
@@ -3049,7 +4279,7 @@ const Lt = {
    * Create an infinite scrolling list
    */
   infinite(n, e, t, s, r = {}) {
-    return F({
+    return Z({
       ...r,
       data: n,
       renderItem: e,
@@ -3059,7 +4289,7 @@ const Lt = {
   }
 };
 export {
-  At as E,
-  F as L,
-  Lt as a
+  us as E,
+  Z as L,
+  Ms as a
 };