import * as react_jsx_runtime from 'react/jsx-runtime'; import * as react from 'react'; import { CSSProperties } from 'react'; import { T as TreeNode, a as TreeItemId, b as TreeRowSlot, c as TreeContextMenuSlot, d as TreeContextMenuActionsResolver, F as FlatRow, e as TreeRowRenderProps, f as TreeContextMenuItem } from '../slots-ClRpIzoh.js'; export { g as TreeContextMenuAction, h as TreeContextMenuActionsContext } from '../slots-ClRpIzoh.js'; type TreeSelectionMode = 'none' | 'single' | 'multiple'; /** * How a node becomes "activated" (i.e. opened) on pointer interaction. * * - `'single-click'` (default): single click activates a leaf immediately; * double-click also activates. Folders always toggle on single click. * - `'double-click'`: single click only selects + focuses; double-click is * required to activate. Mirrors classic file-manager behaviour. * - `'single-click-preview'`: VSCode Explorer / Cursor behaviour. Single * click activates with `{ preview: true }` (consumer renders a preview * tab); double-click activates with `{ preview: false }` (pinned tab). * * Folders ignore this setting — they always toggle on single click and * never call `onActivate`. */ type TreeActivationMode = 'single-click' | 'double-click' | 'single-click-preview'; interface TreeActivateOptions { /** * `true` when the activation came from a single click in * `'single-click-preview'` mode. `false` for double-click and for * non-preview modes. Consumers typically map this to a * preview-tab vs pinned-tab distinction. */ preview: boolean; } /** * Async loader: called the first time a folder is expanded with no inline * `children`. Result is cached; concurrent expansions are de-duplicated. */ type TreeLoadChildren = (node: TreeNode) => Promise[]>; interface TreeLabels { loading: string; empty: string; error: string; searchPlaceholder: string; searchMatches: (count: number) => string; ariaLabel: string; /** Default context-menu item labels. */ actionOpen: string; actionRename: string; actionDuplicate: string; actionCut: string; actionCopy: string; actionPaste: string; actionDelete: string; actionNewFile: string; actionNewFolder: string; /** Delete confirmation dialog. */ confirmDeleteTitle: (count: number) => string; confirmDeleteMessage: (names: string[]) => string; confirmDeleteOk: string; confirmDeleteCancel: string; /** New file prompt. */ newFileTitle: string; newFileMessage: string; newFilePlaceholder: string; newFileDefault: string; /** New folder prompt. */ newFolderTitle: string; newFolderMessage: string; newFolderPlaceholder: string; newFolderDefault: string; /** Rename prompt (used when inline rename is unavailable / disabled). */ renameTitle: string; renameMessage: string; /** Name validation. */ invalidNameEmpty: string; /** Suffix used by the default `duplicate` flow when the consumer's adapter * needs a hint name. Receives the source name. */ duplicateSuffix: (name: string) => string; } declare const DEFAULT_TREE_LABELS: TreeLabels; /** * Position of a drop / move relative to the target row. `inside` means * "drop into this folder"; `before`/`after` are sibling reorder hints. */ type TreeMovePosition = 'before' | 'inside' | 'after'; /** * CRUD adapter. Every method is optional — Tree only surfaces built-in * menu items / hotkeys whose adapter method is defined. So an * inspection-only tree just passes `{}` (or no adapter) and gets no * destructive menu actions. * * Dialogs (`alert` / `confirm` / `prompt`) are taken from `window.dialog` * exposed by `` in `@djangocfg/ui-core`. The host app * is expected to mount that provider once at the layout level — Tree * never re-implements its own dialogs. */ interface TreeAdapter { /** Delete the given nodes. Tree calls `window.dialog.confirm` first. */ remove?: (nodes: TreeNode[]) => Promise; /** Inline rename — node + new name (already non-empty, post-validate). */ rename?: (node: TreeNode, nextName: string) => Promise; /** Create a file under `parent` (null → root). Tree prompts for name. */ createFile?: (parent: TreeNode | null, name: string) => Promise; /** Create a folder under `parent` (null → root). Tree prompts for name. */ createFolder?: (parent: TreeNode | null, name: string) => Promise; /** Duplicate the given nodes in-place. */ duplicate?: (nodes: TreeNode[]) => Promise; /** Move nodes (drag-and-drop, cut+paste). */ move?: (nodes: TreeNode[], target: TreeNode | null, position: TreeMovePosition) => Promise; /** Copy nodes (copy+paste, drop with modifier). */ copy?: (nodes: TreeNode[], target: TreeNode | null, position: TreeMovePosition) => Promise; /** * Optional name validator. Return a non-empty string to surface as an * error via `window.dialog.alert`. Return `null` to accept. */ validateName?: (name: string, ctx: { node?: TreeNode; parent?: TreeNode | null; }) => string | null; } /** * Built-in action ids. Used by `defaultMenuItems` and the internal * built-in action registry. Each id maps 1:1 to an adapter method * (plus a few selection helpers). */ type TreeBuiltinAction = 'open' | 'rename' | 'duplicate' | 'cut' | 'copy' | 'paste' | 'delete' | 'new-file' | 'new-folder'; type TreeDensity = 'compact' | 'cozy' | 'comfortable'; type TreeAccentIntensity = 'subtle' | 'default' | 'strong'; type TreeRadius = 'none' | 'sm' | 'md'; /** * High-level look. Sets sensible defaults for icons / row sizing / the * active indicator; any individual `TreeAppearance` field still overrides. * * - `'explorer'` (default) — classic file/folder tree: leaf + folder * icons, fixed single-line rows, VSCode active-bar. * - `'list'` — macOS-sidebar / chat-history look: no icons (chevron * only on groups), auto-height rows (multi-line label friendly), quiet * selection (no active-bar). */ type TreeVariant = 'explorer' | 'list'; type TreeRowSizing = 'fixed' | 'auto'; /** * Cosmetic configuration. Every field is optional; missing values fall * back to the `cozy` preset (a comfortable VSCode-Explorer-like density). * * Customize the look without re-implementing slots. */ interface TreeAppearance { /** Built-in size preset. Default: `'cozy'`. */ density?: TreeDensity; /** Override row height in px (wins over density). */ rowHeight?: number; /** Override icon + chevron size in px (wins over density). */ iconSize?: number; /** Lucide stroke width for icon + chevron. Default: 1.5. */ iconStrokeWidth?: number; /** Override label font size in px (wins over density). */ fontSize?: number; /** Pixels between chevron / icon / label. Default depends on density. */ gap?: number; /** Pixels between nesting levels. Default: 16. */ indent?: number; /** Hover / selected highlight intensity. Default: `'default'`. */ accent?: TreeAccentIntensity; /** Row corner radius. Default: `'sm'`. */ radius?: TreeRadius; /** Indent-guide line opacity (0..1). Default: 0.4. */ indentGuideOpacity?: number; /** * Show a 2px primary-tinted bar on the left of the selected row. * Mimics the VSCode active-tab indicator. Default: `true`. */ showActiveIndicator?: boolean; /** * High-level look. Default: `'explorer'`. Sets defaults for the three * fields below; pass any of them explicitly to override the variant. */ variant?: TreeVariant; /** Hide per-leaf icons (chevron + label only). Variant default. */ hideLeafIcons?: boolean; /** Hide folder icons too (chevron stays). Variant default. */ hideFolderIcons?: boolean; /** * `'fixed'` — every row is exactly `rowHeight` (single-line explorer). * `'auto'` — `rowHeight` is a *minimum*; rows grow to fit a multi-line * label (title + meta). Variant default. */ rowSizing?: TreeRowSizing; } interface ResolvedAppearance { density: TreeDensity; rowHeight: number; iconSize: number; iconStrokeWidth: number; fontSize: number; gap: number; indent: number; accent: TreeAccentIntensity; radius: TreeRadius; indentGuideOpacity: number; showActiveIndicator: boolean; hideLeafIcons: boolean; hideFolderIcons: boolean; rowSizing: TreeRowSizing; } declare const DEFAULT_TREE_APPEARANCE: ResolvedAppearance; /** * Merge a partial appearance with the default + density preset. * * Explicit numeric overrides (e.g. `rowHeight`) win over the density preset. */ declare function resolveAppearance(input?: TreeAppearance, /** Outer `indent` prop (kept on TreeRoot for back-compat). */ outerIndent?: number): ResolvedAppearance; /** * Build the `style` object that exposes the resolved appearance to any * descendant via CSS variables. Set on ``'s outer div. */ declare function appearanceToStyle(a: ResolvedAppearance): CSSProperties; interface TreeRootProps { /** Root nodes. Top-level items are rendered directly (no synthetic root). */ data: TreeNode[]; /** Returns the human-readable name for a node (used by search/type-ahead). */ getItemName: (node: TreeNode) => string; /** Async loader for folders without inline `children`. */ loadChildren?: TreeLoadChildren; /** Selection behaviour. Default: `'single'`. */ selectionMode?: TreeSelectionMode; /** Pointer activation behaviour. Default: `'single-click'`. */ activationMode?: TreeActivationMode; /** Initially expanded ids. */ initialExpandedIds?: TreeItemId[]; /** Initially selected ids. */ initialSelectedIds?: TreeItemId[]; /** Pixels of indent per nesting level. Default: 16. (Shortcut for `appearance.indent`.) */ indent?: number; /** Cosmetic configuration: density, sizes, accent intensity, radius. */ appearance?: TreeAppearance; /** Triggered when selection changes. */ onSelectionChange?: (selectedIds: TreeItemId[]) => void; /** Triggered when expanded set changes. */ onExpansionChange?: (expandedIds: TreeItemId[]) => void; /** * Triggered when a leaf is activated (Enter / dblclick / click depending * on `activationMode`). Folders never call this — they toggle instead. */ onActivate?: (node: TreeNode, 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) => boolean; /** Show built-in search input. Default: false. */ enableSearch?: boolean; /** Type printable letters to jump to a matching name. Default: true. */ enableTypeAhead?: boolean; /** Render vertical indent guides under expanded folders. Default: false. */ showIndentGuides?: boolean; /** * Allow inline rename. When true, F2 starts an inline ``; the * value is committed through `adapter.rename`. Requires `adapter.rename`. * Default: false. */ enableInlineRename?: boolean; /** * Enable Finder/Explorer keyboard shortcuts (delete, rename, duplicate, * new file/folder, cut/copy/paste). Bindings only fire when the tree * container has focus. Individual shortcuts are still gated by the * adapter — `⌘⌫` does nothing if `adapter.remove` is undefined. * Default: false. */ enableFinderHotkeys?: boolean; /** * Enable drag-and-drop reorder + move-into-folder. Requires * `adapter.move`. Powered by `@dnd-kit/core` — pointer + keyboard * sensors, accessible. * Default: false. */ enableDnD?: boolean; /** * Custom drop validation. Returns `true` to allow, `false` to forbid. * The default validator rejects self-drops and cycles (dropping a * folder into its own descendant). Use this to add domain rules * (read-only branches, type matching, …). */ canDrop?: (ctx: { source: TreeNode[]; target: TreeNode | null; position: TreeMovePosition; }) => boolean; /** Custom row renderer. Falls back to the default . */ renderRow?: TreeRowSlot; /** Replace default folder/file icon. */ renderIcon?: TreeRowSlot; /** Replace default label rendering. */ renderLabel?: TreeRowSlot; /** Right-side actions slot (per row). */ renderActions?: TreeRowSlot; /** Wrap each row in a context menu (right-click). Receives the row meta + trigger element. */ renderContextMenu?: TreeContextMenuSlot; /** * Declarative right-click menu — short-form. Pass `(row) => [items]` and the * Tree builds a `` for you with sensible defaults. Ignored if * `renderContextMenu` is also set. Return `null`/`undefined`/`[]` to skip * the menu for that row. */ contextMenuActions?: TreeContextMenuActionsResolver; /** Override built-in copy in your locale. */ labels?: Partial; /** Persist expanded + (optional) selected ids in localStorage under this key. */ persistKey?: string; /** Persist selection alongside expansion. Default: false. */ persistSelection?: boolean; /** * CRUD adapter. When set, Tree builds default context-menu items and * Finder hotkeys for every method the adapter defines. Methods that * are not provided produce no UI — no greyed-out items. */ adapter?: TreeAdapter; /** * Which built-in actions to expose in the auto-built context menu. If * omitted, every action whose adapter method exists is shown. * * Pass `[]` to suppress the auto-built menu entirely while keeping the * adapter for hotkeys / DnD. */ defaultMenuItems?: TreeBuiltinAction[]; /** * Imperative handle for outer code. The provided ref receives a * stable handle to `useTreeActions` once Tree mounts. Lets host * components trigger `refresh(id)` / `refreshAll()` from outside * Tree (e.g. after a transport-level mutation completes). */ actionsRef?: React.MutableRefObject; className?: string; style?: CSSProperties; } /** Subset of `useTreeActions()` exposed via ``. */ interface TreeActionsHandle { refresh: (id: string) => Promise; refreshAll: () => Promise; expandAll: () => void; collapseAll: () => void; } /** * High-level entry point. Wraps Provider + (optional) search bar + content. * * For full control, compose with , , * , , etc. directly from `@djangocfg/ui-tools/tree`. */ declare function TreeRoot(props: TreeRootProps): react_jsx_runtime.JSX.Element; /** * `` — opinionated Finder/Explorer-style preset. * * Equivalent to `` with multi-selection, double-click activation, * inline rename, indent guides, and a cozy appearance turned on. Pass an * `adapter` to get the built-in CRUD menu wired to `window.dialog.*`. * * Override any preset default by simply passing the same prop: * * ```tsx * * data={data} * getItemName={(n) => n.data.name} * adapter={fsAdapter} * // override one preset default — everything else stays Finder-y: * activationMode="single-click-preview" * /> * ``` */ declare function FinderTree(props: TreeRootProps): react_jsx_runtime.JSX.Element; type ClipboardKind = 'cut' | 'copy'; interface ClipboardEntry { kind: ClipboardKind; ids: TreeItemId[]; } type ClipboardState = ClipboardEntry | null; interface DropTargetState { id: TreeItemId | null; position: TreeMovePosition; } interface UseDndReturn { /** True when the host enabled DnD AND adapter.move is defined. */ active: boolean; /** Ids currently being dragged (empty when not dragging). */ draggingIds: ReadonlySet; /** Live drop target (`null` when nothing under the pointer). */ dropTarget: DropTargetState | null; /** Called by row sensors on dragstart. */ beginDrag: (rowId: TreeItemId) => void; /** * Called on dragover. `null` clears the indicator. Tree already * filters self/cycle drops via `defaultCanDrop` — the row component * decides the position from pointer geometry first. */ setDropTarget: (target: DropTargetState | null) => void; /** Commit drop — calls `adapter.move` and resets transient state. */ commitDrop: () => Promise; /** Cancel without committing (Esc, drop outside). */ cancelDrag: () => void; /** * Validate a candidate drop in real time. Combines `defaultCanDrop` * with the consumer's `canDrop`. Used by the row component to * suppress the indicator on invalid hovers. */ isAllowedDrop: (target: TreeNode | null, position: TreeMovePosition) => boolean; } /** * Click selection — derives next `{selected, anchor, focused}` from a * pointer event's modifier keys. `rows` is the current flat view (used * for shift-range computation). */ interface ClickModifiers { shift: boolean; meta: boolean; } interface TreeContextValue { expanded: ReadonlySet; selected: ReadonlySet; /** Anchor for shift-range. `null` when nothing has been clicked yet. */ anchor: TreeItemId | null; focused: TreeItemId | null; query: string; /** Id of the row currently in inline-rename mode (or `null`). */ renamingId: TreeItemId | null; /** Is inline rename allowed by the host? */ inlineRenameEnabled: boolean; /** Tree-local clipboard (cut / copy) — P5. `null` when empty. */ clipboard: ClipboardState; flatRows: FlatRow[]; /** Search-matching node ids (subset of all flatRows). */ matchingIds: ReadonlySet; expand: (id: TreeItemId) => void; collapse: (id: TreeItemId) => void; toggle: (id: TreeItemId) => void; expandAll: () => void; collapseAll: () => void; select: (id: TreeItemId) => void; setSelectedIds: (ids: TreeItemId[]) => void; clearSelection: () => void; /** * Finder/Explorer-style click selection. Reads modifier keys from the * passed event and decides between replace / toggle / range / union. */ clickSelect: (id: TreeItemId, mods: ClickModifiers) => void; /** * Move-focus with optional range-extend (shift+arrows). */ moveSelect: (id: TreeItemId, opts: { extend: boolean; }) => void; /** Select every currently visible row (mod+a). */ selectAll: () => void; setFocus: (id: TreeItemId | null) => void; setQuery: (q: string) => void; /** Put the given ids on Tree's clipboard as `cut`. */ cutToClipboard: (ids: TreeItemId[]) => void; /** Put the given ids on Tree's clipboard as `copy`. */ copyToClipboard: (ids: TreeItemId[]) => void; /** * Apply clipboard onto `target` (a row, or `null` for the root). Cut → * `adapter.move`; copy → `adapter.copy`. After a successful cut+paste * the clipboard is cleared. No-op when clipboard is empty or the * matching adapter method is undefined. */ pasteFromClipboard: (target: TreeNode | null, position?: TreeMovePosition) => Promise; /** Clear the clipboard without pasting. */ clearClipboard: () => void; /** Begin inline rename on the given row. */ startRename: (id: TreeItemId) => void; /** Cancel inline rename without committing. */ cancelRename: () => void; /** * Commit inline rename. Tree calls `adapter.rename` and then clears * the renaming state. On validation failure surfaces an error via * `window.dialog.alert` and keeps the input open. */ commitRename: (id: TreeItemId, nextName: string) => Promise; refresh: (id: TreeItemId) => Promise; refreshAll: () => Promise; activate: (node: TreeNode, opts?: TreeActivateOptions) => void; labels: TreeLabels; /** Resolved cosmetic config — never null. */ appearance: ResolvedAppearance; /** Convenience alias for `appearance.indent`. */ indent: number; selectionMode: TreeSelectionMode; activationMode: TreeActivationMode; enableSearch: boolean; showIndentGuides: boolean; getItemName: (node: TreeNode) => string; renderIcon?: TreeRowSlot; renderLabel?: TreeRowSlot; renderActions?: TreeRowSlot; renderContextMenu?: TreeContextMenuSlot; /** CRUD adapter (P2). May be undefined — Tree still renders normally. */ adapter?: TreeAdapter; /** * Final, merged declarative menu resolver. Combines built-in adapter * actions (filtered by `defaultMenuItems`) with the consumer's * `contextMenuActions` resolver, and injects the current * `selectedNodes` before delegating. */ resolvedContextMenuActions?: (row: TreeRowRenderProps) => TreeContextMenuItem[] | null | undefined; /** * Imperative lookup for any node currently known to Tree (root + * cached async children). */ getNodeById: (id: TreeItemId) => TreeNode | undefined; /** * Drag-and-drop state and handlers (P6). `dnd.active` is `false` * when the host didn't enable DnD or `adapter.move` is missing — in * that case `TreeRow` skips all drag setup. */ dnd: UseDndReturn; } type ChildEntryStatus = 'idle' | 'loading' | 'loaded' | 'error'; interface ChildEntry { status: ChildEntryStatus; children: TreeNode[]; error?: string; } type ChildCache = Map>; declare const createChildCache: () => ChildCache; /** * Resolve a node's children for the current render. * * - If the node carries inline `children`, those win (no async fetch). * - Otherwise we look in the cache. * * Returns `null` when nothing is loaded yet (caller may show a skeleton). */ declare const resolveChildren: (cache: ChildCache, node: TreeNode) => { children: TreeNode[] | null; status: ChildEntryStatus; error?: string; }; declare function useTreeContext(): TreeContextValue; interface TreeProviderProps extends Pick, 'data' | 'getItemName' | 'loadChildren' | 'selectionMode' | 'activationMode' | 'initialExpandedIds' | 'initialSelectedIds' | 'indent' | 'appearance' | 'onSelectionChange' | 'onExpansionChange' | 'onActivate' | 'filterNode' | 'enableSearch' | 'showIndentGuides' | 'renderIcon' | 'renderLabel' | 'renderActions' | 'renderContextMenu' | 'contextMenuActions' | 'labels' | 'persistKey' | 'persistSelection' | 'adapter' | 'defaultMenuItems' | 'enableInlineRename' | 'enableDnD' | 'canDrop'> { children: react.ReactNode; } declare function TreeProvider(props: TreeProviderProps): react_jsx_runtime.JSX.Element; interface FlattenInput { roots: TreeNode[]; expandedIds: ReadonlySet; cache: ChildCache; /** Optional predicate. Nodes returning `false` (and their descendants) are excluded. */ filterNode?: (node: TreeNode) => boolean; } /** * Walk the tree top-to-bottom and produce a flat list of visible rows. * * Visibility rule: a child row appears only when every ancestor is in * `expandedIds`. The output is ordered exactly as it should render, * which keeps keyboard navigation (next/prev row) trivial. */ declare function flattenTree({ roots, expandedIds, cache, filterNode, }: FlattenInput): FlatRow[]; interface PersistedTreeState { expandedItems: TreeItemId[]; selectedItems: TreeItemId[]; } declare function loadTreeState(key: string): PersistedTreeState | null; declare function saveTreeState(key: string, state: PersistedTreeState): void; declare function clearTreeState(key: string): void; interface DemoNode { name: string; } /** * Build a deterministic synthetic tree for stories and tests. * * @example * const data = createDemoTree({ depth: 4, breadth: 3 }); * n.data.name} /> */ declare function createDemoTree({ depth, breadth, rootPrefix, }?: { depth?: number; breadth?: number; rootPrefix?: string; }): TreeNode[]; interface SplitName { base: string; ext: string; } declare function splitFileName(name: string): SplitName; /** * Returns the `[selectionStart, selectionEnd]` pair to use on focus of an * `` so only the base name is highlighted (Finder behaviour). * * Folders pass `isFolder=true` to skip extension detection and select * the entire name — folders don't have file extensions semantically. */ declare function autoSelectRange(name: string, isFolder: boolean): [number, number]; interface DropZoneInput { /** Pointer Y in viewport coordinates. */ pointerY: number; /** Row bounding box (`getBoundingClientRect()`). */ rowRect: { top: number; bottom: number; height: number; }; /** Folders accept `inside` drops; leaves only reorder via before/after. */ isFolder: boolean; } /** * Translate pointer geometry into a drop position relative to the row. * * For folders the row is split into three zones (top third / middle / * bottom third). For leaves it's split in half (before / after). */ declare function resolveDropZone(input: DropZoneInput): TreeMovePosition; interface CanDropInput { /** Nodes being dragged. */ source: TreeNode[]; /** Row under the pointer (`null` = root drop zone). */ target: TreeNode | null; /** Resolved drop position. */ position: TreeMovePosition; /** Tree's id→node lookup, used to walk descendants. */ getNodeById: (id: TreeItemId) => TreeNode | undefined; } declare function defaultCanDrop(input: CanDropInput): boolean; declare const TREE_DND_MIME = "application/x-djangocfg-tree"; declare function useTreeLabels(): TreeLabels; declare function useTreeRows(): FlatRow[]; declare function useTreeSelection(): { selectedIds: string[]; anchor: string; select: (id: TreeItemId) => void; setSelectedIds: (ids: TreeItemId[]) => void; clear: () => void; clickSelect: (id: TreeItemId, mods: ClickModifiers) => void; moveSelect: (id: TreeItemId, opts: { extend: boolean; }) => void; selectAll: () => void; isSelected: (id: TreeItemId) => boolean; }; declare function useTreeExpansion(): { expandedIds: string[]; expand: (id: TreeItemId) => void; collapse: (id: TreeItemId) => void; toggle: (id: TreeItemId) => void; expandAll: () => void; collapseAll: () => void; isExpanded: (id: TreeItemId) => boolean; }; declare function useTreeFocus(): { focusedId: string; setFocus: (id: TreeItemId | null) => void; }; declare function useTreeSearch(): { isOpen: boolean; query: string; setQuery: (q: string) => void; matchingIds: ReadonlySet; matchCount: number; }; declare function useTreeDnd(): UseDndReturn; declare function useTreeClipboard(): { clipboard: ClipboardEntry; isCut: (id: TreeItemId) => boolean; cut: (ids: TreeItemId[]) => void; copy: (ids: TreeItemId[]) => void; paste: (target: TreeNode, position?: TreeMovePosition) => Promise; clear: () => void; }; declare function useTreeRename(): { /** True when the host allowed inline rename AND the adapter exposes `rename`. */ enabled: boolean; /** Currently renaming id, or `null`. */ renamingId: string; startRename: (id: TreeItemId) => void; cancelRename: () => void; commitRename: (id: TreeItemId, nextName: string) => Promise; }; declare function useTreeActions(): { expand: (id: TreeItemId) => void; collapse: (id: TreeItemId) => void; toggle: (id: TreeItemId) => void; expandAll: () => void; collapseAll: () => void; refresh: (id: TreeItemId) => Promise; refreshAll: () => Promise; activate: (node: TreeNode, opts?: TreeActivateOptions) => void; }; interface UseTreeKeyboardOptions { rows: FlatRow[]; focusedId: TreeItemId | null; enabled?: boolean; /** * `true` when `selectionMode === 'multiple'` — enables shift-extend on * arrow keys, Home / End, and `Cmd/Ctrl+A` select-all. Without it the * shift-modifier just moves focus. */ multiSelect?: boolean; /** * Move focus to `id`. When `extend` is true and multi-select is enabled, * the consumer should extend the selection range from anchor through id. */ onFocus: (id: TreeItemId, opts: { extend: boolean; }) => void; onSelect: (id: TreeItemId) => void; onActivate: (id: TreeItemId) => void; onExpand: (id: TreeItemId) => void; onCollapse: (id: TreeItemId) => void; onClearSelection: () => void; /** Cmd/Ctrl+A — select all visible rows. Ignored if multiSelect is false. */ onSelectAll?: () => void; } interface UseTreeKeyboardReturn { /** Attach to the tree container. Hotkeys only fire when focus is inside. */ ref: (instance: HTMLElement | null) => void; } /** * Standard tree keyboard navigation, scoped to the container ref. * * - ↑ / ↓ : prev / next visible row (Shift extends range) * - Home / End : first / last visible row (Shift extends range) * - → / ← : expand-or-jump-to-child / collapse-or-jump-to-parent * - Enter / Space : activate (folder → toggle, leaf → onActivate) * - Esc : clear selection * - Cmd/Ctrl + A : select all (multi-select only) * * Pure decision-making lives in the sibling helpers (`arrow-nav.ts`, * `expand-collapse.ts`, `activation.ts`) so it's unit-testable without * a DOM. This file only wires up `useHotkey` bindings and dispatches * the helper outcomes back to the consumer's callbacks. */ declare function useTreeKeyboard({ rows, focusedId, enabled, multiSelect, onFocus, onSelect, onActivate, onExpand, onCollapse, onClearSelection, onSelectAll, }: UseTreeKeyboardOptions): UseTreeKeyboardReturn; interface UseTreeTypeAheadOptions { /** Visible flat rows in render order. */ rows: FlatRow[]; /** How to read the displayed name of a node (matched case-insensitively). */ getItemName: (node: TreeNode) => string; /** Element receiving keydown events. */ containerRef: React.RefObject; /** Called with the matched node id so the consumer can focus / scroll. */ onMatch: (id: string) => void; /** Disable without removing the call site. */ enabled?: boolean; } /** * Type-ahead jump (Finder / VSCode style). * * Builds a rolling buffer of printable keys (within ~600 ms of each other) * and notifies the consumer of the first row whose name starts with that * prefix. Resets on Esc / Enter / navigation keys / timeout. */ declare function useTreeTypeAhead({ rows, getItemName, containerRef, onMatch, enabled, }: UseTreeTypeAheadOptions): void; interface BuiltinActionContext { adapter: TreeAdapter; labels: TreeLabels; /** Currently selected nodes (full objects, resolved from ids). */ selectedNodes: TreeNode[]; /** Row the user right-clicked / triggered the action on. May be null * for empty-area actions (paste / new file / new folder at root). */ targetNode: TreeNode | null; /** Returns the human-readable name for a node (uses `getItemName`). */ getName: (node: TreeNode) => string; /** Imperative: start inline rename on this id (no-op if disabled). */ startInlineRename?: (id: TreeItemId) => void; /** Clipboard hooks (P5). Provided by Tree's context; pure forwarding. */ clipboard?: { /** Current clipboard kind, if any (so we can hide "Paste" when empty). */ hasItems: boolean; cut: (ids: TreeItemId[]) => void; copy: (ids: TreeItemId[]) => void; paste: () => void | Promise; }; } interface UseTreeFinderHotkeysOptions { /** Off by default — Tree opt-ins via `enableFinderHotkeys`. */ enabled: boolean; /** Adapter — used both for action availability and dispatch. */ adapter?: TreeAdapter; /** Labels (passed through into adapter action context for dialogs). */ labels: TreeLabels; /** Live selection (set of ids). */ selected: ReadonlySet; /** Live focused id (used as "target" for new-file/new-folder actions). */ focused: TreeItemId | null; /** Id → node lookup. */ getNodeById: (id: TreeItemId) => TreeNode | undefined; /** Display name resolver. */ getItemName: (node: TreeNode) => string; /** Open inline rename on the row (P3). Falls back to a prompt otherwise. */ startInlineRename?: (id: TreeItemId) => void; /** Clipboard bindings (P5). When undefined, ⌘C/X/V are no-ops. */ clipboard?: BuiltinActionContext['clipboard']; /** Whether typing is currently in inline-rename input — pauses bindings. */ paused?: boolean; } interface UseTreeFinderHotkeysReturn { /** Attach to the tree container ref so hotkeys only fire when it has focus. */ ref: (instance: HTMLElement | null) => void; } /** * Wire the platform-aware Finder/Explorer shortcuts to the built-in * adapter actions. Bindings are scoped to the container ref via * `useHotkey`, so they don't leak to the rest of the page. * * Each shortcut is bound by an explicit `useHotkey` call (no `.map(useHotkey)` * loop, so the rules-of-hooks lint passes cleanly). The handler routes * through `runBuiltinAction`, which silently no-ops when the adapter * doesn't expose the matching method — so a Tree with `adapter = { remove }` * only effectively reacts to ⌘⌫ / Delete. */ declare function useTreeFinderHotkeys(opts: UseTreeFinderHotkeysOptions): UseTreeFinderHotkeysReturn; interface TreeChevronProps { isExpanded: boolean; isFolder: boolean; className?: string; } /** * TreeChevron — expand/collapse chevron for a tree row. * * Memoised: re-renders only when `isExpanded`, `isFolder` or `className` * change. Reads appearance from context. */ declare function TreeChevronRaw({ isExpanded, isFolder, className }: TreeChevronProps): react_jsx_runtime.JSX.Element; declare const TreeChevron: react.MemoExoticComponent; interface TreeIconProps { isFolder: boolean; isExpanded: boolean; className?: string; } /** * TreeIcon — file/folder icon for a tree row. * * Memoised: re-renders only when `isFolder`, `isExpanded` or `className` * change. Reads appearance from context — context updates will still * trigger re-render as expected. */ declare function TreeIconRaw({ isFolder, isExpanded, className }: TreeIconProps): react_jsx_runtime.JSX.Element; declare const TreeIcon: react.MemoExoticComponent; interface TreeLabelProps { children: React.ReactNode; isMatchingSearch?: boolean; className?: string; } /** * TreeLabel — truncated label for a tree row. * * Memoised: re-renders only when `children`, `isMatchingSearch` or * `className` change. `children` is compared by reference. */ declare function TreeLabelRaw({ children, isMatchingSearch, className }: TreeLabelProps): react_jsx_runtime.JSX.Element; declare const TreeLabel: react.MemoExoticComponent; interface TreeRowProps { row: FlatRow; className?: string; } /** * TreeRow — single row in a virtualised tree. * * Memoised: re-renders only when `row` reference or `className` change. * `row` is treated as immutable — the parent should not mutate node * objects in place. */ declare function TreeRowRaw({ row, className }: TreeRowProps): react_jsx_runtime.JSX.Element; declare const TreeRow: typeof TreeRowRaw; interface TreeContentProps { /** Custom row renderer; falls back to . */ children?: TreeRowSlot; className?: string; /** Override aria-label for the container. */ ariaLabel?: string; /** * Container ARIA role. Defaults to `'tree'` for standalone composition * use. `` passes `'group'` because its own outer element * already carries `role="tree"` + `aria-activedescendant`. */ role?: 'tree' | 'group' | 'presentation'; } declare function TreeContent({ children, className, ariaLabel, role, }: TreeContentProps): react_jsx_runtime.JSX.Element; interface TreeSearchInputProps { className?: string; showMatches?: boolean; } declare function TreeSearchInput({ className, showMatches }: TreeSearchInputProps): react_jsx_runtime.JSX.Element; interface TreeEmptyProps { children: React.ReactNode; className?: string; } declare function TreeEmpty({ children, className }: TreeEmptyProps): react_jsx_runtime.JSX.Element; interface TreeSkeletonProps { rows?: number; className?: string; } declare function TreeSkeleton({ rows, className }: TreeSkeletonProps): react_jsx_runtime.JSX.Element; interface TreeErrorProps { children: React.ReactNode; className?: string; } declare function TreeError({ children, className }: TreeErrorProps): react_jsx_runtime.JSX.Element; interface TreeIndentGuidesProps { level: number; indent: number; } /** * Vertical guide lines under nested rows. Renders one absolute-positioned * 1px column per ancestor level. Decorative — `aria-hidden` and * pointer-events disabled. Opacity comes from the tree appearance. */ declare function TreeIndentGuides({ level, indent }: TreeIndentGuidesProps): react_jsx_runtime.JSX.Element; interface TreeRenameInputProps { initialValue: string; isFolder: boolean; /** Called with the new (trimmed) name when the user presses Enter / blurs. */ onCommit: (nextName: string) => void | Promise; /** Called when the user presses Escape. */ onCancel: () => void; className?: string; } /** * Inline rename input rendered in place of `` while a row is * being renamed. Mounts focused with the *base* portion of the name * pre-selected (Finder behaviour — `foo.txt` selects `foo`). * * Behaviour: * - Enter → commit * - Escape → cancel (no adapter call) * - blur → commit (matches Finder; intentional even for empty * names — the host validates and re-opens on error) * - all other keys are stopped from bubbling so Tree's container * hotkeys (↑↓ delete F2 etc.) don't fire while typing. */ declare function TreeRenameInput({ initialValue, isFolder, onCommit, onCancel, className, }: TreeRenameInputProps): react_jsx_runtime.JSX.Element; interface TreeDropIndicatorProps { position: TreeMovePosition; /** Indent in pixels — keeps the line aligned with the row's text. */ indent: number; /** Render a "rejected" style (red wash) when the drop is forbidden. */ invalid?: boolean; } /** * Visual hint for an in-progress drag-and-drop. Three modes: * * - `before` / `after` → a 2px horizontal line above / below the row * - `inside` → a translucent primary wash filling the row * * Indents the line by the row's depth so it visually aligns with the * target's content (rather than running edge-to-edge). * * Positioned absolutely — the parent `TreeRow` provides `position: relative`. */ declare function TreeDropIndicator({ position, indent, invalid, }: TreeDropIndicatorProps): react_jsx_runtime.JSX.Element; interface TreeEmptyAreaProps { className?: string; } /** * Fills the remaining vertical space below `` so the user * can right-click "into nothing" to get a Finder/Explorer-style empty * area menu (paste / new file / new folder at root), and so DnD has a * root drop target. * * Built-in actions are derived the same way as for rows — through * `buildDefaultMenuItems`, with `targetNode = null` (root) and * `selectedNodes = []` (nothing under the right-click). Items whose * `available()` predicate fails are simply skipped, so a tree without * `adapter.createFile/Folder` and without a clipboard payload shows * no menu at all. */ declare function TreeEmptyArea({ className }: TreeEmptyAreaProps): react_jsx_runtime.JSX.Element; export { type ChildCache, type ChildEntry, type ChildEntryStatus, DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, type DemoNode, FinderTree, FlatRow, type FlattenInput, type PersistedTreeState, type ResolvedAppearance, TREE_DND_MIME, TreeRoot as Tree, type TreeAccentIntensity, type TreeActionsHandle, type TreeActivateOptions, type TreeActivationMode, type TreeAdapter, type TreeAppearance, type TreeBuiltinAction, TreeChevron, type TreeChevronProps, TreeContent, type TreeContentProps, TreeContextMenuActionsResolver, TreeContextMenuItem, TreeContextMenuSlot, type TreeContextValue, type TreeDensity, TreeDropIndicator, type TreeDropIndicatorProps, TreeEmpty, TreeEmptyArea, type TreeEmptyAreaProps, type TreeEmptyProps, TreeError, type TreeErrorProps, TreeIcon, type TreeIconProps, TreeIndentGuides, type TreeIndentGuidesProps, TreeItemId, TreeLabel, type TreeLabelProps, type TreeLabels, type TreeLoadChildren, type TreeMovePosition, TreeNode, TreeProvider, type TreeProviderProps, type TreeRadius, TreeRenameInput, type TreeRenameInputProps, TreeRoot, type TreeRootProps, TreeRow, type TreeRowProps, TreeRowRenderProps, type TreeRowSizing, TreeRowSlot, TreeSearchInput, type TreeSearchInputProps, type TreeSelectionMode, TreeSkeleton, type TreeSkeletonProps, type TreeVariant, type UseTreeFinderHotkeysOptions, type UseTreeKeyboardOptions, type UseTreeTypeAheadOptions, appearanceToStyle, autoSelectRange, clearTreeState, createChildCache, createDemoTree, TreeRoot as default, defaultCanDrop, flattenTree, loadTreeState, resolveAppearance, resolveChildren, resolveDropZone, saveTreeState, splitFileName, useTreeActions, useTreeClipboard, useTreeContext, useTreeDnd, useTreeExpansion, useTreeFinderHotkeys, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRename, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead };