@design.estate/dees-wcctools 3.5.0 → 3.5.1

package/dist_watch/bundle.js

@@ -41545,14 +41545,16 @@ var hasMultipleDemos = (demo) => {
 };
 
 // ts_web/elements/wcc-frame.ts
-var _isNative_dec, _advancedEditorOpen_dec, _viewport_dec, _a, _WccFrame_decorators, _init, _viewport, _advancedEditorOpen, _isNative;
+var _isResizing_dec, _sidebarWidth_dec, _isNative_dec, _advancedEditorOpen_dec, _viewport_dec, _a, _WccFrame_decorators, _init, _viewport, _advancedEditorOpen, _isNative, _sidebarWidth, _isResizing;
 _WccFrame_decorators = [t4("wcc-frame")];
-var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advancedEditorOpen_dec = [n5({ type: Boolean })], _isNative_dec = [n5({ type: Boolean })], _a) {
+var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advancedEditorOpen_dec = [n5({ type: Boolean })], _isNative_dec = [n5({ type: Boolean })], _sidebarWidth_dec = [n5({ type: Number })], _isResizing_dec = [n5({ type: Boolean })], _a) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _viewport, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _advancedEditorOpen, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
     __privateAdd(this, _isNative, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _sidebarWidth, __runInitializers(_init, 20, this, 200)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _isResizing, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
   }
   render() {
     return x`
@@ -41567,9 +41569,9 @@ var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advance
           ` : `
             bottom: ${this.advancedEditorOpen ? "400px" : "100px"};
             border: 10px solid #ffaeaf;
-            left: 200px;
+            left: ${this.sidebarWidth}px;
           `}
-          transition: all 0.3s ease;
+          transition: ${this.isResizing ? "none" : "all 0.3s ease"};
           ${this.isNative ? "padding: 0px;" : (() => {
       switch (this.viewport) {
         case "desktop":
@@ -41578,15 +41580,15 @@ var WccFrame = class extends (_a = DeesElement, _viewport_dec = [n5()], _advance
                 `;
         case "tablet":
           return `
-                  padding: 0px ${(document.body.clientWidth - 200 - domtools_css_breakpoints_exports.tablet) / 2}px;
+                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools_css_breakpoints_exports.tablet) / 2}px;
                 `;
         case "phablet":
           return `
-                  padding: 0px ${(document.body.clientWidth - 200 - domtools_css_breakpoints_exports.phablet) / 2}px;
+                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools_css_breakpoints_exports.phablet) / 2}px;
                 `;
         case "phone":
           return `
-                  padding: 0px ${(document.body.clientWidth - 200 - domtools_css_breakpoints_exports.phone) / 2}px;
+                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools_css_breakpoints_exports.phone) / 2}px;
                 `;
       }
     })()}
@@ -41634,9 +41636,13 @@ _init = __decoratorStart(_a);
 _viewport = new WeakMap();
 _advancedEditorOpen = new WeakMap();
 _isNative = new WeakMap();
+_sidebarWidth = new WeakMap();
+_isResizing = new WeakMap();
 __decorateElement(_init, 4, "viewport", _viewport_dec, WccFrame, _viewport);
 __decorateElement(_init, 4, "advancedEditorOpen", _advancedEditorOpen_dec, WccFrame, _advancedEditorOpen);
 __decorateElement(_init, 4, "isNative", _isNative_dec, WccFrame, _isNative);
+__decorateElement(_init, 4, "sidebarWidth", _sidebarWidth_dec, WccFrame, _sidebarWidth);
+__decorateElement(_init, 4, "isResizing", _isResizing_dec, WccFrame, _isResizing);
 WccFrame = __decorateElement(_init, 0, "WccFrame", _WccFrame_decorators, WccFrame);
 __publicField(WccFrame, "styles", [
   i`
