@design.estate/dees-wcctools 1.2.1 → 2.0.0

package/dist_ts_web/elements/wcc-sidebar.d.ts

@@ -3,10 +3,12 @@ import { WccDashboard } from './wcc-dashboard.js';
 import type { TTemplateFactory } from './wcctools.helpers.js';
 export type TElementType = 'element' | 'page';
 export declare class WccSidebar extends DeesElement {
-    selectedItem: DeesElement | TTemplateFactory;
-    selectedType: TElementType;
-    dashboardRef: WccDashboard;
-    isFullscreen: boolean;
+    accessor selectedItem: DeesElement | TTemplateFactory;
+    accessor selectedType: TElementType;
+    accessor dashboardRef: WccDashboard;
+    accessor isFullscreen: boolean;
+    accessor expandedElements: Set<string>;
     render(): TemplateResult;
-    selectItem(typeArg: TElementType, itemNameArg: string, itemArg: TTemplateFactory | DeesElement): void;
+    private toggleExpanded;
+    selectItem(typeArg: TElementType, itemNameArg: string, itemArg: TTemplateFactory | DeesElement, demoIndex?: number): void;
 }

package/dist_ts_web/elements/wcc-sidebar.js

@@ -1,22 +1,99 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
 };
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
 };
 import * as plugins from '../wcctools.plugins.js';
-import { DeesElement, property, html, customElement } from '@design.estate/dees-element';
+import { DeesElement, property, html, customElement, state } from '@design.estate/dees-element';
 import { WccDashboard } from './wcc-dashboard.js';
