@openviking/react 0.1.0 → 0.1.2

package/dist/lk~0.js

@@ -0,0 +1,233 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { ScopeSelector, ScopeSwitcher } from "./f~0.js";
+const indices = [
+    0,
+    1,
+    2
+];
+const empty = (enabled, parentIds = [])=>({
+        options: [],
+        enabled,
+        loading: false,
+        error: null,
+        scopeKey: JSON.stringify(parentIds),
+        parentIds
+    });
+function createScopeController() {
+    const snapshots = [
+        empty(true),
+        empty(false),
+        empty(false)
+    ];
+    const listeners = indices.map(()=>new Set());
+    const requests = [];
+    let api;
+    let active = false;
+    const notify = (index)=>listeners[index].forEach((listener)=>listener());
+    const update = (index, patch)=>{
+        snapshots[index] = {
+            ...snapshots[index],
+            ...patch
+        };
+    };
+    const abort = (index)=>{
+        requests[index]?.abort();
+        requests[index] = void 0;
+    };
+    const resetDescendants = (index)=>{
+        for(let next = index + 1; next < 3; next++){
+            abort(next);
+            const ancestors = snapshots.slice(0, next).map((item)=>item.selected?.id);
+            snapshots[next] = empty(ancestors.every((id)=>void 0 !== id), ancestors.filter((id)=>void 0 !== id));
+        }
+    };
+    const load = async (index)=>{
+        if (!active || !api || !snapshots[index].enabled) return;
+        abort(index);
+        const request = new AbortController();
+        requests[index] = request;
+        update(index, {
+            loading: true,
+            error: null
+        });
+        notify(index);
+        try {
+            const libraryId = snapshots[0].selected?.id;
+            const spaceId = snapshots[1].selected?.id;
+            const options = await (0 === index ? api.loadLibraries(request.signal) : 1 === index ? api.loadSpaces(libraryId, request.signal) : api.loadUsers(libraryId, spaceId, request.signal));
+            if (!active || request.signal.aborted || requests[index] !== request) return;
+            const previous = snapshots[index].selected;
+            const selected = options.find((option)=>option.id === previous?.id && !option.disabled) ?? options.find((option)=>!option.disabled);
+            const changed = void 0 !== selected && selected.id !== previous?.id;
+            update(index, {
+                options,
+                selected,
+                loading: false,
+                error: null
+            });
+            const revoked = void 0 !== previous && void 0 === selected;
+            if (revoked || changed) resetDescendants(index);
+            notify(index);
+            if (revoked || changed) for(let next = index + 1; next < 3; next++)notify(next);
+            if (changed && index < 2) load(index + 1);
+        } catch (error) {
+            if (!active || request.signal.aborted || requests[index] !== request) return;
+            update(index, {
+                loading: false,
+                error: error instanceof Error ? error : new Error(String(error))
+            });
+            notify(index);
+        }
+    };
+    const select = (index, candidate)=>{
+        const state = snapshots[index];
+        if (!active || !state.enabled || state.loading || state.error) return;
+        const option = state.options.find((item)=>item.id === candidate.id && !item.disabled);
+        if (!option || option.id === state.selected?.id) return;
+        update(index, {
+            selected: option
+        });
+        resetDescendants(index);
+        for(let next = index; next < 3; next++)notify(next);
+        if (index < 2) load(index + 1);
+    };
+    const channel = (index)=>({
+            getSnapshot: ()=>snapshots[index],
+            subscribe: (listener)=>{
+                listeners[index].add(listener);
+                return ()=>{
+                    listeners[index].delete(listener);
+                };
+            },
+            select: (option)=>select(index, option),
+            refresh: ()=>{
+                load(index);
+            }
+        });
+    const controller = {
+        levels: [
+            channel(0),
+            channel(1),
+            channel(2)
+        ]
+    };
+    return {
+        controller,
+        start (nextApi) {
+            api = nextApi;
+            active = true;
+            indices.forEach((index)=>{
+                abort(index);
+                snapshots[index] = empty(0 === index);
+            });
+            indices.forEach(notify);
+            load(0);
+            return ()=>{
+                active = false;
+                indices.forEach(abort);
+            };
+        }
+    };
+}
+function useScopeCascade({ loadLibraries, loadSpaces, loadUsers }) {
+    const [instance] = useState(createScopeController);
+    useEffect(()=>instance.start({
+            loadLibraries,
+            loadSpaces,
+            loadUsers
+        }), [
+        instance,
+        loadLibraries,
+        loadSpaces,
+        loadUsers
+    ]);
+    return instance.controller;
+}
+function useScopeCascadeLevel(level) {
+    return useSyncExternalStore(level.subscribe, level.getSnapshot, level.getSnapshot);
+}
+function ConnectedLevel(props) {
+    const state = useScopeCascadeLevel(props.level);
+    return /*#__PURE__*/ jsx(LevelView, {
+        ...props,
+        state: state
+    }, state.scopeKey);
+}
+function LevelView({ level, state, name, labels, retryLabel }) {
+    const [keyword, setKeyword] = useState('');
+    return /*#__PURE__*/ jsx(ScopeSelector, {
+        labels: labels,
+        kind: "selectable",
+        identity: {
+            key: name,
+            ariaLabel: name
+        },
+        trigger: {
+            label: state.selected?.label ?? name,
+            icon: state.selected?.icon
+        },
+        data: {
+            selectedId: state.selected?.id ?? '',
+            total: state.options.length,
+            options: state.options,
+            visibleOptions: state.options.filter((option)=>option.label.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
+        },
+        state: {
+            disabled: !state.enabled,
+            loading: state.loading,
+            error: null !== state.error,
+            searchKeyword: keyword
+        },
+        actions: {
+            onSearchKeywordChange: setKeyword,
+            onSelect: (option)=>{
+                level.select(option);
+                setKeyword('');
+            }
+        },
+        slots: {
+            errorFallback: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    labels?.error ?? 'Unable to load options',
+                    ' ',
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: level.refresh,
+                        children: retryLabel ?? 'Retry'
+                    })
+                ]
+            })
+        }
+    });
+}
+function ScopeCascade({ controller, labels, levelNames = [
+    'Library',
+    'Space',
+    'User'
+], retryLabel, ...props }) {
+    return /*#__PURE__*/ jsxs(ScopeSwitcher, {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(ConnectedLevel, {
+                level: controller.levels[0],
+                name: levelNames[0],
+                labels: labels,
+                retryLabel: retryLabel
+            }),
+            /*#__PURE__*/ jsx(ConnectedLevel, {
+                level: controller.levels[1],
+                name: levelNames[1],
+                labels: labels,
+                retryLabel: retryLabel
+            }),
+            /*#__PURE__*/ jsx(ConnectedLevel, {
+                level: controller.levels[2],
+                name: levelNames[2],
+                labels: labels,
+                retryLabel: retryLabel
+            })
+        ]
+    });
+}
+export { ScopeCascade, useScopeCascade, useScopeCascadeLevel };

