twd-js 1.3.3 → 1.4.0

package/dist/bundled.es.js

@@ -1,93 +1,93 @@
-var O, h, xe, C, le, Se, Te, Ee, ne, G, X, M = {}, Re = [], Ue = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, q = Array.isArray;
+var V, h, Re, $, de, Ce, $e, Ee, re, J, Z, A = {}, Ie = [], je = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, X = Array.isArray;
 function T(t, e) {
   for (var n in e) t[n] = e[n];
   return t;
 }
-function re(t) {
+function oe(t) {
   t && t.parentNode && t.parentNode.removeChild(t);
 }
-function Fe(t, e, n) {
-  var r, s, i, _ = {};
-  for (i in e) i == "key" ? r = e[i] : i == "ref" ? s = e[i] : _[i] = e[i];
-  if (arguments.length > 2 && (_.children = arguments.length > 3 ? O.call(arguments, 2) : n), typeof t == "function" && t.defaultProps != null) for (i in t.defaultProps) _[i] === void 0 && (_[i] = t.defaultProps[i]);
-  return B(t, _, r, s, null);
+function Oe(t, e, n) {
+  var r, i, o, l = {};
+  for (o in e) o == "key" ? r = e[o] : o == "ref" ? i = e[o] : l[o] = e[o];
+  if (arguments.length > 2 && (l.children = arguments.length > 3 ? V.call(arguments, 2) : n), typeof t == "function" && t.defaultProps != null) for (o in t.defaultProps) l[o] === void 0 && (l[o] = t.defaultProps[o]);
+  return U(t, l, r, i, null);
 }
-function B(t, e, n, r, s) {
-  var i = { type: t, props: e, key: n, ref: r, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: s ?? ++xe, __i: -1, __u: 0 };
-  return s == null && h.vnode != null && h.vnode(i), i;
+function U(t, e, n, r, i) {
+  var o = { type: t, props: e, key: n, ref: r, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: i ?? ++Re, __i: -1, __u: 0 };
+  return i == null && h.vnode != null && h.vnode(o), o;
 }
-function L(t) {
+function N(t) {
   return t.children;
 }
-function U(t, e) {
+function F(t, e) {
   this.props = t, this.context = e;
 }
-function A(t, e) {
-  if (e == null) return t.__ ? A(t.__, t.__i + 1) : null;
+function I(t, e) {
+  if (e == null) return t.__ ? I(t.__, t.__i + 1) : null;
   for (var n; e < t.__k.length; e++) if ((n = t.__k[e]) != null && n.__e != null) return n.__e;
-  return typeof t.type == "function" ? A(t) : null;
+  return typeof t.type == "function" ? I(t) : null;
 }
-function Ce(t) {
+function We(t) {
   var e, n;
   if ((t = t.__) != null && t.__c != null) {
     for (t.__e = t.__c.base = null, e = 0; e < t.__k.length; e++) if ((n = t.__k[e]) != null && n.__e != null) {
       t.__e = t.__c.base = n.__e;
       break;
     }
-    return Ce(t);
+    return We(t);
   }
 }
-function ae(t) {
-  (!t.__d && (t.__d = !0) && C.push(t) && !z.__r++ || le != h.debounceRendering) && ((le = h.debounceRendering) || Se)(z);
+function ue(t) {
+  (!t.__d && (t.__d = !0) && $.push(t) && !O.__r++ || de != h.debounceRendering) && ((de = h.debounceRendering) || Ce)(O);
 }
-function z() {
-  for (var t, e, n, r, s, i, _, l = 1; C.length; ) C.length > l && C.sort(Te), t = C.shift(), l = C.length, t.__d && (n = void 0, r = void 0, s = (r = (e = t).__v).__e, i = [], _ = [], e.__P && ((n = T({}, r)).__v = r.__v + 1, h.vnode && h.vnode(n), oe(e.__P, n, r, e.__n, e.__P.namespaceURI, 32 & r.__u ? [s] : null, i, s ?? A(r), !!(32 & r.__u), _), n.__v = r.__v, n.__.__k[n.__i] = n, We(i, n, _), r.__e = r.__ = null, n.__e != s && Ce(n)));
-  z.__r = 0;
+function O() {
+  for (var t, e, n, r, i, o, l, _ = 1; $.length; ) $.length > _ && $.sort($e), t = $.shift(), _ = $.length, t.__d && (n = void 0, r = void 0, i = (r = (e = t).__v).__e, o = [], l = [], e.__P && ((n = T({}, r)).__v = r.__v + 1, h.vnode && h.vnode(n), se(e.__P, n, r, e.__n, e.__P.namespaceURI, 32 & r.__u ? [i] : null, o, i ?? I(r), !!(32 & r.__u), l), n.__v = r.__v, n.__.__k[n.__i] = n, Ae(o, n, l), r.__e = r.__ = null, n.__e != i && We(n)));
+  O.__r = 0;
 }
-function $e(t, e, n, r, s, i, _, l, u, a, p) {
-  var o, f, d, b, x, k, m, g = r && r.__k || Re, E = e.length;
-  for (u = ze(n, e, g, u, E), o = 0; o < E; o++) (d = n.__k[o]) != null && (f = d.__i == -1 ? M : g[d.__i] || M, d.__i = o, k = oe(t, d, f, s, i, _, l, u, a, p), b = d.__e, d.ref && f.ref != d.ref && (f.ref && ie(f.ref, null, d), p.push(d.ref, d.__c || b, d)), x == null && b != null && (x = b), (m = !!(4 & d.__u)) || f.__k === d.__k ? u = Ae(d, u, t, m) : typeof d.type == "function" && k !== void 0 ? u = k : b && (u = b.nextSibling), d.__u &= -7);
-  return n.__e = x, u;
+function Le(t, e, n, r, i, o, l, _, p, a, d) {
+  var s, c, u, g, k, b, v, m = r && r.__k || Ie, R = e.length;
+  for (p = qe(n, e, m, p, R), s = 0; s < R; s++) (u = n.__k[s]) != null && (c = u.__i == -1 ? A : m[u.__i] || A, u.__i = s, b = se(t, u, c, i, o, l, _, p, a, d), g = u.__e, u.ref && c.ref != u.ref && (c.ref && ie(c.ref, null, u), d.push(u.ref, u.__c || g, u)), k == null && g != null && (k = g), (v = !!(4 & u.__u)) || c.__k === u.__k ? p = He(u, p, t, v) : typeof u.type == "function" && b !== void 0 ? p = b : g && (p = g.nextSibling), u.__u &= -7);
+  return n.__e = k, p;
 }
-function ze(t, e, n, r, s) {
-  var i, _, l, u, a, p = n.length, o = p, f = 0;
-  for (t.__k = new Array(s), i = 0; i < s; i++) (_ = e[i]) != null && typeof _ != "boolean" && typeof _ != "function" ? (typeof _ == "string" || typeof _ == "number" || typeof _ == "bigint" || _.constructor == String ? _ = t.__k[i] = B(null, _, null, null, null) : q(_) ? _ = t.__k[i] = B(L, { children: _ }, null, null, null) : _.constructor == null && _.__b > 0 ? _ = t.__k[i] = B(_.type, _.props, _.key, _.ref ? _.ref : null, _.__v) : t.__k[i] = _, u = i + f, _.__ = t, _.__b = t.__b + 1, (a = _.__i = je(_, n, u, o)) != -1 && (o--, (l = n[a]) && (l.__u |= 2)), l == null || l.__v == null ? (a == -1 && (s > p ? f-- : s < p && f++), typeof _.type != "function" && (_.__u |= 4)) : a != u && (a == u - 1 ? f-- : a == u + 1 ? f++ : (a > u ? f-- : f++, _.__u |= 4))) : t.__k[i] = null;
-  if (o) for (i = 0; i < p; i++) (l = n[i]) != null && (2 & l.__u) == 0 && (l.__e == r && (r = A(l)), Me(l, l));
+function qe(t, e, n, r, i) {
+  var o, l, _, p, a, d = n.length, s = d, c = 0;
+  for (t.__k = new Array(i), o = 0; o < i; o++) (l = e[o]) != null && typeof l != "boolean" && typeof l != "function" ? (typeof l == "string" || typeof l == "number" || typeof l == "bigint" || l.constructor == String ? l = t.__k[o] = U(null, l, null, null, null) : X(l) ? l = t.__k[o] = U(N, { children: l }, null, null, null) : l.constructor === void 0 && l.__b > 0 ? l = t.__k[o] = U(l.type, l.props, l.key, l.ref ? l.ref : null, l.__v) : t.__k[o] = l, p = o + c, l.__ = t, l.__b = t.__b + 1, _ = null, (a = l.__i = Ve(l, n, p, s)) != -1 && (s--, (_ = n[a]) && (_.__u |= 2)), _ == null || _.__v == null ? (a == -1 && (i > d ? c-- : i < d && c++), typeof l.type != "function" && (l.__u |= 4)) : a != p && (a == p - 1 ? c-- : a == p + 1 ? c++ : (a > p ? c-- : c++, l.__u |= 4))) : t.__k[o] = null;
+  if (s) for (o = 0; o < d; o++) (_ = n[o]) != null && (2 & _.__u) == 0 && (_.__e == r && (r = I(_)), Ne(_, _));
   return r;
 }
-function Ae(t, e, n, r) {
-  var s, i;
+function He(t, e, n, r) {
+  var i, o;
   if (typeof t.type == "function") {
-    for (s = t.__k, i = 0; s && i < s.length; i++) s[i] && (s[i].__ = t, e = Ae(s[i], e, n, r));
+    for (i = t.__k, o = 0; i && o < i.length; o++) i[o] && (i[o].__ = t, e = He(i[o], e, n, r));
     return e;
   }
-  t.__e != e && (r && (e && t.type && !e.parentNode && (e = A(t)), n.insertBefore(t.__e, e || null)), e = t.__e);
+  t.__e != e && (r && (e && t.type && !e.parentNode && (e = I(t)), n.insertBefore(t.__e, e || null)), e = t.__e);
   do
     e = e && e.nextSibling;
   while (e != null && e.nodeType == 8);
   return e;
 }
-function je(t, e, n, r) {
-  var s, i, _, l = t.key, u = t.type, a = e[n], p = a != null && (2 & a.__u) == 0;
-  if (a === null && l == null || p && l == a.key && u == a.type) return n;
-  if (r > (p ? 1 : 0)) {
-    for (s = n - 1, i = n + 1; s >= 0 || i < e.length; ) if ((a = e[_ = s >= 0 ? s-- : i++]) != null && (2 & a.__u) == 0 && l == a.key && u == a.type) return _;
+function Ve(t, e, n, r) {
+  var i, o, l, _ = t.key, p = t.type, a = e[n], d = a != null && (2 & a.__u) == 0;
+  if (a === null && _ == null || d && _ == a.key && p == a.type) return n;
+  if (r > (d ? 1 : 0)) {
+    for (i = n - 1, o = n + 1; i >= 0 || o < e.length; ) if ((a = e[l = i >= 0 ? i-- : o++]) != null && (2 & a.__u) == 0 && _ == a.key && p == a.type) return l;
   }
   return -1;
 }
-function ce(t, e, n) {
-  e[0] == "-" ? t.setProperty(e, n ?? "") : t[e] = n == null ? "" : typeof n != "number" || Ue.test(e) ? n : n + "px";
+function fe(t, e, n) {
+  e[0] == "-" ? t.setProperty(e, n ?? "") : t[e] = n == null ? "" : typeof n != "number" || je.test(e) ? n : n + "px";
 }
-function D(t, e, n, r, s) {
-  var i, _;
+function B(t, e, n, r, i) {
+  var o, l;
   e: if (e == "style") if (typeof n == "string") t.style.cssText = n;
   else {
-    if (typeof r == "string" && (t.style.cssText = r = ""), r) for (e in r) n && e in n || ce(t.style, e, "");
-    if (n) for (e in n) r && n[e] == r[e] || ce(t.style, e, n[e]);
+    if (typeof r == "string" && (t.style.cssText = r = ""), r) for (e in r) n && e in n || fe(t.style, e, "");
+    if (n) for (e in n) r && n[e] == r[e] || fe(t.style, e, n[e]);
   }
-  else if (e[0] == "o" && e[1] == "n") i = e != (e = e.replace(Ee, "$1")), _ = e.toLowerCase(), e = _ in t || e == "onFocusOut" || e == "onFocusIn" ? _.slice(2) : e.slice(2), t.l || (t.l = {}), t.l[e + i] = n, n ? r ? n.u = r.u : (n.u = ne, t.addEventListener(e, i ? X : G, i)) : t.removeEventListener(e, i ? X : G, i);
+  else if (e[0] == "o" && e[1] == "n") o = e != (e = e.replace(Ee, "$1")), l = e.toLowerCase(), e = l in t || e == "onFocusOut" || e == "onFocusIn" ? l.slice(2) : e.slice(2), t.l || (t.l = {}), t.l[e + o] = n, n ? r ? n.u = r.u : (n.u = re, t.addEventListener(e, o ? Z : J, o)) : t.removeEventListener(e, o ? Z : J, o);
   else {
-    if (s == "http://www.w3.org/2000/svg") e = e.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
+    if (i == "http://www.w3.org/2000/svg") e = e.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
     else if (e != "width" && e != "height" && e != "href" && e != "list" && e != "form" && e != "tabIndex" && e != "download" && e != "rowSpan" && e != "colSpan" && e != "role" && e != "popover" && e in t) try {
       t[e] = n ?? "";
       break e;
@@ -96,99 +96,99 @@ function D(t, e, n, r, s) {
     typeof n == "function" || (n == null || n === !1 && e[4] != "-" ? t.removeAttribute(e) : t.setAttribute(e, e == "popover" && n == 1 ? "" : n));
   }
 }
-function ue(t) {
+function pe(t) {
   return function(e) {
     if (this.l) {
       var n = this.l[e.type + t];
-      if (e.t == null) e.t = ne++;
+      if (e.t == null) e.t = re++;
       else if (e.t < n.u) return;
       return n(h.event ? h.event(e) : e);
     }
   };
 }
-function oe(t, e, n, r, s, i, _, l, u, a) {
-  var p, o, f, d, b, x, k, m, g, E, R, N, W, _e, I, H, K, S = e.type;
-  if (e.constructor != null) return null;
-  128 & n.__u && (u = !!(32 & n.__u), i = [l = e.__e = n.__e]), (p = h.__b) && p(e);
-  e: if (typeof S == "function") try {
-    if (m = e.props, g = "prototype" in S && S.prototype.render, E = (p = S.contextType) && r[p.__c], R = p ? E ? E.props.value : p.__ : r, n.__c ? k = (o = e.__c = n.__c).__ = o.__E : (g ? e.__c = o = new S(m, R) : (e.__c = o = new U(m, R), o.constructor = S, o.render = qe), E && E.sub(o), o.state || (o.state = {}), o.__n = r, f = o.__d = !0, o.__h = [], o._sb = []), g && o.__s == null && (o.__s = o.state), g && S.getDerivedStateFromProps != null && (o.__s == o.state && (o.__s = T({}, o.__s)), T(o.__s, S.getDerivedStateFromProps(m, o.__s))), d = o.props, b = o.state, o.__v = e, f) g && S.getDerivedStateFromProps == null && o.componentWillMount != null && o.componentWillMount(), g && o.componentDidMount != null && o.__h.push(o.componentDidMount);
+function se(t, e, n, r, i, o, l, _, p, a) {
+  var d, s, c, u, g, k, b, v, m, R, C, z, W, ce, P, L, Y, x = e.type;
+  if (e.constructor !== void 0) return null;
+  128 & n.__u && (p = !!(32 & n.__u), o = [_ = e.__e = n.__e]), (d = h.__b) && d(e);
+  e: if (typeof x == "function") try {
+    if (v = e.props, m = "prototype" in x && x.prototype.render, R = (d = x.contextType) && r[d.__c], C = d ? R ? R.props.value : d.__ : r, n.__c ? b = (s = e.__c = n.__c).__ = s.__E : (m ? e.__c = s = new x(v, C) : (e.__c = s = new F(v, C), s.constructor = x, s.render = Ke), R && R.sub(s), s.state || (s.state = {}), s.__n = r, c = s.__d = !0, s.__h = [], s._sb = []), m && s.__s == null && (s.__s = s.state), m && x.getDerivedStateFromProps != null && (s.__s == s.state && (s.__s = T({}, s.__s)), T(s.__s, x.getDerivedStateFromProps(v, s.__s))), u = s.props, g = s.state, s.__v = e, c) m && x.getDerivedStateFromProps == null && s.componentWillMount != null && s.componentWillMount(), m && s.componentDidMount != null && s.__h.push(s.componentDidMount);
     else {
-      if (g && S.getDerivedStateFromProps == null && m !== d && o.componentWillReceiveProps != null && o.componentWillReceiveProps(m, R), e.__v == n.__v || !o.__e && o.shouldComponentUpdate != null && o.shouldComponentUpdate(m, o.__s, R) === !1) {
-        for (e.__v != n.__v && (o.props = m, o.state = o.__s, o.__d = !1), e.__e = n.__e, e.__k = n.__k, e.__k.some(function($) {
-          $ && ($.__ = e);
-        }), N = 0; N < o._sb.length; N++) o.__h.push(o._sb[N]);
-        o._sb = [], o.__h.length && _.push(o);
+      if (m && x.getDerivedStateFromProps == null && v !== u && s.componentWillReceiveProps != null && s.componentWillReceiveProps(v, C), e.__v == n.__v || !s.__e && s.shouldComponentUpdate != null && s.shouldComponentUpdate(v, s.__s, C) === !1) {
+        for (e.__v != n.__v && (s.props = v, s.state = s.__s, s.__d = !1), e.__e = n.__e, e.__k = n.__k, e.__k.some(function(E) {
+          E && (E.__ = e);
+        }), z = 0; z < s._sb.length; z++) s.__h.push(s._sb[z]);
+        s._sb = [], s.__h.length && l.push(s);
         break e;
       }
-      o.componentWillUpdate != null && o.componentWillUpdate(m, o.__s, R), g && o.componentDidUpdate != null && o.__h.push(function() {
-        o.componentDidUpdate(d, b, x);
+      s.componentWillUpdate != null && s.componentWillUpdate(v, s.__s, C), m && s.componentDidUpdate != null && s.__h.push(function() {
+        s.componentDidUpdate(u, g, k);
       });
     }
-    if (o.context = R, o.props = m, o.__P = t, o.__e = !1, W = h.__r, _e = 0, g) {
-      for (o.state = o.__s, o.__d = !1, W && W(e), p = o.render(o.props, o.state, o.context), I = 0; I < o._sb.length; I++) o.__h.push(o._sb[I]);
-      o._sb = [];
+    if (s.context = C, s.props = v, s.__P = t, s.__e = !1, W = h.__r, ce = 0, m) {
+      for (s.state = s.__s, s.__d = !1, W && W(e), d = s.render(s.props, s.state, s.context), P = 0; P < s._sb.length; P++) s.__h.push(s._sb[P]);
+      s._sb = [];
     } else do
-      o.__d = !1, W && W(e), p = o.render(o.props, o.state, o.context), o.state = o.__s;
-    while (o.__d && ++_e < 25);
-    o.state = o.__s, o.getChildContext != null && (r = T(T({}, r), o.getChildContext())), g && !f && o.getSnapshotBeforeUpdate != null && (x = o.getSnapshotBeforeUpdate(d, b)), H = p, p != null && p.type === L && p.key == null && (H = He(p.props.children)), l = $e(t, q(H) ? H : [H], e, n, r, s, i, _, l, u, a), o.base = e.__e, e.__u &= -161, o.__h.length && _.push(o), k && (o.__E = o.__ = null);
-  } catch ($) {
-    if (e.__v = null, u || i != null) if ($.then) {
-      for (e.__u |= u ? 160 : 128; l && l.nodeType == 8 && l.nextSibling; ) l = l.nextSibling;
-      i[i.indexOf(l)] = null, e.__e = l;
+      s.__d = !1, W && W(e), d = s.render(s.props, s.state, s.context), s.state = s.__s;
+    while (s.__d && ++ce < 25);
+    s.state = s.__s, s.getChildContext != null && (r = T(T({}, r), s.getChildContext())), m && !c && s.getSnapshotBeforeUpdate != null && (k = s.getSnapshotBeforeUpdate(u, g)), L = d, d != null && d.type === N && d.key == null && (L = Me(d.props.children)), _ = Le(t, X(L) ? L : [L], e, n, r, i, o, l, _, p, a), s.base = e.__e, e.__u &= -161, s.__h.length && l.push(s), b && (s.__E = s.__ = null);
+  } catch (E) {
+    if (e.__v = null, p || o != null) if (E.then) {
+      for (e.__u |= p ? 160 : 128; _ && _.nodeType == 8 && _.nextSibling; ) _ = _.nextSibling;
+      o[o.indexOf(_)] = null, e.__e = _;
     } else {
-      for (K = i.length; K--; ) re(i[K]);
-      J(e);
+      for (Y = o.length; Y--; ) oe(o[Y]);
+      Q(e);
     }
-    else e.__e = n.__e, e.__k = n.__k, $.then || J(e);
-    h.__e($, e, n);
+    else e.__e = n.__e, e.__k = n.__k, E.then || Q(e);
+    h.__e(E, e, n);
   }
-  else i == null && e.__v == n.__v ? (e.__k = n.__k, e.__e = n.__e) : l = e.__e = Oe(n.__e, e, n, r, s, i, _, u, a);
-  return (p = h.diffed) && p(e), 128 & e.__u ? void 0 : l;
+  else o == null && e.__v == n.__v ? (e.__k = n.__k, e.__e = n.__e) : _ = e.__e = Xe(n.__e, e, n, r, i, o, l, p, a);
+  return (d = h.diffed) && d(e), 128 & e.__u ? void 0 : _;
 }
-function J(t) {
-  t && t.__c && (t.__c.__e = !0), t && t.__k && t.__k.forEach(J);
+function Q(t) {
+  t && t.__c && (t.__c.__e = !0), t && t.__k && t.__k.forEach(Q);
 }
-function We(t, e, n) {
+function Ae(t, e, n) {
   for (var r = 0; r < n.length; r++) ie(n[r], n[++r], n[++r]);
-  h.__c && h.__c(e, t), t.some(function(s) {
+  h.__c && h.__c(e, t), t.some(function(i) {
     try {
-      t = s.__h, s.__h = [], t.some(function(i) {
-        i.call(s);
+      t = i.__h, i.__h = [], t.some(function(o) {
+        o.call(i);
       });
-    } catch (i) {
-      h.__e(i, s.__v);
+    } catch (o) {
+      h.__e(o, i.__v);
     }
   });
 }
-function He(t) {
-  return typeof t != "object" || t == null || t.__b && t.__b > 0 ? t : q(t) ? t.map(He) : T({}, t);
+function Me(t) {
+  return typeof t != "object" || t == null || t.__b && t.__b > 0 ? t : X(t) ? t.map(Me) : T({}, t);
 }
-function Oe(t, e, n, r, s, i, _, l, u) {
-  var a, p, o, f, d, b, x, k = n.props || M, m = e.props, g = e.type;
-  if (g == "svg" ? s = "http://www.w3.org/2000/svg" : g == "math" ? s = "http://www.w3.org/1998/Math/MathML" : s || (s = "http://www.w3.org/1999/xhtml"), i != null) {
-    for (a = 0; a < i.length; a++) if ((d = i[a]) && "setAttribute" in d == !!g && (g ? d.localName == g : d.nodeType == 3)) {
-      t = d, i[a] = null;
+function Xe(t, e, n, r, i, o, l, _, p) {
+  var a, d, s, c, u, g, k, b = n.props || A, v = e.props, m = e.type;
+  if (m == "svg" ? i = "http://www.w3.org/2000/svg" : m == "math" ? i = "http://www.w3.org/1998/Math/MathML" : i || (i = "http://www.w3.org/1999/xhtml"), o != null) {
+    for (a = 0; a < o.length; a++) if ((u = o[a]) && "setAttribute" in u == !!m && (m ? u.localName == m : u.nodeType == 3)) {
+      t = u, o[a] = null;
       break;
     }
   }
   if (t == null) {
-    if (g == null) return document.createTextNode(m);
-    t = document.createElementNS(s, g, m.is && m), l && (h.__m && h.__m(e, i), l = !1), i = null;
+    if (m == null) return document.createTextNode(v);
+    t = document.createElementNS(i, m, v.is && v), _ && (h.__m && h.__m(e, o), _ = !1), o = null;
   }
-  if (g == null) k === m || l && t.data == m || (t.data = m);
+  if (m == null) b === v || _ && t.data == v || (t.data = v);
   else {
-    if (i = i && O.call(t.childNodes), !l && i != null) for (k = {}, a = 0; a < t.attributes.length; a++) k[(d = t.attributes[a]).name] = d.value;
-    for (a in k) if (d = k[a], a != "children") {
-      if (a == "dangerouslySetInnerHTML") o = d;
-      else if (!(a in m)) {
-        if (a == "value" && "defaultValue" in m || a == "checked" && "defaultChecked" in m) continue;
-        D(t, a, null, d, s);
+    if (o = o && V.call(t.childNodes), !_ && o != null) for (b = {}, a = 0; a < t.attributes.length; a++) b[(u = t.attributes[a]).name] = u.value;
+    for (a in b) if (u = b[a], a != "children") {
+      if (a == "dangerouslySetInnerHTML") s = u;
+      else if (!(a in v)) {
+        if (a == "value" && "defaultValue" in v || a == "checked" && "defaultChecked" in v) continue;
+        B(t, a, null, u, i);
       }
     }
-    for (a in m) d = m[a], a == "children" ? f = d : a == "dangerouslySetInnerHTML" ? p = d : a == "value" ? b = d : a == "checked" ? x = d : l && typeof d != "function" || k[a] === d || D(t, a, d, k[a], s);
-    if (p) l || o && (p.__html == o.__html || p.__html == t.innerHTML) || (t.innerHTML = p.__html), e.__k = [];
-    else if (o && (t.innerHTML = ""), $e(e.type == "template" ? t.content : t, q(f) ? f : [f], e, n, r, g == "foreignObject" ? "http://www.w3.org/1999/xhtml" : s, i, _, i ? i[0] : n.__k && A(n, 0), l, u), i != null) for (a = i.length; a--; ) re(i[a]);
-    l || (a = "value", g == "progress" && b == null ? t.removeAttribute("value") : b != null && (b !== t[a] || g == "progress" && !b || g == "option" && b != k[a]) && D(t, a, b, k[a], s), a = "checked", x != null && x != t[a] && D(t, a, x, k[a], s));
+    for (a in v) u = v[a], a == "children" ? c = u : a == "dangerouslySetInnerHTML" ? d = u : a == "value" ? g = u : a == "checked" ? k = u : _ && typeof u != "function" || b[a] === u || B(t, a, u, b[a], i);
+    if (d) _ || s && (d.__html == s.__html || d.__html == t.innerHTML) || (t.innerHTML = d.__html), e.__k = [];
+    else if (s && (t.innerHTML = ""), Le(e.type == "template" ? t.content : t, X(c) ? c : [c], e, n, r, m == "foreignObject" ? "http://www.w3.org/1999/xhtml" : i, o, l, o ? o[0] : n.__k && I(n, 0), _, p), o != null) for (a = o.length; a--; ) oe(o[a]);
+    _ || (a = "value", m == "progress" && g == null ? t.removeAttribute("value") : g != null && (g !== t[a] || m == "progress" && !g || m == "option" && g != b[a]) && B(t, a, g, b[a], i), a = "checked", k != null && k != t[a] && B(t, a, k, b[a], i));
   }
   return t;
 }
@@ -198,186 +198,268 @@ function ie(t, e, n) {
       var r = typeof t.__u == "function";
       r && t.__u(), r && e == null || (t.__u = t(e));
     } else t.current = e;
-  } catch (s) {
-    h.__e(s, n);
+  } catch (i) {
+    h.__e(i, n);
   }
 }
-function Me(t, e, n) {
-  var r, s;
+function Ne(t, e, n) {
+  var r, i;
   if (h.unmount && h.unmount(t), (r = t.ref) && (r.current && r.current != t.__e || ie(r, null, e)), (r = t.__c) != null) {
     if (r.componentWillUnmount) try {
       r.componentWillUnmount();
-    } catch (i) {
-      h.__e(i, e);
+    } catch (o) {
+      h.__e(o, e);
     }
     r.base = r.__P = null;
   }
-  if (r = t.__k) for (s = 0; s < r.length; s++) r[s] && Me(r[s], e, n || typeof t.type != "function");
-  n || re(t.__e), t.__c = t.__ = t.__e = void 0;
+  if (r = t.__k) for (i = 0; i < r.length; i++) r[i] && Ne(r[i], e, n || typeof t.type != "function");
+  n || oe(t.__e), t.__c = t.__ = t.__e = void 0;
 }
-function qe(t, e, n) {
+function Ke(t, e, n) {
   return this.constructor(t, n);
 }
-function Ve(t, e, n) {
-  var r, s, i, _;
-  e == document && (e = document.documentElement), h.__ && h.__(t, e), s = (r = !1) ? null : e.__k, i = [], _ = [], oe(e, t = e.__k = Fe(L, null, [t]), s || M, M, e.namespaceURI, s ? null : e.firstChild ? O.call(e.childNodes) : null, i, s ? s.__e : e.firstChild, r, _), We(i, t, _);
+function Ye(t, e, n) {
+  var r, i, o, l;
+  e == document && (e = document.documentElement), h.__ && h.__(t, e), i = (r = !1) ? null : e.__k, o = [], l = [], se(e, t = e.__k = Oe(N, null, [t]), i || A, A, e.namespaceURI, i ? null : e.firstChild ? V.call(e.childNodes) : null, o, i ? i.__e : e.firstChild, r, l), Ae(o, t, l);
 }
-O = Re.slice, h = { __e: function(t, e, n, r) {
-  for (var s, i, _; e = e.__; ) if ((s = e.__c) && !s.__) try {
-    if ((i = s.constructor) && i.getDerivedStateFromError != null && (s.setState(i.getDerivedStateFromError(t)), _ = s.__d), s.componentDidCatch != null && (s.componentDidCatch(t, r || {}), _ = s.__d), _) return s.__E = s;
-  } catch (l) {
-    t = l;
+V = Ie.slice, h = { __e: function(t, e, n, r) {
+  for (var i, o, l; e = e.__; ) if ((i = e.__c) && !i.__) try {
+    if ((o = i.constructor) && o.getDerivedStateFromError != null && (i.setState(o.getDerivedStateFromError(t)), l = i.__d), i.componentDidCatch != null && (i.componentDidCatch(t, r || {}), l = i.__d), l) return i.__E = i;
+  } catch (_) {
+    t = _;
   }
   throw t;
-} }, xe = 0, U.prototype.setState = function(t, e) {
+} }, Re = 0, F.prototype.setState = function(t, e) {
   var n;
-  n = this.__s != null && this.__s != this.state ? this.__s : this.__s = T({}, this.state), typeof t == "function" && (t = t(T({}, n), this.props)), t && T(n, t), t != null && this.__v && (e && this._sb.push(e), ae(this));
-}, U.prototype.forceUpdate = function(t) {
-  this.__v && (this.__e = !0, t && this.__h.push(t), ae(this));
-}, U.prototype.render = L, C = [], Se = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, Te = function(t, e) {
+  n = this.__s != null && this.__s != this.state ? this.__s : this.__s = T({}, this.state), typeof t == "function" && (t = t(T({}, n), this.props)), t && T(n, t), t != null && this.__v && (e && this._sb.push(e), ue(this));
+}, F.prototype.forceUpdate = function(t) {
+  this.__v && (this.__e = !0, t && this.__h.push(t), ue(this));
+}, F.prototype.render = N, $ = [], Ce = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, $e = function(t, e) {
   return t.__v.__b - e.__v.__b;
-}, z.__r = 0, Ee = /(PointerCapture)$|Capture$/i, ne = 0, G = ue(!1), X = ue(!0);
-var Ke = 0;
-function c(t, e, n, r, s, i) {
+}, O.__r = 0, Ee = /(PointerCapture)$|Capture$/i, re = 0, J = pe(!1), Z = pe(!0);
+var Ge = 0;
+function f(t, e, n, r, i, o) {
   e || (e = {});
-  var _, l, u = e;
-  if ("ref" in u) for (l in u = {}, e) l == "ref" ? _ = e[l] : u[l] = e[l];
-  var a = { type: t, props: u, key: n, ref: _, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --Ke, __i: -1, __u: 0, __source: s, __self: i };
-  if (typeof t == "function" && (_ = t.defaultProps)) for (l in _) u[l] === void 0 && (u[l] = _[l]);
+  var l, _, p = e;
+  if ("ref" in p) for (_ in p = {}, e) _ == "ref" ? l = e[_] : p[_] = e[_];
+  var a = { type: t, props: p, key: n, ref: l, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --Ge, __i: -1, __u: 0, __source: i, __self: o };
+  if (typeof t == "function" && (l = t.defaultProps)) for (_ in l) p[_] === void 0 && (p[_] = l[_]);
   return h.vnode && h.vnode(a), a;
 }
-const Ye = (t) => {
-  const { Component: e, createRoot: n } = t, r = document.createElement("div");
-  r.setAttribute("id", "twd-sidebar-root"), document.body.appendChild(r), n(r).render(e);
-}, Ge = async (t, e, n) => {
-  for (const r in t) await t[r]();
-  Ye({ Component: e, createRoot: n });
+const Je = {
+  // Colors
+  primary: "#3b82f6",
+  background: "#1e293b",
+  backgroundSecondary: "#334155",
+  border: "#475569",
+  borderLight: "#64748b",
+  text: "#f1f5f9",
+  textSecondary: "#cbd5e1",
+  textMuted: "#94a3b8",
+  // Status colors
+  success: "#22c55e",
+  successBg: "#14532d",
+  error: "#ef4444",
+  errorBg: "#7f1d1d",
+  warning: "#fbbf24",
+  warningBg: "#78350f",
+  skip: "#475569",
+  skipBg: "#334155",
+  // Interactive elements
+  buttonPrimary: "#3b82f6",
+  buttonPrimaryText: "#ffffff",
+  buttonSecondary: "#334155",
+  buttonSecondaryText: "#f1f5f9",
+  buttonBorder: "#475569",
+  // Spacing
+  spacingXs: "4px",
+  spacingSm: "6px",
+  spacingMd: "8px",
+  spacingLg: "12px",
+  spacingXl: "14px",
+  // Typography
+  fontSizeXs: "10px",
+  fontSizeSm: "12px",
+  fontSizeMd: "14px",
+  fontSizeLg: "16px",
+  fontWeightNormal: "400",
+  fontWeightMedium: "500",
+  fontWeightBold: "700",
+  // Layout
+  sidebarWidth: "320px",
+  borderRadius: "8px",
+  borderRadiusLg: "6px",
+  // Effects
+  shadow: "2px 0 8px rgba(0,0,0,0.3)",
+  shadowSm: "0 2px 4px rgba(0, 0, 0, 0.2)",
+  // Z-index
+  zIndexSidebar: "1000",
+  zIndexSticky: "1000",
+  // Animation
+  animationDuration: "0.2s",
+  // Icon colors
+  iconColor: "#f1f5f9",
+  iconColorSecondary: "#cbd5e1"
+};
+function Ze(t = {}) {
+  const e = { ...Je, ...t };
+  return Object.entries(e).map(([n, r]) => `${`--twd-${n.replace(/([A-Z])/g, "-$1").toLowerCase()}`}: ${r};`).join(`
+  `);
+}
+function Qe(t) {
+  const e = "twd-theme-variables";
+  let n = document.getElementById(e);
+  n || (n = document.createElement("style"), n.id = e, document.head.appendChild(n));
+  const r = Ze(t);
+  n.textContent = `
+    :root {
+      ${r}
+    }
+  `;
+}
+const et = (t) => {
+  const { Component: e, createRoot: n, theme: r } = t;
+  Qe(r);
+  const i = document.createElement("div");
+  i.setAttribute("id", "twd-sidebar-root"), document.body.appendChild(i), n(i).render(e);
+}, tt = async (t, e, n, r) => {
+  for (const i in t) await t[i]();
+  et({ Component: e, createRoot: n, theme: r });
 };
-var j, y, Y, de, Q = 0, Le = [], v = h, fe = v.__b, pe = v.__r, he = v.diffed, ge = v.__c, me = v.unmount, ye = v.__;
-function Ne(t, e) {
-  v.__h && v.__h(y, t, Q || e), Q = 0;
+var M, y, G, he, q = 0, ze = [], w = h, ge = w.__b, me = w.__r, ve = w.diffed, ye = w.__c, we = w.unmount, be = w.__;
+function ae(t, e) {
+  w.__h && w.__h(y, t, q || e), q = 0;
   var n = y.__H || (y.__H = { __: [], __h: [] });
   return t >= n.__.length && n.__.push({}), n.__[t];
 }
-function Z(t) {
-  return Q = 1, Xe(Ie, t);
+function ee(t) {
+  return q = 1, nt(Be, t);
 }
-function Xe(t, e, n) {
-  var r = Ne(j++, 2);
-  if (r.t = t, !r.__c && (r.__ = [Ie(void 0, e), function(l) {
-    var u = r.__N ? r.__N[0] : r.__[0], a = r.t(u, l);
-    u !== a && (r.__N = [a, r.__[1]], r.__c.setState({}));
+function nt(t, e, n) {
+  var r = ae(M++, 2);
+  if (r.t = t, !r.__c && (r.__ = [Be(void 0, e), function(_) {
+    var p = r.__N ? r.__N[0] : r.__[0], a = r.t(p, _);
+    p !== a && (r.__N = [a, r.__[1]], r.__c.setState({}));
   }], r.__c = y, !y.__f)) {
-    var s = function(l, u, a) {
+    var i = function(_, p, a) {
       if (!r.__c.__H) return !0;
-      var p = r.__c.__H.__.filter(function(f) {
-        return !!f.__c;
+      var d = r.__c.__H.__.filter(function(c) {
+        return !!c.__c;
       });
-      if (p.every(function(f) {
-        return !f.__N;
-      })) return !i || i.call(this, l, u, a);
-      var o = r.__c.props !== l;
-      return p.forEach(function(f) {
-        if (f.__N) {
-          var d = f.__[0];
-          f.__ = f.__N, f.__N = void 0, d !== f.__[0] && (o = !0);
+      if (d.every(function(c) {
+        return !c.__N;
+      })) return !o || o.call(this, _, p, a);
+      var s = r.__c.props !== _;
+      return d.forEach(function(c) {
+        if (c.__N) {
+          var u = c.__[0];
+          c.__ = c.__N, c.__N = void 0, u !== c.__[0] && (s = !0);
         }
-      }), i && i.call(this, l, u, a) || o;
+      }), o && o.call(this, _, p, a) || s;
     };
     y.__f = !0;
-    var i = y.shouldComponentUpdate, _ = y.componentWillUpdate;
-    y.componentWillUpdate = function(l, u, a) {
+    var o = y.shouldComponentUpdate, l = y.componentWillUpdate;
+    y.componentWillUpdate = function(_, p, a) {
       if (this.__e) {
-        var p = i;
-        i = void 0, s(l, u, a), i = p;
+        var d = o;
+        o = void 0, i(_, p, a), o = d;
       }
-      _ && _.call(this, l, u, a);
-    }, y.shouldComponentUpdate = s;
+      l && l.call(this, _, p, a);
+    }, y.shouldComponentUpdate = i;
   }
   return r.__N || r.__;
 }
-function Je(t, e) {
-  var n = Ne(j++, 3);
-  !v.__s && et(n.__H, e) && (n.__ = t, n.u = e, y.__H.__h.push(n));
+function le(t, e) {
+  var n = ae(M++, 3);
+  !w.__s && Pe(n.__H, e) && (n.__ = t, n.u = e, y.__H.__h.push(n));
+}
+function H(t) {
+  return q = 5, rt(function() {
+    return { current: t };
+  }, []);
 }
-function Qe() {
-  for (var t; t = Le.shift(); ) if (t.__P && t.__H) try {
-    t.__H.__h.forEach(F), t.__H.__h.forEach(ee), t.__H.__h = [];
+function rt(t, e) {
+  var n = ae(M++, 7);
+  return Pe(n.__H, e) && (n.__ = t(), n.__H = e, n.__h = t), n.__;
+}
+function ot() {
+  for (var t; t = ze.shift(); ) if (t.__P && t.__H) try {
+    t.__H.__h.forEach(j), t.__H.__h.forEach(te), t.__H.__h = [];
   } catch (e) {
-    t.__H.__h = [], v.__e(e, t.__v);
+    t.__H.__h = [], w.__e(e, t.__v);
   }
 }
-v.__b = function(t) {
-  y = null, fe && fe(t);
-}, v.__ = function(t, e) {
-  t && e.__k && e.__k.__m && (t.__m = e.__k.__m), ye && ye(t, e);
-}, v.__r = function(t) {
-  pe && pe(t), j = 0;
+w.__b = function(t) {
+  y = null, ge && ge(t);
+}, w.__ = function(t, e) {
+  t && e.__k && e.__k.__m && (t.__m = e.__k.__m), be && be(t, e);
+}, w.__r = function(t) {
+  me && me(t), M = 0;
   var e = (y = t.__c).__H;
-  e && (Y === y ? (e.__h = [], y.__h = [], e.__.forEach(function(n) {
+  e && (G === y ? (e.__h = [], y.__h = [], e.__.forEach(function(n) {
     n.__N && (n.__ = n.__N), n.u = n.__N = void 0;
-  })) : (e.__h.forEach(F), e.__h.forEach(ee), e.__h = [], j = 0)), Y = y;
-}, v.diffed = function(t) {
-  he && he(t);
+  })) : (e.__h.forEach(j), e.__h.forEach(te), e.__h = [], M = 0)), G = y;
+}, w.diffed = function(t) {
+  ve && ve(t);
   var e = t.__c;
-  e && e.__H && (e.__H.__h.length && (Le.push(e) !== 1 && de === v.requestAnimationFrame || ((de = v.requestAnimationFrame) || Ze)(Qe)), e.__H.__.forEach(function(n) {
+  e && e.__H && (e.__H.__h.length && (ze.push(e) !== 1 && he === w.requestAnimationFrame || ((he = w.requestAnimationFrame) || st)(ot)), e.__H.__.forEach(function(n) {
     n.u && (n.__H = n.u), n.u = void 0;
-  })), Y = y = null;
-}, v.__c = function(t, e) {
+  })), G = y = null;
+}, w.__c = function(t, e) {
   e.some(function(n) {
     try {
-      n.__h.forEach(F), n.__h = n.__h.filter(function(r) {
-        return !r.__ || ee(r);
+      n.__h.forEach(j), n.__h = n.__h.filter(function(r) {
+        return !r.__ || te(r);
       });
     } catch (r) {
-      e.some(function(s) {
-        s.__h && (s.__h = []);
-      }), e = [], v.__e(r, n.__v);
+      e.some(function(i) {
+        i.__h && (i.__h = []);
+      }), e = [], w.__e(r, n.__v);
     }
-  }), ge && ge(t, e);
-}, v.unmount = function(t) {
-  me && me(t);
+  }), ye && ye(t, e);
+}, w.unmount = function(t) {
+  we && we(t);
   var e, n = t.__c;
   n && n.__H && (n.__H.__.forEach(function(r) {
     try {
-      F(r);
-    } catch (s) {
-      e = s;
+      j(r);
+    } catch (i) {
+      e = i;
     }
-  }), n.__H = void 0, e && v.__e(e, n.__v));
+  }), n.__H = void 0, e && w.__e(e, n.__v));
 };
-var ve = typeof requestAnimationFrame == "function";
-function Ze(t) {
+var ke = typeof requestAnimationFrame == "function";
+function st(t) {
   var e, n = function() {
-    clearTimeout(r), ve && cancelAnimationFrame(e), setTimeout(t);
+    clearTimeout(r), ke && cancelAnimationFrame(e), setTimeout(t);
   }, r = setTimeout(n, 35);
-  ve && (e = requestAnimationFrame(n));
+  ke && (e = requestAnimationFrame(n));
 }
-function F(t) {
+function j(t) {
   var e = y, n = t.__c;
   typeof n == "function" && (t.__c = void 0, n()), y = e;
 }
-function ee(t) {
+function te(t) {
   var e = y;
   t.__c = t.__(), y = e;
 }
-function et(t, e) {
+function Pe(t, e) {
   return !t || t.length !== e.length || e.some(function(n, r) {
     return n !== t[r];
   });
 }
-function Ie(t, e) {
+function Be(t, e) {
   return typeof e == "function" ? e(t) : e;
 }
-const tt = (t) => {
+const it = (t) => {
   const e = /* @__PURE__ */ new Map(), n = [];
   for (const r of t) e.set(r.id, { ...r, childrenNodes: [] });
   for (const r of e.values())
     r.parent ? e.get(r.parent)?.childrenNodes?.push(r) : n.push(r);
   return n;
-}, nt = {
+}, at = {
   animation: "spin 1s linear infinite"
-}, rt = () => /* @__PURE__ */ c(
+}, lt = () => /* @__PURE__ */ f(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -385,23 +467,23 @@ const tt = (t) => {
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: "#364153",
+    stroke: "var(--twd-icon-color-secondary)",
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-loader-circle-icon lucide-loader-circle",
-    style: nt,
+    style: at,
     "data-testid": "loader-icon",
-    children: /* @__PURE__ */ c("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    children: /* @__PURE__ */ f("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
   }
-), P = document.createElement("style");
-P && !document.getElementById("loader-spin-keyframes") && (P.id = "loader-spin-keyframes", P.innerHTML = `
+), D = document.createElement("style");
+D && !document.getElementById("loader-spin-keyframes") && (D.id = "loader-spin-keyframes", D.innerHTML = `
     @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
-  `, document.head.appendChild(P));
-const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
+  `, document.head.appendChild(D));
+const K = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ f(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -409,7 +491,7 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
     height: "16",
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: "#000",
+    stroke: "var(--twd-icon-color)",
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -417,13 +499,13 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
     "data-testid": n,
     children: e
   }
-), ot = () => /* @__PURE__ */ c(V, { className: "lucide-play-icon lucide-play", dataTestId: "play-icon", children: /* @__PURE__ */ c("path", { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" }) }), De = ({ id: t, name: e, skip: n, only: r }) => /* @__PURE__ */ c(L, { children: [
+), _t = () => /* @__PURE__ */ f(K, { className: "lucide-play-icon lucide-play", dataTestId: "play-icon", children: /* @__PURE__ */ f("path", { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" }) }), De = ({ id: t, name: e, skip: n, only: r }) => /* @__PURE__ */ f(N, { children: [
   e,
   " ",
-  r && /* @__PURE__ */ c(
+  r && /* @__PURE__ */ f(
     "span",
     {
-      style: { color: "#2563eb" },
+      style: { color: "var(--twd-primary)" },
       "data-testid": `only-indicator-${t}`,
       children: [
         " ",
@@ -431,10 +513,10 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
       ]
     }
   ),
-  n && /* @__PURE__ */ c(
+  n && /* @__PURE__ */ f(
     "span",
     {
-      style: { color: "#6b7280" },
+      style: { color: "var(--twd-text-secondary)" },
       "data-testid": `skip-indicator-${t}`,
       children: [
         " ",
@@ -442,36 +524,36 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
       ]
     }
   )
-] }), it = (t) => {
+] }), ct = (t) => {
   switch (t.status) {
     case "pass":
       return {
         item: {
-          background: "#dcfce7"
+          background: "var(--twd-success-bg)"
         },
         container: {
-          borderLeft: "3px solid #00c951"
+          borderLeft: "3px solid var(--twd-success)"
         }
       };
     case "fail":
       return {
         item: {
-          background: "#fee2e2"
+          background: "var(--twd-error-bg)"
         },
         container: {
-          borderLeft: "3px solid #fb2c36"
+          borderLeft: "3px solid var(--twd-error)"
         }
       };
     case "skip":
       return {
         item: {
-          background: "#f3f4f6"
+          background: "var(--twd-skip-bg)"
         }
       };
     case "running":
       return {
         item: {
-          background: "#fef9c3"
+          background: "var(--twd-warning-bg)"
         }
       };
     default:
@@ -481,40 +563,72 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
         }
       };
   }
-}, st = (t) => t.startsWith("Assertion passed") || t.startsWith("Event fired") ? { color: "#0d542b", fontWeight: "700" } : t.startsWith("Test failed") ? { color: "#fb2c36", fontWeight: "700" } : {}, _t = ({
+}, dt = (t) => t.startsWith("Assertion passed") || t.startsWith("Event fired") ? { color: "var(--twd-success)", fontWeight: "var(--twd-font-weight-bold)" } : t.startsWith("Test failed") ? { color: "var(--twd-error)", fontWeight: "var(--twd-font-weight-bold)" } : {}, ut = ({
   node: t,
   depth: e,
   id: n,
   runTest: r
 }) => {
-  const s = it(t);
-  return /* @__PURE__ */ c(
+  const i = ct(t), o = H(null), l = H(t.status), _ = H(t.logs?.length || 0), p = typeof window < "u" && sessionStorage.getItem("twd-last-run-test-name") === t.name;
+  le(() => {
+    const d = o.current;
+    if (!d || !t.logs || t.logs.length === 0) return;
+    const s = l.current === "running" && (t.status === "pass" || t.status === "fail"), c = t.logs.length > _.current;
+    (s || c) && setTimeout(() => {
+      d.scrollTop = d.scrollHeight;
+    }, 0), l.current = t.status, _.current = t.logs.length;
+  }, [t.status, t.logs]);
+  const a = () => {
+    switch (t.status) {
+      case "pass":
+        return "passed";
+      case "fail":
+        return "failed";
+      case "running":
+        return "running";
+      case "skip":
+        return "skipped";
+      default:
+        return "not run";
+    }
+  };
+  return /* @__PURE__ */ f(
     "li",
     {
       style: {
-        marginBottom: "4px",
-        marginLeft: e * 6,
-        ...s.container
+        marginBottom: "var(--twd-spacing-xs)",
+        marginLeft: `calc(${e} * var(--twd-spacing-sm))`,
+        ...i.container
       },
       "data-testid": `test-list-item-${n}`,
+      "data-test-name": t.name,
+      role: "listitem",
+      "aria-label": `Test ${t.name}, status: ${a()}`,
       children: [
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ f(
           "div",
           {
             style: {
               display: "flex",
               alignItems: "left",
               justifyContent: "space-between",
-              padding: "4px 6px",
-              borderRadius: "4px",
-              ...s.item
+              padding: "var(--twd-spacing-xs) var(--twd-spacing-sm)",
+              borderRadius: "var(--twd-border-radius)",
+              ...i.item,
+              ...p && {
+                border: "1px dashed var(--twd-border)"
+              }
             },
             children: [
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ f(
                 "span",
                 {
-                  style: { fontWeight: "500", color: "#374151", maxWidth: "220px" },
-                  children: /* @__PURE__ */ c(
+                  style: {
+                    fontWeight: "var(--twd-font-weight-medium)",
+                    color: "var(--twd-text)",
+                    maxWidth: "220px"
+                  },
+                  children: /* @__PURE__ */ f(
                     De,
                     {
                       id: n,
@@ -525,19 +639,19 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
                   )
                 }
               ),
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ f(
                 "button",
                 {
                   onClick: () => r(n),
                   "aria-label": `Run ${t.name} test`,
                   style: {
                     background: "transparent",
-                    border: "1px solid #d1d5db",
-                    borderRadius: "4px",
+                    border: "1px solid var(--twd-border-light)",
+                    borderRadius: "var(--twd-border-radius)",
                     padding: "0",
                     cursor: "pointer",
                     verticalAlign: "middle",
-                    fontSize: "12px",
+                    fontSize: "var(--twd-font-size-sm)",
                     width: "24px",
                     height: "24px",
                     display: "flex",
@@ -546,38 +660,39 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
                   },
                   disabled: t.status === "running",
                   "data-testid": `run-test-button-${n}`,
-                  children: t.status === "running" ? /* @__PURE__ */ c(rt, {}) : /* @__PURE__ */ c(ot, {})
+                  children: t.status === "running" ? /* @__PURE__ */ f(lt, {}) : /* @__PURE__ */ f(_t, {})
                 }
               )
             ]
           }
         ),
-        t.logs && t.logs.length > 0 && /* @__PURE__ */ c(
+        t.logs && t.logs.length > 0 && /* @__PURE__ */ f(
           "ul",
           {
+            ref: o,
             style: {
-              borderRadius: "4px",
+              borderRadius: "var(--twd-border-radius)",
               maxHeight: "260px",
               overflowY: "auto",
               padding: 0,
-              background: "#f3f4f6",
+              background: "var(--twd-background-secondary)",
               listStyle: "none",
-              marginTop: "4px",
+              marginTop: "var(--twd-spacing-xs)",
               textAlign: "left"
             },
-            children: t.logs.map((i, _) => /* @__PURE__ */ c(
+            children: t.logs.map((d, s) => /* @__PURE__ */ f(
               "li",
               {
                 style: {
-                  fontSize: "12px",
-                  padding: "4px 6px",
-                  borderBottom: "1px solid #d1d5db",
-                  color: "#374151",
-                  ...st(i)
+                  fontSize: "var(--twd-font-size-sm)",
+                  padding: "var(--twd-spacing-xs) var(--twd-spacing-sm)",
+                  borderBottom: "1px solid var(--twd-border-light)",
+                  color: "var(--twd-text)",
+                  ...dt(d)
                 },
-                children: i
+                children: d
               },
-              _
+              s
             ))
           }
         )
@@ -585,65 +700,97 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
     },
     t.name
   );
-}, lt = () => /* @__PURE__ */ c(V, { className: "lucide-chevron-down-icon lucide-chevron-down", dataTestId: "chevron-down-icon", children: /* @__PURE__ */ c("path", { d: "m6 9 6 6 6-6" }) }), at = () => /* @__PURE__ */ c(V, { className: "lucide-chevron-right-icon lucide-chevron-right", dataTestId: "chevron-right-icon", children: /* @__PURE__ */ c("path", { d: "m9 18 6-6-6-6" }) }), ct = ({ tests: t, runTest: e }) => {
-  const [n, r] = Z({}), s = (l) => r((u) => ({ ...u, [l]: !u[l] })), i = (l, u = 0) => {
-    if (l.type === "test")
-      return /* @__PURE__ */ c(
-        _t,
+}, ft = () => /* @__PURE__ */ f(K, { className: "lucide-chevron-down-icon lucide-chevron-down", dataTestId: "chevron-down-icon", children: /* @__PURE__ */ f("path", { d: "m6 9 6 6 6-6" }) }), pt = () => /* @__PURE__ */ f(K, { className: "lucide-chevron-right-icon lucide-chevron-right", dataTestId: "chevron-right-icon", children: /* @__PURE__ */ f("path", { d: "m9 18 6-6-6-6" }) }), ht = ({ tests: t, runTest: e }) => {
+  const [n, r] = ee({}), i = H(null), o = H(!1), l = (a) => r((d) => ({ ...d, [a]: !d[a] }));
+  le(() => {
+    if (o.current) return;
+    const a = sessionStorage.getItem("twd-last-run-test-name");
+    if (!a) return;
+    const d = setTimeout(() => {
+      const s = document.querySelector(`[data-test-name="${a}"]`);
+      if (s) {
+        const c = i.current?.closest('[data-testid="twd-sidebar"]');
+        if (c) {
+          const u = s.getBoundingClientRect(), g = c.getBoundingClientRect(), k = c.scrollTop, b = u.top - g.top + k;
+          c.scrollTo({
+            top: b - 150,
+            // 150px offset from top
+            behavior: "smooth"
+          });
+        }
+        o.current = !0;
+      }
+    }, 100);
+    return () => clearTimeout(d);
+  }, []);
+  const _ = (a, d = 0) => {
+    if (a.type === "test")
+      return /* @__PURE__ */ f(
+        ut,
         {
-          node: l,
-          depth: u,
-          id: l.id,
-          runTest: () => e(l.id)
+          node: a,
+          depth: d,
+          id: a.id,
+          runTest: () => e(a.id)
         },
-        l.id
+        a.id
       );
-    const a = n[l.id];
-    return /* @__PURE__ */ c("li", { style: { marginLeft: u * 12 }, children: [
-      /* @__PURE__ */ c(
+    const s = n[a.id];
+    return /* @__PURE__ */ f("li", { style: { marginLeft: `calc(${d} * var(--twd-spacing-lg))` }, children: [
+      /* @__PURE__ */ f(
         "span",
         {
           style: {
-            fontWeight: "bold",
+            fontWeight: "var(--twd-font-weight-bold)",
             cursor: "pointer",
-            color: "#374151",
+            color: "var(--twd-text)",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            marginBottom: "4px",
-            gap: "6px"
+            marginBottom: "var(--twd-spacing-xs)",
+            gap: "var(--twd-spacing-sm)"
           },
-          "data-testid": `test-group-${l.name}`,
+          "data-testid": `test-group-${a.name}`,
           tabIndex: 0,
           role: "button",
-          "aria-expanded": !a,
-          onClick: () => s(l.id),
+          "aria-expanded": !s,
+          "aria-label": `${s ? "Expand" : "Collapse"} test suite ${a.name}`,
+          onClick: () => l(a.id),
           children: [
-            /* @__PURE__ */ c(De, { id: l.id, name: l.name, skip: l.skip, only: l.only }),
-            a ? /* @__PURE__ */ c(at, {}) : /* @__PURE__ */ c(lt, {})
+            /* @__PURE__ */ f(De, { id: a.id, name: a.name, skip: a.skip, only: a.only }),
+            s ? /* @__PURE__ */ f(pt, {}) : /* @__PURE__ */ f(ft, {})
           ]
         }
       ),
-      !a && l.childrenNodes && l.childrenNodes.length > 0 && /* @__PURE__ */ c("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: l.childrenNodes.map((p) => i(p, u + 1)) })
-    ] }, l.id);
-  }, _ = tt(t);
-  return /* @__PURE__ */ c("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: _.map((l) => i(l)) });
-}, ut = {
+      !s && a.childrenNodes && a.childrenNodes.length > 0 && /* @__PURE__ */ f("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: a.childrenNodes.map((c) => _(c, d + 1)) })
+    ] }, a.id);
+  }, p = it(t);
+  return /* @__PURE__ */ f(
+    "ul",
+    {
+      ref: i,
+      style: { listStyle: "none", padding: 0, margin: 0 },
+      role: "list",
+      "aria-label": "Test list",
+      children: p.map((a) => _(a))
+    }
+  );
+}, gt = {
   left: {
     left: 0,
-    borderTopRightRadius: "6px",
-    borderBottomRightRadius: "6px",
+    borderTopRightRadius: "var(--twd-border-radius-lg)",
+    borderBottomRightRadius: "var(--twd-border-radius-lg)",
     borderTopLeftRadius: "0",
     borderBottomLeftRadius: "0"
   },
   right: {
     right: 0,
-    borderTopLeftRadius: "6px",
-    borderBottomLeftRadius: "6px",
+    borderTopLeftRadius: "var(--twd-border-radius-lg)",
+    borderBottomLeftRadius: "var(--twd-border-radius-lg)",
     borderTopRightRadius: "0",
     borderBottomRightRadius: "0"
   }
-}, dt = ({ setOpen: t, position: e }) => /* @__PURE__ */ c(
+}, mt = ({ setOpen: t, position: e }) => /* @__PURE__ */ f(
   "button",
   {
     "aria-label": "Open TWD sidebar",
@@ -651,24 +798,24 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
       position: "fixed",
       top: "50%",
       transform: "translateY(-50%)",
-      background: "#1A6EF4",
-      color: "white",
-      padding: "6px 10px",
+      background: "var(--twd-button-primary)",
+      color: "var(--twd-button-primary-text)",
+      padding: "var(--twd-spacing-sm) 10px",
       cursor: "pointer",
-      fontSize: "12px",
-      ...ut[e]
+      fontSize: "var(--twd-font-size-sm)",
+      ...gt[e]
     },
     onClick: () => t(!0),
     children: "TWD"
   }
-), ft = ({ isOpen: t, position: e }) => {
-  Je(() => {
-    const n = document.documentElement;
-    return t ? e === "left" ? n.style.marginLeft = "280px" : n.style.marginRight = "280px" : (n.style.marginRight = "0", n.style.marginLeft = "0"), () => {
+), vt = ({ isOpen: t, position: e }) => {
+  le(() => {
+    const n = document.documentElement, r = getComputedStyle(document.documentElement).getPropertyValue("--twd-sidebar-width") || "280px";
+    return t ? e === "left" ? n.style.marginLeft = r : n.style.marginRight = r : (n.style.marginRight = "0", n.style.marginLeft = "0"), () => {
       n.style.marginRight = "0", n.style.marginLeft = "0";
     };
   }, [t, e]);
-}, pt = () => typeof window < "u" ? (window.__TWD_STATE__ || (window.__TWD_STATE__ = {
+}, yt = () => typeof window < "u" ? (window.__TWD_STATE__ || (window.__TWD_STATE__ = {
   handlers: /* @__PURE__ */ new Map(),
   beforeEachHooks: /* @__PURE__ */ new Map(),
   afterEachHooks: /* @__PURE__ */ new Map(),
@@ -678,109 +825,109 @@ const V = ({ className: t, children: e, dataTestId: n }) => /* @__PURE__ */ c(
   beforeEachHooks: /* @__PURE__ */ new Map(),
   afterEachHooks: /* @__PURE__ */ new Map(),
   stack: []
-}, se = pt(), w = se.handlers, be = se.beforeEachHooks, ke = se.afterEachHooks, ht = (t) => {
+}, _e = yt(), S = _e.handlers, Se = _e.beforeEachHooks, xe = _e.afterEachHooks, wt = (t) => {
   const e = [], n = [];
   let r = t;
   for (; r; )
-    be.has(r) && e.unshift(...be.get(r)), ke.has(r) && n.push(...ke.get(r)), r = w.get(r)?.parent;
+    Se.has(r) && e.unshift(...Se.get(r)), xe.has(r) && n.push(...xe.get(r)), r = S.get(r)?.parent;
   return { before: e, after: n };
-}, te = (t) => {
-  const e = w.get(t);
-  return e ? e.only ? !0 : e.children ? e.children.some((n) => te(n)) : !1 : !1;
-}, gt = (t) => {
-  let e = w.get(t);
+}, ne = (t) => {
+  const e = S.get(t);
+  return e ? e.only ? !0 : e.children ? e.children.some((n) => ne(n)) : !1 : !1;
+}, bt = (t) => {
+  let e = S.get(t);
   for (; e?.parent; ) {
-    const n = w.get(e.parent);
+    const n = S.get(e.parent);
     if (n?.only) return !0;
     e = n;
   }
   return !1;
-}, we = (t) => {
-  let e = w.get(t);
+}, Te = (t) => {
+  let e = S.get(t);
   for (; e; ) {
     if (e.skip) return !0;
     if (!e.parent) break;
-    e = w.get(e.parent);
+    e = S.get(e.parent);
   }
   return !1;
 };
-class Pe {
+class Ue {
   events;
   constructor(e) {
     this.events = e;
   }
   async runAll() {
-    const e = Array.from(w.values()).filter(
+    const e = Array.from(S.values()).filter(
       (r) => !r.parent && r.type === "suite"
-    ), n = Array.from(w.values()).some((r) => r.only);
+    ), n = Array.from(S.values()).some((r) => r.only);
     for (const r of e)
       await this.runSuite(r, n);
-    return w;
+    return S;
   }
   async runSingle(e) {
-    const n = w.get(e);
+    const n = S.get(e);
     if (!n || n.type !== "test") return;
     await this.runTest(n, !1);
   }
   async runSuite(e, n) {
-    if (we(e.id) && !te(e.id)) {
+    if (Te(e.id) && !ne(e.id)) {
       this.events.onSkip?.(e);
       return;
     }
-    if (n && !te(e.id)) return;
+    if (n && !ne(e.id)) return;
     this.events.onSuiteStart?.(e);
-    const s = (e.children || []).map((i) => w.get(i));
-    for (const i of s)
-      i.type === "suite" ? await this.runSuite(i, n) : i.type === "test" && await this.runTest(i, n);
+    const i = (e.children || []).map((o) => S.get(o));
+    for (const o of i)
+      o.type === "suite" ? await this.runSuite(o, n) : o.type === "test" && await this.runTest(o, n);
     this.events.onSuiteEnd?.(e);
   }
   async runTest(e, n) {
-    if ((we(e.id) || e.skip) && !e.only) {
+    if ((Te(e.id) || e.skip) && !e.only) {
       this.events.onSkip(e);
       return;
     }
-    const s = gt(e.id);
-    if (n && !e.only && !s) {
+    const i = bt(e.id);
+    if (n && !e.only && !i) {
       this.events.onSkip(e);
       return;
     }
     this.events.onStart?.(e);
-    const i = ht(e.parent);
+    const o = wt(e.parent);
     try {
-      for (const _ of i.before) await _();
+      for (const l of o.before) await l();
       e.logs = [], await e.handler(), this.events.onPass(e);
-    } catch (_) {
-      this.events.onFail(e, _);
+    } catch (l) {
+      this.events.onFail(e, l);
     } finally {
-      for (const _ of i.after) await _();
+      for (const l of o.after) await l();
     }
   }
 }
-window.__testRunner = Pe;
-const mt = "1.3.3", yt = () => typeof window < "u" ? (window.__TWD_MOCK_STATE__ || (window.__TWD_MOCK_STATE__ = {
+window.__testRunner = Ue;
+const kt = "1.4.0", St = () => typeof window < "u" ? (window.__TWD_MOCK_STATE__ || (window.__TWD_MOCK_STATE__ = {
   rules: []
 }), window.__TWD_MOCK_STATE__) : {
   rules: []
-}, vt = yt(), Be = vt.rules, bt = async (t) => {
+}, xt = St(), Fe = xt.rules, Tt = async (t) => {
   if ("serviceWorker" in navigator) {
     const e = t ?? "/mock-sw.js";
-    await navigator.serviceWorker.register(`${e}?v=${mt}`), navigator.serviceWorker.controller || await new Promise((n) => {
+    await navigator.serviceWorker.register(`${e}?v=${kt}`), navigator.serviceWorker.controller || await new Promise((n) => {
       navigator.serviceWorker.addEventListener("controllerchange", n, { once: !0 });
     }), navigator.serviceWorker.addEventListener("message", (n) => {
       if (n.data?.type === "EXECUTED") {
-        const { alias: r, request: s } = n.data, i = Be.find((_) => _.alias === r);
-        i && (i.executed = !0, i.request = s);
+        const { alias: r, request: i } = n.data, o = Fe.find((l) => l.alias === r);
+        o && (o.executed = !0, o.request = i);
       }
     });
   }
-}, kt = () => Be, wt = () => /* @__PURE__ */ c(V, { className: "lucide-wifi-pen-icon lucide-wifi-pen", dataTestId: "wifi-pen-icon", children: [
-  /* @__PURE__ */ c("path", { d: "M2 8.82a15 15 0 0 1 20 0" }),
-  /* @__PURE__ */ c("path", { d: "M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" }),
-  /* @__PURE__ */ c("path", { d: "M5 12.859a10 10 0 0 1 10.5-2.222" }),
-  /* @__PURE__ */ c("path", { d: "M8.5 16.429a5 5 0 0 1 3-1.406" })
-] }), xt = () => {
-  const t = kt(), e = t.filter((r) => r.executed);
-  return /* @__PURE__ */ c(
+}, Rt = () => Fe, Ct = () => /* @__PURE__ */ f(K, { className: "lucide-wifi-pen-icon lucide-wifi-pen", dataTestId: "wifi-pen-icon", children: [
+  /* @__PURE__ */ f("path", { d: "M2 8.82a15 15 0 0 1 20 0" }),
+  /* @__PURE__ */ f("path", { d: "M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" }),
+  /* @__PURE__ */ f("path", { d: "M5 12.859a10 10 0 0 1 10.5-2.222" }),
+  /* @__PURE__ */ f("path", { d: "M8.5 16.429a5 5 0 0 1 3-1.406" })
+] }), $t = () => {
+  const t = Rt(), e = t.filter((r) => r.executed);
+  return /* @__PURE__ */ f(
     "button",
     {
       onClick: () => {
@@ -788,104 +935,120 @@ const mt = "1.3.3", yt = () => typeof window < "u" ? (window.__TWD_MOCK_STATE__
       },
       "aria-label": "View mock rules details in console",
       style: {
-        background: "#f8fafc",
-        border: "1px solid #cbd5e1",
-        borderRadius: "6px",
-        padding: "8px 12px",
+        background: "var(--twd-button-secondary)",
+        border: "1px solid var(--twd-button-border)",
+        borderRadius: "var(--twd-border-radius-lg)",
+        padding: "var(--twd-spacing-md) var(--twd-spacing-lg)",
         cursor: "pointer",
-        fontSize: "12px",
-        color: "#475569",
+        fontSize: "var(--twd-font-size-sm)",
+        color: "var(--twd-button-secondary-text)",
         display: "flex",
         alignItems: "center",
-        gap: "8px",
+        gap: "var(--twd-spacing-md)",
         marginBottom: "10px",
         width: "100%",
         textAlign: "left",
-        transition: "all 0.2s ease",
-        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+        transition: "all var(--twd-animation-duration) ease",
+        boxShadow: "var(--twd-shadow-sm)"
       },
       children: [
-        /* @__PURE__ */ c(wt, {}),
-        /* @__PURE__ */ c("span", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ f(Ct, {}),
+        /* @__PURE__ */ f("span", { style: { flex: 1 }, children: [
           "Rules: ",
           e.length,
           "/",
           t.length,
           " triggered"
         ] }),
-        /* @__PURE__ */ c("span", { style: {
-          fontSize: "10px",
-          color: "#1E293B",
-          fontWeight: "500"
+        /* @__PURE__ */ f("span", { style: {
+          fontSize: "var(--twd-font-size-xs)",
+          color: "var(--twd-text)",
+          fontWeight: "var(--twd-font-weight-medium)"
         }, children: "View rules in console" })
       ]
     }
   );
-}, St = {
-  left: { left: 0, borderRight: "1px solid #e5e7eb" },
-  right: { right: 0, borderLeft: "1px solid #e5e7eb" }
-}, Tt = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', Et = ({ open: t, position: e = "left" }) => {
-  const [n, r] = Z(0), [s, i] = Z(t);
-  ft({ isOpen: s, position: e });
-  const _ = new Pe({
-    onStart: (o) => {
-      o.status = "running", r((f) => f + 1);
+}, Et = {
+  left: { left: 0, borderRight: "1px solid var(--twd-border)" },
+  right: { right: 0, borderLeft: "1px solid var(--twd-border)" }
+}, It = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', Wt = (t) => sessionStorage.getItem("twd-sidebar-open") ? sessionStorage.getItem("twd-sidebar-open") === "true" : t, Lt = ({ open: t, position: e = "left" }) => {
+  const [n, r] = ee(0), [i, o] = ee(Wt(t));
+  vt({ isOpen: i, position: e });
+  const l = new Ue({
+    onStart: (c) => {
+      c.status = "running", r((u) => u + 1);
     },
-    onPass: (o) => {
-      o.status = "pass", r((f) => f + 1);
+    onPass: (c) => {
+      c.status = "pass", r((u) => u + 1);
     },
-    onFail: (o, f) => {
-      o.status = "fail", console.error("Test failed:", o.name, f), o.logs.push(`Test failed: ${f.message}`), r((d) => d + 1);
+    onFail: (c, u) => {
+      c.status = "fail", console.error("Test failed:", c.name, u), c.logs.push(`Test failed: ${u.message}`), r((g) => g + 1);
     },
-    onSkip: (o) => {
-      o.status = "skip", r((f) => f + 1);
+    onSkip: (c) => {
+      c.status = "skip", r((u) => u + 1);
     }
-  }), l = async () => {
-    await _.runAll();
-  }, u = async (o) => {
-    const f = Array.from(w.values()).filter((d) => d.type === "test").find((d) => d.id === o);
-    f && await _.runSingle(f.id);
-  }, a = Array.from(w.values());
-  if (!s)
-    return /* @__PURE__ */ c(dt, { position: e, setOpen: i });
-  const p = a.filter((o) => o.type === "test").length;
-  return /* @__PURE__ */ c(
+  }), _ = (c) => {
+    o(c), sessionStorage.setItem("twd-sidebar-open", c.toString());
+  }, p = async () => {
+    sessionStorage.removeItem("twd-last-run-test-name"), await l.runAll();
+  }, a = async (c) => {
+    const u = Array.from(S.values()).filter((g) => g.type === "test").find((g) => g.id === c);
+    u && (sessionStorage.setItem("twd-last-run-test-name", u.name), await l.runSingle(u.id));
+  }, d = Array.from(S.values());
+  if (!i)
+    return /* @__PURE__ */ f(mt, { position: e, setOpen: _ });
+  const s = d.filter((c) => c.type === "test").length;
+  return /* @__PURE__ */ f(
     "div",
     {
       style: {
-        fontFamily: Tt,
+        fontFamily: It,
         position: "fixed",
         top: 0,
         bottom: 0,
-        width: "280px",
-        background: "#f9fafb",
-        fontSize: "14px",
+        width: "var(--twd-sidebar-width)",
+        background: "var(--twd-background)",
+        fontSize: "var(--twd-font-size-md)",
         overflowY: "auto",
-        boxShadow: "2px 0 6px rgba(0,0,0,0.1)",
+        boxShadow: "var(--twd-shadow)",
         textAlign: "left",
-        zIndex: 1e3,
-        ...St[e]
+        zIndex: "var(--twd-z-index-sidebar)",
+        ...Et[e]
       },
       "data-testid": "twd-sidebar",
+      role: "complementary",
+      "aria-label": "Test While Developing sidebar",
       children: [
-        /* @__PURE__ */ c("div", { style: { padding: "8px", background: "#f9fafb", position: "sticky", top: 0, zIndex: 1e3, borderBottom: "1px solid #e5e7eb" }, children: [
-          /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "14px" }, children: [
-            /* @__PURE__ */ c(
+        /* @__PURE__ */ f("div", { style: {
+          padding: "var(--twd-spacing-md)",
+          background: "var(--twd-background)",
+          position: "sticky",
+          top: 0,
+          zIndex: "var(--twd-z-index-sticky)",
+          borderBottom: "1px solid var(--twd-border)"
+        }, children: [
+          /* @__PURE__ */ f("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "var(--twd-spacing-xl)"
+          }, children: [
+            /* @__PURE__ */ f(
               "button",
               {
-                onClick: l,
+                onClick: p,
                 style: {
-                  background: "#1A6EF4",
-                  color: "white",
-                  padding: "4px 8px",
-                  borderRadius: "4px",
+                  background: "var(--twd-button-primary)",
+                  color: "var(--twd-button-primary-text)",
+                  padding: "var(--twd-spacing-xs) var(--twd-spacing-md)",
+                  borderRadius: "var(--twd-border-radius)",
                   border: "none",
                   cursor: "pointer"
                 },
                 children: "Run All"
               }
             ),
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ f(
               "button",
               {
                 "aria-label": "Close sidebar",
@@ -893,65 +1056,72 @@ const mt = "1.3.3", yt = () => typeof window < "u" ? (window.__TWD_MOCK_STATE__
                   background: "transparent",
                   border: "none",
                   cursor: "pointer",
-                  fontSize: "14px",
+                  fontSize: "var(--twd-font-size-md)",
                   paddingRight: "0",
                   paddingLeft: "0"
                 },
-                onClick: () => i(!1),
+                onClick: () => _(!1),
                 children: "✖"
               }
             )
           ] }),
-          /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "14px", color: "#6b7280", marginBottom: "10px" }, children: [
-            /* @__PURE__ */ c("span", { style: { color: "#374151" }, children: [
+          /* @__PURE__ */ f("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            fontSize: "var(--twd-font-size-md)",
+            color: "var(--twd-text-secondary)",
+            marginBottom: "10px"
+          }, children: [
+            /* @__PURE__ */ f("span", { style: { color: "var(--twd-text)" }, children: [
               "Total: ",
-              p
+              s
             ] }),
-            /* @__PURE__ */ c("div", { style: { display: "flex", gap: "4px" }, children: [
-              /* @__PURE__ */ c("span", { style: { color: "#00c951" }, children: [
+            /* @__PURE__ */ f("div", { style: { display: "flex", gap: "var(--twd-spacing-xs)" }, children: [
+              /* @__PURE__ */ f("span", { style: { color: "var(--twd-success)" }, children: [
                 "✓ ",
-                a.filter((o) => o.status === "pass").length
+                d.filter((c) => c.status === "pass").length
               ] }),
-              /* @__PURE__ */ c("span", { style: { color: "#fb2c36" }, children: [
+              /* @__PURE__ */ f("span", { style: { color: "var(--twd-error)" }, children: [
                 "✗ ",
-                a.filter((o) => o.status === "fail").length
+                d.filter((c) => c.status === "fail").length
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ c(xt, {})
+          /* @__PURE__ */ f($t, {})
         ] }),
-        /* @__PURE__ */ c("div", { style: { padding: "8px" }, children: /* @__PURE__ */ c(
-          ct,
+        /* @__PURE__ */ f("div", { style: { padding: "var(--twd-spacing-md)" }, children: /* @__PURE__ */ f(
+          ht,
           {
-            tests: a.map((o) => ({
-              name: o.name,
-              depth: o.depth,
-              status: o.status,
-              logs: o.logs,
-              id: o.id,
-              parent: o.parent,
-              type: o.type,
-              only: o.only,
-              skip: o.skip
+            tests: d.map((c) => ({
+              name: c.name,
+              depth: c.depth,
+              status: c.status,
+              logs: c.logs,
+              id: c.id,
+              parent: c.parent,
+              type: c.type,
+              only: c.only,
+              skip: c.skip
             })),
-            runTest: u
+            runTest: a
           }
         ) })
       ]
     }
   );
-}, Rt = (t) => ({
+}, Ht = (t) => ({
   render: (e) => {
-    Ve(e, t);
+    Ye(e, t);
   }
-}), Ct = (t, e) => {
-  const { open: n = !0, position: r = "left", serviceWorker: s = !0, serviceWorkerUrl: i = "/mock-sw.js" } = e || {};
-  Ge(t, /* @__PURE__ */ c(Et, { open: n, position: r }), Rt), s && bt(i).then(() => {
+}), At = (t, e) => {
+  const { open: n = !0, position: r = "left", serviceWorker: i = !0, serviceWorkerUrl: o = "/mock-sw.js", theme: l } = e || {};
+  tt(t, /* @__PURE__ */ f(Lt, { open: n, position: r }), Ht, l), i && Tt(o).then(() => {
     console.log("Request mocking initialized");
   }).catch((_) => {
     console.error("Error initializing request mocking:", _);
   });
 };
 export {
-  Ct as initTWD
+  At as initTWD
 };