-let WccSidebar = class WccSidebar extends DeesElement {
-    constructor() {
-        super(...arguments);
-        this.isFullscreen = false;
-    }
-    render() {
-        return html `
+import { getDemoCount, hasMultipleDemos } from './wcctools.helpers.js';
+let WccSidebar = (() => {
+    let _classDecorators = [customElement('wcc-sidebar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _selectedItem_decorators;
+    let _selectedItem_initializers = [];
+    let _selectedItem_extraInitializers = [];
+    let _selectedType_decorators;
+    let _selectedType_initializers = [];
+    let _selectedType_extraInitializers = [];
+    let _dashboardRef_decorators;
+    let _dashboardRef_initializers = [];
+    let _dashboardRef_extraInitializers = [];
+    let _isFullscreen_decorators;
+    let _isFullscreen_initializers = [];
+    let _isFullscreen_extraInitializers = [];
+    let _expandedElements_decorators;
+    let _expandedElements_initializers = [];
+    let _expandedElements_extraInitializers = [];
+    var WccSidebar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _selectedItem_decorators = [property({ attribute: false })];
+            _selectedType_decorators = [property({ attribute: false })];
+            _dashboardRef_decorators = [property()];
+            _isFullscreen_decorators = [property()];
+            _expandedElements_decorators = [state()];
+            __esDecorate(this, null, _selectedItem_decorators, { kind: "accessor", name: "selectedItem", static: false, private: false, access: { has: obj => "selectedItem" in obj, get: obj => obj.selectedItem, set: (obj, value) => { obj.selectedItem = value; } }, metadata: _metadata }, _selectedItem_initializers, _selectedItem_extraInitializers);
+            __esDecorate(this, null, _selectedType_decorators, { kind: "accessor", name: "selectedType", static: false, private: false, access: { has: obj => "selectedType" in obj, get: obj => obj.selectedType, set: (obj, value) => { obj.selectedType = value; } }, metadata: _metadata }, _selectedType_initializers, _selectedType_extraInitializers);
+            __esDecorate(this, null, _dashboardRef_decorators, { kind: "accessor", name: "dashboardRef", static: false, private: false, access: { has: obj => "dashboardRef" in obj, get: obj => obj.dashboardRef, set: (obj, value) => { obj.dashboardRef = value; } }, metadata: _metadata }, _dashboardRef_initializers, _dashboardRef_extraInitializers);
+            __esDecorate(this, null, _isFullscreen_decorators, { kind: "accessor", name: "isFullscreen", static: false, private: false, access: { has: obj => "isFullscreen" in obj, get: obj => obj.isFullscreen, set: (obj, value) => { obj.isFullscreen = value; } }, metadata: _metadata }, _isFullscreen_initializers, _isFullscreen_extraInitializers);
+            __esDecorate(this, null, _expandedElements_decorators, { kind: "accessor", name: "expandedElements", static: false, private: false, access: { has: obj => "expandedElements" in obj, get: obj => obj.expandedElements, set: (obj, value) => { obj.expandedElements = value; } }, metadata: _metadata }, _expandedElements_initializers, _expandedElements_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            WccSidebar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #selectedItem_accessor_storage = __runInitializers(this, _selectedItem_initializers, void 0);
+        get selectedItem() { return this.#selectedItem_accessor_storage; }
+        set selectedItem(value) { this.#selectedItem_accessor_storage = value; }
+        #selectedType_accessor_storage = (__runInitializers(this, _selectedItem_extraInitializers), __runInitializers(this, _selectedType_initializers, void 0));
+        get selectedType() { return this.#selectedType_accessor_storage; }
+        set selectedType(value) { this.#selectedType_accessor_storage = value; }
+        #dashboardRef_accessor_storage = (__runInitializers(this, _selectedType_extraInitializers), __runInitializers(this, _dashboardRef_initializers, void 0));
+        get dashboardRef() { return this.#dashboardRef_accessor_storage; }
+        set dashboardRef(value) { this.#dashboardRef_accessor_storage = value; }
+        #isFullscreen_accessor_storage = (__runInitializers(this, _dashboardRef_extraInitializers), __runInitializers(this, _isFullscreen_initializers, false));
+        get isFullscreen() { return this.#isFullscreen_accessor_storage; }
+        set isFullscreen(value) { this.#isFullscreen_accessor_storage = value; }
+        #expandedElements_accessor_storage = (__runInitializers(this, _isFullscreen_extraInitializers), __runInitializers(this, _expandedElements_initializers, new Set()));
+        // Track which elements are expanded (for multi-demo elements)
+        get expandedElements() { return this.#expandedElements_accessor_storage; }
+        set expandedElements(value) { this.#expandedElements_accessor_storage = value; }
+        render() {
+            return html `
       <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
       <style>
         :host {
@@ -106,7 +183,21 @@ let WccSidebar = class WccSidebar extends DeesElement {
           color: #999;
           background: transparent;
         }
-        
+
+        .selectOption.folder {
+          grid-template-columns: 16px 20px 1fr;
+        }
+
+        .selectOption .expand-icon {
+          font-size: 14px;
+          opacity: 0.5;
+          transition: transform 0.2s ease;
+        }
+
+        .selectOption.expanded .expand-icon {
+          transform: rotate(90deg);
+        }
+
         .selectOption:hover {
           background: rgba(59, 130, 246, 0.05);
           color: #bbb;
@@ -139,6 +230,42 @@ let WccSidebar = class WccSidebar extends DeesElement {
           font-weight: 400;
         }
 
+        .demo-children {
+          margin-left: 1rem;
+          overflow: hidden;
+        }
+
+        .demo-child {
+          user-select: none;
+          position: relative;
+          margin: 0.125rem 0.5rem;
+          padding: 0.35rem 0.75rem;
+          transition: all 0.15s ease;
+          display: grid;
+          grid-template-columns: 16px 1fr;
+          align-items: center;
+          gap: 0.5rem;
+          border-radius: var(--radius);
+          cursor: pointer;
+          font-size: 0.7rem;
+          color: #777;
+          background: transparent;
+        }
+
+        .demo-child:hover {
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
+        }
+
+        .demo-child.selected {
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
+        }
+
+        .demo-child .material-symbols-outlined {
+          font-size: 14px;
+        }
+
         ::-webkit-scrollbar {
           width: 8px;
         }
@@ -159,81 +286,123 @@ let WccSidebar = class WccSidebar extends DeesElement {
       <div class="menu">
         <h3>Pages</h3>
         ${(() => {
-            const pages = Object.keys(this.dashboardRef.pages);
-            return pages.map(pageName => {
-                const item = this.dashboardRef.pages[pageName];
-                return html `
+                const pages = Object.keys(this.dashboardRef.pages);
+                return pages.map(pageName => {
+                    const item = this.dashboardRef.pages[pageName];
+                    return html `
               <div
                 class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                 @click=${async () => {
-                    const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                    this.selectItem('page', pageName, item);
-                }}
+                        const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+                        this.selectItem('page', pageName, item, 0);
+                    }}
               >
                 <i class="material-symbols-outlined">insert_drive_file</i>
                 <div class="text">${pageName}</div>
               </div>
             `;
-            });
-        })()}
+                });
+            })()}
         <h3>Elements</h3>
         ${(() => {
-            const elements = Object.keys(this.dashboardRef.elements);
-            return elements.map(elementName => {
-                const item = this.dashboardRef.elements[elementName];
-                return html `
-              <div
-                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
-                @click=${async () => {
-                    const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                    this.selectItem('element', elementName, item);
-                }}
-              >
-                <i class="material-symbols-outlined">featured_video</i>
-                <div class="text">${elementName}</div>
-              </div>
-            `;
-            });
-        })()}
+                const elements = Object.keys(this.dashboardRef.elements);
+                return elements.map(elementName => {
+                    const item = this.dashboardRef.elements[elementName];
+                    const demoCount = item.demo ? getDemoCount(item.demo) : 0;
+                    const isMultiDemo = item.demo && hasMultipleDemos(item.demo);
+                    const isExpanded = this.expandedElements.has(elementName);
+                    const isSelected = this.selectedItem === item;
+                    if (isMultiDemo) {
+                        // Multi-demo element - render as expandable folder
+                        return html `
+                <div
+                  class="selectOption folder ${isExpanded ? 'expanded' : ''} ${isSelected ? 'selected' : ''}"
+                  @click=${() => this.toggleExpanded(elementName)}
+                >
+                  <i class="material-symbols-outlined expand-icon">chevron_right</i>
+                  <i class="material-symbols-outlined">folder</i>
+                  <div class="text">${elementName}</div>
+                </div>
+                ${isExpanded ? html `
+                  <div class="demo-children">
+                    ${Array.from({ length: demoCount }, (_, i) => {
+                            const demoIndex = i;
+                            const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
+                            return html `
+                        <div
+                          class="demo-child ${isThisDemoSelected ? 'selected' : ''}"
+                          @click=${async () => {
+                                await plugins.deesDomtools.DomTools.setupDomTools();
+                                this.selectItem('element', elementName, item, demoIndex);
+                            }}
+                        >
+                          <i class="material-symbols-outlined">play_circle</i>
+                          <div class="text">demo${demoIndex + 1}</div>
+                        </div>
+                      `;
+                        })}
+                  </div>
+                ` : null}
+              `;
+                    }
+                    else {
+                        // Single demo element - render as normal
+                        return html `
+                <div
+                  class="selectOption ${isSelected ? 'selected' : null}"
+                  @click=${async () => {
+                            await plugins.deesDomtools.DomTools.setupDomTools();
+                            this.selectItem('element', elementName, item, 0);
+                        }}
+                >
+                  <i class="material-symbols-outlined">featured_video</i>
+                  <div class="text">${elementName}</div>
+                </div>
+              `;
+                    }
+                });
+            })()}
       </div>
     `;
-    }
-    selectItem(typeArg, itemNameArg, itemArg) {
-        console.log('selected item');
-        console.log(itemNameArg);
-        console.log(itemArg);
-        this.selectedItem = itemArg;
-        this.selectedType = typeArg;
-        this.dispatchEvent(new CustomEvent('selectedType', {
-            detail: typeArg
-        }));
-        this.dispatchEvent(new CustomEvent('selectedItemName', {
-            detail: itemNameArg
-        }));
-        this.dispatchEvent(new CustomEvent('selectedItem', {
-            detail: itemArg
-        }));
-        this.dashboardRef.buildUrl();
-    }
-};
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], WccSidebar.prototype, "selectedItem", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", String)
-], WccSidebar.prototype, "selectedType", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", WccDashboard)
-], WccSidebar.prototype, "dashboardRef", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Boolean)
-], WccSidebar.prototype, "isFullscreen", void 0);
-WccSidebar = __decorate([
-    customElement('wcc-sidebar')
-], WccSidebar);
+        }
+        toggleExpanded(elementName) {
+            const newSet = new Set(this.expandedElements);
+            if (newSet.has(elementName)) {
+                newSet.delete(elementName);
+            }
+            else {
+                newSet.add(elementName);
+            }
+            this.expandedElements = newSet;
+        }
+        selectItem(typeArg, itemNameArg, itemArg, demoIndex = 0) {
+            console.log('selected item');
+            console.log(itemNameArg);
+            console.log(itemArg);
+            console.log('demo index:', demoIndex);
+            this.selectedItem = itemArg;
+            this.selectedType = typeArg;
+            this.dashboardRef.selectedDemoIndex = demoIndex;
+            this.dispatchEvent(new CustomEvent('selectedType', {
+                detail: typeArg
+            }));
+            this.dispatchEvent(new CustomEvent('selectedItemName', {
+                detail: itemNameArg
+            }));
+            this.dispatchEvent(new CustomEvent('selectedItem', {
+                detail: itemArg
+            }));
+            this.dashboardRef.buildUrl();
+            // Force re-render to update demo child selection indicator
+            // (needed when switching between demos of the same element)
+            this.requestUpdate();
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _expandedElements_extraInitializers);
+        }
+    };
+    return WccSidebar = _classThis;
+})();
 export { WccSidebar };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXNpZGViYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXNpZGViYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSx3QkFBd0IsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQzlHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQU0zQyxJQUFNLFVBQVUsR0FBaEIsTUFBTSxVQUFXLFNBQVEsV0FBVztJQUFwQzs7UUFXRSxpQkFBWSxHQUFZLEtBQUssQ0FBQztJQWtOdkMsQ0FBQztJQWhOUSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3FCQW9CTSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE9BQU87Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O1VBMEgvQyxDQUFDLEdBQUcsRUFBRTtZQUNOLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNuRCxPQUFPLEtBQUssQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQzFCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUMvQyxPQUFPLElBQUksQ0FBQTs7c0NBRWUsSUFBSSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXNpZGViYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXNpZGViYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxPQUFPLE1BQU0sd0JBQXdCLENBQUM7QUFDbEQsT0FBTyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsS0FBSyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDckgsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRWxELE9BQU8sRUFBRSxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztJQUsxRCxVQUFVOzRCQUR0QixhQUFhLENBQUMsYUFBYSxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7MEJBQW5CLFNBQVEsV0FBVzs7Ozt3Q0FDeEMsUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDO3dDQUc5QixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7d0NBRzlCLFFBQVEsRUFBRTt3Q0FHVixRQUFRLEVBQUU7NENBSVYsS0FBSyxFQUFFO1lBWlIseUxBQVMsWUFBWSw2QkFBWixZQUFZLG1HQUFpQztZQUd0RCx5TEFBUyxZQUFZLDZCQUFaLFlBQVksbUdBQWU7WUFHcEMseUxBQVMsWUFBWSw2QkFBWixZQUFZLG1HQUFlO1lBR3BDLHlMQUFTLFlBQVksNkJBQVosWUFBWSxtR0FBa0I7WUFJdkMscU1BQVMsZ0JBQWdCLDZCQUFoQixnQkFBZ0IsMkdBQTBCO1lBZnJELDZLQTJVQzs7O1lBM1VZLHVEQUFVOztRQUVyQiw2RkFBc0Q7UUFBdEQsSUFBUyxZQUFZLGtEQUFpQztRQUF0RCxJQUFTLFlBQVksd0RBQWlDO1FBR3RELHlKQUFvQztRQUFwQyxJQUFTLFlB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

