release: v2.2.2

Author: MrDeveloperJIS

CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to Tree Mapper are documented here.
 
 ---
 
+## v2.2.2 — 2026-06-21
+
+### Added
+
+- **"Deselect filtered" toolbar button** — Appears next to **Select filtered** whenever a search filter is active, letting you uncheck only the files currently visible in the filtered tree without affecting the rest of your selection.
+- **Clear (×) button in the search box** — A small clear button now appears inside the filter input as soon as you start typing, letting you reset the search and restore the full tree view in one click.
+
+---
+
 ## v2.2.1 — 2026-05-06
 
 ### Fixed

README.md

@@ -17,25 +17,6 @@ Snapshots are saved to `.tree/yyyy-mm-dd-hh-mm-ss.md` inside the `.tree` folder.
 
 ---
 
-## Installation
-
-**From the Marketplace** *(recommended)*
-
-Open Extensions (`Ctrl+Shift+X`), search **Tree Mapper**, and click Install — or visit the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=MrDeveloperJIS.tree-mapper) directly.
-
-```
-ext install MrDeveloperJIS.tree-mapper
-```
-
-**From a VSIX file**
-
-Download from the [Releases page](https://github.com/MrDeveloperJIS/tree-mapper/releases), then:
-
-- Extensions panel → `⋯` menu → **Install from VSIX…**
-- Or via terminal: `code --install-extension path/to/tree-mapper-x.x.x.vsix`
-
----
-
 ## Usage
 
 **Snapshot a folder**
@@ -64,11 +45,11 @@ Before generating, Tree Mapper opens a full-screen webview panel with every file
 | **Reset defaults** | Restore the default checked/unchecked state |
 | **Restore last** | Re-apply the selection from your previous run *(appears when a saved selection exists)* |
 | **Select filtered** | Check only the files currently visible in the search filter |
+| **Deselect filtered** | Uncheck only the files currently visible in the search filter |
 | **Filter** | Type to narrow the tree by filename or path |
 
 **Other picker features:**
 
-- **File-type colour icons** — each file shows a colour-coded icon based on its extension (JS, TS, CSS, JSON, Markdown, Python, Rust, Go, and more)
 - **Indentation connector lines** — vertical guide lines between nesting levels for clear hierarchy
 - **Auto-collapsed excluded dirs** — folders whose entire contents are excluded by default patterns start collapsed, reducing noise in large repos
 - **Live file count** — the footer updates in real time as you check and uncheck files
@@ -133,6 +114,25 @@ When a `.git` folder is detected, Tree Mapper automatically adds `.tree/` to you
 
 ---
 
+## Installation
+
+**From the Marketplace** *(recommended)*
+
+Open Extensions (`Ctrl+Shift+X`), search **Tree Mapper**, and click Install — or visit the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=MrDeveloperJIS.tree-mapper) directly.
+
+```
+ext install MrDeveloperJIS.tree-mapper
+```
+
+**From a VSIX file**
+
+Download from the [Releases page](https://github.com/MrDeveloperJIS/tree-mapper/releases), then:
+
+- Extensions panel → `⋯` menu → **Install from VSIX…**
+- Or via terminal: `code --install-extension path/to/tree-mapper-x.x.x.vsix`
+
+---
+
 ## Requirements
 
 VS Code **1.85.0** or higher.

package-lock.json

@@ -2,7 +2,7 @@
   "name": "tree-mapper",
   "displayName": "Tree Mapper",
   "description": "Generate a complete Markdown snapshot of any folder in your VS Code workspace — including a full directory tree and every file's source code.",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "publisher": "MrDeveloperJIS",
   "engines": {
     "vscode": "^1.85.0"

package.json

@@ -505,7 +505,7 @@ function buildPickerHtml(treeNodes, projectName, lastSelection) {
     color: var(--fg);
     font-family: var(--mono);
     font-size: 11.5px;
-    padding: 5px 12px 5px 30px;
+    padding: 5px 26px 5px 30px;
     outline: none;
     transition: border-color var(--t), box-shadow var(--t);
     letter-spacing: -0.01em;
@@ -515,6 +515,33 @@ function buildPickerHtml(treeNodes, projectName, lastSelection) {
     border-color: rgba(124,92,252,0.5);
     box-shadow: 0 0 0 3px rgba(124,92,252,0.12);
   }
+  .search-clear {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 0;
+    border-radius: 50%;
+    color: var(--fg-muted);
+    cursor: pointer;
+    transition: background var(--t), color var(--t);
+  }
+  .search-clear svg {
+    width: 9px;
+    height: 9px;
+    stroke: currentColor;
+  }
+  .search-clear:hover {
+    background: rgba(255,255,255,0.08);
+    color: var(--fg);
+  }
 
   .stats-pill {
     margin-left: auto;
@@ -843,8 +870,14 @@ function buildPickerHtml(treeNodes, projectName, lastSelection) {
       <path d="M11 11l3 3" stroke-linecap="round"/>
     </svg>
     <input class="search-input" id="searchInput" type="text" placeholder="Filter files…" oninput="filterTree(this.value)">
+    <button class="search-clear" id="searchClearBtn" style="display:none" onclick="clearSearch()" aria-label="Clear search" type="button">
+      <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="1.8">
+        <path d="M4 4l8 8M12 4l-8 8" stroke-linecap="round"/>
+      </svg>
+    </button>
   </div>
   <button class="btn-ghost select-filtered" id="selectFilteredBtn" style="display:none" onclick="selectFiltered()">Select filtered</button>
+  <button class="btn-ghost deselect-filtered" id="deselectFilteredBtn" style="display:none" onclick="deselectFiltered()">Deselect filtered</button>
   <div class="stats-pill" id="statsLabel"><span class="count selected">—</span> / <span class="count">—</span></div>
 </div>
 
@@ -1075,6 +1108,10 @@ function restoreLastSelection() {
 function filterTree(q) {
   q = q.toLowerCase().trim();
   const filterBtn = document.getElementById('selectFilteredBtn');
+  const deselectBtn = document.getElementById('deselectFilteredBtn');
+  const clearBtn = document.getElementById('searchClearBtn');
+
+  clearBtn.style.display = q ? 'flex' : 'none';
 
   if (!q) {
     document.querySelectorAll('.tree-row').forEach(r => r.classList.remove('hidden'));
@@ -1093,6 +1130,7 @@ function filterTree(q) {
       }
     });
     filterBtn.style.display = 'none';
+    deselectBtn.style.display = 'none';
     return;
   }
 
@@ -1102,6 +1140,14 @@ function filterTree(q) {
     row.classList.toggle('hidden', !rel.toLowerCase().includes(q));
   });
   filterBtn.style.display = '';
+  deselectBtn.style.display = '';
+}
+
+function clearSearch() {
+  const input = document.getElementById('searchInput');
+  input.value = '';
+  filterTree('');
+  input.focus();
 }
 
 function selectFiltered() {
@@ -1115,6 +1161,19 @@ function selectFiltered() {
   updateStats();
 }
 
+function deselectFiltered() {
+  document.querySelectorAll('.tree-row:not(.hidden)').forEach(row => {
+    if (row.dataset.isDir === '1') return;
+    const rel = row.dataset.rel;
+    const cb = getCb(rel);
+    if (cb) { cb.checked = false; cb.indeterminate = false; }
+  });
+  allFileNodes.forEach(n => updateAncestors(n.rel));
+  updateStats();
+}
+
+
+
 // ── Stats ───────────────────────────────────────────────────────────────────
 function updateStats() {
   let total = 0, selected = 0;