@design.estate/dees-wcctools 3.3.0 → 3.5.0

package/dist_bundle/bundle.js

@@ -5607,7 +5607,7 @@ var require_sweet_scroll = __commonJS({
               hash: null
             };
             this.loop = function(time) {
-              var _a7 = _this, $el = _a7.$el, ctx = _a7.ctx;
+              var _a8 = _this, $el = _a8.$el, ctx = _a8.ctx;
               if (!ctx.start) {
                 ctx.start = time;
               }
@@ -5702,7 +5702,7 @@ var require_sweet_scroll = __commonJS({
             if (!canUseDOM) {
               return;
             }
-            var _a7 = this, $el = _a7.$el, ctx = _a7.ctx, currentOptions = _a7.opts;
+            var _a8 = this, $el = _a8.$el, ctx = _a8.ctx, currentOptions = _a8.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 _a7 = this, $el = _a7.$el, ctx = _a7.ctx;
+            var _a8 = this, $el = _a8.$el, ctx = _a8.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 _a7 = this, $el = _a7.$el, ctx = _a7.ctx;
+            var _a8 = this, $el = _a8.$el, ctx = _a8.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 _a7;
+            var _a8;
             var callback = options[type5];
             var callbackResult;
             var methodResult;
             if (isFunction2(callback)) {
               callbackResult = callback.apply(this, args.concat([this]));
             }
-            methodResult = (_a7 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a7, args);
+            methodResult = (_a8 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a8, args);
             return callbackResult !== void 0 ? callbackResult : methodResult;
           };
           SweetScroll4.prototype.bind = function(click, stop) {
-            var _a7 = this, $el = _a7.$el, opts = _a7.ctx.opts;
+            var _a8 = this, $el = _a8.$el, opts = _a8.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 _a7 = this, $el = _a7.$el, opts = _a7.ctx.opts;
+            var _a8 = this, $el = _a8.$el, opts = _a8.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, _a7, e_2, _b;
+    var e_1, _a8, e_2, _b;
     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 && (_a7 = _parentage_1.return)) _a7.call(_parentage_1);
+              if (_parentage_1_1 && !_parentage_1_1.done && (_a8 = _parentage_1.return)) _a8.call(_parentage_1);
             } finally {
               if (e_1) throw e_1.error;
             }
@@ -7172,7 +7172,7 @@ var Subscription = (function() {
     }
   };
   Subscription2.prototype.add = function(teardown) {
-    var _a7;
+    var _a8;
     if (teardown && teardown !== this) {
       if (this.closed) {
         execFinalizer(teardown);
@@ -7183,7 +7183,7 @@ var Subscription = (function() {
           }
           teardown._addParent(this);
         }
-        (this._finalizers = (_a7 = this._finalizers) !== null && _a7 !== void 0 ? _a7 : []).push(teardown);
+        (this._finalizers = (_a8 = this._finalizers) !== null && _a8 !== void 0 ? _a8 : []).push(teardown);
       }
     }
   };
@@ -7302,7 +7302,7 @@ function errorContext(cb) {
     }
     cb();
     if (isRoot) {
-      var _a7 = context, errorThrown = _a7.errorThrown, error = _a7.error;
+      var _a8 = context, errorThrown = _a8.errorThrown, error = _a8.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 _a7 = _this, operator = _a7.operator, source = _a7.source;
+      var _a8 = _this, operator = _a8.operator, source = _a8.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 _a7;
-    return (_a7 = this.source) === null || _a7 === void 0 ? void 0 : _a7.subscribe(subscriber);
+    var _a8;
+    return (_a8 = this.source) === null || _a8 === void 0 ? void 0 : _a8.subscribe(subscriber);
   };
   Observable2.prototype[observable] = function() {
     return this;
@@ -7598,8 +7598,8 @@ var Observable = (function() {
   return Observable2;
 })();
 function getPromiseCtor(promiseCtor) {
-  var _a7;
-  return (_a7 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a7 !== void 0 ? _a7 : Promise;
+  var _a8;
+  return (_a8 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a8 !== void 0 ? _a8 : 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 _a7;
+    var _a8;
     if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
       var closed_1 = this.closed;
       _super.prototype.unsubscribe.call(this);
-      !closed_1 && ((_a7 = this.onFinalize) === null || _a7 === void 0 ? void 0 : _a7.call(this));
+      !closed_1 && ((_a8 = this.onFinalize) === null || _a8 === void 0 ? void 0 : _a8.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, _a7;
+      var e_1, _a8;
       _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 (_c && !_c.done && (_a7 = _b.return)) _a7.call(_b);
+            if (_c && !_c.done && (_a8 = _b.return)) _a8.call(_b);
           } finally {
             if (e_1) throw e_1.error;
           }
@@ -7766,8 +7766,8 @@ var Subject = (function(_super) {
   };
   Object.defineProperty(Subject2.prototype, "observed", {
     get: function() {
-      var _a7;
-      return ((_a7 = this.observers) === null || _a7 === void 0 ? void 0 : _a7.length) > 0;
+      var _a8;
+      return ((_a8 = this.observers) === null || _a8 === void 0 ? void 0 : _a8.length) > 0;
     },
     enumerable: false,
     configurable: true
@@ -7783,7 +7783,7 @@ var Subject = (function(_super) {
   };
   Subject2.prototype._innerSubscribe = function(subscriber) {
     var _this = this;
-    var _a7 = this, hasError = _a7.hasError, isStopped = _a7.isStopped, observers = _a7.observers;
+    var _a8 = this, hasError = _a8.hasError, isStopped = _a8.isStopped, observers = _a8.observers;
     if (hasError || isStopped) {
       return EMPTY_SUBSCRIPTION;
     }
@@ -7795,7 +7795,7 @@ var Subject = (function(_super) {
     });
   };
   Subject2.prototype._checkFinalizedStatuses = function(subscriber) {
-    var _a7 = this, hasError = _a7.hasError, thrownError = _a7.thrownError, isStopped = _a7.isStopped;
+    var _a8 = this, hasError = _a8.hasError, thrownError = _a8.thrownError, isStopped = _a8.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 _a7, _b;
-    (_b = (_a7 = this.destination) === null || _a7 === void 0 ? void 0 : _a7.next) === null || _b === void 0 ? void 0 : _b.call(_a7, value2);
+    var _a8, _b;
+    (_b = (_a8 = this.destination) === null || _a8 === void 0 ? void 0 : _a8.next) === null || _b === void 0 ? void 0 : _b.call(_a8, value2);
   };
   AnonymousSubject2.prototype.error = function(err) {
-    var _a7, _b;
-    (_b = (_a7 = this.destination) === null || _a7 === void 0 ? void 0 : _a7.error) === null || _b === void 0 ? void 0 : _b.call(_a7, err);
+    var _a8, _b;
+    (_b = (_a8 = this.destination) === null || _a8 === void 0 ? void 0 : _a8.error) === null || _b === void 0 ? void 0 : _b.call(_a8, err);
   };
   AnonymousSubject2.prototype.complete = function() {
-    var _a7, _b;
-    (_b = (_a7 = this.destination) === null || _a7 === void 0 ? void 0 : _a7.complete) === null || _b === void 0 ? void 0 : _b.call(_a7);
+    var _a8, _b;
+    (_b = (_a8 = this.destination) === null || _a8 === void 0 ? void 0 : _a8.complete) === null || _b === void 0 ? void 0 : _b.call(_a8);
   };
   AnonymousSubject2.prototype._subscribe = function(subscriber) {
-    var _a7, _b;
-    return (_b = (_a7 = this.source) === null || _a7 === void 0 ? void 0 : _a7.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
+    var _a8, _b;
+    return (_b = (_a8 = this.source) === null || _a8 === void 0 ? void 0 : _a8.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
   };
   return AnonymousSubject2;
 })(Subject);
@@ -7872,7 +7872,7 @@ var ReplaySubject = (function(_super) {
     return _this;
   }
   ReplaySubject2.prototype.next = function(value2) {
-    var _a7 = this, isStopped = _a7.isStopped, _buffer = _a7._buffer, _infiniteTimeWindow = _a7._infiniteTimeWindow, _timestampProvider = _a7._timestampProvider, _windowTime = _a7._windowTime;
+    var _a8 = this, isStopped = _a8.isStopped, _buffer = _a8._buffer, _infiniteTimeWindow = _a8._infiniteTimeWindow, _timestampProvider = _a8._timestampProvider, _windowTime = _a8._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 _a7 = this, _infiniteTimeWindow = _a7._infiniteTimeWindow, _buffer = _a7._buffer;
+    var _a8 = this, _infiniteTimeWindow = _a8._infiniteTimeWindow, _buffer = _a8._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 _a7 = this, _bufferSize = _a7._bufferSize, _timestampProvider = _a7._timestampProvider, _buffer = _a7._buffer, _infiniteTimeWindow = _a7._infiniteTimeWindow;
+    var _a8 = this, _bufferSize = _a8._bufferSize, _timestampProvider = _a8._timestampProvider, _buffer = _a8._buffer, _infiniteTimeWindow = _a8._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 _a7;
+    var _a8;
     if (delay2 === void 0) {
       delay2 = 0;
     }
@@ -7969,7 +7969,7 @@ var AsyncAction = (function(_super) {
     }
     this.pending = true;
     this.delay = delay2;
-    this.id = (_a7 = this.id) !== null && _a7 !== void 0 ? _a7 : this.requestAsyncId(scheduler, this.id, delay2);
+    this.id = (_a8 = this.id) !== null && _a8 !== void 0 ? _a8 : 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 _a7 = this, id = _a7.id, scheduler = _a7.scheduler;
+      var _a8 = this, id = _a8.id, scheduler = _a8.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, _a7, value2, done;
+    var reader, _a8, value2, done;
     return __generator(this, function(_b) {
       switch (_b.label) {
         case 0:
@@ -8166,7 +8166,7 @@ function readableStreamLikeToAsyncGenerator(readableStream) {
           if (false) return [3, 8];
           return [4, __await(reader.read())];
         case 3:
-          _a7 = _b.sent(), value2 = _a7.value, done = _a7.done;
+          _a8 = _b.sent(), value2 = _a8.value, done = _a8.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, _a7;
+    var e_1, _a8;
     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 && (_a7 = iterable_1.return)) _a7.call(iterable_1);
+        if (iterable_1_1 && !iterable_1_1.done && (_a8 = iterable_1.return)) _a8.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, _a7;
+  var e_2, _a8;
   return __awaiter(this, void 0, void 0, function() {
     var value2, e_2_1;
     return __generator(this, function(_b) {
@@ -8313,8 +8313,8 @@ function process2(asyncIterable, subscriber) {
           return [3, 11];
         case 6:
           _b.trys.push([6, , 9, 10]);
-          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a7 = asyncIterable_1.return))) return [3, 8];
-          return [4, _a7.call(asyncIterable_1)];
+          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a8 = asyncIterable_1.return))) return [3, 8];
+          return [4, _a8.call(asyncIterable_1)];
         case 7:
           _b.sent();
           _b.label = 8;
@@ -8423,11 +8423,11 @@ function scheduleIterable(input, scheduler) {
     executeSchedule(subscriber, scheduler, function() {
       iterator2 = input[iterator]();
       executeSchedule(subscriber, scheduler, function() {
-        var _a7;
+        var _a8;
         var value2;
         var done;
         try {
-          _a7 = iterator2.next(), value2 = _a7.value, done = _a7.done;
+          _a8 = iterator2.next(), value2 = _a8.value, done = _a8.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 _a7 = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
+  var _a8 = __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 = _a7[0], remove2 = _a7[1];
+  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add2 = _a8[0], remove2 = _a8[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, _a7, e_2, _b;
+      var e_1, _a8, e_2, _b;
       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 && (_a7 = buffers_1.return)) _a7.call(buffers_1);
+          if (buffers_1_1 && !buffers_1_1.done && (_a8 = buffers_1.return)) _a8.call(buffers_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -8813,7 +8813,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         }
       }
     }, function() {
-      var e_3, _a7;
+      var e_3, _a8;
       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 && (_a7 = buffers_2.return)) _a7.call(buffers_2);
+          if (buffers_2_1 && !buffers_2_1.done && (_a8 = buffers_2.return)) _a8.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 _a7, _b;
+  var _a8, _b;
   var otherArgs = [];
   for (var _i = 1; _i < arguments.length; _i++) {
     otherArgs[_i - 1] = arguments[_i];
   }
-  var scheduler = (_a7 = popScheduler(otherArgs)) !== null && _a7 !== void 0 ? _a7 : asyncScheduler;
+  var scheduler = (_a8 = popScheduler(otherArgs)) !== null && _a8 !== void 0 ? _a8 : asyncScheduler;
   var bufferCreationInterval = (_b = otherArgs[0]) !== null && _b !== void 0 ? _b : 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, _a8;
+      var e_1, _a9;
       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 && (_a8 = recordsCopy_1.return)) _a8.call(recordsCopy_1);
+          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a9 = recordsCopy_1.return)) _a9.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 _a7 = config2 !== null && config2 !== void 0 ? config2 : {}, _b = _a7.leading, leading = _b === void 0 ? true : _b, _c = _a7.trailing, trailing = _c === void 0 ? false : _c;
+    var _a8 = config2 !== null && config2 !== void 0 ? config2 : {}, _b = _a8.leading, leading = _b === void 0 ? true : _b, _c = _a8.trailing, trailing = _c === void 0 ? false : _c;
     var hasValue = false;
     var sendValue = null;
     var throttled = null;
@@ -41662,18 +41662,204 @@ __publicField(WccFrame, "styles", [
 ]);
 __runInitializers(_init, 1, WccFrame);
 
+// ts_web/elements/wcc-contextmenu.ts
+var _visible_dec, _y_dec, _x_dec, _menuItems_dec, _a2, _WccContextmenu_decorators, _init2, _menuItems, _x, _y, _visible;
+_WccContextmenu_decorators = [t4("wcc-contextmenu")];
+var _WccContextmenu = class _WccContextmenu extends (_a2 = DeesElement, _menuItems_dec = [n5({ type: Array })], _x_dec = [n5({ type: Number })], _y_dec = [n5({ type: Number })], _visible_dec = [r5()], _a2) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _menuItems, __runInitializers(_init2, 8, this, [])), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _x, __runInitializers(_init2, 12, this, 0)), __runInitializers(_init2, 15, this);
+    __privateAdd(this, _y, __runInitializers(_init2, 16, this, 0)), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _visible, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
+    __publicField(this, "boundHandleOutsideClick", this.handleOutsideClick.bind(this));
+    __publicField(this, "boundHandleKeydown", this.handleKeydown.bind(this));
+  }
+  // Static method to show context menu at position
+  static async show(event, menuItems) {
+    event.preventDefault();
+    event.stopPropagation();
+    const existing = document.querySelector("wcc-contextmenu");
+    if (existing) {
+      existing.remove();
+    }
+    const menu = new _WccContextmenu();
+    menu.menuItems = menuItems;
+    menu.x = event.clientX;
+    menu.y = event.clientY;
+    document.body.appendChild(menu);
+    await menu.updateComplete;
+    menu.adjustPosition();
+  }
+  render() {
+    return x`
+      <div class="menu">
+        ${this.menuItems.map((item) => x`
+          <div
+            class="menu-item ${item.disabled ? "disabled" : ""}"
+            @click=${() => this.handleItemClick(item)}
+          >
+            ${item.iconName ? x`<span class="icon">${item.iconName}</span>` : null}
+            <span class="label">${item.name}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  async connectedCallback() {
+    await super.connectedCallback();
+    requestAnimationFrame(() => {
+      document.addEventListener("click", this.boundHandleOutsideClick);
+      document.addEventListener("contextmenu", this.boundHandleOutsideClick);
+      document.addEventListener("keydown", this.boundHandleKeydown);
+      this.classList.add("visible");
+    });
+  }
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener("click", this.boundHandleOutsideClick);
+    document.removeEventListener("contextmenu", this.boundHandleOutsideClick);
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+  }
+  adjustPosition() {
+    const rect = this.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    let x2 = this.x;
+    let y4 = this.y;
+    if (x2 + rect.width > windowWidth - 10) {
+      x2 = windowWidth - rect.width - 10;
+    }
+    if (y4 + rect.height > windowHeight - 10) {
+      y4 = windowHeight - rect.height - 10;
+    }
+    if (x2 < 10) x2 = 10;
+    if (y4 < 10) y4 = 10;
+    this.style.left = `${x2}px`;
+    this.style.top = `${y4}px`;
+  }
+  handleOutsideClick(e10) {
+    const path2 = e10.composedPath();
+    if (!path2.includes(this)) {
+      this.close();
+    }
+  }
+  handleKeydown(e10) {
+    if (e10.key === "Escape") {
+      this.close();
+    }
+  }
+  async handleItemClick(item) {
+    if (item.disabled) return;
+    await item.action();
+    this.close();
+  }
+  close() {
+    this.classList.remove("visible");
+    setTimeout(() => this.remove(), 150);
+  }
+};
+_init2 = __decoratorStart(_a2);
+_menuItems = new WeakMap();
+_x = new WeakMap();
+_y = new WeakMap();
+_visible = new WeakMap();
+__decorateElement(_init2, 4, "menuItems", _menuItems_dec, _WccContextmenu, _menuItems);
+__decorateElement(_init2, 4, "x", _x_dec, _WccContextmenu, _x);
+__decorateElement(_init2, 4, "y", _y_dec, _WccContextmenu, _y);
+__decorateElement(_init2, 4, "visible", _visible_dec, _WccContextmenu, _visible);
+_WccContextmenu = __decorateElement(_init2, 0, "WccContextmenu", _WccContextmenu_decorators, _WccContextmenu);
+__publicField(_WccContextmenu, "styles", [
+  i`
+      :host {
+        position: fixed;
+        z-index: 10000;
+        opacity: 0;
+        transform: scale(0.95) translateY(-5px);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        pointer-events: none;
+      }
+
+      :host(.visible) {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        pointer-events: auto;
+      }
+
+      .menu {
+        min-width: 160px;
+        background: #0f0f0f;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+        padding: 4px 0;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-size: 12px;
+      }
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        color: #ccc;
+        cursor: pointer;
+        transition: background 0.1s ease;
+        user-select: none;
+      }
+
+      .menu-item:hover {
+        background: rgba(59, 130, 246, 0.15);
+        color: #fff;
+      }
+
+      .menu-item.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .menu-item .icon {
+        font-family: 'Material Symbols Outlined';
+        font-size: 16px;
+        font-weight: normal;
+        font-style: normal;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        opacity: 0.7;
+      }
+
+      .menu-item:hover .icon {
+        opacity: 1;
+      }
+
+      .menu-item .label {
+        flex: 1;
+      }
+    `
+]);
+__runInitializers(_init2, 1, _WccContextmenu);
+var WccContextmenu = _WccContextmenu;
+
 // ts_web/elements/wcc-sidebar.ts
-var _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections;
+var _pinnedItems_dec, _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a3, _WccSidebar_decorators, _init3, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery, _pinnedItems;
 _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()], _collapsedSections_dec = [r5()], _a2) {
+var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _collapsedSections_dec = [r5()], _searchQuery_dec = [n5()], _pinnedItems_dec = [n5({ attribute: false })], _a3) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _selectedItem, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
-    __privateAdd(this, _selectedType, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
-    __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);
+    __privateAdd(this, _selectedItem, __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
+    __privateAdd(this, _selectedType, __runInitializers(_init3, 12, this)), __runInitializers(_init3, 15, this);
+    __privateAdd(this, _dashboardRef, __runInitializers(_init3, 16, this)), __runInitializers(_init3, 19, this);
+    __privateAdd(this, _isNative2, __runInitializers(_init3, 20, this, false)), __runInitializers(_init3, 23, this);
+    __privateAdd(this, _expandedElements, __runInitializers(_init3, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 27, this);
+    __privateAdd(this, _collapsedSections, __runInitializers(_init3, 28, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 31, this);
+    __privateAdd(this, _searchQuery, __runInitializers(_init3, 32, this, "")), __runInitializers(_init3, 35, this);
+    __privateAdd(this, _pinnedItems, __runInitializers(_init3, 36, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 39, this);
     __publicField(this, "sectionsInitialized", false);
   }
   render() {
@@ -41802,7 +41988,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         }
 
         .selectOption.folder {
-          grid-template-columns: 16px 20px 1fr;
+          grid-template-columns: 16px 1fr;
         }
 
         .selectOption .expand-icon {
@@ -41899,8 +42085,109 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         ::-webkit-scrollbar-thumb:hover {
           background: rgba(255, 255, 255, 0.2);
         }
+
+        .search-container {
+          padding: 0.5rem;
+          border-bottom: 1px solid var(--border);
+        }
+
+        .search-input {
+          width: 100%;
+          box-sizing: border-box;
+          background: var(--input);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
+          padding: 0.5rem 0.75rem;
+          color: var(--foreground);
+          font-size: 0.75rem;
+          font-family: inherit;
+          outline: none;
+          transition: border-color 0.15s ease;
+        }
+
+        .search-input:focus {
+          border-color: var(--primary);
+        }
+
+        .search-input::placeholder {
+          color: var(--muted-foreground);
+        }
+
+        .highlight {
+          background: rgba(59, 130, 246, 0.3);
+          border-radius: 2px;
+        }
+
+        /* Pinned item highlight in original section */
+        .selectOption.pinned {
+          background: rgba(245, 158, 11, 0.08);
+        }
+
+        .selectOption.pinned:hover {
+          background: rgba(245, 158, 11, 0.12);
+        }
+
+        .selectOption.pinned.selected {
+          background: rgba(245, 158, 11, 0.18);
+        }
+
+        /* Pinned section styling */
+        .section-header.pinned-section {
+          background: rgba(245, 158, 11, 0.08);
+          color: #f59e0b;
+        }
+
+        .section-header.pinned-section:hover {
+          background: rgba(245, 158, 11, 0.12);
+        }
+
+        .section-header.pinned-section .section-icon {
+          opacity: 0.8;
+        }
+
+        /* Section tag for pinned items */
+        .section-tag {
+          font-size: 0.55rem;
+          color: #555;
+          margin-left: auto;
+          text-transform: uppercase;
+          letter-spacing: 0.03em;
+        }
+
+        /* Group container */
+        .item-group {
+          margin: 0.375rem 0.375rem;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          border-radius: 6px;
+          padding: 0.25rem 0;
+          background: rgba(255, 255, 255, 0.01);
+        }
+
+        .item-group-legend {
+          font-size: 0.55rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: #555;
+          padding: 0.125rem 0.625rem 0.25rem;
+          display: block;
+        }
+
+        .item-group .selectOption {
+          margin-left: 0.25rem;
+          margin-right: 0.25rem;
+        }
       </style>
+      <div class="search-container">
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search..."
+          .value=${this.searchQuery}
+          @input=${this.handleSearchInput}
+        />
+      </div>
       <div class="menu">
+        ${this.renderPinnedSection()}
         ${this.renderSections()}
       </div>
     `;
@@ -41909,7 +42196,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
    * Initialize collapsed sections from section config
    */
   initCollapsedSections() {
-    if (this.sectionsInitialized) return;
+    if (this.sectionsInitialized || !this.dashboardRef?.sections) return;
     const collapsed = /* @__PURE__ */ new Set();
     for (const section of this.dashboardRef.sections) {
       if (section.collapsed) {
@@ -41919,12 +42206,104 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     this.collapsedSections = collapsed;
     this.sectionsInitialized = true;
   }
+  // ============ Pinning helpers ============
+  getPinKey(sectionName, itemName) {
+    return `${sectionName}::${itemName}`;
+  }
+  isPinned(sectionName, itemName) {
+    return this.pinnedItems.has(this.getPinKey(sectionName, itemName));
+  }
+  togglePin(sectionName, itemName) {
+    const key2 = this.getPinKey(sectionName, itemName);
+    const newPinned = new Set(this.pinnedItems);
+    if (newPinned.has(key2)) {
+      newPinned.delete(key2);
+    } else {
+      newPinned.add(key2);
+    }
+    this.pinnedItems = newPinned;
+    this.dispatchEvent(new CustomEvent("pinnedChanged", { detail: newPinned }));
+  }
+  showContextMenu(e10, sectionName, itemName) {
+    const isPinned = this.isPinned(sectionName, itemName);
+    WccContextmenu.show(e10, [
+      {
+        name: isPinned ? "Unpin" : "Pin",
+        iconName: isPinned ? "push_pin" : "push_pin",
+        action: () => this.togglePin(sectionName, itemName)
+      }
+    ]);
+  }
+  /**
+   * Render the PINNED section (only if there are pinned items)
+   */
+  renderPinnedSection() {
+    if (!this.dashboardRef?.sections || this.pinnedItems.size === 0) {
+      return null;
+    }
+    const isCollapsed = this.collapsedSections.has("__pinned__");
+    const pinnedEntries = [];
+    for (const key2 of this.pinnedItems) {
+      const [sectionName, itemName] = key2.split("::");
+      const section = this.dashboardRef.sections.find((s8) => s8.name === sectionName);
+      if (section) {
+        const entries = getSectionItems(section);
+        const found = entries.find(([name]) => name === itemName);
+        if (found) {
+          pinnedEntries.push({ sectionName, itemName, item: found[1], section });
+        }
+      }
+    }
+    const filteredEntries = pinnedEntries.filter((e10) => this.matchesSearch(e10.itemName));
+    if (filteredEntries.length === 0 && this.searchQuery) {
+      return null;
+    }
+    return x`
+      <div
+        class="section-header pinned-section ${isCollapsed ? "collapsed" : ""}"
+        @click=${() => this.toggleSectionCollapsed("__pinned__")}
+      >
+        <i class="material-symbols-outlined expand-icon">expand_more</i>
+        <i class="material-symbols-outlined section-icon">push_pin</i>
+        <span>Pinned</span>
+      </div>
+      <div class="section-content ${isCollapsed ? "collapsed" : ""}">
+        ${filteredEntries.map(({ sectionName, itemName, item, section }) => {
+      const isSelected = this.selectedItem === item;
+      const type5 = section.type === "elements" ? "element" : "page";
+      const icon = section.type === "elements" ? "featured_video" : "insert_drive_file";
+      return x`
+            <div
+              class="selectOption ${isSelected ? "selected" : ""}"
+              @click=${async () => {
+        await dist_ts_exports25.DomTools.setupDomTools();
+        this.selectItem(type5, itemName, item, 0, section);
+      }}
+              @contextmenu=${(e10) => this.showContextMenu(e10, sectionName, itemName)}
+            >
+              <i class="material-symbols-outlined">${icon}</i>
+              <div class="text">${this.highlightMatch(itemName)}</div>
+              <span class="section-tag">${sectionName}</span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
   /**
    * Render all sections
    */
   renderSections() {
+    if (!this.dashboardRef?.sections) {
+      return null;
+    }
     this.initCollapsedSections();
-    return this.dashboardRef.sections.map((section, index2) => {
+    return this.dashboardRef.sections.map((section) => {
+      const entries = getSectionItems(section);
+      const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+      if (filteredEntries.length === 0 && this.searchQuery) {
+        return null;
+      }
       const isCollapsed = this.collapsedSections.has(section.name);
       const sectionIcon = section.icon || (section.type === "pages" ? "insert_drive_file" : "widgets");
       return x`
@@ -41947,74 +42326,107 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
    */
   renderSectionItems(section) {
     const entries = getSectionItems(section);
+    const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
     if (section.type === "pages") {
-      return entries.map(([pageName, item]) => {
+      return filteredEntries.map(([pageName, item]) => {
+        const isPinned = this.isPinned(section.name, pageName);
         return x`
           <div
-            class="selectOption ${this.selectedItem === item ? "selected" : ""}"
+            class="selectOption ${this.selectedItem === item ? "selected" : ""} ${isPinned ? "pinned" : ""}"
             @click=${async () => {
           await dist_ts_exports25.DomTools.setupDomTools();
           this.selectItem("page", pageName, item, 0, section);
         }}
+            @contextmenu=${(e10) => this.showContextMenu(e10, section.name, pageName)}
           >
             <i class="material-symbols-outlined">insert_drive_file</i>
-            <div class="text">${pageName}</div>
+            <div class="text">${this.highlightMatch(pageName)}</div>
           </div>
         `;
       });
     } 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) => {
-            const demoIndex = i9;
-            const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
-            return x`
-                    <div
-                      class="demo-child ${isThisDemoSelected ? "selected" : ""}"
-                      @click=${async () => {
-              await dist_ts_exports25.DomTools.setupDomTools();
-              this.selectItem("element", elementName, item, demoIndex, section);
-            }}
-                    >
-                      <i class="material-symbols-outlined">play_circle</i>
-                      <div class="text">demo${demoIndex + 1}</div>
-                    </div>
-                  `;
-          })}
-              </div>
-            ` : null}
-          `;
-        } else {
-          return x`
-            <div
-              class="selectOption ${isSelected ? "selected" : ""}"
-              @click=${async () => {
-            await dist_ts_exports25.DomTools.setupDomTools();
-            this.selectItem("element", elementName, item, 0, section);
-          }}
-            >
-              <i class="material-symbols-outlined">featured_video</i>
-              <div class="text">${elementName}</div>
-            </div>
-          `;
-        }
-      });
+      const groupedItems = /* @__PURE__ */ new Map();
+      for (const entry of filteredEntries) {
+        const [, item] = entry;
+        const group = item.demoGroup || null;
+        if (!groupedItems.has(group)) {
+          groupedItems.set(group, []);
+        }
+        groupedItems.get(group).push(entry);
+      }
+      const result = [];
+      const ungrouped = groupedItems.get(null) || [];
+      for (const entry of ungrouped) {
+        result.push(this.renderElementItem(entry, section));
+      }
+      for (const [groupName, items] of groupedItems) {
+        if (groupName === null) continue;
+        result.push(x`
+          <div class="item-group">
+            <span class="item-group-legend">${groupName}</span>
+            ${items.map((entry) => this.renderElementItem(entry, section))}
+          </div>
+        `);
+      }
+      return result;
+    }
+  }
+  /**
+   * Render a single element item (used by renderSectionItems)
+   */
+  renderElementItem(entry, section) {
+    const [elementName, item] = entry;
+    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;
+    const isPinned = this.isPinned(section.name, elementName);
+    if (isMultiDemo) {
+      return x`
+        <div
+          class="selectOption folder ${isExpanded ? "expanded" : ""} ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}"
+          @click=${() => this.toggleExpanded(elementName)}
+          @contextmenu=${(e10) => this.showContextMenu(e10, section.name, elementName)}
+        >
+          <i class="material-symbols-outlined expand-icon">chevron_right</i>
+          <div class="text">${this.highlightMatch(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 () => {
+          await dist_ts_exports25.DomTools.setupDomTools();
+          this.selectItem("element", elementName, item, demoIndex, section);
+        }}
+                >
+                  <i class="material-symbols-outlined">play_circle</i>
+                  <div class="text">demo${demoIndex + 1}</div>
+                </div>
+              `;
+      })}
+          </div>
+        ` : null}
+      `;
+    } else {
+      return x`
+        <div
+          class="selectOption ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}"
+          @click=${async () => {
+        await dist_ts_exports25.DomTools.setupDomTools();
+        this.selectItem("element", elementName, item, 0, section);
+      }}
+          @contextmenu=${(e10) => this.showContextMenu(e10, section.name, elementName)}
+        >
+          <i class="material-symbols-outlined">featured_video</i>
+          <div class="text">${this.highlightMatch(elementName)}</div>
+        </div>
+      `;
     }
   }
   toggleSectionCollapsed(sectionName) {
@@ -42035,9 +42447,29 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     }
     this.expandedElements = newSet;
   }
+  handleSearchInput(e10) {
+    const input = e10.target;
+    this.searchQuery = input.value;
+    this.dispatchEvent(new CustomEvent("searchChanged", { detail: this.searchQuery }));
+  }
+  matchesSearch(name) {
+    if (!this.searchQuery) return true;
+    return name.toLowerCase().includes(this.searchQuery.toLowerCase());
+  }
+  highlightMatch(text8) {
+    if (!this.searchQuery) return x`${text8}`;
+    const lowerText = text8.toLowerCase();
+    const lowerQuery = this.searchQuery.toLowerCase();
+    const index2 = lowerText.indexOf(lowerQuery);
+    if (index2 === -1) return x`${text8}`;
+    const before = text8.slice(0, index2);
+    const match2 = text8.slice(index2, index2 + this.searchQuery.length);
+    const after = text8.slice(index2 + this.searchQuery.length);
+    return x`${before}<span class="highlight">${match2}</span>${after}`;
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("selectedItem") && this.selectedItem) {
+    if (changedProperties.has("selectedItem") && this.selectedItem && this.dashboardRef?.sections) {
       for (const section of this.dashboardRef.sections) {
         if (section.type !== "elements") continue;
         const entries = getSectionItems(section);
@@ -42088,30 +42520,34 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     this.requestUpdate();
   }
 };
-_init2 = __decoratorStart(_a2);
+_init3 = __decoratorStart(_a3);
 _selectedItem = new WeakMap();
 _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);
+_searchQuery = new WeakMap();
+_pinnedItems = new WeakMap();
+__decorateElement(_init3, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
+__decorateElement(_init3, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
+__decorateElement(_init3, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
+__decorateElement(_init3, 4, "isNative", _isNative_dec2, WccSidebar, _isNative2);
+__decorateElement(_init3, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
+__decorateElement(_init3, 4, "collapsedSections", _collapsedSections_dec, WccSidebar, _collapsedSections);
+__decorateElement(_init3, 4, "searchQuery", _searchQuery_dec, WccSidebar, _searchQuery);
+__decorateElement(_init3, 4, "pinnedItems", _pinnedItems_dec, WccSidebar, _pinnedItems);
+WccSidebar = __decorateElement(_init3, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
+__runInitializers(_init3, 1, WccSidebar);
 
 // ts_web/elements/wcc-record-button.ts
-var _duration_dec, _state_dec, _a3, _WccRecordButton_decorators, _init3, _state, _duration;
+var _duration_dec, _state_dec, _a4, _WccRecordButton_decorators, _init4, _state, _duration;
 _WccRecordButton_decorators = [t4("wcc-record-button")];
-var WccRecordButton = class extends (_a3 = DeesElement, _state_dec = [n5({ type: String })], _duration_dec = [n5({ type: Number })], _a3) {
+var WccRecordButton = class extends (_a4 = DeesElement, _state_dec = [n5({ type: String })], _duration_dec = [n5({ type: Number })], _a4) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _state, __runInitializers(_init3, 8, this, "idle")), __runInitializers(_init3, 11, this);
-    __privateAdd(this, _duration, __runInitializers(_init3, 12, this, 0)), __runInitializers(_init3, 15, this);
+    __privateAdd(this, _state, __runInitializers(_init4, 8, this, "idle")), __runInitializers(_init4, 11, this);
+    __privateAdd(this, _duration, __runInitializers(_init4, 12, this, 0)), __runInitializers(_init4, 15, this);
     __publicField(this, "handleClick", () => {
       this.dispatchEvent(new CustomEvent("record-click", {
         bubbles: true,
@@ -42153,12 +42589,12 @@ var WccRecordButton = class extends (_a3 = DeesElement, _state_dec = [n5({ type:
     }
   }
 };
-_init3 = __decoratorStart(_a3);
+_init4 = __decoratorStart(_a4);
 _state = new WeakMap();
 _duration = new WeakMap();
-__decorateElement(_init3, 4, "state", _state_dec, WccRecordButton, _state);
-__decorateElement(_init3, 4, "duration", _duration_dec, WccRecordButton, _duration);
-WccRecordButton = __decorateElement(_init3, 0, "WccRecordButton", _WccRecordButton_decorators, WccRecordButton);
+__decorateElement(_init4, 4, "state", _state_dec, WccRecordButton, _state);
+__decorateElement(_init4, 4, "duration", _duration_dec, WccRecordButton, _duration);
+WccRecordButton = __decorateElement(_init4, 0, "WccRecordButton", _WccRecordButton_decorators, WccRecordButton);
 __publicField(WccRecordButton, "styles", [
   i`
       :host {
@@ -42211,7 +42647,7 @@ __publicField(WccRecordButton, "styles", [
       }
     `
 ]);
-__runInitializers(_init3, 1, WccRecordButton);
+__runInitializers(_init4, 1, WccRecordButton);
 
 // ts_web/services/recorder.service.ts
 var RecorderService = class {
@@ -42486,25 +42922,25 @@ var RecorderService = class {
 };
 
 // ts_web/elements/wcc-recording-panel.ts
-var _isExporting_dec, _isDraggingTrim_dec, _videoDuration_dec, _trimEnd_dec, _trimStart_dec, _previewVideoUrl_dec, _recordingDuration_dec, _audioLevel_dec, _availableMicrophones_dec, _selectedMicrophoneId_dec, _audioEnabled_dec, _recordingMode_dec, _panelState_dec, _dashboardRef_dec2, _a4, _WccRecordingPanel_decorators, _init4, _dashboardRef2, _panelState, _recordingMode, _audioEnabled, _selectedMicrophoneId, _availableMicrophones, _audioLevel, _recordingDuration, _previewVideoUrl, _trimStart, _trimEnd, _videoDuration, _isDraggingTrim, _isExporting;
+var _isExporting_dec, _isDraggingTrim_dec, _videoDuration_dec, _trimEnd_dec, _trimStart_dec, _previewVideoUrl_dec, _recordingDuration_dec, _audioLevel_dec, _availableMicrophones_dec, _selectedMicrophoneId_dec, _audioEnabled_dec, _recordingMode_dec, _panelState_dec, _dashboardRef_dec2, _a5, _WccRecordingPanel_decorators, _init5, _dashboardRef2, _panelState, _recordingMode, _audioEnabled, _selectedMicrophoneId, _availableMicrophones, _audioLevel, _recordingDuration, _previewVideoUrl, _trimStart, _trimEnd, _videoDuration, _isDraggingTrim, _isExporting;
 _WccRecordingPanel_decorators = [t4("wcc-recording-panel")];
-var WccRecordingPanel = class extends (_a4 = DeesElement, _dashboardRef_dec2 = [n5({ attribute: false })], _panelState_dec = [r5()], _recordingMode_dec = [r5()], _audioEnabled_dec = [r5()], _selectedMicrophoneId_dec = [r5()], _availableMicrophones_dec = [r5()], _audioLevel_dec = [r5()], _recordingDuration_dec = [r5()], _previewVideoUrl_dec = [r5()], _trimStart_dec = [r5()], _trimEnd_dec = [r5()], _videoDuration_dec = [r5()], _isDraggingTrim_dec = [r5()], _isExporting_dec = [r5()], _a4) {
+var WccRecordingPanel = class extends (_a5 = DeesElement, _dashboardRef_dec2 = [n5({ attribute: false })], _panelState_dec = [r5()], _recordingMode_dec = [r5()], _audioEnabled_dec = [r5()], _selectedMicrophoneId_dec = [r5()], _availableMicrophones_dec = [r5()], _audioLevel_dec = [r5()], _recordingDuration_dec = [r5()], _previewVideoUrl_dec = [r5()], _trimStart_dec = [r5()], _trimEnd_dec = [r5()], _videoDuration_dec = [r5()], _isDraggingTrim_dec = [r5()], _isExporting_dec = [r5()], _a5) {
   constructor() {
     super();
-    __privateAdd(this, _dashboardRef2, __runInitializers(_init4, 8, this)), __runInitializers(_init4, 11, this);
-    __privateAdd(this, _panelState, __runInitializers(_init4, 12, this, "options")), __runInitializers(_init4, 15, this);
-    __privateAdd(this, _recordingMode, __runInitializers(_init4, 16, this, "viewport")), __runInitializers(_init4, 19, this);
-    __privateAdd(this, _audioEnabled, __runInitializers(_init4, 20, this, false)), __runInitializers(_init4, 23, this);
-    __privateAdd(this, _selectedMicrophoneId, __runInitializers(_init4, 24, this, "")), __runInitializers(_init4, 27, this);
-    __privateAdd(this, _availableMicrophones, __runInitializers(_init4, 28, this, [])), __runInitializers(_init4, 31, this);
-    __privateAdd(this, _audioLevel, __runInitializers(_init4, 32, this, 0)), __runInitializers(_init4, 35, this);
-    __privateAdd(this, _recordingDuration, __runInitializers(_init4, 36, this, 0)), __runInitializers(_init4, 39, this);
-    __privateAdd(this, _previewVideoUrl, __runInitializers(_init4, 40, this, "")), __runInitializers(_init4, 43, this);
-    __privateAdd(this, _trimStart, __runInitializers(_init4, 44, this, 0)), __runInitializers(_init4, 47, this);
-    __privateAdd(this, _trimEnd, __runInitializers(_init4, 48, this, 0)), __runInitializers(_init4, 51, this);
-    __privateAdd(this, _videoDuration, __runInitializers(_init4, 52, this, 0)), __runInitializers(_init4, 55, this);
-    __privateAdd(this, _isDraggingTrim, __runInitializers(_init4, 56, this, null)), __runInitializers(_init4, 59, this);
-    __privateAdd(this, _isExporting, __runInitializers(_init4, 60, this, false)), __runInitializers(_init4, 63, this);
+    __privateAdd(this, _dashboardRef2, __runInitializers(_init5, 8, this)), __runInitializers(_init5, 11, this);
+    __privateAdd(this, _panelState, __runInitializers(_init5, 12, this, "options")), __runInitializers(_init5, 15, this);
+    __privateAdd(this, _recordingMode, __runInitializers(_init5, 16, this, "viewport")), __runInitializers(_init5, 19, this);
+    __privateAdd(this, _audioEnabled, __runInitializers(_init5, 20, this, false)), __runInitializers(_init5, 23, this);
+    __privateAdd(this, _selectedMicrophoneId, __runInitializers(_init5, 24, this, "")), __runInitializers(_init5, 27, this);
+    __privateAdd(this, _availableMicrophones, __runInitializers(_init5, 28, this, [])), __runInitializers(_init5, 31, this);
+    __privateAdd(this, _audioLevel, __runInitializers(_init5, 32, this, 0)), __runInitializers(_init5, 35, this);
+    __privateAdd(this, _recordingDuration, __runInitializers(_init5, 36, this, 0)), __runInitializers(_init5, 39, this);
+    __privateAdd(this, _previewVideoUrl, __runInitializers(_init5, 40, this, "")), __runInitializers(_init5, 43, this);
+    __privateAdd(this, _trimStart, __runInitializers(_init5, 44, this, 0)), __runInitializers(_init5, 47, this);
+    __privateAdd(this, _trimEnd, __runInitializers(_init5, 48, this, 0)), __runInitializers(_init5, 51, this);
+    __privateAdd(this, _videoDuration, __runInitializers(_init5, 52, this, 0)), __runInitializers(_init5, 55, this);
+    __privateAdd(this, _isDraggingTrim, __runInitializers(_init5, 56, this, null)), __runInitializers(_init5, 59, this);
+    __privateAdd(this, _isExporting, __runInitializers(_init5, 60, this, false)), __runInitializers(_init5, 63, this);
     // Service instance
     __publicField(this, "recorderService");
     this.recorderService = new RecorderService({
@@ -42898,7 +43334,7 @@ var WccRecordingPanel = class extends (_a4 = DeesElement, _dashboardRef_dec2 = [
     }
   }
 };
-_init4 = __decoratorStart(_a4);
+_init5 = __decoratorStart(_a5);
 _dashboardRef2 = new WeakMap();
 _panelState = new WeakMap();
 _recordingMode = new WeakMap();
@@ -42913,21 +43349,21 @@ _trimEnd = new WeakMap();
 _videoDuration = new WeakMap();
 _isDraggingTrim = new WeakMap();
 _isExporting = new WeakMap();
-__decorateElement(_init4, 4, "dashboardRef", _dashboardRef_dec2, WccRecordingPanel, _dashboardRef2);
-__decorateElement(_init4, 4, "panelState", _panelState_dec, WccRecordingPanel, _panelState);
-__decorateElement(_init4, 4, "recordingMode", _recordingMode_dec, WccRecordingPanel, _recordingMode);
-__decorateElement(_init4, 4, "audioEnabled", _audioEnabled_dec, WccRecordingPanel, _audioEnabled);
-__decorateElement(_init4, 4, "selectedMicrophoneId", _selectedMicrophoneId_dec, WccRecordingPanel, _selectedMicrophoneId);
-__decorateElement(_init4, 4, "availableMicrophones", _availableMicrophones_dec, WccRecordingPanel, _availableMicrophones);
-__decorateElement(_init4, 4, "audioLevel", _audioLevel_dec, WccRecordingPanel, _audioLevel);
-__decorateElement(_init4, 4, "recordingDuration", _recordingDuration_dec, WccRecordingPanel, _recordingDuration);
-__decorateElement(_init4, 4, "previewVideoUrl", _previewVideoUrl_dec, WccRecordingPanel, _previewVideoUrl);
-__decorateElement(_init4, 4, "trimStart", _trimStart_dec, WccRecordingPanel, _trimStart);
-__decorateElement(_init4, 4, "trimEnd", _trimEnd_dec, WccRecordingPanel, _trimEnd);
-__decorateElement(_init4, 4, "videoDuration", _videoDuration_dec, WccRecordingPanel, _videoDuration);
-__decorateElement(_init4, 4, "isDraggingTrim", _isDraggingTrim_dec, WccRecordingPanel, _isDraggingTrim);
-__decorateElement(_init4, 4, "isExporting", _isExporting_dec, WccRecordingPanel, _isExporting);
-WccRecordingPanel = __decorateElement(_init4, 0, "WccRecordingPanel", _WccRecordingPanel_decorators, WccRecordingPanel);
+__decorateElement(_init5, 4, "dashboardRef", _dashboardRef_dec2, WccRecordingPanel, _dashboardRef2);
+__decorateElement(_init5, 4, "panelState", _panelState_dec, WccRecordingPanel, _panelState);
+__decorateElement(_init5, 4, "recordingMode", _recordingMode_dec, WccRecordingPanel, _recordingMode);
+__decorateElement(_init5, 4, "audioEnabled", _audioEnabled_dec, WccRecordingPanel, _audioEnabled);
+__decorateElement(_init5, 4, "selectedMicrophoneId", _selectedMicrophoneId_dec, WccRecordingPanel, _selectedMicrophoneId);
+__decorateElement(_init5, 4, "availableMicrophones", _availableMicrophones_dec, WccRecordingPanel, _availableMicrophones);
+__decorateElement(_init5, 4, "audioLevel", _audioLevel_dec, WccRecordingPanel, _audioLevel);
+__decorateElement(_init5, 4, "recordingDuration", _recordingDuration_dec, WccRecordingPanel, _recordingDuration);
+__decorateElement(_init5, 4, "previewVideoUrl", _previewVideoUrl_dec, WccRecordingPanel, _previewVideoUrl);
+__decorateElement(_init5, 4, "trimStart", _trimStart_dec, WccRecordingPanel, _trimStart);
+__decorateElement(_init5, 4, "trimEnd", _trimEnd_dec, WccRecordingPanel, _trimEnd);
+__decorateElement(_init5, 4, "videoDuration", _videoDuration_dec, WccRecordingPanel, _videoDuration);
+__decorateElement(_init5, 4, "isDraggingTrim", _isDraggingTrim_dec, WccRecordingPanel, _isDraggingTrim);
+__decorateElement(_init5, 4, "isExporting", _isExporting_dec, WccRecordingPanel, _isExporting);
+WccRecordingPanel = __decorateElement(_init5, 0, "WccRecordingPanel", _WccRecordingPanel_decorators, WccRecordingPanel);
 __publicField(WccRecordingPanel, "styles", [
   i`
       :host {
@@ -43406,31 +43842,31 @@ __publicField(WccRecordingPanel, "styles", [
 
     `
 ]);
-__runInitializers(_init4, 1, WccRecordingPanel);
+__runInitializers(_init5, 1, WccRecordingPanel);
 
 // ts_web/elements/wcc-properties.ts
-var _recordingDuration_dec2, _isRecording_dec, _showRecordingPanel_dec, _editingProperties_dec, _propertyContent_dec, _isNative_dec3, _warning_dec, _selectedTheme_dec, _selectedViewport_dec, _selectedItem_dec2, _dashboardRef_dec3, _a5, _WccProperties_decorators, _init5, _dashboardRef3, _selectedItem2, _selectedViewport, _selectedTheme, _warning, _isNative3, _propertyContent, _editingProperties, _showRecordingPanel, _isRecording, _recordingDuration2;
+var _recordingDuration_dec2, _isRecording_dec, _showRecordingPanel_dec, _editingProperties_dec, _propertyContent_dec, _isNative_dec3, _warning_dec, _selectedTheme_dec, _selectedViewport_dec, _selectedItem_dec2, _dashboardRef_dec3, _a6, _WccProperties_decorators, _init6, _dashboardRef3, _selectedItem2, _selectedViewport, _selectedTheme, _warning, _isNative3, _propertyContent, _editingProperties, _showRecordingPanel, _isRecording, _recordingDuration2;
 var environment = "native";
 var setEnvironment = (envArg) => {
   environment = envArg;
 };
 _WccProperties_decorators = [t4("wcc-properties")];
-var WccProperties = class extends (_a5 = DeesElement, _dashboardRef_dec3 = [n5({
+var WccProperties = class extends (_a6 = DeesElement, _dashboardRef_dec3 = [n5({
   type: WccDashboard2
-})], _selectedItem_dec2 = [n5()], _selectedViewport_dec = [n5()], _selectedTheme_dec = [n5()], _warning_dec = [n5()], _isNative_dec3 = [n5()], _propertyContent_dec = [r5()], _editingProperties_dec = [r5()], _showRecordingPanel_dec = [r5()], _isRecording_dec = [r5()], _recordingDuration_dec2 = [r5()], _a5) {
+})], _selectedItem_dec2 = [n5()], _selectedViewport_dec = [n5()], _selectedTheme_dec = [n5()], _warning_dec = [n5()], _isNative_dec3 = [n5()], _propertyContent_dec = [r5()], _editingProperties_dec = [r5()], _showRecordingPanel_dec = [r5()], _isRecording_dec = [r5()], _recordingDuration_dec2 = [r5()], _a6) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _dashboardRef3, __runInitializers(_init5, 8, this)), __runInitializers(_init5, 11, this);
-    __privateAdd(this, _selectedItem2, __runInitializers(_init5, 12, this)), __runInitializers(_init5, 15, this);
-    __privateAdd(this, _selectedViewport, __runInitializers(_init5, 16, this, "native")), __runInitializers(_init5, 19, this);
-    __privateAdd(this, _selectedTheme, __runInitializers(_init5, 20, this, "dark")), __runInitializers(_init5, 23, this);
-    __privateAdd(this, _warning, __runInitializers(_init5, 24, this, null)), __runInitializers(_init5, 27, this);
-    __privateAdd(this, _isNative3, __runInitializers(_init5, 28, this, false)), __runInitializers(_init5, 31, this);
-    __privateAdd(this, _propertyContent, __runInitializers(_init5, 32, this, [])), __runInitializers(_init5, 35, this);
-    __privateAdd(this, _editingProperties, __runInitializers(_init5, 36, this, [])), __runInitializers(_init5, 39, this);
-    __privateAdd(this, _showRecordingPanel, __runInitializers(_init5, 40, this, false)), __runInitializers(_init5, 43, this);
-    __privateAdd(this, _isRecording, __runInitializers(_init5, 44, this, false)), __runInitializers(_init5, 47, this);
-    __privateAdd(this, _recordingDuration2, __runInitializers(_init5, 48, this, 0)), __runInitializers(_init5, 51, this);
+    __privateAdd(this, _dashboardRef3, __runInitializers(_init6, 8, this)), __runInitializers(_init6, 11, this);
+    __privateAdd(this, _selectedItem2, __runInitializers(_init6, 12, this)), __runInitializers(_init6, 15, this);
+    __privateAdd(this, _selectedViewport, __runInitializers(_init6, 16, this, "native")), __runInitializers(_init6, 19, this);
+    __privateAdd(this, _selectedTheme, __runInitializers(_init6, 20, this, "dark")), __runInitializers(_init6, 23, this);
+    __privateAdd(this, _warning, __runInitializers(_init6, 24, this, null)), __runInitializers(_init6, 27, this);
+    __privateAdd(this, _isNative3, __runInitializers(_init6, 28, this, false)), __runInitializers(_init6, 31, this);
+    __privateAdd(this, _propertyContent, __runInitializers(_init6, 32, this, [])), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _editingProperties, __runInitializers(_init6, 36, this, [])), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _showRecordingPanel, __runInitializers(_init6, 40, this, false)), __runInitializers(_init6, 43, this);
+    __privateAdd(this, _isRecording, __runInitializers(_init6, 44, this, false)), __runInitializers(_init6, 47, this);
+    __privateAdd(this, _recordingDuration2, __runInitializers(_init6, 48, this, 0)), __runInitializers(_init6, 51, this);
     __publicField(this, "editorHeight", 300);
   }
   render() {
@@ -44385,7 +44821,7 @@ var WccProperties = class extends (_a5 = DeesElement, _dashboardRef_dec3 = [n5({
     }
   }
 };
-_init5 = __decoratorStart(_a5);
+_init6 = __decoratorStart(_a6);
 _dashboardRef3 = new WeakMap();
 _selectedItem2 = new WeakMap();
 _selectedViewport = new WeakMap();
@@ -44397,22 +44833,22 @@ _editingProperties = new WeakMap();
 _showRecordingPanel = new WeakMap();
 _isRecording = new WeakMap();
 _recordingDuration2 = new WeakMap();
-__decorateElement(_init5, 4, "dashboardRef", _dashboardRef_dec3, WccProperties, _dashboardRef3);
-__decorateElement(_init5, 4, "selectedItem", _selectedItem_dec2, WccProperties, _selectedItem2);
-__decorateElement(_init5, 4, "selectedViewport", _selectedViewport_dec, WccProperties, _selectedViewport);
-__decorateElement(_init5, 4, "selectedTheme", _selectedTheme_dec, WccProperties, _selectedTheme);
-__decorateElement(_init5, 4, "warning", _warning_dec, WccProperties, _warning);
-__decorateElement(_init5, 4, "isNative", _isNative_dec3, WccProperties, _isNative3);
-__decorateElement(_init5, 4, "propertyContent", _propertyContent_dec, WccProperties, _propertyContent);
-__decorateElement(_init5, 4, "editingProperties", _editingProperties_dec, WccProperties, _editingProperties);
-__decorateElement(_init5, 4, "showRecordingPanel", _showRecordingPanel_dec, WccProperties, _showRecordingPanel);
-__decorateElement(_init5, 4, "isRecording", _isRecording_dec, WccProperties, _isRecording);
-__decorateElement(_init5, 4, "recordingDuration", _recordingDuration_dec2, WccProperties, _recordingDuration2);
-WccProperties = __decorateElement(_init5, 0, "WccProperties", _WccProperties_decorators, WccProperties);
-__runInitializers(_init5, 1, WccProperties);
+__decorateElement(_init6, 4, "dashboardRef", _dashboardRef_dec3, WccProperties, _dashboardRef3);
+__decorateElement(_init6, 4, "selectedItem", _selectedItem_dec2, WccProperties, _selectedItem2);
+__decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec, WccProperties, _selectedViewport);
+__decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec, WccProperties, _selectedTheme);
+__decorateElement(_init6, 4, "warning", _warning_dec, WccProperties, _warning);
+__decorateElement(_init6, 4, "isNative", _isNative_dec3, WccProperties, _isNative3);
+__decorateElement(_init6, 4, "propertyContent", _propertyContent_dec, WccProperties, _propertyContent);
+__decorateElement(_init6, 4, "editingProperties", _editingProperties_dec, WccProperties, _editingProperties);
+__decorateElement(_init6, 4, "showRecordingPanel", _showRecordingPanel_dec, WccProperties, _showRecordingPanel);
+__decorateElement(_init6, 4, "isRecording", _isRecording_dec, WccProperties, _isRecording);
+__decorateElement(_init6, 4, "recordingDuration", _recordingDuration_dec2, WccProperties, _recordingDuration2);
+WccProperties = __decorateElement(_init6, 0, "WccProperties", _WccProperties_decorators, WccProperties);
+__runInitializers(_init6, 1, WccProperties);
 
 // ts_web/elements/wcc-dashboard.ts
-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 _wccFrame_dec, _warning_dec2, _pinnedItems_dec2, _searchQuery_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a7, _WccDashboard_decorators, _init7, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _searchQuery2, _pinnedItems2, _warning2, _wccFrame;
 var getSectionItems = (section) => {
   let entries = Object.entries(section.items);
   if (section.filter) {
@@ -44424,22 +44860,24 @@ var getSectionItems = (section) => {
   return entries;
 };
 _WccDashboard_decorators = [t4("wcc-dashboard")];
-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) {
+var WccDashboard2 = class extends (_a7 = 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()], _searchQuery_dec2 = [n5()], _pinnedItems_dec2 = [n5({ attribute: false })], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a7) {
   constructor(config2) {
     super();
-    __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);
+    __privateAdd(this, _sections, __runInitializers(_init7, 8, this, [])), __runInitializers(_init7, 11, this);
+    __privateAdd(this, _selectedSection, __runInitializers(_init7, 12, this, null)), __runInitializers(_init7, 15, this);
+    __privateAdd(this, _selectedType2, __runInitializers(_init7, 16, this)), __runInitializers(_init7, 19, this);
+    __privateAdd(this, _selectedItemName, __runInitializers(_init7, 20, this)), __runInitializers(_init7, 23, this);
+    __privateAdd(this, _selectedItem3, __runInitializers(_init7, 24, this)), __runInitializers(_init7, 27, this);
+    __privateAdd(this, _selectedDemoIndex, __runInitializers(_init7, 28, this, 0)), __runInitializers(_init7, 31, this);
+    __privateAdd(this, _selectedViewport2, __runInitializers(_init7, 32, this, "desktop")), __runInitializers(_init7, 35, this);
+    __privateAdd(this, _selectedTheme2, __runInitializers(_init7, 36, this, "dark")), __runInitializers(_init7, 39, this);
+    __privateAdd(this, _searchQuery2, __runInitializers(_init7, 40, this, "")), __runInitializers(_init7, 43, this);
+    __privateAdd(this, _pinnedItems2, __runInitializers(_init7, 44, this, /* @__PURE__ */ new Set())), __runInitializers(_init7, 47, this);
+    __privateAdd(this, _warning2, __runInitializers(_init7, 48, this, null)), __runInitializers(_init7, 51, this);
     __publicField(this, "frameScrollY", 0);
     __publicField(this, "sidebarScrollY", 0);
     __publicField(this, "scrollPositionsApplied", false);
-    __privateAdd(this, _wccFrame, __runInitializers(_init6, 44, this)), __runInitializers(_init6, 47, this);
+    __privateAdd(this, _wccFrame, __runInitializers(_init7, 52, this)), __runInitializers(_init7, 55, this);
     __publicField(this, "scrollUpdateTimeout");
     __publicField(this, "scrollListenersAttached", false);
     if (config2 && config2.sections) {
@@ -44485,6 +44923,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
+        .searchQuery=${this.searchQuery}
+        .pinnedItems=${this.pinnedItems}
         .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
       this.selectedType = eventArg.detail;
@@ -44494,6 +44934,14 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     }}
         @selectedItem=${(eventArg) => {
       this.selectedItem = eventArg.detail;
+    }}
+        @searchChanged=${(eventArg) => {
+      this.searchQuery = eventArg.detail;
+      this.updateUrlWithScrollState();
+    }}
+        @pinnedChanged=${(eventArg) => {
+      this.pinnedItems = eventArg.detail;
+      this.updateUrlWithScrollState();
     }}
       ></wcc-sidebar>
       <wcc-properties
@@ -44577,17 +45025,37 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           }
         }
         if (routeInfo.queryParams) {
+          const search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          const pinned = routeInfo.queryParams.pinned;
+          if (search2) {
+            this.searchQuery = search2;
+          } else {
+            this.searchQuery = "";
+          }
           if (frameScrollY) {
             this.frameScrollY = parseInt(frameScrollY);
           }
           if (sidebarScrollY) {
             this.sidebarScrollY = parseInt(sidebarScrollY);
           }
+          if (pinned) {
+            const newPinned = new Set(pinned.split(",").filter(Boolean));
+            if (this.pinnedItems.size !== newPinned.size || ![...newPinned].every((k3) => this.pinnedItems.has(k3))) {
+              this.pinnedItems = newPinned;
+            }
+          } else if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
+        } else {
+          this.searchQuery = "";
+          if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
         }
         const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
@@ -44621,17 +45089,37 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           }
         }
         if (routeInfo.queryParams) {
+          const search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          const pinned = routeInfo.queryParams.pinned;
+          if (search2) {
+            this.searchQuery = search2;
+          } else {
+            this.searchQuery = "";
+          }
           if (frameScrollY) {
             this.frameScrollY = parseInt(frameScrollY);
           }
           if (sidebarScrollY) {
             this.sidebarScrollY = parseInt(sidebarScrollY);
           }
+          if (pinned) {
+            const newPinned = new Set(pinned.split(",").filter(Boolean));
+            if (this.pinnedItems.size !== newPinned.size || ![...newPinned].every((k3) => this.pinnedItems.has(k3))) {
+              this.pinnedItems = newPinned;
+            }
+          } else if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
+        } else {
+          this.searchQuery = "";
+          if (this.pinnedItems.size > 0) {
+            this.pinnedItems = /* @__PURE__ */ new Set();
+          }
         }
         const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
@@ -44690,12 +45178,18 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     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.searchQuery) {
+      queryParams.set("search", this.searchQuery);
+    }
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
     }
     if (this.sidebarScrollY > 0) {
       queryParams.set("sidebarScrollY", this.sidebarScrollY.toString());
     }
+    if (this.pinnedItems.size > 0) {
+      queryParams.set("pinned", Array.from(this.pinnedItems).join(","));
+    }
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
     this.domtools.router.pushUrl(fullUrl);
@@ -44730,12 +45224,18 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     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.searchQuery) {
+      queryParams.set("search", this.searchQuery);
+    }
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
     }
     if (this.sidebarScrollY > 0) {
       queryParams.set("sidebarScrollY", this.sidebarScrollY.toString());
     }
+    if (this.pinnedItems.size > 0) {
+      queryParams.set("pinned", Array.from(this.pinnedItems).join(","));
+    }
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
     window.history.replaceState(null, "", fullUrl);
@@ -44755,7 +45255,7 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     this.scrollPositionsApplied = true;
   }
 };
-_init6 = __decoratorStart(_a6);
+_init7 = __decoratorStart(_a7);
 _sections = new WeakMap();
 _selectedSection = new WeakMap();
 _selectedType2 = new WeakMap();
@@ -44764,20 +45264,24 @@ _selectedItem3 = new WeakMap();
 _selectedDemoIndex = new WeakMap();
 _selectedViewport2 = new WeakMap();
 _selectedTheme2 = new WeakMap();
+_searchQuery2 = new WeakMap();
+_pinnedItems2 = 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, "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);
+__decorateElement(_init7, 4, "sections", _sections_dec, WccDashboard2, _sections);
+__decorateElement(_init7, 4, "selectedSection", _selectedSection_dec, WccDashboard2, _selectedSection);
+__decorateElement(_init7, 4, "selectedType", _selectedType_dec2, WccDashboard2, _selectedType2);
+__decorateElement(_init7, 4, "selectedItemName", _selectedItemName_dec, WccDashboard2, _selectedItemName);
+__decorateElement(_init7, 4, "selectedItem", _selectedItem_dec3, WccDashboard2, _selectedItem3);
+__decorateElement(_init7, 4, "selectedDemoIndex", _selectedDemoIndex_dec, WccDashboard2, _selectedDemoIndex);
+__decorateElement(_init7, 4, "selectedViewport", _selectedViewport_dec2, WccDashboard2, _selectedViewport2);
+__decorateElement(_init7, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
+__decorateElement(_init7, 4, "searchQuery", _searchQuery_dec2, WccDashboard2, _searchQuery2);
+__decorateElement(_init7, 4, "pinnedItems", _pinnedItems_dec2, WccDashboard2, _pinnedItems2);
+__decorateElement(_init7, 4, "warning", _warning_dec2, WccDashboard2, _warning2);
+__decorateElement(_init7, 4, "wccFrame", _wccFrame_dec, WccDashboard2, _wccFrame);
+WccDashboard2 = __decorateElement(_init7, 0, "WccDashboard", _WccDashboard_decorators, WccDashboard2);
+__runInitializers(_init7, 1, WccDashboard2);
 
 // ts_web/index.ts
 var convertLegacyToConfig = (elementsArg, pagesArg) => {