package/dist_ts_web/elements/wcctools.helpers.d.ts

@@ -1,3 +1,16 @@
 import type { TemplateResult } from 'lit';
 export type TTemplateFactory = () => TemplateResult | Promise<TemplateResult>;
+export type TDemoDefinition = TTemplateFactory | TTemplateFactory[];
 export declare const resolveTemplateFactory: (factoryArg: TTemplateFactory) => Promise<TemplateResult>;
+/**
+ * Get the number of demos for an element
+ */
+export declare const getDemoCount: (demo: TDemoDefinition) => number;
+/**
+ * Get a specific demo by index (0-based internally, displayed as 1-based)
+ */
+export declare const getDemoAtIndex: (demo: TDemoDefinition, index: number) => TTemplateFactory | null;
+/**
+ * Check if an element has multiple demos
+ */
+export declare const hasMultipleDemos: (demo: TDemoDefinition) => boolean;

package/dist_ts_web/elements/wcctools.helpers.js

@@ -1,4 +1,29 @@
 export const resolveTemplateFactory = async (factoryArg) => {
     return await Promise.resolve(factoryArg());
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjdG9vbHMuaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy93Y2N0b29scy5oZWxwZXJzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlBLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLEtBQUssRUFDekMsVUFBNEIsRUFDSCxFQUFFO0lBQzNCLE9BQU8sTUFBTSxPQUFPLENBQUMsT0FBTyxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUM7QUFDN0MsQ0FBQyxDQUFDIn0=
+/**
+ * Get the number of demos for an element
+ */
+export const getDemoCount = (demo) => {
+    if (Array.isArray(demo)) {
+        return demo.length;
+    }
+    return 1;
+};
+/**
+ * Get a specific demo by index (0-based internally, displayed as 1-based)
+ */
+export const getDemoAtIndex = (demo, index) => {
+    if (Array.isArray(demo)) {
+        return demo[index] ?? null;
+    }
+    // Single demo - only index 0 is valid
+    return index === 0 ? demo : null;
+};
+/**
+ * Check if an element has multiple demos
+ */
+export const hasMultipleDemos = (demo) => {
+    return Array.isArray(demo) && demo.length > 1;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjdG9vbHMuaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy93Y2N0b29scy5oZWxwZXJzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9BLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLEtBQUssRUFDekMsVUFBNEIsRUFDSCxFQUFFO0lBQzNCLE9BQU8sTUFBTSxPQUFPLENBQUMsT0FBTyxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUM7QUFDN0MsQ0FBQyxDQUFDO0FBRUY7O0dBRUc7QUFDSCxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxJQUFxQixFQUFVLEVBQUU7SUFDNUQsSUFBSSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7UUFDeEIsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFDRCxPQUFPLENBQUMsQ0FBQztBQUNYLENBQUMsQ0FBQztBQUVGOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLENBQUMsSUFBcUIsRUFBRSxLQUFhLEVBQTJCLEVBQUU7SUFDOUYsSUFBSSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7UUFDeEIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDO0lBQzdCLENBQUM7SUFDRCxzQ0FBc0M7SUFDdEMsT0FBTyxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztBQUNuQyxDQUFDLENBQUM7QUFFRjs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLENBQUMsSUFBcUIsRUFBVyxFQUFFO0lBQ2pFLE9BQU8sS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztBQUNoRCxDQUFDLENBQUMifQ==

package/dist_ts_web/index.d.ts

@@ -1,5 +1,8 @@
 import { LitElement } from 'lit';
 import type { TTemplateFactory } from './elements/wcctools.helpers.js';
+export { RecorderService, type IRecorderEvents, type IRecordingOptions } from './services/recorder.service.js';
+export { WccRecordButton } from './elements/wcc-record-button.js';
+export { WccRecordingPanel } from './elements/wcc-recording-panel.js';
 declare const setupWccTools: (elementsArg?: {
     [key: string]: LitElement;
 }, pagesArg?: Record<string, TTemplateFactory>) => void;

package/dist_ts_web/index.js

@@ -1,5 +1,9 @@
 import { WccDashboard } from './elements/wcc-dashboard.js';
 import { LitElement } from 'lit';
+// Export recording components and service
+export { RecorderService } from './services/recorder.service.js';
+export { WccRecordButton } from './elements/wcc-record-button.js';
+export { WccRecordingPanel } from './elements/wcc-recording-panel.js';
 const setupWccTools = (elementsArg, pagesArg) => {
     let hasRun = false;
     const runWccToolsSetup = async () => {
@@ -13,4 +17,4 @@ const setupWccTools = (elementsArg, pagesArg) => {
     runWccToolsSetup();
 };
 export { setupWccTools };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90c193ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzNELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxLQUFLLENBQUM7QUFHakMsTUFBTSxhQUFhLEdBQUcsQ0FDcEIsV0FBMkMsRUFDM0MsUUFBMkMsRUFDM0MsRUFBRTtJQUNGLElBQUksTUFBTSxHQUFHLEtBQUssQ0FBQztJQUNuQixNQUFNLGdCQUFnQixHQUFHLEtBQUssSUFBSSxFQUFFO1FBQ2xDLElBQUksUUFBUSxDQUFDLFVBQVUsS0FBSyxVQUFVLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNsRCxNQUFNLEdBQUcsSUFBSSxDQUFDO1lBQ2QsTUFBTSxRQUFRLEdBQUcsSUFBSSxZQUFZLENBQUMsV0FBa0IsRUFBRSxRQUFRLENBQUMsQ0FBQztZQUNoRSxRQUFRLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNsRCxDQUFDO0lBQ0gsQ0FBQyxDQUFDO0lBQ0YsUUFBUSxDQUFDLGdCQUFnQixDQUFDLGtCQUFrQixFQUFFLGdCQUFnQixDQUFDLENBQUM7SUFDaEUsZ0JBQWdCLEVBQUUsQ0FBQztBQUNyQixDQUFDLENBQUM7QUFFRixPQUFPLEVBQ0wsYUFBYSxFQUNkLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90c193ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzNELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxLQUFLLENBQUM7QUFHakMsMENBQTBDO0FBQzFDLE9BQU8sRUFBRSxlQUFlLEVBQWdELE1BQU0sZ0NBQWdDLENBQUM7QUFDL0csT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBRXRFLE1BQU0sYUFBYSxHQUFHLENBQ3BCLFdBQTJDLEVBQzNDLFFBQTJDLEVBQzNDLEVBQUU7SUFDRixJQUFJLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDbkIsTUFBTSxnQkFBZ0IsR0FBRyxLQUFLLElBQUksRUFBRTtRQUNsQyxJQUFJLFFBQVEsQ0FBQyxVQUFVLEtBQUssVUFBVSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDbEQsTUFBTSxHQUFHLElBQUksQ0FBQztZQUNkLE1BQU0sUUFBUSxHQUFHLElBQUksWUFBWSxDQUFDLFdBQWtCLEVBQUUsUUFBUSxDQUFDLENBQUM7WUFDaEUsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDbEQsQ0FBQztJQUNILENBQUMsQ0FBQztJQUNGLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsRUFBRSxnQkFBZ0IsQ0FBQyxDQUFDO0lBQ2hFLGdCQUFnQixFQUFFLENBQUM7QUFDckIsQ0FBQyxDQUFDO0FBRUYsT0FBTyxFQUNMLGFBQWEsRUFDZCxDQUFDIn0=

package/dist_ts_web/services/ffmpeg.service.d.ts

@@ -0,0 +1,42 @@
+/**
+ * FFmpegService - Handles client-side video format conversion using FFmpeg.wasm
+ * Uses a custom worker implementation to bypass COEP/CORS issues with the standard library
+ */
+export interface IConversionProgress {
+    stage: 'loading' | 'converting' | 'finalizing';
+    progress: number;
+    message: string;
+}
+export interface IConversionOptions {
+    inputBlob: Blob;
+    outputFormat: 'mp4' | 'webm';
+    onProgress?: (progress: IConversionProgress) => void;
+}
+export declare class FFmpegService {
+    private worker;
+    private core;
+    private loadPromise;
+    private messageId;
+    private pendingMessages;
+    private onLog?;
+    private onProgress?;
+    /**
+     * Lazy load FFmpeg.wasm from CDN using custom worker
+     */
+    ensureLoaded(onProgress?: (progress: IConversionProgress) => void): Promise<void>;
+    private loadFFmpeg;
+    private sendMessage;
+    /**
+     * Convert WebM blob to MP4
+     */
+    convertToMp4(options: IConversionOptions): Promise<Blob>;
+    /**
+     * Check if FFmpeg is currently loaded
+     */
+    get isLoaded(): boolean;
+    /**
+     * Terminate FFmpeg worker to free resources
+     */
+    terminate(): Promise<void>;
+}
+export declare function getFFmpegService(): FFmpegService;