package/dist/l~0.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function FileBrowserToolbarButton({ icon, children, onClick, disabled, className, ...rest }) {
+    return /*#__PURE__*/ jsxs("button", {
+        ...rest,
+        type: "button",
+        disabled: disabled,
+        className: [
+            'ov-file-browser__toolbar-button',
+            className
+        ].filter(Boolean).join(' '),
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "ov-file-browser__toolbar-button-icon",
+                "aria-hidden": "true",
+                children: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "ov-file-browser__toolbar-button-label",
+                children: children
+            })
+        ]
+    });
+}
+function FileBrowser({ className, style, labels }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: [
+            'ov-module-placeholder',
+            className
+        ].filter(Boolean).join(' '),
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx("p", {
+                className: "ov-module-placeholder__title",
+                children: labels?.title ?? 'File browser'
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: "ov-module-placeholder__description",
+                children: labels?.description ?? 'Placeholder. Functionality is not available yet.'
+            })
+        ]
+    });
+}
+export { FileBrowser, FileBrowserToolbarButton };

package/dist/modules/console/console.d.ts

@@ -0,0 +1,4 @@
+import type { ConsoleProps } from './types.js';
+export type { ConsoleLabels, ConsoleMode, ConsoleProps, ConsoleSlots, } from './types.js';
+/** 占位组件：渲染一个带模块名的空容器，真实实现随模块 Hook 与组合视图迁入。 */
+export declare function Console({ className, style, labels }: ConsoleProps): import("react").JSX.Element;

