@djangocfg/ui-tools 2.1.316 → 2.1.317

package/dist/types-Cclwv4Hl.d.ts

@@ -0,0 +1,198 @@
+import { CSSProperties, ReactNode } from 'react';
+
+type TreeDensity = 'compact' | 'cozy' | 'comfortable';
+type TreeAccentIntensity = 'subtle' | 'default' | 'strong';
+type TreeRadius = 'none' | 'sm' | 'md';
+/**
+ * Cosmetic configuration. Every field is optional; missing values fall
+ * back to the `cozy` preset (a comfortable VSCode-Explorer-like density).
+ *
+ * Customize the look without re-implementing slots.
+ */
+interface TreeAppearance {
+    /** Built-in size preset. Default: `'cozy'`. */
+    density?: TreeDensity;
+    /** Override row height in px (wins over density). */
+    rowHeight?: number;
+    /** Override icon + chevron size in px (wins over density). */
+    iconSize?: number;
+    /** Lucide stroke width for icon + chevron. Default: 1.5. */
+    iconStrokeWidth?: number;
+    /** Override label font size in px (wins over density). */
+    fontSize?: number;
+    /** Pixels between chevron / icon / label. Default depends on density. */
+    gap?: number;
+    /** Pixels between nesting levels. Default: 16. */
+    indent?: number;
+    /** Hover / selected highlight intensity. Default: `'default'`. */
+    accent?: TreeAccentIntensity;
+    /** Row corner radius. Default: `'sm'`. */
+    radius?: TreeRadius;
+    /** Indent-guide line opacity (0..1). Default: 0.4. */
+    indentGuideOpacity?: number;
+    /**
+     * Show a 2px primary-tinted bar on the left of the selected row.
+     * Mimics the VSCode active-tab indicator. Default: `true`.
+     */
+    showActiveIndicator?: boolean;
+}
+interface ResolvedAppearance {
+    density: TreeDensity;
+    rowHeight: number;
+    iconSize: number;
+    iconStrokeWidth: number;
+    fontSize: number;
+    gap: number;
+    indent: number;
+    accent: TreeAccentIntensity;
+    radius: TreeRadius;
+    indentGuideOpacity: number;
+    showActiveIndicator: boolean;
+}
+declare const DEFAULT_TREE_APPEARANCE: ResolvedAppearance;
+/**
+ * Merge a partial appearance with the default + density preset.
+ *
+ * Explicit numeric overrides (e.g. `rowHeight`) win over the density preset.
+ */
+declare function resolveAppearance(input?: TreeAppearance, 
+/** Outer `indent` prop (kept on TreeRoot for back-compat). */
+outerIndent?: number): ResolvedAppearance;
+/**
+ * Build the `style` object that exposes the resolved appearance to any
+ * descendant via CSS variables. Set on `<TreeRoot>`'s outer div.
+ */
+declare function appearanceToStyle(a: ResolvedAppearance): CSSProperties;
+
+type TreeItemId = string;
+/** A single node in the consumer's tree data. Generic over your payload. */
+interface TreeNode<T = unknown> {
+    id: TreeItemId;
+    data: T;
+    /** Inline children. Omit (and provide a `loadChildren`) for async loading. */
+    children?: TreeNode<T>[];
+    /**
+     * Set to `true` to mark a node as a folder even when its `children` array
+     * is empty (e.g. an unloaded async folder). Default: derived from
+     * `Array.isArray(children)`.
+     */
+    isFolder?: boolean;
+    /** Disable interaction. */
+    disabled?: boolean;
+}
+interface TreeLabels {
+    loading: string;
+    empty: string;
+    error: string;
+    searchPlaceholder: string;
+    searchMatches: (count: number) => string;
+    ariaLabel: string;
+}
+declare const DEFAULT_TREE_LABELS: TreeLabels;
+type TreeSelectionMode = 'none' | 'single' | 'multiple';
+/**
+ * How a node becomes "activated" (i.e. opened) on pointer interaction.
+ *
+ * - `'single-click'` (default): single click activates a leaf immediately;
+ *   double-click also activates. Folders always toggle on single click.
+ * - `'double-click'`: single click only selects + focuses; double-click is
+ *   required to activate. Mirrors classic file-manager behaviour.
+ * - `'single-click-preview'`: VSCode Explorer / Cursor behaviour. Single
+ *   click activates with `{ preview: true }` (consumer renders a preview
+ *   tab); double-click activates with `{ preview: false }` (pinned tab).
+ *
+ * Folders ignore this setting — they always toggle on single click and
+ * never call `onActivate`.
+ */
+type TreeActivationMode = 'single-click' | 'double-click' | 'single-click-preview';
+interface TreeActivateOptions {
+    /**
+     * `true` when the activation came from a single click in
+     * `'single-click-preview'` mode. `false` for double-click and for
+     * non-preview modes. Consumers typically map this to a
+     * preview-tab vs pinned-tab distinction.
+     */
+    preview: boolean;
+}
+/**
+ * Async loader: called the first time a folder is expanded with no inline
+ * `children`. Result is cached; concurrent expansions are de-duplicated.
+ */
+type TreeLoadChildren<T> = (node: TreeNode<T>) => Promise<TreeNode<T>[]>;
+interface TreeRowRenderProps<T> {
+    node: TreeNode<T>;
+    level: number;
+    isSelected: boolean;
+    isExpanded: boolean;
+    isFocused: boolean;
+    isFolder: boolean;
+    isLoading: boolean;
+    isMatchingSearch: boolean;
+}
+type TreeRowSlot<T> = (props: TreeRowRenderProps<T>) => ReactNode;
+type TreeContextMenuSlot<T> = (props: TreeRowRenderProps<T>, trigger: ReactNode) => ReactNode;
+interface TreeRootProps<T> {
+    /** Root nodes. Top-level items are rendered directly (no synthetic root). */
+    data: TreeNode<T>[];
+    /** Returns the human-readable name for a node (used by search/type-ahead). */
+    getItemName: (node: TreeNode<T>) => string;
+    /** Async loader for folders without inline `children`. */
+    loadChildren?: TreeLoadChildren<T>;
+    /** Selection behaviour. Default: `'single'`. */
+    selectionMode?: TreeSelectionMode;
+    /** Pointer activation behaviour. Default: `'single-click'`. */
+    activationMode?: TreeActivationMode;
+    /** Initially expanded ids. */
+    initialExpandedIds?: TreeItemId[];
+    /** Initially selected ids. */
+    initialSelectedIds?: TreeItemId[];
+    /** Pixels of indent per nesting level. Default: 16. (Shortcut for `appearance.indent`.) */
+    indent?: number;
+    /** Cosmetic configuration: density, sizes, accent intensity, radius. */
+    appearance?: TreeAppearance;
+    /** Triggered when selection changes. */
+    onSelectionChange?: (selectedIds: TreeItemId[]) => void;
+    /** Triggered when expanded set changes. */
+    onExpansionChange?: (expandedIds: TreeItemId[]) => void;
+    /**
+     * Triggered when a leaf is activated (Enter / dblclick / click depending
+     * on `activationMode`). Folders never call this — they toggle instead.
+     */
+    onActivate?: (node: TreeNode<T>, opts: TreeActivateOptions) => void;
+    /** Show built-in search input. Default: false. */
+    enableSearch?: boolean;
+    /** Type printable letters to jump to a matching name. Default: true. */
+    enableTypeAhead?: boolean;
+    /** Render vertical indent guides under expanded folders. Default: false. */
+    showIndentGuides?: boolean;
+    /** Custom row renderer. Falls back to the default <TreeRow />. */
+    renderRow?: TreeRowSlot<T>;
+    /** Replace default folder/file icon. */
+    renderIcon?: TreeRowSlot<T>;
+    /** Replace default label rendering. */
+    renderLabel?: TreeRowSlot<T>;
+    /** Right-side actions slot (per row). */
+    renderActions?: TreeRowSlot<T>;
+    /** Wrap each row in a context menu (right-click). Receives the row meta + trigger element. */
+    renderContextMenu?: TreeContextMenuSlot<T>;
+    /** Override built-in copy in your locale. */
+    labels?: Partial<TreeLabels>;
+    /** Persist expanded + (optional) selected ids in localStorage under this key. */
+    persistKey?: string;
+    /** Persist selection alongside expansion. Default: false. */
+    persistSelection?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Internal flat-row representation used by the renderer + keyboard nav. */
+interface FlatRow<T> {
+    node: TreeNode<T>;
+    level: number;
+    parentId: TreeItemId | null;
+    isFolder: boolean;
+    isExpanded: boolean;
+    isLoading: boolean;
+    hasError: boolean;
+}
+
+export { DEFAULT_TREE_LABELS as D, type FlatRow as F, type ResolvedAppearance as R, type TreeNode as T, type TreeRowSlot as a, type TreeRootProps as b, DEFAULT_TREE_APPEARANCE as c, appearanceToStyle as d, type TreeContextMenuSlot as e, type TreeItemId as f, type TreeLabels as g, type TreeSelectionMode as h, type TreeRowRenderProps as i, type TreeLoadChildren as j, type TreeAppearance as k, type TreeDensity as l, type TreeAccentIntensity as m, type TreeRadius as n, type TreeActivateOptions as o, type TreeActivationMode as p, resolveAppearance as r };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.316",
+  "version": "2.1.317",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -79,6 +79,11 @@
       "import": "./dist/tree/index.mjs",
       "require": "./dist/tree/index.cjs"
     },
+    "./file-icon": {
+      "types": "./dist/file-icon/index.d.ts",
+      "import": "./dist/file-icon/index.mjs",
+      "require": "./dist/file-icon/index.cjs"
+    },
     "./styles": "./src/styles/index.css",
     "./dist.css": "./dist/index.css"
   },
@@ -96,8 +101,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.316",
-    "@djangocfg/ui-core": "^2.1.316",
+    "@djangocfg/i18n": "^2.1.317",
+    "@djangocfg/ui-core": "^2.1.317",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -146,13 +151,14 @@
   },
   "optionalDependencies": {
     "@mapbox/mapbox-gl-draw": "^1.4.3",
-    "@maplibre/maplibre-gl-geocoder": "^1.7.0"
+    "@maplibre/maplibre-gl-geocoder": "^1.7.0",
+    "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.316",
+    "@djangocfg/i18n": "^2.1.317",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.316",
-    "@djangocfg/ui-core": "^2.1.316",
+    "@djangocfg/typescript-config": "^2.1.317",
+    "@djangocfg/ui-core": "^2.1.317",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/FileIcon/FileIcon.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { File as FileFallback, Folder, FolderOpen } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { getMaterialIconsSync, loadMaterialIcons } from './loader';
+
+export type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;
+
+export interface FileIconProps {
+  /** File name (with extension) or folder name. */
+  name: string;
+  /** Render a folder icon instead of a file icon. */
+  isFolder?: boolean;
+  /** Folder open / closed state. Ignored when `isFolder` is false. */
+  isExpanded?: boolean;
+  /** Pixel size of the icon. */
+  size?: FileIconSize;
+  className?: string;
+}
+
+/**
+ * VSCode-style file icon.
+ *
+ * - Folders render Lucide `Folder` / `FolderOpen` (amber tint).
+ * - Files use `material-file-icons` if it's installed in the consumer; otherwise
+ *   fall back to a neutral Lucide `File` icon.
+ *
+ * The optional dependency is loaded lazily on first render — there is zero
+ * bundle cost for consumers who never mount this component.
+ */
+export function FileIcon({
+  name,
+  isFolder = false,
+  isExpanded = false,
+  size = 16,
+  className,
+}: FileIconProps) {
+  const [svg, setSvg] = useState<string | null>(() => {
+    if (isFolder) return null;
+    const fn = getMaterialIconsSync();
+    return fn ? (fn(name)?.svg ?? null) : null;
+  });
+
+  useEffect(() => {
+    if (isFolder) {
+      setSvg(null);
+      return;
+    }
+    let cancelled = false;
+    void loadMaterialIcons().then((fn) => {
+      if (cancelled) return;
+      setSvg(fn ? (fn(name)?.svg ?? null) : null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isFolder, name]);
+
+  if (isFolder) {
+    const Icon = isExpanded ? FolderOpen : Folder;
+    return (
+      <Icon
+        className={cn('shrink-0 text-amber-500', className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  if (!svg) {
+    return (
+      <FileFallback
+        className={cn('shrink-0 text-muted-foreground/80', className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  return (
+    <span
+      role="img"
+      aria-hidden
+      className={cn('inline-block shrink-0', className)}
+      style={{ width: size, height: size }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}
+
+export default FileIcon;

package/src/tools/FileIcon/index.ts

@@ -0,0 +1,9 @@
+'use client';
+
+export { FileIcon } from './FileIcon';
+export type { FileIconProps, FileIconSize } from './FileIcon';
+
+export { createFileIconSlot } from './treeAdapter';
+export type { CreateFileIconSlotOptions } from './treeAdapter';
+
+export { loadMaterialIcons, getMaterialIconsSync } from './loader';

package/src/tools/FileIcon/loader.ts

@@ -0,0 +1,47 @@
+'use client';
+
+/**
+ * Lazy loader for `material-file-icons`. The package is an optional dependency:
+ * if it's installed in the consumer's tree, we render its rich VSCode-style
+ * SVGs; if not, the loader resolves to `null` and `<FileIcon>` falls back to a
+ * Lucide icon. Either way, ui-tools never throws or warns about a missing
+ * package.
+ *
+ * Resolution is cached per-process so we don't re-import on every render.
+ */
+
+type GetIconFn = (name: string) => { svg: string } | undefined;
+
+let cached: GetIconFn | null | undefined;
+let inflight: Promise<GetIconFn | null> | null = null;
+
+export async function loadMaterialIcons(): Promise<GetIconFn | null> {
+  if (cached !== undefined) return cached;
+  if (inflight) return inflight;
+
+  inflight = (async () => {
+    try {
+      // Computed specifier so bundlers don't try to eagerly resolve it.
+      const specifier = 'material-file-icons';
+      const mod = (await import(/* @vite-ignore */ specifier)) as {
+        getIcon?: GetIconFn;
+        default?: { getIcon?: GetIconFn };
+      };
+      const fn = mod.getIcon ?? mod.default?.getIcon ?? null;
+      cached = fn;
+      return fn;
+    } catch {
+      cached = null;
+      return null;
+    } finally {
+      inflight = null;
+    }
+  })();
+
+  return inflight;
+}
+
+/** Synchronous accessor — returns null until `loadMaterialIcons` resolves. */
+export function getMaterialIconsSync(): GetIconFn | null {
+  return cached ?? null;
+}

package/src/tools/FileIcon/treeAdapter.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { TreeNode, TreeRowSlot } from '../Tree/types';
+import { FileIcon, type FileIconSize } from './FileIcon';
+
+export interface CreateFileIconSlotOptions<T> {
+  /**
+   * How to read the displayed name (with extension) for a node. Use the same
+   * accessor you pass to `<TreeRoot getItemName={...} />`.
+   */
+  getName: (node: TreeNode<T>) => string;
+  /** Pixel size for both file and folder icons. Default: 16. */
+  size?: FileIconSize;
+}
+
+/**
+ * Build a `renderIcon` slot for `<TreeRoot>` that uses `<FileIcon>` for both
+ * leaves and folders.
+ *
+ * @example
+ * ```tsx
+ * <TreeRoot
+ *   data={data}
+ *   getItemName={(n) => n.data.name}
+ *   renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}
+ * />
+ * ```
+ */
+export function createFileIconSlot<T>({
+  getName,
+  size = 16,
+}: CreateFileIconSlotOptions<T>): TreeRowSlot<T> {
+  return ({ node, isFolder, isExpanded }) => (
+    <FileIcon
+      name={getName(node)}
+      isFolder={isFolder}
+      isExpanded={isExpanded}
+      size={size}
+    />
+  );
+}

package/src/tools/Tree/README.md

@@ -182,6 +182,7 @@ Toggle the bar with `appearance.showActiveIndicator`. Intensity scales with `app
 | Option | Default |
 | --- | --- |
 | `selectionMode` | `'single'` |
+| `activationMode` | `'single-click'` |
 | `enableSearch` | `false` |
 | `enableTypeAhead` | `true` |
 | `showIndentGuides` | `false` |
@@ -198,6 +199,7 @@ Toggle the bar with `appearance.showActiveIndicator`. Intensity scales with `app
 | Story | Demonstrates |
 | --- | --- |
 | Default | sensible cozy defaults |
+| WithActivationModes | single-click / double-click / preview semantics |
 | Densities | three density presets side-by-side |
 | WithIcons | file-type icons through `renderIcon` |
 | WithStatus | modified / error / disabled rows through `renderLabel` |
@@ -211,6 +213,60 @@ Toggle the bar with `appearance.showActiveIndicator`. Intensity scales with `app
 | LargeTree | ~500 nodes scalability check |
 | Playground | every knob exposed as a control |
 
+## Activation modes
+
+How a leaf becomes "activated" (opened) on pointer interaction is controlled
+by `activationMode`. Folders ignore this setting — they always toggle on
+single click and never call `onActivate`.
+
+| Mode | Single click | Double click |
+| --- | --- | --- |
+| `'single-click'` *(default)* | activate `{ preview: false }` | activate `{ preview: false }` |
+| `'double-click'` | select + focus only | activate `{ preview: false }` |
+| `'single-click-preview'` *(VSCode / Cursor)* | activate `{ preview: true }` | activate `{ preview: false }` |
+
+Keyboard `Enter` / `Space` always activates with `{ preview: false }` —
+keyboard input is treated as an explicit user action.
+
+```tsx
+<TreeRoot<FsNode>
+  data={data}
+  getItemName={(n) => n.data.name}
+  activationMode="single-click-preview"
+  onActivate={(node, { preview }) =>
+    preview ? openPreviewTab(node) : openPinnedTab(node)
+  }
+/>
+```
+
+The active mode is also exposed on each row as
+`data-activation-mode="<mode>"` for CSS-level targeting.
+
+## VSCode-style file icons
+
+Tree is generic over `T` — it has no opinion on whether nodes are files. For a
+ready-made VSCode-style icon set, install the optional companion subpath:
+
+```bash
+pnpm add material-file-icons
+```
+
+```tsx
+import { TreeRoot } from '@djangocfg/ui-tools/tree';
+import { createFileIconSlot } from '@djangocfg/ui-tools/file-icon';
+
+<TreeRoot
+  data={data}
+  getItemName={(n) => n.data.name}
+  renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}
+/>
+```
+
+`material-file-icons` is declared in `optionalDependencies`. If it's not
+installed, `<FileIcon>` falls back to a Lucide `File` icon — no warnings, no
+runtime errors. Folders always render Lucide `Folder` / `FolderOpen` (amber
+tint), regardless of whether the optional package is present.
+
 ## Out of scope (today)
 
 - Inline rename UX

package/src/tools/Tree/Tree.story.tsx

@@ -111,6 +111,54 @@ export const Default = () => (
   </div>
 );
 
+// ---------------------------------------------------------------------------
+// 1.5) WithActivationModes — VSCode-style click semantics
+// ---------------------------------------------------------------------------
+
+export const WithActivationModes = () => {
+  const [log, setLog] = useState<string[]>([]);
+  const append = (s: string) =>
+    setLog((prev) => [s, ...prev].slice(0, 8));
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-3 gap-3">
+        {(['single-click', 'double-click', 'single-click-preview'] as const).map(
+          (mode) => (
+            <div key={mode} className="flex flex-col gap-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                {mode}
+              </span>
+              <div className="h-72 w-64 rounded-md border border-border bg-card">
+                <TreeRoot<FsNode>
+                  data={fs}
+                  getItemName={getName}
+                  initialExpandedIds={['src']}
+                  activationMode={mode}
+                  onActivate={(node, { preview }) =>
+                    append(
+                      `[${mode}] ${node.data.name}${preview ? ' (preview)' : ''}`,
+                    )
+                  }
+                />
+              </div>
+            </div>
+          ),
+        )}
+      </div>
+      <div className="rounded-md border border-border bg-muted/30 p-3 font-mono text-xs">
+        {log.length === 0 ? (
+          <span className="text-muted-foreground">
+            click / double-click a file to log activations
+          </span>
+        ) : (
+          log.map((line, i) => <div key={i}>{line}</div>)
+        )}
+      </div>
+    </div>
+  );
+};
+
 // ---------------------------------------------------------------------------
 // 2) Densities — three presets side-by-side for comparison
 // ---------------------------------------------------------------------------

package/src/tools/Tree/TreeRoot.tsx

@@ -23,6 +23,7 @@ function TreeRoot<T>(props: TreeRootProps<T>) {
     getItemName,
     loadChildren,
     selectionMode,
+    activationMode,
     initialExpandedIds,
     initialSelectedIds,
     indent,
@@ -51,6 +52,7 @@ function TreeRoot<T>(props: TreeRootProps<T>) {
       getItemName={getItemName}
       loadChildren={loadChildren}
       selectionMode={selectionMode}
+      activationMode={activationMode}
       initialExpandedIds={initialExpandedIds}
       initialSelectedIds={initialSelectedIds}
       indent={indent}
@@ -104,8 +106,9 @@ function TreeRootShell<T>({
     onFocus: ctx.setFocus,
     onSelect: ctx.select,
     onActivate: (id) => {
+      // Keyboard Enter / Space is always an explicit action — pin (no preview).
       const row = ctx.flatRows.find((r) => r.node.id === id);
-      if (row) ctx.activate(row.node);
+      if (row) ctx.activate(row.node, { preview: false });
     },
     onExpand: ctx.expand,
     onCollapse: ctx.collapse,

package/src/tools/Tree/components/TreeRow.tsx

@@ -20,6 +20,7 @@ export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
   const ctx = useTreeContext<T>();
   const {
     appearance,
+    activationMode,
     showIndentGuides,
     selected,
     focused,
@@ -51,22 +52,29 @@ export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
     isMatchingSearch,
   };
 
-  const handleActivate = () => {
+  // Folders always toggle on single click regardless of `activationMode`.
+  // Leaves dispatch by mode:
+  //   single-click          → click activates {preview:false}
+  //   double-click          → click only selects; dblclick activates {preview:false}
+  //   single-click-preview  → click activates {preview:true}; dblclick activates {preview:false}
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (node.disabled) return;
     setFocus(node.id);
     select(node.id);
-    if (isFolder) toggle(node.id);
-    else activate(node);
-  };
-
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    handleActivate();
+    if (isFolder) {
+      toggle(node.id);
+    } else if (activationMode === 'single-click') {
+      activate(node, { preview: false });
+    } else if (activationMode === 'single-click-preview') {
+      activate(node, { preview: true });
+    }
     e.currentTarget.scrollIntoView?.({ block: 'nearest' });
   };
 
   const handleDoubleClick = () => {
     if (node.disabled) return;
-    if (!isFolder) activate(node);
+    if (isFolder) return;
+    activate(node, { preview: false });
   };
 
   const trigger = (
@@ -79,6 +87,7 @@ export function TreeRow<T>({ row, className }: TreeRowProps<T>) {
       aria-disabled={node.disabled || undefined}
       data-tree-row=""
       data-id={node.id}
+      data-activation-mode={activationMode}
       data-selected={isSelected ? 'true' : undefined}
       data-focused={isFocused && !isSelected ? 'true' : undefined}
       data-folder={isFolder || undefined}