@serve.zone/catalog 2.2.0 → 2.4.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, _a47, 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 && (_a47 = _parentage_1.return)) _a47.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 _a47;
         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 = (_a47 = this._finalizers) !== null && _a47 !== void 0 ? _a47 : []).push(teardown);
           }
         }
       };
@@ -1611,7 +1611,7 @@ function errorContext(cb) {
     }
     cb();
     if (isRoot) {
-      var _a41 = context, errorThrown = _a41.errorThrown, error = _a41.error;
+      var _a47 = context, errorThrown = _a47.errorThrown, error = _a47.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 _a47;
+  return (_a47 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a47 !== void 0 ? _a47 : 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 _a47 = _this, operator = _a47.operator, source = _a47.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 _a47;
+        return (_a47 = this.source) === null || _a47 === void 0 ? void 0 : _a47.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 _a47;
         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 && ((_a47 = this.onFinalize) === null || _a47 === void 0 ? void 0 : _a47.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, _a47;
           _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 && (_a47 = _b.return)) _a47.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 _a47;
+          return ((_a47 = this.observers) === null || _a47 === void 0 ? void 0 : _a47.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 _a47 = this, hasError = _a47.hasError, isStopped = _a47.isStopped, observers = _a47.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 _a47 = this, hasError = _a47.hasError, thrownError = _a47.thrownError, isStopped = _a47.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 _a47, _b;
+        (_b = (_a47 = this.destination) === null || _a47 === void 0 ? void 0 : _a47.next) === null || _b === void 0 ? void 0 : _b.call(_a47, 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 _a47, _b;
+        (_b = (_a47 = this.destination) === null || _a47 === void 0 ? void 0 : _a47.error) === null || _b === void 0 ? void 0 : _b.call(_a47, 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 _a47, _b;
+        (_b = (_a47 = this.destination) === null || _a47 === void 0 ? void 0 : _a47.complete) === null || _b === void 0 ? void 0 : _b.call(_a47);
       };
       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 _a47, _b;
+        return (_b = (_a47 = this.source) === null || _a47 === void 0 ? void 0 : _a47.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 _a47 = this, hasError = _a47.hasError, thrownError = _a47.thrownError, _value2 = _a47._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 _a47 = this, isStopped = _a47.isStopped, _buffer = _a47._buffer, _infiniteTimeWindow = _a47._infiniteTimeWindow, _timestampProvider = _a47._timestampProvider, _windowTime = _a47._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 _a47 = this, _infiniteTimeWindow = _a47._infiniteTimeWindow, _buffer = _a47._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 _a47 = this, _bufferSize = _a47._bufferSize, _timestampProvider = _a47._timestampProvider, _buffer = _a47._buffer, _infiniteTimeWindow = _a47._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 _a47 = this, hasError = _a47.hasError, _hasValue = _a47._hasValue, _value2 = _a47._value, thrownError = _a47.thrownError, isStopped = _a47.isStopped, _isComplete = _a47._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 _a47 = this, _hasValue = _a47._hasValue, _value2 = _a47._value, _isComplete = _a47._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 _a47;
         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 = (_a47 = this.id) !== null && _a47 !== void 0 ? _a47 : 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 _a47 = this, id = _a47.id, scheduler = _a47.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 _a47;
         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 && ((_a47 = actions[actions.length - 1]) === null || _a47 === void 0 ? void 0 : _a47.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 _a47;
         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 && ((_a47 = actions[actions.length - 1]) === null || _a47 === void 0 ? void 0 : _a47.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 _a47 = this, actions = _a47.actions, maxFrames = _a47.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, _a47, 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;
+          _a47 = _b.sent(), value2 = _a47.value, done = _a47.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, _a47;
     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 && (_a47 = iterable_1.return)) _a47.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, _a47;
   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 && (_a47 = asyncIterable_1.return))) return [3, 8];
+          return [4, _a47.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 _a47;
         var value2;
         var done;
         try {
-          _a41 = iterator2.next(), value2 = _a41.value, done = _a41.done;
+          _a47 = iterator2.next(), value2 = _a47.value, done = _a47.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 _a47, _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" ? (_a47 = observer.next) === null || _a47 === void 0 ? void 0 : _a47.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 _a47 = this, kind = _a47.kind, value2 = _a47.value, error = _a47.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 _a47;
+        return isFunction((_a47 = nextOrObserver) === null || _a47 === void 0 ? void 0 : _a47.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 _a47 = this, kind = _a47.kind, value2 = _a47.value, error = _a47.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 _a47 = isValidDate(config3) ? { first: config3 } : typeof config3 === "number" ? { each: config3 } : config3, first2 = _a47.first, each = _a47.each, _b = _a47.with, _with = _b === void 0 ? timeoutErrorFactory : _b, _c = _a47.scheduler, scheduler = _c === void 0 ? schedulerArg !== null && schedulerArg !== void 0 ? schedulerArg : asyncScheduler : _c, _d = _a47.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 _a47 = __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 = _a47[0], remove2 = _a47[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, _a47, 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 && (_a47 = buffers_1.return)) _a47.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, _a47;
       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 && (_a47 = buffers_2.return)) _a47.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 _a47, _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 = (_a47 = popScheduler(otherArgs)) !== null && _a47 !== void 0 ? _a47 : 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, _a48;
       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 && (_a48 = recordsCopy_1.return)) _a48.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 _a47 = config3 !== null && config3 !== void 0 ? config3 : {}, _b = _a47.leading, leading = _b === void 0 ? true : _b, _c = _a47.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 _a47 = _this, $el = _a47.$el, ctx = _a47.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 _a47 = this, $el = _a47.$el, ctx = _a47.ctx, currentOptions = _a47.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 _a47 = this, $el = _a47.$el, ctx = _a47.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 _a47 = this, $el = _a47.$el, ctx = _a47.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 _a47;
             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 = (_a47 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a47, args);
             return callbackResult !== void 0 ? callbackResult : methodResult;
           };
           SweetScroll4.prototype.bind = function(click, stop) {
-            var _a41 = this, $el = _a41.$el, opts = _a41.ctx.opts;
+            var _a47 = this, $el = _a47.$el, opts = _a47.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 _a47 = this, $el = _a47.$el, opts = _a47.ctx.opts;
             if ($el) {
               if (click) {
                 removeEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -54869,26 +54869,26 @@ var init_fontawesome_svg_core = __esm({
       }
     };
     parse9 = {
-      icon: function icon(_icon2) {
-        if (_icon2 === null) {
+      icon: function icon(_icon3) {
+        if (_icon3 === null) {
           return null;
         }
-        if (_typeof(_icon2) === "object" && _icon2.prefix && _icon2.iconName) {
+        if (_typeof(_icon3) === "object" && _icon3.prefix && _icon3.iconName) {
           return {
-            prefix: _icon2.prefix,
-            iconName: byAlias(_icon2.prefix, _icon2.iconName) || _icon2.iconName
+            prefix: _icon3.prefix,
+            iconName: byAlias(_icon3.prefix, _icon3.iconName) || _icon3.iconName
           };
         }
-        if (Array.isArray(_icon2) && _icon2.length === 2) {
-          var iconName = _icon2[1].indexOf("fa-") === 0 ? _icon2[1].slice(3) : _icon2[1];
-          var prefix4 = getCanonicalPrefix(_icon2[0]);
+        if (Array.isArray(_icon3) && _icon3.length === 2) {
+          var iconName = _icon3[1].indexOf("fa-") === 0 ? _icon3[1].slice(3) : _icon3[1];
+          var prefix4 = getCanonicalPrefix(_icon3[0]);
           return {
             prefix: prefix4,
             iconName: byAlias(prefix4, iconName) || iconName
           };
         }
-        if (typeof _icon2 === "string" && (_icon2.indexOf("".concat(config2.cssPrefix, "-")) > -1 || _icon2.match(ICON_SELECTION_SYNTAX_PATTERN))) {
-          var canonicalIcon = getCanonicalIcon(_icon2.split(" "), {
+        if (typeof _icon3 === "string" && (_icon3.indexOf("".concat(config2.cssPrefix, "-")) > -1 || _icon3.match(ICON_SELECTION_SYNTAX_PATTERN))) {
+          var canonicalIcon = getCanonicalIcon(_icon3.split(" "), {
             skipLookups: true
           });
           return {
@@ -54896,11 +54896,11 @@ var init_fontawesome_svg_core = __esm({
             iconName: byAlias(canonicalIcon.prefix, canonicalIcon.iconName) || canonicalIcon.iconName
           };
         }
-        if (typeof _icon2 === "string") {
+        if (typeof _icon3 === "string") {
           var _prefix = getDefaultUsablePrefix();
           return {
             prefix: _prefix,
-            iconName: byAlias(_prefix, _icon2) || _icon2
+            iconName: byAlias(_prefix, _icon3) || _icon3
           };
         }
       }
@@ -96697,11 +96697,15 @@ var setupWccTools = (configOrElements, pagesArg) => {
 var elements_exports = {};
 __export(elements_exports, {
   SzCertificatesCard: () => SzCertificatesCard,
+  SzConfigOverview: () => SzConfigOverview,
+  SzConfigSection: () => SzConfigSection,
   SzDashboardView: () => SzDashboardView,
+  SzDemoViewConfig: () => SzDemoViewConfig,
   SzDemoViewDashboard: () => SzDemoViewDashboard,
   SzDemoViewMta: () => SzDemoViewMta,
   SzDemoViewNetwork: () => SzDemoViewNetwork,
   SzDemoViewRegistries: () => SzDemoViewRegistries,
+  SzDemoViewRoutes: () => SzDemoViewRoutes,
   SzDemoViewServices: () => SzDemoViewServices,
   SzDemoViewSettings: () => SzDemoViewSettings,
   SzDemoViewTokens: () => SzDemoViewTokens,
@@ -96720,6 +96724,8 @@ __export(elements_exports, {
   SzRegistryExternalView: () => SzRegistryExternalView,
   SzResourceUsageCard: () => SzResourceUsageCard,
   SzReverseProxyCard: () => SzReverseProxyCard,
+  SzRouteCard: () => SzRouteCard,
+  SzRouteListView: () => SzRouteListView,
   SzServiceCreateView: () => SzServiceCreateView,
   SzServiceDetailView: () => SzServiceDetailView,
   SzServicesBackupsView: () => SzServicesBackupsView,
@@ -105634,11 +105640,1435 @@ __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-config-section.ts
+init_dist_ts29();
+var _isCollapsed_dec, _collapsed_dec, _collapsible_dec, _fields_dec, _status_dec2, _icon_dec2, _subtitle_dec2, _title_dec2, _a32, _SzConfigSection_decorators, _init32, _title2, _subtitle2, _icon2, _status2, _fields, _collapsible, _collapsed, _isCollapsed;
+_SzConfigSection_decorators = [t4("sz-config-section")];
+var SzConfigSection = class extends (_a32 = DeesElement, _title_dec2 = [n5({ type: String })], _subtitle_dec2 = [n5({ type: String })], _icon_dec2 = [n5({ type: String })], _status_dec2 = [n5({ type: String })], _fields_dec = [n5({ type: Array })], _collapsible_dec = [n5({ type: Boolean })], _collapsed_dec = [n5({ type: Boolean })], _isCollapsed_dec = [r5()], _a32) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _title2, __runInitializers(_init32, 8, this, "")), __runInitializers(_init32, 11, this);
+    __privateAdd(this, _subtitle2, __runInitializers(_init32, 12, this, "")), __runInitializers(_init32, 15, this);
+    __privateAdd(this, _icon2, __runInitializers(_init32, 16, this, "")), __runInitializers(_init32, 19, this);
+    __privateAdd(this, _status2, __runInitializers(_init32, 20, this, "enabled")), __runInitializers(_init32, 23, this);
+    __privateAdd(this, _fields, __runInitializers(_init32, 24, this, [])), __runInitializers(_init32, 27, this);
+    __privateAdd(this, _collapsible, __runInitializers(_init32, 28, this, false)), __runInitializers(_init32, 31, this);
+    __privateAdd(this, _collapsed, __runInitializers(_init32, 32, this, false)), __runInitializers(_init32, 35, this);
+    __privateAdd(this, _isCollapsed, __runInitializers(_init32, 36, this, false)), __runInitializers(_init32, 39, this);
+  }
+  async connectedCallback() {
+    await super.connectedCallback();
+    this.isCollapsed = this.collapsed;
+    if (this.collapsible) {
+      this.setAttribute("collapsible", "");
+    }
+  }
+  render() {
+    const statusLabels = {
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "not-configured": "Not Configured",
+      "warning": "Warning"
+    };
+    return b2`
+      <div class="section">
+        <div
+          class="section-header"
+          @click=${() => {
+      if (this.collapsible) {
+        this.isCollapsed = !this.isCollapsed;
+      }
+    }}
+        >
+          <div class="header-left">
+            ${this.icon ? b2`
+              <div class="header-icon">
+                <dees-icon .icon=${this.icon}></dees-icon>
+              </div>
+            ` : ""}
+            <div class="header-text">
+              <div class="header-title">${this.title}</div>
+              ${this.subtitle ? b2`<div class="header-subtitle">${this.subtitle}</div>` : ""}
+            </div>
+          </div>
+          <div class="header-right">
+            ${this.status ? b2`
+              <span class="status-badge ${this.status}">
+                <span class="status-dot"></span>
+                ${statusLabels[this.status] || this.status}
+              </span>
+            ` : ""}
+            ${this.collapsible ? b2`
+              <span class="chevron ${this.isCollapsed ? "collapsed" : ""}">
+                <dees-icon .icon=${"lucide:chevronDown"}></dees-icon>
+              </span>
+            ` : ""}
+          </div>
+        </div>
+        <div class="section-content ${this.isCollapsed ? "collapsed" : ""}">
+          ${this.fields.map((field) => this.renderField(field))}
+          <div class="slot-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderField(field) {
+    return b2`
+      <div class="field-row">
+        <div class="field-key">${field.key}</div>
+        <div>
+          ${this.renderFieldValue(field)}
+          ${field.description ? b2`<div class="field-description">${field.description}</div>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderFieldValue(field) {
+    const value2 = field.value;
+    const type5 = field.type || this.inferType(value2);
+    if (value2 === null || value2 === void 0) {
+      return b2`<span class="field-value null-value">Not configured</span>`;
+    }
+    switch (type5) {
+      case "boolean":
+        return b2`
+          <span class="bool-value ${value2 ? "true" : "false"}">
+            <span class="bool-dot"></span>
+            ${value2 ? "Enabled" : "Disabled"}
+          </span>
+        `;
+      case "pills":
+        if (Array.isArray(value2) && value2.length === 0) {
+          return b2`<span class="field-value null-value">None</span>`;
+        }
+        return b2`
+          <div class="pills">
+            ${value2.map((v5) => b2`<span class="pill">${v5}</span>`)}
+          </div>
+        `;
+      case "code":
+        return b2`<span class="code-value">${String(value2)}</span>`;
+      case "badge":
+        return b2`<span class="badge-value">${String(value2)}</span>`;
+      case "link":
+        return b2`
+          <span
+            class="link-value"
+            @click=${() => {
+          if (field.linkTo) {
+            this.dispatchEvent(new CustomEvent("navigate", {
+              detail: { target: field.linkTo },
+              bubbles: true,
+              composed: true
+            }));
+          }
+        }}
+          >${String(value2)}</span>
+        `;
+      default:
+        return b2`<span class="field-value">${String(value2)}</span>`;
+    }
+  }
+  inferType(value2) {
+    if (typeof value2 === "boolean") return "boolean";
+    if (Array.isArray(value2)) return "pills";
+    return "text";
+  }
+};
+_init32 = __decoratorStart(_a32);
+_title2 = new WeakMap();
+_subtitle2 = new WeakMap();
+_icon2 = new WeakMap();
+_status2 = new WeakMap();
+_fields = new WeakMap();
+_collapsible = new WeakMap();
+_collapsed = new WeakMap();
+_isCollapsed = new WeakMap();
+__decorateElement(_init32, 4, "title", _title_dec2, SzConfigSection, _title2);
+__decorateElement(_init32, 4, "subtitle", _subtitle_dec2, SzConfigSection, _subtitle2);
+__decorateElement(_init32, 4, "icon", _icon_dec2, SzConfigSection, _icon2);
+__decorateElement(_init32, 4, "status", _status_dec2, SzConfigSection, _status2);
+__decorateElement(_init32, 4, "fields", _fields_dec, SzConfigSection, _fields);
+__decorateElement(_init32, 4, "collapsible", _collapsible_dec, SzConfigSection, _collapsible);
+__decorateElement(_init32, 4, "collapsed", _collapsed_dec, SzConfigSection, _collapsed);
+__decorateElement(_init32, 4, "isCollapsed", _isCollapsed_dec, SzConfigSection, _isCollapsed);
+SzConfigSection = __decorateElement(_init32, 0, "SzConfigSection", _SzConfigSection_decorators, SzConfigSection);
+__publicField(SzConfigSection, "demo", () => b2`
+    <sz-config-section
+      title="SmartProxy"
+      subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
+      icon="lucide:network"
+      status="enabled"
+      .fields=${[
+  { key: "Route Count", value: 12 },
+  { key: "ACME Enabled", value: true, type: "boolean" },
+  { key: "Account Email", value: "admin@example.com" },
+  { key: "Use Production", value: true, type: "boolean" },
+  { key: "Auto Renew", value: true, type: "boolean" },
+  { key: "Renew Threshold", value: "30 days" }
+]}
+    ></sz-config-section>
+    <sz-config-section
+      title="Email Server"
+      subtitle="SMTP email handling with smartmta"
+      icon="lucide:mail"
+      status="disabled"
+      .fields=${[
+  { key: "Ports", value: ["25", "465", "587"], type: "pills" },
+  { key: "Hostname", value: null },
+  { key: "Domains", value: ["example.com", "mail.example.com"], type: "pills" }
+]}
+    ></sz-config-section>
+    <sz-config-section
+      title="DNS Server"
+      subtitle="Authoritative DNS with smartdns"
+      icon="lucide:globe"
+      status="not-configured"
+      collapsible
+      .fields=${[
+  { key: "Port", value: 53 },
+  { key: "NS Domains", value: ["ns1.example.com", "ns2.example.com"], type: "pills" }
+]}
+    ></sz-config-section>
+  `);
+__publicField(SzConfigSection, "demoGroups", ["Configuration"]);
+__publicField(SzConfigSection, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+        margin-bottom: 16px;
+      }
+
+      .section {
+        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
+        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 20px;
+        background: ${cssManager.bdTheme("#f4f4f5", "#18181b")};
+        border-bottom: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        cursor: default;
+        user-select: none;
+      }
+
+      :host([collapsible]) .section-header {
+        cursor: pointer;
+      }
+
+      :host([collapsible]) .section-header:hover {
+        background: ${cssManager.bdTheme("#ebebed", "#1c1c1f")};
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+      }
+
+      .header-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: ${cssManager.bdTheme("#e4e4e7", "#27272a")};
+        border-radius: 8px;
+        flex-shrink: 0;
+      }
+
+      .header-icon dees-icon {
+        font-size: 18px;
+        color: ${cssManager.bdTheme("#52525b", "#a1a1aa")};
+      }
+
+      .header-text {
+        min-width: 0;
+      }
+
+      .header-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        line-height: 1.3;
+      }
+
+      .header-subtitle {
+        font-size: 12px;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        line-height: 1.3;
+        margin-top: 1px;
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
+      }
+
+      /* Status badge */
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 3px 10px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      .status-badge.enabled {
+        background: ${cssManager.bdTheme("#dcfce7", "rgba(34,197,94,0.2)")};
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .status-badge.disabled {
+        background: ${cssManager.bdTheme("#fee2e2", "rgba(239,68,68,0.2)")};
+        color: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      .status-badge.not-configured {
+        background: ${cssManager.bdTheme("#f4f4f5", "rgba(113,113,122,0.2)")};
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+      }
+
+      .status-badge.warning {
+        background: ${cssManager.bdTheme("#fef3c7", "rgba(245,158,11,0.15)")};
+        color: ${cssManager.bdTheme("#92400e", "#fbbf24")};
+      }
+
+      .status-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+      }
+
+      .status-badge.enabled .status-dot {
+        background: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .status-badge.disabled .status-dot {
+        background: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      .status-badge.not-configured .status-dot {
+        background: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+      }
+
+      .status-badge.warning .status-dot {
+        background: ${cssManager.bdTheme("#f59e0b", "#fbbf24")};
+      }
+
+      /* Chevron */
+      .chevron {
+        display: flex;
+        align-items: center;
+        transition: transform 200ms ease;
+      }
+
+      .chevron.collapsed {
+        transform: rotate(-90deg);
+      }
+
+      .chevron dees-icon {
+        font-size: 16px;
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+      }
+
+      /* Content */
+      .section-content {
+        padding: 0;
+      }
+
+      .section-content.collapsed {
+        display: none;
+      }
+
+      /* Field rows */
+      .field-row {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding: 10px 20px;
+        border-bottom: 1px solid ${cssManager.bdTheme("#f4f4f5", "#1a1a1e")};
+        gap: 16px;
+      }
+
+      .field-row:last-child {
+        border-bottom: none;
+      }
+
+      .field-key {
+        font-size: 13px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        flex-shrink: 0;
+        min-width: 140px;
+        padding-top: 1px;
+      }
+
+      .field-value {
+        font-size: 13px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        text-align: right;
+        word-break: break-all;
+      }
+
+      .field-value.null-value {
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+        font-style: italic;
+        font-family: inherit;
+      }
+
+      /* Boolean display */
+      .bool-value {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        font-family: inherit;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .bool-value.true {
+        color: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .bool-value.false {
+        color: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      .bool-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+      }
+
+      .bool-value.true .bool-dot {
+        background: ${cssManager.bdTheme("#16a34a", "#22c55e")};
+      }
+
+      .bool-value.false .bool-dot {
+        background: ${cssManager.bdTheme("#dc2626", "#ef4444")};
+      }
+
+      /* Pills */
+      .pills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        justify-content: flex-end;
+      }
+
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 9px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        background: ${cssManager.bdTheme("#eff6ff", "rgba(59,130,246,0.1)")};
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      }
+
+      /* Code value */
+      .code-value {
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        font-size: 12px;
+        background: ${cssManager.bdTheme("#f4f4f5", "#18181b")};
+        padding: 2px 8px;
+        border-radius: 4px;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      }
+
+      /* Link value */
+      .link-value {
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+        cursor: pointer;
+        text-decoration: none;
+        font-family: inherit;
+        font-size: 13px;
+      }
+
+      .link-value:hover {
+        text-decoration: underline;
+      }
+
+      /* Description hint */
+      .field-description {
+        font-size: 11px;
+        color: ${cssManager.bdTheme("#a1a1aa", "#52525b")};
+        margin-top: 3px;
+        text-align: right;
+      }
+
+      /* Slot for custom content */
+      .slot-content {
+        border-top: 1px solid ${cssManager.bdTheme("#f4f4f5", "#1a1a1e")};
+      }
+
+      .slot-content:empty {
+        display: none;
+        border-top: none;
+      }
+
+      /* Badge type */
+      .badge-value {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 9px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme("#f4f4f5", "#27272a")};
+        color: ${cssManager.bdTheme("#52525b", "#a1a1aa")};
+      }
+    `
+]);
+__runInitializers(_init32, 1, SzConfigSection);
+
+// ts_web/elements/sz-config-overview.ts
+init_dist_ts29();
+var _infoText_dec, _heading_dec, _a33, _SzConfigOverview_decorators, _init33, _heading, _infoText;
+_SzConfigOverview_decorators = [t4("sz-config-overview")];
+var SzConfigOverview = class extends (_a33 = DeesElement, _heading_dec = [n5({ type: String })], _infoText_dec = [n5({ type: String })], _a33) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _heading, __runInitializers(_init33, 8, this, "")), __runInitializers(_init33, 11, this);
+    __privateAdd(this, _infoText, __runInitializers(_init33, 12, this, "")), __runInitializers(_init33, 15, this);
+  }
+  render() {
+    return b2`
+      ${this.heading ? b2`<div class="heading">${this.heading}</div>` : ""}
+      ${this.infoText ? b2`
+        <div class="info-banner">
+          <dees-icon .icon=${"lucide:info"}></dees-icon>
+          <span>${this.infoText}</span>
+        </div>
+      ` : ""}
+      <slot></slot>
+    `;
+  }
+};
+_init33 = __decoratorStart(_a33);
+_heading = new WeakMap();
+_infoText = new WeakMap();
+__decorateElement(_init33, 4, "heading", _heading_dec, SzConfigOverview, _heading);
+__decorateElement(_init33, 4, "infoText", _infoText_dec, SzConfigOverview, _infoText);
+SzConfigOverview = __decorateElement(_init33, 0, "SzConfigOverview", _SzConfigOverview_decorators, SzConfigOverview);
+__publicField(SzConfigOverview, "demo", () => b2`<sz-config-overview
+    heading="Configuration"
+    infoText="This is a read-only view of the current running configuration."
+  >
+    <div style="padding: 20px; text-align: center; color: #71717a; font-size: 14px;">
+      Place &lt;sz-config-section&gt; elements here
+    </div>
+  </sz-config-overview>`);
+__publicField(SzConfigOverview, "demoGroups", ["Configuration"]);
+__publicField(SzConfigOverview, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+      }
+
+      .heading {
+        font-size: 20px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        margin-bottom: 16px;
+      }
+
+      .info-banner {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 14px 18px;
+        margin-bottom: 20px;
+        border-radius: 8px;
+        background: ${cssManager.bdTheme("#eff6ff", "rgba(59,130,246,0.08)")};
+        border: 1px solid ${cssManager.bdTheme("#bfdbfe", "rgba(59,130,246,0.2)")};
+        color: ${cssManager.bdTheme("#1e40af", "#93c5fd")};
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      .info-banner dees-icon {
+        flex-shrink: 0;
+        font-size: 18px;
+        margin-top: 1px;
+      }
+
+      ::slotted(sz-config-section) {
+        margin-bottom: 12px;
+      }
+
+      ::slotted(sz-config-section:last-child) {
+        margin-bottom: 0;
+      }
+    `
+]);
+__runInitializers(_init33, 1, SzConfigOverview);
+
 // ts_web/elements/sz-demo-view-dashboard.ts
 init_dist_ts29();
-var _SzDemoViewDashboard_decorators, _init30, _a30;
+var _SzDemoViewDashboard_decorators, _init34, _a34;
 _SzDemoViewDashboard_decorators = [t4("sz-demo-view-dashboard")];
-var SzDemoViewDashboard = class extends (_a30 = DeesElement) {
+var SzDemoViewDashboard = class extends (_a34 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -105774,21 +107204,21 @@ var SzDemoViewDashboard = class extends (_a30 = DeesElement) {
     `;
   }
 };
-_init30 = __decoratorStart(_a30);
-SzDemoViewDashboard = __decorateElement(_init30, 0, "SzDemoViewDashboard", _SzDemoViewDashboard_decorators, SzDemoViewDashboard);
-__runInitializers(_init30, 1, SzDemoViewDashboard);
+_init34 = __decoratorStart(_a34);
+SzDemoViewDashboard = __decorateElement(_init34, 0, "SzDemoViewDashboard", _SzDemoViewDashboard_decorators, SzDemoViewDashboard);
+__runInitializers(_init34, 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, _a35, _SzDemoViewServices_decorators, _init35, _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 (_a35 = DeesElement, _currentView_dec2 = [r5()], _selectedService_dec = [r5()], _selectedPlatformService_dec = [r5()], _a35) {
   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(_init35, 8, this, "list")), __runInitializers(_init35, 11, this);
+    __privateAdd(this, _selectedService, __runInitializers(_init35, 12, this, null)), __runInitializers(_init35, 15, this);
+    __privateAdd(this, _selectedPlatformService, __runInitializers(_init35, 16, this, null)), __runInitializers(_init35, 19, this);
     __publicField(this, "demoServices", [
       {
         id: "1",
@@ -106069,14 +107499,14 @@ var SzDemoViewServices = class extends (_a31 = DeesElement, _currentView_dec2 =
   onDeactivate() {
   }
 };
-_init31 = __decoratorStart(_a31);
+_init35 = __decoratorStart(_a35);
 _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(_init35, 4, "currentView", _currentView_dec2, SzDemoViewServices, _currentView2);
+__decorateElement(_init35, 4, "selectedService", _selectedService_dec, SzDemoViewServices, _selectedService);
+__decorateElement(_init35, 4, "selectedPlatformService", _selectedPlatformService_dec, SzDemoViewServices, _selectedPlatformService);
+SzDemoViewServices = __decorateElement(_init35, 0, "SzDemoViewServices", _SzDemoViewServices_decorators, SzDemoViewServices);
 __publicField(SzDemoViewServices, "styles", [
   cssManager.defaultStyles,
   i`
@@ -106208,18 +107638,18 @@ __publicField(SzDemoViewServices, "styles", [
       }
     `
 ]);
-__runInitializers(_init31, 1, SzDemoViewServices);
+__runInitializers(_init35, 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, _a36, _SzDemoViewNetwork_decorators, _init36, _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 (_a36 = DeesElement, _currentTab_dec = [r5()], _selectedDomain_dec = [r5()], _a36) {
   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(_init36, 8, this, "proxy")), __runInitializers(_init36, 11, this);
+    __privateAdd(this, _selectedDomain, __runInitializers(_init36, 12, this, null)), __runInitializers(_init36, 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 +107897,12 @@ var SzDemoViewNetwork = class extends (_a32 = DeesElement, _currentTab_dec = [r5
     `;
   }
 };
-_init32 = __decoratorStart(_a32);
+_init36 = __decoratorStart(_a36);
 _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(_init36, 4, "currentTab", _currentTab_dec, SzDemoViewNetwork, _currentTab);
+__decorateElement(_init36, 4, "selectedDomain", _selectedDomain_dec, SzDemoViewNetwork, _selectedDomain);
+SzDemoViewNetwork = __decorateElement(_init36, 0, "SzDemoViewNetwork", _SzDemoViewNetwork_decorators, SzDemoViewNetwork);
 __publicField(SzDemoViewNetwork, "styles", [
   cssManager.defaultStyles,
   i`
@@ -106560,17 +107990,17 @@ __publicField(SzDemoViewNetwork, "styles", [
       }
     `
 ]);
-__runInitializers(_init32, 1, SzDemoViewNetwork);
+__runInitializers(_init36, 1, SzDemoViewNetwork);
 
 // ts_web/elements/sz-demo-view-registries.ts
 init_dist_ts29();
-var _currentTab_dec2, _a33, _SzDemoViewRegistries_decorators, _init33, _currentTab2;
+var _currentTab_dec2, _a37, _SzDemoViewRegistries_decorators, _init37, _currentTab2;
 _SzDemoViewRegistries_decorators = [t4("sz-demo-view-registries")];
-var SzDemoViewRegistries = class extends (_a33 = DeesElement, _currentTab_dec2 = [r5()], _a33) {
+var SzDemoViewRegistries = class extends (_a37 = DeesElement, _currentTab_dec2 = [r5()], _a37) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab2, __runInitializers(_init33, 8, this, "onebox")), __runInitializers(_init33, 11, this);
+    __privateAdd(this, _currentTab2, __runInitializers(_init37, 8, this, "onebox")), __runInitializers(_init37, 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 +108117,10 @@ var SzDemoViewRegistries = class extends (_a33 = DeesElement, _currentTab_dec2 =
     `;
   }
 };
-_init33 = __decoratorStart(_a33);
+_init37 = __decoratorStart(_a37);
 _currentTab2 = new WeakMap();
-__decorateElement(_init33, 4, "currentTab", _currentTab_dec2, SzDemoViewRegistries, _currentTab2);
-SzDemoViewRegistries = __decorateElement(_init33, 0, "SzDemoViewRegistries", _SzDemoViewRegistries_decorators, SzDemoViewRegistries);
+__decorateElement(_init37, 4, "currentTab", _currentTab_dec2, SzDemoViewRegistries, _currentTab2);
+SzDemoViewRegistries = __decorateElement(_init37, 0, "SzDemoViewRegistries", _SzDemoViewRegistries_decorators, SzDemoViewRegistries);
 __publicField(SzDemoViewRegistries, "styles", [
   cssManager.defaultStyles,
   i`
@@ -106758,13 +108188,13 @@ __publicField(SzDemoViewRegistries, "styles", [
       }
     `
 ]);
-__runInitializers(_init33, 1, SzDemoViewRegistries);
+__runInitializers(_init37, 1, SzDemoViewRegistries);
 
 // ts_web/elements/sz-demo-view-tokens.ts
 init_dist_ts29();
-var _SzDemoViewTokens_decorators, _init34, _a34;
+var _SzDemoViewTokens_decorators, _init38, _a38;
 _SzDemoViewTokens_decorators = [t4("sz-demo-view-tokens")];
-var SzDemoViewTokens = class extends (_a34 = DeesElement) {
+var SzDemoViewTokens = class extends (_a38 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -106855,15 +108285,15 @@ var SzDemoViewTokens = class extends (_a34 = DeesElement) {
     `;
   }
 };
-_init34 = __decoratorStart(_a34);
-SzDemoViewTokens = __decorateElement(_init34, 0, "SzDemoViewTokens", _SzDemoViewTokens_decorators, SzDemoViewTokens);
-__runInitializers(_init34, 1, SzDemoViewTokens);
+_init38 = __decoratorStart(_a38);
+SzDemoViewTokens = __decorateElement(_init38, 0, "SzDemoViewTokens", _SzDemoViewTokens_decorators, SzDemoViewTokens);
+__runInitializers(_init38, 1, SzDemoViewTokens);
 
 // ts_web/elements/sz-demo-view-settings.ts
 init_dist_ts29();
-var _SzDemoViewSettings_decorators, _init35, _a35;
+var _SzDemoViewSettings_decorators, _init39, _a39;
 _SzDemoViewSettings_decorators = [t4("sz-demo-view-settings")];
-var SzDemoViewSettings = class extends (_a35 = DeesElement) {
+var SzDemoViewSettings = class extends (_a39 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -106970,21 +108400,21 @@ var SzDemoViewSettings = class extends (_a35 = DeesElement) {
     `;
   }
 };
-_init35 = __decoratorStart(_a35);
-SzDemoViewSettings = __decorateElement(_init35, 0, "SzDemoViewSettings", _SzDemoViewSettings_decorators, SzDemoViewSettings);
-__runInitializers(_init35, 1, SzDemoViewSettings);
+_init39 = __decoratorStart(_a39);
+SzDemoViewSettings = __decorateElement(_init39, 0, "SzDemoViewSettings", _SzDemoViewSettings_decorators, SzDemoViewSettings);
+__runInitializers(_init39, 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, _a40, _SzDemoViewMta_decorators, _init40, _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 (_a40 = DeesElement, _currentView_dec3 = [r5()], _selectedEmail_dec = [r5()], _currentDirectionFilter_dec = [r5()], _a40) {
   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(_init40, 8, this, "list")), __runInitializers(_init40, 11, this);
+    __privateAdd(this, _selectedEmail, __runInitializers(_init40, 12, this, null)), __runInitializers(_init40, 15, this);
+    __privateAdd(this, _currentDirectionFilter, __runInitializers(_init40, 16, this, "all")), __runInitializers(_init40, 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 +108707,14 @@ var SzDemoViewMta = class extends (_a36 = DeesElement, _currentView_dec3 = [r5()
     }
   }
 };
-_init36 = __decoratorStart(_a36);
+_init40 = __decoratorStart(_a40);
 _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(_init40, 4, "currentView", _currentView_dec3, SzDemoViewMta, _currentView3);
+__decorateElement(_init40, 4, "selectedEmail", _selectedEmail_dec, SzDemoViewMta, _selectedEmail);
+__decorateElement(_init40, 4, "currentDirectionFilter", _currentDirectionFilter_dec, SzDemoViewMta, _currentDirectionFilter);
+SzDemoViewMta = __decorateElement(_init40, 0, "SzDemoViewMta", _SzDemoViewMta_decorators, SzDemoViewMta);
 __publicField(SzDemoViewMta, "styles", [
   cssManager.defaultStyles,
   i`
@@ -107297,7 +108727,493 @@ __publicField(SzDemoViewMta, "styles", [
       }
     `
 ]);
-__runInitializers(_init36, 1, SzDemoViewMta);
+__runInitializers(_init40, 1, SzDemoViewMta);
+
+// ts_web/elements/sz-demo-view-routes.ts
+init_dist_ts29();
+var _currentTab_dec3, _a41, _SzDemoViewRoutes_decorators, _init41, _currentTab3;
+_SzDemoViewRoutes_decorators = [t4("sz-demo-view-routes")];
+var SzDemoViewRoutes = class extends (_a41 = DeesElement, _currentTab_dec3 = [r5()], _a41) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "appui", null);
+    __privateAdd(this, _currentTab3, __runInitializers(_init41, 8, this, "all")), __runInitializers(_init41, 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>
+    `;
+  }
+};
+_init41 = __decoratorStart(_a41);
+_currentTab3 = new WeakMap();
+__decorateElement(_init41, 4, "currentTab", _currentTab_dec3, SzDemoViewRoutes, _currentTab3);
+SzDemoViewRoutes = __decorateElement(_init41, 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(_init41, 1, SzDemoViewRoutes);
+
+// ts_web/elements/sz-demo-view-config.ts
+init_dist_ts29();
+var _SzDemoViewConfig_decorators, _init42, _a42;
+_SzDemoViewConfig_decorators = [t4("sz-demo-view-config")];
+var SzDemoViewConfig = class extends (_a42 = DeesElement) {
+  static styles = [
+    cssManager.defaultStyles,
+    i`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    `
+  ];
+  render() {
+    const systemFields = [
+      { key: "Base Directory", value: "/home/user/.serve.zone/dcrouter" },
+      { key: "Data Directory", value: "/home/user/.serve.zone/dcrouter/data" },
+      { key: "Public IP", value: "203.0.113.50" },
+      { key: "Proxy IPs", value: ["203.0.113.10", "203.0.113.11"], type: "pills" },
+      { key: "Uptime", value: "3d 14h 22m" },
+      { key: "Storage Backend", value: "filesystem", type: "badge" }
+    ];
+    const proxyFields = [
+      { key: "Route Count", value: 12 },
+      { key: "ACME Enabled", value: true, type: "boolean" },
+      { key: "Account Email", value: "admin@serve.zone" },
+      { key: "Use Production", value: true, type: "boolean" },
+      { key: "Auto Renew", value: true, type: "boolean" },
+      { key: "Renew Threshold", value: "30 days" }
+    ];
+    const emailFields = [
+      { key: "Ports", value: ["25", "465", "587"], type: "pills" },
+      { key: "Hostname", value: "mail.serve.zone" },
+      { key: "Domains", value: ["serve.zone", "mail.serve.zone"], type: "pills" },
+      { key: "Email Routes", value: 5 },
+      { key: "Received Path", value: "/data/emails" }
+    ];
+    const dnsFields = [
+      { key: "Port", value: 53 },
+      { key: "NS Domains", value: ["ns1.serve.zone", "ns2.serve.zone"], type: "pills" },
+      { key: "Scopes", value: ["serve.zone", "example.com"], type: "pills" },
+      { key: "Record Count", value: 24 },
+      { key: "DNS Challenge", value: true, type: "boolean" }
+    ];
+    const tlsFields = [
+      { key: "Contact Email", value: "admin@serve.zone" },
+      { key: "Domain", value: "serve.zone" },
+      { key: "Source", value: "acme", type: "badge" },
+      { key: "Certificate Path", value: null },
+      { key: "Key Path", value: null }
+    ];
+    const cacheFields = [
+      { key: "Storage Path", value: "/home/user/.serve.zone/dcrouter/tsmdb" },
+      { key: "DB Name", value: "dcrouter" },
+      { key: "Default TTL", value: "30 days" },
+      { key: "Cleanup Interval", value: "1 hour" }
+    ];
+    const radiusFields = [
+      { key: "Auth Port", value: null },
+      { key: "Accounting Port", value: null }
+    ];
+    const remoteIngressFields = [
+      { key: "Tunnel Port", value: 8443 },
+      { key: "Hub Domain", value: "hub.serve.zone" },
+      { key: "TLS Configured", value: true, type: "boolean" }
+    ];
+    return b2`
+      <sz-config-overview
+        infoText="This view displays the current running configuration. DcRouter is configured through code or remote management."
+      >
+        <sz-config-section
+          title="System"
+          subtitle="Base paths and infrastructure"
+          icon="lucide:server"
+          status="enabled"
+          .fields=${systemFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="SmartProxy"
+          subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
+          icon="lucide:network"
+          status="enabled"
+          .fields=${proxyFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Email Server"
+          subtitle="SMTP email handling with smartmta"
+          icon="lucide:mail"
+          status="enabled"
+          .fields=${emailFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="DNS Server"
+          subtitle="Authoritative DNS with smartdns"
+          icon="lucide:globe"
+          status="enabled"
+          .fields=${dnsFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="TLS / Certificates"
+          subtitle="Certificate management and ACME"
+          icon="lucide:shield-check"
+          status="enabled"
+          .fields=${tlsFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Cache Database"
+          subtitle="Persistent caching with smartdata"
+          icon="lucide:database"
+          status="enabled"
+          .fields=${cacheFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="RADIUS Server"
+          subtitle="Network authentication and VLAN assignment"
+          icon="lucide:wifi"
+          status="not-configured"
+          .fields=${radiusFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Remote Ingress"
+          subtitle="Edge tunnel nodes"
+          icon="lucide:cloud"
+          status="enabled"
+          .fields=${remoteIngressFields}
+        ></sz-config-section>
+      </sz-config-overview>
+    `;
+  }
+};
+_init42 = __decoratorStart(_a42);
+SzDemoViewConfig = __decorateElement(_init42, 0, "SzDemoViewConfig", _SzDemoViewConfig_decorators, SzDemoViewConfig);
+__runInitializers(_init42, 1, SzDemoViewConfig);
 
 // ts_web/pages/index.ts
 var pages_exports = {};
@@ -111015,9 +112931,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 _a43;
 var demoFunc5 = () => {
-  return b2(_a37 || (_a37 = __template([`
+  return b2(_a43 || (_a43 = __template([`
     <dees-demowrapper>
       <style>
         .demo-container {
@@ -112069,7 +113985,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 _a44;
 var generateCpuCores = (count2) => {
   return Array.from({ length: count2 }, (_4, i11) => ({
     id: i11,
@@ -112078,7 +113994,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(_a44 || (_a44 = __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 +146891,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 _a45;
+var demoFunc42 = () => b2(_a45 || (_a45 = __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 +179164,9 @@ init_group_runtime();
 
 // ts_web/pages/sz-demo-app-shell.ts
 init_dist_ts29();
-var _SzDemoAppShell_decorators, _init37, _a40;
+var _SzDemoAppShell_decorators, _init43, _a46;
 _SzDemoAppShell_decorators = [t4("sz-demo-app-shell")];
-var SzDemoAppShell = class extends (_a40 = DeesElement) {
+var SzDemoAppShell = class extends (_a46 = DeesElement) {
   static styles = [
     cssManager.defaultStyles,
     i`
@@ -177402,6 +179318,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 +179339,7 @@ var SzDemoAppShell = class extends (_a40 = DeesElement) {
           },
           {
             name: "Infrastructure",
-            views: ["services", "network", "registries", "mta"]
+            views: ["services", "network", "registries", "mta", "routes"]
           },
           {
             name: "Administration",
@@ -177449,9 +179371,9 @@ var SzDemoAppShell = class extends (_a40 = DeesElement) {
     ]);
   }
 };
-_init37 = __decoratorStart(_a40);
-SzDemoAppShell = __decorateElement(_init37, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
-__runInitializers(_init37, 1, SzDemoAppShell);
+_init43 = __decoratorStart(_a46);
+SzDemoAppShell = __decorateElement(_init43, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
+__runInitializers(_init43, 1, SzDemoAppShell);
 
 // html/index.ts
 setupWccTools({