@design.estate/dees-wcctools 3.2.0 → 3.3.0

package/dist_bundle/bundle.js

@@ -41663,9 +41663,9 @@ __publicField(WccFrame, "styles", [
 __runInitializers(_init, 1, WccFrame);
 
 // ts_web/elements/wcc-sidebar.ts
-var _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements;
+var _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections;
 _WccSidebar_decorators = [t4("wcc-sidebar")];
-var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _a2) {
+var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _collapsedSections_dec = [r5()], _a2) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _selectedItem, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
@@ -41673,6 +41673,8 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     __privateAdd(this, _dashboardRef, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
     __privateAdd(this, _isNative2, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
     __privateAdd(this, _expandedElements, __runInitializers(_init2, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 27, this);
+    __privateAdd(this, _collapsedSections, __runInitializers(_init2, 28, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 31, this);
+    __publicField(this, "sectionsInitialized", false);
   }
   render() {
     return x`
@@ -41715,7 +41717,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           padding: 0.5rem 0;
         }
 
-        h3 {
+        .section-header {
           padding: 0.3rem 0.75rem;
           font-size: 0.65rem;
           font-weight: 500;
@@ -41727,12 +41729,45 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           background: rgba(59, 130, 246, 0.03);
           border-bottom: 1px solid var(--border);
           border-top: 1px solid var(--border);
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          cursor: pointer;
+          user-select: none;
+          transition: all 0.15s ease;
         }
 
-        h3:first-child {
+        .section-header:first-child {
           margin-top: 0;
         }
 
+        .section-header:hover {
+          background: rgba(59, 130, 246, 0.08);
+        }
+
+        .section-header .expand-icon {
+          font-size: 14px;
+          opacity: 0.5;
+          transition: transform 0.2s ease;
+        }
+
+        .section-header.collapsed .expand-icon {
+          transform: rotate(-90deg);
+        }
+
+        .section-header .section-icon {
+          font-size: 14px;
+          opacity: 0.6;
+        }
+
+        .section-content {
+          overflow: hidden;
+        }
+
+        .section-content.collapsed {
+          display: none;
+        }
+
         .material-symbols-outlined {
           font-family: 'Material Symbols Outlined';
           font-weight: normal;
@@ -41866,83 +41901,130 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         }
       </style>
       <div class="menu">
-        <h3>Pages</h3>
-        ${(() => {
-      const pages = Object.keys(this.dashboardRef.pages);
-      return pages.map((pageName) => {
-        const item = this.dashboardRef.pages[pageName];
+        ${this.renderSections()}
+      </div>
+    `;
+  }
+  /**
+   * Initialize collapsed sections from section config
+   */
+  initCollapsedSections() {
+    if (this.sectionsInitialized) return;
+    const collapsed = /* @__PURE__ */ new Set();
+    for (const section of this.dashboardRef.sections) {
+      if (section.collapsed) {
+        collapsed.add(section.name);
+      }
+    }
+    this.collapsedSections = collapsed;
+    this.sectionsInitialized = true;
+  }
+  /**
+   * Render all sections
+   */
+  renderSections() {
+    this.initCollapsedSections();
+    return this.dashboardRef.sections.map((section, index2) => {
+      const isCollapsed = this.collapsedSections.has(section.name);
+      const sectionIcon = section.icon || (section.type === "pages" ? "insert_drive_file" : "widgets");
+      return x`
+        <div
+          class="section-header ${isCollapsed ? "collapsed" : ""}"
+          @click=${() => this.toggleSectionCollapsed(section.name)}
+        >
+          <i class="material-symbols-outlined expand-icon">expand_more</i>
+          ${section.icon ? x`<i class="material-symbols-outlined section-icon">${section.icon}</i>` : null}
+          <span>${section.name}</span>
+        </div>
+        <div class="section-content ${isCollapsed ? "collapsed" : ""}">
+          ${this.renderSectionItems(section)}
+        </div>
+      `;
+    });
+  }
+  /**
+   * Render items for a section
+   */
+  renderSectionItems(section) {
+    const entries = getSectionItems(section);
+    if (section.type === "pages") {
+      return entries.map(([pageName, item]) => {
         return x`
-              <div
-                class="selectOption ${this.selectedItem === item ? "selected" : null}"
-                @click=${async () => {
-          const domtools2 = await dist_ts_exports25.DomTools.setupDomTools();
-          this.selectItem("page", pageName, item, 0);
+          <div
+            class="selectOption ${this.selectedItem === item ? "selected" : ""}"
+            @click=${async () => {
+          await dist_ts_exports25.DomTools.setupDomTools();
+          this.selectItem("page", pageName, item, 0, section);
         }}
-              >
-                <i class="material-symbols-outlined">insert_drive_file</i>
-                <div class="text">${pageName}</div>
-              </div>
-            `;
+          >
+            <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];
-        const demoCount = item.demo ? getDemoCount(item.demo) : 0;
-        const isMultiDemo = item.demo && hasMultipleDemos(item.demo);
+    } else {
+      return entries.map(([elementName, item]) => {
+        const anonItem = item;
+        const demoCount = anonItem.demo ? getDemoCount(anonItem.demo) : 0;
+        const isMultiDemo = anonItem.demo && hasMultipleDemos(anonItem.demo);
         const isExpanded = this.expandedElements.has(elementName);
         const isSelected = this.selectedItem === item;
         if (isMultiDemo) {
           return x`
-                <div
-                  class="selectOption folder ${isExpanded ? "expanded" : ""} ${isSelected ? "selected" : ""}"
-                  @click=${() => this.toggleExpanded(elementName)}
-                >
-                  <i class="material-symbols-outlined expand-icon">chevron_right</i>
-                  <i class="material-symbols-outlined">folder</i>
-                  <div class="text">${elementName}</div>
-                </div>
-                ${isExpanded ? x`
-                  <div class="demo-children">
-                    ${Array.from({ length: demoCount }, (_3, i9) => {
+            <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 () => {
+                    <div
+                      class="demo-child ${isThisDemoSelected ? "selected" : ""}"
+                      @click=${async () => {
               await dist_ts_exports25.DomTools.setupDomTools();
-              this.selectItem("element", elementName, item, demoIndex);
+              this.selectItem("element", elementName, item, demoIndex, section);
             }}
-                        >
-                          <i class="material-symbols-outlined">play_circle</i>
-                          <div class="text">demo${demoIndex + 1}</div>
-                        </div>
-                      `;
+                    >
+                      <i class="material-symbols-outlined">play_circle</i>
+                      <div class="text">demo${demoIndex + 1}</div>
+                    </div>
+                  `;
           })}
-                  </div>
-                ` : null}
-              `;
+              </div>
+            ` : null}
+          `;
         } else {
           return x`
-                <div
-                  class="selectOption ${isSelected ? "selected" : null}"
-                  @click=${async () => {
+            <div
+              class="selectOption ${isSelected ? "selected" : ""}"
+              @click=${async () => {
             await dist_ts_exports25.DomTools.setupDomTools();
-            this.selectItem("element", elementName, item, 0);
+            this.selectItem("element", elementName, item, 0, section);
           }}
-                >
-                  <i class="material-symbols-outlined">featured_video</i>
-                  <div class="text">${elementName}</div>
-                </div>
-              `;
+            >
+              <i class="material-symbols-outlined">featured_video</i>
+              <div class="text">${elementName}</div>
+            </div>
+          `;
         }
       });
-    })()}
-      </div>
-    `;
+    }
+  }
+  toggleSectionCollapsed(sectionName) {
+    const newSet = new Set(this.collapsedSections);
+    if (newSet.has(sectionName)) {
+      newSet.delete(sectionName);
+    } else {
+      newSet.add(sectionName);
+    }
+    this.collapsedSections = newSet;
   }
   toggleExpanded(elementName) {
     const newSet = new Set(this.expandedElements);
@@ -41956,29 +42038,37 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("selectedItem") && this.selectedItem) {
-      const elementName = Object.keys(this.dashboardRef.elements).find(
-        (name) => this.dashboardRef.elements[name] === this.selectedItem
-      );
-      if (elementName) {
-        const item = this.dashboardRef.elements[elementName];
-        if (item.demo && hasMultipleDemos(item.demo)) {
-          if (!this.expandedElements.has(elementName)) {
-            const newSet = new Set(this.expandedElements);
-            newSet.add(elementName);
-            this.expandedElements = newSet;
+      for (const section of this.dashboardRef.sections) {
+        if (section.type !== "elements") continue;
+        const entries = getSectionItems(section);
+        const found = entries.find(([_3, item]) => item === this.selectedItem);
+        if (found) {
+          const [elementName, item] = found;
+          const anonItem = item;
+          if (anonItem.demo && hasMultipleDemos(anonItem.demo)) {
+            if (!this.expandedElements.has(elementName)) {
+              const newSet = new Set(this.expandedElements);
+              newSet.add(elementName);
+              this.expandedElements = newSet;
+            }
           }
+          break;
         }
       }
     }
   }
-  selectItem(typeArg, itemNameArg, itemArg, demoIndex = 0) {
+  selectItem(typeArg, itemNameArg, itemArg, demoIndex = 0, section) {
     console.log("selected item");
     console.log(itemNameArg);
     console.log(itemArg);
     console.log("demo index:", demoIndex);
+    console.log("section:", section?.name);
     this.selectedItem = itemArg;
     this.selectedType = typeArg;
     this.dashboardRef.selectedDemoIndex = demoIndex;
+    if (section) {
+      this.dashboardRef.selectedSection = section;
+    }
     this.dispatchEvent(
       new CustomEvent("selectedType", {
         detail: typeArg
@@ -42004,11 +42094,13 @@ _selectedType = new WeakMap();
 _dashboardRef = new WeakMap();
 _isNative2 = new WeakMap();
 _expandedElements = new WeakMap();
+_collapsedSections = new WeakMap();
 __decorateElement(_init2, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
 __decorateElement(_init2, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
 __decorateElement(_init2, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
 __decorateElement(_init2, 4, "isNative", _isNative_dec2, WccSidebar, _isNative2);
 __decorateElement(_init2, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
+__decorateElement(_init2, 4, "collapsedSections", _collapsedSections_dec, WccSidebar, _collapsedSections);
 WccSidebar = __decorateElement(_init2, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
 __runInitializers(_init2, 1, WccSidebar);
 
@@ -44320,19 +44412,29 @@ 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, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _a6, _WccDashboard_decorators, _init6, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _pages, _elements, _warning2, _wccFrame;
+var _wccFrame_dec, _warning_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a6, _WccDashboard_decorators, _init6, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _warning2, _wccFrame;
+var getSectionItems = (section) => {
+  let entries = Object.entries(section.items);
+  if (section.filter) {
+    entries = entries.filter(([name, item]) => section.filter(name, item));
+  }
+  if (section.sort) {
+    entries.sort(section.sort);
+  }
+  return entries;
+};
 _WccDashboard_decorators = [t4("wcc-dashboard")];
-var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _pages_dec = [n5()], _elements_dec = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
-  constructor(elementsArg, pagesArg) {
+var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _selectedSection_dec = [n5()], _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
+  constructor(config2) {
     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, _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, _pages, __runInitializers(_init6, 32, this, {})), __runInitializers(_init6, 35, this);
-    __privateAdd(this, _elements, __runInitializers(_init6, 36, this, {})), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _sections, __runInitializers(_init6, 8, this, [])), __runInitializers(_init6, 11, this);
+    __privateAdd(this, _selectedSection, __runInitializers(_init6, 12, this, null)), __runInitializers(_init6, 15, this);
+    __privateAdd(this, _selectedType2, __runInitializers(_init6, 16, this)), __runInitializers(_init6, 19, this);
+    __privateAdd(this, _selectedItemName, __runInitializers(_init6, 20, this)), __runInitializers(_init6, 23, this);
+    __privateAdd(this, _selectedItem3, __runInitializers(_init6, 24, this)), __runInitializers(_init6, 27, this);
+    __privateAdd(this, _selectedDemoIndex, __runInitializers(_init6, 28, this, 0)), __runInitializers(_init6, 31, this);
+    __privateAdd(this, _selectedViewport2, __runInitializers(_init6, 32, this, "desktop")), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _selectedTheme2, __runInitializers(_init6, 36, this, "dark")), __runInitializers(_init6, 39, this);
     __privateAdd(this, _warning2, __runInitializers(_init6, 40, this, null)), __runInitializers(_init6, 43, this);
     __publicField(this, "frameScrollY", 0);
     __publicField(this, "sidebarScrollY", 0);
@@ -44340,19 +44442,34 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     __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:");
-      console.log(this.elements);
-    }
-    if (pagesArg) {
-      this.pages = pagesArg;
+    if (config2 && config2.sections) {
+      this.sections = config2.sections;
+      console.log("got sections:", this.sections.map((s8) => s8.name));
     }
   }
   // Derived from selectedViewport - no need for separate property
   get isNative() {
     return this.selectedViewport === "native";
   }
+  /**
+   * Find an item by name across all sections, returns the item and its section
+   */
+  findItemByName(name) {
+    for (const section of this.sections) {
+      const entries = getSectionItems(section);
+      const found = entries.find(([itemName]) => itemName === name);
+      if (found) {
+        return { item: found[1], section };
+      }
+    }
+    return null;
+  }
+  /**
+   * Find a section by name (URL-decoded)
+   */
+  findSectionByName(name) {
+    return this.sections.find((s8) => s8.name === name) || null;
+  }
   render() {
     return x`
       <style>
@@ -44433,17 +44550,31 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
       this.setupScrollListeners();
     }, 500);
     this.domtools.router.on(
-      "/wcctools-route/:itemType/:itemName/:demoIndex/:viewport/:theme",
+      "/wcctools-route/:sectionName/:itemName/:demoIndex/:viewport/:theme",
       async (routeInfo) => {
-        this.selectedType = routeInfo.params.itemType;
+        const sectionName = decodeURIComponent(routeInfo.params.sectionName);
+        this.selectedSection = this.findSectionByName(sectionName);
         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 (this.selectedSection) {
+          const entries = getSectionItems(this.selectedSection);
+          const found = entries.find(([name]) => name === routeInfo.params.itemName);
+          if (found) {
+            this.selectedItem = found[1];
+            this.selectedType = this.selectedSection.type === "elements" ? "element" : "page";
+          }
+        } else {
+          const legacyType = routeInfo.params.sectionName;
+          if (legacyType === "element" || legacyType === "page") {
+            this.selectedType = legacyType;
+            const result = this.findItemByName(routeInfo.params.itemName);
+            if (result) {
+              this.selectedItem = result.item;
+              this.selectedSection = result.section;
+            }
+          }
         }
         if (routeInfo.queryParams) {
           const frameScrollY = routeInfo.queryParams.frameScrollY;
@@ -44463,17 +44594,31 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
       }
     );
     this.domtools.router.on(
-      "/wcctools-route/:itemType/:itemName/:viewport/:theme",
+      "/wcctools-route/:sectionName/:itemName/:viewport/:theme",
       async (routeInfo) => {
-        this.selectedType = routeInfo.params.itemType;
+        const sectionName = decodeURIComponent(routeInfo.params.sectionName);
+        this.selectedSection = this.findSectionByName(sectionName);
         this.selectedItemName = routeInfo.params.itemName;
         this.selectedDemoIndex = 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 (this.selectedSection) {
+          const entries = getSectionItems(this.selectedSection);
+          const found = entries.find(([name]) => name === routeInfo.params.itemName);
+          if (found) {
+            this.selectedItem = found[1];
+            this.selectedType = this.selectedSection.type === "elements" ? "element" : "page";
+          }
+        } else {
+          const legacyType = routeInfo.params.sectionName;
+          if (legacyType === "element" || legacyType === "page") {
+            this.selectedType = legacyType;
+            const result = this.findItemByName(routeInfo.params.itemName);
+            if (result) {
+              this.selectedItem = result.item;
+              this.selectedSection = result.section;
+            }
+          }
         }
         if (routeInfo.queryParams) {
           const frameScrollY = routeInfo.queryParams.frameScrollY;
@@ -44542,7 +44687,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     }
   }
   buildUrl() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
+    const sectionName = this.selectedSection ? encodeURIComponent(this.selectedSection.name) : this.selectedType;
+    const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -44581,7 +44727,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     }, 300);
   }
   updateUrlWithScrollState() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
+    const sectionName = this.selectedSection ? encodeURIComponent(this.selectedSection.name) : this.selectedType;
+    const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
@@ -44609,36 +44756,63 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
   }
 };
 _init6 = __decoratorStart(_a6);
+_sections = new WeakMap();
+_selectedSection = new WeakMap();
 _selectedType2 = new WeakMap();
 _selectedItemName = new WeakMap();
 _selectedItem3 = new WeakMap();
 _selectedDemoIndex = new WeakMap();
 _selectedViewport2 = new WeakMap();
 _selectedTheme2 = new WeakMap();
-_pages = new WeakMap();
-_elements = new WeakMap();
 _warning2 = new WeakMap();
 _wccFrame = new WeakMap();
+__decorateElement(_init6, 4, "sections", _sections_dec, WccDashboard2, _sections);
+__decorateElement(_init6, 4, "selectedSection", _selectedSection_dec, WccDashboard2, _selectedSection);
 __decorateElement(_init6, 4, "selectedType", _selectedType_dec2, WccDashboard2, _selectedType2);
 __decorateElement(_init6, 4, "selectedItemName", _selectedItemName_dec, WccDashboard2, _selectedItemName);
 __decorateElement(_init6, 4, "selectedItem", _selectedItem_dec3, WccDashboard2, _selectedItem3);
 __decorateElement(_init6, 4, "selectedDemoIndex", _selectedDemoIndex_dec, WccDashboard2, _selectedDemoIndex);
 __decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec2, WccDashboard2, _selectedViewport2);
 __decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
-__decorateElement(_init6, 4, "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) => {
+var convertLegacyToConfig = (elementsArg, pagesArg) => {
+  const sections = [];
+  if (pagesArg && Object.keys(pagesArg).length > 0) {
+    sections.push({
+      name: "Pages",
+      type: "pages",
+      items: pagesArg
+    });
+  }
+  if (elementsArg && Object.keys(elementsArg).length > 0) {
+    sections.push({
+      name: "Elements",
+      type: "elements",
+      items: elementsArg
+    });
+  }
+  return { sections };
+};
+var isWccConfig = (arg) => {
+  return arg && typeof arg === "object" && "sections" in arg && Array.isArray(arg.sections);
+};
+var setupWccTools = (configOrElements, pagesArg) => {
+  let config2;
+  if (isWccConfig(configOrElements)) {
+    config2 = configOrElements;
+  } else {
+    config2 = convertLegacyToConfig(configOrElements, pagesArg);
+  }
   let hasRun = false;
   const runWccToolsSetup = async () => {
     if (document.readyState === "complete" && !hasRun) {
       hasRun = true;
-      const wccTools = new WccDashboard2(elementsArg, pagesArg);
+      const wccTools = new WccDashboard2(config2);
       document.querySelector("body").append(wccTools);
     }
   };