### Development Setup with Makefile

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README.md

Installs dependencies and starts the development server using the provided Makefile for consistency.

```bash
make setup      # or make install
make dev
```

--------------------------------

### Development Setup with npm

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README.md

Installs dependencies and starts the development server using standard npm commands.

```bash
npm install
npm run dev
```

--------------------------------

### Local Development Server Setup

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Install project dependencies and start the local development server. Access the application via http://localhost:17777.

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Visit http://localhost:17777
```

--------------------------------

### Basic Treeview Setup in Svelte

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README.md

Demonstrates the basic setup for the svelte-treeview component with sample data. Ensure the data structure matches the expected format for id, path, and display value members.

```svelte
<script lang="ts">
  import { Tree } from '@keenmate/svelte-treeview';

  const data = [
    { path: '1', name: 'Documents', type: 'folder' },
    { path: '1.1', name: 'Projects', type: 'folder' },
    { path: '1.1.1', name: 'Project A', type: 'folder' },
    { path: '1.1.2', name: 'Project B', type: 'folder' },
    { path: '2', name: 'Pictures', type: 'folder' },
    { path: '2.1', name: 'Vacation', type: 'folder' }
  ];
</script>

<Tree
  {data}
  idMember="path"
  pathMember="path"
  displayValueMember="name"
/>
```

--------------------------------

### Build Static Site for Production

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Install the static adapter and build the Svelte application for static hosting. The output will be in the 'build' directory.

```bash
# Install static adapter (if not already installed)
npm install --save-dev @sveltejs/adapter-static

# Build the static site
npm run build:showcase

# The built files will be in the 'build' directory
```

--------------------------------

### Install Svelte Treeview with yarn

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

Use this command to install the package using yarn. Ensure you have Node.js and yarn installed.

```bash
yarn add @keenmate/svelte-treeview
```

--------------------------------

### Install @keenmate/svelte-treeview

Source: https://github.com/keenmate/svelte-treeview/blob/prod/PUBLISHING.md

Use this command to add the svelte-treeview library to your project's dependencies.

```bash
npm install @keenmate/svelte-treeview
```

--------------------------------

### SvelteKit Integration Example

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

Example of how to import and use the svelte-treeview component within a SvelteKit project, including CSS import.

```svelte
// +page.svelte
<script>
  import { Tree } from '@keenmate/svelte-treeview';
  import '@keenmate/svelte-treeview/styles.css';
</script>
```

--------------------------------

### Install svelte-treeview with pnpm

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

Install the svelte-treeview package using pnpm. This is the first step before importing styles or using the component.

```bash
pnpm add @keenmate/svelte-treeview
```

--------------------------------

### Vite + Svelte Integration Example

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

Example of integrating the svelte-treeview component in a standard Vite + Svelte project, showing component import and global CSS import.

```svelte
// App.svelte
<script>
  import { Tree } from '@keenmate/svelte-treeview';
</script>

// main.js
import '@keenmate/svelte-treeview/styles.css';
```

--------------------------------

### Async beforeDropCallback Example

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Implement an asynchronous beforeDropCallback to perform checks before a node is dropped. This example uses an async function to check permissions before allowing the drop.

```javascript
beforeDropCallback={async (drop, drag, pos) => {
  const allowed = await checkPermission(drag.data);
  return allowed;
}}
```

--------------------------------

### Minimal Tree Setup

Source: https://context7.com/keenmate/svelte-treeview/llms.txt

Set up a basic tree view component with essential data properties. Use $state.raw() for large datasets to avoid performance issues.

```svelte
<script lang="ts">
  import { Tree } from '@keenmate/svelte-treeview';

  interface FileNode {
    id: string;
    path: string;
    name: string;
  }

  // IMPORTANT: Use $state.raw() for 1000+ items — $state() causes 5000x slowdown via deep proxies
  let data = $state.raw<FileNode[]>([
    { id: '1',     path: '1',     name: 'Documents' },
    { id: '1.1',   path: '1.1',   name: 'Projects' },
    { id: '1.1.1', path: '1.1.1', name: 'Project A' },
    { id: '1.1.2', path: '1.1.2', name: 'Project B' },
    { id: '2',     path: '2',     name: 'Pictures' },
    { id: '2.1',   path: '2.1',   name: 'Vacation' },
  ]);

  let selectedNode = $state(null);
</script>

<Tree
  {data}
  idMember="id"
  pathMember="path"
  displayValueMember="name"
  expandLevel={2}
  bind:selectedNode
  onNodeClicked={(node) => console.log('Clicked:', node.data?.name, 'path:', node.path)}
/>

