@openviking/react 0.1.1 → 0.1.3

package/dist/n~0.js

@@ -1,106 +1,442 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-function Chevron({ expanded }) {
-    return /*#__PURE__*/ jsx("svg", {
-        "aria-hidden": "true",
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { FolderOpenIcon, FolderIcon, ChevronRightIcon, DocumentIcon } from "./k~0.js";
+import { useOverlayPosition } from "./o~0.js";
+function FileTreeFolderIcon({ open }) {
+    return /*#__PURE__*/ jsxs("span", {
+        className: "ov-file-tree__folder",
+        children: [
+            /*#__PURE__*/ jsx(FolderIcon, {
+                className: "ov-file-tree__folder-layer",
+                "data-open": !open
+            }),
+            /*#__PURE__*/ jsx(FolderOpenIcon, {
+                className: "ov-file-tree__folder-layer",
+                "data-open": open
+            })
+        ]
+    });
+}
+function FileTreeFileIcon() {
+    return /*#__PURE__*/ jsx(DocumentIcon, {
+        className: "ov-file-tree__file-icon"
+    });
+}
+function FileTreeChevron({ open }) {
+    return /*#__PURE__*/ jsx(ChevronRightIcon, {
         className: "ov-file-tree__chevron",
-        "data-expanded": expanded || void 0,
-        viewBox: "0 0 16 16",
-        width: "12",
-        height: "12",
-        children: /*#__PURE__*/ jsx("path", {
-            d: "M6 3.5 10.5 8 6 12.5",
-            fill: "none",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: "1.5"
-        })
+        "data-expanded": open || void 0,
+        width: 12,
+        height: 12
     });
 }
-function FolderIcon({ open }) {
-    return /*#__PURE__*/ jsx("svg", {
-        "aria-hidden": "true",
-        className: "ov-file-tree__icon",
-        viewBox: "0 0 16 16",
-        width: "14",
-        height: "14",
-        children: /*#__PURE__*/ jsx("path", {
-            d: open ? 'M1.5 13V4.5A1 1 0 0 1 2.5 3.5h3l1.2 1.5h5.8a1 1 0 0 1 1 1V7M1.5 13l1.6-5h11.4l-1.6 5H1.5Z' : 'M1.5 12.5v-9a1 1 0 0 1 1-1h3l1.2 1.5h6.8a1 1 0 0 1 1 1v7.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1Z',
-            fill: "none",
-            stroke: "currentColor",
-            strokeLinejoin: "round",
-            strokeWidth: "1.2"
-        })
+const TOOLTIP_ONLY_KEYS = new Set([
+    'profile',
+    'preferences',
+    'entities',
+    'events',
+    'identity',
+    'soul',
+    'cases',
+    'trajectories',
+    'experiences'
+]);
+const ROOT_KEY_BY_SEGMENT = {
+    agent: 'agentRoot',
+    agents: 'agentRoot',
+    memory: 'memoryRoot',
+    memories: 'memoryRoot',
+    resource: 'resourceRoot',
+    resources: 'resourceRoot',
+    session: 'sessionRoot',
+    sessions: 'sessionRoot',
+    system: 'systemRoot'
+};
+const USER_SCOPE_KEY_BY_SEGMENT = {
+    memories: 'memories',
+    peers: 'peers',
+    privacy: 'privacy',
+    resources: 'userResources',
+    sessions: 'sessions',
+    skills: 'skills'
+};
+const AGENT_KEY_BY_SEGMENT = {
+    endpoints: 'agentEndpoints',
+    payments: 'agentPayments',
+    skills: 'agentSkills',
+    tools: 'agentTools'
+};
+const MEMORY_KEY_BY_SEGMENT = {
+    'profile.md': 'profile',
+    preferences: 'preferences',
+    entities: 'entities',
+    events: 'events',
+    'identity.md': 'identity',
+    'soul.md': 'soul',
+    cases: 'cases',
+    trajectories: 'trajectories',
+    experiences: 'experiences'
+};
+const USER_SEGMENTS = new Set([
+    'user',
+    'users'
+]);
+function splitVikingUri(uri) {
+    const withoutScheme = uri.replace(/^viking:\/*/i, '');
+    const withoutQuery = withoutScheme.split(/[?#]/)[0] ?? '';
+    return withoutQuery.split('/').map((segment)=>segment.trim()).filter(Boolean).map((segment)=>segment.toLowerCase());
+}
+function resolveFileTreeInfoKey(uri) {
+    const segments = splitVikingUri(uri);
+    const first = segments[0];
+    if (!first) return null;
+    if (USER_SEGMENTS.has(first)) {
+        if (segments.length <= 2) return 'userRoot';
+        const third = segments[2];
+        if (!third) return null;
+        if (3 === segments.length) return USER_SCOPE_KEY_BY_SEGMENT[third] ?? null;
+        if ('memories' !== third || 4 !== segments.length) return null;
+        const fourth = segments[3];
+        return fourth ? MEMORY_KEY_BY_SEGMENT[fourth] ?? null : null;
+    }
+    if (1 === segments.length) {
+        if ('resources' === first) return 'sharedResources';
+        return ROOT_KEY_BY_SEGMENT[first] ?? null;
+    }
+    if (('agent' === first || 'agents' === first) && 2 === segments.length) {
+        const second = segments[1];
+        return second ? AGENT_KEY_BY_SEGMENT[second] ?? null : null;
+    }
+    return null;
+}
+function showsInlineDescription(key) {
+    return null !== key && !TOOLTIP_ONLY_KEYS.has(key);
+}
+const DESCRIPTION = {
+    userRoot: 'Context data for the current user',
+    memories: 'Long-term memory accumulated across sessions',
+    peers: 'Context isolated per application or workspace',
+    privacy: 'Keys and other sensitive configuration',
+    userResources: 'Private knowledge of this user',
+    sessions: 'Conversation and task execution records',
+    skills: 'Skills and tools available to the agent',
+    profile: 'User identity and background',
+    preferences: 'Personalized user preferences',
+    entities: 'People, projects, organizations and other entities',
+    events: 'Key events archived by date',
+    identity: 'Agent name and persona',
+    soul: 'Agent behaviour guidelines and boundaries',
+    cases: 'Interaction cases used to train experience',
+    trajectories: 'Reusable task execution trajectories',
+    experiences: 'Execution experience distilled automatically',
+    sharedResources: 'External resources the agent can reference',
+    agentRoot: 'Agent capabilities, tools and experience',
+    agentEndpoints: 'Communication endpoints shared across the account',
+    agentPayments: 'Payment capabilities shared across the account',
+    agentSkills: 'Skill definitions callable across the account',
+    agentTools: 'Tool configuration shared across the account',
+    memoryRoot: 'Long-term memory and accumulated information',
+    resourceRoot: 'External knowledge the agent can reference',
+    sessionRoot: 'Raw session records of the user',
+    systemRoot: 'Built-in system resources'
+};
+const TRIGGER_BEHAVIOR = {
+    userRoot: 'Created from the current user identity; no manual setup needed',
+    memories: 'Committed sessions, explicit requests to remember, or continuous extraction from sessions',
+    peers: 'Created when connecting as a specific peer, isolating memory and material per peer_id',
+    userResources: 'Imported material, uploaded to this user’s private resource directory',
+    sessions: 'Created when a session calls OpenViking; messages, tool calls and archives are saved continuously',
+    skills: 'Created, installed or imported as a personal skill',
+    profile: 'A stable, explicit user background or working style appears in conversation',
+    preferences: 'The user explicitly states a specific preference, habit or style',
+    entities: 'A person, project or organization worth keeping appears in conversation',
+    events: 'An important decision, commitment, arrangement, progress or result appears in dialogue',
+    identity: 'Initialized on the first memory extraction run; later updated by write operations',
+    soul: 'Initialized on the first memory extraction run; later adjusted by write operations',
+    cases: 'A session with a clear task and an evaluable execution result is committed',
+    trajectories: 'A task containing decisions, tool calls or multi-step execution is committed',
+    experiences: 'Distilled from task cases and execution trajectories',
+    sharedResources: 'Imported material, uploaded to a shared resource space',
+    agentEndpoints: 'Configured when an integration endpoint is registered for the account',
+    agentPayments: 'Configured when a payment capability is enabled for the account',
+    agentSkills: 'Installed or imported as a shared skill available to every agent',
+    agentTools: 'Configured when a tool is registered for the account'
+};
+const DEFAULT_INFO_LABELS = {
+    description: DESCRIPTION,
+    triggerBehavior: TRIGGER_BEHAVIOR,
+    field: {
+        description: "Description",
+        triggerBehavior: 'Trigger',
+        path: 'Path'
+    }
+};
+function resolveInfoCopy(key, hostLabels) {
+    const description = hostLabels?.description?.[key] ?? DESCRIPTION[key] ?? void 0;
+    const triggerBehavior = hostLabels?.triggerBehavior?.[key] ?? TRIGGER_BEHAVIOR[key] ?? void 0;
+    return {
+        description: description || void 0,
+        triggerBehavior: triggerBehavior || void 0
+    };
+}
+function useMergedRef(ref, target) {
+    return useCallback((node)=>{
+        target.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref,
+        target
+    ]);
+}
+function Popover({ children, content, placement = 'right', trigger = 'hover', delay = 300, disabled = false, className, style, onOpenChange }) {
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const timerRef = useRef(void 0);
+    const [surfaceNode, setSurfaceNode] = useState(null);
+    const id = useId();
+    const position = useOverlayPosition(open, triggerRef, surfaceNode, placement);
+    const change = useCallback((next)=>{
+        setOpen(next);
+        onOpenChange?.(next);
+    }, [
+        onOpenChange
+    ]);
+    const clearTimer = useCallback(()=>{
+        if (void 0 !== timerRef.current) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = void 0;
+        }
+    }, []);
+    useEffect(()=>clearTimer, [
+        clearTimer
+    ]);
+    useEffect(()=>{
+        if (disabled) {
+            clearTimer();
+            setOpen(false);
+        }
+    }, [
+        disabled,
+        clearTimer
+    ]);
+    useEffect(()=>{
+        if (!open || 'click' !== trigger) return;
+        const onPointerDown = (event)=>{
+            const target = event.target;
+            if (surfaceNode?.contains(target) || triggerRef.current?.contains(target)) return;
+            change(false);
+        };
+        const onKeyDown = (event)=>{
+            if ('Escape' === event.key) change(false);
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return ()=>{
+            document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [
+        change,
+        open,
+        surfaceNode,
+        trigger
+    ]);
+    const show = ()=>{
+        if (disabled) return;
+        if ('click' === trigger) return void change(!open);
+        clearTimer();
+        timerRef.current = window.setTimeout(()=>{
+            change(true);
+            timerRef.current = void 0;
+        }, delay);
+    };
+    const hide = ()=>{
+        if ('click' === trigger) return;
+        clearTimer();
+        change(false);
+    };
+    const child = children;
+    const childProps = child.props;
+    const childRef = child.ref;
+    const mergedRef = useMergedRef(childRef, triggerRef);
+    const declaresExpanded = 'aria-expanded' in childProps;
+    const triggerElement = /*#__PURE__*/ cloneElement(child, {
+        ref: mergedRef,
+        ...declaresExpanded ? {} : {
+            'aria-expanded': open
+        },
+        onMouseEnter: (event)=>{
+            childProps.onMouseEnter?.(event);
+            if ('hover' === trigger) show();
+        },
+        onMouseLeave: (event)=>{
+            childProps.onMouseLeave?.(event);
+            if ('hover' === trigger) hide();
+        },
+        onClick: (event)=>{
+            childProps.onClick?.(event);
+            if ('click' === trigger) show();
+        }
+    });
+    const surface = open ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        ref: setSurfaceNode,
+        id: id,
+        role: 'click' === trigger ? 'dialog' : 'note',
+        className: [
+            'ov-popover',
+            className
+        ].filter(Boolean).join(' '),
+        "data-placement": position.placement,
+        style: {
+            top: position.top,
+            left: position.left,
+            ...style
+        },
+        onMouseEnter: 'hover' === trigger ? clearTimer : void 0,
+        onMouseLeave: 'hover' === trigger ? hide : void 0,
+        children: content
+    }), document.body) : null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            triggerElement,
+            surface
+        ]
     });
 }
-function FileIcon() {
-    return /*#__PURE__*/ jsxs("svg", {
-        "aria-hidden": "true",
-        className: "ov-file-tree__icon",
-        viewBox: "0 0 16 16",
-        width: "14",
-        height: "14",
+const DEFAULT_FIELDS = {
+    description: "Description",
+    triggerBehavior: 'Trigger',
+    path: 'Path'
+};
+function resolveFileTreeInfoCopy(row, infoLabels) {
+    const key = resolveFileTreeInfoKey(row.uri);
+    if (!key) return null;
+    const builtIn = resolveInfoCopy(key, infoLabels);
+    const description = row.description ?? builtIn.description;
+    if (!description && !builtIn.triggerBehavior) return null;
+    return {
+        title: row.name,
+        description,
+        triggerBehavior: builtIn.triggerBehavior,
+        path: row.uri,
+        fields: {
+            ...DEFAULT_FIELDS,
+            ...infoLabels?.field
+        }
+    };
+}
+function FileTreeInfoTooltip({ copy }) {
+    const { description, fields, path, title, triggerBehavior } = copy;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "ov-file-tree__info",
         children: [
-            /*#__PURE__*/ jsx("path", {
-                d: "M4 1.5h5L12.5 5v9.5h-8.5V1.5Z",
-                fill: "none",
-                stroke: "currentColor",
-                strokeLinejoin: "round",
-                strokeWidth: "1.2"
+            /*#__PURE__*/ jsx("div", {
+                className: "ov-file-tree__info-title",
+                children: title
             }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M9 1.5V5h3.5",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "1.2"
+            description ? /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-tree__info-row",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__info-label",
+                        children: fields.description
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__info-value",
+                        children: description
+                    })
+                ]
+            }) : null,
+            triggerBehavior ? /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-tree__info-row",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__info-label",
+                        children: fields.triggerBehavior
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__info-value",
+                        children: triggerBehavior
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-tree__info-row",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__info-label",
+                        children: fields.path
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__info-path",
+                        children: path
+                    })
+                ]
             })
         ]
     });
 }
