@kitn.ai/ui/dist/components/file-tree.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { JSX } from 'solid-js';
/** A single artifact file the tree can show + the preview can load. */
export interface FileTreeFile {
    /** Tree label/key. Folders are built from `/`-delimited segments. */
    path: string;
    /** Where the preview loads it (CDN/S3/dev-server/API). */
    url?: string;
    /** Source for the Code tab. */
    code?: string;
    /** Language id for syntax highlighting (e.g. `html`, `css`, `tsx`). */
    language?: string;
    /** Kind — drives the icon + whether Code applies. */
    type?: 'html' | 'pdf' | 'image' | 'other';
    /** Lines added vs the base. Rendered as a trailing `+N` stat (success hue,
     *  tabular-nums). Only shown when present; omit for a plain file row. */
    additions?: number;
    /** Lines removed vs the base. Rendered as a trailing `-N` stat (error hue). */
    deletions?: number;
    /** Change status vs the base. Drives a small trailing status letter in the
     *  conventional VCS hue (added=green, modified=amber, deleted=red,
     *  renamed=blue, untracked=muted). Only shown when present. */
    status?: 'added' | 'modified' | 'deleted' | 'renamed' | 'untracked';
}
/** A change status a file can carry. */
export type FileStatus = NonNullable<FileTreeFile['status']>;
/** A folder node in the built tree. */
export interface FileTreeFolderNode {
    kind: 'folder';
    /** Last path segment (the folder's display name). */
    name: string;
    /** Full `/`-joined path to this folder (stable key). */
    path: string;
    children: FileTreeNode[];
}
/** A leaf (file) node in the built tree. */
export interface FileTreeFileNode {
    kind: 'file';
    name: string;
    path: string;
    file: FileTreeFile;
}
export type FileTreeNode = FileTreeFolderNode | FileTreeFileNode;
/**
 * Build a nested folder/file tree from a flat list of `/`-delimited paths.
 *
 * - `a/b/c.html` nests `c.html` under `b` under `a`.
 * - Folders are de-duplicated and reused across files.
 * - Insertion order is preserved per level, with folders sorted before files
 *   and each group sorted alphabetically (case-insensitive) for a stable,
 *   readable tree regardless of input order.
 */
export declare function buildFileTree(files: FileTreeFile[]): FileTreeNode[];
export interface FileTreeProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
    /** Flat file list; folders are derived from `/`-delimited paths. */
    files: FileTreeFile[];
    /** Currently-selected file path (highlighted). */
    activeFile?: string;
    /** Called with a file's path when the user selects it. */
    onSelect?: (path: string, file: FileTreeFile) => void;
    /** Folder paths expanded by default. When omitted, all folders start open. */
    defaultExpanded?: string[];
    /** Show a summary header above the tree: the changed-file count, the summed
     *  `+additions / -deletions`, and a Collapse-all/Expand-all toggle wired to the
     *  folder-expand state. Off by default (no header — unchanged behavior). */
    summary?: boolean;
}
/**
 * `FileTree` — a collapsible, keyboard-navigable file explorer built from a flat
 * list of `/`-delimited paths. ARIA `tree`/`treeitem`/`group`. Selecting a file
 * calls `onSelect(path, file)`.
 */
export declare function FileTree(props: FileTreeProps): JSX.Element;