@anymux/ui-kit 0.1.0

package/dist/tree-Dd9Z0Aso.js

@@ -0,0 +1,3351 @@
+import { cn$1 as cn } from "./utils-B4fdKKsy.js";
+import { resolveIcon$1 as resolveIcon } from "./iconMap-V4B8P-Uh.js";
+import { useFileBrowserContext } from "./FileBrowserContext-B6jixa2j.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Archive, ArrowDown, ArrowUp, ArrowUpDown, BookOpen, Braces, Check, ChevronDown, ChevronRight, Code, Component as Component$1, Database, Download, FileText, GitBranch, Globe, ImageIcon, Key, Loader2, Minus, MoreVertical, Music, Package, Palette, Play, Search, Settings, TestTube, Zap } from "lucide-react";
+import { flow, makeAutoObservable, observable } from "mobx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/tree/utils/SelectionTheme.ts
+/**
+* Default selection theme configuration
+*/
+const DEFAULT_SELECTION_THEME = {
+	colorScheme: "primary",
+	intensity: "subtle",
+	focusStyle: "ring",
+	animated: true,
+	persistSelection: true
+};
+/**
+* Generate selection background classes based on color scheme and intensity
+*/
+function getSelectionBackground(colorScheme, intensity) {
+	if (colorScheme === "custom") return "";
+	const intensityMap = {
+		subtle: {
+			primary: "bg-primary/10",
+			secondary: "bg-secondary/10",
+			accent: "bg-accent/20",
+			muted: "bg-muted"
+		},
+		prominent: {
+			primary: "bg-primary/20",
+			secondary: "bg-secondary/20",
+			accent: "bg-accent/40",
+			muted: "bg-muted/60"
+		},
+		"high-contrast": {
+			primary: "bg-primary text-primary-foreground",
+			secondary: "bg-secondary text-secondary-foreground",
+			accent: "bg-accent text-accent-foreground",
+			muted: "bg-muted-foreground text-muted"
+		}
+	};
+	return intensityMap[intensity]?.[colorScheme] || intensityMap.subtle.primary;
+}
+/**
+* Generate hover background classes
+*/
+function getHoverBackground(colorScheme) {
+	if (colorScheme === "custom") return "";
+	const hoverMap = {
+		primary: "hover:bg-primary/5",
+		secondary: "hover:bg-secondary/5",
+		accent: "hover:bg-accent/10",
+		muted: "hover:bg-muted/30"
+	};
+	return hoverMap[colorScheme] || hoverMap.primary;
+}
+/**
+* Generate focus indicator classes based on focus style
+*/
+function getFocusIndicator(focusStyle, colorScheme) {
+	if (colorScheme === "custom") return focusStyle === "ring" ? "ring-2 ring-[var(--tree-focus-ring)] ring-offset-1" : "border-l-2 border-[var(--tree-focus-border)]";
+	const focusMap = {
+		ring: {
+			primary: "ring-2 ring-primary ring-offset-1",
+			secondary: "ring-2 ring-secondary ring-offset-1",
+			accent: "ring-2 ring-accent ring-offset-1",
+			muted: "ring-2 ring-muted-foreground ring-offset-1"
+		},
+		outline: {
+			primary: "outline-2 outline-primary",
+			secondary: "outline-2 outline-secondary",
+			accent: "outline-2 outline-accent",
+			muted: "outline-2 outline-muted-foreground"
+		},
+		border: {
+			primary: "border-l-2 border-primary",
+			secondary: "border-l-2 border-secondary",
+			accent: "border-l-2 border-accent",
+			muted: "border-l-2 border-muted-foreground"
+		},
+		underline: {
+			primary: "border-b-2 border-primary",
+			secondary: "border-b-2 border-secondary",
+			accent: "border-b-2 border-accent",
+			muted: "border-b-2 border-muted-foreground"
+		}
+	};
+	return focusMap[focusStyle]?.[colorScheme] || focusMap.ring.primary;
+}
+/**
+* Generate complete selection classes for a tree node
+*/
+function getSelectionClasses(theme, isSelected, isFocused, useCheckboxes = false) {
+	const baseClasses = [
+		"transition-colors",
+		theme.animated ? "duration-150" : "",
+		getHoverBackground(theme.colorScheme)
+	];
+	if (isSelected) baseClasses.push(getSelectionBackground(theme.colorScheme, theme.intensity));
+	if (isFocused && !useCheckboxes) baseClasses.push(getFocusIndicator(theme.focusStyle, theme.colorScheme));
+	return cn(baseClasses);
+}
+/**
+* Generate CSS custom properties for custom color schemes
+* NOTE: This function is now simplified since we handle custom colors with inline styles
+*/
+function getCustomColorVariables(theme) {
+	return {};
+}
+
+//#endregion
+//#region src/tree/providers/TestTreeProvider.ts
+var TestTreeProvider = class {
+	constructor() {
+		this.id = "test-tree-provider";
+		this.name = "Test Tree Provider";
+		this.version = "1.0.0";
+		this.isMultiSelectEnabled = true;
+		this.isDragDropEnabled = false;
+		this.isVirtualizationEnabled = false;
+		this.isTableViewEnabled = true;
+		this.useCheckboxSelection = false;
+		this.allowPartialSelection = true;
+		this.config = {};
+		this.selectionTheme = {
+			...DEFAULT_SELECTION_THEME,
+			colorScheme: "primary",
+			intensity: "prominent",
+			focusStyle: "ring",
+			animated: true,
+			persistSelection: true
+		};
+		this.slowLoading = false;
+		this.simulateErrors = false;
+		this.maxDepth = 3;
+		this.nodesPerLevel = 5;
+		this.loadingDelay = 300;
+		this.updateSelectionTheme = (theme) => {
+			this.selectionTheme = {
+				...this.selectionTheme,
+				...theme
+			};
+		};
+		this.setMultiSelectEnabled = (enabled) => {
+			this.isMultiSelectEnabled = enabled;
+		};
+		this.setCheckboxSelection = (enabled) => {
+			this.useCheckboxSelection = enabled;
+		};
+		makeAutoObservable(this, {
+			id: false,
+			name: false,
+			version: false,
+			isDragDropEnabled: false,
+			isVirtualizationEnabled: false,
+			isTableViewEnabled: false,
+			config: false
+		});
+	}
+	/**
+	* Get selection theme configuration
+	*/
+	getSelectionTheme() {
+		return this.selectionTheme;
+	}
+	/**
+	* Load tree nodes
+	*/
+	async loadNodes(options) {
+		await this.simulateDelay();
+		if (this.simulateErrors && Math.random() < .3) throw new Error("Simulated loading error - try again!");
+		const nodes = this.generateMockNodes("", 0);
+		return {
+			nodes,
+			hasMore: false,
+			totalCount: nodes.length
+		};
+	}
+	/**
+	* Load child nodes for a given parent
+	*/
+	async loadChildren(node, options) {
+		await this.simulateDelay();
+		if (this.simulateErrors && Math.random() < .3) throw new Error("Simulated loading error - try again!");
+		const pathParts = node.path.split("/").filter(Boolean);
+		const depth = pathParts.length;
+		if (depth >= this.maxDepth) return {
+			nodes: [],
+			hasMore: false,
+			totalCount: 0
+		};
+		const children = this.generateMockNodes(node.path, depth);
+		return {
+			nodes: children,
+			hasMore: false,
+			totalCount: children.length
+		};
+	}
+	/**
+	* Refresh tree data
+	*/
+	async refresh(path) {
+		return path ? this.loadChildren({ path }) : this.loadNodes();
+	}
+	canExpand(node) {
+		return node.type === "directory" && (node.hasChildren ?? true);
+	}
+	canSelect(node) {
+		return !node.disabled;
+	}
+	getNodeContextMenu(node) {
+		const baseItems = [];
+		if (node.type === "directory") if (node.name.includes("components")) return [
+			{
+				id: "open",
+				label: "Open Folder"
+			},
+			{
+				id: "separator-1",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "new-component",
+				label: "New React Component"
+			},
+			{
+				id: "new-hook",
+				label: "New Custom Hook"
+			},
+			{
+				id: "new-story",
+				label: "New Storybook Story"
+			},
+			{
+				id: "separator-2",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "run-tests",
+				label: "Run Component Tests"
+			},
+			{
+				id: "build-docs",
+				label: "Generate Docs"
+			},
+			{
+				id: "separator-3",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "rename",
+				label: "Rename Folder"
+			},
+			{
+				id: "delete",
+				label: "Delete Folder"
+			}
+		];
+		else if (node.name.includes("config")) return [
+			{
+				id: "open",
+				label: "Open Config Folder"
+			},
+			{
+				id: "separator-1",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "new-env",
+				label: "New Environment File"
+			},
+			{
+				id: "new-config",
+				label: "New Config File"
+			},
+			{
+				id: "validate-config",
+				label: "Validate Configuration"
+			},
+			{
+				id: "separator-2",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "backup-config",
+				label: "Backup Configuration"
+			},
+			{
+				id: "restore-config",
+				label: "Restore from Backup"
+			},
+			{
+				id: "separator-3",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "rename",
+				label: "Rename Folder"
+			},
+			{
+				id: "delete",
+				label: "Delete Folder"
+			}
+		];
+		else return [
+			{
+				id: "open",
+				label: "Open Folder"
+			},
+			{
+				id: "separator-1",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "new-file",
+				label: "New File"
+			},
+			{
+				id: "new-folder",
+				label: "New Folder"
+			},
+			{
+				id: "separator-2",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "import-files",
+				label: "Import Files"
+			},
+			{
+				id: "export-folder",
+				label: "Export Folder"
+			},
+			{
+				id: "separator-3",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "rename",
+				label: "Rename Folder"
+			},
+			{
+				id: "delete",
+				label: "Delete Folder"
+			},
+			{
+				id: "separator-4",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "copy",
+				label: "Copy Folder"
+			},
+			{
+				id: "cut",
+				label: "Cut Folder"
+			}
+		];
+		const fileName = node.name;
+		const fileExt = fileName.split(".").pop()?.toLowerCase() || "";
+		switch (fileExt) {
+			case "js":
+			case "jsx": return [
+				{
+					id: "open",
+					label: "Open in Editor"
+				},
+				{
+					id: "open-preview",
+					label: "Open in Preview"
+				},
+				{
+					id: "separator-1",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "run-file",
+					label: "Run JavaScript"
+				},
+				{
+					id: "debug-file",
+					label: "Debug in Browser"
+				},
+				{
+					id: "format-code",
+					label: "Format with Prettier"
+				},
+				{
+					id: "separator-2",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "create-test",
+					label: "Create Test File"
+				},
+				{
+					id: "run-tests",
+					label: "Run Tests"
+				},
+				{
+					id: "separator-3",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "rename",
+					label: "Rename File"
+				},
+				{
+					id: "duplicate",
+					label: "Duplicate File"
+				},
+				{
+					id: "delete",
+					label: "Delete File"
+				}
+			];
+			case "ts":
+			case "tsx": return [
+				{
+					id: "open",
+					label: "Open in Editor"
+				},
+				{
+					id: "open-preview",
+					label: "Open in Preview"
+				},
+				{
+					id: "separator-1",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "compile-ts",
+					label: "Compile TypeScript"
+				},
+				{
+					id: "type-check",
+					label: "Run Type Check"
+				},
+				{
+					id: "generate-types",
+					label: "Generate Type Definitions"
+				},
+				{
+					id: "separator-2",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "create-test",
+					label: "Create Test File"
+				},
+				{
+					id: "run-tests",
+					label: "Run Tests"
+				},
+				{
+					id: "separator-3",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "rename",
+					label: "Rename File"
+				},
+				{
+					id: "duplicate",
+					label: "Duplicate File"
+				},
+				{
+					id: "delete",
+					label: "Delete File"
+				}
+			];
+			case "css":
+			case "scss":
+			case "sass":
+			case "less": return [
+				{
+					id: "open",
+					label: "Open in Editor"
+				},
+				{
+					id: "open-preview",
+					label: "Live Preview"
+				},
+				{
+					id: "separator-1",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "compile-css",
+					label: "Compile Stylesheet"
+				},
+				{
+					id: "optimize-css",
+					label: "Optimize CSS"
+				},
+				{
+					id: "validate-css",
+					label: "Validate CSS"
+				},
+				{
+					id: "separator-2",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "extract-vars",
+					label: "Extract CSS Variables"
+				},
+				{
+					id: "generate-rtl",
+					label: "Generate RTL Version"
+				},
+				{
+					id: "separator-3",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "rename",
+					label: "Rename File"
+				},
+				{
+					id: "duplicate",
+					label: "Duplicate File"
+				},
+				{
+					id: "delete",
+					label: "Delete File"
+				}
+			];
+			case "md":
+			case "mdx": return [
+				{
+					id: "open",
+					label: "Open in Editor"
+				},
+				{
+					id: "open-preview",
+					label: "Preview Markdown"
+				},
+				{
+					id: "separator-1",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "export-html",
+					label: "Export to HTML"
+				},
+				{
+					id: "export-pdf",
+					label: "Export to PDF"
+				},
+				{
+					id: "check-links",
+					label: "Check Links"
+				},
+				{
+					id: "separator-2",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "toc-generate",
+					label: "Generate Table of Contents"
+				},
+				{
+					id: "word-count",
+					label: "Word Count & Stats"
+				},
+				{
+					id: "separator-3",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "rename",
+					label: "Rename File"
+				},
+				{
+					id: "duplicate",
+					label: "Duplicate File"
+				},
+				{
+					id: "delete",
+					label: "Delete File"
+				}
+			];
+			case "json": return [
+				{
+					id: "open",
+					label: "Open in Editor"
+				},
+				{
+					id: "open-viewer",
+					label: "Open JSON Viewer"
+				},
+				{
+					id: "separator-1",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "validate-json",
+					label: "Validate JSON"
+				},
+				{
+					id: "format-json",
+					label: "Format JSON"
+				},
+				{
+					id: "minify-json",
+					label: "Minify JSON"
+				},
+				{
+					id: "separator-2",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "compare-json",
+					label: "Compare with..."
+				},
+				{
+					id: "schema-validate",
+					label: "Validate Against Schema"
+				},
+				{
+					id: "separator-3",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "rename",
+					label: "Rename File"
+				},
+				{
+					id: "duplicate",
+					label: "Duplicate File"
+				},
+				{
+					id: "delete",
+					label: "Delete File"
+				}
+			];
+			case "jpg":
+			case "jpeg":
+			case "png":
+			case "gif":
+			case "svg":
+			case "webp": return [
+				{
+					id: "open",
+					label: "Open Image"
+				},
+				{
+					id: "open-editor",
+					label: "Edit in Image Editor"
+				},
+				{
+					id: "separator-1",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "resize-image",
+					label: "Resize Image"
+				},
+				{
+					id: "compress-image",
+					label: "Compress Image"
+				},
+				{
+					id: "convert-format",
+					label: "Convert Format"
+				},
+				{
+					id: "separator-2",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "image-info",
+					label: "Image Properties"
+				},
+				{
+					id: "copy-url",
+					label: "Copy Image URL"
+				},
+				{
+					id: "separator-3",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "rename",
+					label: "Rename File"
+				},
+				{
+					id: "duplicate",
+					label: "Duplicate File"
+				},
+				{
+					id: "delete",
+					label: "Delete File"
+				}
+			];
+			default: return [
+				{
+					id: "open",
+					label: "Open File"
+				},
+				{
+					id: "open-with",
+					label: "Open With..."
+				},
+				{
+					id: "separator-1",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "properties",
+					label: "File Properties"
+				},
+				{
+					id: "permissions",
+					label: "Change Permissions"
+				},
+				{
+					id: "separator-2",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "rename",
+					label: "Rename File"
+				},
+				{
+					id: "duplicate",
+					label: "Duplicate File"
+				},
+				{
+					id: "delete",
+					label: "Delete File"
+				},
+				{
+					id: "separator-3",
+					label: "",
+					type: "separator"
+				},
+				{
+					id: "copy",
+					label: "Copy File"
+				},
+				{
+					id: "cut",
+					label: "Cut File"
+				}
+			];
+		}
+	}
+	getMultiNodeContextMenu(nodes) {
+		const hasFiles = nodes.some((n) => n.type === "file");
+		const hasFolders = nodes.some((n) => n.type === "directory");
+		const allSameType = hasFiles && !hasFolders || hasFolders && !hasFiles;
+		if (allSameType && hasFiles) return [
+			{
+				id: "open-all",
+				label: `Open ${nodes.length} Files`
+			},
+			{
+				id: "separator-1",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "compress-files",
+				label: `Create Archive (${nodes.length} files)`
+			},
+			{
+				id: "copy-paths",
+				label: "Copy File Paths"
+			},
+			{
+				id: "separator-2",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "copy-all",
+				label: `Copy ${nodes.length} Files`
+			},
+			{
+				id: "cut-all",
+				label: `Cut ${nodes.length} Files`
+			},
+			{
+				id: "delete-all",
+				label: `Delete ${nodes.length} Files`
+			}
+		];
+		else if (allSameType && hasFolders) return [
+			{
+				id: "open-all",
+				label: `Open ${nodes.length} Folders`
+			},
+			{
+				id: "separator-1",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "merge-folders",
+				label: "Merge Folders"
+			},
+			{
+				id: "compare-folders",
+				label: "Compare Folders"
+			},
+			{
+				id: "separator-2",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "copy-all",
+				label: `Copy ${nodes.length} Folders`
+			},
+			{
+				id: "cut-all",
+				label: `Cut ${nodes.length} Folders`
+			},
+			{
+				id: "delete-all",
+				label: `Delete ${nodes.length} Folders`
+			}
+		];
+		else return [
+			{
+				id: "open-all",
+				label: `Open ${nodes.length} Items`
+			},
+			{
+				id: "separator-1",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "compress-all",
+				label: `Create Archive (${nodes.length} items)`
+			},
+			{
+				id: "copy-info",
+				label: "Copy Selection Info"
+			},
+			{
+				id: "separator-2",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "copy-all",
+				label: `Copy ${nodes.length} Items`
+			},
+			{
+				id: "cut-all",
+				label: `Cut ${nodes.length} Items`
+			},
+			{
+				id: "delete-all",
+				label: `Delete ${nodes.length} Items`
+			}
+		];
+	}
+	onContextMenuAction(menuItemId, nodes) {
+		const nodeNames = nodes.map((n) => n.name).join(", ");
+		console.log(`🎯 Context menu action: ${menuItemId} on nodes: ${nodeNames}`);
+		switch (menuItemId) {
+			case "open":
+			case "open-all":
+				console.log(`📂 Opening: ${nodeNames}`);
+				alert(`Opening: ${nodeNames}`);
+				break;
+			case "open-preview":
+				console.log(`👁️ Opening preview for: ${nodeNames}`);
+				alert(`Preview mode for: ${nodeNames}`);
+				break;
+			case "open-editor":
+				console.log(`✏️ Opening in editor: ${nodeNames}`);
+				alert(`Editor opened for: ${nodeNames}`);
+				break;
+			case "run-file":
+			case "run-tests":
+				console.log(`▶️ Running: ${nodeNames}`);
+				alert(`Executing: ${nodeNames}`);
+				break;
+			case "debug-file":
+				console.log(`🐛 Debugging: ${nodeNames}`);
+				alert(`Debug session started for: ${nodeNames}`);
+				break;
+			case "compile-ts":
+			case "compile-css":
+				console.log(`🔨 Compiling: ${nodeNames}`);
+				alert(`Compilation started for: ${nodeNames}`);
+				break;
+			case "format-code":
+			case "format-json":
+				console.log(`🎨 Formatting: ${nodeNames}`);
+				alert(`Code formatted: ${nodeNames}`);
+				break;
+			case "type-check":
+				console.log(`🔍 Type checking: ${nodeNames}`);
+				alert(`Type check completed for: ${nodeNames}`);
+				break;
+			case "new-file":
+			case "new-folder":
+			case "new-component":
+			case "new-hook":
+			case "new-story":
+				console.log(`➕ Creating new ${menuItemId.replace("new-", "")} in: ${nodeNames}`);
+				alert(`Creating new ${menuItemId.replace("new-", "")} in: ${nodeNames}`);
+				break;
+			case "export-html":
+			case "export-pdf":
+				console.log(`📤 Exporting ${menuItemId.replace("export-", "")}: ${nodeNames}`);
+				alert(`Exporting ${menuItemId.replace("export-", "").toUpperCase()}: ${nodeNames}`);
+				break;
+			case "import-files":
+				console.log(`📥 Importing files to: ${nodeNames}`);
+				alert(`Import dialog opened for: ${nodeNames}`);
+				break;
+			case "rename":
+				console.log(`✏️ Renaming: ${nodeNames}`);
+				alert(`Rename dialog for: ${nodeNames}`);
+				break;
+			case "duplicate":
+				console.log(`📋 Duplicating: ${nodeNames}`);
+				alert(`Duplicated: ${nodeNames}`);
+				break;
+			case "delete":
+			case "delete-all":
+				console.log(`🗑️ Deleting: ${nodeNames}`);
+				alert(`Deleted: ${nodeNames}`);
+				break;
+			case "copy":
+			case "copy-all":
+				console.log(`📋 Copying: ${nodeNames}`);
+				alert(`Copied to clipboard: ${nodeNames}`);
+				break;
+			case "cut":
+			case "cut-all":
+				console.log(`✂️ Cutting: ${nodeNames}`);
+				alert(`Cut to clipboard: ${nodeNames}`);
+				break;
+			case "validate-json":
+			case "validate-css":
+			case "validate-config":
+				console.log(`✅ Validating: ${nodeNames}`);
+				alert(`Validation passed for: ${nodeNames}`);
+				break;
+			case "compress-image":
+			case "compress-files":
+			case "compress-all":
+				console.log(`🗜️ Compressing: ${nodeNames}`);
+				alert(`Compression completed for: ${nodeNames}`);
+				break;
+			case "image-info":
+			case "properties":
+				console.log(`ℹ️ Showing properties for: ${nodeNames}`);
+				alert(`Properties: ${nodeNames}\nSize: 1.2MB\nType: ${nodes[0]?.type || "unknown"}\nModified: ${nodes[0]?.lastModified?.toLocaleDateString() || "unknown"}`);
+				break;
+			default:
+				console.log(`❓ Unknown action: ${menuItemId}`);
+				alert(`Action executed: ${menuItemId} on ${nodeNames}`);
+		}
+	}
+	getTableColumns() {
+		return [
+			{
+				id: "name",
+				label: "Name",
+				dataKey: "name",
+				width: "300px",
+				sortable: true,
+				filterable: true,
+				isTreeColumn: true,
+				align: "left"
+			},
+			{
+				id: "type",
+				label: "Type",
+				dataKey: "type",
+				width: "100px",
+				sortable: true,
+				filterable: true,
+				align: "left",
+				formatValue: (value) => value === "directory" ? "Folder" : "File"
+			},
+			{
+				id: "size",
+				label: "Size",
+				dataKey: "size",
+				width: "100px",
+				sortable: true,
+				align: "right",
+				formatValue: (value, node) => {
+					if (node.type === "directory") return "-";
+					if (!value) return "-";
+					if (value < 1024) return `${value} B`;
+					if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+					if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+					return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+				}
+			},
+			{
+				id: "lastModified",
+				label: "Modified",
+				dataKey: "lastModified",
+				width: "150px",
+				sortable: true,
+				align: "left",
+				formatValue: (value) => {
+					if (!value) return "-";
+					return value.toLocaleDateString();
+				}
+			},
+			{
+				id: "path",
+				label: "Path",
+				dataKey: "path",
+				width: "200px",
+				sortable: true,
+				filterable: true,
+				align: "left"
+			}
+		];
+	}
+	getDefaultTableSort() {
+		return {
+			columnId: "name",
+			direction: "asc"
+		};
+	}
+	onTableSort(sort) {
+		console.log("Table sort changed:", sort);
+	}
+	async onTableExport(options) {
+		console.log("Table export requested:", options);
+		alert(`Export to ${options.format.toUpperCase()} format requested`);
+	}
+	async simulateDelay() {
+		const delay = this.slowLoading ? 1e3 : this.loadingDelay;
+		await new Promise((resolve) => setTimeout(resolve, delay));
+	}
+	generateMockNodes(parentPath, depth) {
+		if (depth >= this.maxDepth) return [];
+		const nodes = [];
+		const fileTypes = [
+			"js",
+			"jsx",
+			"ts",
+			"tsx",
+			"html",
+			"css",
+			"scss",
+			"sass",
+			"less",
+			"md",
+			"mdx",
+			"txt",
+			"pdf",
+			"json",
+			"yml",
+			"yaml",
+			"xml",
+			"env",
+			"config",
+			"jpg",
+			"jpeg",
+			"png",
+			"gif",
+			"svg",
+			"webp",
+			"ico",
+			"mp4",
+			"mp3",
+			"wav",
+			"avi",
+			"zip",
+			"tar",
+			"gz",
+			"exe",
+			"app",
+			"dmg",
+			"py",
+			"php",
+			"java",
+			"cpp",
+			"c",
+			"go",
+			"rs",
+			"rb"
+		];
+		const folderTypes = [
+			{
+				name: "components",
+				type: "react"
+			},
+			{
+				name: "hooks",
+				type: "react"
+			},
+			{
+				name: "pages",
+				type: "react"
+			},
+			{
+				name: "utils",
+				type: "code"
+			},
+			{
+				name: "lib",
+				type: "code"
+			},
+			{
+				name: "src",
+				type: "source"
+			},
+			{
+				name: "config",
+				type: "config"
+			},
+			{
+				name: "build",
+				type: "build"
+			},
+			{
+				name: "dist",
+				type: "build"
+			},
+			{
+				name: ".github",
+				type: "git"
+			},
+			{
+				name: ".vscode",
+				type: "vscode"
+			},
+			{
+				name: "assets",
+				type: "assets"
+			},
+			{
+				name: "images",
+				type: "images"
+			},
+			{
+				name: "media",
+				type: "media"
+			},
+			{
+				name: "public",
+				type: "public"
+			},
+			{
+				name: "docs",
+				type: "docs"
+			},
+			{
+				name: "tests",
+				type: "test"
+			},
+			{
+				name: "__tests__",
+				type: "test"
+			},
+			{
+				name: "node_modules",
+				type: "node_modules"
+			}
+		];
+		for (let i = 0; i < this.nodesPerLevel; i++) {
+			const nodeId = `${parentPath || "root"}-${depth}-${i}`.replace(/[^a-zA-Z0-9-_]/g, "-");
+			const shouldBeFolder = depth < this.maxDepth - 1 && (i < this.nodesPerLevel / 2 || Math.random() < .4);
+			if (shouldBeFolder) {
+				const folderType = folderTypes[i % folderTypes.length] || {
+					name: `folder-${i}`,
+					type: "default"
+				};
+				const folderPath = parentPath ? `${parentPath}/${folderType.name}` : `/${folderType.name}`;
+				nodes.push({
+					id: nodeId,
+					name: folderType.name,
+					path: folderPath,
+					type: "directory",
+					hasChildren: depth < this.maxDepth - 1,
+					lastModified: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1e3),
+					metadata: {
+						folderType: folderType.type,
+						description: this.getFolderDescription(folderType.type)
+					}
+				});
+			} else {
+				const fileType = fileTypes[i % fileTypes.length] || "txt";
+				const fileName = this.generateFileName(fileType, i);
+				const filePath = parentPath ? `${parentPath}/${fileName}` : `/${fileName}`;
+				nodes.push({
+					id: nodeId,
+					name: fileName,
+					path: filePath,
+					type: "file",
+					hasChildren: false,
+					size: Math.floor(Math.random() * 1e6) + 1024,
+					lastModified: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1e3),
+					metadata: {
+						fileType,
+						category: this.getFileCategory(fileType),
+						description: this.getFileDescription(fileType)
+					}
+				});
+			}
+		}
+		return nodes;
+	}
+	generateFileName(fileType, index) {
+		const fileNames = {
+			"js": [
+				"utils",
+				"helpers",
+				"config",
+				"index",
+				"main"
+			],
+			"jsx": [
+				"App",
+				"Component",
+				"Button",
+				"Modal",
+				"Form"
+			],
+			"ts": [
+				"types",
+				"interfaces",
+				"utils",
+				"service",
+				"api"
+			],
+			"tsx": [
+				"HomePage",
+				"UserCard",
+				"Navigation",
+				"Layout",
+				"Dashboard"
+			],
+			"css": [
+				"styles",
+				"main",
+				"theme",
+				"reset",
+				"variables"
+			],
+			"scss": [
+				"app",
+				"components",
+				"layout",
+				"mixins",
+				"variables"
+			],
+			"md": [
+				"README",
+				"CHANGELOG",
+				"CONTRIBUTING",
+				"DOCS",
+				"API"
+			],
+			"json": [
+				"package",
+				"tsconfig",
+				"config",
+				"settings",
+				"data"
+			],
+			"yml": [
+				"docker-compose",
+				"config",
+				"ci",
+				"deployment",
+				"settings"
+			],
+			"py": [
+				"main",
+				"utils",
+				"models",
+				"views",
+				"tests"
+			],
+			"jpg": [
+				"hero-image",
+				"profile",
+				"banner",
+				"thumbnail",
+				"cover"
+			],
+			"png": [
+				"logo",
+				"icon",
+				"screenshot",
+				"diagram",
+				"chart"
+			]
+		};
+		const names = fileNames[fileType] || ["file"];
+		const baseName = names[index % names.length];
+		return `${baseName}.${fileType}`;
+	}
+	getFolderDescription(folderType) {
+		const descriptions = {
+			"react": "React components and hooks",
+			"source": "Source code files",
+			"code": "Utility functions and libraries",
+			"config": "Configuration files",
+			"build": "Build output and artifacts",
+			"git": "Git workflow configurations",
+			"vscode": "VS Code editor settings",
+			"assets": "Project assets and resources",
+			"images": "Image files and graphics",
+			"media": "Media files (video, audio)",
+			"public": "Public static files",
+			"docs": "Documentation files",
+			"test": "Test files and specs",
+			"node_modules": "Node.js dependencies",
+			"default": "General folder"
+		};
+		return descriptions[folderType] || "General folder";
+	}
+	getFileCategory(fileType) {
+		const categories = {
+			"js": "JavaScript",
+			"jsx": "React",
+			"ts": "TypeScript",
+			"tsx": "React TypeScript",
+			"css": "Stylesheet",
+			"scss": "Sass",
+			"sass": "Sass",
+			"less": "Less",
+			"html": "Markup",
+			"xml": "Markup",
+			"svg": "Vector Graphics",
+			"md": "Markdown",
+			"txt": "Text",
+			"pdf": "Document",
+			"json": "Data",
+			"yml": "Config",
+			"yaml": "Config",
+			"env": "Environment",
+			"jpg": "Image",
+			"png": "Image",
+			"gif": "Image",
+			"mp3": "Audio",
+			"mp4": "Video",
+			"py": "Python",
+			"php": "PHP",
+			"java": "Java",
+			"cpp": "C++",
+			"go": "Go",
+			"zip": "Archive",
+			"tar": "Archive",
+			"default": "File"
+		};
+		return categories[fileType] || categories["default"] || "File";
+	}
+	getFileDescription(fileType) {
+		const descriptions = {
+			"js": "JavaScript source file",
+			"jsx": "React component file",
+			"ts": "TypeScript source file",
+			"tsx": "React TypeScript component",
+			"css": "Cascading Style Sheet",
+			"scss": "Sass stylesheet",
+			"html": "HTML markup file",
+			"md": "Markdown documentation",
+			"json": "JSON data file",
+			"py": "Python script",
+			"jpg": "JPEG image file",
+			"png": "PNG image file",
+			"mp3": "MP3 audio file",
+			"zip": "Compressed archive"
+		};
+		return descriptions[fileType] || `${fileType.toUpperCase()} file`;
+	}
+	/**
+	* Get custom icon for a node based on file type and category
+	*/
+	getNodeIcon(node) {
+		if (node.type === "directory") {
+			if (node.name.includes("components")) return Component$1;
+			if (node.name.includes("assets") || node.name.includes("images")) return ImageIcon;
+			if (node.name.includes("config") || node.name.includes("settings")) return Settings;
+			if (node.name.includes("docs") || node.name.includes("documentation")) return BookOpen;
+			if (node.name.includes("test") || node.name.includes("__tests__")) return TestTube;
+			if (node.name.includes("lib") || node.name.includes("library")) return Package;
+			return "folder";
+		}
+		const extension = node.name.split(".").pop() || "";
+		switch (extension.toLowerCase()) {
+			case "js":
+			case "jsx": return FileText;
+			case "ts":
+			case "tsx": return Code;
+			case "html":
+			case "htm": return Globe;
+			case "css":
+			case "scss":
+			case "sass":
+			case "less": return Palette;
+			case "md":
+			case "mdx": return FileText;
+			case "txt": return FileText;
+			case "pdf": return FileText;
+			case "json": return Braces;
+			case "yml":
+			case "yaml": return Settings;
+			case "xml": return Code;
+			case "env": return Key;
+			case "config": return Settings;
+			case "jpg":
+			case "jpeg":
+			case "png":
+			case "gif":
+			case "webp":
+			case "bmp":
+			case "tiff":
+			case "ico": return ImageIcon;
+			case "svg": return Zap;
+			case "mp4":
+			case "avi":
+			case "mov":
+			case "mkv": return Play;
+			case "mp3":
+			case "wav":
+			case "flac":
+			case "ogg": return Music;
+			case "zip":
+			case "tar":
+			case "gz":
+			case "7z":
+			case "rar": return Archive;
+			case "exe":
+			case "app":
+			case "deb":
+			case "dmg": return Zap;
+			case "git":
+			case "gitignore": return GitBranch;
+			case "dockerfile": return Package;
+			case "sql": return Database;
+			case "log": return FileText;
+			default: return "file";
+		}
+	}
+};
+
+//#endregion
+//#region src/tree/providers/SimpleTreeProvider.ts
+var SimpleTreeProvider = class {
+	constructor(options = {}) {
+		this.id = "simple-tree-provider";
+		this.name = "Simple Tree Provider";
+		this.version = "1.0.0";
+		this.isMultiSelectEnabled = true;
+		this.isDragDropEnabled = false;
+		this.isVirtualizationEnabled = false;
+		this.isTableViewEnabled = false;
+		this.useCheckboxSelection = false;
+		this.allowPartialSelection = true;
+		this.config = {};
+		this.selectionTheme = {
+			...DEFAULT_SELECTION_THEME,
+			colorScheme: "primary",
+			intensity: "prominent",
+			focusStyle: "ring",
+			animated: true,
+			persistSelection: true
+		};
+		this.nodes = [];
+		this.contextMenuItems = [];
+		this.updateSelectionTheme = (theme) => {
+			this.selectionTheme = {
+				...this.selectionTheme,
+				...theme
+			};
+		};
+		this.setMultiSelectEnabled = (enabled) => {
+			this.isMultiSelectEnabled = enabled;
+		};
+		this.setCheckboxSelection = (enabled) => {
+			this.useCheckboxSelection = enabled;
+		};
+		this.nodes = options.data ?? this.createDefaultData();
+		this.contextMenuItems = options.contextMenuItems ?? this.createDefaultContextMenu();
+		this.onSelectionChange = options.onSelectionChange;
+		this.onContextMenuAction = options.onContextMenuAction;
+		makeAutoObservable(this, {
+			id: false,
+			name: false,
+			version: false,
+			isDragDropEnabled: false,
+			isVirtualizationEnabled: false,
+			isTableViewEnabled: false,
+			config: false
+		});
+	}
+	/**
+	* Load root nodes
+	*/
+	async loadNodes(options) {
+		return {
+			nodes: this.nodes,
+			hasMore: false,
+			totalCount: this.nodes.length
+		};
+	}
+	/**
+	* Load children for a specific node
+	*/
+	async loadChildren(node, options) {
+		const children = node.children || [];
+		return {
+			nodes: children,
+			hasMore: false,
+			totalCount: children.length
+		};
+	}
+	/**
+	* Refresh/reload nodes
+	*/
+	async refresh(path) {
+		if (path) {
+			const node = this.findNodeByPath(path);
+			if (node) return this.loadChildren(node);
+		}
+		return this.loadNodes();
+	}
+	/**
+	* Get context menu for a single node
+	*/
+	getNodeContextMenu(node) {
+		return this.contextMenuItems.filter((item) => {
+			if (item.id === "expand" || item.id === "collapse") return node.hasChildren || node.children && node.children.length > 0;
+			if (item.id === "open") return node.type === "file";
+			return true;
+		});
+	}
+	/**
+	* Get context menu for multiple selected nodes
+	*/
+	getMultiNodeContextMenu(nodes) {
+		return this.contextMenuItems.filter((item) => {
+			return [
+				"delete",
+				"copy",
+				"cut",
+				"properties"
+			].includes(item.id);
+		});
+	}
+	/**
+	* Get selection theme configuration
+	*/
+	getSelectionTheme() {
+		return this.selectionTheme;
+	}
+	/**
+	* Update the static data
+	*/
+	setData(data) {
+		this.nodes = data;
+	}
+	/**
+	* Get current data
+	*/
+	getData() {
+		return this.nodes;
+	}
+	/**
+	* Add a new node to the tree
+	*/
+	addNode(parentPath, newNode) {
+		if (parentPath === null) {
+			this.nodes.push(newNode);
+			return true;
+		}
+		const parent = this.findNodeByPath(parentPath);
+		if (parent) {
+			if (!parent.children) parent.children = [];
+			parent.children.push(newNode);
+			parent.hasChildren = true;
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Remove a node from the tree
+	*/
+	removeNode(nodePath) {
+		const rootIndex = this.nodes.findIndex((node) => node.path === nodePath);
+		if (rootIndex >= 0) {
+			this.nodes.splice(rootIndex, 1);
+			return true;
+		}
+		return this.removeNodeFromChildren(this.nodes, nodePath);
+	}
+	/**
+	* Find a node by its path
+	*/
+	findNodeByPath(path) {
+		const searchNodes = (nodes) => {
+			for (const node of nodes) {
+				if (node.path === path) return node;
+				if (node.children) {
+					const found = searchNodes(node.children);
+					if (found) return found;
+				}
+			}
+			return null;
+		};
+		return searchNodes(this.nodes);
+	}
+	/**
+	* Create default sample data
+	*/
+	createDefaultData() {
+		return [
+			{
+				id: "documents",
+				name: "Documents",
+				path: "/documents",
+				type: "directory",
+				hasChildren: true,
+				children: [
+					{
+						id: "reports",
+						name: "Reports",
+						path: "/documents/reports",
+						type: "directory",
+						hasChildren: true,
+						children: [{
+							id: "quarterly-report",
+							name: "Quarterly Report.pdf",
+							path: "/documents/reports/quarterly-report.pdf",
+							type: "file",
+							size: 1024e3,
+							lastModified: new Date("2024-01-15")
+						}, {
+							id: "annual-report",
+							name: "Annual Report.pdf",
+							path: "/documents/reports/annual-report.pdf",
+							type: "file",
+							size: 2048e3,
+							lastModified: new Date("2024-01-10")
+						}]
+					},
+					{
+						id: "presentations",
+						name: "Presentations",
+						path: "/documents/presentations",
+						type: "directory",
+						hasChildren: true,
+						children: [{
+							id: "product-demo",
+							name: "Product Demo.pptx",
+							path: "/documents/presentations/product-demo.pptx",
+							type: "file",
+							size: 512e4,
+							lastModified: new Date("2024-01-20")
+						}]
+					},
+					{
+						id: "readme",
+						name: "README.md",
+						path: "/documents/readme.md",
+						type: "file",
+						size: 2048,
+						lastModified: new Date("2024-01-25")
+					}
+				]
+			},
+			{
+				id: "projects",
+				name: "Projects",
+				path: "/projects",
+				type: "directory",
+				hasChildren: true,
+				children: [{
+					id: "web-app",
+					name: "Web Application",
+					path: "/projects/web-app",
+					type: "directory",
+					hasChildren: true,
+					children: [{
+						id: "src",
+						name: "src",
+						path: "/projects/web-app/src",
+						type: "directory",
+						hasChildren: true,
+						children: [{
+							id: "app-ts",
+							name: "app.ts",
+							path: "/projects/web-app/src/app.ts",
+							type: "file",
+							size: 4096,
+							lastModified: new Date("2024-01-24")
+						}, {
+							id: "components",
+							name: "components",
+							path: "/projects/web-app/src/components",
+							type: "directory",
+							hasChildren: false,
+							children: []
+						}]
+					}, {
+						id: "package-json",
+						name: "package.json",
+						path: "/projects/web-app/package.json",
+						type: "file",
+						size: 1024,
+						lastModified: new Date("2024-01-23")
+					}]
+				}]
+			},
+			{
+				id: "downloads",
+				name: "Downloads",
+				path: "/downloads",
+				type: "directory",
+				hasChildren: false,
+				children: []
+			}
+		];
+	}
+	/**
+	* Create default context menu items
+	*/
+	createDefaultContextMenu() {
+		return [
+			{
+				id: "open",
+				label: "Open",
+				icon: "file-text",
+				handler: (node) => this.onContextMenuAction?.("open", [node])
+			},
+			{
+				id: "expand",
+				label: "Expand",
+				icon: "chevron-down",
+				handler: (node) => this.onContextMenuAction?.("expand", [node])
+			},
+			{
+				id: "collapse",
+				label: "Collapse",
+				icon: "chevron-right",
+				handler: (node) => this.onContextMenuAction?.("collapse", [node])
+			},
+			{
+				id: "separator-1",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "copy",
+				label: "Copy",
+				icon: "copy",
+				handler: (node) => this.onContextMenuAction?.("copy", [node])
+			},
+			{
+				id: "cut",
+				label: "Cut",
+				icon: "scissors",
+				handler: (node) => this.onContextMenuAction?.("cut", [node])
+			},
+			{
+				id: "delete",
+				label: "Delete",
+				icon: "trash-2",
+				handler: (node) => this.onContextMenuAction?.("delete", [node])
+			},
+			{
+				id: "separator-2",
+				label: "",
+				type: "separator"
+			},
+			{
+				id: "properties",
+				label: "Properties",
+				icon: "info",
+				handler: (node) => this.onContextMenuAction?.("properties", [node])
+			}
+		];
+	}
+	/**
+	* Helper method to remove node from children recursively
+	*/
+	removeNodeFromChildren(nodes, targetPath) {
+		for (const node of nodes) if (node.children) {
+			const childIndex = node.children.findIndex((child) => child.path === targetPath);
+			if (childIndex >= 0) {
+				node.children.splice(childIndex, 1);
+				node.hasChildren = node.children.length > 0;
+				return true;
+			}
+			if (this.removeNodeFromChildren(node.children, targetPath)) return true;
+		}
+		return false;
+	}
+};
+
+//#endregion
+//#region src/tree/utils/logger.ts
+var TreeLogger = class {
+	constructor() {
+		this.isEnabled = true;
+		this.logs = [];
+		this.maxLogs = 1e3;
+	}
+	enable() {
+		this.isEnabled = true;
+		console.log("🌳 TreeComponent logging enabled");
+	}
+	disable() {
+		this.isEnabled = false;
+		console.log("🌳 TreeComponent logging disabled");
+	}
+	log(level, message, context, data) {
+		if (!this.isEnabled) return;
+		const entry = {
+			timestamp: new Date().toISOString(),
+			level,
+			message,
+			context,
+			data
+		};
+		this.logs.push(entry);
+		if (this.logs.length > this.maxLogs) this.logs.shift();
+		const prefix = this.getPrefix(level);
+		const contextStr = context ? this.formatContext(context) : "";
+		const fullMessage = `${prefix} ${message}${contextStr}`;
+		switch (level) {
+			case "debug":
+				console.debug(fullMessage, data || "");
+				break;
+			case "info":
+				console.info(fullMessage, data || "");
+				break;
+			case "warn":
+				console.warn(fullMessage, data || "");
+				break;
+			case "error":
+				console.error(fullMessage, data || "");
+				break;
+		}
+	}
+	getPrefix(level) {
+		const timestamp = new Date().toLocaleTimeString();
+		switch (level) {
+			case "debug": return `🔍 [${timestamp}] TreeComponent:`;
+			case "info": return `ℹ️  [${timestamp}] TreeComponent:`;
+			case "warn": return `⚠️  [${timestamp}] TreeComponent:`;
+			case "error": return `❌ [${timestamp}] TreeComponent:`;
+		}
+	}
+	formatContext(context) {
+		const parts = [];
+		if (context.component) parts.push(`[${context.component}]`);
+		if (context.nodeId) parts.push(`(node: ${context.nodeId})`);
+		if (context.operation) parts.push(`{${context.operation}}`);
+		Object.entries(context).forEach(([key, value]) => {
+			if (![
+				"component",
+				"nodeId",
+				"operation"
+			].includes(key)) parts.push(`${key}=${value}`);
+		});
+		return parts.length > 0 ? ` ${parts.join(" ")}` : "";
+	}
+	debug(message, context, data) {
+		this.log("debug", message, context, data);
+	}
+	info(message, context, data) {
+		this.log("info", message, context, data);
+	}
+	warn(message, context, data) {
+		this.log("warn", message, context, data);
+	}
+	error(message, context, data) {
+		this.log("error", message, context, data);
+	}
+	selection(operation, nodeId, data) {
+		this.debug(`Selection ${operation}`, {
+			component: "Selection",
+			nodeId,
+			operation
+		}, data);
+	}
+	expansion(operation, nodeId, data) {
+		this.debug(`Expansion ${operation}`, {
+			component: "Expansion",
+			nodeId,
+			operation
+		}, data);
+	}
+	interaction(operation, nodeId, data) {
+		this.debug(`User interaction: ${operation}`, {
+			component: "Interaction",
+			nodeId,
+			operation
+		}, data);
+	}
+	rendering(component, nodeId, data) {
+		this.debug(`Rendering`, {
+			component,
+			nodeId,
+			operation: "render"
+		}, data);
+	}
+	cssClasses(nodeId, classes, selected, focused) {
+		this.debug(`CSS classes applied`, {
+			component: "Styling",
+			nodeId,
+			selected: selected.toString(),
+			focused: focused.toString()
+		}, { classes });
+	}
+	providerCall(method, data) {
+		this.debug(`Provider method called`, {
+			component: "Provider",
+			operation: method
+		}, data);
+	}
+	stateChange(component, property, oldValue, newValue) {
+		this.debug(`State change`, {
+			component,
+			operation: "state-change",
+			property
+		}, {
+			oldValue,
+			newValue
+		});
+	}
+	getLogs(filter) {
+		if (!filter) return [...this.logs];
+		return this.logs.filter((log) => {
+			if (filter.level && log.level !== filter.level) return false;
+			if (filter.component && log.context?.component !== filter.component) return false;
+			return true;
+		});
+	}
+	clearLogs() {
+		this.logs = [];
+		console.log("🌳 TreeComponent logs cleared");
+	}
+	exportLogs() {
+		return JSON.stringify(this.logs, null, 2);
+	}
+};
+const logger = new TreeLogger();
+if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+	logger.enable();
+	window.treeLogger = logger;
+}
+
+//#endregion
+//#region src/tree/models/TreeModel.ts
+var TreeModel = class {
+	constructor(provider) {
+		this.provider = provider;
+		this.nodes = [];
+		this.nodeMap = observable.map();
+		this.isLoading = false;
+		this.errors = observable.map();
+		this.selectedNodes = observable.map();
+		this.focusedNode = null;
+		this.checkboxStates = observable.map();
+		this.expandedNodes = observable.map();
+		this.loadingNodes = observable.map();
+		this.contextMenuVisible = false;
+		this.contextMenuPosition = {
+			x: 0,
+			y: 0
+		};
+		this.contextMenuItems = [];
+		this.contextMenuNodes = [];
+		this.loadNodes = flow(function* (options) {
+			this.isLoading = true;
+			this.errors.clear();
+			try {
+				const result = yield this.provider.loadNodes(options);
+				this.nodes = result.nodes;
+				this.nodeMap.clear();
+				result.nodes.forEach((node) => this.nodeMap.set(node.id, node));
+			} catch (error) {
+				const errorKey = "loadNodes";
+				this.errors.set(errorKey, error instanceof Error ? error : new Error(String(error)));
+			} finally {
+				this.isLoading = false;
+			}
+		});
+		this.expandNode = flow(function* (node) {
+			logger.expansion("expandNode called", node.id, {
+				hasChildren: node.hasChildren,
+				currentlyExpanded: this.isNodeExpanded(node.id),
+				hasLoadedChildren: !!(node.children && node.children.length > 0)
+			});
+			if (!this.nodeMap.has(node.id)) {
+				logger.expansion("expandNode skipped - node not in tree", node.id);
+				return;
+			}
+			this.expandedNodes.set(node.id, true);
+			logger.expansion("expansion state set to true", node.id);
+			if (this.provider.onNodeExpansion) {
+				logger.providerCall("onNodeExpansion", {
+					nodeId: node.id,
+					expanded: true
+				});
+				this.provider.onNodeExpansion(node, true);
+			}
+			if (node.hasChildren && (!node.children || node.children.length === 0)) {
+				logger.expansion("loading children", node.id, { hasChildren: node.hasChildren });
+				this.loadingNodes.set(node.id, true);
+				try {
+					logger.providerCall("loadChildren", { nodeId: node.id });
+					const result = yield this.provider.loadChildren(node);
+					logger.expansion("children loaded successfully", node.id, { childCount: result.nodes.length });
+					const existingNode = this.nodeMap.get(node.id);
+					if (existingNode) {
+						existingNode.children = result.nodes;
+						result.nodes.forEach((child) => {
+							this.nodeMap.set(child.id, child);
+						});
+					}
+					node.children = result.nodes;
+					const updateNodeInTree = (nodes) => {
+						for (const treeNode of nodes) {
+							if (treeNode.id === node.id) treeNode.children = result.nodes;
+							if (treeNode.children) updateNodeInTree(treeNode.children);
+						}
+					};
+					updateNodeInTree(this.nodes);
+					if (this.provider.allowPartialSelection && this.provider.useCheckboxSelection) {
+						const parentCheckboxState = this.getCheckboxState(node.id);
+						logger.debug("Applying parent checkbox state to newly loaded children", {
+							component: "Checkbox",
+							nodeId: node.id,
+							operation: "children-loaded-inheritance"
+						}, {
+							parentState: parentCheckboxState,
+							childrenCount: result.nodes.length,
+							childIds: result.nodes.map((child) => child.id)
+						});
+						if (parentCheckboxState === "checked" || parentCheckboxState === "unchecked") result.nodes.forEach((child) => {
+							const previousChildState = this.checkboxStates.get(child.id);
+							this.checkboxStates.set(child.id, parentCheckboxState);
+							logger.debug("Child checkbox state inherited from parent", {
+								component: "Checkbox",
+								nodeId: child.id
+							}, {
+								parentNode: node.id,
+								parentState: parentCheckboxState,
+								previousChildState,
+								newChildState: parentCheckboxState
+							});
+							if (parentCheckboxState === "checked") {
+								this.selectedNodes.set(child.id, child);
+								logger.selection("child auto-selected via parent inheritance", child.id, { parentNode: node.id });
+							} else {
+								this.selectedNodes.delete(child.id);
+								logger.selection("child auto-deselected via parent inheritance", child.id, { parentNode: node.id });
+							}
+							if (child.children && child.children.length > 0) this.updateChildCheckboxes(child, parentCheckboxState);
+						});
+					}
+				} catch (error) {
+					const errorKey = `loadChildren-${node.id}`;
+					this.errors.set(errorKey, error instanceof Error ? error : new Error(String(error)));
+					this.expandedNodes.set(node.id, false);
+				} finally {
+					this.loadingNodes.delete(node.id);
+				}
+			}
+		});
+		makeAutoObservable(this, {});
+	}
+	/**
+	* Whether the tree has any nodes loaded
+	*/
+	get hasNodes() {
+		return this.nodes.length > 0;
+	}
+	/**
+	* Total count of nodes currently loaded
+	*/
+	get nodeCount() {
+		return this.nodes.length;
+	}
+	/**
+	* Whether data has been loaded (regardless of success/failure)
+	*/
+	get isLoaded() {
+		return !this.isLoading && (this.hasNodes || this.errors.size > 0);
+	}
+	/**
+	* Array of currently selected nodes (computed from selectedNodes map)
+	*/
+	get selectedNodesArray() {
+		return Array.from(this.selectedNodes.values());
+	}
+	/**
+	* Whether any nodes are currently selected
+	*/
+	get hasSelection() {
+		return this.selectedNodes.size > 0;
+	}
+	/**
+	* Check if a specific node is selected
+	*/
+	isNodeSelected(nodeId) {
+		return this.selectedNodes.has(nodeId);
+	}
+	/**
+	* Check if a specific node is expanded
+	*/
+	isNodeExpanded(nodeId) {
+		return this.expandedNodes.get(nodeId) ?? false;
+	}
+	/**
+	* Check if a specific node is loading
+	*/
+	isNodeLoading(nodeId) {
+		return this.loadingNodes.get(nodeId) ?? false;
+	}
+	/**
+	* Select a specific node
+	* @param node Node to select
+	*/
+	selectNode(node) {
+		const previousSelection = this.selectedNodesArray.map((n) => n.id);
+		logger.selection("selectNode called", node.id, {
+			previouslySelected: previousSelection,
+			isMultiSelect: this.provider.isMultiSelectEnabled
+		});
+		if (!this.provider.isMultiSelectEnabled) {
+			logger.selection("clearing selection (single-select mode)", node.id);
+			this.selectedNodes.clear();
+		}
+		this.selectedNodes.set(node.id, node);
+		logger.selection("node added to selection", node.id, { totalSelected: this.selectedNodes.size });
+		const previousFocus = this.focusedNode;
+		this.focusedNode = node.id;
+		logger.stateChange("TreeModel", "focusedNode", previousFocus, this.focusedNode);
+		if (this.provider.onSelectionChange) {
+			logger.providerCall("onSelectionChange", {
+				selectedCount: this.selectedNodesArray.length,
+				selectionType: this.provider.isMultiSelectEnabled ? "multi" : "single"
+			});
+			this.provider.onSelectionChange({
+				selectedNodes: this.selectedNodesArray,
+				previousSelection: [],
+				selectionType: this.provider.isMultiSelectEnabled ? "multi" : "single",
+				trigger: "click"
+			});
+		}
+	}
+	/**
+	* Deselect a specific node
+	* @param node Node to deselect
+	*/
+	deselectNode(node) {
+		logger.selection("deselectNode called", node.id, { wasSelected: this.selectedNodes.has(node.id) });
+		if (this.selectedNodes.has(node.id)) {
+			this.selectedNodes.delete(node.id);
+			logger.selection("node removed from selection", node.id, { remainingSelected: this.selectedNodes.size });
+			if (this.focusedNode === node.id) {
+				const previousFocus = this.focusedNode;
+				this.focusedNode = null;
+				logger.stateChange("TreeModel", "focusedNode", previousFocus, this.focusedNode);
+			}
+			if (this.provider.onSelectionChange) {
+				logger.providerCall("onSelectionChange", {
+					selectedCount: this.selectedNodesArray.length,
+					selectionType: this.provider.isMultiSelectEnabled ? "multi" : "single"
+				});
+				this.provider.onSelectionChange({
+					selectedNodes: this.selectedNodesArray,
+					previousSelection: [],
+					selectionType: this.provider.isMultiSelectEnabled ? "multi" : "single",
+					trigger: "click"
+				});
+			}
+		}
+	}
+	/**
+	* Clear all selected nodes
+	*/
+	clearSelection() {
+		if (this.selectedNodes.size > 0) {
+			this.selectedNodes.clear();
+			this.focusedNode = null;
+			if (this.provider.onSelectionChange) this.provider.onSelectionChange({
+				selectedNodes: [],
+				previousSelection: [],
+				selectionType: this.provider.isMultiSelectEnabled ? "multi" : "single",
+				trigger: "api"
+			});
+		}
+	}
+	/**
+	* Select all nodes (only if multi-select is enabled)
+	*/
+	selectAll() {
+		if (!this.provider.isMultiSelectEnabled) return;
+		this.nodes.forEach((node) => {
+			this.selectedNodes.set(node.id, node);
+		});
+		if (this.nodes.length > 0) {
+			const firstNode = this.nodes[0];
+			if (firstNode) this.focusedNode = firstNode.id;
+		}
+		if (this.provider.onSelectionChange) this.provider.onSelectionChange({
+			selectedNodes: this.selectedNodesArray,
+			previousSelection: [],
+			selectionType: "multi",
+			trigger: "api"
+		});
+	}
+	/**
+	* Get checkbox state for a specific node
+	*/
+	getCheckboxState(nodeId) {
+		return this.checkboxStates.get(nodeId) ?? "unchecked";
+	}
+	/**
+	* Handle checkbox click for a node
+	*/
+	handleCheckboxChange(node, newState) {
+		logger.interaction("handleCheckboxChange called", node.id, {
+			newState,
+			useCheckboxSelection: this.provider.useCheckboxSelection,
+			allowPartialSelection: this.provider.allowPartialSelection,
+			currentCheckboxState: this.checkboxStates.get(node.id),
+			isCurrentlySelected: this.selectedNodes.has(node.id)
+		});
+		if (!this.provider.useCheckboxSelection) {
+			logger.interaction("handleCheckboxChange aborted - useCheckboxSelection is false", node.id);
+			return;
+		}
+		const previousState = this.checkboxStates.get(node.id);
+		this.checkboxStates.set(node.id, newState);
+		logger.stateChange("TreeModel", "checkboxStates", previousState, newState);
+		const wasSelected = this.selectedNodes.has(node.id);
+		if (newState === "checked") {
+			this.selectedNodes.set(node.id, node);
+			logger.selection("node added via checkbox", node.id, {
+				wasSelected,
+				nowSelected: true
+			});
+		} else {
+			this.selectedNodes.delete(node.id);
+			logger.selection("node removed via checkbox", node.id, {
+				wasSelected,
+				nowSelected: false
+			});
+		}
+		if (this.provider.allowPartialSelection) {
+			logger.debug("Updating parent/child checkbox relationships", {
+				component: "Checkbox",
+				nodeId: node.id
+			});
+			this.updateChildCheckboxes(node, newState);
+			this.updateParentCheckboxes(node);
+		}
+		if (this.provider.onSelectionChange) {
+			const selectionInfo = {
+				selectedNodes: this.selectedNodesArray,
+				previousSelection: [],
+				selectionType: "multi",
+				trigger: "click"
+			};
+			logger.providerCall("onSelectionChange", {
+				selectedCount: selectionInfo.selectedNodes.length,
+				trigger: selectionInfo.trigger
+			});
+			this.provider.onSelectionChange(selectionInfo);
+		}
+	}
+	/**
+	* Update all child checkboxes when parent state changes
+	*/
+	updateChildCheckboxes(node, state) {
+		logger.debug("updateChildCheckboxes called", {
+			component: "Checkbox",
+			nodeId: node.id,
+			operation: "update-children"
+		}, {
+			parentState: state,
+			hasChildren: !!node.children,
+			childrenCount: node.children?.length || 0
+		});
+		if (!node.children || state === "indeterminate") {
+			logger.debug("updateChildCheckboxes skipped", {
+				component: "Checkbox",
+				nodeId: node.id
+			}, {
+				reason: !node.children ? "no-children" : "indeterminate-state",
+				hasChildren: !!node.children,
+				state
+			});
+			return;
+		}
+		node.children.forEach((child) => {
+			const previousState = this.checkboxStates.get(child.id);
+			this.checkboxStates.set(child.id, state);
+			logger.debug("updateChildCheckboxes - child updated", {
+				component: "Checkbox",
+				nodeId: child.id
+			}, {
+				previousState,
+				newState: state,
+				parentNode: node.id
+			});
+			if (state === "checked") {
+				this.selectedNodes.set(child.id, child);
+				logger.selection("child selected via parent", child.id, { parentNode: node.id });
+			} else {
+				this.selectedNodes.delete(child.id);
+				logger.selection("child deselected via parent", child.id, { parentNode: node.id });
+			}
+			this.updateChildCheckboxes(child, state);
+		});
+	}
+	/**
+	* Update parent checkbox state based on children
+	*/
+	updateParentCheckboxes(node) {
+		const parent = this.findParentNode(node.id);
+		logger.debug("updateParentCheckboxes called", {
+			component: "Checkbox",
+			nodeId: node.id,
+			operation: "update-parent"
+		}, {
+			parentFound: !!parent,
+			parentId: parent?.id
+		});
+		if (!parent || !parent.children) {
+			logger.debug("updateParentCheckboxes skipped", {
+				component: "Checkbox",
+				nodeId: node.id
+			}, { reason: !parent ? "no-parent" : "parent-no-children" });
+			return;
+		}
+		const childStates = parent.children.map((child) => this.getCheckboxState(child.id));
+		const checkedCount = childStates.filter((state) => state === "checked").length;
+		const uncheckedCount = childStates.filter((state) => state === "unchecked").length;
+		const indeterminateCount = childStates.filter((state) => state === "indeterminate").length;
+		logger.debug("updateParentCheckboxes - analyzing children", {
+			component: "Checkbox",
+			nodeId: parent.id
+		}, {
+			totalChildren: parent.children.length,
+			checkedCount,
+			uncheckedCount,
+			indeterminateCount,
+			childStates
+		});
+		let parentState;
+		if (checkedCount === parent.children.length) parentState = "checked";
+		else if (checkedCount === 0 && indeterminateCount === 0) parentState = "unchecked";
+		else parentState = "indeterminate";
+		const previousParentState = this.checkboxStates.get(parent.id);
+		this.checkboxStates.set(parent.id, parentState);
+		logger.debug("updateParentCheckboxes - parent state calculated", {
+			component: "Checkbox",
+			nodeId: parent.id
+		}, {
+			previousState: previousParentState,
+			newState: parentState,
+			logic: checkedCount === parent.children.length ? "all-checked" : checkedCount === 0 && indeterminateCount === 0 ? "none-checked" : "mixed"
+		});
+		if (parentState === "checked") {
+			this.selectedNodes.set(parent.id, parent);
+			logger.selection("parent selected via children", parent.id, { newState: parentState });
+		} else {
+			this.selectedNodes.delete(parent.id);
+			logger.selection("parent deselected via children", parent.id, { newState: parentState });
+		}
+		this.updateParentCheckboxes(parent);
+	}
+	/**
+	* Find parent node of a given node ID
+	*/
+	findParentNode(nodeId) {
+		const findParent = (nodes, targetId, parentNode = null) => {
+			for (const node of nodes) {
+				if (node.id === targetId) return parentNode;
+				if (node.children && node.children.length > 0) {
+					const parent = findParent(node.children, targetId, node);
+					if (parent) return parent;
+				}
+			}
+			return null;
+		};
+		return findParent(this.nodes, nodeId);
+	}
+	/**
+	* Set focus to a specific node
+	* @param nodeId ID of node to focus
+	*/
+	setFocus(nodeId) {
+		if (this.nodeMap.has(nodeId)) this.focusedNode = nodeId;
+	}
+	/**
+	* Move focus to next visible node
+	*/
+	focusNext() {
+		const flatNodes = this.getFlattenedVisibleNodes();
+		const currentIndex = flatNodes.findIndex((node) => node.id === this.focusedNode);
+		if (currentIndex >= 0 && currentIndex < flatNodes.length - 1) {
+			const nextNode = flatNodes[currentIndex + 1];
+			if (nextNode) {
+				this.focusedNode = nextNode.id;
+				return true;
+			}
+		}
+		return false;
+	}
+	/**
+	* Move focus to previous visible node
+	*/
+	focusPrevious() {
+		const flatNodes = this.getFlattenedVisibleNodes();
+		const currentIndex = flatNodes.findIndex((node) => node.id === this.focusedNode);
+		if (currentIndex > 0) {
+			const prevNode = flatNodes[currentIndex - 1];
+			if (prevNode) {
+				this.focusedNode = prevNode.id;
+				return true;
+			}
+		}
+		return false;
+	}
+	/**
+	* Move focus to first visible node
+	*/
+	focusFirst() {
+		const flatNodes = this.getFlattenedVisibleNodes();
+		if (flatNodes.length > 0) {
+			const firstNode = flatNodes[0];
+			if (firstNode) {
+				this.focusedNode = firstNode.id;
+				return true;
+			}
+		}
+		return false;
+	}
+	/**
+	* Move focus to last visible node
+	*/
+	focusLast() {
+		const flatNodes = this.getFlattenedVisibleNodes();
+		if (flatNodes.length > 0) {
+			const lastNode = flatNodes[flatNodes.length - 1];
+			if (lastNode) {
+				this.focusedNode = lastNode.id;
+				return true;
+			}
+		}
+		return false;
+	}
+	/**
+	* Get flattened list of all currently visible nodes
+	* @private
+	*/
+	getFlattenedVisibleNodes() {
+		const result = [];
+		const processNodes = (nodes) => {
+			for (const node of nodes) {
+				result.push(node);
+				if (this.isNodeExpanded(node.id) && node.children && node.children.length > 0) processNodes(node.children);
+			}
+		};
+		processNodes(this.nodes);
+		return result;
+	}
+	/**
+	* Collapse a specific node
+	* @param node Node to collapse
+	*/
+	collapseNode(node) {
+		logger.expansion("collapseNode called", node.id, { currentlyExpanded: this.isNodeExpanded(node.id) });
+		this.expandedNodes.set(node.id, false);
+		logger.expansion("expansion state set to false", node.id);
+		if (this.provider.onNodeExpansion) {
+			logger.providerCall("onNodeExpansion", {
+				nodeId: node.id,
+				expanded: false
+			});
+			this.provider.onNodeExpansion(node, false);
+		}
+	}
+	/**
+	* Toggle expansion state of a specific node
+	* @param node Node to toggle
+	*/
+	toggleExpansion(node) {
+		if (this.isNodeExpanded(node.id)) this.collapseNode(node);
+		else this.expandNode(node);
+	}
+	/**
+	* Show context menu for a specific node
+	* @param node Target node
+	* @param event Mouse event
+	*/
+	showContextMenu(node, event) {
+		const menuItems = this.provider.getNodeContextMenu?.(node) || [];
+		if (menuItems.length === 0) return;
+		this.contextMenuVisible = true;
+		this.contextMenuPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		this.contextMenuItems = menuItems;
+		this.contextMenuNodes = [node];
+	}
+	/**
+	* Show context menu for multiple selected nodes
+	* @param nodes Selected nodes
+	* @param event Mouse event
+	*/
+	showMultiNodeContextMenu(nodes, event) {
+		const menuItems = this.provider.getMultiNodeContextMenu?.(nodes) || [];
+		if (menuItems.length === 0) return;
+		this.contextMenuVisible = true;
+		this.contextMenuPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		this.contextMenuItems = menuItems;
+		this.contextMenuNodes = nodes;
+	}
+	/**
+	* Hide context menu
+	*/
+	hideContextMenu() {
+		this.contextMenuVisible = false;
+		this.contextMenuItems = [];
+		this.contextMenuNodes = [];
+	}
+	/**
+	* Handle context menu item click
+	* @param menuItem Clicked menu item
+	*/
+	handleContextMenuAction(menuItem) {
+		if (this.provider.onContextMenuAction) this.provider.onContextMenuAction(menuItem.id, this.contextMenuNodes);
+		this.hideContextMenu();
+	}
+};
+
+//#endregion
+//#region src/tree/components/TreeCheckbox.tsx
+/**
+* TreeCheckbox Component - 3-state checkbox for tree selection
+*/
+const TreeCheckbox = observer(({ state, onChange, disabled = false, className, ariaLabel, size = "md", nodeId = "unknown" }) => {
+	logger.rendering("TreeCheckbox", nodeId, {
+		state,
+		disabled,
+		size,
+		hasOnChange: !!onChange
+	});
+	const handleClick = (event) => {
+		event.stopPropagation();
+		logger.interaction("TreeCheckbox click", nodeId, {
+			currentState: state,
+			disabled,
+			eventType: "click"
+		});
+		if (disabled) {
+			logger.interaction("TreeCheckbox click ignored (disabled)", nodeId);
+			return;
+		}
+		const newState = state === "checked" ? "unchecked" : "checked";
+		logger.interaction("TreeCheckbox state change", nodeId, {
+			from: state,
+			to: newState,
+			trigger: "click"
+		});
+		onChange(newState);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			logger.interaction("TreeCheckbox keydown", nodeId, {
+				key: event.key,
+				currentState: state
+			});
+			handleClick(event);
+		}
+	};
+	const sizeClasses = {
+		sm: "w-3 h-3",
+		md: "w-4 h-4",
+		lg: "w-5 h-5"
+	};
+	const iconSizeClasses = {
+		sm: "w-2 h-2",
+		md: "w-3 h-3",
+		lg: "w-4 h-4"
+	};
+	const computedClasses = cn(
+		"flex items-center justify-center rounded border cursor-pointer transition-all",
+		"focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1",
+		sizeClasses[size],
+		// Base styles
+		"border-border bg-background",
+		// State-specific styles
+		state === "checked" && "bg-primary border-primary text-primary-foreground",
+		state === "indeterminate" && "bg-primary border-primary text-primary-foreground",
+		state === "unchecked" && "hover:border-primary/50",
+		// Disabled styles
+		disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+		className
+);
+	logger.cssClasses(`TreeCheckbox-${nodeId}`, computedClasses, state === "checked", false);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "checkbox",
+		"aria-checked": state === "indeterminate" ? "mixed" : state === "checked",
+		"aria-label": ariaLabel,
+		className: computedClasses,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		tabIndex: disabled ? -1 : 0,
+		children: [state === "checked" && /* @__PURE__ */ jsx(Check, { className: cn(iconSizeClasses[size], "stroke-[3]") }), state === "indeterminate" && /* @__PURE__ */ jsx(Minus, { className: cn(iconSizeClasses[size], "stroke-[3]") })]
+	});
+});
+
+//#endregion
+//#region src/tree/components/TreeNodeList.tsx
+const TreeInlineRename = ({ currentName, onCommit, onCancel }) => {
+	const [value, setValue] = useState(currentName);
+	const inputRef = useRef(null);
+	const mountTimeRef = useRef(Date.now());
+	const committedRef = useRef(false);
+	useEffect(() => {
+		mountTimeRef.current = Date.now();
+		const raf = requestAnimationFrame(() => {
+			const input = inputRef.current;
+			if (input) {
+				input.focus();
+				const dotIndex = currentName.lastIndexOf(".");
+				input.setSelectionRange(0, dotIndex > 0 ? dotIndex : currentName.length);
+			}
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [currentName]);
+	const commit = () => {
+		if (committedRef.current) return;
+		committedRef.current = true;
+		const trimmed = value.trim();
+		if (trimmed && trimmed !== currentName) onCommit(trimmed);
+		else onCancel();
+	};
+	const handleBlur = () => {
+		if (Date.now() - mountTimeRef.current < 200) return;
+		commit();
+	};
+	return /* @__PURE__ */ jsx("input", {
+		ref: inputRef,
+		value,
+		onChange: (e) => setValue(e.target.value),
+		onKeyDown: (e) => {
+			e.stopPropagation();
+			if (e.key === "Enter") {
+				e.preventDefault();
+				commit();
+			}
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onCancel();
+			}
+		},
+		onBlur: handleBlur,
+		onClick: (e) => e.stopPropagation(),
+		onDoubleClick: (e) => e.stopPropagation(),
+		className: "flex-1 bg-background border border-primary rounded px-1 py-0 text-[13px] outline-none min-w-0"
+	});
+};
+/**
+* TreeNodeList component renders a list of tree nodes with proper nesting and interaction
+*/
+const TreeNodeList = observer(({ nodes, treeModel, depth = 0, className }) => {
+	const fileBrowserCtx = useFileBrowserContext();
+	const renderNode = (node) => {
+		const isSelected = treeModel.isNodeSelected(node.id);
+		const isExpanded = treeModel.isNodeExpanded(node.id);
+		const isFocused = treeModel.focusedNode === node.id;
+		const isLoading = treeModel.isNodeLoading(node.id);
+		const isDirectory = node.type === "directory";
+		const hasChildren = node.hasChildren || node.children && node.children.length > 0;
+		const showCheckbox = treeModel.provider.useCheckboxSelection;
+		const [isHovered, setIsHovered] = useState(false);
+		const isRenaming = fileBrowserCtx?.renameState?.itemId === node.id && fileBrowserCtx?.renameState?.source === "tree";
+		const selectionTheme = treeModel.provider.getSelectionTheme?.() || DEFAULT_SELECTION_THEME;
+		const nodeClasses = cn(
+			// Base styles
+			"group flex items-center gap-2 py-1 px-2 text-[13px] cursor-default select-none transition-colors duration-150",
+			"focus:outline-none",
+			// Selection styling - must come before hover so selected state is visible
+			isSelected ? "bg-accent text-accent-foreground" : "hover:bg-muted/50",
+			// Focus styles
+			isFocused && !isSelected && "ring-1 ring-primary/50"
+);
+		const handleNodeClick = (event) => {
+			event.stopPropagation();
+			logger.interaction("TreeNode clicked", node.id, { name: node.name });
+			if (event.ctrlKey || event.metaKey) {
+				if (treeModel.provider.isMultiSelectEnabled) if (isSelected) treeModel.deselectNode(node);
+				else treeModel.selectNode(node);
+			} else if (!isSelected) treeModel.selectNode(node);
+		};
+		const handleExpandClick = (event) => {
+			event.stopPropagation();
+			logger.interaction("TreeNode expand/collapse clicked", node.id, { name: node.name });
+			if (hasChildren) treeModel.toggleExpansion(node);
+		};
+		const handleContextMenu = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			logger.interaction("TreeNode context menu", node.id, { name: node.name });
+			if (!isSelected && treeModel.selectedNodesArray.length <= 1) treeModel.selectNode(node);
+			const rect = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			const selectedNodes = treeModel.selectedNodesArray;
+			if (selectedNodes.length > 1 && isSelected) treeModel.showMultiNodeContextMenu(selectedNodes, event.nativeEvent);
+			else treeModel.showContextMenu(node, event.nativeEvent);
+		};
+		const handleMenuButtonClick = (event) => {
+			event.stopPropagation();
+			logger.interaction("TreeNode menu button clicked", node.id, { name: node.name });
+			const rect = event.currentTarget.getBoundingClientRect();
+			const fakeEvent = new MouseEvent("contextmenu", {
+				clientX: rect.right - 10,
+				clientY: rect.bottom,
+				bubbles: true,
+				cancelable: true
+			});
+			const selectedNodes = treeModel.selectedNodesArray;
+			if (selectedNodes.length > 1 && isSelected) treeModel.showMultiNodeContextMenu(selectedNodes, fakeEvent);
+			else treeModel.showContextMenu(node, fakeEvent);
+		};
+		const iconSize = "w-4 h-4";
+		const renderIcon = () => {
+			const customIcon = treeModel.provider.getNodeIcon?.(node);
+			if (customIcon) if (typeof customIcon === "string") return resolveIcon(customIcon, iconSize);
+			else {
+				const IconComponent = customIcon;
+				return /* @__PURE__ */ jsx(IconComponent, { className: iconSize });
+			}
+			if (isDirectory) return resolveIcon(isExpanded ? "folder-open" : "folder", iconSize);
+			else return resolveIcon("file", iconSize);
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: nodeClasses,
+				style: { paddingLeft: `${depth * 20 + 8}px` },
+				onClick: handleNodeClick,
+				onContextMenu: handleContextMenu,
+				onMouseEnter: () => setIsHovered(true),
+				onMouseLeave: () => setIsHovered(false),
+				tabIndex: isFocused ? 0 : -1,
+				role: "treeitem",
+				"aria-expanded": hasChildren ? isExpanded : void 0,
+				"aria-selected": isSelected,
+				"aria-level": depth + 1,
+				"aria-label": `${node.type === "directory" ? "Folder" : "File"}: ${node.name}`,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex-shrink-0 w-4 h-4",
+						children: hasChildren && /* @__PURE__ */ jsx("button", {
+							className: "w-4 h-4 flex items-center justify-center hover:bg-muted rounded-sm transition-colors",
+							onClick: handleExpandClick,
+							"aria-label": isExpanded ? "Collapse" : "Expand",
+							children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" })
+						})
+					}),
+					showCheckbox && /* @__PURE__ */ jsx(TreeCheckbox, {
+						state: treeModel.getCheckboxState(node.id),
+						onChange: (newState) => {
+							logger.interaction("TreeCheckbox changed", node.id, {
+								name: node.name,
+								newState
+							});
+							treeModel.handleCheckboxChange(node, newState);
+						},
+						nodeId: node.id
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex-shrink-0 w-4 h-4",
+						children: renderIcon()
+					}),
+					isRenaming && fileBrowserCtx ? /* @__PURE__ */ jsx(TreeInlineRename, {
+						currentName: fileBrowserCtx.renameState.currentName,
+						onCommit: fileBrowserCtx.onRenameCommit,
+						onCancel: fileBrowserCtx.onRenameCancel
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate",
+						children: node.name
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: cn(
+							"flex-shrink-0 w-6 h-6 flex items-center justify-center rounded hover:bg-muted/70 transition-colors cursor-pointer",
+							// Show on hover or when node is selected
+							"opacity-0 group-hover:opacity-100",
+							(isSelected || isHovered) && "opacity-100"
+),
+						onClick: handleMenuButtonClick,
+						"aria-label": "Show context menu",
+						children: /* @__PURE__ */ jsx(MoreVertical, { className: "w-4 h-4" })
+					})
+				]
+			}), isExpanded && hasChildren && node.children && /* @__PURE__ */ jsx(TreeNodeList, {
+				nodes: node.children,
+				treeModel,
+				depth: depth + 1,
+				className
+			})]
+		}, node.id);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full", className),
+		children: nodes.map(renderNode)
+	});
+});
+
+//#endregion
+//#region src/tree/components/TreeContextMenu.tsx
+/**
+* TreeContextMenu - Context menu component for tree nodes
+* 
+* Features:
+* - Renders context menu items with proper styling (no icons)
+* - Handles click outside to close
+* - Supports separators and disabled items
+* - Positioned absolutely at cursor position
+* - Keyboard navigation support
+*/
+const TreeContextMenu = observer(({ items, position, visible, onClose, onItemClick, className = "" }) => {
+	const menuRef = useRef(null);
+	useEffect(() => {
+		if (!visible) return;
+		const handleClickOutside = (event) => {
+			if (menuRef.current && !menuRef.current.contains(event.target)) onClose();
+		};
+		const handleEscape = (event) => {
+			if (event.key === "Escape") onClose();
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", handleEscape);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, [visible, onClose]);
+	const handleItemClick = (item, event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (item.disabled) return;
+		onItemClick(item);
+		onClose();
+	};
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: menuRef,
+		className: `
+        bg-popover text-popover-foreground rounded-md border p-1 shadow-md min-w-[160px]
+        fixed z-[100]
+        ${className}
+      `,
+		style: {
+			left: position.x,
+			top: position.y
+		},
+		role: "menu",
+		"aria-label": "Context menu",
+		children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: `
+              px-2 py-1.5 text-sm cursor-default hover:bg-accent hover:text-accent-foreground
+              flex items-center rounded-sm transition-colors duration-150
+              ${item.disabled ? "opacity-50 cursor-not-allowed" : ""}
+            `,
+			onClick: (e) => handleItemClick(item, e),
+			role: "menuitem",
+			tabIndex: item.disabled ? -1 : 0,
+			"aria-disabled": item.disabled,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "flex-1",
+				children: item.label
+			})
+		}), item.separator && index < items.length - 1 && /* @__PURE__ */ jsx("div", {
+			className: "h-px bg-border my-1",
+			role: "separator"
+		})] }, item.id))
+	});
+});
+TreeContextMenu.displayName = "TreeContextMenu";
+
+//#endregion
+//#region src/tree/components/Tree.tsx
+/**
+* Tree Component - Reactive tree display with loading states
+*
+* This is the main tree component that:
+* - Creates and manages TreeModel
+* - Shows loading/error states
+* - Renders tree nodes
+* - Follows MobX observer pattern for reactivity
+* - Handles keyboard navigation
+*/
+const Tree = observer(({ provider, model, loadOptions, className }) => {
+	const [internalModel] = useState(() => model || new TreeModel(provider));
+	const treeModel = model || internalModel;
+	const treeRef = useRef(null);
+	useEffect(() => {
+		if (!model) treeModel.loadNodes(loadOptions);
+	}, [
+		treeModel,
+		loadOptions,
+		model
+	]);
+	const getFlattenedNodes = () => {
+		const result = [];
+		const processNodes = (nodes) => {
+			for (const node of nodes) {
+				result.push(node);
+				if (treeModel.isNodeExpanded(node.id) && node.children && node.children.length > 0) processNodes(node.children);
+			}
+		};
+		processNodes(treeModel.nodes);
+		return result;
+	};
+	const navigateToNode = (targetIndex) => {
+		const flatNodes = getFlattenedNodes();
+		if (targetIndex >= 0 && targetIndex < flatNodes.length) {
+			const targetNode = flatNodes[targetIndex];
+			if (targetNode) {
+				treeModel.focusedNode = targetNode.id;
+				treeModel.selectNode(targetNode);
+			}
+		}
+	};
+	const getCurrentNodeIndex = () => {
+		if (!treeModel.focusedNode) return -1;
+		const flatNodes = getFlattenedNodes();
+		return flatNodes.findIndex((node) => node.id === treeModel.focusedNode);
+	};
+	const getParentNode = (nodeId) => {
+		const findParent = (nodes, targetId, parentNode = null) => {
+			for (const node of nodes) {
+				if (node.id === targetId) return parentNode;
+				if (node.children && node.children.length > 0) {
+					const parent = findParent(node.children, targetId, node);
+					if (parent) return parent;
+				}
+			}
+			return null;
+		};
+		return findParent(treeModel.nodes, nodeId);
+	};
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (!treeRef.current?.contains(document.activeElement) && !treeModel.focusedNode) return;
+			const currentIndex = getCurrentNodeIndex();
+			const flatNodes = getFlattenedNodes();
+			const currentNode = treeModel.focusedNode ? treeModel.nodeMap.get(treeModel.focusedNode) : null;
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					if (currentIndex < flatNodes.length - 1) navigateToNode(currentIndex + 1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					if (currentIndex > 0) navigateToNode(currentIndex - 1);
+					break;
+				case "ArrowRight":
+					event.preventDefault();
+					if (currentNode) {
+						if (currentNode.hasChildren || currentNode.children && currentNode.children.length > 0) {
+							if (!treeModel.isNodeExpanded(currentNode.id)) treeModel.expandNode(currentNode);
+							else if (currentNode.children && currentNode.children.length > 0) {
+								const firstChild = currentNode.children[0];
+								if (firstChild) {
+									treeModel.focusedNode = firstChild.id;
+									treeModel.selectNode(firstChild);
+								}
+							}
+						}
+					}
+					break;
+				case "ArrowLeft":
+					event.preventDefault();
+					if (currentNode) if (treeModel.isNodeExpanded(currentNode.id) && (currentNode.hasChildren || currentNode.children && currentNode.children.length > 0)) treeModel.collapseNode(currentNode);
+					else {
+						const parentNode = getParentNode(currentNode.id);
+						if (parentNode) {
+							treeModel.focusedNode = parentNode.id;
+							treeModel.selectNode(parentNode);
+						}
+					}
+					break;
+				case "Home":
+					event.preventDefault();
+					if (flatNodes.length > 0) navigateToNode(0);
+					break;
+				case "End":
+					event.preventDefault();
+					if (flatNodes.length > 0) navigateToNode(flatNodes.length - 1);
+					break;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					if (currentNode) {
+						if (currentNode.hasChildren || currentNode.children && currentNode.children.length > 0) treeModel.toggleExpansion(currentNode);
+					}
+					break;
+				case "a":
+					if ((event.ctrlKey || event.metaKey) && treeModel.provider.isMultiSelectEnabled) {
+						event.preventDefault();
+						treeModel.selectAll();
+					}
+					break;
+				case "Escape":
+					event.preventDefault();
+					treeModel.clearSelection();
+					treeModel.hideContextMenu();
+					break;
+				default: break;
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [treeModel]);
+	useEffect(() => {
+		if (!treeModel.focusedNode && treeModel.hasNodes && treeModel.nodes.length > 0) {
+			const firstNode = treeModel.nodes[0];
+			if (firstNode) treeModel.focusedNode = firstNode.id;
+		}
+	}, [
+		treeModel.hasNodes,
+		treeModel.nodes.length,
+		treeModel.focusedNode
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: treeRef,
+		className: `h-full overflow-hidden focus-within:outline-none ${className || ""}`,
+		tabIndex: 0,
+		role: "tree",
+		"aria-label": "File tree",
+		children: [
+			treeModel.isLoading && /* @__PURE__ */ jsx("div", {
+				className: "p-4 text-center text-muted-foreground",
+				role: "status",
+				"aria-live": "polite",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "inline-flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ jsx("span", { children: "Loading tree..." })]
+				})
+			}),
+			!treeModel.isLoading && treeModel.errors.size > 0 && /* @__PURE__ */ jsx("div", {
+				className: "p-4 text-red-600 bg-red-50 border-l-4 border-red-400",
+				role: "alert",
+				children: Array.from(treeModel.errors.entries()).map(([key, error]) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: "Error:"
+					}), /* @__PURE__ */ jsx("span", { children: error.message })]
+				}, key))
+			}),
+			!treeModel.isLoading && treeModel.errors.size === 0 && !treeModel.hasNodes && /* @__PURE__ */ jsx("div", {
+				className: "p-4 text-center text-muted-foreground",
+				role: "status",
+				children: /* @__PURE__ */ jsx("span", { children: "No items to display" })
+			}),
+			!treeModel.isLoading && treeModel.hasNodes && /* @__PURE__ */ jsx("div", {
+				className: "h-full overflow-auto",
+				children: /* @__PURE__ */ jsx(TreeNodeList, {
+					treeModel,
+					nodes: treeModel.nodes,
+					depth: 0
+				})
+			}),
+			/* @__PURE__ */ jsx(TreeContextMenu, {
+				items: treeModel.contextMenuItems,
+				position: treeModel.contextMenuPosition,
+				visible: treeModel.contextMenuVisible,
+				onClose: () => treeModel.hideContextMenu(),
+				onItemClick: (menuItem) => treeModel.handleContextMenuAction(menuItem)
+			})
+		]
+	});
+});
+
+//#endregion
+//#region src/tree/components/TreeTable.tsx
+/**
+* TreeTable Component - Table view of tree data
+*/
+const TreeTable = observer(({ treeModel, columns: propColumns, enableAnimations = true, className, enableExport = true, enableFiltering = false, enableSorting = true }) => {
+	const [sortColumn, setSortColumn] = useState(null);
+	const [sortDirection, setSortDirection] = useState("asc");
+	const [filters, setFilters] = useState({});
+	const defaultColumns = useMemo(() => [{
+		id: "name",
+		label: "Name",
+		dataKey: "name",
+		width: "100%",
+		sortable: true,
+		filterable: true,
+		isTreeColumn: true
+	}], []);
+	const columns = propColumns || defaultColumns;
+	const isHeaderVisible = columns.length > 1 || enableFiltering || enableExport;
+	const tableData = useMemo(() => {
+		const flattenNode = (node, level = 0) => {
+			const result = [{
+				node,
+				level
+			}];
+			if (treeModel.isNodeExpanded(node.id) && node.children) for (const child of node.children) result.push(...flattenNode(child, level + 1));
+			return result;
+		};
+		let data = [];
+		const rootNodes = treeModel.nodes;
+		for (const node of rootNodes) data.push(...flattenNode(node));
+		if (Object.values(filters).some((f) => f.trim())) data = data.filter(({ node }) => {
+			return Object.entries(filters).every(([columnKey, filterValue]) => {
+				if (!filterValue.trim()) return true;
+				const column = columns.find((c) => c.id === columnKey);
+				if (!column) return true;
+				let cellValue = "";
+				if (column.renderCell) {
+					const rendered = column.renderCell(node[column.dataKey], node);
+					cellValue = typeof rendered === "string" ? rendered : String(rendered || "");
+				} else if (column.formatValue) cellValue = column.formatValue(node[column.dataKey], node);
+				else cellValue = node[column.dataKey]?.toString() || "";
+				return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+			});
+		});
+		if (sortColumn) {
+			const column = columns.find((c) => c.id === sortColumn);
+			if (column) data.sort((a, b) => {
+				let aValue = "";
+				let bValue = "";
+				if (column.formatValue) {
+					aValue = column.formatValue(a.node[column.dataKey], a.node);
+					bValue = column.formatValue(b.node[column.dataKey], b.node);
+				} else {
+					aValue = a.node[column.dataKey]?.toString() || "";
+					bValue = b.node[column.dataKey]?.toString() || "";
+				}
+				const compareResult = aValue.localeCompare(bValue);
+				return sortDirection === "asc" ? compareResult : -compareResult;
+			});
+		}
+		return data;
+	}, [
+		treeModel.nodes,
+		sortColumn,
+		sortDirection,
+		filters,
+		columns,
+		treeModel
+	]);
+	const handleSort = useCallback((columnKey) => {
+		if (sortColumn === columnKey) setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+		else {
+			setSortColumn(columnKey);
+			setSortDirection("asc");
+		}
+	}, [sortColumn]);
+	const handleExport = useCallback(() => {
+		const csvContent = [columns.map((col) => col.label).join(","), ...tableData.map(({ node }) => columns.map((col) => {
+			let value = "";
+			if (col.formatValue) value = col.formatValue(node[col.dataKey], node);
+			else value = node[col.dataKey]?.toString() || "";
+			return `"${value.replace(/"/g, "\"\"")}"`;
+		}).join(","))].join("\n");
+		const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+		const link = document.createElement("a");
+		link.href = URL.createObjectURL(blob);
+		link.download = "tree-data.csv";
+		link.click();
+	}, [tableData, columns]);
+	const selectionTheme = treeModel.provider.getSelectionTheme?.() || DEFAULT_SELECTION_THEME;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col h-full", className),
+		children: [isHeaderVisible && /* @__PURE__ */ jsx("div", {
+			className: "flex-shrink-0 p-3 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2",
+					children: enableFiltering && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-muted-foreground" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm text-muted-foreground",
+								children: "Filter:"
+							}),
+							columns.filter((c) => c.filterable).map((column) => /* @__PURE__ */ jsx("input", {
+								type: "text",
+								placeholder: `Filter ${column.label}`,
+								value: filters[column.id] || "",
+								onChange: (e) => setFilters((prev) => ({
+									...prev,
+									[column.id]: e.target.value
+								})),
+								className: "px-2 py-1 text-sm border rounded-md w-32"
+							}, column.id))
+						]
+					})
+				}), enableExport && /* @__PURE__ */ jsxs("button", {
+					onClick: handleExport,
+					className: "flex items-center gap-2 px-3 py-1 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90",
+					children: [/* @__PURE__ */ jsx(Download, { className: "w-4 h-4" }), "Export CSV"]
+				})]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "min-w-full",
+				children: [columns.length > 1 && /* @__PURE__ */ jsx("div", {
+					className: "sticky top-0 bg-background border-b z-10",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex",
+						children: columns.map((column) => /* @__PURE__ */ jsxs("div", {
+							className: cn("px-2 py-2 text-sm font-medium text-muted-foreground", column.sortable && enableSorting && "cursor-pointer hover:text-foreground", "flex items-center gap-1"),
+							style: { width: column.width },
+							onClick: () => column.sortable && enableSorting && handleSort(column.id),
+							children: [/* @__PURE__ */ jsx("span", { children: column.label }), column.sortable && enableSorting && /* @__PURE__ */ jsx("div", {
+								className: "ml-auto",
+								children: sortColumn === column.id ? sortDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-50" })
+							})]
+						}, column.id))
+					})
+				}), /* @__PURE__ */ jsx("div", { children: tableData.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "p-8 text-center",
+					children: /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: Object.values(filters).some((f) => f.trim()) ? "No results found for current filters" : "No data available"
+					})
+				}) : tableData.map(({ node, level }) => {
+					const isSelected = treeModel.isNodeSelected(node.id);
+					const isFocused = treeModel.focusedNode === node.id;
+					const isExpanded = treeModel.isNodeExpanded(node.id);
+					const hasChildren = node.hasChildren || node.children && node.children.length > 0;
+					const useCheckboxes = treeModel.provider.useCheckboxSelection;
+					const customColorVars = getCustomColorVariables(selectionTheme);
+					return /* @__PURE__ */ jsx("div", {
+						className: cn("flex w-full cursor-pointer group", getSelectionClasses(selectionTheme, isSelected, isFocused, !!useCheckboxes), useCheckboxes && "select-none"),
+						style: customColorVars,
+						onClick: (event) => {
+							if (useCheckboxes) return;
+							const isMultiSelectKeyPressed = event.ctrlKey || event.metaKey;
+							if (treeModel.provider.isMultiSelectEnabled && isMultiSelectKeyPressed) if (isSelected) treeModel.deselectNode(node);
+							else treeModel.selectNode(node);
+							else if (treeModel.provider.isMultiSelectEnabled) {
+								treeModel.clearSelection();
+								treeModel.selectNode(node);
+							} else if (isSelected) treeModel.clearSelection();
+							else treeModel.selectNode(node);
+						},
+						onDoubleClick: () => hasChildren && treeModel.toggleExpansion(node),
+						children: columns.map((column, columnIndex) => {
+							let cellContent = "";
+							if (column.renderCell) cellContent = column.renderCell(node[column.dataKey], node);
+							else if (column.formatValue) cellContent = column.formatValue(node[column.dataKey], node);
+							else cellContent = node[column.dataKey]?.toString() || "";
+							if (column.isTreeColumn) return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center px-2 py-1 text-sm",
+								style: { width: column.width },
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										style: { width: level * 16 },
+										className: "flex-shrink-0"
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "flex-shrink-0 w-4 h-4 mr-1",
+										children: hasChildren && /* @__PURE__ */ jsx("button", {
+											onClick: (e) => {
+												e.stopPropagation();
+												treeModel.toggleExpansion(node);
+											},
+											className: "w-4 h-4 flex items-center justify-center transition-transform duration-200 hover:bg-accent/20",
+											children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" })
+										})
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "flex-1 truncate",
+										children: cellContent
+									})
+								]
+							}, column.id);
+							return /* @__PURE__ */ jsx("div", {
+								className: "px-2 py-1 text-sm truncate",
+								style: { width: column.width },
+								children: cellContent
+							}, column.id);
+						})
+					}, node.id);
+				}) })]
+			})
+		})]
+	});
+});
+
+//#endregion
+export { DEFAULT_SELECTION_THEME, SimpleTreeProvider, TestTreeProvider, Tree, TreeCheckbox, TreeContextMenu, TreeModel, TreeNodeList, TreeTable, getCustomColorVariables, getSelectionClasses, logger };
+//# sourceMappingURL=tree-Dd9Z0Aso.js.map