@design.estate/dees-wcctools 1.3.0 → 2.0.0

package/dist_watch/bundle.js

@@ -41362,6 +41362,21 @@ var cssManager = CssManager.getSingleton();
 var resolveTemplateFactory = async (factoryArg) => {
   return await Promise.resolve(factoryArg());
 };
+var getDemoCount = (demo) => {
+  if (Array.isArray(demo)) {
+    return demo.length;
+  }
+  return 1;
+};
+var getDemoAtIndex = (demo, index2) => {
+  if (Array.isArray(demo)) {
+    return demo[index2] ?? null;
+  }
+  return index2 === 0 ? demo : null;
+};
+var hasMultipleDemos = (demo) => {
+  return Array.isArray(demo) && demo.length > 1;
+};
 
 // ts_web/elements/wcc-frame.ts
 var _isFullscreen_dec, _advancedEditorOpen_dec, _viewport_dec, _a, _WccFrame_decorators, _init, _viewport, _advancedEditorOpen, _isFullscreen;
@@ -41482,15 +41497,16 @@ __publicField(WccFrame, "styles", [
 __runInitializers(_init, 1, WccFrame);
 
 // ts_web/elements/wcc-sidebar.ts
-var _isFullscreen_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isFullscreen2;
+var _expandedElements_dec, _isFullscreen_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isFullscreen2, _expandedElements;
 _WccSidebar_decorators = [t4("wcc-sidebar")];
-var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isFullscreen_dec2 = [n5()], _a2) {
+var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isFullscreen_dec2 = [n5()], _expandedElements_dec = [r5()], _a2) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _selectedItem, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
     __privateAdd(this, _selectedType, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
     __privateAdd(this, _dashboardRef, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
     __privateAdd(this, _isFullscreen2, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
+    __privateAdd(this, _expandedElements, __runInitializers(_init2, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 27, this);
   }
   render() {
     return x`
@@ -41583,7 +41599,21 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           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;
@@ -41616,6 +41646,42 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           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;
         }
@@ -41644,7 +41710,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
                 class="selectOption ${this.selectedItem === item ? "selected" : null}"
                 @click=${async () => {
           const domtools2 = await dist_ts_exports25.DomTools.setupDomTools();
-          this.selectItem("page", pageName, item);
+          this.selectItem("page", pageName, item, 0);
         }}
               >
                 <i class="material-symbols-outlined">insert_drive_file</i>
@@ -41658,29 +41724,77 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
       const elements = Object.keys(this.dashboardRef.elements);
       return elements.map((elementName) => {
         const item = this.dashboardRef.elements[elementName];
-        return x`
-              <div
-                class="selectOption ${this.selectedItem === item ? "selected" : null}"
-                @click=${async () => {
-          const domtools2 = await dist_ts_exports25.DomTools.setupDomTools();
-          this.selectItem("element", elementName, item);
-        }}
-              >
-                <i class="material-symbols-outlined">featured_video</i>
-                <div class="text">${elementName}</div>
-              </div>
-            `;
+        const demoCount = item.demo ? getDemoCount(item.demo) : 0;
+        const isMultiDemo = item.demo && hasMultipleDemos(item.demo);
+        const isExpanded = this.expandedElements.has(elementName);
+        const isSelected = this.selectedItem === item;
+        if (isMultiDemo) {
+          return x`
+                <div
+                  class="selectOption folder ${isExpanded ? "expanded" : ""} ${isSelected ? "selected" : ""}"
+                  @click=${() => this.toggleExpanded(elementName)}
+                >
+                  <i class="material-symbols-outlined expand-icon">chevron_right</i>
+                  <i class="material-symbols-outlined">folder</i>
+                  <div class="text">${elementName}</div>
+                </div>
+                ${isExpanded ? x`
+                  <div class="demo-children">
+                    ${Array.from({ length: demoCount }, (_3, i9) => {
+            const demoIndex = i9;
+            const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
+            return x`
+                        <div
+                          class="demo-child ${isThisDemoSelected ? "selected" : ""}"
+                          @click=${async () => {
+              await dist_ts_exports25.DomTools.setupDomTools();
+              this.selectItem("element", elementName, item, demoIndex);
+            }}
+                        >
+                          <i class="material-symbols-outlined">play_circle</i>
+                          <div class="text">demo${demoIndex + 1}</div>
+                        </div>
+                      `;
+          })}
+                  </div>
+                ` : null}
+              `;
+        } else {
+          return x`
+                <div
+                  class="selectOption ${isSelected ? "selected" : null}"
+                  @click=${async () => {
+            await dist_ts_exports25.DomTools.setupDomTools();
+            this.selectItem("element", elementName, item, 0);
+          }}
+                >
+                  <i class="material-symbols-outlined">featured_video</i>
+                  <div class="text">${elementName}</div>
+                </div>
+              `;
+        }
       });
     })()}
       </div>
     `;
   }
-  selectItem(typeArg, itemNameArg, itemArg) {
+  toggleExpanded(elementName) {
+    const newSet = new Set(this.expandedElements);
+    if (newSet.has(elementName)) {
+      newSet.delete(elementName);
+    } else {
+      newSet.add(elementName);
+    }
+    this.expandedElements = newSet;
+  }
+  selectItem(typeArg, itemNameArg, itemArg, demoIndex = 0) {
     console.log("selected item");
     console.log(itemNameArg);
     console.log(itemArg);
+    console.log("demo index:", demoIndex);
     this.selectedItem = itemArg;
     this.selectedType = typeArg;
+    this.dashboardRef.selectedDemoIndex = demoIndex;
     this.dispatchEvent(
       new CustomEvent("selectedType", {
         detail: typeArg
@@ -41697,6 +41811,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
       })
     );
     this.dashboardRef.buildUrl();
+    this.requestUpdate();
   }
 };
 _init2 = __decoratorStart(_a2);
@@ -41704,10 +41819,12 @@ _selectedItem = new WeakMap();
 _selectedType = new WeakMap();
 _dashboardRef = new WeakMap();
 _isFullscreen2 = new WeakMap();
+_expandedElements = new WeakMap();
 __decorateElement(_init2, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
 __decorateElement(_init2, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
 __decorateElement(_init2, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
 __decorateElement(_init2, 4, "isFullscreen", _isFullscreen_dec2, WccSidebar, _isFullscreen2);
+__decorateElement(_init2, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
 WccSidebar = __decorateElement(_init2, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
 __runInitializers(_init2, 1, WccSidebar);
 
@@ -41991,8 +42108,9 @@ var RecorderService = class {
       this.durationInterval = null;
     }
   }
-  handleRecordingComplete() {
-    this._recordedBlob = new Blob(this.recordedChunks, { type: "video/webm" });
+  async handleRecordingComplete() {
+    const blob = new Blob(this.recordedChunks, { type: "video/webm" });
+    this._recordedBlob = blob;
     if (this.currentStream) {
       this.currentStream.getTracks().forEach((track2) => track2.stop());
       this.currentStream = null;
@@ -42286,6 +42404,7 @@ var WccRecordingPanel = class extends (_a4 = DeesElement, _dashboardRef_dec2 = [
                 </button>
               </div>
             </div>
+
           </div>
           <div class="preview-modal-actions">
             <button class="preview-btn secondary" @click=${() => this.discardRecording()}>Discard</button>
@@ -42294,7 +42413,7 @@ var WccRecordingPanel = class extends (_a4 = DeesElement, _dashboardRef_dec2 = [
               ?disabled=${this.isExporting}
               @click=${() => this.downloadRecording()}
             >
-              ${this.isExporting ? x`<span class="export-spinner"></span>Exporting...` : "Download"}
+              ${this.isExporting ? x`<span class="export-spinner"></span>Exporting...` : "Download WebM"}
             </button>
           </div>
         </div>
@@ -43008,6 +43127,7 @@ __publicField(WccRecordingPanel, "styles", [
       @keyframes spin {
         to { transform: rotate(360deg); }
       }
+
     `
 ]);
 __runInitializers(_init4, 1, WccRecordingPanel);
@@ -43992,24 +44112,25 @@ WccProperties = __decorateElement(_init5, 0, "WccProperties", _WccProperties_dec
 __runInitializers(_init5, 1, WccProperties);
 
 // ts_web/elements/wcc-dashboard.ts
-var _wccFrame_dec, _warning_dec2, _elements_dec, _pages_dec, _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;
+var _wccFrame_dec, _warning_dec2, _elements_dec, _pages_dec, _isFullscreen_dec4, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _a6, _WccDashboard_decorators, _init6, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _isFullscreen4, _pages, _elements, _warning2, _wccFrame;
 _WccDashboard_decorators = [t4("wcc-dashboard")];
-var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _isFullscreen_dec4 = [n5()], _pages_dec = [n5()], _elements_dec = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
+var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _isFullscreen_dec4 = [n5()], _pages_dec = [n5()], _elements_dec = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
   constructor(elementsArg, pagesArg) {
     super();
     __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);
+    __privateAdd(this, _selectedDemoIndex, __runInitializers(_init6, 20, this, 0)), __runInitializers(_init6, 23, this);
+    __privateAdd(this, _selectedViewport2, __runInitializers(_init6, 24, this, "desktop")), __runInitializers(_init6, 27, this);
+    __privateAdd(this, _selectedTheme2, __runInitializers(_init6, 28, this, "dark")), __runInitializers(_init6, 31, this);
+    __privateAdd(this, _isFullscreen4, __runInitializers(_init6, 32, this, false)), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _pages, __runInitializers(_init6, 36, this, {})), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _elements, __runInitializers(_init6, 40, this, {})), __runInitializers(_init6, 43, this);
+    __privateAdd(this, _warning2, __runInitializers(_init6, 44, this, null)), __runInitializers(_init6, 47, this);
     __publicField(this, "frameScrollY", 0);
     __publicField(this, "sidebarScrollY", 0);
     __publicField(this, "scrollPositionsApplied", false);
-    __privateAdd(this, _wccFrame, __runInitializers(_init6, 44, this)), __runInitializers(_init6, 47, this);
+    __privateAdd(this, _wccFrame, __runInitializers(_init6, 48, this)), __runInitializers(_init6, 51, this);
     __publicField(this, "scrollUpdateTimeout");
     __publicField(this, "scrollListenersAttached", false);
     if (elementsArg) {
@@ -44098,11 +44219,42 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     setTimeout(() => {
       this.setupScrollListeners();
     }, 500);
+    this.domtools.router.on(
+      "/wcctools-route/:itemType/:itemName/:demoIndex/:viewport/:theme",
+      async (routeInfo) => {
+        this.selectedType = routeInfo.params.itemType;
+        this.selectedItemName = routeInfo.params.itemName;
+        this.selectedDemoIndex = parseInt(routeInfo.params.demoIndex) || 0;
+        this.selectedViewport = routeInfo.params.viewport;
+        this.selectedTheme = routeInfo.params.theme;
+        if (routeInfo.params.itemType === "element") {
+          this.selectedItem = this.elements[routeInfo.params.itemName];
+        } else if (routeInfo.params.itemType === "page") {
+          this.selectedItem = this.pages[routeInfo.params.itemName];
+        }
+        if (routeInfo.queryParams) {
+          const frameScrollY = routeInfo.queryParams.frameScrollY;
+          const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          if (frameScrollY) {
+            this.frameScrollY = parseInt(frameScrollY);
+          }
+          if (sidebarScrollY) {
+            this.sidebarScrollY = parseInt(sidebarScrollY);
+          }
+          setTimeout(() => {
+            this.applyScrollPositions();
+          }, 100);
+        }
+        const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
+        this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
+      }
+    );
     this.domtools.router.on(
       "/wcctools-route/:itemType/:itemName/:viewport/:theme",
       async (routeInfo) => {
         this.selectedType = routeInfo.params.itemType;
         this.selectedItemName = routeInfo.params.itemName;
+        this.selectedDemoIndex = 0;
         this.selectedViewport = routeInfo.params.viewport;
         this.selectedTheme = routeInfo.params.theme;
         if (routeInfo.params.itemType === "element") {
@@ -44155,20 +44307,29 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
         this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
         return;
       }
-      if (!(typeof anonItem.demo === "function")) {
+      const isArray3 = Array.isArray(anonItem.demo);
+      const isFunction2 = typeof anonItem.demo === "function";
+      if (!isArray3 && !isFunction2) {
+        this.setWarning(
+          `component ${anonItem.name} has demo property, but it is not a function or array of functions`
+        );
+        return;
+      }
+      const demoFactory = getDemoAtIndex(anonItem.demo, this.selectedDemoIndex);
+      if (!demoFactory) {
         this.setWarning(
-          `component ${anonItem.name} has demo property, but it is not of type function`
+          `component ${anonItem.name} does not have a demo at index ${this.selectedDemoIndex + 1}`
         );
         return;
       }
       this.setWarning(null);
       const viewport = await wccFrame.getViewportElement();
-      const demoTemplate = await resolveTemplateFactory(() => anonItem.demo());
+      const demoTemplate = await resolveTemplateFactory(demoFactory);
       B(demoTemplate, viewport);
     }
   }
   buildUrl() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -44207,7 +44368,7 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     }, 300);
   }
   updateUrlWithScrollState() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -44238,6 +44399,7 @@ _init6 = __decoratorStart(_a6);
 _selectedType2 = new WeakMap();
 _selectedItemName = new WeakMap();
 _selectedItem3 = new WeakMap();
+_selectedDemoIndex = new WeakMap();
 _selectedViewport2 = new WeakMap();
 _selectedTheme2 = new WeakMap();
 _isFullscreen4 = new WeakMap();
@@ -44248,6 +44410,7 @@ _wccFrame = new WeakMap();
 __decorateElement(_init6, 4, "selectedType", _selectedType_dec2, WccDashboard2, _selectedType2);
 __decorateElement(_init6, 4, "selectedItemName", _selectedItemName_dec, WccDashboard2, _selectedItemName);
 __decorateElement(_init6, 4, "selectedItem", _selectedItem_dec3, WccDashboard2, _selectedItem3);
+__decorateElement(_init6, 4, "selectedDemoIndex", _selectedDemoIndex_dec, WccDashboard2, _selectedDemoIndex);
 __decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec2, WccDashboard2, _selectedViewport2);
 __decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
 __decorateElement(_init6, 4, "isFullscreen", _isFullscreen_dec4, WccDashboard2, _isFullscreen4);
@@ -44346,7 +44509,11 @@ __decorateElement(_init7, 4, "demoString", _demoString_dec, TestDemoelement, _de
 __decorateElement(_init7, 4, "demoNumber", _demoNumber_dec, TestDemoelement, _demoNumber);
 __decorateElement(_init7, 4, "demoENum", _demoENum_dec, TestDemoelement, _demoENum);
 TestDemoelement = __decorateElement(_init7, 0, "TestDemoelement", _TestDemoelement_decorators, TestDemoelement);
-__publicField(TestDemoelement, "demo", () => x`<test-demoelement>This is a slot text</test-demoelement>`);
+__publicField(TestDemoelement, "demo", [
+  () => x`<test-demoelement>This is demo 1</test-demoelement>`,
+  () => x`<test-demoelement>This is demo 2</test-demoelement>`,
+  () => x`<test-demoelement>This is demo 2</test-demoelement>`
+]);
 __publicField(TestDemoelement, "styles", [
   i`
       .maincontainer,