@serve.zone/catalog 2.3.0 → 2.5.0

package/dist_watch/bundle.js

@@ -1397,7 +1397,7 @@ var init_Subscription = __esm({
         this._finalizers = null;
       }
       Subscription2.prototype.unsubscribe = function() {
-        var e_1, _a44, 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 && (_a44 = _parentage_1.return)) _a44.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 _a44;
+        var _a47;
         if (teardown && teardown !== this) {
           if (this.closed) {
             execFinalizer(teardown);
@@ -1475,7 +1475,7 @@ var init_Subscription = __esm({
               }
               teardown._addParent(this);
             }
-            (this._finalizers = (_a44 = this._finalizers) !== null && _a44 !== void 0 ? _a44 : []).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 _a44 = context, errorThrown = _a44.errorThrown, error = _a44.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 _a44;
-  return (_a44 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a44 !== void 0 ? _a44 : 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 _a44 = _this, operator = _a44.operator, source = _a44.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 _a44;
-        return (_a44 = this.source) === null || _a44 === void 0 ? void 0 : _a44.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 _a44;
+        var _a47;
         if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
           var closed_1 = this.closed;
           _super.prototype.unsubscribe.call(this);
-          !closed_1 && ((_a44 = this.onFinalize) === null || _a44 === void 0 ? void 0 : _a44.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, _a44;
+          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 && (_a44 = _b.return)) _a44.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 _a44;
-          return ((_a44 = this.observers) === null || _a44 === void 0 ? void 0 : _a44.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 _a44 = this, hasError = _a44.hasError, isStopped = _a44.isStopped, observers = _a44.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 _a44 = this, hasError = _a44.hasError, thrownError = _a44.thrownError, isStopped = _a44.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 _a44, _b;
-        (_b = (_a44 = this.destination) === null || _a44 === void 0 ? void 0 : _a44.next) === null || _b === void 0 ? void 0 : _b.call(_a44, 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 _a44, _b;
-        (_b = (_a44 = this.destination) === null || _a44 === void 0 ? void 0 : _a44.error) === null || _b === void 0 ? void 0 : _b.call(_a44, 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 _a44, _b;
-        (_b = (_a44 = this.destination) === null || _a44 === void 0 ? void 0 : _a44.complete) === null || _b === void 0 ? void 0 : _b.call(_a44);
+        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 _a44, _b;
-        return (_b = (_a44 = this.source) === null || _a44 === void 0 ? void 0 : _a44.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 _a44 = this, hasError = _a44.hasError, thrownError = _a44.thrownError, _value2 = _a44._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 _a44 = this, isStopped = _a44.isStopped, _buffer = _a44._buffer, _infiniteTimeWindow = _a44._infiniteTimeWindow, _timestampProvider = _a44._timestampProvider, _windowTime = _a44._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 _a44 = this, _infiniteTimeWindow = _a44._infiniteTimeWindow, _buffer = _a44._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 _a44 = this, _bufferSize = _a44._bufferSize, _timestampProvider = _a44._timestampProvider, _buffer = _a44._buffer, _infiniteTimeWindow = _a44._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 _a44 = this, hasError = _a44.hasError, _hasValue = _a44._hasValue, _value2 = _a44._value, thrownError = _a44.thrownError, isStopped = _a44.isStopped, _isComplete = _a44._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 _a44 = this, _hasValue = _a44._hasValue, _value2 = _a44._value, _isComplete = _a44._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 _a44;
+        var _a47;
         if (delay2 === void 0) {
           delay2 = 0;
         }
@@ -2669,7 +2669,7 @@ var init_AsyncAction = __esm({
         }
         this.pending = true;
         this.delay = delay2;
-        this.id = (_a44 = this.id) !== null && _a44 !== void 0 ? _a44 : 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 _a44 = this, id = _a44.id, scheduler = _a44.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 _a44;
+        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 && ((_a44 = actions[actions.length - 1]) === null || _a44 === void 0 ? void 0 : _a44.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 _a44;
+        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 && ((_a44 = actions[actions.length - 1]) === null || _a44 === void 0 ? void 0 : _a44.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 _a44 = this, actions = _a44.actions, maxFrames = _a44.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, _a44, 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:
-          _a44 = _b.sent(), value2 = _a44.value, done = _a44.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, _a44;
+    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 && (_a44 = iterable_1.return)) _a44.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, _a44;
+  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 && (_a44 = asyncIterable_1.return))) return [3, 8];
-          return [4, _a44.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 _a44;
+        var _a47;
         var value2;
         var done;
         try {
-          _a44 = iterator2.next(), value2 = _a44.value, done = _a44.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 _a44, _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" ? (_a44 = observer.next) === null || _a44 === void 0 ? void 0 : _a44.call(observer, value2) : kind === "E" ? (_b = observer.error) === null || _b === void 0 ? void 0 : _b.call(observer, error) : (_c = observer.complete) === null || _c === void 0 ? void 0 : _c.call(observer);
+  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 _a44 = this, kind = _a44.kind, value2 = _a44.value, error = _a44.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 _a44;
-        return isFunction((_a44 = nextOrObserver) === null || _a44 === void 0 ? void 0 : _a44.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 _a44 = this, kind = _a44.kind, value2 = _a44.value, error = _a44.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 _a44 = isValidDate(config3) ? { first: config3 } : typeof config3 === "number" ? { each: config3 } : config3, first2 = _a44.first, each = _a44.each, _b = _a44.with, _with = _b === void 0 ? timeoutErrorFactory : _b, _c = _a44.scheduler, scheduler = _c === void 0 ? schedulerArg !== null && schedulerArg !== void 0 ? schedulerArg : asyncScheduler : _c, _d = _a44.meta, meta = _d === void 0 ? null : _d;
+  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 _a44 = __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 = _a44[0], remove2 = _a44[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, _a44, 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 && (_a44 = buffers_1.return)) _a44.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, _a44;
+      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 && (_a44 = buffers_2.return)) _a44.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 _a44, _b;
+  var _a47, _b;
   var otherArgs = [];
   for (var _i = 1; _i < arguments.length; _i++) {
     otherArgs[_i - 1] = arguments[_i];
   }
-  var scheduler = (_a44 = popScheduler(otherArgs)) !== null && _a44 !== void 0 ? _a44 : 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, _a45;
+      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 && (_a45 = recordsCopy_1.return)) _a45.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 _a44 = config3 !== null && config3 !== void 0 ? config3 : {}, _b = _a44.leading, leading = _b === void 0 ? true : _b, _c = _a44.trailing, trailing = _c === void 0 ? false : _c;
+    var _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 _a44 = _this, $el = _a44.$el, ctx = _a44.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 _a44 = this, $el = _a44.$el, ctx = _a44.ctx, currentOptions = _a44.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 _a44 = this, $el = _a44.$el, ctx = _a44.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 _a44 = this, $el = _a44.$el, ctx = _a44.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 _a44;
+            var _a47;
             var callback = options[type5];
             var callbackResult;
             var methodResult;
             if (isFunction2(callback)) {
               callbackResult = callback.apply(this, args.concat([this]));
             }
-            methodResult = (_a44 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a44, 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 _a44 = this, $el = _a44.$el, opts = _a44.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 _a44 = this, $el = _a44.$el, opts = _a44.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,7 +96697,10 @@ 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,
@@ -106478,11 +106481,636 @@ __publicField(SzRouteListView, "styles", [
 ]);
 __runInitializers(_init31, 1, SzRouteListView);
 
+// ts_web/elements/sz-config-section.ts
+init_dist_ts29();
+var _isCollapsed_dec, _collapsed_dec, _collapsible_dec, _actions_dec3, _fields_dec, _status_dec2, _icon_dec2, _subtitle_dec2, _title_dec2, _a32, _SzConfigSection_decorators, _init32, _title2, _subtitle2, _icon2, _status2, _fields, _actions3, _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 })], _actions_dec3 = [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, _actions3, __runInitializers(_init32, 28, this, [])), __runInitializers(_init32, 31, this);
+    __privateAdd(this, _collapsible, __runInitializers(_init32, 32, this, false)), __runInitializers(_init32, 35, this);
+    __privateAdd(this, _collapsed, __runInitializers(_init32, 36, this, false)), __runInitializers(_init32, 39, this);
+    __privateAdd(this, _isCollapsed, __runInitializers(_init32, 40, this, false)), __runInitializers(_init32, 43, 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.actions.map((action) => b2`
+              <button class="header-action" @click=${(e11) => {
+      e11.stopPropagation();
+      this.dispatchEvent(new CustomEvent(action.event || "action", {
+        detail: action.detail || { label: action.label },
+        bubbles: true,
+        composed: true
+      }));
+    }}>
+                ${action.icon ? b2`<dees-icon .icon=${action.icon}></dees-icon>` : ""}
+                ${action.label}
+              </button>
+            `)}
+            ${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();
+_actions3 = 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, "actions", _actions_dec3, SzConfigSection, _actions3);
+__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")};
+      }
+
+      /* Action buttons */
+      .header-action {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        transition: background 150ms ease;
+        white-space: nowrap;
+        font-family: inherit;
+      }
+
+      .header-action:hover {
+        background: ${cssManager.bdTheme("rgba(37,99,235,0.08)", "rgba(96,165,250,0.1)")};
+      }
+
+      .header-action dees-icon {
+        font-size: 14px;
+      }
+
+      /* 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, _init32, _a32;
+var _SzDemoViewDashboard_decorators, _init34, _a34;
 _SzDemoViewDashboard_decorators = [t4("sz-demo-view-dashboard")];
-var SzDemoViewDashboard = class extends (_a32 = DeesElement) {
+var SzDemoViewDashboard = class extends (_a34 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -106618,21 +107246,21 @@ var SzDemoViewDashboard = class extends (_a32 = DeesElement) {
     `;
   }
 };
-_init32 = __decoratorStart(_a32);
-SzDemoViewDashboard = __decorateElement(_init32, 0, "SzDemoViewDashboard", _SzDemoViewDashboard_decorators, SzDemoViewDashboard);
-__runInitializers(_init32, 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, _a33, _SzDemoViewServices_decorators, _init33, _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 (_a33 = DeesElement, _currentView_dec2 = [r5()], _selectedService_dec = [r5()], _selectedPlatformService_dec = [r5()], _a33) {
+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(_init33, 8, this, "list")), __runInitializers(_init33, 11, this);
-    __privateAdd(this, _selectedService, __runInitializers(_init33, 12, this, null)), __runInitializers(_init33, 15, this);
-    __privateAdd(this, _selectedPlatformService, __runInitializers(_init33, 16, this, null)), __runInitializers(_init33, 19, this);
+    __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",
@@ -106913,14 +107541,14 @@ var SzDemoViewServices = class extends (_a33 = DeesElement, _currentView_dec2 =
   onDeactivate() {
   }
 };
-_init33 = __decoratorStart(_a33);
+_init35 = __decoratorStart(_a35);
 _currentView2 = new WeakMap();
 _selectedService = new WeakMap();
 _selectedPlatformService = new WeakMap();
-__decorateElement(_init33, 4, "currentView", _currentView_dec2, SzDemoViewServices, _currentView2);
-__decorateElement(_init33, 4, "selectedService", _selectedService_dec, SzDemoViewServices, _selectedService);
-__decorateElement(_init33, 4, "selectedPlatformService", _selectedPlatformService_dec, SzDemoViewServices, _selectedPlatformService);
-SzDemoViewServices = __decorateElement(_init33, 0, "SzDemoViewServices", _SzDemoViewServices_decorators, SzDemoViewServices);
+__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`
@@ -107052,18 +107680,18 @@ __publicField(SzDemoViewServices, "styles", [
       }
     `
 ]);
-__runInitializers(_init33, 1, SzDemoViewServices);
+__runInitializers(_init35, 1, SzDemoViewServices);
 
 // ts_web/elements/sz-demo-view-network.ts
 init_dist_ts29();
-var _selectedDomain_dec, _currentTab_dec, _a34, _SzDemoViewNetwork_decorators, _init34, _currentTab, _selectedDomain;
+var _selectedDomain_dec, _currentTab_dec, _a36, _SzDemoViewNetwork_decorators, _init36, _currentTab, _selectedDomain;
 _SzDemoViewNetwork_decorators = [t4("sz-demo-view-network")];
-var SzDemoViewNetwork = class extends (_a34 = DeesElement, _currentTab_dec = [r5()], _selectedDomain_dec = [r5()], _a34) {
+var SzDemoViewNetwork = class extends (_a36 = DeesElement, _currentTab_dec = [r5()], _selectedDomain_dec = [r5()], _a36) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab, __runInitializers(_init34, 8, this, "proxy")), __runInitializers(_init34, 11, this);
-    __privateAdd(this, _selectedDomain, __runInitializers(_init34, 12, this, null)), __runInitializers(_init34, 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" },
@@ -107311,12 +107939,12 @@ var SzDemoViewNetwork = class extends (_a34 = DeesElement, _currentTab_dec = [r5
     `;
   }
 };
-_init34 = __decoratorStart(_a34);
+_init36 = __decoratorStart(_a36);
 _currentTab = new WeakMap();
 _selectedDomain = new WeakMap();
-__decorateElement(_init34, 4, "currentTab", _currentTab_dec, SzDemoViewNetwork, _currentTab);
-__decorateElement(_init34, 4, "selectedDomain", _selectedDomain_dec, SzDemoViewNetwork, _selectedDomain);
-SzDemoViewNetwork = __decorateElement(_init34, 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`
@@ -107404,17 +108032,17 @@ __publicField(SzDemoViewNetwork, "styles", [
       }
     `
 ]);
-__runInitializers(_init34, 1, SzDemoViewNetwork);
+__runInitializers(_init36, 1, SzDemoViewNetwork);
 
 // ts_web/elements/sz-demo-view-registries.ts
 init_dist_ts29();
-var _currentTab_dec2, _a35, _SzDemoViewRegistries_decorators, _init35, _currentTab2;
+var _currentTab_dec2, _a37, _SzDemoViewRegistries_decorators, _init37, _currentTab2;
 _SzDemoViewRegistries_decorators = [t4("sz-demo-view-registries")];
-var SzDemoViewRegistries = class extends (_a35 = DeesElement, _currentTab_dec2 = [r5()], _a35) {
+var SzDemoViewRegistries = class extends (_a37 = DeesElement, _currentTab_dec2 = [r5()], _a37) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab2, __runInitializers(_init35, 8, this, "onebox")), __runInitializers(_init35, 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 },
@@ -107531,10 +108159,10 @@ var SzDemoViewRegistries = class extends (_a35 = DeesElement, _currentTab_dec2 =
     `;
   }
 };
-_init35 = __decoratorStart(_a35);
+_init37 = __decoratorStart(_a37);
 _currentTab2 = new WeakMap();
-__decorateElement(_init35, 4, "currentTab", _currentTab_dec2, SzDemoViewRegistries, _currentTab2);
-SzDemoViewRegistries = __decorateElement(_init35, 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`
@@ -107602,13 +108230,13 @@ __publicField(SzDemoViewRegistries, "styles", [
       }
     `
 ]);
-__runInitializers(_init35, 1, SzDemoViewRegistries);
+__runInitializers(_init37, 1, SzDemoViewRegistries);
 
 // ts_web/elements/sz-demo-view-tokens.ts
 init_dist_ts29();
-var _SzDemoViewTokens_decorators, _init36, _a36;
+var _SzDemoViewTokens_decorators, _init38, _a38;
 _SzDemoViewTokens_decorators = [t4("sz-demo-view-tokens")];
-var SzDemoViewTokens = class extends (_a36 = DeesElement) {
+var SzDemoViewTokens = class extends (_a38 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -107699,15 +108327,15 @@ var SzDemoViewTokens = class extends (_a36 = DeesElement) {
     `;
   }
 };
-_init36 = __decoratorStart(_a36);
-SzDemoViewTokens = __decorateElement(_init36, 0, "SzDemoViewTokens", _SzDemoViewTokens_decorators, SzDemoViewTokens);
-__runInitializers(_init36, 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, _init37, _a37;
+var _SzDemoViewSettings_decorators, _init39, _a39;
 _SzDemoViewSettings_decorators = [t4("sz-demo-view-settings")];
-var SzDemoViewSettings = class extends (_a37 = DeesElement) {
+var SzDemoViewSettings = class extends (_a39 = DeesElement) {
   appui = null;
   async onActivate(context2) {
     this.appui = context2.appui;
@@ -107814,21 +108442,21 @@ var SzDemoViewSettings = class extends (_a37 = DeesElement) {
     `;
   }
 };
-_init37 = __decoratorStart(_a37);
-SzDemoViewSettings = __decorateElement(_init37, 0, "SzDemoViewSettings", _SzDemoViewSettings_decorators, SzDemoViewSettings);
-__runInitializers(_init37, 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, _a38, _SzDemoViewMta_decorators, _init38, _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 (_a38 = DeesElement, _currentView_dec3 = [r5()], _selectedEmail_dec = [r5()], _currentDirectionFilter_dec = [r5()], _a38) {
+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(_init38, 8, this, "list")), __runInitializers(_init38, 11, this);
-    __privateAdd(this, _selectedEmail, __runInitializers(_init38, 12, this, null)), __runInitializers(_init38, 15, this);
-    __privateAdd(this, _currentDirectionFilter, __runInitializers(_init38, 16, this, "all")), __runInitializers(_init38, 19, this);
+    __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" },
@@ -108121,14 +108749,14 @@ var SzDemoViewMta = class extends (_a38 = DeesElement, _currentView_dec3 = [r5()
     }
   }
 };
-_init38 = __decoratorStart(_a38);
+_init40 = __decoratorStart(_a40);
 _currentView3 = new WeakMap();
 _selectedEmail = new WeakMap();
 _currentDirectionFilter = new WeakMap();
-__decorateElement(_init38, 4, "currentView", _currentView_dec3, SzDemoViewMta, _currentView3);
-__decorateElement(_init38, 4, "selectedEmail", _selectedEmail_dec, SzDemoViewMta, _selectedEmail);
-__decorateElement(_init38, 4, "currentDirectionFilter", _currentDirectionFilter_dec, SzDemoViewMta, _currentDirectionFilter);
-SzDemoViewMta = __decorateElement(_init38, 0, "SzDemoViewMta", _SzDemoViewMta_decorators, SzDemoViewMta);
+__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`
@@ -108141,17 +108769,17 @@ __publicField(SzDemoViewMta, "styles", [
       }
     `
 ]);
-__runInitializers(_init38, 1, SzDemoViewMta);
+__runInitializers(_init40, 1, SzDemoViewMta);
 
 // ts_web/elements/sz-demo-view-routes.ts
 init_dist_ts29();
-var _currentTab_dec3, _a39, _SzDemoViewRoutes_decorators, _init39, _currentTab3;
+var _currentTab_dec3, _a41, _SzDemoViewRoutes_decorators, _init41, _currentTab3;
 _SzDemoViewRoutes_decorators = [t4("sz-demo-view-routes")];
-var SzDemoViewRoutes = class extends (_a39 = DeesElement, _currentTab_dec3 = [r5()], _a39) {
+var SzDemoViewRoutes = class extends (_a41 = DeesElement, _currentTab_dec3 = [r5()], _a41) {
   constructor() {
     super(...arguments);
     __publicField(this, "appui", null);
-    __privateAdd(this, _currentTab3, __runInitializers(_init39, 8, this, "all")), __runInitializers(_init39, 11, this);
+    __privateAdd(this, _currentTab3, __runInitializers(_init41, 8, this, "all")), __runInitializers(_init41, 11, this);
     __publicField(this, "demoRoutes", [
       // 1. HTTPS with TLS termination + auto cert
       {
@@ -108466,10 +109094,10 @@ var SzDemoViewRoutes = class extends (_a39 = DeesElement, _currentTab_dec3 = [r5
     `;
   }
 };
-_init39 = __decoratorStart(_a39);
+_init41 = __decoratorStart(_a41);
 _currentTab3 = new WeakMap();
-__decorateElement(_init39, 4, "currentTab", _currentTab_dec3, SzDemoViewRoutes, _currentTab3);
-SzDemoViewRoutes = __decorateElement(_init39, 0, "SzDemoViewRoutes", _SzDemoViewRoutes_decorators, SzDemoViewRoutes);
+__decorateElement(_init41, 4, "currentTab", _currentTab_dec3, SzDemoViewRoutes, _currentTab3);
+SzDemoViewRoutes = __decorateElement(_init41, 0, "SzDemoViewRoutes", _SzDemoViewRoutes_decorators, SzDemoViewRoutes);
 __publicField(SzDemoViewRoutes, "styles", [
   cssManager.defaultStyles,
   i`
@@ -108482,7 +109110,153 @@ __publicField(SzDemoViewRoutes, "styles", [
       }
     `
 ]);
-__runInitializers(_init39, 1, SzDemoViewRoutes);
+__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}
+          .actions=${[{ label: "View Routes", icon: "lucide:arrow-right", event: "navigate", detail: { view: "routes" } }]}
+        ></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 = {};
@@ -112200,9 +112974,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 _a40;
+var _a43;
 var demoFunc5 = () => {
-  return b2(_a40 || (_a40 = __template([`
+  return b2(_a43 || (_a43 = __template([`
     <dees-demowrapper>
       <style>
         .demo-container {
@@ -113254,7 +114028,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 _a41;
+var _a44;
 var generateCpuCores = (count2) => {
   return Array.from({ length: count2 }, (_4, i11) => ({
     id: i11,
@@ -113263,7 +114037,7 @@ var generateCpuCores = (count2) => {
   }));
 };
 var demoFunc7 = () => {
-  return b2(_a41 || (_a41 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ', "; border-radius: 6px; font-size: 14px; font-family: monospace; color: ", ';">\n          <em>Click on tile actions or grid actions to see the result...</em>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div class="tile-config">\n          <div class="config-section">\n            <div class="config-title">Configuration Options</div>\n            <div class="config-description">\n              Each tile type supports different properties:\n              <ul style="margin: 8px 0; padding-left: 20px;">\n                <li><strong>Number:</strong> value, unit, color, description</li>\n                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>\n                <li><strong>Percentage:</strong> value (0-100), color, description</li>\n                <li><strong>Trend:</strong> value, unit, trendData array, description</li>\n                <li><strong>Text:</strong> value (string), color, description</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", '>\n        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="cpu-cores-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="interactive-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <div class="code-block">', "</div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", `
+  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">
@@ -146160,8 +146934,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 _a42;
-var demoFunc42 = () => b2(_a42 || (_a42 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .suggestions=", "\n          .value=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <div class="grid-layout">\n          <dees-input-tags\n            .label=', "\n            .placeholder=", "\n            .maxTags=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n          \n          <dees-input-tags\n            .label=", "\n            .placeholder=", "\n            .maxTags=", "\n            .suggestions=", "\n            .value=", "\n            .description=", "\n          ></dees-input-tags>\n        </div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .placeholder=", "\n          .required=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-input-tags\n          .label=", "\n          .value=", "\n          .disabled=", "\n          .description=", "\n        ></dees-input-tags>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-form>\n          <dees-input-text\n            .label=", "\n            .placeholder=", "\n            .required=", "\n            .key=", '\n          ></dees-input-text>\n          \n          <div class="grid-layout">\n            <dees-input-tags\n              .label=', "\n              .placeholder=", "\n              .required=", "\n              .key=", "\n              .suggestions=", "\n            ></dees-input-tags>\n            \n            <dees-input-tags\n              .label=", "\n              .placeholder=", "\n              .key=", "\n              .maxTags=", "\n              .suggestions=", "\n            ></dees-input-tags>\n          </div>\n          \n          <dees-input-text\n            .label=", "\n            .inputType=", "\n            .placeholder=", "\n            .key=", "\n          ></dees-input-text>\n          \n          <dees-form-submit .text=", "></dees-form-submit>\n        </dees-form>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-input-tags\n          id="interactive-tags"\n          .label=', "\n          .placeholder=", "\n          .suggestions=", "\n          @change=", `
+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">
@@ -178433,9 +179207,9 @@ init_group_runtime();
 
 // ts_web/pages/sz-demo-app-shell.ts
 init_dist_ts29();
-var _SzDemoAppShell_decorators, _init40, _a43;
+var _SzDemoAppShell_decorators, _init43, _a46;
 _SzDemoAppShell_decorators = [t4("sz-demo-app-shell")];
-var SzDemoAppShell = class extends (_a43 = DeesElement) {
+var SzDemoAppShell = class extends (_a46 = DeesElement) {
   static styles = [
     cssManager.defaultStyles,
     i`
@@ -178640,9 +179414,9 @@ var SzDemoAppShell = class extends (_a43 = DeesElement) {
     ]);
   }
 };
-_init40 = __decoratorStart(_a43);
-SzDemoAppShell = __decorateElement(_init40, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
-__runInitializers(_init40, 1, SzDemoAppShell);
+_init43 = __decoratorStart(_a46);
+SzDemoAppShell = __decorateElement(_init43, 0, "SzDemoAppShell", _SzDemoAppShell_decorators, SzDemoAppShell);
+__runInitializers(_init43, 1, SzDemoAppShell);
 
 // html/index.ts
 setupWccTools({