package/dist/modules/console/index.d.ts

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

package/dist/modules/console/style.css

@@ -0,0 +1,111 @@
+.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-module-placeholder {
+  box-sizing: border-box;
+  border: 1px dashed
+    var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, currentColor));
+  border-radius: var(--ov-ui-radius, 6px);
+  min-width: 0;
+  min-height: 160px;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  display: flex;
+}
+
+.ov-module-placeholder__title {
+  margin: 0;
+}
+
+.ov-module-placeholder__description {
+  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 75%, transparent));
+  margin: 0;
+}
+
+
+

package/dist/modules/console/types.d.ts

@@ -0,0 +1,101 @@
+import type { OvRequestOptions } from '../../client/index.js';
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * 面板模式。对话与命令共用同一面板，切换时各自保留状态。
+ * Panel mode. Conversation and commands share one panel, each keeping its own
+ * state when the mode switches.
+ */
+export type ConsoleMode = 'conversation' | 'command';
+/** 交互面板模块的插槽。Slots of the console module. */
+export interface ConsoleSlots {
+    /**
+     * 面板顶部工具栏。模式切换由模块渲染，这里放宿主专属入口。
+     * Panel toolbar. The module renders the mode switch; put host-specific
+     * entries here.
+     */
+    toolbar?: ReactNode;
+    /**
+     * 对话模式下输入区上方的附加内容，例如当前资源上下文。
+     * Extra content above the composer in conversation mode, for example the
+     * current resource context.
+     */
+    conversationContext?: ReactNode;
+    /**
+     * 命令模式下的命令帮助内容。省略时由模块按宿主声明的命令生成。
+     * Command help in command mode. When omitted, the module derives it from the
+     * commands the host declares.
+     */
+    commandHelp?: ReactNode;
+}
+/** 交互面板模块的可替换文案。Replaceable copy of the console module. */
+export interface ConsoleLabels {
+    /**
+     * 占位说明。缺省为 `Placeholder. Functionality is not available yet.`。
+     * Placeholder description. Defaults to "Placeholder. Functionality is not
+     * available yet.".
+     */
+    description?: string;
+    /** 对话模式名称。Conversation mode label. */
+    conversation?: string;
+    /** 命令模式名称。Command mode label. */
+    command?: string;
+    /** 会话加载失败提示。Session load failure message. */
+    error?: string;
+    /** 重试按钮文案。Retry button label. */
+    retry?: string;
+}
+/**
+ * 交互面板模块的属性。
+ *
+ * 模块自己通过 Hook 取数，props 里没有会话与命令记录：宿主给配置、受控模式、
+ * 插槽与文案。打开资源通过回调交给宿主，与文件浏览模块的联动不依赖对方的私有
+ * 状态。
+ *
+ * Props of the console module.
+ *
+ * The module loads its own data through a Hook, so no prop carries sessions or
+ * command records: the host supplies configuration, the controlled mode, slots
+ * and copy. Opening a resource goes back to the host through a callback, and
+ * coordination with the file browser never reaches into the other module's
+ * private state.
+ */
+export interface ConsoleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'> {
+    /**
+     * 受控的当前模式。传入时由宿主决定模式，模块只上报切换意图。
+     * The controlled mode. When given, the host owns the mode and the module only
+     * reports switch intent.
+     */
+    mode?: ConsoleMode;
+    /**
+     * 非受控时的初始模式，缺省为 `conversation`。
+     * Initial mode when uncontrolled; defaults to `conversation`.
+     */
+    defaultMode?: ConsoleMode;
+    /**
+     * 模式变化后触发。
+     * Called after the mode changes.
+     */
+    onModeChange?: (mode: ConsoleMode) => void;
+    /**
+     * 资源成功打开后触发，参数为资源 URI；失败时不触发。
+     * Called after a resource opens successfully, with its URI; not called on
+     * failure.
+     */
+    onOpenUri?: (uri: string) => void;
+    /**
+     * 插槽，见 {@link ConsoleSlots}。
+     * Slots, see {@link ConsoleSlots}.
+     */
+    slots?: ConsoleSlots;
+    /**
+     * 可替换文案，缺省为英文。
+     * Replaceable copy; English by default.
+     */
+    labels?: ConsoleLabels;
+    /**
+     * 请求配置覆盖，逐字段覆盖最近的 Provider。
+     * Request configuration override, applied field by field over the nearest
+     * Provider.
+     */
+    requestOptions?: OvRequestOptions;
+}

