@djangocfg/ui-tools 2.1.413 → 2.1.416

package/src/tools/forms/MarkdownEditor/styles.css

@@ -116,6 +116,24 @@
   box-shadow: none;
 }
 
+/* Slash-command inline chip — TipTap atom analogue of the plain
+   `<SlashHighlightTextarea>` mirror. Mirrors `bg-primary/15 text-primary`
+   so the two paths look identical. Atom nodes don't admit a caret, so
+   light horizontal padding is safe here (unlike the plain mirror,
+   which has to be padding-less to keep caret alignment). */
+.markdown-slash-command {
+  background: color-mix(in oklab, var(--color-primary, var(--primary)) 15%, transparent);
+  color: var(--color-primary, var(--primary));
+  padding: 0 2px;
+  border-radius: 3px;
+  font-weight: 500;
+  /* Atom nodes can't be entered; reflect that visually so the user does
+     not try to click into the chip to edit it. */
+  cursor: default;
+  user-select: none;
+  display: inline;
+}
+
 /* Mention inline chip */
 .markdown-mention {
   background: var(--color-primary, var(--primary));

package/src/tools/index.ts

@@ -97,8 +97,8 @@ export { Player as AudioPlayer } from './media/AudioPlayer';
 export type { PlayerProps as AudioPlayerProps } from './media/AudioPlayer';
 
 // Export ImageViewer
-export { ImageViewer } from './overlay/ImageViewer';
-export type { ImageViewerProps, ImageFile } from './overlay/ImageViewer';
+export { ImageViewer } from './media/ImageViewer';
+export type { ImageViewerProps, ImageFile } from './media/ImageViewer';
 
 // Export CronScheduler (~15KB)
 export {

package/dist/types-j2vhn4Kv.d.cts

@@ -1,241 +0,0 @@
-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;
-/**
- * Declarative context-menu item. Pass `'separator'` (string) in place of an
- * object to insert a `<ContextMenuSeparator />` between groups.
- *
- * For more advanced needs (submenus, checkbox items, custom JSX), drop down
- * to `renderContextMenu` instead.
- */
-interface TreeContextMenuAction<T> {
-    /** Stable React key. */
-    id: string;
-    label: ReactNode;
-    /** Lucide-style icon component. Rendered as `<icon className="size-4" />`. */
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    /** Right-aligned keyboard hint (e.g. `'⌘C'`, `'↵'`). Cosmetic. */
-    shortcut?: ReactNode;
-    /** Disable the item — still rendered, not selectable. */
-    disabled?: boolean;
-    /** Style as destructive (red). */
-    destructive?: boolean;
-    /** Click / Enter handler. Receives the row meta. */
-    onSelect: (props: TreeRowRenderProps<T>) => void;
-}
-type TreeContextMenuItem<T> = TreeContextMenuAction<T> | 'separator';
-type TreeContextMenuActionsResolver<T> = (props: TreeRowRenderProps<T>) => TreeContextMenuItem<T>[] | null | undefined;
-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;
-    /**
-     * Optional predicate. Nodes returning `false` (and their descendants) are
-     * not rendered and not searchable. Use this to hide dot-files, system
-     * entries, or anything else the consumer wants to filter out.
-     */
-    filterNode?: (node: TreeNode<T>) => boolean;
-    /** Show built-in search input. Default: false. */
-    enableSearch?: boolean;
-    /** Type printable letters to jump to a matching name. Default: true. */
-    enableTypeAhead?: boolean;
-    /** Render vertical indent guides under expanded folders. Default: false. */
-    showIndentGuides?: boolean;
-    /** 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>;
-    /**
-     * Declarative right-click menu — short-form. Pass `(row) => [items]` and the
-     * Tree builds a `<ContextMenu>` for you with sensible defaults. Ignored if
-     * `renderContextMenu` is also set. Return `null`/`undefined`/`[]` to skip
-     * the menu for that row.
-     */
-    contextMenuActions?: TreeContextMenuActionsResolver<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;
-    /** 1-based position among visible siblings (for `aria-posinset`). */
-    posInSet: number;
-    /** Count of visible siblings sharing this row's parent (for `aria-setsize`). */
-    setSize: number;
-}
-
-export { DEFAULT_TREE_APPEARANCE as D, type FlatRow as F, type ResolvedAppearance as R, type TreeRootProps as T, type TreeItemId as a, type TreeNode as b, type TreeActivateOptions as c, type TreeLabels as d, type TreeSelectionMode as e, type TreeActivationMode as f, type TreeRowSlot as g, type TreeContextMenuSlot as h, appearanceToStyle as i, type TreeAppearance as j, type TreeDensity as k, type TreeAccentIntensity as l, type TreeRadius as m, DEFAULT_TREE_LABELS as n, type TreeRowRenderProps as o, type TreeContextMenuAction as p, type TreeContextMenuItem as q, resolveAppearance as r, type TreeContextMenuActionsResolver as s, type TreeLoadChildren as t };

package/dist/types-j2vhn4Kv.d.ts

@@ -1,241 +0,0 @@
-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;
-/**
- * Declarative context-menu item. Pass `'separator'` (string) in place of an
- * object to insert a `<ContextMenuSeparator />` between groups.
- *
- * For more advanced needs (submenus, checkbox items, custom JSX), drop down
- * to `renderContextMenu` instead.
- */
-interface TreeContextMenuAction<T> {
-    /** Stable React key. */
-    id: string;
-    label: ReactNode;
-    /** Lucide-style icon component. Rendered as `<icon className="size-4" />`. */
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    /** Right-aligned keyboard hint (e.g. `'⌘C'`, `'↵'`). Cosmetic. */
-    shortcut?: ReactNode;
-    /** Disable the item — still rendered, not selectable. */
-    disabled?: boolean;
-    /** Style as destructive (red). */
-    destructive?: boolean;
-    /** Click / Enter handler. Receives the row meta. */
-    onSelect: (props: TreeRowRenderProps<T>) => void;
-}
-type TreeContextMenuItem<T> = TreeContextMenuAction<T> | 'separator';
-type TreeContextMenuActionsResolver<T> = (props: TreeRowRenderProps<T>) => TreeContextMenuItem<T>[] | null | undefined;
-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;
-    /**
-     * Optional predicate. Nodes returning `false` (and their descendants) are
-     * not rendered and not searchable. Use this to hide dot-files, system
-     * entries, or anything else the consumer wants to filter out.
-     */
-    filterNode?: (node: TreeNode<T>) => boolean;
-    /** Show built-in search input. Default: false. */
-    enableSearch?: boolean;
-    /** Type printable letters to jump to a matching name. Default: true. */
-    enableTypeAhead?: boolean;
-    /** Render vertical indent guides under expanded folders. Default: false. */
-    showIndentGuides?: boolean;
-    /** 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>;
-    /**
-     * Declarative right-click menu — short-form. Pass `(row) => [items]` and the
-     * Tree builds a `<ContextMenu>` for you with sensible defaults. Ignored if
-     * `renderContextMenu` is also set. Return `null`/`undefined`/`[]` to skip
-     * the menu for that row.
-     */
-    contextMenuActions?: TreeContextMenuActionsResolver<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;
-    /** 1-based position among visible siblings (for `aria-posinset`). */
-    posInSet: number;
-    /** Count of visible siblings sharing this row's parent (for `aria-setsize`). */
-    setSize: number;
-}
-
-export { DEFAULT_TREE_APPEARANCE as D, type FlatRow as F, type ResolvedAppearance as R, type TreeRootProps as T, type TreeItemId as a, type TreeNode as b, type TreeActivateOptions as c, type TreeLabels as d, type TreeSelectionMode as e, type TreeActivationMode as f, type TreeRowSlot as g, type TreeContextMenuSlot as h, appearanceToStyle as i, type TreeAppearance as j, type TreeDensity as k, type TreeAccentIntensity as l, type TreeRadius as m, DEFAULT_TREE_LABELS as n, type TreeRowRenderProps as o, type TreeContextMenuAction as p, type TreeContextMenuItem as q, resolveAppearance as r, type TreeContextMenuActionsResolver as s, type TreeLoadChildren as t };

package/src/tools/data/Tree/hooks/useTreeKeyboard.ts

@@ -1,171 +0,0 @@
-'use client';
-
-import { useCallback, useRef } from 'react';
-import { useHotkey } from '@djangocfg/ui-core/hooks';
-
-import type { FlatRow, TreeItemId } from '../types';
-
-export interface UseTreeKeyboardOptions<T> {
-  rows: FlatRow<T>[];
-  focusedId: TreeItemId | null;
-  enabled?: boolean;
-  onFocus: (id: TreeItemId) => void;
-  onSelect: (id: TreeItemId) => void;
-  onActivate: (id: TreeItemId) => void;
-  onExpand: (id: TreeItemId) => void;
-  onCollapse: (id: TreeItemId) => void;
-  onClearSelection: () => void;
-}
-
-export interface UseTreeKeyboardReturn {
-  /** Attach to the tree container. Hotkeys only fire when focus is inside. */
-  ref: (instance: HTMLElement | null) => void;
-}
-
-/**
- * Standard tree keyboard navigation, scoped to the container ref.
- *
- *  - ↑ / ↓ : prev / next visible row
- *  - Home / End : first / last visible row
- *  - → : expand folder; if already expanded, jump to first child
- *  - ← : collapse folder; if already collapsed (or leaf), jump to parent
- *  - Enter / Space : activate (folder => toggle, leaf => onActivate)
- *  - Esc : clear selection
- *
- * Built on `useHotkey` (react-hotkeys-hook) — focus gating is automatic; no
- * manual `addEventListener` or `data-scope` juggling.
- */
-export function useTreeKeyboard<T>({
-  rows,
-  focusedId,
-  enabled = true,
-  onFocus,
-  onSelect,
-  onActivate,
-  onExpand,
-  onCollapse,
-  onClearSelection,
-}: UseTreeKeyboardOptions<T>): UseTreeKeyboardReturn {
-  // Keep latest values in refs so the callbacks below stay stable across
-  // renders — react-hotkeys-hook re-binds on dep change otherwise.
-  const rowsRef = useRef(rows);
-  const focusedIdRef = useRef(focusedId);
-  rowsRef.current = rows;
-  focusedIdRef.current = focusedId;
-
-  const getCurrent = () => {
-    const r = rowsRef.current;
-    const id = focusedIdRef.current;
-    const idx = id ? r.findIndex((x) => x.node.id === id) : -1;
-    return { rows: r, idx, current: idx >= 0 ? r[idx] : null };
-  };
-
-  const refDown = useHotkey(
-    'down',
-    () => {
-      const { rows: r, idx } = getCurrent();
-      if (r.length === 0) return;
-      const next = r[Math.min(idx + 1, r.length - 1)] ?? r[0];
-      onFocus(next.node.id);
-    },
-    { enabled, preventDefault: true, description: 'Next row' },
-  );
-
-  const refUp = useHotkey(
-    'up',
-    () => {
-      const { rows: r, idx } = getCurrent();
-      if (r.length === 0) return;
-      const prev = r[Math.max(idx - 1, 0)] ?? r[0];
-      onFocus(prev.node.id);
-    },
-    { enabled, preventDefault: true, description: 'Previous row' },
-  );
-
-  const refHome = useHotkey(
-    'home',
-    () => {
-      const { rows: r } = getCurrent();
-      if (r.length === 0) return;
-      onFocus(r[0].node.id);
-    },
-    { enabled, preventDefault: true, description: 'First row' },
-  );
-
-  const refEnd = useHotkey(
-    'end',
-    () => {
-      const { rows: r } = getCurrent();
-      if (r.length === 0) return;
-      onFocus(r[r.length - 1].node.id);
-    },
-    { enabled, preventDefault: true, description: 'Last row' },
-  );
-
-  const refRight = useHotkey(
-    'right',
-    () => {
-      const { rows: r, idx, current } = getCurrent();
-      if (!current) return;
-      if (current.isFolder && !current.isExpanded) {
-        onExpand(current.node.id);
-      } else if (current.isFolder && current.isExpanded) {
-        const next = r[idx + 1];
-        if (next) onFocus(next.node.id);
-      }
-    },
-    { enabled, preventDefault: true, description: 'Expand / first child' },
-  );
-
-  const refLeft = useHotkey(
-    'left',
-    () => {
-      const { current } = getCurrent();
-      if (!current) return;
-      if (current.isFolder && current.isExpanded) {
-        onCollapse(current.node.id);
-      } else if (current.parentId) {
-        onFocus(current.parentId);
-      }
-    },
-    { enabled, preventDefault: true, description: 'Collapse / parent' },
-  );
-
-  const refActivate = useHotkey(
-    ['enter', 'space'],
-    () => {
-      const { current } = getCurrent();
-      if (!current) return;
-      onSelect(current.node.id);
-      if (current.isFolder) {
-        if (current.isExpanded) onCollapse(current.node.id);
-        else onExpand(current.node.id);
-      } else {
-        onActivate(current.node.id);
-      }
-    },
-    { enabled, preventDefault: true, description: 'Activate / toggle' },
-  );
-
-  const refEscape = useHotkey(
-    'escape',
-    () => onClearSelection(),
-    { enabled, preventDefault: true, description: 'Clear selection' },
-  );
-
-  const ref = useCallback(
-    (instance: HTMLElement | null) => {
-      refDown(instance);
-      refUp(instance);
-      refHome(instance);
-      refEnd(instance);
-      refRight(instance);
-      refLeft(instance);
-      refActivate(instance);
-      refEscape(instance);
-    },
-    [refDown, refUp, refHome, refEnd, refRight, refLeft, refActivate, refEscape],
-  );
-
-  return { ref };
-}