@openviking/react 0.1.1 → 0.1.2

package/dist/components/file-tree/file-tree-row-context.d.ts

@@ -1,24 +1,46 @@
-import type { KeyboardEvent, ReactNode } from 'react';
-import type { HTMLAttributes } from 'react';
-import type { FileTreeEntryRow, FileTreeErrorRow, FileTreeLabels, FileTreeLoadMoreRow, FileTreeRow } from './types.js';
-/** 渲染行所需的外部输入，由组件主体注入。 */
+import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { FileTreeEntryRow, FileTreeErrorRow, FileTreeInfoLabels, FileTreeLabels, FileTreeLoadMoreRow, FileTreeRow } from './types.js';
+/**
+ * 文案的内部形状：标量项都有默认值，嵌套的 `info` 保持可选。
+ *
+ * Internal copy shape: every scalar has a default, while the nested `info`
+ * stays optional.
+ */
+export type ResolvedLabels = Required<Omit<FileTreeLabels, 'info'>> & Pick<FileTreeLabels, 'info'>;
+/** 渲染行所需的外部输入，由组件主体注入。Row rendering inputs, injected by the tree. */
 export interface FileTreeRowContext {
-    text: Required<FileTreeLabels>;
+    /** 已合并默认值的文案。Copy with defaults merged in. */
+    text: ResolvedLabels;
+    /** 目录说明的宿主覆盖，用于解析内置说明。Host overrides for directory copy. */
+    infoLabels?: FileTreeInfoLabels;
+    /** 当前选中的行 id。Currently selected row id. */
     selectedId?: string | null;
+    /** 当前展示浮层的行 id。Row whose tooltip is showing. */
     tooltipRowId: string | null;
+    /** 为行追加属性。Extra attributes for a row. */
     getRowAttributes?: (row: FileTreeRow) => HTMLAttributes<HTMLDivElement>;
+    /** 行尾指示器。Row-end indicator. */
     renderDashboard?: (row: FileTreeEntryRow) => ReactNode;
+    /** 悬停浮层内容。Hover content. */
     renderRowTooltip?: (row: FileTreeEntryRow) => ReactNode;
+    /** 行首文件图标。Leading icon for a file row. */
+    renderRowIcon?: (row: FileTreeEntryRow) => ReactNode;
+    /** 加载转圈；省略时用内置的 CSS 圆环。Loading spinner; defaults to the CSS ring. */
+    renderSpinner?: () => ReactNode;
+    /** 选中。Selects a row. */
     onSelect?: (row: FileTreeEntryRow) => void;
+    /** 展开或折叠。Expands or collapses a directory. */
     onToggleExpand?: (row: FileTreeEntryRow) => void;
+    /** 加载下一页。Loads the next page. */
     onLoadMore?: (row: FileTreeLoadMoreRow) => void;
+    /** 重试失败的子节点。Retries a failed children load. */
     onRetry?: (row: FileTreeErrorRow) => void;
+    /** 打开保留策略设置。Opens retention settings. */
     onOpenRetentionSettings?: (uri: string) => void;
+    /** 行的键盘处理。Key handling for a row. */
     onRowKeyDown: (event: KeyboardEvent<HTMLDivElement>, row: FileTreeEntryRow) => void;
+    /** 指针进入行。Pointer enters a row. */
     onRowEnter: (rowId: string) => void;
+    /** 指针离开行。Pointer leaves a row. */
     onRowLeave: () => void;
 }
-/** 行按深度缩进，其余内边距由样式负责。 */
-export declare function rowIndent(row: FileTreeRow): {
-    paddingLeft: string;
-};

package/dist/components/file-tree/file-tree-row-shared.d.ts

@@ -0,0 +1,11 @@
+/** 每一级缩进与祖先连线的宽度。Indent per level, and the guide through it. */
+export declare const INDENT = 20;
+export declare const CHEVRON_SIZE = 16;
+/** 行按深度缩进。Indents a row by its depth. */
+export declare function rowStyle(depth: number): {
+    paddingLeft: number;
+};
+/** 每一级祖先画一条竖线，上下各溢出 1px 让相邻行接上。 */
+export declare function Guides({ depth }: {
+    depth: number;
+}): import("react").JSX.Element;

