var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import * as plugins from '../wcctools.plugins.js';
import { DeesElement, property, html, customElement, state } from '@design.estate/dees-element';
import { WccDashboard, getSectionItems } from './wcc-dashboard.js';
import { getDemoCount, hasMultipleDemos } from './wcctools.helpers.js';
import { WccContextmenu } from './wcc-contextmenu.js';
let WccSidebar = (() => {
    let _classDecorators = [customElement('wcc-sidebar')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _selectedItem_decorators;
    let _selectedItem_initializers = [];
    let _selectedItem_extraInitializers = [];
    let _selectedType_decorators;
    let _selectedType_initializers = [];
    let _selectedType_extraInitializers = [];
    let _dashboardRef_decorators;
    let _dashboardRef_initializers = [];
    let _dashboardRef_extraInitializers = [];
    let _isNative_decorators;
    let _isNative_initializers = [];
    let _isNative_extraInitializers = [];
    let _expandedElements_decorators;
    let _expandedElements_initializers = [];
    let _expandedElements_extraInitializers = [];
    let _collapsedSections_decorators;
    let _collapsedSections_initializers = [];
    let _collapsedSections_extraInitializers = [];
    let _searchQuery_decorators;
    let _searchQuery_initializers = [];
    let _searchQuery_extraInitializers = [];
    let _pinnedItems_decorators;
    let _pinnedItems_initializers = [];
    let _pinnedItems_extraInitializers = [];
    let _sidebarWidth_decorators;
    let _sidebarWidth_initializers = [];
    let _sidebarWidth_extraInitializers = [];
    let _isResizing_decorators;
    let _isResizing_initializers = [];
    let _isResizing_extraInitializers = [];
    let _isHidden_decorators;
    let _isHidden_initializers = [];
    let _isHidden_extraInitializers = [];
    let _isMenuScrolled_decorators;
    let _isMenuScrolled_initializers = [];
    let _isMenuScrolled_extraInitializers = [];
    var WccSidebar = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _selectedItem_decorators = [property({ attribute: false })];
            _selectedType_decorators = [property({ attribute: false })];
            _dashboardRef_decorators = [property()];
            _isNative_decorators = [property()];
            _expandedElements_decorators = [state()];
            _collapsedSections_decorators = [state()];
            _searchQuery_decorators = [property()];
            _pinnedItems_decorators = [property({ attribute: false })];
            _sidebarWidth_decorators = [property({ type: Number })];
            _isResizing_decorators = [state()];
            _isHidden_decorators = [state()];
            _isMenuScrolled_decorators = [state()];
            __esDecorate(this, null, _selectedItem_decorators, { kind: "accessor", name: "selectedItem", static: false, private: false, access: { has: obj => "selectedItem" in obj, get: obj => obj.selectedItem, set: (obj, value) => { obj.selectedItem = value; } }, metadata: _metadata }, _selectedItem_initializers, _selectedItem_extraInitializers);
            __esDecorate(this, null, _selectedType_decorators, { kind: "accessor", name: "selectedType", static: false, private: false, access: { has: obj => "selectedType" in obj, get: obj => obj.selectedType, set: (obj, value) => { obj.selectedType = value; } }, metadata: _metadata }, _selectedType_initializers, _selectedType_extraInitializers);
            __esDecorate(this, null, _dashboardRef_decorators, { kind: "accessor", name: "dashboardRef", static: false, private: false, access: { has: obj => "dashboardRef" in obj, get: obj => obj.dashboardRef, set: (obj, value) => { obj.dashboardRef = value; } }, metadata: _metadata }, _dashboardRef_initializers, _dashboardRef_extraInitializers);
            __esDecorate(this, null, _isNative_decorators, { kind: "accessor", name: "isNative", static: false, private: false, access: { has: obj => "isNative" in obj, get: obj => obj.isNative, set: (obj, value) => { obj.isNative = value; } }, metadata: _metadata }, _isNative_initializers, _isNative_extraInitializers);
            __esDecorate(this, null, _expandedElements_decorators, { kind: "accessor", name: "expandedElements", static: false, private: false, access: { has: obj => "expandedElements" in obj, get: obj => obj.expandedElements, set: (obj, value) => { obj.expandedElements = value; } }, metadata: _metadata }, _expandedElements_initializers, _expandedElements_extraInitializers);
            __esDecorate(this, null, _collapsedSections_decorators, { kind: "accessor", name: "collapsedSections", static: false, private: false, access: { has: obj => "collapsedSections" in obj, get: obj => obj.collapsedSections, set: (obj, value) => { obj.collapsedSections = value; } }, metadata: _metadata }, _collapsedSections_initializers, _collapsedSections_extraInitializers);
            __esDecorate(this, null, _searchQuery_decorators, { kind: "accessor", name: "searchQuery", static: false, private: false, access: { has: obj => "searchQuery" in obj, get: obj => obj.searchQuery, set: (obj, value) => { obj.searchQuery = value; } }, metadata: _metadata }, _searchQuery_initializers, _searchQuery_extraInitializers);
            __esDecorate(this, null, _pinnedItems_decorators, { kind: "accessor", name: "pinnedItems", static: false, private: false, access: { has: obj => "pinnedItems" in obj, get: obj => obj.pinnedItems, set: (obj, value) => { obj.pinnedItems = value; } }, metadata: _metadata }, _pinnedItems_initializers, _pinnedItems_extraInitializers);
            __esDecorate(this, null, _sidebarWidth_decorators, { kind: "accessor", name: "sidebarWidth", static: false, private: false, access: { has: obj => "sidebarWidth" in obj, get: obj => obj.sidebarWidth, set: (obj, value) => { obj.sidebarWidth = value; } }, metadata: _metadata }, _sidebarWidth_initializers, _sidebarWidth_extraInitializers);
            __esDecorate(this, null, _isResizing_decorators, { kind: "accessor", name: "isResizing", static: false, private: false, access: { has: obj => "isResizing" in obj, get: obj => obj.isResizing, set: (obj, value) => { obj.isResizing = value; } }, metadata: _metadata }, _isResizing_initializers, _isResizing_extraInitializers);
            __esDecorate(this, null, _isHidden_decorators, { kind: "accessor", name: "isHidden", static: false, private: false, access: { has: obj => "isHidden" in obj, get: obj => obj.isHidden, set: (obj, value) => { obj.isHidden = value; } }, metadata: _metadata }, _isHidden_initializers, _isHidden_extraInitializers);
            __esDecorate(this, null, _isMenuScrolled_decorators, { kind: "accessor", name: "isMenuScrolled", static: false, private: false, access: { has: obj => "isMenuScrolled" in obj, get: obj => obj.isMenuScrolled, set: (obj, value) => { obj.isMenuScrolled = value; } }, metadata: _metadata }, _isMenuScrolled_initializers, _isMenuScrolled_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            WccSidebar = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
            __runInitializers(_classThis, _classExtraInitializers);
        }
        #selectedItem_accessor_storage = __runInitializers(this, _selectedItem_initializers, void 0);
        get selectedItem() { return this.#selectedItem_accessor_storage; }
        set selectedItem(value) { this.#selectedItem_accessor_storage = value; }
        #selectedType_accessor_storage = (__runInitializers(this, _selectedItem_extraInitializers), __runInitializers(this, _selectedType_initializers, void 0));
        get selectedType() { return this.#selectedType_accessor_storage; }
        set selectedType(value) { this.#selectedType_accessor_storage = value; }
        #dashboardRef_accessor_storage = (__runInitializers(this, _selectedType_extraInitializers), __runInitializers(this, _dashboardRef_initializers, void 0));
        get dashboardRef() { return this.#dashboardRef_accessor_storage; }
        set dashboardRef(value) { this.#dashboardRef_accessor_storage = value; }
        #isNative_accessor_storage = (__runInitializers(this, _dashboardRef_extraInitializers), __runInitializers(this, _isNative_initializers, false));
        get isNative() { return this.#isNative_accessor_storage; }
        set isNative(value) { this.#isNative_accessor_storage = value; }
        #expandedElements_accessor_storage = (__runInitializers(this, _isNative_extraInitializers), __runInitializers(this, _expandedElements_initializers, new Set()));
        // Track which elements are expanded (for multi-demo elements)
        get expandedElements() { return this.#expandedElements_accessor_storage; }
        set expandedElements(value) { this.#expandedElements_accessor_storage = value; }
        #collapsedSections_accessor_storage = (__runInitializers(this, _expandedElements_extraInitializers), __runInitializers(this, _collapsedSections_initializers, new Set()));
        // Track which sections are collapsed
        get collapsedSections() { return this.#collapsedSections_accessor_storage; }
        set collapsedSections(value) { this.#collapsedSections_accessor_storage = value; }
        #searchQuery_accessor_storage = (__runInitializers(this, _collapsedSections_extraInitializers), __runInitializers(this, _searchQuery_initializers, ''));
        // Search query for filtering sidebar items
        get searchQuery() { return this.#searchQuery_accessor_storage; }
        set searchQuery(value) { this.#searchQuery_accessor_storage = value; }
        #pinnedItems_accessor_storage = (__runInitializers(this, _searchQuery_extraInitializers), __runInitializers(this, _pinnedItems_initializers, new Set()));
        // Pinned items as Set of "sectionName::itemName"
        get pinnedItems() { return this.#pinnedItems_accessor_storage; }
        set pinnedItems(value) { this.#pinnedItems_accessor_storage = value; }
        #sidebarWidth_accessor_storage = (__runInitializers(this, _pinnedItems_extraInitializers), __runInitializers(this, _sidebarWidth_initializers, 200));
        // Sidebar width (resizable)
        get sidebarWidth() { return this.#sidebarWidth_accessor_storage; }
        set sidebarWidth(value) { this.#sidebarWidth_accessor_storage = value; }
        #isResizing_accessor_storage = (__runInitializers(this, _sidebarWidth_extraInitializers), __runInitializers(this, _isResizing_initializers, false));
        // Track if currently resizing
        get isResizing() { return this.#isResizing_accessor_storage; }
        set isResizing(value) { this.#isResizing_accessor_storage = value; }
        #isHidden_accessor_storage = (__runInitializers(this, _isResizing_extraInitializers), __runInitializers(this, _isHidden_initializers, false));
        // Delayed hide for native mode transition
        get isHidden() { return this.#isHidden_accessor_storage; }
        set isHidden(value) { this.#isHidden_accessor_storage = value; }
        #isMenuScrolled_accessor_storage = (__runInitializers(this, _isHidden_extraInitializers), __runInitializers(this, _isMenuScrolled_initializers, false));
        // Track if menu is scrolled for header shadow
        get isMenuScrolled() { return this.#isMenuScrolled_accessor_storage; }
        set isMenuScrolled(value) { this.#isMenuScrolled_accessor_storage = value; }
        sectionsInitialized = (__runInitializers(this, _isMenuScrolled_extraInitializers), false);
        /**
         * Returns the scrollable container element (.menu) for external scroll management
         */
        get scrollableContainer() {
            return this.shadowRoot?.querySelector('.menu');
        }
        render() {
            return html `
      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
      <style>
        :host {
          /* CSS Variables - Always dark theme to match wcc-properties */
          --background: #0a0a0a;
          --foreground: #e5e5e5;
          --card: #0f0f0f;
          --card-foreground: #f0f0f0;
          --muted: #1a1a1a;
          --muted-foreground: #666;
          --accent: #222;
          --accent-foreground: #fff;
          --border: rgba(255, 255, 255, 0.06);
          --input: #141414;
          --primary: #3b82f6;
          --primary-foreground: #fff;
          --ring: #3b82f6;
          --radius: 4px;

          display: ${this.isHidden ? 'none' : 'flex'};
          flex-direction: column;
          border-right: 1px solid rgba(255, 255, 255, 0.08);
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
          font-size: 14px;
          box-sizing: border-box;
          position: absolute;
          left: 0px;
          width: ${this.sidebarWidth}px;
          top: 0px;
          bottom: 0px;
          overflow: hidden;
          background: var(--background);
          color: var(--foreground);
        }

        .sidebar-header {
          flex-shrink: 0;
          transition: box-shadow 0.2s ease, border-color 0.2s ease;
          border-bottom: 1px solid transparent;
          position: relative;
          z-index: 1;
        }

        .sidebar-header.scrolled {
          box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 1);
          border-bottom-color: var(--border);
        }

        .menu {
          flex: 1;
          min-height: 0;
          overflow-y: auto;
          overflow-x: hidden;
          padding: 0.5rem 0;
        }

        .section-header {
          padding: 0.3rem 0.75rem;
          font-size: 0.65rem;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: #888;
          margin: 0;
          margin-top: 0.5rem;
          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;
        }

        .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;
          font-style: normal;
          font-size: 16px;
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
          opacity: 0.5;
        }

        .selectOption {
          user-select: none;
          position: relative;
          margin: 0.125rem 0.5rem;
          padding: 0.5rem 0.75rem;
          transition: all 0.15s ease;
          display: grid;
          grid-template-columns: 20px 1fr;
          align-items: center;
          gap: 0.5rem;
          border-radius: var(--radius);
          cursor: pointer;
          font-size: 0.75rem;
          color: #999;
          background: transparent;
        }

        .selectOption.folder {
          grid-template-columns: 16px 1fr;
        }

        .selectOption.folder .text {
          margin-left: 4px;
        }

        .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;
        }

        .selectOption:hover .material-symbols-outlined {
          opacity: 0.7;
        }

        .selectOption.selected {
          background: rgba(59, 130, 246, 0.15);
          color: var(--primary);
        }

        .selectOption.selected .material-symbols-outlined {
          opacity: 1;
          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .selectOption.selected:hover {
          background: rgba(59, 130, 246, 0.2);
          color: var(--primary);
        }

        .selectOption .text {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          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;
        }

        ::-webkit-scrollbar-track {
          background: transparent;
        }

        ::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        .search-container {
          padding: 0.5rem;
          border-bottom: 1px solid var(--border);
          position: relative;
        }

        .search-input {
          width: 100%;
          box-sizing: border-box;
          background: var(--input);
          border: 1px solid var(--border);
          border-radius: var(--radius);
          padding: 0.5rem 1.75rem 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);
        }

        .search-clear {
          position: absolute;
          right: 0.75rem;
          top: 50%;
          transform: translateY(-50%);
          background: none;
          border: none;
          padding: 0.25rem;
          cursor: pointer;
          color: var(--muted-foreground);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 2px;
          transition: color 0.15s ease, background 0.15s ease;
        }

        .search-clear:hover {
          color: var(--foreground);
          background: rgba(255, 255, 255, 0.1);
        }

        .search-clear .material-symbols-outlined {
          font-size: 14px;
          opacity: 1;
        }

        .highlight {
          background: rgba(59, 130, 246, 0.3);
          border-radius: 2px;
        }

        /* Pinned item highlight in original section */
        .selectOption.pinned {
          background: rgba(245, 158, 11, 0.08);
        }

        .selectOption.pinned:hover {
          background: rgba(245, 158, 11, 0.12);
        }

        .selectOption.pinned.selected {
          background: rgba(245, 158, 11, 0.18);
        }

        /* Pinned section styling */
        .section-header.pinned-section {
          background: rgba(245, 158, 11, 0.08);
          color: #f59e0b;
        }

        .section-header.pinned-section:hover {
          background: rgba(245, 158, 11, 0.12);
        }

        .section-header.pinned-section .section-icon {
          opacity: 0.8;
        }

        /* Section tag pill for pinned items */
        .section-tag {
          font-size: 0.5rem;
          color: #888;
          margin-left: auto;
          text-transform: uppercase;
          letter-spacing: 0.02em;
          background: rgba(255, 255, 255, 0.06);
          padding: 0.15rem 0.4rem;
          border-radius: 9999px;
          white-space: nowrap;
        }

        /* Group container */
        .item-group {
          margin: 0.375rem 0.375rem;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 6px;
          padding: 0.25rem 0;
          background: rgba(255, 255, 255, 0.01);
        }

        .item-group-legend {
          font-size: 0.55rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #555;
          padding: 0.125rem 0.625rem 0.25rem;
          display: block;
          cursor: context-menu;
        }

        .item-group .selectOption {
          margin-left: 0.25rem;
          margin-right: 0.25rem;
        }

        .item-group.group-highlight {
          background: rgba(59, 130, 246, 0.15);
          transition: background 0.3s ease;
        }

        .item-group.group-filter-match {
          border-color: rgba(245, 158, 11, 0.5);
        }

        /* 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="sidebar-header ${this.isMenuScrolled ? 'scrolled' : ''}">
        <div class="search-container">
          <input
            type="text"
            class="search-input"
            placeholder="Search..."
            .value=${this.searchQuery}
            @input=${this.handleSearchInput}
          />
          ${this.searchQuery ? html `
            <button class="search-clear" @click=${this.clearSearch}>
              <i class="material-symbols-outlined">close</i>
            </button>
          ` : null}
        </div>
        ${this.renderPinnedSection()}
      </div>
      <div class="menu" @scroll=${this.handleMenuScroll}>
        ${this.renderSections()}
      </div>
      <div
        class="resize-handle ${this.isResizing ? 'active' : ''}"
        @mousedown=${this.startResize}
      ></div>
    `;
        }
        /**
         * Initialize collapsed sections from section config
         */
        initCollapsedSections() {
            if (this.sectionsInitialized || !this.dashboardRef?.sections)
                return;
            const collapsed = new Set();
            for (const section of this.dashboardRef.sections) {
                if (section.collapsed) {
                    collapsed.add(section.name);
                }
            }
            this.collapsedSections = collapsed;
            this.sectionsInitialized = true;
        }
        // ============ Pinning helpers ============
        getPinKey(sectionName, itemName) {
            return `${sectionName}::${itemName}`;
        }
        isPinned(sectionName, itemName) {
            return this.pinnedItems.has(this.getPinKey(sectionName, itemName));
        }
        togglePin(sectionName, itemName) {
            const key = this.getPinKey(sectionName, itemName);
            const newPinned = new Set(this.pinnedItems);
            if (newPinned.has(key)) {
                newPinned.delete(key);
            }
            else {
                newPinned.add(key);
            }
            this.pinnedItems = newPinned;
            this.dispatchEvent(new CustomEvent('pinnedChanged', { detail: newPinned }));
        }
        showContextMenu(e, sectionName, itemName) {
            const isPinned = this.isPinned(sectionName, itemName);
            const section = this.dashboardRef?.sections?.find(s => s.name === sectionName);
            const sectionEntries = section ? getSectionItems(section) : [];
            const foundEntry = sectionEntries.find(([name]) => name === itemName);
            const item = foundEntry?.[1];
            const groups = item ? this.getElementGroups(item) : [];
            const menuItems = [
                {
                    name: isPinned ? 'Unpin' : 'Pin',
                    iconName: isPinned ? 'push_pin' : 'push_pin',
                    action: () => this.togglePin(sectionName, itemName),
                },
            ];
            if (groups.length > 0) {
                menuItems.push({
                    name: 'Show in Group:',
                    iconName: 'folder',
                    action: () => { },
                    disabled: true,
                });
                for (const groupName of groups) {
                    menuItems.push({
                        name: groupName,
                        iconName: 'label',
                        action: () => this.scrollToGroup(sectionName, groupName),
                    });
                }
            }
            WccContextmenu.show(e, menuItems);
        }
        showGroupContextMenu(e, groupName) {
            WccContextmenu.show(e, [
                {
                    name: `Show "${groupName}"`,
                    iconName: 'filter_alt',
                    action: () => {
                        this.searchQuery = groupName;
                        this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
                    },
                },
            ]);
        }
        /**
         * Render the PINNED section (only if there are pinned items)
         */
        renderPinnedSection() {
            if (!this.dashboardRef?.sections || this.pinnedItems.size === 0) {
                return null;
            }
            const isCollapsed = this.collapsedSections.has('__pinned__');
            // Collect pinned items with their original section info
            // Pinned items are NOT filtered by search - they always remain visible
            const pinnedEntries = [];
            for (const key of this.pinnedItems) {
                const [sectionName, itemName] = key.split('::');
                const section = this.dashboardRef.sections.find(s => s.name === sectionName);
                if (section) {
                    const entries = getSectionItems(section);
                    const found = entries.find(([name]) => name === itemName);
                    if (found) {
                        pinnedEntries.push({ sectionName, itemName, item: found[1], section });
                    }
                }
            }
            if (pinnedEntries.length === 0) {
                return null;
            }
            return html `
      <div
        class="section-header pinned-section ${isCollapsed ? 'collapsed' : ''}"
        @click=${() => this.toggleSectionCollapsed('__pinned__')}
      >
        <i class="material-symbols-outlined expand-icon">expand_more</i>
        <i class="material-symbols-outlined section-icon">push_pin</i>
        <span>Pinned</span>
      </div>
      <div class="section-content ${isCollapsed ? 'collapsed' : ''}">
        ${pinnedEntries.map(({ sectionName, itemName, item, section }) => {
                const isSelected = this.selectedItem === item;
                const type = section.type === 'elements' ? 'element' : 'page';
                const icon = section.type === 'elements'
                    ? (this.getElementGroups(item).length > 1 ? 'library_books' : 'featured_video')
                    : 'insert_drive_file';
                return html `
            <div
              class="selectOption ${isSelected ? 'selected' : ''}"
              @click=${async () => {
                    await plugins.deesDomtools.DomTools.setupDomTools();
                    this.selectItem(type, itemName, item, 0, section);
                }}
              @contextmenu=${(e) => this.showContextMenu(e, sectionName, itemName)}
            >
              <i class="material-symbols-outlined">${icon}</i>
              <div class="text">${this.highlightMatch(itemName)}</div>
              <span class="section-tag">${sectionName}</span>
            </div>
          `;
            })}
      </div>
    `;
        }
        /**
         * Render all sections
         */
        renderSections() {
            if (!this.dashboardRef?.sections) {
                return null;
            }
            this.initCollapsedSections();
            return this.dashboardRef.sections.map((section) => {
                // Check if section has any matching items
                const entries = getSectionItems(section);
                const filteredEntries = entries.filter(([name, item]) => {
                    if (this.matchesSearch(name))
                        return true;
                    const rawGroups = item.demoGroups;
                    if (!rawGroups)
                        return false;
                    const groups = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
                    return groups.some(g => this.matchesSearch(g));
                });
                // Hide section if no items match the search
                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 html `
        <div
          class="section-header ${isCollapsed ? 'collapsed' : ''}"
          @click=${() => this.toggleSectionCollapsed(section.name)}
        >
          <i class="material-symbols-outlined expand-icon">expand_more</i>
          ${section.icon ? html `<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);
            // Filter entries by search query
            const filteredEntries = entries.filter(([name, item]) => {
                if (this.matchesSearch(name))
                    return true;
                const rawGroups = item.demoGroups;
                if (!rawGroups)
                    return false;
                const groups = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
                return groups.some(g => this.matchesSearch(g));
            });
            if (section.type === 'pages') {
                return filteredEntries.map(([pageName, item]) => {
                    const isPinned = this.isPinned(section.name, pageName);
                    return html `
          <div
            class="selectOption ${this.selectedItem === item ? 'selected' : ''} ${isPinned ? 'pinned' : ''}"
            @click=${async () => {
                        await plugins.deesDomtools.DomTools.setupDomTools();
                        this.selectItem('page', pageName, item, 0, section);
                    }}
            @contextmenu=${(e) => this.showContextMenu(e, section.name, pageName)}
          >
            <i class="material-symbols-outlined">insert_drive_file</i>
            <div class="text">${this.highlightMatch(pageName)}</div>
          </div>
        `;
                });
            }
            else {
                // type === 'elements' - group by demoGroups (supports string | string[])
                const groupedItems = new Map();
                for (const entry of filteredEntries) {
                    const [, item] = entry;
                    const rawGroups = item.demoGroups;
                    const groups = rawGroups
                        ? (Array.isArray(rawGroups) ? rawGroups : [rawGroups])
                        : [null];
                    for (const group of groups) {
                        if (!groupedItems.has(group)) {
                            groupedItems.set(group, []);
                        }
                        groupedItems.get(group).push(entry);
                    }
                }
                const renderItems = [];
                // Add ungrouped items
                const ungrouped = groupedItems.get(null) || [];
                for (const entry of ungrouped) {
                    renderItems.push({ type: 'element', entry, sortKey: entry[0].toLowerCase() });
                }
                // Add groups (sorted by group name)
                for (const [groupName, items] of groupedItems) {
                    if (groupName === null)
                        continue;
                    renderItems.push({ type: 'group', groupName, items, sortKey: groupName.toLowerCase() });
                }
                // Sort all items alphabetically by sortKey
                renderItems.sort((a, b) => a.sortKey.localeCompare(b.sortKey));
                // Render in sorted order
                return renderItems.map((item) => {
                    if (item.type === 'element') {
                        return this.renderElementItem(item.entry, section);
                    }
                    else {
                        return html `
            <div class="item-group ${this.isGroupFilterMatch(item.groupName) ? 'group-filter-match' : ''}" data-group="${item.groupName}">
              <span
                class="item-group-legend"
                @contextmenu=${(e) => this.showGroupContextMenu(e, item.groupName)}
              >${item.groupName}</span>
              ${item.items.map((entry) => this.renderElementItem(entry, section))}
            </div>
          `;
                    }
                });
            }
        }
        /**
         * Render a single element item (used by renderSectionItems)
         */
        renderElementItem(entry, section) {
            const [elementName, item] = entry;
            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;
            const isPinned = this.isPinned(section.name, elementName);
            if (isMultiDemo) {
                // Multi-demo element - render as expandable folder
                return html `
        <div
          class="selectOption folder ${isExpanded ? 'expanded' : ''} ${isSelected ? 'selected' : ''} ${isPinned ? 'pinned' : ''}"
          @click=${() => this.toggleExpanded(elementName)}
          @contextmenu=${(e) => this.showContextMenu(e, section.name, elementName)}
        >
          <i class="material-symbols-outlined expand-icon">chevron_right</i>
          <div class="text">${this.highlightMatch(elementName)}</div>
        </div>
        ${isExpanded ? html `
          <div class="demo-children">
            ${Array.from({ length: demoCount }, (_, i) => {
                    const demoIndex = i;
                    const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
                    return html `
                <div
                  class="demo-child ${isThisDemoSelected ? 'selected' : ''}"
                  @click=${async () => {
                        await plugins.deesDomtools.DomTools.setupDomTools();
                        this.selectItem('element', elementName, item, demoIndex, section);
                    }}
                >
                  <i class="material-symbols-outlined">play_circle</i>
                  <div class="text">demo${demoIndex + 1}</div>
                </div>
              `;
                })}
          </div>
        ` : null}
      `;
            }
            else {
                // Single demo element
                const icon = this.getElementGroups(item).length > 1 ? 'library_books' : 'featured_video';
                return html `
        <div
          class="selectOption ${isSelected ? 'selected' : ''} ${isPinned ? 'pinned' : ''}"
          @click=${async () => {
                    await plugins.deesDomtools.DomTools.setupDomTools();
                    this.selectItem('element', elementName, item, 0, section);
                }}
          @contextmenu=${(e) => this.showContextMenu(e, section.name, elementName)}
        >
          <i class="material-symbols-outlined">${icon}</i>
          <div class="text">${this.highlightMatch(elementName)}</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);
            if (newSet.has(elementName)) {
                newSet.delete(elementName);
            }
            else {
                newSet.add(elementName);
            }
            this.expandedElements = newSet;
        }
        handleSearchInput(e) {
            const input = e.target;
            this.searchQuery = input.value;
            this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
        }
        clearSearch() {
            this.searchQuery = '';
            this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
            const input = this.shadowRoot.querySelector('.search-input');
            if (input)
                input.focus();
        }
        handleMenuScroll(e) {
            const target = e.target;
            this.isMenuScrolled = target.scrollTop > 0;
        }
        matchesSearch(name) {
            if (!this.searchQuery)
                return true;
            return name.toLowerCase().includes(this.searchQuery.toLowerCase());
        }
        isGroupFilterMatch(groupName) {
            return !!this.searchQuery && groupName.toLowerCase() === this.searchQuery.toLowerCase();
        }
        getElementGroups(item) {
            const raw = item?.demoGroups;
            if (!raw)
                return [];
            return Array.isArray(raw) ? raw : [raw];
        }
        scrollToGroup(sectionName, groupName) {
            // Ensure the section is not collapsed
            this.collapsedSections.delete(sectionName);
            // Clear any active search so all groups are visible
            this.searchQuery = '';
            this.requestUpdate();
            // After render, scroll to the group element
            this.updateComplete.then(() => {
                const groupEl = this.shadowRoot?.querySelector(`.item-group[data-group="${groupName}"]`);
                if (groupEl) {
                    groupEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    // Brief highlight flash
                    groupEl.classList.add('group-highlight');
                    setTimeout(() => groupEl.classList.remove('group-highlight'), 1500);
                }
            });
        }
        highlightMatch(text) {
            if (!this.searchQuery)
                return html `${text}`;
            const lowerText = text.toLowerCase();
            const lowerQuery = this.searchQuery.toLowerCase();
            const index = lowerText.indexOf(lowerQuery);
            if (index === -1)
                return html `${text}`;
            const before = text.slice(0, index);
            const match = text.slice(index, index + this.searchQuery.length);
            const after = text.slice(index + this.searchQuery.length);
            return html `${before}<span class="highlight">${match}</span>${after}`;
        }
        updated(changedProperties) {
            super.updated(changedProperties);
            // Handle delayed hide for native mode transition
            if (changedProperties.has('isNative')) {
                if (this.isNative) {
                    // Delay hiding until frame animation completes
                    setTimeout(() => {
                        this.isHidden = true;
                    }, 300);
                }
                else {
                    // Show immediately when exiting native mode
                    this.isHidden = false;
                }
            }
            // Auto-expand folder when a multi-demo element is selected
            if (changedProperties.has('selectedItem') && this.selectedItem && this.dashboardRef?.sections) {
                // Find the element in any section
                for (const section of this.dashboardRef.sections) {
                    if (section.type !== 'elements')
                        continue;
                    const entries = getSectionItems(section);
                    const found = entries.find(([_, 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;
                    }
                }
            }
        }
        // ============ Resize functionality ============
        startResize = (e) => {
            e.preventDefault();
            this.isResizing = true;
            const startX = e.clientX;
            const startWidth = this.sidebarWidth;
            // Cache references once at start
            const frame = this.dashboardRef?.shadowRoot?.querySelector('wcc-frame');
            const properties = this.dashboardRef?.shadowRoot?.querySelector('wcc-properties');
            // Disable frame transition during resize
            if (frame) {
                frame.isResizing = true;
            }
            const onMouseMove = (e) => {
                const newWidth = Math.min(400, Math.max(150, startWidth + (e.clientX - startX)));
                this.sidebarWidth = newWidth;
                // Update frame and properties directly
                if (frame) {
                    frame.sidebarWidth = newWidth;
                }
                if (properties) {
                    properties.sidebarWidth = newWidth;
                }
            };
            const onMouseUp = () => {
                this.isResizing = false;
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
                // Re-enable frame transition
                if (frame) {
                    frame.isResizing = false;
                }
                // Dispatch event on release for URL persistence
                this.dispatchEvent(new CustomEvent('widthChanged', { detail: this.sidebarWidth }));
            };
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        };
        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;
            // Set the selected section on dashboard
            if (section) {
                this.dashboardRef.selectedSection = section;
            }
            this.dispatchEvent(new CustomEvent('selectedType', {
                detail: typeArg
            }));
            this.dispatchEvent(new CustomEvent('selectedItemName', {
                detail: itemNameArg
            }));
            this.dispatchEvent(new CustomEvent('selectedItem', {
                detail: itemArg
            }));
            this.dashboardRef.buildUrl();
            // Force re-render to update demo child selection indicator
            this.requestUpdate();
        }
    };
    return WccSidebar = _classThis;
})();
export { WccSidebar };
//# sourceMappingURL=data:application/json;base64, 