@openviking/react 0.0.0-stage → 0.1.1

package/dist/components/file-preview.js

@@ -0,0 +1,442 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, useRef, useState } from "react";
+function FilePreviewBody({ fileTab, contentTab, text, editing, loadingEdit, editFailed, saving, saveFailed, draft, onDraftChange }) {
+    const errorId = useId();
+    if (contentTab) return contentTab.content;
+    if (!fileTab) return null;
+    const { source } = fileTab;
+    if (loadingEdit) return /*#__PURE__*/ jsx("div", {
+        className: "ov-file-preview__state",
+        children: /*#__PURE__*/ jsx("span", {
+            className: "ov-file-preview__muted",
+            children: text.loading
+        })
+    });
+    if (editFailed) return /*#__PURE__*/ jsx("div", {
+        className: "ov-file-preview__state",
+        "data-tone": "error",
+        children: /*#__PURE__*/ jsx("span", {
+            className: "ov-file-preview__muted",
+            children: text.loadFailed
+        })
+    });
+    if (editing && fileTab.editing) return /*#__PURE__*/ jsxs("div", {
+        className: "ov-file-preview__editor",
+        "aria-busy": saving || void 0,
+        children: [
+            saveFailed ? /*#__PURE__*/ jsx("div", {
+                id: errorId,
+                role: "alert",
+                className: "ov-file-preview__save-error",
+                children: text.saveFailed
+            }) : null,
+            /*#__PURE__*/ jsx("textarea", {
+                className: "ov-file-preview__textarea",
+                "aria-label": text.edit,
+                "aria-describedby": saveFailed ? errorId : void 0,
+                readOnly: saving,
+                value: draft,
+                onChange: (event)=>onDraftChange(event.target.value)
+            })
+        ]
+    });
+    if ('string' != typeof source.content) return /*#__PURE__*/ jsx("div", {
+        className: "ov-file-preview__state",
+        children: fileTab.slots?.unsupportedFallback ?? /*#__PURE__*/ jsx("span", {
+            className: "ov-file-preview__muted",
+            children: source.file || source.url ? text.binaryUnsupported : text.unsupported
+        })
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: "ov-file-preview__text-body",
+        children: /*#__PURE__*/ jsx("pre", {
+            className: "ov-file-preview__pre",
+            children: source.content
+        })
+    });
+}
+function FileIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        className: "ov-file-preview__icon",
+        viewBox: "0 0 16 16",
+        width: "14",
+        height: "14",
+        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("path", {
+                d: "M9 1.5V5h3.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.2"
+            })
+        ]
+    });
+}
+function CopyIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        className: "ov-file-preview__action-icon",
+        viewBox: "0 0 16 16",
+        width: "12",
+        height: "12",
+        children: [
+            /*#__PURE__*/ jsx("rect", {
+                x: "5.5",
+                y: "5.5",
+                width: "8",
+                height: "9",
+                rx: "1.2",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.2"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M10.5 5.5v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.2"
+            })
+        ]
+    });
+}
+const DEFAULT_LABELS = {
+    copyContent: 'Copy content',
+    copyContentSuccess: 'Content copied',
+    copyContentEmpty: 'Nothing to copy',
+    copyPath: 'Copy path',
+    copyPathSuccess: 'Path copied',
+    openParent: 'Open parent directory',
+    edit: 'Edit',
+    save: 'Save',
+    cancel: 'Cancel',
+    preview: 'Preview',
+    source: 'Source',
+    retry: 'Retry',
+    loadFailed: 'Failed to load the file',
+    saveFailed: 'Failed to save',
+    unsupported: 'Preview is not supported for this format',
+    loading: 'Loading…',
+    download: 'Download',
+    binaryUnsupported: 'Binary preview requires FileViewer'
+};
+function readCopyableText(tab) {
+    const { content } = tab.source;
+    return 'string' == typeof content && content.length > 0 ? content : void 0;
+}
+async function performPreviewOperation(execute, notify) {
+    if (!execute) return;
+    try {
+        await execute();
+    } catch  {
+        return;
+    }
+    notify?.();
+}
+async function copyText(value, onCopied) {
+    try {
+        await navigator.clipboard.writeText(value);
+    } catch  {
+        return;
+    }
+    onCopied?.(value);
+}
+function FilePreviewHeader({ activeTab, fileTab, text, viewMode, editing, loadingEdit, saving, onViewModeChange, onEditStart, onEditCancel, onEditSave }) {
+    const titleExtra = activeTab.slots?.titleExtra;
+    const headerActions = activeTab.slots?.actions;
+    const path = fileTab?.source.path;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "ov-file-preview__header",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-preview__path-row",
+                children: [
+                    path ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "ov-file-preview__breadcrumb",
+                        onClick: (event)=>{
+                            event.stopPropagation();
+                            performPreviewOperation(fileTab.operations?.openParent ? ()=>fileTab.operations.openParent(path) : void 0, ()=>fileTab.onOpenParent?.(path));
+                        },
+                        disabled: !fileTab.operations?.openParent || saving,
+                        title: path,
+                        children: path
+                    }) : /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-preview__breadcrumb",
+                        children: activeTab.key
+                    }),
+                    path ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "ov-file-preview__action",
+                        "aria-label": text.copyPath,
+                        title: text.copyPath,
+                        onClick: ()=>void copyText(path, fileTab.onCopyPath),
+                        children: /*#__PURE__*/ jsx(CopyIcon, {})
+                    }) : null,
+                    titleExtra ? /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-preview__title-extra",
+                        children: titleExtra
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-preview__header-actions",
+                children: [
+                    fileTab && false !== fileTab.showViewModeSwitch ? /*#__PURE__*/ jsxs("span", {
+                        className: "ov-file-preview__switch",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "ov-file-preview__switch-item",
+                                "data-active": 'preview' === viewMode || void 0,
+                                onClick: ()=>onViewModeChange('preview'),
+                                children: text.preview
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "ov-file-preview__switch-item",
+                                "data-active": 'source' === viewMode || void 0,
+                                onClick: ()=>onViewModeChange('source'),
+                                children: text.source
+                            })
+                        ]
+                    }) : null,
+                    fileTab ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "ov-file-preview__action",
+                        "aria-label": text.copyContent,
+                        title: readCopyableText(fileTab) ? text.copyContent : text.copyContentEmpty,
+                        disabled: !readCopyableText(fileTab),
+                        onClick: ()=>{
+                            const value = readCopyableText(fileTab);
+                            if (value) copyText(value, fileTab.onCopyContent);
+                        },
+                        children: /*#__PURE__*/ jsx(CopyIcon, {})
+                    }) : null,
+                    fileTab?.editing && !editing ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "ov-file-preview__button",
+                        disabled: loadingEdit || !fileTab.editing.loadContent && void 0 === fileTab.source.content && !fileTab.source.file,
+                        onClick: onEditStart,
+                        children: text.edit
+                    }) : null,
+                    fileTab?.editing && editing ? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "ov-file-preview__button",
+                                onClick: onEditCancel,
+                                disabled: saving,
+                                children: text.cancel
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "ov-file-preview__button--primary",
+                                onClick: onEditSave,
+                                disabled: saving,
+                                children: text.save
+                            })
+                        ]
+                    }) : null,
+                    fileTab?.operations?.download ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "ov-file-preview__button",
+                        onClick: ()=>{
+                            performPreviewOperation(fileTab.operations?.download, fileTab.onDownload);
+                        },
+                        children: text.download
+                    }) : null,
+                    headerActions ? /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-preview__extra-actions",
+                        children: headerActions
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+function useFilePreviewEditing() {
+    const [editing, setEditing] = useState(false);
+    const [loadingEdit, setLoadingEdit] = useState(false);
+    const [editFailed, setEditFailed] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [saveFailed, setSaveFailed] = useState(false);
+    const [draft, setDraft] = useState('');
+    const requestId = useRef(0);
+    const loading = useRef(false);
+    const pendingSave = useRef(false);
+    function discard(tab) {
+        requestId.current += 1;
+        loading.current = false;
+        setEditing(false);
+        setLoadingEdit(false);
+        setEditFailed(false);
+        setSaveFailed(false);
+        setDraft('');
+        if (editing && 'file' === tab.kind) tab.editing?.onCancel?.(draft);
+    }
+    async function start(tab) {
+        if (loading.current || pendingSave.current) return;
+        const id = ++requestId.current;
+        loading.current = true;
+        setLoadingEdit(true);
+        setEditFailed(false);
+        setSaveFailed(false);
+        let content;
+        try {
+            content = tab.editing?.loadContent ? await tab.editing.loadContent(tab.source) : tab.source.content ?? await tab.source.file?.text();
+        } catch  {
+            if (id === requestId.current) setEditFailed(true);
+        }
+        if (id !== requestId.current) return;
+        loading.current = false;
+        setLoadingEdit(false);
+        if (void 0 !== content) {
+            setDraft(content);
+            setEditing(true);
+        }
+    }
+    async function save(tab) {
+        if (!editing || !tab.editing || pendingSave.current) return;
+        pendingSave.current = true;
+        setSaving(true);
+        setSaveFailed(false);
+        const value = draft;
+        try {
+            await tab.editing.save(value);
+        } catch  {
+            setSaveFailed(true);
+            return;
+        } finally{
+            pendingSave.current = false;
+            setSaving(false);
+        }
+        setEditing(false);
+        setDraft('');
+        tab.editing.onSave?.(value);
+    }
+    return {
+        editing,
+        loadingEdit,
+        editFailed,
+        saving,
+        saveFailed,
+        draft,
+        discard,
+        start,
+        save,
+        updateDraft: (value)=>{
+            setDraft(value);
+            setSaveFailed(false);
+        }
+    };
+}
+function isFileTab(tab) {
+    return 'file' === tab.kind;
+}
+const file_preview_FilePreview = /*#__PURE__*/ forwardRef(function({ tabs, labels, className, ...rest }, ref) {
+    const text = {
+        ...DEFAULT_LABELS,
+        ...labels
+    };
+    const [activeKey, setActiveKey] = useState(()=>tabs[0].key);
+    const [viewMode, setViewMode] = useState('preview');
+    const editor = useFilePreviewEditing();
+    const activeTab = tabs.find((tab)=>tab.key === activeKey) ?? tabs[0];
+    const tabText = {
+        ...text,
+        ...activeTab.labels
+    };
+    const fileTab = isFileTab(activeTab) ? activeTab : void 0;
+    const contentTab = isFileTab(activeTab) ? void 0 : activeTab;
+    const switchTab = (key)=>{
+        if (key === activeKey) return true;
+        if (editor.saving) return false;
+        setActiveKey(key);
+        setViewMode('preview');
+        editor.discard(activeTab);
+        return true;
+    };
+    useImperativeHandle(ref, ()=>({
+            setActiveTab: (key)=>{
+                const target = tabs.find((tab)=>tab.key === key);
+                if (!target || target.disabled) return false;
+                return switchTab(key);
+            },
+            getActiveTab: ()=>activeKey
+        }));
+    const handleTabClick = (tab)=>{
+        if (tab.disabled) return;
+        switchTab(tab.key);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...rest,
+        className: [
+            'ov-file-preview',
+            className
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                role: "tablist",
+                className: "ov-file-preview__tab-row",
+                children: tabs.map((tab)=>/*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": tab.key === activeTab.key,
+                        disabled: tab.disabled || editor.saving,
+                        className: "ov-file-preview__tab",
+                        onClick: ()=>handleTabClick(tab),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "ov-file-preview__icon-slot",
+                                children: tab.icon ?? /*#__PURE__*/ jsx(FileIcon, {})
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "ov-file-preview__tab-title",
+                                children: tab.title ?? (isFileTab(tab) ? tab.source.fileName : tab.key)
+                            })
+                        ]
+                    }, tab.key))
+            }),
+            /*#__PURE__*/ jsx(FilePreviewHeader, {
+                activeTab: activeTab,
+                fileTab: fileTab,
+                text: tabText,
+                viewMode: viewMode,
+                editing: editor.editing,
+                loadingEdit: editor.loadingEdit,
+                saving: editor.saving,
+                onViewModeChange: setViewMode,
+                onEditStart: ()=>{
+                    if (fileTab) editor.start(fileTab);
+                },
+                onEditCancel: ()=>editor.discard(activeTab),
+                onEditSave: ()=>{
+                    if (fileTab) editor.save(fileTab);
+                }
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "ov-file-preview__body",
+                children: /*#__PURE__*/ jsx(FilePreviewBody, {
+                    fileTab: fileTab,
+                    contentTab: contentTab,
+                    text: tabText,
+                    editing: editor.editing,
+                    loadingEdit: editor.loadingEdit,
+                    editFailed: editor.editFailed,
+                    saving: editor.saving,
+                    saveFailed: editor.saveFailed,
+                    draft: editor.draft,
+                    onDraftChange: editor.updateDraft
+                })
+            })
+        ]
+    });
+});
+export { file_preview_FilePreview as FilePreview };

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { FileTreeRowContext } from './file-tree-row-context.js';
+import type { FileTreeLabels, FileTreeRow } from './types.js';
+export interface FileTreeBodyProps {
+    rows: readonly FileTreeRow[];
+    isReady: boolean;
+    text: Required<FileTreeLabels>;
+    loadingFallback?: ReactNode;
+    errorFallback?: ReactNode;
+    emptyFallback?: ReactNode;
+    ctx: FileTreeRowContext;
+}
+/** 树内容区：加载中、整树失败、空态与正常行列表。 */
+export declare function FileTreeBody({ rows, isReady, text, loadingFallback, errorFallback, emptyFallback, ctx, }: FileTreeBodyProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+/** 按 DOM 顺序取出所有行元素，用于键盘上下移动焦点。 */
+export declare function queryRowElements(root: HTMLElement | null): HTMLElement[];
+/** 按行 id 找到行元素；行不在当前可见列表中时返回 `null`。 */
+export declare function findRowElement(root: HTMLElement | null, id: string): HTMLElement | null;

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

@@ -0,0 +1,6 @@
+import { type FileTreeRowContext } from './file-tree-row-context.js';
+import { type FileTreeEntryRow } from './types.js';
+export declare function FileTreeEntryRowView({ row, ctx, }: {
+    row: FileTreeEntryRow;
+    ctx: FileTreeRowContext;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+export declare function Chevron({ expanded }: {
+    expanded: boolean;
+}): import("react").JSX.Element;
+export declare function FolderIcon({ open }: {
+    open: boolean;
+}): import("react").JSX.Element;
+export declare function FileIcon(): import("react").JSX.Element;
+export declare function Spinner(): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { KeyboardEvent } from 'react';
+import type { FileTreeEntryRow } from './types.js';
+export interface FileTreeKeyHandlerOptions {
+    root: HTMLElement | null;
+    row: FileTreeEntryRow;
+    onSelect?: (row: FileTreeEntryRow) => void;
+    onToggleExpand?: (row: FileTreeEntryRow) => void;
+}
+/** 树行的键盘语义：上下移动焦点，左右展开折叠，回车与空格选中。 */
+export declare function handleRowKeyDown(event: KeyboardEvent<HTMLDivElement>, { root, row, onSelect, onToggleExpand }: FileTreeKeyHandlerOptions): void;

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

@@ -0,0 +1,5 @@
+import type { FileTreeLabels } from './types.js';
+/** 组件内置文案，宿主可通过 `labels` 逐项覆盖。 */
+export declare const DEFAULT_LABELS: Required<FileTreeLabels>;
+/** 用节点名替换文案里的 `{name}` 占位。 */
+export declare function fillName(template: string, name: string): string;

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

@@ -0,0 +1,24 @@
+import type { KeyboardEvent, ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
+import type { FileTreeEntryRow, FileTreeErrorRow, FileTreeLabels, FileTreeLoadMoreRow, FileTreeRow } from './types.js';
+/** 渲染行所需的外部输入，由组件主体注入。 */
+export interface FileTreeRowContext {
+    text: Required<FileTreeLabels>;
+    selectedId?: string | null;
+    tooltipRowId: string | null;
+    getRowAttributes?: (row: FileTreeRow) => HTMLAttributes<HTMLDivElement>;
+    renderDashboard?: (row: FileTreeEntryRow) => ReactNode;
+    renderRowTooltip?: (row: FileTreeEntryRow) => ReactNode;
+    onSelect?: (row: FileTreeEntryRow) => void;
+    onToggleExpand?: (row: FileTreeEntryRow) => void;
+    onLoadMore?: (row: FileTreeLoadMoreRow) => void;
+    onRetry?: (row: FileTreeErrorRow) => void;
+    onOpenRetentionSettings?: (uri: string) => void;
+    onRowKeyDown: (event: KeyboardEvent<HTMLDivElement>, row: FileTreeEntryRow) => void;
+    onRowEnter: (rowId: string) => void;
+    onRowLeave: () => void;
+}
+/** 行按深度缩进，其余内边距由样式负责。 */
+export declare function rowIndent(row: FileTreeRow): {
+    paddingLeft: string;
+};

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

@@ -0,0 +1,12 @@
+import { type FileTreeRowContext } from './file-tree-row-context.js';
+import { type FileTreeRow } from './types.js';
+/**
+ * 整树级失败：只有一个错误行且没有归属父节点。
+ * Whole-tree failure: a single error row that belongs to no parent.
+ */
+export declare function isWholeTreeError(rows: readonly FileTreeRow[]): boolean;
+/** 按行类型分派渲染，条目行与状态行分别处理。 */
+export declare function FileTreeRowView({ row, ctx, }: {
+    row: FileTreeRow;
+    ctx: FileTreeRowContext;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+/**
+ * 悬停停留一段时间后才展示行提示。
+ *
+ * 用 timeout 而不是 CSS 延迟，是因为提示内容由宿主渲染、需要按行 id 切换；
+ * 卸载或换行时清掉未触发的定时器，避免迟到的回调写入已失效的行。
+ */
+export declare function useRowTooltip(delay?: number): {
+    tooltipRowId: string | null;
+    show: (rowId: string) => void;
+    hide: () => void;
+};

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

@@ -0,0 +1,4 @@
+import type { FileTreeComponent } from './types.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 declare const FileTree: FileTreeComponent;

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

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