package/dist/components/file-tree/file-tree-spinner.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * 目录加载子节点时，替换展开箭头显示的转圈。用纯 CSS 画环，不依赖图标资源。
+ * 需要换成图标或品牌化的加载态时，改用 `FileTree` 的 `slots.spinner` 覆盖。
+ *
+ * The spinner shown in place of the expand chevron while a directory loads its
+ * children. Drawn with CSS alone, so it needs no icon asset. To swap in an icon
+ * or a branded loader, override it with `FileTree`'s `slots.spinner`.
+ */
+export declare function FileTreeSpinner({ className, ...rest }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;

package/dist/components/file-tree/file-tree-state-row.d.ts

@@ -0,0 +1,7 @@
+import type { FileTreeRowContext } from './file-tree-row-context.js';
+import type { FileTreeRow } from './types.js';
+/** 非条目行：加载、分页、失败与空态都只占一行，不参与选中。 */
+export declare function FileTreeStateRow({ row, ctx, }: {
+    row: FileTreeRow;
+    ctx: FileTreeRowContext;
+}): import("react").JSX.Element | null;

package/dist/components/file-tree/file-tree-tooltip-surface.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { FileTreeEntryRow, FileTreeInfoLabels } from './types.js';
+/**
+ * 行浮层的外壳。宿主提供 `renderRowTooltip` 时只渲染它返回的内容；它返回 `null`
+ * 表示这一行不显示浮层，不回退到内置内容。
+ *
+ * 宿主没有提供时，用按 `uri` 解析的内置浮层。先解析内容、再决定是否创建外壳，
+ * 因此没有可显示内容时不会留下一个只有背景和内边距的空壳。
+ *
+ * The shell around a row tooltip. When the host supplies `renderRowTooltip`, only
+ * its result renders; returning `null` hides the tooltip for that row and does
+ * not fall back to the built-in content.
+ *
+ * When the host supplies none, the built-in tooltip resolved from the row `uri`
+ * renders. The content is resolved before the shell is created, so with nothing
+ * to show no empty shell with just background and padding is left behind.
+ */
+export declare function FileTreeTooltipSurface({ row, infoLabels, renderRowTooltip, }: {
+    row: FileTreeEntryRow;
+    infoLabels?: FileTreeInfoLabels;
+    renderRowTooltip?: (row: FileTreeEntryRow) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/components/file-tree/file-tree-tooltip.d.ts

@@ -1,8 +1,14 @@
 /**
- * 悬停停留一段时间后才展示行提示。
+ * 悬停停留一段时间后才展示行浮层。
  *
- * 用 timeout 而不是 CSS 延迟，是因为提示内容由宿主渲染、需要按行 id 切换；
- * 卸载或换行时清掉未触发的定时器，避免迟到的回调写入已失效的行。
+ * 用定时器而不是 CSS 延迟，是因为浮层内容由宿主渲染、需要按行 id 切换；卸载或
+ * 换行时清掉未触发的定时器，避免迟到的回调写入已失效的行。
+ *
+ * Shows a row tooltip once the pointer has rested for a while.
+ *
+ * A timer rather than a CSS delay, because the host renders the content and it
+ * switches per row id; a pending timer is cleared on unmount or when the row
+ * changes, so a late callback never writes to a row that is gone.
  */
 export declare function useRowTooltip(delay?: number): {
     tooltipRowId: string | null;

package/dist/components/file-tree/file-tree.d.ts

@@ -1,4 +1,15 @@
 import type { FileTreeComponent } from './types.js';
+export { FileTreeSpinner } from './file-tree-spinner.js';
+export { resolveFileTreeInfoKey, showsInlineDescription, splitVikingUri, } from './file-tree-info.js';
+export { DEFAULT_INFO_LABELS, resolveInfoCopy, } from './file-tree-info-labels.js';
 export { FILE_TREE_ROW_ATTRIBUTE } from './types.js';
-export type { FileTreeChildRow, FileTreeComponent, FileTreeEmptyRow, FileTreeEntryRow, FileTreeErrorRow, FileTreeHandle, FileTreeLabels, FileTreeLoadingRow, FileTreeLoadMoreRow, FileTreeOperations, FileTreeProps, FileTreeRow, FileTreeRowBase, FileTreeSlots, } from './types.js';
+export type { FileTreeChildRow, FileTreeComponent, FileTreeEmptyRow, FileTreeEntryRow, FileTreeErrorRow, FileTreeHandle, FileTreeInfoKey, FileTreeInfoLabels, FileTreeLabels, FileTreeLoadingRow, FileTreeLoadMoreRow, FileTreeOperations, FileTreeProps, FileTreeRow, FileTreeRowBase, FileTreeSlots, } from './types.js';
+/**
+ * 目录树。宿主把树状态展平成有序行列表传进来，组件负责渲染、键盘交互，
+ * 并在操作成功后通知。
+ *
+ * A file tree. The host flattens its tree state into an ordered row list; the
+ * component renders it, handles keyboard interaction and reports successful
+ * operations.
+ */
 export declare const FileTree: FileTreeComponent;

package/dist/components/file-tree/style.css

@@ -1,8 +1,102 @@
+.ov-agent-connect, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-light-default: #f5f7ff;
+  --ov-ui-connect-glow-warm-default: #ff952b0a;
+  --ov-ui-connect-glow-pink-default: #fb4fbc0f;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc0a;
+  --ov-ui-on-primary-default: #fff;
+  --ov-ui-text-1-default: #0b0b0f;
+  --ov-ui-text-2-default: #3f3f51;
+  --ov-ui-text-3-default: #6e718c;
+  --ov-ui-text-description-default: #0006;
+  --ov-ui-text-disabled-default: #a5a7bb;
+  --ov-ui-border-1-default: #f0f2fa;
+  --ov-ui-border-2-default: #e1e4f2;
+  --ov-ui-border-3-default: #d7daea;
+  --ov-ui-bg-1-default: #fff;
+  --ov-ui-bg-3-default: #f7f8fd;
+  --ov-ui-bg-4-default: #f6f7fa;
+  --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-focus-default: #5252ff;
+  --ov-ui-fill-hover-default: #f1f2f9;
+  --ov-ui-status-error-default: #c43838;
+  --ov-ui-warning-default: #b26a00;
+  --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-agent-connect, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5f5fff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #4242ba;
+  --ov-ui-primary-light-default: #1a1632;
+  --ov-ui-connect-glow-warm-default: #ff952b05;
+  --ov-ui-connect-glow-pink-default: #fb4fbc08;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc05;
+  --ov-ui-text-1-default: #c7ccd6;
+  --ov-ui-text-2-default: #9da3af;
+  --ov-ui-text-3-default: #737a87;
+  --ov-ui-text-description-default: #fff6;
+  --ov-ui-text-disabled-default: #42464e;
+  --ov-ui-border-1-default: #23252a;
+  --ov-ui-border-2-default: #2e3138;
+  --ov-ui-border-3-default: #3a3d45;
+  --ov-ui-bg-1-default: #131416;
+  --ov-ui-bg-3-default: #1b1d21;
+  --ov-ui-bg-4-default: #202227;
+  --ov-ui-bg-5-default: #23252a;
+  --ov-ui-focus-default: #5f5fff;
+  --ov-ui-fill-hover-default: #23252a;
+  --ov-ui-status-error-default: #ff9595;
+  --ov-ui-warning-default: #e0a04a;
+  --ov-ui-warning-light-default: #3a2f14;
+  --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.ov-agent-connect {
+  --ov-ui-connect-card-default: #fbfbfc;
+  --ov-ui-connect-tabs-default: #f7f7f9;
+  --ov-ui-connect-selected-default: #f3f4f7;
+  --ov-ui-connect-border-default: #edeef2;
+  --ov-ui-connect-outline-default: #e1e3ea;
+  --ov-ui-connect-muted-default: #787c91;
+  --ov-ui-connect-notice-default: #2e2984;
+}
+
+.dark .ov-agent-connect {
+  --ov-ui-connect-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-tabs-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-selected-default: var(--ov-ui-bg-4-default);
+  --ov-ui-connect-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-connect-outline-default: var(--ov-ui-border-2-default);
+  --ov-ui-connect-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-connect-notice-default: var(--ov-ui-text-2-default);
+}
+
 .ov-file-tree {
+  --ov-ui-file-tree-row-height: 32px;
+  --ov-ui-file-tree-row-radius: 4px;
+  --ov-ui-file-tree-indent: 20px;
+  --ov-ui-file-tree-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default, #0b0b0f));
+  --ov-ui-file-tree-text-muted: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default, #6e718c));
+  --ov-ui-file-tree-icon: var(--ov-ui-color-text-2, var(--ov-ui-text-2-default, #3f3f51));
+  --ov-ui-file-tree-row-hover: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default, #f1f2f9));
+  --ov-ui-file-tree-row-selected: var(--ov-ui-color-bg-4, var(--ov-ui-bg-4-default, #f6f7fa));
+  --ov-ui-file-tree-guide: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  --ov-ui-file-tree-spinner-track: var(--ov-ui-color-border-3, var(--ov-ui-border-3-default, #d7daea));
+  --ov-ui-file-tree-spinner: var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff));
+  --ov-ui-file-tree-action: var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff));
+  --ov-ui-file-tree-warning: var(--ov-ui-color-warning, var(--ov-ui-warning-default, #b26a00));
   box-sizing: border-box;
   min-width: 0;
   min-height: 0;
-  color: inherit;
+  color: var(--ov-ui-file-tree-text);
   flex-direction: column;
   font-family: inherit;
   font-size: 13px;
@@ -26,11 +120,10 @@
   display: flex;
 }
 
-.ov-file-tree__row {
+.ov-file-tree__row, .ov-file-tree__state-row {
   box-sizing: border-box;
-  border-radius: var(--ov-ui-radius, 6px);
-  height: 28px;
-  color: inherit;
+  height: var(--ov-ui-file-tree-row-height);
+  border-radius: var(--ov-ui-file-tree-row-radius);
   cursor: default;
   -webkit-user-select: none;
   user-select: none;
@@ -42,24 +135,37 @@
   position: relative;
 }
 
-.ov-file-tree__row:hover {
-  background: var(--ov-ui-row-hover, color-mix(in srgb, currentColor 6%, transparent));
+.ov-file-tree__row {
+  transition: background-color .12s;
 }
 
-.ov-file-tree__row:focus-visible {
-  outline: 2px solid var(--ov-ui-focus-ring, #2563c5);
-  outline-offset: -2px;
+.ov-file-tree__row:hover {
+  background-color: var(--ov-ui-file-tree-row-hover);
 }
 
 .ov-file-tree__row[data-selected] {
-  background: var(--ov-ui-row-selected, #2563c51a);
+  background-color: var(--ov-ui-file-tree-row-selected);
+}
+
+.ov-file-tree__row:focus-visible, .ov-file-tree__state-row:focus-visible {
+  outline: 2px solid var(--ov-ui-file-tree-action);
+  outline-offset: -2px;
 }
 
 .ov-file-tree__row[data-disabled] {
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  color: var(--ov-ui-file-tree-text-muted);
   cursor: not-allowed;
 }
 
+.ov-file-tree__guide {
+  background-color: var(--ov-ui-file-tree-guide);
+  pointer-events: none;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
 .ov-file-tree__toggle, .ov-file-tree__toggle-spacer {
   flex: none;
   justify-content: center;
@@ -70,7 +176,7 @@
 }
 
 .ov-file-tree__toggle {
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  color: var(--ov-ui-file-tree-text-muted);
   cursor: pointer;
   background: none;
   border: 0;
@@ -78,12 +184,16 @@
   padding: 0;
 }
 
-.ov-file-tree__toggle:hover {
-  background: color-mix(in srgb, currentColor 10%, transparent);
+.ov-file-tree__toggle:hover:not(:disabled) {
+  background-color: var(--ov-ui-file-tree-row-hover);
+}
+
+.ov-file-tree__toggle:disabled {
+  cursor: default;
 }
 
 .ov-file-tree__chevron {
-  transition: transform .12s;
+  transition: transform .15s cubic-bezier(.22, 1, .36, 1);
 }
 
 .ov-file-tree__chevron[data-expanded] {
@@ -91,22 +201,47 @@
 }
 
 .ov-file-tree__icon-slot {
-  color: var(--ov-ui-icon, color-mix(in srgb, currentColor 62%, transparent));
+  width: 16px;
+  height: 16px;
+  color: var(--ov-ui-file-tree-icon);
   flex: none;
+  justify-content: center;
   align-items: center;
   display: inline-flex;
 }
 
-.ov-file-tree__icon {
-  display: block;
+.ov-file-tree__folder {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  position: relative;
+}
+
+.ov-file-tree__folder-layer {
+  opacity: 0;
+  width: 14px;
+  height: 14px;
+  transition: opacity .22s cubic-bezier(.22, 1, .36, 1);
+  position: absolute;
+  inset: 0;
+}
+
+.ov-file-tree__folder-layer[data-open="true"] {
+  opacity: 1;
+}
+
+.ov-file-tree__file-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .ov-file-tree__label-group {
   flex: auto;
-  align-items: baseline;
-  gap: 6px;
+  align-items: center;
+  gap: 8px;
   min-width: 0;
   display: flex;
+  overflow: hidden;
 }
 
 .ov-file-tree__label {
@@ -116,7 +251,7 @@
 }
 
 .ov-file-tree__description {
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  color: var(--ov-ui-file-tree-text-muted);
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 12px;
@@ -124,17 +259,14 @@
 }
 
 .ov-file-tree__level {
-  background: var(--ov-ui-chip, color-mix(in srgb, currentColor 10%, transparent));
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
-  border-radius: 3px;
+  color: var(--ov-ui-file-tree-text-muted);
   flex: none;
-  padding: 0 4px;
-  font-size: 11px;
-  line-height: 16px;
+  margin-left: auto;
+  font-size: 14px;
 }
 
 .ov-file-tree__expiry {
-  color: var(--ov-ui-warning, #b26a00);
+  color: var(--ov-ui-file-tree-warning);
   flex: none;
   font-size: 12px;
 }
@@ -157,10 +289,10 @@
 
 .ov-file-tree__tooltip {
   z-index: 1;
-  border-radius: var(--ov-ui-radius, 6px);
-  background: var(--ov-ui-tooltip-bg, #1f2329);
+  border-radius: var(--ov-ui-file-tree-row-radius);
+  background: var(--ov-ui-color-tooltip-bg, var(--ov-ui-tooltip-bg-default, #1f2329));
   max-width: 320px;
-  color: var(--ov-ui-tooltip-text, #fff);
+  color: var(--ov-ui-color-tooltip-text, var(--ov-ui-tooltip-text-default, #fff));
   pointer-events: none;
   padding: 6px 8px;
   font-size: 12px;
@@ -170,57 +302,75 @@
   left: 0;
 }
 
-.ov-file-tree__child-row {
-  box-sizing: border-box;
-  height: 28px;
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
-  align-items: center;
-  gap: 6px;
-  padding-right: 8px;
+.ov-file-tree__info {
+  flex-direction: column;
+  gap: 4px;
   display: flex;
 }
 
-.ov-file-tree__child-row[data-tone="error"] {
-  color: var(--ov-ui-status-error, #c43838);
+.ov-file-tree__info-title {
+  word-break: break-all;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
-.ov-file-tree__child-action {
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  padding: 0;
-  text-decoration: underline;
+.ov-file-tree__info-row {
+  gap: 8px;
+  min-width: 0;
+  display: flex;
 }
 
-.ov-file-tree__child-action:disabled {
-  cursor: default;
-  opacity: .6;
+.ov-file-tree__info-label {
+  opacity: .65;
+  flex: none;
+}
+
+.ov-file-tree__info-value {
+  word-break: break-word;
+  min-width: 0;
+}
+
+.ov-file-tree__info-path {
+  opacity: .8;
+  word-break: break-all;
+  min-width: 0;
+}
+
+.ov-file-tree__state-row {
+  color: var(--ov-ui-file-tree-text-muted);
+}
+
+.ov-file-tree__state-row[data-tone="error"] {
+  color: var(--ov-ui-color-status-error, var(--ov-ui-status-error-default, #c43838));
 }
 
 .ov-file-tree__state {
   box-sizing: border-box;
+  min-height: 120px;
+  color: var(--ov-ui-file-tree-text-muted);
   justify-content: center;
   align-items: center;
-  min-height: 120px;
   padding: 24px;
   display: flex;
 }
 
 .ov-file-tree__muted {
   color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .ov-file-tree__spinner {
   box-sizing: border-box;
-  border: 1.5px solid;
-  border-right-color: #0000;
+  border: 1px solid var(--ov-ui-file-tree-spinner-track);
+  border-top-color: var(--ov-ui-file-tree-spinner);
   border-radius: 50%;
   flex: none;
   width: 12px;
   height: 12px;
-  animation: .72s linear infinite ov-file-tree-spin;
+  animation: .9s linear infinite ov-file-tree-spin;
   display: inline-block;
 }
 
@@ -230,8 +380,26 @@
   }
 }
 
+.ov-file-tree__action {
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  transition: color .12s;
+}
+
+.ov-file-tree__action:hover:not(:disabled) {
+  color: var(--ov-ui-file-tree-action);
+}
+
+.ov-file-tree__action:disabled {
+  cursor: default;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .ov-file-tree__chevron {
+  .ov-file-tree__chevron, .ov-file-tree__folder-layer {
     transition: none;
   }