@openviking/react 0.1.0 → 0.1.2

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

@@ -0,0 +1,21 @@
+import type { FileTreeInfoKey, FileTreeInfoLabels } from './types.js';
+/**
+ * 内置英文文案。`FileTreeLabels.info` 未提供的键沿用这里的值。
+ *
+ * Built-in English copy. Keys missing from `FileTreeLabels.info` fall back here.
+ */
+export declare const DEFAULT_INFO_LABELS: FileTreeInfoLabels;
+/**
+ * 按宿主的覆盖合并内置文案，键为单位。宿主的空字符串表示该键不显示，因此
+ * 合并时保留空串，由渲染方判断。
+ *
+ * Merges host overrides over the built-in copy, key by key. An empty host string
+ * means "hide this key", so it is kept and the renderer decides.
+ *
+ * Returns the copy of one key, or `undefined` when the key is hidden or has no
+ * copy.
+ */
+export declare function resolveInfoCopy(key: FileTreeInfoKey, hostLabels: FileTreeInfoLabels | undefined): {
+    description?: string;
+    triggerBehavior?: string;
+};

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

@@ -0,0 +1,43 @@
+import type { FileTreeEntryRow, FileTreeInfoLabels } from './types.js';
+export interface FileTreeInfoCopy {
+    /** 行名称，作为浮层标题。Row name, used as the tooltip title. */
+    title: string;
+    /** 说明，已按行内同样的优先级解析。Description, resolved with the same precedence as inline. */
+    description?: string;
+    /** 触发行为，只出现在浮层。Trigger copy, tooltip only. */
+    triggerBehavior?: string;
+    /** 完整路径。Full path. */
+    path: string;
+    /** 浮层里各行的字段名。Field names used inside the tooltip. */
+    fields: {
+        description: string;
+        triggerBehavior: string;
+        path: string;
+    };
+}
+/**
+ * 解析目录浮层要显示的内容，没有可显示内容时返回 `null`。
+ *
+ * 说明按 `row.description` → 内置文案的顺序解析，与行内一致：宿主给了就用宿主的
+ * （含显式空串），没给才用内置。调用方据此决定是否创建浮层外壳，避免留下一个
+ * 只有背景和内边距的空壳。
+ *
+ * Resolves what a directory tooltip should show, or `null` when there is nothing.
+ *
+ * The description resolves as `row.description` then built-in copy, matching the
+ * inline behaviour: a host value wins, including an explicit empty string, and
+ * the built-in copy applies only when absent. The caller uses this to decide
+ * whether to create the tooltip shell, so no empty shell is left behind.
+ */
+export declare function resolveFileTreeInfoCopy(row: FileTreeEntryRow, infoLabels?: FileTreeInfoLabels): FileTreeInfoCopy | null;
+/**
+ * 目录的默认浮层内容：说明、触发行为与路径。九类长期记忆的说明只出现在这里，
+ * 因此这个浮层是它们唯一的展示位置。
+ *
+ * The default tooltip content for a directory: description, trigger copy and
+ * path. The nine long-term-memory keys describe themselves here only, so this
+ * tooltip is the sole place their copy appears.
+ */
+export declare function FileTreeInfoTooltip({ copy }: {
+    copy: FileTreeInfoCopy;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+import type { FileTreeInfoKey } from './types.js';
+/**
+ * 把 `viking://` 地址拆成小写路径段，忽略协议、查询串与末尾斜杠。
+ *
+ * Splits a `viking://` address into lower-cased segments, ignoring the scheme,
+ * query string and trailing slashes.
+ */
+export declare function splitVikingUri(uri: string): string[];
+/**
+ * 按路径结构判定目录的语义键，判定不出来时返回 `null`。
+ *
+ * 只认路径形状，不认节点类型：同名目录在目录与文件位置上含义相同，由调用方
+ * 决定是否使用。判定规则与产品无关，任何宿主都能直接命中。
+ *
+ * Resolves the semantic key of a directory from its path structure, or `null`
+ * when nothing matches.
+ *
+ * Only the path shape is inspected, not the node type: a name means the same
+ * thing whether it is a directory or a file, and the caller decides whether to
+ * use it. The rules are product-neutral, so any host matches them.
+ */
+export declare function resolveFileTreeInfoKey(uri: string): FileTreeInfoKey | null;
+/**
+ * 该键的说明是否显示在行内。判定不出来时为 `false`。
+ *
+ * Whether the description of this key renders inline; `false` when nothing
+ * matched.
+ */
+export declare function showsInlineDescription(key: FileTreeInfoKey | null): boolean;

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

@@ -0,0 +1,14 @@
+import type { KeyboardEvent } from 'react';
+import type { FileTreeEntryRow } from './types.js';
+/**
+ * 树行的键盘语义：上下移动焦点，左右展开折叠，回车与空格选中。
+ *
+ * Keyboard semantics for a row: up/down move focus, left/right collapse and
+ * expand, Enter and Space select.
+ */
+export declare function handleRowKeyDown(event: KeyboardEvent<HTMLDivElement>, { root, row, onSelect, onToggleExpand, }: {
+    root: HTMLElement | null;
+    row: FileTreeEntryRow;
+    onSelect?: (row: FileTreeEntryRow) => void;
+    onToggleExpand?: (row: FileTreeEntryRow) => void;
+}): void;

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

@@ -0,0 +1,46 @@
+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 {
+    /** 已合并默认值的文案。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;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 悬停停留一段时间后才展示行浮层。
+ *
+ * 用定时器而不是 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;
+    show: (rowId: string) => void;
+    hide: () => void;
+};

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

@@ -1 +1,15 @@
-export {};
+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, 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/index.d.ts

@@ -0,0 +1 @@
+export * from './file-tree.js';

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

@@ -1,2 +1,412 @@
+.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: var(--ov-ui-file-tree-text);
+  flex-direction: column;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+}
+
+.ov-file-tree__toolbar {
+  flex: none;
+  padding: 4px 0 8px;
+}
+
+.ov-file-tree__body {
+  flex: auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.ov-file-tree__rows {
+  flex-direction: column;
+  display: flex;
+}
+
+.ov-file-tree__row, .ov-file-tree__state-row {
+  box-sizing: border-box;
+  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;
+  outline: none;
+  align-items: center;
+  gap: 4px;
+  padding-right: 8px;
+  display: flex;
+  position: relative;
+}
+
+.ov-file-tree__row {
+  transition: background-color .12s;
+}
+
+.ov-file-tree__row:hover {
+  background-color: var(--ov-ui-file-tree-row-hover);
+}
+
+.ov-file-tree__row[data-selected] {
+  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-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;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.ov-file-tree__toggle {
+  color: var(--ov-ui-file-tree-text-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  padding: 0;
+}
+
+.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 .15s cubic-bezier(.22, 1, .36, 1);
+}
+
+.ov-file-tree__chevron[data-expanded] {
+  transform: rotate(90deg);
+}
+
+.ov-file-tree__icon-slot {
+  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__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: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.ov-file-tree__label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ov-file-tree__description {
+  color: var(--ov-ui-file-tree-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.ov-file-tree__level {
+  color: var(--ov-ui-file-tree-text-muted);
+  flex: none;
+  margin-left: auto;
+  font-size: 14px;
+}
+
+.ov-file-tree__expiry {
+  color: var(--ov-ui-file-tree-warning);
+  flex: none;
+  font-size: 12px;
+}
+
+.ov-file-tree__expiry-action {
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.ov-file-tree__dashboard {
+  flex: none;
+  align-items: center;
+  display: inline-flex;
+}
+
+.ov-file-tree__tooltip {
+  z-index: 1;
+  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-color-tooltip-text, var(--ov-ui-tooltip-text-default, #fff));
+  pointer-events: none;
+  padding: 6px 8px;
+  font-size: 12px;
+  line-height: 18px;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+}
+
+.ov-file-tree__info {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.ov-file-tree__info-title {
+  word-break: break-all;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.ov-file-tree__info-row {
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.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;
+  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: 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: .9s linear infinite ov-file-tree-spin;
+  display: inline-block;
+}
+
+@keyframes ov-file-tree-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.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__folder-layer {
+    transition: none;
+  }
+
+  .ov-file-tree__spinner {
+    animation-duration: 2s;
+  }
+}
+