@@ -41644,7 +41650,6 @@ __publicField(WccFrame, "styles", [
         border: 10px solid #ffaeaf;
         position: absolute;
         background: ${cssManager.bdTheme("#333", "#000")};
-        left: 200px;
         right: 0px;
         top: 0px;
         overflow-y: auto;
@@ -41847,9 +41852,9 @@ __runInitializers(_init2, 1, _WccContextmenu);
 var WccContextmenu = _WccContextmenu;
 
 // ts_web/elements/wcc-sidebar.ts
-var _pinnedItems_dec, _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a3, _WccSidebar_decorators, _init3, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery, _pinnedItems;
+var _isResizing_dec2, _sidebarWidth_dec2, _pinnedItems_dec, _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a3, _WccSidebar_decorators, _init3, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery, _pinnedItems, _sidebarWidth2, _isResizing2;
 _WccSidebar_decorators = [t4("wcc-sidebar")];
-var WccSidebar = class extends (_a3 = 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()], _pinnedItems_dec = [n5({ attribute: false })], _a3) {
+var WccSidebar = class extends (_a3 = 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()], _pinnedItems_dec = [n5({ attribute: false })], _sidebarWidth_dec2 = [n5({ type: Number })], _isResizing_dec2 = [r5()], _a3) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _selectedItem, __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
@@ -41860,7 +41865,42 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
     __privateAdd(this, _collapsedSections, __runInitializers(_init3, 28, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 31, this);
     __privateAdd(this, _searchQuery, __runInitializers(_init3, 32, this, "")), __runInitializers(_init3, 35, this);
     __privateAdd(this, _pinnedItems, __runInitializers(_init3, 36, this, /* @__PURE__ */ new Set())), __runInitializers(_init3, 39, this);
+    __privateAdd(this, _sidebarWidth2, __runInitializers(_init3, 40, this, 200)), __runInitializers(_init3, 43, this);
+    __privateAdd(this, _isResizing2, __runInitializers(_init3, 44, this, false)), __runInitializers(_init3, 47, this);
     __publicField(this, "sectionsInitialized", false);
+    // ============ Resize functionality ============
+    __publicField(this, "startResize", (e10) => {
+      e10.preventDefault();
+      this.isResizing = true;
+      const startX = e10.clientX;
+      const startWidth = this.sidebarWidth;
+      const frame = this.dashboardRef?.shadowRoot?.querySelector("wcc-frame");
+      const properties2 = this.dashboardRef?.shadowRoot?.querySelector("wcc-properties");
+      if (frame) {
+        frame.isResizing = true;
+      }
+      const onMouseMove = (e11) => {
+        const newWidth = Math.min(400, Math.max(150, startWidth + (e11.clientX - startX)));
+        this.sidebarWidth = newWidth;
+        if (frame) {
+          frame.sidebarWidth = newWidth;
+        }
+        if (properties2) {
+          properties2.sidebarWidth = newWidth;
+        }
+      };
+      const onMouseUp = () => {
+        this.isResizing = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        if (frame) {
+          frame.isResizing = false;
+        }
+        this.dispatchEvent(new CustomEvent("widthChanged", { detail: this.sidebarWidth }));
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
   }
   render() {
     return x`
@@ -41890,7 +41930,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           box-sizing: border-box;
           position: absolute;
           left: 0px;
-          width: 200px;
+          width: ${this.sidebarWidth}px;
           top: 0px;
           bottom: 0px;
           overflow-y: auto;
@@ -41991,6 +42031,10 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           grid-template-columns: 16px 1fr;
         }
 
+        .selectOption.folder .text {
+          margin-left: 4px;
+        }
+
         .selectOption .expand-icon {
           font-size: 14px;
           opacity: 0.5;
@@ -42145,13 +42189,17 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           opacity: 0.8;
         }
 
-        /* Section tag for pinned items */
+        /* Section tag pill for pinned items */
         .section-tag {
-          font-size: 0.55rem;
-          color: #555;
+          font-size: 0.5rem;
+          color: #888;
           margin-left: auto;
           text-transform: uppercase;
-          letter-spacing: 0.03em;
+          letter-spacing: 0.02em;
+          background: rgba(255, 255, 255, 0.06);
+          padding: 0.15rem 0.4rem;
+          border-radius: 9999px;
+          white-space: nowrap;
         }
 
         /* Group container */
@@ -42176,6 +42224,27 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           margin-left: 0.25rem;
           margin-right: 0.25rem;
         }
+
+        /* Resize handle */
+        .resize-handle {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 4px;
+          cursor: col-resize;
+          background: transparent;
+          transition: background 0.15s ease;
+          z-index: 10;
+        }
+
+        .resize-handle:hover {
+          background: rgba(59, 130, 246, 0.3);
+        }
+
+        .resize-handle.active {
+          background: var(--primary);
+        }
       </style>
       <div class="search-container">
         <input
@@ -42190,6 +42259,10 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         ${this.renderPinnedSection()}
         ${this.renderSections()}
       </div>
+      <div
+        class="resize-handle ${this.isResizing ? "active" : ""}"
+        @mousedown=${this.startResize}
+      ></div>
     `;
   }
   /**
@@ -42254,8 +42327,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         }
       }
     }
-    const filteredEntries = pinnedEntries.filter((e10) => this.matchesSearch(e10.itemName));
-    if (filteredEntries.length === 0 && this.searchQuery) {
+    if (pinnedEntries.length === 0) {
       return null;
     }
     return x`
@@ -42268,7 +42340,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         <span>Pinned</span>
       </div>
       <div class="section-content ${isCollapsed ? "collapsed" : ""}">
-        ${filteredEntries.map(({ sectionName, itemName, item, section }) => {
+        ${pinnedEntries.map(({ sectionName, itemName, item, section }) => {
       const isSelected = this.selectedItem === item;
       const type5 = section.type === "elements" ? "element" : "page";
       const icon = section.type === "elements" ? "featured_video" : "insert_drive_file";
@@ -42529,6 +42601,8 @@ _expandedElements = new WeakMap();
 _collapsedSections = new WeakMap();
 _searchQuery = new WeakMap();
 _pinnedItems = new WeakMap();
+_sidebarWidth2 = new WeakMap();
+_isResizing2 = new WeakMap();
 __decorateElement(_init3, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
 __decorateElement(_init3, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
 __decorateElement(_init3, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
@@ -42537,6 +42611,8 @@ __decorateElement(_init3, 4, "expandedElements", _expandedElements_dec, WccSideb
 __decorateElement(_init3, 4, "collapsedSections", _collapsedSections_dec, WccSidebar, _collapsedSections);
 __decorateElement(_init3, 4, "searchQuery", _searchQuery_dec, WccSidebar, _searchQuery);
 __decorateElement(_init3, 4, "pinnedItems", _pinnedItems_dec, WccSidebar, _pinnedItems);
+__decorateElement(_init3, 4, "sidebarWidth", _sidebarWidth_dec2, WccSidebar, _sidebarWidth2);
+__decorateElement(_init3, 4, "isResizing", _isResizing_dec2, WccSidebar, _isResizing2);
 WccSidebar = __decorateElement(_init3, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
 __runInitializers(_init3, 1, WccSidebar);
 
@@ -43845,7 +43921,7 @@ __publicField(WccRecordingPanel, "styles", [
 __runInitializers(_init5, 1, WccRecordingPanel);
 
 // ts_web/elements/wcc-properties.ts
-var _recordingDuration_dec2, _isRecording_dec, _showRecordingPanel_dec, _editingProperties_dec, _propertyContent_dec, _isNative_dec3, _warning_dec, _selectedTheme_dec, _selectedViewport_dec, _selectedItem_dec2, _dashboardRef_dec3, _a6, _WccProperties_decorators, _init6, _dashboardRef3, _selectedItem2, _selectedViewport, _selectedTheme, _warning, _isNative3, _propertyContent, _editingProperties, _showRecordingPanel, _isRecording, _recordingDuration2;
+var _recordingDuration_dec2, _isRecording_dec, _showRecordingPanel_dec, _editingProperties_dec, _propertyContent_dec, _sidebarWidth_dec3, _isNative_dec3, _warning_dec, _selectedTheme_dec, _selectedViewport_dec, _selectedItem_dec2, _dashboardRef_dec3, _a6, _WccProperties_decorators, _init6, _dashboardRef3, _selectedItem2, _selectedViewport, _selectedTheme, _warning, _isNative3, _sidebarWidth3, _propertyContent, _editingProperties, _showRecordingPanel, _isRecording, _recordingDuration2;
 var environment = "native";
 var setEnvironment = (envArg) => {
   environment = envArg;
@@ -43853,7 +43929,7 @@ var setEnvironment = (envArg) => {
 _WccProperties_decorators = [t4("wcc-properties")];
 var WccProperties = class extends (_a6 = DeesElement, _dashboardRef_dec3 = [n5({
   type: WccDashboard2
-})], _selectedItem_dec2 = [n5()], _selectedViewport_dec = [n5()], _selectedTheme_dec = [n5()], _warning_dec = [n5()], _isNative_dec3 = [n5()], _propertyContent_dec = [r5()], _editingProperties_dec = [r5()], _showRecordingPanel_dec = [r5()], _isRecording_dec = [r5()], _recordingDuration_dec2 = [r5()], _a6) {
+})], _selectedItem_dec2 = [n5()], _selectedViewport_dec = [n5()], _selectedTheme_dec = [n5()], _warning_dec = [n5()], _isNative_dec3 = [n5()], _sidebarWidth_dec3 = [n5({ type: Number })], _propertyContent_dec = [r5()], _editingProperties_dec = [r5()], _showRecordingPanel_dec = [r5()], _isRecording_dec = [r5()], _recordingDuration_dec2 = [r5()], _a6) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _dashboardRef3, __runInitializers(_init6, 8, this)), __runInitializers(_init6, 11, this);
@@ -43862,11 +43938,12 @@ var WccProperties = class extends (_a6 = DeesElement, _dashboardRef_dec3 = [n5({
     __privateAdd(this, _selectedTheme, __runInitializers(_init6, 20, this, "dark")), __runInitializers(_init6, 23, this);
     __privateAdd(this, _warning, __runInitializers(_init6, 24, this, null)), __runInitializers(_init6, 27, this);
     __privateAdd(this, _isNative3, __runInitializers(_init6, 28, this, false)), __runInitializers(_init6, 31, this);
-    __privateAdd(this, _propertyContent, __runInitializers(_init6, 32, this, [])), __runInitializers(_init6, 35, this);
-    __privateAdd(this, _editingProperties, __runInitializers(_init6, 36, this, [])), __runInitializers(_init6, 39, this);
-    __privateAdd(this, _showRecordingPanel, __runInitializers(_init6, 40, this, false)), __runInitializers(_init6, 43, this);
-    __privateAdd(this, _isRecording, __runInitializers(_init6, 44, this, false)), __runInitializers(_init6, 47, this);
-    __privateAdd(this, _recordingDuration2, __runInitializers(_init6, 48, this, 0)), __runInitializers(_init6, 51, this);
+    __privateAdd(this, _sidebarWidth3, __runInitializers(_init6, 32, this, 200)), __runInitializers(_init6, 35, this);
+    __privateAdd(this, _propertyContent, __runInitializers(_init6, 36, this, [])), __runInitializers(_init6, 39, this);
+    __privateAdd(this, _editingProperties, __runInitializers(_init6, 40, this, [])), __runInitializers(_init6, 43, this);
+    __privateAdd(this, _showRecordingPanel, __runInitializers(_init6, 44, this, false)), __runInitializers(_init6, 47, this);
+    __privateAdd(this, _isRecording, __runInitializers(_init6, 48, this, false)), __runInitializers(_init6, 51, this);
+    __privateAdd(this, _recordingDuration2, __runInitializers(_init6, 52, this, 0)), __runInitializers(_init6, 55, this);
     __publicField(this, "editorHeight", 300);
   }
   render() {
@@ -43896,7 +43973,7 @@ var WccProperties = class extends (_a6 = DeesElement, _dashboardRef_dec3 = [n5({
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           box-sizing: border-box;
           position: absolute;
-          left: 200px;
+          left: ${this.sidebarWidth}px;
           height: ${this.editingProperties.length > 0 ? 100 + this.editorHeight : 100}px;
           bottom: 0px;
           right: 0px;
@@ -44828,6 +44905,7 @@ _selectedViewport = new WeakMap();
 _selectedTheme = new WeakMap();
 _warning = new WeakMap();
 _isNative3 = new WeakMap();
+_sidebarWidth3 = new WeakMap();
 _propertyContent = new WeakMap();
 _editingProperties = new WeakMap();
 _showRecordingPanel = new WeakMap();
@@ -44839,6 +44917,7 @@ __decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec, WccPrope
 __decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec, WccProperties, _selectedTheme);
 __decorateElement(_init6, 4, "warning", _warning_dec, WccProperties, _warning);
 __decorateElement(_init6, 4, "isNative", _isNative_dec3, WccProperties, _isNative3);
+__decorateElement(_init6, 4, "sidebarWidth", _sidebarWidth_dec3, WccProperties, _sidebarWidth3);
 __decorateElement(_init6, 4, "propertyContent", _propertyContent_dec, WccProperties, _propertyContent);
 __decorateElement(_init6, 4, "editingProperties", _editingProperties_dec, WccProperties, _editingProperties);
 __decorateElement(_init6, 4, "showRecordingPanel", _showRecordingPanel_dec, WccProperties, _showRecordingPanel);
@@ -44848,7 +44927,7 @@ WccProperties = __decorateElement(_init6, 0, "WccProperties", _WccProperties_dec
 __runInitializers(_init6, 1, WccProperties);
 
 // ts_web/elements/wcc-dashboard.ts
-var _wccFrame_dec, _warning_dec2, _pinnedItems_dec2, _searchQuery_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a7, _WccDashboard_decorators, _init7, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _searchQuery2, _pinnedItems2, _warning2, _wccFrame;
+var _wccFrame_dec, _warning_dec2, _sidebarWidth_dec4, _pinnedItems_dec2, _searchQuery_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a7, _WccDashboard_decorators, _init7, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _searchQuery2, _pinnedItems2, _sidebarWidth4, _warning2, _wccFrame;
 var getSectionItems = (section) => {
   let entries = Object.entries(section.items);
   if (section.filter) {
@@ -44860,7 +44939,7 @@ var getSectionItems = (section) => {
   return entries;
 };
 _WccDashboard_decorators = [t4("wcc-dashboard")];
-var WccDashboard2 = class extends (_a7 = 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()], _pinnedItems_dec2 = [n5({ attribute: false })], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a7) {
+var WccDashboard2 = class extends (_a7 = 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()], _pinnedItems_dec2 = [n5({ attribute: false })], _sidebarWidth_dec4 = [n5({ type: Number })], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a7) {
   constructor(config2) {
     super();
     __privateAdd(this, _sections, __runInitializers(_init7, 8, this, [])), __runInitializers(_init7, 11, this);
@@ -44873,11 +44952,12 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
     __privateAdd(this, _selectedTheme2, __runInitializers(_init7, 36, this, "dark")), __runInitializers(_init7, 39, this);
     __privateAdd(this, _searchQuery2, __runInitializers(_init7, 40, this, "")), __runInitializers(_init7, 43, this);
     __privateAdd(this, _pinnedItems2, __runInitializers(_init7, 44, this, /* @__PURE__ */ new Set())), __runInitializers(_init7, 47, this);
-    __privateAdd(this, _warning2, __runInitializers(_init7, 48, this, null)), __runInitializers(_init7, 51, this);
+    __privateAdd(this, _sidebarWidth4, __runInitializers(_init7, 48, this, 200)), __runInitializers(_init7, 51, this);
+    __privateAdd(this, _warning2, __runInitializers(_init7, 52, this, null)), __runInitializers(_init7, 55, this);
     __publicField(this, "frameScrollY", 0);
     __publicField(this, "sidebarScrollY", 0);
     __publicField(this, "scrollPositionsApplied", false);
-    __privateAdd(this, _wccFrame, __runInitializers(_init7, 52, this)), __runInitializers(_init7, 55, this);
+    __privateAdd(this, _wccFrame, __runInitializers(_init7, 56, this)), __runInitializers(_init7, 59, this);
     __publicField(this, "scrollUpdateTimeout");
     __publicField(this, "scrollListenersAttached", false);
     if (config2 && config2.sections) {
@@ -44925,6 +45005,7 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
         .selectedItem=${this.selectedItem}
         .searchQuery=${this.searchQuery}
         .pinnedItems=${this.pinnedItems}
+        .sidebarWidth=${this.sidebarWidth}
         .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
       this.selectedType = eventArg.detail;
@@ -44942,6 +45023,15 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
         @pinnedChanged=${(eventArg) => {
       this.pinnedItems = eventArg.detail;
       this.updateUrlWithScrollState();
+    }}
+        @widthChanged=${async (eventArg) => {
+      this.sidebarWidth = eventArg.detail;
+      this.updateUrlWithScrollState();
+      const frame = await this.wccFrame;
+      if (frame) {
+        frame.sidebarWidth = eventArg.detail;
+        frame.requestUpdate();
+      }
     }}
       ></wcc-sidebar>
       <wcc-properties
@@ -44951,6 +45041,7 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
         .isNative=${this.isNative}
+        .sidebarWidth=${this.sidebarWidth}
         @selectedViewport=${(eventArg) => {
       this.selectedViewport = eventArg.detail;
       this.scheduleUpdate();
@@ -44969,7 +45060,7 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
       this.toggleNative();
     }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative} .sidebarWidth=${this.sidebarWidth}>
       </wcc-frame>
     `;
   }
@@ -45029,6 +45120,7 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
           const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
           if (search2) {
             this.searchQuery = search2;
           } else {
@@ -45048,8 +45140,16 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
           } else if (this.pinnedItems.size > 0) {
             this.pinnedItems = /* @__PURE__ */ new Set();
           }
-          setTimeout(() => {
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
+          setTimeout(async () => {
             this.applyScrollPositions();
+            const frame = await this.wccFrame;
+            if (frame) {
+              frame.sidebarWidth = this.sidebarWidth;
+              frame.requestUpdate();
+            }
           }, 100);
         } else {
           this.searchQuery = "";
@@ -45093,6 +45193,7 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
           const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
           if (search2) {
             this.searchQuery = search2;
           } else {
@@ -45112,6 +45213,9 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
           } else if (this.pinnedItems.size > 0) {
             this.pinnedItems = /* @__PURE__ */ new Set();
           }
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
@@ -45190,6 +45294,9 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
     if (this.pinnedItems.size > 0) {
       queryParams.set("pinned", Array.from(this.pinnedItems).join(","));
     }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set("sidebarWidth", this.sidebarWidth.toString());
+    }
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
     this.domtools.router.pushUrl(fullUrl);
@@ -45236,6 +45343,9 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
     if (this.pinnedItems.size > 0) {
       queryParams.set("pinned", Array.from(this.pinnedItems).join(","));
     }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set("sidebarWidth", this.sidebarWidth.toString());
+    }
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
     window.history.replaceState(null, "", fullUrl);
@@ -45266,6 +45376,7 @@ _selectedViewport2 = new WeakMap();
 _selectedTheme2 = new WeakMap();
 _searchQuery2 = new WeakMap();
 _pinnedItems2 = new WeakMap();
+_sidebarWidth4 = new WeakMap();
 _warning2 = new WeakMap();
 _wccFrame = new WeakMap();
 __decorateElement(_init7, 4, "sections", _sections_dec, WccDashboard2, _sections);
@@ -45278,6 +45389,7 @@ __decorateElement(_init7, 4, "selectedViewport", _selectedViewport_dec2, WccDash
 __decorateElement(_init7, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
 __decorateElement(_init7, 4, "searchQuery", _searchQuery_dec2, WccDashboard2, _searchQuery2);
 __decorateElement(_init7, 4, "pinnedItems", _pinnedItems_dec2, WccDashboard2, _pinnedItems2);
+__decorateElement(_init7, 4, "sidebarWidth", _sidebarWidth_dec4, WccDashboard2, _sidebarWidth4);
 __decorateElement(_init7, 4, "warning", _warning_dec2, WccDashboard2, _warning2);
 __decorateElement(_init7, 4, "wccFrame", _wccFrame_dec, WccDashboard2, _wccFrame);
 WccDashboard2 = __decorateElement(_init7, 0, "WccDashboard", _WccDashboard_decorators, WccDashboard2);