@djangocfg/ui-tools 2.1.317 → 2.1.319

package/dist/tree/index.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var chunkYXBOAGIM_cjs = require('../chunk-YXBOAGIM.cjs');
-var chunk44ZTWYAF_cjs = require('../chunk-44ZTWYAF.cjs');
+var chunk3Z3A7FHA_cjs = require('../chunk-3Z3A7FHA.cjs');
 require('../chunk-WGEGR3DF.cjs');
 
 
@@ -22,131 +22,131 @@ Object.defineProperty(exports, "createDemoTree", {
 });
 Object.defineProperty(exports, "DEFAULT_TREE_APPEARANCE", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.DEFAULT_TREE_APPEARANCE; }
+  get: function () { return chunk3Z3A7FHA_cjs.DEFAULT_TREE_APPEARANCE; }
 });
 Object.defineProperty(exports, "DEFAULT_TREE_LABELS", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.DEFAULT_TREE_LABELS; }
+  get: function () { return chunk3Z3A7FHA_cjs.DEFAULT_TREE_LABELS; }
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeRoot; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeRoot; }
 });
 Object.defineProperty(exports, "TreeChevron", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeChevron; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeChevron; }
 });
 Object.defineProperty(exports, "TreeContent", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeContent; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeContent; }
 });
 Object.defineProperty(exports, "TreeEmpty", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeEmpty; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeEmpty; }
 });
 Object.defineProperty(exports, "TreeIcon", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeIcon; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeIcon; }
 });
 Object.defineProperty(exports, "TreeIndentGuides", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeIndentGuides; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeIndentGuides; }
 });
 Object.defineProperty(exports, "TreeLabel", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeLabel; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeLabel; }
 });
 Object.defineProperty(exports, "TreeProvider", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeProvider; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeProvider; }
 });
 Object.defineProperty(exports, "TreeRoot", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeRoot; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeRoot; }
 });
 Object.defineProperty(exports, "TreeRow", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeRow; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeRow; }
 });
 Object.defineProperty(exports, "TreeSearchInput", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeSearchInput; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeSearchInput; }
 });
 Object.defineProperty(exports, "appearanceToStyle", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.appearanceToStyle; }
+  get: function () { return chunk3Z3A7FHA_cjs.appearanceToStyle; }
 });
 Object.defineProperty(exports, "clearTreeState", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.clearTreeState; }
+  get: function () { return chunk3Z3A7FHA_cjs.clearTreeState; }
 });
 Object.defineProperty(exports, "createChildCache", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.createChildCache; }
+  get: function () { return chunk3Z3A7FHA_cjs.createChildCache; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.TreeRoot_default; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeRoot_default; }
 });
 Object.defineProperty(exports, "flattenTree", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.flattenTree; }
+  get: function () { return chunk3Z3A7FHA_cjs.flattenTree; }
 });
 Object.defineProperty(exports, "loadTreeState", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.loadTreeState; }
+  get: function () { return chunk3Z3A7FHA_cjs.loadTreeState; }
 });
 Object.defineProperty(exports, "resolveAppearance", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.resolveAppearance; }
+  get: function () { return chunk3Z3A7FHA_cjs.resolveAppearance; }
 });
 Object.defineProperty(exports, "resolveChildren", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.resolveChildren; }
+  get: function () { return chunk3Z3A7FHA_cjs.resolveChildren; }
 });
 Object.defineProperty(exports, "saveTreeState", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.saveTreeState; }
+  get: function () { return chunk3Z3A7FHA_cjs.saveTreeState; }
 });
 Object.defineProperty(exports, "useTreeActions", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeActions; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeActions; }
 });
 Object.defineProperty(exports, "useTreeContext", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeContext; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeContext; }
 });
 Object.defineProperty(exports, "useTreeExpansion", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeExpansion; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeExpansion; }
 });
 Object.defineProperty(exports, "useTreeFocus", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeFocus; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeFocus; }
 });
 Object.defineProperty(exports, "useTreeKeyboard", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeKeyboard; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeKeyboard; }
 });
 Object.defineProperty(exports, "useTreeLabels", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeLabels; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeLabels; }
 });
 Object.defineProperty(exports, "useTreeRows", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeRows; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeRows; }
 });
 Object.defineProperty(exports, "useTreeSearch", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeSearch; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeSearch; }
 });
 Object.defineProperty(exports, "useTreeSelection", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeSelection; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeSelection; }
 });
 Object.defineProperty(exports, "useTreeTypeAhead", {
   enumerable: true,
-  get: function () { return chunk44ZTWYAF_cjs.useTreeTypeAhead; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeTypeAhead; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/tree/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as TreeRootProps, f as TreeItemId, T as TreeNode, F as FlatRow, o as TreeActivateOptions, g as TreeLabels, R as ResolvedAppearance, h as TreeSelectionMode, p as TreeActivationMode, a as TreeRowSlot, e as TreeContextMenuSlot } from '../types-Cclwv4Hl.cjs';
-export { c as DEFAULT_TREE_APPEARANCE, D as DEFAULT_TREE_LABELS, m as TreeAccentIntensity, k as TreeAppearance, l as TreeDensity, j as TreeLoadChildren, n as TreeRadius, i as TreeRowRenderProps, d as appearanceToStyle, r as resolveAppearance } from '../types-Cclwv4Hl.cjs';
+import { b as TreeRootProps, f as TreeItemId, T as TreeNode, F as FlatRow, o as TreeActivateOptions, g as TreeLabels, R as ResolvedAppearance, h as TreeSelectionMode, p as TreeActivationMode, a as TreeRowSlot, e as TreeContextMenuSlot } from '../types-CevSbyfD.cjs';
+export { c as DEFAULT_TREE_APPEARANCE, D as DEFAULT_TREE_LABELS, m as TreeAccentIntensity, k as TreeAppearance, l as TreeDensity, j as TreeLoadChildren, n as TreeRadius, i as TreeRowRenderProps, d as appearanceToStyle, r as resolveAppearance } from '../types-CevSbyfD.cjs';
 import * as React$1 from 'react';
 
 /**
@@ -70,7 +70,7 @@ interface TreeContextValue<T> {
     renderContextMenu?: TreeContextMenuSlot<T>;
 }
 declare function useTreeContext<T>(): TreeContextValue<T>;
-interface TreeProviderProps<T> extends Pick<TreeRootProps<T>, 'data' | 'getItemName' | 'loadChildren' | 'selectionMode' | 'activationMode' | 'initialExpandedIds' | 'initialSelectedIds' | 'indent' | 'appearance' | 'onSelectionChange' | 'onExpansionChange' | 'onActivate' | 'enableSearch' | 'showIndentGuides' | 'renderIcon' | 'renderLabel' | 'renderActions' | 'renderContextMenu' | 'labels' | 'persistKey' | 'persistSelection'> {
+interface TreeProviderProps<T> extends Pick<TreeRootProps<T>, 'data' | 'getItemName' | 'loadChildren' | 'selectionMode' | 'activationMode' | 'initialExpandedIds' | 'initialSelectedIds' | 'indent' | 'appearance' | 'onSelectionChange' | 'onExpansionChange' | 'onActivate' | 'filterNode' | 'enableSearch' | 'showIndentGuides' | 'renderIcon' | 'renderLabel' | 'renderActions' | 'renderContextMenu' | 'labels' | 'persistKey' | 'persistSelection'> {
     children: React$1.ReactNode;
 }
 declare function TreeProvider<T>(props: TreeProviderProps<T>): react_jsx_runtime.JSX.Element;
@@ -241,6 +241,8 @@ interface FlattenInput<T> {
     roots: TreeNode<T>[];
     expandedIds: ReadonlySet<TreeItemId>;
     cache: ChildCache<T>;
+    /** Optional predicate. Nodes returning `false` (and their descendants) are excluded. */
+    filterNode?: (node: TreeNode<T>) => boolean;
 }
 /**
  * Walk the tree top-to-bottom and produce a flat list of visible rows.
@@ -249,7 +251,7 @@ interface FlattenInput<T> {
  * `expandedIds`. The output is ordered exactly as it should render,
  * which keeps keyboard navigation (next/prev row) trivial.
  */
-declare function flattenTree<T>({ roots, expandedIds, cache }: FlattenInput<T>): FlatRow<T>[];
+declare function flattenTree<T>({ roots, expandedIds, cache, filterNode, }: FlattenInput<T>): FlatRow<T>[];
 
 interface PersistedTreeState {
     expandedItems: TreeItemId[];

package/dist/tree/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as TreeRootProps, f as TreeItemId, T as TreeNode, F as FlatRow, o as TreeActivateOptions, g as TreeLabels, R as ResolvedAppearance, h as TreeSelectionMode, p as TreeActivationMode, a as TreeRowSlot, e as TreeContextMenuSlot } from '../types-Cclwv4Hl.js';
-export { c as DEFAULT_TREE_APPEARANCE, D as DEFAULT_TREE_LABELS, m as TreeAccentIntensity, k as TreeAppearance, l as TreeDensity, j as TreeLoadChildren, n as TreeRadius, i as TreeRowRenderProps, d as appearanceToStyle, r as resolveAppearance } from '../types-Cclwv4Hl.js';
+import { b as TreeRootProps, f as TreeItemId, T as TreeNode, F as FlatRow, o as TreeActivateOptions, g as TreeLabels, R as ResolvedAppearance, h as TreeSelectionMode, p as TreeActivationMode, a as TreeRowSlot, e as TreeContextMenuSlot } from '../types-CevSbyfD.js';
+export { c as DEFAULT_TREE_APPEARANCE, D as DEFAULT_TREE_LABELS, m as TreeAccentIntensity, k as TreeAppearance, l as TreeDensity, j as TreeLoadChildren, n as TreeRadius, i as TreeRowRenderProps, d as appearanceToStyle, r as resolveAppearance } from '../types-CevSbyfD.js';
 import * as React$1 from 'react';
 
 /**
@@ -70,7 +70,7 @@ interface TreeContextValue<T> {
     renderContextMenu?: TreeContextMenuSlot<T>;
 }
 declare function useTreeContext<T>(): TreeContextValue<T>;
-interface TreeProviderProps<T> extends Pick<TreeRootProps<T>, 'data' | 'getItemName' | 'loadChildren' | 'selectionMode' | 'activationMode' | 'initialExpandedIds' | 'initialSelectedIds' | 'indent' | 'appearance' | 'onSelectionChange' | 'onExpansionChange' | 'onActivate' | 'enableSearch' | 'showIndentGuides' | 'renderIcon' | 'renderLabel' | 'renderActions' | 'renderContextMenu' | 'labels' | 'persistKey' | 'persistSelection'> {
+interface TreeProviderProps<T> extends Pick<TreeRootProps<T>, 'data' | 'getItemName' | 'loadChildren' | 'selectionMode' | 'activationMode' | 'initialExpandedIds' | 'initialSelectedIds' | 'indent' | 'appearance' | 'onSelectionChange' | 'onExpansionChange' | 'onActivate' | 'filterNode' | 'enableSearch' | 'showIndentGuides' | 'renderIcon' | 'renderLabel' | 'renderActions' | 'renderContextMenu' | 'labels' | 'persistKey' | 'persistSelection'> {
     children: React$1.ReactNode;
 }
 declare function TreeProvider<T>(props: TreeProviderProps<T>): react_jsx_runtime.JSX.Element;
@@ -241,6 +241,8 @@ interface FlattenInput<T> {
     roots: TreeNode<T>[];
     expandedIds: ReadonlySet<TreeItemId>;
     cache: ChildCache<T>;
+    /** Optional predicate. Nodes returning `false` (and their descendants) are excluded. */
+    filterNode?: (node: TreeNode<T>) => boolean;
 }
 /**
  * Walk the tree top-to-bottom and produce a flat list of visible rows.
@@ -249,7 +251,7 @@ interface FlattenInput<T> {
  * `expandedIds`. The output is ordered exactly as it should render,
  * which keeps keyboard navigation (next/prev row) trivial.
  */
-declare function flattenTree<T>({ roots, expandedIds, cache }: FlattenInput<T>): FlatRow<T>[];
+declare function flattenTree<T>({ roots, expandedIds, cache, filterNode, }: FlattenInput<T>): FlatRow<T>[];
 
 interface PersistedTreeState {
     expandedItems: TreeItemId[];

package/dist/tree/index.mjs

@@ -1,5 +1,5 @@
 export { TreeError, TreeSkeleton, createDemoTree } from '../chunk-KR6B3LVY.mjs';
-export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, TreeRoot_default as default, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from '../chunk-NTJL2SXK.mjs';
+export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, TreeRoot_default as default, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from '../chunk-MOME6KYD.mjs';
 import '../chunk-CGILA3WO.mjs';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/{types-Cclwv4Hl.d.cts → types-CevSbyfD.d.cts}

@@ -159,6 +159,12 @@ interface TreeRootProps<T> {
      * on `activationMode`). Folders never call this — they toggle instead.
      */
     onActivate?: (node: TreeNode<T>, opts: TreeActivateOptions) => void;
+    /**
+     * Optional predicate. Nodes returning `false` (and their descendants) are
+     * not rendered and not searchable. Use this to hide dot-files, system
+     * entries, or anything else the consumer wants to filter out.
+     */
+    filterNode?: (node: TreeNode<T>) => boolean;
     /** Show built-in search input. Default: false. */
     enableSearch?: boolean;
     /** Type printable letters to jump to a matching name. Default: true. */

package/dist/{types-Cclwv4Hl.d.ts → types-CevSbyfD.d.ts}

@@ -159,6 +159,12 @@ interface TreeRootProps<T> {
      * on `activationMode`). Folders never call this — they toggle instead.
      */
     onActivate?: (node: TreeNode<T>, opts: TreeActivateOptions) => void;
+    /**
+     * Optional predicate. Nodes returning `false` (and their descendants) are
+     * not rendered and not searchable. Use this to hide dot-files, system
+     * entries, or anything else the consumer wants to filter out.
+     */
+    filterNode?: (node: TreeNode<T>) => boolean;
     /** Show built-in search input. Default: false. */
     enableSearch?: boolean;
     /** Type printable letters to jump to a matching name. Default: true. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.317",
+  "version": "2.1.319",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -101,8 +101,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.317",
-    "@djangocfg/ui-core": "^2.1.317",
+    "@djangocfg/i18n": "^2.1.319",
+    "@djangocfg/ui-core": "^2.1.319",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -155,10 +155,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.317",
+    "@djangocfg/i18n": "^2.1.319",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.317",
-    "@djangocfg/ui-core": "^2.1.317",
+    "@djangocfg/typescript-config": "^2.1.319",
+    "@djangocfg/ui-core": "^2.1.319",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/FileIcon/FileIcon.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { File as FileFallback, Folder, FolderOpen } from 'lucide-react';
+import { File as FileFallback } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { getMaterialIconsSync, loadMaterialIcons } from './loader';
+import { resolveFolderIcon, type FolderIconOverrides } from './specialFolders';
 
 export type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;
 
@@ -17,6 +18,11 @@ export interface FileIconProps {
   isExpanded?: boolean;
   /** Pixel size of the icon. */
   size?: FileIconSize;
+  /**
+   * Override or extend the built-in special-folder mapping. Keys are
+   * matched case-insensitively. Only used when `isFolder` is true.
+   */
+  folderOverrides?: FolderIconOverrides;
   className?: string;
 }
 
@@ -35,6 +41,7 @@ export function FileIcon({
   isFolder = false,
   isExpanded = false,
   size = 16,
+  folderOverrides,
   className,
 }: FileIconProps) {
   const [svg, setSvg] = useState<string | null>(() => {
@@ -59,7 +66,11 @@ export function FileIcon({
   }, [isFolder, name]);
 
   if (isFolder) {
-    const Icon = isExpanded ? FolderOpen : Folder;
+    const Icon = resolveFolderIcon({
+      name,
+      isExpanded,
+      overrides: folderOverrides,
+    });
     return (
       <Icon
         className={cn('shrink-0 text-amber-500', className)}

package/src/tools/FileIcon/index.ts

@@ -6,4 +6,10 @@ export type { FileIconProps, FileIconSize } from './FileIcon';
 export { createFileIconSlot } from './treeAdapter';
 export type { CreateFileIconSlotOptions } from './treeAdapter';
 
+export { resolveFolderIcon } from './specialFolders';
+export type {
+  ResolveFolderIconOptions,
+  FolderIconOverrides,
+} from './specialFolders';
+
 export { loadMaterialIcons, getMaterialIconsSync } from './loader';

package/src/tools/FileIcon/specialFolders.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import {
+  BookOpen,
+  FlaskConical,
+  Folder,
+  FolderCode,
+  FolderGit2,
+  FolderInput,
+  FolderOpen,
+  FolderOutput,
+  Github,
+  Image as ImageIcon,
+  Package,
+  Settings,
+  Terminal,
+  type LucideIcon,
+} from 'lucide-react';
+
+/**
+ * Conventional folder names → Lucide icon. Lookup is case-insensitive and
+ * trimmed. Anything not in this map falls back to a generic folder icon.
+ *
+ * Designed to feel "right" across the common dev project layouts (Node,
+ * Python, Go, Rust, Django, Next, Vite). Not exhaustive on purpose —
+ * keeps the bundle light and the behaviour predictable.
+ */
+const SPECIAL_FOLDERS: Record<string, LucideIcon> = {
+  src: FolderCode,
+  source: FolderCode,
+  lib: FolderCode,
+  app: FolderCode,
+  packages: Package,
+  node_modules: Package,
+  vendor: Package,
+  public: FolderInput,
+  static: FolderInput,
+  assets: ImageIcon,
+  images: ImageIcon,
+  media: ImageIcon,
+  dist: FolderOutput,
+  build: FolderOutput,
+  out: FolderOutput,
+  '.next': FolderOutput,
+  '.nuxt': FolderOutput,
+  '.turbo': FolderOutput,
+  docs: BookOpen,
+  documentation: BookOpen,
+  tests: FlaskConical,
+  test: FlaskConical,
+  __tests__: FlaskConical,
+  __test__: FlaskConical,
+  scripts: Terminal,
+  bin: Terminal,
+  config: Settings,
+  configs: Settings,
+  '.config': Settings,
+  '.vscode': Settings,
+  '.idea': Settings,
+  '.git': FolderGit2,
+  '.github': Github,
+  '.gitlab': FolderGit2,
+};
+
+export interface ResolveFolderIconOptions {
+  /** Folder display name (no path). */
+  name: string;
+  /** Open / closed state — only used for the *generic* folder fallback. */
+  isExpanded?: boolean;
+  /**
+   * Optional override map. Wins over the built-in table. Keys are
+   * matched case-insensitively after `trim()`.
+   */
+  overrides?: Record<string, LucideIcon>;
+}
+
+/**
+ * Pick the right folder icon for `name`. Returns `Folder` / `FolderOpen`
+ * for unknown names so callers can render the generic open/closed pair.
+ */
+export function resolveFolderIcon({
+  name,
+  isExpanded = false,
+  overrides,
+}: ResolveFolderIconOptions): LucideIcon {
+  const key = name.trim().toLowerCase();
+  if (overrides?.[key]) return overrides[key];
+  const special = SPECIAL_FOLDERS[key];
+  if (special) return special;
+  return isExpanded ? FolderOpen : Folder;
+}
+
+export type FolderIconOverrides = Record<string, LucideIcon>;

package/src/tools/FileIcon/treeAdapter.tsx

@@ -2,6 +2,7 @@
 
 import type { TreeNode, TreeRowSlot } from '../Tree/types';
 import { FileIcon, type FileIconSize } from './FileIcon';
+import type { FolderIconOverrides } from './specialFolders';
 
 export interface CreateFileIconSlotOptions<T> {
   /**
@@ -11,6 +12,11 @@ export interface CreateFileIconSlotOptions<T> {
   getName: (node: TreeNode<T>) => string;
   /** Pixel size for both file and folder icons. Default: 16. */
   size?: FileIconSize;
+  /**
+   * Override or extend the built-in special-folder mapping (e.g. give
+   * `tests` a custom icon). Keys are matched case-insensitively.
+   */
+  folderOverrides?: FolderIconOverrides;
 }
 
 /**
@@ -29,6 +35,7 @@ export interface CreateFileIconSlotOptions<T> {
 export function createFileIconSlot<T>({
   getName,
   size = 16,
+  folderOverrides,
 }: CreateFileIconSlotOptions<T>): TreeRowSlot<T> {
   return ({ node, isFolder, isExpanded }) => (
     <FileIcon
@@ -36,6 +43,7 @@ export function createFileIconSlot<T>({
       isFolder={isFolder}
       isExpanded={isExpanded}
       size={size}
+      folderOverrides={folderOverrides}
     />
   );
 }

package/src/tools/OpenapiViewer/OpenapiViewer.story.tsx

@@ -181,6 +181,36 @@ export const Errors = () => {
   );
 };
 
+/**
+ * UnfilledPathParams — regression guard for the ``%7Bid%7D`` bug.
+ *
+ * When a path template like ``/pet/{petId}`` is rendered before the
+ * user types a value, the path stays a template — not a percent-
+ * encoded string. Previously the URL parser turned ``{`` / ``}`` into
+ * ``%7B`` / ``%7D``, and the same encoded form leaked into every
+ * generated code sample (curl, axios, python, …) via the HAR
+ * intermediate.
+ *
+ * To verify visually:
+ *   1. Open any endpoint with a path param, e.g. ``GET /pet/{petId}``,
+ *      ``GET /store/order/{orderId}``, or ``GET /user/{username}``.
+ *   2. Without filling the parameter, look at the header path and
+ *      every Code Samples tab.
+ *   3. All occurrences must read ``{petId}``, never ``%7BpetId%7D``.
+ */
+export const UnfilledPathParams = () => {
+  const config: PlaygroundConfig = {
+    schemas: [PETSTORE_SCHEMA],
+    defaultSchemaId: 'petstore',
+  };
+
+  return (
+    <div className="min-h-[600px]">
+      <Playground config={config} />
+    </div>
+  );
+};
+
 /**
  * Lazy — production lazy-loaded variant. Shows the loading spinner
  * while the ~400 KB OpenAPI viewer chunk is fetched. Only path you