@design.estate/dees-wcctools 1.2.1 → 1.3.0

package/dist_bundle/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 _a7 = _this, $el = _a7.$el, ctx = _a7.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 _a7 = this, $el = _a7.$el, ctx = _a7.ctx, currentOptions = _a7.opts;
             var $trigger = ctx.$trigger;
             var opts = __assign2({}, currentOptions, options || {});
             var optOffset = opts.offset, vertical = opts.vertical, horizontal = opts.horizontal;
@@ -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 _a7 = this, $el = _a7.$el, ctx = _a7.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 _a7 = this, $el = _a7.$el, ctx = _a7.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 _a7;
             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 = (_a7 = this)["on" + (type5[0].toUpperCase() + type5.slice(1))].apply(_a7, args);
             return callbackResult !== void 0 ? callbackResult : methodResult;
           };
           SweetScroll4.prototype.bind = function(click, stop) {
-            var _a = this, $el = _a.$el, opts = _a.ctx.opts;
+            var _a7 = this, $el = _a7.$el, opts = _a7.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 _a7 = this, $el = _a7.$el, opts = _a7.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, _a7, e_2, _b;
     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 && (_a7 = _parentage_1.return)) _a7.call(_parentage_1);
             } finally {
               if (e_1) throw e_1.error;
             }
@@ -7122,7 +7160,7 @@ var Subscription = (function() {
     }
   };
   Subscription2.prototype.add = function(teardown) {
-    var _a;
+    var _a7;
     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 = (_a7 = this._finalizers) !== null && _a7 !== void 0 ? _a7 : []).push(teardown);
       }
     }
   };
@@ -7252,7 +7290,7 @@ function errorContext(cb) {
     }
     cb();
     if (isRoot) {
-      var _a = context, errorThrown = _a.errorThrown, error = _a.error;
+      var _a7 = context, errorThrown = _a7.errorThrown, error = _a7.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 _a7 = _this, operator = _a7.operator, source = _a7.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 _a7;
+    return (_a7 = this.source) === null || _a7 === void 0 ? void 0 : _a7.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 _a7;
+  return (_a7 = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config.Promise) !== null && _a7 !== void 0 ? _a7 : 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 _a7;
     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 && ((_a7 = this.onFinalize) === null || _a7 === void 0 ? void 0 : _a7.call(this));
     }
   };
   return OperatorSubscriber2;
@@ -7660,7 +7698,7 @@ var Subject = (function(_super) {
   Subject2.prototype.next = function(value2) {
     var _this = this;
     errorContext(function() {
-      var e_1, _a;
+      var e_1, _a7;
       _this._throwIfClosed();
       if (!_this.isStopped) {
         if (!_this.currentObservers) {
@@ -7675,7 +7713,7 @@ var Subject = (function(_super) {
           e_1 = { error: e_1_1 };
         } finally {
           try {
-            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            if (_c && !_c.done && (_a7 = _b.return)) _a7.call(_b);
           } 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 _a7;
+      return ((_a7 = this.observers) === null || _a7 === void 0 ? void 0 : _a7.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 _a7 = this, hasError = _a7.hasError, isStopped = _a7.isStopped, observers = _a7.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 _a7 = this, hasError = _a7.hasError, thrownError = _a7.thrownError, isStopped = _a7.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 _a7, _b;
+    (_b = (_a7 = this.destination) === null || _a7 === void 0 ? void 0 : _a7.next) === null || _b === void 0 ? void 0 : _b.call(_a7, 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 _a7, _b;
+    (_b = (_a7 = this.destination) === null || _a7 === void 0 ? void 0 : _a7.error) === null || _b === void 0 ? void 0 : _b.call(_a7, 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 _a7, _b;
+    (_b = (_a7 = this.destination) === null || _a7 === void 0 ? void 0 : _a7.complete) === null || _b === void 0 ? void 0 : _b.call(_a7);
   };
   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 _a7, _b;
+    return (_b = (_a7 = this.source) === null || _a7 === void 0 ? void 0 : _a7.subscribe(subscriber)) !== null && _b !== void 0 ? _b : 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 _a7 = this, isStopped = _a7.isStopped, _buffer = _a7._buffer, _infiniteTimeWindow = _a7._infiniteTimeWindow, _timestampProvider = _a7._timestampProvider, _windowTime = _a7._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 _a7 = this, _infiniteTimeWindow = _a7._infiniteTimeWindow, _buffer = _a7._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 _a7 = this, _bufferSize = _a7._bufferSize, _timestampProvider = _a7._timestampProvider, _buffer = _a7._buffer, _infiniteTimeWindow = _a7._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 _a7;
     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 = (_a7 = this.id) !== null && _a7 !== void 0 ? _a7 : 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 _a7 = this, id = _a7.id, scheduler = _a7.scheduler;
       var actions = scheduler.actions;
       this.work = this.state = this.scheduler = null;
       this.pending = false;
@@ -8103,7 +8141,7 @@ function isIterable(input) {
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/util/isReadableStreamLike.js
 function readableStreamLikeToAsyncGenerator(readableStream) {
   return __asyncGenerator(this, arguments, function readableStreamLikeToAsyncGenerator_1() {
-    var reader, _a, value2, done;
+    var reader, _a7, value2, done;
     return __generator(this, function(_b) {
       switch (_b.label) {
         case 0:
@@ -8116,7 +8154,7 @@ function readableStreamLikeToAsyncGenerator(readableStream) {
           if (false) return [3, 8];
           return [4, __await(reader.read())];
         case 3:
-          _a = _b.sent(), value2 = _a.value, done = _a.done;
+          _a7 = _b.sent(), value2 = _a7.value, done = _a7.done;
           if (!done) return [3, 5];
           return [4, __await(void 0)];
         case 4:
@@ -8201,7 +8239,7 @@ function fromPromise(promise) {
 }
 function fromIterable(iterable) {
   return new Observable(function(subscriber) {
-    var e_1, _a;
+    var e_1, _a7;
     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 && (_a7 = iterable_1.return)) _a7.call(iterable_1);
       } finally {
         if (e_1) throw e_1.error;
       }
@@ -8234,7 +8272,7 @@ function fromReadableStreamLike(readableStream) {
 }
 function process2(asyncIterable, subscriber) {
   var asyncIterable_1, asyncIterable_1_1;
-  var e_2, _a;
+  var e_2, _a7;
   return __awaiter(this, void 0, void 0, function() {
     var value2, e_2_1;
     return __generator(this, function(_b) {
@@ -8263,8 +8301,8 @@ function process2(asyncIterable, subscriber) {
           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)];
+          if (!(asyncIterable_1_1 && !asyncIterable_1_1.done && (_a7 = asyncIterable_1.return))) return [3, 8];
+          return [4, _a7.call(asyncIterable_1)];
         case 7:
           _b.sent();
           _b.label = 8;
@@ -8373,11 +8411,11 @@ function scheduleIterable(input, scheduler) {
     executeSchedule(subscriber, scheduler, function() {
       iterator2 = input[iterator]();
       executeSchedule(subscriber, scheduler, function() {
-        var _a;
+        var _a7;
         var value2;
         var done;
         try {
-          _a = iterator2.next(), value2 = _a.value, done = _a.done;
+          _a7 = iterator2.next(), value2 = _a7.value, done = _a7.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 _a7 = __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 = _a7[0], remove2 = _a7[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, _a7, e_2, _b;
       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 && (_a7 = buffers_1.return)) _a7.call(buffers_1);
         } finally {
           if (e_1) throw e_1.error;
         }
@@ -8763,7 +8801,7 @@ function bufferCount(bufferSize, startBufferEvery) {
         }
       }
     }, function() {
-      var e_3, _a;
+      var e_3, _a7;
       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 && (_a7 = buffers_2.return)) _a7.call(buffers_2);
         } finally {
           if (e_3) throw e_3.error;
         }
@@ -8787,12 +8825,12 @@ function bufferCount(bufferSize, startBufferEvery) {
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/operators/bufferTime.js
 function bufferTime(bufferTimeSpan) {
-  var _a, _b;
+  var _a7, _b;
   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 scheduler = (_a7 = popScheduler(otherArgs)) !== null && _a7 !== void 0 ? _a7 : asyncScheduler;
   var bufferCreationInterval = (_b = otherArgs[0]) !== null && _b !== void 0 ? _b : null;
   var maxBufferSize = otherArgs[1] || Infinity;
   return operate(function(source, subscriber) {
@@ -8827,7 +8865,7 @@ function bufferTime(bufferTimeSpan) {
     }
     startBuffer();
     var bufferTimeSubscriber = createOperatorSubscriber(subscriber, function(value2) {
-      var e_1, _a2;
+      var e_1, _a8;
       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 && (_a8 = recordsCopy_1.return)) _a8.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 _a7 = config2 !== null && config2 !== void 0 ? config2 : {}, _b = _a7.leading, leading = _b === void 0 ? true : _b, _c = _a7.trailing, trailing = _c === void 0 ? false : _c;
     var hasValue = false;
     var sendValue = null;
     var throttled = null;
@@ -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) {
@@ -40784,7 +40822,7 @@ var CssManager = class _CssManager {
 };
 
 // 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$;
@@ -40871,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) {
@@ -41326,11 +41364,14 @@ var resolveTemplateFactory = async (factoryArg) => {
 };
 
 // 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`
@@ -41408,7 +41449,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;
@@ -41429,25 +41478,19 @@ 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 _isFullscreen_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isFullscreen2;
+_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()], _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);
   }
   render() {
     return x`
@@ -41656,37 +41699,1343 @@ var WccSidebar = class extends DeesElement {
     this.dashboardRef.buildUrl();
   }
 };
-__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);
+_init2 = __decoratorStart(_a2);
+_selectedItem = new WeakMap();
+_selectedType = new WeakMap();
+_dashboardRef = new WeakMap();
+_isFullscreen2 = 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);
+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;
+    }
+  }
+  handleRecordingComplete() {
+    this._recordedBlob = new Blob(this.recordedChunks, { type: "video/webm" });
+    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;
+    }
+  }
+};
+
+// 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"}
+            </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`
@@ -41726,7 +43075,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 {
@@ -42289,9 +43638,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) {
@@ -42577,51 +43953,65 @@ 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, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _a6, _WccDashboard_decorators, _init6, _selectedType2, _selectedItemName, _selectedItem3, _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()], _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, _selectedViewport2, __runInitializers(_init6, 20, this, "desktop")), __runInitializers(_init6, 23, this);
+    __privateAdd(this, _selectedTheme2, __runInitializers(_init6, 24, this, "dark")), __runInitializers(_init6, 27, this);
+    __privateAdd(this, _isFullscreen4, __runInitializers(_init6, 28, this, false)), __runInitializers(_init6, 31, this);
+    __privateAdd(this, _pages, __runInitializers(_init6, 32, this, {})), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _elements, __runInitializers(_init6, 36, this, {})), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _warning2, __runInitializers(_init6, 40, this, null)), __runInitializers(_init6, 43, this);
+    __publicField(this, "frameScrollY", 0);
+    __publicField(this, "sidebarScrollY", 0);
+    __publicField(this, "scrollPositionsApplied", false);
+    __privateAdd(this, _wccFrame, __runInitializers(_init6, 44, this)), __runInitializers(_init6, 47, this);
+    __publicField(this, "scrollUpdateTimeout");
+    __publicField(this, "scrollListenersAttached", false);
     if (elementsArg) {
       this.elements = elementsArg;
       console.log("got elements:");
@@ -42844,39 +44234,29 @@ 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();
+_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, "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) => {
@@ -42892,6 +44272,9 @@ var setupWccTools = (elementsArg, pagesArg) => {
   runWccToolsSetup();
 };
 export {
+  RecorderService,
+  WccRecordButton,
+  WccRecordingPanel,
   setupWccTools
 };
 /*! Bundled license information: