From bbf065d7c5f14d338e0c33b6543f4e669e416495 Mon Sep 17 00:00:00 2001 From: Alex Sexton Date: Thu, 9 Apr 2026 22:07:37 -0500 Subject: [PATCH 1/5] key items by index instead of path to help CLS score --- packages/trees/src/path-store/view.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/trees/src/path-store/view.tsx b/packages/trees/src/path-store/view.tsx index db6d339f5..196830d0f 100644 --- a/packages/trees/src/path-store/view.tsx +++ b/packages/trees/src/path-store/view.tsx @@ -179,6 +179,7 @@ function renderStyledRow( itemHeight: number, registerButton: (path: string, element: HTMLButtonElement | null) => void, onKeyDown: (event: KeyboardEvent) => void, + key: string | number, options: { isParked?: boolean; style?: Record; @@ -196,7 +197,7 @@ function renderStyledRow( return ( ); } From 134776017d5c7c31255021a5e78ba4fcad04af14 Mon Sep 17 00:00:00 2001 From: Alex Sexton Date: Thu, 9 Apr 2026 22:59:26 -0500 Subject: [PATCH 3/5] dont hide the trees dev for now --- apps/docs/app/trees-dev/layout.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/docs/app/trees-dev/layout.tsx b/apps/docs/app/trees-dev/layout.tsx index 68e16b24b..6658a760f 100644 --- a/apps/docs/app/trees-dev/layout.tsx +++ b/apps/docs/app/trees-dev/layout.tsx @@ -1,4 +1,3 @@ -import { notFound } from 'next/navigation'; import type { ReactNode } from 'react'; import { readSettingsCookies } from './_components/readSettingsCookies'; @@ -10,9 +9,9 @@ export default async function TreesDevLayout({ }: { children: ReactNode; }) { - if (process.env.NODE_ENV !== 'development') { - return notFound(); - } + // if (process.env.NODE_ENV !== 'development') { + // return notFound(); + // } const { flattenEmptyDirectories, useLazyDataLoader } = await readSettingsCookies(); From d0f758f8017cbe50882a0f694453a6adc0b945ca Mon Sep 17 00:00:00 2001 From: Alex Sexton Date: Thu, 9 Apr 2026 23:00:01 -0500 Subject: [PATCH 4/5] check in built files might as well --- apps/docs/public/trees/llms-full.txt | 115 +++++++++++++++++---------- apps/docs/public/trees/llms.txt | 2 +- 2 files changed, 72 insertions(+), 45 deletions(-) diff --git a/apps/docs/public/trees/llms-full.txt b/apps/docs/public/trees/llms-full.txt index 913045dde..de41d0da0 100644 --- a/apps/docs/public/trees/llms-full.txt +++ b/apps/docs/public/trees/llms-full.txt @@ -127,7 +127,7 @@ folder containing `index.ts`, `utils/helpers.ts`, and a `components` folder with | `lockedPaths` | Optional list of file/folder paths that cannot be dragged when drag and drop is enabled. | | `onCollision` | Optional callback for drag collisions. Return `true` to overwrite destination. | | `gitStatus` | Optional `GitStatusEntry[]` used to show Git-style file status (`added`, `modified`, `deleted`). Folders with changed descendants also receive a change indicator. [Live demo](/preview/trees#path-colors). | -| `icons` | Optional `FileTreeIconConfig` to provide a custom SVG sprite sheet and remap built-in icon names to your own symbols. [Live demo](/preview/trees#custom-icons). | +| `icons` | Optional built-in icon set selection or `FileTreeIconConfig` for semantic colors, CSS-themable palettes, and custom sprite overrides. [Live demo](/preview/trees#custom-icons). | | `sort` | Sort children within each directory. `true` (default) uses the standard sort (folders first, dot-prefixed next, case-insensitive alphabetical). `false` preserves insertion order. `{ comparator: fn }` for custom sorting. | | `virtualize` | Enable virtualized rendering so only visible items are rendered. Pass `{ threshold: number }` to activate when item count exceeds the threshold, or `false` to disable. Default: `undefined` (off). | @@ -174,8 +174,15 @@ const fileTreeOptions = { ```typescript import type { FileTreeIconConfig } from '@pierre/trees'; -// FileTreeIconConfig lets you replace built-in icons with custom SVG symbols. +// FileTreeIconConfig lets you pick a built-in set, enable semantic colors, +// or inject your own SVG symbols. interface FileTreeIconConfig { + // Optional: use one of the built-in sets, or "none" for custom-only rules. + set?: 'minimal' | 'standard' | 'complete' | 'none'; + + // Optional: enable built-in per-file-type colors. Default: true. + colored?: boolean; + // An SVG string with definitions injected into the shadow DOM. spriteSheet?: string; @@ -185,12 +192,35 @@ interface FileTreeIconConfig { | string | { name: string; width?: number; height?: number; viewBox?: string } >; + + // Remap file icons by exact basename (e.g. package.json, .gitignore). + byFileName?: Record< + string, + | string + | { name: string; width?: number; height?: number; viewBox?: string } + >; + + // Remap file icons by extension (e.g. ts, tsx, spec.ts). + byFileExtension?: Record< + string, + | string + | { name: string; width?: number; height?: number; viewBox?: string } + >; + + // Remap file icons when filename contains a substring (e.g. dockerfile). + byFileNameContains?: Record< + string, + | string + | { name: string; width?: number; height?: number; viewBox?: string } + >; } -// Example: replace the file and chevron icons with custom symbols. +// Example: use the built-in file-type set with colors enabled, then override one icon. const options = { initialFiles: ['src/index.ts', 'src/components/Button.tsx'], icons: { + set: 'standard', + colored: true, spriteSheet: ` `, + byFileExtension: { + ts: 'my-file', + }, remap: { - 'file-tree-icon-file': 'my-file', 'file-tree-icon-chevron': { name: 'my-folder', width: 16, height: 16 }, }, }, @@ -217,7 +249,7 @@ const options = { ```typescript import type { FileTreeOptions, - FileTreeIconConfig, + FileTreeIcons, FileTreeStateConfig, FileTreeSearchMode, FileTreeCollision, @@ -252,8 +284,8 @@ interface FileTreeOptions { // Optional: Git status entries for file status indicators. gitStatus?: GitStatusEntry[]; - // Optional: custom SVG sprite sheet and icon remapping. - icons?: FileTreeIconConfig; + // Optional: built-in icon set selection, colors, and custom remapping. + icons?: FileTreeIcons; // Optional: paths that cannot be dragged when drag and drop is enabled. lockedPaths?: string[]; @@ -433,26 +465,14 @@ React component: ```tsx import { FileTree } from '@pierre/trees/react'; -const customSpriteSheet = ` - -`; - -export function CustomIconsTree() { +export function IconSetTree() { return (