-function Spinner() {
-    return /*#__PURE__*/ jsx("span", {
-        "aria-hidden": "true",
-        className: "ov-file-tree__spinner"
+function FileTreeTooltipContent({ row, infoLabels, renderRowTooltip }) {
+    if (renderRowTooltip) {
+        const custom = renderRowTooltip(row);
+        if (null == custom || false === custom) return null;
+        return custom;
+    }
+    const copy = resolveFileTreeInfoCopy(row, infoLabels);
+    if (!copy) return null;
+    return /*#__PURE__*/ jsx(FileTreeInfoTooltip, {
+        copy: copy
     });
 }
-const DEFAULT_LABELS = {
-    empty: 'No files yet',
-    error: 'Failed to load',
-    retry: 'Retry',
-    loadMore: 'Load more',
-    loading: 'Loading…',
-    expand: 'Expand {name}',
-    collapse: 'Collapse {name}'
-};
-function fillName(template, name) {
-    return template.replace('{name}', name);
-}
-function rowIndent(row) {
+const INDENT = 16;
+const CHEVRON_SIZE = 16;
+function rowStyle(depth) {
     return {
-        paddingLeft: `calc(${row.depth} * 16px)`
+        paddingLeft: depth * INDENT
     };
 }
+function Guides({ depth }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: Array.from({
+            length: depth
+        }, (_, level)=>/*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: "ov-file-tree__guide",
+                style: {
+                    left: level * INDENT + CHEVRON_SIZE / 2
+                }
+            }, level))
+    });
+}
 const FILE_TREE_ROW_ATTRIBUTE = 'data-file-tree-row-id';
-function FileTreeEntryRowView({ row, ctx }) {
-    const { text, selectedId, tooltipRowId, getRowAttributes, renderDashboard, renderRowTooltip, onSelect, onToggleExpand, onOpenRetentionSettings, onRowKeyDown, onRowEnter, onRowLeave } = ctx;
+function FileTreeRowView({ row, ctx }) {
+    const { text, selectedId, getRowAttributes, renderDashboard, renderRowTooltip, renderRowIcon, onSelect, onToggleExpand, onOpenRetentionSettings, onRowKeyDown } = ctx;
     const isDirectory = 'directory' === row.type;
     const canExpand = isDirectory && false !== row.hasChildren;
+    const isExpanded = Boolean(row.expanded);
     const isSelected = selectedId === row.id;
-    const { className: extraClassName, style: extraStyle, ...extraAttributes } = getRowAttributes?.(row) ?? {};
+    const extra = getRowAttributes?.(row) ?? {};
+    const { className: extraClassName, style: extraStyle, ...extraAttributes } = extra;
     const dashboard = renderDashboard?.(row) ?? null;
-    const tooltip = renderRowTooltip?.(row) ?? null;
-    const handleRowClick = (event)=>{
+    const infoKey = resolveFileTreeInfoKey(row.uri);
+    const description = row.description ?? (infoKey && showsInlineDescription(infoKey) ? resolveInfoCopy(infoKey, ctx.infoLabels).description : void 0);
+    const handleClick = (event)=>{
         if (event.target.closest('[data-role="toggle"]')) return;
         if (row.disabled) return;
         onSelect?.(row);
     };
-    return /*#__PURE__*/ jsxs("div", {
+    const handleToggle = (event)=>{
+        event.stopPropagation();
+        onToggleExpand?.(row);
+    };
+    const rowNode = /*#__PURE__*/ jsxs("div", {
         role: "treeitem",
         tabIndex: 0,
         "aria-level": row.depth + 1,
         "aria-selected": isSelected,
-        "aria-expanded": canExpand ? Boolean(row.expanded) : void 0,
+        "aria-expanded": canExpand ? isExpanded : void 0,
         "aria-disabled": row.disabled || void 0,
         ...extraAttributes,
         [FILE_TREE_ROW_ATTRIBUTE]: row.id,
@@ -112,29 +448,27 @@ function FileTreeEntryRowView({ row, ctx }) {
         "data-disabled": row.disabled || void 0,
         "data-kind": row.kind,
         style: {
-            ...rowIndent(row),
+            ...rowStyle(row.depth),
             ...extraStyle
         },
-        onClick: handleRowClick,
+        onClick: handleClick,
         onKeyDown: (event)=>onRowKeyDown(event, row),
-        onMouseEnter: ()=>onRowEnter(row.id),
-        onMouseLeave: onRowLeave,
-        onFocus: ()=>onRowEnter(row.id),
-        onBlur: onRowLeave,
         children: [
+            /*#__PURE__*/ jsx(Guides, {
+                depth: row.depth
+            }),
             canExpand ? /*#__PURE__*/ jsx("button", {
                 type: "button",
                 "data-role": "toggle",
                 className: "ov-file-tree__toggle",
-                "aria-label": fillName(row.expanded ? text.collapse : text.expand, row.name),
+                "aria-label": isExpanded ? text.collapse.replace('{name}', row.name) : text.expand.replace('{name}', row.name),
                 tabIndex: -1,
-                disabled: !onToggleExpand || row.disabled || row.busy,
-                onClick: (event)=>{
-                    event.stopPropagation();
-                    onToggleExpand?.(row);
-                },
-                children: /*#__PURE__*/ jsx(Chevron, {
-                    expanded: Boolean(row.expanded)
+                disabled: !onToggleExpand || row.disabled,
+                onClick: handleToggle,
+                children: row.busy ? ctx.renderSpinner?.() ?? /*#__PURE__*/ jsx("span", {
+                    className: "ov-file-tree__spinner"
+                }) : /*#__PURE__*/ jsx(FileTreeChevron, {
+                    open: isExpanded
                 })
             }) : /*#__PURE__*/ jsx("span", {
                 "aria-hidden": "true",
@@ -142,9 +476,9 @@ function FileTreeEntryRowView({ row, ctx }) {
             }),
             /*#__PURE__*/ jsx("span", {
                 className: "ov-file-tree__icon-slot",
-                children: isDirectory ? /*#__PURE__*/ jsx(FolderIcon, {
-                    open: Boolean(row.expanded)
-                }) : /*#__PURE__*/ jsx(FileIcon, {})
+                children: isDirectory ? /*#__PURE__*/ jsx(FileTreeFolderIcon, {
+                    open: isExpanded
+                }) : renderRowIcon?.(row) ?? /*#__PURE__*/ jsx(FileTreeFileIcon, {})
             }),
             /*#__PURE__*/ jsxs("span", {
                 className: "ov-file-tree__label-group",
@@ -154,16 +488,17 @@ function FileTreeEntryRowView({ row, ctx }) {
                         title: row.name,
                         children: row.name
                     }),
-                    row.description ? /*#__PURE__*/ jsx("span", {
+                    description ? /*#__PURE__*/ jsx("span", {
                         className: "ov-file-tree__description",
-                        children: row.description
+                        children: description
                     }) : null
                 ]
             }),
-            row.busy ? /*#__PURE__*/ jsx(Spinner, {}) : null,
+            row.busy && !canExpand ? /*#__PURE__*/ jsx("span", {
+                className: "ov-file-tree__spinner"
+            }) : null,
             row.expiresAt ? /*#__PURE__*/ jsx("span", {
                 className: "ov-file-tree__expiry",
-                title: row.expiresAt,
                 children: onOpenRetentionSettings ? /*#__PURE__*/ jsx("button", {
                     type: "button",
                     className: "ov-file-tree__expiry-action",
@@ -181,117 +516,122 @@ function FileTreeEntryRowView({ row, ctx }) {
             dashboard ? /*#__PURE__*/ jsx("span", {
                 className: "ov-file-tree__dashboard",
                 children: dashboard
-            }) : null,
-            tooltip && tooltipRowId === row.id ? /*#__PURE__*/ jsx("span", {
-                role: "tooltip",
-                className: "ov-file-tree__tooltip",
-                children: tooltip
             }) : null
         ]
     });
-}
-function isWholeTreeError(rows) {
-    if (1 !== rows.length) return false;
-    const [row] = rows;
-    return row?.kind === 'error' && !row.parentId;
-}
-function StateRow({ row, ctx, attributes, tone, children }) {
-    const { className: extraClassName, style: extraStyle, ...extraAttributes } = ctx.getRowAttributes?.(row) ?? {};
-    return /*#__PURE__*/ jsx("div", {
-        role: "treeitem",
-        "aria-level": row.depth + 1,
-        "aria-selected": false,
-        ...attributes,
-        ...extraAttributes,
-        [FILE_TREE_ROW_ATTRIBUTE]: row.id,
-        className: [
-            'ov-file-tree__child-row',
-            extraClassName
-        ].filter(Boolean).join(' '),
-        "data-tone": tone,
-        style: {
-            ...rowIndent(row),
-            ...extraStyle
-        },
-        children: children
+    const custom = renderRowTooltip?.(row);
+    const hasContent = renderRowTooltip ? null != custom && false !== custom : null !== resolveFileTreeInfoCopy(row, ctx.infoLabels);
+    if (!hasContent) return rowNode;
+    const tooltipContent = /*#__PURE__*/ jsx(FileTreeTooltipContent, {
+        row: row,
+        infoLabels: ctx.infoLabels,
+        renderRowTooltip: renderRowTooltip
+    });
+    return /*#__PURE__*/ jsx(Popover, {
+        content: tooltipContent,
+        placement: "right",
+        trigger: "hover",
+        children: rowNode
     });
 }
-function ChildRow({ row, ctx }) {
-    const { text, onLoadMore, onRetry } = ctx;
+function FileTreeStateRow({ row, ctx }) {
+    const { text, onLoadMore, onRetry, getRowAttributes, renderSpinner } = ctx;
+    const spinner = renderSpinner?.() ?? /*#__PURE__*/ jsx("span", {
+        className: "ov-file-tree__spinner"
+    });
+    const extra = getRowAttributes?.(row) ?? {};
+    const { className: extraClassName, style: extraStyle, ...extraAttributes } = extra;
+    const shell = (children, busy = false)=>/*#__PURE__*/ jsxs("div", {
+            role: "treeitem",
+            "aria-level": row.depth + 1,
+            "aria-selected": false,
+            "aria-busy": busy || void 0,
+            ...extraAttributes,
+            [FILE_TREE_ROW_ATTRIBUTE]: row.id,
+            className: [
+                'ov-file-tree__state-row',
+                extraClassName
+            ].filter(Boolean).join(' '),
+            style: {
+                ...rowStyle(row.depth),
+                ...extraStyle
+            },
+            children: [
+                /*#__PURE__*/ jsx(Guides, {
+                    depth: row.depth
+                }),
+                children
+            ]
+        });
     switch(row.kind){
         case 'loading':
-            return /*#__PURE__*/ jsxs(StateRow, {
-                row: row,
-                ctx: ctx,
-                attributes: {
-                    'aria-busy': true
-                },
+            return shell(/*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         className: "ov-file-tree__toggle-spacer"
                     }),
-                    /*#__PURE__*/ jsx(Spinner, {}),
+                    spinner,
                     /*#__PURE__*/ jsx("span", {
                         className: "ov-file-tree__muted",
                         children: text.loading
                     })
                 ]
-            });
+            }), true);
         case 'load-more':
-            return /*#__PURE__*/ jsx(StateRow, {
-                row: row,
-                ctx: ctx,
-                children: /*#__PURE__*/ jsxs("button", {
-                    type: "button",
-                    className: "ov-file-tree__child-action",
-                    disabled: row.loading || !onLoadMore,
-                    onClick: ()=>onLoadMore?.(row),
-                    children: [
-                        row.loading ? /*#__PURE__*/ jsx(Spinner, {}) : null,
-                        text.loadMore
-                    ]
-                })
-            });
+            return shell(/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__toggle-spacer"
+                    }),
+                    row.loading ? spinner : null,
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "ov-file-tree__action",
+                        disabled: row.loading || !onLoadMore,
+                        onClick: ()=>onLoadMore?.(row),
+                        children: row.loading ? text.loading : text.loadMore
+                    })
+                ]
+            }), Boolean(row.loading));
         case 'error':
-            return /*#__PURE__*/ jsxs(StateRow, {
-                row: row,
-                ctx: ctx,
-                tone: "error",
+            return shell(/*#__PURE__*/ jsxs(Fragment, {
                 children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__toggle-spacer"
+                    }),
                     /*#__PURE__*/ jsx("span", {
                         className: "ov-file-tree__muted",
                         children: row.message ?? text.error
                     }),
                     /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: "ov-file-tree__child-action",
+                        className: "ov-file-tree__action",
                         disabled: !onRetry,
                         onClick: ()=>onRetry?.(row),
                         children: text.retry
                     })
                 ]
-            });
+            }));
         case 'empty':
-            return /*#__PURE__*/ jsx(StateRow, {
-                row: row,
-                ctx: ctx,
-                children: /*#__PURE__*/ jsx("span", {
-                    className: "ov-file-tree__muted",
-                    children: text.empty
-                })
-            });
+            return shell(/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__toggle-spacer"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-tree__muted",
+                        children: text.empty
+                    })
+                ]
+            }));
         default:
-            return /*#__PURE__*/ jsx(FileTreeEntryRowView, {
-                row: row,
-                ctx: ctx
-            });
+            return null;
     }
 }
