@design.estate/dees-wcctools 3.2.0 → 3.3.0

package/dist_watch/bundle.js

@@ -5607,7 +5607,7 @@ var require_sweet_scroll = __commonJS({
               hash: null
             };
             this.loop = function(time) {
-              var _a14 = _this, $el = _a14.$el, ctx = _a14.ctx;
+              var _a17 = _this, $el = _a17.$el, ctx = _a17.ctx;
               if (!ctx.start) {
                 ctx.start = time;
               }
@@ -5702,7 +5702,7 @@ var require_sweet_scroll = __commonJS({
             if (!canUseDOM) {
               return;
             }
-            var _a14 = this, $el = _a14.$el, ctx = _a14.ctx, currentOptions = _a14.opts;
+            var _a17 = this, $el = _a17.$el, ctx = _a17.ctx, currentOptions = _a17.opts;
             var $trigger = ctx.$trigger;
             var opts = __assign2({}, currentOptions, options || {});
             var optOffset = opts.offset, vertical = opts.vertical, horizontal = opts.horizontal;
@@ -5769,7 +5769,7 @@ var require_sweet_scroll = __commonJS({
             if (gotoEnd === void 0) {
               gotoEnd = false;
             }
-            var _a14 = this, $el = _a14.$el, ctx = _a14.ctx;
+            var _a17 = this, $el = _a17.$el, ctx = _a17.ctx;
             var pos = ctx.pos;
             if (!$el || !ctx.progress) {
               return;
@@ -5825,7 +5825,7 @@ var require_sweet_scroll = __commonJS({
             ctx.id = SweetScroll4.raf(this.loop);
           };
           SweetScroll4.prototype.complete = function() {
-            var _a14 = this, $el = _a14.$el, ctx = _a14.ctx;
+            var _a17 = this, $el = _a17.$el, ctx = _a17.ctx;
             var hash = ctx.hash, cancel = ctx.cancel, opts = ctx.opts, pos = ctx.pos, $trigger = ctx.$trigger;
             if (!$el || !opts) {
               return;
@@ -5851,18 +5851,18 @@ var require_sweet_scroll = __commonJS({
             for (var _i = 2; _i < arguments.length; _i++) {
               args[_i - 2] = arguments[_i];
             }
-            var _a14;
+            var _a17;
             var callback = options[type5];
             var callbackResult;
             var methodResult;
             if (isFunction2(callback)) {
               callbackResult = callback.apply(this, args.concat([this]));
             }
-            methodResult = (_a14 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a14, args);
+            methodResult = (_a17 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a17, args);
             return callbackResult !== void 0 ? callbackResult : methodResult;
           };
           SweetScroll4.prototype.bind = function(click, stop) {
-            var _a14 = this, $el = _a14.$el, opts = _a14.ctx.opts;
+            var _a17 = this, $el = _a17.$el, opts = _a17.ctx.opts;
             if ($el) {
               if (click) {
                 addEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -5873,7 +5873,7 @@ var require_sweet_scroll = __commonJS({
             }
           };
           SweetScroll4.prototype.unbind = function(click, stop) {
-            var _a14 = this, $el = _a14.$el, opts = _a14.ctx.opts;
+            var _a17 = this, $el = _a17.$el, opts = _a17.ctx.opts;
             if ($el) {
               if (click) {
                 removeEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -7105,7 +7105,7 @@ var Subscription = (function() {
     this._finalizers = null;
   }
   Subscription2.prototype.unsubscribe = function() {
-    var e_1, _a14, e_2, _b2;
+    var e_1, _a17, e_2, _b2;
     var errors;
     if (!this.closed) {
       this.closed = true;
@@ -7122,7 +7122,7 @@ var Subscription = (function() {
             e_1 = { error: e_1_1 };
           } finally {
             try {
-              if (_parentage_1_1 && !_parentage_1_1.done && (_a14 = _parentage_1.return)) _a14.call(_parentage_1);
+              if (_parentage_1_1 && !_parentage_1_1.done && (_a17 = _parentage_1.return)) _a17.call(_parentage_1);
             } finally {
               if (e_1) throw e_1.error;
             }
@@ -7172,7 +7172,7 @@ var Subscription = (function() {
     }
   };
   Subscription2.prototype.add = function(teardown) {
-    var _a14;
+    var _a17;
     if (teardown && teardown !== this) {
       if (this.closed) {
         execFinalizer(teardown);
@@ -7183,7 +7183,7 @@ var Subscription = (function() {
           }
           teardown._addParent(this);
         }
-        (this._finalizers = (_a14 = this._finalizers) !== null && _a14 !== void 0 ? _a14 : []).push(teardown);
+        (this._finalizers = (_a17 = this._finalizers) !== null && _a17 !== void 0 ? _a17 : []).push(teardown);
       }
     }
   };
@@ -7302,7 +7302,7 @@ function errorContext(cb) {
     }
     cb();
     if (isRoot) {
-      var _a14 = context, errorThrown = _a14.errorThrown, error = _a14.error;
+      var _a17 = context, errorThrown = _a17.errorThrown, error = _a17.error;
       context = null;
       if (errorThrown) {
         throw error;
@@ -7533,7 +7533,7 @@ var Observable = (function() {
     var _this = this;
     var subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
     errorContext(function() {
-      var _a14 = _this, operator = _a14.operator, source = _a14.source;
+      var _a17 = _this, operator = _a17.operator, source = _a17.source;
       subscriber.add(operator ? operator.call(subscriber, source) : source ? _this._subscribe(subscriber) : _this._trySubscribe(subscriber));
     });
     return subscriber;
@@ -7565,8 +7565,8 @@ var Observable = (function() {
     });
   };
   Observable2.prototype._subscribe = function(subscriber) {
-    var _a14;
-    return (_a14 = this.source) === null || _a14 === void 0 ? void 0 : _a14.subscribe(subscriber);
+    var _a17;
+    return (_a17 = this.source) === null || _a17 === void 0 ? void 0 : _a17.subscribe(subscriber);
   };
   Observable2.prototype[observable] = function() {
     return this;
@@ -7598,8 +7598,8 @@ var Observable = (function() {
   return Observable2;
 })();
 function getPromiseCtor(promiseCtor) {
-  var _a14;
-  return (_a14 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a14 !== void 0 ? _a14 : Promise;
+  var _a17;
+  return (_a17 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a17 !== void 0 ? _a17 : Promise;
 }
 function isObserver(value2) {
   return value2 && isFunction(value2.next) && isFunction(value2.error) && isFunction(value2.complete);
@@ -7665,11 +7665,11 @@ var OperatorSubscriber = (function(_super) {
     return _this;
   }
   OperatorSubscriber2.prototype.unsubscribe = function() {
-    var _a14;
+    var _a17;
     if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
       var closed_1 = this.closed;
       _super.prototype.unsubscribe.call(this);
-      !closed_1 && ((_a14 = this.onFinalize) === null || _a14 === void 0 ? void 0 : _a14.call(this));
+      !closed_1 && ((_a17 = this.onFinalize) === null || _a17 === void 0 ? void 0 : _a17.call(this));
     }
   };
   return OperatorSubscriber2;
@@ -7710,7 +7710,7 @@ var Subject = (function(_super) {
   Subject2.prototype.next = function(value2) {
     var _this = this;
     errorContext(function() {
-      var e_1, _a14;
+      var e_1, _a17;
       _this._throwIfClosed();
       if (!_this.isStopped) {
         if (!_this.currentObservers) {
@@ -7725,7 +7725,7 @@ var Subject = (function(_super) {
           e_1 = { error: e_1_1 };
         } finally {
           try {
-            if (_c2 && !_c2.done && (_a14 = _b2.return)) _a14.call(_b2);
+            if (_c2 && !_c2.done && (_a17 = _b2.return)) _a17.call(_b2);
           } finally {
             if (e_1) throw e_1.error;
           }
@@ -7766,8 +7766,8 @@ var Subject = (function(_super) {
   };
   Object.defineProperty(Subject2.prototype, "observed", {
     get: function() {
-      var _a14;
-      return ((_a14 = this.observers) === null || _a14 === void 0 ? void 0 : _a14.length) > 0;
+      var _a17;
+      return ((_a17 = this.observers) === null || _a17 === void 0 ? void 0 : _a17.length) > 0;
     },
     enumerable: false,
     configurable: true
@@ -7783,7 +7783,7 @@ var Subject = (function(_super) {
   };
   Subject2.prototype._innerSubscribe = function(subscriber) {
     var _this = this;
-    var _a14 = this, hasError = _a14.hasError, isStopped = _a14.isStopped, observers = _a14.observers;
+    var _a17 = this, hasError = _a17.hasError, isStopped = _a17.isStopped, observers = _a17.observers;
     if (hasError || isStopped) {
       return EMPTY_SUBSCRIPTION;
     }
@@ -7795,7 +7795,7 @@ var Subject = (function(_super) {
     });
   };
   Subject2.prototype._checkFinalizedStatuses = function(subscriber) {
-    var _a14 = this, hasError = _a14.hasError, thrownError = _a14.thrownError, isStopped = _a14.isStopped;
+    var _a17 = this, hasError = _a17.hasError, thrownError = _a17.thrownError, isStopped = _a17.isStopped;
     if (hasError) {
       subscriber.error(thrownError);
     } else if (isStopped) {
@@ -7821,20 +7821,20 @@ var AnonymousSubject = (function(_super) {
     return _this;
   }
   AnonymousSubject2.prototype.next = function(value2) {
-    var _a14, _b2;
-    (_b2 = (_a14 = this.destination) === null || _a14 === void 0 ? void 0 : _a14.next) === null || _b2 === void 0 ? void 0 : _b2.call(_a14, value2);
+    var _a17, _b2;
+    (_b2 = (_a17 = this.destination) === null || _a17 === void 0 ? void 0 : _a17.next) === null || _b2 === void 0 ? void 0 : _b2.call(_a17, value2);
   };
   AnonymousSubject2.prototype.error = function(err) {
-    var _a14, _b2;
-    (_b2 = (_a14 = this.destination) === null || _a14 === void 0 ? void 0 : _a14.error) === null || _b2 === void 0 ? void 0 : _b2.call(_a14, err);
+    var _a17, _b2;
+    (_b2 = (_a17 = this.destination) === null || _a17 === void 0 ? void 0 : _a17.error) === null || _b2 === void 0 ? void 0 : _b2.call(_a17, err);
   };
   AnonymousSubject2.prototype.complete = function() {
-    var _a14, _b2;
-    (_b2 = (_a14 = this.destination) === null || _a14 === void 0 ? void 0 : _a14.complete) === null || _b2 === void 0 ? void 0 : _b2.call(_a14);
+    var _a17, _b2;
+    (_b2 = (_a17 = this.destination) === null || _a17 === void 0 ? void 0 : _a17.complete) === null || _b2 === void 0 ? void 0 : _b2.call(_a17);
   };
   AnonymousSubject2.prototype._subscribe = function(subscriber) {
-    var _a14, _b2;
-    return (_b2 = (_a14 = this.source) === null || _a14 === void 0 ? void 0 : _a14.subscribe(subscriber)) !== null && _b2 !== void 0 ? _b2 : EMPTY_SUBSCRIPTION;
+    var _a17, _b2;
+    return (_b2 = (_a17 = this.source) === null || _a17 === void 0 ? void 0 : _a17.subscribe(subscriber)) !== null && _b2 !== void 0 ? _b2 : EMPTY_SUBSCRIPTION;
   };
   return AnonymousSubject2;
 })(Subject);
@@ -7872,7 +7872,7 @@ var ReplaySubject = (function(_super) {
     return _this;
   }
   ReplaySubject2.prototype.next = function(value2) {
-    var _a14 = this, isStopped = _a14.isStopped, _buffer = _a14._buffer, _infiniteTimeWindow = _a14._infiniteTimeWindow, _timestampProvider = _a14._timestampProvider, _windowTime = _a14._windowTime;
+    var _a17 = this, isStopped = _a17.isStopped, _buffer = _a17._buffer, _infiniteTimeWindow = _a17._infiniteTimeWindow, _timestampProvider = _a17._timestampProvider, _windowTime = _a17._windowTime;
     if (!isStopped) {
       _buffer.push(value2);
       !_infiniteTimeWindow && _buffer.push(_timestampProvider.now() + _windowTime);
@@ -7884,7 +7884,7 @@ var ReplaySubject = (function(_super) {
     this._throwIfClosed();
     this._trimBuffer();
     var subscription = this._innerSubscribe(subscriber);
-    var _a14 = this, _infiniteTimeWindow = _a14._infiniteTimeWindow, _buffer = _a14._buffer;
+    var _a17 = this, _infiniteTimeWindow = _a17._infiniteTimeWindow, _buffer = _a17._buffer;
     var copy = _buffer.slice();
     for (var i9 = 0; i9 < copy.length && !subscriber.closed; i9 += _infiniteTimeWindow ? 1 : 2) {
       subscriber.next(copy[i9]);
@@ -7893,7 +7893,7 @@ var ReplaySubject = (function(_super) {
     return subscription;
   };
   ReplaySubject2.prototype._trimBuffer = function() {
-    var _a14 = this, _bufferSize = _a14._bufferSize, _timestampProvider = _a14._timestampProvider, _buffer = _a14._buffer, _infiniteTimeWindow = _a14._infiniteTimeWindow;
+    var _a17 = this, _bufferSize = _a17._bufferSize, _timestampProvider = _a17._timestampProvider, _buffer = _a17._buffer, _infiniteTimeWindow = _a17._infiniteTimeWindow;
     var adjustedBufferSize = (_infiniteTimeWindow ? 1 : 2) * _bufferSize;
     _bufferSize < Infinity && adjustedBufferSize < _buffer.length && _buffer.splice(0, _buffer.length - adjustedBufferSize);
     if (!_infiniteTimeWindow) {
@@ -7954,7 +7954,7 @@ var AsyncAction = (function(_super) {
     return _this;
   }
   AsyncAction2.prototype.schedule = function(state, delay2) {
-    var _a14;
+    var _a17;
     if (delay2 === void 0) {
       delay2 = 0;
     }
@@ -7969,7 +7969,7 @@ var AsyncAction = (function(_super) {
     }
     this.pending = true;
     this.delay = delay2;
-    this.id = (_a14 = this.id) !== null && _a14 !== void 0 ? _a14 : this.requestAsyncId(scheduler, this.id, delay2);
+    this.id = (_a17 = this.id) !== null && _a17 !== void 0 ? _a17 : this.requestAsyncId(scheduler, this.id, delay2);
     return this;
   };
   AsyncAction2.prototype.requestAsyncId = function(scheduler, _id, delay2) {
@@ -8018,7 +8018,7 @@ var AsyncAction = (function(_super) {
   };
   AsyncAction2.prototype.unsubscribe = function() {
     if (!this.closed) {
-      var _a14 = this, id = _a14.id, scheduler = _a14.scheduler;
+      var _a17 = this, id = _a17.id, scheduler = _a17.scheduler;
       var actions = scheduler.actions;
       this.work = this.state = this.scheduler = null;
       this.pending = false;
@@ -8153,7 +8153,7 @@ function isIterable(input) {
 // 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, _a14, value2, done;
+    var reader, _a17, value2, done;
     return __generator(this, function(_b2) {
       switch (_b2.label) {
         case 0:
@@ -8166,7 +8166,7 @@ function readableStreamLikeToAsyncGenerator(readableStream) {
           if (false) return [3, 8];
           return [4, __await(reader.read())];
         case 3:
-          _a14 = _b2.sent(), value2 = _a14.value, done = _a14.done;
+          _a17 = _b2.sent(), value2 = _a17.value, done = _a17.done;
           if (!done) return [3, 5];
           return [4, __await(void 0)];
         case 4:
@@ -8251,7 +8251,7 @@ function fromPromise(promise) {
 }
 function fromIterable(iterable) {
   return new Observable(function(subscriber) {
-    var e_1, _a14;
+    var e_1, _a17;
     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;
@@ -8264,7 +8264,7 @@ function fromIterable(iterable) {
       e_1 = { error: e_1_1 };
     } finally {
       try {
-        if (iterable_1_1 && !iterable_1_1.done && (_a14 = iterable_1.return)) _a14.call(iterable_1);
+        if (iterable_1_1 && !iterable_1_1.done && (_a17 = iterable_1.return)) _a17.call(iterable_1);
       } finally {
         if (e_1) throw e_1.error;
       }
@@ -8284,7 +8284,7 @@ function fromReadableStreamLike(readableStream) {
 }
 function process2(asyncIterable, subscriber) {
   var asyncIterable_1, asyncIterable_1_1;
-  var e_2, _a14;
+  var e_2, _a17;
   return __awaiter(this, void 0, void 0, function() {
     var value2, e_2_1;
     return __generator(this, function(_b2) {
@@ -8313,8 +8313,8 @@ function process2(asyncIterable, subscriber) {
           return [3, 11];
         case 6:
           _b2.trys.push([6, , 9, 10]);
-          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a14 = asyncIterable_1.return))) return [3, 8];
-          return [4, _a14.call(asyncIterable_1)];
+          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a17 = asyncIterable_1.return))) return [3, 8];
+          return [4, _a17.call(asyncIterable_1)];
         case 7:
           _b2.sent();
           _b2.label = 8;
@@ -8423,11 +8423,11 @@ function scheduleIterable(input, scheduler) {
     executeSchedule(subscriber, scheduler, function() {
       iterator2 = input[iterator]();
       executeSchedule(subscriber, scheduler, function() {
-        var _a14;
+        var _a17;
         var value2;
         var done;
         try {
-          _a14 = iterator2.next(), value2 = _a14.value, done = _a14.done;
+          _a17 = iterator2.next(), value2 = _a17.value, done = _a17.done;
         } catch (err) {
           subscriber.error(err);
           return;
@@ -8650,11 +8650,11 @@ function fromEvent(target, eventName, options, resultSelector) {
   if (resultSelector) {
     return fromEvent(target, eventName, options).pipe(mapOneOrManyArgs(resultSelector));
   }
-  var _a14 = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
+  var _a17 = __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), add2 = _a14[0], remove2 = _a14[1];
+  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add2 = _a17[0], remove2 = _a17[1];
   if (!add2) {
     if (isArrayLike(target)) {
       return mergeMap(function(subTarget) {
@@ -8772,7 +8772,7 @@ function bufferCount(bufferSize, startBufferEvery) {
     var buffers = [];
     var count2 = 0;
     source.subscribe(createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a14, e_2, _b2;
+      var e_1, _a17, e_2, _b2;
       var toEmit = null;
       if (count2++ % startBufferEvery === 0) {
         buffers.push([]);
@@ -8790,7 +8790,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (buffers_1_1 && !buffers_1_1.done && (_a14 = buffers_1.return)) _a14.call(buffers_1);
+          if (buffers_1_1 && !buffers_1_1.done && (_a17 = buffers_1.return)) _a17.call(buffers_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -8813,7 +8813,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         }
       }
     }, function() {
-      var e_3, _a14;
+      var e_3, _a17;
       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;
@@ -8823,7 +8823,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_3 = { error: e_3_1 };
       } finally {
         try {
-          if (buffers_2_1 && !buffers_2_1.done && (_a14 = buffers_2.return)) _a14.call(buffers_2);
+          if (buffers_2_1 && !buffers_2_1.done && (_a17 = buffers_2.return)) _a17.call(buffers_2);
         } finally {
           if (e_3) throw e_3.error;
         }
@@ -8837,12 +8837,12 @@ function bufferCount(bufferSize, startBufferEvery) {
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/bufferTime.js
 function bufferTime(bufferTimeSpan) {
-  var _a14, _b2;
+  var _a17, _b2;
   var otherArgs = [];
   for (var _i = 1; _i < arguments.length; _i++) {
     otherArgs[_i - 1] = arguments[_i];
   }
-  var scheduler = (_a14 = popScheduler(otherArgs)) !== null && _a14 !== void 0 ? _a14 : asyncScheduler;
+  var scheduler = (_a17 = popScheduler(otherArgs)) !== null && _a17 !== void 0 ? _a17 : asyncScheduler;
   var bufferCreationInterval = (_b2 = otherArgs[0]) !== null && _b2 !== void 0 ? _b2 : null;
   var maxBufferSize = otherArgs[1] || Infinity;
   return operate(function(source, subscriber) {
@@ -8877,7 +8877,7 @@ function bufferTime(bufferTimeSpan) {
     }
     startBuffer();
     var bufferTimeSubscriber = createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a15;
+      var e_1, _a18;
       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()) {
@@ -8890,7 +8890,7 @@ function bufferTime(bufferTimeSpan) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a15 = recordsCopy_1.return)) _a15.call(recordsCopy_1);
+          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a18 = recordsCopy_1.return)) _a18.call(recordsCopy_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -9009,7 +9009,7 @@ function takeUntil(notifier) {
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/throttle.js
 function throttle(durationSelector, config2) {
   return operate(function(source, subscriber) {
-    var _a14 = config2 !== null && config2 !== void 0 ? config2 : {}, _b2 = _a14.leading, leading = _b2 === void 0 ? true : _b2, _c2 = _a14.trailing, trailing = _c2 === void 0 ? false : _c2;
+    var _a17 = config2 !== null && config2 !== void 0 ? config2 : {}, _b2 = _a17.leading, leading = _b2 === void 0 ? true : _b2, _c2 = _a17.trailing, trailing = _c2 === void 0 ? false : _c2;
     var hasValue = false;
     var sendValue = null;
     var throttled = null;
@@ -41663,9 +41663,9 @@ __publicField(WccFrame, "styles", [
 __runInitializers(_init, 1, WccFrame);
 
 // ts_web/elements/wcc-sidebar.ts
-var _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements;
+var _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections;
 _WccSidebar_decorators = [t4("wcc-sidebar")];
-var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _a2) {
+var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _collapsedSections_dec = [r5()], _a2) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _selectedItem, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
@@ -41673,6 +41673,8 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     __privateAdd(this, _dashboardRef, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
     __privateAdd(this, _isNative2, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
     __privateAdd(this, _expandedElements, __runInitializers(_init2, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 27, this);
+    __privateAdd(this, _collapsedSections, __runInitializers(_init2, 28, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 31, this);
+    __publicField(this, "sectionsInitialized", false);
   }
   render() {
     return x`
@@ -41715,7 +41717,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           padding: 0.5rem 0;
         }
 
-        h3 {
+        .section-header {
           padding: 0.3rem 0.75rem;
           font-size: 0.65rem;
           font-weight: 500;
@@ -41727,12 +41729,45 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           background: rgba(59, 130, 246, 0.03);
           border-bottom: 1px solid var(--border);
           border-top: 1px solid var(--border);
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          cursor: pointer;
+          user-select: none;
+          transition: all 0.15s ease;
         }
 
-        h3:first-child {
+        .section-header:first-child {
           margin-top: 0;
         }
 
+        .section-header:hover {
+          background: rgba(59, 130, 246, 0.08);
+        }
+
+        .section-header .expand-icon {
+          font-size: 14px;
+          opacity: 0.5;
+          transition: transform 0.2s ease;
+        }
+
+        .section-header.collapsed .expand-icon {
+          transform: rotate(-90deg);
+        }
+
+        .section-header .section-icon {
+          font-size: 14px;
+          opacity: 0.6;
+        }
+
+        .section-content {
+          overflow: hidden;
+        }
+
+        .section-content.collapsed {
+          display: none;
+        }
+
         .material-symbols-outlined {
           font-family: 'Material Symbols Outlined';
           font-weight: normal;
@@ -41866,83 +41901,130 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         }
       </style>
       <div class="menu">
-        <h3>Pages</h3>
-        ${(() => {
-      const pages = Object.keys(this.dashboardRef.pages);
-      return pages.map((pageName) => {
-        const item = this.dashboardRef.pages[pageName];
+        ${this.renderSections()}
+      </div>
+    `;
+  }
+  /**
+   * Initialize collapsed sections from section config
+   */
+  initCollapsedSections() {
+    if (this.sectionsInitialized) return;
+    const collapsed = /* @__PURE__ */ new Set();
+    for (const section of this.dashboardRef.sections) {
+      if (section.collapsed) {
+        collapsed.add(section.name);
+      }
+    }
+    this.collapsedSections = collapsed;
+    this.sectionsInitialized = true;
+  }
+  /**
+   * Render all sections
+   */
+  renderSections() {
+    this.initCollapsedSections();
+    return this.dashboardRef.sections.map((section, index2) => {
+      const isCollapsed = this.collapsedSections.has(section.name);
+      const sectionIcon = section.icon || (section.type === "pages" ? "insert_drive_file" : "widgets");
+      return x`
+        <div
+          class="section-header ${isCollapsed ? "collapsed" : ""}"
+          @click=${() => this.toggleSectionCollapsed(section.name)}
+        >
+          <i class="material-symbols-outlined expand-icon">expand_more</i>
+          ${section.icon ? x`<i class="material-symbols-outlined section-icon">${section.icon}</i>` : null}
+          <span>${section.name}</span>
+        </div>
+        <div class="section-content ${isCollapsed ? "collapsed" : ""}">
+          ${this.renderSectionItems(section)}
+        </div>
+      `;
+    });
+  }
+  /**
+   * Render items for a section
+   */
+  renderSectionItems(section) {
+    const entries = getSectionItems(section);
+    if (section.type === "pages") {
+      return entries.map(([pageName, item]) => {
         return x`
-              <div
-                class="selectOption ${this.selectedItem === item ? "selected" : null}"
-                @click=${async () => {
-          const domtools2 = await dist_ts_exports25.DomTools.setupDomTools();
-          this.selectItem("page", pageName, item, 0);
+          <div
+            class="selectOption ${this.selectedItem === item ? "selected" : ""}"
+            @click=${async () => {
+          await dist_ts_exports25.DomTools.setupDomTools();
+          this.selectItem("page", pageName, item, 0, section);
         }}
-              >
-                <i class="material-symbols-outlined">insert_drive_file</i>
-                <div class="text">${pageName}</div>
-              </div>
-            `;
+          >
+            <i class="material-symbols-outlined">insert_drive_file</i>
+            <div class="text">${pageName}</div>
+          </div>
+        `;
       });
-    })()}
-        <h3>Elements</h3>
-        ${(() => {
-      const elements = Object.keys(this.dashboardRef.elements);
-      return elements.map((elementName) => {
-        const item = this.dashboardRef.elements[elementName];
-        const demoCount = item.demo ? getDemoCount(item.demo) : 0;
-        const isMultiDemo = item.demo && hasMultipleDemos(item.demo);
+    } else {
+      return entries.map(([elementName, item]) => {
+        const anonItem = item;
+        const demoCount = anonItem.demo ? getDemoCount(anonItem.demo) : 0;
+        const isMultiDemo = anonItem.demo && hasMultipleDemos(anonItem.demo);
         const isExpanded = this.expandedElements.has(elementName);
         const isSelected = this.selectedItem === item;
         if (isMultiDemo) {
           return x`
-                <div
-                  class="selectOption folder ${isExpanded ? "expanded" : ""} ${isSelected ? "selected" : ""}"
-                  @click=${() => this.toggleExpanded(elementName)}
-                >
-                  <i class="material-symbols-outlined expand-icon">chevron_right</i>
-                  <i class="material-symbols-outlined">folder</i>
-                  <div class="text">${elementName}</div>
-                </div>
-                ${isExpanded ? x`
-                  <div class="demo-children">
-                    ${Array.from({ length: demoCount }, (_3, i9) => {
+            <div
+              class="selectOption folder ${isExpanded ? "expanded" : ""} ${isSelected ? "selected" : ""}"
+              @click=${() => this.toggleExpanded(elementName)}
+            >
+              <i class="material-symbols-outlined expand-icon">chevron_right</i>
+              <i class="material-symbols-outlined">folder</i>
+              <div class="text">${elementName}</div>
+            </div>
+            ${isExpanded ? x`
+              <div class="demo-children">
+                ${Array.from({ length: demoCount }, (_3, i9) => {
             const demoIndex = i9;
             const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
             return x`
-                        <div
-                          class="demo-child ${isThisDemoSelected ? "selected" : ""}"
-                          @click=${async () => {
+                    <div
+                      class="demo-child ${isThisDemoSelected ? "selected" : ""}"
+                      @click=${async () => {
               await dist_ts_exports25.DomTools.setupDomTools();
-              this.selectItem("element", elementName, item, demoIndex);
+              this.selectItem("element", elementName, item, demoIndex, section);
             }}
-                        >
-                          <i class="material-symbols-outlined">play_circle</i>
-                          <div class="text">demo${demoIndex + 1}</div>
-                        </div>
-                      `;
+                    >
+                      <i class="material-symbols-outlined">play_circle</i>
+                      <div class="text">demo${demoIndex + 1}</div>
+                    </div>
+                  `;
           })}
-                  </div>
-                ` : null}
-              `;
+              </div>
+            ` : null}
+          `;
         } else {
           return x`
-                <div
-                  class="selectOption ${isSelected ? "selected" : null}"
-                  @click=${async () => {
+            <div
+              class="selectOption ${isSelected ? "selected" : ""}"
+              @click=${async () => {
             await dist_ts_exports25.DomTools.setupDomTools();
-            this.selectItem("element", elementName, item, 0);
+            this.selectItem("element", elementName, item, 0, section);
           }}
-                >
-                  <i class="material-symbols-outlined">featured_video</i>
-                  <div class="text">${elementName}</div>
-                </div>
-              `;
+            >
+              <i class="material-symbols-outlined">featured_video</i>
+              <div class="text">${elementName}</div>
+            </div>
+          `;
         }
       });
-    })()}
-      </div>
-    `;
+    }
+  }
+  toggleSectionCollapsed(sectionName) {
+    const newSet = new Set(this.collapsedSections);
+    if (newSet.has(sectionName)) {
+      newSet.delete(sectionName);
+    } else {
+      newSet.add(sectionName);
+    }
+    this.collapsedSections = newSet;
   }
   toggleExpanded(elementName) {
     const newSet = new Set(this.expandedElements);
@@ -41953,14 +42035,40 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     }
     this.expandedElements = newSet;
   }
-  selectItem(typeArg, itemNameArg, itemArg, demoIndex = 0) {
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("selectedItem") && this.selectedItem) {
+      for (const section of this.dashboardRef.sections) {
+        if (section.type !== "elements") continue;
+        const entries = getSectionItems(section);
+        const found = entries.find(([_3, item]) => item === this.selectedItem);
+        if (found) {
+          const [elementName, item] = found;
+          const anonItem = item;
+          if (anonItem.demo && hasMultipleDemos(anonItem.demo)) {
+            if (!this.expandedElements.has(elementName)) {
+              const newSet = new Set(this.expandedElements);
+              newSet.add(elementName);
+              this.expandedElements = newSet;
+            }
+          }
+          break;
+        }
+      }
+    }
+  }
+  selectItem(typeArg, itemNameArg, itemArg, demoIndex = 0, section) {
     console.log("selected item");
     console.log(itemNameArg);
     console.log(itemArg);
     console.log("demo index:", demoIndex);
+    console.log("section:", section?.name);
     this.selectedItem = itemArg;
     this.selectedType = typeArg;
     this.dashboardRef.selectedDemoIndex = demoIndex;
+    if (section) {
+      this.dashboardRef.selectedSection = section;
+    }
     this.dispatchEvent(
       new CustomEvent("selectedType", {
         detail: typeArg
@@ -41986,11 +42094,13 @@ _selectedType = new WeakMap();
 _dashboardRef = new WeakMap();
 _isNative2 = new WeakMap();
 _expandedElements = new WeakMap();
+_collapsedSections = new WeakMap();
 __decorateElement(_init2, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
 __decorateElement(_init2, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
 __decorateElement(_init2, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
 __decorateElement(_init2, 4, "isNative", _isNative_dec2, WccSidebar, _isNative2);
 __decorateElement(_init2, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
+__decorateElement(_init2, 4, "collapsedSections", _collapsedSections_dec, WccSidebar, _collapsedSections);
 WccSidebar = __decorateElement(_init2, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
 __runInitializers(_init2, 1, WccSidebar);
 
@@ -44302,19 +44412,29 @@ WccProperties = __decorateElement(_init5, 0, "WccProperties", _WccProperties_dec
 __runInitializers(_init5, 1, WccProperties);
 
 // ts_web/elements/wcc-dashboard.ts
-var _wccFrame_dec, _warning_dec2, _elements_dec, _pages_dec, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _a6, _WccDashboard_decorators, _init6, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _pages, _elements, _warning2, _wccFrame;
+var _wccFrame_dec, _warning_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a6, _WccDashboard_decorators, _init6, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _warning2, _wccFrame;
+var getSectionItems = (section) => {
+  let entries = Object.entries(section.items);
+  if (section.filter) {
+    entries = entries.filter(([name, item]) => section.filter(name, item));
+  }
+  if (section.sort) {
+    entries.sort(section.sort);
+  }
+  return entries;
+};
 _WccDashboard_decorators = [t4("wcc-dashboard")];
-var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _pages_dec = [n5()], _elements_dec = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
-  constructor(elementsArg, pagesArg) {
+var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _selectedSection_dec = [n5()], _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
+  constructor(config2) {
     super();
-    __privateAdd(this, _selectedType2, __runInitializers(_init6, 8, this)), __runInitializers(_init6, 11, this);
-    __privateAdd(this, _selectedItemName, __runInitializers(_init6, 12, this)), __runInitializers(_init6, 15, this);
-    __privateAdd(this, _selectedItem3, __runInitializers(_init6, 16, this)), __runInitializers(_init6, 19, this);
-    __privateAdd(this, _selectedDemoIndex, __runInitializers(_init6, 20, this, 0)), __runInitializers(_init6, 23, this);
-    __privateAdd(this, _selectedViewport2, __runInitializers(_init6, 24, this, "desktop")), __runInitializers(_init6, 27, this);
-    __privateAdd(this, _selectedTheme2, __runInitializers(_init6, 28, this, "dark")), __runInitializers(_init6, 31, this);
-    __privateAdd(this, _pages, __runInitializers(_init6, 32, this, {})), __runInitializers(_init6, 35, this);
-    __privateAdd(this, _elements, __runInitializers(_init6, 36, this, {})), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _sections, __runInitializers(_init6, 8, this, [])), __runInitializers(_init6, 11, this);
+    __privateAdd(this, _selectedSection, __runInitializers(_init6, 12, this, null)), __runInitializers(_init6, 15, this);
+    __privateAdd(this, _selectedType2, __runInitializers(_init6, 16, this)), __runInitializers(_init6, 19, this);
+    __privateAdd(this, _selectedItemName, __runInitializers(_init6, 20, this)), __runInitializers(_init6, 23, this);
+    __privateAdd(this, _selectedItem3, __runInitializers(_init6, 24, this)), __runInitializers(_init6, 27, this);
+    __privateAdd(this, _selectedDemoIndex, __runInitializers(_init6, 28, this, 0)), __runInitializers(_init6, 31, this);
+    __privateAdd(this, _selectedViewport2, __runInitializers(_init6, 32, this, "desktop")), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _selectedTheme2, __runInitializers(_init6, 36, this, "dark")), __runInitializers(_init6, 39, this);
     __privateAdd(this, _warning2, __runInitializers(_init6, 40, this, null)), __runInitializers(_init6, 43, this);
     __publicField(this, "frameScrollY", 0);
     __publicField(this, "sidebarScrollY", 0);
@@ -44322,19 +44442,34 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     __privateAdd(this, _wccFrame, __runInitializers(_init6, 44, this)), __runInitializers(_init6, 47, this);
     __publicField(this, "scrollUpdateTimeout");
     __publicField(this, "scrollListenersAttached", false);
-    if (elementsArg) {
-      this.elements = elementsArg;
-      console.log("got elements:");
-      console.log(this.elements);
-    }
-    if (pagesArg) {
-      this.pages = pagesArg;
+    if (config2 && config2.sections) {
+      this.sections = config2.sections;
+      console.log("got sections:", this.sections.map((s8) => s8.name));
     }
   }
   // Derived from selectedViewport - no need for separate property
   get isNative() {
     return this.selectedViewport === "native";
   }
+  /**
+   * Find an item by name across all sections, returns the item and its section
+   */
+  findItemByName(name) {
+    for (const section of this.sections) {
+      const entries = getSectionItems(section);
+      const found = entries.find(([itemName]) => itemName === name);
+      if (found) {
+        return { item: found[1], section };
+      }
+    }
+    return null;
+  }
+  /**
+   * Find a section by name (URL-decoded)
+   */
+  findSectionByName(name) {
+    return this.sections.find((s8) => s8.name === name) || null;
+  }
   render() {
     return x`
       <style>
@@ -44415,17 +44550,31 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
       this.setupScrollListeners();
     }, 500);
     this.domtools.router.on(
-      "/wcctools-route/:itemType/:itemName/:demoIndex/:viewport/:theme",
+      "/wcctools-route/:sectionName/:itemName/:demoIndex/:viewport/:theme",
       async (routeInfo) => {
-        this.selectedType = routeInfo.params.itemType;
+        const sectionName = decodeURIComponent(routeInfo.params.sectionName);
+        this.selectedSection = this.findSectionByName(sectionName);
         this.selectedItemName = routeInfo.params.itemName;
         this.selectedDemoIndex = parseInt(routeInfo.params.demoIndex) || 0;
         this.selectedViewport = routeInfo.params.viewport;
         this.selectedTheme = routeInfo.params.theme;
-        if (routeInfo.params.itemType === "element") {
-          this.selectedItem = this.elements[routeInfo.params.itemName];
-        } else if (routeInfo.params.itemType === "page") {
-          this.selectedItem = this.pages[routeInfo.params.itemName];
+        if (this.selectedSection) {
+          const entries = getSectionItems(this.selectedSection);
+          const found = entries.find(([name]) => name === routeInfo.params.itemName);
+          if (found) {
+            this.selectedItem = found[1];
+            this.selectedType = this.selectedSection.type === "elements" ? "element" : "page";
+          }
+        } else {
+          const legacyType = routeInfo.params.sectionName;
+          if (legacyType === "element" || legacyType === "page") {
+            this.selectedType = legacyType;
+            const result = this.findItemByName(routeInfo.params.itemName);
+            if (result) {
+              this.selectedItem = result.item;
+              this.selectedSection = result.section;
+            }
+          }
         }
         if (routeInfo.queryParams) {
           const frameScrollY = routeInfo.queryParams.frameScrollY;
@@ -44445,17 +44594,31 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
       }
     );
     this.domtools.router.on(
-      "/wcctools-route/:itemType/:itemName/:viewport/:theme",
+      "/wcctools-route/:sectionName/:itemName/:viewport/:theme",
       async (routeInfo) => {
-        this.selectedType = routeInfo.params.itemType;
+        const sectionName = decodeURIComponent(routeInfo.params.sectionName);
+        this.selectedSection = this.findSectionByName(sectionName);
         this.selectedItemName = routeInfo.params.itemName;
         this.selectedDemoIndex = 0;
         this.selectedViewport = routeInfo.params.viewport;
         this.selectedTheme = routeInfo.params.theme;
-        if (routeInfo.params.itemType === "element") {
-          this.selectedItem = this.elements[routeInfo.params.itemName];
-        } else if (routeInfo.params.itemType === "page") {
-          this.selectedItem = this.pages[routeInfo.params.itemName];
+        if (this.selectedSection) {
+          const entries = getSectionItems(this.selectedSection);
+          const found = entries.find(([name]) => name === routeInfo.params.itemName);
+          if (found) {
+            this.selectedItem = found[1];
+            this.selectedType = this.selectedSection.type === "elements" ? "element" : "page";
+          }
+        } else {
+          const legacyType = routeInfo.params.sectionName;
+          if (legacyType === "element" || legacyType === "page") {
+            this.selectedType = legacyType;
+            const result = this.findItemByName(routeInfo.params.itemName);
+            if (result) {
+              this.selectedItem = result.item;
+              this.selectedSection = result.section;
+            }
+          }
         }
         if (routeInfo.queryParams) {
           const frameScrollY = routeInfo.queryParams.frameScrollY;
@@ -44524,7 +44687,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     }
   }
   buildUrl() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
+    const sectionName = this.selectedSection ? encodeURIComponent(this.selectedSection.name) : this.selectedType;
+    const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -44563,7 +44727,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     }, 300);
   }
   updateUrlWithScrollState() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
+    const sectionName = this.selectedSection ? encodeURIComponent(this.selectedSection.name) : this.selectedType;
+    const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -44591,36 +44756,63 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
   }
 };
 _init6 = __decoratorStart(_a6);
+_sections = new WeakMap();
+_selectedSection = new WeakMap();
 _selectedType2 = new WeakMap();
 _selectedItemName = new WeakMap();
 _selectedItem3 = new WeakMap();
 _selectedDemoIndex = new WeakMap();
 _selectedViewport2 = new WeakMap();
 _selectedTheme2 = new WeakMap();
-_pages = new WeakMap();
-_elements = new WeakMap();
 _warning2 = new WeakMap();
 _wccFrame = new WeakMap();
+__decorateElement(_init6, 4, "sections", _sections_dec, WccDashboard2, _sections);
+__decorateElement(_init6, 4, "selectedSection", _selectedSection_dec, WccDashboard2, _selectedSection);
 __decorateElement(_init6, 4, "selectedType", _selectedType_dec2, WccDashboard2, _selectedType2);
 __decorateElement(_init6, 4, "selectedItemName", _selectedItemName_dec, WccDashboard2, _selectedItemName);
 __decorateElement(_init6, 4, "selectedItem", _selectedItem_dec3, WccDashboard2, _selectedItem3);
 __decorateElement(_init6, 4, "selectedDemoIndex", _selectedDemoIndex_dec, WccDashboard2, _selectedDemoIndex);
 __decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec2, WccDashboard2, _selectedViewport2);
 __decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
-__decorateElement(_init6, 4, "pages", _pages_dec, WccDashboard2, _pages);
-__decorateElement(_init6, 4, "elements", _elements_dec, WccDashboard2, _elements);
 __decorateElement(_init6, 4, "warning", _warning_dec2, WccDashboard2, _warning2);
 __decorateElement(_init6, 4, "wccFrame", _wccFrame_dec, WccDashboard2, _wccFrame);
 WccDashboard2 = __decorateElement(_init6, 0, "WccDashboard", _WccDashboard_decorators, WccDashboard2);
 __runInitializers(_init6, 1, WccDashboard2);
 
 // ts_web/index.ts
-var setupWccTools = (elementsArg, pagesArg) => {
+var convertLegacyToConfig = (elementsArg, pagesArg) => {
+  const sections = [];
+  if (pagesArg && Object.keys(pagesArg).length > 0) {
+    sections.push({
+      name: "Pages",
+      type: "pages",
+      items: pagesArg
+    });
+  }
+  if (elementsArg && Object.keys(elementsArg).length > 0) {
+    sections.push({
+      name: "Elements",
+      type: "elements",
+      items: elementsArg
+    });
+  }
+  return { sections };
+};
+var isWccConfig = (arg) => {
+  return arg && typeof arg === "object" && "sections" in arg && Array.isArray(arg.sections);
+};
+var setupWccTools = (configOrElements, pagesArg) => {
+  let config2;
+  if (isWccConfig(configOrElements)) {
+    config2 = configOrElements;
+  } else {
+    config2 = convertLegacyToConfig(configOrElements, pagesArg);
+  }
   let hasRun = false;
   const runWccToolsSetup = async () => {
     if (document.readyState === "complete" && !hasRun) {
       hasRun = true;
-      const wccTools = new WccDashboard2(elementsArg, pagesArg);
+      const wccTools = new WccDashboard2(config2);
       document.querySelector("body").append(wccTools);
     }
   };
@@ -45354,6 +45546,1000 @@ __publicField(TestNested, "styles", [
 ]);
 __runInitializers(_init15, 1, TestNested);
 
+// test/views/index.ts
+var views_exports = {};
+__export(views_exports, {
+  ViewDashboard: () => ViewDashboard,
+  ViewEmptyState: () => ViewEmptyState,
+  ViewSettings: () => ViewSettings
+});
+
+// test/views/view-dashboard.ts
+var _notificationCount_dec, _title_dec, _a14, _ViewDashboard_decorators, _init16, _title, _notificationCount;
+_ViewDashboard_decorators = [t4("view-dashboard")];
+var ViewDashboard = class extends (_a14 = DeesElement, _title_dec = [n5()], _notificationCount_dec = [n5({ type: Number })], _a14) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _title, __runInitializers(_init16, 8, this, "Dashboard")), __runInitializers(_init16, 11, this);
+    __privateAdd(this, _notificationCount, __runInitializers(_init16, 12, this, 3)), __runInitializers(_init16, 15, this);
+  }
+  render() {
+    return x`
+      <div class="dashboard">
+        <header class="header">
+          <h1>${this.title}</h1>
+          <div class="header-actions">
+            <div class="notification-badge" data-count="${this.notificationCount}">
+              <span>Notifications</span>
+            </div>
+            <span>User</span>
+          </div>
+        </header>
+
+        <nav class="sidebar">
+          <div class="nav-item active">Overview</div>
+          <div class="nav-item">Analytics</div>
+          <div class="nav-item">Projects</div>
+          <div class="nav-item">Team</div>
+          <div class="nav-item">Settings</div>
+        </nav>
+
+        <main class="content">
+          <div class="content-header">
+            <h2>Overview</h2>
+            <p>Welcome back! Here's what's happening with your projects.</p>
+          </div>
+
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="label">Total Revenue</div>
+              <div class="value">$45,231</div>
+              <div class="change">+20.1% from last month</div>
+            </div>
+            <div class="stat-card">
+              <div class="label">Active Users</div>
+              <div class="value">2,350</div>
+              <div class="change">+180 new users</div>
+            </div>
+            <div class="stat-card">
+              <div class="label">Pending Tasks</div>
+              <div class="value">12</div>
+              <div class="change negative">-3 from yesterday</div>
+            </div>
+            <div class="stat-card">
+              <div class="label">Completion Rate</div>
+              <div class="value">94.2%</div>
+              <div class="change">+2.4% this week</div>
+            </div>
+          </div>
+
+          <div class="recent-activity">
+            <h3>Recent Activity</h3>
+            <div class="activity-item">
+              <div class="activity-icon">+</div>
+              <div class="activity-content">
+                <div class="title">New project created</div>
+                <div class="time">2 minutes ago</div>
+              </div>
+            </div>
+            <div class="activity-item">
+              <div class="activity-icon">U</div>
+              <div class="activity-content">
+                <div class="title">User settings updated</div>
+                <div class="time">1 hour ago</div>
+              </div>
+            </div>
+            <div class="activity-item">
+              <div class="activity-icon">D</div>
+              <div class="activity-content">
+                <div class="title">Deployment completed</div>
+                <div class="time">3 hours ago</div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    `;
+  }
+};
+_init16 = __decoratorStart(_a14);
+_title = new WeakMap();
+_notificationCount = new WeakMap();
+__decorateElement(_init16, 4, "title", _title_dec, ViewDashboard, _title);
+__decorateElement(_init16, 4, "notificationCount", _notificationCount_dec, ViewDashboard, _notificationCount);
+ViewDashboard = __decorateElement(_init16, 0, "ViewDashboard", _ViewDashboard_decorators, ViewDashboard);
+__publicField(ViewDashboard, "demo", () => x`<view-dashboard></view-dashboard>`);
+__publicField(ViewDashboard, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+        min-height: 100%;
+        background: ${cssManager.bdTheme("#f5f5f5", "#0a0a0a")};
+        color: ${cssManager.bdTheme("#1a1a1a", "#e5e5e5")};
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+
+      .dashboard {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+        grid-template-rows: 60px 1fr;
+        min-height: 100vh;
+      }
+
+      .header {
+        grid-column: 1 / -1;
+        background: ${cssManager.bdTheme("#fff", "#111")};
+        border-bottom: 1px solid ${cssManager.bdTheme("#e5e5e5", "#222")};
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 24px;
+      }
+
+      .header h1 {
+        font-size: 18px;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .notification-badge {
+        position: relative;
+        padding: 8px;
+        cursor: pointer;
+      }
+
+      .notification-badge::after {
+        content: attr(data-count);
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        background: #ef4444;
+        color: white;
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 10px;
+        font-weight: 600;
+      }
+
+      .sidebar {
+        background: ${cssManager.bdTheme("#fff", "#0f0f0f")};
+        border-right: 1px solid ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        padding: 16px 0;
+      }
+
+      .nav-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 24px;
+        color: ${cssManager.bdTheme("#666", "#999")};
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .nav-item:hover {
+        background: ${cssManager.bdTheme("#f5f5f5", "#1a1a1a")};
+        color: ${cssManager.bdTheme("#1a1a1a", "#fff")};
+      }
+
+      .nav-item.active {
+        background: ${cssManager.bdTheme("rgba(59, 130, 246, 0.1)", "rgba(59, 130, 246, 0.15)")};
+        color: #3b82f6;
+        border-right: 3px solid #3b82f6;
+      }
+
+      .content {
+        padding: 24px;
+        overflow-y: auto;
+      }
+
+      .content-header {
+        margin-bottom: 24px;
+      }
+
+      .content-header h2 {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+      }
+
+      .content-header p {
+        color: ${cssManager.bdTheme("#666", "#888")};
+        margin: 0;
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      .stat-card {
+        background: ${cssManager.bdTheme("#fff", "#111")};
+        border: 1px solid ${cssManager.bdTheme("#e5e5e5", "#222")};
+        border-radius: 8px;
+        padding: 20px;
+      }
+
+      .stat-card .label {
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme("#666", "#888")};
+        margin-bottom: 8px;
+      }
+
+      .stat-card .value {
+        font-size: 28px;
+        font-weight: 700;
+      }
+
+      .stat-card .change {
+        font-size: 12px;
+        color: #22c55e;
+        margin-top: 4px;
+      }
+
+      .stat-card .change.negative {
+        color: #ef4444;
+      }
+
+      .recent-activity {
+        background: ${cssManager.bdTheme("#fff", "#111")};
+        border: 1px solid ${cssManager.bdTheme("#e5e5e5", "#222")};
+        border-radius: 8px;
+        padding: 20px;
+      }
+
+      .recent-activity h3 {
+        font-size: 16px;
+        font-weight: 600;
+        margin: 0 0 16px 0;
+      }
+
+      .activity-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 0;
+        border-bottom: 1px solid ${cssManager.bdTheme("#f0f0f0", "#1a1a1a")};
+      }
+
+      .activity-item:last-child {
+        border-bottom: none;
+      }
+
+      .activity-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: ${cssManager.bdTheme("#f5f5f5", "#1a1a1a")};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+      }
+
+      .activity-content {
+        flex: 1;
+      }
+
+      .activity-content .title {
+        font-weight: 500;
+        margin-bottom: 2px;
+      }
+
+      .activity-content .time {
+        font-size: 12px;
+        color: ${cssManager.bdTheme("#888", "#666")};
+      }
+    `
+]);
+__runInitializers(_init16, 1, ViewDashboard);
+
+// test/views/view-settings.ts
+var _userEmail_dec, _userName_dec, _activeTab_dec, _a15, _ViewSettings_decorators, _init17, _activeTab, _userName, _userEmail;
+_ViewSettings_decorators = [t4("view-settings")];
+var ViewSettings = class extends (_a15 = DeesElement, _activeTab_dec = [n5()], _userName_dec = [n5()], _userEmail_dec = [n5()], _a15) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _activeTab, __runInitializers(_init17, 8, this, "profile")), __runInitializers(_init17, 11, this);
+    __privateAdd(this, _userName, __runInitializers(_init17, 12, this, "John Doe")), __runInitializers(_init17, 15, this);
+    __privateAdd(this, _userEmail, __runInitializers(_init17, 16, this, "john@example.com")), __runInitializers(_init17, 19, this);
+  }
+  handleTabClick(tab2) {
+    this.activeTab = tab2;
+  }
+  render() {
+    return x`
+      <div class="settings-layout">
+        <div class="settings-header">
+          <h1>Settings</h1>
+          <p>Manage your account settings and preferences</p>
+        </div>
+
+        <div class="settings-content">
+          <nav class="settings-nav">
+            <div
+              class="nav-item ${this.activeTab === "profile" ? "active" : ""}"
+              @click=${() => this.handleTabClick("profile")}
+            >
+              Profile
+            </div>
+            <div
+              class="nav-item ${this.activeTab === "notifications" ? "active" : ""}"
+              @click=${() => this.handleTabClick("notifications")}
+            >
+              Notifications
+            </div>
+            <div
+              class="nav-item ${this.activeTab === "security" ? "active" : ""}"
+              @click=${() => this.handleTabClick("security")}
+            >
+              Security
+            </div>
+          </nav>
+
+          <div class="settings-panel">
+            ${this.activeTab === "profile" ? this.renderProfile() : null}
+            ${this.activeTab === "notifications" ? this.renderNotifications() : null}
+            ${this.activeTab === "security" ? this.renderSecurity() : null}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderProfile() {
+    return x`
+      <div class="panel-header">
+        <h2>Profile Information</h2>
+        <p>Update your personal details and email address</p>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label>First Name</label>
+          <input type="text" value="John" />
+        </div>
+        <div class="form-group">
+          <label>Last Name</label>
+          <input type="text" value="Doe" />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label>Email Address</label>
+        <input type="email" value="${this.userEmail}" />
+      </div>
+
+      <div class="form-group">
+        <label>Bio</label>
+        <input type="text" placeholder="Tell us about yourself..." />
+      </div>
+
+      <div class="button-group">
+        <button class="btn btn-primary">Save Changes</button>
+        <button class="btn btn-secondary">Cancel</button>
+      </div>
+    `;
+  }
+  renderNotifications() {
+    return x`
+      <div class="panel-header">
+        <h2>Notification Preferences</h2>
+        <p>Choose what notifications you want to receive</p>
+      </div>
+
+      <div class="toggle-group">
+        <div class="toggle-label">
+          <span class="title">Email Notifications</span>
+          <span class="description">Receive email updates about your account activity</span>
+        </div>
+        <div class="toggle active"></div>
+      </div>
+
+      <div class="toggle-group">
+        <div class="toggle-label">
+          <span class="title">Push Notifications</span>
+          <span class="description">Receive push notifications on your device</span>
+        </div>
+        <div class="toggle active"></div>
+      </div>
+
+      <div class="toggle-group">
+        <div class="toggle-label">
+          <span class="title">Weekly Digest</span>
+          <span class="description">Get a weekly summary of your activity</span>
+        </div>
+        <div class="toggle"></div>
+      </div>
+
+      <div class="toggle-group">
+        <div class="toggle-label">
+          <span class="title">Marketing Emails</span>
+          <span class="description">Receive tips, updates, and promotions</span>
+        </div>
+        <div class="toggle"></div>
+      </div>
+
+      <div class="button-group">
+        <button class="btn btn-primary">Save Preferences</button>
+      </div>
+    `;
+  }
+  renderSecurity() {
+    return x`
+      <div class="panel-header">
+        <h2>Security Settings</h2>
+        <p>Manage your password and security options</p>
+      </div>
+
+      <div class="security-item">
+        <div class="info">
+          <span class="title">Password</span>
+          <span class="status">Last changed 30 days ago</span>
+        </div>
+        <button class="btn btn-secondary">Change Password</button>
+      </div>
+
+      <div class="security-item">
+        <div class="info">
+          <span class="title">Two-Factor Authentication</span>
+          <span class="status enabled">Enabled</span>
+        </div>
+        <button class="btn btn-secondary">Manage</button>
+      </div>
+
+      <div class="security-item">
+        <div class="info">
+          <span class="title">Active Sessions</span>
+          <span class="status">3 devices</span>
+        </div>
+        <button class="btn btn-secondary">View All</button>
+      </div>
+
+      <div class="button-group">
+        <button class="btn btn-danger">Delete Account</button>
+      </div>
+    `;
+  }
+};
+_init17 = __decoratorStart(_a15);
+_activeTab = new WeakMap();
+_userName = new WeakMap();
+_userEmail = new WeakMap();
+__decorateElement(_init17, 4, "activeTab", _activeTab_dec, ViewSettings, _activeTab);
+__decorateElement(_init17, 4, "userName", _userName_dec, ViewSettings, _userName);
+__decorateElement(_init17, 4, "userEmail", _userEmail_dec, ViewSettings, _userEmail);
+ViewSettings = __decorateElement(_init17, 0, "ViewSettings", _ViewSettings_decorators, ViewSettings);
+__publicField(ViewSettings, "demo", [
+  () => x`<view-settings></view-settings>`,
+  () => x`<view-settings activeTab="notifications"></view-settings>`,
+  () => x`<view-settings activeTab="security"></view-settings>`
+]);
+__publicField(ViewSettings, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: block;
+        min-height: 100%;
+        background: ${cssManager.bdTheme("#f5f5f5", "#0a0a0a")};
+        color: ${cssManager.bdTheme("#1a1a1a", "#e5e5e5")};
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+
+      .settings-layout {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 40px 24px;
+      }
+
+      .settings-header {
+        margin-bottom: 32px;
+      }
+
+      .settings-header h1 {
+        font-size: 28px;
+        font-weight: 700;
+        margin: 0 0 8px 0;
+      }
+
+      .settings-header p {
+        color: ${cssManager.bdTheme("#666", "#888")};
+        margin: 0;
+      }
+
+      .settings-content {
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        gap: 32px;
+      }
+
+      .settings-nav {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .nav-item {
+        padding: 12px 16px;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme("#666", "#999")};
+      }
+
+      .nav-item:hover {
+        background: ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        color: ${cssManager.bdTheme("#1a1a1a", "#fff")};
+      }
+
+      .nav-item.active {
+        background: ${cssManager.bdTheme("#1a1a1a", "#3b82f6")};
+        color: #fff;
+      }
+
+      .settings-panel {
+        background: ${cssManager.bdTheme("#fff", "#111")};
+        border: 1px solid ${cssManager.bdTheme("#e5e5e5", "#222")};
+        border-radius: 12px;
+        padding: 24px;
+      }
+
+      .panel-header {
+        margin-bottom: 24px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme("#e5e5e5", "#222")};
+      }
+
+      .panel-header h2 {
+        font-size: 18px;
+        font-weight: 600;
+        margin: 0 0 4px 0;
+      }
+
+      .panel-header p {
+        font-size: 14px;
+        color: ${cssManager.bdTheme("#666", "#888")};
+        margin: 0;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      .form-group label {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 8px;
+      }
+
+      .form-group input {
+        width: 100%;
+        padding: 10px 14px;
+        border: 1px solid ${cssManager.bdTheme("#ddd", "#333")};
+        border-radius: 6px;
+        font-size: 14px;
+        background: ${cssManager.bdTheme("#fff", "#0a0a0a")};
+        color: ${cssManager.bdTheme("#1a1a1a", "#e5e5e5")};
+        box-sizing: border-box;
+      }
+
+      .form-group input:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+      }
+
+      .form-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+      }
+
+      .toggle-group {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 0;
+        border-bottom: 1px solid ${cssManager.bdTheme("#f0f0f0", "#1a1a1a")};
+      }
+
+      .toggle-group:last-child {
+        border-bottom: none;
+      }
+
+      .toggle-label {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .toggle-label .title {
+        font-weight: 500;
+      }
+
+      .toggle-label .description {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#666", "#888")};
+      }
+
+      .toggle {
+        width: 44px;
+        height: 24px;
+        background: ${cssManager.bdTheme("#ddd", "#333")};
+        border-radius: 12px;
+        position: relative;
+        cursor: pointer;
+        transition: background 0.2s ease;
+      }
+
+      .toggle.active {
+        background: #3b82f6;
+      }
+
+      .toggle::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        background: white;
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+      }
+
+      .toggle.active::after {
+        transform: translateX(20px);
+      }
+
+      .button-group {
+        display: flex;
+        gap: 12px;
+        margin-top: 24px;
+        padding-top: 24px;
+        border-top: 1px solid ${cssManager.bdTheme("#e5e5e5", "#222")};
+      }
+
+      .btn {
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .btn-primary {
+        background: #3b82f6;
+        color: white;
+        border: none;
+      }
+
+      .btn-primary:hover {
+        background: #2563eb;
+      }
+
+      .btn-secondary {
+        background: transparent;
+        color: ${cssManager.bdTheme("#666", "#999")};
+        border: 1px solid ${cssManager.bdTheme("#ddd", "#333")};
+      }
+
+      .btn-secondary:hover {
+        background: ${cssManager.bdTheme("#f5f5f5", "#1a1a1a")};
+      }
+
+      .btn-danger {
+        background: #ef4444;
+        color: white;
+        border: none;
+      }
+
+      .btn-danger:hover {
+        background: #dc2626;
+      }
+
+      .security-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px;
+        background: ${cssManager.bdTheme("#f9f9f9", "#0a0a0a")};
+        border-radius: 8px;
+        margin-bottom: 12px;
+      }
+
+      .security-item .info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .security-item .title {
+        font-weight: 500;
+      }
+
+      .security-item .status {
+        font-size: 13px;
+        color: ${cssManager.bdTheme("#666", "#888")};
+      }
+
+      .security-item .status.enabled {
+        color: #22c55e;
+      }
+    `
+]);
+__runInitializers(_init17, 1, ViewSettings);
+
+// test/views/view-empty-state.ts
+var _description_dec, _title_dec2, _variant_dec, _a16, _ViewEmptyState_decorators, _init18, _variant, _title2, _description;
+_ViewEmptyState_decorators = [t4("view-empty-state")];
+var ViewEmptyState = class extends (_a16 = DeesElement, _variant_dec = [n5()], _title_dec2 = [n5()], _description_dec = [n5()], _a16) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _variant, __runInitializers(_init18, 8, this, "empty")), __runInitializers(_init18, 11, this);
+    __privateAdd(this, _title2, __runInitializers(_init18, 12, this, "")), __runInitializers(_init18, 15, this);
+    __privateAdd(this, _description, __runInitializers(_init18, 16, this, "")), __runInitializers(_init18, 19, this);
+  }
+  getContent() {
+    switch (this.variant) {
+      case "no-results":
+        return {
+          title: this.title || "No results found",
+          description: this.description || "We couldn't find what you're looking for. Try adjusting your search or filters.",
+          icon: "search",
+          primaryAction: "Clear Filters",
+          secondaryAction: "Go Back"
+        };
+      case "error":
+        return {
+          title: this.title || "Something went wrong",
+          description: this.description || "We're having trouble loading this page. Please try again or contact support if the problem persists.",
+          icon: "error",
+          primaryAction: "Try Again",
+          secondaryAction: "Contact Support"
+        };
+      default:
+        return {
+          title: this.title || "No items yet",
+          description: this.description || "Get started by creating your first item. It only takes a few seconds.",
+          icon: "folder",
+          primaryAction: "Create New",
+          secondaryAction: "Learn More"
+        };
+    }
+  }
+  render() {
+    const content3 = this.getContent();
+    return x`
+      <div class="empty-state">
+        ${this.renderIcon(content3.icon)}
+        <h2>${content3.title}</h2>
+        <p>${content3.description}</p>
+        <div class="actions">
+          <button class="btn btn-primary">${content3.primaryAction}</button>
+          <button class="btn btn-secondary">${content3.secondaryAction}</button>
+        </div>
+      </div>
+    `;
+  }
+  renderIcon(type5) {
+    switch (type5) {
+      case "search":
+        return x`<div class="search-icon"></div>`;
+      case "error":
+        return x`<div class="error-icon"></div>`;
+      default:
+        return x`
+          <div class="folder-icon">
+            <div class="folder-tab"></div>
+            <div class="folder-back"></div>
+            <div class="folder-front"></div>
+          </div>
+        `;
+    }
+  }
+};
+_init18 = __decoratorStart(_a16);
+_variant = new WeakMap();
+_title2 = new WeakMap();
+_description = new WeakMap();
+__decorateElement(_init18, 4, "variant", _variant_dec, ViewEmptyState, _variant);
+__decorateElement(_init18, 4, "title", _title_dec2, ViewEmptyState, _title2);
+__decorateElement(_init18, 4, "description", _description_dec, ViewEmptyState, _description);
+ViewEmptyState = __decorateElement(_init18, 0, "ViewEmptyState", _ViewEmptyState_decorators, ViewEmptyState);
+__publicField(ViewEmptyState, "demo", [
+  () => x`<view-empty-state></view-empty-state>`,
+  () => x`<view-empty-state variant="no-results"></view-empty-state>`,
+  () => x`<view-empty-state variant="error"></view-empty-state>`
+]);
+__publicField(ViewEmptyState, "styles", [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100%;
+        background: ${cssManager.bdTheme("#f5f5f5", "#0a0a0a")};
+        color: ${cssManager.bdTheme("#1a1a1a", "#e5e5e5")};
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        padding: 40px;
+        box-sizing: border-box;
+      }
+
+      .empty-state {
+        text-align: center;
+        max-width: 400px;
+      }
+
+      .icon-container {
+        width: 120px;
+        height: 120px;
+        margin: 0 auto 24px;
+        background: ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .icon {
+        font-size: 48px;
+        opacity: 0.5;
+      }
+
+      .icon.error {
+        color: #ef4444;
+        opacity: 1;
+      }
+
+      h2 {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 12px 0;
+      }
+
+      p {
+        color: ${cssManager.bdTheme("#666", "#888")};
+        margin: 0 0 24px 0;
+        line-height: 1.6;
+      }
+
+      .actions {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      .btn {
+        padding: 12px 24px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        border: none;
+      }
+
+      .btn-primary {
+        background: #3b82f6;
+        color: white;
+      }
+
+      .btn-primary:hover {
+        background: #2563eb;
+        transform: translateY(-1px);
+      }
+
+      .btn-secondary {
+        background: ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        color: ${cssManager.bdTheme("#1a1a1a", "#e5e5e5")};
+      }
+
+      .btn-secondary:hover {
+        background: ${cssManager.bdTheme("#ddd", "#222")};
+      }
+
+      .illustration {
+        margin-bottom: 24px;
+      }
+
+      .illustration svg {
+        width: 200px;
+        height: 150px;
+      }
+
+      .folder-icon {
+        width: 80px;
+        height: 80px;
+        margin: 0 auto 16px;
+        position: relative;
+      }
+
+      .folder-back {
+        position: absolute;
+        width: 80px;
+        height: 60px;
+        background: ${cssManager.bdTheme("#ddd", "#333")};
+        border-radius: 4px 4px 8px 8px;
+        bottom: 0;
+      }
+
+      .folder-front {
+        position: absolute;
+        width: 80px;
+        height: 50px;
+        background: ${cssManager.bdTheme("#e5e5e5", "#444")};
+        border-radius: 0 4px 8px 8px;
+        bottom: 0;
+      }
+
+      .folder-tab {
+        position: absolute;
+        width: 30px;
+        height: 12px;
+        background: ${cssManager.bdTheme("#ddd", "#333")};
+        border-radius: 4px 4px 0 0;
+        top: 0;
+        left: 0;
+      }
+
+      .search-icon {
+        width: 60px;
+        height: 60px;
+        border: 4px solid ${cssManager.bdTheme("#ccc", "#444")};
+        border-radius: 50%;
+        position: relative;
+        margin: 0 auto 16px;
+      }
+
+      .search-icon::after {
+        content: '';
+        position: absolute;
+        width: 4px;
+        height: 20px;
+        background: ${cssManager.bdTheme("#ccc", "#444")};
+        border-radius: 2px;
+        bottom: -18px;
+        right: -8px;
+        transform: rotate(-45deg);
+      }
+
+      .error-icon {
+        width: 80px;
+        height: 80px;
+        border: 4px solid #ef4444;
+        border-radius: 50%;
+        position: relative;
+        margin: 0 auto 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .error-icon::before {
+        content: '!';
+        font-size: 40px;
+        font-weight: 700;
+        color: #ef4444;
+      }
+    `
+]);
+__runInitializers(_init18, 1, ViewEmptyState);
+
 // test/pages/index.ts
 var pages_exports = {};
 __export(pages_exports, {
@@ -45503,7 +46689,27 @@ var pageLongScroll = () => x`
 `;
 
 // html/index.ts
-setupWccTools(elements_exports, pages_exports);
+setupWccTools({
+  sections: [
+    {
+      name: "Pages",
+      type: "pages",
+      items: pages_exports
+    },
+    {
+      name: "Views",
+      type: "elements",
+      items: views_exports,
+      icon: "web"
+    },
+    {
+      name: "Elements",
+      type: "elements",
+      items: elements_exports,
+      sort: ([a4], [b4]) => a4.localeCompare(b4)
+    }
+  ]
+});
 domtools_elementbasic_exports.setup();
 /*! Bundled license information: