/** Data structure representing a single node in the file tree. */ interface FileTreeNodeData { /** Path of the file or folder (e.g. "src/utils/helpers.ts"). */ path: string; /** Whether this node is a file or folder. */ type: "file" | "folder"; /** Optional custom SVG string to override the default icon. */ icon?: string; /** Arbitrary user data attached to this node. */ meta?: Record; } /** Configuration for a custom toolbar button. */ interface ToolbarButton { id: string; /** Button tooltip (shown on hover). */ label: string; icon?: string; onClick: () => void; /** * Position of this button relative to the built-in toolbar buttons. * Built-ins own fixed slots: `createFile`=0, `createFolder`=1, * `expandAll`=2, `collapseAll`=3. `order: N` inserts the button after the * built-in that owns slot N (e.g. `order: 1` makes it the third button). * Omit to append after all built-ins in array order. */ order?: number; } /** Configuration for a custom context menu item. */ interface ContextMenuItem { id: string; label: string; icon?: string; shortcut?: string; /** Whether this item should appear for a given node. Defaults to always visible. */ visible?: (node: FileTreeNodeData) => boolean; /** * Called when the item is clicked. `nodes` is the array of nodes the * operation applies to (all selected nodes, or just the right-clicked * node when it is not part of a multi-selection). `primaryNode` is the * node the context menu was opened on. */ onClick: (nodes: FileTreeNodeData[], primaryNode: FileTreeNodeData) => void; } interface ToolbarOptions { createFile?: boolean; createFolder?: boolean; expandAll?: boolean; collapseAll?: boolean; custom?: ToolbarButton[]; } interface ContextMenuOptions { createFile?: boolean; createFolder?: boolean; rename?: boolean; delete?: boolean; /** Copy a node to the clipboard (duplicate it via Paste). Default: `true`. */ copy?: boolean; /** Cut a node to the clipboard (move it via Paste). Default: `true`. */ cut?: boolean; /** Paste the clipboard contents into the tree. Default: `true`. */ paste?: boolean; /** Copy the node's full path to the system clipboard. Default: `false`. */ copyPath?: boolean; custom?: ContextMenuItem[]; } type Theme = "light" | "dark"; type Direction = "ltr" | "rtl"; /** * Keys for the user-facing strings rendered by the library. * Pass a translation function via the `t` option to localize them. */ type FileTreeStringKey = "newFile" | "newFolder" | "expandAll" | "collapseAll" | "copy" | "cut" | "paste" | "copyPath" | "rename" | "delete"; /** * Translates a built-in string key to a localized string. * Supplied via the `t` option for i18n. */ type FileTreeTranslate = (key: FileTreeStringKey) => string; /** Options passed to the FileTree constructor. */ interface FileTreeOptions { /** Initial tree data (flat array). Parent folders are auto-created from paths. */ data?: FileTreeNodeData[]; /** Path (or array of paths) of the initially selected node(s). Parent folders are auto-expanded. */ selected?: string | string[]; /** Color theme. Default: `'dark'`. */ theme?: Theme; /** Text direction. Default: `'ltr'`. */ direction?: Direction; /** Pixels of indentation per depth level. Default: `16`. */ indent?: number; /** Enable drag and drop. Default: `true`. */ dragAndDrop?: boolean; /** * Disable all edits via the UI: keyboard shortcuts, the context menu * and drag & drop. Toolbar buttons that create files/folders are also * hidden, and double-click rename is disabled. Programmatic methods * (`addNode`, `renameNode`, ...) remain available. Default: `false`. */ readOnly?: boolean; /** * Automatically inject the component's bundled stylesheet into * `document.head` (once) when the tree is created. Set to `false` * to manage the stylesheet yourself, e.g. by importing * `@live-codes/file-tree/styles.css`. Default: `true`. */ injectStyles?: boolean; /** Toolbar configuration. Set to `false` to hide. */ toolbar?: ToolbarOptions | false; /** Context menu configuration. Set to `false` to disable. */ contextMenu?: ContextMenuOptions | false; /** Map of file extension (without dot) to SVG string for custom icons. */ icons?: Record; /** Sort nodes. `true` for default (folders first, alphabetical). Or provide a custom comparator. */ sort?: boolean | ((a: FileTreeNodeData, b: FileTreeNodeData) => number); /** * Translate function for built-in UI strings (toolbar tooltips, context menu * labels). Takes a `FileTreeStringKey` and returns the localized string. * Defaults to the built-in English strings. */ t?: FileTreeTranslate; } /** All possible event types emitted by the file tree. */ type FileTreeEventType = "select" | "expand" | "collapse" | "create" | "copy" | "rename" | "delete" | "move" | "drop" | "change"; /** Who triggered the event: the user interacting with the UI, or a programmatic API call. */ type FileTreeEventSource = "ui" | "api"; /** Payload included with every emitted event. */ interface FileTreeEvent { /** The type of event. */ type: FileTreeEventType; /** Whether this event was triggered by the UI or by the API. */ source: FileTreeEventSource; /** The node involved in this event. */ node: FileTreeNodeData; /** Full path of the node. Same as `node.path`. */ path: string; /** Previous path, for rename and move events. */ oldPath?: string; /** * All affected node paths for multi-node operations (e.g. deleting a * multi-selection). Single-node fields (`path`, `node`) always refer to * the first entry. Absent for single-node events. */ paths?: string[]; /** Node data for each path in `paths`. */ nodes?: FileTreeNodeData[]; /** Parent folder path. Empty string for root-level nodes. */ parentPath: string; /** Parent node data, or `null` for root-level nodes. */ parentNode: FileTreeNodeData | null; /** Full snapshot of the current flat data array. */ tree: FileTreeNodeData[]; /** Data passed to the event. */ data?: { files: FileList; items: DataTransferItemList; }; /** * Whether `preventDefault()` has been called on this event. * Only checked for certain event types (currently `delete`). */ defaultPrevented: boolean; /** * Call to cancel the default behavior associated with this event. * For `delete` events this prevents the node from being removed, * allowing the consumer to show a confirmation dialog and later * call `removeNode()` programmatically. */ preventDefault: () => void; } type EventHandler = (event: FileTreeEvent) => void; /** Built-in English strings used when no `t` function is provided. */ declare const defaultStrings: Record; declare class FileTree { private root; private toolbarEl; private treeEl; private data; private hierarchy; private options; private nodeMap; private expandedNodes; /** All selected node paths. */ private selectedPaths; /** Anchor path for shift-range selection. */ private anchorPath; /** Keyboard focus path (may differ from selection while ctrl+arrowing). */ private lastFocusPath; private emitter; private contextMenu; private dragDrop; private iconMap; private nameIconMap; private renamingPath; private pendingNewNodePath; private clipboard; private t; /** Primary selected path (first in insertion order), for backward compat. */ private get selectedPath(); constructor(container: HTMLElement | string, options?: FileTreeOptions); private mergeOptions; private renderToolbar; private toolbarBtn; private renderTree; private renderNode; private resolveIcon; /** The ordered array of selected node paths. */ private selectedPathsArray; /** Synchronize the `--selected` class and `aria-selected` across all nodes. */ private applySelectionClasses; private clearSelectionInternal; private selectAllInternal; /** * Select `path` plus everything in the visible order between the anchor * (or last focus) and `path`. */ private rangeSelect; private emitSelectEvent; private selectNode; /** * Normalize an input (single path or array) into a deduped, sorted array. * A path that is a descendant of another path in the list is dropped, so * operations never process a node twice (e.g. a folder and its child). */ private dedupePaths; /** The selected paths to apply an operation to (deduped, sorted). */ private getSelectedForOp; private toggleExpand; expand(path: string, source?: FileTreeEventSource): void; collapse(path: string, source?: FileTreeEventSource): void; expandAll(source?: FileTreeEventSource): void; collapseAll(source?: FileTreeEventSource): void; private showContextMenu; /** Modifier key label for shortcut hints (⌘ on macOS, Ctrl elsewhere). */ private get modKeyLabel(); /** Copy one or more nodes to the internal clipboard for later Paste (duplicate). */ copyToClipboard(path: string | string[]): void; /** Cut one or more nodes to the internal clipboard for later Paste (move). */ cutNode(path: string | string[]): void; /** Paste the internal clipboard into a target folder (defaults to the selected node's parent). */ pasteNode(targetPath?: string): void; /** * Duplicate a node (and its descendants) into a target parent folder. * Copies to the same location resolve a unique name by appending * ` copy` (or ` copy-1`, ...). Returns the new path, or `null` if the * copy cannot be performed (invalid source, or copying into a descendant). * When `silent` is true, no `change` event is emitted (caller batches). */ copyNodeInternal(sourcePath: string, targetParentPath: string, source?: FileTreeEventSource, silent?: boolean): string | null; private applyCutHighlight; private clearCutHighlight; private startRename; private handleRenameCancel; private cancelRename; private isValidName; /** Rewrite `oldPath` → `newPath` in the selection (and anchor/focus). */ private updateSelectedPath; /** * Rename a node to a new path containing slashes, creating intermediate * folders on the fly. Returns `false` if the rename is invalid (conflict, * or a folder renamed inside itself). */ private renameToNestedPath; private createNewNode; /** * Attempt to delete one or more nodes. Emits a single `delete` event * *before* removal, carrying all target paths in `paths`. If a listener * calls `event.preventDefault()`, **none** of the nodes are removed, * giving the consumer the chance to show a confirmation dialog and later * call `removeNode()` to carry out the deletion. */ deleteNode(paths: string | string[]): void; /** Remove one node and all its descendants, cleaning up all derived state. */ private removeNodeInternal; private handleDragMove; private moveNodeInternal; private handleExternalDrop; private fullRerender; private onKeydown; /** Toggle the keyboard-focus ring on the focused node. */ private applyFocusRing; private getVisibleNodePaths; private getChildPaths; private scrollIntoView; private expandAncestors; on(event: FileTreeEventType, handler: EventHandler): void; off(event: FileTreeEventType, handler: EventHandler): void; private emitEvent; private emitChange; getData(): FileTreeNodeData[]; getNode(path: string): FileTreeNodeData | undefined; getSelectedNode(): FileTreeNodeData | null; /** All currently selected nodes (in selection order). */ getSelectedNodes(): FileTreeNodeData[]; setData(data: FileTreeNodeData[]): void; addNode(node: FileTreeNodeData): void; /** * Programmatically remove one or more nodes (and their descendants). * Unlike the UI-triggered `deleteNode`, this is **not cancellable** — * it always removes the nodes immediately. Use this from your * confirmation callback after intercepting a `delete` event. */ removeNode(path: string | string[]): void; renameNode(path: string, newName: string): void; moveNode(sourcePath: string | string[], targetParentPath: string | null): void; /** * Move a node to an exact destination path, renaming it in the same step * (e.g. `moveTo("src/index.ts", "lib/main.ts")`). This combines * `moveNode` (change parent) and `renameNode` (change name). The * destination may contain slashes: missing intermediate folders are * auto-created, and `source` is set to `"api"` so a `rename` event is * emitted (consistent with `renameNode`). Returns `false` if the move is * invalid (conflict, or a folder moved inside itself). */ moveTo(oldPath: string, newPath: string): boolean; /** * Copy one or more nodes (and their descendants) to a new parent folder * (`''` or `null` for root). Copying to the same location duplicates * the node with a unique name (` copy` before the extension, e.g. * `index copy.ts`). Emits `copy` and `create` events. * Returns the new path(s), or `null` if the copy cannot be performed. */ copyNode(sourcePath: string | string[], targetParentPath: string | null): string | string[] | null; select(path: string | string[]): void; /** Clear the current selection. */ clearSelection(): void; /** Select every node in the tree. */ selectAll(): void; setTheme(theme: Theme): void; getTheme(): Theme; setDirection(direction: Direction): void; getDirection(): Direction; destroy(): void; } /** Normalize a path: forward slashes, no leading/trailing slashes, collapse multiples. */ declare function normalizePath(p: string): string; /** Get the parent path. Returns empty string for root-level paths. */ declare function getParentPath(path: string): string; /** Get the file/folder name (last segment of the path). */ declare function getName(path: string): string; /** Get file extension without the leading dot, lowercased. */ declare function getExtension(name: string): string; /** * Create one or more FileTreeNodeData entries for a path, * automatically including all intermediate parent folders. */ declare function createNode(path: string, type: "file" | "folder", meta?: Record): FileTreeNodeData[]; declare const chevron: string; declare const folder: string; declare const folderOpen: string; declare const file: string; declare const fileTs: string; declare const fileJs: string; declare const fileTsx: string; declare const fileJsx: string; declare const fileHtml: string; declare const fileCss: string; declare const fileScss: string; declare const fileJson: string; declare const fileMd: string; declare const fileYaml: string; declare const fileSvg: string; declare const filePng: string; declare const fileJpg: string; declare const fileGif: string; declare const fileWebp: string; declare const filePy: string; declare const fileRb: string; declare const fileRs: string; declare const fileGo: string; declare const fileJava: string; declare const filePhp: string; declare const fileSh: string; declare const fileSql: string; declare const fileXml: string; declare const fileToml: string; declare const fileLock: string; declare const fileEnv: string; declare const fileVue: string; declare const fileTxt: string; declare const newFile: string; declare const newFolder: string; declare const expandAllIcon: string; declare const collapseAllIcon: string; declare const editIcon: string; declare const trashIcon: string; declare const copyIcon: string; declare const cutIcon: string; declare const pasteIcon: string; declare const refreshIcon: string; declare const defaultIconMap: Record; /** Special name-based icons (entire filename match). */ declare const defaultNameIconMap: Record; declare const icons_chevron: typeof chevron; declare const icons_collapseAllIcon: typeof collapseAllIcon; declare const icons_copyIcon: typeof copyIcon; declare const icons_cutIcon: typeof cutIcon; declare const icons_defaultIconMap: typeof defaultIconMap; declare const icons_defaultNameIconMap: typeof defaultNameIconMap; declare const icons_editIcon: typeof editIcon; declare const icons_expandAllIcon: typeof expandAllIcon; declare const icons_file: typeof file; declare const icons_fileCss: typeof fileCss; declare const icons_fileEnv: typeof fileEnv; declare const icons_fileGif: typeof fileGif; declare const icons_fileGo: typeof fileGo; declare const icons_fileHtml: typeof fileHtml; declare const icons_fileJava: typeof fileJava; declare const icons_fileJpg: typeof fileJpg; declare const icons_fileJs: typeof fileJs; declare const icons_fileJson: typeof fileJson; declare const icons_fileJsx: typeof fileJsx; declare const icons_fileLock: typeof fileLock; declare const icons_fileMd: typeof fileMd; declare const icons_filePhp: typeof filePhp; declare const icons_filePng: typeof filePng; declare const icons_filePy: typeof filePy; declare const icons_fileRb: typeof fileRb; declare const icons_fileRs: typeof fileRs; declare const icons_fileScss: typeof fileScss; declare const icons_fileSh: typeof fileSh; declare const icons_fileSql: typeof fileSql; declare const icons_fileSvg: typeof fileSvg; declare const icons_fileToml: typeof fileToml; declare const icons_fileTs: typeof fileTs; declare const icons_fileTsx: typeof fileTsx; declare const icons_fileTxt: typeof fileTxt; declare const icons_fileVue: typeof fileVue; declare const icons_fileWebp: typeof fileWebp; declare const icons_fileXml: typeof fileXml; declare const icons_fileYaml: typeof fileYaml; declare const icons_folder: typeof folder; declare const icons_folderOpen: typeof folderOpen; declare const icons_newFile: typeof newFile; declare const icons_newFolder: typeof newFolder; declare const icons_pasteIcon: typeof pasteIcon; declare const icons_refreshIcon: typeof refreshIcon; declare const icons_trashIcon: typeof trashIcon; declare namespace icons { export { icons_chevron as chevron, icons_collapseAllIcon as collapseAllIcon, icons_copyIcon as copyIcon, icons_cutIcon as cutIcon, icons_defaultIconMap as defaultIconMap, icons_defaultNameIconMap as defaultNameIconMap, icons_editIcon as editIcon, icons_expandAllIcon as expandAllIcon, icons_file as file, icons_fileCss as fileCss, icons_fileEnv as fileEnv, icons_fileGif as fileGif, icons_fileGo as fileGo, icons_fileHtml as fileHtml, icons_fileJava as fileJava, icons_fileJpg as fileJpg, icons_fileJs as fileJs, icons_fileJson as fileJson, icons_fileJsx as fileJsx, icons_fileLock as fileLock, icons_fileMd as fileMd, icons_filePhp as filePhp, icons_filePng as filePng, icons_filePy as filePy, icons_fileRb as fileRb, icons_fileRs as fileRs, icons_fileScss as fileScss, icons_fileSh as fileSh, icons_fileSql as fileSql, icons_fileSvg as fileSvg, icons_fileToml as fileToml, icons_fileTs as fileTs, icons_fileTsx as fileTsx, icons_fileTxt as fileTxt, icons_fileVue as fileVue, icons_fileWebp as fileWebp, icons_fileXml as fileXml, icons_fileYaml as fileYaml, icons_folder as folder, icons_folderOpen as folderOpen, icons_newFile as newFile, icons_newFolder as newFolder, icons_pasteIcon as pasteIcon, icons_refreshIcon as refreshIcon, icons_trashIcon as trashIcon }; } export { type ContextMenuItem, type ContextMenuOptions, type Direction, type EventHandler, FileTree, type FileTreeEvent, type FileTreeEventType, type FileTreeNodeData, type FileTreeOptions, type FileTreeStringKey, type FileTreeTranslate, type Theme, type ToolbarButton, type ToolbarOptions, createNode, defaultStrings, getExtension, getName, getParentPath, icons, normalizePath };