@design.estate/wcctools 6.1.0 → 6.2.0

package/ts_shell/elements/wcc-sidebar.ts

@@ -0,0 +1,1419 @@
+import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
+import * as plugins from '../plugins.js';
+import { WccContextmenu, type IContextMenuItem } from './wcc-contextmenu.js';
+
+type IWccManifestEntry = plugins.interfaces.IWccManifestEntry;
+type IWccManifestSection = plugins.interfaces.IWccManifestSection;
+
+const SIDEBAR_MIN_WIDTH = 150;
+const SIDEBAR_MAX_WIDTH = 400;
+const PINNED_SECTION = '__pinned__';
+
+/** Anything the search can match: a listed entry or an entry without demo. */
+interface ISearchableEntry {
+  name: string;
+  tagName: string | null;
+  demoGroups?: string[];
+}
+
+@customElement('wcc-sidebar')
+export class WccSidebar extends DeesElement {
+  @property({ attribute: false })
+  accessor manifest: plugins.interfaces.IWccCatalogManifest | null = null;
+
+  @property({ attribute: false })
+  accessor selection: plugins.interfaces.IWccSelection | null = null;
+
+  @property({ type: Boolean })
+  accessor isNative: boolean = false;
+
+  // Track which elements are expanded (for multi-demo elements)
+  @state()
+  accessor expandedElements: Set<string> = new Set();
+
+  // Track which sections are collapsed
+  @state()
+  accessor collapsedSections: Set<string> = new Set();
+
+  // Sections whose "Without demo" group is open
+  @state()
+  accessor expandedWithoutDemo: Set<string> = new Set();
+
+  // Search query for filtering sidebar items
+  @property()
+  accessor searchQuery: string = '';
+
+  // Pinned items as Set of "sectionName::itemName"
+  @property({ attribute: false })
+  accessor pinnedItems: Set<string> = new Set();
+
+  // Sidebar width (resizable)
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
+  // Track if currently resizing
+  @state()
+  accessor isResizing: boolean = false;
+
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
+  // Track if menu is scrolled for header shadow
+  @state()
+  accessor isMenuScrolled: boolean = false;
+
+  /** Section names whose configured initial collapse state was applied. */
+  private initializedSections = new Set<string>();
+
+  /** data-key of the tree item that holds the roving tab stop */
+  private focusedKey: string | null = null;
+
+  private hideTimeout: ReturnType<typeof setTimeout> | undefined;
+  private highlightedGroup: Element | null = null;
+  private groupHighlightTimeout: ReturnType<typeof setTimeout> | undefined;
+  private endResize: (() => void) | null = null;
+
+  public async disconnectedCallback() {
+    const disconnected = super.disconnectedCallback();
+    // A removed sidebar has no frame transition to wait for
+    clearTimeout(this.hideTimeout);
+    this.isHidden = this.isNative;
+    this.endGroupHighlight();
+    this.endResize?.();
+    return disconnected;
+  }
+
+  /**
+   * Returns the scrollable container element (.menu) for external scroll management
+   */
+  public get scrollableContainer(): HTMLElement | null {
+    return this.shadowRoot?.querySelector('.menu') as HTMLElement | null;
+  }
+
+  public render(): TemplateResult {
+    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);
+        }
+
+        @container wccShell (max-width: 600px) {
+          :host {
+            right: 0;
+            bottom: auto;
+            width: 100%;
+            height: 120px;
+            border-right: 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          }
+
+          .resize-handle {
+            display: none;
+          }
+        }
+
+        nav.sidebar-nav {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .tree {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .treeitem {
+          outline: none;
+        }
+
+        .treeitem:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: -2px;
+        }
+
+        .search-input:focus-visible {
+          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
+        }
+
+        .search-input::-webkit-search-cancel-button {
+          -webkit-appearance: none;
+          display: none;
+        }
+
+        .search-clear:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 0;
+          color: var(--foreground);
+        }
+
+        .resize-handle:focus-visible {
+          outline: none;
+          background: var(--primary);
+        }
+
+        /* Elements without a demo: listed for coverage, not navigable */
+        .nodemo-header {
+          user-select: none;
+          margin: 0.375rem 0.5rem 0.125rem;
+          padding: 0.4rem 0.75rem;
+          display: grid;
+          grid-template-columns: 16px 1fr auto;
+          align-items: center;
+          gap: 0.5rem;
+          border-radius: var(--radius);
+          cursor: pointer;
+          font-size: 0.65rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: #666;
+          border-top: 1px dashed rgba(255, 255, 255, 0.08);
+        }
+
+        .nodemo-header:hover {
+          color: #999;
+          background: rgba(255, 255, 255, 0.03);
+        }
+
+        .nodemo-header .expand-icon {
+          font-size: 14px;
+          opacity: 0.5;
+          transition: transform 0.2s ease;
+        }
+
+        .nodemo-header[aria-expanded='true'] .expand-icon {
+          transform: rotate(90deg);
+        }
+
+        .nodemo-count {
+          font-size: 0.6rem;
+          letter-spacing: 0;
+          color: #777;
+          background: rgba(255, 255, 255, 0.06);
+          padding: 0.05rem 0.4rem;
+          border-radius: 9999px;
+        }
+
+        .selectOption.nodemo {
+          cursor: default;
+          color: #5c5c5c;
+          padding-top: 0.35rem;
+          padding-bottom: 0.35rem;
+        }
+
+        .selectOption.nodemo:hover {
+          background: transparent;
+          color: #5c5c5c;
+        }
+
+        .selectOption.nodemo .material-symbols-outlined {
+          opacity: 0.35;
+        }
+      </style>
+      <nav class="sidebar-nav" aria-label="Catalog">
+        <div class="sidebar-header ${this.isMenuScrolled ? 'scrolled' : ''}">
+          <div class="search-container" role="search">
+            <input
+              type="search"
+              class="search-input"
+              placeholder="Search..."
+              aria-label="Search catalog"
+              aria-controls="wcc-tree"
+              .value=${this.searchQuery}
+              @input=${this.handleSearchInput}
+              @keydown=${this.handleSearchKeydown}
+            />
+            ${this.searchQuery ? html`
+              <button type="button" class="search-clear" aria-label="Clear search" @click=${this.clearSearch}>
+                <i class="material-symbols-outlined" aria-hidden="true">close</i>
+              </button>
+            ` : null}
+          </div>
+        </div>
+        <div
+          class="tree"
+          id="wcc-tree"
+          role="tree"
+          aria-label="Catalog entries"
+          @keydown=${this.handleTreeKeydown}
+          @focusin=${this.handleTreeFocusin}
+        >
+          ${this.renderPinnedSection()}
+          <div class="menu" @scroll=${this.handleMenuScroll}>
+            ${this.renderSections()}
+          </div>
+        </div>
+      </nav>
+      <div
+        class="resize-handle ${this.isResizing ? 'active' : ''}"
+        role="separator"
+        tabindex="0"
+        aria-orientation="vertical"
+        aria-label="Resize sidebar"
+        aria-controls="wcc-tree"
+        aria-valuemin=${SIDEBAR_MIN_WIDTH}
+        aria-valuemax=${SIDEBAR_MAX_WIDTH}
+        aria-valuenow=${this.sidebarWidth}
+        @mousedown=${this.startResize}
+        @keydown=${this.handleResizeKeydown}
+      ></div>
+    `;
+  }
+
+  // ============ Tree item keys ============
+
+  private getSectionKey(sectionName: string): string {
+    return `section:${sectionName}`;
+  }
+
+  private getItemKey(sectionName: string, groupName: string | null, itemName: string): string {
+    return `item:${sectionName}::${groupName ?? ''}::${itemName}`;
+  }
+
+  /**
+   * Apply each section's configured initial collapse state once, also to sections a reload adds
+   */
+  private initCollapsedSections(sectionsArg: IWccManifestSection[]) {
+    const fresh = sectionsArg.filter((section) => !this.initializedSections.has(section.name));
+    if (fresh.length === 0) return;
+    const collapsed = new Set(this.collapsedSections);
+    for (const section of fresh) {
+      this.initializedSections.add(section.name);
+      if (section.collapsed) {
+        collapsed.add(section.name);
+      }
+    }
+    this.collapsedSections = collapsed;
+  }
+
+  private findEntry(sectionName: string, itemName: string): { section: IWccManifestSection; entry: IWccManifestEntry } | null {
+    const section = this.manifest?.sections.find((sectionArg) => sectionArg.name === sectionName);
+    const entry = section?.entries.find((entryArg) => entryArg.name === itemName);
+    return section && entry ? { section, entry } : null;
+  }
+
+  private isSelected(sectionName: string, itemName: string, demoIndex?: number): boolean {
+    return !!this.selection
+      && this.selection.sectionName === sectionName
+      && this.selection.itemName === itemName
+      && (demoIndex === undefined || this.selection.demoIndex === demoIndex);
+  }
+
+  // ============ Pinning helpers ============
+
+  private getPinKey(sectionName: string, itemName: string): string {
+    return `${sectionName}::${itemName}`;
+  }
+
+  private isPinned(sectionName: string, itemName: string): boolean {
+    return this.pinnedItems.has(this.getPinKey(sectionName, itemName));
+  }
+
+  private togglePin(sectionName: string, itemName: string) {
+    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 }));
+  }
+
+  private showContextMenu(e: MouseEvent, sectionName: string, itemName: string) {
+    const isPinned = this.isPinned(sectionName, itemName);
+    const groups = this.findEntry(sectionName, itemName)?.entry.demoGroups ?? [];
+
+    const menuItems: IContextMenuItem[] = [
+      {
+        name: isPinned ? 'Unpin' : 'Pin',
+        iconName: '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),
+        });
+      }
+    }
+
+    const owner = (e.currentTarget as HTMLElement | null)?.closest<HTMLElement>('[role="treeitem"]') ?? undefined;
+    WccContextmenu.show(e, menuItems, { ownerElement: owner });
+  }
+
+  private showGroupContextMenu(e: MouseEvent, groupName: string) {
+    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)
+   */
+  private renderPinnedSection() {
+    if (!this.manifest || this.pinnedItems.size === 0) {
+      return null;
+    }
+
+    const isCollapsed = this.collapsedSections.has(PINNED_SECTION);
+
+    // Pinned items are NOT filtered by search - they always remain visible
+    const pinnedEntries: Array<{ section: IWccManifestSection; entry: IWccManifestEntry }> = [];
+    for (const key of this.pinnedItems) {
+      const [sectionName, itemName] = key.split('::');
+      const found = this.findEntry(sectionName, itemName);
+      if (found) {
+        pinnedEntries.push(found);
+      }
+    }
+
+    if (pinnedEntries.length === 0) {
+      return null;
+    }
+
+    return html`
+      <div
+        class="treeitem section-header pinned-section ${isCollapsed ? 'collapsed' : ''}"
+        role="treeitem"
+        tabindex="-1"
+        aria-level="1"
+        aria-expanded=${isCollapsed ? 'false' : 'true'}
+        data-key=${this.getSectionKey(PINNED_SECTION)}
+        @click=${() => this.toggleSectionCollapsed(PINNED_SECTION)}
+      >
+        <i class="material-symbols-outlined expand-icon" aria-hidden="true">expand_more</i>
+        <i class="material-symbols-outlined section-icon" aria-hidden="true">push_pin</i>
+        <span>Pinned</span>
+      </div>
+      <div class="section-content ${isCollapsed ? 'collapsed' : ''}" role="group" aria-label="Pinned">
+        ${pinnedEntries.map(({ section, entry }) => {
+          const isSelected = this.isSelected(section.name, entry.name);
+          const icon = section.type === 'elements'
+            ? (entry.demoGroups.length > 1 ? 'library_books' : 'featured_video')
+            : 'insert_drive_file';
+
+          return html`
+            <div
+              class="treeitem selectOption ${isSelected ? 'selected' : ''}"
+              role="treeitem"
+              tabindex="-1"
+              aria-level="2"
+              aria-selected=${isSelected ? 'true' : 'false'}
+              aria-current=${isSelected ? 'page' : 'false'}
+              data-key=${`pinned:${section.name}::${entry.name}`}
+              title=${entry.name}
+              @click=${() => this.selectItem(section.name, entry.name, 0)}
+              @contextmenu=${(e: MouseEvent) => this.showContextMenu(e, section.name, entry.name)}
+            >
+              <i class="material-symbols-outlined" aria-hidden="true">${icon}</i>
+              <div class="text">${this.highlightMatch(entry.name)}</div>
+              <span class="section-tag">${section.name}</span>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  /**
+   * Render all sections
+   */
+  private renderSections() {
+    if (!this.manifest) {
+      return null;
+    }
+
+    return this.manifest.sections.map((section) => {
+      const listedEntries = section.entries.filter((entry) => this.entryMatchesSearch(entry));
+      const withoutDemoEntries = section.entriesWithoutDemo.filter((entry) => this.entryMatchesSearch(entry));
+
+      // Hide section if no items match the search
+      if (listedEntries.length === 0 && withoutDemoEntries.length === 0 && this.searchQuery) {
+        return null;
+      }
+
+      const isCollapsed = this.collapsedSections.has(section.name);
+
+      return html`
+        <div
+          class="treeitem section-header ${isCollapsed ? 'collapsed' : ''}"
+          role="treeitem"
+          tabindex="-1"
+          aria-level="1"
+          aria-expanded=${isCollapsed ? 'false' : 'true'}
+          data-key=${this.getSectionKey(section.name)}
+          @click=${() => this.toggleSectionCollapsed(section.name)}
+        >
+          <i class="material-symbols-outlined expand-icon" aria-hidden="true">expand_more</i>
+          ${section.icon ? html`<i class="material-symbols-outlined section-icon" aria-hidden="true">${section.icon}</i>` : null}
+          <span>${section.name}</span>
+        </div>
+        <div class="section-content ${isCollapsed ? 'collapsed' : ''}" role="group" aria-label=${section.name}>
+          ${this.renderSectionItems(section, listedEntries)}
+          ${this.renderWithoutDemoGroup(section, withoutDemoEntries)}
+        </div>
+      `;
+    });
+  }
+
+  /**
+   * Render the listed (navigable) items of a section
+   */
+  private renderSectionItems(section: IWccManifestSection, filteredEntries: IWccManifestEntry[]) {
+    if (section.type === 'pages') {
+      return filteredEntries.map((entry) => {
+        const isPinned = this.isPinned(section.name, entry.name);
+        const isSelected = this.isSelected(section.name, entry.name);
+        return html`
+          <div
+            class="treeitem selectOption ${isSelected ? 'selected' : ''} ${isPinned ? 'pinned' : ''}"
+            role="treeitem"
+            tabindex="-1"
+            aria-level="2"
+            aria-selected=${isSelected ? 'true' : 'false'}
+            aria-current=${isSelected ? 'page' : 'false'}
+            data-key=${this.getItemKey(section.name, null, entry.name)}
+            title=${entry.name}
+            @click=${() => this.selectItem(section.name, entry.name, 0)}
+            @contextmenu=${(e: MouseEvent) => this.showContextMenu(e, section.name, entry.name)}
+          >
+            <i class="material-symbols-outlined" aria-hidden="true">insert_drive_file</i>
+            <div class="text">${this.highlightMatch(entry.name)}</div>
+          </div>
+        `;
+      });
+    }
+
+    // type === 'elements' - group by demoGroups
+    const groupedItems = new Map<string | null, IWccManifestEntry[]>();
+
+    for (const entry of filteredEntries) {
+      for (const group of entry.demoGroups.length > 0 ? entry.demoGroups : [null]) {
+        if (!groupedItems.has(group)) {
+          groupedItems.set(group, []);
+        }
+        groupedItems.get(group)!.push(entry);
+      }
+    }
+
+    // Build a unified list of render items (ungrouped elements and groups)
+    // Each item has a sortKey (element name or group name)
+    type TRenderItem =
+      | { type: 'element'; entry: IWccManifestEntry; sortKey: string }
+      | { type: 'group'; groupName: string; items: IWccManifestEntry[]; sortKey: string };
+
+    const renderItems: TRenderItem[] = [];
+
+    for (const entry of groupedItems.get(null) || []) {
+      renderItems.push({ type: 'element', entry, sortKey: entry.name.toLowerCase() });
+    }
+
+    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));
+
+    return renderItems.map((item) => {
+      if (item.type === 'element') {
+        return this.renderElementItem(item.entry, section, null);
+      }
+      return html`
+        <div
+          class="item-group ${this.isGroupFilterMatch(item.groupName) ? 'group-filter-match' : ''}"
+          role="group"
+          aria-label=${item.groupName}
+          data-group="${item.groupName}"
+        >
+          <span
+            class="item-group-legend"
+            aria-hidden="true"
+            @contextmenu=${(e: MouseEvent) => this.showGroupContextMenu(e, item.groupName)}
+          >${item.groupName}</span>
+          ${item.items.map((entry) => this.renderElementItem(entry, section, item.groupName))}
+        </div>
+      `;
+    });
+  }
+
+  /**
+   * Render the "Without demo" group: registered elements that have no demo.
+   * Listed for coverage; the entries are not navigable.
+   */
+  private renderWithoutDemoGroup(section: IWccManifestSection, entries: plugins.interfaces.IWccManifestEntryWithoutDemo[]) {
+    if (section.type !== 'elements' || entries.length === 0) {
+      return null;
+    }
+    // A search opens the group so its matches are visible
+    const isOpen = !!this.searchQuery || this.expandedWithoutDemo.has(section.name);
+
+    return html`
+      <div
+        class="treeitem nodemo-header"
+        role="treeitem"
+        tabindex="-1"
+        aria-level="2"
+        aria-expanded=${isOpen ? 'true' : 'false'}
+        data-key=${`nodemo-group:${section.name}`}
+        @click=${() => this.toggleWithoutDemo(section.name)}
+      >
+        <i class="material-symbols-outlined expand-icon" aria-hidden="true">chevron_right</i>
+        <span>Without demo</span>
+        <span class="nodemo-count" aria-label=${`${entries.length} elements`}>${entries.length}</span>
+      </div>
+      ${isOpen ? html`
+        <div class="nodemo-list" role="group" aria-label="Without demo">
+          ${entries.map((entry) => html`
+            <div
+              class="treeitem selectOption nodemo"
+              role="treeitem"
+              tabindex="-1"
+              aria-level="3"
+              aria-disabled="true"
+              aria-description="No demo"
+              data-key=${`nodemo:${section.name}::${entry.name}`}
+              title=${entry.tagName ? `<${entry.tagName}> has no demo` : `${entry.name} has no demo`}
+            >
+              <i class="material-symbols-outlined" aria-hidden="true">block</i>
+              <div class="text">${this.highlightMatch(entry.name)}</div>
+            </div>
+          `)}
+        </div>
+      ` : null}
+    `;
+  }
+
+  /**
+   * Render a single element item (used by renderSectionItems)
+   */
+  private renderElementItem(entry: IWccManifestEntry, section: IWccManifestSection, groupName: string | null): TemplateResult {
+    const elementName = entry.name;
+    const isExpanded = this.expandedElements.has(elementName);
+    const isSelected = this.isSelected(section.name, elementName);
+    const isPinned = this.isPinned(section.name, elementName);
+    const itemKey = this.getItemKey(section.name, groupName, elementName);
+
+    if (entry.demoCount > 1) {
+      // Multi-demo element - render as expandable folder
+      return html`
+        <div
+          class="treeitem selectOption folder ${isExpanded ? 'expanded' : ''} ${isSelected ? 'selected' : ''} ${isPinned ? 'pinned' : ''}"
+          role="treeitem"
+          tabindex="-1"
+          aria-level="2"
+          aria-expanded=${isExpanded ? 'true' : 'false'}
+          data-key=${itemKey}
+          title=${elementName}
+          @click=${() => this.toggleExpanded(elementName)}
+          @contextmenu=${(e: MouseEvent) => this.showContextMenu(e, section.name, elementName)}
+        >
+          <i class="material-symbols-outlined expand-icon" aria-hidden="true">chevron_right</i>
+          <div class="text">${this.highlightMatch(elementName)}</div>
+        </div>
+        ${isExpanded ? html`
+          <div class="demo-children" role="group" aria-label=${`${elementName} demos`}>
+            ${Array.from({ length: entry.demoCount }, (_, demoIndex) => {
+              const isThisDemoSelected = this.isSelected(section.name, elementName, demoIndex);
+              return html`
+                <div
+                  class="treeitem demo-child ${isThisDemoSelected ? 'selected' : ''}"
+                  role="treeitem"
+                  tabindex="-1"
+                  aria-level="3"
+                  aria-selected=${isThisDemoSelected ? 'true' : 'false'}
+                  aria-current=${isThisDemoSelected ? 'page' : 'false'}
+                  data-key=${`${itemKey}::demo${demoIndex}`}
+                  @click=${() => this.selectItem(section.name, elementName, demoIndex)}
+                >
+                  <i class="material-symbols-outlined" aria-hidden="true">play_circle</i>
+                  <div class="text">demo${demoIndex + 1}</div>
+                </div>
+              `;
+            })}
+          </div>
+        ` : null}
+      `;
+    }
+
+    // Single demo element
+    const icon = entry.demoGroups.length > 1 ? 'library_books' : 'featured_video';
+    return html`
+      <div
+        class="treeitem selectOption ${isSelected ? 'selected' : ''} ${isPinned ? 'pinned' : ''}"
+        role="treeitem"
+        tabindex="-1"
+        aria-level="2"
+        aria-selected=${isSelected ? 'true' : 'false'}
+        aria-current=${isSelected ? 'page' : 'false'}
+        data-key=${itemKey}
+        title=${elementName}
+        @click=${() => this.selectItem(section.name, elementName, 0)}
+        @contextmenu=${(e: MouseEvent) => this.showContextMenu(e, section.name, elementName)}
+      >
+        <i class="material-symbols-outlined" aria-hidden="true">${icon}</i>
+        <div class="text">${this.highlightMatch(elementName)}</div>
+      </div>
+    `;
+  }
+
+  private toggleSectionCollapsed(sectionName: string) {
+    const newSet = new Set(this.collapsedSections);
+    if (newSet.has(sectionName)) {
+      newSet.delete(sectionName);
+    } else {
+      newSet.add(sectionName);
+    }
+    this.collapsedSections = newSet;
+  }
+
+  private toggleExpanded(elementName: string) {
+    const newSet = new Set(this.expandedElements);
+    if (newSet.has(elementName)) {
+      newSet.delete(elementName);
+    } else {
+      newSet.add(elementName);
+    }
+    this.expandedElements = newSet;
+  }
+
+  private toggleWithoutDemo(sectionName: string) {
+    if (this.searchQuery) {
+      // Search keeps the group open while it has matches
+      return;
+    }
+    const newSet = new Set(this.expandedWithoutDemo);
+    if (newSet.has(sectionName)) {
+      newSet.delete(sectionName);
+    } else {
+      newSet.add(sectionName);
+    }
+    this.expandedWithoutDemo = newSet;
+  }
+
+  private handleSearchInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.searchQuery = input.value;
+    this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
+  }
+
+  private handleSearchKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      const target = this.getRovingTreeItem();
+      if (target) {
+        e.preventDefault();
+        this.focusTreeItem(target);
+      }
+    } else if (e.key === 'Escape' && this.searchQuery) {
+      e.preventDefault();
+      this.clearSearch();
+    }
+  }
+
+  private clearSearch() {
+    this.searchQuery = '';
+    this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
+    const input = this.shadowRoot.querySelector('.search-input') as HTMLInputElement;
+    if (input) input.focus();
+  }
+
+  private handleMenuScroll(e: Event) {
+    const target = e.target as HTMLElement;
+    this.isMenuScrolled = target.scrollTop > 0;
+  }
+
+  private matchesSearch(name: string): boolean {
+    if (!this.searchQuery) return true;
+    return name.toLowerCase().includes(this.searchQuery.toLowerCase());
+  }
+
+  /** An entry matches by name, registered tag name, or one of its demo groups. */
+  private entryMatchesSearch(entryArg: ISearchableEntry): boolean {
+    if (this.matchesSearch(entryArg.name)) return true;
+    if (entryArg.tagName && this.matchesSearch(entryArg.tagName)) return true;
+    return (entryArg.demoGroups ?? []).some((groupName) => this.matchesSearch(groupName));
+  }
+
+  private isGroupFilterMatch(groupName: string): boolean {
+    return !!this.searchQuery && groupName.toLowerCase() === this.searchQuery.toLowerCase();
+  }
+
+  private scrollToGroup(sectionName: string, groupName: string) {
+    // 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 && this.isConnected) {
+        groupEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        // Brief highlight flash
+        this.endGroupHighlight();
+        groupEl.classList.add('group-highlight');
+        this.highlightedGroup = groupEl;
+        this.groupHighlightTimeout = setTimeout(() => this.endGroupHighlight(), 1500);
+      }
+    });
+  }
+
+  private endGroupHighlight() {
+    clearTimeout(this.groupHighlightTimeout);
+    this.highlightedGroup?.classList.remove('group-highlight');
+    this.highlightedGroup = null;
+  }
+
+  private highlightMatch(text: string): TemplateResult {
+    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}`;
+  }
+
+  // ============ Keyboard navigation (ARIA tree, roving tabindex) ============
+
+  private getTreeItems(): HTMLElement[] {
+    return Array.from(this.shadowRoot?.querySelectorAll<HTMLElement>('[role="treeitem"]') ?? []);
+  }
+
+  private getVisibleTreeItems(): HTMLElement[] {
+    return this.getTreeItems().filter((itemArg) => itemArg.getClientRects().length > 0);
+  }
+
+  /** The tree item that should hold the tab stop: last focused, else selected, else first. */
+  private getRovingTreeItem(): HTMLElement | null {
+    const visible = this.getVisibleTreeItems();
+    return visible.find((itemArg) => itemArg.dataset.key === this.focusedKey)
+      ?? visible.find((itemArg) => itemArg.getAttribute('aria-selected') === 'true')
+      ?? visible[0]
+      ?? null;
+  }
+
+  private syncRovingTabindex() {
+    const active = this.getRovingTreeItem();
+    for (const item of this.getTreeItems()) {
+      item.tabIndex = item === active ? 0 : -1;
+    }
+  }
+
+  private focusTreeItem(itemArg: HTMLElement) {
+    this.focusedKey = itemArg.dataset.key ?? null;
+    for (const item of this.getTreeItems()) {
+      item.tabIndex = item === itemArg ? 0 : -1;
+    }
+    itemArg.focus();
+    itemArg.scrollIntoView({ block: 'nearest' });
+  }
+
+  private handleTreeFocusin(e: FocusEvent) {
+    const item = (e.target as HTMLElement).closest<HTMLElement>('[role="treeitem"]');
+    if (item) {
+      this.focusedKey = item.dataset.key ?? null;
+      for (const other of this.getTreeItems()) {
+        other.tabIndex = other === item ? 0 : -1;
+      }
+    }
+  }
+
+  private handleTreeKeydown(e: KeyboardEvent) {
+    const current = (e.target as HTMLElement).closest<HTMLElement>('[role="treeitem"]');
+    if (!current) return;
+    const items = this.getVisibleTreeItems();
+    const index = items.indexOf(current);
+    const level = Number(current.getAttribute('aria-level'));
+    const expanded = current.getAttribute('aria-expanded');
+
+    // The menu key and Shift+F10 open the entry's context menu, anchored to the entry
+    if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) {
+      e.preventDefault();
+      const rect = current.getBoundingClientRect();
+      current.dispatchEvent(new MouseEvent('contextmenu', {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        clientX: rect.left,
+        clientY: rect.bottom,
+      }));
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        if (items[index + 1]) this.focusTreeItem(items[index + 1]);
+        break;
+      case 'ArrowUp':
+        if (index > 0) this.focusTreeItem(items[index - 1]);
+        break;
+      case 'Home':
+        if (items[0]) this.focusTreeItem(items[0]);
+        break;
+      case 'End':
+        if (items.length > 0) this.focusTreeItem(items[items.length - 1]);
+        break;
+      case 'ArrowRight':
+        if (expanded === 'false') {
+          current.click();
+        } else if (expanded === 'true') {
+          const next = items[index + 1];
+          if (next && Number(next.getAttribute('aria-level')) > level) this.focusTreeItem(next);
+        }
+        break;
+      case 'ArrowLeft':
+        if (expanded === 'true') {
+          current.click();
+        } else {
+          const parent = items.slice(0, index).reverse()
+            .find((itemArg) => Number(itemArg.getAttribute('aria-level')) < level);
+          if (parent) this.focusTreeItem(parent);
+        }
+        break;
+      case 'Enter':
+      case ' ':
+        if (current.getAttribute('aria-disabled') !== 'true') {
+          current.click();
+        }
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  }
+
+  protected willUpdate(changedProperties: Map<string, unknown>) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has('manifest') && this.manifest) {
+      this.initCollapsedSections(this.manifest.sections);
+    }
+
+    // Auto-expand folder when a demo of a multi-demo element is selected
+    if (changedProperties.has('selection') && this.selection) {
+      const found = this.findEntry(this.selection.sectionName, this.selection.itemName);
+      if (found && found.entry.demoCount > 1 && !this.expandedElements.has(found.entry.name)) {
+        const newSet = new Set(this.expandedElements);
+        newSet.add(found.entry.name);
+        this.expandedElements = newSet;
+      }
+    }
+  }
+
+  protected updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    // Handle delayed hide for native mode transition
+    if (changedProperties.has('isNative')) {
+      // A hide still pending from an earlier switch to native mode no longer applies
+      clearTimeout(this.hideTimeout);
+      if (this.isNative && this.isConnected) {
+        // Delay hiding until frame animation completes
+        this.hideTimeout = setTimeout(() => {
+          this.isHidden = true;
+        }, 300);
+      } else {
+        // Show immediately when exiting native mode; a removed sidebar has nothing to wait for
+        this.isHidden = this.isNative;
+      }
+    }
+
+    this.syncRovingTabindex();
+  }
+
+  // ============ Resize functionality ============
+
+  /** Apply a sidebar width; the shell sizes the frame and properties panel from the event. */
+  private applyWidth(widthArg: number) {
+    const newWidth = Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, Math.round(widthArg)));
+    this.sidebarWidth = newWidth;
+    this.dispatchEvent(new CustomEvent('widthChanged', { detail: newWidth }));
+    return newWidth;
+  }
+
+  private handleResizeKeydown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 50 : 10;
+    let target: number;
+    switch (e.key) {
+      case 'ArrowLeft':
+        target = this.sidebarWidth - step;
+        break;
+      case 'ArrowRight':
+        target = this.sidebarWidth + step;
+        break;
+      case 'Home':
+        target = SIDEBAR_MIN_WIDTH;
+        break;
+      case 'End':
+        target = SIDEBAR_MAX_WIDTH;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const newWidth = this.applyWidth(target);
+    this.dispatchEvent(new CustomEvent('widthCommitted', { detail: newWidth }));
+  }
+
+  private startResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.endResize?.();
+    this.isResizing = true;
+    this.dispatchEvent(new CustomEvent('resizingChanged', { detail: true }));
+    const startX = e.clientX;
+    const startWidth = this.sidebarWidth;
+
+    const onMouseMove = (e: MouseEvent) => {
+      this.applyWidth(startWidth + (e.clientX - startX));
+    };
+
+    const stop = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      this.endResize = null;
+      this.isResizing = false;
+      this.dispatchEvent(new CustomEvent('resizingChanged', { detail: false }));
+    };
+
+    const onMouseUp = () => {
+      stop();
+      // Persist the width in the URL on release
+      this.dispatchEvent(new CustomEvent('widthCommitted', { detail: this.sidebarWidth }));
+    };
+
+    this.endResize = stop;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
+  public selectItem(sectionNameArg: string, itemNameArg: string, demoIndexArg: number = 0) {
+    const selection: plugins.interfaces.IWccSelection = {
+      sectionName: sectionNameArg,
+      itemName: itemNameArg,
+      demoIndex: demoIndexArg,
+    };
+    this.selection = selection;
+    this.dispatchEvent(new CustomEvent('selectionChanged', { detail: selection }));
+  }
+}