@serve.zone/catalog 2.2.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, _a41, 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 && (_a41 = _parentage_1.return)) _a41.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 _a41;
+        var _a44;
         if (teardown && teardown !== this) {
           if (this.closed) {
             execFinalizer(teardown);
@@ -1475,7 +1475,7 @@ var init_Subscription = __esm({
               }
               teardown._addParent(this);
             }
-            (this._finalizers = (_a41 = this._finalizers) !== null && _a41 !== void 0 ? _a41 : []).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 _a41 = context, errorThrown = _a41.errorThrown, error = _a41.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 _a41;
-  return (_a41 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a41 !== void 0 ? _a41 : 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 _a41 = _this, operator = _a41.operator, source = _a41.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 _a41;
-        return (_a41 = this.source) === null || _a41 === void 0 ? void 0 : _a41.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 _a41;
+        var _a44;
         if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
           var closed_1 = this.closed;
           _super.prototype.unsubscribe.call(this);
-          !closed_1 && ((_a41 = this.onFinalize) === null || _a41 === void 0 ? void 0 : _a41.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, _a41;
+          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 && (_a41 = _b.return)) _a41.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 _a41;
-          return ((_a41 = this.observers) === null || _a41 === void 0 ? void 0 : _a41.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 _a41 = this, hasError = _a41.hasError, isStopped = _a41.isStopped, observers = _a41.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 _a41 = this, hasError = _a41.hasError, thrownError = _a41.thrownError, isStopped = _a41.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 _a41, _b;
-        (_b = (_a41 = this.destination) === null || _a41 === void 0 ? void 0 : _a41.next) === null || _b === void 0 ? void 0 : _b.call(_a41, 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 _a41, _b;
-        (_b = (_a41 = this.destination) === null || _a41 === void 0 ? void 0 : _a41.error) === null || _b === void 0 ? void 0 : _b.call(_a41, 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 _a41, _b;
-        (_b = (_a41 = this.destination) === null || _a41 === void 0 ? void 0 : _a41.complete) === null || _b === void 0 ? void 0 : _b.call(_a41);
+        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 _a41, _b;
-        return (_b = (_a41 = this.source) === null || _a41 === void 0 ? void 0 : _a41.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 _a41 = this, hasError = _a41.hasError, thrownError = _a41.thrownError, _value2 = _a41._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 _a41 = this, isStopped = _a41.isStopped, _buffer = _a41._buffer, _infiniteTimeWindow = _a41._infiniteTimeWindow, _timestampProvider = _a41._timestampProvider, _windowTime = _a41._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 _a41 = this, _infiniteTimeWindow = _a41._infiniteTimeWindow, _buffer = _a41._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 _a41 = this, _bufferSize = _a41._bufferSize, _timestampProvider = _a41._timestampProvider, _buffer = _a41._buffer, _infiniteTimeWindow = _a41._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 _a41 = this, hasError = _a41.hasError, _hasValue = _a41._hasValue, _value2 = _a41._value, thrownError = _a41.thrownError, isStopped = _a41.isStopped, _isComplete = _a41._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 _a41 = this, _hasValue = _a41._hasValue, _value2 = _a41._value, _isComplete = _a41._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 _a41;
+        var _a44;
         if (delay2 === void 0) {
           delay2 = 0;
         }
@@ -2669,7 +2669,7 @@ var init_AsyncAction = __esm({
         }
         this.pending = true;
         this.delay = delay2;
-        this.id = (_a41 = this.id) !== null && _a41 !== void 0 ? _a41 : 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 _a41 = this, id = _a41.id, scheduler = _a41.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 _a41;
+        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 && ((_a41 = actions[actions.length - 1]) === null || _a41 === void 0 ? void 0 : _a41.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 _a41;
+        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 && ((_a41 = actions[actions.length - 1]) === null || _a41 === void 0 ? void 0 : _a41.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 _a41 = this, actions = _a41.actions, maxFrames = _a41.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, _a41, 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:
-          _a41 = _b.sent(), value2 = _a41.value, done = _a41.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, _a41;
+    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 && (_a41 = iterable_1.return)) _a41.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, _a41;
+  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 && (_a41 = asyncIterable_1.return))) return [3, 8];
-          return [4, _a41.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 _a41;
+        var _a44;
         var value2;
         var done;
         try {
-          _a41 = iterator2.next(), value2 = _a41.value, done = _a41.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 _a41, _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" ? (_a41 = observer.next) === null || _a41 === void 0 ? void 0 : _a41.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 _a41 = this, kind = _a41.kind, value2 = _a41.value, error = _a41.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 _a41;
-        return isFunction((_a41 = nextOrObserver) === null || _a41 === void 0 ? void 0 : _a41.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 _a41 = this, kind = _a41.kind, value2 = _a41.value, error = _a41.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 _a41 = isValidDate(config3) ? { first: config3 } : typeof config3 === "number" ? { each: config3 } : config3, first2 = _a41.first, each = _a41.each, _b = _a41.with, _with = _b === void 0 ? timeoutErrorFactory : _b, _c = _a41.scheduler, scheduler = _c === void 0 ? schedulerArg !== null && schedulerArg !== void 0 ? schedulerArg : asyncScheduler : _c, _d = _a41.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 _a41 = __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 = _a41[0], remove2 = _a41[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, _a41, 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 && (_a41 = buffers_1.return)) _a41.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, _a41;
+      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 && (_a41 = buffers_2.return)) _a41.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 _a41, _b;
+  var _a44, _b;
   var otherArgs = [];
   for (var _i = 1; _i < arguments.length; _i++) {
     otherArgs[_i - 1] = arguments[_i];
   }
-  var scheduler = (_a41 = popScheduler(otherArgs)) !== null && _a41 !== void 0 ? _a41 : 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, _a42;
+      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 && (_a42 = recordsCopy_1.return)) _a42.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 _a41 = config3 !== null && config3 !== void 0 ? config3 : {}, _b = _a41.leading, leading = _b === void 0 ? true : _b, _c = _a41.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 _a41 = _this, $el = _a41.$el, ctx = _a41.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 _a41 = this, $el = _a41.$el, ctx = _a41.ctx, currentOptions = _a41.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 _a41 = this, $el = _a41.$el, ctx = _a41.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 _a41 = this, $el = _a41.$el, ctx = _a41.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 _a41;
+            var _a44;
             var callback = options[type5];
             var callbackResult;
             var methodResult;
             if (isFunction2(callback)) {
               callbackResult = callback.apply(this, args.concat([this]));
             }
-            methodResult = (_a41 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a41, 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 _a41 = this, $el = _a41.$el, opts = _a41.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 _a41 = this, $el = _a41.$el, opts = _a41.ctx.opts;
+            var _a44 = this, $el = _a44.$el, opts = _a44.ctx.opts;
             if ($el) {
               if (click) {
                 removeEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -96702,6 +96702,7 @@ __export(elements_exports, {
   SzDemoViewMta: () => SzDemoViewMta,
   SzDemoViewNetwork: () => SzDemoViewNetwork,
   SzDemoViewRegistries: () => SzDemoViewRegistries,
+  SzDemoViewRoutes: () => SzDemoViewRoutes,
   SzDemoViewServices: () => SzDemoViewServices,
   SzDemoViewSettings: () => SzDemoViewSettings,
   SzDemoViewTokens: () => SzDemoViewTokens,
@@ -96720,6 +96721,8 @@ __export(elements_exports, {
   SzRegistryExternalView: () => SzRegistryExternalView,
   SzResourceUsageCard: () => SzResourceUsageCard,
   SzReverseProxyCard: () => SzReverseProxyCard,
+  SzRouteCard: () => SzRouteCard,
+  SzRouteListView: () => SzRouteListView,
   SzServiceCreateView: () => SzServiceCreateView,
   SzServiceDetailView: () => SzServiceDetailView,
   SzServicesBackupsView: () => SzServicesBackupsView,
@@ -105634,11 +105637,852 @@ __publicField(SzMtaDetailView, "styles", [
 ]);
 __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, _init30, _a30;
+var _SzDemoViewDashboard_decorators, _init32, _a32;
 _SzDemoViewDashboard_decorators = [t4("sz-demo-view-dashboard")];
-var SzDemoViewDashboard = class extends (_a30 = DeesElement) {
+var SzDemoViewDashboard = class extends (_a32 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -105774,21 +106618,21 @@ var SzDemoViewDashboard = class extends (_a30 = DeesElement) {
     `;
   }
 };
-_init30 = __decoratorStart(_a30);
-SzDemoViewDashboard = __decorateElement(_init30, 0, "SzDemoViewDashboard", _SzDemoViewDashboard_decorators, SzDemoViewDashboard);
-__runInitializers(_init30, 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, _a31, _SzDemoViewServices_decorators, _init31, _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 (_a31 = DeesElement, _currentView_dec2 = [r5()], _selectedService_dec = [r5()], _selectedPlatformService_dec = [r5()], _a31) {
+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(_init31, 8, this, "list")), __runInitializers(_init31, 11, this);
-    __privateAdd(this, _selectedService, __runInitializers(_init31, 12, this, null)), __runInitializers(_init31, 15, this);
-    __privateAdd(this, _selectedPlatformService, __runInitializers(_init31, 16, this, null)), __runInitializers(_init31, 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",
@@ -106069,14 +106913,14 @@ var SzDemoViewServices = class extends (_a31 = DeesElement, _currentView_dec2 =
   onDeactivate() {
   }
 };
-_init31 = __decoratorStart(_a31);
+_init33 = __decoratorStart(_a33);
 _currentView2 = new WeakMap();
 _selectedService = new WeakMap();
 _selectedPlatformService = new WeakMap();
-__decorateElement(_init31, 4, "currentView", _currentView_dec2, SzDemoViewServices, _currentView2);
-__decorateElement(_init31, 4, "selectedService", _selectedService_dec, SzDemoViewServices, _selectedService);
-__decorateElement(_init31, 4, "selectedPlatformService", _selectedPlatformService_dec, SzDemoViewServices, _selectedPlatformService);
-SzDemoViewServices = __decorateElement(_init31, 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`
@@ -106208,18 +107052,18 @@ __publicField(SzDemoViewServices, "styles", [
       }
     `
 ]);
-__runInitializers(_init31, 1, SzDemoViewServices);
+__runInitializers(_init33, 1, SzDemoViewServices);
 
 // ts_web/elements/sz-demo-view-network.ts
 init_dist_ts29();
-var _selectedDomain_dec, _currentTab_dec, _a32, _SzDemoViewNetwork_decorators, _init32, _currentTab, _selectedDomain;
+var _selectedDomain_dec, _currentTab_dec, _a34, _SzDemoViewNetwork_decorators, _init34, _currentTab, _selectedDomain;
 _SzDemoViewNetwork_decorators = [t4("sz-demo-view-network")];
-var SzDemoViewNetwork = class extends (_a32 = DeesElement, _currentTab_dec = [r5()], _selectedDomain_dec = [r5()], _a32) {
+var SzDemoViewNetwork = class extends (_a34 = DeesElement, _currentTab_dec = [r5()], _selectedDomain_dec = [r5()], _a34) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab, __runInitializers(_init32, 8, this, "proxy")), __runInitializers(_init32, 11, this);
-    __privateAdd(this, _selectedDomain, __runInitializers(_init32, 12, this, null)), __runInitializers(_init32, 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" },
@@ -106467,12 +107311,12 @@ var SzDemoViewNetwork = class extends (_a32 = DeesElement, _currentTab_dec = [r5
     `;
   }
 };
-_init32 = __decoratorStart(_a32);
+_init34 = __decoratorStart(_a34);
 _currentTab = new WeakMap();
 _selectedDomain = new WeakMap();
-__decorateElement(_init32, 4, "currentTab", _currentTab_dec, SzDemoViewNetwork, _currentTab);
-__decorateElement(_init32, 4, "selectedDomain", _selectedDomain_dec, SzDemoViewNetwork, _selectedDomain);
-SzDemoViewNetwork = __decorateElement(_init32, 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`
@@ -106560,17 +107404,17 @@ __publicField(SzDemoViewNetwork, "styles", [
       }
     `
 ]);
-__runInitializers(_init32, 1, SzDemoViewNetwork);
+__runInitializers(_init34, 1, SzDemoViewNetwork);
 
 // ts_web/elements/sz-demo-view-registries.ts
 init_dist_ts29();
-var _currentTab_dec2, _a33, _SzDemoViewRegistries_decorators, _init33, _currentTab2;
+var _currentTab_dec2, _a35, _SzDemoViewRegistries_decorators, _init35, _currentTab2;
 _SzDemoViewRegistries_decorators = [t4("sz-demo-view-registries")];
-var SzDemoViewRegistries = class extends (_a33 = DeesElement, _currentTab_dec2 = [r5()], _a33) {
+var SzDemoViewRegistries = class extends (_a35 = DeesElement, _currentTab_dec2 = [r5()], _a35) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab2, __runInitializers(_init33, 8, this, "onebox")), __runInitializers(_init33, 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 },
@@ -106687,10 +107531,10 @@ var SzDemoViewRegistries = class extends (_a33 = DeesElement, _currentTab_dec2 =
     `;
   }
 };
-_init33 = __decoratorStart(_a33);
+_init35 = __decoratorStart(_a35);
 _currentTab2 = new WeakMap();
-__decorateElement(_init33, 4, "currentTab", _currentTab_dec2, SzDemoViewRegistries, _currentTab2);
-SzDemoViewRegistries = __decorateElement(_init33, 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`
@@ -106758,13 +107602,13 @@ __publicField(SzDemoViewRegistries, "styles", [
       }
     `
 ]);
-__runInitializers(_init33, 1, SzDemoViewRegistries);
+__runInitializers(_init35, 1, SzDemoViewRegistries);
 
 // ts_web/elements/sz-demo-view-tokens.ts
 init_dist_ts29();
-var _SzDemoViewTokens_decorators, _init34, _a34;
+var _SzDemoViewTokens_decorators, _init36, _a36;
 _SzDemoViewTokens_decorators = [t4("sz-demo-view-tokens")];
-var SzDemoViewTokens = class extends (_a34 = DeesElement) {
+var SzDemoViewTokens = class extends (_a36 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -106855,15 +107699,15 @@ var SzDemoViewTokens = class extends (_a34 = DeesElement) {
     `;
   }
 };
-_init34 = __decoratorStart(_a34);
-SzDemoViewTokens = __decorateElement(_init34, 0, "SzDemoViewTokens", _SzDemoViewTokens_decorators, SzDemoViewTokens);
-__runInitializers(_init34, 1, SzDemoViewTokens);
+_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, _init35, _a35;
+var _SzDemoViewSettings_decorators, _init37, _a37;
 _SzDemoViewSettings_decorators = [t4("sz-demo-view-settings")];
-var SzDemoViewSettings = class extends (_a35 = DeesElement) {
+var SzDemoViewSettings = class extends (_a37 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -106970,21 +107814,21 @@ var SzDemoViewSettings = class extends (_a35 = DeesElement) {
     `;
   }
 };
-_init35 = __decoratorStart(_a35);
-SzDemoViewSettings = __decorateElement(_init35, 0, "SzDemoViewSettings", _SzDemoViewSettings_decorators, SzDemoViewSettings);
-__runInitializers(_init35, 1, SzDemoViewSettings);
+_init37 = __decoratorStart(_a37);
+SzDemoViewSettings = __decorateElement(_init37, 0, "SzDemoViewSettings", _SzDemoViewSettings_decorators, SzDemoViewSettings);
+__runInitializers(_init37, 1, SzDemoViewSettings);
 
 // ts_web/elements/sz-demo-view-mta.ts
 init_dist_ts29();
-var _currentDirectionFilter_dec, _selectedEmail_dec, _currentView_dec3, _a36, _SzDemoViewMta_decorators, _init36, _currentView3, _selectedEmail, _currentDirectionFilter;
+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 (_a36 = DeesElement, _currentView_dec3 = [r5()], _selectedEmail_dec = [r5()], _currentDirectionFilter_dec = [r5()], _a36) {
+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(_init36, 8, this, "list")), __runInitializers(_init36, 11, this);
-    __privateAdd(this, _selectedEmail, __runInitializers(_init36, 12, this, null)), __runInitializers(_init36, 15, this);
-    __privateAdd(this, _currentDirectionFilter, __runInitializers(_init36, 16, this, "all")), __runInitializers(_init36, 19, this);
+    __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" },
@@ -107277,14 +108121,14 @@ var SzDemoViewMta = class extends (_a36 = DeesElement, _currentView_dec3 = [r5()
     }
   }
 };
-_init36 = __decoratorStart(_a36);
+_init38 = __decoratorStart(_a38);
 _currentView3 = new WeakMap();
 _selectedEmail = new WeakMap();
 _currentDirectionFilter = new WeakMap();
-__decorateElement(_init36, 4, "currentView", _currentView_dec3, SzDemoViewMta, _currentView3);
-__decorateElement(_init36, 4, "selectedEmail", _selectedEmail_dec, SzDemoViewMta, _selectedEmail);
-__decorateElement(_init36, 4, "currentDirectionFilter", _currentDirectionFilter_dec, SzDemoViewMta, _currentDirectionFilter);
-SzDemoViewMta = __decorateElement(_init36, 0, "SzDemoViewMta", _SzDemoViewMta_decorators, SzDemoViewMta);
+__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`
@@ -107297,7 +108141,348 @@ __publicField(SzDemoViewMta, "styles", [
       }
     `
 ]);
-__runInitializers(_init36, 1, SzDemoViewMta);
+__runInitializers(_init38, 1, SzDemoViewMta);
+
+// 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"]
+        }
+      }
+    ]);
+  }
+  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`
+      <sz-route-list-view
+        .routes=${this.filteredRoutes}
+        @route-click=${(e11) => {
+      console.log("Route clicked:", e11.detail.name);
+    }}
+      ></sz-route-list-view>
+    `;
+  }
+};
+_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 = {};
@@ -111015,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 _a37;
+var _a40;
 var demoFunc5 = () => {
-  return b2(_a37 || (_a37 = __template([`
+  return b2(_a40 || (_a40 = __template([`
     <dees-demowrapper>
       <style>
         .demo-container {
@@ -112069,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 _a38;
+var _a41;
 var generateCpuCores = (count2) => {
   return Array.from({ length: count2 }, (_4, i11) => ({
     id: i11,
@@ -112078,7 +113263,7 @@ var generateCpuCores = (count2) => {
   }));
 };
 var demoFunc7 = () => {
-  return b2(_a38 || (_a38 = __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">
@@ -144975,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 _a39;
-var demoFunc42 = () => b2(_a39 || (_a39 = __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">
@@ -177248,9 +178433,9 @@ init_group_runtime();
 
 // ts_web/pages/sz-demo-app-shell.ts
 init_dist_ts29();
-var _SzDemoAppShell_decorators, _init37, _a40;
+var _SzDemoAppShell_decorators, _init40, _a43;
 _SzDemoAppShell_decorators = [t4("sz-demo-app-shell")];
-var SzDemoAppShell = class extends (_a40 = DeesElement) {
+var SzDemoAppShell = class extends (_a43 = DeesElement) {
   static styles = [
     cssManager.defaultStyles,
     i`
@@ -177402,6 +178587,12 @@ var SzDemoAppShell = class extends (_a40 = DeesElement) {
           iconName: "lucide:Mail",
           content: "sz-demo-view-mta"
         },
+        {
+          id: "routes",
+          name: "Routes",
+          iconName: "lucide:Route",
+          content: "sz-demo-view-routes"
+        },
         {
           id: "settings",
           name: "Settings",
@@ -177417,7 +178608,7 @@ var SzDemoAppShell = class extends (_a40 = DeesElement) {
           },
           {
             name: "Infrastructure",
-            views: ["services", "network", "registries", "mta"]
+            views: ["services", "network", "registries", "mta", "routes"]
           },
           {
             name: "Administration",
@@ -177449,9 +178640,9 @@ var SzDemoAppShell = class extends (_a40 = DeesElement) {
     ]);
   }
 };
-_init37 = __decoratorStart(_a40);
-SzDemoAppShell = __decorateElement(_init37, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
-__runInitializers(_init37, 1, SzDemoAppShell);
+_init40 = __decoratorStart(_a43);
+SzDemoAppShell = __decorateElement(_init40, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
+__runInitializers(_init40, 1, SzDemoAppShell);
 
 // html/index.ts
 setupWccTools({