trees

Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag and drop, icons, git status, and themes.

Install
npx skills add 'https://github.com/pierrecomputer/pierre/tree/main/skills/trees'
Download bundle ↓
main · 1831817Scanned 2026-09-15

Contributors

GitHub-linked commit authors for this SKILL.md at the saved revision. Co-authors and history before file renames are not included.

File history ↗
View on GitHub
← Back to SKILL.md

Core API

This reference lists every export from @pierre/trees and every public FileTree member.

Contents

Runtime values

ExportKindPurpose
FileTreeClassOwns the tree model, renders it, and exposes path-based controls.
prepareFileTreeInputFunctionPrepares and optionally sorts a path list for reuse.
preparePresortedFileTreeInputFunctionPrepares a path list that already has final order.
preloadFileTreeFunctionCreates server-rendered tree markup and hydration data.
serializeFileTreeSsrPayloadFunctionJoins an SSR payload into one host markup string.
themeToTreeStylesFunctionMaps a resolved theme to tree host CSS properties.
getBuiltInSpriteSheetFunctionGets the SVG sprite for a built-in icon set.
createFileTreeIconResolverFunctionCreates an icon resolver from an icon configuration.

FileTree members

MemberPurpose
new FileTree(options)Creates a model from paths or prepared input.
FileTree.LoadedCustomComponentReports whether the file-tree custom element module loaded.
render(props)Mounts the tree into a wrapper or host element.
hydrate(props)Attaches the model to preloaded host markup.
unmount()Removes the mounted view and keeps the model.
cleanUp()Removes the view and destroys model resources.
getFileTreeContainer()Gets the mounted host element.
getItem(path)Gets a path handle or null.
getFocusedItem()Gets the focused item handle or null.
getFocusedPath()Gets the focused path or null.
getSelectedPaths()Gets the selected paths.
getComposition()Gets the current header and context-menu configuration.
getItemHeight()Gets the resolved row height.
getDensityFactor()Gets the resolved density factor.
subscribe(listener)Subscribes to model changes.
focusPath(path)Focuses a path.
focusNearestPath(path)Focuses and returns the nearest available path.
scrollToPath(path, options?)Scrolls a path into view.
add(path)Adds one path.
remove(path, options?)Removes one path.
move(from, to, options?)Moves one path.
batch(operations)Applies several path mutations together.
resetPaths(paths, options?)Replaces the full path set.
onMutation(type, handler)Subscribes to mutation events.
setSearch(value)Sets or clears the search query.
openSearch(initialValue?)Opens the search session.
closeSearch()Closes the search session.
isSearchOpen()Tests whether search is open.
getSearchValue()Gets the search query.
getSearchMatchingPaths()Gets paths that match the query.
focusNextSearchMatch()Focuses the next search match.
focusPreviousSearchMatch()Focuses the previous search match.
startRenaming(path?, options?)Starts inline rename and reports whether it started.
setGitStatus(status?)Replaces all git status entries.
applyGitStatusPatch(patch)Applies a partial git status update.
setIcons(icons?)Replaces the icon configuration.
setComposition(composition?)Replaces header and context-menu configuration.

Configuration and state types

ExportPurpose
FileTreeOptionsDefines input, behavior, rendering, and presentation options.
FileTreePreparedInputHolds a reusable prepared path list.
FileTreeInitialExpansionSelects closed, open, or depth-based initial expansion.
FileTreeSortComparatorCompares two path entries.
FileTreeSortEntryDescribes one path for a sort comparator.
FileTreeRenderOptionsConfigures row height, row count, overscan, and sticky folders.
FileTreeRenderPropsSelects the wrapper or existing host for render.
FileTreeHydrationPropsSelects the host for hydrate.
FileTreeVisibleRowDescribes one visible tree row.
FileTreeItemHandleRepresents a file or directory item.
FileTreeFileHandleControls one file item.
FileTreeDirectoryHandleControls one directory item and its expansion.
FileTreeListenerDefines a model subscription callback.
FileTreeSsrPayloadHolds the host and shadow markup for server output.

Mutation types

ExportPurpose
FileTreeMutationHandleDefines the public path mutation methods.
FileTreeBatchOperationDescribes one add, remove, or move in a batch.
FileTreeCollisionStrategySelects error, replace, or skip behavior for a move collision.
FileTreeMoveOptionsConfigures move collision behavior.
FileTreeRemoveOptionsConfigures recursive removal.
FileTreeResetOptionsConfigures a path reset and optional prepared input.
FileTreeResetPreparedOptionsConfigures a reset that uses prepared input.
FileTreeMutationEventRepresents any mutation event.
FileTreeMutationSemanticEventRepresents an add, remove, move, or reset event.
FileTreeMutationEventTypeNames a mutation operation.
FileTreeMutationEventForTypeSelects the event shape for an operation name.
FileTreeMutationEventInvalidationDescribes the state invalidation from a mutation.
FileTreeAddEventDescribes one add result.
FileTreeRemoveEventDescribes one remove result.
FileTreeMoveEventDescribes one move result.
FileTreeResetEventDescribes one reset result.
FileTreeBatchEventDescribes one batch result.

Interaction types

ExportPurpose
FileTreeSelectionChangeListenerReceives the selected path list.
FileTreeSearchChangeListenerReceives the current search query.
FileTreeSearchSessionHandleDefines search session methods.
FileTreeSearchModeSelects how nonmatching rows appear.
FileTreeSearchBlurBehaviorSelects search behavior after focus leaves.
FileTreeScrollOffsetSelects top, center, or nearest scroll alignment.
FileTreeScrollToPathOptionsConfigures focus and alignment for scrollToPath.
FileTreeDragAndDropConfigConfigures drag rules and completion callbacks.
FileTreeDropTargetDescribes the current drop target.
FileTreeDropContextDescribes dragged paths and their target.
FileTreeDropResultDescribes the completed move or batch operation.
FileTreeRenamingConfigConfigures rename rules and callbacks.
FileTreeRenamingItemDescribes the item offered to a rename rule.
FileTreeRenameEventDescribes a completed rename.

Presentation types

ExportPurpose
FileTreeCompositionOptionsConfigures header and context-menu composition.
FileTreeHeaderCompositionOptionsSupplies header HTML or a header renderer.
ContextMenuItemDescribes the file or directory for a context menu.
ContextMenuOpenContextSupplies menu position, close, and focus controls.
ContextMenuAnchorRectDescribes the menu anchor rectangle.
ContextMenuTriggerModeSelects right-click, button, or both triggers.
ContextMenuButtonVisibilitySelects when the row menu button appears.
FileTreeRowDecorationDescribes text or icon content in the decoration lane.
FileTreeRowDecorationContextSupplies the item and visible row to a decoration renderer.
FileTreeRowDecorationRendererProduces one row decoration.
GitStatusNames a supported git status.
GitStatusEntryAssigns a git status to one path.
FileTreeGitStatusPatchAdds, changes, or removes git status entries.
FileTreeBuiltInIconSetNames a built-in icon set.
FileTreeIconConfigConfigures built-in and custom icon rules.
FileTreeIconsAccepts an icon set name or icon configuration.
RemappedIconNames or defines a replacement SVG symbol.
FileTreeDensityAccepts a density keyword or numeric factor.
FileTreeDensityKeywordNames compact, default, or relaxed density.
FileTreeDensityPresetHolds a density factor and row height.
TreeThemeInputDefines the resolved theme accepted by themeToTreeStyles.
TreeThemeStylesMaps tree CSS property names to values.

Constants

ExportPurpose
FILE_TREE_TAG_NAMEProvides the file-tree-container element name.
FILE_TREE_STYLE_ATTRIBUTEProvides the core style marker attribute.
FILE_TREE_UNSAFE_CSS_ATTRIBUTEProvides the custom style marker attribute.
FILE_TREE_SCROLLBAR_MEASURE_ATTRIBUTEProvides the scrollbar measurement attribute.
FILE_TREE_SCROLLBAR_GUTTER_STYLE_ATTRIBUTEProvides the measured scrollbar style attribute.
FILE_TREE_SCROLLBAR_GUTTER_MEASURED_PROPERTYProvides the measured scrollbar CSS property.
FILE_TREE_DEFAULT_ITEM_HEIGHTProvides the default row height.
FILE_TREE_DENSITY_PRESETSMaps each density keyword to its preset.
FLATTENED_PREFIXProvides the identifier prefix for a flattened directory chain.
HEADER_SLOT_NAMEProvides the header slot name.
CONTEXT_MENU_SLOT_NAMEProvides the context-menu slot name.
CONTEXT_MENU_TRIGGER_TYPEProvides the context-menu trigger type.
Referenced from SKILL.md