@serve.zone/catalog 2.1.0 → 2.3.0

package/dist_watch/bundle.js

@@ -1397,7 +1397,7 @@ var init_Subscription = __esm({
         this._finalizers = null;
       }
       Subscription2.prototype.unsubscribe = function() {
-        var e_1, _a38, e_2, _b;
+        var e_1, _a44, e_2, _b;
         var errors;
         if (!this.closed) {
           this.closed = true;
@@ -1414,7 +1414,7 @@ var init_Subscription = __esm({
                 e_1 = { error: e_1_1 };
               } finally {
                 try {
-                  if (_parentage_1_1 && !_parentage_1_1.done && (_a38 = _parentage_1.return)) _a38.call(_parentage_1);
+                  if (_parentage_1_1 && !_parentage_1_1.done && (_a44 = _parentage_1.return)) _a44.call(_parentage_1);
                 } finally {
                   if (e_1) throw e_1.error;
                 }
@@ -1464,7 +1464,7 @@ var init_Subscription = __esm({
         }
       };
       Subscription2.prototype.add = function(teardown) {
-        var _a38;
+        var _a44;
         if (teardown && teardown !== this) {
           if (this.closed) {
             execFinalizer(teardown);
@@ -1475,7 +1475,7 @@ var init_Subscription = __esm({
               }
               teardown._addParent(this);
             }
-            (this._finalizers = (_a38 = this._finalizers) !== null && _a38 !== void 0 ? _a38 : []).push(teardown);
+            (this._finalizers = (_a44 = this._finalizers) !== null && _a44 !== void 0 ? _a44 : []).push(teardown);
           }
         }
       };
@@ -1611,7 +1611,7 @@ function errorContext(cb) {
     }
     cb();
     if (isRoot) {
-      var _a38 = context, errorThrown = _a38.errorThrown, error = _a38.error;
+      var _a44 = context, errorThrown = _a44.errorThrown, error = _a44.error;
       context = null;
       if (errorThrown) {
         throw error;
@@ -1862,8 +1862,8 @@ var init_pipe = __esm({
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/Observable.js
 function getPromiseCtor(promiseCtor) {
-  var _a38;
-  return (_a38 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a38 !== void 0 ? _a38 : Promise;
+  var _a44;
+  return (_a44 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a44 !== void 0 ? _a44 : Promise;
 }
 function isObserver(value2) {
   return value2 && isFunction(value2.next) && isFunction(value2.error) && isFunction(value2.complete);
@@ -1897,7 +1897,7 @@ var init_Observable = __esm({
         var _this = this;
         var subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
         errorContext(function() {
-          var _a38 = _this, operator = _a38.operator, source = _a38.source;
+          var _a44 = _this, operator = _a44.operator, source = _a44.source;
           subscriber.add(operator ? operator.call(subscriber, source) : source ? _this._subscribe(subscriber) : _this._trySubscribe(subscriber));
         });
         return subscriber;
@@ -1929,8 +1929,8 @@ var init_Observable = __esm({
         });
       };
       Observable2.prototype._subscribe = function(subscriber) {
-        var _a38;
-        return (_a38 = this.source) === null || _a38 === void 0 ? void 0 : _a38.subscribe(subscriber);
+        var _a44;
+        return (_a44 = this.source) === null || _a44 === void 0 ? void 0 : _a44.subscribe(subscriber);
       };
       Observable2.prototype[observable] = function() {
         return this;
@@ -2031,11 +2031,11 @@ var init_OperatorSubscriber = __esm({
         return _this;
       }
       OperatorSubscriber2.prototype.unsubscribe = function() {
-        var _a38;
+        var _a44;
         if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
           var closed_1 = this.closed;
           _super.prototype.unsubscribe.call(this);
-          !closed_1 && ((_a38 = this.onFinalize) === null || _a38 === void 0 ? void 0 : _a38.call(this));
+          !closed_1 && ((_a44 = this.onFinalize) === null || _a44 === void 0 ? void 0 : _a44.call(this));
         }
       };
       return OperatorSubscriber2;
@@ -2291,7 +2291,7 @@ var init_Subject = __esm({
       Subject2.prototype.next = function(value2) {
         var _this = this;
         errorContext(function() {
-          var e_1, _a38;
+          var e_1, _a44;
           _this._throwIfClosed();
           if (!_this.isStopped) {
             if (!_this.currentObservers) {
@@ -2306,7 +2306,7 @@ var init_Subject = __esm({
               e_1 = { error: e_1_1 };
             } finally {
               try {
-                if (_c && !_c.done && (_a38 = _b.return)) _a38.call(_b);
+                if (_c && !_c.done && (_a44 = _b.return)) _a44.call(_b);
               } finally {
                 if (e_1) throw e_1.error;
               }
@@ -2347,8 +2347,8 @@ var init_Subject = __esm({
       };
       Object.defineProperty(Subject2.prototype, "observed", {
         get: function() {
-          var _a38;
-          return ((_a38 = this.observers) === null || _a38 === void 0 ? void 0 : _a38.length) > 0;
+          var _a44;
+          return ((_a44 = this.observers) === null || _a44 === void 0 ? void 0 : _a44.length) > 0;
         },
         enumerable: false,
         configurable: true
@@ -2364,7 +2364,7 @@ var init_Subject = __esm({
       };
       Subject2.prototype._innerSubscribe = function(subscriber) {
         var _this = this;
-        var _a38 = this, hasError = _a38.hasError, isStopped = _a38.isStopped, observers = _a38.observers;
+        var _a44 = this, hasError = _a44.hasError, isStopped = _a44.isStopped, observers = _a44.observers;
         if (hasError || isStopped) {
           return EMPTY_SUBSCRIPTION;
         }
@@ -2376,7 +2376,7 @@ var init_Subject = __esm({
         });
       };
       Subject2.prototype._checkFinalizedStatuses = function(subscriber) {
-        var _a38 = this, hasError = _a38.hasError, thrownError = _a38.thrownError, isStopped = _a38.isStopped;
+        var _a44 = this, hasError = _a44.hasError, thrownError = _a44.thrownError, isStopped = _a44.isStopped;
         if (hasError) {
           subscriber.error(thrownError);
         } else if (isStopped) {
@@ -2402,20 +2402,20 @@ var init_Subject = __esm({
         return _this;
       }
       AnonymousSubject2.prototype.next = function(value2) {
-        var _a38, _b;
-        (_b = (_a38 = this.destination) === null || _a38 === void 0 ? void 0 : _a38.next) === null || _b === void 0 ? void 0 : _b.call(_a38, value2);
+        var _a44, _b;
+        (_b = (_a44 = this.destination) === null || _a44 === void 0 ? void 0 : _a44.next) === null || _b === void 0 ? void 0 : _b.call(_a44, value2);
       };
       AnonymousSubject2.prototype.error = function(err) {
-        var _a38, _b;
-        (_b = (_a38 = this.destination) === null || _a38 === void 0 ? void 0 : _a38.error) === null || _b === void 0 ? void 0 : _b.call(_a38, err);
+        var _a44, _b;
+        (_b = (_a44 = this.destination) === null || _a44 === void 0 ? void 0 : _a44.error) === null || _b === void 0 ? void 0 : _b.call(_a44, err);
       };
       AnonymousSubject2.prototype.complete = function() {
-        var _a38, _b;
-        (_b = (_a38 = this.destination) === null || _a38 === void 0 ? void 0 : _a38.complete) === null || _b === void 0 ? void 0 : _b.call(_a38);
+        var _a44, _b;
+        (_b = (_a44 = this.destination) === null || _a44 === void 0 ? void 0 : _a44.complete) === null || _b === void 0 ? void 0 : _b.call(_a44);
       };
       AnonymousSubject2.prototype._subscribe = function(subscriber) {
-        var _a38, _b;
-        return (_b = (_a38 = this.source) === null || _a38 === void 0 ? void 0 : _a38.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
+        var _a44, _b;
+        return (_b = (_a44 = this.source) === null || _a44 === void 0 ? void 0 : _a44.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
       };
       return AnonymousSubject2;
     })(Subject);
@@ -2448,7 +2448,7 @@ var init_BehaviorSubject = __esm({
         return subscription;
       };
       BehaviorSubject2.prototype.getValue = function() {
-        var _a38 = this, hasError = _a38.hasError, thrownError = _a38.thrownError, _value2 = _a38._value;
+        var _a44 = this, hasError = _a44.hasError, thrownError = _a44.thrownError, _value2 = _a44._value;
         if (hasError) {
           throw thrownError;
         }
@@ -2507,7 +2507,7 @@ var init_ReplaySubject = __esm({
         return _this;
       }
       ReplaySubject2.prototype.next = function(value2) {
-        var _a38 = this, isStopped = _a38.isStopped, _buffer = _a38._buffer, _infiniteTimeWindow = _a38._infiniteTimeWindow, _timestampProvider = _a38._timestampProvider, _windowTime = _a38._windowTime;
+        var _a44 = this, isStopped = _a44.isStopped, _buffer = _a44._buffer, _infiniteTimeWindow = _a44._infiniteTimeWindow, _timestampProvider = _a44._timestampProvider, _windowTime = _a44._windowTime;
         if (!isStopped) {
           _buffer.push(value2);
           !_infiniteTimeWindow && _buffer.push(_timestampProvider.now() + _windowTime);
@@ -2519,7 +2519,7 @@ var init_ReplaySubject = __esm({
         this._throwIfClosed();
         this._trimBuffer();
         var subscription = this._innerSubscribe(subscriber);
-        var _a38 = this, _infiniteTimeWindow = _a38._infiniteTimeWindow, _buffer = _a38._buffer;
+        var _a44 = this, _infiniteTimeWindow = _a44._infiniteTimeWindow, _buffer = _a44._buffer;
         var copy = _buffer.slice();
         for (var i11 = 0; i11 < copy.length && !subscriber.closed; i11 += _infiniteTimeWindow ? 1 : 2) {
           subscriber.next(copy[i11]);
@@ -2528,7 +2528,7 @@ var init_ReplaySubject = __esm({
         return subscription;
       };
       ReplaySubject2.prototype._trimBuffer = function() {
-        var _a38 = this, _bufferSize = _a38._bufferSize, _timestampProvider = _a38._timestampProvider, _buffer = _a38._buffer, _infiniteTimeWindow = _a38._infiniteTimeWindow;
+        var _a44 = this, _bufferSize = _a44._bufferSize, _timestampProvider = _a44._timestampProvider, _buffer = _a44._buffer, _infiniteTimeWindow = _a44._infiniteTimeWindow;
         var adjustedBufferSize = (_infiniteTimeWindow ? 1 : 2) * _bufferSize;
         _bufferSize < Infinity && adjustedBufferSize < _buffer.length && _buffer.splice(0, _buffer.length - adjustedBufferSize);
         if (!_infiniteTimeWindow) {
@@ -2561,7 +2561,7 @@ var init_AsyncSubject = __esm({
         return _this;
       }
       AsyncSubject2.prototype._checkFinalizedStatuses = function(subscriber) {
-        var _a38 = this, hasError = _a38.hasError, _hasValue = _a38._hasValue, _value2 = _a38._value, thrownError = _a38.thrownError, isStopped = _a38.isStopped, _isComplete = _a38._isComplete;
+        var _a44 = this, hasError = _a44.hasError, _hasValue = _a44._hasValue, _value2 = _a44._value, thrownError = _a44.thrownError, isStopped = _a44.isStopped, _isComplete = _a44._isComplete;
         if (hasError) {
           subscriber.error(thrownError);
         } else if (isStopped || _isComplete) {
@@ -2576,7 +2576,7 @@ var init_AsyncSubject = __esm({
         }
       };
       AsyncSubject2.prototype.complete = function() {
-        var _a38 = this, _hasValue = _a38._hasValue, _value2 = _a38._value, _isComplete = _a38._isComplete;
+        var _a44 = this, _hasValue = _a44._hasValue, _value2 = _a44._value, _isComplete = _a44._isComplete;
         if (!_isComplete) {
           this._isComplete = true;
           _hasValue && _super.prototype.next.call(this, _value2);
@@ -2654,7 +2654,7 @@ var init_AsyncAction = __esm({
         return _this;
       }
       AsyncAction2.prototype.schedule = function(state, delay2) {
-        var _a38;
+        var _a44;
         if (delay2 === void 0) {
           delay2 = 0;
         }
@@ -2669,7 +2669,7 @@ var init_AsyncAction = __esm({
         }
         this.pending = true;
         this.delay = delay2;
-        this.id = (_a38 = this.id) !== null && _a38 !== void 0 ? _a38 : this.requestAsyncId(scheduler, this.id, delay2);
+        this.id = (_a44 = this.id) !== null && _a44 !== void 0 ? _a44 : this.requestAsyncId(scheduler, this.id, delay2);
         return this;
       };
       AsyncAction2.prototype.requestAsyncId = function(scheduler, _id, delay2) {
@@ -2718,7 +2718,7 @@ var init_AsyncAction = __esm({
       };
       AsyncAction2.prototype.unsubscribe = function() {
         if (!this.closed) {
-          var _a38 = this, id = _a38.id, scheduler = _a38.scheduler;
+          var _a44 = this, id = _a44.id, scheduler = _a44.scheduler;
           var actions = scheduler.actions;
           this.work = this.state = this.scheduler = null;
           this.pending = false;
@@ -2823,7 +2823,7 @@ var init_AsapAction = __esm({
         return scheduler._scheduled || (scheduler._scheduled = immediateProvider.setImmediate(scheduler.flush.bind(scheduler, void 0)));
       };
       AsapAction2.prototype.recycleAsyncId = function(scheduler, id, delay2) {
-        var _a38;
+        var _a44;
         if (delay2 === void 0) {
           delay2 = 0;
         }
@@ -2831,7 +2831,7 @@ var init_AsapAction = __esm({
           return _super.prototype.recycleAsyncId.call(this, scheduler, id, delay2);
         }
         var actions = scheduler.actions;
-        if (id != null && ((_a38 = actions[actions.length - 1]) === null || _a38 === void 0 ? void 0 : _a38.id) !== id) {
+        if (id != null && ((_a44 = actions[actions.length - 1]) === null || _a44 === void 0 ? void 0 : _a44.id) !== id) {
           immediateProvider.clearImmediate(id);
           if (scheduler._scheduled === id) {
             scheduler._scheduled = void 0;
@@ -3069,7 +3069,7 @@ var init_AnimationFrameAction = __esm({
         }));
       };
       AnimationFrameAction2.prototype.recycleAsyncId = function(scheduler, id, delay2) {
-        var _a38;
+        var _a44;
         if (delay2 === void 0) {
           delay2 = 0;
         }
@@ -3077,7 +3077,7 @@ var init_AnimationFrameAction = __esm({
           return _super.prototype.recycleAsyncId.call(this, scheduler, id, delay2);
         }
         var actions = scheduler.actions;
-        if (id != null && id === scheduler._scheduled && ((_a38 = actions[actions.length - 1]) === null || _a38 === void 0 ? void 0 : _a38.id) !== id) {
+        if (id != null && id === scheduler._scheduled && ((_a44 = actions[actions.length - 1]) === null || _a44 === void 0 ? void 0 : _a44.id) !== id) {
           animationFrameProvider.cancelAnimationFrame(id);
           scheduler._scheduled = void 0;
         }
@@ -3166,7 +3166,7 @@ var init_VirtualTimeScheduler = __esm({
         return _this;
       }
       VirtualTimeScheduler2.prototype.flush = function() {
-        var _a38 = this, actions = _a38.actions, maxFrames = _a38.maxFrames;
+        var _a44 = this, actions = _a44.actions, maxFrames = _a44.maxFrames;
         var error;
         var action;
         while ((action = actions[0]) && action.delay <= maxFrames) {
@@ -3386,7 +3386,7 @@ var init_isIterable = __esm({
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/util/isReadableStreamLike.js
 function readableStreamLikeToAsyncGenerator(readableStream) {
   return __asyncGenerator(this, arguments, function readableStreamLikeToAsyncGenerator_1() {
-    var reader, _a38, value2, done;
+    var reader, _a44, value2, done;
     return __generator(this, function(_b) {
       switch (_b.label) {
         case 0:
@@ -3399,7 +3399,7 @@ function readableStreamLikeToAsyncGenerator(readableStream) {
           if (false) return [3, 8];
           return [4, __await(reader.read())];
         case 3:
-          _a38 = _b.sent(), value2 = _a38.value, done = _a38.done;
+          _a44 = _b.sent(), value2 = _a44.value, done = _a44.done;
           if (!done) return [3, 5];
           return [4, __await(void 0)];
         case 4:
@@ -3490,7 +3490,7 @@ function fromPromise(promise) {
 }
 function fromIterable(iterable) {
   return new Observable(function(subscriber) {
-    var e_1, _a38;
+    var e_1, _a44;
     try {
       for (var iterable_1 = __values(iterable), iterable_1_1 = iterable_1.next(); !iterable_1_1.done; iterable_1_1 = iterable_1.next()) {
         var value2 = iterable_1_1.value;
@@ -3503,7 +3503,7 @@ function fromIterable(iterable) {
       e_1 = { error: e_1_1 };
     } finally {
       try {
-        if (iterable_1_1 && !iterable_1_1.done && (_a38 = iterable_1.return)) _a38.call(iterable_1);
+        if (iterable_1_1 && !iterable_1_1.done && (_a44 = iterable_1.return)) _a44.call(iterable_1);
       } finally {
         if (e_1) throw e_1.error;
       }
@@ -3523,7 +3523,7 @@ function fromReadableStreamLike(readableStream) {
 }
 function process2(asyncIterable, subscriber) {
   var asyncIterable_1, asyncIterable_1_1;
-  var e_2, _a38;
+  var e_2, _a44;
   return __awaiter(this, void 0, void 0, function() {
     var value2, e_2_1;
     return __generator(this, function(_b) {
@@ -3552,8 +3552,8 @@ function process2(asyncIterable, subscriber) {
           return [3, 11];
         case 6:
           _b.trys.push([6, , 9, 10]);
-          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a38 = asyncIterable_1.return))) return [3, 8];
-          return [4, _a38.call(asyncIterable_1)];
+          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a44 = asyncIterable_1.return))) return [3, 8];
+          return [4, _a44.call(asyncIterable_1)];
         case 7:
           _b.sent();
           _b.label = 8;
@@ -3713,11 +3713,11 @@ function scheduleIterable(input, scheduler) {
     executeSchedule(subscriber, scheduler, function() {
       iterator2 = input[iterator]();
       executeSchedule(subscriber, scheduler, function() {
-        var _a38;
+        var _a44;
         var value2;
         var done;
         try {
-          _a38 = iterator2.next(), value2 = _a38.value, done = _a38.done;
+          _a44 = iterator2.next(), value2 = _a44.value, done = _a44.done;
         } catch (err) {
           subscriber.error(err);
           return;
@@ -3871,12 +3871,12 @@ var init_throwError = __esm({
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/Notification.js
 function observeNotification(notification, observer) {
-  var _a38, _b, _c;
+  var _a44, _b, _c;
   var _d = notification, kind = _d.kind, value2 = _d.value, error = _d.error;
   if (typeof kind !== "string") {
     throw new TypeError('Invalid notification, missing "kind"');
   }
-  kind === "N" ? (_a38 = observer.next) === null || _a38 === void 0 ? void 0 : _a38.call(observer, value2) : kind === "E" ? (_b = observer.error) === null || _b === void 0 ? void 0 : _b.call(observer, error) : (_c = observer.complete) === null || _c === void 0 ? void 0 : _c.call(observer);
+  kind === "N" ? (_a44 = observer.next) === null || _a44 === void 0 ? void 0 : _a44.call(observer, value2) : kind === "E" ? (_b = observer.error) === null || _b === void 0 ? void 0 : _b.call(observer, error) : (_c = observer.complete) === null || _c === void 0 ? void 0 : _c.call(observer);
 }
 var NotificationKind, Notification;
 var init_Notification = __esm({
@@ -3901,15 +3901,15 @@ var init_Notification = __esm({
         return observeNotification(this, observer);
       };
       Notification2.prototype.do = function(nextHandler, errorHandler, completeHandler) {
-        var _a38 = this, kind = _a38.kind, value2 = _a38.value, error = _a38.error;
+        var _a44 = this, kind = _a44.kind, value2 = _a44.value, error = _a44.error;
         return kind === "N" ? nextHandler === null || nextHandler === void 0 ? void 0 : nextHandler(value2) : kind === "E" ? errorHandler === null || errorHandler === void 0 ? void 0 : errorHandler(error) : completeHandler === null || completeHandler === void 0 ? void 0 : completeHandler();
       };
       Notification2.prototype.accept = function(nextOrObserver, error, complete) {
-        var _a38;
-        return isFunction((_a38 = nextOrObserver) === null || _a38 === void 0 ? void 0 : _a38.next) ? this.observe(nextOrObserver) : this.do(nextOrObserver, error, complete);
+        var _a44;
+        return isFunction((_a44 = nextOrObserver) === null || _a44 === void 0 ? void 0 : _a44.next) ? this.observe(nextOrObserver) : this.do(nextOrObserver, error, complete);
       };
       Notification2.prototype.toObservable = function() {
-        var _a38 = this, kind = _a38.kind, value2 = _a38.value, error = _a38.error;
+        var _a44 = this, kind = _a44.kind, value2 = _a44.value, error = _a44.error;
         var result = kind === "N" ? of(value2) : kind === "E" ? throwError(function() {
           return error;
         }) : kind === "C" ? EMPTY : 0;
@@ -4022,7 +4022,7 @@ var init_isDate = __esm({
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/timeout.js
 function timeout(config3, schedulerArg) {
-  var _a38 = isValidDate(config3) ? { first: config3 } : typeof config3 === "number" ? { each: config3 } : config3, first2 = _a38.first, each = _a38.each, _b = _a38.with, _with = _b === void 0 ? timeoutErrorFactory : _b, _c = _a38.scheduler, scheduler = _c === void 0 ? schedulerArg !== null && schedulerArg !== void 0 ? schedulerArg : asyncScheduler : _c, _d = _a38.meta, meta = _d === void 0 ? null : _d;
+  var _a44 = isValidDate(config3) ? { first: config3 } : typeof config3 === "number" ? { each: config3 } : config3, first2 = _a44.first, each = _a44.each, _b = _a44.with, _with = _b === void 0 ? timeoutErrorFactory : _b, _c = _a44.scheduler, scheduler = _c === void 0 ? schedulerArg !== null && schedulerArg !== void 0 ? schedulerArg : asyncScheduler : _c, _d = _a44.meta, meta = _d === void 0 ? null : _d;
   if (first2 == null && each == null) {
     throw new TypeError("No timeout provided.");
   }
@@ -4300,11 +4300,11 @@ function fromEvent(target, eventName, options, resultSelector) {
   if (resultSelector) {
     return fromEvent(target, eventName, options).pipe(mapOneOrManyArgs(resultSelector));
   }
-  var _a38 = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
+  var _a44 = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
     return function(handler2) {
       return target[methodName](eventName, handler2, options);
     };
-  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add3 = _a38[0], remove2 = _a38[1];
+  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add3 = _a44[0], remove2 = _a44[1];
   if (!add3) {
     if (isArrayLike(target)) {
       return mergeMap(function(subTarget) {
@@ -4562,7 +4562,7 @@ function bufferCount(bufferSize, startBufferEvery) {
     var buffers = [];
     var count2 = 0;
     source.subscribe(createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a38, e_2, _b;
+      var e_1, _a44, e_2, _b;
       var toEmit = null;
       if (count2++ % startBufferEvery === 0) {
         buffers.push([]);
@@ -4580,7 +4580,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (buffers_1_1 && !buffers_1_1.done && (_a38 = buffers_1.return)) _a38.call(buffers_1);
+          if (buffers_1_1 && !buffers_1_1.done && (_a44 = buffers_1.return)) _a44.call(buffers_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -4603,7 +4603,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         }
       }
     }, function() {
-      var e_3, _a38;
+      var e_3, _a44;
       try {
         for (var buffers_2 = __values(buffers), buffers_2_1 = buffers_2.next(); !buffers_2_1.done; buffers_2_1 = buffers_2.next()) {
           var buffer2 = buffers_2_1.value;
@@ -4613,7 +4613,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_3 = { error: e_3_1 };
       } finally {
         try {
-          if (buffers_2_1 && !buffers_2_1.done && (_a38 = buffers_2.return)) _a38.call(buffers_2);
+          if (buffers_2_1 && !buffers_2_1.done && (_a44 = buffers_2.return)) _a44.call(buffers_2);
         } finally {
           if (e_3) throw e_3.error;
         }
@@ -4635,12 +4635,12 @@ var init_bufferCount = __esm({
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/bufferTime.js
 function bufferTime(bufferTimeSpan) {
-  var _a38, _b;
+  var _a44, _b;
   var otherArgs = [];
   for (var _i = 1; _i < arguments.length; _i++) {
     otherArgs[_i - 1] = arguments[_i];
   }
-  var scheduler = (_a38 = popScheduler(otherArgs)) !== null && _a38 !== void 0 ? _a38 : asyncScheduler;
+  var scheduler = (_a44 = popScheduler(otherArgs)) !== null && _a44 !== void 0 ? _a44 : asyncScheduler;
   var bufferCreationInterval = (_b = otherArgs[0]) !== null && _b !== void 0 ? _b : null;
   var maxBufferSize = otherArgs[1] || Infinity;
   return operate(function(source, subscriber) {
@@ -4675,7 +4675,7 @@ function bufferTime(bufferTimeSpan) {
     }
     startBuffer();
     var bufferTimeSubscriber = createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a39;
+      var e_1, _a45;
       var recordsCopy = bufferRecords.slice();
       try {
         for (var recordsCopy_1 = __values(recordsCopy), recordsCopy_1_1 = recordsCopy_1.next(); !recordsCopy_1_1.done; recordsCopy_1_1 = recordsCopy_1.next()) {
@@ -4688,7 +4688,7 @@ function bufferTime(bufferTimeSpan) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a39 = recordsCopy_1.return)) _a39.call(recordsCopy_1);
+          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a45 = recordsCopy_1.return)) _a45.call(recordsCopy_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -5323,7 +5323,7 @@ var init_tap = __esm({
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/throttle.js
 function throttle(durationSelector, config3) {
   return operate(function(source, subscriber) {
-    var _a38 = config3 !== null && config3 !== void 0 ? config3 : {}, _b = _a38.leading, leading = _b === void 0 ? true : _b, _c = _a38.trailing, trailing = _c === void 0 ? false : _c;
+    var _a44 = config3 !== null && config3 !== void 0 ? config3 : {}, _b = _a44.leading, leading = _b === void 0 ? true : _b, _c = _a44.trailing, trailing = _c === void 0 ? false : _c;
     var hasValue = false;
     var sendValue = null;
     var throttled = null;
@@ -50059,7 +50059,7 @@ var require_sweet_scroll = __commonJS({
               hash: null
             };
             this.loop = function(time) {
-              var _a38 = _this, $el = _a38.$el, ctx = _a38.ctx;
+              var _a44 = _this, $el = _a44.$el, ctx = _a44.ctx;
               if (!ctx.start) {
                 ctx.start = time;
               }
@@ -50154,7 +50154,7 @@ var require_sweet_scroll = __commonJS({
             if (!canUseDOM) {
               return;
             }
-            var _a38 = this, $el = _a38.$el, ctx = _a38.ctx, currentOptions = _a38.opts;
+            var _a44 = this, $el = _a44.$el, ctx = _a44.ctx, currentOptions = _a44.opts;
             var $trigger = ctx.$trigger;
             var opts = __assign2({}, currentOptions, options || {});
             var optOffset = opts.offset, vertical = opts.vertical, horizontal = opts.horizontal;
@@ -50221,7 +50221,7 @@ var require_sweet_scroll = __commonJS({
             if (gotoEnd === void 0) {
               gotoEnd = false;
             }
-            var _a38 = this, $el = _a38.$el, ctx = _a38.ctx;
+            var _a44 = this, $el = _a44.$el, ctx = _a44.ctx;
             var pos = ctx.pos;
             if (!$el || !ctx.progress) {
               return;
@@ -50277,7 +50277,7 @@ var require_sweet_scroll = __commonJS({
             ctx.id = SweetScroll4.raf(this.loop);
           };
           SweetScroll4.prototype.complete = function() {
-            var _a38 = this, $el = _a38.$el, ctx = _a38.ctx;
+            var _a44 = this, $el = _a44.$el, ctx = _a44.ctx;
             var hash = ctx.hash, cancel = ctx.cancel, opts = ctx.opts, pos = ctx.pos, $trigger = ctx.$trigger;
             if (!$el || !opts) {
               return;
@@ -50303,18 +50303,18 @@ var require_sweet_scroll = __commonJS({
             for (var _i = 2; _i < arguments.length; _i++) {
               args[_i - 2] = arguments[_i];
             }
-            var _a38;
+            var _a44;
             var callback = options[type5];
             var callbackResult;
             var methodResult;
             if (isFunction2(callback)) {
               callbackResult = callback.apply(this, args.concat([this]));
             }
-            methodResult = (_a38 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a38, args);
+            methodResult = (_a44 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a44, args);
             return callbackResult !== void 0 ? callbackResult : methodResult;
           };
           SweetScroll4.prototype.bind = function(click, stop) {
-            var _a38 = this, $el = _a38.$el, opts = _a38.ctx.opts;
+            var _a44 = this, $el = _a44.$el, opts = _a44.ctx.opts;
             if ($el) {
               if (click) {
                 addEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -50325,7 +50325,7 @@ var require_sweet_scroll = __commonJS({
             }
           };
           SweetScroll4.prototype.unbind = function(click, stop) {
-            var _a38 = this, $el = _a38.$el, opts = _a38.ctx.opts;
+            var _a44 = this, $el = _a44.$el, opts = _a44.ctx.opts;
             if ($el) {
               if (click) {
                 removeEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -96699,14 +96699,18 @@ __export(elements_exports, {
   SzCertificatesCard: () => SzCertificatesCard,
   SzDashboardView: () => SzDashboardView,
   SzDemoViewDashboard: () => SzDemoViewDashboard,
+  SzDemoViewMta: () => SzDemoViewMta,
   SzDemoViewNetwork: () => SzDemoViewNetwork,
   SzDemoViewRegistries: () => SzDemoViewRegistries,
+  SzDemoViewRoutes: () => SzDemoViewRoutes,
   SzDemoViewServices: () => SzDemoViewServices,
   SzDemoViewSettings: () => SzDemoViewSettings,
   SzDemoViewTokens: () => SzDemoViewTokens,
   SzDnsSslCard: () => SzDnsSslCard,
   SzDomainDetailView: () => SzDomainDetailView,
   SzLoginView: () => SzLoginView,
+  SzMtaDetailView: () => SzMtaDetailView,
+  SzMtaListView: () => SzMtaListView,
   SzNetworkDnsView: () => SzNetworkDnsView,
   SzNetworkDomainsView: () => SzNetworkDomainsView,
   SzNetworkProxyView: () => SzNetworkProxyView,
@@ -96717,6 +96721,8 @@ __export(elements_exports, {
   SzRegistryExternalView: () => SzRegistryExternalView,
   SzResourceUsageCard: () => SzResourceUsageCard,
   SzReverseProxyCard: () => SzReverseProxyCard,
+  SzRouteCard: () => SzRouteCard,
+  SzRouteListView: () => SzRouteListView,
   SzServiceCreateView: () => SzServiceCreateView,
   SzServiceDetailView: () => SzServiceDetailView,
   SzServicesBackupsView: () => SzServicesBackupsView,
@@ -104470,11 +104476,2013 @@ __publicField(SzDomainDetailView, "styles", [
 ]);
 __runInitializers(_init27, 1, SzDomainDetailView);
 
+// ts_web/elements/sz-mta-list-view.ts
+init_dist_ts29();
+var _directionFilter_dec, _statusFilter_dec, _searchQuery_dec, _emails_dec, _a28, _SzMtaListView_decorators, _init28, _emails, _searchQuery, _statusFilter, _directionFilter;
+_SzMtaListView_decorators = [t4("sz-mta-list-view")];
+var SzMtaListView = class extends (_a28 = DeesElement, _emails_dec = [n5({ type: Array })], _searchQuery_dec = [r5()], _statusFilter_dec = [r5()], _directionFilter_dec = [r5()], _a28) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _emails, __runInitializers(_init28, 8, this, [])), __runInitializers(_init28, 11, this);
+    __privateAdd(this, _searchQuery, __runInitializers(_init28, 12, this, "")), __runInitializers(_init28, 15, this);
+    __privateAdd(this, _statusFilter, __runInitializers(_init28, 16, this, "all")), __runInitializers(_init28, 19, this);
+    __privateAdd(this, _directionFilter, __runInitializers(_init28, 20, this, "all")), __runInitializers(_init28, 23, this);
+  }
+  get filteredEmails() {
+    return this.emails.filter((email) => {
+      if (this.statusFilter !== "all" && email.status !== this.statusFilter) return false;
+      if (this.directionFilter !== "all" && email.direction !== this.directionFilter) return false;
+      if (this.searchQuery) {
+        const q = this.searchQuery.toLowerCase();
+        return email.from.toLowerCase().includes(q) || email.to.toLowerCase().includes(q) || email.subject.toLowerCase().includes(q) || email.messageId.toLowerCase().includes(q);
+      }
+      return true;
+    });
+  }
+  render() {
+    const filtered = this.filteredEmails;
+    return b2`
+      <div class="filter-bar">
+        <input
+          class="search-input"
+          type="text"
+          placeholder="Search by from, to, subject, or message ID..."
+          .value=${this.searchQuery}
+          @input=${(e11) => {
+      this.searchQuery = e11.target.value;
+    }}
+        />
+        <div class="chip-group">
+          ${["all", "inbound", "outbound"].map((dir) => b2`
+            <button
+              class="chip ${this.directionFilter === dir ? "active" : ""}"
+              @click=${() => {
+      this.directionFilter = dir;
+    }}
+            >${dir === "all" ? "All" : dir === "inbound" ? "Inbound" : "Outbound"}</button>
+          `)}
+        </div>
+        <div class="chip-group">
+          ${["all", "delivered", "bounced", "rejected", "deferred", "pending"].map((s9) => b2`
+            <button
+              class="chip ${this.statusFilter === s9 ? "active" : ""}"
+              @click=${() => {
+      this.statusFilter = s9;
+    }}
+            >${s9 === "all" ? "All" : s9.charAt(0).toUpperCase() + s9.slice(1)}</button>
+          `)}
+        </div>
+      </div>
+
+      <div class="results-count">Showing ${filtered.length} of ${this.emails.length} emails</div>
+
+      <div class="table-container">
+        <div class="table-header">
+          <span></span>
+          <span>Status</span>
+          <span>From</span>
+          <span>To</span>
+          <span>Subject</span>
+          <span>Timestamp</span>
+        </div>
+        ${filtered.length > 0 ? filtered.map((email) => b2`
+          <div class="table-row" @click=${() => this.handleEmailClick(email)}>
+            <span class="direction-icon ${email.direction}">
+              ${email.direction === "inbound" ? b2`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>` : b2`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>`}
+            </span>
+            <span><span class="status-badge ${email.status}">${email.status}</span></span>
+            <span class="email-from" title="${email.from}">${email.from}</span>
+            <span class="email-to" title="${email.to}">${email.to}</span>
+            <span class="email-subject" title="${email.subject}">${email.subject}</span>
+            <span class="email-timestamp">${email.timestamp}</span>
+          </div>
+        `) : b2`
+          <div class="empty-state">No emails found</div>
+        `}
+      </div>
+    `;
+  }
+  handleEmailClick(email) {
+    this.dispatchEvent(new CustomEvent("email-click", { detail: email, bubbles: true, composed: true }));
+  }
+};
+_init28 = __decoratorStart(_a28);
+_emails = new WeakMap();
+_searchQuery = new WeakMap();
+_statusFilter = new WeakMap();
+_directionFilter = new WeakMap();
+__decorateElement(_init28, 4, "emails", _emails_dec, SzMtaListView, _emails);
+__decorateElement(_init28, 4, "searchQuery", _searchQuery_dec, SzMtaListView, _searchQuery);
+__decorateElement(_init28, 4, "statusFilter", _statusFilter_dec, SzMtaListView, _statusFilter);
+__decorateElement(_init28, 4, "directionFilter", _directionFilter_dec, SzMtaListView, _directionFilter);
+SzMtaListView = __decorateElement(_init28, 0, "SzMtaListView", _SzMtaListView_decorators, SzMtaListView);
+__publicField(SzMtaListView, "demo", () => b2`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-mta-list-view
+        .emails=${[
+  { id: "1", direction: "outbound", status: "delivered", from: "noreply@serve.zone", to: "user@example.com", subject: "Welcome to serve.zone", timestamp: "2024-01-15 14:30:22", messageId: "<abc123@serve.zone>", size: "12.4 KB" },
+  { id: "2", direction: "outbound", status: "bounced", from: "alerts@serve.zone", to: "invalid@nowhere.test", subject: "Service Alert: CPU Usage High", timestamp: "2024-01-15 14:28:10", messageId: "<def456@serve.zone>", size: "8.2 KB" },
+  { id: "3", direction: "inbound", status: "delivered", from: "support@customer.com", to: "admin@serve.zone", subject: "Re: Infrastructure Review", timestamp: "2024-01-15 14:25:00", messageId: "<ghi789@customer.com>", size: "24.1 KB" },
+  { id: "4", direction: "outbound", status: "rejected", from: "billing@serve.zone", to: "blocked@spam-domain.test", subject: "Invoice #2024-001", timestamp: "2024-01-15 14:20:45", messageId: "<jkl012@serve.zone>", size: "45.6 KB" },
+  { id: "5", direction: "outbound", status: "deferred", from: "noreply@serve.zone", to: "slow@remote-server.test", subject: "Password Reset Request", timestamp: "2024-01-15 14:15:30", messageId: "<mno345@serve.zone>", size: "6.8 KB" },
+  { id: "6", direction: "inbound", status: "delivered", from: "ci@github.com", to: "devops@serve.zone", subject: "Build #4521 passed", timestamp: "2024-01-15 14:10:00", messageId: "<pqr678@github.com>", size: "15.3 KB" },
+  { id: "7", direction: "outbound", status: "pending", from: "reports@serve.zone", to: "team@serve.zone", subject: "Weekly Infrastructure Report", timestamp: "2024-01-15 14:05:00", messageId: "<stu901@serve.zone>", size: "102.7 KB" }
+]}
+      ></sz-mta-list-view>
+    </div>
+  `);
+__publicField(SzMtaListView, "demoGroups", ["MTA"]);
+__publicField(SzMtaListView, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+      }
+
+      .filter-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+
+      .search-input {
+        flex: 1;
+        min-width: 200px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 6px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        outline: none;
+        transition: border-color 200ms ease;
+      }
+
+      .search-input::placeholder {
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+      }
+
+      .search-input:focus {
+        border-color: ${cssManager.bdTheme("#2563eb", "#3b82f6")};
+      }
+
+      .chip-group {
+        display: flex;
+        gap: 4px;
+      }
+
+      .chip {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        cursor: pointer;
+        transition: all 200ms ease;
+        white-space: nowrap;
+      }
+
+      .chip:hover {
+        background: ${cssManager.bdTheme("#f4f4f5", "#18181b")};
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .chip.active {
+        background: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        color: ${cssManager.bdTheme("#fafafa", "#18181b")};
+        border-color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .results-count {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin-bottom: 12px;
+      }
+
+      .table-container {
+        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .table-header {
+        display: grid;
+        grid-template-columns: 40px 90px 1.5fr 1.5fr 2fr 140px;
+        gap: 16px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme("#f4f4f5", "#18181b")};
+        border-bottom: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+      }
+
+      .table-row {
+        display: grid;
+        grid-template-columns: 40px 90px 1.5fr 1.5fr 2fr 140px;
+        gap: 16px;
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme("#f4f4f5", "#27272a")};
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        align-items: center;
+        cursor: pointer;
+        transition: background 200ms ease;
+      }
+
+      .table-row:last-child {
+        border-bottom: none;
+      }
+
+      .table-row:hover {
+        background: ${cssManager.bdTheme("#f4f4f5", "#18181b")};
+      }
+
+      .direction-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .direction-icon.inbound {
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .direction-icon.outbound {
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .status-badge.delivered {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .status-badge.bounced,
+      .status-badge.rejected {
+        background: ${cssManager.bdTheme("#fee2e2", "rgba(239, 68, 68, 0.2)")};
+        color: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      .status-badge.deferred {
+        background: ${cssManager.bdTheme("#fef9c3", "rgba(250, 204, 21, 0.2)")};
+        color: ${cssManager.bdTheme("#ca8a04", "#facc15")};
+      }
+
+      .status-badge.pending {
+        background: ${cssManager.bdTheme("#dbeafe", "rgba(59, 130, 246, 0.2)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .email-from,
+      .email-to {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .email-subject {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 500;
+      }
+
+      .email-timestamp {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        white-space: nowrap;
+      }
+
+      .empty-state {
+        padding: 48px 24px;
+        text-align: center;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+      }
+    `
+]);
+__runInitializers(_init28, 1, SzMtaListView);
+
+// ts_web/elements/sz-mta-detail-view.ts
+init_dist_ts29();
+var _email_dec, _a29, _SzMtaDetailView_decorators, _init29, _email;
+_SzMtaDetailView_decorators = [t4("sz-mta-detail-view")];
+var SzMtaDetailView = class extends (_a29 = DeesElement, _email_dec = [n5({ type: Object })], _a29) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _email, __runInitializers(_init29, 8, this, null)), __runInitializers(_init29, 11, this);
+  }
+  render() {
+    if (!this.email) {
+      return b2`<div class="no-email">No email selected</div>`;
+    }
+    const email = this.email;
+    return b2`
+      <div class="header">
+        <div class="back-link" @click=${() => this.handleBack()}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+          Back to Emails
+        </div>
+      </div>
+
+      <div class="email-header">
+        <h1 class="email-subject">${email.subject}</h1>
+        <div class="badge-group">
+          <span class="status-badge ${email.status}">${email.status}</span>
+          <span class="direction-badge ${email.direction}">${email.direction}</span>
+        </div>
+      </div>
+
+      <div class="content">
+        <div class="main-content">
+          <!-- Email Metadata -->
+          <div class="card">
+            <div class="card-header">
+              <div class="card-title">Email Metadata</div>
+            </div>
+            <div class="card-content">
+              <div class="detail-list">
+                <div class="detail-item">
+                  <span class="detail-label">From</span>
+                  <span class="detail-value">${email.from}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">To</span>
+                  <span class="detail-value">${email.toList.join(", ")}</span>
+                </div>
+                ${email.cc && email.cc.length > 0 ? b2`
+                  <div class="detail-item">
+                    <span class="detail-label">CC</span>
+                    <span class="detail-value">${email.cc.join(", ")}</span>
+                  </div>
+                ` : ""}
+                <div class="detail-item">
+                  <span class="detail-label">Subject</span>
+                  <span class="detail-value">${email.subject}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Date</span>
+                  <span class="detail-value">${email.timestamp}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Message ID</span>
+                  <span class="detail-value">${email.messageId}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Size</span>
+                  <span class="detail-value">${email.size}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- SMTP Transaction Log -->
+          <div class="card">
+            <div class="card-header">
+              <div>
+                <div class="card-title">SMTP Transaction Log</div>
+                <div class="smtp-header-subtitle">
+                  <span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
+                  <span>${email.direction === "outbound" ? `${email.connectionInfo.sourceHostname} \u2192 ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}` : `${email.connectionInfo.sourceIp} \u2192 ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`}</span>
+                </div>
+              </div>
+              <button class="smtp-copy-button" @click=${() => this.copySmtpLog()}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+                Copy Log
+              </button>
+            </div>
+            ${this.renderSmtpLog(email)}
+          </div>
+
+          <!-- Email Body -->
+          <div class="card">
+            <div class="card-header">
+              <div>
+                <div class="card-title">Email Body (Escaped)</div>
+                <div class="card-subtitle">Raw content — HTML is not rendered</div>
+              </div>
+            </div>
+            <pre class="email-body-container">${email.body}</pre>
+          </div>
+        </div>
+
+        <div class="sidebar">
+          <!-- Connection Info -->
+          <div class="card">
+            <div class="card-header">
+              <div class="card-title">Connection Info</div>
+            </div>
+            <div class="card-content">
+              <div class="detail-list">
+                <div class="detail-item">
+                  <span class="detail-label">Source IP</span>
+                  <span class="detail-value">${email.connectionInfo.sourceIp}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Source Hostname</span>
+                  <span class="detail-value">${email.connectionInfo.sourceHostname}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Destination</span>
+                  <span class="detail-value">${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">TLS</span>
+                  <span class="detail-value">
+                    ${email.connectionInfo.tlsVersion ? b2`<span class="tls-badge">${email.connectionInfo.tlsVersion}</span>` : "None"}
+                  </span>
+                </div>
+                ${email.connectionInfo.tlsCipher ? b2`
+                  <div class="detail-item">
+                    <span class="detail-label">Cipher</span>
+                    <span class="detail-value">${email.connectionInfo.tlsCipher}</span>
+                  </div>
+                ` : ""}
+                <div class="detail-item">
+                  <span class="detail-label">Authenticated</span>
+                  <span class="detail-value">${email.connectionInfo.authenticated ? "Yes" : "No"}</span>
+                </div>
+                ${email.connectionInfo.authenticated ? b2`
+                  <div class="detail-item">
+                    <span class="detail-label">Auth Method</span>
+                    <span class="detail-value">${email.connectionInfo.authMethod}</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">Auth User</span>
+                    <span class="detail-value">${email.connectionInfo.authUser}</span>
+                  </div>
+                ` : ""}
+              </div>
+            </div>
+          </div>
+
+          <!-- Authentication Results -->
+          <div class="card">
+            <div class="card-header">
+              <div class="card-title">Authentication Results</div>
+            </div>
+            <div class="card-content">
+              <div class="auth-row">
+                <div>
+                  <span class="auth-label">SPF</span>
+                  <span class="auth-domain">${email.authenticationResults.spfDomain}</span>
+                </div>
+                <span class="auth-badge ${email.authenticationResults.spf}">${email.authenticationResults.spf}</span>
+              </div>
+              <div class="auth-row">
+                <div>
+                  <span class="auth-label">DKIM</span>
+                  <span class="auth-domain">${email.authenticationResults.dkimDomain}</span>
+                </div>
+                <span class="auth-badge ${email.authenticationResults.dkim}">${email.authenticationResults.dkim}</span>
+              </div>
+              <div class="auth-row">
+                <div>
+                  <span class="auth-label">DMARC</span>
+                  <span class="auth-domain">policy: ${email.authenticationResults.dmarcPolicy}</span>
+                </div>
+                <span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Rejection Details (conditional) -->
+          ${email.status === "rejected" || email.status === "bounced" ? b2`
+            <div class="card rejection-card">
+              <div class="card-header">
+                <div class="card-title">Rejection Details</div>
+              </div>
+              <div class="card-content">
+                ${email.rejectionReason ? b2`
+                  <div class="rejection-label">Rejection Reason</div>
+                  <div class="rejection-text">${email.rejectionReason}</div>
+                ` : ""}
+                ${email.bounceMessage ? b2`
+                  <div class="rejection-label">Bounce Message</div>
+                  <div class="rejection-text">${email.bounceMessage}</div>
+                ` : ""}
+              </div>
+            </div>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  getResponseCodeBadgeClass(code4) {
+    if (code4 >= 500) return "code-5xx";
+    if (code4 >= 400) return "code-4xx";
+    if (code4 >= 300) return "code-3xx";
+    return "code-2xx";
+  }
+  getSmtpPhases(log) {
+    const phases = [];
+    let currentPhase = "";
+    let ehloCount = 0;
+    for (const entry of log) {
+      const cmd = entry.command.toUpperCase();
+      let phase = currentPhase;
+      if (entry.direction === "client") {
+        if (cmd.startsWith("EHLO") || cmd.startsWith("HELO")) {
+          ehloCount++;
+          if (ehloCount === 1) {
+            phase = "connection";
+          } else {
+            phase = "post-tls";
+          }
+        } else if (cmd === "STARTTLS") {
+          phase = "tls";
+        } else if (cmd.startsWith("AUTH")) {
+          phase = "auth";
+        } else if (cmd.startsWith("MAIL FROM") || cmd.startsWith("RCPT TO") || cmd === "DATA" || cmd === ".") {
+          phase = "transfer";
+        } else if (cmd === "QUIT") {
+          phase = "closing";
+        }
+      }
+      if (entry.direction === "server" && phase === "") {
+        phase = currentPhase || "connection";
+      }
+      if (phase === "") phase = "connection";
+      if (phase !== currentPhase) {
+        currentPhase = phase;
+        const labels = {
+          "connection": "Connection",
+          "tls": "TLS Negotiation",
+          "post-tls": "Post-TLS Handshake",
+          "auth": "Authentication",
+          "transfer": "Mail Transfer",
+          "closing": "Closing"
+        };
+        phases.push({ phase, label: labels[phase] || phase, entries: [] });
+      }
+      if (phases.length === 0) {
+        phases.push({ phase: "connection", label: "Connection", entries: [] });
+      }
+      phases[phases.length - 1].entries.push(entry);
+    }
+    return phases;
+  }
+  renderSmtpLog(email) {
+    const phases = this.getSmtpPhases(email.smtpLog);
+    return b2`
+      <div class="smtp-log-container">
+        ${phases.map((phase) => b2`
+          <div class="smtp-phase-separator">
+            <div class="smtp-phase-line"></div>
+            <span class="smtp-phase-label">${phase.label}</span>
+            <div class="smtp-phase-line"></div>
+          </div>
+          ${phase.entries.map((entry) => b2`
+            <div class="smtp-bubble ${entry.direction}">
+              ${entry.direction === "server" && entry.responseCode ? b2`
+                <span class="response-code-badge ${this.getResponseCodeBadgeClass(entry.responseCode)}">${entry.responseCode}</span>
+              ` : ""}
+              <div class="smtp-bubble-command">${entry.command}</div>
+              <div class="smtp-bubble-meta">
+                <span>${entry.timestamp}</span>
+                <span>·</span>
+                <span class="smtp-direction-tag ${entry.direction}">${entry.direction === "client" ? "Client" : "Server"}</span>
+              </div>
+            </div>
+          `)}
+        `)}
+      </div>
+    `;
+  }
+  copySmtpLog() {
+    if (!this.email) return;
+    const text9 = this.email.smtpLog.map((e11) => `[${e11.timestamp}] ${e11.direction === "client" ? "C:" : "S:"} ${e11.command}`).join("\n");
+    navigator.clipboard.writeText(text9);
+  }
+  handleBack() {
+    this.dispatchEvent(new CustomEvent("back", { bubbles: true, composed: true }));
+  }
+};
+_init29 = __decoratorStart(_a29);
+_email = new WeakMap();
+__decorateElement(_init29, 4, "email", _email_dec, SzMtaDetailView, _email);
+SzMtaDetailView = __decorateElement(_init29, 0, "SzMtaDetailView", _SzMtaDetailView_decorators, SzMtaDetailView);
+__publicField(SzMtaDetailView, "demo", () => b2`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-mta-detail-view
+        .email=${{
+  id: "1",
+  direction: "outbound",
+  status: "delivered",
+  from: "noreply@serve.zone",
+  to: "user@example.com",
+  toList: ["user@example.com"],
+  subject: "Welcome to serve.zone",
+  timestamp: "2024-01-15 14:30:22",
+  messageId: "<abc123@serve.zone>",
+  size: "12.4 KB",
+  smtpLog: [
+    { timestamp: "14:30:20", direction: "client", command: "EHLO mail.serve.zone" },
+    { timestamp: "14:30:20", direction: "server", command: "250-mail.example.com Hello", responseCode: 250 },
+    { timestamp: "14:30:20", direction: "server", command: "250-STARTTLS", responseCode: 250 },
+    { timestamp: "14:30:20", direction: "server", command: "250 SIZE 52428800", responseCode: 250 },
+    { timestamp: "14:30:20", direction: "client", command: "STARTTLS" },
+    { timestamp: "14:30:21", direction: "server", command: "220 Ready to start TLS", responseCode: 220 },
+    { timestamp: "14:30:21", direction: "client", command: "EHLO mail.serve.zone" },
+    { timestamp: "14:30:21", direction: "server", command: "250-mail.example.com Hello", responseCode: 250 },
+    { timestamp: "14:30:21", direction: "server", command: "250-AUTH PLAIN LOGIN", responseCode: 250 },
+    { timestamp: "14:30:21", direction: "server", command: "250 SIZE 52428800", responseCode: 250 },
+    { timestamp: "14:30:21", direction: "client", command: "AUTH PLAIN AHVzZXIAcGFzc3dvcmQ=" },
+    { timestamp: "14:30:21", direction: "server", command: "235 2.7.0 Authentication successful", responseCode: 235 },
+    { timestamp: "14:30:21", direction: "client", command: "MAIL FROM:<noreply@serve.zone>" },
+    { timestamp: "14:30:21", direction: "server", command: "250 OK", responseCode: 250 },
+    { timestamp: "14:30:21", direction: "client", command: "RCPT TO:<user@example.com>" },
+    { timestamp: "14:30:21", direction: "server", command: "250 Accepted", responseCode: 250 },
+    { timestamp: "14:30:22", direction: "client", command: "DATA" },
+    { timestamp: "14:30:22", direction: "server", command: '354 Enter message, ending with "." on a line by itself', responseCode: 354 },
+    { timestamp: "14:30:22", direction: "client", command: "." },
+    { timestamp: "14:30:22", direction: "server", command: "250 OK id=1pQ2rS-0003Ab-C4", responseCode: 250 },
+    { timestamp: "14:30:22", direction: "client", command: "QUIT" },
+    { timestamp: "14:30:22", direction: "server", command: "221 mail.example.com closing connection", responseCode: 221 }
+  ],
+  connectionInfo: {
+    sourceIp: "10.0.1.50",
+    sourceHostname: "mail.serve.zone",
+    destinationIp: "93.184.216.34",
+    destinationPort: 25,
+    tlsVersion: "TLSv1.3",
+    tlsCipher: "TLS_AES_256_GCM_SHA384",
+    authenticated: true,
+    authMethod: "PLAIN",
+    authUser: "noreply@serve.zone"
+  },
+  authenticationResults: {
+    spf: "pass",
+    spfDomain: "serve.zone",
+    dkim: "pass",
+    dkimDomain: "serve.zone",
+    dmarc: "pass",
+    dmarcPolicy: "reject"
+  },
+  headers: {
+    "From": "noreply@serve.zone",
+    "To": "user@example.com",
+    "Subject": "Welcome to serve.zone",
+    "Date": "Mon, 15 Jan 2024 14:30:22 +0000",
+    "MIME-Version": "1.0",
+    "Content-Type": "text/html; charset=UTF-8"
+  },
+  body: '<html>\\n<head><title>Welcome</title></head>\\n<body>\\n  <h1>Welcome to serve.zone!</h1>\\n  <p>Your account has been created successfully.</p>\\n  <a href="https://serve.zone/dashboard">Go to Dashboard</a>\\n</body>\\n</html>'
+}}
+      ></sz-mta-detail-view>
+    </div>
+  `);
+__publicField(SzMtaDetailView, "demoGroups", ["MTA"]);
+__publicField(SzMtaDetailView, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        cursor: pointer;
+        transition: color 200ms ease;
+      }
+
+      .back-link:hover {
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .email-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 24px;
+      }
+
+      .email-subject {
+        font-size: 24px;
+        font-weight: 700;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        margin: 0;
+      }
+
+      .badge-group {
+        display: flex;
+        gap: 8px;
+      }
+
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 12px;
+        border-radius: 9999px;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .status-badge.delivered {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .status-badge.bounced,
+      .status-badge.rejected {
+        background: ${cssManager.bdTheme("#fee2e2", "rgba(239, 68, 68, 0.2)")};
+        color: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      .status-badge.deferred {
+        background: ${cssManager.bdTheme("#fef9c3", "rgba(250, 204, 21, 0.2)")};
+        color: ${cssManager.bdTheme("#ca8a04", "#facc15")};
+      }
+
+      .status-badge.pending {
+        background: ${cssManager.bdTheme("#dbeafe", "rgba(59, 130, 246, 0.2)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .direction-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 12px;
+        border-radius: 9999px;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .direction-badge.inbound {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .direction-badge.outbound {
+        background: ${cssManager.bdTheme("#dbeafe", "rgba(59, 130, 246, 0.2)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .content {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 24px;
+      }
+
+      @media (min-width: 1024px) {
+        .content {
+          grid-template-columns: 2fr 1fr;
+        }
+      }
+
+      .main-content {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+      }
+
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .card-subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin-top: 2px;
+      }
+
+      .card-content {
+        padding: 16px;
+      }
+
+      .detail-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .detail-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+
+      .detail-label {
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        flex-shrink: 0;
+      }
+
+      .detail-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        text-align: right;
+        word-break: break-all;
+      }
+
+      .smtp-log-container {
+        padding: 16px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        max-height: 500px;
+        overflow-y: auto;
+        background: ${cssManager.bdTheme("#fafafa", "#0a0a0a")};
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme("#d4d4d8", "#3f3f46")} transparent;
+      }
+
+      .smtp-log-container::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .smtp-log-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .smtp-log-container::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme("#d4d4d8", "#3f3f46")};
+        border-radius: 3px;
+      }
+
+      /* Phase separators */
+      .smtp-phase-separator {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 4px 0;
+        margin: 4px 0;
+      }
+
+      .smtp-phase-line {
+        flex: 1;
+        height: 1px;
+        background: ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+      }
+
+      .smtp-phase-label {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+        white-space: nowrap;
+      }
+
+      /* Chat bubbles */
+      .smtp-bubble {
+        border-radius: 8px;
+        padding: 10px 14px;
+        max-width: 70%;
+      }
+
+      .smtp-bubble.client {
+        align-self: flex-start;
+        background: ${cssManager.bdTheme("rgba(59, 130, 246, 0.08)", "rgba(59, 130, 246, 0.12)")};
+        border-left: 3px solid ${cssManager.bdTheme("#3b82f6", "#60a5fa")};
+        margin-right: auto;
+      }
+
+      .smtp-bubble.server {
+        align-self: flex-end;
+        background: ${cssManager.bdTheme("rgba(34, 197, 94, 0.06)", "rgba(34, 197, 94, 0.10)")};
+        border-right: 3px solid ${cssManager.bdTheme("#22c55e", "#4ade80")};
+        margin-left: auto;
+        text-align: right;
+      }
+
+      .smtp-bubble-command {
+        white-space: pre-wrap;
+        word-break: break-all;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .smtp-bubble-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 4px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+      }
+
+      .smtp-bubble.server .smtp-bubble-meta {
+        justify-content: flex-end;
+      }
+
+      .smtp-direction-tag {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+      }
+
+      .smtp-direction-tag.client {
+        color: ${cssManager.bdTheme("#3b82f6", "#60a5fa")};
+      }
+
+      .smtp-direction-tag.server {
+        color: ${cssManager.bdTheme("#22c55e", "#4ade80")};
+      }
+
+      /* Response code badges */
+      .response-code-badge {
+        display: inline-block;
+        padding: 1px 7px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 700;
+        margin-bottom: 4px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      }
+
+      .response-code-badge.code-2xx {
+        background: ${cssManager.bdTheme("rgba(34, 197, 94, 0.15)", "rgba(34, 197, 94, 0.25)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .response-code-badge.code-3xx {
+        background: ${cssManager.bdTheme("rgba(59, 130, 246, 0.15)", "rgba(59, 130, 246, 0.25)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .response-code-badge.code-4xx {
+        background: ${cssManager.bdTheme("rgba(250, 204, 21, 0.15)", "rgba(250, 204, 21, 0.25)")};
+        color: ${cssManager.bdTheme("#ca8a04", "#facc15")};
+      }
+
+      .response-code-badge.code-5xx {
+        background: ${cssManager.bdTheme("rgba(239, 68, 68, 0.15)", "rgba(239, 68, 68, 0.25)")};
+        color: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      /* Copy button */
+      .smtp-copy-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        border-radius: 6px;
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        background: transparent;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 150ms ease;
+      }
+
+      .smtp-copy-button:hover {
+        background: ${cssManager.bdTheme("#f4f4f5", "#27272a")};
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        border-color: ${cssManager.bdTheme("#d4d4d8", "#3f3f46")};
+      }
+
+      /* Header subtitle enhancements */
+      .smtp-header-subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin-top: 2px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+
+      .smtp-direction-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+      }
+
+      .smtp-direction-badge.inbound {
+        background: ${cssManager.bdTheme("rgba(34, 197, 94, 0.12)", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .smtp-direction-badge.outbound {
+        background: ${cssManager.bdTheme("rgba(59, 130, 246, 0.12)", "rgba(59, 130, 246, 0.2)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .email-body-container {
+        padding: 16px;
+        font-family: monospace;
+        font-size: 13px;
+        max-height: 500px;
+        overflow-y: auto;
+        background: ${cssManager.bdTheme("#fafafa", "#0a0a0a")};
+        white-space: pre-wrap;
+        word-break: break-all;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .tls-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .auth-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 0;
+        border-bottom: 1px solid ${cssManager.bdTheme("#f4f4f5", "#27272a")};
+      }
+
+      .auth-row:last-child {
+        border-bottom: none;
+      }
+
+      .auth-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .auth-domain {
+        font-size: 12px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin-left: 8px;
+      }
+
+      .auth-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .auth-badge.pass {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .auth-badge.fail {
+        background: ${cssManager.bdTheme("#fee2e2", "rgba(239, 68, 68, 0.2)")};
+        color: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      .auth-badge.softfail,
+      .auth-badge.neutral,
+      .auth-badge.none {
+        background: ${cssManager.bdTheme("#fef9c3", "rgba(250, 204, 21, 0.2)")};
+        color: ${cssManager.bdTheme("#ca8a04", "#facc15")};
+      }
+
+      .rejection-card {
+        border-color: ${cssManager.bdTheme("#fecaca", "rgba(239, 68, 68, 0.3)")};
+      }
+
+      .rejection-content {
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      .rejection-label {
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin-bottom: 4px;
+      }
+
+      .rejection-text {
+        font-family: monospace;
+        font-size: 13px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme("#fef2f2", "rgba(239, 68, 68, 0.1)")};
+        border-radius: 4px;
+        margin-bottom: 12px;
+        color: ${cssManager.bdTheme("#991b1b", "#fca5a5")};
+      }
+
+      .rejection-text:last-child {
+        margin-bottom: 0;
+      }
+
+      .no-email {
+        padding: 48px 24px;
+        text-align: center;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+      }
+    `
+]);
+__runInitializers(_init29, 1, SzMtaDetailView);
+
+// ts_web/elements/sz-route-card.ts
+init_dist_ts29();
+var _route_dec, _a30, _SzRouteCard_decorators, _init30, _route;
+function formatPorts(ports) {
+  if (typeof ports === "number") return String(ports);
+  if (Array.isArray(ports)) {
+    return ports.map((p7) => {
+      if (typeof p7 === "number") return String(p7);
+      return `${p7.from}\u2013${p7.to}`;
+    }).join(", ");
+  }
+  return String(ports);
+}
+function formatTargets(targets) {
+  const result = [];
+  for (const t9 of targets) {
+    const hosts = Array.isArray(t9.host) ? t9.host : [t9.host];
+    const portStr = t9.port === "preserve" ? "(preserve)" : String(t9.port);
+    for (const h9 of hosts) {
+      result.push(`${h9}:${portStr}`);
+    }
+  }
+  return result;
+}
+_SzRouteCard_decorators = [t4("sz-route-card")];
+var SzRouteCard = class extends (_a30 = DeesElement, _route_dec = [n5({ type: Object })], _a30) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _route, __runInitializers(_init30, 8, this, null)), __runInitializers(_init30, 11, this);
+  }
+  render() {
+    if (!this.route) {
+      return b2`<div class="card"><div class="no-route">No route data</div></div>`;
+    }
+    const r11 = this.route;
+    const isEnabled = r11.enabled !== false;
+    const match2 = r11.match;
+    const action = r11.action;
+    const security = r11.security;
+    return b2`
+      <div class="card">
+        <!-- Header -->
+        <div class="header">
+          <div class="header-left">
+            <span class="status-dot ${isEnabled ? "enabled" : "disabled"}"></span>
+            <span class="route-name">${r11.name || r11.id || "Unnamed Route"}</span>
+          </div>
+          <div class="header-badges">
+            <span class="badge ${action.type}">${action.type}</span>
+            <span class="badge ${isEnabled ? "enabled" : "disabled"}">${isEnabled ? "enabled" : "disabled"}</span>
+          </div>
+        </div>
+
+        ${r11.description ? b2`<div class="description">${r11.description}</div>` : ""}
+
+        <div class="meta-row">
+          ${r11.tags && r11.tags.length > 0 ? b2`<div class="tags">${r11.tags.map((t9) => b2`<span class="tag">${t9}</span>`)}</div>` : b2`<div></div>`}
+          ${r11.priority != null ? b2`<span class="priority">Priority: ${r11.priority}</span>` : ""}
+        </div>
+
+        <!-- Match Section -->
+        <div class="section match">
+          <div class="section-label">Match</div>
+          <div class="field-row">
+            <span class="field-key">Ports</span>
+            <span class="field-value mono">${formatPorts(match2.ports)}</span>
+          </div>
+          ${match2.domains ? b2`
+                <div class="field-row">
+                  <span class="field-key">Domains</span>
+                  <span class="field-value">${this.renderDomains(match2.domains)}</span>
+                </div>
+              ` : ""}
+          ${match2.path ? b2`
+                <div class="field-row">
+                  <span class="field-key">Path</span>
+                  <span class="field-value mono">${match2.path}</span>
+                </div>
+              ` : ""}
+          ${match2.protocol ? b2`
+                <div class="field-row">
+                  <span class="field-key">Protocol</span>
+                  <span class="field-value">
+                    <span class="protocol-badge ${match2.protocol}">${match2.protocol}</span>
+                  </span>
+                </div>
+              ` : ""}
+          ${match2.clientIp && match2.clientIp.length > 0 ? b2`
+                <div class="field-row">
+                  <span class="field-key">Client</span>
+                  <span class="field-value mono">${match2.clientIp.join(", ")}</span>
+                </div>
+              ` : ""}
+          ${match2.tlsVersion && match2.tlsVersion.length > 0 ? b2`
+                <div class="field-row">
+                  <span class="field-key">TLS Ver</span>
+                  <span class="field-value">${match2.tlsVersion.join(", ")}</span>
+                </div>
+              ` : ""}
+          ${match2.headers ? b2`
+                <div class="field-row">
+                  <span class="field-key">Headers</span>
+                  <span class="field-value">
+                    ${Object.entries(match2.headers).map(
+      ([k4, v5]) => b2`<span class="header-pair">${k4}=${v5}</span> `
+    )}
+                  </span>
+                </div>
+              ` : ""}
+        </div>
+
+        <!-- Action Section -->
+        <div class="section action">
+          <div class="section-label">Action</div>
+          ${action.targets && action.targets.length > 0 ? b2`
+                <div class="field-row">
+                  <span class="field-key">Targets</span>
+                  <span class="field-value mono">${formatTargets(action.targets).join(", ")}</span>
+                </div>
+              ` : ""}
+          ${action.tls ? b2`
+                <div class="field-row">
+                  <span class="field-key">TLS</span>
+                  <span class="field-value">
+                    ${action.tls.mode}
+                    ${action.tls.certificate ? action.tls.certificate === "auto" ? b2` <span class="tls-badge auto">auto cert</span>` : b2` <span class="tls-badge custom">custom cert</span>` : ""}
+                  </span>
+                </div>
+              ` : ""}
+          ${action.forwardingEngine ? b2`
+                <div class="field-row">
+                  <span class="field-key">Engine</span>
+                  <span class="field-value"><span class="engine-badge">${action.forwardingEngine}</span></span>
+                </div>
+              ` : ""}
+          ${action.loadBalancing ? b2`
+                <div class="field-row">
+                  <span class="field-key">LB</span>
+                  <span class="field-value">${action.loadBalancing.algorithm}</span>
+                </div>
+              ` : ""}
+          ${action.websocket?.enabled ? b2`
+                <div class="field-row">
+                  <span class="field-key">WS</span>
+                  <span class="field-value"><span class="badge enabled">enabled</span></span>
+                </div>
+              ` : ""}
+        </div>
+
+        <!-- Security Section -->
+        ${security ? b2`
+              <div class="section security">
+                <div class="section-label">Security</div>
+                ${security.ipAllowList && security.ipAllowList.length > 0 ? b2`
+                      <div class="field-row">
+                        <span class="field-key">Allow</span>
+                        <span class="field-value mono">${security.ipAllowList.join(", ")}</span>
+                      </div>
+                    ` : ""}
+                ${security.ipBlockList && security.ipBlockList.length > 0 ? b2`
+                      <div class="field-row">
+                        <span class="field-key">Block</span>
+                        <span class="field-value mono">${security.ipBlockList.join(", ")}</span>
+                      </div>
+                    ` : ""}
+                ${security.rateLimit?.enabled ? b2`
+                      <div class="field-row">
+                        <span class="field-key">Rate</span>
+                        <span class="field-value">${security.rateLimit.maxRequests} req / ${security.rateLimit.window}s</span>
+                      </div>
+                    ` : ""}
+                ${security.maxConnections ? b2`
+                      <div class="field-row">
+                        <span class="field-key">Max Conn</span>
+                        <span class="field-value">${security.maxConnections}</span>
+                      </div>
+                    ` : ""}
+              </div>
+            ` : ""}
+
+        <!-- Feature Icons Row -->
+        ${this.renderFeatures()}
+      </div>
+    `;
+  }
+  renderDomains(domains) {
+    const list5 = Array.isArray(domains) ? domains : [domains];
+    return b2`${list5.map(
+      (d6) => b2`<span class="domain-chip ${d6.includes("*") ? "glob" : ""}">${d6}</span>`
+    )}`;
+  }
+  renderFeatures() {
+    if (!this.route) return b2``;
+    const features = [];
+    const action = this.route.action;
+    const security = this.route.security;
+    const headers = this.route.headers;
+    if (action.tls) {
+      features.push(b2`<span class="feature"><span class="feature-icon">&#x1f512;</span>TLS</span>`);
+    }
+    if (action.websocket?.enabled) {
+      features.push(b2`<span class="feature"><span class="feature-icon">&#x2194;</span>WS</span>`);
+    }
+    if (action.loadBalancing) {
+      features.push(b2`<span class="feature"><span class="feature-icon">&#x2696;</span>LB</span>`);
+    }
+    if (security) {
+      features.push(b2`<span class="feature"><span class="feature-icon">&#x1f6e1;</span>Security</span>`);
+    }
+    if (headers) {
+      features.push(b2`<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
+    }
+    if (features.length === 0) return b2``;
+    return b2`<div class="features-row">${features}</div>`;
+  }
+};
+_init30 = __decoratorStart(_a30);
+_route = new WeakMap();
+__decorateElement(_init30, 4, "route", _route_dec, SzRouteCard, _route);
+SzRouteCard = __decorateElement(_init30, 0, "SzRouteCard", _SzRouteCard_decorators, SzRouteCard);
+__publicField(SzRouteCard, "demo", () => b2`
+    <div style="padding: 24px; max-width: 520px;">
+      <sz-route-card
+        .route=${{
+  name: "API Gateway",
+  description: "Main API gateway with TLS termination and load balancing",
+  enabled: true,
+  priority: 10,
+  tags: ["web", "api", "production"],
+  match: {
+    ports: [443, 8443],
+    domains: ["api.example.com", "*.api.serve.zone"],
+    path: "/api/*",
+    protocol: "http",
+    clientIp: ["10.0.0.0/8"]
+  },
+  action: {
+    type: "forward",
+    targets: [
+      { host: ["10.0.0.1", "10.0.0.2"], port: 8080 }
+    ],
+    tls: { mode: "terminate", certificate: "auto" },
+    websocket: { enabled: true },
+    loadBalancing: { algorithm: "round-robin" },
+    forwardingEngine: "nftables"
+  },
+  security: {
+    ipAllowList: ["10.0.0.0/8"],
+    ipBlockList: ["192.168.100.0/24"],
+    rateLimit: { enabled: true, maxRequests: 100, window: 60 },
+    maxConnections: 1e3
+  }
+}}
+      ></sz-route-card>
+    </div>
+  `);
+__publicField(SzRouteCard, "demoGroups", ["Routes"]);
+__publicField(SzRouteCard, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 8px;
+        padding: 20px;
+        transition: border-color 200ms ease, box-shadow 200ms ease;
+      }
+
+      .card:hover {
+        border-color: ${cssManager.bdTheme("#d4d4d8", "#3f3f46")};
+        box-shadow: 0 2px 8px ${cssManager.bdTheme("rgba(0,0,0,0.06)", "rgba(0,0,0,0.2)")};
+      }
+
+      /* Header */
+      .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 4px;
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-dot.enabled {
+        background: ${cssManager.bdTheme("#22c55e", "#22c55e")};
+        box-shadow: 0 0 6px ${cssManager.bdTheme("rgba(34,197,94,0.4)", "rgba(34,197,94,0.3)")};
+      }
+
+      .status-dot.disabled {
+        background: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+      }
+
+      .route-name {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .header-badges {
+        display: flex;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      .badge.forward {
+        background: ${cssManager.bdTheme("#dbeafe", "rgba(59, 130, 246, 0.2)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .badge.socket-handler {
+        background: ${cssManager.bdTheme("#ede9fe", "rgba(139, 92, 246, 0.2)")};
+        color: ${cssManager.bdTheme("#7c3aed", "#a78bfa")};
+      }
+
+      .badge.enabled {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .badge.disabled {
+        background: ${cssManager.bdTheme("#f4f4f5", "rgba(113, 113, 122, 0.2)")};
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+      }
+
+      .description {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin-bottom: 8px;
+        line-height: 1.4;
+      }
+
+      .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-bottom: 16px;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+
+      .tag {
+        padding: 2px 8px;
+        background: ${cssManager.bdTheme("#f4f4f5", "#27272a")};
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("#52525b", "#a1a1aa")};
+      }
+
+      .priority {
+        font-size: 11px;
+        color: ${cssManager.bdTheme("#a1a1aa", "#71717a")};
+        font-weight: 500;
+      }
+
+      /* Sections */
+      .section {
+        border-left: 3px solid;
+        padding: 10px 14px;
+        margin-bottom: 12px;
+        border-radius: 0 6px 6px 0;
+        background: ${cssManager.bdTheme("#fafafa", "#0a0a0a")};
+      }
+
+      .section:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .section.match {
+        border-left-color: ${cssManager.bdTheme("#3b82f6", "#3b82f6")};
+      }
+
+      .section.action {
+        border-left-color: ${cssManager.bdTheme("#22c55e", "#22c55e")};
+      }
+
+      .section.security {
+        border-left-color: ${cssManager.bdTheme("#f59e0b", "#f59e0b")};
+      }
+
+      .section-label {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: ${cssManager.bdTheme("#a1a1aa", "#71717a")};
+        margin-bottom: 8px;
+      }
+
+      .field-row {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 5px;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      .field-row:last-child {
+        margin-bottom: 0;
+      }
+
+      .field-key {
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        min-width: 64px;
+        flex-shrink: 0;
+        font-weight: 500;
+      }
+
+      .field-value {
+        color: ${cssManager.bdTheme("#18181b", "#e4e4e7")};
+        word-break: break-all;
+      }
+
+      .domain-chip {
+        display: inline-flex;
+        padding: 1px 6px;
+        background: ${cssManager.bdTheme("#eff6ff", "rgba(59, 130, 246, 0.1)")};
+        border-radius: 3px;
+        font-size: 12px;
+        margin-right: 4px;
+        margin-bottom: 2px;
+        font-family: monospace;
+      }
+
+      .domain-chip.glob {
+        background: ${cssManager.bdTheme("#fef3c7", "rgba(245, 158, 11, 0.15)")};
+        color: ${cssManager.bdTheme("#92400e", "#fbbf24")};
+      }
+
+      .mono {
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      .protocol-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .protocol-badge.http {
+        background: ${cssManager.bdTheme("#dbeafe", "rgba(59, 130, 246, 0.2)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      .protocol-badge.tcp {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .tls-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .tls-badge.auto {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34, 197, 94, 0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .tls-badge.custom {
+        background: ${cssManager.bdTheme("#ffedd5", "rgba(249, 115, 22, 0.2)")};
+        color: ${cssManager.bdTheme("#c2410c", "#fb923c")};
+      }
+
+      .engine-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme("#fae8ff", "rgba(168, 85, 247, 0.2)")};
+        color: ${cssManager.bdTheme("#7e22ce", "#c084fc")};
+      }
+
+      .header-pair {
+        display: inline;
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      /* Feature icons */
+      .features-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 14px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme("#f4f4f5", "#1a1a1a")};
+      }
+
+      .feature {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+      }
+
+      .feature-icon {
+        font-size: 13px;
+      }
+
+      .no-route {
+        text-align: center;
+        padding: 24px;
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+        font-size: 13px;
+      }
+    `
+]);
+__runInitializers(_init30, 1, SzRouteCard);
+
+// ts_web/elements/sz-route-list-view.ts
+init_dist_ts29();
+var _enabledFilter_dec, _actionFilter_dec, _searchQuery_dec2, _routes_dec, _a31, _SzRouteListView_decorators, _init31, _routes, _searchQuery2, _actionFilter, _enabledFilter;
+_SzRouteListView_decorators = [t4("sz-route-list-view")];
+var SzRouteListView = class extends (_a31 = DeesElement, _routes_dec = [n5({ type: Array })], _searchQuery_dec2 = [r5()], _actionFilter_dec = [r5()], _enabledFilter_dec = [r5()], _a31) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _routes, __runInitializers(_init31, 8, this, [])), __runInitializers(_init31, 11, this);
+    __privateAdd(this, _searchQuery2, __runInitializers(_init31, 12, this, "")), __runInitializers(_init31, 15, this);
+    __privateAdd(this, _actionFilter, __runInitializers(_init31, 16, this, "all")), __runInitializers(_init31, 19, this);
+    __privateAdd(this, _enabledFilter, __runInitializers(_init31, 20, this, "all")), __runInitializers(_init31, 23, this);
+  }
+  get filteredRoutes() {
+    return this.routes.filter((route) => {
+      if (this.actionFilter !== "all" && route.action.type !== this.actionFilter) return false;
+      if (this.enabledFilter === "enabled" && route.enabled === false) return false;
+      if (this.enabledFilter === "disabled" && route.enabled !== false) return false;
+      if (this.searchQuery) {
+        const q = this.searchQuery.toLowerCase();
+        return this.routeMatchesSearch(route, q);
+      }
+      return true;
+    });
+  }
+  routeMatchesSearch(route, q) {
+    if (route.name?.toLowerCase().includes(q)) return true;
+    if (route.description?.toLowerCase().includes(q)) return true;
+    if (route.match.domains) {
+      const domains = Array.isArray(route.match.domains) ? route.match.domains : [route.match.domains];
+      if (domains.some((d6) => d6.toLowerCase().includes(q))) return true;
+    }
+    const portsStr = this.formatPortsForSearch(route.match.ports);
+    if (portsStr.includes(q)) return true;
+    if (route.match.path?.toLowerCase().includes(q)) return true;
+    if (route.match.clientIp?.some((ip) => ip.includes(q))) return true;
+    if (route.action.targets) {
+      for (const t9 of route.action.targets) {
+        const hosts = Array.isArray(t9.host) ? t9.host : [t9.host];
+        if (hosts.some((h9) => h9.toLowerCase().includes(q))) return true;
+      }
+    }
+    if (route.tags?.some((t9) => t9.toLowerCase().includes(q))) return true;
+    return false;
+  }
+  formatPortsForSearch(ports) {
+    if (typeof ports === "number") return String(ports);
+    if (Array.isArray(ports)) {
+      return ports.map((p7) => typeof p7 === "number" ? String(p7) : `${p7.from}-${p7.to}`).join(" ");
+    }
+    return String(ports);
+  }
+  render() {
+    const filtered = this.filteredRoutes;
+    return b2`
+      <div class="filter-bar">
+        <input
+          class="search-input"
+          type="text"
+          placeholder="Search routes by domain, IP, port, path, or tag..."
+          .value=${this.searchQuery}
+          @input=${(e11) => {
+      this.searchQuery = e11.target.value;
+    }}
+        />
+        <div class="chip-group">
+          ${["all", "forward", "socket-handler"].map(
+      (type5) => b2`
+              <button
+                class="chip ${this.actionFilter === type5 ? "active" : ""}"
+                @click=${() => {
+        this.actionFilter = type5;
+      }}
+              >
+                ${type5 === "all" ? "All" : type5 === "forward" ? "Forward" : "Socket Handler"}
+              </button>
+            `
+    )}
+        </div>
+        <div class="chip-group">
+          ${["all", "enabled", "disabled"].map(
+      (status) => b2`
+              <button
+                class="chip ${this.enabledFilter === status ? "active" : ""}"
+                @click=${() => {
+        this.enabledFilter = status;
+      }}
+              >
+                ${status.charAt(0).toUpperCase() + status.slice(1)}
+              </button>
+            `
+    )}
+        </div>
+      </div>
+
+      <div class="results-count">
+        Showing ${filtered.length} of ${this.routes.length} routes
+      </div>
+
+      ${filtered.length > 0 ? b2`
+            <div class="grid">
+              ${filtered.map(
+      (route) => b2`
+                  <sz-route-card
+                    .route=${route}
+                    @click=${() => this.handleRouteClick(route)}
+                  ></sz-route-card>
+                `
+    )}
+            </div>
+          ` : b2`
+            <div class="empty-state">
+              <div class="empty-state-icon">&#x1f50d;</div>
+              <div>No routes match your filters</div>
+            </div>
+          `}
+    `;
+  }
+  handleRouteClick(route) {
+    this.dispatchEvent(
+      new CustomEvent("route-click", {
+        detail: route,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+_init31 = __decoratorStart(_a31);
+_routes = new WeakMap();
+_searchQuery2 = new WeakMap();
+_actionFilter = new WeakMap();
+_enabledFilter = new WeakMap();
+__decorateElement(_init31, 4, "routes", _routes_dec, SzRouteListView, _routes);
+__decorateElement(_init31, 4, "searchQuery", _searchQuery_dec2, SzRouteListView, _searchQuery2);
+__decorateElement(_init31, 4, "actionFilter", _actionFilter_dec, SzRouteListView, _actionFilter);
+__decorateElement(_init31, 4, "enabledFilter", _enabledFilter_dec, SzRouteListView, _enabledFilter);
+SzRouteListView = __decorateElement(_init31, 0, "SzRouteListView", _SzRouteListView_decorators, SzRouteListView);
+__publicField(SzRouteListView, "demo", () => b2`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-route-list-view
+        .routes=${[
+  {
+    name: "HTTPS Gateway",
+    description: "Main web gateway with TLS termination",
+    enabled: true,
+    tags: ["web", "https", "production"],
+    match: { ports: 443, domains: ["*.example.com", "serve.zone"], protocol: "http" },
+    action: {
+      type: "forward",
+      targets: [{ host: "10.0.0.1", port: 8080 }],
+      tls: { mode: "terminate", certificate: "auto" }
+    }
+  },
+  {
+    name: "SMTP Inbound",
+    description: "Email relay for incoming mail",
+    enabled: true,
+    tags: ["email", "smtp"],
+    match: { ports: 25, domains: "mail.serve.zone" },
+    action: {
+      type: "forward",
+      targets: [{ host: "10.0.1.5", port: 25 }]
+    }
+  },
+  {
+    name: "WebSocket API",
+    description: "Real-time WebSocket connections",
+    enabled: true,
+    tags: ["web", "api"],
+    match: { ports: 443, domains: "ws.example.com", path: "/ws/*" },
+    action: {
+      type: "forward",
+      targets: [{ host: "10.0.0.3", port: 9090 }],
+      websocket: { enabled: true },
+      tls: { mode: "terminate", certificate: "auto" }
+    }
+  },
+  {
+    name: "Maintenance Page",
+    enabled: false,
+    tags: ["web"],
+    match: { ports: [80, 443], domains: "old.example.com" },
+    action: { type: "socket-handler" }
+  }
+]}
+      ></sz-route-list-view>
+    </div>
+  `);
+__publicField(SzRouteListView, "demoGroups", ["Routes"]);
+__publicField(SzRouteListView, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+      }
+
+      .filter-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+
+      .search-input {
+        flex: 1;
+        min-width: 200px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 6px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        outline: none;
+        transition: border-color 200ms ease;
+      }
+
+      .search-input::placeholder {
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+      }
+
+      .search-input:focus {
+        border-color: ${cssManager.bdTheme("#2563eb", "#3b82f6")};
+      }
+
+      .chip-group {
+        display: flex;
+        gap: 4px;
+      }
+
+      .chip {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        cursor: pointer;
+        transition: all 200ms ease;
+        white-space: nowrap;
+      }
+
+      .chip:hover {
+        background: ${cssManager.bdTheme("#f4f4f5", "#18181b")};
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .chip.active {
+        background: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        color: ${cssManager.bdTheme("#fafafa", "#18181b")};
+        border-color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      .results-count {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin-bottom: 16px;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+        gap: 16px;
+      }
+
+      .grid sz-route-card {
+        cursor: pointer;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 48px 24px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        font-size: 14px;
+      }
+
+      .empty-state-icon {
+        font-size: 32px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+    `
+]);
+__runInitializers(_init31, 1, SzRouteListView);
+
 // ts_web/elements/sz-demo-view-dashboard.ts
 init_dist_ts29();
-var _SzDemoViewDashboard_decorators, _init28, _a28;
+var _SzDemoViewDashboard_decorators, _init32, _a32;
 _SzDemoViewDashboard_decorators = [t4("sz-demo-view-dashboard")];
-var SzDemoViewDashboard = class extends (_a28 = DeesElement) {
+var SzDemoViewDashboard = class extends (_a32 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -104610,21 +106618,21 @@ var SzDemoViewDashboard = class extends (_a28 = DeesElement) {
     `;
   }
 };
-_init28 = __decoratorStart(_a28);
-SzDemoViewDashboard = __decorateElement(_init28, 0, "SzDemoViewDashboard", _SzDemoViewDashboard_decorators, SzDemoViewDashboard);
-__runInitializers(_init28, 1, SzDemoViewDashboard);
+_init32 = __decoratorStart(_a32);
+SzDemoViewDashboard = __decorateElement(_init32, 0, "SzDemoViewDashboard", _SzDemoViewDashboard_decorators, SzDemoViewDashboard);
+__runInitializers(_init32, 1, SzDemoViewDashboard);
 
 // ts_web/elements/sz-demo-view-services.ts
 init_dist_ts29();
-var _selectedPlatformService_dec, _selectedService_dec, _currentView_dec2, _a29, _SzDemoViewServices_decorators, _init29, _currentView2, _selectedService, _selectedPlatformService;
+var _selectedPlatformService_dec, _selectedService_dec, _currentView_dec2, _a33, _SzDemoViewServices_decorators, _init33, _currentView2, _selectedService, _selectedPlatformService;
 _SzDemoViewServices_decorators = [t4("sz-demo-view-services")];
-var SzDemoViewServices = class extends (_a29 = DeesElement, _currentView_dec2 = [r5()], _selectedService_dec = [r5()], _selectedPlatformService_dec = [r5()], _a29) {
+var SzDemoViewServices = class extends (_a33 = DeesElement, _currentView_dec2 = [r5()], _selectedService_dec = [r5()], _selectedPlatformService_dec = [r5()], _a33) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentView2, __runInitializers(_init29, 8, this, "list")), __runInitializers(_init29, 11, this);
-    __privateAdd(this, _selectedService, __runInitializers(_init29, 12, this, null)), __runInitializers(_init29, 15, this);
-    __privateAdd(this, _selectedPlatformService, __runInitializers(_init29, 16, this, null)), __runInitializers(_init29, 19, this);
+    __privateAdd(this, _currentView2, __runInitializers(_init33, 8, this, "list")), __runInitializers(_init33, 11, this);
+    __privateAdd(this, _selectedService, __runInitializers(_init33, 12, this, null)), __runInitializers(_init33, 15, this);
+    __privateAdd(this, _selectedPlatformService, __runInitializers(_init33, 16, this, null)), __runInitializers(_init33, 19, this);
     __publicField(this, "demoServices", [
       {
         id: "1",
@@ -104905,14 +106913,14 @@ var SzDemoViewServices = class extends (_a29 = DeesElement, _currentView_dec2 =
   onDeactivate() {
   }
 };
-_init29 = __decoratorStart(_a29);
+_init33 = __decoratorStart(_a33);
 _currentView2 = new WeakMap();
 _selectedService = new WeakMap();
 _selectedPlatformService = new WeakMap();
-__decorateElement(_init29, 4, "currentView", _currentView_dec2, SzDemoViewServices, _currentView2);
-__decorateElement(_init29, 4, "selectedService", _selectedService_dec, SzDemoViewServices, _selectedService);
-__decorateElement(_init29, 4, "selectedPlatformService", _selectedPlatformService_dec, SzDemoViewServices, _selectedPlatformService);
-SzDemoViewServices = __decorateElement(_init29, 0, "SzDemoViewServices", _SzDemoViewServices_decorators, SzDemoViewServices);
+__decorateElement(_init33, 4, "currentView", _currentView_dec2, SzDemoViewServices, _currentView2);
+__decorateElement(_init33, 4, "selectedService", _selectedService_dec, SzDemoViewServices, _selectedService);
+__decorateElement(_init33, 4, "selectedPlatformService", _selectedPlatformService_dec, SzDemoViewServices, _selectedPlatformService);
+SzDemoViewServices = __decorateElement(_init33, 0, "SzDemoViewServices", _SzDemoViewServices_decorators, SzDemoViewServices);
 __publicField(SzDemoViewServices, "styles", [
   cssManager.defaultStyles,
   i`
@@ -105044,18 +107052,18 @@ __publicField(SzDemoViewServices, "styles", [
       }
     `
 ]);
-__runInitializers(_init29, 1, SzDemoViewServices);
+__runInitializers(_init33, 1, SzDemoViewServices);
 
 // ts_web/elements/sz-demo-view-network.ts
 init_dist_ts29();
-var _selectedDomain_dec, _currentTab_dec, _a30, _SzDemoViewNetwork_decorators, _init30, _currentTab, _selectedDomain;
+var _selectedDomain_dec, _currentTab_dec, _a34, _SzDemoViewNetwork_decorators, _init34, _currentTab, _selectedDomain;
 _SzDemoViewNetwork_decorators = [t4("sz-demo-view-network")];
-var SzDemoViewNetwork = class extends (_a30 = DeesElement, _currentTab_dec = [r5()], _selectedDomain_dec = [r5()], _a30) {
+var SzDemoViewNetwork = class extends (_a34 = DeesElement, _currentTab_dec = [r5()], _selectedDomain_dec = [r5()], _a34) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab, __runInitializers(_init30, 8, this, "proxy")), __runInitializers(_init30, 11, this);
-    __privateAdd(this, _selectedDomain, __runInitializers(_init30, 12, this, null)), __runInitializers(_init30, 15, this);
+    __privateAdd(this, _currentTab, __runInitializers(_init34, 8, this, "proxy")), __runInitializers(_init34, 11, this);
+    __privateAdd(this, _selectedDomain, __runInitializers(_init34, 12, this, null)), __runInitializers(_init34, 15, this);
     __publicField(this, "demoProxyRoutes", [
       { id: "1", domain: "api.example.com", target: "http://api-gateway:3000", ssl: true, status: "active" },
       { id: "2", domain: "app.example.com", target: "http://frontend:8080", ssl: true, status: "active" },
@@ -105303,12 +107311,12 @@ var SzDemoViewNetwork = class extends (_a30 = DeesElement, _currentTab_dec = [r5
     `;
   }
 };
-_init30 = __decoratorStart(_a30);
+_init34 = __decoratorStart(_a34);
 _currentTab = new WeakMap();
 _selectedDomain = new WeakMap();
-__decorateElement(_init30, 4, "currentTab", _currentTab_dec, SzDemoViewNetwork, _currentTab);
-__decorateElement(_init30, 4, "selectedDomain", _selectedDomain_dec, SzDemoViewNetwork, _selectedDomain);
-SzDemoViewNetwork = __decorateElement(_init30, 0, "SzDemoViewNetwork", _SzDemoViewNetwork_decorators, SzDemoViewNetwork);
+__decorateElement(_init34, 4, "currentTab", _currentTab_dec, SzDemoViewNetwork, _currentTab);
+__decorateElement(_init34, 4, "selectedDomain", _selectedDomain_dec, SzDemoViewNetwork, _selectedDomain);
+SzDemoViewNetwork = __decorateElement(_init34, 0, "SzDemoViewNetwork", _SzDemoViewNetwork_decorators, SzDemoViewNetwork);
 __publicField(SzDemoViewNetwork, "styles", [
   cssManager.defaultStyles,
   i`
@@ -105396,17 +107404,17 @@ __publicField(SzDemoViewNetwork, "styles", [
       }
     `
 ]);
-__runInitializers(_init30, 1, SzDemoViewNetwork);
+__runInitializers(_init34, 1, SzDemoViewNetwork);
 
 // ts_web/elements/sz-demo-view-registries.ts
 init_dist_ts29();
-var _currentTab_dec2, _a31, _SzDemoViewRegistries_decorators, _init31, _currentTab2;
+var _currentTab_dec2, _a35, _SzDemoViewRegistries_decorators, _init35, _currentTab2;
 _SzDemoViewRegistries_decorators = [t4("sz-demo-view-registries")];
-var SzDemoViewRegistries = class extends (_a31 = DeesElement, _currentTab_dec2 = [r5()], _a31) {
+var SzDemoViewRegistries = class extends (_a35 = DeesElement, _currentTab_dec2 = [r5()], _a35) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab2, __runInitializers(_init31, 8, this, "onebox")), __runInitializers(_init31, 11, this);
+    __privateAdd(this, _currentTab2, __runInitializers(_init35, 8, this, "onebox")), __runInitializers(_init35, 11, this);
     __publicField(this, "demoOneboxImages", [
       { id: "1", name: "api-gateway", tags: ["latest", "v2.1.0", "v2.0.0"], size: "256 MB", updated: "2024-01-20", pulls: 142 },
       { id: "2", name: "frontend", tags: ["latest", "v1.5.0"], size: "128 MB", updated: "2024-01-19", pulls: 89 },
@@ -105523,10 +107531,10 @@ var SzDemoViewRegistries = class extends (_a31 = DeesElement, _currentTab_dec2 =
     `;
   }
 };
-_init31 = __decoratorStart(_a31);
+_init35 = __decoratorStart(_a35);
 _currentTab2 = new WeakMap();
-__decorateElement(_init31, 4, "currentTab", _currentTab_dec2, SzDemoViewRegistries, _currentTab2);
-SzDemoViewRegistries = __decorateElement(_init31, 0, "SzDemoViewRegistries", _SzDemoViewRegistries_decorators, SzDemoViewRegistries);
+__decorateElement(_init35, 4, "currentTab", _currentTab_dec2, SzDemoViewRegistries, _currentTab2);
+SzDemoViewRegistries = __decorateElement(_init35, 0, "SzDemoViewRegistries", _SzDemoViewRegistries_decorators, SzDemoViewRegistries);
 __publicField(SzDemoViewRegistries, "styles", [
   cssManager.defaultStyles,
   i`
@@ -105594,13 +107602,13 @@ __publicField(SzDemoViewRegistries, "styles", [
       }
     `
 ]);
-__runInitializers(_init31, 1, SzDemoViewRegistries);
+__runInitializers(_init35, 1, SzDemoViewRegistries);
 
 // ts_web/elements/sz-demo-view-tokens.ts
 init_dist_ts29();
-var _SzDemoViewTokens_decorators, _init32, _a32;
+var _SzDemoViewTokens_decorators, _init36, _a36;
 _SzDemoViewTokens_decorators = [t4("sz-demo-view-tokens")];
-var SzDemoViewTokens = class extends (_a32 = DeesElement) {
+var SzDemoViewTokens = class extends (_a36 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -105676,86 +107684,454 @@ var SzDemoViewTokens = class extends (_a32 = DeesElement) {
   render() {
     return b2`
       <div class="page-header">
-        <h1 class="page-title">Tokens</h1>
-        <p class="page-subtitle">Manage registry access tokens for CI/CD pipelines</p>
+        <h1 class="page-title">Tokens</h1>
+        <p class="page-subtitle">Manage registry access tokens for CI/CD pipelines</p>
+      </div>
+
+      <sz-tokens-view
+        .globalTokens=${this.demoGlobalTokens}
+        .ciTokens=${this.demoCiTokens}
+        @create=${(e11) => console.log("Create token:", e11.detail)}
+        @copy=${(e11) => console.log("Copy token:", e11.detail)}
+        @regenerate=${(e11) => console.log("Regenerate token:", e11.detail)}
+        @delete=${(e11) => console.log("Delete token:", e11.detail)}
+      ></sz-tokens-view>
+    `;
+  }
+};
+_init36 = __decoratorStart(_a36);
+SzDemoViewTokens = __decorateElement(_init36, 0, "SzDemoViewTokens", _SzDemoViewTokens_decorators, SzDemoViewTokens);
+__runInitializers(_init36, 1, SzDemoViewTokens);
+
+// ts_web/elements/sz-demo-view-settings.ts
+init_dist_ts29();
+var _SzDemoViewSettings_decorators, _init37, _a37;
+_SzDemoViewSettings_decorators = [t4("sz-demo-view-settings")];
+var SzDemoViewSettings = class extends (_a37 = DeesElement) {
+  appui = null;
+  async onActivate(context2) {
+    this.appui = context2.appui;
+    this.appui.setSecondaryMenu({
+      heading: "Settings",
+      groups: [
+        {
+          name: "Categories",
+          items: [
+            { key: "General", iconName: "lucide:Settings", action: () => {
+              console.log("General settings");
+            } },
+            { key: "Network", iconName: "lucide:Network", action: () => {
+              console.log("Network settings");
+            } },
+            { key: "Security", iconName: "lucide:Shield", action: () => {
+              console.log("Security settings");
+            } },
+            { key: "Certificates", iconName: "lucide:FileBadge", action: () => {
+              console.log("Certificate settings");
+            } }
+          ]
+        },
+        {
+          name: "Actions",
+          items: [
+            { type: "action", key: "Export Config", iconName: "lucide:Download", action: () => {
+              console.log("Export config");
+            } },
+            { type: "action", key: "Import Config", iconName: "lucide:Upload", action: () => {
+              console.log("Import config");
+            } },
+            { type: "action", variant: "danger", key: "Reset to Default", iconName: "lucide:RotateCcw", confirmMessage: "Are you sure you want to reset all settings to default?", action: () => {
+              console.log("Reset settings");
+            } }
+          ]
+        }
+      ]
+    });
+  }
+  onDeactivate() {
+  }
+  demoSettings = {
+    darkMode: true,
+    cloudflareToken: "",
+    cloudflareZoneId: "",
+    autoRenewCerts: true,
+    renewalThreshold: 30,
+    acmeEmail: "admin@serve.zone",
+    httpPort: 80,
+    httpsPort: 443,
+    forceHttps: true
+  };
+  static styles = [
+    cssManager.defaultStyles,
+    i`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+
+      .page-header {
+        margin-bottom: 24px;
+      }
+
+      .page-title {
+        font-size: 24px;
+        font-weight: 700;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        margin: 0 0 8px 0;
+      }
+
+      .page-subtitle {
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        margin: 0;
+      }
+
+      .settings-container {
+        max-width: 800px;
+      }
+    `
+  ];
+  render() {
+    return b2`
+      <div class="page-header">
+        <h1 class="page-title">Settings</h1>
+        <p class="page-subtitle">Configure your onebox instance</p>
       </div>
 
-      <sz-tokens-view
-        .globalTokens=${this.demoGlobalTokens}
-        .ciTokens=${this.demoCiTokens}
-        @create=${(e11) => console.log("Create token:", e11.detail)}
-        @copy=${(e11) => console.log("Copy token:", e11.detail)}
-        @regenerate=${(e11) => console.log("Regenerate token:", e11.detail)}
-        @delete=${(e11) => console.log("Delete token:", e11.detail)}
-      ></sz-tokens-view>
+      <div class="settings-container">
+        <sz-settings-view
+          .settings=${this.demoSettings}
+          currentUser="admin"
+          @setting-change=${(e11) => console.log("Setting change:", e11.detail)}
+          @change-password=${(e11) => console.log("Change password:", e11.detail)}
+          @reset=${() => console.log("Reset settings")}
+          @save=${(e11) => console.log("Save settings:", e11.detail)}
+        ></sz-settings-view>
+      </div>
     `;
   }
 };
-_init32 = __decoratorStart(_a32);
-SzDemoViewTokens = __decorateElement(_init32, 0, "SzDemoViewTokens", _SzDemoViewTokens_decorators, SzDemoViewTokens);
-__runInitializers(_init32, 1, SzDemoViewTokens);
+_init37 = __decoratorStart(_a37);
+SzDemoViewSettings = __decorateElement(_init37, 0, "SzDemoViewSettings", _SzDemoViewSettings_decorators, SzDemoViewSettings);
+__runInitializers(_init37, 1, SzDemoViewSettings);
 
-// ts_web/elements/sz-demo-view-settings.ts
+// ts_web/elements/sz-demo-view-mta.ts
 init_dist_ts29();
-var _SzDemoViewSettings_decorators, _init33, _a33;
-_SzDemoViewSettings_decorators = [t4("sz-demo-view-settings")];
-var SzDemoViewSettings = class extends (_a33 = DeesElement) {
-  appui = null;
+var _currentDirectionFilter_dec, _selectedEmail_dec, _currentView_dec3, _a38, _SzDemoViewMta_decorators, _init38, _currentView3, _selectedEmail, _currentDirectionFilter;
+_SzDemoViewMta_decorators = [t4("sz-demo-view-mta")];
+var SzDemoViewMta = class extends (_a38 = DeesElement, _currentView_dec3 = [r5()], _selectedEmail_dec = [r5()], _currentDirectionFilter_dec = [r5()], _a38) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "appui", null);
+    __privateAdd(this, _currentView3, __runInitializers(_init38, 8, this, "list")), __runInitializers(_init38, 11, this);
+    __privateAdd(this, _selectedEmail, __runInitializers(_init38, 12, this, null)), __runInitializers(_init38, 15, this);
+    __privateAdd(this, _currentDirectionFilter, __runInitializers(_init38, 16, this, "all")), __runInitializers(_init38, 19, this);
+    __publicField(this, "demoEmails", [
+      { id: "1", direction: "outbound", status: "delivered", from: "noreply@serve.zone", to: "user@example.com", subject: "Welcome to serve.zone", timestamp: "2024-01-15 14:30:22", messageId: "<abc123@serve.zone>", size: "12.4 KB" },
+      { id: "2", direction: "outbound", status: "bounced", from: "alerts@serve.zone", to: "invalid@nowhere.test", subject: "Service Alert: CPU Usage High", timestamp: "2024-01-15 14:28:10", messageId: "<def456@serve.zone>", size: "8.2 KB" },
+      { id: "3", direction: "inbound", status: "delivered", from: "support@customer.com", to: "admin@serve.zone", subject: "Re: Infrastructure Review", timestamp: "2024-01-15 14:25:00", messageId: "<ghi789@customer.com>", size: "24.1 KB" },
+      { id: "4", direction: "outbound", status: "rejected", from: "billing@serve.zone", to: "blocked@spam-domain.test", subject: "Invoice #2024-001", timestamp: "2024-01-15 14:20:45", messageId: "<jkl012@serve.zone>", size: "45.6 KB" },
+      { id: "5", direction: "outbound", status: "deferred", from: "noreply@serve.zone", to: "slow@remote-server.test", subject: "Password Reset Request", timestamp: "2024-01-15 14:15:30", messageId: "<mno345@serve.zone>", size: "6.8 KB" },
+      { id: "6", direction: "inbound", status: "delivered", from: "ci@github.com", to: "devops@serve.zone", subject: "Build #4521 passed", timestamp: "2024-01-15 14:10:00", messageId: "<pqr678@github.com>", size: "15.3 KB" },
+      { id: "7", direction: "outbound", status: "pending", from: "reports@serve.zone", to: "team@serve.zone", subject: "Weekly Infrastructure Report", timestamp: "2024-01-15 14:05:00", messageId: "<stu901@serve.zone>", size: "102.7 KB" },
+      { id: "8", direction: "inbound", status: "delivered", from: "monitoring@uptime.io", to: "ops@serve.zone", subject: "Uptime Report: 99.98%", timestamp: "2024-01-15 13:55:00", messageId: "<vwx234@uptime.io>", size: "9.1 KB" }
+    ]);
+    __publicField(this, "demoEmailDetails", {
+      "1": {
+        id: "1",
+        direction: "outbound",
+        status: "delivered",
+        from: "noreply@serve.zone",
+        to: "user@example.com",
+        toList: ["user@example.com"],
+        subject: "Welcome to serve.zone",
+        timestamp: "2024-01-15 14:30:22",
+        messageId: "<abc123@serve.zone>",
+        size: "12.4 KB",
+        smtpLog: [
+          { timestamp: "14:30:20", direction: "client", command: "EHLO mail.serve.zone" },
+          { timestamp: "14:30:20", direction: "server", command: "250-mail.example.com Hello", responseCode: 250 },
+          { timestamp: "14:30:20", direction: "server", command: "250-STARTTLS", responseCode: 250 },
+          { timestamp: "14:30:20", direction: "server", command: "250 SIZE 52428800", responseCode: 250 },
+          { timestamp: "14:30:20", direction: "client", command: "STARTTLS" },
+          { timestamp: "14:30:21", direction: "server", command: "220 Ready to start TLS", responseCode: 220 },
+          { timestamp: "14:30:21", direction: "client", command: "EHLO mail.serve.zone" },
+          { timestamp: "14:30:21", direction: "server", command: "250-mail.example.com Hello", responseCode: 250 },
+          { timestamp: "14:30:21", direction: "server", command: "250-AUTH PLAIN LOGIN", responseCode: 250 },
+          { timestamp: "14:30:21", direction: "server", command: "250 SIZE 52428800", responseCode: 250 },
+          { timestamp: "14:30:21", direction: "client", command: "AUTH PLAIN AHVzZXIAcGFzc3dvcmQ=" },
+          { timestamp: "14:30:21", direction: "server", command: "235 2.7.0 Authentication successful", responseCode: 235 },
+          { timestamp: "14:30:21", direction: "client", command: "MAIL FROM:<noreply@serve.zone>" },
+          { timestamp: "14:30:21", direction: "server", command: "250 OK", responseCode: 250 },
+          { timestamp: "14:30:21", direction: "client", command: "RCPT TO:<user@example.com>" },
+          { timestamp: "14:30:21", direction: "server", command: "250 Accepted", responseCode: 250 },
+          { timestamp: "14:30:22", direction: "client", command: "DATA" },
+          { timestamp: "14:30:22", direction: "server", command: '354 Enter message, ending with "." on a line by itself', responseCode: 354 },
+          { timestamp: "14:30:22", direction: "client", command: "." },
+          { timestamp: "14:30:22", direction: "server", command: "250 OK id=1pQ2rS-0003Ab-C4", responseCode: 250 },
+          { timestamp: "14:30:22", direction: "client", command: "QUIT" },
+          { timestamp: "14:30:22", direction: "server", command: "221 mail.example.com closing connection", responseCode: 221 }
+        ],
+        connectionInfo: {
+          sourceIp: "10.0.1.50",
+          sourceHostname: "mail.serve.zone",
+          destinationIp: "93.184.216.34",
+          destinationPort: 25,
+          tlsVersion: "TLSv1.3",
+          tlsCipher: "TLS_AES_256_GCM_SHA384",
+          authenticated: true,
+          authMethod: "PLAIN",
+          authUser: "noreply@serve.zone"
+        },
+        authenticationResults: {
+          spf: "pass",
+          spfDomain: "serve.zone",
+          dkim: "pass",
+          dkimDomain: "serve.zone",
+          dmarc: "pass",
+          dmarcPolicy: "reject"
+        },
+        headers: {
+          "From": "noreply@serve.zone",
+          "To": "user@example.com",
+          "Subject": "Welcome to serve.zone",
+          "Date": "Mon, 15 Jan 2024 14:30:22 +0000",
+          "MIME-Version": "1.0",
+          "Content-Type": "text/html; charset=UTF-8"
+        },
+        body: '<html>\n<head><title>Welcome</title></head>\n<body>\n  <h1>Welcome to serve.zone!</h1>\n  <p>Your account has been created successfully.</p>\n  <p>Get started by visiting your <a href="https://serve.zone/dashboard">dashboard</a>.</p>\n</body>\n</html>'
+      },
+      "2": {
+        id: "2",
+        direction: "outbound",
+        status: "bounced",
+        from: "alerts@serve.zone",
+        to: "invalid@nowhere.test",
+        toList: ["invalid@nowhere.test"],
+        subject: "Service Alert: CPU Usage High",
+        timestamp: "2024-01-15 14:28:10",
+        messageId: "<def456@serve.zone>",
+        size: "8.2 KB",
+        rejectionReason: "550 5.1.1 The email account that you tried to reach does not exist.",
+        bounceMessage: "Delivery to the following recipient failed permanently:\n\n    invalid@nowhere.test\n\nTechnical details of permanent failure:\nGoogle tried to deliver your message, but it was rejected by the server for the recipient domain nowhere.test.",
+        smtpLog: [
+          { timestamp: "14:28:08", direction: "client", command: "EHLO mail.serve.zone" },
+          { timestamp: "14:28:08", direction: "server", command: "250-mail.nowhere.test Hello", responseCode: 250 },
+          { timestamp: "14:28:08", direction: "client", command: "MAIL FROM:<alerts@serve.zone>" },
+          { timestamp: "14:28:09", direction: "server", command: "250 OK", responseCode: 250 },
+          { timestamp: "14:28:09", direction: "client", command: "RCPT TO:<invalid@nowhere.test>" },
+          { timestamp: "14:28:10", direction: "server", command: "550 5.1.1 The email account that you tried to reach does not exist.", responseCode: 550 },
+          { timestamp: "14:28:10", direction: "client", command: "QUIT" },
+          { timestamp: "14:28:10", direction: "server", command: "221 Bye", responseCode: 221 }
+        ],
+        connectionInfo: {
+          sourceIp: "10.0.1.50",
+          sourceHostname: "mail.serve.zone",
+          destinationIp: "198.51.100.25",
+          destinationPort: 25,
+          tlsVersion: "TLSv1.2",
+          tlsCipher: "ECDHE-RSA-AES128-GCM-SHA256",
+          authenticated: true,
+          authMethod: "PLAIN",
+          authUser: "alerts@serve.zone"
+        },
+        authenticationResults: {
+          spf: "pass",
+          spfDomain: "serve.zone",
+          dkim: "pass",
+          dkimDomain: "serve.zone",
+          dmarc: "pass",
+          dmarcPolicy: "quarantine"
+        },
+        headers: {
+          "From": "alerts@serve.zone",
+          "To": "invalid@nowhere.test",
+          "Subject": "Service Alert: CPU Usage High",
+          "Date": "Mon, 15 Jan 2024 14:28:10 +0000",
+          "MIME-Version": "1.0",
+          "Content-Type": "text/plain; charset=UTF-8"
+        },
+        body: "ALERT: CPU Usage High\n\nService: api-gateway\nCurrent Usage: 94.2%\nThreshold: 90%\nTimestamp: 2024-01-15 14:28:00 UTC\n\nPlease investigate immediately."
+      },
+      "3": {
+        id: "3",
+        direction: "inbound",
+        status: "delivered",
+        from: "support@customer.com",
+        to: "admin@serve.zone",
+        toList: ["admin@serve.zone"],
+        cc: ["ops@serve.zone"],
+        subject: "Re: Infrastructure Review",
+        timestamp: "2024-01-15 14:25:00",
+        messageId: "<ghi789@customer.com>",
+        size: "24.1 KB",
+        smtpLog: [
+          { timestamp: "14:24:58", direction: "client", command: "EHLO mail.customer.com" },
+          { timestamp: "14:24:58", direction: "server", command: "250-mail.serve.zone Hello", responseCode: 250 },
+          { timestamp: "14:24:58", direction: "server", command: "250-STARTTLS", responseCode: 250 },
+          { timestamp: "14:24:58", direction: "server", command: "250 SIZE 52428800", responseCode: 250 },
+          { timestamp: "14:24:59", direction: "client", command: "STARTTLS" },
+          { timestamp: "14:24:59", direction: "server", command: "220 Ready to start TLS", responseCode: 220 },
+          { timestamp: "14:24:59", direction: "client", command: "MAIL FROM:<support@customer.com>" },
+          { timestamp: "14:24:59", direction: "server", command: "250 OK", responseCode: 250 },
+          { timestamp: "14:24:59", direction: "client", command: "RCPT TO:<admin@serve.zone>" },
+          { timestamp: "14:25:00", direction: "server", command: "250 Accepted", responseCode: 250 },
+          { timestamp: "14:25:00", direction: "client", command: "DATA" },
+          { timestamp: "14:25:00", direction: "server", command: "354 Enter message", responseCode: 354 },
+          { timestamp: "14:25:00", direction: "client", command: "." },
+          { timestamp: "14:25:00", direction: "server", command: "250 OK id=2bR3sT-0004Cd-E5", responseCode: 250 }
+        ],
+        connectionInfo: {
+          sourceIp: "203.0.113.45",
+          sourceHostname: "mail.customer.com",
+          destinationIp: "10.0.1.50",
+          destinationPort: 25,
+          tlsVersion: "TLSv1.3",
+          tlsCipher: "TLS_AES_128_GCM_SHA256",
+          authenticated: false,
+          authMethod: "",
+          authUser: ""
+        },
+        authenticationResults: {
+          spf: "pass",
+          spfDomain: "customer.com",
+          dkim: "pass",
+          dkimDomain: "customer.com",
+          dmarc: "pass",
+          dmarcPolicy: "none"
+        },
+        headers: {
+          "From": "support@customer.com",
+          "To": "admin@serve.zone",
+          "CC": "ops@serve.zone",
+          "Subject": "Re: Infrastructure Review",
+          "Date": "Mon, 15 Jan 2024 14:25:00 +0000",
+          "MIME-Version": "1.0",
+          "Content-Type": "text/plain; charset=UTF-8",
+          "In-Reply-To": "<prev123@serve.zone>"
+        },
+        body: "Hi Admin,\n\nThank you for the detailed infrastructure review report.\n\nWe have reviewed the recommendations and would like to\nproceed with the following:\n\n1. Upgrade to the Pro tier\n2. Enable automatic backups\n3. Set up monitoring alerts\n\nPlease let us know the timeline for these changes.\n\nBest regards,\nCustomer Support Team"
+      }
+    });
+  }
   async onActivate(context2) {
     this.appui = context2.appui;
+    this.appui.setContentTabs([
+      {
+        key: "All Emails",
+        action: () => {
+          this.currentDirectionFilter = "all";
+          this.currentView = "list";
+          this.updateSecondaryMenu();
+        }
+      },
+      {
+        key: "Inbound",
+        action: () => {
+          this.currentDirectionFilter = "inbound";
+          this.currentView = "list";
+          this.updateSecondaryMenu();
+        }
+      },
+      {
+        key: "Outbound",
+        action: () => {
+          this.currentDirectionFilter = "outbound";
+          this.currentView = "list";
+          this.updateSecondaryMenu();
+        }
+      }
+    ]);
+    this.updateSecondaryMenu();
+  }
+  updateSecondaryMenu() {
+    if (!this.appui) return;
     this.appui.setSecondaryMenu({
-      heading: "Settings",
+      heading: "Email / MTA",
       groups: [
         {
-          name: "Categories",
+          name: "Actions",
           items: [
-            { key: "General", iconName: "lucide:Settings", action: () => {
-              console.log("General settings");
-            } },
-            { key: "Network", iconName: "lucide:Network", action: () => {
-              console.log("Network settings");
-            } },
-            { key: "Security", iconName: "lucide:Shield", action: () => {
-              console.log("Security settings");
+            { type: "action", key: "Refresh", iconName: "lucide:RefreshCw", action: () => {
+              console.log("Refresh emails");
             } },
-            { key: "Certificates", iconName: "lucide:FileBadge", action: () => {
-              console.log("Certificate settings");
+            { type: "action", key: "Export Logs", iconName: "lucide:Download", action: () => {
+              console.log("Export logs");
             } }
           ]
         },
         {
-          name: "Actions",
+          name: "Status Filters",
           items: [
-            { type: "action", key: "Export Config", iconName: "lucide:Download", action: () => {
-              console.log("Export config");
+            { key: "Delivered", iconName: "lucide:CheckCircle", badge: "5", badgeVariant: "success", action: () => {
+              console.log("Filter delivered");
             } },
-            { type: "action", key: "Import Config", iconName: "lucide:Upload", action: () => {
-              console.log("Import config");
+            { key: "Bounced", iconName: "lucide:XCircle", badge: "1", badgeVariant: "error", action: () => {
+              console.log("Filter bounced");
             } },
-            { type: "action", variant: "danger", key: "Reset to Default", iconName: "lucide:RotateCcw", confirmMessage: "Are you sure you want to reset all settings to default?", action: () => {
-              console.log("Reset settings");
+            { key: "Deferred", iconName: "lucide:Clock", badge: "1", badgeVariant: "warning", action: () => {
+              console.log("Filter deferred");
+            } },
+            { key: "Pending", iconName: "lucide:Loader", badge: "1", action: () => {
+              console.log("Filter pending");
             } }
           ]
+        },
+        {
+          name: "Statistics",
+          items: [
+            { type: "header", label: "8 Total Emails" },
+            { type: "header", label: "62.5% Delivery Rate" }
+          ]
         }
       ]
     });
   }
   onDeactivate() {
   }
-  demoSettings = {
-    darkMode: true,
-    cloudflareToken: "",
-    cloudflareZoneId: "",
-    autoRenewCerts: true,
-    renewalThreshold: 30,
-    acmeEmail: "admin@serve.zone",
-    httpPort: 80,
-    httpsPort: 443,
-    forceHttps: true
-  };
-  static styles = [
-    cssManager.defaultStyles,
-    i`
+  render() {
+    if (this.currentView === "detail" && this.selectedEmail) {
+      return b2`
+        <sz-mta-detail-view
+          .email=${this.selectedEmail}
+          @back=${() => {
+        this.currentView = "list";
+        this.selectedEmail = null;
+      }}
+        ></sz-mta-detail-view>
+      `;
+    }
+    return b2`
+      <sz-mta-list-view
+        .emails=${this.currentDirectionFilter === "all" ? this.demoEmails : this.demoEmails.filter((e11) => e11.direction === this.currentDirectionFilter)}
+        @email-click=${(e11) => this.handleEmailClick(e11.detail)}
+      ></sz-mta-list-view>
+    `;
+  }
+  handleEmailClick(email) {
+    const detail = this.demoEmailDetails[email.id];
+    if (detail) {
+      this.selectedEmail = detail;
+      this.currentView = "detail";
+    } else {
+      console.log("No detail data available for email:", email.id);
+    }
+  }
+};
+_init38 = __decoratorStart(_a38);
+_currentView3 = new WeakMap();
+_selectedEmail = new WeakMap();
+_currentDirectionFilter = new WeakMap();
+__decorateElement(_init38, 4, "currentView", _currentView_dec3, SzDemoViewMta, _currentView3);
+__decorateElement(_init38, 4, "selectedEmail", _selectedEmail_dec, SzDemoViewMta, _selectedEmail);
+__decorateElement(_init38, 4, "currentDirectionFilter", _currentDirectionFilter_dec, SzDemoViewMta, _currentDirectionFilter);
+SzDemoViewMta = __decorateElement(_init38, 0, "SzDemoViewMta", _SzDemoViewMta_decorators, SzDemoViewMta);
+__publicField(SzDemoViewMta, "styles", [
+  cssManager.defaultStyles,
+  i`
       :host {
         display: block;
         padding: 24px;
@@ -105763,52 +108139,350 @@ var SzDemoViewSettings = class extends (_a33 = DeesElement) {
         overflow-y: auto;
         box-sizing: border-box;
       }
+    `
+]);
+__runInitializers(_init38, 1, SzDemoViewMta);
 
-      .page-header {
-        margin-bottom: 24px;
-      }
-
-      .page-title {
-        font-size: 24px;
-        font-weight: 700;
-        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
-        margin: 0 0 8px 0;
-      }
-
-      .page-subtitle {
-        font-size: 14px;
-        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
-        margin: 0;
+// ts_web/elements/sz-demo-view-routes.ts
+init_dist_ts29();
+var _currentTab_dec3, _a39, _SzDemoViewRoutes_decorators, _init39, _currentTab3;
+_SzDemoViewRoutes_decorators = [t4("sz-demo-view-routes")];
+var SzDemoViewRoutes = class extends (_a39 = DeesElement, _currentTab_dec3 = [r5()], _a39) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "appui", null);
+    __privateAdd(this, _currentTab3, __runInitializers(_init39, 8, this, "all")), __runInitializers(_init39, 11, this);
+    __publicField(this, "demoRoutes", [
+      // 1. HTTPS with TLS termination + auto cert
+      {
+        id: "route-1",
+        name: "Web Frontend",
+        description: "Main website with TLS termination and automatic certificates",
+        enabled: true,
+        priority: 10,
+        tags: ["web", "https", "production"],
+        match: {
+          ports: 443,
+          domains: ["serve.zone", "www.serve.zone"],
+          protocol: "http"
+        },
+        action: {
+          type: "forward",
+          targets: [{ host: "10.0.0.10", port: 3e3 }],
+          tls: { mode: "terminate", certificate: "auto" }
+        }
+      },
+      // 2. HTTP to HTTPS redirect
+      {
+        id: "route-2",
+        name: "HTTP Redirect",
+        description: "Redirects all HTTP traffic to HTTPS",
+        enabled: true,
+        priority: 100,
+        tags: ["web", "http", "redirect"],
+        match: {
+          ports: 80,
+          domains: ["serve.zone", "www.serve.zone"],
+          protocol: "http"
+        },
+        action: {
+          type: "socket-handler"
+        }
+      },
+      // 3. Email SMTP route
+      {
+        id: "route-3",
+        name: "SMTP Inbound",
+        description: "Inbound email relay for serve.zone domain",
+        enabled: true,
+        tags: ["email", "smtp", "production"],
+        match: {
+          ports: 25,
+          domains: "mail.serve.zone"
+        },
+        action: {
+          type: "forward",
+          targets: [{ host: "10.0.1.5", port: 25 }],
+          tls: { mode: "terminate", certificate: "auto" }
+        }
+      },
+      // 4. API gateway with path matching, rate limiting, CORS
+      {
+        id: "route-4",
+        name: "API Gateway",
+        description: "API gateway with rate limiting, CORS headers, and load balancing",
+        enabled: true,
+        priority: 20,
+        tags: ["web", "api", "https", "production"],
+        match: {
+          ports: 443,
+          domains: "api.serve.zone",
+          path: "/v2/*",
+          protocol: "http"
+        },
+        action: {
+          type: "forward",
+          targets: [
+            { host: ["10.0.0.20", "10.0.0.21", "10.0.0.22"], port: 8080 }
+          ],
+          tls: { mode: "terminate", certificate: "auto" },
+          loadBalancing: { algorithm: "round-robin" }
+        },
+        security: {
+          rateLimit: { enabled: true, maxRequests: 200, window: 60 },
+          maxConnections: 5e3
+        },
+        headers: {
+          response: {
+            "Access-Control-Allow-Origin": "*",
+            "X-Request-Id": "{{requestId}}"
+          }
+        }
+      },
+      // 5. WebSocket route
+      {
+        id: "route-5",
+        name: "WebSocket Realtime",
+        description: "Real-time WebSocket connections for live updates",
+        enabled: true,
+        tags: ["web", "https", "websocket"],
+        match: {
+          ports: 443,
+          domains: "ws.serve.zone",
+          path: "/ws/*",
+          protocol: "http"
+        },
+        action: {
+          type: "forward",
+          targets: [{ host: "10.0.0.30", port: 9090 }],
+          tls: { mode: "terminate", certificate: "auto" },
+          websocket: { enabled: true }
+        }
+      },
+      // 6. Wildcard domain route
+      {
+        id: "route-6",
+        name: "Tenant Wildcard",
+        description: "Multi-tenant wildcard routing for customer subdomains",
+        enabled: true,
+        priority: 50,
+        tags: ["web", "https", "multi-tenant"],
+        match: {
+          ports: 443,
+          domains: "*.customers.serve.zone",
+          protocol: "http"
+        },
+        action: {
+          type: "forward",
+          targets: [{ host: "10.0.0.40", port: 8080 }],
+          tls: { mode: "terminate", certificate: "auto" }
+        },
+        security: {
+          ipAllowList: ["10.0.0.0/8", "172.16.0.0/12"]
+        }
+      },
+      // 7. Load-balanced route with health check
+      {
+        id: "route-7",
+        name: "Microservices LB",
+        description: "Load-balanced microservices backend with IP-hash affinity",
+        enabled: true,
+        tags: ["web", "https", "production"],
+        match: {
+          ports: [443, 8443],
+          domains: "services.serve.zone",
+          protocol: "http"
+        },
+        action: {
+          type: "forward",
+          targets: [
+            { host: ["10.0.2.1", "10.0.2.2", "10.0.2.3", "10.0.2.4"], port: 3e3 }
+          ],
+          tls: { mode: "terminate-and-reencrypt", certificate: "auto" },
+          loadBalancing: { algorithm: "ip-hash" }
+        }
+      },
+      // 8. DNS-over-HTTPS route
+      {
+        id: "route-8",
+        name: "DNS over HTTPS",
+        description: "DNS-over-HTTPS resolver endpoint",
+        enabled: true,
+        tags: ["dns", "https"],
+        match: {
+          ports: 443,
+          domains: "dns.serve.zone",
+          path: "/dns-query",
+          protocol: "http"
+        },
+        action: {
+          type: "forward",
+          targets: [{ host: "10.0.3.1", port: 8053 }],
+          tls: { mode: "terminate", certificate: "auto" }
+        }
+      },
+      // 9. NFTables high-performance route
+      {
+        id: "route-9",
+        name: "High-Perf TCP Proxy",
+        description: "NFTables-accelerated TCP proxy for game servers",
+        enabled: true,
+        tags: ["tcp", "nftables", "production"],
+        match: {
+          ports: [{ from: 27e3, to: 27050 }],
+          protocol: "tcp"
+        },
+        action: {
+          type: "forward",
+          targets: [{ host: "10.0.4.1", port: "preserve" }],
+          forwardingEngine: "nftables"
+        }
+      },
+      // 10. Disabled maintenance route
+      {
+        id: "route-10",
+        name: "Legacy Admin Panel",
+        description: "Deprecated admin panel \u2014 disabled for maintenance",
+        enabled: false,
+        tags: ["web", "https", "deprecated"],
+        match: {
+          ports: 443,
+          domains: "admin-old.serve.zone",
+          protocol: "http"
+        },
+        action: {
+          type: "socket-handler"
+        },
+        security: {
+          ipBlockList: ["0.0.0.0/0"]
+        }
       }
-
-      .settings-container {
-        max-width: 800px;
+    ]);
+  }
+  get filteredRoutes() {
+    if (this.currentTab === "all") return this.demoRoutes;
+    if (this.currentTab === "https") {
+      return this.demoRoutes.filter(
+        (r11) => r11.tags?.some((t9) => ["web", "https", "http"].includes(t9))
+      );
+    }
+    if (this.currentTab === "email") {
+      return this.demoRoutes.filter(
+        (r11) => r11.tags?.some((t9) => ["email", "smtp"].includes(t9))
+      );
+    }
+    if (this.currentTab === "dns") {
+      return this.demoRoutes.filter(
+        (r11) => r11.tags?.some((t9) => ["dns"].includes(t9))
+      );
+    }
+    return this.demoRoutes;
+  }
+  async onActivate(context2) {
+    this.appui = context2.appui;
+    this.appui.setContentTabs([
+      {
+        key: "All Routes",
+        action: () => {
+          this.currentTab = "all";
+          this.updateSecondaryMenu();
+        }
+      },
+      {
+        key: "HTTP/S",
+        action: () => {
+          this.currentTab = "https";
+          this.updateSecondaryMenu();
+        }
+      },
+      {
+        key: "Email",
+        action: () => {
+          this.currentTab = "email";
+          this.updateSecondaryMenu();
+        }
+      },
+      {
+        key: "DNS",
+        action: () => {
+          this.currentTab = "dns";
+          this.updateSecondaryMenu();
+        }
       }
-    `
-  ];
+    ]);
+    this.updateSecondaryMenu();
+  }
+  updateSecondaryMenu() {
+    if (!this.appui) return;
+    const total = this.demoRoutes.length;
+    const active = this.demoRoutes.filter((r11) => r11.enabled !== false).length;
+    const forwardCount = this.demoRoutes.filter((r11) => r11.action.type === "forward").length;
+    this.appui.setSecondaryMenu({
+      heading: "Routes",
+      groups: [
+        {
+          name: "Actions",
+          items: [
+            {
+              type: "action",
+              key: "Refresh",
+              iconName: "lucide:RefreshCw",
+              action: () => {
+                console.log("Refresh routes");
+              }
+            },
+            {
+              type: "action",
+              key: "Add Route",
+              iconName: "lucide:Plus",
+              action: () => {
+                console.log("Add route");
+              }
+            }
+          ]
+        },
+        {
+          name: "Statistics",
+          items: [
+            { type: "header", label: `${total} Total Routes` },
+            { type: "header", label: `${active} Active` },
+            { type: "header", label: `${forwardCount} Forward` },
+            { type: "header", label: `${total - forwardCount} Socket Handler` }
+          ]
+        }
+      ]
+    });
+  }
+  onDeactivate() {
+  }
   render() {
     return b2`
-      <div class="page-header">
-        <h1 class="page-title">Settings</h1>
-        <p class="page-subtitle">Configure your onebox instance</p>
-      </div>
-
-      <div class="settings-container">
-        <sz-settings-view
-          .settings=${this.demoSettings}
-          currentUser="admin"
-          @setting-change=${(e11) => console.log("Setting change:", e11.detail)}
-          @change-password=${(e11) => console.log("Change password:", e11.detail)}
-          @reset=${() => console.log("Reset settings")}
-          @save=${(e11) => console.log("Save settings:", e11.detail)}
-        ></sz-settings-view>
-      </div>
+      <sz-route-list-view
+        .routes=${this.filteredRoutes}
+        @route-click=${(e11) => {
+      console.log("Route clicked:", e11.detail.name);
+    }}
+      ></sz-route-list-view>
     `;
   }
 };
-_init33 = __decoratorStart(_a33);
-SzDemoViewSettings = __decorateElement(_init33, 0, "SzDemoViewSettings", _SzDemoViewSettings_decorators, SzDemoViewSettings);
-__runInitializers(_init33, 1, SzDemoViewSettings);
+_init39 = __decoratorStart(_a39);
+_currentTab3 = new WeakMap();
+__decorateElement(_init39, 4, "currentTab", _currentTab_dec3, SzDemoViewRoutes, _currentTab3);
+SzDemoViewRoutes = __decorateElement(_init39, 0, "SzDemoViewRoutes", _SzDemoViewRoutes_decorators, SzDemoViewRoutes);
+__publicField(SzDemoViewRoutes, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    `
+]);
+__runInitializers(_init39, 1, SzDemoViewRoutes);
 
 // ts_web/pages/index.ts
 var pages_exports = {};
@@ -109526,9 +112200,9 @@ var DeesAppuiBar = (() => {
 
 // node_modules/.pnpm/@design.estate+dees-catalog@3.43.0_@tiptap+pm@2.27.2/node_modules/@design.estate/dees-catalog/dist_ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.js
 init_dist_ts29();
-var _a34;
+var _a40;
 var demoFunc5 = () => {
-  return b2(_a34 || (_a34 = __template([`
+  return b2(_a40 || (_a40 = __template([`
     <dees-demowrapper>
       <style>
         .demo-container {
@@ -110580,7 +113254,7 @@ var DeesPanel = (() => {
 
 // node_modules/.pnpm/@design.estate+dees-catalog@3.43.0_@tiptap+pm@2.27.2/node_modules/@design.estate/dees-catalog/dist_ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.demo.js
 init_dist_ts29();
-var _a35;
+var _a41;
 var generateCpuCores = (count2) => {
   return Array.from({ length: count2 }, (_4, i11) => ({
     id: i11,
@@ -110589,7 +113263,7 @@ var generateCpuCores = (count2) => {
   }));
 };
 var demoFunc7 = () => {
-  return b2(_a35 || (_a35 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ', "; border-radius: 6px; font-size: 14px; font-family: monospace; color: ", ';">\n          <em>Click on tile actions or grid actions to see the result...</em>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div class="tile-config">\n          <div class="config-section">\n            <div class="config-title">Configuration Options</div>\n            <div class="config-description">\n              Each tile type supports different properties:\n              <ul style="margin: 8px 0; padding-left: 20px;">\n                <li><strong>Number:</strong> value, unit, color, description</li>\n                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>\n                <li><strong>Percentage:</strong> value (0-100), color, description</li>\n                <li><strong>Trend:</strong> value, unit, trendData array, description</li>\n                <li><strong>Text:</strong> value (string), color, description</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", '>\n        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="cpu-cores-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="interactive-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <div class="code-block">', "</div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", `
+  return b2(_a41 || (_a41 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ', "; border-radius: 6px; font-size: 14px; font-family: monospace; color: ", ';">\n          <em>Click on tile actions or grid actions to see the result...</em>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div class="tile-config">\n          <div class="config-section">\n            <div class="config-title">Configuration Options</div>\n            <div class="config-description">\n              Each tile type supports different properties:\n              <ul style="margin: 8px 0; padding-left: 20px;">\n                <li><strong>Number:</strong> value, unit, color, description</li>\n                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>\n                <li><strong>Percentage:</strong> value (0-100), color, description</li>\n                <li><strong>Trend:</strong> value, unit, trendData array, description</li>\n                <li><strong>Text:</strong> value (string), color, description</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", '>\n        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="cpu-cores-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="interactive-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <div class="code-block">', "</div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", `
         ></dees-statsgrid>
 
         <div class="tile-config">
@@ -143486,8 +146160,8 @@ var DeesInputRichtext = (() => {
 
 // node_modules/.pnpm/@design.estate+dees-catalog@3.43.0_@tiptap+pm@2.27.2/node_modules/@design.estate/dees-catalog/dist_ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.js
 init_dist_ts29();
-var _a36;
-var demoFunc42 = () => b2(_a36 || (_a36 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .suggestions=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <div class="grid-layout">\n          <dees-input-tags\n            .label=', "\n            .placeholder=", "\n            .maxTags=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n          \n          <dees-input-tags\n            .label=", "\n            .placeholder=", "\n            .maxTags=", "\n            .suggestions=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n        </div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .required=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .value=", "\n          .disabled=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-form>\n          <dees-input-text\n            .label=", "\n            .placeholder=", "\n            .required=", "\n            .key=", '\n          ></dees-input-text>\n          \n          <div class="grid-layout">\n            <dees-input-tags\n              .label=', "\n              .placeholder=", "\n              .required=", "\n              .key=", "\n              .suggestions=", "\n            ></dees-input-tags>\n            \n            <dees-input-tags\n              .label=", "\n              .placeholder=", "\n              .key=", "\n              .maxTags=", "\n              .suggestions=", "\n            ></dees-input-tags>\n          </div>\n          \n          <dees-input-text\n            .label=", "\n            .inputType=", "\n            .placeholder=", "\n            .key=", "\n          ></dees-input-text>\n          \n          <dees-form-submit .text=", "></dees-form-submit>\n        </dees-form>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-input-tags\n          id="interactive-tags"\n          .label=', "\n          .placeholder=", "\n          .suggestions=", "\n          @change=", `
+var _a42;
+var demoFunc42 = () => b2(_a42 || (_a42 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .suggestions=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <div class="grid-layout">\n          <dees-input-tags\n            .label=', "\n            .placeholder=", "\n            .maxTags=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n          \n          <dees-input-tags\n            .label=", "\n            .placeholder=", "\n            .maxTags=", "\n            .suggestions=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n        </div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .required=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .value=", "\n          .disabled=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-form>\n          <dees-input-text\n            .label=", "\n            .placeholder=", "\n            .required=", "\n            .key=", '\n          ></dees-input-text>\n          \n          <div class="grid-layout">\n            <dees-input-tags\n              .label=', "\n              .placeholder=", "\n              .required=", "\n              .key=", "\n              .suggestions=", "\n            ></dees-input-tags>\n            \n            <dees-input-tags\n              .label=", "\n              .placeholder=", "\n              .key=", "\n              .maxTags=", "\n              .suggestions=", "\n            ></dees-input-tags>\n          </div>\n          \n          <dees-input-text\n            .label=", "\n            .inputType=", "\n            .placeholder=", "\n            .key=", "\n          ></dees-input-text>\n          \n          <dees-form-submit .text=", "></dees-form-submit>\n        </dees-form>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-input-tags\n          id="interactive-tags"\n          .label=', "\n          .placeholder=", "\n          .suggestions=", "\n          @change=", `
         ></dees-input-tags>
         
         <div class="tag-preview" id="tags-preview">
@@ -175759,9 +178433,9 @@ init_group_runtime();
 
 // ts_web/pages/sz-demo-app-shell.ts
 init_dist_ts29();
-var _SzDemoAppShell_decorators, _init34, _a37;
+var _SzDemoAppShell_decorators, _init40, _a43;
 _SzDemoAppShell_decorators = [t4("sz-demo-app-shell")];
-var SzDemoAppShell = class extends (_a37 = DeesElement) {
+var SzDemoAppShell = class extends (_a43 = DeesElement) {
   static styles = [
     cssManager.defaultStyles,
     i`
@@ -175907,6 +178581,18 @@ var SzDemoAppShell = class extends (_a37 = DeesElement) {
           iconName: "lucide:Key",
           content: "sz-demo-view-tokens"
         },
+        {
+          id: "mta",
+          name: "Email / MTA",
+          iconName: "lucide:Mail",
+          content: "sz-demo-view-mta"
+        },
+        {
+          id: "routes",
+          name: "Routes",
+          iconName: "lucide:Route",
+          content: "sz-demo-view-routes"
+        },
         {
           id: "settings",
           name: "Settings",
@@ -175922,7 +178608,7 @@ var SzDemoAppShell = class extends (_a37 = DeesElement) {
           },
           {
             name: "Infrastructure",
-            views: ["services", "network", "registries"]
+            views: ["services", "network", "registries", "mta", "routes"]
           },
           {
             name: "Administration",
@@ -175954,9 +178640,9 @@ var SzDemoAppShell = class extends (_a37 = DeesElement) {
     ]);
   }
 };
-_init34 = __decoratorStart(_a37);
-SzDemoAppShell = __decorateElement(_init34, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
-__runInitializers(_init34, 1, SzDemoAppShell);
+_init40 = __decoratorStart(_a43);
+SzDemoAppShell = __decorateElement(_init40, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
+__runInitializers(_init40, 1, SzDemoAppShell);
 
 // html/index.ts
 setupWccTools({