KC test uses shared LiveStreamManager, tree-nav dropdown, KC card badge fix

- KC test WS now acquires from LiveStreamManager instead of creating its
  own DXGI duplicator, eliminating capture contention with running LED targets
- Tree-nav refactored to compact dropdown on click with outside-click dismiss
  (closes on click outside the trigger+panel, not just outside the container)
- KC target card badge (e.g. "Daylight Cycle") no longer wastes empty space

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

server/src/wled_controller/api/routes/output_targets.py

@@ -849,59 +849,42 @@ async def test_kc_target_ws(
     await websocket.accept()
     logger.info(f"KC test WS connected for {target_id} (fps={fps})")
 
-    capture_stream = None
+    # Use the shared LiveStreamManager so we share the capture stream with
+    # running LED targets instead of creating a competing DXGI duplicator.
+    live_stream_mgr = processor_manager_inst._live_stream_manager
+    live_stream = None
+
     try:
+        live_stream = await asyncio.to_thread(
+            live_stream_mgr.acquire, target.picture_source_id
+        )
+        logger.info(f"KC test WS acquired shared live stream for {target.picture_source_id}")
+
+        prev_frame_ref = None
+
         while True:
             loop_start = time.monotonic()
 
-            pil_image = None
-            capture_stream_local = None
-
             try:
-                import httpx
+                capture = await asyncio.to_thread(live_stream.get_latest_frame)
-                # Reload chain each iteration for dynamic sources
-                chain = source_store_inst.resolve_stream_chain(target.picture_source_id)
-                raw_stream = chain["raw_stream"]
 
-                if isinstance(raw_stream, StaticImagePictureSource):
+                if capture is None or capture.image is None:
-                    source = raw_stream.image_source
+                    await asyncio.sleep(frame_interval)
-                    if source.startswith(("http://", "https://")):
+                    continue
-                        async with httpx.AsyncClient(timeout=15, follow_redirects=True) as client:
-                            resp = await client.get(source)
-                            resp.raise_for_status()
-                            pil_image = Image.open(io.BytesIO(resp.content)).convert("RGB")
-                    else:
-                        from pathlib import Path
-                        path = Path(source)
-                        if path.exists():
-                            pil_image = Image.open(path).convert("RGB")
 
-                elif isinstance(raw_stream, ScreenCapturePictureSource):
+                # Skip if same frame object (no new capture yet)
-                    try:
+                if capture is prev_frame_ref:
-                        capture_tmpl = template_store_inst.get_template(raw_stream.capture_template_id)
+                    await asyncio.sleep(frame_interval * 0.5)
-                    except ValueError:
+                    continue
-                        break
+                prev_frame_ref = capture
-
-                    if capture_tmpl.engine_type not in EngineRegistry.get_available_engines():
-                        break
-
-                    capture_stream_local = EngineRegistry.create_stream(
-                        capture_tmpl.engine_type, raw_stream.display_index, capture_tmpl.engine_config
-                    )
-                    capture_stream_local.initialize()
-                    screen_capture = capture_stream_local.capture_frame()
-                    if screen_capture is not None and isinstance(screen_capture.image, np.ndarray):
-                        pil_image = Image.fromarray(screen_capture.image)
-
-                else:
-                    # VideoCaptureSource or other — not directly supported in WS test
-                    break
 
+                pil_image = Image.fromarray(capture.image) if isinstance(capture.image, np.ndarray) else None
                 if pil_image is None:
                     await asyncio.sleep(frame_interval)
                     continue
 
-                # Apply postprocessing
+                # Apply postprocessing (if the source chain has PP templates)
+                chain = source_store_inst.resolve_stream_chain(target.picture_source_id)
                 pp_template_ids = chain.get("postprocessing_template_ids", [])
                 if pp_template_ids and pp_template_store_inst:
                     img_array = np.array(pil_image)
@@ -920,7 +903,7 @@ async def test_kc_target_ws(
                                     img_array = result
                             except ValueError:
                                 pass
-                    pil_image = Image.fromarray(img_array)
+                        pil_image = Image.fromarray(img_array)
 
                 # Extract colors
                 img_array = np.array(pil_image)
@@ -971,12 +954,6 @@ async def test_kc_target_ws(
                 if isinstance(inner_e, WebSocketDisconnect):
                     raise
                 logger.warning(f"KC test WS frame error for {target_id}: {inner_e}")
-            finally:
-                if capture_stream_local:
-                    try:
-                        capture_stream_local.cleanup()
-                    except Exception:
-                        pass
 
             elapsed = time.monotonic() - loop_start
             sleep_time = frame_interval - elapsed
@@ -988,9 +965,11 @@ async def test_kc_target_ws(
     except Exception as e:
         logger.error(f"KC test WS error for {target_id}: {e}", exc_info=True)
     finally:
-        if capture_stream:
+        if live_stream is not None:
             try:
-                capture_stream.cleanup()
+                await asyncio.to_thread(
+                    live_stream_mgr.release, target.picture_source_id
+                )
             except Exception:
                 pass
         logger.info(f"KC test WS closed for {target_id}")

server/src/wled_controller/static/css/patterns.css

@@ -36,6 +36,7 @@
 .stream-card-props {
     display: flex;
     flex-wrap: wrap;
+    align-items: flex-start;
     gap: 6px;
     margin-bottom: 8px;
 }
@@ -59,7 +60,7 @@
 }
 
 .stream-card-prop-full {
-    flex: 1 1 100%;
+    max-width: 100%;
     min-width: 0;
     white-space: nowrap;
     overflow: hidden;

server/src/wled_controller/static/css/tree-nav.css

@@ -1,22 +1,20 @@
 /* ===========================
-   Tree Sidebar Navigation
+   Tree Dropdown Navigation
    =========================== */
 
 .tree-layout {
     display: flex;
-    gap: 20px;
+    flex-direction: column;
-    align-items: flex-start;
+    gap: 0;
 }
 
 .tree-sidebar {
-    width: 210px;
-    min-width: 210px;
-    flex-shrink: 0;
     position: sticky;
-    top: calc(var(--sticky-top, 90px) + 8px);
+    top: var(--sticky-top, 90px);
-    max-height: calc(100vh - var(--sticky-top, 90px) - 24px);
+    z-index: 20;
-    overflow-y: auto;
+    padding: 8px 0 4px;
-    padding: 4px 0;
+    /* dropdown panel positions against this */
+    /* sticky already establishes containing block, but be explicit */
 }
 
 .tree-content {
@@ -24,62 +22,144 @@
     min-width: 0;
 }
 
-/* ── Group ── */
+/* ── Trigger bar ── */
 
-.tree-group {
+.tree-dd-trigger {
-    margin-bottom: 2px;
+    display: inline-flex;
-}
-
-.tree-group:first-child > .tree-group-header {
-    margin-top: 0;
-}
-
-.tree-group-header {
-    display: flex;
     align-items: center;
     gap: 6px;
-    padding: 6px 10px;
+    padding: 5px 10px;
     cursor: pointer;
-    user-select: none;
+    border: 1px solid var(--border-color);
-    font-size: 0.72rem;
+    border-radius: 8px;
-    font-weight: 700;
-    color: var(--text-muted);
-    border-radius: 6px;
-    transition: color 0.15s, background 0.15s;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-top: 6px;
-}
-
-.tree-group-header:hover {
-    color: var(--text-color);
     background: var(--bg-secondary);
+    user-select: none;
+    font-size: 0.82rem;
+    color: var(--text-color);
+    transition: border-color 0.15s, background 0.15s;
 }
 
-.tree-chevron {
+.tree-dd-trigger:hover {
-    font-size: 0.5rem;
+    border-color: var(--primary-color);
-    width: 10px;
+    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-secondary));
-    display: inline-block;
-    flex-shrink: 0;
-    transition: transform 0.2s ease;
-    color: var(--text-secondary);
 }
 
-.tree-chevron.open {
+.tree-dd-trigger.open {
-    transform: rotate(90deg);
+    border-color: var(--primary-color);
 }
 
-.tree-node-icon {
+.tree-dd-trigger-icon {
     flex-shrink: 0;
     line-height: 1;
 }
 
-.tree-node-icon .icon {
+.tree-dd-trigger-icon .icon {
     width: 14px;
     height: 14px;
 }
 
-.tree-node-title {
+.tree-dd-trigger-title {
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.tree-dd-trigger-count {
+    background: var(--primary-color);
+    color: var(--primary-contrast);
+    font-size: 0.6rem;
+    font-weight: 600;
+    padding: 0 5px;
+    border-radius: 8px;
+    min-width: 16px;
+    text-align: center;
+}
+
+.tree-dd-chevron {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    transition: transform 0.2s ease;
+    margin-left: 2px;
+}
+
+.tree-dd-trigger.open .tree-dd-chevron {
+    transform: rotate(180deg);
+}
+
+.tree-dd-extra {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 6px;
+    border-left: 1px solid var(--border-color);
+    padding-left: 8px;
+}
+
+/* ── Dropdown panel ── */
+
+.tree-dd-panel {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 240px;
+    max-width: 340px;
+    max-height: 70vh;
+    overflow-y: auto;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    z-index: 100;
+    padding: 4px 0;
+    margin-top: 4px;
+}
+
+.tree-dd-panel.open {
+    display: block;
+}
+
+/* ── Group header (non-clickable category label) ── */
+
+.tree-dd-group-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px 3px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    user-select: none;
+}
+
+.tree-dd-group-header.tree-dd-depth-1 {
+    padding-left: 24px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: normal;
+}
+
+.tree-dd-group-header.tree-dd-depth-2 {
+    padding-left: 36px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: normal;
+}
+
+.tree-dd-group-header .tree-node-icon {
+    flex-shrink: 0;
+    line-height: 1;
+}
+
+.tree-dd-group-header .tree-node-icon .icon {
+    width: 13px;
+    height: 13px;
+}
+
+.tree-dd-group-title {
     flex: 1;
     min-width: 0;
     overflow: hidden;
@@ -87,108 +167,76 @@
     white-space: nowrap;
 }
 
-.tree-group-count {
+.tree-dd-group-count {
     background: var(--border-color);
     color: var(--text-secondary);
-    font-size: 0.6rem;
+    font-size: 0.58rem;
     font-weight: 600;
-    padding: 0 5px;
+    padding: 0 4px;
     border-radius: 8px;
-    flex-shrink: 0;
+    min-width: 14px;
-    min-width: 16px;
     text-align: center;
+    flex-shrink: 0;
 }
 
-/* ── Nested sub-group (group inside a group) ── */
+/* ── Leaf (clickable item) ── */
 
-.tree-group-nested > .tree-group-header {
+.tree-dd-leaf {
-    font-size: 0.75rem;
+    display: flex;
-    text-transform: none;
+    align-items: center;
-    letter-spacing: normal;
+    gap: 6px;
+    padding: 5px 12px 5px 20px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    transition: color 0.1s, background 0.1s;
+}
+
+/* Indent leaves inside nested groups */
+.tree-dd-group-header.tree-dd-depth-1 ~ .tree-dd-children > .tree-dd-leaf,
+.tree-dd-group .tree-dd-group .tree-dd-leaf {
+    padding-left: 32px;
+}
+
+.tree-dd-group .tree-dd-group .tree-dd-group .tree-dd-leaf {
+    padding-left: 44px;
+}
+
+.tree-dd-leaf:hover {
+    color: var(--text-color);
+    background: var(--bg-secondary);
+}
+
+.tree-dd-leaf.active {
+    color: var(--primary-text-color);
+    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
     font-weight: 600;
-    margin-top: 2px;
-    padding: 4px 10px 4px 12px;
 }
 
-/* ── Children (leaves) ── */
+.tree-dd-leaf.active .tree-count {
+    background: var(--primary-color);
+    color: var(--primary-contrast);
+}
 
-.tree-children {
+.tree-dd-leaf .tree-node-icon {
+    flex-shrink: 0;
+    line-height: 1;
+}
+
+.tree-dd-leaf .tree-node-icon .icon {
+    width: 14px;
+    height: 14px;
+}
+
+.tree-dd-leaf .tree-node-title {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
-    margin-left: 14px;
+    text-overflow: ellipsis;
-    border-left: 1px solid var(--border-color);
+    white-space: nowrap;
-    padding-left: 0;
-    max-height: 500px;
-    opacity: 1;
-    transition: max-height 0.25s ease, opacity 0.2s ease;
 }
 
-.tree-children.collapsed {
+/* ── Count badge (shared) ── */
-    max-height: 0;
-    opacity: 0;
-}
-
-.tree-leaf {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 10px 5px 12px;
-    cursor: pointer;
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    border-radius: 0 6px 6px 0;
-    margin: 1px 0;
-    transition: color 0.15s, background 0.15s;
-}
-
-.tree-leaf:hover {
-    color: var(--text-color);
-    background: var(--bg-secondary);
-}
-
-.tree-leaf.active {
-    color: var(--primary-text-color);
-    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
-    font-weight: 600;
-}
-
-.tree-leaf.active .tree-count {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
-}
-
-/* ── Standalone leaf (top-level, no group) ── */
-
-.tree-standalone {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 10px;
-    cursor: pointer;
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: var(--text-secondary);
-    border-radius: 6px;
-    margin: 1px 0;
-    transition: color 0.15s, background 0.15s;
-}
-
-.tree-standalone:hover {
-    color: var(--text-color);
-    background: var(--bg-secondary);
-}
-
-.tree-standalone.active {
-    color: var(--primary-text-color);
-    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
-    font-weight: 600;
-}
-
-.tree-standalone.active .tree-count {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
-}
-
-/* ── Count badge ── */
 
 .tree-count {
     background: var(--border-color);
@@ -202,96 +250,10 @@
     text-align: center;
 }
 
-/* ── Extra (expand/collapse, tutorial buttons) ── */
+/* ── Group separator ── */
 
-.tree-extra {
+.tree-dd-group + .tree-dd-group {
-    padding: 8px 10px;
-    margin-top: 4px;
     border-top: 1px solid var(--border-color);
-    display: flex;
+    margin-top: 2px;
-    gap: 4px;
+    padding-top: 2px;
-    align-items: center;
-}
-
-/* ── Sidebar eats into card space — allow 2-col with smaller minmax ── */
-
-.tree-content .displays-grid,
-.tree-content .devices-grid {
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-}
-
-.tree-content .templates-grid {
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-}
-
-/* ── Responsive: stack on narrow screens ── */
-
-@media (max-width: 900px) {
-    .tree-layout {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 0;
-    }
-
-    .tree-sidebar {
-        width: 100%;
-        min-width: unset;
-        position: static;
-        max-height: none;
-        overflow-y: visible;
-        padding: 0 0 8px 0;
-        margin-bottom: 8px;
-        border-bottom: 1px solid var(--border-color);
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 2px;
-    }
-
-    .tree-group {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 2px;
-        margin-bottom: 0;
-    }
-
-    .tree-group-header {
-        padding: 4px 8px;
-        text-transform: none;
-        letter-spacing: normal;
-    }
-
-    .tree-children {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2px;
-        margin-left: 0;
-        border-left: none;
-        padding-left: 0;
-        max-height: none;
-        opacity: 1;
-        transition: none;
-    }
-
-    .tree-children.collapsed {
-        display: none;
-    }
-
-    .tree-leaf {
-        padding: 4px 10px;
-        margin: 0;
-    }
-
-    .tree-standalone {
-        padding: 4px 10px;
-    }
-
-    .tree-extra {
-        margin-top: 0;
-        border-top: none;
-        padding: 4px;
-        margin-left: auto;
-    }
-
 }

server/src/wled_controller/static/js/core/tree-nav.js

@@ -1,6 +1,7 @@
 /**
- * TreeNav — hierarchical sidebar navigation for Targets and Sources tabs.
+ * TreeNav — dropdown navigation for Targets and Sources tabs.
- * Replaces flat sub-tab bars with a collapsible tree that groups related items.
+ * Shows a compact trigger bar with the active leaf; click to open a
+ * grouped dropdown menu for switching between sections.
  *
  * Config format (supports arbitrary nesting):
  *   [
@@ -14,20 +15,6 @@
 
 import { t } from './i18n.js';
 
-const STORAGE_KEY = 'tree_nav_collapsed';
-
-function _getCollapsedMap() {
-    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); }
-    catch { return {}; }
-}
-
-function _saveCollapsed(key, collapsed) {
-    const map = _getCollapsedMap();
-    if (collapsed) map[key] = true;
-    else delete map[key];
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(map));
-}
-
 /** Recursively sum leaf counts in a tree node. */
 function _deepCount(node) {
     if (!node.children) return node.count || 0;
@@ -48,6 +35,9 @@ export class TreeNav {
         this._activeLeaf = null;
         this._extraHtml = '';
         this._observerSuppressed = false;
+        this._open = false;
+        this._outsideHandler = null;
+        this._escHandler = null;
     }
 
     /** Temporarily suppress scroll-spy (e.g. during programmatic scroll). */
@@ -58,7 +48,7 @@ export class TreeNav {
     }
 
     /**
-     * Full re-render of the tree.
+     * Full re-render of the nav.
      * @param {Array} items - tree structure (groups and/or standalone leaves)
      * @param {string} activeLeafKey
      */
@@ -74,9 +64,10 @@ export class TreeNav {
         const container = document.getElementById(this.containerId);
         if (!container) return;
         for (const [key, count] of Object.entries(countMap)) {
-            const el = container.querySelector(`[data-tree-leaf="${key}"] .tree-count`);
+            // Update leaves in dropdown panel
-            if (el) el.textContent = count;
+            const els = container.querySelectorAll(`[data-tree-leaf="${key}"] .tree-count`);
-            // Also update in-memory
+            els.forEach(el => { el.textContent = count; });
+            // Update in-memory
             const leaf = this._leafMap.get(key);
             if (leaf) leaf.count = count;
         }
@@ -85,20 +76,22 @@ export class TreeNav {
         groups.reverse();
         for (const groupEl of groups) {
             let total = 0;
-            // Sum direct leaf children
+            for (const cnt of groupEl.querySelectorAll(':scope > .tree-dd-children > [data-tree-leaf] .tree-count')) {
-            for (const cnt of groupEl.querySelectorAll(':scope > .tree-children > .tree-leaf .tree-count')) {
                 total += parseInt(cnt.textContent, 10) || 0;
             }
-            // Sum nested sub-group counts
+            for (const cnt of groupEl.querySelectorAll(':scope > .tree-dd-children > [data-tree-group] > .tree-dd-group-header .tree-dd-group-count')) {
-            for (const cnt of groupEl.querySelectorAll(':scope > .tree-children > .tree-group > .tree-group-header > .tree-group-count')) {
                 total += parseInt(cnt.textContent, 10) || 0;
             }
-            const groupCount = groupEl.querySelector(':scope > .tree-group-header > .tree-group-count');
+            const gc = groupEl.querySelector(':scope > .tree-dd-group-header .tree-dd-group-count');
-            if (groupCount) groupCount.textContent = total;
+            if (gc) gc.textContent = total;
+        }
+        // Update trigger display if active leaf count changed
+        if (countMap[this._activeLeaf] !== undefined) {
+            this._updateTrigger();
         }
     }
 
-    /** Set extra HTML appended at the bottom (expand/collapse buttons, etc.) */
+    /** Set extra HTML appended in the trigger bar (expand/collapse buttons, etc.) */
     setExtraHtml(html) {
         this._extraHtml = html;
     }
@@ -108,13 +101,10 @@ export class TreeNav {
         this._activeLeaf = leafKey;
         const container = document.getElementById(this.containerId);
         if (!container) return;
-        container.querySelectorAll('.tree-leaf').forEach(el =>
+        container.querySelectorAll('[data-tree-leaf]').forEach(el =>
-            el.classList.toggle('active', el.dataset.treeLeaf === leafKey)
-        );
-        // Also highlight standalone leaves
-        container.querySelectorAll('.tree-standalone').forEach(el =>
             el.classList.toggle('active', el.dataset.treeLeaf === leafKey)
         );
+        this._updateTrigger();
     }
 
     /** Get leaf data for a key. */
@@ -130,6 +120,8 @@ export class TreeNav {
         return null;
     }
 
+    // ── internal ──
+
     _buildLeafMap() {
         this._leafMap.clear();
         this._collectLeaves(this._items);
@@ -149,59 +141,133 @@ export class TreeNav {
         const container = document.getElementById(this.containerId);
         if (!container) return;
 
-        const collapsed = _getCollapsedMap();
+        const leaf = this._leafMap.get(this._activeLeaf);
+        const triggerIcon = leaf?.icon || '';
+        const triggerTitle = leaf ? t(leaf.titleKey) : '';
+        const triggerCount = leaf?.count ?? 0;
 
-        const html = this._items.map(item => {
+        const panelHtml = this._items.map(item =>
-            if (item.children) {
+            item.children ? this._renderGroup(item, 0) : this._renderLeaf(item)
-                return this._renderGroup(item, collapsed, 0);
+        ).join('');
-            }
+
-            return this._renderStandalone(item);
+        container.innerHTML = `
-        }).join('');
+            <div class="tree-dd-trigger" data-tree-trigger>
+                <span class="tree-dd-trigger-icon">${triggerIcon}</span>
+                <span class="tree-dd-trigger-title">${triggerTitle}</span>
+                <span class="tree-dd-trigger-count tree-count">${triggerCount}</span>
+                <span class="tree-dd-chevron">&#9662;</span>
+                ${this._extraHtml ? `<span class="tree-dd-extra">${this._extraHtml}</span>` : ''}
+            </div>
+            <div class="tree-dd-panel" data-tree-panel>
+                ${panelHtml}
+            </div>`;
 
-        container.innerHTML = html +
-            (this._extraHtml ? `<div class="tree-extra">${this._extraHtml}</div>` : '');
         this._bindEvents(container);
     }
 
-    _renderGroup(group, collapsed, depth) {
+    _renderGroup(group, depth) {
-        const isCollapsed = !!collapsed[group.key];
         const groupCount = _deepCount(group);
-
+        const childrenHtml = group.children.map(child =>
-        const childrenHtml = group.children.map(child => {
+            child.children ? this._renderGroup(child, depth + 1) : this._renderLeaf(child)
-            if (child.children) {
+        ).join('');
-                return this._renderGroup(child, collapsed, depth + 1);
-            }
-            return `
-                <div class="tree-leaf${child.key === this._activeLeaf ? ' active' : ''}" data-tree-leaf="${child.key}">
-                    ${child.icon ? `<span class="tree-node-icon">${child.icon}</span>` : ''}
-                    <span class="tree-node-title" data-i18n="${child.titleKey}">${t(child.titleKey)}</span>
-                    <span class="tree-count">${child.count ?? 0}</span>
-                </div>`;
-        }).join('');
 
         return `
-        <div class="tree-group${depth > 0 ? ' tree-group-nested' : ''}" data-tree-group="${group.key}">
+        <div class="tree-dd-group" data-tree-group="${group.key}">
-            <div class="tree-group-header" data-tree-group-toggle="${group.key}">
+            <div class="tree-dd-group-header tree-dd-depth-${depth}">
-                <span class="tree-chevron${isCollapsed ? '' : ' open'}">&#9654;</span>
                 ${group.icon ? `<span class="tree-node-icon">${group.icon}</span>` : ''}
-                <span class="tree-node-title" data-i18n="${group.titleKey}">${t(group.titleKey)}</span>
+                <span class="tree-dd-group-title" data-i18n="${group.titleKey}">${t(group.titleKey)}</span>
-                <span class="tree-group-count">${groupCount}</span>
+                <span class="tree-dd-group-count">${groupCount}</span>
             </div>
-            <div class="tree-children${isCollapsed ? ' collapsed' : ''}">
+            <div class="tree-dd-children">
                 ${childrenHtml}
             </div>
         </div>`;
     }
 
-    _renderStandalone(leaf) {
+    _renderLeaf(leaf) {
+        const isActive = leaf.key === this._activeLeaf;
         return `
-        <div class="tree-standalone${leaf.key === this._activeLeaf ? ' active' : ''}" data-tree-leaf="${leaf.key}">
+        <div class="tree-dd-leaf${isActive ? ' active' : ''}" data-tree-leaf="${leaf.key}">
             ${leaf.icon ? `<span class="tree-node-icon">${leaf.icon}</span>` : ''}
             <span class="tree-node-title" data-i18n="${leaf.titleKey}">${t(leaf.titleKey)}</span>
             <span class="tree-count">${leaf.count ?? 0}</span>
         </div>`;
     }
 
+    _updateTrigger() {
+        const container = document.getElementById(this.containerId);
+        if (!container) return;
+        const leaf = this._leafMap.get(this._activeLeaf);
+        if (!leaf) return;
+        const icon = container.querySelector('.tree-dd-trigger-icon');
+        const title = container.querySelector('.tree-dd-trigger-title');
+        const count = container.querySelector('.tree-dd-trigger-count');
+        if (icon) icon.innerHTML = leaf.icon || '';
+        if (title) title.textContent = t(leaf.titleKey);
+        if (count) count.textContent = leaf.count ?? 0;
+    }
+
+    _openDropdown(container) {
+        if (this._open) return;
+        this._open = true;
+        const panel = container.querySelector('[data-tree-panel]');
+        const trigger = container.querySelector('[data-tree-trigger]');
+        if (panel) panel.classList.add('open');
+        if (trigger) trigger.classList.add('open');
+
+        this._outsideHandler = (e) => {
+            const inTrigger = trigger && trigger.contains(e.target);
+            const inPanel = panel && panel.contains(e.target);
+            if (!inTrigger && !inPanel) this._closeDropdown(container);
+        };
+        this._escHandler = (e) => {
+            if (e.key === 'Escape') this._closeDropdown(container);
+        };
+        // Use timeout so the current pointerdown doesn't immediately trigger close
+        setTimeout(() => {
+            window.addEventListener('mousedown', this._outsideHandler, true);
+            window.addEventListener('pointerdown', this._outsideHandler, true);
+            window.addEventListener('keydown', this._escHandler, true);
+        }, 0);
+    }
+
+    _closeDropdown(container) {
+        if (!this._open) return;
+        this._open = false;
+        const panel = container.querySelector('[data-tree-panel]');
+        const trigger = container.querySelector('[data-tree-trigger]');
+        if (panel) panel.classList.remove('open');
+        if (trigger) trigger.classList.remove('open');
+        window.removeEventListener('mousedown', this._outsideHandler, true);
+        window.removeEventListener('pointerdown', this._outsideHandler, true);
+        window.removeEventListener('keydown', this._escHandler, true);
+    }
+
+    _bindEvents(container) {
+        // Trigger click — toggle dropdown
+        const trigger = container.querySelector('[data-tree-trigger]');
+        if (trigger) {
+            trigger.addEventListener('pointerdown', (e) => {
+                // Don't toggle when clicking extra buttons (expand/collapse/help)
+                if (e.target.closest('.tree-dd-extra')) return;
+                e.preventDefault();
+                if (this._open) this._closeDropdown(container);
+                else this._openDropdown(container);
+            });
+        }
+
+        // Leaf click — select and close
+        container.querySelectorAll('[data-tree-leaf]').forEach(el => {
+            el.addEventListener('click', () => {
+                const key = el.dataset.treeLeaf;
+                this.setActive(key);
+                this._closeDropdown(container);
+                this.suppressObserver();
+                if (this.onSelect) this.onSelect(key, this._leafMap.get(key));
+            });
+        });
+    }
+
     /**
      * Start observing card-section elements so the active tree leaf
      * follows whichever section is currently visible on screen.
@@ -269,31 +335,4 @@ export class TreeNav {
             this._observer = null;
         }
     }
-
-    _bindEvents(container) {
-        // Group header toggle
-        container.querySelectorAll('.tree-group-header').forEach(header => {
-            header.addEventListener('click', () => {
-                const key = header.dataset.treeGroupToggle;
-                const children = header.nextElementSibling;
-                if (!children) return;
-                const isNowCollapsed = children.classList.toggle('collapsed');
-                const chevron = header.querySelector('.tree-chevron');
-                if (chevron) chevron.classList.toggle('open', !isNowCollapsed);
-                _saveCollapsed(key, isNowCollapsed);
-            });
-        });
-
-        // Leaf click (both grouped and standalone)
-        container.querySelectorAll('[data-tree-leaf]').forEach(el => {
-            el.addEventListener('click', (e) => {
-                // Don't trigger on group header clicks
-                if (el.closest('.tree-group-header')) return;
-                const key = el.dataset.treeLeaf;
-                this.setActive(key);
-                this.suppressObserver();
-                if (this.onSelect) this.onSelect(key, this._leafMap.get(key));
-            });
-        });
-    }
 }