@design.estate/dees-wcctools 1.2.1 → 2.0.0

package/dist_watch/bundle.js

@@ -4,6 +4,12 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key2, value2) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key2] = value2;
+var __name = (target, value2) => __defProp(target, "name", { value: value2, configurable: true });
 var __require = /* @__PURE__ */ ((x2) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x2, {
   get: (a4, b4) => (typeof require !== "undefined" ? require : a4)[b4]
 }) : x2)(function(x2) {
@@ -33,14 +39,46 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
-var __decorateClass = (decorators, target, key2, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key2) : target;
-  for (var i9 = decorators.length - 1, decorator; i9 >= 0; i9--)
-    if (decorator = decorators[i9])
-      result = (kind ? decorator(target, key2, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key2, result);
-  return result;
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self2, value2) => {
+  for (var i9 = 0, fns = array[flags >> 1], n12 = fns && fns.length; i9 < n12; i9++) flags & 1 ? fns[i9].call(self2) : value2 = fns[i9].call(self2, value2);
+  return value2;
 };
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k3 = flags & 7, s8 = !!(flags & 8), p6 = !!(flags & 16);
+  var j2 = k3 > 3 ? array.length + 1 : k3 ? s8 ? 1 : 2 : 0, key2 = __decoratorStrings[k3 + 5];
+  var initializers = k3 > 3 && (array[j2 - 1] = []), extraInitializers = array[j2] || (array[j2] = []);
+  var desc = k3 && (!p6 && !s8 && (target = target.prototype), k3 < 5 && (k3 > 3 || !p6) && __getOwnPropDesc(k3 < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x2) {
+    return __privateSet(this, extra, x2);
+  } }, name));
+  k3 ? p6 && k3 < 4 && __name(extra, (k3 > 2 ? "set " : k3 > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i9 = decorators.length - 1; i9 >= 0; i9--) {
+    ctx = __decoratorContext(k3, name, done = {}, array[3], extraInitializers);
+    if (k3) {
+      ctx.static = s8, ctx.private = p6, access = ctx.access = { has: p6 ? (x2) => __privateIn(target, x2) : (x2) => name in x2 };
+      if (k3 ^ 3) access.get = p6 ? (x2) => (k3 ^ 1 ? __privateGet : __privateMethod)(x2, target, k3 ^ 4 ? extra : desc.get) : (x2) => x2[name];
+      if (k3 > 2) access.set = p6 ? (x2, y4) => __privateSet(x2, target, y4, k3 ^ 4 ? extra : desc.set) : (x2, y4) => x2[name] = y4;
+    }
+    it = (0, decorators[i9])(k3 ? k3 < 4 ? p6 ? extra : desc[key2] : k3 > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k3 ^ 4 || it === void 0) __expectFn(it) && (k3 > 4 ? initializers.unshift(it) : k3 ? p6 ? extra = it : desc[key2] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k3 || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p6 ? k3 ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key2, value2) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value2);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value2) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value2);
+var __privateSet = (obj, member, value2, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value2) : member.set(obj, value2), value2);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
 // node_modules/.pnpm/@push.rocks+isounique@1.0.5/node_modules/@push.rocks/isounique/dist_ts/index.js
 var require_dist_ts = __commonJS({
@@ -416,10 +454,10 @@ var require_TreePosition = __commonJS({
 var require_TreeIterator = __commonJS({
   "node_modules/.pnpm/symbol-tree@3.2.4/node_modules/symbol-tree/lib/TreeIterator.js"(exports, module) {
     "use strict";
-    var TREE = Symbol();
-    var ROOT = Symbol();
-    var NEXT = Symbol();
-    var ITERATE_FUNC = Symbol();
+    var TREE = /* @__PURE__ */ Symbol();
+    var ROOT = /* @__PURE__ */ Symbol();
+    var NEXT = /* @__PURE__ */ Symbol();
+    var ITERATE_FUNC = /* @__PURE__ */ Symbol();
     var TreeIterator = class {
       constructor(tree, root6, firstResult, iterateFunction) {
         this[TREE] = tree;
@@ -5557,7 +5595,7 @@ var require_sweet_scroll = __commonJS({
               hash: null
             };
             this.loop = function(time) {
-              var _a = _this, $el = _a.$el, ctx = _a.ctx;
+              var _a14 = _this, $el = _a14.$el, ctx = _a14.ctx;
               if (!ctx.start) {
                 ctx.start = time;
               }
@@ -5652,7 +5690,7 @@ var require_sweet_scroll = __commonJS({
             if (!canUseDOM) {
               return;
             }
-            var _a = this, $el = _a.$el, ctx = _a.ctx, currentOptions = _a.opts;
+            var _a14 = this, $el = _a14.$el, ctx = _a14.ctx, currentOptions = _a14.opts;
             var $trigger = ctx.$trigger;
             var opts = __assign2({}, currentOptions, options || {});
             var optOffset = opts.offset, vertical = opts.vertical, horizontal = opts.horizontal;
@@ -5691,7 +5729,7 @@ var require_sweet_scroll = __commonJS({
             if ($header) {
               scroll.top = Math.max(0, scroll.top - getSize($header).height);
             }
-            var _b = getViewportAndElementSizes($el), viewport = _b.viewport, size = _b.size;
+            var _b2 = getViewportAndElementSizes($el), viewport = _b2.viewport, size = _b2.size;
             scroll.top = vertical ? Math.max(0, Math.min(size.height - viewport.height, scroll.top)) : getScroll($el, "y");
             scroll.left = horizontal ? Math.max(0, Math.min(size.width - viewport.width, scroll.left)) : getScroll($el, "x");
             if (this.hook(opts, "before", scroll, $trigger) === false) {
@@ -5719,7 +5757,7 @@ var require_sweet_scroll = __commonJS({
             if (gotoEnd === void 0) {
               gotoEnd = false;
             }
-            var _a = this, $el = _a.$el, ctx = _a.ctx;
+            var _a14 = this, $el = _a14.$el, ctx = _a14.ctx;
             var pos = ctx.pos;
             if (!$el || !ctx.progress) {
               return;
@@ -5775,7 +5813,7 @@ var require_sweet_scroll = __commonJS({
             ctx.id = SweetScroll4.raf(this.loop);
           };
           SweetScroll4.prototype.complete = function() {
-            var _a = this, $el = _a.$el, ctx = _a.ctx;
+            var _a14 = this, $el = _a14.$el, ctx = _a14.ctx;
             var hash = ctx.hash, cancel = ctx.cancel, opts = ctx.opts, pos = ctx.pos, $trigger = ctx.$trigger;
             if (!$el || !opts) {
               return;
@@ -5801,18 +5839,18 @@ var require_sweet_scroll = __commonJS({
             for (var _i = 2; _i < arguments.length; _i++) {
               args[_i - 2] = arguments[_i];
             }
-            var _a;
+            var _a14;
             var callback = options[type5];
             var callbackResult;
             var methodResult;
             if (isFunction2(callback)) {
               callbackResult = callback.apply(this, args.concat([this]));
             }
-            methodResult = (_a = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a, args);
+            methodResult = (_a14 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a14, args);
             return callbackResult !== void 0 ? callbackResult : methodResult;
           };
           SweetScroll4.prototype.bind = function(click, stop) {
-            var _a = this, $el = _a.$el, opts = _a.ctx.opts;
+            var _a14 = this, $el = _a14.$el, opts = _a14.ctx.opts;
             if ($el) {
               if (click) {
                 addEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -5823,7 +5861,7 @@ var require_sweet_scroll = __commonJS({
             }
           };
           SweetScroll4.prototype.unbind = function(click, stop) {
-            var _a = this, $el = _a.$el, opts = _a.ctx.opts;
+            var _a14 = this, $el = _a14.$el, opts = _a14.ctx.opts;
             if ($el) {
               if (click) {
                 removeEvent($el, CONTAINER_CLICK_EVENT, this.handleClick, false);
@@ -5844,7 +5882,7 @@ var require_sweet_scroll = __commonJS({
 });
 
 // node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js
-var t = globalThis, e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s = Symbol(), o = /* @__PURE__ */ new WeakMap();
+var t = globalThis, e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s = /* @__PURE__ */ Symbol(), o = /* @__PURE__ */ new WeakMap();
 var n = class {
   constructor(t8, e10, o12) {
     if (this._$cssResult$ = true, o12 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -5912,7 +5950,7 @@ var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: h, getOwnPropertyNam
   }
   return i9;
 } }, f = (t8, s8) => !i2(t8, s8), b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
-Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), a.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 var y = class extends HTMLElement {
   static addInitializer(t8) {
     this._$Ei(), (this.l ??= []).push(t8);
@@ -5922,7 +5960,7 @@ var y = class extends HTMLElement {
   }
   static createProperty(t8, s8 = b) {
     if (s8.state && (s8.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t8) && ((s8 = Object.create(s8)).wrapped = true), this.elementProperties.set(t8, s8), !s8.noAccessor) {
-      const i9 = Symbol(), h8 = this.getPropertyDescriptor(t8, i9, s8);
+      const i9 = /* @__PURE__ */ Symbol(), h8 = this.getPropertyDescriptor(t8, i9, s8);
       void 0 !== h8 && e2(this.prototype, t8, h8);
     }
   }
@@ -6098,7 +6136,7 @@ y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProper
 
 // node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js
 var t2 = globalThis, i3 = t2.trustedTypes, s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t8) => t8 }) : void 0, e3 = "$lit$", h2 = `lit$${Math.random().toFixed(9).slice(2)}$`, o3 = "?" + h2, n3 = `<${o3}>`, r3 = document, l2 = () => r3.createComment(""), c3 = (t8) => null === t8 || "object" != typeof t8 && "function" != typeof t8, a2 = Array.isArray, u2 = (t8) => a2(t8) || "function" == typeof t8?.[Symbol.iterator], d2 = "[ 	\n\f\r]", f2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d2}(?:([^\\s"'>=/]+)(${d2}*=${d2}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), p2 = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y2 = (t8) => (i9, ...s8) => ({ _$litType$: t8, strings: i9, values: s8 }), x = y2(1), b2 = y2(2), w = y2(3), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r3.createTreeWalker(r3, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), p2 = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y2 = (t8) => (i9, ...s8) => ({ _$litType$: t8, strings: i9, values: s8 }), x = y2(1), b2 = y2(2), w = y2(3), T = /* @__PURE__ */ Symbol.for("lit-noChange"), E = /* @__PURE__ */ Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r3.createTreeWalker(r3, 129);
 function P(t8, i9) {
   if (!a2(t8) || !t8.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return void 0 !== s2 ? s2.createHTML(i9) : i9;
@@ -6603,7 +6641,7 @@ function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, e
   done = true;
 }
 ;
-function __runInitializers(thisArg, initializers, value2) {
+function __runInitializers2(thisArg, initializers, value2) {
   var useValue = arguments.length > 2;
   for (var i9 = 0; i9 < initializers.length; i9++) {
     value2 = useValue ? initializers[i9].call(thisArg, value2) : initializers[i9].call(thisArg);
@@ -6981,7 +7019,7 @@ var tslib_es6_default = {
   __decorate,
   __param,
   __esDecorate,
-  __runInitializers,
+  __runInitializers: __runInitializers2,
   __propKey,
   __setFunctionName,
   __metadata,
@@ -7055,7 +7093,7 @@ var Subscription = (function() {
     this._finalizers = null;
   }
   Subscription2.prototype.unsubscribe = function() {
-    var e_1, _a, e_2, _b;
+    var e_1, _a14, e_2, _b2;
     var errors;
     if (!this.closed) {
       this.closed = true;
@@ -7072,7 +7110,7 @@ var Subscription = (function() {
             e_1 = { error: e_1_1 };
           } finally {
             try {
-              if (_parentage_1_1 && !_parentage_1_1.done && (_a = _parentage_1.return)) _a.call(_parentage_1);
+              if (_parentage_1_1 && !_parentage_1_1.done && (_a14 = _parentage_1.return)) _a14.call(_parentage_1);
             } finally {
               if (e_1) throw e_1.error;
             }
@@ -7110,7 +7148,7 @@ var Subscription = (function() {
           e_2 = { error: e_2_1 };
         } finally {
           try {
-            if (_finalizers_1_1 && !_finalizers_1_1.done && (_b = _finalizers_1.return)) _b.call(_finalizers_1);
+            if (_finalizers_1_1 && !_finalizers_1_1.done && (_b2 = _finalizers_1.return)) _b2.call(_finalizers_1);
           } finally {
             if (e_2) throw e_2.error;
           }
@@ -7122,7 +7160,7 @@ var Subscription = (function() {
     }
   };
   Subscription2.prototype.add = function(teardown) {
-    var _a;
+    var _a14;
     if (teardown && teardown !== this) {
       if (this.closed) {
         execFinalizer(teardown);
@@ -7133,7 +7171,7 @@ var Subscription = (function() {
           }
           teardown._addParent(this);
         }
-        (this._finalizers = (_a = this._finalizers) !== null && _a !== void 0 ? _a : []).push(teardown);
+        (this._finalizers = (_a14 = this._finalizers) !== null && _a14 !== void 0 ? _a14 : []).push(teardown);
       }
     }
   };
@@ -7252,7 +7290,7 @@ function errorContext(cb) {
     }
     cb();
     if (isRoot) {
-      var _a = context, errorThrown = _a.errorThrown, error = _a.error;
+      var _a14 = context, errorThrown = _a14.errorThrown, error = _a14.error;
       context = null;
       if (errorThrown) {
         throw error;
@@ -7483,7 +7521,7 @@ var Observable = (function() {
     var _this = this;
     var subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
     errorContext(function() {
-      var _a = _this, operator = _a.operator, source = _a.source;
+      var _a14 = _this, operator = _a14.operator, source = _a14.source;
       subscriber.add(operator ? operator.call(subscriber, source) : source ? _this._subscribe(subscriber) : _this._trySubscribe(subscriber));
     });
     return subscriber;
@@ -7515,8 +7553,8 @@ var Observable = (function() {
     });
   };
   Observable2.prototype._subscribe = function(subscriber) {
-    var _a;
-    return (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber);
+    var _a14;
+    return (_a14 = this.source) === null || _a14 === void 0 ? void 0 : _a14.subscribe(subscriber);
   };
   Observable2.prototype[observable] = function() {
     return this;
@@ -7548,8 +7586,8 @@ var Observable = (function() {
   return Observable2;
 })();
 function getPromiseCtor(promiseCtor) {
-  var _a;
-  return (_a = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a !== void 0 ? _a : Promise;
+  var _a14;
+  return (_a14 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a14 !== void 0 ? _a14 : Promise;
 }
 function isObserver(value2) {
   return value2 && isFunction(value2.next) && isFunction(value2.error) && isFunction(value2.complete);
@@ -7615,11 +7653,11 @@ var OperatorSubscriber = (function(_super) {
     return _this;
   }
   OperatorSubscriber2.prototype.unsubscribe = function() {
-    var _a;
+    var _a14;
     if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {
       var closed_1 = this.closed;
       _super.prototype.unsubscribe.call(this);
-      !closed_1 && ((_a = this.onFinalize) === null || _a === void 0 ? void 0 : _a.call(this));
+      !closed_1 && ((_a14 = this.onFinalize) === null || _a14 === void 0 ? void 0 : _a14.call(this));
     }
   };
   return OperatorSubscriber2;
@@ -7660,22 +7698,22 @@ var Subject = (function(_super) {
   Subject2.prototype.next = function(value2) {
     var _this = this;
     errorContext(function() {
-      var e_1, _a;
+      var e_1, _a14;
       _this._throwIfClosed();
       if (!_this.isStopped) {
         if (!_this.currentObservers) {
           _this.currentObservers = Array.from(_this.observers);
         }
         try {
-          for (var _b = __values(_this.currentObservers), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var observer = _c.value;
+          for (var _b2 = __values(_this.currentObservers), _c2 = _b2.next(); !_c2.done; _c2 = _b2.next()) {
+            var observer = _c2.value;
             observer.next(value2);
           }
         } catch (e_1_1) {
           e_1 = { error: e_1_1 };
         } finally {
           try {
-            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            if (_c2 && !_c2.done && (_a14 = _b2.return)) _a14.call(_b2);
           } finally {
             if (e_1) throw e_1.error;
           }
@@ -7716,8 +7754,8 @@ var Subject = (function(_super) {
   };
   Object.defineProperty(Subject2.prototype, "observed", {
     get: function() {
-      var _a;
-      return ((_a = this.observers) === null || _a === void 0 ? void 0 : _a.length) > 0;
+      var _a14;
+      return ((_a14 = this.observers) === null || _a14 === void 0 ? void 0 : _a14.length) > 0;
     },
     enumerable: false,
     configurable: true
@@ -7733,7 +7771,7 @@ var Subject = (function(_super) {
   };
   Subject2.prototype._innerSubscribe = function(subscriber) {
     var _this = this;
-    var _a = this, hasError = _a.hasError, isStopped = _a.isStopped, observers = _a.observers;
+    var _a14 = this, hasError = _a14.hasError, isStopped = _a14.isStopped, observers = _a14.observers;
     if (hasError || isStopped) {
       return EMPTY_SUBSCRIPTION;
     }
@@ -7745,7 +7783,7 @@ var Subject = (function(_super) {
     });
   };
   Subject2.prototype._checkFinalizedStatuses = function(subscriber) {
-    var _a = this, hasError = _a.hasError, thrownError = _a.thrownError, isStopped = _a.isStopped;
+    var _a14 = this, hasError = _a14.hasError, thrownError = _a14.thrownError, isStopped = _a14.isStopped;
     if (hasError) {
       subscriber.error(thrownError);
     } else if (isStopped) {
@@ -7771,20 +7809,20 @@ var AnonymousSubject = (function(_super) {
     return _this;
   }
   AnonymousSubject2.prototype.next = function(value2) {
-    var _a, _b;
-    (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.next) === null || _b === void 0 ? void 0 : _b.call(_a, 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);
   };
   AnonymousSubject2.prototype.error = function(err) {
-    var _a, _b;
-    (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, 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);
   };
   AnonymousSubject2.prototype.complete = function() {
-    var _a, _b;
-    (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.complete) === null || _b === void 0 ? void 0 : _b.call(_a);
+    var _a14, _b2;
+    (_b2 = (_a14 = this.destination) === null || _a14 === void 0 ? void 0 : _a14.complete) === null || _b2 === void 0 ? void 0 : _b2.call(_a14);
   };
   AnonymousSubject2.prototype._subscribe = function(subscriber) {
-    var _a, _b;
-    return (_b = (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
+    var _a14, _b2;
+    return (_b2 = (_a14 = this.source) === null || _a14 === void 0 ? void 0 : _a14.subscribe(subscriber)) !== null && _b2 !== void 0 ? _b2 : EMPTY_SUBSCRIPTION;
   };
   return AnonymousSubject2;
 })(Subject);
@@ -7822,7 +7860,7 @@ var ReplaySubject = (function(_super) {
     return _this;
   }
   ReplaySubject2.prototype.next = function(value2) {
-    var _a = this, isStopped = _a.isStopped, _buffer = _a._buffer, _infiniteTimeWindow = _a._infiniteTimeWindow, _timestampProvider = _a._timestampProvider, _windowTime = _a._windowTime;
+    var _a14 = this, isStopped = _a14.isStopped, _buffer = _a14._buffer, _infiniteTimeWindow = _a14._infiniteTimeWindow, _timestampProvider = _a14._timestampProvider, _windowTime = _a14._windowTime;
     if (!isStopped) {
       _buffer.push(value2);
       !_infiniteTimeWindow && _buffer.push(_timestampProvider.now() + _windowTime);
@@ -7834,7 +7872,7 @@ var ReplaySubject = (function(_super) {
     this._throwIfClosed();
     this._trimBuffer();
     var subscription = this._innerSubscribe(subscriber);
-    var _a = this, _infiniteTimeWindow = _a._infiniteTimeWindow, _buffer = _a._buffer;
+    var _a14 = this, _infiniteTimeWindow = _a14._infiniteTimeWindow, _buffer = _a14._buffer;
     var copy = _buffer.slice();
     for (var i9 = 0; i9 < copy.length && !subscriber.closed; i9 += _infiniteTimeWindow ? 1 : 2) {
       subscriber.next(copy[i9]);
@@ -7843,7 +7881,7 @@ var ReplaySubject = (function(_super) {
     return subscription;
   };
   ReplaySubject2.prototype._trimBuffer = function() {
-    var _a = this, _bufferSize = _a._bufferSize, _timestampProvider = _a._timestampProvider, _buffer = _a._buffer, _infiniteTimeWindow = _a._infiniteTimeWindow;
+    var _a14 = this, _bufferSize = _a14._bufferSize, _timestampProvider = _a14._timestampProvider, _buffer = _a14._buffer, _infiniteTimeWindow = _a14._infiniteTimeWindow;
     var adjustedBufferSize = (_infiniteTimeWindow ? 1 : 2) * _bufferSize;
     _bufferSize < Infinity && adjustedBufferSize < _buffer.length && _buffer.splice(0, _buffer.length - adjustedBufferSize);
     if (!_infiniteTimeWindow) {
@@ -7904,7 +7942,7 @@ var AsyncAction = (function(_super) {
     return _this;
   }
   AsyncAction2.prototype.schedule = function(state, delay2) {
-    var _a;
+    var _a14;
     if (delay2 === void 0) {
       delay2 = 0;
     }
@@ -7919,7 +7957,7 @@ var AsyncAction = (function(_super) {
     }
     this.pending = true;
     this.delay = delay2;
-    this.id = (_a = this.id) !== null && _a !== void 0 ? _a : this.requestAsyncId(scheduler, this.id, delay2);
+    this.id = (_a14 = this.id) !== null && _a14 !== void 0 ? _a14 : this.requestAsyncId(scheduler, this.id, delay2);
     return this;
   };
   AsyncAction2.prototype.requestAsyncId = function(scheduler, _id, delay2) {
@@ -7968,7 +8006,7 @@ var AsyncAction = (function(_super) {
   };
   AsyncAction2.prototype.unsubscribe = function() {
     if (!this.closed) {
-      var _a = this, id = _a.id, scheduler = _a.scheduler;
+      var _a14 = this, id = _a14.id, scheduler = _a14.scheduler;
       var actions = scheduler.actions;
       this.work = this.state = this.scheduler = null;
       this.pending = false;
@@ -8103,30 +8141,30 @@ 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, _a, value2, done;
-    return __generator(this, function(_b) {
-      switch (_b.label) {
+    var reader, _a14, value2, done;
+    return __generator(this, function(_b2) {
+      switch (_b2.label) {
         case 0:
           reader = readableStream.getReader();
-          _b.label = 1;
+          _b2.label = 1;
         case 1:
-          _b.trys.push([1, , 9, 10]);
-          _b.label = 2;
+          _b2.trys.push([1, , 9, 10]);
+          _b2.label = 2;
         case 2:
           if (false) return [3, 8];
           return [4, __await(reader.read())];
         case 3:
-          _a = _b.sent(), value2 = _a.value, done = _a.done;
+          _a14 = _b2.sent(), value2 = _a14.value, done = _a14.done;
           if (!done) return [3, 5];
           return [4, __await(void 0)];
         case 4:
-          return [2, _b.sent()];
+          return [2, _b2.sent()];
         case 5:
           return [4, __await(value2)];
         case 6:
-          return [4, _b.sent()];
+          return [4, _b2.sent()];
         case 7:
-          _b.sent();
+          _b2.sent();
           return [3, 2];
         case 8:
           return [3, 10];
@@ -8201,7 +8239,7 @@ function fromPromise(promise) {
 }
 function fromIterable(iterable) {
   return new Observable(function(subscriber) {
-    var e_1, _a;
+    var e_1, _a14;
     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;
@@ -8214,7 +8252,7 @@ function fromIterable(iterable) {
       e_1 = { error: e_1_1 };
     } finally {
       try {
-        if (iterable_1_1 && !iterable_1_1.done && (_a = iterable_1.return)) _a.call(iterable_1);
+        if (iterable_1_1 && !iterable_1_1.done && (_a14 = iterable_1.return)) _a14.call(iterable_1);
       } finally {
         if (e_1) throw e_1.error;
       }
@@ -8234,40 +8272,40 @@ function fromReadableStreamLike(readableStream) {
 }
 function process2(asyncIterable, subscriber) {
   var asyncIterable_1, asyncIterable_1_1;
-  var e_2, _a;
+  var e_2, _a14;
   return __awaiter(this, void 0, void 0, function() {
     var value2, e_2_1;
-    return __generator(this, function(_b) {
-      switch (_b.label) {
+    return __generator(this, function(_b2) {
+      switch (_b2.label) {
         case 0:
-          _b.trys.push([0, 5, 6, 11]);
+          _b2.trys.push([0, 5, 6, 11]);
           asyncIterable_1 = __asyncValues(asyncIterable);
-          _b.label = 1;
+          _b2.label = 1;
         case 1:
           return [4, asyncIterable_1.next()];
         case 2:
-          if (!(asyncIterable_1_1 = _b.sent(), !asyncIterable_1_1.done)) return [3, 4];
+          if (!(asyncIterable_1_1 = _b2.sent(), !asyncIterable_1_1.done)) return [3, 4];
           value2 = asyncIterable_1_1.value;
           subscriber.next(value2);
           if (subscriber.closed) {
             return [2];
           }
-          _b.label = 3;
+          _b2.label = 3;
         case 3:
           return [3, 1];
         case 4:
           return [3, 11];
         case 5:
-          e_2_1 = _b.sent();
+          e_2_1 = _b2.sent();
           e_2 = { error: e_2_1 };
           return [3, 11];
         case 6:
-          _b.trys.push([6, , 9, 10]);
-          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a = asyncIterable_1.return))) return [3, 8];
-          return [4, _a.call(asyncIterable_1)];
+          _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)];
         case 7:
-          _b.sent();
-          _b.label = 8;
+          _b2.sent();
+          _b2.label = 8;
         case 8:
           return [3, 10];
         case 9:
@@ -8373,11 +8411,11 @@ function scheduleIterable(input, scheduler) {
     executeSchedule(subscriber, scheduler, function() {
       iterator2 = input[iterator]();
       executeSchedule(subscriber, scheduler, function() {
-        var _a;
+        var _a14;
         var value2;
         var done;
         try {
-          _a = iterator2.next(), value2 = _a.value, done = _a.done;
+          _a14 = iterator2.next(), value2 = _a14.value, done = _a14.done;
         } catch (err) {
           subscriber.error(err);
           return;
@@ -8600,11 +8638,11 @@ function fromEvent(target, eventName, options, resultSelector) {
   if (resultSelector) {
     return fromEvent(target, eventName, options).pipe(mapOneOrManyArgs(resultSelector));
   }
-  var _a = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
+  var _a14 = __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 = _a[0], remove2 = _a[1];
+  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add2 = _a14[0], remove2 = _a14[1];
   if (!add2) {
     if (isArrayLike(target)) {
       return mergeMap(function(subTarget) {
@@ -8722,7 +8760,7 @@ function bufferCount(bufferSize, startBufferEvery) {
     var buffers = [];
     var count2 = 0;
     source.subscribe(createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a, e_2, _b;
+      var e_1, _a14, e_2, _b2;
       var toEmit = null;
       if (count2++ % startBufferEvery === 0) {
         buffers.push([]);
@@ -8740,7 +8778,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (buffers_1_1 && !buffers_1_1.done && (_a = buffers_1.return)) _a.call(buffers_1);
+          if (buffers_1_1 && !buffers_1_1.done && (_a14 = buffers_1.return)) _a14.call(buffers_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -8756,14 +8794,14 @@ function bufferCount(bufferSize, startBufferEvery) {
           e_2 = { error: e_2_1 };
         } finally {
           try {
-            if (toEmit_1_1 && !toEmit_1_1.done && (_b = toEmit_1.return)) _b.call(toEmit_1);
+            if (toEmit_1_1 && !toEmit_1_1.done && (_b2 = toEmit_1.return)) _b2.call(toEmit_1);
           } finally {
             if (e_2) throw e_2.error;
           }
         }
       }
     }, function() {
-      var e_3, _a;
+      var e_3, _a14;
       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;
@@ -8773,7 +8811,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         e_3 = { error: e_3_1 };
       } finally {
         try {
-          if (buffers_2_1 && !buffers_2_1.done && (_a = buffers_2.return)) _a.call(buffers_2);
+          if (buffers_2_1 && !buffers_2_1.done && (_a14 = buffers_2.return)) _a14.call(buffers_2);
         } finally {
           if (e_3) throw e_3.error;
         }
@@ -8787,13 +8825,13 @@ function bufferCount(bufferSize, startBufferEvery) {
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/bufferTime.js
 function bufferTime(bufferTimeSpan) {
-  var _a, _b;
+  var _a14, _b2;
   var otherArgs = [];
   for (var _i = 1; _i < arguments.length; _i++) {
     otherArgs[_i - 1] = arguments[_i];
   }
-  var scheduler = (_a = popScheduler(otherArgs)) !== null && _a !== void 0 ? _a : asyncScheduler;
-  var bufferCreationInterval = (_b = otherArgs[0]) !== null && _b !== void 0 ? _b : null;
+  var scheduler = (_a14 = popScheduler(otherArgs)) !== null && _a14 !== void 0 ? _a14 : asyncScheduler;
+  var bufferCreationInterval = (_b2 = otherArgs[0]) !== null && _b2 !== void 0 ? _b2 : null;
   var maxBufferSize = otherArgs[1] || Infinity;
   return operate(function(source, subscriber) {
     var bufferRecords = [];
@@ -8827,7 +8865,7 @@ function bufferTime(bufferTimeSpan) {
     }
     startBuffer();
     var bufferTimeSubscriber = createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a2;
+      var e_1, _a15;
       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()) {
@@ -8840,7 +8878,7 @@ function bufferTime(bufferTimeSpan) {
         e_1 = { error: e_1_1 };
       } finally {
         try {
-          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a2 = recordsCopy_1.return)) _a2.call(recordsCopy_1);
+          if (recordsCopy_1_1 && !recordsCopy_1_1.done && (_a15 = recordsCopy_1.return)) _a15.call(recordsCopy_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -8959,7 +8997,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 _a = config2 !== null && config2 !== void 0 ? config2 : {}, _b = _a.leading, leading = _b === void 0 ? true : _b, _c = _a.trailing, trailing = _c === void 0 ? false : _c;
+    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 hasValue = false;
     var sendValue = null;
     var throttled = null;
@@ -9209,7 +9247,7 @@ function n5(t8) {
   })(t8, e10, o12);
 }
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/index.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/index.js
 var dist_ts_exports25 = {};
 __export(dist_ts_exports25, {
   DomTools: () => DomTools,
@@ -9220,7 +9258,7 @@ __export(dist_ts_exports25, {
   plugins: () => domtools_pluginexports_exports
 });
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.elementbasic.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.elementbasic.js
 var domtools_elementbasic_exports = {};
 __export(domtools_elementbasic_exports, {
   setup: () => setup,
@@ -10093,7 +10131,7 @@ var secondsInWeek = secondsInDay * 7;
 var secondsInYear = secondsInDay * daysInYear;
 var secondsInMonth = secondsInYear / 12;
 var secondsInQuarter = secondsInMonth * 3;
-var constructFromSymbol = Symbol.for("constructDateFrom");
+var constructFromSymbol = /* @__PURE__ */ Symbol.for("constructDateFrom");
 
 // node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/constructFrom.js
 function constructFrom(date, value2) {
@@ -12509,9 +12547,9 @@ function isProtectedWeekYearToken(token) {
   return weekYearTokenRE.test(token);
 }
 function warnOrThrowProtectedError(token, format2, input) {
-  const _message = message(token, format2, input);
-  console.warn(_message);
-  if (throwTokens.includes(token)) throw new RangeError(_message);
+  const _message2 = message(token, format2, input);
+  console.warn(_message2);
+  if (throwTokens.includes(token)) throw new RangeError(_message2);
 }
 function message(token, format2, input) {
   const subject = token[0] === "Y" ? "years" : "days of the month";
@@ -22742,11 +22780,13 @@ function regexCheck(regex) {
   }
 }
 
-// node_modules/.pnpm/unist-util-is@6.0.0/node_modules/unist-util-is/lib/index.js
+// node_modules/.pnpm/unist-util-is@6.0.1/node_modules/unist-util-is/lib/index.js
 var is = (
   // Note: overloads in JSDoc can’t yet use different `@template`s.
   /**
    * @type {(
+   *   (<Condition extends ReadonlyArray<string>>(node: unknown, test: Condition, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & {type: Condition[number]}) &
+   *   (<Condition extends Array<string>>(node: unknown, test: Condition, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & {type: Condition[number]}) &
    *   (<Condition extends string>(node: unknown, test: Condition, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & {type: Condition}) &
    *   (<Condition extends Props>(node: unknown, test: Condition, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Condition) &
    *   (<Condition extends TestFunction>(node: unknown, test: Condition, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Predicate<Condition, Node>) &
@@ -22801,7 +22841,14 @@ var convert = (
       return castFactory(test);
     }
     if (typeof test === "object") {
-      return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+      return Array.isArray(test) ? anyFactory(test) : (
+        // Cast because `ReadonlyArray` goes into the above but `isArray`
+        // narrows to `Array`.
+        propertiesFactory(
+          /** @type {Props} */
+          test
+        )
+      );
     }
     if (typeof test === "string") {
       return typeFactory(test);
@@ -22824,7 +22871,7 @@ function anyFactory(tests) {
     return false;
   }
 }
-function propsFactory(check) {
+function propertiesFactory(check) {
   const checkAsRecord = (
     /** @type {Record<string, unknown>} */
     check
@@ -22869,12 +22916,12 @@ function looksLikeANode(value2) {
   return value2 !== null && typeof value2 === "object" && "type" in value2;
 }
 
-// node_modules/.pnpm/unist-util-visit-parents@6.0.1/node_modules/unist-util-visit-parents/lib/color.js
+// node_modules/.pnpm/unist-util-visit-parents@6.0.2/node_modules/unist-util-visit-parents/lib/color.js
 function color(d5) {
   return d5;
 }
 
-// node_modules/.pnpm/unist-util-visit-parents@6.0.1/node_modules/unist-util-visit-parents/lib/index.js
+// node_modules/.pnpm/unist-util-visit-parents@6.0.2/node_modules/unist-util-visit-parents/lib/index.js
 var empty2 = [];
 var CONTINUE = true;
 var EXIT = false;
@@ -36369,7 +36416,7 @@ function remarkStringify(options) {
   }
 }
 
-// node_modules/.pnpm/turndown@7.2.1/node_modules/turndown/lib/turndown.browser.es.js
+// node_modules/.pnpm/turndown@7.2.2/node_modules/turndown/lib/turndown.browser.es.js
 function extend2(destination) {
   for (var i9 = 1; i9 < arguments.length; i9++) {
     var source = arguments[i9];
@@ -36390,6 +36437,9 @@ function trimTrailingNewlines(string3) {
   while (indexEnd > 0 && string3[indexEnd - 1] === "\n") indexEnd--;
   return string3.substring(0, indexEnd);
 }
+function trimNewlines(string3) {
+  return trimTrailingNewlines(trimLeadingNewlines(string3));
+}
 var blockElements = [
   "ADDRESS",
   "ARTICLE",
@@ -36523,8 +36573,7 @@ rules.heading = {
 rules.blockquote = {
   filter: "blockquote",
   replacement: function(content3) {
-    content3 = content3.replace(/^\n+|\n+$/g, "");
-    content3 = content3.replace(/^/gm, "> ");
+    content3 = trimNewlines(content3).replace(/^/gm, "> ");
     return "\n\n" + content3 + "\n\n";
   }
 };
@@ -36549,8 +36598,10 @@ rules.listItem = {
       var index2 = Array.prototype.indexOf.call(parent.children, node2);
       prefix = (start ? Number(start) + index2 : index2 + 1) + ".  ";
     }
-    content3 = content3.replace(/^\n+/, "").replace(/\n+$/, "\n").replace(/\n/gm, "\n" + " ".repeat(prefix.length));
-    return prefix + content3 + (node2.nextSibling && !/\n$/.test(content3) ? "\n" : "");
+    var isParagraph = /\n$/.test(content3);
+    content3 = trimNewlines(content3) + (isParagraph ? "\n" : "");
+    content3 = content3.replace(/\n/gm, "\n" + " ".repeat(prefix.length));
+    return prefix + content3 + (node2.nextSibling ? "\n" : "");
   }
 };
 rules.indentedCodeBlock = {
@@ -38896,8 +38947,8 @@ var Stringmap2 = class {
   }
 };
 
-// node_modules/.pnpm/lenis@1.3.11/node_modules/lenis/dist/lenis.mjs
-var version = "1.3.11";
+// node_modules/.pnpm/lenis@1.3.15/node_modules/lenis/dist/lenis.mjs
+var version = "1.3.15";
 function clamp2(min3, input, max3) {
   return Math.max(min3, Math.min(input, max3));
 }
@@ -39447,16 +39498,13 @@ var Lenis = class {
   onClick = (event) => {
     const path2 = event.composedPath();
     const anchor = path2.find(
-      (node2) => node2 instanceof HTMLAnchorElement && (node2.getAttribute("href")?.startsWith("#") || node2.getAttribute("href")?.startsWith("/#") || node2.getAttribute("href")?.startsWith("./#"))
+      (node2) => node2 instanceof HTMLAnchorElement && node2.getAttribute("href")?.includes("#")
     );
     if (anchor) {
-      const id = anchor.getAttribute("href");
-      if (id) {
+      const href = anchor.getAttribute("href");
+      if (href) {
         const options = typeof this.options.anchors === "object" && this.options.anchors ? this.options.anchors : void 0;
-        let target = `#${id.split("#")[1]}`;
-        if (["#", "/#", "./#", "#top", "/#top", "./#top"].includes(id)) {
-          target = 0;
-        }
+        const target = `#${href.split("#")[1]}`;
         this.scrollTo(target, options);
       }
     }
@@ -39668,7 +39716,7 @@ var Lenis = class {
     userData
   } = {}) {
     if ((this.isStopped || this.isLocked) && !force) return;
-    if (typeof target === "string" && ["top", "left", "start"].includes(target)) {
+    if (typeof target === "string" && ["top", "left", "start", "#"].includes(target)) {
       target = 0;
     } else if (typeof target === "string" && ["bottom", "right", "end"].includes(target)) {
       target = this.limit;
@@ -39676,6 +39724,13 @@ var Lenis = class {
       let node2;
       if (typeof target === "string") {
         node2 = document.querySelector(target);
+        if (!node2) {
+          if (target === "#top") {
+            target = 0;
+          } else {
+            console.warn("Lenis: Target not found", target);
+          }
+        }
       } else if (target instanceof HTMLElement && target?.nodeType) {
         node2 = target;
       }
@@ -39960,7 +40015,7 @@ var Lenis = class {
   }
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.plugins.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.plugins.js
 var import_sweet_scroll = __toESM(require_sweet_scroll(), 1);
 var lik = {
   ObjectMap: ObjectMap2,
@@ -39968,7 +40023,7 @@ var lik = {
   FastMap: FastMap2
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.css.breakpoints.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.css.breakpoints.js
 var domtools_css_breakpoints_exports = {};
 __export(domtools_css_breakpoints_exports, {
   cssForDesktop: () => cssForDesktop,
@@ -40038,7 +40093,7 @@ var cssForPhone = (cssArg) => {
   `);
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.scroller.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.scroller.js
 var Scroller = class {
   constructor(domtoolsInstanceArg) {
     this.scrollCallbacks = [];
@@ -40172,7 +40227,7 @@ var Scroller = class {
   }
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.thememanager.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.thememanager.js
 var ThemeManager = class {
   constructor(domtoolsRefArg) {
     this.goBrightBoolean = false;
@@ -40221,7 +40276,7 @@ var ThemeManager = class {
   }
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.keyboard.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.keyboard.js
 var Key;
 (function(Key2) {
   Key2[Key2["Backspace"] = 8] = "Backspace";
@@ -40407,35 +40462,49 @@ var Keyboard = class {
   }
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.domtools.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.classes.domtools.js
 var DomTools = class _DomTools {
-  // ======
-  // STATIC
-  // ======
+  static {
+    this.initializationPromise = null;
+  }
   /**
    * setups domtools
    */
   static async setupDomTools(optionsArg = {}) {
-    let domToolsInstance;
-    if (!globalThis.deesDomTools && !optionsArg.ignoreGlobal) {
-      globalThis.deesDomTools = new _DomTools(optionsArg);
-      domToolsInstance = globalThis.deesDomTools;
-      const readyStateChangedFunc = () => {
-        if (document.readyState === "interactive" || document.readyState === "complete") {
-          domToolsInstance.elements.headElement = document.querySelector("head");
-          domToolsInstance.elements.bodyElement = document.querySelector("body");
-          domToolsInstance.domReady.resolve();
+    if (!optionsArg.ignoreGlobal && _DomTools.initializationPromise) {
+      return await _DomTools.initializationPromise;
+    }
+    if (!optionsArg.ignoreGlobal) {
+      _DomTools.initializationPromise = (async () => {
+        let domToolsInstance;
+        if (!globalThis.deesDomTools) {
+          globalThis.deesDomTools = new _DomTools(optionsArg);
+          domToolsInstance = globalThis.deesDomTools;
+          const readyStateChangedFunc = () => {
+            if (document.readyState === "interactive" || document.readyState === "complete") {
+              domToolsInstance.elements.headElement = document.querySelector("head");
+              domToolsInstance.elements.bodyElement = document.querySelector("body");
+              domToolsInstance.keyboard = new Keyboard(document.body);
+              domToolsInstance.domReady.resolve();
+            }
+          };
+          if (document.readyState === "interactive" || document.readyState === "complete") {
+            readyStateChangedFunc();
+          } else {
+            document.addEventListener("readystatechange", readyStateChangedFunc);
+          }
+          domToolsInstance.domToolsReady.resolve();
+        } else {
+          domToolsInstance = globalThis.deesDomTools;
         }
-      };
-      document.addEventListener("readystatechange", readyStateChangedFunc);
-      domToolsInstance.domToolsReady.resolve();
-    } else if (optionsArg.ignoreGlobal) {
-      domToolsInstance = new _DomTools(optionsArg);
+        await domToolsInstance.domToolsReady.promise;
+        return domToolsInstance;
+      })();
+      return await _DomTools.initializationPromise;
     } else {
-      domToolsInstance = globalThis.deesDomTools;
+      const domToolsInstance = new _DomTools(optionsArg);
+      return domToolsInstance;
     }
-    await domToolsInstance.domToolsReady.promise;
-    return domToolsInstance;
   }
   /**
    * if you can, use the static asysnc .setupDomTools() function instead since it is safer to use.
@@ -40474,12 +40543,13 @@ var DomTools = class _DomTools {
     this.deesComms = new dist_ts_exports16.DeesComms();
     this.scroller = new Scroller(this);
     this.themeManager = new ThemeManager(this);
-    this.keyboard = new Keyboard(document.body);
+    this.keyboard = null;
     this.domToolsReady = dist_ts_exports.defer();
     this.domReady = dist_ts_exports.defer();
     this.globalStylesReady = dist_ts_exports.defer();
     this.runOnceTrackerStringMap = new lik.Stringmap();
     this.runOnceResultMap = new lik.FastMap();
+    this.runOnceErrorMap = new lik.FastMap();
   }
   /**
    * run a function once and always get the Promise of the first execution
@@ -40491,13 +40561,22 @@ var DomTools = class _DomTools {
     if (!this.runOnceTrackerStringMap.checkString(identifierArg)) {
       this.runOnceTrackerStringMap.addString(identifierArg);
       this.runOnceTrackerStringMap.addString(runningId);
-      const result = await funcArg();
-      this.runOnceResultMap.addToMap(identifierArg, result);
-      this.runOnceTrackerStringMap.removeString(runningId);
+      try {
+        const result = await funcArg();
+        this.runOnceResultMap.addToMap(identifierArg, result);
+      } catch (error) {
+        this.runOnceErrorMap.addToMap(identifierArg, error);
+      } finally {
+        this.runOnceTrackerStringMap.removeString(runningId);
+      }
     }
     return await this.runOnceTrackerStringMap.registerUntilTrue((stringMap) => {
       return !stringMap.includes(runningId);
     }, () => {
+      const error = this.runOnceErrorMap.getByKey(identifierArg);
+      if (error) {
+        throw error;
+      }
       return this.runOnceResultMap.getByKey(identifierArg);
     });
   }
@@ -40550,7 +40629,7 @@ var DomTools = class _DomTools {
   }
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.css.basestyles.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.css.basestyles.js
 var scrollBarStyles = (() => {
   const returnStylesOld = navigator.userAgent.indexOf("Mac OS X") === -1 ? i``.cssText : ``;
   const returnStyles = i`
@@ -40585,7 +40664,7 @@ var globalBaseStyles = i`
   ${r(scrollBarStyles)}
 `.cssText;
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.elementbasic.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.elementbasic.js
 var staticStyles = i`
   * {
     transition: background 0.1s, color 0.1s;
@@ -40623,7 +40702,7 @@ var setup = async (elementArg, optionsArg = {}) => {
   return domTools;
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.css.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.css.js
 var domtools_css_exports = {};
 __export(domtools_css_exports, {
   cssGridColumns: () => cssGridColumns
@@ -40636,7 +40715,7 @@ var cssGridColumns = (amountOfColumnsArg, gapSizeArg) => {
   return returnString;
 };
 
-// node_modules/.pnpm/@design.estate+dees-domtools@2.3.3/node_modules/@design.estate/dees-domtools/dist_ts/domtools.pluginexports.js
+// node_modules/.pnpm/@design.estate+dees-domtools@2.3.6/node_modules/@design.estate/dees-domtools/dist_ts/domtools.pluginexports.js
 var domtools_pluginexports_exports = {};
 __export(domtools_pluginexports_exports, {
   SweetScroll: () => import_sweet_scroll2.default,
@@ -40652,7 +40731,7 @@ __export(domtools_pluginexports_exports, {
 });
 var import_sweet_scroll2 = __toESM(require_sweet_scroll(), 1);
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/plugins.js
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/plugins.js
 var isounique3 = __toESM(require_dist_ts(), 1);
 var lit = {
   css: i,
@@ -40661,8 +40740,20 @@ var lit = {
   property: n5
 };
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/classes.cssmanager.js
-var CssManager = class {
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/classes.cssmanager.js
+var CssManager = class _CssManager {
+  static {
+    this.instance = null;
+  }
+  /**
+   * Returns the singleton instance of CssManager
+   */
+  static getSingleton() {
+    if (!_CssManager.instance) {
+      _CssManager.instance = new _CssManager();
+    }
+    return _CssManager.instance;
+  }
   constructor() {
     this.domtoolsPromise = DomTools.setupDomTools();
     this.goBright = false;
@@ -40731,7 +40822,7 @@ var CssManager = class {
 };
 
 // node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js
-var a3 = Symbol.for(""), o7 = (t8) => {
+var a3 = /* @__PURE__ */ Symbol.for(""), o7 = (t8) => {
   if (t8?.r === a3) return t8?._$litStatic$;
 }, s4 = (t8) => ({ _$litStatic$: t8, r: a3 }), i5 = (t8, ...r10) => ({ _$litStatic$: r10.reduce(((r11, e10, a4) => r11 + ((t9) => {
   if (void 0 !== t9._$litStatic$) return t9._$litStatic$;
@@ -40818,8 +40909,8 @@ function e7(e10, r10) {
   return (n12, s8, i9) => {
     const o12 = (t8) => t8.renderRoot?.querySelector(e10) ?? null;
     if (r10) {
-      const { get: e11, set: r11 } = "object" == typeof s8 ? n12 : i9 ?? (() => {
-        const t8 = Symbol();
+      const { get: e11, set: r11 } = "object" == typeof s8 ? n12 : i9 ?? /* @__PURE__ */ (() => {
+        const t8 = /* @__PURE__ */ Symbol();
         return { get() {
           return this[t8];
         }, set(e12) {
@@ -40874,7 +40965,7 @@ function n8(n12) {
   };
 }
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/classes.dees-element.js
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/classes.dees-element.js
 var __decorate2 = function(decorators, target, key2, desc) {
   var c9 = arguments.length, r10 = c9 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key2) : desc, d5;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r10 = Reflect.decorate(decorators, target, key2, desc);
@@ -40944,7 +41035,7 @@ __decorate2([
   __metadata2("design:type", dist_ts_exports25.DomTools)
 ], DeesElement.prototype, "domtools", void 0);
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/directives/index.js
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/directives/index.js
 var directives_exports = {};
 __export(directives_exports, {
   asyncAppend: () => c8,
@@ -41037,7 +41128,7 @@ var f5 = class extends i6 {
   }
 };
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/directives/classes.resolvedirective.js
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/directives/classes.resolvedirective.js
 var ResolveDirective = class extends f5 {
   constructor() {
     super(...arguments);
@@ -41080,7 +41171,7 @@ var resolveExec = (funcArg) => {
   return resolve(funcArg());
 };
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/directives/classes.subscribedirective.js
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/directives/classes.subscribedirective.js
 var SubscribeDirective = class extends f5 {
   constructor() {
     super(...arguments);
@@ -41110,7 +41201,7 @@ var SubscribeDirective = class extends f5 {
 };
 var subscribe = e4(SubscribeDirective);
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/directives/classes.subscribewithtemplate.js
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/directives/classes.subscribewithtemplate.js
 var SubscribeWithTemplateDirective = class extends f5 {
   constructor() {
     super(...arguments);
@@ -41264,20 +41355,38 @@ var c8 = e4(class extends o11 {
   }
 });
 
-// node_modules/.pnpm/@design.estate+dees-element@2.1.2/node_modules/@design.estate/dees-element/dist_ts/index.js
-var cssManager = new CssManager();
+// node_modules/.pnpm/@design.estate+dees-element@2.1.3/node_modules/@design.estate/dees-element/dist_ts/index.js
+var cssManager = CssManager.getSingleton();
 
 // ts_web/elements/wcctools.helpers.ts
 var resolveTemplateFactory = async (factoryArg) => {
   return await Promise.resolve(factoryArg());
 };
+var getDemoCount = (demo) => {
+  if (Array.isArray(demo)) {
+    return demo.length;
+  }
+  return 1;
+};
+var getDemoAtIndex = (demo, index2) => {
+  if (Array.isArray(demo)) {
+    return demo[index2] ?? null;
+  }
+  return index2 === 0 ? demo : null;
+};
+var hasMultipleDemos = (demo) => {
+  return Array.isArray(demo) && demo.length > 1;
+};
 
 // ts_web/elements/wcc-frame.ts
-var WccFrame = class extends DeesElement {
+var _isFullscreen_dec, _advancedEditorOpen_dec, _viewport_dec, _a, _WccFrame_decorators, _init, _viewport, _advancedEditorOpen, _isFullscreen;
+_WccFrame_decorators = [t4("wcc-frame")];
+var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advancedEditorOpen_dec = [n5({ type: Boolean })], _isFullscreen_dec = [n5({ type: Boolean })], _a) {
   constructor() {
     super(...arguments);
-    this.advancedEditorOpen = false;
-    this.isFullscreen = false;
+    __privateAdd(this, _viewport, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _advancedEditorOpen, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _isFullscreen, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
   }
   render() {
     return x`
@@ -41355,7 +41464,15 @@ var WccFrame = class extends DeesElement {
     return this.shadowRoot.querySelector(".viewport");
   }
 };
-WccFrame.styles = [
+_init = __decoratorStart(_a);
+_viewport = new WeakMap();
+_advancedEditorOpen = new WeakMap();
+_isFullscreen = new WeakMap();
+__decorateElement(_init, 4, "viewport", _viewport_dec, WccFrame, _viewport);
+__decorateElement(_init, 4, "advancedEditorOpen", _advancedEditorOpen_dec, WccFrame, _advancedEditorOpen);
+__decorateElement(_init, 4, "isFullscreen", _isFullscreen_dec, WccFrame, _isFullscreen);
+WccFrame = __decorateElement(_init, 0, "WccFrame", _WccFrame_decorators, WccFrame);
+__publicField(WccFrame, "styles", [
   i`
       :host {
         border: 10px solid #ffaeaf;
@@ -41376,25 +41493,20 @@ WccFrame.styles = [
         min-height: 100%;
       }
     `
-];
-__decorateClass([
-  n5()
-], WccFrame.prototype, "viewport", 2);
-__decorateClass([
-  n5({ type: Boolean })
-], WccFrame.prototype, "advancedEditorOpen", 2);
-__decorateClass([
-  n5({ type: Boolean })
-], WccFrame.prototype, "isFullscreen", 2);
-WccFrame = __decorateClass([
-  t4("wcc-frame")
-], WccFrame);
+]);
+__runInitializers(_init, 1, WccFrame);
 
 // ts_web/elements/wcc-sidebar.ts
-var WccSidebar = class extends DeesElement {
+var _expandedElements_dec, _isFullscreen_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isFullscreen2, _expandedElements;
+_WccSidebar_decorators = [t4("wcc-sidebar")];
+var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isFullscreen_dec2 = [n5()], _expandedElements_dec = [r5()], _a2) {
   constructor() {
     super(...arguments);
-    this.isFullscreen = false;
+    __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, _isFullscreen2, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
+    __privateAdd(this, _expandedElements, __runInitializers(_init2, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 27, this);
   }
   render() {
     return x`
@@ -41487,7 +41599,21 @@ var WccSidebar = class extends DeesElement {
           color: #999;
           background: transparent;
         }
-        
+
+        .selectOption.folder {
+          grid-template-columns: 16px 20px 1fr;
+        }
+
+        .selectOption .expand-icon {
+          font-size: 14px;
+          opacity: 0.5;
+          transition: transform 0.2s ease;
+        }
+
+        .selectOption.expanded .expand-icon {
+          transform: rotate(90deg);
+        }
+
         .selectOption:hover {
           background: rgba(59, 130, 246, 0.05);
           color: #bbb;
@@ -41520,6 +41646,42 @@ var WccSidebar = class extends DeesElement {
           font-weight: 400;
         }
 
+        .demo-children {
+          margin-left: 1rem;
+          overflow: hidden;
+        }
+
+        .demo-child {
+          user-select: none;
+          position: relative;
+          margin: 0.125rem 0.5rem;
+          padding: 0.35rem 0.75rem;
+          transition: all 0.15s ease;
+          display: grid;
+          grid-template-columns: 16px 1fr;
+          align-items: center;
+          gap: 0.5rem;
+          border-radius: var(--radius);
+          cursor: pointer;
+          font-size: 0.7rem;
+          color: #777;
+          background: transparent;
+        }
+
+        .demo-child:hover {
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
+        }
+
+        .demo-child.selected {
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
+        }
+
+        .demo-child .material-symbols-outlined {
+          font-size: 14px;
+        }
+
         ::-webkit-scrollbar {
           width: 8px;
         }
@@ -41548,7 +41710,7 @@ var WccSidebar = class extends DeesElement {
                 class="selectOption ${this.selectedItem === item ? "selected" : null}"
                 @click=${async () => {
           const domtools2 = await dist_ts_exports25.DomTools.setupDomTools();
-          this.selectItem("page", pageName, item);
+          this.selectItem("page", pageName, item, 0);
         }}
               >
                 <i class="material-symbols-outlined">insert_drive_file</i>
@@ -41562,29 +41724,77 @@ var WccSidebar = class extends DeesElement {
       const elements = Object.keys(this.dashboardRef.elements);
       return elements.map((elementName) => {
         const item = this.dashboardRef.elements[elementName];
-        return x`
-              <div
-                class="selectOption ${this.selectedItem === item ? "selected" : null}"
-                @click=${async () => {
-          const domtools2 = await dist_ts_exports25.DomTools.setupDomTools();
-          this.selectItem("element", elementName, item);
-        }}
-              >
-                <i class="material-symbols-outlined">featured_video</i>
-                <div class="text">${elementName}</div>
-              </div>
-            `;
+        const demoCount = item.demo ? getDemoCount(item.demo) : 0;
+        const isMultiDemo = item.demo && hasMultipleDemos(item.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);
+            }}
+                        >
+                          <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" : null}"
+                  @click=${async () => {
+            await dist_ts_exports25.DomTools.setupDomTools();
+            this.selectItem("element", elementName, item, 0);
+          }}
+                >
+                  <i class="material-symbols-outlined">featured_video</i>
+                  <div class="text">${elementName}</div>
+                </div>
+              `;
+        }
       });
     })()}
       </div>
     `;
   }
-  selectItem(typeArg, itemNameArg, itemArg) {
+  toggleExpanded(elementName) {
+    const newSet = new Set(this.expandedElements);
+    if (newSet.has(elementName)) {
+      newSet.delete(elementName);
+    } else {
+      newSet.add(elementName);
+    }
+    this.expandedElements = newSet;
+  }
+  selectItem(typeArg, itemNameArg, itemArg, demoIndex = 0) {
     console.log("selected item");
     console.log(itemNameArg);
     console.log(itemArg);
+    console.log("demo index:", demoIndex);
     this.selectedItem = itemArg;
     this.selectedType = typeArg;
+    this.dashboardRef.selectedDemoIndex = demoIndex;
     this.dispatchEvent(
       new CustomEvent("selectedType", {
         detail: typeArg
@@ -41601,39 +41811,1351 @@ var WccSidebar = class extends DeesElement {
       })
     );
     this.dashboardRef.buildUrl();
+    this.requestUpdate();
+  }
+};
+_init2 = __decoratorStart(_a2);
+_selectedItem = new WeakMap();
+_selectedType = new WeakMap();
+_dashboardRef = new WeakMap();
+_isFullscreen2 = new WeakMap();
+_expandedElements = 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, "isFullscreen", _isFullscreen_dec2, WccSidebar, _isFullscreen2);
+__decorateElement(_init2, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
+WccSidebar = __decorateElement(_init2, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
+__runInitializers(_init2, 1, WccSidebar);
+
+// ts_web/elements/wcc-record-button.ts
+var _duration_dec, _state_dec, _a3, _WccRecordButton_decorators, _init3, _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) {
+  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);
+    __publicField(this, "handleClick", () => {
+      this.dispatchEvent(new CustomEvent("record-click", {
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+  formatDuration(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  render() {
+    return x`
+      <div class="content">
+        <div class="rec-icon"></div>
+        ${this.state === "recording" ? x`
+          <span class="recording-timer">${this.formatDuration(this.duration)}</span>
+        ` : null}
+      </div>
+    `;
+  }
+  async connectedCallback() {
+    await super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("state")) {
+      if (this.state === "recording") {
+        this.classList.add("recording");
+      } else {
+        this.classList.remove("recording");
+      }
+    }
+  }
+};
+_init3 = __decoratorStart(_a3);
+_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);
+__publicField(WccRecordButton, "styles", [
+  i`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: #666;
+        user-select: none;
+      }
+
+      :host(:hover) {
+        background: rgba(239, 68, 68, 0.05);
+        color: #f87171;
+      }
+
+      :host(.recording) {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+      }
+
+      .rec-icon {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      :host(.recording) .rec-icon {
+        animation: pulse-recording 1s ease-in-out infinite;
+      }
+
+      @keyframes pulse-recording {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.5; transform: scale(0.9); }
+      }
+
+      .recording-timer {
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 0.7rem;
+      }
+    `
+]);
+__runInitializers(_init3, 1, WccRecordButton);
+
+// ts_web/services/recorder.service.ts
+var RecorderService = class {
+  // Recording state
+  mediaRecorder = null;
+  recordedChunks = [];
+  durationInterval = null;
+  _duration = 0;
+  _recordedBlob = null;
+  _isRecording = false;
+  // Audio monitoring state
+  audioContext = null;
+  audioAnalyser = null;
+  audioMonitoringInterval = null;
+  monitoringStream = null;
+  // Current recording stream
+  currentStream = null;
+  // Event callbacks
+  events = {};
+  constructor(events) {
+    if (events) {
+      this.events = events;
+    }
+  }
+  // Public getters
+  get isRecording() {
+    return this._isRecording;
+  }
+  get duration() {
+    return this._duration;
+  }
+  get recordedBlob() {
+    return this._recordedBlob;
+  }
+  // Update event callbacks
+  setEvents(events) {
+    this.events = { ...this.events, ...events };
+  }
+  // ==================== Microphone Management ====================
+  async loadMicrophones(requestPermission = false) {
+    try {
+      if (requestPermission) {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        stream.getTracks().forEach((track2) => track2.stop());
+      }
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      return devices.filter((d5) => d5.kind === "audioinput");
+    } catch (error) {
+      console.error("Error loading microphones:", error);
+      return [];
+    }
+  }
+  async startAudioMonitoring(deviceId) {
+    this.stopAudioMonitoring();
+    if (!deviceId) return;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { deviceId: { exact: deviceId } }
+      });
+      this.monitoringStream = stream;
+      this.audioContext = new AudioContext();
+      const source = this.audioContext.createMediaStreamSource(stream);
+      this.audioAnalyser = this.audioContext.createAnalyser();
+      this.audioAnalyser.fftSize = 256;
+      source.connect(this.audioAnalyser);
+      const dataArray = new Uint8Array(this.audioAnalyser.frequencyBinCount);
+      this.audioMonitoringInterval = window.setInterval(() => {
+        if (this.audioAnalyser) {
+          this.audioAnalyser.getByteFrequencyData(dataArray);
+          const average = dataArray.reduce((a4, b4) => a4 + b4) / dataArray.length;
+          const level = Math.min(100, average / 128 * 100);
+          this.events.onAudioLevelUpdate?.(level);
+        }
+      }, 50);
+    } catch (error) {
+      console.error("Error starting audio monitoring:", error);
+      this.events.onAudioLevelUpdate?.(0);
+    }
+  }
+  stopAudioMonitoring() {
+    if (this.audioMonitoringInterval) {
+      clearInterval(this.audioMonitoringInterval);
+      this.audioMonitoringInterval = null;
+    }
+    if (this.audioContext) {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+    if (this.monitoringStream) {
+      this.monitoringStream.getTracks().forEach((track2) => track2.stop());
+      this.monitoringStream = null;
+    }
+    this.audioAnalyser = null;
+  }
+  // ==================== Recording Control ====================
+  async startRecording(options) {
+    try {
+      this.stopAudioMonitoring();
+      const displayMediaOptions = {
+        video: {
+          displaySurface: options.mode === "viewport" ? "browser" : "monitor"
+        },
+        audio: false
+      };
+      if (options.mode === "viewport") {
+        displayMediaOptions.preferCurrentTab = true;
+      }
+      const videoStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+      if (options.mode === "viewport" && options.viewportElement) {
+        try {
+          if ("CropTarget" in window) {
+            const cropTarget = await window.CropTarget.fromElement(options.viewportElement);
+            const [videoTrack] = videoStream.getVideoTracks();
+            await videoTrack.cropTo(cropTarget);
+          }
+        } catch (e10) {
+          console.warn("Element Capture not supported, recording full tab:", e10);
+        }
+      }
+      let combinedStream = videoStream;
+      if (options.audioDeviceId) {
+        try {
+          const audioStream = await navigator.mediaDevices.getUserMedia({
+            audio: { deviceId: { exact: options.audioDeviceId } }
+          });
+          combinedStream = new MediaStream([
+            ...videoStream.getVideoTracks(),
+            ...audioStream.getAudioTracks()
+          ]);
+        } catch (audioError) {
+          console.warn("Could not add audio:", audioError);
+        }
+      }
+      this.currentStream = combinedStream;
+      const mimeType = MediaRecorder.isTypeSupported("video/webm;codecs=vp9") ? "video/webm;codecs=vp9" : "video/webm";
+      this.mediaRecorder = new MediaRecorder(combinedStream, { mimeType });
+      this.recordedChunks = [];
+      this.mediaRecorder.ondataavailable = (e10) => {
+        if (e10.data.size > 0) {
+          this.recordedChunks.push(e10.data);
+        }
+      };
+      this.mediaRecorder.onstop = () => this.handleRecordingComplete();
+      videoStream.getVideoTracks()[0].onended = () => {
+        if (this._isRecording) {
+          this.stopRecording();
+          this.events.onStreamEnded?.();
+        }
+      };
+      this.mediaRecorder.start(1e3);
+      this._duration = 0;
+      this.durationInterval = window.setInterval(() => {
+        this._duration++;
+        this.events.onDurationUpdate?.(this._duration);
+      }, 1e3);
+      this._isRecording = true;
+    } catch (error) {
+      console.error("Error starting recording:", error);
+      this._isRecording = false;
+      this.events.onError?.(error);
+      throw error;
+    }
+  }
+  stopRecording() {
+    if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+      this.mediaRecorder.stop();
+    }
+    if (this.durationInterval) {
+      clearInterval(this.durationInterval);
+      this.durationInterval = null;
+    }
+  }
+  async handleRecordingComplete() {
+    const blob = new Blob(this.recordedChunks, { type: "video/webm" });
+    this._recordedBlob = blob;
+    if (this.currentStream) {
+      this.currentStream.getTracks().forEach((track2) => track2.stop());
+      this.currentStream = null;
+    }
+    this._isRecording = false;
+    this.events.onRecordingComplete?.(this._recordedBlob);
+  }
+  // ==================== Trim & Export ====================
+  async exportTrimmedVideo(videoElement, trimStart, trimEnd) {
+    return new Promise((resolve2, reject) => {
+      const canvas = document.createElement("canvas");
+      canvas.width = videoElement.videoWidth || 1280;
+      canvas.height = videoElement.videoHeight || 720;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Could not get canvas context"));
+        return;
+      }
+      const canvasStream = canvas.captureStream(30);
+      let combinedStream;
+      try {
+        const audioCtx = new AudioContext();
+        const source = audioCtx.createMediaElementSource(videoElement);
+        const destination = audioCtx.createMediaStreamDestination();
+        source.connect(destination);
+        source.connect(audioCtx.destination);
+        combinedStream = new MediaStream([
+          ...canvasStream.getVideoTracks(),
+          ...destination.stream.getAudioTracks()
+        ]);
+        const cleanup = () => {
+          audioCtx.close();
+        };
+        this.recordTrimmedStream(videoElement, canvas, ctx, combinedStream, trimStart, trimEnd, cleanup, resolve2, reject);
+      } catch (audioError) {
+        console.warn("Could not capture audio, recording video only:", audioError);
+        combinedStream = canvasStream;
+        this.recordTrimmedStream(videoElement, canvas, ctx, combinedStream, trimStart, trimEnd, () => {
+        }, resolve2, reject);
+      }
+    });
+  }
+  recordTrimmedStream(video, canvas, ctx, stream, trimStart, trimEnd, cleanup, resolve2, reject) {
+    const mimeType = MediaRecorder.isTypeSupported("video/webm;codecs=vp9") ? "video/webm;codecs=vp9" : "video/webm";
+    const recorder = new MediaRecorder(stream, { mimeType });
+    const chunks = [];
+    recorder.ondataavailable = (e10) => {
+      if (e10.data.size > 0) {
+        chunks.push(e10.data);
+      }
+    };
+    recorder.onstop = () => {
+      cleanup();
+      resolve2(new Blob(chunks, { type: "video/webm" }));
+    };
+    recorder.onerror = (e10) => {
+      cleanup();
+      reject(new Error("Recording error: " + e10));
+    };
+    video.currentTime = trimStart;
+    video.onseeked = () => {
+      recorder.start(100);
+      video.play();
+      const drawFrame = () => {
+        if (video.currentTime >= trimEnd || video.paused || video.ended) {
+          video.pause();
+          video.onseeked = null;
+          setTimeout(() => {
+            if (recorder.state === "recording") {
+              recorder.stop();
+            }
+          }, 100);
+          return;
+        }
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        requestAnimationFrame(drawFrame);
+      };
+      drawFrame();
+    };
+  }
+  // ==================== Cleanup ====================
+  reset() {
+    this._recordedBlob = null;
+    this.recordedChunks = [];
+    this._duration = 0;
+    this._isRecording = false;
+  }
+  dispose() {
+    this.stopRecording();
+    this.stopAudioMonitoring();
+    this.reset();
+    if (this.currentStream) {
+      this.currentStream.getTracks().forEach((track2) => track2.stop());
+      this.currentStream = null;
+    }
   }
 };
-__decorateClass([
-  n5({ attribute: false })
-], WccSidebar.prototype, "selectedItem", 2);
-__decorateClass([
-  n5({ attribute: false })
-], WccSidebar.prototype, "selectedType", 2);
-__decorateClass([
-  n5()
-], WccSidebar.prototype, "dashboardRef", 2);
-__decorateClass([
-  n5()
-], WccSidebar.prototype, "isFullscreen", 2);
-WccSidebar = __decorateClass([
-  t4("wcc-sidebar")
-], WccSidebar);
+
+// 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;
+_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) {
+  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);
+    // Service instance
+    __publicField(this, "recorderService");
+    this.recorderService = new RecorderService({
+      onDurationUpdate: (duration) => {
+        this.recordingDuration = duration;
+        this.dispatchEvent(new CustomEvent("duration-update", {
+          detail: { duration },
+          bubbles: true,
+          composed: true
+        }));
+      },
+      onRecordingComplete: (blob) => {
+        this.handleRecordingComplete(blob);
+      },
+      onAudioLevelUpdate: (level) => {
+        this.audioLevel = level;
+      },
+      onStreamEnded: () => {
+        this.stopRecording();
+      }
+    });
+  }
+  render() {
+    if (this.panelState === "options") {
+      return this.renderOptionsPanel();
+    } else if (this.panelState === "preview") {
+      return this.renderPreviewModal();
+    }
+    return x``;
+  }
+  renderOptionsPanel() {
+    return x`
+      <div class="recording-options-panel">
+        <div class="recording-options-header">
+          <span class="recording-options-title">Recording Settings</span>
+          <button class="recording-options-close" @click=${() => this.close()}>✕</button>
+        </div>
+        <div class="recording-options-content">
+          <div class="recording-option-group">
+            <div class="recording-option-label">Record Area</div>
+            <div class="recording-mode-buttons">
+              <button
+                class="recording-mode-btn ${this.recordingMode === "viewport" ? "selected" : ""}"
+                @click=${() => this.recordingMode = "viewport"}
+              >
+                Viewport Only
+              </button>
+              <button
+                class="recording-mode-btn ${this.recordingMode === "screen" ? "selected" : ""}"
+                @click=${() => this.recordingMode = "screen"}
+              >
+                Entire Screen
+              </button>
+            </div>
+          </div>
+
+          <div class="recording-option-group">
+            <div class="recording-option-label">Audio</div>
+            <div class="audio-toggle">
+              <input
+                type="checkbox"
+                id="audioToggle"
+                ?checked=${this.audioEnabled}
+                @change=${(e10) => this.handleAudioToggle(e10.target.checked)}
+              />
+              <label for="audioToggle">Enable Microphone</label>
+            </div>
+
+            ${this.audioEnabled ? x`
+              <select
+                class="microphone-select"
+                .value=${this.selectedMicrophoneId}
+                @change=${(e10) => this.handleMicrophoneChange(e10.target.value)}
+              >
+                <option value="">Select Microphone...</option>
+                ${this.availableMicrophones.map((mic) => x`
+                  <option value=${mic.deviceId}>${mic.label || `Microphone ${mic.deviceId.slice(0, 8)}`}</option>
+                `)}
+              </select>
+
+              ${this.selectedMicrophoneId ? x`
+                <div class="audio-level-container">
+                  <div class="audio-level-label">Input Level</div>
+                  <div class="audio-level-bar">
+                    <div class="audio-level-fill" style="width: ${this.audioLevel}%"></div>
+                  </div>
+                </div>
+              ` : null}
+            ` : null}
+          </div>
+
+          <button class="start-recording-btn" @click=${() => this.startRecording()}>
+            <div class="rec-dot"></div>
+            Start Recording
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  renderPreviewModal() {
+    return x`
+      <div class="preview-modal-overlay" @click=${(e10) => {
+      if (e10.target.classList.contains("preview-modal-overlay")) {
+        this.discardRecording();
+      }
+    }}>
+        <div class="preview-modal">
+          <div class="preview-modal-header">
+            <span class="preview-modal-title">Recording Preview</span>
+            <button class="preview-modal-close" @click=${() => this.discardRecording()}>✕</button>
+          </div>
+          <div class="preview-modal-content">
+            <div class="preview-video-container">
+              <video
+                class="preview-video"
+                src=${this.previewVideoUrl}
+                controls
+                @loadedmetadata=${(e10) => this.handleVideoLoaded(e10.target)}
+              ></video>
+            </div>
+
+            <!-- Trim Section -->
+            <div class="trim-section">
+              <div class="trim-section-header">
+                <span class="trim-section-title">Trim Video</span>
+                <span class="trim-duration-info">
+                  ${this.formatDuration(Math.floor(this.trimEnd - this.trimStart))}
+                  ${this.trimStart > 0 || this.trimEnd < this.videoDuration ? `(trimmed from ${this.formatDuration(Math.floor(this.videoDuration))})` : ""}
+                </span>
+              </div>
+
+              <div
+                class="trim-timeline"
+                @mousedown=${(e10) => this.handleTimelineClick(e10)}
+                @mousemove=${(e10) => this.handleTimelineDrag(e10)}
+                @mouseup=${() => this.handleTimelineDragEnd()}
+                @mouseleave=${() => this.handleTimelineDragEnd()}
+              >
+                <div class="trim-track"></div>
+                <div
+                  class="trim-selected"
+                  style="left: ${this.getHandlePositionStyle(this.trimStart)}; right: ${this.getHandlePositionFromEndStyle(this.trimEnd)};"
+                ></div>
+                <div
+                  class="trim-handle start-handle"
+                  style="left: ${this.getHandlePositionStyle(this.trimStart)};"
+                  @mousedown=${(e10) => {
+      e10.stopPropagation();
+      this.isDraggingTrim = "start";
+    }}
+                ></div>
+                <div
+                  class="trim-handle end-handle"
+                  style="left: ${this.getHandlePositionStyle(this.trimEnd)};"
+                  @mousedown=${(e10) => {
+      e10.stopPropagation();
+      this.isDraggingTrim = "end";
+    }}
+                ></div>
+              </div>
+
+              <div class="trim-time-labels">
+                <span>${this.formatDuration(Math.floor(this.trimStart))}</span>
+                <span>${this.formatDuration(Math.floor(this.trimEnd))}</span>
+              </div>
+
+              <div class="trim-actions">
+                <button class="trim-action-btn" @click=${() => this.resetTrim()}>
+                  Reset Trim
+                </button>
+                <button class="trim-action-btn" @click=${() => this.previewTrimmedSection()}>
+                  Preview Selection
+                </button>
+              </div>
+            </div>
+
+          </div>
+          <div class="preview-modal-actions">
+            <button class="preview-btn secondary" @click=${() => this.discardRecording()}>Discard</button>
+            <button
+              class="preview-btn primary"
+              ?disabled=${this.isExporting}
+              @click=${() => this.downloadRecording()}
+            >
+              ${this.isExporting ? x`<span class="export-spinner"></span>Exporting...` : "Download WebM"}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  // ==================== Audio Methods ====================
+  async handleAudioToggle(enabled) {
+    this.audioEnabled = enabled;
+    if (enabled) {
+      this.availableMicrophones = await this.recorderService.loadMicrophones(true);
+      if (this.availableMicrophones.length > 0 && !this.selectedMicrophoneId) {
+        this.selectedMicrophoneId = this.availableMicrophones[0].deviceId;
+        await this.recorderService.startAudioMonitoring(this.selectedMicrophoneId);
+      }
+    } else {
+      this.recorderService.stopAudioMonitoring();
+      this.selectedMicrophoneId = "";
+      this.audioLevel = 0;
+    }
+  }
+  async handleMicrophoneChange(deviceId) {
+    this.selectedMicrophoneId = deviceId;
+    if (deviceId) {
+      await this.recorderService.startAudioMonitoring(deviceId);
+    } else {
+      this.recorderService.stopAudioMonitoring();
+      this.audioLevel = 0;
+    }
+  }
+  // ==================== Recording Methods ====================
+  async startRecording() {
+    try {
+      let viewportElement;
+      if (this.recordingMode === "viewport" && this.dashboardRef) {
+        const wccFrame = await this.dashboardRef.wccFrame;
+        viewportElement = await wccFrame.getViewportElement();
+      }
+      await this.recorderService.startRecording({
+        mode: this.recordingMode,
+        audioDeviceId: this.audioEnabled ? this.selectedMicrophoneId : void 0,
+        viewportElement
+      });
+      this.panelState = "recording";
+      this.dispatchEvent(new CustomEvent("recording-start", {
+        bubbles: true,
+        composed: true
+      }));
+    } catch (error) {
+      console.error("Failed to start recording:", error);
+      this.panelState = "options";
+    }
+  }
+  stopRecording() {
+    this.recorderService.stopRecording();
+  }
+  handleRecordingComplete(blob) {
+    if (this.previewVideoUrl) {
+      URL.revokeObjectURL(this.previewVideoUrl);
+    }
+    this.previewVideoUrl = URL.createObjectURL(blob);
+    this.panelState = "preview";
+    this.dispatchEvent(new CustomEvent("recording-stop", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  discardRecording() {
+    if (this.previewVideoUrl) {
+      URL.revokeObjectURL(this.previewVideoUrl);
+      this.previewVideoUrl = "";
+    }
+    this.recorderService.reset();
+    this.trimStart = 0;
+    this.trimEnd = 0;
+    this.videoDuration = 0;
+    this.isExporting = false;
+    this.recordingDuration = 0;
+    this.close();
+  }
+  async downloadRecording() {
+    const recordedBlob = this.recorderService.recordedBlob;
+    if (!recordedBlob) return;
+    this.isExporting = true;
+    try {
+      let blobToDownload;
+      const needsTrim = this.trimStart > 0.1 || this.trimEnd < this.videoDuration - 0.1;
+      if (needsTrim) {
+        const video = this.shadowRoot?.querySelector(".preview-video");
+        if (video) {
+          blobToDownload = await this.recorderService.exportTrimmedVideo(video, this.trimStart, this.trimEnd);
+        } else {
+          blobToDownload = recordedBlob;
+        }
+      } else {
+        blobToDownload = recordedBlob;
+      }
+      const timestamp2 = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+      const filename = `wcctools-recording-${timestamp2}.webm`;
+      const url = URL.createObjectURL(blobToDownload);
+      const a4 = document.createElement("a");
+      a4.href = url;
+      a4.download = filename;
+      document.body.appendChild(a4);
+      a4.click();
+      document.body.removeChild(a4);
+      URL.revokeObjectURL(url);
+      this.discardRecording();
+    } catch (error) {
+      console.error("Error exporting video:", error);
+      this.isExporting = false;
+    }
+  }
+  // ==================== Trim Methods ====================
+  handleVideoLoaded(video) {
+    const duration = Number.isFinite(video.duration) ? video.duration : this.recordingDuration;
+    this.videoDuration = duration;
+    this.trimStart = 0;
+    this.trimEnd = duration;
+  }
+  formatDuration(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  getHandlePositionStyle(time) {
+    if (this.videoDuration === 0) return "12px";
+    const percentage = time / this.videoDuration;
+    return `calc(12px + ${(percentage * 100).toFixed(2)}% - ${(percentage * 24).toFixed(2)}px)`;
+  }
+  getHandlePositionFromEndStyle(time) {
+    if (this.videoDuration === 0) return "12px";
+    const percentage = time / this.videoDuration;
+    const remainingPercentage = 1 - percentage;
+    return `calc(12px + ${(remainingPercentage * 100).toFixed(2)}% - ${(remainingPercentage * 24).toFixed(2)}px)`;
+  }
+  handleTimelineClick(e10) {
+    if (this.isDraggingTrim) return;
+    const timeline = e10.currentTarget;
+    const rect = timeline.getBoundingClientRect();
+    const x2 = e10.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, (x2 - 12) / (rect.width - 24)));
+    const time = percentage * this.videoDuration;
+    const video = this.shadowRoot?.querySelector(".preview-video");
+    if (video) {
+      video.currentTime = time;
+    }
+  }
+  handleTimelineDrag(e10) {
+    if (!this.isDraggingTrim) return;
+    const timeline = e10.currentTarget;
+    const rect = timeline.getBoundingClientRect();
+    const x2 = e10.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, (x2 - 12) / (rect.width - 24)));
+    const time = percentage * this.videoDuration;
+    const minDuration = 1;
+    if (this.isDraggingTrim === "start") {
+      this.trimStart = Math.min(time, this.trimEnd - minDuration);
+      this.trimStart = Math.max(0, this.trimStart);
+    } else if (this.isDraggingTrim === "end") {
+      this.trimEnd = Math.max(time, this.trimStart + minDuration);
+      this.trimEnd = Math.min(this.videoDuration, this.trimEnd);
+    }
+    const video = this.shadowRoot?.querySelector(".preview-video");
+    if (video) {
+      video.currentTime = this.isDraggingTrim === "start" ? this.trimStart : this.trimEnd;
+    }
+  }
+  handleTimelineDragEnd() {
+    this.isDraggingTrim = null;
+  }
+  resetTrim() {
+    this.trimStart = 0;
+    this.trimEnd = this.videoDuration;
+    const video = this.shadowRoot?.querySelector(".preview-video");
+    if (video) {
+      video.currentTime = 0;
+    }
+  }
+  previewTrimmedSection() {
+    const video = this.shadowRoot?.querySelector(".preview-video");
+    if (!video) return;
+    video.currentTime = this.trimStart;
+    video.play();
+    const checkTime = () => {
+      if (video.currentTime >= this.trimEnd) {
+        video.pause();
+        video.removeEventListener("timeupdate", checkTime);
+      }
+    };
+    video.addEventListener("timeupdate", checkTime);
+  }
+  // ==================== Lifecycle ====================
+  close() {
+    this.recorderService.stopAudioMonitoring();
+    this.dispatchEvent(new CustomEvent("close", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.recorderService.dispose();
+    if (this.previewVideoUrl) {
+      URL.revokeObjectURL(this.previewVideoUrl);
+    }
+  }
+};
+_init4 = __decoratorStart(_a4);
+_dashboardRef2 = new WeakMap();
+_panelState = new WeakMap();
+_recordingMode = new WeakMap();
+_audioEnabled = new WeakMap();
+_selectedMicrophoneId = new WeakMap();
+_availableMicrophones = new WeakMap();
+_audioLevel = new WeakMap();
+_recordingDuration = new WeakMap();
+_previewVideoUrl = new WeakMap();
+_trimStart = new WeakMap();
+_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);
+__publicField(WccRecordingPanel, "styles", [
+  i`
+      :host {
+        /* CSS Variables */
+        --background: #0a0a0a;
+        --foreground: #e5e5e5;
+        --input: #141414;
+        --primary: #3b82f6;
+        --border: rgba(255, 255, 255, 0.06);
+        --radius-sm: 2px;
+        --radius-md: 4px;
+        --radius-lg: 6px;
+      }
+
+      /* Recording Options Panel */
+      .recording-options-panel {
+        position: fixed;
+        right: 16px;
+        bottom: 116px;
+        width: 360px;
+        background: #0c0c0c;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: var(--radius-md);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        z-index: 1000;
+        overflow: hidden;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      }
+
+      .recording-options-header {
+        padding: 0.75rem 1rem;
+        background: rgba(255, 255, 255, 0.02);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .recording-options-title {
+        font-size: 0.8rem;
+        font-weight: 500;
+        color: #ccc;
+      }
+
+      .recording-options-close {
+        width: 24px;
+        height: 24px;
+        background: transparent;
+        border: none;
+        color: #666;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        transition: all 0.15s ease;
+      }
+
+      .recording-options-close:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: #999;
+      }
+
+      .recording-options-content {
+        padding: 1rem;
+      }
+
+      .recording-option-group {
+        margin-bottom: 1rem;
+      }
+
+      .recording-option-group:last-child {
+        margin-bottom: 0;
+      }
+
+      .recording-option-label {
+        font-size: 0.7rem;
+        font-weight: 500;
+        color: #888;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: 0.5rem;
+      }
+
+      .recording-mode-buttons {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .recording-mode-btn {
+        flex: 1;
+        padding: 0.6rem 0.75rem;
+        background: var(--input);
+        border: 1px solid transparent;
+        border-radius: var(--radius-sm);
+        color: #999;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        text-align: center;
+      }
+
+      .recording-mode-btn:hover {
+        border-color: var(--primary);
+        color: #ccc;
+      }
+
+      .recording-mode-btn.selected {
+        background: rgba(59, 130, 246, 0.15);
+        border-color: var(--primary);
+        color: var(--primary);
+      }
+
+      .audio-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 0.75rem;
+      }
+
+      .audio-toggle input[type="checkbox"] {
+        width: 1rem;
+        height: 1rem;
+        accent-color: var(--primary);
+      }
+
+      .audio-toggle label {
+        font-size: 0.75rem;
+        color: #999;
+        cursor: pointer;
+      }
+
+      .microphone-select {
+        width: 100%;
+        padding: 0.5rem 0.75rem;
+        background: var(--input);
+        border: 1px solid transparent;
+        border-radius: var(--radius-sm);
+        color: var(--foreground);
+        font-size: 0.75rem;
+        outline: none;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .microphone-select:focus {
+        border-color: var(--primary);
+      }
+
+      .microphone-select:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .audio-level-container {
+        margin-top: 0.75rem;
+        padding: 0.5rem;
+        background: rgba(255, 255, 255, 0.02);
+        border-radius: var(--radius-sm);
+      }
+
+      .audio-level-label {
+        font-size: 0.65rem;
+        color: #666;
+        margin-bottom: 0.25rem;
+      }
+
+      .audio-level-bar {
+        height: 8px;
+        background: var(--input);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .audio-level-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #22c55e, #84cc16, #eab308);
+        border-radius: 4px;
+        transition: width 0.1s ease;
+      }
+
+      .start-recording-btn {
+        width: 100%;
+        padding: 0.75rem;
+        background: #dc2626;
+        border: none;
+        border-radius: var(--radius-sm);
+        color: white;
+        font-size: 0.8rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        margin-top: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+      }
+
+      .start-recording-btn:hover {
+        background: #b91c1c;
+      }
+
+      .start-recording-btn .rec-dot {
+        width: 10px;
+        height: 10px;
+        background: white;
+        border-radius: 50%;
+      }
+
+      /* Preview Modal */
+      .preview-modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        backdrop-filter: blur(4px);
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      }
+
+      .preview-modal {
+        width: 90%;
+        max-width: 800px;
+        background: #0c0c0c;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: var(--radius-lg);
+        overflow: hidden;
+        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+      }
+
+      .preview-modal-header {
+        padding: 1rem 1.25rem;
+        background: rgba(255, 255, 255, 0.02);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .preview-modal-title {
+        font-size: 0.9rem;
+        font-weight: 500;
+        color: #ccc;
+      }
+
+      .preview-modal-close {
+        width: 28px;
+        height: 28px;
+        background: transparent;
+        border: none;
+        color: #666;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        font-size: 1.2rem;
+        transition: all 0.15s ease;
+      }
+
+      .preview-modal-close:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: #999;
+      }
+
+      .preview-modal-content {
+        padding: 1.25rem;
+      }
+
+      .preview-video-container {
+        background: #000;
+        border-radius: var(--radius-sm);
+        overflow: hidden;
+        aspect-ratio: 16 / 9;
+      }
+
+      .preview-video {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .preview-modal-actions {
+        padding: 1rem 1.25rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.75rem;
+      }
+
+      .preview-btn {
+        padding: 0.6rem 1.25rem;
+        border-radius: var(--radius-sm);
+        font-size: 0.8rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .preview-btn.secondary {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #999;
+      }
+
+      .preview-btn.secondary:hover {
+        border-color: rgba(255, 255, 255, 0.2);
+        color: #ccc;
+      }
+
+      .preview-btn.primary {
+        background: var(--primary);
+        border: none;
+        color: white;
+      }
+
+      .preview-btn.primary:hover {
+        background: #2563eb;
+      }
+
+      .preview-btn.primary:disabled {
+        background: #1e3a5f;
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+
+      /* Trim Timeline Styles */
+      .trim-section {
+        margin-top: 1.25rem;
+        padding-top: 1.25rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+      }
+
+      .trim-section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+      }
+
+      .trim-section-title {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: #888;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .trim-duration-info {
+        font-size: 0.7rem;
+        color: #666;
+        font-family: 'Consolas', 'Monaco', monospace;
+      }
+
+      .trim-timeline {
+        position: relative;
+        height: 48px;
+        background: var(--input);
+        border-radius: var(--radius-sm);
+        margin-bottom: 0.75rem;
+        user-select: none;
+      }
+
+      .trim-track {
+        position: absolute;
+        top: 50%;
+        left: 12px;
+        right: 12px;
+        height: 6px;
+        background: #333;
+        transform: translateY(-50%);
+        border-radius: 3px;
+      }
+
+      .trim-selected {
+        position: absolute;
+        top: 50%;
+        height: 6px;
+        background: var(--primary);
+        transform: translateY(-50%);
+        border-radius: 3px;
+        pointer-events: none;
+      }
+
+      .trim-handle {
+        position: absolute;
+        top: 50%;
+        width: 16px;
+        height: 36px;
+        background: white;
+        border: 2px solid var(--primary);
+        border-radius: 4px;
+        transform: translate(-50%, -50%);
+        cursor: ew-resize;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.15s ease, transform 0.1s ease;
+      }
+
+      .trim-handle:hover {
+        background: #e0e0e0;
+      }
+
+      .trim-handle:active {
+        background: var(--primary);
+        transform: translate(-50%, -50%) scale(1.05);
+      }
+
+      .trim-handle::before {
+        content: '';
+        width: 2px;
+        height: 16px;
+        background: #666;
+        border-radius: 1px;
+      }
+
+      .trim-handle:active::before {
+        background: white;
+      }
+
+      .trim-time-labels {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.65rem;
+        color: #666;
+        font-family: 'Consolas', 'Monaco', monospace;
+        padding: 0 12px;
+      }
+
+      .trim-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+      }
+
+      .trim-action-btn {
+        flex: 1;
+        padding: 0.5rem 0.75rem;
+        background: var(--input);
+        border: 1px solid transparent;
+        border-radius: var(--radius-sm);
+        color: #999;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        text-align: center;
+      }
+
+      .trim-action-btn:hover {
+        border-color: var(--primary);
+        color: #ccc;
+      }
+
+      .export-spinner {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        border-top-color: white;
+        animation: spin 0.8s linear infinite;
+        margin-right: 0.5rem;
+      }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+    `
+]);
+__runInitializers(_init4, 1, WccRecordingPanel);
 
 // ts_web/elements/wcc-properties.ts
+var _recordingDuration_dec2, _isRecording_dec, _showRecordingPanel_dec, _editingProperties_dec, _propertyContent_dec, _isFullscreen_dec3, _warning_dec, _selectedTheme_dec, _selectedViewport_dec, _selectedItem_dec2, _dashboardRef_dec3, _a5, _WccProperties_decorators, _init5, _dashboardRef3, _selectedItem2, _selectedViewport, _selectedTheme, _warning, _isFullscreen3, _propertyContent, _editingProperties, _showRecordingPanel, _isRecording, _recordingDuration2;
 var environment = "native";
 var setEnvironment = (envArg) => {
   environment = envArg;
 };
-var WccProperties = class extends DeesElement {
+_WccProperties_decorators = [t4("wcc-properties")];
+var WccProperties = class extends (_a5 = DeesElement, _dashboardRef_dec3 = [n5({
+  type: WccDashboard2
+})], _selectedItem_dec2 = [n5()], _selectedViewport_dec = [n5()], _selectedTheme_dec = [n5()], _warning_dec = [n5()], _isFullscreen_dec3 = [n5()], _propertyContent_dec = [r5()], _editingProperties_dec = [r5()], _showRecordingPanel_dec = [r5()], _isRecording_dec = [r5()], _recordingDuration_dec2 = [r5()], _a5) {
   constructor() {
     super(...arguments);
-    this.selectedViewport = "native";
-    this.selectedTheme = "dark";
-    this.warning = null;
-    this.isFullscreen = false;
-    this.propertyContent = [];
-    this.editingProperties = [];
-    this.editorHeight = 300;
+    __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, _isFullscreen3, __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);
+    __publicField(this, "editorHeight", 300);
   }
   render() {
     return x`
@@ -41673,7 +43195,7 @@ var WccProperties = class extends DeesElement {
         }
         .grid {
           display: grid;
-          grid-template-columns: 1fr 150px 300px 70px;
+          grid-template-columns: 1fr 150px 300px 70px 70px;
           height: 100%;
         }
         .properties {
@@ -42236,9 +43758,36 @@ var WccProperties = class extends DeesElement {
               ${this.isFullscreen ? "fullscreen_exit" : "fullscreen"}
             </i>
           </div>
+          <!-- Recording Button -->
+          <wcc-record-button
+            .state=${this.isRecording ? "recording" : "idle"}
+            .duration=${this.recordingDuration}
+            @record-click=${() => this.handleRecordButtonClick()}
+          ></wcc-record-button>
         </div>
         ${this.warning ? x`<div class="warning">${this.warning}</div>` : null}
       </div>
+
+      <!-- Recording Panel (options + preview) -->
+      ${this.showRecordingPanel ? x`
+        <wcc-recording-panel
+          .dashboardRef=${this.dashboardRef}
+          @recording-start=${() => {
+      this.isRecording = true;
+    }}
+          @recording-stop=${() => {
+      this.isRecording = false;
+    }}
+          @duration-update=${(e10) => {
+      this.recordingDuration = e10.detail.duration;
+    }}
+          @close=${() => {
+      this.showRecordingPanel = false;
+      this.isRecording = false;
+      this.recordingDuration = 0;
+    }}
+        ></wcc-recording-panel>
+      ` : null}
     `;
   }
   async findElementRecursively(container, elementClass, maxDepth = 5) {
@@ -42524,51 +44073,66 @@ var WccProperties = class extends DeesElement {
       })
     );
   }
-};
-__decorateClass([
-  n5({
-    type: WccDashboard2
-  })
-], WccProperties.prototype, "dashboardRef", 2);
-__decorateClass([
-  n5()
-], WccProperties.prototype, "selectedItem", 2);
-__decorateClass([
-  n5()
-], WccProperties.prototype, "selectedViewport", 2);
-__decorateClass([
-  n5()
-], WccProperties.prototype, "selectedTheme", 2);
-__decorateClass([
-  n5()
-], WccProperties.prototype, "warning", 2);
-__decorateClass([
-  n5()
-], WccProperties.prototype, "isFullscreen", 2);
-__decorateClass([
-  r5()
-], WccProperties.prototype, "propertyContent", 2);
-__decorateClass([
-  r5()
-], WccProperties.prototype, "editingProperties", 2);
-WccProperties = __decorateClass([
-  t4("wcc-properties")
-], WccProperties);
+  // ==================== Recording Methods ====================
+  handleRecordButtonClick() {
+    if (this.isRecording) {
+      const panel = this.shadowRoot?.querySelector("wcc-recording-panel");
+      if (panel && panel.stopRecording) {
+        panel.stopRecording();
+      }
+    } else {
+      this.showRecordingPanel = !this.showRecordingPanel;
+    }
+  }
+};
+_init5 = __decoratorStart(_a5);
+_dashboardRef3 = new WeakMap();
+_selectedItem2 = new WeakMap();
+_selectedViewport = new WeakMap();
+_selectedTheme = new WeakMap();
+_warning = new WeakMap();
+_isFullscreen3 = new WeakMap();
+_propertyContent = new WeakMap();
+_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, "isFullscreen", _isFullscreen_dec3, WccProperties, _isFullscreen3);
+__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);
 
 // ts_web/elements/wcc-dashboard.ts
-var WccDashboard2 = class extends DeesElement {
+var _wccFrame_dec, _warning_dec2, _elements_dec, _pages_dec, _isFullscreen_dec4, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _a6, _WccDashboard_decorators, _init6, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _isFullscreen4, _pages, _elements, _warning2, _wccFrame;
+_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()], _isFullscreen_dec4 = [n5()], _pages_dec = [n5()], _elements_dec = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
   constructor(elementsArg, pagesArg) {
     super();
-    this.selectedViewport = "desktop";
-    this.selectedTheme = "dark";
-    this.isFullscreen = false;
-    this.pages = {};
-    this.elements = {};
-    this.warning = null;
-    this.frameScrollY = 0;
-    this.sidebarScrollY = 0;
-    this.scrollPositionsApplied = false;
-    this.scrollListenersAttached = false;
+    __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, _isFullscreen4, __runInitializers(_init6, 32, this, false)), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _pages, __runInitializers(_init6, 36, this, {})), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _elements, __runInitializers(_init6, 40, this, {})), __runInitializers(_init6, 43, this);
+    __privateAdd(this, _warning2, __runInitializers(_init6, 44, this, null)), __runInitializers(_init6, 47, this);
+    __publicField(this, "frameScrollY", 0);
+    __publicField(this, "sidebarScrollY", 0);
+    __publicField(this, "scrollPositionsApplied", false);
+    __privateAdd(this, _wccFrame, __runInitializers(_init6, 48, this)), __runInitializers(_init6, 51, this);
+    __publicField(this, "scrollUpdateTimeout");
+    __publicField(this, "scrollListenersAttached", false);
     if (elementsArg) {
       this.elements = elementsArg;
       console.log("got elements:");
@@ -42655,11 +44219,42 @@ var WccDashboard2 = class extends DeesElement {
     setTimeout(() => {
       this.setupScrollListeners();
     }, 500);
+    this.domtools.router.on(
+      "/wcctools-route/:itemType/:itemName/:demoIndex/:viewport/:theme",
+      async (routeInfo) => {
+        this.selectedType = routeInfo.params.itemType;
+        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 (routeInfo.queryParams) {
+          const frameScrollY = routeInfo.queryParams.frameScrollY;
+          const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          if (frameScrollY) {
+            this.frameScrollY = parseInt(frameScrollY);
+          }
+          if (sidebarScrollY) {
+            this.sidebarScrollY = parseInt(sidebarScrollY);
+          }
+          setTimeout(() => {
+            this.applyScrollPositions();
+          }, 100);
+        }
+        const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
+        this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
+      }
+    );
     this.domtools.router.on(
       "/wcctools-route/:itemType/:itemName/:viewport/:theme",
       async (routeInfo) => {
         this.selectedType = routeInfo.params.itemType;
         this.selectedItemName = routeInfo.params.itemName;
+        this.selectedDemoIndex = 0;
         this.selectedViewport = routeInfo.params.viewport;
         this.selectedTheme = routeInfo.params.theme;
         if (routeInfo.params.itemType === "element") {
@@ -42712,20 +44307,29 @@ var WccDashboard2 = class extends DeesElement {
         this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
         return;
       }
-      if (!(typeof anonItem.demo === "function")) {
+      const isArray3 = Array.isArray(anonItem.demo);
+      const isFunction2 = typeof anonItem.demo === "function";
+      if (!isArray3 && !isFunction2) {
+        this.setWarning(
+          `component ${anonItem.name} has demo property, but it is not a function or array of functions`
+        );
+        return;
+      }
+      const demoFactory = getDemoAtIndex(anonItem.demo, this.selectedDemoIndex);
+      if (!demoFactory) {
         this.setWarning(
-          `component ${anonItem.name} has demo property, but it is not of type function`
+          `component ${anonItem.name} does not have a demo at index ${this.selectedDemoIndex + 1}`
         );
         return;
       }
       this.setWarning(null);
       const viewport = await wccFrame.getViewportElement();
-      const demoTemplate = await resolveTemplateFactory(() => anonItem.demo());
+      const demoTemplate = await resolveTemplateFactory(demoFactory);
       B(demoTemplate, viewport);
     }
   }
   buildUrl() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -42764,7 +44368,7 @@ var WccDashboard2 = class extends DeesElement {
     }, 300);
   }
   updateUrlWithScrollState() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -42791,39 +44395,31 @@ var WccDashboard2 = class extends DeesElement {
     this.scrollPositionsApplied = true;
   }
 };
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "selectedType", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "selectedItemName", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "selectedItem", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "selectedViewport", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "selectedTheme", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "isFullscreen", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "pages", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "elements", 2);
-__decorateClass([
-  n5()
-], WccDashboard2.prototype, "warning", 2);
-__decorateClass([
-  r7("wcc-frame")
-], WccDashboard2.prototype, "wccFrame", 2);
-WccDashboard2 = __decorateClass([
-  t4("wcc-dashboard")
-], WccDashboard2);
+_init6 = __decoratorStart(_a6);
+_selectedType2 = new WeakMap();
+_selectedItemName = new WeakMap();
+_selectedItem3 = new WeakMap();
+_selectedDemoIndex = new WeakMap();
+_selectedViewport2 = new WeakMap();
+_selectedTheme2 = new WeakMap();
+_isFullscreen4 = new WeakMap();
+_pages = new WeakMap();
+_elements = new WeakMap();
+_warning2 = new WeakMap();
+_wccFrame = new WeakMap();
+__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, "isFullscreen", _isFullscreen_dec4, WccDashboard2, _isFullscreen4);
+__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) => {
@@ -42851,20 +44447,34 @@ __export(elements_exports, {
 });
 
 // test/elements/test-demoelement.ts
+var _demoENum_dec, _demoNumber_dec, _demoString_dec, _demoBoolean_dec, _notTypedAndNotInitizalized_dec, _typedAndNotInitizalized_dec, _notTyped_dec, _a7, _TestDemoelement_decorators, _init7, _notTyped, _typedAndNotInitizalized, _notTypedAndNotInitizalized, _demoBoolean, _demoString, _demoNumber, _demoENum;
 var ETestEnum = /* @__PURE__ */ ((ETestEnum2) => {
   ETestEnum2["first"] = "first";
   ETestEnum2["second"] = "second";
   ETestEnum2["awesome"] = "awesome";
   return ETestEnum2;
 })(ETestEnum || {});
-var TestDemoelement = class extends DeesElement {
+_TestDemoelement_decorators = [t4("test-demoelement")];
+var TestDemoelement = class extends (_a7 = DeesElement, _notTyped_dec = [n5()], _typedAndNotInitizalized_dec = [n5({
+  type: String
+})], _notTypedAndNotInitizalized_dec = [n5()], _demoBoolean_dec = [n5({
+  type: Boolean
+})], _demoString_dec = [n5({
+  type: String
+})], _demoNumber_dec = [n5({
+  type: Number
+})], _demoENum_dec = [n5({
+  type: ETestEnum
+})], _a7) {
   constructor() {
     super();
-    this.notTyped = "hello";
-    this.demoBoolean = false;
-    this.demoString = "default demo string";
-    this.demoNumber = 2;
-    this.demoENum = "first" /* first */;
+    __privateAdd(this, _notTyped, __runInitializers(_init7, 8, this, "hello")), __runInitializers(_init7, 11, this);
+    __privateAdd(this, _typedAndNotInitizalized, __runInitializers(_init7, 12, this)), __runInitializers(_init7, 15, this);
+    __privateAdd(this, _notTypedAndNotInitizalized, __runInitializers(_init7, 16, this)), __runInitializers(_init7, 19, this);
+    __privateAdd(this, _demoBoolean, __runInitializers(_init7, 20, this, false)), __runInitializers(_init7, 23, this);
+    __privateAdd(this, _demoString, __runInitializers(_init7, 24, this, "default demo string")), __runInitializers(_init7, 27, this);
+    __privateAdd(this, _demoNumber, __runInitializers(_init7, 28, this, 2)), __runInitializers(_init7, 31, this);
+    __privateAdd(this, _demoENum, __runInitializers(_init7, 32, this, "first" /* first */)), __runInitializers(_init7, 35, this);
   }
   render() {
     return x`
@@ -42883,8 +44493,28 @@ var TestDemoelement = class extends DeesElement {
     `;
   }
 };
-TestDemoelement.demo = () => x`<test-demoelement>This is a slot text</test-demoelement>`;
-TestDemoelement.styles = [
+_init7 = __decoratorStart(_a7);
+_notTyped = new WeakMap();
+_typedAndNotInitizalized = new WeakMap();
+_notTypedAndNotInitizalized = new WeakMap();
+_demoBoolean = new WeakMap();
+_demoString = new WeakMap();
+_demoNumber = new WeakMap();
+_demoENum = new WeakMap();
+__decorateElement(_init7, 4, "notTyped", _notTyped_dec, TestDemoelement, _notTyped);
+__decorateElement(_init7, 4, "typedAndNotInitizalized", _typedAndNotInitizalized_dec, TestDemoelement, _typedAndNotInitizalized);
+__decorateElement(_init7, 4, "notTypedAndNotInitizalized", _notTypedAndNotInitizalized_dec, TestDemoelement, _notTypedAndNotInitizalized);
+__decorateElement(_init7, 4, "demoBoolean", _demoBoolean_dec, TestDemoelement, _demoBoolean);
+__decorateElement(_init7, 4, "demoString", _demoString_dec, TestDemoelement, _demoString);
+__decorateElement(_init7, 4, "demoNumber", _demoNumber_dec, TestDemoelement, _demoNumber);
+__decorateElement(_init7, 4, "demoENum", _demoENum_dec, TestDemoelement, _demoENum);
+TestDemoelement = __decorateElement(_init7, 0, "TestDemoelement", _TestDemoelement_decorators, TestDemoelement);
+__publicField(TestDemoelement, "demo", [
+  () => x`<test-demoelement>This is demo 1</test-demoelement>`,
+  () => x`<test-demoelement>This is demo 2</test-demoelement>`,
+  () => x`<test-demoelement>This is demo 2</test-demoelement>`
+]);
+__publicField(TestDemoelement, "styles", [
   i`
       .maincontainer,
       .themeindicator {
@@ -42920,56 +44550,16 @@ TestDemoelement.styles = [
         color: green;
       }
     `
-];
-__decorateClass([
-  n5()
-], TestDemoelement.prototype, "notTyped", 2);
-__decorateClass([
-  n5({
-    type: String
-  })
-], TestDemoelement.prototype, "typedAndNotInitizalized", 2);
-__decorateClass([
-  n5()
-], TestDemoelement.prototype, "notTypedAndNotInitizalized", 2);
-__decorateClass([
-  n5({
-    type: Boolean
-  })
-], TestDemoelement.prototype, "demoBoolean", 2);
-__decorateClass([
-  n5({
-    type: String
-  })
-], TestDemoelement.prototype, "demoString", 2);
-__decorateClass([
-  n5({
-    type: Number
-  })
-], TestDemoelement.prototype, "demoNumber", 2);
-__decorateClass([
-  n5({
-    type: ETestEnum
-  })
-], TestDemoelement.prototype, "demoENum", 2);
-TestDemoelement = __decorateClass([
-  t4("test-demoelement")
-], TestDemoelement);
+]);
+__runInitializers(_init7, 1, TestDemoelement);
 
 // test/elements/test-noprops.ts
-var TestNoProps = class extends DeesElement {
-  render() {
-    return x`
-      <div class="message">
-        This element has no @property decorators.
-        Properties panel should handle this gracefully.
-      </div>
-    `;
-  }
-};
-TestNoProps.demo = () => x`<test-noprops></test-noprops>`;
-TestNoProps.styles = [
-  i`
+var _TestNoProps_decorators, _init8, _a8;
+_TestNoProps_decorators = [t4("test-noprops")];
+var TestNoProps = class extends (_a8 = DeesElement) {
+  static demo = () => x`<test-noprops></test-noprops>`;
+  static styles = [
+    i`
       :host {
         display: block;
         padding: 20px;
@@ -42982,18 +44572,29 @@ TestNoProps.styles = [
         color: #666;
       }
     `
-];
-TestNoProps = __decorateClass([
-  t4("test-noprops")
-], TestNoProps);
+  ];
+  render() {
+    return x`
+      <div class="message">
+        This element has no @property decorators.
+        Properties panel should handle this gracefully.
+      </div>
+    `;
+  }
+};
+_init8 = __decoratorStart(_a8);
+TestNoProps = __decorateElement(_init8, 0, "TestNoProps", _TestNoProps_decorators, TestNoProps);
+__runInitializers(_init8, 1, TestNoProps);
 
 // test/elements/test-complextypes.ts
-var TestComplexTypes = class extends DeesElement {
+var _dateProperty_dec, _functionProperty_dec, _simpleObject_dec, _complexData_dec, _numberArray_dec, _stringArray_dec, _a9, _TestComplexTypes_decorators, _init9, _stringArray, _numberArray, _complexData, _simpleObject, _functionProperty, _dateProperty;
+_TestComplexTypes_decorators = [t4("test-complextypes")];
+var TestComplexTypes = class extends (_a9 = DeesElement, _stringArray_dec = [n5({ type: Array })], _numberArray_dec = [n5({ type: Array })], _complexData_dec = [n5({ attribute: false })], _simpleObject_dec = [n5({ type: Object })], _functionProperty_dec = [n5({ attribute: false })], _dateProperty_dec = [n5({ type: Date })], _a9) {
   constructor() {
     super(...arguments);
-    this.stringArray = ["apple", "banana", "cherry"];
-    this.numberArray = [1, 2, 3, 4, 5];
-    this.complexData = {
+    __privateAdd(this, _stringArray, __runInitializers(_init9, 8, this, ["apple", "banana", "cherry"])), __runInitializers(_init9, 11, this);
+    __privateAdd(this, _numberArray, __runInitializers(_init9, 12, this, [1, 2, 3, 4, 5])), __runInitializers(_init9, 15, this);
+    __privateAdd(this, _complexData, __runInitializers(_init9, 16, this, {
       name: "Default Name",
       age: 0,
       tags: [],
@@ -43002,16 +44603,16 @@ var TestComplexTypes = class extends DeesElement {
         modified: /* @__PURE__ */ new Date(),
         author: "Unknown"
       }
-    };
-    this.simpleObject = {
+    })), __runInitializers(_init9, 19, this);
+    __privateAdd(this, _simpleObject, __runInitializers(_init9, 20, this, {
       key1: "value1",
       key2: "value2",
       key3: 123
-    };
-    this.functionProperty = () => {
+    })), __runInitializers(_init9, 23, this);
+    __privateAdd(this, _functionProperty, __runInitializers(_init9, 24, this, () => {
       console.log("This is a function property");
-    };
-    this.dateProperty = /* @__PURE__ */ new Date();
+    })), __runInitializers(_init9, 27, this);
+    __privateAdd(this, _dateProperty, __runInitializers(_init9, 28, this, /* @__PURE__ */ new Date())), __runInitializers(_init9, 31, this);
   }
   render() {
     return x`
@@ -43047,7 +44648,21 @@ var TestComplexTypes = class extends DeesElement {
     `;
   }
 };
-TestComplexTypes.demo = () => x`
+_init9 = __decoratorStart(_a9);
+_stringArray = new WeakMap();
+_numberArray = new WeakMap();
+_complexData = new WeakMap();
+_simpleObject = new WeakMap();
+_functionProperty = new WeakMap();
+_dateProperty = new WeakMap();
+__decorateElement(_init9, 4, "stringArray", _stringArray_dec, TestComplexTypes, _stringArray);
+__decorateElement(_init9, 4, "numberArray", _numberArray_dec, TestComplexTypes, _numberArray);
+__decorateElement(_init9, 4, "complexData", _complexData_dec, TestComplexTypes, _complexData);
+__decorateElement(_init9, 4, "simpleObject", _simpleObject_dec, TestComplexTypes, _simpleObject);
+__decorateElement(_init9, 4, "functionProperty", _functionProperty_dec, TestComplexTypes, _functionProperty);
+__decorateElement(_init9, 4, "dateProperty", _dateProperty_dec, TestComplexTypes, _dateProperty);
+TestComplexTypes = __decorateElement(_init9, 0, "TestComplexTypes", _TestComplexTypes_decorators, TestComplexTypes);
+__publicField(TestComplexTypes, "demo", () => x`
     <test-complextypes 
       .complexData=${{
   name: "Test User",
@@ -43060,8 +44675,8 @@ TestComplexTypes.demo = () => x`
   }
 }}
     ></test-complextypes>
-  `;
-TestComplexTypes.styles = [
+  `);
+__publicField(TestComplexTypes, "styles", [
   i`
       :host {
         display: block;
@@ -43092,31 +44707,17 @@ TestComplexTypes.styles = [
         overflow-x: auto;
       }
     `
-];
-__decorateClass([
-  n5({ type: Array })
-], TestComplexTypes.prototype, "stringArray", 2);
-__decorateClass([
-  n5({ type: Array })
-], TestComplexTypes.prototype, "numberArray", 2);
-__decorateClass([
-  n5({ attribute: false })
-], TestComplexTypes.prototype, "complexData", 2);
-__decorateClass([
-  n5({ type: Object })
-], TestComplexTypes.prototype, "simpleObject", 2);
-__decorateClass([
-  n5({ attribute: false })
-], TestComplexTypes.prototype, "functionProperty", 2);
-__decorateClass([
-  n5({ type: Date })
-], TestComplexTypes.prototype, "dateProperty", 2);
-TestComplexTypes = __decorateClass([
-  t4("test-complextypes")
-], TestComplexTypes);
+]);
+__runInitializers(_init9, 1, TestComplexTypes);
 
 // ts_demotools/demotools.ts
-var DeesDemoWrapper = class extends DeesElement {
+var _runAfterRender_dec, _a10, _DeesDemoWrapper_decorators, _init10, _runAfterRender;
+_DeesDemoWrapper_decorators = [t4("dees-demowrapper")];
+var DeesDemoWrapper = class extends (_a10 = DeesElement, _runAfterRender_dec = [n5({ attribute: false })], _a10) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _runAfterRender, __runInitializers(_init10, 8, this)), __runInitializers(_init10, 11, this);
+  }
   render() {
     return x`
       <slot></slot>
@@ -43134,27 +44735,28 @@ var DeesDemoWrapper = class extends DeesElement {
     }
   }
 };
-DeesDemoWrapper.styles = [
+_init10 = __decoratorStart(_a10);
+_runAfterRender = new WeakMap();
+__decorateElement(_init10, 4, "runAfterRender", _runAfterRender_dec, DeesDemoWrapper, _runAfterRender);
+DeesDemoWrapper = __decorateElement(_init10, 0, "DeesDemoWrapper", _DeesDemoWrapper_decorators, DeesDemoWrapper);
+__publicField(DeesDemoWrapper, "styles", [
   i`
       :host {
         display: contents;
       }
     `
-];
-__decorateClass([
-  n5({ attribute: false })
-], DeesDemoWrapper.prototype, "runAfterRender", 2);
-DeesDemoWrapper = __decorateClass([
-  t4("dees-demowrapper")
-], DeesDemoWrapper);
+]);
+__runInitializers(_init10, 1, DeesDemoWrapper);
 
 // test/elements/test-withwrapper.ts
-var TestWithWrapper = class extends DeesElement {
+var _isActive_dec, _counter_dec, _dynamicValue_dec, _a11, _TestWithWrapper_decorators, _init11, _dynamicValue, _counter, _isActive;
+_TestWithWrapper_decorators = [t4("test-withwrapper")];
+var TestWithWrapper = class extends (_a11 = DeesElement, _dynamicValue_dec = [n5({ type: String })], _counter_dec = [n5({ type: Number })], _isActive_dec = [n5({ type: Boolean })], _a11) {
   constructor() {
     super(...arguments);
-    this.dynamicValue = "Initial value";
-    this.counter = 0;
-    this.isActive = false;
+    __privateAdd(this, _dynamicValue, __runInitializers(_init11, 8, this, "Initial value")), __runInitializers(_init11, 11, this);
+    __privateAdd(this, _counter, __runInitializers(_init11, 12, this, 0)), __runInitializers(_init11, 15, this);
+    __privateAdd(this, _isActive, __runInitializers(_init11, 16, this, false)), __runInitializers(_init11, 19, this);
   }
   render() {
     return x`
@@ -43178,7 +44780,15 @@ var TestWithWrapper = class extends DeesElement {
     `;
   }
 };
-TestWithWrapper.demo = () => x`
+_init11 = __decoratorStart(_a11);
+_dynamicValue = new WeakMap();
+_counter = new WeakMap();
+_isActive = new WeakMap();
+__decorateElement(_init11, 4, "dynamicValue", _dynamicValue_dec, TestWithWrapper, _dynamicValue);
+__decorateElement(_init11, 4, "counter", _counter_dec, TestWithWrapper, _counter);
+__decorateElement(_init11, 4, "isActive", _isActive_dec, TestWithWrapper, _isActive);
+TestWithWrapper = __decorateElement(_init11, 0, "TestWithWrapper", _TestWithWrapper_decorators, TestWithWrapper);
+__publicField(TestWithWrapper, "demo", () => x`
     <dees-demowrapper .runAfterRender=${async (wrapper) => {
   console.log("DemoWrapper: Found wrapper element", wrapper);
   const testElement = wrapper.querySelector("test-withwrapper");
@@ -43197,8 +44807,8 @@ TestWithWrapper.demo = () => x`
         This div is also inside the wrapper
       </div>
     </dees-demowrapper>
-  `;
-TestWithWrapper.styles = [
+  `);
+__publicField(TestWithWrapper, "styles", [
   i`
       :host {
         display: block;
@@ -43236,44 +44846,35 @@ TestWithWrapper.styles = [
         font-family: monospace;
       }
     `
-];
-__decorateClass([
-  n5({ type: String })
-], TestWithWrapper.prototype, "dynamicValue", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestWithWrapper.prototype, "counter", 2);
-__decorateClass([
-  n5({ type: Boolean })
-], TestWithWrapper.prototype, "isActive", 2);
-TestWithWrapper = __decorateClass([
-  t4("test-withwrapper")
-], TestWithWrapper);
+]);
+__runInitializers(_init11, 1, TestWithWrapper);
 
 // test/elements/test-edgecases.ts
-var TestEdgeCases = class extends DeesElement {
+var _circularRef_dec, _emptyObject_dec, _emptyArray_dec, _emptyString_dec, _booleanNumber_dec, _booleanString_dec, _floatNumber_dec, _verySmallNumber_dec, _veryLargeNumber_dec, _nanNumber_dec, _infinityNumber_dec, _htmlString_dec, _specialChars_dec, _longString_dec, _undefinedNumber_dec, _nullableString_dec, _a12, _TestEdgeCases_decorators, _init12, _nullableString, _undefinedNumber, _longString, _specialChars, _htmlString, _infinityNumber, _nanNumber, _veryLargeNumber, _verySmallNumber, _floatNumber, _booleanString, _booleanNumber, _emptyString, _emptyArray, _emptyObject, _circularRef;
+_TestEdgeCases_decorators = [t4("test-edgecases")];
+var TestEdgeCases = class extends (_a12 = DeesElement, _nullableString_dec = [n5({ type: String })], _undefinedNumber_dec = [n5({ type: Number })], _longString_dec = [n5({ type: String })], _specialChars_dec = [n5({ type: String })], _htmlString_dec = [n5({ type: String })], _infinityNumber_dec = [n5({ type: Number })], _nanNumber_dec = [n5({ type: Number })], _veryLargeNumber_dec = [n5({ type: Number })], _verySmallNumber_dec = [n5({ type: Number })], _floatNumber_dec = [n5({ type: Number })], _booleanString_dec = [n5({ type: String })], _booleanNumber_dec = [n5({ type: Number })], _emptyString_dec = [n5({ type: String })], _emptyArray_dec = [n5({ type: Array })], _emptyObject_dec = [n5({ type: Object })], _circularRef_dec = [n5({ attribute: false })], _a12) {
   constructor() {
     super(...arguments);
-    this.nullableString = null;
-    this.undefinedNumber = void 0;
-    this.longString = "Lorem ipsum ".repeat(50);
-    this.specialChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?`~";
-    this.htmlString = '<script>alert("test")<\/script><b>Bold text</b>';
-    this.infinityNumber = Infinity;
-    this.nanNumber = NaN;
-    this.veryLargeNumber = Number.MAX_SAFE_INTEGER;
-    this.verySmallNumber = Number.MIN_SAFE_INTEGER;
-    this.floatNumber = 3.14159265359;
-    this.booleanString = "false";
-    this.booleanNumber = 0;
-    this.emptyString = "";
-    this.emptyArray = [];
-    this.emptyObject = {};
-    this.circularRef = (() => {
+    __privateAdd(this, _nullableString, __runInitializers(_init12, 8, this, null)), __runInitializers(_init12, 11, this);
+    __privateAdd(this, _undefinedNumber, __runInitializers(_init12, 12, this)), __runInitializers(_init12, 15, this);
+    __privateAdd(this, _longString, __runInitializers(_init12, 16, this, "Lorem ipsum ".repeat(50))), __runInitializers(_init12, 19, this);
+    __privateAdd(this, _specialChars, __runInitializers(_init12, 20, this, "!@#$%^&*()_+-=[]{}|;':\",./<>?`~")), __runInitializers(_init12, 23, this);
+    __privateAdd(this, _htmlString, __runInitializers(_init12, 24, this, '<script>alert("test")<\/script><b>Bold text</b>')), __runInitializers(_init12, 27, this);
+    __privateAdd(this, _infinityNumber, __runInitializers(_init12, 28, this, Infinity)), __runInitializers(_init12, 31, this);
+    __privateAdd(this, _nanNumber, __runInitializers(_init12, 32, this, NaN)), __runInitializers(_init12, 35, this);
+    __privateAdd(this, _veryLargeNumber, __runInitializers(_init12, 36, this, Number.MAX_SAFE_INTEGER)), __runInitializers(_init12, 39, this);
+    __privateAdd(this, _verySmallNumber, __runInitializers(_init12, 40, this, Number.MIN_SAFE_INTEGER)), __runInitializers(_init12, 43, this);
+    __privateAdd(this, _floatNumber, __runInitializers(_init12, 44, this, 3.14159265359)), __runInitializers(_init12, 47, this);
+    __privateAdd(this, _booleanString, __runInitializers(_init12, 48, this, "false")), __runInitializers(_init12, 51, this);
+    __privateAdd(this, _booleanNumber, __runInitializers(_init12, 52, this, 0)), __runInitializers(_init12, 55, this);
+    __privateAdd(this, _emptyString, __runInitializers(_init12, 56, this, "")), __runInitializers(_init12, 59, this);
+    __privateAdd(this, _emptyArray, __runInitializers(_init12, 60, this, [])), __runInitializers(_init12, 63, this);
+    __privateAdd(this, _emptyObject, __runInitializers(_init12, 64, this, {})), __runInitializers(_init12, 67, this);
+    __privateAdd(this, _circularRef, __runInitializers(_init12, 68, this, (() => {
       const obj = { name: "circular" };
       obj.self = obj;
       return obj;
-    })();
+    })())), __runInitializers(_init12, 71, this);
   }
   formatValue(value2) {
     if (value2 === null) return "null";
@@ -43355,8 +44956,42 @@ var TestEdgeCases = class extends DeesElement {
     `;
   }
 };
-TestEdgeCases.demo = () => x`<test-edgecases></test-edgecases>`;
-TestEdgeCases.styles = [
+_init12 = __decoratorStart(_a12);
+_nullableString = new WeakMap();
+_undefinedNumber = new WeakMap();
+_longString = new WeakMap();
+_specialChars = new WeakMap();
+_htmlString = new WeakMap();
+_infinityNumber = new WeakMap();
+_nanNumber = new WeakMap();
+_veryLargeNumber = new WeakMap();
+_verySmallNumber = new WeakMap();
+_floatNumber = new WeakMap();
+_booleanString = new WeakMap();
+_booleanNumber = new WeakMap();
+_emptyString = new WeakMap();
+_emptyArray = new WeakMap();
+_emptyObject = new WeakMap();
+_circularRef = new WeakMap();
+__decorateElement(_init12, 4, "nullableString", _nullableString_dec, TestEdgeCases, _nullableString);
+__decorateElement(_init12, 4, "undefinedNumber", _undefinedNumber_dec, TestEdgeCases, _undefinedNumber);
+__decorateElement(_init12, 4, "longString", _longString_dec, TestEdgeCases, _longString);
+__decorateElement(_init12, 4, "specialChars", _specialChars_dec, TestEdgeCases, _specialChars);
+__decorateElement(_init12, 4, "htmlString", _htmlString_dec, TestEdgeCases, _htmlString);
+__decorateElement(_init12, 4, "infinityNumber", _infinityNumber_dec, TestEdgeCases, _infinityNumber);
+__decorateElement(_init12, 4, "nanNumber", _nanNumber_dec, TestEdgeCases, _nanNumber);
+__decorateElement(_init12, 4, "veryLargeNumber", _veryLargeNumber_dec, TestEdgeCases, _veryLargeNumber);
+__decorateElement(_init12, 4, "verySmallNumber", _verySmallNumber_dec, TestEdgeCases, _verySmallNumber);
+__decorateElement(_init12, 4, "floatNumber", _floatNumber_dec, TestEdgeCases, _floatNumber);
+__decorateElement(_init12, 4, "booleanString", _booleanString_dec, TestEdgeCases, _booleanString);
+__decorateElement(_init12, 4, "booleanNumber", _booleanNumber_dec, TestEdgeCases, _booleanNumber);
+__decorateElement(_init12, 4, "emptyString", _emptyString_dec, TestEdgeCases, _emptyString);
+__decorateElement(_init12, 4, "emptyArray", _emptyArray_dec, TestEdgeCases, _emptyArray);
+__decorateElement(_init12, 4, "emptyObject", _emptyObject_dec, TestEdgeCases, _emptyObject);
+__decorateElement(_init12, 4, "circularRef", _circularRef_dec, TestEdgeCases, _circularRef);
+TestEdgeCases = __decorateElement(_init12, 0, "TestEdgeCases", _TestEdgeCases_decorators, TestEdgeCases);
+__publicField(TestEdgeCases, "demo", () => x`<test-edgecases></test-edgecases>`);
+__publicField(TestEdgeCases, "styles", [
   i`
       :host {
         display: block;
@@ -43394,61 +45029,13 @@ TestEdgeCases.styles = [
         border-radius: 2px;
       }
     `
-];
-__decorateClass([
-  n5({ type: String })
-], TestEdgeCases.prototype, "nullableString", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestEdgeCases.prototype, "undefinedNumber", 2);
-__decorateClass([
-  n5({ type: String })
-], TestEdgeCases.prototype, "longString", 2);
-__decorateClass([
-  n5({ type: String })
-], TestEdgeCases.prototype, "specialChars", 2);
-__decorateClass([
-  n5({ type: String })
-], TestEdgeCases.prototype, "htmlString", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestEdgeCases.prototype, "infinityNumber", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestEdgeCases.prototype, "nanNumber", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestEdgeCases.prototype, "veryLargeNumber", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestEdgeCases.prototype, "verySmallNumber", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestEdgeCases.prototype, "floatNumber", 2);
-__decorateClass([
-  n5({ type: String })
-], TestEdgeCases.prototype, "booleanString", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestEdgeCases.prototype, "booleanNumber", 2);
-__decorateClass([
-  n5({ type: String })
-], TestEdgeCases.prototype, "emptyString", 2);
-__decorateClass([
-  n5({ type: Array })
-], TestEdgeCases.prototype, "emptyArray", 2);
-__decorateClass([
-  n5({ type: Object })
-], TestEdgeCases.prototype, "emptyObject", 2);
-__decorateClass([
-  n5({ attribute: false })
-], TestEdgeCases.prototype, "circularRef", 2);
-TestEdgeCases = __decorateClass([
-  t4("test-edgecases")
-], TestEdgeCases);
+]);
+__runInitializers(_init12, 1, TestEdgeCases);
 
 // test/elements/test-nested.ts
-var TestNestedWrapper = class extends DeesElement {
+var _TestNestedWrapper_decorators, _init13, _a13, _found_dec, _depth_dec, _message_dec, _b, _TestNestedTarget_decorators, _init14, _message, _depth, _found, _testId_dec, _c, _TestNested_decorators, _init15, _testId;
+_TestNestedWrapper_decorators = [t4("test-nested-wrapper")];
+var TestNestedWrapper = class extends (_a13 = DeesElement) {
   render() {
     return x`
       <div style="border: 1px dashed #ccc; padding: 10px; margin: 5px;">
@@ -43457,15 +45044,16 @@ var TestNestedWrapper = class extends DeesElement {
     `;
   }
 };
-TestNestedWrapper = __decorateClass([
-  t4("test-nested-wrapper")
-], TestNestedWrapper);
-var TestNestedTarget = class extends DeesElement {
+_init13 = __decoratorStart(_a13);
+TestNestedWrapper = __decorateElement(_init13, 0, "TestNestedWrapper", _TestNestedWrapper_decorators, TestNestedWrapper);
+__runInitializers(_init13, 1, TestNestedWrapper);
+_TestNestedTarget_decorators = [t4("test-nested-target")];
+var TestNestedTarget = class extends (_b = DeesElement, _message_dec = [n5({ type: String })], _depth_dec = [n5({ type: Number })], _found_dec = [n5({ type: Boolean })], _b) {
   constructor() {
     super(...arguments);
-    this.message = "I am deeply nested!";
-    this.depth = 0;
-    this.found = false;
+    __privateAdd(this, _message, __runInitializers(_init14, 8, this, "I am deeply nested!")), __runInitializers(_init14, 11, this);
+    __privateAdd(this, _depth, __runInitializers(_init14, 12, this, 0)), __runInitializers(_init14, 15, this);
+    __privateAdd(this, _found, __runInitializers(_init14, 16, this, false)), __runInitializers(_init14, 19, this);
   }
   render() {
     return x`
@@ -43478,7 +45066,15 @@ var TestNestedTarget = class extends DeesElement {
     `;
   }
 };
-TestNestedTarget.styles = [
+_init14 = __decoratorStart(_b);
+_message = new WeakMap();
+_depth = new WeakMap();
+_found = new WeakMap();
+__decorateElement(_init14, 4, "message", _message_dec, TestNestedTarget, _message);
+__decorateElement(_init14, 4, "depth", _depth_dec, TestNestedTarget, _depth);
+__decorateElement(_init14, 4, "found", _found_dec, TestNestedTarget, _found);
+TestNestedTarget = __decorateElement(_init14, 0, "TestNestedTarget", _TestNestedTarget_decorators, TestNestedTarget);
+__publicField(TestNestedTarget, "styles", [
   i`
       :host {
         display: block;
@@ -43493,23 +45089,13 @@ TestNestedTarget.styles = [
         color: #01579b;
       }
     `
-];
-__decorateClass([
-  n5({ type: String })
-], TestNestedTarget.prototype, "message", 2);
-__decorateClass([
-  n5({ type: Number })
-], TestNestedTarget.prototype, "depth", 2);
-__decorateClass([
-  n5({ type: Boolean })
-], TestNestedTarget.prototype, "found", 2);
-TestNestedTarget = __decorateClass([
-  t4("test-nested-target")
-], TestNestedTarget);
-var TestNested = class extends DeesElement {
+]);
+__runInitializers(_init14, 1, TestNestedTarget);
+_TestNested_decorators = [t4("test-nested")];
+var TestNested = class extends (_c = DeesElement, _testId_dec = [n5({ type: String })], _c) {
   constructor() {
     super(...arguments);
-    this.testId = "nested-test";
+    __privateAdd(this, _testId, __runInitializers(_init15, 8, this, "nested-test")), __runInitializers(_init15, 11, this);
   }
   render() {
     return x`
@@ -43544,10 +45130,14 @@ var TestNested = class extends DeesElement {
     `;
   }
 };
-TestNested.demo = () => x`
+_init15 = __decoratorStart(_c);
+_testId = new WeakMap();
+__decorateElement(_init15, 4, "testId", _testId_dec, TestNested, _testId);
+TestNested = __decorateElement(_init15, 0, "TestNested", _TestNested_decorators, TestNested);
+__publicField(TestNested, "demo", () => x`
     <test-nested></test-nested>
-  `;
-TestNested.styles = [
+  `);
+__publicField(TestNested, "styles", [
   i`
       :host {
         display: block;
@@ -43568,13 +45158,8 @@ TestNested.styles = [
         border-radius: 4px;
       }
     `
-];
-__decorateClass([
-  n5({ type: String })
-], TestNested.prototype, "testId", 2);
-TestNested = __decorateClass([
-  t4("test-nested")
-], TestNested);
+]);
+__runInitializers(_init15, 1, TestNested);
 
 // test/pages/index.ts
 var pages_exports = {};