@design.estate/dees-wcctools 3.2.0 → 3.4.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 _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery;
 _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()], _searchQuery_dec = [n5()], _a2) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _selectedItem, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
@@ -41673,6 +41673,9 @@ 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);
+    __privateAdd(this, _searchQuery, __runInitializers(_init2, 32, this, "")), __runInitializers(_init2, 35, this);
+    __publicField(this, "sectionsInitialized", false);
   }
   render() {
     return x`
@@ -41715,7 +41718,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 +41730,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;
@@ -41864,85 +41900,179 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         ::-webkit-scrollbar-thumb:hover {
           background: rgba(255, 255, 255, 0.2);
         }
+
+        .search-container {
+          padding: 0.5rem;
+          border-bottom: 1px solid var(--border);
+        }
+
+        .search-input {
+          width: 100%;
+          box-sizing: border-box;
+          background: var(--input);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
+          padding: 0.5rem 0.75rem;
+          color: var(--foreground);
+          font-size: 0.75rem;
+          font-family: inherit;
+          outline: none;
+          transition: border-color 0.15s ease;
+        }
+
+        .search-input:focus {
+          border-color: var(--primary);
+        }
+
+        .search-input::placeholder {
+          color: var(--muted-foreground);
+        }
+
+        .highlight {
+          background: rgba(59, 130, 246, 0.3);
+          border-radius: 2px;
+        }
       </style>
+      <div class="search-container">
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search..."
+          .value=${this.searchQuery}
+          @input=${this.handleSearchInput}
+        />
+      </div>
       <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 entries = getSectionItems(section);
+      const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+      if (filteredEntries.length === 0 && this.searchQuery) {
+        return null;
+      }
+      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);
+    const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+    if (section.type === "pages") {
+      return filteredEntries.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">${this.highlightMatch(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 filteredEntries.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">${this.highlightMatch(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">${this.highlightMatch(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);
@@ -41953,32 +42083,60 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     }
     this.expandedElements = newSet;
   }
+  handleSearchInput(e10) {
+    const input = e10.target;
+    this.searchQuery = input.value;
+    this.dispatchEvent(new CustomEvent("searchChanged", { detail: this.searchQuery }));
+  }
+  matchesSearch(name) {
+    if (!this.searchQuery) return true;
+    return name.toLowerCase().includes(this.searchQuery.toLowerCase());
+  }
+  highlightMatch(text8) {
+    if (!this.searchQuery) return x`${text8}`;
+    const lowerText = text8.toLowerCase();
+    const lowerQuery = this.searchQuery.toLowerCase();
+    const index2 = lowerText.indexOf(lowerQuery);
+    if (index2 === -1) return x`${text8}`;
+    const before = text8.slice(0, index2);
+    const match2 = text8.slice(index2, index2 + this.searchQuery.length);
+    const after = text8.slice(index2 + this.searchQuery.length);
+    return x`${before}<span class="highlight">${match2}</span>${after}`;
+  }
   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 +42162,15 @@ _selectedType = new WeakMap();
 _dashboardRef = new WeakMap();
 _isNative2 = new WeakMap();
 _expandedElements = new WeakMap();
+_collapsedSections = new WeakMap();
+_searchQuery = 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);
+__decorateElement(_init2, 4, "searchQuery", _searchQuery_dec, WccSidebar, _searchQuery);
 WccSidebar = __decorateElement(_init2, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
 __runInitializers(_init2, 1, WccSidebar);
 
@@ -44320,39 +44482,65 @@ 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, _searchQuery_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, _searchQuery2, _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()], _searchQuery_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, _warning2, __runInitializers(_init6, 40, this, null)), __runInitializers(_init6, 43, 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, _searchQuery2, __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) {
-      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>
@@ -44368,6 +44556,7 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
+        .searchQuery=${this.searchQuery}
         .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
       this.selectedType = eventArg.detail;
@@ -44377,6 +44566,10 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
     }}
         @selectedItem=${(eventArg) => {
       this.selectedItem = eventArg.detail;
+    }}
+        @searchChanged=${(eventArg) => {
+      this.searchQuery = eventArg.detail;
+      this.updateUrlWithScrollState();
     }}
       ></wcc-sidebar>
       <wcc-properties
@@ -44433,21 +44626,41 @@ 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 search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          if (search2) {
+            this.searchQuery = search2;
+          } else {
+            this.searchQuery = "";
+          }
           if (frameScrollY) {
             this.frameScrollY = parseInt(frameScrollY);
           }
@@ -44457,27 +44670,49 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
+        } else {
+          this.searchQuery = "";
         }
         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",
+      "/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 search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          if (search2) {
+            this.searchQuery = search2;
+          } else {
+            this.searchQuery = "";
+          }
           if (frameScrollY) {
             this.frameScrollY = parseInt(frameScrollY);
           }
@@ -44487,6 +44722,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _selectedType_dec2 = [n5()
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
+        } else {
+          this.searchQuery = "";
         }
         const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
@@ -44542,8 +44779,12 @@ 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.searchQuery) {
+      queryParams.set("search", this.searchQuery);
+    }
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
     }
@@ -44581,8 +44822,12 @@ 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.searchQuery) {
+      queryParams.set("search", this.searchQuery);
+    }
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
     }
@@ -44609,36 +44854,65 @@ 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();
+_searchQuery2 = 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, "searchQuery", _searchQuery_dec2, WccDashboard2, _searchQuery2);
 __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);
     }
   };