{#if selectedNode}
  <p>Selected: {selectedNode.data?.name} (level {selectedNode.level})</p>
{/if}
```

--------------------------------

### Example Usage of ContextMenuItem Interface

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/typescript-types.txt

Provides an example of creating an array of `ContextMenuItem` objects to be used in a context menu. This demonstrates how to define menu items with icons, titles, and associated callbacks.

```typescript
function createMenu(node: LTreeNode<MyItem>): ContextMenuItem[] {
  return [
    {
      icon: '📂',
      title: 'Open',
      callback: () => openItem(node.data)
    },
    { isDivider: true },
    {
      icon: '🗑️',
      title: 'Delete',
      isDisabled: node.data?.isProtected,
      callback: () => deleteItem(node.data)
    }
  ];
}
```

--------------------------------

### State Persistence Example - TypeScript

Source: https://github.com/keenmate/svelte-treeview/blob/prod/TREE_MANIPULATION.md

A complete example demonstrating how to preserve and restore the expanded state of tree nodes across a full redraw using getExpandedPaths() and setExpandedPaths().

```typescript
let treeRef: Tree<MyData>;
let expandedPaths: string[] = [];

async function reloadFromDatabase() {
  // 1. Save current expanded state
  expandedPaths = treeRef.getExpandedPaths();
  console.log('Saved expanded state:', expandedPaths);

  // 2. Fetch fresh data from database
  const freshData = await fetchFromDatabase();

  // 3. Update tree data (triggers full redraw via insertArray)
  data = freshData;

  // 4. Wait for DOM update
  await tick();

  // 5. Restore expanded state
  treeRef.setExpandedPaths(expandedPaths);
  console.log('Restored expanded state');
}
```

--------------------------------

### Extract All Data Example - TypeScript

Source: https://github.com/keenmate/svelte-treeview/blob/prod/TREE_MANIPULATION.md

Demonstrates adding nodes and then extracting all data using getAllData() for saving.

```typescript
// Build tree structure
treeRef.addNode('', { id: 1, name: 'Root' });
treeRef.addNode('1', { id: 2, name: 'Child' });

// Extract for saving
const allData = treeRef.getAllData();
await saveToDatabase(allData);
```

--------------------------------

### Minimal svelte-treeview Example

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

A basic example demonstrating how to use the svelte-treeview component with a simple data array. Ensure the 'id', 'path', and 'displayValueMember' props are correctly set.

```svelte
<script lang="ts">
  import { Tree } from '@keenmate/svelte-treeview';

  const data = [
    { id: '1', path: '1', name: 'Documents' },
    { id: '1.1', path: '1.1', name: 'Projects' },
    { id: '1.1.1', path: '1.1.1', name: 'Project A' },
    { id: '2', path: '2', name: 'Pictures' }
  ];
</script>

<Tree
  {data}
  idMember="id"
  pathMember="path"
  displayValueMember="name"
/>
```

--------------------------------

### Organization Tree Setup

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

Set up the Tree component for displaying organizational structures. Use 'employeeId', 'orgPath', and 'fullName' members. Adjust 'expandLevel' for deeper initial expansion.

```svelte
<Tree
  {data}
  idMember="employeeId"
  pathMember="orgPath"
  displayValueMember="fullName"
  expandLevel={3}
/>
```

--------------------------------

### Search Results Navigation Logic

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/search-features.txt

Implement navigation through search results by binding `searchText`, using `searchNodes` to get results, and `scrollToPath` to focus on individual matches. This example includes logic for cycling through results and updating the UI.

```javascript
let searchText = $state('');
let results = $state([]);
let currentIndex = $state(0);
let treeRef;

$effect(() => {
  if (searchText) {
    results = treeRef.searchNodes(searchText);
    currentIndex = 0;
    if (results.length > 0) {
      goToResult(0);
    }
  }
});

async function goToResult(index) {
  currentIndex = index;
  await treeRef.scrollToPath(results[index].path, {
    expand: true,
    highlight: true,
    containerScroll: true
  });
}

function next() {
  const nextIndex = (currentIndex + 1) % results.length;
  goToResult(nextIndex);
}

function prev() {
  const prevIndex = (currentIndex - 1 + results.length) % results.length;
  goToResult(prevIndex);
}
```

```html
<input bind:value={searchText} />
<span>{currentIndex + 1} of {results.length}</span>
<button onclick={prev}>Prev</button>
<button onclick={next}>Next</button>
```

--------------------------------

### File Explorer Tree Setup

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

Configure the Tree component for a file explorer view. Ensure your data has 'id', 'path', and 'name' members. Set 'expandLevel' to control initial expansion.

```svelte
<Tree
  {data}
  idMember="id"
  pathMember="path"
  displayValueMember="name"
  expandLevel={1}
  treePathSeparator="/"
/>
```

--------------------------------

### New Item Workflow Example

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/tree-editing.txt

Demonstrates a workflow for adding a new sibling node based on a currently selected node. It retrieves the parent path of the selected node and uses `addNode` to create the new sibling.

```javascript
let treeRef;
let selectedNode = $state(null);

function addSibling() {
  if (!selectedNode) return;

  const parentPath = selectedNode.parentPath || '';
  const result = treeRef.addNode(parentPath, {
    id: crypto.randomUUID(),
    path: '',
    name: 'New Sibling',
    sortOrder: Date.now()
  });

  if (result.success) {
    // Select the new node
    selectedNode = result.node;
  }
}
```

--------------------------------

### Basic Drag and Drop Setup

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/drag-drop.txt

Enable drag and drop by setting the `dragDropMode` prop. The `onNodeDrop` callback handles the drop event, providing information about the dropped node, target node, position, and operation.

```javascript
function handleDrop(dropNode, draggedNode, position, event, operation) {
    console.log(`Dropped ${draggedNode.data.name}`);
    console.log(`Position: ${position}`);  // 'above', 'below', 'child'
    console.log(`Target: ${dropNode?.data.name}`);
    console.log(`Operation: ${operation}`);  // 'move' or 'copy'
  }
```

```html
<Tree
  {data}
  idMember="id"
  pathMember="path"
  dragOverNodeClass="ltree-dragover-glow"
  onNodeDrop={handleDrop}
/>
```

--------------------------------

### File Manager Drag-Drop Configuration

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/drag-drop.txt

Example configuration for a file manager scenario, allowing drops only above or below nodes of type 'file' and enabling self-drag-and-drop.

```svelte
<Tree
  dragDropMode="self"
  orderMember="sortOrder"
  getAllowedDropPositionsCallback={(node) =>
    node.data.type === 'file' ? ['above', 'below'] : undefined
  }
  onNodeDrop={handleDrop}
/>
```

--------------------------------

### Cross-Tree Drag and Drop Example

Source: https://context7.com/keenmate/svelte-treeview/llms.txt

Demonstrates transferring nodes between two separate trees using `treeId` identifiers and `dragDropMode='cross'` or `'both'`. Ensure `onNodeDrop` handlers are correctly implemented for both source and target trees.

```svelte
<script lang="ts">
  import { Tree } from '@keenmate/svelte-treeview';
  import type { LTreeNode, DropPosition } from '@keenmate/svelte-treeview';

  interface Item { id: string; path: string; name: string; sortOrder: number; }

  let available = $state.raw<Item[]>([
    { id: 'a1', path: '1', name: 'Widget A', sortOrder: 10 },
    { id: 'a2', path: '2', name: 'Widget B', sortOrder: 20 },
  ]);
  let selected = $state.raw<Item[]>([]);
  let nextId = 1;

  function handleSelectedDrop(
    dropNode: LTreeNode<Item> | null,
    draggedNode: LTreeNode<Item>,
    position: DropPosition
  ) {
    // Remove from available (cross-tree)
    available = available.filter(i => i.id !== draggedNode.data?.id);

    // Add to selected with a new path
    const newItem: Item = {
      ...draggedNode.data!,
      id: `sel-${nextId++}`,
      path: String(selected.length + 1),
      sortOrder: (selected.length + 1) * 10,
    };
    selected = [...selected, newItem];
  }

  function handleAvailableDrop(
    dropNode: LTreeNode<Item> | null,
    draggedNode: LTreeNode<Item>
  ) {
    // Move back to available
    selected   = selected.filter(i => i.id !== draggedNode.data?.id);
    available  = [...available, { ...draggedNode.data!, path: String(available.length + 1) }];
  }
</script>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px">
  <div>
    <h3>Available</h3>
    <Tree
      data={available}
      idMember="id" pathMember="path" displayValueMember="name"
      treeId="available"
      dragDropMode="cross"
      orderMember="sortOrder"
      onNodeDrop={handleAvailableDrop}
    />
  </div>
  <div>
    <h3>Selected</h3>
    <Tree
      data={selected}
      idMember="id" pathMember="path" displayValueMember="name"
      treeId="selected"
      dragDropMode="both"
      orderMember="sortOrder"
      onNodeDrop={handleSelectedDrop}
    />
  </div>
</div>

```

--------------------------------

### Callback Priority Example

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Demonstrates callback priority where a custom getDisplayValueCallback overrides the displayValueMember property. Use callbacks for dynamic behavior.

```html
<Tree
  displayValueMember="name"  // Ignored
  getDisplayValueCallback={(n) => n.data.title}  // Used
/>
```

--------------------------------

### Async Context Menu Callback Example

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Define an asynchronous callback for context menu items to perform actions like saving data. Ensure to close the menu after a successful operation.

```javascript
{
  title: 'Save',
  callback: async () => {
    await saveToServer();
    closeMenu();
  }
}
```

--------------------------------

### Basic CRUD Operations

Source: https://github.com/keenmate/svelte-treeview/blob/prod/TREE_MANIPULATION.md

Provides examples for performing basic Create, Read, Update, and Delete (CRUD) operations on tree nodes, as well as batch operations.

```APIDOC
## Basic CRUD Operations

### Description
Demonstrates how to perform fundamental tree manipulation tasks such as adding, updating, moving, and removing nodes. It also shows how to execute multiple changes in a single batch.

### Methods
- **`addNode(parentPath, data)`**: Adds a new node under the specified parent path.
- **`updateNode(path, data)`**: Updates an existing node at the given path.
- **`moveNode(draggedPath, targetPath, position)`**: Moves a node from its current path to a new location.
- **`removeNode(path, includeDescendants)`**: Removes a node and optionally its descendants.
- **`applyChanges(changes)`**: Executes an array of operations (create, update, delete) in a single batch.

### Example Usage
```typescript
let treeRef: Tree<MyData>;

// Add a new node
const addResult = treeRef.addNode('1', {
  id: 'new1',
  name: 'New Item',
  sortOrder: 15
});
if (addResult.success) {
  console.log('Created:', addResult.node?.path);
}

// Update a node
const updateResult = treeRef.updateNode('1.1', {
  name: 'Updated Name',
  sortOrder: 5
});

// Move a node
const moveResult = treeRef.moveNode('1.2', '2', 'child');

// Remove a node
const removeResult = treeRef.removeNode('1.3', true);

// Batch operations
const batchResult = treeRef.applyChanges([
  { operation: 'create', parentPath: '1', data: { id: 'n1', name: 'Item 1' } },
  { operation: 'update', path: '1.1', data: { name: 'Updated' } },
  { operation: 'delete', path: '2.1' }
]);
console.log(`${batchResult.successful} succeeded, ${batchResult.failed.length} failed`);
```
```

--------------------------------

### Complex Data Example with Callbacks

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/data-handling.txt

Configure the treeview for complex data structures like employee records by mapping members and providing custom callbacks for display and search values.

```html
<Tree
  data={employees}
  idMember="employeeId"
  pathMember="orgPath"
  displayValueMember="fullName"
  searchValueMember="email"
  getDisplayValueCallback={(node) =>
    `${node.data.fullName} - ${node.data.title}`
  }
  getSearchValueCallback={(node) =>
    `${node.data.fullName} ${node.data.email} ${node.data.department}`
}
/>
```

--------------------------------

### Cross-Tree Drag and Drop Setup

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/drag-drop.txt

Implement drag and drop between two separate tree components by providing distinct `treeId` props and handling the `onNodeDrop` event for each tree individually.

```javascript
let leftData = $state.raw([...]);
let rightData = $state.raw([...]);

function handleLeftDrop(dropNode, draggedNode, position, event, operation) {
  // Handle item coming from right tree
}
```

```javascript
function handleRightDrop(dropNode, draggedNode, position, event, operation) {
  // Handle item coming from left tree
}
```

```html
<Tree data={leftData} treeId="left" onNodeDrop={handleLeftDrop} />
<Tree data={rightData} treeId="right" onNodeDrop={handleRightDrop} />
```

--------------------------------

### Analytics Integration with Tree Events

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Integrate analytics tracking for user interactions like node clicks and drops. This example sends events to an analytics service with relevant data.

```html
<Tree
  onNodeClicked={(node) => {
    analytics.track('tree_click', {
      path: node.path,
      type: node.data.type
    });
  }}
  onNodeDrop={(drop, drag, pos) => {
    analytics.track('tree_drop', {
      from: drag.path,
      to: drop?.path,
      position: pos
    });
  }}
/>
```

--------------------------------

### Permission-Based Actions in Svelte

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/advanced-patterns.txt

Dynamically generate context menu items based on user permissions. This example shows how to conditionally add 'Edit', 'New Item', and 'Delete' options based on a 'permissions' object.

```svelte
<script>
  const permissions = {
    canEdit: true,
    canDelete: false,
    canCreate: true
  };

  function createContextMenu(node) {
    const items = [];

    items.push({
      icon: '📂',
      title: 'Open',
      callback: () => openItem(node)
    });

    if (permissions.canEdit) {
      items.push({
        icon: '✏️',
        title: 'Edit',
        callback: () => editItem(node)
      });
    }

    if (permissions.canCreate && node.data.type === 'folder') {
      items.push({
        icon: '➕',
        title: 'New Item',
        callback: () => createItem(node)
      });
    }

    if (permissions.canDelete) {
      items.push({ isDivider: true });
      items.push({
        icon: '🗑️',
        title: 'Delete',
        callback: () => deleteItem(node)
      });
    }

    return items;
  }
</script>
```

--------------------------------

### Build and Run Showcase with Manual Docker

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Manually build a Docker image for the showcase and run it as a container. Access it via http://localhost:8080.

```bash
docker build -t svelte-treeview-showcase .

# Run the container
docker run -d -p 8080:80 --name treeview-showcase svelte-treeview-showcase

# Visit http://localhost:8080
```

--------------------------------

### Deploy to Azure Container Instances

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Build a Docker image and push it to Azure Container Registry, then create a container instance using the pushed image.

```bash
# Build and push to Azure Container Registry
az acr build --registry myregistry --image svelte-treeview .
az container create --resource-group myResourceGroup --name svelte-treeview --image myregistry.azurecr.io/svelte-treeview:latest
```

--------------------------------

### Run Showcase with Docker Compose

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Use Docker Compose to build and run the showcase website in detached mode. Access it via http://localhost:8080.

```bash
docker-compose up --build -d

# Visit http://localhost:8080
```

--------------------------------

### Publishing Commands for @keenmate/svelte-treeview

Source: https://github.com/keenmate/svelte-treeview/blob/prod/PUBLISHING.md

These commands are used to build, test, and publish the library to npm. Ensure you have the correct version and access rights before publishing.

```bash
# Build the library
npm run build

# Check package contents
npm pack --dry-run

# Test package locally
npm link

# Publish to npm (when ready)
npm publish --access public
```

--------------------------------

### Initialization Callback

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Callback for initializing the index.

```APIDOC
## initializeIndexCallback

### Description
Callback for initializing the index.

### Method
() => Index
```

--------------------------------

### Get Display Value Callback

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Dynamically computes the text displayed for a tree node.

```APIDOC
## getDisplayValueCallback

### Description
Callback function to compute the display text for a given tree node dynamically.

### Parameters
- **node** (LTreeNode<T>) - The tree node for which to compute the display value.

### Return Value
- `string`: The computed display text for the node.

### Example
```javascript
<Tree
  getDisplayValueCallback={(node) => {
    const item = node.data;
    return `${item.firstName} ${item.lastName}`;
  }}
/>

<Tree
  getDisplayValueCallback={(node) => {
    const item = node.data;
    const count = item.children?.length || 0;
    const suffix = count > 0 ? ` (${count})` : '';
    return `${item.name}${suffix}`;
  }}
/>
```
```

--------------------------------

### Get Search Value Callback

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Controls which text content is indexed for searching within the tree.

```APIDOC
## getSearchValueCallback

### Description
Callback function to determine the text content that should be indexed for search purposes for a given node.

### Parameters
- **node** (LTreeNode<T>) - The tree node for which to compute the search value.

### Return Value
- `string`: The text content to be indexed for search.

### Example
```javascript
<Tree
  getSearchValueCallback={(node) => {
    const item = node.data;
    return `${item.name} ${item.email} ${item.tags.join(' ')}`;
  }}
/>
```
```

--------------------------------

### Save Expanded State - TypeScript

Source: https://github.com/keenmate/svelte-treeview/blob/prod/TREE_MANIPULATION.md

Example of calling getExpandedPaths() to capture the current expanded state of the tree.

```typescript
// Before updating data
const expandedPaths = treeRef.getExpandedPaths();
console.log('Expanded:', expandedPaths);
// ['1', '1.2', '2', '2.1.3']
```

--------------------------------

### Initialize Index Callback

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Allows custom configuration of the search index.

```APIDOC
## initializeIndexCallback

### Description
Callback function to provide a custom FlexSearch index instance for search functionality.

### Return Value
- `Index`: A configured FlexSearch Index instance.

### Example
```javascript
import { Index } from 'flexsearch';

<Tree
  initializeIndexCallback={() => {
    return new Index({
      tokenize: 'forward',
      resolution: 9,
      cache: true
    });
  }}
/>
```
```

--------------------------------

### Statistics Type Definition

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/typescript-types.txt

An example of the `Statistics` interface provided by the tree component, detailing available statistical properties.

```typescript
interface Statistics {
  nodeCount: number;
  maxLevel: number;
  filteredNodeCount: number;
  isIndexing: boolean;
  pendingIndexCount: number;
}

const stats: Statistics = treeRef.statistics;
```

--------------------------------

### Run Docker Container with Custom Nginx Config

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Run the showcase Docker container, mapping a custom Nginx configuration file to override default settings. This allows for custom server configurations.

```bash
docker run -d -p 8080:80 \
  -v ./custom-nginx.conf:/etc/nginx/conf.d/default.conf \
  svelte-treeview-showcase
```

--------------------------------

### Restore Expanded State - TypeScript

Source: https://github.com/keenmate/svelte-treeview/blob/prod/TREE_MANIPULATION.md

Example of calling setExpandedPaths() to restore the previously saved expanded state after data has been updated and the DOM has ticked.

```typescript
// After data update and tick()
await tick();
treeRef.setExpandedPaths(expandedPaths);
```

--------------------------------

### Disabling Context Menu Items

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/context-menu.txt

Conditionally disable menu items based on application state. For example, disable 'Paste' if the clipboard is empty.

```javascript
{
  title: 'Paste',
  isDisabled: clipboard.isEmpty(),
  callback: () => paste()
}
```

```javascript
{
  title: 'Delete',
  isDisabled: node.data.isReadOnly,
  callback: () => deleteItem()
}
```

--------------------------------

### Move Node Up

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/tree-editing.txt

Implement a 'move up' functionality by getting the node's siblings, finding its index, and then using `moveNode` to reposition it above the preceding sibling.

```javascript
function moveUp(nodePath) {
  const siblings = treeRef.getSiblings(nodePath);
  const index = siblings.findIndex(s => s.path === nodePath);

  if (index > 0) {
    treeRef.moveNode(nodePath, siblings[index - 1].path, 'above');
  }
}
```

--------------------------------

### Deploy to Google Cloud Run

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Submit a container build to Google Cloud and deploy it to Cloud Run. This command builds the image and then deploys it as a managed service.

```bash
# Build and deploy to Cloud Run
gcloud builds submit --tag gcr.io/your-project/svelte-treeview
gcloud run deploy --image gcr.io/your-project/svelte-treeview --platform managed
```

--------------------------------

### Get Expanded Paths - TypeScript

Source: https://github.com/keenmate/svelte-treeview/blob/prod/TREE_MANIPULATION.md

Retrieves an array of paths for all currently expanded nodes. Use this to save the expanded state before a full tree redraw.

```typescript
getExpandedPaths(): string[]
```

--------------------------------

### Configure Progressive Rendering

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/performance.txt

Implement progressive rendering to prevent UI freezes during large tree loads by rendering nodes in batches. Adjust initialBatchSize and maxBatchSize to control the rendering flow.

```html
<Tree
  progressiveRender={true}    <!-- Default -->
  initialBatchSize={20}       <!-- First batch (instant) -->
  maxBatchSize={500}          <!-- Maximum batch size -->
/>
```

--------------------------------

### Example Usage of InsertArrayResult

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/typescript-types.txt

Shows how to handle the `InsertArrayResult` type, logging the number of successful and failed insertions. This is useful for providing feedback after bulk data operations.

```typescript
let insertResult: InsertArrayResult<MyItem> | undefined = $state();

$effect(() => {
  if (insertResult) {
    console.log(`${insertResult.successful} succeeded`);
    console.log(`${insertResult.failed.length} failed`);
  }
});
```

--------------------------------

### Customizing Scroll Highlight

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/styling-theming.txt

Apply custom styles to highlight nodes during scrolling using `scrollHighlightClass` and `scrollHighlightTimeout`. This example uses a CSS animation for a pulsing effect.

```svelte
<Tree
  scrollHighlightClass="ltree-scroll-highlight"
  scrollHighlightTimeout={4000}
/>
```

```css
.my-highlight {
  animation: pulse 0.5s ease-in-out 3;
}

@keyframes pulse {
  0%, 100% { background: transparent; }
  50% { background: #fef08a; }
}
```

```svelte
<Tree scrollHighlightClass="my-highlight" />
```

--------------------------------

### Deploy to AWS ECR and Cloud

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Build and tag a Docker image for AWS ECR, then push it. This prepares the image for deployment on AWS services like ECS or Fargate.

```bash
# Build and tag for AWS ECR
docker build -t your-account.dkr.ecr.region.amazonaws.com/svelte-treeview:latest .

# Push to ECR
aws ecr get-login-password --region region | docker login --username AWS --password-stdin your-account.dkr.ecr.region.amazonaws.com
docker push your-account.dkr.ecr.region.amazonaws.com/svelte-treeview:latest
```

--------------------------------

### Dynamic Component and Style Import for Code Splitting

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/import-patterns.txt

Load the Tree component and its styles dynamically using `import()` within `onMount` for code splitting, improving initial load performance.

```svelte
<script>
  import { onMount } from 'svelte';

  let Tree;

  onMount(async () => {
    const module = await import('@keenmate/svelte-treeview');
    Tree = module.Tree;

    // Import styles dynamically
    await import('@keenmate/svelte-treeview/styles.css');
  });
</script>

{#if Tree}
  <svelte:component this={Tree} {data} ... />
{/if}
```

--------------------------------

### Get All Node Data - TypeScript

Source: https://github.com/keenmate/svelte-treeview/blob/prod/TREE_MANIPULATION.md

Retrieves a flat array containing all node data objects in the tree. Useful for extracting the entire tree structure for saving.

```typescript
getAllData(): T[]
```

--------------------------------

### Configure Async Search Indexing

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/performance.txt

Utilize async search indexing with requestIdleCallback to keep the tree responsive during indexing operations. Configure indexerBatchSize and indexerTimeout for fine-grained control.

```html
<Tree
  shouldUseInternalSearchIndex={true}
  indexerBatchSize={25}   <!-- Nodes per idle callback -->
  indexerTimeout={50}     <!-- Max wait before forcing -->
/>
```

--------------------------------

### Preventing Specific Drops with beforeDropCallback

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/events-callbacks.txt

Use the beforeDropCallback to implement custom drop validation logic. This example prevents dropping a folder into a file, providing user feedback.

```html
<Tree
  beforeDropCallback={(drop, drag) => {
    // Prevent dropping folders into files
    if (drag.data.type === 'folder' && drop?.data.type === 'file') {
      showError('Cannot drop folder into file');
      return false;
    }
    return true;
  }}
/>
```

--------------------------------

### Overriding CSS Variables for Theming

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/styling-theming.txt

Customize the treeview's appearance by overriding CSS variables within your own CSS or SCSS. This example shows indentation and color overrides.

```css
:root {
  /* Indentation */
  --tree-node-indent-per-level: 0.5rem;

  /* Colors */
  --ltree-primary: #0d6efd;
  --ltree-primary-rgb: 13, 110, 253;
  --ltree-success: #198754;
  --ltree-success-rgb: 25, 135, 84;
  --ltree-danger: #dc3545;
  --ltree-danger-rgb: 220, 53, 69;
  --ltree-light: #f8f9fa;
  --ltree-border: #dee2e6;
  --ltree-body-color: #212529;

  /* Touch ghost */
  --tree-ghost-bg: rgba(59, 130, 246, 0.9);
  --tree-ghost-color: white;
}
```

--------------------------------

### Dynamic Context Menus with Callback

Source: https://context7.com/keenmate/svelte-treeview/llms.txt

Implement dynamic context menus by providing a callback function. This function receives the node data and a close menu callback, allowing for programmatic menu control and conditional item display.

```svelte
<script lang="ts">
  import { Tree } from '@keenmate/svelte-treeview';
  import type { ContextMenuItem, LTreeNode } from '@keenmate/svelte-treeview';

  interface FSItem { id: string; path: string; name: string; type: 'folder' | 'file'; isSystem?: boolean; }

  let data = $state.raw<FSItem[]>([
    { id: '1',   path: '1',   name: 'src',      type: 'folder' },
    { id: '1.1', path: '1.1', name: 'main.ts',  type: 'file' },
    { id: '2',   path: '2',   name: 'System',   type: 'folder', isSystem: true },
  ]);

  function buildContextMenu(
    node: LTreeNode<FSItem>,
    closeMenu: () => void
  ): ContextMenuItem[] {
    const items: ContextMenuItem[] = [
      {
        icon: '📂',
        title: 'Open',
        callback: () => { console.log('Opening', node.data?.name); closeMenu(); }
      }
    ];

    if (node.data?.type === 'folder') {
      items.push(
        { icon: '📄', title: 'New File',   callback: () => console.log('new file in', node.path) },
        { icon: '📁', title: 'New Folder', callback: () => console.log('new folder in', node.path) }
      );
    }

    items.push({ isDivider: true });

    items.push({
      icon: '✏️',
      title: 'Rename',
      callback: async () => {
        const newName = prompt('New name:', node.data?.name);
        if (newName) {
          // update data...
          closeMenu();
        }
      }
    });

    items.push({
      icon: '🗑️',
      title: 'Delete',
      className: 'text-danger',
      isDisabled: node.data?.isSystem,
      callback: () => {
        if (confirm(`Delete ${node.data?.name}?`) {
          console.log('deleting', node.path);
          closeMenu();
        }
      }
    });

    return items;
  }
</script>

<Tree
  {data}
  idMember="id"
  pathMember="path"
  displayValueMember="name"
  contextMenuCallback={buildContextMenu}
  contextMenuXOffset={8}
  contextMenuYOffset={0}
/>
```

--------------------------------

### Programmatic Menu Closing with Callback

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/context-menu.txt

The `closeMenuCallback` function provided to the context menu callback can be used to close the menu programmatically, for example, after an async operation completes successfully.

```javascript
function createContextMenu(node, closeMenuCallback) {
  return [
    {
      title: 'Action',
      callback: async () => {
        const success = await doSomething();
        if (success) {
          closeMenuCallback();  // Close only on success
        }
      }
    }
  ];
}

<Tree contextMenuCallback={createContextMenu} />
```

--------------------------------

### File Explorer Context Menu

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/context-menu.txt

Create a context menu for file explorer nodes. Includes options for creating new files/folders, renaming, copying paths, and deleting.

```javascript
function createMenu(node) {
  const items = [];

  if (node.data.type === 'folder') {
    items.push(
      { icon: '📄', title: 'New File', callback: () => newFile(node) },
      { icon: '📁', title: 'New Folder', callback: () => newFolder(node) }
    );
  }

  items.push(
    { isDivider: true },
    { icon: '✏️', title: 'Rename', callback: () => rename(node) },
    { icon: '📋', title: 'Copy Path', callback: () => copyPath(node) },
    { isDivider: true },
    {
      icon: '🗑️',
      title: 'Delete',
      isDisabled: node.data.isSystem,
      callback: () => deleteItem(node)
    }
  );

  return items;
}
```

--------------------------------

### Get Children of a Node

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/tree-editing.txt

Fetch an array of direct children for a given node path using the `getChildren` method. The length of the returned array indicates the number of children.

```javascript
const children = treeRef.getChildren('1.2');
console.log('Children count:', children.length);
```

--------------------------------

### Implementing Undo/Redo Functionality

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/advanced-patterns.txt

Create an undo/redo system by maintaining a history of operations and their corresponding undo actions. The `execute` function manages the history stack and index, clearing the redo stack on new operations.

```svelte
<script>
  let history = $state([]);
  let historyIndex = $state(-1);

  function execute(operation, undoOperation) {
    operation();

    // Clear redo stack
    history = history.slice(0, historyIndex + 1);
    history = [...history, { redo: operation, undo: undoOperation }];
    historyIndex = history.length - 1;
  }

  function undo() {
    if (historyIndex >= 0) {
      history[historyIndex].undo();
      historyIndex--;
    }
  }

  function redo() {
    if (historyIndex < history.length - 1) {
      historyIndex++;
      history[historyIndex].redo();
    }
  }

  // Example: tracked add
  function addNode(parentPath, nodeData) {
    let addedPath;

    execute(
      () => {
        const result = treeRef.addNode(parentPath, nodeData);
        addedPath = result.node?.path;
      },
      () => {
        if (addedPath) treeRef.removeNode(addedPath);
      }
    );
  }
</script>
```

--------------------------------

### Custom Empty State Message

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/basic-setup.txt

Provide a custom message or content when the tree contains no data using the 'noDataFound' snippet. This is useful for guiding users when the tree is empty.

```svelte
<Tree {data} ...>
  {#snippet noDataFound()}
    <div class="empty-state">
      <p>No items found</p>
      <button>Add First Item</button>
    </div>
  {/snippet}
</Tree>
```

--------------------------------

### Indexer Configuration Options

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/search-features.txt

Adjust `indexerBatchSize` and `indexerTimeout` to fine-tune the performance of asynchronous search indexing. Lower batch sizes and timeouts can improve UI responsiveness at the cost of slower indexing.

```html
<Tree
  indexerBatchSize={25}   <!-- Nodes per batch (default: 25) -->
  indexerTimeout={50}     <!-- Max wait time ms (default: 50) -->
/>
```

--------------------------------

### Configure Highlight Classes for Svelte Treeview

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README.md

Customize node highlight appearance using `scrollHighlightClass` and `scrollHighlightTimeout` props. Examples show default, arrow, and custom highlight configurations.

```svelte
<Tree
  {data}
  idMember="path"
  pathMember="path"
  scrollHighlightClass="ltree-scroll-highlight"
  scrollHighlightTimeout={5000}
/>
```

```svelte
<Tree
  {data}
  idMember="path"
  pathMember="path"
  scrollHighlightClass="ltree-scroll-highlight-arrow"
  scrollHighlightTimeout={3000}
/>
```

```svelte
<Tree
  {data}
  idMember="path"
  pathMember="path"
  scrollHighlightClass="my-custom-highlight"
  scrollHighlightTimeout={2000}
/>
```

--------------------------------

### External Virtualization with Svelte Virtual List

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/advanced-patterns.txt

For very large trees, implement external virtualization by flattening the visible nodes and using a virtual list component. This requires manually managing the flattened node structure.

```svelte
<script>
  import { VirtualList } from 'svelte-virtual-list';

  let flatNodes = $derived(getFlatVisibleNodes(treeData));

  function getFlatVisibleNodes(data) {
    // Flatten tree respecting expanded state
    const result = [];
    function traverse(nodes, level) {
      for (const node of nodes) {
        result.push({ ...node, level });
        if (node.isExpanded && node.children) {
          traverse(node.children, level + 1);
        }
      }
    }
    traverse(data, 0);
    return result;
  }
</script>

<VirtualList items={flatNodes} let:item>
  <div style="padding-left: {item.level * 20}px">
    {item.name}
  </div>
</VirtualList>
```

--------------------------------

### Basic Context Menu Items

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/context-menu.txt

Define context menu items with titles and callbacks. Use `isDivider` to group actions.

```javascript
[
  { title: 'Cut', callback: () => cut() },
  { title: 'Copy', callback: () => copy() },
  { title: 'Paste', callback: () => paste() },
  { isDivider: true },  // <-- Divider here
  { title: 'Delete', callback: () => del() }
]
```

--------------------------------

### Update Showcase with Docker Compose

Source: https://github.com/keenmate/svelte-treeview/blob/prod/README-DEPLOYMENT.md

Pull the latest changes from the repository and then rebuild and restart the showcase using Docker Compose. This ensures you are running the most recent version.

```bash
# Pull latest changes
git pull

# Rebuild and restart
docker-compose up --build -d
```

--------------------------------

### Use $state.raw() for Large Datasets

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/performance.txt

For datasets exceeding 1000 items, use $state.raw() instead of $state() to avoid performance overhead associated with reactivity tracking.

```javascript
let data = $state.raw<Item[]>([]);
```

--------------------------------

### Get Siblings of a Node

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/tree-editing.txt

Obtain an array of all siblings for a specified node path, including the node itself, using `getSiblings`. This is useful for determining a node's position among its peers.

```javascript
const siblings = treeRef.getSiblings('1.2.3');
const index = siblings.findIndex(s => s.path === '1.2.3');
```

--------------------------------

### Get Node by Path

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/tree-editing.txt

Retrieve a specific node from the tree using its unique path string with the `getNodeByPath` method. Access the node's data via the `.data` property.

```javascript
const node = treeRef.getNodeByPath('1.2.3');
console.log(node?.data.name);
```

--------------------------------

### Enable Progressive Rendering

Source: https://github.com/keenmate/svelte-treeview/blob/prod/ai/performance.txt

Enable progressive rendering to improve the UI responsiveness during the initial load of large trees. This is recommended for all use cases.

```html
<Tree progressiveRender={true} />
```