-function FileTreeRowView({ row, ctx }) {
-    return /*#__PURE__*/ jsx(ChildRow, {
-        row: row,
-        ctx: ctx
-    });
+function isWholeTreeError(rows) {
+    if (1 !== rows.length) return false;
+    const [row] = rows;
+    return row?.kind === 'error' && !row.parentId;
 }
 function FileTreeBody({ rows, isReady, text, loadingFallback, errorFallback, emptyFallback, ctx }) {
     if (!isReady) return /*#__PURE__*/ jsx("div", {
@@ -321,85 +661,55 @@ function FileTreeBody({ rows, isReady, text, loadingFallback, errorFallback, emp
     return /*#__PURE__*/ jsx("div", {
         role: "group",
         className: "ov-file-tree__rows",
-        children: rows.map((row)=>/*#__PURE__*/ jsx(FileTreeRowView, {
+        children: rows.map((row)=>'entry' === row.kind ? /*#__PURE__*/ jsx(FileTreeRowView, {
+                row: row,
+                ctx: ctx
+            }, row.id) : /*#__PURE__*/ jsx(FileTreeStateRow, {
                 row: row,
                 ctx: ctx
             }, row.id))
     });
 }
-function queryRowElements(root) {
+function visibleRows(root) {
     if (!root) return [];
     return Array.from(root.querySelectorAll(`[${FILE_TREE_ROW_ATTRIBUTE}]`));
 }
-function findRowElement(root, id) {
-    if (!root) return null;
-    return root.querySelector(`[${FILE_TREE_ROW_ATTRIBUTE}="${CSS.escape(id)}"]`);
-}
-function moveFocus(current, root, delta) {
-    const elements = queryRowElements(root);
-    const index = elements.indexOf(current);
-    if (-1 === index) return;
-    elements[index + delta]?.focus();
-}
 function handleRowKeyDown(event, { root, row, onSelect, onToggleExpand }) {
+    const isDirectory = 'directory' === row.type;
+    const expanded = Boolean(row.expanded);
+    const canToggle = isDirectory && !row.disabled;
     switch(event.key){
         case 'ArrowDown':
-            event.preventDefault();
-            moveFocus(event.currentTarget, root, 1);
-            break;
         case 'ArrowUp':
-            event.preventDefault();
-            moveFocus(event.currentTarget, root, -1);
-            break;
+            {
+                event.preventDefault();
+                const rows = visibleRows(root);
+                const index = rows.indexOf(event.currentTarget);
+                if (-1 === index) return;
+                rows[index + ('ArrowDown' === event.key ? 1 : -1)]?.focus();
+                return;
+            }
         case 'ArrowRight':
-            if (!row.disabled && !row.busy && 'directory' === row.type && !row.expanded) {
+            if (canToggle && !expanded) {
                 event.preventDefault();
                 onToggleExpand?.(row);
             }
-            break;
+            return;
         case 'ArrowLeft':
-            if (!row.disabled && !row.busy && 'directory' === row.type && row.expanded) {
+            if (canToggle && expanded) {
                 event.preventDefault();
                 onToggleExpand?.(row);
             }
-            break;
+            return;
         case 'Enter':
         case ' ':
             event.preventDefault();
             if (!row.disabled) onSelect?.(row);
-            break;
+            return;
         default:
-            break;
+            return;
     }
 }
-function useRowTooltip(delay = 400) {
-    const [tooltipRowId, setTooltipRowId] = useState(null);
-    const timerRef = useRef(void 0);
-    useEffect(()=>()=>{
-            if (void 0 !== timerRef.current) window.clearTimeout(timerRef.current);
-        }, []);
-    const show = useCallback((rowId)=>{
-        if (void 0 !== timerRef.current) window.clearTimeout(timerRef.current);
-        timerRef.current = window.setTimeout(()=>{
-            setTooltipRowId(rowId);
-            timerRef.current = void 0;
-        }, delay);
-    }, [
-        delay
-    ]);
-    const hide = useCallback(()=>{
-        if (void 0 !== timerRef.current) {
-            window.clearTimeout(timerRef.current);
-            timerRef.current = void 0;
-        }
-        setTooltipRowId(null);
-    }, []);
-    return {
-        tooltipRowId,
-        show,
-        hide
-    };
-}
 function useFileTreeActions(props) {
     const pending = useRef(new Set());
     const { select, toggleExpand, loadMore, retry, openRetentionSettings } = props.operations ?? {};
@@ -423,13 +733,35 @@ function useFileTreeActions(props) {
         onOpenRetentionSettings: openRetentionSettings ? (uri)=>void run(`retention:${uri}`, openRetentionSettings, props.onOpenRetentionSettings, uri) : void 0
     };
 }
-const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, operations, selectedId, isReady = true, loadingFallback, errorFallback, emptyFallback, slots, labels, getRowAttributes, renderDashboard, renderRowTooltip, onSelect, onToggleExpand, onLoadMore, onRetry, onOpenRetentionSettings, className, ...rest }, ref) {
+function FileTreeSpinner({ className, ...rest }) {
+    return /*#__PURE__*/ jsx("span", {
+        "aria-hidden": "true",
+        ...rest,
+        className: [
+            'ov-file-tree__spinner',
+            className
+        ].filter(Boolean).join(' ')
+    });
+}
+const DEFAULT_LABELS = {
+    empty: 'No files yet',
+    error: 'Failed to load',
+    retry: 'Retry',
+    loadMore: 'Load more',
+    loading: 'Loading…',
+    expand: 'Expand {name}',
+    collapse: 'Collapse {name}'
+};
+function findRow(root, id) {
+    return root?.querySelector(`[${FILE_TREE_ROW_ATTRIBUTE}="${CSS.escape(id)}"]`) ?? null;
+}
+const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, operations, selectedId, isReady = true, loadingFallback, errorFallback, emptyFallback, slots, labels, getRowAttributes, renderDashboard, renderRowTooltip, renderRowIcon, onSelect, onToggleExpand, onLoadMore, onRetry, onOpenRetentionSettings, className, ...rest }, ref) {
     const rootRef = useRef(null);
     const text = {
         ...DEFAULT_LABELS,
-        ...labels
+        ...labels,
+        info: labels?.info ?? DEFAULT_LABELS.info
     };
-    const tooltip = useRowTooltip();
     const actions = useFileTreeActions({
         operations,
         onSelect,
@@ -439,9 +771,9 @@ const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, operations,
         onOpenRetentionSettings
     });
     useImperativeHandle(ref, ()=>({
-            getRowElement: (id)=>findRowElement(rootRef.current, id),
+            getRowElement: (id)=>findRow(rootRef.current, id),
             scrollToRow: (id, options)=>{
-                const element = findRowElement(rootRef.current, id);
+                const element = findRow(rootRef.current, id);
                 if (!element) return false;
                 element.scrollIntoView({
                     block: 'nearest',
@@ -450,22 +782,22 @@ const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, operations,
                 return true;
             }
         }), []);
-    const rowContext = {
+    const ctx = {
         text,
+        infoLabels: labels?.info,
         selectedId,
-        tooltipRowId: tooltip.tooltipRowId,
         getRowAttributes,
         renderDashboard,
         renderRowTooltip,
+        renderRowIcon,
+        renderSpinner: slots?.spinner ? ()=>slots.spinner : void 0,
         ...actions,
         onRowKeyDown: (event, row)=>handleRowKeyDown(event, {
                 root: rootRef.current,
                 row,
                 onSelect: actions.onSelect,
                 onToggleExpand: actions.onToggleExpand
-            }),
-        onRowEnter: tooltip.show,
-        onRowLeave: tooltip.hide
+            })
     };
     return /*#__PURE__*/ jsxs("div", {
         ...rest,
@@ -490,10 +822,10 @@ const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, operations,
                     loadingFallback: loadingFallback,
                     errorFallback: errorFallback,
                     emptyFallback: emptyFallback,
-                    ctx: rowContext
+                    ctx: ctx
                 })
             })
         ]
     });
 });
-export { FILE_TREE_ROW_ATTRIBUTE, file_tree_FileTree as FileTree };
+export { DEFAULT_INFO_LABELS, FILE_TREE_ROW_ATTRIBUTE, FileTreeSpinner, file_tree_FileTree as FileTree, resolveFileTreeInfoKey, resolveInfoCopy, showsInlineDescription, splitVikingUri };