package/dist/modules/console.js

@@ -0,0 +1 @@
+export { Console } from "../a~0.js";

package/dist/modules/file-browser/file-browser-toolbar-button.d.ts

@@ -0,0 +1,10 @@
+import type { FileBrowserToolbarButtonProps } from './types.js';
+/**
+ * 工具栏按钮。模块自己的搜索与刷新用它渲染，宿主在 `toolbarActions` 里也用它
+ * 组合入口，两边的外观因此保持一致。
+ *
+ * A toolbar button. The module renders its own search and refresh with it, and
+ * the host composes its entries with it inside `toolbarActions`, so both sides
+ * look the same.
+ */
+export declare function FileBrowserToolbarButton({ icon, children, onClick, disabled, className, ...rest }: FileBrowserToolbarButtonProps): import("react").JSX.Element;

package/dist/modules/file-browser/file-browser.d.ts

@@ -0,0 +1,6 @@
+import { FileBrowserToolbarButton } from './file-browser-toolbar-button.js';
+import type { FileBrowserProps } from './types.js';
+export { FileBrowserToolbarButton };
+export type { FileBrowserLabels, FileBrowserProps, FileBrowserToolbarButtonProps, } from './types.js';
+/** 占位组件：渲染一个带模块名的空容器，真实实现随模块 Hook 与组合视图迁入。 */
+export declare function FileBrowser({ className, style, labels }: FileBrowserProps): import("react").JSX.Element;

package/dist/modules/file-browser/index.d.ts

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

package/dist/modules/file-browser/style.css

@@ -0,0 +1,158 @@
+.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-browser__toolbar-button {
+  align-items: center;
+  gap: var(--ov-ui-space-2, 8px);
+  padding: var(--ov-ui-space-2, 8px) var(--ov-ui-space-3, 12px);
+  border-radius: var(--ov-ui-radius-sm, 4px);
+  color: var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff));
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  display: inline-flex;
+}
+
+.ov-file-browser__toolbar-button:hover:not(:disabled) {
+  background: var(--ov-ui-color-fill-hover, var(--ov-ui-fill-hover-default, #f1f2f9));
+}
+
+.ov-file-browser__toolbar-button:focus-visible {
+  outline: 2px solid
+    var(--ov-ui-color-focus, var(--ov-ui-focus-default, #5252ff));
+  outline-offset: 2px;
+}
+
+.ov-file-browser__toolbar-button:disabled {
+  color: var(--ov-ui-color-text-disabled, var(--ov-ui-text-disabled-default, #a5a7bb));
+  cursor: not-allowed;
+}
+
+.ov-file-browser__toolbar-button-icon {
+  flex: none;
+  display: inline-flex;
+}
+
+.ov-file-browser__toolbar-button-label {
+  white-space: nowrap;
+}
+
+.ov-file-browser__toolbar-actions > * + :before {
+  content: "";
+  width: 1px;
+  height: 16px;
+  margin-right: var(--ov-ui-space-2, 8px);
+  background: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.ov-module-placeholder {
+  box-sizing: border-box;
+  border: 1px dashed
+    var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, currentColor));
+  border-radius: var(--ov-ui-radius, 6px);
+  min-width: 0;
+  min-height: 160px;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  display: flex;
+}
+
+.ov-module-placeholder__title {
+  margin: 0;
+}
+
+.ov-module-placeholder__description {
+  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 75%, transparent));
+  margin: 0;
+}
+
+
+